/* =====================================================
   COMPANY REGISTER
===================================================== */

.company-register-page {
  min-height: 100vh;
  width: 100%;

  display: flex;
  justify-content: center;

  padding:
    32px
    20px
    48px;

  box-sizing: border-box;
}


/* =====================================================
   MAIN SHELL

   Desktop:
   giới hạn gần kích thước A4
===================================================== */

.company-register-shell {

  width: 100%;
  max-width: 880px;

  margin: 0 auto;
}


/* =====================================================
   HEADER
===================================================== */

.company-register-header {

  margin-bottom: 24px;
}


/* =====================================================
   BRAND
===================================================== */

.company-brand {

  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 28px;
}


.company-brand-mark {

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 10px;

  background:
    #1976d2;

  color:
    #fff;

  font-size: 13px;
  font-weight: 700;

  letter-spacing:
    .5px;

  box-shadow:
    0 4px 12px
    rgba(25, 118, 210, .18);
}


.company-brand-text {
  min-width: 0;
}


.company-brand-title {

  font-size: 14px;
  font-weight: 600;

  color:
    #263238;
}


.company-brand-subtitle {

  margin-top: 2px;

  font-size: 11px;

  color:
    #78909c;
}


/* =====================================================
   INTRO
===================================================== */

.company-register-intro {

  text-align: center;

  max-width: 680px;

  margin:
    0 auto;
}


.company-register-intro h1 {

  margin:
    0;

  font-size:
    clamp(
      26px,
      4vw,
      34px
    );

  line-height:
    1.2;

  font-weight:
    700;

  color:
    #172b4d;
}


.company-register-intro p {

  margin:
    10px 0 0;

  font-size:
    14px;

  line-height:
    1.6;

  color:
    #607d8b;
}


/* =====================================================
   CARD
===================================================== */

.company-register-card {

  background:
    #fff;

  border:
    1px solid
    #e6ebf0;

  border-radius:
    16px;

  box-shadow:
    0 8px 30px
    rgba(30, 55, 90, .07);

  overflow:
    hidden;
}


/* =====================================================
   FORM
===================================================== */

.company-register-form {

  padding:
    30px;
}


/* =====================================================
   SECTION
===================================================== */

.company-form-section {

  padding:
    0 0 28px;

  margin-bottom:
    28px;

  border-bottom:
    1px solid
    #edf1f4;
}


.company-form-section:last-of-type {

  padding-bottom:
    0;

  margin-bottom:
    24px;

  border-bottom:
    none;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.company-section-heading {

  display: flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin-bottom:
    20px;
}


.company-section-number {

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    8px;

  background:
    #eaf3fc;

  color:
    #1976d2;

  font-size:
    11px;

  font-weight:
    700;
}


.company-section-heading h2 {

  margin:
    1px 0 3px;

  font-size:
    16px;

  line-height:
    1.3;

  font-weight:
    650;

  color:
    #263238;
}


.company-section-heading p {

  margin:
    0;

  font-size:
    12px;

  line-height:
    1.5;

  color:
    #78909c;
}


/* =====================================================
   FORM GRID

   Desktop:
   2 columns

   Tablet/mobile:
   1 column
===================================================== */

.company-form-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    20px 18px;
}


/* =====================================================
   FIELD
===================================================== */

.company-field {

  min-width:
    0;
}


.company-field-full {

  width:
    100%;
}


.company-field label {

  display:
    block;

  margin-bottom:
    7px;

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    600;

  color:
    #37474f;
}


.required {

  margin-left:
    2px;

  color:
    #d32f2f;
}


/* =====================================================
   INPUT
===================================================== */

