:root{
    --tw-light:#f9f9f9;
    --tw-primary:#1e40af;
    --tw-secondary:#f1f1f4;
    --tw-success:#84cc16;
    --tw-info:#7239ea;
    --tw-warning:#f6c000;
    --tw-danger:#f8285a;
    --tw-dark:#1e2129;
    --tw-sidebar-start:#431407;
    --tw-sidebar-end:#000000;
    --tw-sidebar-active:var(--tw-brand);
    --tw-sidebar-opacity:0.5;
    --tw-gray-100:#f9f9f9;
    --tw-gray-200:#f1f1f4;
    --tw-gray-300:#dbdfe9;
    --tw-gray-400:#c4cada;
    --tw-gray-500:#99a1b7;
    --tw-gray-600:#78829d;
    --tw-gray-700:#4b5675;
    --tw-gray-800:#252f4a;
    --tw-gray-900:#071437;
    /* 2026-09-21 เคยเป็น `--tw-brand:var(--tw-brand)` = อ้างถึงตัวเอง → CSS ถือว่า
       ตัวแปรนี้ "ไม่ถูกต้อง" ทั้งไฟล์ ทุกที่ที่เขียน var(--tw-brand) จึงตกไปใช้ค่า
       ตั้งต้นของ property นั้นเงียบ ๆ (เช่น border-color กลายเป็น currentColor = #555
       เทาเข้ม) ตัวที่เขียนสีส้มไว้ตรง ๆ ยังส้มอยู่ เลยดูเหมือนระบบปกติ หาต้นตอยาก */
    --tw-brand:#ea580c;
    --tw-brand-active:#f15700;
    --tw-brand-light:#fff5ef;
    --tw-brand-clarity:rgba(255,111,30,.2);
    --tw-brand-inverse:#fff;
    --tw-primary:#1b84ff;
    --tw-primary-active:#056ee9;
    --tw-primary-light:#eff6ff;
    --tw-primary-clarity:rgba(27,132,255,.2);
    --tw-primary-inverse:#fff;
    --tw-success:#17c653;
    --tw-success-active:#04b440;
    --tw-success-light:#eafff1;
    --tw-success-clarity:rgba(23,198,83,.2);
    --tw-success-inverse:#fff;
    --tw-info:#7239ea;
    --tw-info-active:#5014d0;
    --tw-info-light:#f8f5ff;
    --tw-info-clarity:rgba(114,57,234,.2);
    --tw-info-inverse:#fff;
    --tw-danger:#f8285a;
    --tw-danger-active:#d81a48;
    --tw-danger-light:#ffeef3;
    --tw-danger-clarity:rgba(248,40,90,.2);
    --tw-danger-inverse:#fff;
    --tw-warning:#f6b100;
    --tw-warning-active:#dfa000;
    --tw-warning-light:#fff8dd;
    --tw-warning-clarity:rgba(246,177,0,.2);
    --tw-warning-inverse:#fff;
    --tw-dark:#1e2129;
    --tw-dark-active:#111318;
    --tw-dark-light:#f9f9f9;
    --tw-dark-clarity:rgba(30,33,41,.2);
    --tw-dark-inverse:#fff;
    --tw-light:#fff;
    --tw-light-active:#fcfcfc;
    --tw-light-light:#fff;
    --tw-light-clarity:hsla(0,0%,100%,.2);
    --tw-light-inverse:#4b5675;
    --tw-secondary:#f9f9f9;
    --tw-secondary-active:#f9f9f9;
    --tw-secondary-light:#f9f9f9;
    --tw-secondary-clarity:hsla(0,0%,98%,.2);
    --tw-secondary-inverse:#4b5675;
    --tw-default-box-shadow:0px 4px 12px 0px rgba(0,0,0,.09);
    --tw-light-box-shadow:0px 3px 4px 0px rgba(0,0,0,.03);
    --tw-primary-box-shadow:0px 4px 12px 0px rgba(40,132,239,.35);
    --tw-success-box-shadow:0px 4px 12px 0px rgba(53,189,100,.35);
    --tw-danger-box-shadow:0px 4px 12px 0px rgba(241,65,108,.35);
    --tw-info-box-shadow:0px 4px 12px 0px rgba(114,57,234,.35);
    --tw-warning-box-shadow:0px 4px 12px 0px rgba(246,192,0,.35);
    --tw-dark-box-shadow:0px 4px 12px 0px rgba(37,47,74,.35);
    --tw-card-background-color:#fff;
    --tw-tooltip-background-color:#0f1014;
    --tw-popover-background-color:#fff;
    --tw-modal-background-color:#fff;
    --tw-drawer-background-color:#fff;
    --tw-dropdown-background-color:#fff;
    --tw-backdrop-background-color:rgba(0,0,0,.8);
    --tw-table-head-background-color:var(--tw-light-active);
    --tw-card-border:1px solid var(--tw-gray-200);
    --tw-table-border:1px solid var(--tw-gray-200);
    --tw-dropdown-border:1px solid var(--tw-gray-200);
    --tw-popover-border:1px solid var(--tw-gray-200);
    --tw-tooltip-border:0;
    --tw-card-box-shadow:0px 3px 4px 0px rgba(0,0,0,.03);
    --tw-tooltip-box-shadow:0px 3px 4px 0px rgba(0,0,0,.03);
    --tw-popover-box-shadow:0px 3px 4px 0px rgba(0,0,0,.03);
    --tw-modal-box-shadow:0px 10px 14px 0px rgba(15,42,81,.03);
    --tw-drawer-box-shadow:0px 3px 4px 0px rgba(0,0,0,.03);
    --tw-dropdown-box-shadow:0px 7px 18px 0px rgba(0,0,0,.09);
    --tw-input-box-shadow:0px 0px 10px 0px rgba(0,0,0,.1);
    --bs-blue:#0d6efd;
    --bs-indigo:#6610f2;
    --bs-purple:#6f42c1;
    --bs-pink:#d63384;
    --bs-red:#dc3545;
    --bs-orange:#fd7e14;
    --bs-yellow:#ffc107;
    --bs-green:#198754;
    --bs-teal:#20c997;
    --bs-cyan:#0dcaf0;
    --bs-black:#000000;
    --bs-white:#ffffff;
    --bs-gray:#78829D;
    --bs-gray-dark:#252F4A;
    --bs-gray-100:#F9F9F9;
    --bs-gray-200:#F1F1F4;
    --bs-gray-300:#DBDFE9;
    --bs-gray-400:#C4CADA;
    --bs-gray-500:#99A1B7;
    --bs-gray-600:#78829D;
    --bs-gray-700:#4B5675;
    --bs-gray-800:#252F4A;
    --bs-gray-900:#071437;
    --bs-light:#F9F9F9;
    --bs-primary:#1B84FF;
    --bs-secondary:#F1F1F4;
    --bs-success:#17C653;
    --bs-info:#7239EA;
    --bs-warning:#F6C000;
    --bs-danger:#F8285A;
    --bs-dark:#1E2129;
    --bs-light-rgb:249,249,249;
    --bs-primary-rgb:27,132,255;
    --bs-secondary-rgb:241,241,244;
    --bs-success-rgb:23,198,83;
    --bs-info-rgb:114,57,234;
    --bs-warning-rgb:246,192,0;
    --bs-danger-rgb:248,40,90;
    --bs-dark-rgb:30,33,41;
    --bs-primary-text-emphasis:#0b3566;
    --bs-secondary-text-emphasis:#606062;
    --bs-success-text-emphasis:#094f21;
    --bs-info-text-emphasis:#2e175e;
    --bs-warning-text-emphasis:#624d00;
    --bs-danger-text-emphasis:#631024;
    --bs-light-text-emphasis:#4B5675;
    --bs-dark-text-emphasis:#4B5675;
    --bs-primary-bg-subtle:#d1e6ff;
    --bs-secondary-bg-subtle:#fcfcfd;
    --bs-success-bg-subtle:#d1f4dd;
    --bs-info-bg-subtle:#e3d7fb;
    --bs-warning-bg-subtle:#fdf2cc;
    --bs-danger-bg-subtle:#fed4de;
    --bs-light-bg-subtle:#fcfcfc;
    --bs-dark-bg-subtle:#C4CADA;
    --bs-primary-border-subtle:#a4ceff;
    --bs-secondary-border-subtle:#f9f9fb;
    --bs-success-border-subtle:#a2e8ba;
    --bs-info-border-subtle:#c7b0f7;
    --bs-warning-border-subtle:#fbe699;
    --bs-danger-border-subtle:#fca9bd;
    --bs-light-border-subtle:#F1F1F4;
    --bs-dark-border-subtle:#99A1B7;
    --bs-white-rgb:255,255,255;
    --bs-black-rgb:0,0,0;
    --bs-gradient:linear-gradient(180deg,rgba(255,255,255,0.15),rgba(255,255,255,0));
    --bs-body-font-family:var(--bs-font-sans-serif);
    --bs-body-font-size:1rem;
    --bs-body-font-weight:400;
    --bs-body-line-height:1.5;
    --bs-body-color:#071437;
    --bs-body-color-rgb:7,20,55;
    --bs-body-bg:#f6eff2;
    --bs-body-bg-rgb:255,255,255;
    --bs-emphasis-color:#000000;
    --bs-emphasis-color-rgb:0,0,0;
    --bs-secondary-color:rgba(7,20,55,0.75);
    --bs-secondary-color-rgb:7,20,55;
    --bs-secondary-bg:#F1F1F4;
    --bs-secondary-bg-rgb:241,241,244;
    --bs-tertiary-color:rgba(7,20,55,0.5);
    --bs-tertiary-color-rgb:7,20,55;
    --bs-tertiary-bg:#F9F9F9;
    --bs-tertiary-bg-rgb:249,249,249;
    --bs-heading-color:#071437;
    --bs-link-color:#1B84FF;
    --bs-link-color-rgb:27,132,255;
    --bs-link-decoration:none;
    --bs-link-hover-color:#056EE9;
    --bs-link-hover-color-rgb:5,110,233;
    --bs-link-hover-decoration:none;
    --bs-code-color:#b93993;
    --bs-highlight-color:#071437;
    --bs-highlight-bg:#fff3cd;
    --bs-border-width:1px;
    --bs-border-style:solid;
    --bs-border-color:var(--tw-gray-300);
    --bs-border-color-translucent:rgba(0,0,0,0.175);
    --bs-border-radius:0.475rem;
    --bs-border-radius-sm:0.425rem;
    --bs-border-radius-lg:0.625rem;
    --bs-border-radius-xl:1rem;
    --bs-border-radius-xxl:2rem;
    --bs-border-radius-2xl:var(--bs-border-radius-xxl);
    --bs-border-radius-pill:50rem;
    --bs-box-shadow:0 0.5rem 1.5rem 0.5rem rgba(0,0,0,0.075);
    --bs-box-shadow-sm:0 0.1rem 1rem 0.25rem rgba(0,0,0,0.05);
    --bs-box-shadow-lg:0 1rem 2rem 1rem rgba(0,0,0,0.1);
    --bs-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,0.075);
    --bs-focus-ring-width:0.25rem;
    --bs-focus-ring-opacity:0.25;
    --bs-focus-ring-color:rgba(27,132,255,0.25);
    --bs-form-valid-color:#17C653;
    --bs-form-valid-border-color:#17C653;
    --bs-form-invalid-color:#F8285A;
    --bs-form-invalid-border-color:#F8285A;
    --bs-xs:0;
    --bs-sm:576px;
    --bs-md:768px;
    --bs-lg:992px;
    --bs-xl:1200px;
    --bs-xxl:1400px;
    --bs-scrollbar-size:5px;
    --bs-scrollbar-overlay-size:19px;
    --bs-scrollbar-overlay-space:7px;
    --bs-white-bg-rgb:255,255,255;
    --bs-black-bg-rgb:0,0,0;
    --bs-text-muted:#99A1B7;
    --bs-gray-100:#F9F9F9;
    --bs-gray-100-rgb:249,249,249;
    --bs-gray-200:#F1F1F4;
    --bs-gray-200-rgb:241,241,244;
    --bs-gray-300:#DBDFE9;
    --bs-gray-300-rgb:219,223,233;
    --bs-gray-400:#C4CADA;
    --bs-gray-400-rgb:196,202,218;
    --bs-gray-500:#99A1B7;
    --bs-gray-500-rgb:153,161,183;
    --bs-gray-600:#78829D;
    --bs-gray-600-rgb:120,130,157;
    --bs-gray-700:#4B5675;
    --bs-gray-700-rgb:75,86,117;
    --bs-gray-800:#252F4A;
    --bs-gray-800-rgb:37,47,74;
    --bs-gray-900:#071437;
    --bs-gray-900-rgb:7,20,55;
    --bs-light:#F9F9F9;
    --bs-primary:#1B84FF;
    --bs-secondary:#F1F1F4;
    --bs-success:#17C653;
    --bs-info:#7239EA;
    --bs-warning:#F6C000;
    --bs-danger:#F8285A;
    --bs-dark:#1E2129;
    --bs-primary-active:#056EE9;
    --bs-secondary-active:#C4CADA;
    --bs-light-active:#F1F1F4;
    --bs-success-active:#04B440;
    --bs-info-active:#5014D0;
    --bs-warning-active:#DEAD00;
    --bs-danger-active:#D81A48;
    --bs-dark-active:#111318;
    --bs-primary-light:#E9F3FF;
    --bs-secondary-light:#F9F9F9;
    --bs-success-light:#DFFFEA;
    --bs-info-light:#F8F5FF;
    --bs-warning-light:#FFF8DD;
    --bs-danger-light:#FFEEF3;
    --bs-dark-light:#F9F9F9;
    --bs-light-light:#ffffff;
    --bs-primary-inverse:#ffffff;
    --bs-secondary-inverse:#252F4A;
    --bs-light-inverse:#252F4A;
    --bs-success-inverse:#ffffff;
    --bs-info-inverse:#ffffff;
    --bs-warning-inverse:#ffffff;
    --bs-danger-inverse:#ffffff;
    --bs-dark-inverse:#ffffff;
    --bs-primary-clarity:rgba(27,132,255,0.2);
    --bs-secondary-clarity:rgba(249,249,249,0.2);
    --bs-success-clarity:rgba(23,198,83,0.2);
    --bs-info-clarity:rgba(114,57,234,0.2);
    --bs-warning-clarity:rgba(246,192,0,0.2);
    --bs-danger-clarity:rgba(248,40,90,0.2);
    --bs-dark-clarity:rgba(30,33,41,0.2);
    --bs-light-clarity:rgba(255,255,255,0.2);
    --bs-light-rgb:249,249,249;
    --bs-primary-rgb:27,132,255;
    --bs-secondary-rgb:241,241,244;
    --bs-success-rgb:23,198,83;
    --bs-info-rgb:114,57,234;
    --bs-warning-rgb:246,192,0;
    --bs-danger-rgb:248,40,90;
    --bs-dark-rgb:30,33,41;
    --bs-text-white:#ffffff;
    --bs-text-primary:#1B84FF;
    --bs-text-secondary:#F1F1F4;
    --bs-text-light:#F9F9F9;
    --bs-text-success:#17C653;
    --bs-text-info:#7239EA;
    --bs-text-warning:#F6C000;
    --bs-text-danger:#F8285A;
    --bs-text-dark:#1E2129;
    --bs-text-muted:#99A1B7;
    --bs-text-gray-100:#F9F9F9;
    --bs-text-gray-200:#F1F1F4;
    --bs-text-gray-300:#DBDFE9;
    --bs-text-gray-400:#C4CADA;
    --bs-text-gray-500:#99A1B7;
    --bs-text-gray-600:#78829D;
    --bs-text-gray-700:#4B5675;
    --bs-text-gray-800:#252F4A;
    --bs-text-gray-900:#071437;
    --bs-border-color:#F1F1F4;
    --bs-border-dashed-color:#DBDFE9;
    --bs-component-active-color:#ffffff;
    --bs-component-active-bg:#1B84FF;
    --bs-component-hover-color:#1B84FF;
    --bs-component-hover-bg:#F9F9F9;
    --bs-component-checked-color:#ffffff;
    --bs-component-checked-bg:#1B84FF;
    --bs-box-shadow-xs:0 0.1rem 0.75rem 0.25rem rgba(0,0,0,0.05);
    --bs-box-shadow-sm:0 0.1rem 1rem 0.25rem rgba(0,0,0,0.05);
    --bs-box-shadow:0 0.5rem 1.5rem 0.5rem rgba(0,0,0,0.075);
    --bs-box-shadow-lg:0 1rem 2rem 1rem rgba(0,0,0,0.1);
    --bs-input-bg:var(--bs-body-bg);
    --bs-input-color:var(--bs-gray-700);
    --bs-input-solid-color:var(--bs-gray-700);
    --bs-input-solid-bg:var(--bs-gray-100);
    --bs-input-solid-bg-focus:var(--bs-gray-200);
    --bs-input-solid-placeholder-color:var(--bs-gray-500);
    --bs-root-card-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03);
    --bs-root-card-border-color:#F1F1F4;
    --bs-tooltip-box-shadow:0px 0px 30px rgba(0,0,0,0.15);
    --bs-table-striped-bg:rgba(var(--bs-gray-100-rgb),0.75);
    --bs-table-loading-message-box-shadow:0px 0px 50px 0px rgba(82,63,105,0.15);
    --bs-dropdown-bg:var(--bs-body-bg);
    --bs-dropdown-box-shadow:0px 0px 50px 0px rgba(82,63,105,0.15);
    --bs-code-bg:#f1f3f8;
    --bs-code-shadow:0px 3px 9px rgba(0,0,0,0.08);
    --bs-code-border-color:transparent;
    --bs-code-color:#b93993;
    --bs-symbol-label-color:var(--bs-gray-800);
    --bs-symbol-label-bg:var(--bs-gray-100);
    --bs-symbol-border-color:rgba(var(--bs-body-bg),0.5);
    --bs-bullet-bg-color:var(--bs-gray-400);
    --bs-scrolltop-opacity:0;
    --bs-scrolltop-opacity-on:0.3;
    --bs-scrolltop-opacity-hover:1;
    --bs-scrolltop-box-shadow:var(--bs-box-shadow);
    --bs-scrolltop-bg-color:var(--bs-primary);
    --bs-scrolltop-bg-color-hover:var(--bs-primary);
    --bs-scrolltop-icon-color:var(--bs-primary-inverse);
    --bs-scrolltop-icon-color-hover:var(--bs-primary-inverse);
    --bs-drawer-box-shadow:0px 1px 9px -3px rgba(0,0,0,0.05);
    --bs-drawer-bg-color:#ffffff;
    --bs-drawer-overlay-bg-color:rgba(0,0,0,0.2);
    --bs-menu-dropdown-box-shadow:0px 0px 50px 0px rgba(82,63,105,0.15);
    --bs-brandbox-shadow:0px 0px 30px 0px rgba(205,59,28,0.15);
    --bs-menu-dropdown-bg-color:var(--bs-body-bg);
    --bs-menu-heading-color:#99A1B7;
    --bs-menu-link-color-hover:#1B84FF;
    --bs-menu-link-color-show:#1B84FF;
    --bs-menu-link-color-here:#1B84FF;
    --bs-menu-link-color-active:#1B84FF;
    --bs-menu-link-bg-color-hover:#F9F9F9;
    --bs-menu-link-bg-color-show:#F9F9F9;
    --bs-menu-link-bg-color-here:#F9F9F9;
    --bs-menu-link-bg-color-active:#F9F9F9;
    --bs-scrollbar-color:#F1F1F4;
    --bs-scrollbar-hover-color:#DBDFE9;
    --bs-overlay-bg:rgba(0,0,0,0.05);
    --bs-blockui-overlay-bg:rgba(0,0,0,0.05);
    --bs-rating-color-default:#C4CADA;
    --bs-rating-color-active:#FFAD0F;
    --bs-ribbon-label-box-shadow:0px -1px 5px 0px rgba(30,33,41,0.1);
    --bs-ribbon-label-bg:#1B84FF;
    --bs-ribbon-label-border-color:#0053b4;
    --bs-ribbon-clip-bg:#1E2129;
    --bs-engage-btn-bg:#ffffff;
    --bs-engage-btn-box-shadow:0px 0px 22px #E0E0E0;
    --bs-engage-btn-border-color:#E8E8E8;
    --bs-engage-btn-color:#252F4A;
    --bs-engage-btn-icon-color:#78829D;
    --bs-engage-btn-color-active:#252F4A
}
body{
    margin:0;
    font-size:var(--bs-body-font-size);
    font-weight:var(--bs-body-font-weight);
    line-height:var(--bs-body-line-height);
    color:var(--bs-body-color);
    text-align:var(--bs-body-text-align);
    background-color:var(--bs-body-bg);
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent
}
#wrapper{
    background:#f6eff2;
    background-image:url("../images/home-background.png");
    background-position-x:center;
    background-repeat:no-repeat;
    background-attachment:fixed
}
p{
    padding: 4px 0 10px;
}
aside #logo .logo img{
    width:100%!important
}
.container-fixed{
    flex-grow:1;
    width:100%;
    padding-inline-start:1.5rem;
    padding-inline-end:1.5rem
}
/* หน้าเนื้อหาน้อย (ตารางตั้งค่า 2–5 คอลัมน์) — กว้างสุดเท่า .container-fixed · รายชื่อหน้า: bkk_layout_helper.php (2026-09-24) */
@media (min-width:1280px){
    body.bkk-narrow #wrapper > .content{
        max-width:1280px;
        margin-inline-start:auto;
        margin-inline-end:auto;
    }
}
@media (min-width:1280px){
    .container-fixed{
        margin-inline-start:auto;
        margin-inline-end:auto;
        padding-inline-start:1.875rem;
        padding-inline-end:1.875rem;
        max-width:1280px
    }
}
.fs-1 {
    font-size: calc(1.3rem + .6vw)!important
}

