/**
 * Sống Lành — Trang bài viết
 * Giữ nguyên nội dung, ảnh đại diện, tác giả, ngày, chuyên mục, URL.
 * Chỉ tối ưu bề rộng đọc và nhịp khoảng cách cho tiếng Việt.
 */

.single-post .main { padding-block: var(--sl-space-section); }

/* Giữ nguyên bố cục gốc của theme: bài 692px bên trái, thanh bên 360px bên
   phải, cách nhau 80px. Cột 692px đã nằm đúng khoảng đọc 680–760px nên không
   cần ép lại bề rộng. KHÔNG đưa thanh bên xuống dưới. */

/* ---- Thanh bên phải ----------------------------------------------- */
.single-post .sidebar.widget-area .sidebar-container { width: 100%; }
.single-post .sidebar.widget-area .widget { width: 100%; }

/* Không đặt `position: sticky` cho thanh bên: theme để `overflow: hidden auto`
   trên #page, biến nó thành vùng cuộn riêng nên sticky không bao giờ ăn.
   Sửa được nhưng phải đụng wrapper của theme, dễ hỏng menu offcanvas.
   Thanh bên cuộn cùng trang như mặc định. */

/* ---- Bề rộng đọc --------------------------------------------------
   Cột bài của theme rộng 692px — đã đúng khoảng đọc tối ưu, không ép thêm.
   Ảnh và khối rộng chỉ được tràn tối đa bằng cột, tránh vỡ bố cục. */
.single-post .entry-content > figure,
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .wp-block-gallery,
.single-post .entry-content > .alignwide,
.single-post .entry-content > .alignfull {
  max-width: 100%;
}

.single-post .entry-content {
  font-size: 1.125rem;         /* 18px — cỡ đọc dài */
  line-height: var(--sl-lh-body);
}
.single-post .entry-content p { margin-block: 0 1.5em; }
.single-post .entry-content h2 {
  font-size: var(--sl-fs-h3);
  margin-block: 2.25em .6em;
}
.single-post .entry-content h3 {
  font-size: var(--sl-fs-h4);
  margin-block: 1.9em .5em;
}
.single-post .entry-content ul,
.single-post .entry-content ol { margin-block: 0 1.5em; padding-left: 1.25em; }
.single-post .entry-content li { margin-bottom: .5em; }

.single-post .entry-content img {
  height: auto;
  border-radius: 2px;
}
.single-post .entry-content figcaption {
  font-size: var(--sl-fs-meta);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--sl-muted);
  text-align: center;
  margin-top: .75rem;
}

/* ---- Chân bài: tag + chia sẻ -------------------------------------- */
.single-post .article-footer {
  margin: var(--sl-space-block) 0 0;
  padding-top: var(--sl-space-block);
  border-top: 1px solid var(--sl-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-block);
  justify-content: space-between;
}

/* Theme có một vạch trang trí 50×1px ở ::before. Khi chân bài thành flex,
   nó biến thành flex item và hiện ra như một gạch thừa bên trái.
   Chân bài đã có border-top rồi nên bỏ hẳn. */
.single-post .article-footer::before { content: none; }

/* Nhãn TAGS: / SHARE: nằm cùng hàng với nội dung, căn theo trục giữa. */
.single-post .post-tag-cloud,
.single-post .article-share {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.single-post .article-footer-title {
  display: inline-block;
  color: var(--sl-muted);
  margin-bottom: 0;
  white-space: nowrap;
}
.single-post .tagcloud,
.single-post .article-share-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.single-post .tagcloud a {
  display: inline-block;
  font-size: var(--sl-fs-meta) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--sl-border);
  border-radius: 999px;
  padding: .4rem .85rem;
  margin: 0;
  color: var(--sl-text);
  text-decoration: none;
  transition: border-color var(--sl-dur-fast) var(--sl-ease),
              color var(--sl-dur-fast) var(--sl-ease);
}
.single-post .tagcloud a:hover { border-color: var(--sl-green); color: var(--sl-green-deep); }

/* ---- Điều hướng bài trước / sau ----------------------------------- */
.single-post .post-navigation {
  margin: var(--sl-space-block) 0 0;
  padding-top: var(--sl-space-block);
  border-top: 1px solid var(--sl-border-soft);
}
.single-post .post-navigation .nav-links { display: flex; gap: var(--sl-space-block); }
.single-post .post-navigation a { text-decoration: none; color: var(--sl-text); }
.single-post .post-navigation .nav-next { margin-left: auto; text-align: right; }

/* ---- Bài liên quan ------------------------------------------------ */
.single-post .related-posts {
  margin-top: var(--sl-space-section);
  padding-top: var(--sl-space-block);
  border-top: 1px solid var(--sl-border-soft);
}
.single-post .related-posts-title {
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-meta);
  font-weight: 600;
  letter-spacing: var(--sl-ls-meta);
  text-transform: uppercase;
  color: var(--sl-muted);
  margin-bottom: var(--sl-space-block);
}

/* ---- Bình luận ---------------------------------------------------- */
.single-post .comments-area {
  margin: var(--sl-space-section) 0 0;
  padding-top: var(--sl-space-block);
  border-top: 1px solid var(--sl-border-soft);
}
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sl-border);
  border-radius: 0;
  padding: .75rem 0;
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-small);
}

/* ==================================================================
 * Sửa các chỗ vỡ ở chân bài và thanh bên
 * ================================================================== */

/* 1. Thẻ tag: theme chèn dấu "/" bằng ::after để ngăn cách.
      Khi đã bo thành pill thì dấu đó nằm trong viền, trông như lỗi. */
.single-post .tagcloud a::after,
.single-post .tagcloud a::before { content: none; }

/* 2. Ô tìm kiếm: nút kính lúp đặt absolute, rộng 60px, đè lên chữ gợi ý.
      Chừa lề phải cho chữ khỏi chui xuống dưới nút. */
.widget_search .search,
.widget_search .search-form { position: relative; }
.widget_search .search-form input[type="search"] { padding-right: 3.75rem; }
.widget_search .search-form button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  min-width: 2.5rem;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--sl-dim);
  cursor: pointer;
}
.widget_search .search-form button:hover { color: var(--sl-ink); }

/* 3. Danh sách chuyên mục: số đếm là text node đứng sau <a>.
      Cho <a> block khiến số rớt xuống dòng và lệch hẳn sang phải.
      Dùng flex: tên trái, số phải, cùng một hàng. */
.sidebar.widget-area .widget_categories li,
.sidebar.widget-area .widget_archive li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .75rem;
  font-size: var(--sl-fs-small);
  color: var(--sl-dim);
}
.sidebar.widget-area .widget_categories li a,
.sidebar.widget-area .widget_archive li a {
  display: inline;
  padding-block: 0;
  flex: 1 1 auto;
}