/*======================================================================================================================
 * ck-content.css — สไตล์เนื้อหา CKEditor 5 สำหรับ "หน้าบ้าน"
 *   ครอบเนื้อหาที่บันทึกจาก editor ด้วย <div class="ck-content">…</div> แล้วโหลดไฟล์นี้
 *   เพื่อให้รูป (ลอยซ้าย/ขวา, ปรับขนาด %), ตาราง, code block, blockquote ฯลฯ แสดงเหมือนตอนแก้ไข
 *   อ้างอิงชุดกฎมาตรฐาน content styles ของ CKEditor 5 (เฉพาะปลั๊กอินที่ build นี้มี)
 *====================================================================================================================*/

.ck-content { word-break: break-word; }

/* ---- ย่อหน้า / ตัวหนังสือ ---- */
.ck-content p { margin: 0 0 .8em; }
.ck-content .text-tiny  { font-size: .7em; }
.ck-content .text-small { font-size: .85em; }
.ck-content .text-big   { font-size: 1.4em; }
.ck-content .text-huge  { font-size: 1.8em; }

/* ---- จัดชิด (alignment plugin) ---- */
.ck-content .text-left    { text-align: left; }
.ck-content .text-right   { text-align: right; }
.ck-content .text-center  { text-align: center; }
.ck-content .text-justify { text-align: justify; }

/* ---- ลิสต์ ---- */
.ck-content ul,
.ck-content ol { margin: 0 0 .8em; padding-left: 2.2em; }
.ck-content li { margin-bottom: .2em; }

/* ---- horizontal line ---- */
.ck-content hr {
    margin: 1em 0; height: 4px; background: #dedede; border: 0;
}

/* ---- blockquote ---- */
.ck-content blockquote {
    overflow: hidden; padding-right: 1.5em; padding-left: 1.5em;
    margin-left: 0; margin-right: 0; font-style: italic;
    border-left: 5px solid #ced4da;
}
.ck-content[dir="rtl"] blockquote { border-left: 0; border-right: 5px solid #ced4da; }

/* ==================================================================================================================
 * รูปภาพ / PDF (figure) — ขยับ/จัดวาง/ปรับขนาดแบบ Word
 * ================================================================================================================ */
.ck-content .image {
    display: table; clear: both; text-align: center;
    margin: .9em auto; min-width: 50px;
}
.ck-content .image img {
    display: block; margin: 0 auto; max-width: 100%; min-width: 100%; height: auto;
}
.ck-content .image > figcaption {
    display: table-caption; caption-side: bottom; word-break: break-word;
    color: #333; background-color: #f7f7f7; padding: .6em; font-size: .75em; outline-offset: -1px;
}

/* ปรับขนาด (%) — width ถูกฝังเป็น inline style บน figure */
.ck-content .image.image_resized { max-width: 100%; display: block; box-sizing: border-box; }
.ck-content .image.image_resized img { width: 100%; min-width: 0; }
.ck-content .image.image_resized > figcaption { display: block; }

/* รูปแทรกกลางบรรทัด (inline) */
.ck-content .image-inline {
    display: inline-flex; max-width: 100%; align-items: flex-start;
}
.ck-content .image-inline img { flex-grow: 1; flex-shrink: 1; max-width: 100%; }

/* ลอยซ้าย/ขวา (ข้อความไหลรอบ = แบบ Word) */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right { clear: none; }
.ck-content .image-style-align-left  { float: left;  margin-right: 1.5em; }
.ck-content .image-style-align-right { float: right; margin-left: 1.5em; }
.ck-content .image-style-align-center { margin-left: auto; margin-right: auto; }

/* บล็อกชิดซ้าย/ขวา (ไม่ไหลข้อความ) */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right { max-width: calc(100% - 1.5em); }
.ck-content .image-style-block-align-left  { margin-right: auto; margin-left: 0; }
.ck-content .image-style-block-align-right { margin-left: auto; margin-right: 0; }

.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right { margin-top: 0; }

/* ==================================================================================================================
 * ตาราง
 * ================================================================================================================ */
.ck-content .table {
    margin: .9em auto; display: table;
}
.ck-content .table table {
    border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%;
    border: 1px double #b3b3b3;
}
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em; padding: .4em; border: 1px solid #bfbfbf;
}
.ck-content .table table th {
    font-weight: bold; background: rgba(0, 0, 0, .05);
}
/* เคารพ border="0": ตารางจัด layout (legacy) ไม่แสดงเส้น — ตารางข้อมูลปกติยังมีเส้นตามเดิม */
.ck-content table[border="0"],
.ck-content table[border="0"] td,
.ck-content table[border="0"] th { border: none !important; }

/* ==================================================================================================================
 * โค้ด (inline code + code block พร้อมภาษา)
 * ================================================================================================================ */
.ck-content code {
    background-color: hsla(0, 0%, 78%, .3); padding: .15em .3em; border-radius: 2px;
    font-size: .95em; word-break: normal;
}
.ck-content pre {
    padding: 1em; color: #353535; background: hsla(0, 0%, 78%, .3);
    border: 1px solid #c4c4c4; border-radius: 2px; text-align: left; direction: ltr;
    tab-size: 4; white-space: pre-wrap; overflow-x: auto; font-style: normal; min-width: 200px;
}
.ck-content pre code {
    background: unset; padding: 0; border-radius: 0;
    font-family: 'Courier New', Courier, monospace;
}

/* mediaEmbed (oEmbed) */
.ck-content .media { clear: both; margin: .9em 0; display: block; min-width: 15em; }

/* ==================================================================================================================
 * HtmlEmbed (raw HTML) + PDF ฝัง iframe + HTML/ตาราง legacy ที่วางมา
 *   แสดง "ตามที่ code จัดไว้" — ปล่อยความกว้างเดิมของ legacy ได้ แต่กันล้นจอด้วย scroll แนวนอน
 * ================================================================================================================ */
.ck-content .raw-html-embed,
.ck-content .ims-pdf-embed { margin: .9em 0; max-width: 100%; overflow-x: auto; }
.ck-content .raw-html-embed iframe,
.ck-content .ims-pdf-embed iframe { max-width: 100%; }
.ck-content .ims-pdf-embed iframe { width: 100%; min-height: 480px; }