/* ==========================================================================
   Bài viết & trang. Nạp trên singular post/page.
   Mục tiêu: khổ đọc 68–72 ký tự, chữ 17,5px, nhịp dọc rõ, thứ bậc tiêu đề rõ,
   mục lục và CTA tư vấn không chen vào dòng đọc.
   ========================================================================== */

/* --- Khung ---------------------------------------------------------------- */
.article { padding-block: var(--s-5) var(--s-8); }

.article__head { max-width: 760px; margin: 0 auto var(--s-6); text-align: center; }
.article__cat {
  display: inline-block; margin-bottom: var(--s-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-bronze);
}
.article__cat:hover { color: var(--c-maroon-700); }
.article__title { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.2; margin-bottom: var(--s-4); }
.article__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm); color: var(--c-muted); margin: 0;
}
.article__meta span::before { content: "·"; margin-right: var(--s-4); color: var(--c-line); }
.article__meta span:first-child::before { content: none; }

.article__cover { max-width: 1040px; margin: 0 auto var(--s-7); }
.article__cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }

/* Bố cục 2 cột từ 1024px: thân bài + sidebar dính */
.article__layout { display: grid; gap: var(--s-6); max-width: 1040px; margin-inline: auto; }
@media (min-width: 1024px) {
  .article__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8); align-items: start; }
  .article__aside { position: sticky; top: var(--s-5); }
}

/* --- Thân bài ------------------------------------------------------------- */
.prose {
  max-width: 70ch;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);   /* ≈17–18px */
  line-height: 1.75;
  color: var(--c-ink);
}
.prose > * + * { margin-top: 1.25em; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1.15em; }

.prose h2, .prose h3, .prose h4 { line-height: 1.3; scroll-margin-top: var(--s-6); }
.prose h2 {
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
  margin-top: 2.2em; padding-top: .9em;
  border-top: 1px solid var(--c-line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); margin-top: 1.8em; color: var(--c-maroon-700); }
.prose h4 { font-size: 1.05em; margin-top: 1.5em; }
.prose h2 + h3, .prose h3 + h4, .prose :is(h2,h3,h4) + p { margin-top: .7em; }

.prose a { color: var(--c-maroon-700); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--c-red); text-decoration-thickness: 2px; }
.prose strong { color: var(--c-heading); }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--c-gold-500); font-weight: 700; }

/* Ảnh: đứng giữa, rộng bằng thân bài, không phá bố cục dù có width/height cũ */
.prose img { max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius); }
.prose .prose-figure, .prose figure { margin: 1.8em 0; text-align: center; }
.prose .prose-figure img { box-shadow: var(--shadow-1); }
.prose figcaption { font-size: var(--t-sm); color: var(--c-muted); margin-top: .6em; }

.prose blockquote {
  margin: 1.8em 0; padding: 1em 1.4em;
  border-left: 3px solid var(--c-gold-500);
  background: var(--c-surface-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--c-ink);
}

.prose table { width: 100%; font-size: .92em; border-collapse: collapse; }
.prose :is(th, td) { padding: .6em .8em; border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose th { background: var(--c-surface-3); font-weight: 600; }

.prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5em 0; }

/* Nút gọi nằm trong bài (nếu người viết chèn) */
.prose .btn { text-decoration: none; }

/* --- Mục lục -------------------------------------------------------------- */
.toc { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.toc__title {
  margin: 0; padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-maroon-700); cursor: pointer; list-style: none;
}
.toc__title::-webkit-details-marker { display: none; }
.toc--inline .toc__title::after { content: "＋"; float: right; color: var(--c-muted); }
.toc--inline[open] .toc__title::after { content: "－"; }
.toc__list, .toc__sub { margin: 0; padding: 0 var(--s-4) var(--s-3) var(--s-4); list-style: none; counter-reset: toc; }
.toc__sub { padding: .3em 0 0 1.1em; }
.toc__list li { margin: 0; }
.toc__list > li + li { margin-top: .35em; }
.toc__list a {
  display: block; padding: .25em 0; font-size: var(--t-sm); color: var(--c-body); line-height: 1.45;
  border-left: 2px solid transparent; padding-left: .6em; margin-left: -.6em;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.toc__list > li > a { font-weight: 500; }
.toc__sub a { color: var(--c-muted); }
.toc__list a:hover, .toc__list a.is-active { color: var(--c-maroon-700); border-left-color: var(--c-gold-500); }

.toc--inline { margin-bottom: var(--s-5); }
.toc--aside { display: none; }
@media (min-width: 1024px) {
  .toc--inline { display: none; }
  .toc--aside { display: block; max-height: calc(100vh - 220px); overflow: auto; }
}

/* --- Sidebar CTA ---------------------------------------------------------- */
.aside-card {
  background: linear-gradient(160deg, var(--c-maroon-700), var(--c-maroon-900));
  color: #fff; border-radius: var(--radius); padding: var(--s-5); margin-top: var(--s-4);
}
.aside-card h2 { color: #fff; font-size: var(--t-md); margin-bottom: var(--s-2); }
.aside-card p { font-size: var(--t-sm); color: rgba(255,255,255,.8); margin-bottom: var(--s-4); }
.aside-card .btn { width: 100%; margin-top: var(--s-2); }

.aside-products { margin-top: var(--s-4); }
.aside-products h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--c-maroon-700); margin-bottom: var(--s-3); }
.aside-products a {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); align-items: center;
  padding: var(--s-2) 0; border-top: 1px solid var(--c-line); color: var(--c-ink); font-size: var(--t-sm); line-height: 1.4;
}
.aside-products a:hover { color: var(--c-maroon-700); }
.aside-products img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.aside-products small { display: block; color: var(--c-bronze); font-weight: 600; }

