/*
 * เนื้อหาจาก editor (TinyMCE) บนหน้าเว็บ — ข่าว, เกาะ, timetable, แพ็กเกจ, วิธีจอง
 * ใส่ class "wysiwyg" ที่กล่องที่แสดงเนื้อหา
 * หลัก: ไม่มีอะไรกว้างเกินกล่อง (รูป / ตาราง / วิดีโอ / ข้อความยาว) ทั้งจอคอมและมือถือ
 */
.wysiwyg {
    /* break-word: ตัดคำ/ลิงก์ยาวเฉพาะเมื่อล้น (ไม่ทำให้ช่องตารางหดจนตัวอักษรเรียงทีละตัว) */
    overflow-wrap: break-word;
    word-break: normal;
}
/*
 * น้ำหนักตัวอักษรให้ตรงกับ editor (WYSIWYG)
 * ธีมหน้าเว็บตั้งหัวข้อเป็นตัวบาง (300) ทำให้ <strong> ในหัวข้อหนาขึ้นแค่ 400 ดูเหมือนไม่ได้กด B
 * - หัวข้อ = 500 (ไม่หนามาก) → กด B ใน editor แล้วเห็นความต่างชัด ทั้งหลังบ้านและหน้าบ้าน
 * - ตัวหนา (B) = 700 เสมอ ไม่ว่าจะอยู่ในหัวข้อหรือย่อหน้า
 */
.wysiwyg h1, .wysiwyg h2, .wysiwyg h3,
.wysiwyg h4, .wysiwyg h5, .wysiwyg h6 {
    font-weight: 500;
    line-height: 1.35;
}
.wysiwyg strong,
.wysiwyg b {
    font-weight: 700;
}
.wysiwyg::after {
    content: "";
    display: table;
    clear: both;
}

/* รูป: ไม่เกินความกว้างกล่อง และคงสัดส่วน แม้ใน editor จะตั้ง width/height ไว้ */
.wysiwyg img {
    max-width: 100% !important;
    height: auto !important;
}
.wysiwyg img[style*="float: left"],
.wysiwyg img[style*="float:left"] {
    margin: 4px 16px 12px 0;
}
.wysiwyg img[style*="float: right"],
.wysiwyg img[style*="float:right"] {
    margin: 4px 0 12px 16px;
}
.wysiwyg figure {
    max-width: 100%;
    margin: 0 0 1rem;
}

/* ตาราง: ห่อด้วย .wysiwyg-table (wysiwyg.js) — คงความกว้างที่ตั้งไว้ ถ้ากว้างกว่าจอให้ปัดเลื่อนแนวนอน */
.wysiwyg .wysiwyg-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}
.wysiwyg .wysiwyg-table-hint {
    display: none;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}
.wysiwyg .wysiwyg-table-hint.is-visible {
    display: block;
}
.wysiwyg .wysiwyg-table.is-scrollable {
    /* เงาขอบขวา บอกว่ายังมีต่อ */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) left center / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) right center / 10px 100% no-repeat scroll;
}
/* สำรองกรณี JS ไม่ทำงาน: ตารางเลื่อนในตัวเอง ไม่ดันหน้าเว็บ */
.wysiwyg table:not(.wysiwyg-wrapped) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/*
 * หน้าตาตารางมาตรฐาน: หัวตารางสีน้ำเงินบุญศิริ, แถวสลับสี, มุมโค้ง, เส้นบาง
 * สีพื้น/สีตัวอักษรที่ตั้งเองใน editor (inline style) ยังมีผลเหนือค่ามาตรฐาน
 * class เสริมจาก editor: table-plain (ไม่สลับสีแถว) / table-compact (ช่องแคบ)
 */
.wysiwyg table {
    --wt-head: #0b3d91;
    --wt-head-text: #fff;
    --wt-line: #dfe5f0;
    --wt-stripe: #f5f8fd;
    --wt-hover: #eaf2ff;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--wt-line) !important;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 1rem;
    font-size: 15px;
    line-height: 1.55;
    color: #263045;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.wysiwyg .wysiwyg-table > table {
    margin-bottom: 0;
}
.wysiwyg table td,
.wysiwyg table th {
    padding: 10px 14px;
    vertical-align: top;
    overflow-wrap: normal;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid var(--wt-line) !important;
    border-right: 1px solid var(--wt-line) !important;
}
.wysiwyg table tr > :last-child {
    border-right: 0 !important;
}
.wysiwyg table tr:last-child > td,
.wysiwyg table tr:last-child > th {
    border-bottom: 0 !important;
}
/*
 * สีมาตรฐานใส่ที่ช่อง (td/th) เฉพาะแถวที่ "ไม่ได้ตั้งสีพื้นเอง"
 * ถ้าตั้งสีแถวใน editor (Row properties → Background color = style บน <tr>) สีนั้นจะแสดงแทน
 * ส่วนสีที่ตั้งรายช่อง (style บน <td>) มีผลเหนือทุกกรณีอยู่แล้ว
 */
