@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot');
  src:  url('fonts/icomoon.eot#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('images/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ibuild:before {
  content: "\e931";
}
.icon-itip:before {
  content: "\e930";
}
.icon-iamap:before {
  content: "\e92e";
}
.icon-iaqua:before {
  content: "\e92f";
}
.icon-ireport:before {
  content: "\e92c";
}
.icon-iphone:before {
  content: "\e92b";
}
.icon-isent:before {
  content: "\e92a";
}
.icon-iimap:before {
  content: "\e92d";
}
.icon-ifill:before {
  content: "\e929";
  color: #666;
}
.icon-isubmn:before {
  content: "\e928";
  color: #666;
}
.icon-icartn:before {
  content: "\e923";
}
.icon-next1:before {
  content: "\e900";
}
.icon-search:before {
  content: "\e901";
}
.icon-shareAll:before {
  content: "\e902";
}
.icon-web:before {
  content: "\e903";
}
.icon-cart:before {
  content: "\e905";
}
.icon-user1:before {
  content: "\e906";
}
.icon-next:before {
  content: "\e907";
}
.icon-heark:before {
  content: "\e908";
}
.icon-next2:before {
  content: "\e909";
}
.icon-prev:before {
  content: "\e90a";
}
.icon-prev1:before {
  content: "\e90b";
}
.icon-home3:before {
  content: "\e90c";
}
.icon-accout:before {
  content: "\e90d";
}
.icon-i-phone:before {
  content: "\e90e";
}
.icon-i-map-marker:before {
  content: "\e90f";
}
.icon-i-envelope:before {
  content: "\e910";
}
.icon-ti-xung:before {
  content: "\e911";
}
.icon-iicart:before {
  content: "\e912";
}
.icon-iicav:before {
  content: "\e913";
}
.icon-iihome:before {
  content: "\e914";
}
.icon-iimail:before {
  content: "\e915";
}
.icon-iiphone:before {
  content: "\e916";
}
.icon-next3:before {
  content: "\e917";
}
.icon-prev2:before {
  content: "\e918";
}
.icon-prev3:before {
  content: "\e919";
}
.icon-next4:before {
  content: "\e91a";
}
.icon-user2:before {
  content: "\e91b";
}
.icon-dow:before {
  content: "\e91c";
}
.icon-nextW:before {
  content: "\e91d";
}
.icon-cart1:before {
  content: "\e91e";
}
.icon-uu:before {
  content: "\e91f";
}
.icon-iiphone1:before {
  content: "\e920";
}
.icon-iisell:before {
  content: "\e921";
}
.icon-iicon:before {
  content: "\e922";
}
.icon-icart:before {
  content: "\e924";
}
.icon-about:before {
  content: "\e925";
}
.icon-sub:before {
  content: "\e926";
}
.icon-zalo1:before {
  content: "\e927";
}
.icon-phone:before {
  content: "\e942";
}
.icon-compass:before {
  content: "\e949";
}
.icon-database:before {
  content: "\e964";
}
.icon-undo2:before {
  content: "\e967";
}
.icon-redo2:before {
  content: "\e968";
}
.icon-forward:before {
  content: "\e969";
}
.icon-reply:before {
  content: "\e96a";
}
.icon-bubbles:before {
  content: "\e96c";
}
.icon-bubbles2:before {
  content: "\e96d";
}
.icon-bubbles3:before {
  content: "\e96f";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-user:before {
  content: "\e971";
}
.icon-spinner11:before {
  content: "\e984";
}
.icon-search1:before {
  content: "\e986";
}
.icon-zoom-in:before {
  content: "\e987";
}
.icon-zoom-out:before {
  content: "\e988";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-list2:before {
  content: "\e9bb";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-attachment:before {
  content: "\e9cd";
}
.icon-eye:before {
  content: "\e9ce";
}
.icon-star-empty:before {
  content: "\e9d7";
}
.icon-star-half:before {
  content: "\e9d8";
}
.icon-star-full:before {
  content: "\e9d9";
}
.icon-heart:before {
  content: "\e9da";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-minus:before {
  content: "\ea0b";
}
.icon-cancel-circle:before {
  content: "\ea0d";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-checkmark2:before {
  content: "\ea11";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-arrow-up2:before {
  content: "\ea3a";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-radio-unchecked:before {
  content: "\ea56";
}
.icon-share2:before {
  content: "\ea82";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-linkedin2:before {
  content: "\eaca";
}
.icon-pinterest:before {
  content: "\ead1";
}
.icon-icartm:before {
  content: "\e904";
}
.lcol h1 {
  position: absolute;
  top: 70%;
  left: 140px;
  transform: translateY(-70%);
  font-size: 24px;
  color: #388E3C;
}
/* --- Lưới sản phẩm (Grid) --- */
.product-grid {
  display: grid;
  /* Tự động chia cột, tối thiểu 280px mỗi cột */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 30px;
}

/* --- Thẻ sản phẩm (Card) --- */
.product-card {
  background: #fff;
  border-radius: 16px;
  margin-top:16px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* Đổ bóng nhẹ */
  transition: all 0.3s ease; /* Hiệu ứng mượt mà */
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(0,0,0,0.02);
}

  /* Hiệu ứng khi di chuột vào thẻ */
  .product-card:hover {
    transform: translateY(-10px); /* Nổi lên trên */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Bóng đậm hơn */
  }

/* --- Hình ảnh --- */
.card-image {
  width: 100%;
  height: 200px;
  overflow: hidden; /* Để hình không bị tràn khi zoom */
  background-color: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo hình luôn đầy khung */
    transition: transform 0.5s ease;
  }

/* Hiệu ứng zoom hình khi hover */
.product-card:hover .card-image img {
  transform: scale(1.1);
}

/* --- Nội dung thẻ --- */
.card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c3e50;
  transition: color 0.3s;
}

.product-card:hover .card-title {
  color: #3498db; /* Đổi màu tiêu đề khi hover */
}

.card-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
  /* Cắt bớt chữ nếu quá dài (tối đa 3 dòng) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nút bấm (Tùy chọn) */
.btn-detail {
  margin-top: auto;
  padding: 10px 20px;
  background-color: #f8f9fa;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}

.product-card:hover .btn-detail {
  background-color: #3498db;
  color: white;
}