/* ============================================================
   style.css — Giao diện chung cho toàn bộ website
   Sửa màu sắc, phông chữ ở phần :root bên dưới là đổi được cả site.
   ============================================================ */

/* ---------- Bảng màu (chế độ sáng) ---------- */
:root {
  --bg: #e9f4e3;          /* nền chính — xanh lá nhạt */
  --bg-soft: #ffffff;     /* nền thẻ bài viết, nổi lên trên nền chính */
  --bg-inset: #d8ecd0;    /* nền chìm: khối mã, ô thẻ, bảng */
  --text: #15261a;
  --text-muted: #4b6551;
  --text-faint: #7a9481;
  --border: #c5e0b9;
  --border-strong: #a2cc93;
  --accent: #2e7d43;      /* màu nhấn — nút, logo, liên kết */
  --accent-soft: #d4eccc;
  --accent-text: #1d6632;
  --shadow: 0 1px 2px rgba(20, 45, 26, .07), 0 8px 24px rgba(20, 45, 26, .06);
  --shadow-lift: 0 2px 4px rgba(20, 45, 26, .09), 0 14px 40px rgba(20, 45, 26, .12);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-lg: 16px;
  --wrap: 1120px;        /* khung thường: phần mở đầu, chân trang */
  --wrap-wide: 1320px;   /* khung bố cục hai cột, rộng hơn cho cân đối */
  --rail: 300px;         /* bề ngang cột dọc bên phải */
  --measure: 46rem;      /* khổ chữ hẹp, dùng khi bài viết đứng một mình */

  /* Màu cho biểu đồ SVG trong bài (xem phần "Biểu đồ" ở cuối file) */
  --cv-bg: #f6fbf3;      /* nền khung biểu đồ */
  --cv-bd: #c8e2bd;      /* viền khung và trục */
  --cv-tx: #15261a;      /* chữ chính */
  --cv-mu: #4b6551;      /* chữ phụ, ghi chú */
  --cv-gr: #dceed4;      /* đường kẻ ngang mờ */
  --cv-a1: #2e7d43;      /* màu nhấn chính — cột nổi bật */
  --cv-a2: #9ecbaa;      /* màu nhấn nhạt — cột nền so sánh */
  --cv-neg: #c0562f;     /* màu cảnh báo, số đi lùi */
  --cv-wa: #bf860f;      /* màu vàng — biến số đáng chú ý */
  --cv-n1: #a9bfb0;      /* màu trung tính */
}

/* ---------- Bảng màu (chế độ tối) ---------- */
:root[data-theme="dark"] {
  --bg: #0f1a12;          /* nền chính — xanh lá rất tối */
  --bg-soft: #16241a;
  --bg-inset: #1e3123;
  --text: #e6f0e6;
  --text-muted: #a2b8a6;
  --text-faint: #6e856f;
  --border: #26382a;
  --border-strong: #3a5240;
  --accent: #5fbf7d;
  --accent-soft: #1b2f20;
  --accent-text: #82d69b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 40px rgba(0, 0, 0, .5);

  /* Biểu đồ ở chế độ tối */
  --cv-bg: #16241a;
  --cv-bd: #2c4232;
  --cv-tx: #e6f0e6;
  --cv-mu: #a2b8a6;
  --cv-gr: #26392c;
  --cv-a1: #5fbf7d;
  --cv-a2: #356b4b;
  --cv-neg: #e2795a;
  --cv-wa: #dda93f;
  --cv-n1: #5a6f61;
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Khung rộng — dùng cho header, phần mở đầu, chân trang, để thẳng hàng với bố cục hai cột */
.wrap-wide { max-width: var(--wrap-wide); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Thanh điều hướng ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 9px;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  min-width: 30px; height: 30px; flex: none;
  padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .03em;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--text-muted); font-size: .9rem; font-weight: 500;
  padding: 7px 12px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-links a:hover { background: var(--bg-inset); color: var(--text); text-decoration: none; }
.nav-links a.is-active { color: var(--text); background: var(--bg-inset); }

/* Ô tìm kiếm nằm trong thanh menu, ngay sau mục cuối */
.nav-links .search-field { flex: 0 1 190px; margin-left: 10px; }
.nav-links .search-field input { padding: 7px 12px 7px 34px; font-size: .86rem; }
.nav-links .search-field svg { left: 11px; width: 15px; height: 15px; }

.icon-btn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-soft); color: var(--text-muted);
  cursor: pointer; padding: 0;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root:not([data-theme="dark"]) .icon-moon { display: none; }