.fs-2 {
    font-size: calc(1.275rem + .3vw)!important
}

.fs-3 {
    font-size: calc(1.26rem + .12vw)!important
}

.fs-4 {
    font-size: 1.25rem!important
}

.fs-5 {
    font-size: 1.15rem!important
}

.fs-6 {
    font-size: 1.075rem!important
}

.fs-7 {
    font-size: .95rem!important
}

.fs-8 {
    font-size: .85rem!important
}

.fs-9 {
    font-size: .75rem!important
}

.fs-10 {
    font-size: .5rem!important
}

.fs-sm {
    font-size: .95rem!important
}

.fs-base {
    font-size: 1rem!important
}

.fs-lg {
    font-size: 1.075rem!important
}

.fs-xl {
    font-size: 1.21rem!important
}

.fs-fluid {
    font-size: 100%!important
}

.fs-2x {
    font-size: calc(1.325rem + .9vw)!important
}

.fs-2qx {
    font-size: calc(1.35rem + 1.2vw)!important
}

.fs-2hx {
    font-size: calc(1.375rem + 1.5vw)!important
}

.fs-2tx {
    font-size: calc(1.4rem + 1.8vw)!important
}

.fs-3x {
    font-size: calc(1.425rem + 2.1vw)!important
}

.fs-3qx {
    font-size: calc(1.45rem + 2.4vw)!important
}

.fs-3hx {
    font-size: calc(1.475rem + 2.7vw)!important
}

.fs-3tx {
    font-size: calc(1.5rem + 3vw)!important
}

.fs-4x {
    font-size: calc(1.525rem + 3.3vw)!important
}

.fs-4qx {
    font-size: calc(1.55rem + 3.6vw)!important
}

.fs-4hx {
    font-size: calc(1.575rem + 3.9vw)!important
}

.fs-4tx {
    font-size: calc(1.6rem + 4.2vw)!important
}

.fs-5x {
    font-size: calc(1.625rem + 4.5vw)!important
}

.fs-5qx {
    font-size: calc(1.65rem + 4.8vw)!important
}

.fs-5hx {
    font-size: calc(1.675rem + 5.1vw)!important
}

.fs-5tx {
    font-size: calc(1.7rem + 5.4vw)!important
}

.fs-6x {
    font-size: calc(1.725rem + 5.7vw)!important
}

.fs-6qx {
    font-size: calc(1.75rem + 6vw)!important
}

.fs-6hx {
    font-size: calc(1.775rem + 6.3vw)!important
}

.fs-6tx {
    font-size: calc(1.8rem + 6.6vw)!important
}

.fs-7x {
    font-size: calc(1.825rem + 6.9vw)!important
}

.fs-7qx {
    font-size: calc(1.85rem + 7.2vw)!important
}

.fs-7hx {
    font-size: calc(1.875rem + 7.5vw)!important
}

.fs-7tx {
    font-size: calc(1.9rem + 7.8vw)!important
}

.fst-italic {
    font-style: italic!important
}

.fst-normal {
    font-style: normal!important
}

.fw-lighter {
    font-weight: lighter!important
}

.fw-light {
    font-weight: 300!important
}

.fw-normal {
    font-weight: 400!important
}

.fw-medium {
    font-weight: 500!important
}

