/*
 * bai-viet.css — Chỉ nạp ở bài viết đơn
 * Đường dẫn phân cấp, tiêu đề, thông tin tác giả, nội dung, bài liên quan, bình luận.
 */

/* ============ 1. Đường dẫn phân cấp ============ */
.duong-dan {
    margin-bottom: 14px;
    font-size: .8125rem;
    color: var(--mau-chu-nhat);
}
.duong-dan ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.duong-dan li { display: flex; align-items: center; gap: 7px; }
.duong-dan li + li::before { content: "›"; opacity: .5; }
.duong-dan a:hover { color: var(--mau-chinh); }
.duong-dan [aria-current="page"] { color: var(--mau-chu); font-weight: 600; }

/* ============ 2. Khung bài viết ============ */
.bai-viet {
    padding: var(--khoang);
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

/* Cột chữ giới hạn bề rộng để dễ đọc, canh giữa trong khung */
.bai-viet__than {
    max-width: var(--rong-noi-dung);
    margin: 0 auto;
}

.bai-viet__ten {
    margin: 10px 0 14px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.28;
}

/* Đoạn tóm tắt in đậm đầu bài */
.bai-viet__sapo {
    margin-bottom: 18px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.6;
    color: #3A3F45;
}

/* ============ 3. Dòng tác giả và thời gian ============ */
.dong-tac-gia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--khoang-nho);
    padding: 12px 0;
    margin-bottom: 18px;
    font-size: .8125rem;
    color: var(--mau-chu-nhat);
    border-top: 1px solid var(--mau-vien);
    border-bottom: 1px solid var(--mau-vien);
}
.dong-tac-gia__ten { font-weight: 700; color: var(--mau-chu); }
.dong-tac-gia__muc { display: inline-flex; align-items: center; gap: 5px; }
.dong-tac-gia svg { width: 14px; height: 14px; opacity: .75; }

/* ============ 4. Ảnh đại diện bài ============ */
.anh-dai-dien { margin-bottom: 20px; }
.anh-dai-dien figcaption {
    margin-top: 8px;
    font-size: .8125rem;
    font-style: italic;
    text-align: center;
    color: var(--mau-chu-nhat);
}

/* ============ 5. Nội dung bài ============ */
.noi-dung-bai { font-size: 1.0625rem; line-height: 1.8; }

.noi-dung-bai > * + * { margin-top: 1.1em; }

.noi-dung-bai h2 { margin-top: 1.6em; font-size: 1.375rem; }
.noi-dung-bai h3 { margin-top: 1.4em; font-size: 1.1875rem; }

/*
 * Ảnh trong bài: giới hạn đúng bề rộng cột nội dung.
 * Lưu ý: CSS chỉ giới hạn lúc HIỂN THỊ. Việc trình duyệt tải đúng
 * ảnh nhỏ do bộ lọc the_content trong inc/noi-dung.php đảm nhiệm,
 * nó hạ ảnh Cloudinary về đúng bề rộng khai trong ALXN_KICH_THUOC_ANH.
 */
.noi-dung-bai img {
    width: 100%;
    max-width: var(--rong-noi-dung);
    height: auto;
    margin: 1.4em auto;
    border-radius: var(--bo-goc-nho);
}

.noi-dung-bai figure { margin: 1.4em 0; }
.noi-dung-bai figcaption {
    margin-top: 8px;
    font-size: .8125rem;
    font-style: italic;
    text-align: center;
    color: var(--mau-chu-nhat);
}

.noi-dung-bai a {
    color: var(--mau-phu);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.noi-dung-bai a:hover { color: var(--mau-chinh); }

.noi-dung-bai blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 18px;
    font-size: 1.0625rem;
    font-style: italic;
    color: #3A3F45;
    border-left: 4px solid var(--mau-chinh);
}

.noi-dung-bai ul, .noi-dung-bai ol { padding-left: 1.4em; }
.noi-dung-bai li { margin-bottom: .5em; }

