/* [csl_shortlist]: 3 card ngang (huy hiệu, ảnh, tên, 4 gạch đầu dòng, nút). Đổi màu ở 4 biến dưới đây. */
.csl-shortlist{
  --pick-accent:var(--cyan-deep,#0e7490);
  --pick-accent-soft:var(--cyan-soft,#ecfeff);
  --pick-btn:var(--cta,#f59e0b);
  --pick-btn-ink:var(--on-cta,#1c1200);
  margin:1.5rem 0 2rem;
}
.csl-shortlist__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:stretch;
  padding-top:1.1rem; /* chỗ cho huy hiệu nhô lên */
}
.csl-pick{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.6rem 1rem 1rem;
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
}
.csl-pick--featured{
  border:2px solid var(--pick-accent);
  box-shadow:0 6px 18px rgba(14,116,144,.14);
}
.csl-pick__badge{
  position:absolute;
  top:-.9rem;
  left:.9rem;
  padding:.45rem 1rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:var(--pick-accent);
  border-radius:999px;
  line-height:1;
}
.csl-pick__image{
  display:flex;
  align-items:center;
  justify-content:center;
  height:190px;
  padding:.5rem;
  border:1px solid var(--line,#e2e8f0);
  border-radius:10px;
  background:#fff;
}
.csl-pick__image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.csl-pick__title{
  margin:1rem 0 .75rem;
  padding:.7rem .9rem;
  border-left:3px solid var(--pick-accent);
  background:var(--panel,#f1f5f9);
  border-radius:0 8px 8px 0;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.3;
}
.csl-pick__title a,
.csl-pick__title > span{display:block;color:var(--pick-accent);text-decoration:none}
/* Cắt ở chính phần chữ (không phải khối có padding) để dòng thứ 3 không lộ ra và có dấu "..." */
.csl-pick__name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  min-height:2.6em; /* luôn đủ chỗ 2 dòng để 3 card cao bằng nhau */
}
.csl-pick__title a:hover{text-decoration:underline}
.csl-pick__facts{
  flex:1;
  margin:0 0 1rem;
  padding:0;
  list-style:none;
  font-size:.9rem;
  color:var(--ink-soft,#334155);
}
.csl-pick__facts li{
  position:relative;
  margin:0 0 .55rem;
  padding-left:1.1rem;
  line-height:1.35;
}
.csl-pick__facts li::before{
  content:"";
  position:absolute;
  left:.1rem;
  top:.4em;
  border-left:.45rem solid var(--pick-accent);
  border-top:.3rem solid transparent;
  border-bottom:.3rem solid transparent;
}
.csl-pick__btn{
  display:block;
  margin-top:auto;
  padding:.8rem 1rem;
  text-align:center;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--pick-btn-ink);
  background:var(--pick-btn);
  border-radius:8px;
}
.csl-pick__btn:hover{filter:brightness(1.06);text-decoration:none}
.csl-shortlist__note{
  margin:1rem 0 0;
  text-align:center;
  font-size:.78rem;
  color:var(--muted,#64748b);
}
@media (max-width:860px){
  .csl-shortlist__grid{grid-template-columns:1fr;gap:1.6rem}
  .csl-pick__image{height:200px}
  .csl-pick__name{min-height:0}
}