.fw-semibold {
    font-weight: 500!important
}

.fw-bold {
    font-weight: 600!important
}

.fw-bolder {
    font-weight: 700!important
}

.lh-0 {
    line-height: 0!important
}

.lh-1 {
    line-height: 1!important
}

.lh-sm {
    line-height: 1.25!important
}

.lh-base {
    line-height: 1.5!important
}

.lh-lg {
    line-height: 1.75!important
}

.lh-xl {
    line-height: 2!important
}

.lh-xxl {
    line-height: 2.25!important
}
.font-xs{
    font-size: 12px;
}
.flex{
    display:flex
}
.flex-wrap{
    flex-wrap:wrap!important
}
.align-self-start{
    align-self: flex-start;
}
.content{
    padding:50px
}
/* มือถือ (<768px): ขอบข้างเกือบชิดจอ — เจ้าของทัก 2026-09-25 ว่าขอบข้างละ ~70px เปลืองที่
   เดิม .content 50px (กฎบนไม่มี media ทับค่า 15px ของ style.css) + panel-body 24px = เนื้อหาเริ่มที่ x=74 จากจอ 375
   token: gutter หน้า 15px (--bkk-page-gutter-sm · ต้อง ≥ 15 = margin ติดลบของ .row ใน BS3 ไม่งั้นล้นแนวนอน 3px ทุกหน้า — ลอง 12 แล้วล้นจริง) · padding ในพาเนล 16px (--bkk-panel-pad-sm)
   ≥768px (แท็บเล็ต/เดสก์ท็อป) ไม่เปลี่ยน · padding-top 24px มาจาก bkk-header.css · ล่าง 50px เว้นไว้ให้ปุ่มลอย */
@media (max-width:767.98px){
    body.app #wrapper > .content{
        padding-left:var(--bkk-page-gutter-sm,15px);
        padding-right:var(--bkk-page-gutter-sm,15px);
    }
    /* specificity (0,1,0) เท่า .panel-body ของ tailwind.css (โหลดก่อน) — หน้าไหนตั้ง padding เองด้วยกฎ 2 คลาสขึ้นไปยังชนะ
       ข้ามพาเนลที่ติด utility padding เอง (คลาส tw-p… หรือ no-padding) เพราะ utility ก็เป็น 0,1,0 ใน tailwind.css ซึ่งโหลดก่อนไฟล์นี้ */
    .panel-body:where(.panel_s > *):where(:not([class*="tw-p"]):not(.no-padding)){
        padding:var(--bkk-panel-pad-sm,16px);
    }
}
.hide-menu{
    padding:14px
}
#header{
    border-bottom:none
}
#header nav{
    -webkit-box-shadow:0 1px 15px 1px rgba(69,65,78,.05);
    box-shadow:0 1px 15px 1px rgba(69,65,78,.05)
}
/* สไตล์ของ header.php ทั้งหมดย้ายไปอยู่ assets/css/bkk-header.css (โหลดจาก head.php) */
.sidebar{
    background:linear-gradient(180deg,var(--tw-sidebar-start) 9.18%,var(--tw-sidebar-end) 71.65%)
}
/* เอฟเฟกต์ "ประตูสไลด์" ตอนกดปุ่มยุบ/ขยายเมนู (.hide-menu แถบบนสุด)
   เดิมสลับ margin-left ของเมนู/กรอบเนื้อหา/เฮดเดอร์แบบสแนปทันที ไม่มีแอนิเมชันเลย ใส่ transition ให้เลื่อนลื่นแทน
   ใช้ได้ทุกขนาดจอ ทั้งโหมดเดสก์ท็อป (เนื้อหาขยับตามเมนูที่โผล่/หด) และโหมดจอเล็ก (เมนูสไลด์ทับเนื้อหา) */
#menu,
.sidebar,
#wrapper,
#header{
    transition:margin-left .28s cubic-bezier(.4,0,.2,1);
}
/* โหมดจอเล็ก (body.page-small — main.js ใส่ให้เมื่อจอแคบกว่า 769px หรือเป็นอุปกรณ์มือถือ/iPad ตาม user agent)
   เมนูซ้ายเป็นแผงลอยแบบเดียวกับแผงแจ้งเตือน (#bkk_notify)
   - เฮดเดอร์และเนื้อหาอยู่กับที่ ไม่ถูกดัน (ล้างกฎ margin-left:230px ของธีมที่ดันเนื้อหาไปทางขวา)
   - เมนู (position:fixed) สไลด์ทับขึ้นมาเหนือทุกอย่าง มีฉากหลังมืด+เบลอคลุมทั้งจอรวมเฮดเดอร์ด้วย
   - กดฉากหลังเพื่อปิด (bkk-sidebar-fix.js) ฉากหลังเดิมของธีม (#wrapper:after) คลุมแค่เนื้อหาไม่คลุมเฮดเดอร์ จึงปิดแล้วใช้ตัวใหม่แทน
   ผูกกับคลาส page-small ตรงๆ ไม่ใช้ @media เพราะอุปกรณ์มือถือ/แท็บเล็ตที่จอกว้างกว่า 768px ก็ถูกจัดเป็น page-small ด้วย
   (ถ้าใส่ @media ไว้ อุปกรณ์กลุ่มนั้นจะได้เมนูลอยแต่ไม่มีฉากหลัง)
   ลำดับชั้น: เฮดเดอร์ 99 < ฉากหลัง 1040 < เมนู 1041 < โมดัล Bootstrap 1050 < แผงแจ้งเตือน 1060 */
body.page-small.show-sidebar #wrapper,
body.page-small.show-sidebar #header{
    margin-left:0;
}
/* ล็อกไม่ให้หน้าเบื้องหลังเลื่อนขณะเมนูเปิด (แบบเดียวกับตอนเปิดแผงแจ้งเตือน) เมนูเองเลื่อนภายในตัวเองได้อยู่แล้ว (overflow:scroll)
   overscroll-behavior กันไม่ให้เลื่อนสุดเมนูแล้วไปลากหน้าข้างหลังต่อบนจอสัมผัส */
body.page-small.show-sidebar{
    overflow:hidden;
}
body.page-small.show-sidebar .sidebar{
    overscroll-behavior:contain;
}
body.page-small #menu,
body.page-small .sidebar{
    z-index:1041;
}
body.page-small.show-sidebar::after{
    content:"";
    /* ปลั๊กอิน lightbox ใช้ body:after{display:none} พรีโหลดรูปไอคอนไว้ ต้องบังคับ display:block ไม่งั้นฉากหลังไม่ถูกวาดเลย */
    display:block;
    position:fixed;
    inset:0;
    z-index:1040;
    background:rgba(15,23,42,.45);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    animation:bkk-sidebar-backdrop .25s ease;
}
body.page-small.show-sidebar #wrapper:after{
    display:none;
}
/* เดิม hardcode ระยะ 63px ที่หัวเมนูเผื่อให้เห็นเฮดเดอร์เดิม (สูงคงที่ 63px) ตอนนี้เมนูลอยทับเฮดเดอร์แล้วไม่ต้องเผื่อ */
body.page-small #menu #side-menu>li:first-child{
    margin-top:0;
}
/* เมนูตั้งค่า (ฟันเฟือง) บนจอเล็ก: เดิมขึ้นมาซ้อนอยู่ใต้เมนูหลักและฉากหลังมืด กดแล้วเหมือนไม่มีอะไรขึ้น
   สาเหตุ: style.css ตั้ง #setup-menu-wrapper{z-index:9} (ตัวเลือก ID ชนะกฎ body.page-small .sidebar{z-index:1041} ด้านบน)
   แก้: ยกเหนือเมนูหลัก (1041) แบบ fixed เต็มความสูง · ปิดเมนูหลัก/ฉากหลังเมื่อไหร่ ให้แผงตั้งค่าหายไปด้วย (ไม่ค้างลอย) */
body.page-small #setup-menu-wrapper{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    z-index:1042;
    overflow-y:auto;
    overscroll-behavior:contain;
}
body.page-small:not(.show-sidebar) #setup-menu-wrapper{
    display:none!important;
}
@keyframes bkk-sidebar-backdrop{
    from{opacity:0}
    to{opacity:1}
}
.sidebar .nav>li>a:focus,.sidebar .nav>li>a:hover,.sidebar li.active>a{
    color:var(--tw-gray-200);
    background:var(--tw-sidebar-active);
    border-radius:5px;
    transition:ease-in-out .2s
}
.sidebar li .nav-second-level li.active a{
    color:#fff!important;
    border-radius:15px;
    background-color:var(--tw-sidebar-active);
    display:inline-block;
    padding:5px 15px;
    margin:8px 0 8px 30px
}
.sidebar .nav>li .nav-second-level>li:not(.active)>a:focus,.sidebar .nav>li .nav-second-level>li:not(.active)>a:hover{
    background-color:var(--tw-sidebar-active);
    color:var(--tw-gray-200)
}
/* ตัวนับบนเมนู = จุดกระพริบ ทั้งเมนูซ้ายและเมนูตั้งค่า (เจ้าของเลือก 2026-09-24/25)
   ทุก .badge ในเมนูกลายเป็นจุด 8px — ตัวเลขยังอยู่ใน DOM (font-size 0) ให้โปรแกรมอ่านหน้าจอ
   · เมนูย่อย: badge เป็นพี่น้องของ <a> (style.css วาง absolute) → กึ่งกลางแนวไฮไลต์ด้วย top 50%
   · เมนูหลัก: badge อยู่ใน <a> (float) → วาง absolute ซ้ายลูกศร / ชิดขวาถ้าไม่มีลูกศร (เช่น "ตั้งค่า" ที่มีตัวเลขอัปเกรดโมดูล)
   · เมนูแม่ที่ลูกมีตัวนับ แต่ตัวเองไม่มี → จุดเดียวกันด้วย ::after (:has) · พื้นส้ม (active) ใช้จุดขาว
   · ลดการเคลื่อนไหว (prefers-reduced-motion) = จุดนิ่งมีวงรอบ */
