/* ============================================================
   Posts module — SaleBaoHiem BS5 Theme
   ============================================================ */

/* ── List view ── */
.posts-list { padding: 8px 0; }

.post-list-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border, #eee);
}
.post-list-thumb { flex: 0 0 220px; }
.post-list-thumb img {
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  transition: opacity 0.2s;
}
.post-list-thumb img:hover { opacity: 0.85; }

.post-list-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.post-list-title a { color: var(--p); text-decoration: none; }
.post-list-title a:hover { color: var(--p2); }

.post-list-desc {
  font-size: 14px;
  color: var(--muted, #666);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
  line-height: 1.6;
}

@media (max-width: 575px) {
  .post-list-item { flex-direction: column; }
  .post-list-thumb,
  .post-list-thumb img { width: 100%; height: 220px; flex: unset; }
}

/* ── Grid view ── */
.post-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-4px);
}
.post-card-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.post-card-body { padding: 0.75rem 1rem; }
.post-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-title a { color: var(--p); text-decoration: none; }
.post-card-title a:hover { color: var(--p2); }

/* ── Detail page ── */
.post-detail-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--txt, #333);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  /* padding-bottom: 1rem; */
  /* border-bottom: 1px solid var(--border, #eee); */
}
.post-detail-bodytext {
  font-size: 15px;
  line-height: 1.8;
  color: var(--txt, #333);
}
.post-detail-bodytext h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #eee);
  color: var(--txt, #333);
}
.post-detail-bodytext h3 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.post-detail-bodytext h4 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.post-detail-bodytext img {
  max-width: 100%; height: auto;
  margin: 10px 0; border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

@media (min-width: 992px) {
  .post-sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
  }
}

/* ── Related posts ── */
.post-related-box {
  border: 1px solid var(--border, #eee);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.post-related-title {
  background: var(--p);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-related-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
.post-related-list li {
  padding: 7px 14px;
  border-bottom: 1px solid #f3f3f3;
  font-size: 13px;
  line-height: 1.4;
}
.post-related-list li:last-child { border-bottom: none; }
.post-related-list li::before { content: '›'; color: var(--p); margin-right: 6px; font-weight: 700; }
.post-related-list a { color: var(--txt, #333); text-decoration: none; }
.post-related-list a:hover { color: var(--p); }

/* ── Block: recent news ── */
.post-news-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-news-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-4px);
}
.post-news-thumb img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.post-news-body { padding: 0.875rem 1rem; }
.post-news-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-news-title a { color: var(--p); text-decoration: none; }
.post-news-title a:hover { color: var(--p2); }
.post-news-desc {
  font-size: 13px;
  color: var(--muted, #666);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.post-news-btn {
  background: var(--p);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  padding: 8px 24px;
}
.post-news-btn:hover { background: var(--p2); }