* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
/* header{
    display: flex;
    justify-content: center;
} */
.container {
  width: 75%;
  margin: 0 auto;
}
/* start header */
header {
  position: absolute;
  width: 100%;
}
.header_container {
  display: flex;
  /* flex : vào thẻ cha để di chuyển thẻ con */
  height: 80px;
  /* flex-dỉrection: colum; */
  /* mặc định trục chính là chiều ngang */
  /* justify-content ~ trục chính */
  justify-content: space-between;
  /* align-items ~ trục phụ */
  align-items: center;
}
.header_container .logo {
  font-size: 30px;
}

.header_container a {
  text-decoration: none;
  font-size: 22px;
  margin-left: 20px;
  color: white;
  transition: 0.3s;
}
.header_container nav a:hover {
  color: #e62b4a;
}
.header_container a.active {
  color: #e62b4a;
}
/* End header */
/* start banner */
.banner {
  background-image: url(./image-video/home_slider.jpg);
  height: 700px;
  min-height: 500px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner_container {
  text-align: center;
  color: white;
}
.banner_container button {
  color: white;
  border: none;
  background: #e62b4a;
  padding: 15px 25px;
  transition: 0.3s;
  cursor: pointer;
}
.banner_container button:hover {
  background: #af2239;
}
.banner_container h2 {
  font-style: 30px;
}
.banner_container p {
  font-size: 75px;
  font-weight: 700;
  margin: 20px 0px;
}
.banner_container i {
  margin-top: 50px;
  font-size: 30px;
  color: white;
  animation-name: animateArrow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
/* end banner */

/* start carousel */
.carousel{
    background: black;
    padding: 80px 0px;
}
.carousel_content {
  color: white;
  text-align: center  ;
}
.carousel_content p.first{
  color: #af2239;
}
.carousel_content h1{
  font-size: 50px;
}
.carousel_content p.last{
  color: #888888;
  font-weight: bold;
  font-size: 20px;
  margin: 30px;
}
.carousel_item{
    padding: 0 10px;
}
.carousel_item .item_container{
    background: white;
    color: #888888;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    position: relative;
}
.carousel_item .item_container::before{
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  right: 0;
  background: #e62b4a;
  transform: translateY(-100%);
  transition: 0.3s;
}
.carousel_item .item_container:hover::before{
  transform: translateY(0);
}
.carousel_item .item_container i{
    font-size: 50px;
}
/* custom slick */

.slick-dots li.slick-active button:before{
    color: #e62b4a;
}
.slick-dots li button:before{
    color: white;
    font-size: 20px;
    opacity: 0.7;
}
.slick-dots{
  bottom: -50px;
}

/* start blogs */
.blog{padding: 80px 0px;}
.blog_title{
  text-align: center;
}
.blog_title p.first {
  color: #888888;
  margin-bottom: 15px;
  font-size: 16px;
}
.blog_title h1{
  font-size: 50px;
}
.blog_title p.last{
  color: #888888;
  font-weight: bold;
  margin: 30px 0px;
}
.blog_item{
  position: relative;
}
.blog_item .item_overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(230, 43, 74, 0.6);
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.5s;
}
.blog_item .item_overlay:hover{
  opacity: 1;
}
.overlay_search{
  width: 50px;
  height: 50px;
  background: white;
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(20px);
  transition: 0.3s;
  color: black;
}
.blog_item:hover .overlay_search{
  transform: translateY(0px);
}
.blog_item .overlay_search:hover{
  background: black;
  color: white;
}
.overlay_title{
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  transform: translateY(20px);
  transition: 0.3s;
}
.blog_item:hover .overlay_title {
  transform: translateY(0px);
}
.blog_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}
.blog_list .item_1{
  grid-column: 1/3;
  /* grid-column: start/end */
  grid-row: 1/ span 2;
  /* grid-column: start/ count */
}
.blog_list .item_10{
  grid-column: 3/5;
  grid-row: 3/ span 2;
}
.blog_list img{
  width: 100%;
  height: 100%;
  filter: grayscale(50%) contrast(50%);
  object-fit: cover;
}
/* end blogs */

/* start number */
.number{
  color: white;
  background-color: black;
  padding: 100px 0px;
}
.number_container{
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.number_item .counter{
font-size: 70px;
}
.number_item p{
  color: #888888;
  font-weight: 700;
}

/* end number */

/* start experience */

.experience{
  background-image: url(./image-video/bussiness_img_1.jpg);
  background-size: cover;
  background-attachment: fixed;
  padding: 100px 0px;
}
.experience_title{
  text-align: center;
}
.experience_title p.first{
  color: #af2239;
  margin-bottom: 15px;
}
.experience_title h1{
  color: white;
  font-size: 50px;
}
.experience_title p.last{
  color: #888888;
  margin: 25px 0px;
  font-weight: bold;
}
.experience_video{
  width: 75%;
  margin: auto;
}
.experience_video video{
  width: 100%;
  border: none;
}
/* end experience */

/* start contact */

.contact{
  padding: 100px 0px;
  margin: auto;
}
.contact_title{
  text-align: center;
}
.contact_title h1{
  font-size: 50px;
  margin-bottom: 20px;
}
.contact_title p{
  color: #888888;
  margin-bottom: 30px;
}
.contact_map{
  width: 75%;
  margin: auto;
  display: flex;
  align-items: center;
}
.contact_map .map{
  width: 60%;
}
.map iframe{
  width: 100%;
}
.contact_map .form{
  width: 40%;
}
.form form{
  display: flex;
  flex-direction: column;
  padding: 0px 15px;
}
.form input, .form textarea{
  font-size: 15px;
  padding: 15px;
  margin-bottom: 30px;
}
.form button{
  padding: 20px 0px;
  background: black;
  color: white;
  border: none;
  transition: 0.5s;
}
.form button:hover{
  background-color: #e62b4a;
}
/* end contact */

/* start footer */

footer{
  background: black;
  padding: 100px 0px;
}
.footer_container{
  color: white;
width: 75%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_container p{
  font-size: 14px;
}
.footer_container a{
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  text-align: center; 
  text-decoration: none;
  color: white ;
  margin-right: 10px;
  font-size: 16px;
  line-height: 54px;
  transition: 0.5s;
}
.footer_container a:hover{
background: #e62b4a;
}
/* end footer */

/* back to top */
.backtotop{
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  font-weight: bold;
  color: #fff;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
/* animate */

@keyframes animateArrow {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}