/* ==============================================

  Register Page Styles

  ==============================================

*/

.section-page-register {
  background-color: white;

  /* padding: 2.0833333333rem; */
}

.section-page-register .box-white {
  /* max-width: 30rem; */

  width: 100%;

  margin: 0 auto;

  /* padding: 2.0833333333rem; */
}

.section-page-register .title-form {
  color: var(--color-primary);

  font-size: 2.25rem;

  font-weight: 700;

  text-align: center;

  margin-bottom: 3rem;
}

/* .section-page-register .custom_registration_form {
  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 1.0416666667rem;
} */

.phone-input-container {
  width: 100%;
}

.section-page-register .form-row {
  grid-column: 1 / -1;

  margin-bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: stretch;

}

.section-page-register .custom_registration_form .form-row:first-child,
.section-page-register .custom_registration_form .form-row:nth-child(2) {
  flex-basis: 40%;
}

/* Make specific fields span both columns */

.section-page-register .custom_registration_form .form-row-wide:first-child,

/* Tên đăng nhập */

.section-page-register .custom_registration_form p:has(#reg_ma_so_thue),

.section-page-register .custom_registration_form .woocommerce-form-row.form-row {
  /* Button */

  grid-column: 1 / -1;
}

.section-page-register .form-row label {
  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #333;

  font-size: 0.95rem;

  text-align: left;
}

.section-page-register .form-row .required {
  color: var(--color-primary);
}

.section-page-register .input-text,
.section-page-register select {
  width: 100%;

  padding: 0 1rem;

  border: 1px solid var(--color-gray-e5);

  border-radius: 8px;

  font-size: 1rem;

  transition: border-color 0.3s, box-shadow 0.3s;

  box-sizing: border-box;

  background-color: white;
}

.section-page-register .input-text:focus,
.section-page-register select:focus {
  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px rgba(183, 33, 38, 0.1);
}

.section-page-register .woocommerce-Button.button {
  background-color: var(--color-primary);

  color: var(--color-secondary);

  border: none;

  width: 100%;

  padding: 1rem;

  font-weight: 600;

  border-radius: 8px;

  cursor: pointer;

  transition: background-color 0.3s;

  height: clamp(48px, 2.5rem, 2.5rem);
}

.section-page-register .woocommerce-Button.button:hover {
  background-color: #9e1c21;
}