/* --- Chân bài: chia sẻ, trước/sau, liên quan ----------------------------- */
.article__foot { max-width: 70ch; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.share { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--c-muted); }
.share a, .share button {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .45em .9em; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface); color: var(--c-body); font-size: var(--t-xs); font-weight: 600;
  transition: all .15s var(--ease);
}
.share a:hover, .share button:hover { border-color: var(--c-maroon-700); color: var(--c-maroon-700); }

.post-nav { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
  display: block; padding: var(--s-3) var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  color: var(--c-ink); font-size: var(--t-sm); line-height: 1.4;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.post-nav a:hover { border-color: var(--c-gold-500); transform: translateY(-1px); }
.post-nav small { display: block; color: var(--c-muted); font-size: var(--t-xs); margin-bottom: .3em; }
.post-nav .next { text-align: right; }

/* Thanh tiến độ đọc */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--c-gold-500); z-index: 300; transition: width .1s linear; }

/* --- Lede dưới meta (site cũ có) ------------------------------------------ */
.article__lede { max-width: 62ch; margin: var(--s-4) auto 0; font-size: var(--t-md); line-height: 1.6; color: var(--c-body); }

/* --- Sidebar: Công trình tiêu biểu / Tin nổi bật -------------------------- */
.side-list { margin-top: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--s-4); }
.side-list__title {
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-maroon-700); margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-gold-300);
}
.side-list__title a { color: inherit; }
.side-list__items { list-style: none; margin: 0; padding: 0; }
.side-list__items li { margin: 0; }
.side-list__items li + li { border-top: 1px dashed var(--c-line); }
.side-list__items a { display: block; padding: .55em 0; font-size: var(--t-sm); line-height: 1.45; color: var(--c-body); }
.side-list__items a:hover { color: var(--c-maroon-700); }
.side-list__items--thumb a { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); align-items: center; }
.side-list__items--thumb img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }

/* --- Chuyên mục bài viết: hàng ảnh trái + nội dung phải ------------------- */
.archive__layout { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .archive__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8); align-items: start; } .archive__aside { position: sticky; top: var(--s-5); } }
.archive--list .section-head { text-align: left; }
.archive--list .section-head::after { margin-inline: 0; }
.archive--list .subcat-list { justify-content: flex-start; }

.post-rows { display: grid; gap: var(--s-4); }
.post-row {
  display: grid; grid-template-columns: 1fr; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (min-width: 640px) { .post-row { grid-template-columns: 300px 1fr; align-items: start; } }
.post-row__media { display: block; aspect-ratio: 16/9; background: var(--c-surface-3); align-self: start; }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }
.post-row__body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.post-row__title { font-size: var(--t-md); line-height: 1.35; margin: 0; }
.post-row__title a { color: var(--c-heading); }
.post-row__title a:hover { color: var(--c-maroon-700); }
.post-row__meta { font-size: var(--t-xs); color: var(--c-muted); margin: 0; }
.post-row__excerpt { font-size: var(--t-sm); color: var(--c-body); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
.post-row__more { margin-top: auto; align-self: flex-end; font-size: var(--t-sm); font-weight: 600; color: var(--c-maroon-700); }

/* Mô tả danh mục dưới lưới: cùng khổ đọc, tiêu đề có id để neo */
.cat-desc .prose { margin-inline: auto; }