/* ==========================================================================
   single.css — Trang bài viết đơn (chỉ nạp khi is_singular('post'))
   ========================================================================== */

/* ------------------------------------------------------------ Đầu bài */

/* <main> đã cách các khối bằng --section-gap; đầu bài chỉ cần sát breadcrumb */
.post-single { margin-top: calc(var(--s-5) - var(--section-gap)); }

.post-head {
  padding-top: 0;
  margin-bottom: var(--s-6);
}

.post-head .page-head__lead { margin-bottom: var(--s-4); }

.post-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.post-cats a {
  display: inline-block;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease);
}

.post-cats a:hover { background: #fff06b; text-decoration: none; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.post-meta > * { white-space: nowrap; }
.post-meta a { color: var(--c-text); }
.post-meta a:hover { color: var(--c-gold); }
.post-meta__sep { color: var(--c-text-faint); }

.post-meta__author {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
}

.post-meta__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-round);
  border: 1px solid var(--c-line-strong);
}

/* -------------------------------------------------- Bố cục + mục lục */

.post-main { min-width: 0; }

.post-thumb { margin: 0 0 var(--s-6); }

.post-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}

.post-thumb figcaption,
.post-body figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  text-align: center;
}

/* -------------------------------------------------------- Nội dung bài
   .prose được viết cho trang tài liệu dựng bằng block; bài viết từ trình soạn thảo
   khối có thêm danh sách, trích dẫn, mã, bảng... nên bổ sung kiểu cho chúng. */

.post-body { max-width: 72ch; font-size: 15px; line-height: 1.7; }
.post-body > * + * { margin-top: var(--s-4); }
.post-body > h2 + *,
.post-body > h3 + * { margin-top: var(--s-3); }

.post-body h4 { font-size: var(--fs-base); color: var(--c-text); margin-top: var(--s-5); }

.post-body a:not(.wp-element-button) { text-decoration: underline; text-underline-offset: 2px; }

.post-body :is(ul, ol):not(.bullets, .steps, .blocks-gallery-grid, .wp-block-gallery) {
  padding-left: var(--s-5);
  color: var(--c-text-dim);
}

.post-body ul:not(.bullets, .blocks-gallery-grid) { list-style: disc; }
.post-body ol:not(.steps) { list-style: decimal; }
.post-body li + li { margin-top: var(--s-2); }
.post-body li::marker { color: var(--c-gold); }

.post-body blockquote {
  margin-inline: 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-orange);
  background: var(--c-panel);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text);
  font-style: italic;
}

.post-body blockquote cite { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-faint); font-style: normal; }

.post-body code {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: rgba(0, 0, 0, .35);
  font-size: .9em;
}

.post-body pre {
  overflow-x: auto;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--c-line);
}

.post-body pre code { padding: 0; background: none; }

.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.post-body th,
.post-body td { padding: var(--s-3); border: 1px solid var(--c-line); text-align: left; }
.post-body thead th { background: var(--c-panel); color: var(--c-gold); }

.post-body figure { margin-inline: 0; }
.post-body img { border-radius: var(--r-sm); }
.post-body hr { border: 0; border-top: 1px solid var(--c-line); margin-block: var(--s-6); }

.page-links { display: flex; gap: var(--s-2); align-items: center; }

/* --------------------------------------------------------- Thẻ tag */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.post-tags__label { color: var(--c-text-faint); }
.post-tags ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.post-tags a {
  display: inline-block;
  padding: 4px var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-dim);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.post-tags a:hover { border-color: var(--c-gold); color: var(--c-gold); text-decoration: none; }

/* ------------------------------------------------------- Hộp tác giả */

.author-box {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(135deg, var(--c-panel-2), var(--c-panel));
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-md);
}

.author-box__avatar {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: var(--r-round);
  border: 2px solid var(--c-gold);
}

.author-box__body { min-width: 0; display: grid; gap: var(--s-1); }

.author-box__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.author-box__name { font-size: var(--fs-lg); }
.author-box__name a { color: var(--c-gold); }
.author-box__bio { margin-top: var(--s-1); color: var(--c-text-dim); font-size: var(--fs-sm); line-height: 1.6; }
.author-box__bio p { margin: 0; }
.author-box__bio p + p { margin-top: var(--s-2); }

.author-box__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-yellow);
}

.author-box__more svg { transition: transform var(--dur-fast) var(--ease); }
.author-box__more:hover svg { transform: translateX(3px); }

.author-box__job { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-orange); }

/* Liên kết hồ sơ mạng xã hội (hộp tác giả + trang tác giả) */
.author-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.author-social a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-dim);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.author-social a:hover { border-color: var(--c-gold); color: var(--c-gold); text-decoration: none; }
.author-social--sm { margin-top: var(--s-1); }
.author-social--sm a { min-height: 26px; font-size: 11px; }

/* ------------------------------------------------------- Trang tác giả */

.author-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  margin-top: calc(var(--s-5) - var(--section-gap));
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(252, 228, 3, .12), transparent 55%),
    linear-gradient(150deg, var(--c-panel-2), var(--c-panel) 70%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.author-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-orange) 60%, transparent);
}

.author-hero__avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--r-round);
  border: 3px solid var(--c-gold);
  box-shadow: 0 0 0 6px rgba(252, 228, 3, .12), 0 12px 28px rgba(0, 0, 0, .4);
  object-fit: cover;
}

