/* ================= MOBILE FIRST ================= */
.container-setting {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Mobile rất nhỏ (≤ 320px) */
@media (max-width: 320px) {
    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    .form-title {
       padding-bottom: 12px;
    }

    .input--form-mb {
       padding-bottom: 14px;
    }

    .interpretation-header {
       margin-bottom: 18px;
    }

    .box-card-title {
       margin-bottom: 8px;
    }

    .container-setting {
       padding-left: 8px;
       padding-right: 8px;
       width: 100%;
       box-sizing: border-box;
    }

    .intro--title-tuvilagi {
       font-size: 32px;
    }
}

/* Mobile phổ thông (321px - 480px) */
@media (min-width: 321px) and (max-width: 480px) {
   .container-setting {
      padding: 0 1rem;
   }

   .form-title {
      padding-bottom: 20px;
   }

   .input--form-mb {
      padding-bottom: 18px;
   }

   #submitBtn {
      margin-top: 30px;
   }

   .interpretation-header {
      margin-bottom: 18px;
   }

   .box-card-title {
      margin-bottom: 8px;
   }

   .intro--title-tuvilagi {
      font-size: 32px;
   }
}

/* Phablet & Tablet dọc (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
   .container-setting {
      max-width: 720px;
      padding: 0 1.5rem;
   }

   .form-title {
      padding-bottom: 26px;
   }

   .input--form-mb {
      padding-bottom: 18px;
   }

   .interpretation-header {
      margin-bottom: 20px;
   }

   .box-card-title {
      margin-bottom: 8px;
   }

   .intro--title-tuvilagi {
      font-size: 32px;
   }
}


/* ================= LAPTOP & DESKTOP CHUẨN ================= */

/* Laptop & Desktop (769px - 1440px) */
@media (min-width: 769px) {
   .container-setting {
      max-width: 1320px;
      padding: 0 2rem;
   }

   .form-title {
      padding-bottom: 36px;
   }

   .input--form-mb {
      padding-bottom: 26px;
   }

   #submitBtn {
      margin-top: 16px;
   }

   .box-card-description {
      font-size: 18px;
      max-width: 350px;
   }

   .interpretation-header {
      margin-bottom: 32px;
   }

   .intro--title-tuvilagi {
      font-size: 42px;
   }
}


/* ================= DESKTOP LỚN / 2K ================= */

@media (min-width: 1441px) and (max-width: 1920px) {
   .container-setting {
      max-width: 1520px;
   }

   .form-title {
      padding-bottom: 36px;
   }

   .input--form-mb {
      padding-bottom: 26px;
   }

   #submitBtn {
      margin-top: 16px;
   }

   .interpretation-header {
      margin-bottom: 32px;
   }

   .box-card-description {
      font-size: 18px;
      max-width: 350px;
   }

   .interpretation-header {
      margin-bottom: 32px;
   }

   .intro--title-tuvilagi {
      font-size: 42px;
   }

}


/* ================= MÀN HÌNH RẤT LỚN (4K & 8K) ================= */

/* 4K (≥ 1920px) */
@media (min-width: 1920px) {
   .container-setting {
      max-width: 1650px;
   }

   .form-title {
      padding-bottom: 42px;
   }

   .input--form-mb {
      padding-bottom: 26px;
   }

   #submitBtn {
      margin-top: 16px;
   }

   .interpretation-header {
      margin-bottom: 32px;
   }

   .box-card-description {
      font-size: 18px;
      max-width: 350px;
   }

   .interpretation-header {
      margin-bottom: 32px;
   }

   .intro--title-tuvilagi {
      font-size: 42px;
   }

}