/* tinhdiemonline.com — wp.css
   Cầu nối giữa markup do trình soạn thảo WordPress sinh ra và design system td-*.
   Nội dung bài viết là thẻ trần (p, h2, ul, table…) nên ánh xạ lại đúng style của components.css. */

/* ---- 1. Skip link ---- */
.td-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--td-s-3) var(--td-s-4); background: var(--td-primary); color: #fff;
  border-radius: 0 0 var(--td-radius) 0; font-weight: 600;
}
.td-skip-link:focus { left: 0; color: #fff; }

/* ---- 2. Nội dung soạn trong WordPress ---- */
.td-prose { font-size: var(--td-fs-300); color: var(--td-ink-2); }
.td-prose > :first-child { margin-top: 0; }
.td-prose p { margin: 0 0 var(--td-s-4); }
.td-prose h2 {
  margin: var(--td-s-7) 0 var(--td-s-4); font-size: var(--td-fs-600); line-height: var(--td-lh-snug);
  font-weight: 700; letter-spacing: -.01em; color: var(--td-ink); text-wrap: pretty;
}
.td-prose h3 { margin: var(--td-s-5) 0 var(--td-s-3); font-size: var(--td-fs-400); font-weight: 600; color: var(--td-ink); }
.td-prose h4 { margin: var(--td-s-5) 0 var(--td-s-2); font-size: var(--td-fs-300); font-weight: 600; color: var(--td-ink); }
.td-prose ul, .td-prose ol { margin: 0 0 var(--td-s-4); padding-left: var(--td-s-5); }
.td-prose li { margin-bottom: var(--td-s-2); }
.td-prose strong, .td-prose b { font-weight: 600; color: var(--td-ink); }
.td-prose blockquote {
  margin: var(--td-s-5) 0; padding: var(--td-s-4) var(--td-s-5);
  border-left: 3px solid var(--td-hub); background: var(--td-surface-2); border-radius: 0 var(--td-radius) var(--td-radius) 0;
}
.td-prose blockquote p:last-child { margin-bottom: 0; }
.td-prose img { max-width: 100%; height: auto; border-radius: var(--td-radius); }
.td-prose figure { margin: var(--td-s-5) 0; }
.td-prose figcaption { margin-top: var(--td-s-2); font-size: var(--td-fs-200); color: var(--td-ink-3); text-align: center; }
.td-prose hr { margin: var(--td-s-6) 0; border: 0; border-top: 1px solid var(--td-line); }
.td-prose code {
  padding: .1em .35em; border-radius: var(--td-radius-sm);
  background: var(--td-surface-2); border: 1px solid var(--td-line); font-size: .9em;
}

/* Bảng trong bài viết dùng lại giao diện bảng công thức, cuộn ngang được trên mobile */
.td-prose table {
  display: block; width: 100%; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0 0 var(--td-s-5); font-size: var(--td-fs-200);
}
.td-prose table th, .td-prose table td {
  padding: var(--td-s-3) var(--td-s-4); text-align: left; border-bottom: 1px solid var(--td-line);
  vertical-align: top; white-space: normal;
}
.td-prose table th { background: var(--td-surface-2); color: var(--td-ink); font-weight: 600; }
.td-prose table tr:last-child td { border-bottom: 0; }
.td-prose table { border: 1px solid var(--td-line); border-radius: var(--td-radius); }

/* Khối FAQ do bài viết chèn tay vẫn dùng details/summary của components.css */
.td-prose details { margin-bottom: var(--td-s-3); }

/* ---- 3. Danh sách bài viết ---- */
.td-post-list { display: grid; gap: var(--td-s-4); }
.td-post-item {
  display: grid; gap: var(--td-s-2); padding: var(--td-s-5);
  background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius-lg);
}
.td-post-item__cat {
  font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--td-hub);
}
.td-post-item__title { margin: 0; font-size: var(--td-fs-500); font-weight: 700; line-height: var(--td-lh-snug); }
.td-post-item__title a { color: var(--td-ink); text-decoration: none; }
.td-post-item__title a:hover { color: var(--td-primary); }
.td-post-item__excerpt { margin: 0; color: var(--td-ink-2); font-size: var(--td-fs-200); }
.td-post-item__meta { font-size: var(--td-fs-100); color: var(--td-ink-3); }

/* ---- 4. Phân trang ---- */
.td-pagination { display: flex; flex-wrap: wrap; gap: var(--td-s-2); margin: var(--td-s-6) 0; }
.td-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--td-s-3);
  border: 1px solid var(--td-line); border-radius: var(--td-radius);
  background: var(--td-surface); color: var(--td-ink-2); text-decoration: none; font-weight: 600;
}
.td-pagination .page-numbers:hover { border-color: var(--td-primary); color: var(--td-primary); }
.td-pagination .page-numbers.current { background: var(--td-primary); border-color: var(--td-primary); color: #fff; }

/* ---- 5. Ô tìm kiếm trang chủ ---- */
.td-search__empty { margin: var(--td-s-4) 0 0; color: var(--td-ink-3); font-size: var(--td-fs-200); }
.td-card-tool[hidden], .td-card-hub[hidden] { display: none !important; }

/* ---- 6. Form tìm kiếm và bình luận ---- */
.td-searchform { display: flex; gap: var(--td-s-2); margin-bottom: var(--td-s-5); }
.td-searchform input[type="search"] {
  flex: 1; min-height: 48px; padding: 0 var(--td-s-4);
  border: 1px solid var(--td-line-strong); border-radius: var(--td-radius);
  background: var(--td-surface); font: inherit; font-size: 18px; color: var(--td-ink);
}

/* ---- 7. In ấn ---- */
@media print {
  .td-skip-link, .td-pagination { display: none !important; }
  .td-prose table { overflow: visible; }
}

/* ---- 8. Hàng link pháp lý ở chân trang ---- */
.td-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--td-s-2) var(--td-s-4);
  margin: 0 0 var(--td-s-3); padding: 0; list-style: none;
}
.td-footer__legal a { font-size: var(--td-fs-200); }