/* หัวตาราง: <th> หรือแถวใน <thead> */
.wysiwyg table tr:not([style*="background"]) > th,
.wysiwyg table thead tr:not([style*="background"]) > td {
    background: var(--wt-head);
    color: var(--wt-head-text);
}
.wysiwyg table th,
.wysiwyg table thead td {
    font-weight: 600;
    white-space: nowrap;
}
.wysiwyg table thead tr:last-child > * {
    border-bottom: 0 !important;
}
/* ตารางที่ไม่มี <th> เลย (เช่นแทรกจากตารางสำเร็จรูปของ editor) ใช้แถวแรกเป็นหัวตาราง ถ้ามีมากกว่า 1 แถว */
.wysiwyg table:not(:has(th)):not(:has(thead)):has(tr + tr) tr:first-child:not([style*="background"]) > td {
    background: var(--wt-head);
    color: var(--wt-head-text);
    font-weight: 600;
}
/* หัวแถว (th ด้านซ้ายในแถวถัดๆ ไป) ใช้สีอ่อนกว่า — th ในแถวแรกที่ไม่มี thead ยังเป็นหัวตารางสีเข้ม */
.wysiwyg table thead ~ tbody tr:not([style*="background"]) > th,
.wysiwyg table tbody tr + tr:not([style*="background"]) > th {
    background: #eef3fb;
    color: var(--wt-head);
}
/* แถวสลับสี + ไฮไลต์แถวที่ชี้ */
.wysiwyg table tbody tr:nth-child(even):not([style*="background"]) > td {
    background: var(--wt-stripe);
}
.wysiwyg table tbody tr:hover:not([style*="background"]) > td {
    background: var(--wt-hover);
}
/* แถวที่ตั้งสีเอง: ชี้แล้วเข้มขึ้นเล็กน้อย */
.wysiwyg table tbody tr[style*="background"]:hover > td {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .04);
}
.wysiwyg table caption {
    caption-side: top;
    padding: 0 0 6px;
    font-weight: 600;
    color: #263045;
    text-align: left;
}
.wysiwyg table p {
    margin: 0;
}
.wysiwyg table img {
    border-radius: 6px;
}
.wysiwyg table.table-plain tbody tr:nth-child(even):not([style*="background"]) > td,
.wysiwyg table.table-plain tbody tr:hover:not([style*="background"]) > td {
    background: transparent;
}
.wysiwyg table.table-compact td,
.wysiwyg table.table-compact th {
    padding: 6px 10px;
    font-size: 14px;
}
@media (max-width: 576px) {
    .wysiwyg table {
        font-size: 14px;
    }
    .wysiwyg table td,
    .wysiwyg table th {
        padding: 8px 10px;
    }
}

/* วิดีโอ / iframe (YouTube, Google Maps) */
.wysiwyg iframe,
.wysiwyg video,
.wysiwyg embed,
.wysiwyg object {
    max-width: 100%;
}
.wysiwyg iframe[src*="youtube"],
.wysiwyg iframe[src*="youtu.be"],
.wysiwyg iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.wysiwyg pre {
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: auto;
}

/* กล่องที่ตั้งความกว้างตายตัว (มักติดมาจากการคัดลอกเนื้อหา) */
.wysiwyg [style*="width"]:not(img):not(td):not(th):not(col):not(table) {
    max-width: 100%;
}

/* ปุ่มลิงก์จาก editor */
.wysiwyg a.btn {
    margin: 4px 0;
    white-space: normal;
}

/* มือถือ: เลิกให้ข้อความไหลรอบรูป วางรูปกลางเต็มบรรทัดแทน */
@media (max-width: 576px) {
    .wysiwyg img[style*="float"] {
        float: none !important;
        display: block;
        margin: 12px auto !important;
    }
}