/* ------------------------------------------------------------------
 * quill-content.css — สไตล์สำหรับ "แสดงผล" เนื้อหาที่เขียนจาก Quill
 * บนหน้าเว็บจริง (โหลดทุกหน้า ไฟล์เล็กมาก)
 *
 * Quill เก็บการจัดวาง/ขนาด/สี เป็น inline style อยู่แล้ว (ตั้งค่าไว้ใน _editor.php)
 * เหลือแค่ระดับย่อหน้า (indent) และองค์ประกอบพิเศษที่ต้องมี CSS ช่วย
 * ------------------------------------------------------------------ */

.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }

[dir="rtl"].ql-indent-1 { padding-right: 3em; padding-left: 0; }
[dir="rtl"].ql-indent-2 { padding-right: 6em; padding-left: 0; }
[dir="rtl"].ql-indent-3 { padding-right: 9em; padding-left: 0; }

/* ข้อความอ้างอิง */
.post-content blockquote,
.ql-editor blockquote {
    border-left: 4px solid #a10000;
    background: #faf7f7;
    margin: 1em 0;
    padding: .6em 1em;
    color: #444;
}

/* บล็อกโค้ด */
.post-content pre.ql-syntax,
.post-content .ql-code-block-container,
.ql-editor pre.ql-syntax {
    background: #23241f;
    color: #f8f8f2;
    overflow-x: auto;
    padding: 12px 14px;
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: Consolas, Menlo, monospace;
    font-size: 14px;
}

/* รายการติ๊กถูก */
.post-content ul[data-checked=true],
.post-content ul[data-checked=false] {
    list-style: none;
    padding-left: 1.2em;
}

.post-content ul[data-checked=true] > li::before {
    content: '\2611';
    margin-right: .4em;
    color: #1a7f37;
}

.post-content ul[data-checked=false] > li::before {
    content: '\2610';
    margin-right: .4em;
    color: #888;
}

/* รูปในเนื้อหาไม่ให้ล้นจอ */
.post-content img {
    max-width: 100%;
    height: auto;
}

/* วิดีโอที่แทรกจาก Quill (iframe.ql-video) ให้ยืดเต็มความกว้างแบบ 16:9 */
.post-content iframe.ql-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
}

/* ตารางเก่าที่มาจาก CKEditor ให้ยังแสดงผลสวยและเลื่อนได้บนมือถือ */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    display: block;
    overflow-x: auto;
}

.post-content table td,
.post-content table th {
    border: 1px solid #ddd;
    padding: 8px 10px;
}