/* CSS Document */



/***********************************************************/
/************************** Home ***************************/


.boxHome--banner{ position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); color: var(--white); text-align: center; z-index: 9; }
.boxHome--banner h1{ font-size: 90px; }
.boxHome--banner .boxHome--text{ font-size: 30px; font-style: italic; }



@media (max-width: 1199px){

  .boxHome--banner h1{ font-size: 80px; }
  .boxHome--banner .boxHome--text{ font-size: 26px; }

}
@media (max-width: 767px){

  .boxHome--banner h1{ font-size: 70px; }
  .boxHome--banner .boxHome--text{ font-size: 22px; }

}
@media (max-width: 576px){

  .boxHome--banner h1{ font-size: 54px; }
  .boxHome--banner .boxHome--text{ font-size: 18px; }

}



.boxHome--about{ background-color: var(--Orange-50); }

.boxHome--about-container{ position: relative; margin: 100px 0; display: flex; align-items: center; justify-content: space-between; }
.boxHome--about-container .imghome-left,
.boxHome--about-container .imghome-right{ width: 300px; }
.boxHome--about-container .imghome-left img{ border-top-right-radius: 30px; border-bottom-right-radius: 30px; }
.boxHome--about-container .imghome-right img{ border-top-left-radius: 30px; border-bottom-left-radius: 30px; }


.boxHome--about-content{ width: 90%; margin: 0 auto; text-align: center; color: var(--primary); }
.boxHome--about-content h2{ font-size: var(--txt-h1); margin-bottom: 20px; }
.boxHome--about-content p{ font-size: var(--txt-h3); max-width: 520px; margin: 0 auto 30px; }


@media (max-width: 1199px){

  .boxHome--about-container .imghome-left,
  .boxHome--about-container .imghome-right{ width: 250px; }
  .boxHome--about-content p{ max-width: 420px; }

}
@media (max-width: 991px){

  .boxHome--about-container{ margin: 60px 0; }
  .boxHome--about-container .imghome-left,
  .boxHome--about-container .imghome-right{ width: 200px; }
  .boxHome--about-content p{ max-width: 320px; }

}
@media (max-width: 767px){

  .boxHome--about-container{ margin: 60px 0; }
  .boxHome--about-container .imghome-left,
  .boxHome--about-container .imghome-right{ display: none; }
  .boxHome--about-content p{ max-width: 320px; }

}




.boxHome--cover-container{ position: absolute; top: 20%; left: 0; text-align: center; color: var(--white); width: 100%; text-align: center; z-index: 9; padding: 0 20px; }
.boxHome--cover-container.align-center{ top: 50%; transform: translateY(-50%); }


.boxHome--cover-imgvdo{ height: 600px; line-height: 0; }
.boxHome--cover-imgvdo img,
.boxHome--cover-imgvdo video{ object-fit: cover; object-position: center; width: 100%; height: 100%; }

.boxHome--cover-picture{ line-height: 0; }
.boxHome--cover-picture img,
.boxHome--cover-picture video{ display: block; width: 100%; }
/* .boxHome--cover-imgvdo picture{ height: 100%; display: block; }
.boxHome--cover-imgvdo picture img{ max-width: 100%; height: auto; } */

.imgpc{ display: block; }
.imgmobi{ display: none; }

@media (max-width: 1599px){

  .boxHome--cover-imgvdo{ height: 500px; }

}
@media (max-width: 576px){

  .imgpc{ display: none; }
  .imgmobi{ display: block; }

  /* .boxHome--cover-picture{ height: auto; }
  .boxHome--cover-picture picture{ height: auto; } */

}
/* @media (min-width: 577px){

  .boxHome--cover-imgvdo picture img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }

} */




.madeeasy-right{ position: absolute; top: 80px; right: 0; }
.madeeasy-left{ position: absolute; bottom: 80px; left: 0; }

@media (max-width: 767px){

  .madeeasy-right, .madeeasy-left{ display: none; }

}

/* .title--whatnew{ text-align: center; margin-bottom: 50px; color: var(--primary); }
.title--whatnew h2{ font-size: var(--txt-h1); margin-bottom: 20px; }
.title--whatnew p{ font-size: 18px; }

@media (max-width: 767px){

  .title--whatnew h2{ font-size: 36px; }

} */



