@font-face {
  font-family: 'UTM Swiss';
  src: url("fonts/UTM\ Swiss\ 721\ Black\ Condensed.ttf") format('truetype');
}


.vdung-main {
  background-color: #F0F0F0;
  padding: 20px 1px 20px 1px;
  width: 100%;
  max-width: 2000px;
  min-height: 573px;
  margin: 0 auto;
  background-color: #EFFFF1;
  border-radius: 30px;
  padding: 40px;
  border: 1.3px solid #007724;
  position: relative;
  overflow: hidden;
}

.vdung-head{
  text-align: center;
  margin-bottom: 60px;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
}
.vdung-title{
  color: #007724;
  font-size: 64px;
  font-weight: bold;
  display: inline-block;
}

.vdung-flex {
  display: flex;
  width: 100%;
  justify-content: space-around;/*các item cách đều, còn cái lề cách hia item trái phải bằng một nửa*/
  flex-wrap: wrap; /*cho phép các item xuống dòng khi bị chật*/
  margin-top: 40px;
}
.vdung-cardcontainer {
  margin: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.vdung-card {
  border-radius: 10px;
 
  cursor: pointer;
}
.vdung-img {
  width: 368px;
  height: 276px;
  object-fit: cover;
  border-radius: 10px;
  transition: border-radius 0.5s ease-in;
}
.vdung-detailcard {
  text-align: center;
  width: 368px;
  background-color: white;
  border-radius: 0px 0px 10px 10px;
  padding: 15px;
  margin-top: -5px;     /*cho sát phần tử trên*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 0; 
  overflow: hidden;
  opacity: 0;  /*làm mờ*/
  transform: scaleY(0.5);  /*thu nhỏ chiều dọc*/
  transition: opacity 0.5s ease-in, transform 0.5s ease-in, max-height 0.5s ease-in;  
  position: relative;
}
.vdung-cardcontainer:hover .vdung-detailcard{
  opacity: 1;
  transform: scaleY(1);
  max-height: 350px; 
  
}
.vdung-cardcontainer:hover .vdung-card{
  border-radius: 10px 10px 0px 0px;
}
.vdung-cardcontainer:hover .vdung-img{
  border-radius: 10px 10px 0px 0px;
}
.vdung-detailtitle {
  color: #004812;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.vdung-detailtext {
  font-size: 14px;
  line-height: 1.4;
  color: rgb(0, 119, 36);
 
  overflow: hidden;
  text-overflow: ellipsis; /*thêm dấu .. vào chỗ văn bản bị cắt*/
  font-weight: normal;
  font-family: Montserrat;
}

@media (max-width: 768px) {
  .vdung-title {
      font-size: 35px;
  }
  .vdung-flex {
      flex-direction: column;
      align-items: center;
  }
  .vdung-cardcontainer {
      margin-bottom: 20px;
  }
  .vdung-img, .vdung-detailcard {
      width: 100%;
      max-width: 368px;
  }
  .vdung-img {
      height: auto;
      min-height: 200px;
  }
  .vdung-detailtitle {
      font-size: 16px;
  }
}