/* ==========================================================================
   Blog Aidox: trang danh sách bài và trang bài viết.
   Tách khỏi main.css theo luật "trang mới thì tách file riêng". Chỉ nạp ở /blog/.
   Mọi màu, chữ, khoảng cách lấy từ token trong main.css.
   ========================================================================== */

/* ----- Danh sách bài ----- */
.blog-list {
  display: grid;
  gap: 24px;
  max-width: var(--container-max);
}

@media (min-width: 768px) {
  .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .blog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.post-card__meta {
  display: flex;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.post-card__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.post-card__more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-blue);
}

/* ----- Bài viết ----- */
.post {
  max-width: var(--text-max);
  margin: 0 auto;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.post__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.post__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  margin-bottom: 32px;
}

.post__body h2 {
  margin: 48px 0 16px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.post__body h3 {
  margin: 32px 0 12px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.post__body p {
  margin-bottom: 20px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.post__body ul {
  margin: 0 0 24px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.post__body a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post__ask {
  margin: 0 0 24px;
  padding: 16px 20px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.post__ask strong { color: var(--text-primary); }

/* Bảng câu hỏi demo */
.post__table {
  width: 100%;
  margin: 0 0 32px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.post__table th,
.post__table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-body);
}

.post__table th {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

@media (max-width: 640px) {
  .post__table thead { display: none; }
  .post__table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
  .post__table td { display: block; padding: 4px 0; border: 0; }
  .post__table td:first-child { font-weight: var(--weight-semibold); color: var(--text-primary); }
}

.post__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-muted);
}