.nav-toggle { display: none; }

/* ---------- Phần mở đầu trang chủ ---------- */
.hero { padding: 72px 0 44px; border-bottom: 1px solid var(--border); }
.hero-eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 600;
  margin: 0 0 18px; max-width: 20ch;
}
.hero p {
  font-size: 1.08rem; color: var(--text-muted);
  max-width: 56ch; margin: 0;
}

/* ---------- Bố cục hai cột: nội dung trái, cột dọc phải ---------- */
/* Khung rộng hơn .wrap thường, để cột phải đẩy hẳn ra sát mép cho cân đối */
.wrap.layout {
  max-width: var(--wrap-wide);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 72px;
  align-items: start;
  padding: 30px 24px 80px;
}
/* Cho phép cột co lại nhỏ hơn bề ngang tối thiểu của nội dung bên trong.
   Thiếu dòng này thì bảng hoặc khối mã dài sẽ đẩy cả trang tràn ngang. */
.wrap.layout > * { min-width: 0; }

.sidebar {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 20px;
}

.widget {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.widget h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 4px;
}
.widget-note {
  font-size: .74rem; color: var(--text-faint);
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Bảng xếp hạng bài xem nhiều */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-num {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  color: var(--text-faint); width: 1.1em; flex: none; text-align: right;
}
.rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rank-body a {
  color: var(--text); font-size: .89rem; font-weight: 500; line-height: 1.4;
}
.rank-body a:hover { color: var(--accent-text); text-decoration: none; }
.rank-views {
  display: flex; align-items: center; gap: 5px;
  font-size: .74rem; color: var(--text-faint);
}
.rank-views svg { width: 12px; height: 12px; flex: none; }

/* Danh sách sách tiêu biểu */
.book-list { list-style: none; margin: 0; padding: 0; }
.book {
  display: flex; gap: 13px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.book:last-child { border-bottom: 0; padding-bottom: 0; }
.book-cover {
  width: 46px; height: 66px; flex: none;
  border-radius: 4px; object-fit: cover;
  background: var(--bg-inset);
  box-shadow: 0 1px 3px rgba(20, 45, 26, .18);
}
.book-cover.is-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-inset), var(--accent-soft));
  font-family: var(--font-serif); font-size: 1.4rem; color: var(--accent-text);
}
.book-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-title { font-size: .88rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.book-title a { color: var(--text); }
.book-title a:hover { color: var(--accent-text); text-decoration: none; }
.book-author { font-size: .76rem; color: var(--text-muted); }
.book-note { font-size: .76rem; color: var(--text-faint); line-height: 1.45; margin-top: 3px; }

/* ---------- Ô tìm kiếm ---------- */
.search-field { position: relative; flex: 1 1 260px; max-width: 380px; }
.search-field svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
.search-field input {
  width: 100%; padding: 10px 14px 10px 38px;
  font: inherit; font-size: .92rem;
  color: var(--text); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-field input::placeholder { color: var(--text-faint); }
.search-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tag-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.tag-chip {
  font: inherit; font-size: .82rem; font-weight: 500;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border);
  transition: all .15s ease;
}
.tag-chip:hover { border-color: var(--border-strong); color: var(--text); }
.tag-chip.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ---------- Danh sách bài viết ---------- */
.post-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.post-card-media {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-inset);
  overflow: hidden;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Ảnh bìa dạng biểu đồ (SVG): hiện trọn khung, không cắt mất chữ */
.post-card-media img[src$=".svg"] { object-fit: contain; padding: 6px; }
.post-card-media.is-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-inset), var(--accent-soft));
  font-family: var(--font-serif); font-size: 2.4rem; color: var(--accent-text); opacity: .55;
}
.badge-video {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(16, 14, 12, .78); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.badge-video svg { width: 11px; height: 11px; }

.post-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .76rem; color: var(--text-faint); margin-bottom: 10px;
}
.post-meta .dot { opacity: .5; }
.meta-views { display: inline-flex; align-items: center; gap: 5px; }
.meta-views svg { width: 13px; height: 13px; }
.post-card h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem; line-height: 1.32; letter-spacing: -.012em; font-weight: 600;
  margin: 0 0 9px;
}
.post-card h2 a { color: var(--text); }
.post-card h2 a:hover { color: var(--accent-text); text-decoration: none; }
.post-card p {
  font-size: .9rem; color: var(--text-muted); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag-pill {
  font-size: .72rem; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-inset); color: var(--text-muted);
}

