@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');    
    body{
      background:linear-gradient(135deg,#FBAF2B 0%,#FFD700 100%);
      min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px;
      font-family: kanit, sans-serif;
    }
    .register-container{background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);overflow:hidden;width:100%;max-width:1000px;display:flex;min-height:700px}
    .register-image{flex:1;background:linear-gradient(135deg,#FBAF2B 0%,#FFD700 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
    .register-image::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')}
    .register-image-content{color:#fff;z-index:1;text-align:center;padding:40px}
    .register-image-content i{font-size:4rem;margin-bottom:20px;opacity:.9}
    .register-image-content h2{font-size:2rem;margin-bottom:15px;font-weight:600}
    .register-image-content p{font-size:1.1rem;opacity:.9;line-height:1.6;margin-bottom:30px}
    .feature-list{text-align:left;opacity:.9}
    .feature-list li{margin-bottom:10px;display:flex;align-items:center;gap:10px}
    .feature-list i{font-size:1rem;width:20px}

    .register-form {
  flex: none;
  width: 480px;  /* กำหนดความกว้างที่ต้องการ */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    .register-header{text-align:center;margin-bottom:30px}
    .register-header h1{color:#2c3e50;font-size:2.2rem;margin-bottom:10px}
    .register-header p{color:#666}
    .form-row{display:flex;gap:15px;margin-bottom:20px}
    .form-group{margin-bottom:20px;flex:1}
    .form-group.full-width{flex:100%}
    .form-group label{display:block;color:#333;font-weight:600;margin-bottom:6px;font-size:.9rem}
    .input-group{position:relative}
    .input-group i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#666;font-size:1rem}
    .form-control{width:100%;padding:12px 12px 12px 40px;border:2px solid #e9ecef;border-radius:8px;font-size:.95rem;outline:none;transition:all .3s ease;background:#f8f9fa}
    .form-control:focus{border-color:#FBAF2B;background:#fff;box-shadow:0 0 0 3px rgba(251,175,43,.1)}
    .form-control.error{border-color:#e74c3c}
    .form-control.valid{border-color:#27ae60}
    .error-message{color:#e74c3c;font-size:.8rem;margin-top:4px;display:none}
    .success-message{color:#27ae60;font-size:.8rem;margin-top:4px;display:none}

    .password-strength{margin-top:8px}
    .strength-bar{height:3px;background:#e9ecef;border-radius:2px;overflow:hidden;margin-bottom:5px}
    .strength-fill{height:100%;transition:all .3s ease;width:0%;background:#e74c3c}
    .strength-fill.weak{background:#e74c3c;width:25%}
    .strength-fill.fair{background:#f39c12;width:50%}
    .strength-fill.good{background:#3498db;width:75%}
    .strength-fill.strong{background:#27ae60;width:100%}
    .strength-text{font-size:.8rem;color:#666}

    .checkbox-group{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
    .checkbox-group input[type="checkbox"]{width:18px;height:18px;accent-color:#FBAF2B;margin-top:2px;flex-shrink:0}
    .checkbox-group label{color:#666;font-size:.9rem;margin:0;line-height:1.4}
    .checkbox-group a{color:#FBAF2B;text-decoration:none}
    .checkbox-group a:hover{text-decoration:underline}

    .btn-register{width:100%;padding:14px;background:linear-gradient(135deg,#FFD700 0%,#FBAF2B 100%);color:#fff;border:none;border-radius:8px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin:15px 0 20px;display:flex;align-items:center;justify-content:center;gap:10px}
    .btn-register:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(251,175,43,.3)}
    .btn-register:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}

    .register-footer{text-align:center;color:#666;font-size:.9rem;margin-top:15px}
    .register-footer a{color:#FBAF2B;text-decoration:none;font-weight:500}
    .register-footer a:hover{text-decoration:underline}

    .back-to-website{position:absolute;top:20px;left:20px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .3s ease}
    .back-to-website:hover{transform:translateX(-5px)}

    .loading{display:none;width:18px;height:18px;border:2px solid #fff;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    .success-animation{display:none;text-align:center;color:#27ae60;padding:40px}
    .success-animation i{font-size:4rem;margin-bottom:20px}
    .success-animation h3{margin-bottom:15px;font-size:1.8rem}
    .success-animation p{font-size:1.1rem;margin-bottom:25px}
    .btn-continue{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);color:#fff;padding:12px 30px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}
    .btn-continue:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(39,174,96,.3)}

    /* Responsive */
    @media (max-width:768px){
      .register-container{flex-direction:column;max-width:400px;min-height:auto}
      .register-image{display:none}
      .register-form{padding:30px 25px;max-height:none}
      .form-row{flex-direction:column;gap:0}
      .back-to-website{position:relative;top:auto;left:auto;color:#FBAF2B;margin-bottom:20px;justify-content:center}
    }
    @media (max-width:480px){.register-form{padding:25px 20px}}
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }