.slider-home {
  position: relative;
  width: 100%;
  height: 600px; /* Chiều cao cố định cho toàn slider */
  overflow: hidden;
  top: -70px;
  margin-bottom: -70px;
}
 
@media (max-width: 780px) {
  .slider-home, #simple-slider-wrapper {
    display: none;
  }
}

/* Mặc định cho từng slide */
.slide {
  display: none; /* Ẩn tất cả slide */
  position: absolute; /* Đặt các slide chồng lên nhau */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 1s ease-in-out; /* Hiệu ứng mờ dần */
  opacity: 0; /* Bắt đầu với độ mờ */
}

.slide.active {
  display: flex; /* Hiển thị slide đang active */
  opacity: 1; /* Đặt độ mờ thành 1 */
  z-index: 10;
}

/* Case 1: Hiển thị 3 khối ảnh nhỏ */
.slide[data-type="case1"] {
  display: flex;
  justify-content: space-between; /* Khoảng cách đều giữa các khối */
  align-items: flex-start; /* Căn từ trên */
}

.slide[data-type="case1"] .slide-item {
  flex: 1; /* Chia đều không gian giữa các khối */
  margin: 0; /* Khoảng cách giữa các khối */
  max-width: 30%; /* Mỗi khối chiếm tối đa 30% chiều rộng */
  height: 100%; /* Chiều cao khớp với cha */
  overflow: hidden; /* Ẩn phần dư thừa */
  position: relative; /* Đảm bảo vị trí tương đối */
}

.slide[data-type="case1"] .slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
}

/* Case 2: Hiển thị 1 ảnh toàn màn hình, căn giữa */
.slide[data-type="case2"] {
  display: flex;
  justify-content: center; /* Căn giữa khối dọc */
  align-items: center; /* Căn giữa khối ngang */
  width: 100%; /* Chiếm toàn bộ chiều rộng */
  height: 100%; /* Chiếm toàn bộ chiều cao khối slider */
}

.slide[data-type="case2"] .slide-item {
  width: 100%; /* Chiếm toàn bộ chiều rộng */
  height: 100%; /* Chiều cao khớp với cha */
  position: relative; /* Đảm bảo khối cha có thể kiểm soát khối con */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide[data-type="case2"] .slider-image {
  /*width: 100%;  Đảm bảo ảnh full width */
  height: 1200px; /* Chiều cao tự động theo tỷ lệ */
  object-fit: cover; /* Giữ tỷ lệ ảnh, không bị méo */
  position: relative; /* Đổi thành relative để dễ kiểm soát */
  margin-top: -350px; /* Sử dụng margin-top thay vì top */
  left: 0; /* Đảm bảo ảnh phủ toàn bộ khối */
}

/* Khối thông tin bên trong ảnh */
.model-information {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  /* background: rgb(76 75 75 / 70%); */
  color: white;
  padding: 0px 10px 0px 10px;
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* Tiêu đề bài viết */
.model-information h3 {
  font-size: 16px;
  color: #fafafa;
  font-weight: 400;
  margin-top: 5px;
  text-shadow: 2px 1px 8px #000;
}
/* Mô tả bài viết */
.model-information p {
  font-size: 14px;
  display: none;
  line-height: 1.4;
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
  -webkit-line-clamp: 2; /* Hiển thị tối đa 2 dòng */
  -webkit-box-orient: vertical;
  text-shadow: 2px 1px 8px #000;
  background-color: #ffffff00;
  color: white;
}

/* Avatar và thông tin tác giả */
.author-row-2 {
  display: flex;
  align-items: center;
}

.author-row-2 .avatar-column-2 {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.author-row-2 .avatar-column-2 img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Hình tròn */
  object-fit: cover;
}

.author-row-2 .info-column-2 {
  font-size: 14px;
  color: #ccc;
}

.author-row-2 .info-column-2 a {
  text-decoration: none;
  color: #fafafa;
  font-weight: 400;
  margin-top: 5px;
  text-shadow: 2px 1px 8px rgb(0 0 0);
}

.slider-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column; /* Sắp xếp các nút theo chiều dọc */
  align-items: flex-end; /* Canh phải */
  gap: 10px; /* Khoảng cách giữa các nút */
  z-index: 20;
}

.slider-control {
  background-color: rgba(0, 0, 0, 0.29);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-control:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.slider-control i {
  margin: 0; /* Loại bỏ khoảng cách thừa xung quanh biểu tượng */
}
.simple-slider-placeholder {
  height: 530px;
  background-color: #fff; /* màu xám nhạt */
  border-radius: 4px;
}