/* Bài nổi bật: chiếm trọn hàng đầu */
.post-card.is-featured { grid-column: 1 / -1; flex-direction: row; }
.post-card.is-featured .post-card-media { width: 48%; aspect-ratio: auto; flex: none; }
.post-card.is-featured .post-card-body { padding: 34px 38px; justify-content: center; }
.post-card.is-featured h2 { font-size: 1.85rem; }
.post-card.is-featured p { font-size: .98rem; -webkit-line-clamp: 4; }

.empty-state {
  grid-column: 1 / -1; text-align: center;
  padding: 76px 20px; color: var(--text-muted);
}
.empty-state strong { display: block; font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }

/* Danh sách bài dự phòng khi trình duyệt tắt JavaScript (build.ps1 tự điền) */
.post-list-fallback { grid-column: 1 / -1; margin: 0; padding: 0 0 0 1.2em; }
.post-list-fallback li { margin-bottom: 1em; color: var(--text-muted); font-size: .95rem; }
.post-list-fallback a { font-weight: 600; font-size: 1.05rem; }

/* ---------- Trang bài viết ---------- */
.article-head { padding: 56px 0 30px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .86rem; font-weight: 500; color: var(--text-muted);
  margin-bottom: 26px;
}
.back-link:hover { color: var(--accent-text); text-decoration: none; }
.back-link svg { width: 14px; height: 14px; }

.article-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 4.4vw, 2.85rem);
  line-height: 1.16; letter-spacing: -.022em; font-weight: 600;
  margin: 0 0 18px; max-width: 24ch;
}
.article-lead {
  font-size: 1.12rem; color: var(--text-muted);
  max-width: var(--measure); margin: 0 0 22px;
  text-align: justify; text-justify: inter-word;
}
.article-cover {
  margin: 30px 0 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
}

/* Nội dung bài — khổ chữ hẹp cho dễ đọc */
.article-body {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: 1.09rem; line-height: 1.8;
  padding-bottom: 40px;
}
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.35em; }
/* Căn đều hai bên: chữ thẳng hàng cả lề trái lẫn lề phải */
.article-body p,
.article-body li,
.article-body blockquote p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.article-body h2 {
  font-size: 1.62rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 600;
  margin: 2.2em 0 .6em; scroll-margin-top: 84px;
}
.article-body h3 {
  font-size: 1.28rem; line-height: 1.35; font-weight: 600;
  margin: 1.9em 0 .5em; scroll-margin-top: 84px;
}
.article-body h4 { font-size: 1.08rem; font-weight: 600; margin: 1.6em 0 .4em; }
.article-body ul, .article-body ol { margin: 0 0 1.35em; padding-left: 1.5em; }
.article-body li { margin-bottom: .5em; }
.article-body li > ul, .article-body li > ol { margin: .5em 0 0; }
.article-body img { border-radius: var(--radius); margin: 1.8em auto; }

/* ---------- Biểu đồ SVG ----------
   site.js đổi thẻ <img src="...svg"> thành SVG nhúng thẳng vào trang, nhờ vậy
   biểu đồ dùng chung các biến --cv-* ở đầu file và đổi màu ngay khi bấm nút
   sáng/tối. Nếu tải hỏng thì thẻ ảnh được giữ nguyên, nên các quy tắc cho
   img[src$=".svg"] bên dưới vẫn cần thiết. */
