@charset "UTF-8";
/* ==========================================================================
   TMT Câu chuyện (Task 12): hub /tin-tuc (templates/blog.bwt) và bài viết (templates/article.bwt). Chỉ nạp ở template blog/article (layout: template contains 'blog' or 'article').
   Phụ thuộc tmt-design-system.css (token, .tmt-btn, .tmt-card, .tmt-chip, .tmt-breadcrumb, .tmt-pagination, .tmt-notice, .tmt-empty...). Mobile-first. Không JS, không carousel.
   Tiền tố .tmt-st-* (hub, khối chung) / .tmt-article-* (bài) / .tmt-prose (thân bài) / .tmt-cm-* (bình luận). Mọi luật nằm dưới .tmt-st để thắng CSS theme cũ (blog_article_style, main).
   Thân bài (.tmt-prose) chứa HTML nhập trong admin với style nội tuyến dày (Arial, cỡ chữ 22px, canh giữa/đều hai bên, lùi lề, chữ đỏ #ff384b): phần "chuẩn hoá" ở cuối file đưa về token của design system.
   ========================================================================== */

.tmt-st { background: var(--color-bg-page); overflow-x: clip; }
.tmt-st [id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
@media (prefers-reduced-motion: no-preference) { html:has(.tmt-st--hub) { scroll-behavior: smooth; } }

/* ---------- Khối chung ---------- */
.tmt-st .tmt-st-crumbs { margin-bottom: var(--space-1); }
.tmt-st--article .tmt-st-crumbs { max-width: calc(700px + 2 * var(--gutter)); }   /* thẳng hàng với cột bài viết */
.tmt-st .tmt-breadcrumb ol { flex-wrap: nowrap; }
.tmt-st .tmt-breadcrumb li { flex: 0 0 auto; }
.tmt-st .tmt-breadcrumb li[aria-current="page"] { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmt-st .tmt-breadcrumb li[aria-current="page"]::before { display: inline-block; }
.tmt-st .tmt-st-block { padding-block: var(--space-8); }
.tmt-st .tmt-st-block--feature { padding-block: var(--space-6) var(--space-8); }
.tmt-st .tmt-st-block--tint { background: var(--color-bg-subtle); border-block: 1px solid var(--color-border); }
@media (min-width: 768px) { .tmt-st .tmt-st-block { padding-block: var(--space-12); } .tmt-st .tmt-st-block--feature { padding-block: var(--space-8) var(--space-12); } }
.tmt-st .tmt-st-eyebrow { margin: 0 0 var(--space-3); font: 700 var(--text-caption)/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.tmt-st .tmt-st-h2 { margin: 0 0 var(--space-4); }
.tmt-st .tmt-st-sub { margin: calc(var(--space-2) * -1) 0 var(--space-4); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); }

/* ---------- 1. Hero hub (gọn: không ảnh nền, không banner chữ trong ảnh) ---------- */
.tmt-st .tmt-st-hero { padding-block: var(--space-1) var(--space-6); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.tmt-st .tmt-st-hero .tmt-kicker { margin: var(--space-2) 0 var(--space-2); }
.tmt-st .tmt-st-hero__title { margin: 0 0 var(--space-3); max-width: 26ch; font: 700 var(--text-h1)/var(--lh-h1) var(--font-display); letter-spacing: -0.01em; color: var(--color-text-strong); }
.tmt-st .tmt-st-hero__lede { margin: 0 0 var(--space-3); max-width: 58ch; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.tmt-st .tmt-st-hero__stat { margin: 0; font-size: var(--text-small); font-weight: 600; color: var(--color-accent-700); }
@media (min-width: 768px) { .tmt-st .tmt-st-hero { padding-block: var(--space-2) var(--space-8); } }

/* ---------- 2. Bài nổi bật ---------- */
.tmt-st .tmt-st-feature { display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tmt-st .tmt-st-feature__media { display: block; aspect-ratio: 16 / 10; background: var(--color-bg-subtle); }
.tmt-st .tmt-st-feature__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tmt-st .tmt-st-feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
.tmt-st .tmt-st-feature__topic { margin: 0; font: 700 var(--text-caption)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); }
.tmt-st .tmt-st-feature__title { margin: 0; font: 700 22px/1.25 var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-st-feature__title a { color: inherit; text-decoration: none; }
.tmt-st .tmt-st-feature__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tmt-st .tmt-st-feature__excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.tmt-st .tmt-st-feature__meta { margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-muted); }
.tmt-st .tmt-st-feature .tmt-btn { margin-top: var(--space-2); }
@media (min-width: 768px) {
  .tmt-st .tmt-st-feature { flex-direction: row; align-items: stretch; }
  .tmt-st .tmt-st-feature__media { flex: 0 0 52%; aspect-ratio: auto; min-height: 320px; }
  .tmt-st .tmt-st-feature__body { flex: 1; justify-content: center; gap: var(--space-3); padding: var(--space-8); }
  .tmt-st .tmt-st-feature__title { font-size: 28px; }
}
@media (min-width: 992px) { .tmt-st .tmt-st-feature__title { font-size: 32px; } }

/* ---------- 3. Nhóm chủ đề (thẻ neo trong trang) ---------- */
.tmt-st .tmt-st-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tmt-st .tmt-st-topic { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--tap-min); height: 100%; padding: var(--space-3); color: var(--color-text-strong); text-decoration: none; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.tmt-st .tmt-st-topic:hover { border-color: var(--color-brand-700); box-shadow: var(--shadow-sm); }
.tmt-st .tmt-st-topic:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tmt-st .tmt-st-topic__name { font: 700 15px/1.3 var(--font-sans); }
.tmt-st .tmt-st-topic__count { font-size: var(--text-caption); font-weight: 600; line-height: 1.3; color: var(--color-accent-700); }
.tmt-st .tmt-st-topic__desc { display: none; margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); }
@media (min-width: 768px) {
  .tmt-st .tmt-st-topics { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
  .tmt-st .tmt-st-topic { justify-content: flex-start; padding: var(--space-4); }
  .tmt-st .tmt-st-topic__desc { display: block; }
}
@media (min-width: 992px) { .tmt-st .tmt-st-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Thẻ câu chuyện: bản mở rộng (nhãn chủ đề, đoạn trích, "Đọc câu chuyện", hàng gọn trên mobile) ---------- */
.tmt-st .tmt-story-card .tmt-card__title { font-size: 17px; }
@media (min-width: 768px) { .tmt-st .tmt-story-card .tmt-card__title { font-size: 18px; } }
.tmt-st .tmt-story-card__topic { margin: 0; font: 700 var(--text-caption)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); }
.tmt-st .tmt-story-card__cta { margin-top: auto; font-size: var(--text-small); font-weight: 600; color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 3px; }
.tmt-st .tmt-story-card__cta::after { content: "\00a0\2192"; display: inline-block; text-decoration: none; }
@media (max-width: 767px) {
  .tmt-st .tmt-story-card--row { flex-direction: row; align-items: stretch; }
  .tmt-st .tmt-story-card--row .tmt-card__media { position: relative; flex: 0 0 112px; align-self: stretch; aspect-ratio: auto; min-height: 96px; }
  .tmt-st .tmt-story-card--row .tmt-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .tmt-st .tmt-story-card--row .tmt-card__body { justify-content: center; gap: var(--space-1); padding: var(--space-3); }
  .tmt-st .tmt-story-card--row .tmt-card__title { font-size: 16px; -webkit-line-clamp: 3; }
  .tmt-st .tmt-story-card--row .tmt-story-card__excerpt, .tmt-st .tmt-story-card--row .tmt-story-card__cta { display: none; }
}

/* ---------- Dải thẻ: cuộn ngang (scroll-snap) trên mobile, lưới từ 768px ---------- */
.tmt-st .tmt-st-strip { display: flex; gap: var(--space-3); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tmt-st .tmt-st-strip > li { flex: 0 0 min(78%, 300px); margin: 0; display: flex; scroll-snap-align: start; }
.tmt-st .tmt-st-strip > li > .tmt-card { width: 100%; }
@media (min-width: 768px) {
  .tmt-st .tmt-st-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; overflow: visible; }
  .tmt-st .tmt-st-strip > li { flex: none; }
}
@media (min-width: 992px) {
  .tmt-st .tmt-st-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .tmt-st .tmt-st-related .tmt-st-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

/* ---------- 4. Bài mới (lưới phân trang) ---------- */
.tmt-st .tmt-st-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tmt-st .tmt-st-grid > li { margin: 0; display: flex; }
.tmt-st .tmt-st-grid > li > .tmt-card { width: 100%; }
@media (min-width: 768px) { .tmt-st .tmt-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 992px) { .tmt-st .tmt-st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
/* Phân trang (dùng chung snippet tmt-pagination ở chế độ url): mobile Trước · Trang X / Y · Sau; từ 768px hiện đủ số trang */
.tmt-st .tmt-pager { margin-top: var(--space-8); }
.tmt-st .tmt-pagination { gap: var(--space-2); }
.tmt-st .tmt-pagination li { margin: 0; }
.tmt-st .tmt-pagination__status span { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-2); font-weight: 600; color: var(--color-text-strong); background: none; border: 0; }
.tmt-st .tmt-pagination__num { display: none; }
@media (min-width: 768px) { .tmt-st .tmt-pagination__status { display: none; } .tmt-st .tmt-pagination__num { display: block; } }

/* ---------- 6. Khám phá theo chủ đề ---------- */
.tmt-st .tmt-st-topicsec { padding-block: var(--space-6); border-top: 1px solid var(--color-border); }
.tmt-st .tmt-st-topicsec:first-of-type { border-top: 0; padding-top: 0; }
.tmt-st .tmt-st-topicsec__head { margin-bottom: var(--space-4); }
.tmt-st .tmt-st-topicsec__title { margin: 0 0 var(--space-1); font: 700 var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-st-topicsec__desc { margin: 0; max-width: 62ch; font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); }
.tmt-st .tmt-st-more { margin-top: var(--space-3); border-top: 1px solid var(--color-border); }
.tmt-st .tmt-st-more summary { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 600; color: var(--color-brand-700); cursor: pointer; }
.tmt-st .tmt-st-more summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tmt-st .tmt-st-more__list, .tmt-st .tmt-st-linklist { margin: 0; padding: 0 0 var(--space-2); list-style: none; }
.tmt-st .tmt-st-more__list li, .tmt-st .tmt-st-linklist li { margin: 0; border-bottom: 1px solid var(--color-border); }
.tmt-st .tmt-st-more__list a, .tmt-st .tmt-st-linklist a { display: flex; align-items: center; min-height: var(--tap-min); padding-block: var(--space-1); font-weight: 600; line-height: 1.4; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tmt-st .tmt-st-more__list a:hover, .tmt-st .tmt-st-linklist a:hover { color: var(--color-brand-900); }
.tmt-st .tmt-st-more__list a:focus-visible, .tmt-st .tmt-st-linklist a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (min-width: 768px) { .tmt-st .tmt-st-more__list { columns: 2; column-gap: var(--space-8); } .tmt-st .tmt-st-more__list li { break-inside: avoid; } }

/* ---------- 7. CTA nhẹ ---------- */
.tmt-st .tmt-st-cta { padding-block: var(--space-8); background: var(--color-brand-50); border-top: 1px solid var(--color-brand-100); }
.tmt-st .tmt-st-cta__inner { max-width: 62ch; }
.tmt-st .tmt-st-cta__title { margin: 0 0 var(--space-2); font: 700 var(--text-h2)/var(--lh-h2) var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-st-cta p { margin: 0 0 var(--space-4); color: var(--color-text); }
.tmt-st .tmt-st-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 768px) { .tmt-st .tmt-st-cta { padding-block: var(--space-12); } }

/* ==========================================================================
   BÀI VIẾT
   ========================================================================== */
.tmt-st .tmt-article { max-width: calc(700px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--space-8); }
.tmt-st .tmt-article__head { padding-top: var(--space-2); }
.tmt-st .tmt-article__topic { margin: 0 0 var(--space-2); }
.tmt-st .tmt-st-chip { display: inline-flex; align-items: center; min-height: var(--tap-min); font: 700 var(--text-caption)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.tmt-st .tmt-st-chip:hover { color: var(--color-brand-900); }
.tmt-st .tmt-st-chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.tmt-st .tmt-article__title { margin: 0 0 var(--space-3); font: 700 var(--text-h1)/var(--lh-h1) var(--font-display); letter-spacing: -0.01em; color: var(--color-text-strong); overflow-wrap: break-word; }
.tmt-st .tmt-article__meta { margin: 0 0 var(--space-6); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); }
.tmt-st .tmt-article__hero { margin: 0 calc(var(--gutter) * -1) var(--space-6); aspect-ratio: 16 / 10; background: var(--color-bg-subtle); }
.tmt-st .tmt-article__hero img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) { .tmt-st .tmt-article__hero { margin: 0 0 var(--space-8); border-radius: var(--radius-lg); overflow: hidden; } }
.tmt-st .tmt-article__foot { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-6); }
.tmt-st .tmt-article__label { margin: 0 0 var(--space-2); font: 700 var(--text-caption)/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.tmt-st .tmt-article__tags .tmt-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; list-style: none; }
.tmt-st .tmt-article__tags .tmt-chip { text-decoration: none; }
.tmt-st .tmt-article__share-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* ---------- Thân bài: trải nghiệm đọc ---------- */
.tmt-st .tmt-prose { --prose-size: 17px; --prose-h2: 22px; --prose-h3: 19px; font-size: var(--prose-size); line-height: 1.75; color: var(--color-text); overflow-wrap: break-word; }
@media (min-width: 768px) { .tmt-st .tmt-prose { --prose-size: 19px; --prose-h2: 25px; --prose-h3: 21px; } }
@media (min-width: 992px) { .tmt-st .tmt-prose { --prose-size: 20px; --prose-h2: 27px; --prose-h3: 22px; } }
.tmt-st .tmt-prose > :first-child { margin-top: 0; }
.tmt-st .tmt-prose p { margin: 0 0 1.1em; }
.tmt-st .tmt-prose h2, .tmt-st .tmt-prose h2[style] { margin: 2em 0 0.6em; font: 700 var(--prose-h2)/1.25 var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-prose h3, .tmt-st .tmt-prose h3[style] { margin: 1.7em 0 0.5em; font: 700 var(--prose-h3)/1.3 var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-prose h4, .tmt-st .tmt-prose h4[style] { margin: 1.5em 0 0.4em; font: 700 var(--prose-size)/1.4 var(--font-sans); color: var(--color-text-strong); }
.tmt-st .tmt-prose ul, .tmt-st .tmt-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.tmt-st .tmt-prose li { margin: 0.35em 0; padding-left: 0.2em; }
.tmt-st .tmt-prose li > ul, .tmt-st .tmt-prose li > ol { margin: 0.4em 0 0.4em; }
.tmt-st .tmt-prose a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tmt-st .tmt-prose a:hover { color: var(--color-brand-900); }
.tmt-st .tmt-prose a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.tmt-st .tmt-prose strong, .tmt-st .tmt-prose b { font-weight: 700; color: var(--color-text-strong); }
.tmt-st .tmt-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--color-border); }
.tmt-st .tmt-prose blockquote { margin: 1.6em 0; padding: 0.4em 0 0.4em 1em; border-left: 4px solid var(--color-accent-500); color: var(--color-text-muted); font-style: italic; }
.tmt-st .tmt-prose blockquote > :last-child { margin-bottom: 0; }
.tmt-st .tmt-prose figure { margin: 1.6em 0; }
.tmt-st .tmt-prose figcaption, .tmt-st .tmt-prose .caption { margin-top: 0.5em; font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); text-align: center; }
.tmt-st .tmt-prose img { display: inline-block; max-width: 100% !important; height: auto !important; border-radius: var(--radius-md); vertical-align: middle; }
.tmt-st .tmt-prose iframe, .tmt-st .tmt-prose video { display: block; max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 1.4em 0; border: 0; border-radius: var(--radius-md); background: var(--color-bg-inverse); }
/* Bảng: cuộn ngang trong khung, không làm tràn trang */
.tmt-st .tmt-prose table { display: block; max-width: 100%; margin: 1.4em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: max(16px, 0.92em); line-height: 1.5; }
.tmt-st .tmt-prose th, .tmt-st .tmt-prose td { min-width: 6em; padding: 0.5em 0.75em; vertical-align: top; text-align: left; border: 1px solid var(--color-border-strong); }
.tmt-st .tmt-prose th { background: var(--color-bg-subtle); color: var(--color-text-strong); }
/* Khối hỏi đáp <dl> (thân nhiều bài có FAQ dạng dt/dd) */
.tmt-st .tmt-prose dl { margin: 1.4em 0; }
.tmt-st .tmt-prose dt { margin-top: 1.1em; font-weight: 700; color: var(--color-text-strong); }
.tmt-st .tmt-prose dd { margin: 0.3em 0 0; }

/* Chuẩn hoá style nội tuyến của nội dung (không sửa nội dung lưu trong Sapo): cỡ chữ, phông, canh lề, lùi lề, ảnh, màu nhấn */
.tmt-st .tmt-prose .tmt-body-22, .tmt-st .tmt-prose [style*="font-size"], .tmt-st .tmt-prose font { font-size: inherit !important; line-height: inherit !important; }
.tmt-st .tmt-prose [style*="font-family"], .tmt-st .tmt-prose font[face] { font-family: inherit !important; }
.tmt-st .tmt-prose h2[style*="font-size"], .tmt-st .tmt-prose h2 [style*="font-size"] { font-size: var(--prose-h2) !important; }
.tmt-st .tmt-prose h3[style*="font-size"], .tmt-st .tmt-prose h3 [style*="font-size"] { font-size: var(--prose-h3) !important; }
.tmt-st .tmt-prose [style*="margin-left"], .tmt-st .tmt-prose [style*="padding-left"]:not(ul):not(ol) { margin-left: 0 !important; padding-left: 0 !important; }
.tmt-st .tmt-prose ul[style*="margin-left"], .tmt-st .tmt-prose ol[style*="margin-left"] { margin-left: 0 !important; padding-left: 1.4em !important; }
.tmt-st .tmt-prose p[style*="text-align"]:not(:has(img)), .tmt-st .tmt-prose h2[style*="text-align"], .tmt-st .tmt-prose h3[style*="text-align"], .tmt-st .tmt-prose li[style*="text-align"], .tmt-st .tmt-prose div[style*="text-align"]:not(:has(img)) { text-align: left !important; }
.tmt-st .tmt-prose h2 u, .tmt-st .tmt-prose h3 u { text-decoration: none; }
.tmt-st .tmt-prose [style*="ff384b" i], .tmt-st .tmt-prose [style*="e74c3c" i], .tmt-st .tmt-prose [style*="c0392b" i] { color: var(--color-seal-700) !important; }
.tmt-st .tmt-prose [style*="width"][style*="px"]:not(img):not(table):not(iframe):not(td):not(th) { max-width: 100% !important; }

/* Đọc thêm cuối bài: hai danh sách liên kết gọn (mobile xếp dọc, từ 768px hai cột) */
.tmt-st .tmt-st-reads { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 768px) { .tmt-st .tmt-st-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.tmt-st .tmt-st-more-reads .tmt-st-h2 { font-size: var(--text-h3); line-height: var(--lh-h3); }

/* ---------- Bình luận ---------- */
.tmt-st .tmt-st-comments { max-width: calc(700px + 2 * var(--gutter)); margin: 0 auto; padding-top: var(--space-4); padding-bottom: var(--space-8); }
.tmt-st .tmt-cm-list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.tmt-st .tmt-cm { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.tmt-st .tmt-cm__head { margin: 0 0 var(--space-1); font-size: var(--text-small); color: var(--color-text-muted); }
.tmt-st .tmt-cm__head strong { color: var(--color-text-strong); }
.tmt-st .tmt-cm__body { margin: 0; overflow-wrap: anywhere; }
.tmt-st .tmt-cm-form { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.tmt-st .tmt-cm-form__title { margin: 0; font: 700 var(--text-h3)/var(--lh-h3) var(--font-display); color: var(--color-text-strong); }
.tmt-st .tmt-cm-form .tmt-btn { justify-self: flex-start; }
.tmt-st .tmt-cm-form .tmt-input { min-height: var(--control-h); height: auto; padding: var(--space-3) var(--space-4); }  /* thắng luật input toàn cục của theme cũ (cao 40px, padding-right 110px) */
.tmt-st .tmt-cm-form .tmt-cm-form__text { min-height: 140px; resize: vertical; }