#side-menu li .nav-second-level li > .badge,
#side-menu li .nav-second-level li.active > .badge,
#setup-menu li .nav-second-level li > .badge,
#setup-menu li .nav-second-level li.active > .badge{
    --bkk-mb-c:var(--tw-brand);
    top:50%;
    right:14px;
    transform:translateY(-50%);
}
#side-menu > li > a,
#setup-menu > li > a{
    position:relative;
}
#side-menu > li > a > .badge,
#setup-menu > li > a > .badge{
    --bkk-mb-c:var(--tw-brand);
    position:absolute;
    float:none!important;
    top:50%;
    right:20px;
    margin:-4px 0 0;
}
#side-menu > li > a:has(> .arrow) > .badge,
#setup-menu > li > a:has(> .arrow) > .badge{
    right:44px;
}
#side-menu li .nav-second-level li > .badge,
#setup-menu li .nav-second-level li > .badge,
#side-menu > li > a > .badge,
#setup-menu > li > a > .badge{
    min-width:0;
    width:8px;
    height:8px;
    padding:0;
    border-radius:50%;
    font-size:0;
    line-height:0;
    background:var(--bkk-mb-c)!important;
    animation:bkk-mbadge-pulse 1.6s ease-out infinite;
}
#side-menu > li.active > a > .badge,
#setup-menu > li.active > a > .badge{
    --bkk-mb-c:#fff;
}
#side-menu > li:has(> .nav-second-level li > .badge):not(:has(> a > .badge)) > a::after,
#setup-menu > li:has(> .nav-second-level li > .badge):not(:has(> a > .badge)) > a::after{
    --bkk-mb-c:var(--tw-brand);
    content:"";
    position:absolute;
    top:50%;
    right:44px;
    width:8px;
    height:8px;
    margin-top:-4px;
    border-radius:50%;
    background:var(--bkk-mb-c);
    animation:bkk-mbadge-pulse 1.6s ease-out infinite;
}
#side-menu > li.active:has(> .nav-second-level li > .badge) > a::after,
#setup-menu > li.active:has(> .nav-second-level li > .badge) > a::after{
    --bkk-mb-c:#fff;
}
@keyframes bkk-mbadge-pulse{
    0%{box-shadow:0 0 0 0 var(--bkk-mb-c);opacity:1}
    70%{box-shadow:0 0 0 7px transparent;opacity:.55}
    100%{box-shadow:0 0 0 0 transparent;opacity:1}
}
@media (prefers-reduced-motion:reduce){
    #side-menu .badge,#setup-menu .badge,
    #side-menu > li > a::after,#setup-menu > li > a::after{animation:none!important;box-shadow:0 0 0 3px var(--tw-brand-light)}
}
.sidebar::-webkit-scrollbar{
    display:none
}
.sidebar{
    width:230px!important;
    position:fixed;
    padding-left:6px;
    padding-right:7px;
    padding-bottom:150px;
    bottom:0;
    left:0;
    top:0;
    overflow:scroll;
    overflow-x:hidden;
    height:100%;
    z-index : 6;
}
.sidebar li a{
    color:var(--tw-gray-200);
    padding:12px 20px;
    font-size:14px;
    margin-top:.25rem;
    font-weight:400
}
.sidebar li a i.menu-icon{
    margin-right:12px;
    line-height:20px;
    display:block;
    float:left;
    width:20px;
    font-size:21px;
    opacity:.4
}
.panel,.panel_s,.top_stats_wrapper{
    border-color:none;
    border-width:0;
    box-shadow:none
}
#setup-menu>li>a{
    padding:10px 20px
}
#setup-menu>li:first-child{
    padding:15px 10px;
    border-bottom:1px solid rgb(255 255 255 / .5)
}
#widget-top_stats{
    margin-bottom:10px
}
body .btn{
    font-size:14px
}
.btn-sm{
    font-size:12px!important
}
.btn,.btn-group>.btn{
    border-radius:.375rem;
    font-size:13.45px;
    font-weight:500;
    line-height:1.75rem
}
.btn-default{
    background-color:rgb(255 255 255/var(--tw-bg-opacity));
    border-color:#ebedf2;
    color:rgb(51 65 85/var(--tw-text-opacity))
}
.label{
    margin-bottom:5px
}
.panel_s .panel-body.panel-tab{
    padding-top:0
}
.panel_s .panel-body.panel-tab:before{
    display:none
}
.panel-table-full .dataTables_wrapper .table-responsive{
    margin-top:1rem!important
}
/* 2026-09-23 (ผู้ใช้ทัก "ดรอปดาวน์เตี้ยกว่าปุ่มข้างๆ") — ของเดิม 38px เตี้ยกว่าปุ่ม .btn.btn-sm
   ข้างๆ (ปุ่ม "ส่งออก"/"ดำเนินการกลุ่ม" สูงจริง ~42.9px วัดด้วย DevTools)

   🪤 ลองให้ browser คำนวณความสูงจาก padding-top/bottom + line-height (สูตรเดียวกับปุ่ม) แทนการ
   ล็อก height ตรงๆ ไปแล้วรอบหนึ่ง แต่ `<select>` เป็น replaced element ที่เบราว์เซอร์ไม่คำนวณ
   ความสูงจาก `line-height` เหมือนกับ `<button>` (เจอจริง: ตั้ง line-height:28px แล้ว แต่ผลลัพธ์
   คือ 34.9px ไม่ใช่ ~42.9px ตามสูตร) — กลับไปใช้ height ตรงๆ ดีกว่า ปัดขึ้นเป็น 43px
   (ปุ่มจริง 42.9167px ปัดเศษ) ต่างกันต่ำกว่า 1px มองด้วยตาไม่ออกแล้ว */
.dataTables_length select{
    height:43px;
    width: 90px!important;
    vertical-align:middle
}
.open>.dropdown-menu{
    min-width:200px
}
.bootstrap-select .dropdown-menu{
    min-width:100%
}
.input-group-select.lg .dropdown-toggle,.input-group-select.lg .input-group-btn a{
    padding:13px 25px;
    height:55px;
    line-height:2
}
.bootstrap-select .btn{
    height:42px
}
.lg>.bootstrap-select .btn{
    padding:13px 25px;
    height:55px;
    line-height:2
}
.btn-filter-text{
    position:relative;
    top:-2px;
    margin-left:5px;
    text-transform:capitalize
}
.form-control{
    border:1px solid #ebedf2;
    height:45px;
    line-height:1.5;
    padding:.775rem 1rem
}
.input-group,.input-group button,.input-group input{
    box-shadow:none
}
.input-group-addon{
    background-color:#fff;
    border:1px solid #ebedf2;
    border-radius:.375rem;
    color:var(--tw-gray-700);
    padding-left:15px;
    padding-right:15px
}
input.form-control,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select.form-control,textarea.form-control{
    box-shadow:none;
    border-color:#ebedf2
}
input.form-control:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=file]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select.form-control:focus,textarea.form-control:focus{
    --tw-border-opacity:1;
    --tw-shadow:0 0 #0000;
    --tw-shadow-colored:0 0 #0000;
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-opacity:1;
    /* 2026-09-21 เดิมเป็น rgb(59 130 246) = #3B82F6 ซึ่งเป็น Tailwind blue-500
       ไม่ใช่แม้แต่ --tw-primary (#1b84ff) ของเราเอง — หลุดมาจากชุด utility ของ Tailwind
       สีเน้นของระบบนี้คือ brand ส้ม (ดูสกิล /bkk-m8 ข้อ 0.5) ขอบฟ้าจึงแปลกปลอม
       ทุกครั้งที่คลิกช่องกรอก · brand-clarity เป็นส้มโปร่ง 20% ทำหน้าที่เป็นฮาโลจาง ๆ
       หมายเหตุ: M8 ต้นฉบับใช้ border เทา (gray-400) + เงาเรืองสีเน้น 0.25rem แทน
       แต่บรรทัด box-shadow ของเขาพัง (คอมไพล์ออกมาเป็น `false, ...`) เลยไม่เห็นผลจริง */
    --tw-ring-color:var(--tw-brand-clarity);
    border-color:var(--tw-brand);
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    outline:2px solid transparent;
    outline-offset:2px
}
.control-label,label{
    margin-bottom:.5rem
}
textarea.form-control{
    height:auto
}
.input-sm{
    padding:0 1rem
}
.panel .hr-panel-heading,
.panel .hr-panel-separator,
.panel_s .hr-panel-heading,
.panel_s .hr-panel-separator,
.hr-panel-separator,
.hr-separator,
.hr-dashed{
    /* 2026-09-21 เดิมเป็น rgb(226 232 240) = #E2E8F0 (Tailwind slate-200) ซึ่งไม่อยู่
       ในพาเลตนี้เลย · ค่าที่ถูกคือ --bs-border-dashed-color ของ Metronic 8.3.3 = #DBDFE9
       ซึ่งตรงกับ --tw-gray-300 ที่เรามีอยู่แล้วพอดี */
    border-color:var(--tw-gray-300);
    border-style:dashed;
    margin:1rem 0 2rem;
}

.screen-options-area{
    width:100%;
    background:#ffffff;
    padding:10px 50px 30px 50px;
    border-bottom:1px solid var(--tw-sidebar-active);
    display:none
}
.screen-options-btn{
    position:absolute;
    background:var(--tw-sidebar-active);
    color:#FFF;
    padding:5px 15px;
    display:inline-flex;
    align-items:center;
    right:38px;
    z-index:98;
    border-left:1px solid var(--tw-sidebar-active);
    border-right:1px solid var(--tw-sidebar-active);
    border-bottom:1px solid var(--tw-sidebar-active);
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    cursor:pointer;
    font-size:13px
}
.align-baseline{
    vertical-align:baseline!important
}
.align-top{
    vertical-align:top!important
}
.align-middle{
    vertical-align:middle!important
}
.align-bottom{
    vertical-align:bottom!important
}
.align-text-bottom{
    vertical-align:text-bottom!important
}
.align-text-top{
    vertical-align:text-top!important
}
.table.middle>tbody>tr>td,.table.middle>tbody>tr>th,.table.middle>tfoot>tr>td,.table.middle>tfoot>tr>th,.table.middle>thead>tr>td,.table.middle>thead>tr>th{
    vertical-align:middle
}

.table{
    --bs-table-color-type:initial;
    --bs-table-bg-type:initial;
    --bs-table-color-state:initial;
    --bs-table-bg-state:initial;
    --bs-table-color:var(--bs-body-color);
    --bs-table-bg:transparent;
    --bs-table-border-color:var(--bs-border-color);
    --bs-table-accent-bg:transparent;
    --bs-table-striped-color:var(--bs-body-color);
    --bs-table-striped-bg:rgba(var(--bs-gray-100-rgb),0.75);
    --bs-table-active-color:var(--bs-body-color);
    --bs-table-active-bg:var(--bs-gray-100);
    --bs-table-hover-color:var(--bs-body-color);
    --bs-table-hover-bg:var(--bs-gray-100);
    width:100%;
    margin-bottom:1rem;
    vertical-align:top;
    border-color:var(--bs-table-border-color);
    text-align: center;

}
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{
    padding:15px 20px;
    /*border-top:1px dashed var(--bs-border-color);*/
    text-align: center;
    vertical-align: middle;
}
.table.no-border>tbody>tr>td,.table.no-border>tbody>tr>th,.table.no-border>tfoot>tr>td,.table.no-border>tfoot>tr>th,.table.no-border>thead>tr>td,.table.no-border>thead>tr>th{
    border:0
}
.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{
    padding-bottom:15px;
    padding-top:15px
}
.bold{
    font-weight:600
}
.table>:not(caption)>*>*{
    padding:.75rem .75rem;
    color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));
    background-color:var(--bs-table-bg);
    border-bottom-width:1px;
    box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))
}
.table>tbody{
    vertical-align:inherit
}
.table>thead{
    vertical-align:bottom
}
.table-group-divider{
    border-top:calc(1px * 2) solid currentcolor
}
.caption-top{
    caption-side:top
}
.table-sm>:not(caption)>*>*{
    padding:.5rem .5rem
}
.table-bordered>:not(caption)>*{
    border-width:1px 0
}
.table-bordered>:not(caption)>*>*{
    border-width:0 1px
}
.table-borderless>:not(caption)>*>*{
    border-bottom-width:0
}
.table-borderless>:not(:first-child){
    border-top-width:0
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-color-type:var(--bs-table-striped-color);
    --bs-table-bg-type:var(--bs-table-striped-bg)
}
.table-striped-columns>:not(caption)>tr>:nth-child(even){
    --bs-table-color-type:var(--bs-table-striped-color);
    --bs-table-bg-type:var(--bs-table-striped-bg)
}
.table-active{
    --bs-table-color-state:var(--bs-table-active-color);
    --bs-table-bg-state:var(--bs-table-active-bg)
}
.table-hover>tbody>tr:hover>*{
    --bs-table-color-state:var(--bs-table-hover-color);
    --bs-table-bg-state:var(--bs-table-hover-bg)
}
.table:not(.table-bordered).table-row-dashed tr{
    border-bottom-width:1px;
    border-bottom-style:dashed;
    border-bottom-color:var(--bs-border-color)
}
.table:not(.table-bordered).table-row-dashed tfoot td,.table:not(.table-bordered).table-row-dashed tfoot th{
    border-top-width:1px!important
}
.border-bottom{
    border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important
}
.border-dashed{
    border-style:dashed!important;
    border-color:var(--bs-border-dashed-color)
}
.badge,.sort-label{
    display:inline-flex;
    align-items:center
}
.badge{
    justify-content:center;
    line-height:1;
    border-radius:.25rem;
    padding:.5rem;
    border:1px solid transparent;
    font-weight:500;
    font-size:.6875rem
}
.badge-noti{
    display:initial;
    padding:.125rem .625rem
}
.badge.badge-pill{
    border-radius:1.875rem;
    padding-inline-start:.625rem;
    padding-inline-end:.625rem
}
.badge-circle,.badge-dot{
    padding:0;
    border-radius:50%
}
.badge-circle{
    flex-shrink:0;
    line-height:0
}
.badge-xs{
    font-size:.625rem;
    padding:.1875rem .3125rem
}
.badge-xs.badge-pill{
    padding-inline-start:.25rem;
    padding-inline-end:.25rem
}
.badge-sm{
    padding:.3125rem .375rem
}
.badge-sm.badge-pill{
    padding-inline-start:.375rem;
    padding-inline-end:.375rem
}
.badge-lg.badge-pill{
    padding-inline-start:.6875rem;
    padding-inline-end:.6875rem
}
.badge{
    color:var(--tw-gray-700);
    border-color:transparent;
    background-color:var(--tw-gray-200)
}
.badge-outline{
    color:var(--tw-gray-600);
    border-color:var(--tw-gray-300);
    background-color:var(--tw-gray-100)
}
.badge-primary{
    color:#fff;
    background-color:var(--tw-brand)
}
.badge-outline.badge-primary{
    color:var(--tw-brand);
    background-color:var(--tw-brand-light);
    border-color:var(--tw-brand-clarity)
}
.badge-success{
    color:#fff;
    background-color:var(--tw-success)
}
.badge-outline.badge-success{
    color:var(--tw-success);
    background-color:var(--tw-success-light);
    border-color:var(--tw-success-clarity)
}
.badge-danger{
    color:#fff;
    background-color:var(--tw-danger)
}
.badge-outline.badge-danger{
    color:var(--tw-danger);
    background-color:var(--tw-danger-light);
    border-color:var(--tw-danger-clarity)
}
.badge-warning{
    color:#fff;
    background-color:var(--tw-warning)
}
.badge-outline.badge-warning{
    color:var(--tw-warning);
    background-color:var(--tw-warning-light);
    border-color:var(--tw-warning-clarity)
}
.badge-info{
    color:#fff;
    background-color:var(--tw-info)
}
.badge-outline.badge-info{
    color:var(--tw-info);
    background-color:var(--tw-info-light);
    border-color:var(--tw-info-clarity)
}
.badge-outline.badge-dark{
    color:var(--tw-dark);
    background-color:var(--tw-dark-light);
    border-color:var(--tw-dark-clarity)
}