.card--news-img{ margin-bottom: 10px; }
.card--news-img img{ border-radius: 24px; }
.card--news .titlenews{ 
  font-family: var(--font-detail); font-size: var(--txt-h3); line-height: 1.3; font-weight: 700; color: var(--Purple-900); margin-bottom: 10px; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--news p{ 
  color: var(--Purple-900); margin-bottom: 10px; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-date{ font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--Purple-400); }


.slide--news .owl-carousel .owl-nav{ top: calc(50% - 50px); }



.modal--news{ max-width: 1080px; width: 80%; }
.modal--news .modal-content{ padding: 60px 20px; border: 0; border-radius: 24px; overflow: hidden; }
.closex{ position: absolute; top: 30px; right: 30px; z-index: 9; }
.closex img{ filter: var(--filter-grey200); }
.modal--news .modal-content .modal-body{ padding: 0; }

.news--article{ max-width: 800px; width: 90%; margin: 0 auto; }
.news--article .news--img{ margin-bottom: 30px; aspect-ratio: 3/1.65; overflow: hidden; border-radius: 24px }
.news--article .news--img img{ border-radius: 24px; object-fit: cover; object-position: center; width: 100%; height: 100%; }
.news--article h2{ font-size: var(--txt-h2); color: var(--primary); margin-bottom: 10px; }
.news--article ul{ list-style: disc; }
.news--article ol{ list-style: decimal; }
.news--article ul, .news--article ol{ margin-left: 20px; margin-bottom: 30px; }
.news--article ul:last-child, .news--article ol:last-child{ margin-bottom: 0; }



@media (max-width: 991px){

  .modal--news .modal-content{ padding: 50px 20px; }
  .closex{ position: absolute; top: 20px; right: 20px; }

}
@media (max-width: 576px){

  .modal--news{ width: auto; }
  .modal--news .modal-content{ padding: 0 0 30px 0; }
  .modal--news .closex img{ filter: var(--filter-white); }
  .closex img{ width: 20px; height: 20px; }
  .news--article{ width: 100%; }
  .news--article .news--img{ aspect-ratio: auto; border-radius: 0; }
  .news--article .news--img img{ border-radius: 0; }
  .news--article article{ width: 90%; margin: 0 auto; }

}



/**********************************************************/
/**********************************************************/



.mapdetail{ display: flex; flex-flow: row wrap; margin-bottom: 50px; }

.mapdetail-img{ max-width: 90%; margin: 30px auto 0;}
.mapdetail-text p{ font-size: var(--txt-detail);}


.map--desktop{ display: block; }
.map--mobile{ display: none; }
@media (max-width: 991px) {
  .map--desktop{ display: none; }
  .map--mobile{ display: block; }
}




.imagemap {position: relative;}
.imagemap img {display: block;}



.modal-dialog.modal--where{ max-width: 800px; width: 90%; }
@media (max-width: 576px) {
  .modal-dialog.modal--where{ width: auto; }
}


.map { color: #333; }
.map h4 { text-align: center; font-size: 58px; margin-bottom: 40px; }
@media (max-width: 767px) {
  .map h4 { font-size: 48px; } 
}
@media (max-width: 540px) {
  .map h4 { font-size: 40px; } 
}

.map ul {
  display: flex; align-items: center; flex-flow: row wrap;
  justify-content: center;
  gap: 15px; 
}
.map ul li a{
  font-size: 16px; color: var(--Purple-700); background-color: var(--Purple-100);
  padding: 4px 20px; border-radius: 20px; display: block; text-align: center; min-width: 100px;
}
.map ul li a:hover,
.map ul li a.active { color: var(--Purple-50); background-color: var(--Purple-800); }
.map__img-bg {
  position: relative;
  padding: 50px 6% 0; 
}
@media (max-width: 540px) {
  .map__img-bg { padding: 30px 6% 0; } 
}
.map__img-bg .closex { right: 10%; }
@media (max-width: 767px) {
  .map__img-bg .closex { top: 10%; right: 5%; } 
}


.store-location {
  width: 90%; padding: 40px; border-radius: 24px;
  background-image: url('../images/map/bg-map.png'); background-repeat: no-repeat; background-position: center;
  margin-left: auto;
  margin-right: auto; 
}
@media (max-width: 767px) {
  .store-location { width: 100%; padding: 30px; } 
}

.store-location h4 {
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: var(--txt-h1); color: var(--primary);
}

.store-location ul {
  list-style: disc; 
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3; 
  margin: 37px 40px; padding-left: 20px; 
}
.store-location ul li{ font-size: var(--txt-detail); color: var(--primary); }
@media (max-width: 767px) {
  .store-location ul {
    padding: 0px 0 0 20px; margin: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2; 
  } 
}


.store-location ol li {  list-style: decimal; margin-bottom: 15px; }





/**********************************************************/
/**********************************************************/