/* ============================================================
   CDL24H — Nâng cấp lưới thẻ trang danh sách Case Study (archive)
   Nhắm đúng markup theme cha: .case-card / .case-card-header /
   .device-type / .case-title / .case-footer / .read-more-link
   Giữ nguyên lưới 3 cột của theme, chỉ làm thẻ sắc nét + đồng đều.
   ============================================================ */

/* ---- Thẻ: chuyển động mượt khi hover ---- */
.case-card{
  transition:transform .2s ease, box-shadow .2s ease;
}

/* ---- Ảnh: đồng khung 16:10, cắt cover cho mọi thẻ bằng nhau ---- */
.case-card .case-card-header{ position:relative; }
.case-card .case-card-header > a{
  display:block; aspect-ratio:16/10; overflow:hidden;
}
.case-card .case-card-header img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}

/* ---- Lớp phủ tone navy: đồng bộ ảnh sáng/tối lệch nhau ---- */
.case-card .case-card-header::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(13,23,48,.04), rgba(13,23,48,.30));
  opacity:.6; transition:opacity .25s ease;
}

/* ---- Badge danh mục (JS gắn lên góc ảnh) ---- */
.case-card .cs-badge{
  position:absolute; top:11px; left:11px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.95); color:#16264A;
  font-weight:700; font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; line-height:1;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.4);
}
.case-card .cs-badge i{ font-size:12px; }

/* ---- Chip kết quả (JS lấy % từ tiêu đề, không có thì "Thành công") ---- */
.case-card .cs-result{
  position:absolute; top:11px; right:11px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:#0f8a5f; color:#fff;
  font-weight:700; font-size:11px; letter-spacing:.3px;
  padding:5px 10px; border-radius:999px; line-height:1;
}
.case-card .cs-result i{ font-size:11px; }

/* ---- Ẩn nhãn danh mục gốc trong thân (đã chuyển thành badge trên ảnh).
   Dùng !important vì .device-type có class Bootstrap .d-block (!important).
   Chỉ ẩn trên thẻ JS đã nâng cấp -> nếu JS lỗi, chữ gốc vẫn hiện. ---- */
.case-card.cs-enhanced .device-type{ display:none !important; }

/* ---- Tiêu đề: khóa 2 dòng cho thẻ cao bằng nhau ---- */
.case-card .case-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.76em; line-height:1.38;
  color:#16264A; font-weight:700;
}

/* ---- Hover: nhấc thẻ + zoom ảnh + tone đậm lên ---- */
.case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -22px rgba(18,30,60,.55) !important;
}
.case-card:hover .case-card-header img{ transform:scale(1.06); }
.case-card:hover .case-card-header::after{ opacity:1; }

/* ---- Chân thẻ: mũi tên "Xem chi tiết" nhích khi hover ---- */
.case-card .case-footer .read-more-link i{ transition:transform .15s ease; }
.case-card:hover .case-footer .read-more-link i{ transform:translateX(3px); }

/* ---- Mobile: giảm nhấc thẻ cho mượt ---- */
@media (max-width:767px){
  .case-card:hover{ transform:translateY(-3px); }
}

/* ============================================================
   v1.9.9 — Phương án "Tối giản + câu mồi" (gây tò mò, dễ nhấp):
   · Badge 1 TÔNG kính-trắng, chữ navy (bỏ cầu-vồng màu theo loại)
   · Chip kết quả XANH HẾT (điểm nhấn màu DUY NHẤT trên ảnh)
   · Thêm 1 dòng "câu mồi" kịch tính dưới tiêu đề
   · "Xem chi tiết" = nút VIỀN navy -> đổ xanh khi hover
   ============================================================ */

/* ---- Badge: 1 tông kính-trắng, chữ+icon navy (không đổi màu theo loại) ---- */
.case-card .cs-badge{
  background:rgba(255,255,255,.94); color:#16264A;
}
.case-card .cs-badge i{ color:#16264A; }

/* ---- Chip kết quả: luôn XANH, to & đậm, có bóng để hút mắt vào "kết quả" ---- */
.case-card .cs-result{
  background:#0f8a5f; color:#fff;
  font-size:12px; font-weight:800; padding:6px 12px;
  box-shadow:0 6px 14px -6px rgba(15,138,95,.75);
}

/* ---- Câu mồi tò mò (JS chèn dưới tiêu đề, text viết tay theo từng case) ---- */
.case-card .cs-hook{
  margin:2px 0 0; color:#55617a;
  font-size:13px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- "Xem chi tiết" = nút viền navy -> đổ xanh khi hover (lưới đỡ nặng) ---- */
.case-card .case-footer .read-more-link{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:#16264A !important;
  border:1.5px solid #16264A;
  font-weight:700; font-size:13px; line-height:1;
  padding:8px 14px; border-radius:10px; text-decoration:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.case-card:hover .case-footer .read-more-link,
.case-card .case-footer .read-more-link:hover{
  background:#1DB954; color:#fff !important; border-color:#1DB954;
}
.case-card .case-footer .read-more-link i{ color:inherit; }

/* ---- Ngày: nhạt bớt để nhường "điểm nhấn" cho nút ---- */
.case-card .case-footer .case-date{ color:#9aa3b5; font-size:12.5px; }