.badge.badge-circle,.badge.badge-square{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:1.75rem;
    min-width:1.75rem;
    padding:0 .1rem;
    line-height:0
}
.badge.badge-circle{
    border-radius:50%;
    padding:0;
    min-width:unset;
    width:1.75rem
}
.badge.badge-sm{
    min-width:1.5rem;
    font-size:.8rem
}
.badge.badge-sm.badge-square{
    height:1.5rem
}
.badge.badge-sm.badge-circle{
    width:1.5rem;
    height:1.5rem
}
.badge.badge-lg{
    min-width:2rem;
    font-size:1rem
}
.badge.badge-lg.badge-square{
    height:2rem
}
.badge.badge-lg.badge-circle{
    width:2rem;
    height:2rem
}
.card{
    --bs-card-spacer-y:1rem;
    --bs-card-spacer-x:1rem;
    --bs-card-title-spacer-y:0.5rem;
    --bs-card-title-color:var(--bs-gray-900);
    --bs-card-border-width:1px;
    --bs-card-border-color:#F1F1F4;
    --bs-card-border-radius:0.625rem;
    --bs-card-box-shadow:0px 3px 4px 0px rgba(0,0,0,0.03);
    --bs-card-inner-border-radius:calc(0.625rem - 1px);
    --bs-card-cap-padding-y:0.5rem;
    --bs-card-cap-padding-x:1rem;
    --bs-card-cap-bg:transparent;
    --bs-card-bg:var(--bs-white);
    --bs-card-img-overlay-padding:1rem;
    --bs-card-group-margin:0.75rem;
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:var(--bs-card-height);
    color:var(--bs-body-color);
    word-wrap:break-word;
    background-color:var(--bs-card-bg);
    background-clip:border-box;
    border:var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius:var(--bs-card-border-radius);
    box-shadow:var(--bs-card-box-shadow)
}
.card>hr{
    margin-right:0;
    margin-left:0
}
.card>.list-group{
    border-top:inherit;
    border-bottom:inherit
}
.card>.list-group:first-child{
    border-top-width:0;
    border-top-left-radius:var(--bs-card-inner-border-radius);
    border-top-right-radius:var(--bs-card-inner-border-radius)
}
.card>.list-group:last-child{
    border-bottom-width:0;
    border-bottom-right-radius:var(--bs-card-inner-border-radius);
    border-bottom-left-radius:var(--bs-card-inner-border-radius)
}
.card>.card-header+.list-group,.card>.list-group+.card-footer{
    border-top:0
}
.card-body{
    flex:1 1 auto;
    padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color:var(--bs-card-color)
}
.card-title{
    margin-bottom:var(--bs-card-title-spacer-y);
    color:var(--bs-card-title-color)
}
.card-subtitle{
    margin-top:calc(-.5 * var(--bs-card-title-spacer-y));
    margin-bottom:0;
    color:var(--bs-card-subtitle-color)
}
.card-text:last-child{
    margin-bottom:0
}
.card-link+.card-link{
    margin-left:var(--bs-card-spacer-x)
}
.card-header{
    padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom:0;
    color:var(--bs-card-cap-color);
    background-color:var(--bs-card-cap-bg);
    border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)
}
.card-header:first-child{
    border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0
}
.card-footer{
    padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color:var(--bs-card-cap-color);
    background-color:var(--bs-card-cap-bg);
    border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)
}
.card-footer:last-child{
    border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)
}
.card-header-tabs{
    margin-right:calc(-.5 * var(--bs-card-cap-padding-x));
    margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));
    margin-left:calc(-.5 * var(--bs-card-cap-padding-x));
    border-bottom:0
}
.card-header-tabs .nav-link.active{
    background-color:var(--bs-card-bg);
    border-bottom-color:var(--bs-card-bg)
}
.card-header-pills{
    margin-right:calc(-.5 * var(--bs-card-cap-padding-x));
    margin-left:calc(-.5 * var(--bs-card-cap-padding-x))
}
.card-img-overlay{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    padding:var(--bs-card-img-overlay-padding);
    border-radius:var(--bs-card-inner-border-radius)
}
.card-img,.card-img-bottom,.card-img-top{
    width:100%
}
.card-img,.card-img-top{
    border-top-left-radius:var(--bs-card-inner-border-radius);
    border-top-right-radius:var(--bs-card-inner-border-radius)
}
.card-img,.card-img-bottom{
    border-bottom-right-radius:var(--bs-card-inner-border-radius);
    border-bottom-left-radius:var(--bs-card-inner-border-radius)
}
.card-group>.card{
    margin-bottom:var(--bs-card-group-margin)
}
@media (min-width:576px){
    .card-group{
        display:flex;
        flex-flow:row wrap
    }
    .card-group>.card{
        flex:1 0 0%;
        margin-bottom:0
    }
    .card-group>.card+.card{
        margin-left:0;
        border-left:0
    }
    .card-group>.card:not(:last-child){
        border-top-right-radius:0;
        border-bottom-right-radius:0
    }
    .card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{
        border-top-right-radius:0
    }
    .card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{
        border-bottom-right-radius:0
    }
    .card-group>.card:not(:first-child){
        border-top-left-radius:0;
        border-bottom-left-radius:0
    }
    .card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{
        border-top-left-radius:0
    }
    .card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{
        border-bottom-left-radius:0
    }
}
.card{
    --bs-card-box-shadow:var(--bs-root-card-box-shadow);
    --bs-card-border-color:var(--bs-root-card-border-color);
    border:1px solid var(--bs-card-border-color)
}
.card .card-header{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    flex-wrap:wrap;
    min-height:70px;
    padding:0 2.25rem;
    color:var(--bs-card-cap-color);
    background-color:var(--bs-card-cap-bg);
    border-bottom:1px solid var(--bs-card-border-color)
}
.card .card-header .card-title{
    display:flex;
    align-items:center;
    margin:.5rem;
    margin-left:0
}
.card .card-header .card-title.flex-column{
    align-items:flex-start;
    justify-content:center
}
.card .card-header .card-title .card-icon{
    margin-right:.75rem;
    line-height:0
}
.card .card-header .card-title .card-icon i{
    font-size:1.25rem;
    color:var(--bs-gray-600);
    line-height:0
}
.card .card-header .card-title .card-icon i:after,.card .card-header .card-title .card-icon i:before{
    line-height:0
}
.card .card-header .card-title .card-icon .svg-icon{
    color:var(--bs-gray-600)
}
.card .card-header .card-title .card-icon .svg-icon svg{
    height:24px;
    width:24px
}
.card .card-header .card-title,.card .card-header .card-title .card-label{
    font-weight:500;
    font-size:1.275rem;
    color:var(--bs-text-gray-900)
}
.card .card-header .card-title .card-label{
    margin:0 .75rem 0 0;
    flex-wrap:wrap
}
.card .card-header .card-title .small,
.card .card-header .card-title small,
.card-title small{
    color:var(--bs-text-muted);
    font-size:0.75rem
}
.card .card-header .card-title .h1,.card .card-header .card-title .h2,.card .card-header .card-title .h3,.card .card-header .card-title .h4,.card .card-header .card-title .h5,.card .card-header .card-title .h6,.card .card-header .card-title h1,.card .card-header .card-title h2,.card .card-header .card-title h3,.card .card-header .card-title h4,.card .card-header .card-title h5,.card .card-header .card-title h6{
    margin-bottom:0
}
.card .card-header .card-toolbar{
    display:flex;
    align-items:center;
    margin:.5rem 0;
    flex-wrap:wrap
}
.card .card-body{
    padding:2rem 2.25rem;
    color:var(--bs-card-color)
}
.card .card-footer{
    padding:2rem 2.25rem;
    color:var(--bs-card-cap-color);
    background-color:var(--bs-card-cap-bg);
    border-top:1px solid var(--bs-card-border-color)
}
.card .card-scroll{
    position:relative;
    overflow:auto
}
.card.card-px-0 .card-body,.card.card-px-0 .card-footer,.card.card-px-0 .card-header{
    padding-left:0;
    padding-right:0
}
.card.card-py-0 .card-body,.card.card-py-0 .card-footer,.card.card-py-0 .card-header{
    padding-top:0;
    padding-bottom:0
}
.card.card-p-0 .card-body,.card.card-p-0 .card-footer,.card.card-p-0 .card-header{
    padding:0
}
.card.card-dashed{
    box-shadow:none;
    border:1px dashed var(--bs-border-dashed-color)
}
.card.card-dashed>.card-header{
    border-bottom:1px dashed var(--bs-border-dashed-color)
}
.card.card-dashed>.card-footer{
    border-top:1px dashed var(--bs-border-dashed-color)
}
.card.card-bordered{
    box-shadow:none;
    border:1px solid #f1f1f4
}
.card.card-flush>.card-header{
    border-bottom:0!important
}
.card.card-flush>.card-footer{
    border-top:0!important
}
.card.card-shadow{
    box-shadow:var(--bs-card-box-shadow);
    border:0
}
.card.card-reset{
    border:0!important;
    box-shadow:none!important;
    background-color:transparent!important
}
.card.card-reset>.card-header{
    border-bottom:0!important
}
.card.card-reset>.card-footer{
    border-top:0!important
}
.card.card-borderless{
    border:0!important
}
.card.card-borderless>.card-header{
    border-bottom:0!important
}
.card.card-borderless>.card-footer{
    border-top:0!important
}
.card.card-border-0{
    border:0!important
}
.card.card-stretch{
    height:calc(100% - var(--bs-gutter-y))
}
.card.card-stretch-75{
    height:calc(75% - var(--bs-gutter-y))
}
.card.card-stretch-50{
    height:calc(50% - var(--bs-gutter-y))
}
.card.card-stretch-33{
    height:calc(33.333% - var(--bs-gutter-y))
}
.card.card-stretch-25{
    height:calc(25% - var(--bs-gutter-y))
}
.card .card-header-stretch{
    padding-top:0!important;
    padding-bottom:0!important;
    align-items:stretch
}
.card .card-header-stretch .card-toolbar{
    margin:0;
    align-items:stretch
}
@media (min-width:576px){
    .card.card-sm-stretch{
        height:calc(100% - var(--bs-gutter-y))
    }
    .card.card-sm-stretch-75{
        height:calc(75% - var(--bs-gutter-y))
    }
    .card.card-sm-stretch-50{
        height:calc(50% - var(--bs-gutter-y))
    }
    .card.card-sm-stretch-33{
        height:calc(33.333% - var(--bs-gutter-y))
    }
    .card.card-sm-stretch-25{
        height:calc(25% - var(--bs-gutter-y))
    }
    .card .card-header-sm-stretch{
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:stretch
    }
    .card .card-header-sm-stretch .card-toolbar{
        margin:0;
        align-items:stretch
    }
}
@media (min-width:768px){
    .card.card-md-stretch{
        height:calc(100% - var(--bs-gutter-y))
    }
    .card.card-md-stretch-75{
        height:calc(75% - var(--bs-gutter-y))
    }
    .card.card-md-stretch-50{
        height:calc(50% - var(--bs-gutter-y))
    }
    .card.card-md-stretch-33{
        height:calc(33.333% - var(--bs-gutter-y))
    }
    .card.card-md-stretch-25{
        height:calc(25% - var(--bs-gutter-y))
    }
    .card .card-header-md-stretch{
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:stretch
    }
    .card .card-header-md-stretch .card-toolbar{
        margin:0;
        align-items:stretch
    }
}
@media (min-width:992px){
    .card.card-lg-stretch{
        height:calc(100% - var(--bs-gutter-y))
    }
    .card.card-lg-stretch-75{
        height:calc(75% - var(--bs-gutter-y))
    }
    .card.card-lg-stretch-50{
        height:calc(50% - var(--bs-gutter-y))
    }
    .card.card-lg-stretch-33{
        height:calc(33.333% - var(--bs-gutter-y))
    }
    .card.card-lg-stretch-25{
        height:calc(25% - var(--bs-gutter-y))
    }
    .card .card-header-lg-stretch{
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:stretch
    }
    .card .card-header-lg-stretch .card-toolbar{
        margin:0;
        align-items:stretch
    }
}
@media (min-width:1200px){
    .card.card-xl-stretch{
        height:calc(100% - var(--bs-gutter-y))
    }
    .card.card-xl-stretch-75{
        height:calc(75% - var(--bs-gutter-y))
    }
    .card.card-xl-stretch-50{
        height:calc(50% - var(--bs-gutter-y))
    }
    .card.card-xl-stretch-33{
        height:calc(33.333% - var(--bs-gutter-y))
    }
    .card.card-xl-stretch-25{
        height:calc(25% - var(--bs-gutter-y))
    }
    .card .card-header-xl-stretch{
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:stretch
    }
    .card .card-header-xl-stretch .card-toolbar{
        margin:0;
        align-items:stretch
    }
}
@media (min-width:1400px){
    .card.card-xxl-stretch{
        height:calc(100% - var(--bs-gutter-y))
    }
    .card.card-xxl-stretch-75{
        height:calc(75% - var(--bs-gutter-y))
    }
    .card.card-xxl-stretch-50{
        height:calc(50% - var(--bs-gutter-y))
    }
    .card.card-xxl-stretch-33{
        height:calc(33.333% - var(--bs-gutter-y))
    }
    .card.card-xxl-stretch-25{
        height:calc(25% - var(--bs-gutter-y))
    }
    .card .card-header-xxl-stretch{
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:stretch
    }
    .card .card-header-xxl-stretch .card-toolbar{
        margin:0;
        align-items:stretch
    }
}
.card-p{
    padding:2rem 2.25rem!important
}
.card-border{
    border:1px solid var(--bs-root-card-border-color)!important
}
.card-px{
    padding-left:2.25rem!important;
    padding-right:2.25rem!important
}
.card-shadow{
    box-shadow:var(--bs-card-box-shadow)
}
.card-py{
    padding-top:2rem!important;
    padding-bottom:2rem!important
}
.card-rounded{
    border-radius:.625rem
}
.card-rounded-start{
    border-top-left-radius:.625rem;
    border-bottom-left-radius:.625rem
}
.card-rounded-end{
    border-top-right-radius:.625rem;
    border-bottom-right-radius:.625rem
}
.card-rounded-top{
    border-top-left-radius:.625rem;
    border-top-right-radius:.625rem
}
.card-rounded-bottom{
    border-bottom-left-radius:.625rem;
    border-bottom-right-radius:.625rem
}
@media (max-width:767.98px){
    .card>.card-header:not(.flex-nowrap){
        padding-top:.5rem;
        padding-bottom:.5rem
    }
}
[data-bs-theme=dark] .card{
    --bs-card-box-shadow:none
}
.gap-2\.5{
    gap:.625rem
}
.badge{
    border-color:transparent
}

