label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }
    .box {
        padding: 20px;
        background-color: #fbfbfb;
        border: 1px dashed #d1d1d1;
        border-radius: 10px;
    }
    input {
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 8px;
      border: 1.8px solid #ccc;
      transition: border-color 0.25s ease;
      outline-offset: 2px;
      outline-color: transparent;
      font-weight: 500;
      color: #222;
      user-select: text;
      cursor: text;
    }
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L7 7L13 1' stroke='%23000' stroke-width='2'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 10px center; /* ขยับลูกศรมาทางซ้าย 10px จากขอบขวา */
      background-size: 14px 8px;
      padding-right: 40px; /* เว้นที่ขวาสำหรับลูกศร */
      cursor: pointer;
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 8px;
      border: 1.8px solid #ccc;
      transition: border-color 0.25s ease;
      outline-offset: 2px;
      outline-color: transparent;
      font-weight: 500;
      color: #222;
      user-select: text;
    }
    .result {
      margin-top: 2rem;
      background: #ebebeb;
      padding: 1rem;
      border-radius: 8px;
    }
    button.calculate-btn {
        background-color: #fdc620;
        color: #43413d;
        cursor: pointer !important;
        padding: 10px 25px;
        letter-spacing: .1em;
        user-select: none;
        right: 10px;
        float: right;
        margin-top: 15px;
    }
    button:hover {
        background-color: #ffd863;
        color: #43413d;
    }
    .toggle-group {
      display: flex;
      justify-content: center;
      margin: 15px 0;
    }
    .toggle-btn {
      padding: 10px 20px;
      cursor: pointer;
      background: #ffffff;
      border: 2px solid #634fa1;
      border-radius: 6px;
      margin: 0 5px;
      color: #3a3f52;
    }
    .toggle-btn.active {
      background: #634fa1;
      color: white;
      border-color: #634fa1;
    }
    @media (max-width: 480px) {
      h2 {
        font-size: 1.2rem;
      }
      input, select, button {
        font-size: 0.95rem;
      }
      .toggle-btn {
        flex: 1;
        text-align: center;
      }
    }