:root {
    --bs-blue: #0061f2;
    --bs-indigo: #5800e8;
    --bs-purple: #6900c7;
    --bs-pink: #e30059;
    --bs-red: #e81500;
    --bs-orange: #f76400;
    --bs-yellow: #f4a100;
    --bs-green: #00ac69;
    --bs-teal: #00ba94;
    --bs-cyan: #00cfd5;
    --bs-white: #fff;
    --bs-gray: #69707a;
    --bs-gray-dark: #363d47;
    --bs-gray-100: #f2f6fc;
    --bs-gray-200: #e0e5ec;
    --bs-gray-300: #d4dae3;
    --bs-gray-400: #c5ccd6;
    --bs-gray-500: #a7aeb8;
    --bs-gray-600: #69707a;
    --bs-gray-700: #4a515b;
    --bs-gray-800: #363d47;
    --bs-gray-900: #212832;

    --bs-red-soft: #f1e0e3;
    --bs-orange-soft: #f3e7e3;
    --bs-yellow-soft: #f2eee3;
    --bs-green-soft: #daefed;
    --bs-teal-soft: #daf0f2;
    --bs-cyan-soft: #daf2f8;
    --bs-blue-soft: #dae7fb;
    --bs-indigo-soft: #e3ddfa;
    --bs-purple-soft: #e4ddf7;
    --bs-pink-soft: #f1ddec;
    --bs-primary-soft: #dae7fb;
    --bs-secondary-soft: #e4ddf7;
    --bs-success-soft: #daefed;
    --bs-info-soft: #daf2f8;
    --bs-warning-soft: #f2eee3;
    --bs-danger-soft: #f1e0e3;
}

#spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
}
#overlay-loading {
  display: none; /* Hide overlay initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Black background with 50% opacity */
  z-index: 9998; /* Just below the spinner */
  text-align: center;
}
.select2-selection { /*select2-selection--single */
  height: 38px !important;
}
.select2-selection__rendered, .select2-selection__arrow{
  margin-top: 4px;
}
.is-invalid-border{
  border-color: #fa6767 !important;
}
.is-valid-border{
  border-color: #42d29d !important;
}
.select2-container--default .select2-selection--single{
  background-color: transparent !important;
  border: 1px solid #dee2e6;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #6c757d !important;
}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner {
    -moz-appearance: textfield;
}
.datepicker {
    z-index: 9999 !important;
}
.rounded-circle {
    /* border-radius: 50% !important; */
    object-fit: cover;
}
/* ===== Start Dropzone ===== */
/* ปรับแต่งช่อง Dropzone ให้ดูทันสมัยขึ้น */
.dropzone {
    border: 2px dashed #dee2e6 !important;
    border-radius: 6px;
    background: #f8f9fa;
    min-height: 200px;
}

/* จัดการแถบ Progress ที่เป็นสีดำ */
.dropzone .dz-preview .dz-progress {
    opacity: 0; /* ซ่อนแถบดำเริ่มต้น */
    pointer-events: none;
}

/* แสดงแถบ Progress เมื่อมีการประมวลผล (Processing) เท่านั้น */
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.2s linear;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    background: #39d392; /* เปลี่ยนสีแถบวิ่งเป็นสีเขียวให้ดูซอฟต์ขึ้น */
}

/* จัดตำแหน่งไอคอนลบไฟล์ (Delete Icon) */
.dropzone .dz-preview .dz-remove {
    margin-top: 10px;
    display: inline-block;
    text-decoration: none !important;
    border: none !important;
}

.dropzone .dz-preview .dz-remove:hover i {
    color: #fa5c7c !important; /* เปลี่ยนเป็นสีแดงเข้มเมื่อเอาเมาส์ไปชี้ */
}

/* จัดการรูป Thumbnail หรือ Icon ของไฟล์ให้ดูสมดุล */
.dropzone .dz-preview .dz-image {
    border-radius: 10px !important;
}

/* ซ่อน Tooltip Error เดิมของ Dropzone (เพราะเราใช้ SweetAlert แสดงแทนแล้ว) */
.dropzone .dz-preview .dz-error-message {
    display: none !important;
}