#service_row_1.table th:first-child,#service_row_1.table td:first-child{
    width:200px;
    text-align:left!important
}
.masonry-layout{
    padding:0 1rem;
    margin:0 1rem;
    background-color:var(--tw-brand-light);
    border:1px dashed var(--tw-brand);
    border-radius:10px;
    text-align:center
}
.masonry-layout img{
    width:100%;
    border-radius:5px
}
.fs-2x{
    font-size:35px
}
.fs-2tx{
    font-size:xxx-large;
    margin:0 10px 0 0
}
#scrolling{
    position:relative;
    max-height:450px;
    min-height:250px;
    margin:0 -30px;
    overflow:hidden
}
#scrolling ul{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    justify-content:start;
    height:100%;
    width:100%;
    transform-style:preserve-3d;
    user-select:none
}
#scrolling ul li{
    font-size:1.15rem;
    width:220px;
    min-width:175px;
    margin-right:10px;
    height:100%;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transform:scale(0.95);
    opacity:0.3;
    transition:transform 0.3s,opacity 0.3s
}
#scrolling ul li.itemslide-active{
    transform:scale(1);
    opacity:1;
    z-index:10
}
#scrolling ul li img{
    width:100%;
    height:auto;
    border-radius:8px
}
#scrolling ul li span{
    display: block;
    width: 80%;
    margin: auto;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{
    background:rgba(0,0,0,.4);
    transition:opacity .3s
}
.swal2-title{
    font-size:27px!important;
    color:#555!important
}
div:where(.swal2-icon).swal2-info{
    border-color:#c9dae1!important;
    color:#c9dae1!important
}
div:where(.swal2-container) .swal2-html-container{
    color:#777!important;
    font-size:16px!important
}
div:where(.swal2-container) .swal2-actions{
    display:block;
    border-top:1px dashed #E9EEF1;
    width:100%;
    text-align:center;
    padding:20px 0 0
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){
    background-color:var(--tw-brand)!important;
    color:#fff;
    transition:background-color 0.8s ease
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus{
    outline:2px solid rgba(255,255,255,0.5);
    box-shadow:0 0 10px rgba(255,255,255,0.5)
}
.swal2-show-custom{
    animation:showSweetAlert .4s;
    will-change:transform
}
.swal2-hide-custom{
    animation:fadeout 0.2s
}
@-webkit-keyframes fadeout{
    from{
        opacity:1
    }
    to{
        opacity:0
    }
}
@keyframes fadeout{
    from{
        opacity:1
    }
    to{
        opacity:0
    }
}
@-webkit-keyframes showSweetAlert{
    0%{
        -webkit-transform:scale(.95);
        transform:scale(.95)
    }
    45%{
        -webkit-transform:scale(1.05);
        transform:scale(1.05)
    }
    80%{
        -webkit-transform:scale(.95);
        transform:scale(.95)
    }
    to{
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes showSweetAlert{
    0%{
        -webkit-transform:scale(.95);
        transform:scale(.95)
    }
    45%{
        -webkit-transform:scale(1.05);
        transform:scale(1.05)
    }
    80%{
        -webkit-transform:scale(.95);
        transform:scale(.95)
    }
    to{
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.birthday-label,
.no_birthday_info,
.info-label,
.hn-label{
    display:block;
    font-size:11px;
    color:#BBB;
    margin-top: 4px;
}
.birthday-label{
    color:var(--tw-success)
}
.birthday-label [class^="ki-"]{
    font-size:16px;
    margin-right:4px
}
.no_birthday_info{
    color:var(--bs-gray-400)
}
.pace{
    -webkit-pointer-events:none;
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none
}
.pace-inactive{
    display:none
}
.pace .pace-progress{
    background:#d72630;
    position:fixed;
    z-index:2000;
    top:0;
    right:100%;
    width:100%;
    height:2px
}
/* ไอคอนในปุ่มให้อยู่แนวกลางเดียวกับข้อความ + ขนาดสัมพันธ์กับตัวอักษรของปุ่มนั้น (1.15em)
   เดิม top:3px + font-size:18px ตายตัว ทำให้ btn-sm (ฟอนต์ 12px) ได้ไอคอนใหญ่กว่าตัวอักษร
   1.5 เท่าและถูกดันลงต่ำกว่าข้อความเสมอ — วัดยืนยันแล้วที่ docs/change-log/2026-09-25-button-icon-alignment-th.md */
.btn .ki-duotone,.btn .ki-outline{
    font-size: 1.15em;
    vertical-align: middle;
}
/*
.panel-full-width-tabs .nav li a,.panel-full-width-tabs.horizontal-scrollable-tabs .scroller{
    padding-bottom:23px;
    padding-top:23px
}*/
.dropdown-menu,
ul.tagit-autocomplete {
    box-shadow:var(--bs-menu-dropdown-box-shadow)
}
.cn_list .flex{
    display:inline-table;
}
div.dataTables_wrapper div.dataTables_info {
    color: var(--bs-gray-400);;
    margin-top: 5px;
    font-size: 12px;
}
.bullet {
    display: inline-block;
    border-radius: 6px;
    width: 8px;
    height: 4px;
    flex-shrink: 0
}

.bullet-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%!important
}

.bullet-vertical {
    width: 4px;
    height: 8px
}

.bullet-line {
    width: 5px;
    height: 1px;
    border-radius: 0
}
.dropdown-menu .divider {

    display: none;
}
.dropdown-header {
    font-size: 12px;
    color: var(--tw-gray-500);
    border-bottom:1px dashed var(--tw-gray-200) ;
    padding-bottom: 10px;
}
.modal-footer {
    border-top: 1px dashed var(--tw-gray-300);
}
.modal-header {
    border-bottom: 1px dashed var(--tw-gray-300);
}
.checkbox label:after,.checkbox label:before {
    margin-top: 1px;
}
.horizontal-tabs .nav-tabs>li>a {
    line-height: 2;
    height: 50px;
}
.horizontal-tabs .nav-tabs>li>a{
    padding-bottom : .75rem;
    padding-top : .75rem;
}
.kan-ban-content {
     background-color:var(--tw-gray-100) ;
    padding: 7px;
}
.bootstrap-select .dropdown-menu li a span.text {
    display: unset;
}
.bootstrap-select .dropdown-menu li a small{
    /*float: right;*/
    font-size: 11px;
    display: block;
    padding-left: 0;
}
/* 2026-09-21 เอาเส้นประใต้แต่ละตัวเลือกออก — M8 ไม่มีเส้นคั่นรายการใน dropdown
   และพอรายการที่เลือกอยู่เป็นแถบส้มเต็ม (bkk-metronic8.css ข้อ 2.8) เส้นประจะตัดผ่าน
   แถบสีเห็นชัดมาก ผู้ใช้ทักว่า "ไม่สวย" · เหลือไว้แค่ transition */
.bootstrap-select .dropdown-menu>li>a {
    transition: background-color 0.3s ease;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
     margin-right:unset; 
}
.align-items-start {
    align-items: flex-start!important
}
.flex-column {
    flex-direction: column !important;
}
.btn-bottom-toolbar {
    margin-left: 0;
    width: 100%;

}
.navbar-pills-flat>li>a {

    padding: 0.5rem .875rem 0.875rem;

}
.nav-tabs>li a i.menu-icon {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    font-size: 22px;
    position: relative;
    top: 5px;
    margin-right: .5rem;

}
ul.tagit li.tagit-choice .tagit-close .text-icon {
    font-size: 16px;
}
ul.tagit li.tagit-choice-editable, ul.tagit li.tagit-choice-read-only {
    padding: 4px 20px 4px 10px;
    border: 1px dashed #aaa;
}
.popover ,
.ui-widget button, 
.ui-widget input,
 .ui-widget select,
.ui-widget textarea ,
ul.tagit li.tagit-choice .tagit-label:not(a),
ul.tagit-autocomplete  {
    font-family: "Prompt",sans-serif;
}
ul.tagit input[type=text] {
    border-left: 1px solid #ccc;
    padding-left: 10px;

}
.dropdown-menu{
    padding:0;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_desc::after {
    content: "";
    height: 18px;
    margin-left: 5px;
    opacity: 0;
    top: 16px;
    transition: opacity .3s ease-out;
    width: 18px;
}
.bootstrap-select.ajax-remove-values-option:not(.select-placeholder) .ajax-clear-values {

    top: 13px;
    color: red;
}
.activity-feed .feed-item:after {
    left: -11px;
    top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px dashed var(--tw-brand);

}
.activity-feed .feed-item {
    border-left: 1px dashed var(--tw-brand);
}

.has-error p.text-danger{
    padding: 0;
    margin: 0;
}
.control-label, label {
    --tw-text-opacity: 0.7;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.panel-footer {

    padding: 2.5rem;
}
.hero-bg{ /* รังผึ้ง = SVG mask ของกลาง (.bkk-hex-bg ท้ายไฟล์ · 2026-09-25) */
}
input::placeholder {

    opacity: 0.5; 
}

/* สำหรับเบราว์เซอร์ที่ใช้ WebKit (เช่น Chrome, Safari) */
input::-webkit-input-placeholder {
    opacity: 0.5; 
}

.checklist {
    padding: 10px 15px 5px 5px;
    margin-top: 5px;
    border-radius: 8px;
    cursor: move;
   border-top: 1px dashed var(--bs-gray-200);
}
.checklist-item-info {
    margin: 0 30px 0;
    padding: 0;
}
.checklist .checkbox.checklist-checkbox {
    margin-top: 0;
    margin-bottom: 0;
    height: 30px;
}
#task-no-checklist-items{
    border: 1px dashed var(--bs-gray-300);
    padding: 25px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: center;
}
.checklist-container {
    width: 100%;
    margin: 10px auto 0;
    border: 1px dashed var(--tw-brand);
    border-radius: 8px 8px 0 0;
    padding: 10px 15px;
    max-height: 350px;
    overflow-x: auto;
}
.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom:1px solid var(--tw-gray-200)
}
.item_used:last-of-type > .checklist-item {
    border-bottom: none !important;
}

.checklist-item input[type="number"] {
    width: 70px;
    padding: 5px;
    text-align: center;
}
.checklist-item  span small{
    display: block;
    color: gray;
    font-size: 10px;
}
.checklist-item  span i{
    display: block;
    color: gray;
    font-size: 14px;
}
.checklist-item  div {
    width: 200px;
    text-align: -webkit-center;
}
.checklist-item  input {
    margin: 5px 0;
}
.checklist-item-selected{
   /* display: flex;
    justify-content: space-between;
    align-items: center;*/
    background-color: var(--tw-brand-light);
    padding: 25px 25px 15px;
    margin: 0 -15px -10px;
}

.checklist-item-selected small{
    color: var(--tw-gray-400);
    font-size: 80%;
    position: relative;
    right: 0;
}
.checklist-item-selected label input{
    margin-right: 1px;
    position: relative;
    top: 2px;

}

.checklist-item-selected label{
    cursor: pointer;
    border: 1px solid #FFF;
    width: 100%;
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #FFF;
    transition: background-color 0.2s, border-color 0.2s; /* เพิ่มเอฟเฟกต์เปลี่ยนสี */
}

.checklist-item-selected label.active ,
.checklist-item-selected label:hover {
    position: relative;
    border-color: var(--tw-brand);
    box-shadow:var(--bs-brandbox-shadow);
    z-index: 10;
}


/* เปลี่ยนสี label เมื่อ radio ถูกเลือก */
.checklist-item-selected label input[type="radio"]:checked + span {
    color: var(--tw-brand); /* สีข้อความ */

}



.checklist-item-selected ul{
   /* background-color: white;
    border-radius: 4px;*/
    padding: 0 15px;
}
.checklist-item-selected ul li {
    margin-left: 6px;
    --tw-text-opacity: 0.5;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    border-bottom: 1px solid #eee;
    padding: 5px 0;
}
/* ลบ border-bottom สำหรับ li สุดท้าย */
.checklist-item-selected ul li:last-child {
    border-bottom: none;
}
.btn-overright{
    position: relative;
    right: -25px;
}
.item-usage-number{
    width: 100px;
    text-align: center;
    font-size: x-large;
    color: var(--tw-primary-active);
    background-color: var(--tw-primary-light);
    display: flex;
    position: relative;
    justify-content: center; /* จัดกลางแนวนอน */
    align-items: center;    /* จัดกลางแนวตั้ง */
    height: 75px;          /* สูงเต็มหน้าจอ */
    border-radius: 6px;
    border: 1px dashed var(--tw-primary-active);
}
.item-usage-number .text{ 
    font-size: 10px;
    background-color: var(--tw-primary-active);
    color: white;
    text-align: center;
    padding: 5px;
    position: absolute;
    left: -25px;
    text-transform: uppercase;
}
.item-usage-number small{ 
    font-size: 10px;
    display: block;
}
.no-data-message {
text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
font-size: 16px; /* ขนาดตัวอักษร */
color: #555; /* สีข้อความ */
margin-top: 20px; /* ระยะห่างด้านบน */
}

.manage-services-link {
display: inline-block; /* แสดงเป็นบล็อกแนวนอน */
text-decoration: none; /* ลบขีดเส้นใต้ */

transition: all 0.3s ease; /* เพิ่ม Animation */
}
.task-attachment-wrapper {
max-height:500px; 
overflow:visible;
}
.task-attachment {
border: 1px solid var(--tw-gray-300);
padding: 10px;
border-radius: 3px;
max-height: 500px;
min-height: 195px;
overflow:hidden;
}
.task-comment .task-attachment {
max-height: 500px; 
min-height: 135px;
padding: 5px;
}
.carousel-inner>.item>a>img, 
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img, 
.thumbnail>img {
margin: auto;
}
#avatar_ {
    border: 1px dashed var(--tw-brand);
    background-color: var(--tw-brand-light);
    color: var(--tw-brand);
    max-width: 210px;
    margin: auto;
    cursor: pointer;
}
.tw-border-success{
    border-color: var(--tw-brand);
}
.tw-border-3 {
    border-width: 3px;
    border-style: solid;
}
.text-blue{
    color: var(--tw-primary);
}
@media (min-width: 1200px) {
    .row.m-row--col-separator-xl>div {
        border-bottom: 0;
        border-right: 1px solid #ebedf2;
    }
}

/* เดิมถอดกรอบ/เงาของเมนูซ้ายแบบ customer-tabs (โปรไฟล์ลูกค้า · ผู้ขาย · ตั้งค่าจัดซื้อ) ทำให้ดูต่างจาก
   เมนูหน้าตั้งค่า — ผู้ใช้ขอ 2026-09-24 ให้เมนูซ้ายทุกหน้าหน้าตาเดียวกับหน้าตั้งค่า จึงเลิกทับ (ใช้กรอบ/เงาเดิมของ navbar-pills-flat) */

.table.text-right tr td,
.table.text-right tr th,
.table tr.text-right td,
.table tr.text-right td,
.table td.text-right,
.table th.text-right{
    text-align: right!important;
}
.paid_amount span{
    color: #04B440!important;
}
td .onoffswitch,
.onoffswitch.auto{
    margin: auto;
}
.list_approve #item_approve{
    border-bottom: 1px dashed var(--tw-gray-200);
    padding: 10px 0;
}
.hr-color{
    margin-top: 15px;
    border-bottom: 1px dashed;
    color: var(--tw-gray-300);
    border-top: none;
}
.input_method{
    margin-left: 5px;
}
.alert {

    border: 1px dashed transparent;

}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important
}

.border-success {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important
}

.border-info {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important
}

.alert-warning {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important
}

.border-danger {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important
}
.checklist-items-wrapper{
    margin-top: 5px;
}
.checklist .checkbox.checklist-checkbox {
    margin-top: -2px;
}

.m-widget4 .m-widget4__item {
    display: table;
    padding-top: 1.15rem;
    padding-bottom: 1.25rem;
}
.m-widget4 .m-widget4__item .m-widget4__img {
    display: table-cell;
    vertical-align: middle;
}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--logo img {
    width: 3.5rem;
    border-radius: 50%;
}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--pic img {
    width: 4rem;
    border-radius: 50%;
}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--icon img {
    width: 2.1rem;
}
.m-widget4 .m-widget4__item .m-widget4__info {
    display: table-cell;
    width: 100%;
    padding-right: 1.2rem;
    font-size: 0.9rem;
    vertical-align: middle;
}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__text {

    font-weight: 500;
}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__title {

    font-weight: 600;
}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__sub {
    font-size: 0.85rem;
}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__sub small{
    font-size: 80%;
    margin-left: 15px;
}
.m-widget4 .m-widget4__item .m-widget4__ext {
    display: table-cell;
    vertical-align: middle;
}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__number {

    font-weight: 600;
}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon > i {
    font-size: 1.6rem;
}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon.m-widget4__icon--2x > i {
    font-size: 2.2rem;
}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon:hover {
    text-decoration: none;
}
.m-widget4__item {
    border-bottom: 0.07rem dashed #ebedf2;
}
.m-widget4__item .m-widget4__number {
   /*color: #575962;
   */
}
.m-widget4__item .m-widget4__title {
    color: #575962;
}
.m-widget4__item .m-widget4__sub {
    color: #7b7e8a;
}
.m-widget4__item .m-widget4__sub small{
    color: #c1bfd0;
}
.m-widget4__item .m-widget4__text {
    color: #898b96;
}
.m-widget4__item .m-widget4__icon > i {
    color: #c1bfd0;
}
.m-widget4__item .m-widget4__icon:hover > i {
    color: #716aca;
}
.m-widget4__item.m-widget4__item--last, .m-widget4__item:last-child {
    border-bottom: 0;
}
.coupon-card {
    display: flex;
    border: 1px solid var(--tw-brand-active);
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}
.coupon-card p {
    padding: 0;
    margin: 0;
}
.coupon-card hr {
    /* 2026-09-21 สำเนาของเส้นคั่นประกลาง ย้ายมาใช้ --tw-gray-300 พร้อมกัน (ดู :906) */
    border-color:var(--tw-gray-300);
    border-style:dashed;
    margin:1rem 0;
}
.coupon-left {
    background-color: var(--tw-brand);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    padding: 10px;
}

.coupon-icon {
    font-size: 24px;
    font-weight: bold;
}

.coupon-text {
    font-size: 14px;
    margin-top: 5px;
}

.coupon-right {
    flex-grow: 1;
    padding: 15px;
}

.coupon-description {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px!important;
}

.coupon-minimum, 
.coupon-shop, 
.coupon-items {
    font-size: 14px;
    margin: 5px 0;
    color: #555;
}

.coupon-expiry {
    margin: 5px 0;
    color:var(--bs-text-muted);
    font-size:0.75rem
}

.coupon-select {
    margin-top: 10px;
    float: right;
}

.htMiddleCenter,
.htMiddleCenter table th
{
    text-align: center;
    vertical-align: middle !important;
}
.swal2-container {
    z-index: 11000;
}
.tableHDColor{
    background-color: #97a2b6!important;
    color: #FFF!important;
    border-color: #97a2b6!important;
}
.invoice-items-table td{
    vertical-align: top!important;
}
.branch-menu-text {
    color: #FFF;
    padding:1.25rem 1.6rem;
    position: relative; /* สำคัญ: เพื่อให้ ::after อ้างอิงตำแหน่งได้ */
    display: flex;
    margin:0 -8px 0 -7px;
    background-color: rgb(255 255 255 / var(--tw-text-opacity, 0.2));
}



/*
.branch-menu-text:before{
    content: "";
    position: absolute;
    height: 0.1em;
    width: 100%;
    left: 0;
    background: linear-gradient(
        to right,
        #fd004c,
        #fe9000,
        #fff020,
        #3edf4b,
        #3363ff,
        #b102b7
    );
    background-size: 200% 100%;
    bottom: -0.1em;
    transition: 1.5s;
}
.branch-menu-text:hover:before{
    background-position: 100% 0;
}*/
.tw-bg-color .progress {
    --tw-bg-opacity: 0.2;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    background-color: rgb(241 245 249/var(--tw-bg-opacity,1));
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.progress-bar-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1))
}

