/*   FILE : contact_res.css
       @IT Lecturer: Thay Vu Duy Linh
       Craetor : Chau Thai - B2005731, thaib2005731@student.ctu.edu.vn
       @Created : 16 - Nov - 2022  
*/
/*--------------------------------------------------- MOBILE break point-----------------------------------------*/
@media only screen and (max-width:600px){
  /* header banner */
  .header__banner {margin: 0% !important;flex-flow: row-reverse;}
  .header__banner .banner__social-icon {display: none;}
  .header__banner .banner__logo {padding: 0px;}
  .header__form-search {width: 100% !important;padding:0px 20px;}
  .header__form-search  form input{width: 100% !important;}
  /* header navigation */
  .page__header  .header__nav--pc{display: none;}
  .page__header .header__nav .header__nav--respon {justify-content: flex-start;}
  .menu__dropdown .dropdown__link{text-align: center;}
  /* main */
  .page__main .slide__section {height: 250px;}
  .slide__section .slide__caption {max-width: 100%;grid-template-columns: 1fr 1fr;align-self: start !important;}
  .slide__caption .slide__title{font-size: 35px;font-weight: 400;color: #fff;margin-bottom: 10px;}
  /* main container */
  .page__main .map__address{width: 450px!important; padding: 20px 0px;}
  
  /* form control */
  .form__control{width: 95%;margin: auto !important; display: flex !important; flex-direction: column; padding-top: 50px;}
  .form__group{display: flex !important;flex-direction: column;}
  .group__item--left{margin-bottom: 50px;}
  /* footer */
  .page__footer{display: flex !important;flex-direction: column;}
  .footer__menu{flex-flow: column;margin-top: 40px;align-items: start !important;}
  .footer__img--logo{padding-left: 20px;}
  .footer__contact--info{
    grid-template-columns: auto;
    grid-template-rows: repeat(3,auto) !important;
    row-gap: 10px;
  }
  .contact__social > .social__item {padding: 10px !important;}
  .contact__social > .social__item > a{font-size: 15px;}
  .contact--info-middle,.contact--info-right{padding: 10px 20px;}
  .footer__license{font-size: 15px; text-align: center;}
}
/*------------------------------------- TABLET break point ---------------------*/
@media only screen and (601px <= width <= 768px){
  /* header banner */
  .header__banner {margin: 0% !important;}
  .header__banner .banner__social-icon {display: none;}
  .header__banner .banner__logo {padding: 0px;}
  .header__form-search {width: 100% !important;padding:0px 20px;}
  .header__form-search  form input{width: 100% !important;}
  /* header navigation */
  .page__header  .header__nav--pc{display: none;}
  /* main */
  .page__main>.slide__section {height: 300px;}
  .slide__section .slide__caption {max-width: 100%;grid-template-columns: 1fr 1fr;align-self: start !important;}
  .slide__caption .slide__title{font-size: 58px;font-weight: 300;color: #fff;margin-bottom: 10px;}
  /* main container */
  .container {max-width: 540px;}
  .page__main .map__address{width: 540px!important; padding: 50px 0px;}
  
  /* form control */
  .form__control{width: 90%;margin: auto !important; display: flex !important; flex-direction: column; padding-top: 50px;}
  .form__group{display: flex !important;flex-direction: column;}
  .group__item--left{margin-bottom: 50px;}
  
  /* footer */
  .page__footer{display: flex !important;flex-flow: column}
  .footer__menu{margin-top:40px;flex-flow:column;align-items:flex-start;}
  .footer__img--logo img{padding-left: 20px !important;}
  .footer__contact--info{grid-template-columns: auto;grid-template-rows: repeat(3,auto) !important;row-gap: 10px;}
  .contact__social .social__item {padding: 10px !important;}
  .contact__social .social__item a{font-size: 15px;}
  .contact--info-middle,.contact--info-right{padding: 10px 20px;}
  .footer__license{font-size: 15px;text-align:center;}
}
/*-------------------------------------------------- LAPTOP break point--------------------------------------- */
@media only screen and (769px <= width <= 992px){
  .header__nav--pc{display: none !important;}
  /* header banner */
  .header__banner {margin: 0% !important;}
  .header__banner .banner__logo {padding: 0px;}
  .header__form-search {width: 100% !important;padding:0px 20px;}
  .header__form-search  form input{width: 100% !important;}
  /* header navigation */
  .page__header  .header__nav--pc{display: none;}
  .page__header .header__nav--respon{display: flex;justify-content: start !important;}
  /* main */
  .page__main .slide__section {height: 300px;}
  .slide__section .slide__caption {max-width: 740px !important;grid-template-columns: 1fr 1fr;align-self: start !important;}
  .slide__caption .slide__title{font-size: 75px;line-height: 1.2;font-weight: 400;color: #fff;margin-bottom: 40px;}
  .page__main .map__address{width: 740px!important; padding: 50px 0px;}
  /* form controk */
  /* form control */
  .form__control{width: 600px;margin: auto !important; display: flex !important; flex-direction: column; padding-top: 50px;}
  .form__group{display: flex !important;flex-direction: column;}
  .group__item--left{margin-bottom: 50px;}
  /* footer */
  .page__footer{display: flex !important;flex-flow: column}
  .footer__menu{margin-top:40px;flex-flow:column;align-items:flex-start;}
  .footer__img--logo img{padding-left: 20px !important;}
  .footer__contact--info{grid-template-columns:repeat(3,auto) !important;grid-template-rows: auto;column-gap: 10px;}
  .contact__social .social__item {padding: 10px !important;}
  .contact__social .social__item a{font-size: 15px;}
  .social__item a i{display: block;}
  .contact--info-middle,.contact--info-right{padding: 10px 20px;}
  .footer__license{font-size: 15px;text-align:center;}
}
/*--------------------------------------------------- DESKTOP break point ------------------------------------*/
@media only screen and (993px <= width <= 1200px){
  /* main */
  .slide__section .slide__caption{max-width:960px !important; margin: auto; grid-template-columns: 900px;}
  .container{max-width: 960px;}
  .page__main .map__address{width: 940px!important; padding: 50px 0px;}
  .form__control {max-width: 940px !important; margin: auto !important ; padding-top: 50px;}
  .form__group{display: flex !important;flex-direction: row;}
  .group__item--left{margin-bottom: 50px;}
  /* footer */
  .footer__img--logo img{padding-left: 20px !important;}
}
@media only screen and (min-width:993px){
  /* header nav pc */
  .header__nav--respon{display: none !important;}
}