/* ------------------------------------------------------------------
 * fonts.css — ฟอนต์ Prompt (โหลดจากเซิร์ฟเวอร์เราเอง)
 * ------------------------------------------------------------------
 * ไม่ได้ดึงจาก Google Fonts เพราะ
 *   1. เร็วกว่า ไม่ต้องรอต่อโดเมนภายนอกก่อนถึงจะเห็นตัวอักษร
 *   2. ไม่ส่ง IP ของผู้เข้าชมไปให้ Google โดยไม่ได้ขอความยินยอม (สอดคล้องกับนโยบายคุกกี้ของเรา)
 *
 * ไฟล์ฟอนต์อยู่ที่ /fonts/prompt/ แยกเป็นชุดตัวอักษรไทยกับละติน
 * เบราว์เซอร์จะโหลดเฉพาะชุดที่หน้านั้นใช้จริง (ดู unicode-range)
 * font-display: swap = แสดงข้อความด้วยฟอนต์สำรองไปก่อน ไม่ปล่อยให้หน้าว่าง
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/prompt/prompt-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/prompt/prompt-300-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/prompt/prompt-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/prompt/prompt-400-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/prompt/prompt-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/prompt/prompt-500-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/prompt/prompt-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/prompt/prompt-600-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/prompt/prompt-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/prompt/prompt-700-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ==================================================================
 * ใช้ฟอนต์ Prompt ทั้งเว็บ
 * ------------------------------------------------------------------
 * ไฟล์นี้ถูกโหลดเป็นลำดับท้ายๆ จึงทับค่าฟอนต์เดิมของธีมได้
 * (ของเดิม body ใช้ Verdana ส่วน .font-1/.font-2 ใช้ Noto Sans Thai)
 * ================================================================== */

:root {
    --mhs-font: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif;
}

body,
p, li, td, th, dt, dd, blockquote, label, small,
h1, h2, h3, h4, h5, h6,
.font-1, .font-2,
.btn, button, input, select, textarea,
.breadcrumb, .page-header h1,
#header .header-nav-main nav > ul > li > a,
#footer, .alert {
    font-family: var(--mhs-font);
}

/* Prompt มีน้ำหนักให้เลือกหลายระดับ ใช้ให้หัวข้อดูมีน้ำหนักขึ้นกว่าเดิม */
h1, h2, h3 {
    font-weight: 600;
}

h4, h5, h6 {
    font-weight: 500;
}

strong, b {
    font-weight: 600;
}

/* ตัวอักษรไทยของ Prompt สูงกว่าฟอนต์เดิมเล็กน้อย เผื่อระยะบรรทัดให้อ่านสบาย */
body {
    line-height: 1.7;
}

p {
    line-height: 1.75 !important;
}


/* ------------------------------------------------------------------
 * ปรับเมนูให้อยู่แถวเดียวเหมือนเดิม
 * ฟอนต์ Prompt กว้างกว่าฟอนต์เดิมเล็กน้อย เมนู 9-10 รายการจึงตกบรรทัด
 * แก้โดยลดระยะห่างซ้ายขวาของเมนูเฉพาะบนจอใหญ่ (จอเล็กเป็นเมนูแบบพับอยู่แล้ว)
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a {
        padding: 8px 14px;
        font-size: 15.5px;
    }
}

@media (min-width: 1200px) {
    #header .header-nav-main nav > ul > li > a {
        padding: 8px 17px;
    }
}

/* ==================================================================
 * บังคับใช้ Prompt ทุกจุดในหน้าเว็บ
 * ------------------------------------------------------------------
 * ทำไมต้องใช้ !important :
 *   1. เนื้อหาที่พิมพ์จากตัวแก้ไข มักมี style="font-family:..." ฝังมาในโค้ด
 *      ซึ่ง inline style ชนะ CSS ปกติเสมอ ต้องใช้ !important เท่านั้นถึงจะทับได้
 *   2. ไฟล์ธีมเดิมกำหนดฟอนต์ไว้หลายที่ (Verdana, Open Sans, Oswald, Georgia,
 *      Playfair Display) กระจายอยู่ใน theme-elements.css และ card.css
 *
 * ด้านล่างมีข้อยกเว้นไว้ให้แล้ว ไม่งั้นไอคอนจะกลายเป็นสี่เหลี่ยม
 * ================================================================== */

html,
body,
body * {
    /* ความจำเพาะต่ำไว้ก่อน เพื่อให้กฎข้อยกเว้นด้านล่างทับได้ */
    font-family: var(--mhs-font) !important;
}

/* ---------- ข้อยกเว้น 1 : ฟอนต์ไอคอน ---------- */
.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands,
[class^="fa-"], [class*=" fa-"],
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
                 "Font Awesome 5 Free", "Font Awesome 5 Brands",
                 "FontAwesome", "Glyphicons Halflings" !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* ---------- ข้อยกเว้น 2 : โค้ด ต้องเป็นฟอนต์ความกว้างเท่ากัน ---------- */
pre, code, kbd, samp, tt,
.ql-syntax, .ql-code-block, .ql-code-block-container,
.mhs-editor-source {
    font-family: "SFMono-Regular", Consolas, Menlo, Monaco, "Courier New", monospace !important;
}

/* หมายเหตุ : ไอคอนที่ประกาศฟอนต์ไว้ที่ ::before เอง (เช่น ลูกศรของสไลด์)
   ไม่ได้รับผลกระทบ เพราะกฎ body * ไม่จับ pseudo-element */