swiper-container {
    width: 100%;
    height: 100%;
  }
  swiper-container p{
    padding: 0;
    margin: 0;
  }
  swiper-container.mySwiper swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  swiper-container.mySwiper2 swiper-slide {
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .swiper-pagination {
    bottom: 15px !important;

  }
/*
  swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }*/
  .bg-42{

    background-size: cover;
    background-repeat: no-repeat;
  }
  .fc {
     --fc-border-color:var(--bs-gray-200); 
     --fc-page-bg-color:#ffffff; 
     --fc-small-font-size:0.85em; 
     --fc-highlight-color:var(--bs-light); 
     --fc-bg-event-opacity:0.3; 
     --fc-neutral-bg-color:var(--bs-light); 
     --fc-today-bg-color:var(--bs-success-light); 
     --fc-now-indicator-color:var(--bs-danger); 
     --fc-list-event-hover-bg-color:var(--bs-light); 
     --fc-button-text-color:var(--bs-gray-600); 
     --fc-button-bg-color:var(--bs-gray-100); 
     --fc-button-border-color:var(--bs-gray-100); 
     --fc-button-hover-bg-color:var(--bs-gray-100); 
     --fc-button-hover-border-color:var(--bs-gray-100); 
     --fc-button-active-bg-color:var(--bs-gray-200); 
     --fc-button-active-border-color:var(--bs-gray-200); 
}

.fc table {
    font-size: 0.95em!important;
}
.fc-daygrid-event {
    font-size: .85em;
    font-size: var(--fc-small-font-size, .85em); 
}
.fc .fc-button {
    padding: .75rem 1.25rem!important;
    box-shadow: none!important;
    border: 0!important;
    vertical-align: middle;
    font-weight: 500;
    text-transform: capitalize
}

.fc .fc-button-primary {
    margin: 0
}

.fc .fc-button-primary .fc-icon {
    font-size: 1.35rem;
    margin-bottom: .15rem
}

.fc .fc-button-primary:not(:disabled):not(.fc-button-active):active,.fc .fc-button-primary:not(:disabled):not(.fc-button-active):focus,.fc .fc-button-primary:not(:disabled):not(.fc-button-active):hover {
    color: var(--bs-gray-900)
}

.fc .fc-button-primary:not(:disabled):not(.fc-button-active):active .fc-icon,.fc .fc-button-primary:not(:disabled):not(.fc-button-active):focus .fc-icon,.fc .fc-button-primary:not(:disabled):not(.fc-button-active):hover .fc-icon {
    color: var(--bs-gray-900)
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    color: var(--bs-gray-900)
}

.fc .fc-button-primary:not(:disabled).fc-button-active .fc-icon {
    color: var(--bs-gray-900)
}

.fc .fc-button-group .fc-button {
    margin: 0!important
}

.fc .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-gray-800)
}

