:root {
      /* โทนสีหลัก: ฟ้า-เทา */
      --color-primary: #4A6572; /* น้ำเงิน-เทาเข้ม (สำหรับปุ่ม/ข้อความสำคัญ) */
      --color-secondary: #E0F7FA; /* ฟ้าอ่อนมาก (สำหรับพื้นหลังซ้าย) */
      --color-text-dark: #263238; /* ข้อความเข้ม */
      --color-text-light: #CFD8DC; /* ข้อความอ่อน */
      --color-white: #FFFFFF;
      --color-danger: #D32F2F; /* แดงเดิมสำหรับ Error */
    }

    body {
      font-family: 'Sarabun', sans-serif;
      height: 100vh;
      margin: 0;
      background-color: var(--color-white);
    }

    .split-container {
      display: flex;
      height: 100%;
      overflow: hidden;
    }

    /* ส่วนซ้าย: กราฟิกและชื่อระบบ */
    .left-panel {
      flex: 1; /* กินพื้นที่ครึ่งหนึ่ง */
      background-color: var(--color-secondary);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px;
      text-align: center;
    }

    .system-title {
      color: var(--color-primary);
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cartoon-graphic {
      max-width: 80%; /* ควบคุมขนาดภาพ */
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* ส่วนขวา: ฟอร์มล็อกอิน */
    .right-panel {
      flex: 1; /* กินพื้นที่ครึ่งหนึ่ง */
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--color-white);
      padding: 20px;
    }

    .login-box {
      width: 100%;
      max-width: 400px; /* จำกัดความกว้างของกล่องล็อกอิน */
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      background-color: var(--color-white);
      border: 1px solid #ECEFF1;
    }

    .login-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-text-dark);
      margin-bottom: 30px;
      text-align: center;
    }

    .form-label {
      font-weight: 500;
      color: var(--color-text-dark);
    }

    .form-control {
      border-radius: 8px;
      padding: 10px 15px;
      border-color: #CFD8DC;
    }

    .form-control:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 0.25rem rgba(74, 101, 114, 0.25); /* สี primary 30% */
    }

    .btn-primary-custom {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
      padding: 10px;
      font-size: 1.1rem;
      font-weight: 600;
      border-radius: 8px;
      transition: background-color 0.3s;
    }

    .btn-primary-custom:hover {
      background-color: #37474F; /* เข้มขึ้นเมื่อโฮเวอร์ */
      border-color: #37474F;
    }

    .small-link {
      text-align: center;
      margin-top: 20px;
      font-size: 0.95rem;
      color: var(--color-text-dark);
    }

    .small-link a {
      color: var(--color-primary);
      text-decoration: none;
      font-weight: 600;
    }

    .alert-danger {
      background-color: #FFCDD2;
      color: var(--color-danger);
      border-color: var(--color-danger);
    }

    /* สำหรับหน้าจอขนาดเล็ก (เช่น มือถือ) ให้ซ้อนกัน */
    @media (max-width: 768px) {
      .split-container {
        flex-direction: column;
      }

      .left-panel {
        height: 30vh; /* ให้ส่วนกราฟิกมีขนาดเล็กลง */
        padding: 20px;
      }

      .right-panel {
        height: auto;
        min-height: 70vh;
        padding: 20px;
      }
      
      .system-title {
          font-size: 2rem;
      }
      
      .cartoon-graphic {
          max-width: 50%;
      }
    }


  
    /* New Global Styles based on Login Design */
    :root {
      /* โทนสีหลัก: ฟ้า-เทา */
      --color-primary: #4A6572; /* น้ำเงิน-เทาเข้ม (สำหรับปุ่ม/ข้อความสำคัญ) */
      --color-secondary: #E0F7FA; /* ฟ้าอ่อนมาก (สำหรับพื้นหลังซ้าย) */
      --color-text-dark: #263238; /* ข้อความเข้ม */
      --color-text-light: #CFD8DC; /* ข้อความอ่อน */
      --color-white: #FFFFFF;
      --color-danger: #D32F2F; 
    }

    body {
      font-family: 'Sarabun', sans-serif;
      height: 100vh;
      margin: 0;
      background-color: var(--color-white);
    }

    .split-container {
      display: flex;
      height: 100%;
      overflow: hidden;
    }

    /* ส่วนซ้าย: กราฟิกและชื่อระบบ */
    .left-panel {
      flex: 1; 
      background-color: var(--color-secondary);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px;
      text-align: center;
    }

    .system-title {
      color: var(--color-primary);
      font-size: 2.5rem;
      font-weight: 700;
      margin-top: 20px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cartoon-graphic {
      max-width: 80%; 
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* ส่วนขวา: ฟอร์มสมัครสมาชิก */
    .right-panel {
      flex: 1; 
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--color-white);
      padding: 20px;
      overflow-y: auto; /* สำคัญสำหรับหน้า Register ที่เนื้อหายาวกว่า Login */
    }

    .login-box {
      width: 100%;
      max-width: 450px; 
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      background-color: var(--color-white);
      border: 1px solid #ECEFF1;
      margin: 20px 0; 
    }

    .login-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-text-dark);
      margin-bottom: 30px;
      text-align: center;
    }

    .form-label {
      font-weight: 500;
      color: var(--color-text-dark);
    }

    .form-control, .form-select {
      border-radius: 8px;
      padding: 10px 15px;
      border-color: #CFD8DC;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 0.25rem rgba(74, 101, 114, 0.25);
    }
    
    .btn-primary-custom {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
      padding: 10px;
      font-size: 1.1rem;
      font-weight: 600;
      border-radius: 8px;
      transition: background-color 0.3s;
    }

    .btn-primary-custom:hover {
      background-color: #37474F; 
      border-color: #37474F;
    }
    
    .btn-secondary { /* ปรับปุ่มย้อนกลับให้เป็นโทนเทา */
        background-color: #B0BEC5;
        border-color: #B0BEC5;
        color: var(--color-text-dark);
        font-weight: 600;
        border-radius: 8px;
    }
    .btn-secondary:hover {
        background-color: #78909C;
        border-color: #78909C;
        color: var(--color-white);
    }

    .small-link {
      text-align: center;
      margin-top: 20px;
      font-size: 0.95rem;
      color: var(--color-text-dark);
    }

    .small-link a {
      color: var(--color-primary);
      text-decoration: none;
      font-weight: 600;
    }
    
    /* สไตล์สำหรับปุ่มเปิด/ปิดตา */
    .toggle-password {
        border-radius: 0 8px 8px 0 !important;
        border-left: none !important;
        background-color: #F8F9FA !important;
        color: var(--color-primary) !important;
    }
    
    /* สไตล์สำหรับ Step Indicators */
    .step-indicator {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        position: relative;
    }
    .step-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #CFD8DC; /* เทาอ่อน */
        color: var(--color-white);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        transition: background-color 0.3s;
        position: relative;
        z-index: 2;
        margin: 0 auto;
    }
    .step-circle.active {
        background-color: var(--color-primary);
    }
    .step-line {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #CFD8DC;
        top: 15px;
        left: 0;
        right: 0;
        z-index: 1;
    }
    .step-item {
        flex: 1;
        text-align: center;
        position: relative;
    }
    
    /* การเติมสีเส้น Step Line */
    .progress-bar-fill {
        height: 100%;
        width: 0;
        background-color: var(--color-primary);
        transition: width 0.5s ease-in-out;
    }

    /* Modal Styles (ปรับสีเพื่อให้เข้ากับโทนใหม่) */
    .modal-terms {
        display: none; 
        position: fixed; 
        z-index: 1050; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0,0,0,0.4); 
    }
    .modal-content-terms {
        background-color: var(--color-white);
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%; 
        max-width: 800px;
        border-radius: 8px;
        position: relative;
    }
    .modal-content-terms h4 {
        color: var(--color-primary) !important;
    }
    .terms-body {
        max-height: 70vh;
        overflow-y: auto;
        padding: 10px;
        margin-top: 15px;
        color: var(--color-text-dark);
    }
    
    /* สำหรับหน้าจอขนาดเล็ก */
    @media (max-width: 768px) {
      .split-container {
        flex-direction: column;
      }
      .left-panel {
        height: 25vh; 
        padding: 20px;
      }
      .right-panel {
        height: auto;
        min-height: 75vh;
        padding: 20px;
      }
      .system-title {
          font-size: 2rem;
      }
      .cartoon-graphic {
          max-width: 50%;
      }
    }