/* ทำให้กรอบภาพที่ Error ขึ้นขอบสีแดงชัดเจนแทนการใช้ Tooltip */
.dropzone .dz-preview.dz-error .dz-image {
    border: 2px solid #fa5c7c !important;
}
/* ===== End Dropzone ===== */
.bg-1{
    background-image: linear-gradient(to right top, #1c9fd4, #0089d5, #176fcf, #4c51bf, #6f26a3);
}


/* ==============================================
   GRADIENT BUTTON SYSTEM (Based on Hyper Theme)
   ============================================== */
.btn-grad-primary:hover,
.btn-grad-secondary:hover,
.btn-grad-success:hover,
.btn-grad-danger:hover,
.btn-grad-warning:hover,
.btn-grad-info:hover,
.btn-grad-dark:hover {
    color: #ffffff !important; /* บังคับให้เป็นสีขาวเสมอ */
    filter: brightness(1.1);
}
/* --- โครงสร้างพื้นฐานของปุ่ม Gradient --- */
.btn-grad {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent; /* เตรียมไว้สำหรับ Outline */
}

.btn-grad:hover {
    transform: translateY(-1px);
    box-shadow: var(--ct-box-shadow);
    filter: brightness(1.1); /* ทำให้สว่างขึ้นเล็กน้อยเวลา hover */
}

/* --- 1. SOLID GRADIENT (แบบสีเต็ม) --- */
.btn-grad-primary {
    background: linear-gradient(135deg, var(--ct-primary) 0%, #536de6 100%);
    color: #ffffff !important;
}
.btn-grad-secondary {
    background: linear-gradient(135deg, var(--ct-secondary) 0%, #6c757d 100%);
    color: #fff;
}
.btn-grad-success {
    background: linear-gradient(135deg, var(--ct-success) 0%, #0acf97 100%);
    color: #fff;
}
.btn-grad-danger {
    background: linear-gradient(135deg, var(--ct-danger) 0%, #fa5c7c 100%);
    color: #fff;
}
.btn-grad-warning {
    background: linear-gradient(135deg, var(--ct-warning) 0%, #ffbc00 100%);
    color: #fff;
}
.btn-grad-info {
    background: linear-gradient(135deg, var(--ct-info) 0%, #39afd1 100%);
    color: #fff;
}
.btn-grad-dark {
    background: linear-gradient(135deg, var(--ct-dark) 0%, #313a46 100%);
    color: #fff;
}

.btn-grad-outline-primary:hover {
    background: var(--ct-primary);
    color: #ffffff !important; /* บังคับให้เป็นสีขาวเสมอ */
    border-image: none;
    border-color: var(--ct-primary);
}
.btn-grad-outline-success:hover {
    background: var(--ct-success);
    color: #ffffff !important;
    border-image: none;
    border-color: var(--ct-success);
}
.btn-grad-outline-danger:hover  {
    background: var(--ct-danger);
    color: #ffffff !important;
    border-image: none;
    border-color: var(--ct-danger);
}
.btn-grad-outline-warning:hover {
    background: var(--ct-warning);
    color: #212529 !important; /* Warning มักจะใช้กับตัวอักษรสีเข้มเพื่อให้เห็นชัด */
    border-image: none;
    border-color: var(--ct-warning);
}
.btn-grad-outline-info:hover {
    background: var(--ct-info);
    color: #ffffff !important;
    border-image: none;
    border-color: var(--ct-info);
}
.btn-grad-outline-dark:hover {
    background: var(--ct-dark);
    color: #ffffff !important;
    border-image: none;
    border-color: var(--ct-dark);
}

/* --- 2. OUTLINE GRADIENT (แบบขอบไล่สี) --- */
/* เทคนิค: ใช้ background-clip เพื่อให้ขอบเป็น gradient แต่ข้างในโปร่งใส */
.btn-grad-outline-primary, .btn-grad-outline-secondary, .btn-grad-outline-success,
.btn-grad-outline-danger, .btn-grad-outline-warning, .btn-grad-outline-info, .btn-grad-outline-dark {
    background-color: transparent;
    border: 2px solid; /* เพิ่มความหนาขอบเพื่อให้เห็น gradient ชัดขึ้น */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.btn-grad-outline-primary {
    border-image: linear-gradient(135deg, var(--ct-primary), #6658dd) 1;
    color: var(--ct-primary);
}
.btn-grad-outline-success {
    border-image: linear-gradient(135deg, var(--ct-success), #0acf97) 1;
    color: var(--ct-success);
}
.btn-grad-outline-danger {
    border-image: linear-gradient(135deg, var(--ct-danger), #fa5c7c) 1;
    color: var(--ct-danger);
}
.btn-grad-outline-info {
    border-image: linear-gradient(135deg, var(--ct-info), #39afd1) 1;
    color: var(--ct-info);
}

/* --- การปรับแต่งเมื่อ Hover สำหรับแบบ Outline --- */
.btn-grad-outline-primary:hover { background: var(--ct-primary); color: #fff; border-image: none; border-color: var(--ct-primary); }
.btn-grad-outline-success:hover { background: var(--ct-success); color: #fff; border-image: none; border-color: var(--ct-success); }
.btn-grad-outline-danger:hover  { background: var(--ct-danger);  color: #fff; border-image: none; border-color: var(--ct-danger); }


/* ==============================================
   ADDON.CSS - คลาสที่ปรับแต่งเพิ่มเติม
============================================== */

/* ตัวอย่างที่ 1: กล่องไฮไลท์ข้อความ (ดึงสีและขอบจากธีมหลักมาใช้) */
.custom-highlight-box {
    background-color: var(--ct-primary-bg-subtle); /* ใช้สีพื้นหลังแบบอ่อนของธีม */
    border: 1px solid var(--ct-primary-border-subtle);
    border-radius: var(--ct-border-radius-lg); /* ใช้ความโค้งมนเดียวกับระบบ */
    padding: 1.5rem;
    color: var(--ct-primary-text-emphasis);
    box-shadow: var(--ct-box-shadow-sm);
    transition: all 0.3s ease; /* เพิ่มเอฟเฟกต์ให้ดูนุ่มนวล */
}

.custom-highlight-box:hover {
    box-shadow: var(--ct-box-shadow);
    transform: translateY(-2px); /* เอฟเฟกต์ยกตัวตอนเอาเมาส์ชี้ */
}

/* ตัวอย่างที่ 2: ปุ่มสไตล์ใหม่แบบไล่สี (Gradient) ที่ไม่มีในไฟล์ต้นฉบับ */
.btn-custom-gradient {
    color: var(--ct-white);
    background: linear-gradient(135deg, var(--ct-primary) 0%, var(--ct-info) 100%);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: var(--ct-border-radius-pill); /* ทำปุ่มให้โค้งมนแบบแคปซูล */
    font-weight: var(--ct-body-font-weight);
}

.btn-custom-gradient:hover {
    color: var(--ct-white);
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(var(--ct-primary-rgb), 0.3);
}

/* ตัวอย่างที่ 3: คลาสตัวอักษรสำหรับเน้นย้ำ */
.text-custom-accent {
    color: var(--ct-orange); /* ใช้ชุดสีของระบบ */
    font-weight: bold;
    letter-spacing: 0.5px;
}



/* Datatable เมื่อหน้าจอเล็กลง (Mobile) */
@media (max-width: 767.98px) {
    /* จัดการตัวเลือกจำนวนรายการ (Length) ให้ชิดซ้าย */
    .dataTables_wrapper .dataTables_length {
        text-align: left !important;
        margin-bottom: 10px;
    }

    /* จัดการช่องค้นหา (Filter) ให้ชิดขวา หรือ ซ้าย ตามใจคุณ */
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important; /* เปลี่ยนเป็น right ได้ถ้าต้องการ */
    }

    /* ปรับให้ Input ค้นหายืดเต็มหน้าจอในมือถือ (Option) */
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* ซ่อน Header ของตาราง */
    .dataTable thead {
        display: none;
    }

    /* เปลี่ยนแต่ละแถว (tr) ให้เป็นแผ่น Card */
    .dataTable tbody tr {
        display: block;
        /* border: 1px solid #eef2f7; */
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        /* background: #fff; */
    }

    /* จัดการแต่ละคอลัมน์ (td) ให้เรียงเป็นบรรทัด */
    .dataTable tbody td {
        display: flex;
        /*justify-content: space-around; /* space-between*/
        align-items: center;
        border: none;
        padding: 5px 10px;
        text-align: left;
    }

    /* เติมหัวข้อคอลัมน์ไว้ด้านหน้า (Label) */
    .dataTable tbody td::before {
        content: attr(data-label); /* ดึงชื่อหัวข้อมาแสดง */
        font-weight: bold;
        color: #6c757d;
        margin-right: 10px;
        font-size: 0.85rem;
    }

    /* ปรับคอลัมน์ที่ต้องการให้กว้างเต็ม หรือแสดงผลพิเศษ */
    .dataTable tbody td:first-child { /* Checkbox */
        /* border-bottom: 1px solid #f1f3fa; */
        margin-bottom: 5px;
        padding-bottom: 10px;
    }

    .dataTable tbody td:last-child { /* ปุ่มจัดการ */
        justify-content: center;
        /* border-top: 1px solid #f1f3fa; */
        margin-top: 5px;
        padding-top: 10px;
    }
}

/* ==============================================
   TEXT COLOR CLASSES (ดึงสีจาก :root variables)
   ============================================== */
.text-red    { color: var(--bs-red)    !important; }
.text-orange { color: var(--bs-orange) !important; }
.text-yellow { color: var(--bs-yellow) !important; }
.text-green  { color: var(--bs-green)  !important; }
.text-teal   { color: var(--bs-teal)   !important; }
.text-cyan   { color: var(--bs-cyan)   !important; }
.text-blue   { color: var(--bs-blue)   !important; }
.text-indigo { color: var(--bs-indigo) !important; }
.text-purple { color: var(--bs-purple) !important; }
.text-pink   { color: var(--bs-pink)   !important; }
.text-gray   { color: var(--bs-gray)   !important; }


/* ==============================================
   CUSTOM COLOR SYSTEM — btn-*, btn-outline-*,
   btn-soft-*, bg-*, badge-*-lighten,
   badge-outline-*  (สีจาก :root ที่กำหนดเอง)
   ============================================== */

/* ─────────────────────────────────────────────
   1. SOLID BUTTONS  (.btn-red, .btn-orange, …)
   ───────────────────────────────────────────── */
.btn-red {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-red);
    --ct-btn-border-color: var(--bs-red);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #c91200;
    --ct-btn-hover-border-color: #c91200;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #c91200;
    --ct-btn-active-border-color: #c91200;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-red);
    --ct-btn-disabled-border-color: var(--bs-red);
}
.btn-orange {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-orange);
    --ct-btn-border-color: var(--bs-orange);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #d95800;
    --ct-btn-hover-border-color: #d95800;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #d95800;
    --ct-btn-active-border-color: #d95800;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-orange);
    --ct-btn-disabled-border-color: var(--bs-orange);
}
.btn-yellow {
    --ct-btn-color: #212529;
    --ct-btn-bg: var(--bs-yellow);
    --ct-btn-border-color: var(--bs-yellow);
    --ct-btn-hover-color: #212529;
    --ct-btn-hover-bg: #d48c00;
    --ct-btn-hover-border-color: #d48c00;
    --ct-btn-active-color: #212529;
    --ct-btn-active-bg: #d48c00;
    --ct-btn-active-border-color: #d48c00;
    --ct-btn-disabled-color: #212529;
    --ct-btn-disabled-bg: var(--bs-yellow);
    --ct-btn-disabled-border-color: var(--bs-yellow);
}
.btn-green {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-green);
    --ct-btn-border-color: var(--bs-green);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #00945a;
    --ct-btn-hover-border-color: #00945a;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #00945a;
    --ct-btn-active-border-color: #00945a;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-green);
    --ct-btn-disabled-border-color: var(--bs-green);
}
.btn-teal {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-teal);
    --ct-btn-border-color: var(--bs-teal);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #009e7e;
    --ct-btn-hover-border-color: #009e7e;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #009e7e;
    --ct-btn-active-border-color: #009e7e;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-teal);
    --ct-btn-disabled-border-color: var(--bs-teal);
}
.btn-cyan {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-cyan);
    --ct-btn-border-color: var(--bs-cyan);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #00b0b5;
    --ct-btn-hover-border-color: #00b0b5;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #00b0b5;
    --ct-btn-active-border-color: #00b0b5;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-cyan);
    --ct-btn-disabled-border-color: var(--bs-cyan);
}
.btn-blue {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-blue);
    --ct-btn-border-color: var(--bs-blue);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #0053cc;
    --ct-btn-hover-border-color: #0053cc;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #0053cc;
    --ct-btn-active-border-color: #0053cc;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-blue);
    --ct-btn-disabled-border-color: var(--bs-blue);
}
.btn-indigo {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-indigo);
    --ct-btn-border-color: var(--bs-indigo);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #4a00c4;
    --ct-btn-hover-border-color: #4a00c4;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #4a00c4;
    --ct-btn-active-border-color: #4a00c4;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-indigo);
    --ct-btn-disabled-border-color: var(--bs-indigo);
}
.btn-purple {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-purple);
    --ct-btn-border-color: var(--bs-purple);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #5800a8;
    --ct-btn-hover-border-color: #5800a8;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #5800a8;
    --ct-btn-active-border-color: #5800a8;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-purple);
    --ct-btn-disabled-border-color: var(--bs-purple);
}
.btn-pink {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-pink);
    --ct-btn-border-color: var(--bs-pink);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #c2004c;
    --ct-btn-hover-border-color: #c2004c;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #c2004c;
    --ct-btn-active-border-color: #c2004c;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-pink);
    --ct-btn-disabled-border-color: var(--bs-pink);
}
.btn-gray {
    --ct-btn-color: #fff;
    --ct-btn-bg: var(--bs-gray);
    --ct-btn-border-color: var(--bs-gray);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #555d65;
    --ct-btn-hover-border-color: #555d65;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #555d65;
    --ct-btn-active-border-color: #555d65;
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: var(--bs-gray);
    --ct-btn-disabled-border-color: var(--bs-gray);
}

/* ─────────────────────────────────────────────
   2. OUTLINE BUTTONS  (.btn-outline-red, …)
   ───────────────────────────────────────────── */
.btn-outline-red {
    --ct-btn-color: var(--bs-red);
    --ct-btn-border-color: var(--bs-red);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-red);
    --ct-btn-hover-border-color: var(--bs-red);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-red);
    --ct-btn-active-border-color: var(--bs-red);
    --ct-btn-disabled-color: var(--bs-red);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-red);
    --ct-gradient: none;
}
.btn-outline-orange {
    --ct-btn-color: var(--bs-orange);
    --ct-btn-border-color: var(--bs-orange);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-orange);
    --ct-btn-hover-border-color: var(--bs-orange);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-orange);
    --ct-btn-active-border-color: var(--bs-orange);
    --ct-btn-disabled-color: var(--bs-orange);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-orange);
    --ct-gradient: none;
}
.btn-outline-yellow {
    --ct-btn-color: var(--bs-yellow);
    --ct-btn-border-color: var(--bs-yellow);
    --ct-btn-hover-color: #212529;
    --ct-btn-hover-bg: var(--bs-yellow);
    --ct-btn-hover-border-color: var(--bs-yellow);
    --ct-btn-active-color: #212529;
    --ct-btn-active-bg: var(--bs-yellow);
    --ct-btn-active-border-color: var(--bs-yellow);
    --ct-btn-disabled-color: var(--bs-yellow);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-yellow);
    --ct-gradient: none;
}
.btn-outline-green {
    --ct-btn-color: var(--bs-green);
    --ct-btn-border-color: var(--bs-green);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-green);
    --ct-btn-hover-border-color: var(--bs-green);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-green);
    --ct-btn-active-border-color: var(--bs-green);
    --ct-btn-disabled-color: var(--bs-green);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-green);
    --ct-gradient: none;
}
.btn-outline-teal {
    --ct-btn-color: var(--bs-teal);
    --ct-btn-border-color: var(--bs-teal);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-teal);
    --ct-btn-hover-border-color: var(--bs-teal);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-teal);
    --ct-btn-active-border-color: var(--bs-teal);
    --ct-btn-disabled-color: var(--bs-teal);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-teal);
    --ct-gradient: none;
}
.btn-outline-cyan {
    --ct-btn-color: var(--bs-cyan);
    --ct-btn-border-color: var(--bs-cyan);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-cyan);
    --ct-btn-hover-border-color: var(--bs-cyan);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-cyan);
    --ct-btn-active-border-color: var(--bs-cyan);
    --ct-btn-disabled-color: var(--bs-cyan);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-cyan);
    --ct-gradient: none;
}
.btn-outline-blue {
    --ct-btn-color: var(--bs-blue);
    --ct-btn-border-color: var(--bs-blue);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-blue);
    --ct-btn-hover-border-color: var(--bs-blue);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-blue);
    --ct-btn-active-border-color: var(--bs-blue);
    --ct-btn-disabled-color: var(--bs-blue);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-blue);
    --ct-gradient: none;
}
.btn-outline-indigo {
    --ct-btn-color: var(--bs-indigo);
    --ct-btn-border-color: var(--bs-indigo);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-indigo);
    --ct-btn-hover-border-color: var(--bs-indigo);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-indigo);
    --ct-btn-active-border-color: var(--bs-indigo);
    --ct-btn-disabled-color: var(--bs-indigo);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-indigo);
    --ct-gradient: none;
}
.btn-outline-purple {
    --ct-btn-color: var(--bs-purple);
    --ct-btn-border-color: var(--bs-purple);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-purple);
    --ct-btn-hover-border-color: var(--bs-purple);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-purple);
    --ct-btn-active-border-color: var(--bs-purple);
    --ct-btn-disabled-color: var(--bs-purple);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-purple);
    --ct-gradient: none;
}
.btn-outline-pink {
    --ct-btn-color: var(--bs-pink);
    --ct-btn-border-color: var(--bs-pink);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-pink);
    --ct-btn-hover-border-color: var(--bs-pink);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-pink);
    --ct-btn-active-border-color: var(--bs-pink);
    --ct-btn-disabled-color: var(--bs-pink);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-pink);
    --ct-gradient: none;
}
.btn-outline-gray {
    --ct-btn-color: var(--bs-gray);
    --ct-btn-border-color: var(--bs-gray);
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-gray);
    --ct-btn-hover-border-color: var(--bs-gray);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-gray);
    --ct-btn-active-border-color: var(--bs-gray);
    --ct-btn-disabled-color: var(--bs-gray);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--bs-gray);
    --ct-gradient: none;
}

