/* โทนสีหลักจาก main.php */
    :root {
        --main-color: #0d6efd;
        /* primary */
        --secondary-color: #198754;
        /* success */
        --bg-color: #f8f9fa;
        --card-bg: #ffffff;
        --card-radius: 12px;
      }
  
      body {
        background-color: var(--bg-color);
      }
  
      .form-container {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 60px auto;
        /* spacing ด้านบน */
      }
  
      .toggle-btns {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 25px;
      }
  
      .toggle-btns button {
        flex: 1;
        font-weight: 500;
        padding: 10px;
        border-radius: 50px;
        transition: all 0.3s ease;
      }
  
      .toggle-btns button.active {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }
  
      .form-card {
        position: absolute;
        width: 100%;
        padding: 30px;
        background-color: var(--card-bg);
        border-radius: var(--card-radius);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        transition: all 0.6s ease;
      }
  
      .hidden {
        opacity: 0;
        transform: translateY(30px);
        pointer-events: none;
      }
  
      .visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }
  
      .form-card h5 {
        font-weight: 600;
      }
  
      .form-card .btn {
        border-radius: 50px;
        padding: 10px;
        font-weight: 500;
        transition: transform 0.2s ease;
      }
  
      .form-card .btn:hover {
        transform: scale(1.03);
      }
  
      .login-link {
        display: inline-block;
        color: var(--main-color);
        /* ใช้สีหลักของเว็บ */
        font-weight: 500;
        text-decoration: none;
        position: relative;
        padding-bottom: 2px;
        transition: all 0.3s ease;
      }
  
      .login-link::after {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        left: 0;
        bottom: 0;
        background-color: var(--main-color);
        transition: width 0.3s ease;
      }
  
      .login-link:hover::after {
        width: 100%;
      }
  
      .login-link:hover {
        color: var(--main-color);
        transform: scale(1.05);
      }
  
      /* Responsive spacing */
      @media (max-width: 576px) {
        .form-container {
          margin: 30px 15px;
        }
  
        .toggle-btns {
          flex-direction: column;
        }
      }