.fc .fc-col-header-cell {
    padding: .75rem .5rem
}

.fc .fc-col-header-cell .fc-col-header-cell-cushion {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bs-gray-800)
}

.fc .fc-scrollgrid {
    border-radius: .475rem
}

.fc .fc-scrollgrid thead>tr td:first-child {
    border-top-left-radius: .475rem
}

.fc .fc-scrollgrid thead>tr td:last-child {
    border-top-right-radius: .475rem
}

.fc .fc-scrollgrid tbody>tr:last-child td:first-child {
    border-bottom-left-radius: .475rem
}

.fc .fc-scrollgrid tbody>tr:last-child td:last-child {
    border-bottom-right-radius: .475rem
}

.fc .fc-daygrid-event {
    margin-top: 3px
}

.fc .fc-daygrid-day-number {
    color: var(--bs-gray-800)
}

.fc .fc-daygrid-dot-event {
    background-color: var(--bs-light);
    color: var(--bs-gray-600)
}

.fc .fc-daygrid-dot-event .fc-event-title {
    font-weight: 500
}

.fc .fc-daygrid-dot-event.fc-event-mirror,.fc .fc-daygrid-dot-event:hover {
    background-color: var(--bs-light);
    color: var(--bs-primary)
}

.fc .fc-daygrid-event-dot {
    margin-left: .5rem;
    margin-right: .1rem
}

.fc .fc-popover {
    border: 0!important;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-dropdown-box-shadow);
    border-radius: .475rem
}

.modal-open .fc .fc-popover {
    z-index: 1054!important
}

.fc .fc-popover .fc-popover-header {
    border-top-left-radius: .475rem;
    border-top-right-radius: .475rem;
    padding: .65rem .75rem;
    background-color: var(--bs-tooltip-bg)
}

.fc .fc-popover .fc-popover-header .fc-popover-title {
    color: var(--bs-gray-800);
    font-size: 1rem;
    font-weight: 500
}

.fc .fc-popover .fc-popover-header .fc-popover-close {
    font-size: 1rem;
    color: var(--bs-gray-600)
}

.fc .fc-popover .fc-popover-header .fc-popover-close:hover {
    color: var(--bs-primary)
}

.fc .fc-popover .fc-popover-body {
    padding: .5rem .75rem .75rem .75rem
}

.fc .fc-daygrid-more-link {
    font-weight: 500
}

.fc .fc-timegrid-slot {
    height: 2rem;
    font-size: .95rem
}

.fc .fc-list-day-cushion,.fc .fc-list-table td {
    padding: .85rem 1.15rem
}

.fc .fc-list-day-side-text,.fc .fc-list-day-text {
    font-size: 1.1rem;
    color: var(--bs-gray-900);
    font-weight: 600
}

.fc .fc-list,.fc .fc-list-table {
    border-radius: .475rem
}

.fc .fc-list {
    overflow: hidden;
    position: relative
}

.fc .fc-timegrid-axis {
    padding-left: 0;
    padding-right: 0
}

.fc .fc-timegrid-event .fc-event-main {
    padding: .25rem .25rem
}

.fc .fc-timegrid-now-indicator-arrow {
    margin-top: -1px
}

.fc-h-event {
    font-weight: 400
}

.header-user-profile .staff-profile-image-small{
    margin-top: 9px;
}

/* ===== โมดัลอยู่กึ่งกลางจอแนวตั้งเป็นค่าเริ่มต้นของทั้งระบบ =====
   Bootstrap 3 วางโมดัลชิดขอบบน (.modal-dialog{margin:30px auto}) ไม่มีคลาส
   modal-dialog-centered แบบ Bootstrap 4/5 ให้ใช้ จึงทำเป็นค่าเริ่มต้นไว้ที่นี่
   โมดัลใหม่ทุกตัวได้พฤติกรรมนี้เองโดยไม่ต้องเพิ่มคลาสอะไร */

/* ทำ flex ที่ .modal-dialog ไม่ใช่ที่ .modal (แนวเดียวกับ .modal-dialog-centered ของ Bootstrap 4/5)
   .modal มีความสูงตายตัวเท่าจอ ถ้าเอา flex ไปใส่ตรงนั้นแล้วเนื้อหาสูงเกิน จะถูกดันล้นขึ้นบน
   จนหัวโมดัลโดนตัดและเลื่อนขึ้นไปดูไม่ได้ ส่วน .modal-dialog ไม่มีความสูงตายตัว มีแค่ min-height
   เนื้อหาสูงเกินเมื่อไหร่กล่องก็ยืดตาม ไม่เหลือที่ว่างให้จัดกึ่งกลาง จึงไม่มีอะไรโดนตัด
   และยังปล่อยให้ .modal เลื่อนได้ตามปกติ */
/* 🔴 ห้ามผูกกับ `.in` — 2026-09-22 ผู้ใช้ทักว่า "ตอนกดปิด โมดัลแว็บขึ้นไปบนสุดแล้วค่อยหาย"
   ตอนปิด Bootstrap ถอดคลาส `.in` ออกก่อน แล้วรออีก ~300ms ให้จางหมดถึงค่อย display:none
   ถ้ากฎจัดกึ่งกลางผูกกับ `.in` ไว้ พอคลาสหลุด กล่องจะเด้งกลับไปที่ตำแหน่งเริ่มต้นของ
   Bootstrap (margin:30px auto = ชิดบน) ค้างให้เห็นตลอดช่วงที่กำลังจางหาย
   ผูกกับ `.modal` เฉย ๆ ตำแหน่งจะนิ่งตั้งแต่เปิดจนปิด · ตอนไม่ได้เปิดโมดัลเป็น display:none
   อยู่แล้วกฎนี้จึงไม่มีผลข้างเคียง (ตรวจแล้วไม่มีกฎอื่นในระบบตั้ง display/min-height
   ให้ .modal-dialog เลย การลดน้ำหนัก selector จาก (0,3,0) เป็น (0,2,0) จึงไม่ชนกับอะไร) */
.modal > .modal-dialog {
    display: flex;
    flex-direction: column;     /* แกนหลักเป็นแนวตั้ง ลูกจึงเรียงลงล่างและกางเต็มความกว้างเหมือนเดิม */
    justify-content: center;
    min-height: calc(100% - 20px);   /* เท่ากับ margin 10px บน+ล่าง ของ Bootstrap บนจอเล็ก */

}

/* Bootstrap เลื่อนโมดัลเข้าด้วย .modal.fade .modal-dialog{transform:translate(0,-25%)}
   แล้วค่อยล้างเป็น translate(0,0) ตอนได้คลาส .in แต่ในระบบนี้ทรานซิชันไม่จบ
   (ตรวจแล้ว: getAnimations() ว่าง ไม่มีอนิเมชันทำงาน แต่ค่า transform ค้างที่ -25%
   ของความสูงตัวเอง พอสั่ง transition:none ค่าถึงกลายเป็น none) ผลคือกล่องถูกดันขึ้น
   จนหัวโมดัลโดนตัด ตัดอนิเมชันส่วน transform ทิ้งไปเลยเพื่อให้ตำแหน่งนิ่งและคาดเดาได้
   ส่วนการค่อย ๆ จางเข้า (opacity) ของ Bootstrap ยังทำงานตามเดิม
   ใช้ none ไม่ใช่ translate(0,0) เพราะ transform ที่ไม่ใช่ none จะกลายเป็น containing block
   ของลูกที่เป็น position:fixed ทำให้ dropdown/tooltip ในโมดัลเพี้ยน */
.modal.fade > .modal-dialog,
.modal.in > .modal-dialog {
    transform: none;
    transition: none;
}

@media (min-width: 768px) {
    /* จอใหญ่ Bootstrap ใช้ margin 30px บน+ล่าง */
    .modal > .modal-dialog {
        min-height: calc(100% - 60px);
    }
}
/* หัวหมวดเมนูซ้าย (2026-09-24 · bkk_menu_groups_helper.php + aside.php) — ป้ายตัวเล็กคั่นกลุ่มเมนู ไม่ใช่ลิงก์ */
.sidebar #side-menu > li.bkk-menu-section,
#setup-menu > li.bkk-menu-section{
    padding:16px 22px 5px;
    pointer-events:none;
    user-select:none;
}
/* เมนูตั้งค่า (ฟันเฟือง) ใช้หัวหมวดชุดเดียวกัน — bkk_setup_menu_apply_groups() */
.sidebar #side-menu > li.bkk-menu-section > span,
#setup-menu > li.bkk-menu-section > span{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    line-height:1.3;
    color:var(--tw-gray-500);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* หัวหมวดแรก (ภาพรวม) อยู่ติดชื่อสาขา — ไม่ต้องเว้นบนมาก */
.sidebar #side-menu > li.bkk-menu-section:nth-child(-n+3){
    padding-top:8px;
}

/* ============================================================================
   พื้นหลังรังผึ้ง (2026-09-25) — แทนรูป bg_profile_orange.png (รังผึ้งส้มตายตัว ดูเป็นคราบบนพื้นสีอื่น)
   SVG assets/images/bkk-hex-pattern.svg ใช้เป็น **mask** → สีมาจาก --bkk-hex-c จึงเข้ากับพื้นทุกสีเอง
   ใช้: ใส่คลาส .bkk-hex-bg ให้กล่องที่มีสีพื้น (หรือเพิ่ม selector ในรายการข้างล่าง)
   ปรับ: --bkk-hex-c (สีรังผึ้ง · ค่าเริ่มต้นขาว สำหรับพื้นเข้ม — พื้นขาวใช้ var(--tw-brand))
         --bkk-hex-o (ความเข้ม) · --bkk-hex-size (ขนาดช่อง) · --bkk-hex-fade (จางลงถึงกี่ % ของความสูง)
   ============================================================================ */
.bkk-hex-bg,.hero-bg,.wl-stat:first-child,.cb-dash-total,.ap-day-card.today,.ui-stat.is-lead,.ui-stats:not(.no-lead)>.ui-stat:first-child,
.bo-sc-hero{
    position:relative;
    isolation:isolate;
}
.bkk-hex-bg::before,.hero-bg::before,.wl-stat:first-child::before,.cb-dash-total::before,.ap-day-card.today::before,.ui-stat.is-lead::before,.ui-stats:not(.no-lead)>.ui-stat:first-child::before,
.bo-sc-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:inherit;
    background:var(--bkk-hex-c,#fff);
    opacity:var(--bkk-hex-o,.16);
    -webkit-mask:url(../images/bkk-hex-pattern.svg?v=2) right top / var(--bkk-hex-size,58px) auto repeat,
                 linear-gradient(to bottom, #000 0%, transparent var(--bkk-hex-fade,92%));
    -webkit-mask-composite:source-in;
            mask:url(../images/bkk-hex-pattern.svg?v=2) right top / var(--bkk-hex-size,58px) auto repeat,
                 linear-gradient(to bottom, #000 0%, transparent var(--bkk-hex-fade,92%));
            mask-composite:intersect;
}
/* การ์ดพื้นขาว/ส้มจางที่เคยใช้ PNG รังผึ้ง (หัวแท็บลูกค้า · กระเป๋าเงิน · นัดหมาย · โมดัล LINE) — สีแบรนด์ บางมาก
   เจ้าของขอ "บาง ๆ" (2026-09-25) · บนพื้นสีทึบ (วิดเจ็ตแดชบอร์ด bg-*) ใช้ขาว */
.hero-bg,.wl-stat:first-child,.cb-dash-total,.ap-day-card.today,.ui-stat.is-lead,.ui-stats:not(.no-lead)>.ui-stat:first-child{
    --bkk-hex-c:var(--tw-brand);
    --bkk-hex-o:.2;
    --bkk-hex-fade:100%;
}
.bg-primary.hero-bg,.bg-success.hero-bg,.bg-danger.hero-bg,.bg-info.hero-bg,.bg-warning.hero-bg{
    --bkk-hex-c:#fff;
    --bkk-hex-o:.16;
}