/*   FILE : cakes_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 */
  .container {width: 100%;}
  /* card section*/
  .card__section{
    max-width: 350px !important;
    margin: auto !important;
    display: flex;
    flex-flow: column;
  }
  /* contact section */
  .contact__section{width: 450px;margin: auto;padding: 50px 0px;}
  .contact__caption h2{font-size:35px ;}
  /* 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: 540px;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;}
  /*  */
  .card__section{
    max-width: 400px !important;
    margin: auto !important;
    display: flex;
    flex-flow: column;
  }
  /* contact section */
  .contact__section{width: 540px;margin: auto;padding: 50px 0px;}
  .contact__caption h2{font-size:35px ;}
  /* 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;}
  /* main container */
  .container {max-width: 740px;}
  .card__section{
    max-width: 700px !important;
    margin: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  /* contact section */
  .contact__section{width: 740px;margin: auto;padding: 50px 0px;}
  .contact__caption h2{font-size:35px ;}
  /* 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;}

  /* Blog section */
  .blog__section,.blog__section .blog__section--end,.blog__section--end .blog__item{display: flex !important;flex-direction: column;}
  .blog__section--end{max-width: 960px !important;margin: auto;}
  .blog__item:first-child{flex-direction: row !important;}
  .blog__item:last-child{flex-direction: row-reverse !important;}
  .blog__item:not(:last-child){margin-bottom: 50px;}
  .blog__item .blog__content{border: 1px solid #363636!important;}
  .blog__content .blog__btn{width: 160px; text-align: center;}
  /* 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;}
}