.author-hero__body { display: grid; gap: var(--s-2); max-width: 72ch; }

.author-hero__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.author-hero__name { font-size: var(--fs-h2); color: var(--c-gold); }

.author-hero__job {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-orange);
}

.author-hero__bio { color: var(--c-text-dim); line-height: 1.7; }
.author-hero__bio p { margin: 0; }
.author-hero__bio p + p { margin-top: var(--s-2); }

.author-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}

.author-hero__stats > div {
  min-width: 110px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
}

.author-hero__stats dt {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.author-hero__stats dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }

.author-posts__empty { color: var(--c-text-dim); }

/* --------------------------------------------------- Bài trước / sau */

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.post-nav__link {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.post-nav__link:hover { border-color: var(--c-gold); transform: translateY(-2px); text-decoration: none; }
.post-nav__link--next { text-align: right; }

.post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.post-nav__link--next .post-nav__label { justify-content: flex-end; flex-direction: row-reverse; }
.post-nav__title { color: var(--c-text); font-weight: 600; }
.post-nav__link:hover .post-nav__title { color: var(--c-gold); }

/* ---------------------------------------------------- Bài liên quan */

.related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.related__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.related__link:hover { border-color: var(--c-gold); transform: translateY(-3px); text-decoration: none; }

.related__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.related__img { width: 100%; height: 100%; object-fit: cover; }

.related__body { display: grid; gap: var(--s-2); padding: var(--s-4); }
.related__title { color: var(--c-text); font-weight: 600; line-height: var(--lh-tight); }
.related__link:hover .related__title { color: var(--c-gold); }
.related__date { font-size: 12px; color: var(--c-text-faint); }

/* ------------------------------------------------------- Bình luận */

.single-post .comments {
  max-width: 72ch;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.comments .comment-list,
.comments .children { list-style: none; padding: 0; }
.comments .children { margin-top: var(--s-4); padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
.comments .comment + .comment { margin-top: var(--s-4); }

.comments .comment-body {
  padding: var(--s-4);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}

.comments .comment-meta { display: grid; gap: 2px; margin-bottom: var(--s-3); font-size: var(--fs-sm); }
.comments .comment-author { display: flex; align-items: center; gap: var(--s-3); }
.comments .comment-author .avatar { width: 40px; height: 40px; border-radius: var(--r-round); flex: 0 0 auto; margin: 0; }
.comments .comment-author .fn { color: var(--c-text); font-style: normal; font-weight: 700; }
.comments .comment-author .says { display: none; }
.comments .comment-metadata { padding-left: 52px; }
.comments .comment-metadata a { color: var(--c-text-faint); }
.comments .comment-content p { margin: 0 0 var(--s-2); }
.comments .comment-awaiting-moderation { color: var(--c-orange); font-size: var(--fs-sm); }

.comments .reply { margin-top: var(--s-2); }
.comments .comment-reply-link { font-size: var(--fs-sm); font-weight: 600; color: var(--c-yellow); }

.comments .comment-respond { margin-top: var(--s-6); }
.comments .comment-reply-title { font-size: var(--fs-lg); color: var(--c-gold); }
.comments .comment-reply-title small { margin-left: var(--s-2); font-size: var(--fs-sm); }

.comments .comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-3); }
.comments .comment-form > p { margin: 0; }
.comments .comment-notes,
.comments .logged-in-as,
.comments .comment-form-comment,
.comments .comment-form-url,
.comments .comment-form-cookies-consent,
.comments .form-submit { grid-column: 1 / -1; }
.comments .comment-notes,
.comments .logged-in-as { font-size: var(--fs-sm); color: var(--c-text-faint); }

.comments .comment-form label { display: block; margin-bottom: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-dim); }
.comments .required { color: var(--c-orange); }

.comments input[type="text"],
.comments input[type="email"],
.comments input[type="url"],
.comments textarea {
  width: 100%;
  padding: var(--s-3);
  font: inherit;
  color: var(--c-text);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.comments textarea { min-height: 140px; resize: vertical; }

.comments input:focus,
.comments textarea:focus { border-color: var(--c-gold); background: rgba(0, 0, 0, .45); }

.comments .comment-form-cookies-consent { display: flex; gap: var(--s-2); align-items: flex-start; }
.comments .comment-form-cookies-consent label { margin: 0; }
.comments .comment-form-cookies-consent input { margin-top: 3px; accent-color: var(--c-gold); }

.comments .form-submit .btn { min-width: 160px; }

/* ------------------------------------------------------- Responsive */

@media (max-width: 767px) {
  .post-body { max-width: none; font-size: var(--fs-base); }
  .post-thumb { margin-bottom: var(--s-5); }
  .post-thumb img { aspect-ratio: auto; }
  .author-box { flex-direction: column; padding: var(--s-4); }
  .author-box__avatar { width: 64px; height: 64px; }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav__gap { display: none; }
  .related__list { grid-template-columns: minmax(0, 1fr); }
  .author-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--s-5) var(--s-4); gap: var(--s-4); }
  .author-hero__avatar { width: 112px; height: 112px; }
  .author-hero .author-social,
  .author-hero__stats { justify-content: center; }
  .comments .comment-form { grid-template-columns: minmax(0, 1fr); }
  .comments .children { padding-left: var(--s-4); }
}