@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/noto-sans-thai/NotoSansThai-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/noto-sans-thai/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/noto-sans-thai/NotoSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/noto-sans-thai/NotoSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/noto-sans-thai/NotoSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif;
}

body,
.fi-body,
.fi-sidebar,
.fi-topbar,
.fi-modal-window,
[class*="filament"] {
    font-family: 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif !important;
}

/* สิ่งอำนวยความสะดวก (CheckboxList) — ".fi-fo-checkbox-list-option-label" ซ้ำกันทั้ง <label> ครอบนอกและ
   <span> ข้อความด้านใน ต้องใช้ "label." คั่นเพื่อจับแค่ตัวครอบนอกเป็นการ์ด ไม่ทับ span ข้างใน */
label.fi-fo-checkbox-list-option-label {
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background-color: rgb(248 250 252);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.dark label.fi-fo-checkbox-list-option-label {
    border-color: rgb(51 65 85);
    background-color: rgb(30 41 59 / .4);
}

label.fi-fo-checkbox-list-option-label:has(input:checked) {
    background-color: rgb(59 130 246 / .12);
    border-color: rgb(59 130 246 / .5);
}

.dark label.fi-fo-checkbox-list-option-label:has(input:checked) {
    background-color: rgb(59 130 246 / .18);
    border-color: rgb(59 130 246 / .6);
}