/* ─────────────────────────────────────────────
   3. SOFT BUTTONS  (.btn-soft-red, …)
   ───────────────────────────────────────────── */
.btn-soft-red {
    --ct-btn-color: var(--bs-red);
    --ct-btn-bg: var(--bs-red-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-red);
    --ct-btn-hover-border-color: var(--bs-red);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-red);
    --ct-btn-active-border-color: var(--bs-red);
    --ct-btn-disabled-color: var(--bs-red);
    --ct-btn-disabled-bg: var(--bs-red-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-orange {
    --ct-btn-color: var(--bs-orange);
    --ct-btn-bg: var(--bs-orange-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-orange);
    --ct-btn-hover-border-color: var(--bs-orange);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-orange);
    --ct-btn-active-border-color: var(--bs-orange);
    --ct-btn-disabled-color: var(--bs-orange);
    --ct-btn-disabled-bg: var(--bs-orange-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-yellow {
    --ct-btn-color: var(--bs-yellow);
    --ct-btn-bg: var(--bs-yellow-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #212529;
    --ct-btn-hover-bg: var(--bs-yellow);
    --ct-btn-hover-border-color: var(--bs-yellow);
    --ct-btn-active-color: #212529;
    --ct-btn-active-bg: var(--bs-yellow);
    --ct-btn-active-border-color: var(--bs-yellow);
    --ct-btn-disabled-color: var(--bs-yellow);
    --ct-btn-disabled-bg: var(--bs-yellow-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-green {
    --ct-btn-color: var(--bs-green);
    --ct-btn-bg: var(--bs-green-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-green);
    --ct-btn-hover-border-color: var(--bs-green);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-green);
    --ct-btn-active-border-color: var(--bs-green);
    --ct-btn-disabled-color: var(--bs-green);
    --ct-btn-disabled-bg: var(--bs-green-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-teal {
    --ct-btn-color: var(--bs-teal);
    --ct-btn-bg: var(--bs-teal-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-teal);
    --ct-btn-hover-border-color: var(--bs-teal);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-teal);
    --ct-btn-active-border-color: var(--bs-teal);
    --ct-btn-disabled-color: var(--bs-teal);
    --ct-btn-disabled-bg: var(--bs-teal-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-cyan {
    --ct-btn-color: var(--bs-cyan);
    --ct-btn-bg: var(--bs-cyan-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-cyan);
    --ct-btn-hover-border-color: var(--bs-cyan);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-cyan);
    --ct-btn-active-border-color: var(--bs-cyan);
    --ct-btn-disabled-color: var(--bs-cyan);
    --ct-btn-disabled-bg: var(--bs-cyan-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-blue {
    --ct-btn-color: var(--bs-blue);
    --ct-btn-bg: var(--bs-blue-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-blue);
    --ct-btn-hover-border-color: var(--bs-blue);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-blue);
    --ct-btn-active-border-color: var(--bs-blue);
    --ct-btn-disabled-color: var(--bs-blue);
    --ct-btn-disabled-bg: var(--bs-blue-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-indigo {
    --ct-btn-color: var(--bs-indigo);
    --ct-btn-bg: var(--bs-indigo-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-indigo);
    --ct-btn-hover-border-color: var(--bs-indigo);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-indigo);
    --ct-btn-active-border-color: var(--bs-indigo);
    --ct-btn-disabled-color: var(--bs-indigo);
    --ct-btn-disabled-bg: var(--bs-indigo-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-purple {
    --ct-btn-color: var(--bs-purple);
    --ct-btn-bg: var(--bs-purple-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-purple);
    --ct-btn-hover-border-color: var(--bs-purple);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-purple);
    --ct-btn-active-border-color: var(--bs-purple);
    --ct-btn-disabled-color: var(--bs-purple);
    --ct-btn-disabled-bg: var(--bs-purple-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-pink {
    --ct-btn-color: var(--bs-pink);
    --ct-btn-bg: var(--bs-pink-soft);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-pink);
    --ct-btn-hover-border-color: var(--bs-pink);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-pink);
    --ct-btn-active-border-color: var(--bs-pink);
    --ct-btn-disabled-color: var(--bs-pink);
    --ct-btn-disabled-bg: var(--bs-pink-soft);
    --ct-btn-disabled-border-color: transparent;
}
.btn-soft-gray {
    --ct-btn-color: var(--bs-gray);
    --ct-btn-bg: var(--bs-gray-200);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: var(--bs-gray);
    --ct-btn-hover-border-color: var(--bs-gray);
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: var(--bs-gray);
    --ct-btn-active-border-color: var(--bs-gray);
    --ct-btn-disabled-color: var(--bs-gray);
    --ct-btn-disabled-bg: var(--bs-gray-200);
    --ct-btn-disabled-border-color: transparent;
}

/* disabled state ของปุ่มทุก variant ข้างต้น */
.btn-red:disabled, .btn-red.disabled,
.btn-orange:disabled, .btn-orange.disabled,
.btn-yellow:disabled, .btn-yellow.disabled,
.btn-green:disabled, .btn-green.disabled,
.btn-teal:disabled, .btn-teal.disabled,
.btn-cyan:disabled, .btn-cyan.disabled,
.btn-blue:disabled, .btn-blue.disabled,
.btn-indigo:disabled, .btn-indigo.disabled,
.btn-purple:disabled, .btn-purple.disabled,
.btn-pink:disabled, .btn-pink.disabled,
.btn-gray:disabled, .btn-gray.disabled,
.btn-outline-red:disabled, .btn-outline-red.disabled,
.btn-outline-orange:disabled, .btn-outline-orange.disabled,
.btn-outline-yellow:disabled, .btn-outline-yellow.disabled,
.btn-outline-green:disabled, .btn-outline-green.disabled,
.btn-outline-teal:disabled, .btn-outline-teal.disabled,
.btn-outline-cyan:disabled, .btn-outline-cyan.disabled,
.btn-outline-blue:disabled, .btn-outline-blue.disabled,
.btn-outline-indigo:disabled, .btn-outline-indigo.disabled,
.btn-outline-purple:disabled, .btn-outline-purple.disabled,
.btn-outline-pink:disabled, .btn-outline-pink.disabled,
.btn-outline-gray:disabled, .btn-outline-gray.disabled,
.btn-soft-red:disabled, .btn-soft-red.disabled,
.btn-soft-orange:disabled, .btn-soft-orange.disabled,
.btn-soft-yellow:disabled, .btn-soft-yellow.disabled,
.btn-soft-green:disabled, .btn-soft-green.disabled,
.btn-soft-teal:disabled, .btn-soft-teal.disabled,
.btn-soft-cyan:disabled, .btn-soft-cyan.disabled,
.btn-soft-blue:disabled, .btn-soft-blue.disabled,
.btn-soft-indigo:disabled, .btn-soft-indigo.disabled,
.btn-soft-purple:disabled, .btn-soft-purple.disabled,
.btn-soft-pink:disabled, .btn-soft-pink.disabled,
.btn-soft-gray:disabled, .btn-soft-gray.disabled {
    opacity: 0.65;
    pointer-events: none;
}


/* ==============================================
   BADGES
   ============================================== */

/* ─────────────────────────────────────────────
   4. SOLID BADGE BACKGROUND  (.bg-red, …)
      ใช้งาน: <span class="badge bg-red">…</span>
   ───────────────────────────────────────────── */
.bg-red    { --ct-badge-color: #fff; background-color: var(--bs-red)    !important; color: #fff; }
.bg-orange { --ct-badge-color: #fff; background-color: var(--bs-orange) !important; color: #fff; }
.bg-yellow { --ct-badge-color: #212529; background-color: var(--bs-yellow) !important; color: #212529; }
.bg-green  { --ct-badge-color: #fff; background-color: var(--bs-green)  !important; color: #fff; }
.bg-teal   { --ct-badge-color: #fff; background-color: var(--bs-teal)   !important; color: #fff; }
.bg-cyan   { --ct-badge-color: #fff; background-color: var(--bs-cyan)   !important; color: #fff; }
.bg-blue   { --ct-badge-color: #fff; background-color: var(--bs-blue)   !important; color: #fff; }
.bg-indigo { --ct-badge-color: #fff; background-color: var(--bs-indigo) !important; color: #fff; }
.bg-purple { --ct-badge-color: #fff; background-color: var(--bs-purple) !important; color: #fff; }
.bg-pink   { --ct-badge-color: #fff; background-color: var(--bs-pink)   !important; color: #fff; }
.bg-gray   { --ct-badge-color: #fff; background-color: var(--bs-gray)   !important; color: #fff; }

/* ─────────────────────────────────────────────
   5. LIGHTEN BADGE  (.badge-red-lighten, …)
      ใช้งาน: <span class="badge badge-red-lighten">…</span>
   ───────────────────────────────────────────── */
.badge-red-lighten    { --ct-badge-color: var(--bs-red);    background-color: var(--bs-red-soft);    color: var(--bs-red); }
.badge-orange-lighten { --ct-badge-color: var(--bs-orange); background-color: var(--bs-orange-soft); color: var(--bs-orange); }
.badge-yellow-lighten { --ct-badge-color: var(--bs-yellow); background-color: var(--bs-yellow-soft); color: var(--bs-yellow); }
.badge-green-lighten  { --ct-badge-color: var(--bs-green);  background-color: var(--bs-green-soft);  color: var(--bs-green); }
.badge-teal-lighten   { --ct-badge-color: var(--bs-teal);   background-color: var(--bs-teal-soft);   color: var(--bs-teal); }
.badge-cyan-lighten   { --ct-badge-color: var(--bs-cyan);   background-color: var(--bs-cyan-soft);   color: var(--bs-cyan); }
.badge-blue-lighten   { --ct-badge-color: var(--bs-blue);   background-color: var(--bs-blue-soft);   color: var(--bs-blue); }
.badge-indigo-lighten { --ct-badge-color: var(--bs-indigo); background-color: var(--bs-indigo-soft); color: var(--bs-indigo); }
.badge-purple-lighten { --ct-badge-color: var(--bs-purple); background-color: var(--bs-purple-soft); color: var(--bs-purple); }
.badge-pink-lighten   { --ct-badge-color: var(--bs-pink);   background-color: var(--bs-pink-soft);   color: var(--bs-pink); }
.badge-gray-lighten   { --ct-badge-color: var(--bs-gray);   background-color: var(--bs-gray-200);    color: var(--bs-gray); }

.badge-red-lighten[href],    .badge-red-lighten[href]:is(:hover,:focus)    { color: var(--bs-red);    text-decoration: none; background-color: var(--bs-red-soft); }
.badge-orange-lighten[href], .badge-orange-lighten[href]:is(:hover,:focus) { color: var(--bs-orange); text-decoration: none; background-color: var(--bs-orange-soft); }
.badge-yellow-lighten[href], .badge-yellow-lighten[href]:is(:hover,:focus) { color: var(--bs-yellow); text-decoration: none; background-color: var(--bs-yellow-soft); }
.badge-green-lighten[href],  .badge-green-lighten[href]:is(:hover,:focus)  { color: var(--bs-green);  text-decoration: none; background-color: var(--bs-green-soft); }
.badge-teal-lighten[href],   .badge-teal-lighten[href]:is(:hover,:focus)   { color: var(--bs-teal);   text-decoration: none; background-color: var(--bs-teal-soft); }
.badge-cyan-lighten[href],   .badge-cyan-lighten[href]:is(:hover,:focus)   { color: var(--bs-cyan);   text-decoration: none; background-color: var(--bs-cyan-soft); }
.badge-blue-lighten[href],   .badge-blue-lighten[href]:is(:hover,:focus)   { color: var(--bs-blue);   text-decoration: none; background-color: var(--bs-blue-soft); }
.badge-indigo-lighten[href], .badge-indigo-lighten[href]:is(:hover,:focus) { color: var(--bs-indigo); text-decoration: none; background-color: var(--bs-indigo-soft); }
.badge-purple-lighten[href], .badge-purple-lighten[href]:is(:hover,:focus) { color: var(--bs-purple); text-decoration: none; background-color: var(--bs-purple-soft); }
.badge-pink-lighten[href],   .badge-pink-lighten[href]:is(:hover,:focus)   { color: var(--bs-pink);   text-decoration: none; background-color: var(--bs-pink-soft); }
.badge-gray-lighten[href],   .badge-gray-lighten[href]:is(:hover,:focus)   { color: var(--bs-gray);   text-decoration: none; background-color: var(--bs-gray-200); }

/* ─────────────────────────────────────────────
   6. OUTLINE BADGE  (.badge-outline-red, …)
      ใช้งาน: <span class="badge badge-outline-red">…</span>
   ───────────────────────────────────────────── */
.badge-outline-red    { --ct-badge-color: var(--bs-red);    border: 1px solid var(--bs-red);    background-color: transparent; color: var(--bs-red); }
.badge-outline-orange { --ct-badge-color: var(--bs-orange); border: 1px solid var(--bs-orange); background-color: transparent; color: var(--bs-orange); }
.badge-outline-yellow { --ct-badge-color: var(--bs-yellow); border: 1px solid var(--bs-yellow); background-color: transparent; color: var(--bs-yellow); }
.badge-outline-green  { --ct-badge-color: var(--bs-green);  border: 1px solid var(--bs-green);  background-color: transparent; color: var(--bs-green); }
.badge-outline-teal   { --ct-badge-color: var(--bs-teal);   border: 1px solid var(--bs-teal);   background-color: transparent; color: var(--bs-teal); }
.badge-outline-cyan   { --ct-badge-color: var(--bs-cyan);   border: 1px solid var(--bs-cyan);   background-color: transparent; color: var(--bs-cyan); }
.badge-outline-blue   { --ct-badge-color: var(--bs-blue);   border: 1px solid var(--bs-blue);   background-color: transparent; color: var(--bs-blue); }
.badge-outline-indigo { --ct-badge-color: var(--bs-indigo); border: 1px solid var(--bs-indigo); background-color: transparent; color: var(--bs-indigo); }
.badge-outline-purple { --ct-badge-color: var(--bs-purple); border: 1px solid var(--bs-purple); background-color: transparent; color: var(--bs-purple); }
.badge-outline-pink   { --ct-badge-color: var(--bs-pink);   border: 1px solid var(--bs-pink);   background-color: transparent; color: var(--bs-pink); }
.badge-outline-gray   { --ct-badge-color: var(--bs-gray);   border: 1px solid var(--bs-gray);   background-color: transparent; color: var(--bs-gray); }

.badge-outline-red[href],    .badge-outline-red[href]:is(:hover,:focus)    { color: var(--bs-red);    text-decoration: none; background-color: var(--bs-red-soft); }
.badge-outline-orange[href], .badge-outline-orange[href]:is(:hover,:focus) { color: var(--bs-orange); text-decoration: none; background-color: var(--bs-orange-soft); }
.badge-outline-yellow[href], .badge-outline-yellow[href]:is(:hover,:focus) { color: var(--bs-yellow); text-decoration: none; background-color: var(--bs-yellow-soft); }
.badge-outline-green[href],  .badge-outline-green[href]:is(:hover,:focus)  { color: var(--bs-green);  text-decoration: none; background-color: var(--bs-green-soft); }
.badge-outline-teal[href],   .badge-outline-teal[href]:is(:hover,:focus)   { color: var(--bs-teal);   text-decoration: none; background-color: var(--bs-teal-soft); }
.badge-outline-cyan[href],   .badge-outline-cyan[href]:is(:hover,:focus)   { color: var(--bs-cyan);   text-decoration: none; background-color: var(--bs-cyan-soft); }
.badge-outline-blue[href],   .badge-outline-blue[href]:is(:hover,:focus)   { color: var(--bs-blue);   text-decoration: none; background-color: var(--bs-blue-soft); }
.badge-outline-indigo[href], .badge-outline-indigo[href]:is(:hover,:focus) { color: var(--bs-indigo); text-decoration: none; background-color: var(--bs-indigo-soft); }
.badge-outline-purple[href], .badge-outline-purple[href]:is(:hover,:focus) { color: var(--bs-purple); text-decoration: none; background-color: var(--bs-purple-soft); }
.badge-outline-pink[href],   .badge-outline-pink[href]:is(:hover,:focus)   { color: var(--bs-pink);   text-decoration: none; background-color: var(--bs-pink-soft); }
.badge-outline-gray[href],   .badge-outline-gray[href]:is(:hover,:focus)   { color: var(--bs-gray);   text-decoration: none; background-color: var(--bs-gray-200); }