.company-field input,
.company-field textarea {

  width:
    100%;

  box-sizing:
    border-box;

  border:
    1px solid
    #d7dee5;

  border-radius:
    9px;

  background:
    #fff;

  color:
    #263238;

  font-family:
    inherit;

  font-size:
    14px;

  outline:
    none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.company-field input {

  height:
    44px;

  padding:
    0 13px;
}


.company-field textarea {

  min-height:
    100px;

  padding:
    11px 13px;

  line-height:
    1.55;

  resize:
    vertical;
}


/* =====================================================
   PLACEHOLDER
===================================================== */

.company-field input::placeholder,
.company-field textarea::placeholder {

  color:
    #a7b3bc;
}


/* =====================================================
   FOCUS
===================================================== */

.company-field input:focus,
.company-field textarea:focus {

  border-color:
    #1976d2;

  box-shadow:
    0 0 0 3px
    rgba(
      25,
      118,
      210,
      .10
    );

  background:
    #fff;
}


/* =====================================================
   INVALID
===================================================== */

.company-field input:invalid:not(:placeholder-shown) {

  border-color:
    #e57373;
}


/* =====================================================
   HINT
===================================================== */

.company-field-hint {

  margin-top:
    5px;

  font-size:
    11px;

  line-height:
    1.45;

  color:
    #90a4ae;
}


/* =====================================================
   MESSAGE
===================================================== */

.company-register-message {

  min-height:
    20px;

  margin-bottom:
    12px;

  font-size:
    13px;

  line-height:
    1.5;
}


.company-register-message:empty {

  display:
    none;
}


/* =====================================================
   ACTIONS
===================================================== */

.company-register-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding-top:
    4px;
}


/* =====================================================
   BUTTON
===================================================== */

.company-btn {

  min-height:
    44px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  padding:
    0 20px;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .08s ease;
}


.company-btn:active {

  transform:
    translateY(1px);
}


.company-btn:disabled {

  opacity:
    .6;

  cursor:
    not-allowed;
}


/* =====================================================
   PRIMARY
===================================================== */

.company-btn-primary {

  min-width:
    170px;

  background:
    #1976d2;

  color:
    #fff;

  box-shadow:
    0 4px 12px
    rgba(
      25,
      118,
      210,
      .16
    );
}


.company-btn-primary:hover {

  background:
    #1565c0;

  box-shadow:
    0 5px 16px
    rgba(
      25,
      118,
      210,
      .22
    );
}


/* =====================================================
   SECONDARY
===================================================== */

.company-btn-secondary {

  background:
    #fff;

  border-color:
    #d7dee5;

  color:
    #546e7a;
}


.company-btn-secondary:hover {

  background:
    #f7f9fb;

  border-color:
    #c5d0d8;
}


/* =====================================================
   FOOTER
===================================================== */

.company-register-footer {

  margin-top:
    18px;

  padding-top:
    16px;

  border-top:
    1px solid
    #edf1f4;

  text-align:
    center;

  font-size:
    11px;

  line-height:
    1.5;

  color:
    #90a4ae;
}


/* =====================================================
   TABLET
===================================================== */

@media (
  max-width: 700px
) {

  .company-register-page {

    padding:
      24px
      14px
      36px;

  }


  .company-register-form {

    padding:
      24px
      20px;

  }


  .company-form-grid {

    grid-template-columns:
      1fr;

    gap:
      18px;

  }


  .company-register-header {

    margin-bottom:
      20px;

  }


  .company-brand {

    margin-bottom:
      22px;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (
  max-width: 480px
) {

  .company-register-page {

    padding:
      18px
      10px
      28px;

  }


  .company-register-card {

    border-radius:
      12px;

  }


  .company-register-form {

    padding:
      20px
      16px;

  }


  .company-brand {

    gap:
      9px;

  }


  .company-brand-mark {

    width:
      38px;

    height:
      38px;

    border-radius:
      9px;

  }


  .company-brand-title {

    font-size:
      13px;

  }


  .company-register-intro h1 {

    font-size:
      26px;

  }


  .company-register-intro p {

    font-size:
      13px;

  }


  .company-section-heading {

    gap:
      9px;

  }


  .company-section-number {

    width:
      28px;

    height:
      28px;

  }


  .company-register-actions {

    flex-direction:
      column-reverse;

    align-items:
      stretch;

  }


  .company-btn {

    width:
      100%;

  }


  .company-btn-primary {

    width:
      100%;

  }

}