/* Bảng trong bài phải cuộn ngang được, không làm vỡ khung trang */
.noi-dung-bai table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.noi-dung-bai th, .noi-dung-bai td {
    padding: 9px 12px;
    border: 1px solid var(--mau-vien);
    text-align: left;
}
.noi-dung-bai th { background: var(--mau-nen-nhat); font-weight: 700; }

/* ============ 6. Thẻ từ khoá ============ */
.the-tu-khoa {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--khoang);
    padding-top: var(--khoang-nho);
    border-top: 1px solid var(--mau-vien);
}
.the-tu-khoa a {
    padding: 5px 12px;
    font-size: .8125rem;
    background: var(--mau-nen-nhat);
    border: 1px solid var(--mau-vien);
    border-radius: 999px;
}
.the-tu-khoa a:hover {
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border-color: var(--mau-chinh);
}

/* ============ 7. Bài liên quan ============ */
.bai-lien-quan {
    margin-top: var(--khoang);
    padding: var(--khoang);
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}
.bai-lien-quan .luoi-4 { gap: var(--khoang-nho); }

/* ============ 8. Bình luận ============ */
.khu-binh-luan {
    margin-top: var(--khoang);
    padding: var(--khoang);
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}
.khu-binh-luan ol { margin: 0; padding: 0; list-style: none; }
.khu-binh-luan .children { padding-left: 26px; list-style: none; }
.binh-luan { padding: 14px 0; border-bottom: 1px solid var(--mau-vien); }
.binh-luan__dau {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: .8125rem;
}
.binh-luan__ten { font-weight: 700; }
.binh-luan__gio { color: var(--mau-chu-nhat); }
.binh-luan img.avatar { border-radius: 50%; }

/* ============ 9. Điện thoại ============ */
@media (max-width: 600px) {
    .bai-viet, .bai-lien-quan, .khu-binh-luan { padding: 14px; }
    .bai-viet__ten { font-size: 1.4375rem; }
    .bai-viet__sapo { font-size: 1rem; }
    .noi-dung-bai { font-size: 1rem; line-height: 1.75; }
    .khu-binh-luan .children { padding-left: 14px; }
}

/* ============ 10. Chi tiết một bình luận ============ */
.binh-luan__noi-dung { font-size: .9375rem; }
.binh-luan__noi-dung p:last-child { margin-bottom: 0; }

.binh-luan__cho-duyet {
    margin: 0 0 6px;
    font-size: .8125rem;
    font-style: italic;
    color: var(--mau-chinh);
}

.binh-luan__tra-loi a {
    display: inline-block;
    margin-top: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mau-chinh);
}
.binh-luan__tra-loi a:hover { text-decoration: underline; }

/* ============ 11. Biểu mẫu gửi bình luận ============ */
.comment-respond { margin-top: var(--khoang); }

.comment-reply-title {
    margin-bottom: var(--khoang-nho);
    font-size: 1.0625rem;
    font-weight: 800;
}
.comment-reply-title small { margin-left: 8px; font-size: .8125rem; font-weight: 400; }

.comment-form p { margin-bottom: var(--khoang-nho); }

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-size: .8125rem;
    font-weight: 600;
}

/* Ba ô tên, email, website xếp ngang cho gọn trên máy tính */
.comment-form-author,
.comment-form-email,
.comment-form-url { display: inline-block; width: 32%; margin-right: 1.5%; vertical-align: top; }
.comment-form-url { margin-right: 0; }

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .8125rem;
}
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.comment-form-cookies-consent input { width: auto; }

.binh-luan-dong {
    margin: 0;
    font-size: .875rem;
    font-style: italic;
    color: var(--mau-chu-nhat);
}

@media (max-width: 600px) {
    .comment-form-author,
    .comment-form-email,
    .comment-form-url { display: block; width: 100%; margin-right: 0; }
}