/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

body {
  background-color: #fff;
}
/*Thanh điều hướng*/
.top-container {
    margin: 0 !important; 
}
.navbar-brand {
    padding: 0 !important;
}
.navbar {
    background-color: #f9f9f9 !important;
    border-bottom: 1px solid #ccc; 
}
.navbar .container-fluid {
    width: 90vw !important;
    margin: 0 !important;
}

/*Trang Survey List*/
.custom-survey-name h1 {
    color: #034ea2 !important;
}

/*Trang chủ*/
#welcome-container {
    max-width: none !important;
}
#welcome-container > div {
    margin-bottom: 3rem !important;
}
#welcome-container > div:last-child {
    margin-bottom: 0 !important;
}

body.survey-welcome{
    background-color: #fff !important;
}
.survey-question{
    background-color: #e1eeff;
}

/*Trang câu hỏi*/
.group-container{
    padding: 0px 16px;   
}
.group-title {
  font-size: 40px;       
  font-weight: bold;     
  color: #034ea2 ;     
  text-align: center;    
  margin-bottom: 1em !important; 
}

.question-text {
    color: #034ea2;   
    font-size: 30px;
    padding: 12px 12px 0px 22px;
}
.ls-question-text {
  color:#034ea2 !important;
  font-size: 30px; 
}
.asterisk {
    color: #FF0000;
    font-size: 13px;
}

.question-container {
  background-color: white !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 1em !important;
}
.question-help-container {
  padding: 12px 32px 24px 32px;
}
.question-valid-container {
  display: none; /*tat hien thi valid box*/
}
.form-wrapper {
  padding-top: 32px;
}
.image-card {
  width: 100%;       
  max-width: 1100px;  /* optional: prevent image from being too large */
  height: 250px;     /* fixed height */
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;    /* center if max-width is set */
}

.fixed-image {
  width: 100%;       /* match parent width */
  height: 100%;      /* match parent height */
  object-fit: cover; /* crop to fit without distortion */
}

.answer-container {
  border: none;
  background: transparent;
  outline: none;
  padding: 0px 32px 24px 32px;
}

/* here */
ul.list-unstyled .answer-item label {
  font-size: 16px;     /* limit font size */
  color: #333;         /* control text color */
  line-height: 1;    /* reduce space between lines */
}

ul.list-unstyled .radio-text-item label {
  font-size: 15px;
  color: #444;
}


textarea {
  border: none;
  border-bottom: 1px solid #d1d5db;
  border-width: 1px !important;
  padding: 8px 0;
  font-size: 16px;
  background: transparent;
  outline: none;
}
input {
  border: none !important;                     /* remove all borders */
  border-bottom: 1px solid #333 !important;    /* add just the underline */
  outline: none;                    /* remove default focus outline */
  background: transparent;          /* optional: no background */
  padding: 4px 0 !important;                   /* vertical spacing */
  font-size: 16px !important;                  /* make text clear */
}
input:focus {
  border-bottom: 2px solid #007bff;  /* thicker underline on focus */
}
.btn-primary{
    background-color: #034ea2 !important;
    border-color: #034ea2 !important;
}
#ls-button-previous{
    background-color: #f7f7f7 !important;
    border-color: #f7f7f7 !important;
}
/*Footer*/
/* Footer container */
#surveyListFooter .footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap; 
  text-align: left;
}

/* Left + Middle take more space, Right smaller */
#surveyListFooter .footer-left,
#surveyListFooter .footer-middle {
  flex: 1;
  min-width: 250px;
}

#surveyListFooter .footer-middle {
  font-size: 13px !important;
  line-height: 17px;
}

#surveyListFooter .footer-right {
  flex: 0 0 auto; /* keep logo compact */
  text-align: right;
}

/* Reduce spacing between <p> */
#surveyListFooter p {
  margin: 4px 0;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  #surveyListFooter .footer-container {
    flex-direction: column;
    gap: 16px;
  }

  #surveyListFooter .footer-right {
    text-align: left;
  }
}