/* D.HOUSE — chuẩn giao diện bài viết R02 (LEAD37, 12/10/2026; sửa theo review vòng 2: REVIEW_V2_KHACH_DOC_R01 fb46c7d90c90 + REVIEW_V2_VOICE_NHAN_R01 dad0530897bb). Chỉ áp cho bài (.single-post). Bản mockup local, chưa lên staging.
   Token lấy từ theme: --ink #263328, --green #2e3c2d, --paper #f0ecdf, --cream #eadec3, --line #c5c5b5. */
.single-post{--dh-soft:#f6f2e7;--dh-muted:#596151;--dh-rule:#d5d4c8;--dh-accent:#6b7d5c;--dh-warn:#8a6a3b}

/* 1. Cột chữ và nhịp đoạn: tối đa ~70 ký tự/dòng; đoạn cách nhau rõ (trước đây margin 0) */
.single-post .cms-reading{max-width:760px}
.single-post .cms-reading>p,.single-post .cms-reading>ul,.single-post .cms-reading>ol{max-width:40em}
.single-post .cms-reading p{margin:0 0 1.05em}
.single-post .cms-reading p:last-child{margin-bottom:0}
.single-post .cms-reading .wp-block-list,.single-post .cms-reading>ul,.single-post .cms-reading>ol{margin:0 0 1.2em}
.single-post .cms-reading li{margin:0 0 .45em}
.single-post .cms-reading li::marker{color:var(--dh-accent)}
.single-post .cms-reading strong{font-weight:600}

/* 2. Đầu bài: sapo nổi hơn chữ thân một mức, tách khỏi dòng biên soạn */
.single-post .cms-reading .cms-byline{border-bottom:1px solid var(--dh-rule);padding-bottom:16px;margin-bottom:20px}
.single-post .cms-reading .cms-excerpt{font-size:19px;line-height:1.7;color:var(--ink);margin:0 0 24px;max-width:36em}

/* 3. Tiêu đề trong bài */
.single-post .cms-reading h2{font-weight:500;line-height:1.25;margin:2.1em 0 .65em;letter-spacing:-.01em}
.single-post .cms-reading h3{font-size:1.2rem;font-weight:600;line-height:1.4;margin:1.6em 0 .5em}

/* 4. Ô tóm tắt nhanh (dùng khối có sẵn .dh-editorial-decision; thêm biến thể danh sách cho bài dạng "N điểm") */
.single-post .dh-editorial-decision{background:var(--dh-soft);border:1px solid var(--dh-rule);border-left:4px solid var(--green);border-radius:10px;padding:18px 20px;margin:0 0 28px}
.single-post .dh-editorial-decision h2{font-size:1.15rem;font-weight:600;margin:0 0 12px;letter-spacing:0}
.single-post .dh-editorial-decision dl{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.single-post .dh-editorial-decision dl>div{display:grid;grid-template-columns:minmax(8.5em,30%) 1fr;gap:4px 16px;padding-top:10px;border-top:1px solid var(--dh-rule)}
.single-post .dh-editorial-decision dl>div:first-child{border-top:0;padding-top:0}
.single-post .dh-editorial-decision dt{font-weight:600;margin:0;font-size:15px;line-height:1.55}
.single-post .dh-editorial-decision dd{margin:0;font-size:15.5px;line-height:1.6}
.single-post .dh-summary-list{list-style:none;margin:0;padding:0;counter-reset:dhs}
.single-post .dh-summary-list li{counter-increment:dhs;display:grid;grid-template-columns:1.8em 1fr;gap:8px;margin:0;padding:8px 0;border-top:1px solid var(--dh-rule);font-size:15.5px;line-height:1.55}
.single-post .dh-summary-list li:first-child{border-top:0;padding-top:0}
.single-post .dh-summary-list li::before{content:counter(dhs);font-weight:600;color:var(--green)}
.single-post .dh-summary-list a{color:inherit;text-decoration:none}
.single-post .dh-summary-list a:hover{text-decoration:underline}

/* 5. Ghi chú giới hạn: một câu, nhỏ, không phải hộp cảnh báo */
.single-post .dh-limit{font-size:15.5px;line-height:1.65;color:#3f4a3b;margin:-8px 0 24px;padding-left:12px;border-left:3px solid var(--dh-rule)}

/* 6. Mục lục */
.single-post .cms-reading .reading-toc{margin:0 0 28px}
.single-post .cms-reading .reading-toc .toc-box{border:1px solid var(--dh-rule);border-radius:10px;padding:10px 14px;background:transparent;min-height:0}
.single-post .cms-reading .reading-toc summary{font-weight:600;cursor:pointer}
.single-post .cms-reading .reading-toc a{padding:6px 0;line-height:1.45}

/* 7. Điểm nhấn: Nên hỏi / Ví dụ / Lưu ý (1–3 khối/bài, không đặt liền nhau) */
.single-post .dh-note{margin:28px 0;padding:4px 0 4px 18px;background:transparent;border-left:3px solid var(--dh-accent)}
.single-post .dh-note-label{display:block;font-size:14px;font-weight:600;color:var(--dh-accent);margin:0 0 6px}
.single-post .dh-note p,.single-post .dh-note li{font-size:16.5px;line-height:1.7}
.single-post .dh-note ul{margin:0;padding-left:1.2em}
.single-post .dh-note--example{border-left-style:dashed;border-left-color:var(--dh-muted)}
.single-post .dh-note--example .dh-note-label{color:var(--dh-muted)}
.single-post .dh-note--caution{border-left-color:var(--dh-warn)}
.single-post .dh-note--caution .dh-note-label{color:var(--dh-warn)}

/* 8. Ảnh và chú thích: Loại · Nơi · Điều cần nhìn */
.single-post .cms-reading figure{margin:28px 0}
.single-post .cms-reading figure img{border-radius:8px}
.single-post .cms-reading figcaption{font-size:14.5px;line-height:1.6;opacity:1;color:var(--dh-muted);margin-top:8px}
.single-post .dh-cap-kind{font-weight:600;color:var(--green)}
.single-post .dh-cap-place{color:var(--ink)}

/* 9. Bảng: gợi ý cuộn ngang trên điện thoại */
.single-post .cms-reading .wp-block-table{background:linear-gradient(90deg,var(--paper) 30%,rgba(240,236,223,0)) left/24px 100% no-repeat local,linear-gradient(270deg,var(--paper) 30%,rgba(240,236,223,0)) right/24px 100% no-repeat local,linear-gradient(90deg,rgba(38,51,40,.12),transparent) left/10px 100% no-repeat scroll,linear-gradient(270deg,rgba(38,51,40,.12),transparent) right/10px 100% no-repeat scroll}
.single-post .cms-reading th{background:var(--cream);font-weight:600;text-align:left}

/* 10. Câu hỏi thường gặp: thẻ hỏi–đáp mở/đóng; câu trả lời luôn có trong HTML */
.single-post .dh-faq{margin:8px 0 0;border-top:1px solid var(--dh-rule)}
.single-post .dh-faq-item{border-bottom:1px solid var(--dh-rule)}
.single-post .dh-faq-item>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 36px;gap:12px;align-items:center;min-height:56px;padding:12px 0;font-size:17.5px;font-weight:600;line-height:1.45}
.single-post .dh-faq-item>summary::-webkit-details-marker{display:none}
.single-post .dh-faq-item>summary::after{content:"+" / "";width:36px;height:36px;border-radius:50%;border:1.5px solid var(--green);display:grid;place-items:center;font-weight:400;font-size:20px;line-height:1;color:var(--green)}
.single-post .dh-faq-item[open]>summary::after{content:"–" / "";background:var(--green);color:var(--paper)}
.single-post .dh-faq-item>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.single-post .dh-faq-a{padding:0 40px 18px 0}
.single-post .dh-faq-a p{font-size:16.5px;line-height:1.75;color:var(--ink)}

/* 11. Khối kêu gọi cuối bài: một khối, một nút Zalo, một link phụ */
.single-post .cms-reading .article-cta{border:0;border-left:4px solid var(--green);border-radius:12px;background:#e6dfca;color:var(--ink);padding:24px 22px;margin:48px 0 32px}
.single-post .cms-reading .article-cta h2{color:inherit;font-size:1.45rem;margin:0 0 10px}
.single-post .cms-reading .article-cta p,.single-post .cms-reading .article-cta li{color:inherit;font-size:16px;line-height:1.7}
.single-post .cms-reading .article-cta ul{margin:6px 0 16px;padding-left:1.2em}
.single-post .cms-reading .article-cta li::marker{color:var(--green)}
.single-post .cms-reading .article-cta .pill,.single-post .cms-reading .article-cta .dh-primary-contact{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;min-height:52px;padding:14px 22px;border-radius:40px;font-size:16px;font-weight:600;margin:8px 16px 6px 0;text-decoration:none}
.single-post .cms-reading .article-cta .dh-cta-secondary{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:15.5px;display:inline-block;padding:10px 0}

/* 12. Đọc thêm */
.single-post .dh-editorial-related{display:grid;gap:10px;margin:40px 0 0}
.single-post .dh-editorial-related h2{font-size:1.1rem;font-weight:600;margin:0 0 4px}
.single-post .dh-editorial-related p{margin:0}
.single-post .dh-editorial-related a{display:block;padding:12px 14px;border:1px solid var(--dh-rule);border-radius:10px;text-decoration:none;color:inherit;font-size:16px;line-height:1.5}
.single-post .dh-editorial-related a::after{content:" →" / "";color:var(--dh-accent)}

@media(max-width:640px){
 .single-post .cms-reading .cms-excerpt{font-size:18px}
 .single-post .dh-editorial-decision{padding:16px}
 .single-post .dh-editorial-decision dl>div{grid-template-columns:1fr}
 .single-post .dh-faq-item>summary{font-size:17px}
 .single-post .dh-faq-a{padding-right:0}
 .single-post .cms-reading .article-cta{padding:20px 18px}
 .single-post .cms-reading .article-cta .pill,.single-post .cms-reading .article-cta .dh-primary-contact{width:100%;margin-right:0}
}