svg.cvi { max-width: 100%; height: auto; }
.article-body svg.cvi { display: block; width: 100%; margin: 1.8em auto; }
.article-cover svg.cvi { display: block; width: 100%; }
.article-cover.chart-host { border: 0; border-radius: 0; overflow: visible; }
.post-card-media svg.cvi { width: 100%; height: 100%; }
.post-card-media.chart-host { background: var(--cv-bg); }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.6em 0; }
.article-body mark { background: var(--accent-soft); color: var(--accent-text); padding: 0 3px; border-radius: 3px; }

.article-body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted); font-style: italic;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--bg-inset); color: var(--accent-text);
  padding: .15em .4em; border-radius: 5px;
}
.article-body .code-block {
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.65;
  background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin: 1.8em 0;
  overflow-x: auto; position: relative;
}
.article-body .code-block code { background: none; color: inherit; padding: 0; font-size: inherit; }
.article-body .code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 8px; right: 12px;
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}

.table-wrap { overflow-x: auto; margin: 1.8em 0; }
.article-body table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans); font-size: .92rem;
}
.article-body th, .article-body td {
  padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left;
}
.article-body th { font-weight: 600; background: var(--bg-inset); }

/* ---------- Bài viết khi nằm trong bố cục hai cột ---------- */
/* Bỏ trần khổ chữ để bài viết dùng hết bề ngang cột trái */
.layout .article-head,
.layout .article-lead,
.layout .article-footer,
.layout .state-box { max-width: none; }

.layout .article-head { padding: 26px 0 24px; }
.layout .article-head h1 { max-width: 22ch; }
.layout .article-body {
  max-width: none;
  font-size: 1.13rem;
  line-height: 1.82;
}
.layout .article-body h2 { font-size: 1.72rem; }
.layout .article-body h3 { font-size: 1.34rem; }

/* ---------- Bài liên quan (cuối bài viết) ---------- */
.related {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.related h2 {
  font-family: var(--font-serif);
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.012em;
  margin: 0 0 20px;
}
.related-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.related-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 17px 19px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.related-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.related-tag {
  font-size: .69rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text);
}
.related-card h3 {
  font-family: var(--font-serif);
  font-size: 1.02rem; line-height: 1.34; font-weight: 600;
  margin: 0;
}
.related-card h3 a { color: var(--text); }
.related-card h3 a:hover { color: var(--accent-text); text-decoration: none; }
.related-card p {
  font-size: .83rem; line-height: 1.5; color: var(--text-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.related-meta {
  font-size: .73rem; color: var(--text-faint);
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; gap: 7px;
}
.related-meta svg { width: 12px; height: 12px; }

/* ---------- Thanh tiến độ đọc ---------- */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.reading-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .08s linear;
}

/* ---------- Mục lục (cột phải) ---------- */
.toc h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 10px;
}
.toc-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.toc-item { line-height: 1.4; }
.toc-item a {
  display: block; padding: 6px 0 6px 12px; margin-left: -2px;
  font-size: .84rem; color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.toc-item.toc-sub a { padding-left: 26px; font-size: .8rem; }
.toc-item a:hover { color: var(--text); text-decoration: none; }
.toc-item a.is-active {
  color: var(--accent-text); border-left-color: var(--accent); font-weight: 600;
}

/* ---------- Hộp "Loạt bài này" (cột phải) ---------- */
.series-name { font-size: .8rem; color: var(--text-muted); margin: 2px 0 14px; line-height: 1.4; }
.series-list { list-style: none; margin: 0; padding: 0; }
.series-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.series-item:last-child { border-bottom: 0; padding-bottom: 0; }
.series-num {
  flex: none; width: 1.7em; height: 1.7em;
  display: grid; place-items: center; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  background: var(--bg-inset); color: var(--text-muted);
}
.series-num-intro { font-size: 1rem; }
.series-item.is-current .series-num { background: var(--accent); color: #fff; }
.series-text { min-width: 0; }
.series-text a { font-size: .86rem; color: var(--text); line-height: 1.4; }
.series-text a:hover { color: var(--accent-text); text-decoration: none; }
.series-current { font-size: .86rem; font-weight: 600; color: var(--accent-text); line-height: 1.4; }

/* ---------- Nút ← Bài trước / Bài sau → ---------- */
.series-nav {
  max-width: var(--measure);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0 0 44px;
}
.layout .series-nav { max-width: none; }
.series-nav-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.series-nav-card:hover {
  border-color: var(--border-strong); box-shadow: var(--shadow);
  transform: translateY(-2px); text-decoration: none;
}
.series-nav-next { text-align: right; }
.series-nav-dir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-text);
}
.series-nav-next .series-nav-dir { justify-content: flex-end; }
.series-nav-dir svg { width: 14px; height: 14px; }
.series-nav-title {
  font-family: var(--font-serif); font-size: .98rem; font-weight: 600;
  color: var(--text); line-height: 1.35;
}

