/**
 * Detail post — CSS riêng (single.php). Nguồn: docs/design-previews/detail-post.html (.dp-*).
 * Nạp khi is_singular('post') (xem functions.php). Token dùng chung lấy từ sjourney.css.
 */
.sj-page--single-post { background: var(--sj-cream); }

/* ---- Hero ảnh bìa ---- */
.dp-hero { height: clamp(420px, 32.5vw, 624px); display: block; width: 100%; object-fit: cover; }

/* ---- Thân: bài viết + sidebar 572px ---- */
.dp-body { display: flex; gap: var(--sp-80); align-items: flex-start; padding: var(--sp-48); }
.dp-article { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-48); padding-left: var(--sp-48); }
.dp-post { display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start; }
.dp-post__head { display: flex; flex-direction: column; gap: var(--sp-8); width: 100%; }
.dp-post__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); width: 100%; }
.dp-badge { background: var(--sj-rose-nw); color: #fff; font-size: var(--fs-20); text-transform: uppercase; padding: 4px 12px; text-decoration: none; display: inline-block; }
a.dp-badge:hover { background: var(--sj-red); }
.dp-post__meta { font-size: var(--fs-20); text-transform: uppercase; color: var(--sj-muted-nw); letter-spacing: -.1px; text-align: right; }
.dp-post__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; color: var(--sj-dark); margin: 0; }
.dp-post__title .accent { color: var(--sj-red); }

/* ---- Thân bài: style trực tiếp HTML từ editor trong .dp-content ---- */
.dp-content { display: flex; flex-direction: column; gap: var(--sp-16); width: 100%; font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); text-align: justify; }
.dp-content > * { margin: 0; }
.dp-content h2, .dp-content h3 { font-weight: 500; text-transform: uppercase; letter-spacing: -.16px; line-height: 1.25; color: var(--sj-dark); text-align: left; margin-top: var(--sp-16); }
.dp-content h2 { font-size: var(--fs-32); }
.dp-content h3 { font-size: var(--fs-24); }
.dp-content p { text-align: justify; }
.dp-content a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dp-content ul, .dp-content ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.dp-content img { width: 100%; height: auto; display: block; }
.dp-content figure { margin: 0; }
.dp-content blockquote { border-left: 3px solid var(--sj-rose-nw); padding-left: var(--sp-24); color: var(--sj-dark); }
.dp-article .sj-heritage { color: var(--sj-n4-nw); display: block; margin-top: var(--sp-80); }
.dp-article .sj-heritage svg { display: block; width: 100%; height: auto; }

/* ---- Sidebar ---- */
.dp-side { flex: 0 0 572px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-48); }
.dp-side__title { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; letter-spacing: -.16px; color: var(--sj-dark); margin: 0; }
.dp-recent { display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start; width: 100%; }
.dp-route { display: flex; align-items: stretch; background: #fff; width: 100%; text-decoration: none; color: inherit; }
.dp-route.is-active { background: var(--sj-y300-nw); }
.dp-route:hover { background: var(--sj-cream); }
.dp-route__img { flex: 0 0 128px; width: 128px; height: 128px; object-fit: cover; background: var(--sj-n3-nw); }
.dp-route__body { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-width: 0; }
.dp-route__name { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; letter-spacing: -1px; color: var(--sj-dark); line-height: 1.1; }
.dp-route__line { font-size: var(--fs-16); text-transform: uppercase; letter-spacing: -.16px; color: var(--sj-muted-nw); }
.dp-route.is-active .dp-route__line { color: var(--sj-red); }
.dp-tags { display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start; width: 100%; }
.dp-tags__list { display: flex; flex-wrap: wrap; gap: var(--sp-24); }

/* ---- Related Post ---- */
.dp-related { display: flex; flex-direction: column; align-items: center; padding: var(--sp-48) var(--sp-48) var(--sp-80); }
.dp-related__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); margin: 0; text-align: center; }
.dp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: var(--sp-48); width: 100%; align-items: stretch; }
.dp-card { display: flex; flex-direction: column; gap: var(--sp-24); background: #fff; padding-bottom: var(--sp-48); text-decoration: none; color: inherit; height: 100%; }
.dp-card__img { width: 100%; height: clamp(280px, 21.9vw, 420px); display: block; object-fit: cover; background: var(--sj-n3-nw); }
.dp-card__head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 0 var(--sp-48); }
.dp-card__title { font-size: clamp(24px, calc(0.67vw + 17.14px), 30px); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); line-height: 1.1; }
.dp-card__excerpt { font-size: var(--fs-20); font-weight: 300; color: var(--sj-gray); line-height: 1.2; text-align: justify; padding: 0 var(--sp-48); }
.dp-card__meta { font-size: var(--fs-20); text-transform: uppercase; color: var(--sj-muted-nw); letter-spacing: -.1px; padding: 0 var(--sp-48); margin-top: auto; }

@media (max-width: 1023px) {
	.dp-body { flex-direction: column; padding: var(--sp-24); }
	.dp-article { padding-left: 0; }
	.dp-side { flex: 1 1 auto; width: 100%; }
	.dp-related__grid { grid-template-columns: 1fr; }
	.dp-card__img { height: 280px; }
}