/* ========================================================== */
/* Styling for Quill Editor Output Content (BIGGER & EASIER) */
/* (ปรับให้ใหญ่ขึ้น อ่านง่ายขึ้น และยังคงความสวยงาม)     */
/* ========================================================== */

/* --- 1. Base Content Styling (ปรับให้สบายตาและดูโปร่ง) --- */
.quill-content {
    font-family: "Sarabun", "Kanit", "Mitr", Tahoma, "Segoe UI", sans-serif;
    font-size: 1.25rem; /* เพิ่มขนาดตัวอักษรเริ่มต้น (ประมาณ 20px) */
    line-height: 1.9;   /* ระยะบรรทัดกว้างขึ้นเพื่อการอ่านที่ดี */
    color: #222;
    word-break: break-word;

    max-width: 920px;   /* กว้างขึ้นเพื่อความสบายตาบนเดสก์ท็อป */
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.25rem; /* เพิ่ม Padding รอบเนื้อหา */
    letter-spacing: 0.01em; /* เล็กน้อยเพื่อช่วยอ่าน */
}

/* --- 2. Headings (หัวข้อ: H1-H6) - เน้นความโดดเด่น --- */
.quill-content h1,
.quill-content h2,
.quill-content h3,
.quill-content h4,
.quill-content h5,
.quill-content h6 {
    font-family: "Kanit", "Sarabun", sans-serif;
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: 1.15;
    color: #0f1720;
}

.quill-content h1 {
    font-size: 3.2rem; /* ใหญ่ชัดเจน */
    letter-spacing: -0.01em;
}

.quill-content h2 {
    font-size: 2.6rem;
    border-bottom: 3px solid #eee;
    padding-bottom: 0.6rem;
}

.quill-content h3 {
    font-size: 2rem;
    color: #333;
}

.quill-content h4 {
    font-size: 1.6rem;
}

.quill-content h5 {
    font-size: 1.35rem;
}

.quill-content h6 {
    font-size: 1.15rem;
    color: #666;
}

/* --- 3. Paragraph Spacing (ย่อหน้า) --- */
.quill-content p {
    margin-bottom: 1.6rem;
    font-size: 1.08em; /* ให้พารากราฟโดดเด่นจากหัวข้อเล็กน้อย */
}

/* --- 4. Links (ลิงก์) - เพิ่ม Effect Hover --- */
.quill-content a {
    color: #0066d6;
    text-decoration: none;
    border-bottom: 1.5px solid #0066d6;
    transition: color 0.18s ease-in-out, border-color 0.18s ease-in-out;
}

.quill-content a:hover {
    color: #004aa1;
    border-color: #004aa1;
    text-decoration: none;
}

/* --- 5. Lists (รายการ: UL, OL) - จัดระเบียบและเพิ่มมิติ --- */
.quill-content ul,
.quill-content ol {
    margin: 0 0 1.6rem 2rem;
    padding: 0;
    font-size: 1.05rem;
}

.quill-content ul li,
.quill-content ol li {
    margin-bottom: 0.7rem;
}

/* --- 6. Images (รูปภาพ) - ให้ดูมีมิติมากขึ้น --- */
.quill-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

/* --- 7. Blockquotes (ข้อความอ้างอิง) - ให้ดูน่าเชื่อถือ --- */
.quill-content blockquote {
    border-left: 6px solid #007bff;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    background-color: #f5f9ff;
    color: #444;
    font-style: italic;
    border-radius: 0.6rem;
    font-size: 1.05rem;
}

/* --- 8. Code Blocks and Inline Code --- */
.quill-content pre {
    background: #1f2933;
    color: #f1f5f9;
    padding: 1.25rem 1.5rem;
    border-radius: 0.9rem;
    overflow-x: auto;
    font-family: "Fira Code", "JetBrains Mono", Menlo, Monaco, "Courier New", monospace;
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 1.75rem 0;
}

.quill-content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.25em 0.45em;
    border-radius: 0.3rem;
    font-family: "Fira Code", "JetBrains Mono", Menlo, Monaco, "Courier New", monospace;
    font-size: 1rem;
    color: #b91c1c;
}

/* --- 9. Tables (ตาราง) - จัดรูปแบบให้ดูดี --- */
.quill-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    overflow-x: auto;
    display: block;
    font-size: 1rem;
}

.quill-content th,
.quill-content td {
    border: 1px solid #d6dce0;
    padding: 1rem 1.25rem;
    text-align: left;
}

.quill-content th {
    background-color: #f2f4f6;
    font-weight: 700;
    color: #343a40;
}

/* --- 10. Alignment Helpers (สำหรับการจัดตำแหน่งที่มาจาก Quill) --- */
.quill-content .ql-align-center {
    text-align: center;
}

.quill-content .ql-align-right {
    text-align: right;
}

.quill-content .ql-align-justify {
    text-align: justify;
}

/* --- Responsive tweaks: ลดขนาดบนหน้าจอเล็กเพื่อรักษาความคมชัด --- */
@media (max-width: 720px) {
    .quill-content {
        font-size: 1.05rem;
        line-height: 1.7;
        padding: 1.25rem;
        max-width: 100%;
    }

    .quill-content h1 { font-size: 2.2rem; }
    .quill-content h2 { font-size: 1.8rem; }
    .quill-content h3 { font-size: 1.4rem; }
    .quill-content p, .quill-content li { font-size: 1rem; }
    .quill-content pre { font-size: 0.95rem; padding: 1rem; }
    .quill-content img { margin: 1.25rem auto; border-radius: 0.75rem; }
}