/* Khung video nhúng */
.video-embed {
  position: relative; aspect-ratio: 16 / 9;
  margin: 2em 0; border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--border);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Chân bài viết */
.article-footer {
  max-width: var(--measure);
  border-top: 1px solid var(--border);
  padding: 26px 0 80px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.article-footer .post-card-tags { margin: 0; }
.share-group { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.share-group span { font-size: .82rem; color: var(--text-faint); }

/* Trạng thái tải / lỗi */
.state-box {
  max-width: var(--measure); padding: 60px 0 90px; color: var(--text-muted);
}
.state-box h2 { font-family: var(--font-serif); color: var(--text); margin: 0 0 10px; }
.state-box code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--bg-inset); padding: .15em .45em; border-radius: 5px;
}

/* ---------- Trang giới thiệu ---------- */
.page-body {
  max-width: var(--measure);
  font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.8;
  padding-bottom: 80px;
}
.page-body h2 { font-size: 1.5rem; margin: 2em 0 .6em; font-weight: 600; }
.page-body ul { padding-left: 1.5em; }
.page-body li { margin-bottom: .5em; }

/* ---------- Chân trang ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 34px 0;
  font-size: .87rem; color: var(--text-muted);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.footer-links { margin-left: auto; display: flex; gap: 18px; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent-text); }

/* ---------- Màn hình nhỏ ---------- */
/* Khung vừa: thu hẹp khoảng cách hai cột trước khi phải xếp chồng */
@media (max-width: 1180px) {
  .wrap.layout { gap: 44px; }
}

/* Dưới 1040px: cột phải tụt xuống dưới nội dung */
@media (max-width: 1040px) {
  .wrap.layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sidebar { position: static; }
  .layout .article-body { max-width: var(--measure); font-size: 1.09rem; }
  .layout .article-head h1 { max-width: 24ch; }
}

/* Trên màn hình vừa, cột phải xếp hai ô cạnh nhau cho đỡ dài */
@media (min-width: 681px) and (max-width: 1040px) {
  .sidebar { flex-direction: row; flex-wrap: wrap; }
  .sidebar .widget { flex: 1 1 300px; }
}

@media (max-width: 900px) {
  .nav-links .search-field { flex-basis: 150px; }
}

@media (max-width: 860px) {
  .post-card.is-featured { flex-direction: column; }
  .post-card.is-featured .post-card-media { width: 100%; aspect-ratio: 16 / 9; }
  .post-card.is-featured .post-card-body { padding: 22px; }
  .post-card.is-featured h2 { font-size: 1.4rem; }
}

@media (max-width: 680px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 48px 0 32px; }
  .nav-toggle { display: grid; }
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 18px 16px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .nav-links.is-open { display: flex; }
  .nav-links .search-field { flex: 1 1 auto; max-width: none; margin: 8px 0 0; }
  .search-field { max-width: none; }
  .article-body { font-size: 1.04rem; }
  /* Màn hình hẹp: bỏ căn đều để tránh khoảng trắng giãn quá rộng giữa các từ */
  .article-lead,
  .article-body p,
  .article-body li,
  .article-body blockquote p { text-align: left; }
  .footer-links { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  .series-nav { grid-template-columns: 1fr; }
  .series-nav-next { text-align: left; }
  .series-nav-next .series-nav-dir { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}