/* Kiểu chữ bài viết. Bề rộng cột đã đặt ở base.css (--do-rong-chu = 54ch) —
   đơn vị ch tính theo bề rộng số 0, nên 68ch thực tế ra 87 ký tự mỗi dòng, vượt
   khoảng đọc tối ưu 45–75. File này lo phần còn lại: nhịp dọc, bảng, lưới. */

.gpkm-prose h2 { margin-top: var(--sp-6); }
.gpkm-prose h3 { margin-top: var(--sp-5); }
.gpkm-prose p, .gpkm-prose li { line-height: 1.7; }
.gpkm-prose ul, .gpkm-prose ol { padding-left: var(--sp-4); }
.gpkm-prose li { margin-bottom: var(--sp-2); }
.gpkm-prose hr { margin-block: var(--sp-5); border: 0; border-top: var(--vien); }
.gpkm-prose img { max-width: 100%; height: auto; border-radius: var(--bo-goc); }

.gpkm-prose table {
  width: 100%;
  margin-block: var(--sp-4);
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.gpkm-prose th, .gpkm-prose td { padding: var(--sp-2) var(--sp-3); border: var(--vien); text-align: left; }
.gpkm-prose thead th { background: var(--surface-2); }

/* 31 bài có bảng, có bảng 13 hàng × 3 cột. Trên 375px bảng đó tràn ngang nếu
   không cho cuộn riêng — tràn ngang là lỗi bị chặn ở test nền. */
.gpkm-prose > table { display: block; overflow-x: auto; }

/* --- lưới bài viết ------------------------------------------------------- */

.gpkm-luoi-bai {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 700px)  { .gpkm-luoi-bai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gpkm-luoi-bai { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gpkm-the-bai {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 1rem;
  transition: border-color var(--vua) var(--easing), box-shadow var(--vua) var(--easing);
}

.gpkm-the-bai:hover {
  border-color: color-mix(in srgb, var(--line) 40%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.gpkm-the-bai__lien-ket { display: block; padding: var(--sp-3); color: inherit; text-decoration: none; cursor: pointer; }

.gpkm-the-bai__anh {
  /* Chừa sẵn chỗ theo tỉ lệ 3:2 — không giật layout khi ảnh tải. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--bo-goc);
}

.gpkm-the-bai__anh img { width: 100%; height: 100%; object-fit: cover; }

.gpkm-the-bai__ten {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--sp-2);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.gpkm-the-bai__mo-ta { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

.gpkm-dau-muc { margin-block: var(--sp-5) var(--sp-4); }
.gpkm-dau-muc__mo-ta { color: var(--ink-soft); }