: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;
}*/

.img-100{
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

/* ==============================================
   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); }