@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Sarabun', sans-serif !important;
}

/* ======================================================
  KPRU ManCap - Centralized Editor Content CSS
  ควบคุมสัดส่วนตัวอักษรเฉพาะ "เนื้อหาด้านใน" ของ Quill Editor
  ====================================================== */

.ql-container { 
    min-height: 200px;
    font-size: 16px; 
    font-family: 'Sarabun', sans-serif; 
    background: #fff; 
}

.quill-wrapper { 
    margin-bottom: 20px;
} 

/* 1. คุมฟอนต์ สีข้อความ และ Layout พื้นฐาน */


/* 2. จัดการหัวข้อ (Headings) */
.ql-editor h1 { font-size: 2rem !important; font-weight: 700 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #1e293b; }
.ql-editor h2 { font-size: 1.75rem !important; font-weight: 700 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #334155; }
.ql-editor h3 { font-size: 1.5rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #0d6efd; /* สีน้ำเงิน */ }
.ql-editor h4 { font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #dc3545; /* สีแดง */ }
.ql-editor h5 { font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #64748b; }
.ql-editor h6 { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem; color: #64748b; }

/* 3. จัดการย่อหน้า และรายการ (Lists) */
.ql-editor p { margin-bottom: 0.5rem !important; }
.ql-editor ul, .ql-editor ol { margin-bottom: 1rem !important; padding-left: 2rem !important; }
.ql-editor li { margin-bottom: 0.2rem !important; }

/* 4. จัดการรูปภาพและวิดีโอ (Responsive & Rounded) */
.ql-editor img, .ql-editor iframe {
    border-radius: 12px;
    max-width: 100%; height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin: 10px 0;
    display: inline-block;
}

/* 5. รองรับ Dark Mode อัตโนมัติ */
body.dark-theme .ql-editor { color: #e2e8f0; }
body.dark-theme .ql-editor h1, body.dark-theme .ql-editor h2, 
body.dark-theme .ql-editor h3, body.dark-theme .ql-editor h4, 
body.dark-theme .ql-editor h5, body.dark-theme .ql-editor h6 { color: #f8fafc; }


/* ======================================================
  UI Components เฉพาะของ KPRU ManCap (LINE, Zoom, ShareX)
  ====================================================== */

.btn-tool-line:hover { 
    border-color: #00B900; color: #00B900; background-color: #f8f9fa; 
}

.cropper-point { background-color: #fff400; height: 10px; opacity: .75; width: 10px; }
.cropper-modal { background-color: #000; opacity: 0.7; }

.sharex-feature-only { display: none !important; }
body.sharex-active .sharex-feature-only { display: inline-flex !important; }


/* ======================================================
  🌟 ไม้ตายขั้นเด็ดขาด: ระบบลิสต์ ก, ข, ค และ Toolbar 🌟
  ====================================================== */

/* --- สร้างระบบนับ ก, ข, ค ให้เบราว์เซอร์รู้จัก --- */
@counter-style thai-alpha {
    system: alphabetic;
    symbols: 'ก' 'ข' 'ค' 'ง' 'จ' 'ฉ' 'ช' 'ซ' 'ฌ' 'ญ' 'ฎ' 'ฏ' 'ฐ' 'ฑ' 'ฒ' 'ณ' 'ด' 'ต' 'ถ' 'ท' 'ธ' 'น' 'บ' 'ป' 'ผ' 'ฝ' 'พ' 'ฟ' 'ภ' 'ม' 'ย' 'ร' 'ล' 'ว' 'ศ' 'ษ' 'ส' 'ห' 'ฬ' 'อ' 'ฮ';
}

/* --- บังคับนับเลขเมื่ออยู่ในเนื้อหา --- */
.ql-editor ol[data-list="upper-alpha"], .ql-editor li[data-list="upper-alpha"] { counter-increment: list-0; }
.ql-editor ol[data-list="lower-alpha"], .ql-editor li[data-list="lower-alpha"] { counter-increment: list-0; }
.ql-editor ol[data-list="thai"], .ql-editor li[data-list="thai"] { counter-increment: list-0; }

/* --- สั่งแสดงตัวเลข/ตัวอักษร ให้ออกมาตรงตามที่เลือก --- */
.ql-editor ol[data-list="upper-alpha"] > li::before, .ql-editor li[data-list="upper-alpha"]::before { content: counter(list-0, upper-alpha) ". " !important; }
.ql-editor ol[data-list="lower-alpha"] > li::before, .ql-editor li[data-list="lower-alpha"]::before { content: counter(list-0, lower-alpha) ". " !important; }
.ql-editor ol[data-list="thai"] > li::before, .ql-editor li[data-list="thai"]::before { content: counter(list-0, thai-alpha) ". " !important; }

/* --- ชั้นย่อยต่างๆ (Indent) เวลากด Tab เข้าไป --- */
.ql-editor ol[data-list="upper-alpha"] > li.ql-indent-1::before, .ql-editor li[data-list="upper-alpha"].ql-indent-1::before { content: counter(list-1, upper-alpha) ". " !important; }
.ql-editor ol[data-list="lower-alpha"] > li.ql-indent-1::before, .ql-editor li[data-list="lower-alpha"].ql-indent-1::before { content: counter(list-1, lower-alpha) ". " !important; }
.ql-editor ol[data-list="thai"] > li.ql-indent-1::before, .ql-editor li[data-list="thai"].ql-indent-1::before { content: counter(list-1, thai-alpha) ". " !important; }

/* --- จัดตำแหน่งของ Bullet ให้อยู่ข้างหน้าข้อความสวยงามเป๊ะๆ --- */
.ql-editor ol[data-list="upper-alpha"] > li::before, .ql-editor ol[data-list="lower-alpha"] > li::before, .ql-editor ol[data-list="thai"] > li::before,
.ql-editor li[data-list="upper-alpha"]::before, .ql-editor li[data-list="lower-alpha"]::before, .ql-editor li[data-list="thai"]::before {
    display: inline-block !important; white-space: nowrap !important; width: 1.2em !important;
    margin-left: -1.5em !important; text-align: right !important; margin-right: 0.3em !important;
}

/* --- บังคับโชว์ปุ่ม A, a, ก บน Toolbar --- */
button.ql-list[value="upper-alpha"], button.ql-list[value="lower-alpha"], button.ql-list[value="thai"] {
    position: relative !important; width: 28px !important; height: 24px !important; display: inline-block !important;
}

button.ql-list[value="upper-alpha"]::after {
    content: 'A' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; font-weight: bold !important; color: #444 !important; font-family: sans-serif !important;
}

button.ql-list[value="lower-alpha"]::after {
    content: 'a' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; font-weight: bold !important; color: #444 !important; font-family: sans-serif !important;
}

button.ql-list[value="thai"]::after {
    content: 'ก' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; font-weight: bold !important; color: #444 !important; font-family: sans-serif !important;
}

/* ซ่อนไอคอนเปล่าๆ ของระบบทิ้งไป */
button.ql-list[value="upper-alpha"] svg, button.ql-list[value="lower-alpha"] svg, button.ql-list[value="thai"] svg { display: none !important; }

/* เปลี่ยนสีเป็นสีฟ้าเวลาเอาเมาส์ชี้ หรือกำลังกดใช้งานอยู่ */
button.ql-list:hover[value="upper-alpha"]::after, button.ql-list:hover[value="lower-alpha"]::after, button.ql-list:hover[value="thai"]::after,
button.ql-list.ql-active[value="upper-alpha"]::after, button.ql-list.ql-active[value="lower-alpha"]::after, button.ql-list.ql-active[value="thai"]::after {
    color: #0d6efd !important;
}