/*
 * article-content.css — style cho nội dung bài viết kiến thức (Quill) khi
 * render trên trang công khai /knowledge/:id.
 *
 * LÝ DO CẦN FILE NÀY: tailwind-public.css được build KHÔNG kèm plugin
 * @tailwindcss/typography, nên class `prose` không tồn tại; trong khi
 * Preflight của Tailwind lại reset `ul/ol { list-style:none }`,
 * `h1..h6 { font-size:inherit; font-weight:inherit }`, `p { margin:0 }`.
 * Hệ quả: bài viết soạn bằng Quill (có tiêu đề, in đậm, gạch đầu dòng,
 * canh lề, thụt lề) hiển thị thành văn bản phẳng, dồn trái.
 *
 * File này khai báo lại đúng phần typography đó, cộng thêm các class do
 * Quill sinh ra (.ql-align-*, .ql-indent-*) vốn chỉ có CSS trong trang admin.
 */

.article-content {
    color: #374151;
    font-size: 1rem;
    line-height: 1.75;
    word-wrap: break-word;
}

/* --- Khối văn bản --- */
.article-content p {
    margin: 0 0 1em;
}

.article-content p:last-child {
    margin-bottom: 0;
}

/* --- Tiêu đề (Quill: header 1-3, vẫn hỗ trợ tới h6 nếu paste từ nơi khác) --- */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #111827;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 0.6em;
}

.article-content h1:first-child,
.article-content h2:first-child,
.article-content h3:first-child {
    margin-top: 0;
}

.article-content h1 { font-size: 1.75rem; }
.article-content h2 { font-size: 1.5rem; }
.article-content h3 { font-size: 1.25rem; }
.article-content h4 { font-size: 1.125rem; }
.article-content h5,
.article-content h6 { font-size: 1rem; }

/* --- Danh sách: Preflight bỏ bullet + padding, phải trả lại --- */
.article-content ul,
.article-content ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.article-content ul { list-style: disc outside; }
.article-content ol { list-style: decimal outside; }

.article-content ul ul { list-style: circle outside; }
.article-content ul ul ul { list-style: square outside; }

.article-content li {
    margin: 0.35em 0;
    padding-left: 0.25em;
}

.article-content li > ul,
.article-content li > ol {
    margin: 0.35em 0 0;
}

/* Quill dùng <ol> kèm data-list cho cả bullet lẫn số thứ tự (Quill 2.x) */
.article-content ol > li[data-list="bullet"] { list-style-type: disc; }
.article-content ol > li[data-list="ordered"] { list-style-type: decimal; }

/* --- Nhấn mạnh --- */
.article-content strong,
.article-content b { font-weight: 700; color: #111827; }

.article-content em,
.article-content i { font-style: italic; }

.article-content u { text-decoration: underline; }

.article-content s,
.article-content del { text-decoration: line-through; }

/* --- Liên kết --- */
.article-content a {
    color: #1d4ed8;
    text-decoration: underline;
}

.article-content a:hover { color: #1e40af; }

/* --- Trích dẫn / mã --- */
.article-content blockquote {
    margin: 1em 0;
    padding: 0.25em 0 0.25em 1em;
    border-left: 4px solid #e5e7eb;
    color: #4b5563;
    font-style: italic;
}

.article-content pre {
    margin: 1em 0;
    padding: 0.75em 1em;
    background: #f3f4f6;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.875em;
}

.article-content code {
    background: #f3f4f6;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.article-content pre code {
    background: none;
    padding: 0;
}

/* --- Ảnh chèn trong bài --- */
.article-content img {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    border-radius: 0.5rem;
}

/* --- Canh lề do Quill sinh ra (class ql-align-*) --- */
.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right  { text-align: right; }
.article-content .ql-align-justify { text-align: justify; }
.article-content .ql-align-left   { text-align: left; }

/* Ảnh canh giữa/phải phải bỏ margin auto để text-align có tác dụng */
.article-content .ql-align-center img,
.article-content .ql-align-right img,
.article-content .ql-align-left img {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
}

/* --- Thụt lề do Quill sinh ra (class ql-indent-1..9) --- */
.article-content .ql-indent-1 { padding-left: 3em; }
.article-content .ql-indent-2 { padding-left: 6em; }
.article-content .ql-indent-3 { padding-left: 9em; }
.article-content .ql-indent-4 { padding-left: 12em; }
.article-content .ql-indent-5 { padding-left: 15em; }
.article-content .ql-indent-6 { padding-left: 18em; }
.article-content .ql-indent-7 { padding-left: 21em; }
.article-content .ql-indent-8 { padding-left: 24em; }
.article-content .ql-indent-9 { padding-left: 27em; }

/* Với <li> thì ql-indent-* cộng thêm vào padding sẵn có của danh sách */
.article-content li.ql-indent-1 { padding-left: 1.5em; margin-left: 1.5em; }
.article-content li.ql-indent-2 { padding-left: 1.5em; margin-left: 3em; }
.article-content li.ql-indent-3 { padding-left: 1.5em; margin-left: 4.5em; }
.article-content li.ql-indent-4 { padding-left: 1.5em; margin-left: 6em; }
.article-content li.ql-indent-5 { padding-left: 1.5em; margin-left: 7.5em; }
.article-content li.ql-indent-6 { padding-left: 1.5em; margin-left: 9em; }
.article-content li.ql-indent-7 { padding-left: 1.5em; margin-left: 10.5em; }
.article-content li.ql-indent-8 { padding-left: 1.5em; margin-left: 12em; }
.article-content li.ql-indent-9 { padding-left: 1.5em; margin-left: 13.5em; }

/* --- Màn hình lớn: chữ to hơn một chút cho dễ đọc --- */
@media (min-width: 768px) {
    .article-content {
        font-size: 1.0625rem;
        line-height: 1.8;
    }

    .article-content h1 { font-size: 2rem; }
    .article-content h2 { font-size: 1.625rem; }
    .article-content h3 { font-size: 1.375rem; }
}