*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}.header{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:30px;margin-bottom:30px;text-align:center;border:1px solid rgba(255,255,255,.2)}.header h1{color:#fff;font-size:2.5em;margin-bottom:10px;text-shadow:0 4px 8px rgba(0,0,0,.3)}.header p{color:#ffffffe6;font-size:1.2em}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}.stat-card{background:#fffffff2;border-radius:15px;padding:25px;text-align:center;box-shadow:0 4px 20px #0000001a;transition:transform .3s,box-shadow .3s}.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #667eea4d}.stat-number{font-size:2em;font-weight:700;color:#667eea}.stat-label{color:#718096;margin-top:5px}.main-content{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin-bottom:30px}.packages-section,.admin-panel{background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.section-title{font-size:1.8em;margin-bottom:20px;color:#4a5568;border-bottom:3px solid #667eea;padding-bottom:10px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:20px;margin-top:20px}.package-card{background:linear-gradient(135deg,#f7fafc,#edf2f7);border-radius:15px;padding:25px;border:2px solid transparent;transition:all .3s ease;position:relative;overflow:hidden}.package-card:hover{transform:translateY(-5px);border-color:#667eea;box-shadow:0 10px 30px #667eea4d}.package-card.popular{border-color:#f6ad55;background:linear-gradient(135deg,#fed7aa,#fdba74)}.package-card.popular:before{content:"แนะนำ";position:absolute;top:-10px;right:-10px;background:#f6ad55;color:#fff;padding:5px 20px;border-radius:20px;font-size:12px;font-weight:700;transform:rotate(15deg)}.package-name{font-size:1.4em;font-weight:700;color:#2d3748;margin-bottom:10px}.package-price{font-size:2em;font-weight:700;color:#667eea;margin-bottom:15px}.package-features{list-style:none;margin-bottom:20px}.package-features li{border-bottom:1px solid rgba(0,0,0,.1);position:relative;padding:8px 0 8px 25px}.btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 24px;border:none;border-radius:25px;cursor:pointer;font-size:16px;font-weight:700;transition:all .3s ease;width:100%;text-transform:uppercase}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:700;color:#4a5568}.form-group input,.form-group select{width:100%;padding:10px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;transition:border-color .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background-color:#fff;margin:5% auto;padding:30px;border-radius:20px;width:90%;max-width:500px;box-shadow:0 20px 60px #0000004d}.close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close:hover{color:#000}@media (max-width: 1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.stats-grid,.main-content{grid-template-columns:1fr}.header h1{font-size:2em}.package-grid{grid-template-columns:1fr}}.aside-menu{background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);width:300px;height:fit-content}.section-title{font-size:1.8em;margin-bottom:20px;color:#4a5568;border-bottom:3px solid #667eea;padding-bottom:10px;text-align:center}.menu-buttons{display:flex;flex-direction:column;gap:15px}.menu-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px 20px;border:none;border-radius:15px;cursor:pointer;font-size:16px;font-weight:700;transition:all .3s ease;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.menu-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.menu-btn:active{transform:translateY(0)}.menu-btn.login{background:linear-gradient(135deg,#48bb78,#38a169)}.menu-btn.login:hover{box-shadow:0 5px 15px #48bb7866}.menu-btn.topup{background:linear-gradient(135deg,#f6ad55,#ed8936)}.menu-btn.topup:hover{box-shadow:0 5px 15px #f6ad5566}.menu-btn.contact{background:linear-gradient(135deg,#9f7aea,#805ad5)}.menu-btn.contact:hover{box-shadow:0 5px 15px #9f7aea66}.menu-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.menu-btn:hover:before{left:100%}.btn-icon{font-size:1.2em}.btn-text{font-size:1em}.remember-me{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.remember-me input[type=checkbox]{width:16px;height:16px;cursor:pointer}