/*
  Bootstrap 5.3 - Extended Color Shades (bs-colors-extended.css)
  เพิ่มเฉดสี 100-900 (อ่อน -> เข้ม) ให้กับสีหลักของ Bootstrap
  วิธีใช้: แนบไฟล์นี้ต่อจาก bootstrap.min.css
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="bs-colors-extended.css">
*/

:root {
  /* primary shades */
  --bs-primary-100: #e7f0ff;
  --bs-primary-200: #b6d4fe;
  --bs-primary-300: #86b6fe;
  --bs-primary-400: #4a92fe;
  --bs-primary-500: #0d6efd;
  --bs-primary-600: #0a58ca;
  --bs-primary-700: #084298;
  --bs-primary-800: #052c65;
  --bs-primary-900: #031633;

  /* secondary shades */
  --bs-secondary-100: #f0f1f2;
  --bs-secondary-200: #d3d6d8;
  --bs-secondary-300: #b6babe;
  --bs-secondary-400: #91989e;
  --bs-secondary-500: #6c757d;
  --bs-secondary-600: #565e64;
  --bs-secondary-700: #41464b;
  --bs-secondary-800: #2b2f32;
  --bs-secondary-900: #161719;

  /* success shades */
  --bs-success-100: #e8f3ee;
  --bs-success-200: #badbcc;
  --bs-success-300: #8cc3aa;
  --bs-success-400: #52a57f;
  --bs-success-500: #198754;
  --bs-success-600: #146c43;
  --bs-success-700: #0f5132;
  --bs-success-800: #0a3622;
  --bs-success-900: #051b11;

  /* danger shades */
  --bs-danger-100: #fcebec;
  --bs-danger-200: #f4c2c7;
  --bs-danger-300: #ee9aa2;
  --bs-danger-400: #e56874;
  --bs-danger-500: #dc3545;
  --bs-danger-600: #b02a37;
  --bs-danger-700: #842029;
  --bs-danger-800: #58151c;
  --bs-danger-900: #2c0b0e;

  /* warning shades */
  --bs-warning-100: #fff9e6;
  --bs-warning-200: #ffecb5;
  --bs-warning-300: #ffe083;
  --bs-warning-400: #ffd045;
  --bs-warning-500: #ffc107;
  --bs-warning-600: #cc9a06;
  --bs-warning-700: #997404;
  --bs-warning-800: #664d03;
  --bs-warning-900: #332701;

  /* info shades */
  --bs-info-100: #e7fafe;
  --bs-info-200: #b6effa;
  --bs-info-300: #86e4f8;
  --bs-info-400: #4ad7f4;
  --bs-info-500: #0dcaf0;
  --bs-info-600: #0aa2c0;
  --bs-info-700: #087990;
  --bs-info-800: #055160;
  --bs-info-900: #032830;

  /* dark shades */
  --bs-dark-100: #e9e9ea;
  --bs-dark-200: #bcbebf;
  --bs-dark-300: #909294;
  --bs-dark-400: #585c5e;
  --bs-dark-500: #212529;
  --bs-dark-600: #1a1e21;
  --bs-dark-700: #141619;
  --bs-dark-800: #0d0f10;
  --bs-dark-900: #070708;

}

/* ===== Background utilities (bg-{color}-{level}) ===== */
.bg-primary-100 { background-color: var(--bs-primary-100) !important; }
.bg-primary-200 { background-color: var(--bs-primary-200) !important; }
.bg-primary-300 { background-color: var(--bs-primary-300) !important; }
.bg-primary-400 { background-color: var(--bs-primary-400) !important; }
.bg-primary-500 { background-color: var(--bs-primary-500) !important; }
.bg-primary-600 { background-color: var(--bs-primary-600) !important; }
.bg-primary-700 { background-color: var(--bs-primary-700) !important; }
.bg-primary-800 { background-color: var(--bs-primary-800) !important; }
.bg-primary-900 { background-color: var(--bs-primary-900) !important; }

.bg-secondary-100 { background-color: var(--bs-secondary-100) !important; }
.bg-secondary-200 { background-color: var(--bs-secondary-200) !important; }
.bg-secondary-300 { background-color: var(--bs-secondary-300) !important; }
.bg-secondary-400 { background-color: var(--bs-secondary-400) !important; }
.bg-secondary-500 { background-color: var(--bs-secondary-500) !important; }
.bg-secondary-600 { background-color: var(--bs-secondary-600) !important; }
.bg-secondary-700 { background-color: var(--bs-secondary-700) !important; }
.bg-secondary-800 { background-color: var(--bs-secondary-800) !important; }
.bg-secondary-900 { background-color: var(--bs-secondary-900) !important; }

.bg-success-100 { background-color: var(--bs-success-100) !important; }
.bg-success-200 { background-color: var(--bs-success-200) !important; }
.bg-success-300 { background-color: var(--bs-success-300) !important; }
.bg-success-400 { background-color: var(--bs-success-400) !important; }
.bg-success-500 { background-color: var(--bs-success-500) !important; }
.bg-success-600 { background-color: var(--bs-success-600) !important; }
.bg-success-700 { background-color: var(--bs-success-700) !important; }
.bg-success-800 { background-color: var(--bs-success-800) !important; }
.bg-success-900 { background-color: var(--bs-success-900) !important; }

.bg-danger-100 { background-color: var(--bs-danger-100) !important; }
.bg-danger-200 { background-color: var(--bs-danger-200) !important; }
.bg-danger-300 { background-color: var(--bs-danger-300) !important; }
.bg-danger-400 { background-color: var(--bs-danger-400) !important; }
.bg-danger-500 { background-color: var(--bs-danger-500) !important; }
.bg-danger-600 { background-color: var(--bs-danger-600) !important; }
.bg-danger-700 { background-color: var(--bs-danger-700) !important; }
.bg-danger-800 { background-color: var(--bs-danger-800) !important; }
.bg-danger-900 { background-color: var(--bs-danger-900) !important; }

.bg-warning-100 { background-color: var(--bs-warning-100) !important; }
.bg-warning-200 { background-color: var(--bs-warning-200) !important; }
.bg-warning-300 { background-color: var(--bs-warning-300) !important; }
.bg-warning-400 { background-color: var(--bs-warning-400) !important; }
.bg-warning-500 { background-color: var(--bs-warning-500) !important; }
.bg-warning-600 { background-color: var(--bs-warning-600) !important; }
.bg-warning-700 { background-color: var(--bs-warning-700) !important; }
.bg-warning-800 { background-color: var(--bs-warning-800) !important; }
.bg-warning-900 { background-color: var(--bs-warning-900) !important; }

.bg-info-100 { background-color: var(--bs-info-100) !important; }
.bg-info-200 { background-color: var(--bs-info-200) !important; }
.bg-info-300 { background-color: var(--bs-info-300) !important; }
.bg-info-400 { background-color: var(--bs-info-400) !important; }
.bg-info-500 { background-color: var(--bs-info-500) !important; }
.bg-info-600 { background-color: var(--bs-info-600) !important; }
.bg-info-700 { background-color: var(--bs-info-700) !important; }
.bg-info-800 { background-color: var(--bs-info-800) !important; }
.bg-info-900 { background-color: var(--bs-info-900) !important; }

.bg-dark-100 { background-color: var(--bs-dark-100) !important; }
.bg-dark-200 { background-color: var(--bs-dark-200) !important; }
.bg-dark-300 { background-color: var(--bs-dark-300) !important; }
.bg-dark-400 { background-color: var(--bs-dark-400) !important; }
.bg-dark-500 { background-color: var(--bs-dark-500) !important; }
.bg-dark-600 { background-color: var(--bs-dark-600) !important; }
.bg-dark-700 { background-color: var(--bs-dark-700) !important; }
.bg-dark-800 { background-color: var(--bs-dark-800) !important; }
.bg-dark-900 { background-color: var(--bs-dark-900) !important; }

/* ===== Text color utilities (text-{color}-{level}) ===== */
.text-primary-100 { color: var(--bs-primary-100) !important; }
.text-primary-200 { color: var(--bs-primary-200) !important; }
.text-primary-300 { color: var(--bs-primary-300) !important; }
.text-primary-400 { color: var(--bs-primary-400) !important; }
.text-primary-500 { color: var(--bs-primary-500) !important; }
.text-primary-600 { color: var(--bs-primary-600) !important; }
.text-primary-700 { color: var(--bs-primary-700) !important; }
.text-primary-800 { color: var(--bs-primary-800) !important; }
.text-primary-900 { color: var(--bs-primary-900) !important; }

.text-secondary-100 { color: var(--bs-secondary-100) !important; }
.text-secondary-200 { color: var(--bs-secondary-200) !important; }
.text-secondary-300 { color: var(--bs-secondary-300) !important; }
.text-secondary-400 { color: var(--bs-secondary-400) !important; }
.text-secondary-500 { color: var(--bs-secondary-500) !important; }
.text-secondary-600 { color: var(--bs-secondary-600) !important; }
.text-secondary-700 { color: var(--bs-secondary-700) !important; }
.text-secondary-800 { color: var(--bs-secondary-800) !important; }
.text-secondary-900 { color: var(--bs-secondary-900) !important; }

.text-success-100 { color: var(--bs-success-100) !important; }
.text-success-200 { color: var(--bs-success-200) !important; }
.text-success-300 { color: var(--bs-success-300) !important; }
.text-success-400 { color: var(--bs-success-400) !important; }
.text-success-500 { color: var(--bs-success-500) !important; }
.text-success-600 { color: var(--bs-success-600) !important; }
.text-success-700 { color: var(--bs-success-700) !important; }
.text-success-800 { color: var(--bs-success-800) !important; }
.text-success-900 { color: var(--bs-success-900) !important; }

.text-danger-100 { color: var(--bs-danger-100) !important; }
.text-danger-200 { color: var(--bs-danger-200) !important; }
.text-danger-300 { color: var(--bs-danger-300) !important; }
.text-danger-400 { color: var(--bs-danger-400) !important; }
.text-danger-500 { color: var(--bs-danger-500) !important; }
.text-danger-600 { color: var(--bs-danger-600) !important; }
.text-danger-700 { color: var(--bs-danger-700) !important; }
.text-danger-800 { color: var(--bs-danger-800) !important; }
.text-danger-900 { color: var(--bs-danger-900) !important; }

.text-warning-100 { color: var(--bs-warning-100) !important; }
.text-warning-200 { color: var(--bs-warning-200) !important; }
.text-warning-300 { color: var(--bs-warning-300) !important; }
.text-warning-400 { color: var(--bs-warning-400) !important; }
.text-warning-500 { color: var(--bs-warning-500) !important; }
.text-warning-600 { color: var(--bs-warning-600) !important; }
.text-warning-700 { color: var(--bs-warning-700) !important; }
.text-warning-800 { color: var(--bs-warning-800) !important; }
.text-warning-900 { color: var(--bs-warning-900) !important; }

.text-info-100 { color: var(--bs-info-100) !important; }
.text-info-200 { color: var(--bs-info-200) !important; }
.text-info-300 { color: var(--bs-info-300) !important; }
.text-info-400 { color: var(--bs-info-400) !important; }
.text-info-500 { color: var(--bs-info-500) !important; }
.text-info-600 { color: var(--bs-info-600) !important; }
.text-info-700 { color: var(--bs-info-700) !important; }
.text-info-800 { color: var(--bs-info-800) !important; }
.text-info-900 { color: var(--bs-info-900) !important; }

.text-dark-100 { color: var(--bs-dark-100) !important; }
.text-dark-200 { color: var(--bs-dark-200) !important; }
.text-dark-300 { color: var(--bs-dark-300) !important; }
.text-dark-400 { color: var(--bs-dark-400) !important; }
.text-dark-500 { color: var(--bs-dark-500) !important; }
.text-dark-600 { color: var(--bs-dark-600) !important; }
.text-dark-700 { color: var(--bs-dark-700) !important; }
.text-dark-800 { color: var(--bs-dark-800) !important; }
.text-dark-900 { color: var(--bs-dark-900) !important; }

/* ===== Border color utilities (border-{color}-{level}) ===== */
.border-primary-100 { border-color: var(--bs-primary-100) !important; }
.border-primary-200 { border-color: var(--bs-primary-200) !important; }
.border-primary-300 { border-color: var(--bs-primary-300) !important; }
.border-primary-400 { border-color: var(--bs-primary-400) !important; }
.border-primary-500 { border-color: var(--bs-primary-500) !important; }
.border-primary-600 { border-color: var(--bs-primary-600) !important; }
.border-primary-700 { border-color: var(--bs-primary-700) !important; }
.border-primary-800 { border-color: var(--bs-primary-800) !important; }
.border-primary-900 { border-color: var(--bs-primary-900) !important; }

.border-secondary-100 { border-color: var(--bs-secondary-100) !important; }
.border-secondary-200 { border-color: var(--bs-secondary-200) !important; }
.border-secondary-300 { border-color: var(--bs-secondary-300) !important; }
.border-secondary-400 { border-color: var(--bs-secondary-400) !important; }
.border-secondary-500 { border-color: var(--bs-secondary-500) !important; }
.border-secondary-600 { border-color: var(--bs-secondary-600) !important; }
.border-secondary-700 { border-color: var(--bs-secondary-700) !important; }
.border-secondary-800 { border-color: var(--bs-secondary-800) !important; }
.border-secondary-900 { border-color: var(--bs-secondary-900) !important; }

.border-success-100 { border-color: var(--bs-success-100) !important; }
.border-success-200 { border-color: var(--bs-success-200) !important; }
.border-success-300 { border-color: var(--bs-success-300) !important; }
.border-success-400 { border-color: var(--bs-success-400) !important; }
.border-success-500 { border-color: var(--bs-success-500) !important; }
.border-success-600 { border-color: var(--bs-success-600) !important; }
.border-success-700 { border-color: var(--bs-success-700) !important; }
.border-success-800 { border-color: var(--bs-success-800) !important; }
.border-success-900 { border-color: var(--bs-success-900) !important; }

.border-danger-100 { border-color: var(--bs-danger-100) !important; }
.border-danger-200 { border-color: var(--bs-danger-200) !important; }
.border-danger-300 { border-color: var(--bs-danger-300) !important; }
.border-danger-400 { border-color: var(--bs-danger-400) !important; }
.border-danger-500 { border-color: var(--bs-danger-500) !important; }
.border-danger-600 { border-color: var(--bs-danger-600) !important; }
.border-danger-700 { border-color: var(--bs-danger-700) !important; }
.border-danger-800 { border-color: var(--bs-danger-800) !important; }
.border-danger-900 { border-color: var(--bs-danger-900) !important; }

.border-warning-100 { border-color: var(--bs-warning-100) !important; }
.border-warning-200 { border-color: var(--bs-warning-200) !important; }
.border-warning-300 { border-color: var(--bs-warning-300) !important; }
.border-warning-400 { border-color: var(--bs-warning-400) !important; }
.border-warning-500 { border-color: var(--bs-warning-500) !important; }
.border-warning-600 { border-color: var(--bs-warning-600) !important; }
.border-warning-700 { border-color: var(--bs-warning-700) !important; }
.border-warning-800 { border-color: var(--bs-warning-800) !important; }
.border-warning-900 { border-color: var(--bs-warning-900) !important; }

.border-info-100 { border-color: var(--bs-info-100) !important; }
.border-info-200 { border-color: var(--bs-info-200) !important; }
.border-info-300 { border-color: var(--bs-info-300) !important; }
.border-info-400 { border-color: var(--bs-info-400) !important; }
.border-info-500 { border-color: var(--bs-info-500) !important; }
.border-info-600 { border-color: var(--bs-info-600) !important; }
.border-info-700 { border-color: var(--bs-info-700) !important; }
.border-info-800 { border-color: var(--bs-info-800) !important; }
.border-info-900 { border-color: var(--bs-info-900) !important; }

.border-dark-100 { border-color: var(--bs-dark-100) !important; }
.border-dark-200 { border-color: var(--bs-dark-200) !important; }
.border-dark-300 { border-color: var(--bs-dark-300) !important; }
.border-dark-400 { border-color: var(--bs-dark-400) !important; }
.border-dark-500 { border-color: var(--bs-dark-500) !important; }
.border-dark-600 { border-color: var(--bs-dark-600) !important; }
.border-dark-700 { border-color: var(--bs-dark-700) !important; }
.border-dark-800 { border-color: var(--bs-dark-800) !important; }
.border-dark-900 { border-color: var(--bs-dark-900) !important; }

/* ===== Gradient utilities: ไล่สีอ่อน -> เข้ม ในกล่องเดียว (bg-gradient-{color}) ===== */
.bg-gradient-primary { background: linear-gradient(90deg, var(--bs-primary-200) 0%, var(--bs-primary-500) 50%, var(--bs-primary-800) 100%); }
.bg-gradient-primary-v { background: linear-gradient(180deg, var(--bs-primary-200) 0%, var(--bs-primary-500) 50%, var(--bs-primary-800) 100%); }
.bg-gradient-secondary { background: linear-gradient(90deg, var(--bs-secondary-200) 0%, var(--bs-secondary-500) 50%, var(--bs-secondary-800) 100%); }
.bg-gradient-secondary-v { background: linear-gradient(180deg, var(--bs-secondary-200) 0%, var(--bs-secondary-500) 50%, var(--bs-secondary-800) 100%); }
.bg-gradient-success { background: linear-gradient(90deg, var(--bs-success-200) 0%, var(--bs-success-500) 50%, var(--bs-success-800) 100%); }
.bg-gradient-success-v { background: linear-gradient(180deg, var(--bs-success-200) 0%, var(--bs-success-500) 50%, var(--bs-success-800) 100%); }
.bg-gradient-danger { background: linear-gradient(90deg, var(--bs-danger-200) 0%, var(--bs-danger-500) 50%, var(--bs-danger-800) 100%); }
.bg-gradient-danger-v { background: linear-gradient(180deg, var(--bs-danger-200) 0%, var(--bs-danger-500) 50%, var(--bs-danger-800) 100%); }
.bg-gradient-warning { background: linear-gradient(90deg, var(--bs-warning-200) 0%, var(--bs-warning-500) 50%, var(--bs-warning-800) 100%); }
.bg-gradient-warning-v { background: linear-gradient(180deg, var(--bs-warning-200) 0%, var(--bs-warning-500) 50%, var(--bs-warning-800) 100%); }
.bg-gradient-info { background: linear-gradient(90deg, var(--bs-info-200) 0%, var(--bs-info-500) 50%, var(--bs-info-800) 100%); }
.bg-gradient-info-v { background: linear-gradient(180deg, var(--bs-info-200) 0%, var(--bs-info-500) 50%, var(--bs-info-800) 100%); }
.bg-gradient-dark { background: linear-gradient(90deg, var(--bs-dark-200) 0%, var(--bs-dark-500) 50%, var(--bs-dark-800) 100%); }
.bg-gradient-dark-v { background: linear-gradient(180deg, var(--bs-dark-200) 0%, var(--bs-dark-500) 50%, var(--bs-dark-800) 100%); }

/*
  ส่วนเพิ่มเติม: สีใหม่ที่ไม่ได้อยู่ใน Bootstrap theme colors เดิม
  cyan, yellow, pink, purple, brown, orange
  แนบไฟล์นี้ต่อจาก bs-colors-extended.css (หรือรวมในไฟล์เดียวกัน)
*/

:root {
  /* cyan shades (base: #0dcaf0) */
  --bs-cyan-100: #e7fafe;
  --bs-cyan-200: #b6effa;
  --bs-cyan-300: #86e4f8;
  --bs-cyan-400: #4ad7f4;
  --bs-cyan-500: #0dcaf0;
  --bs-cyan-600: #0aa2c0;
  --bs-cyan-700: #087990;
  --bs-cyan-800: #055160;
  --bs-cyan-900: #032830;

  /* yellow shades (base: #ffc107) */
  --bs-yellow-100: #fff9e6;
  --bs-yellow-200: #ffecb5;
  --bs-yellow-300: #ffe083;
  --bs-yellow-400: #ffd045;
  --bs-yellow-500: #ffc107;
  --bs-yellow-600: #cc9a06;
  --bs-yellow-700: #997404;
  --bs-yellow-800: #664d03;
  --bs-yellow-900: #332701;

  /* pink shades (base: #d63384) */
  --bs-pink-100: #fbebf3;
  --bs-pink-200: #f3c2da;
  --bs-pink-300: #ea99c2;
  --bs-pink-400: #e066a3;
  --bs-pink-500: #d63384;
  --bs-pink-600: #ab296a;
  --bs-pink-700: #801f4f;
  --bs-pink-800: #561435;
  --bs-pink-900: #2b0a1a;

  /* purple shades (base: #6f42c1) */
  --bs-purple-100: #f1ecf9;
  --bs-purple-200: #d4c6ec;
  --bs-purple-300: #b7a0e0;
  --bs-purple-400: #9371d0;
  --bs-purple-500: #6f42c1;
  --bs-purple-600: #59359a;
  --bs-purple-700: #432874;
  --bs-purple-800: #2c1a4d;
  --bs-purple-900: #160d27;

  /* brown shades (base: #795548) */
  --bs-brown-100: #f2eeed;
  --bs-brown-200: #d7ccc8;
  --bs-brown-300: #bcaaa4;
  --bs-brown-400: #9a8076;
  --bs-brown-500: #795548;
  --bs-brown-600: #61443a;
  --bs-brown-700: #49332b;
  --bs-brown-800: #30221d;
  --bs-brown-900: #18110e;

  /* orange shades (base: #fd7e14) */
  --bs-orange-100: #fff2e8;
  --bs-orange-200: #fed8b8;
  --bs-orange-300: #febe8a;
  --bs-orange-400: #fe9e4f;
  --bs-orange-500: #fd7e14;
  --bs-orange-600: #ca6510;
  --bs-orange-700: #984c0c;
  --bs-orange-800: #653208;
  --bs-orange-900: #331904;

}

/* ===== Background utilities ===== */
.bg-cyan-100 { background-color: var(--bs-cyan-100) !important; }
.bg-cyan-200 { background-color: var(--bs-cyan-200) !important; }
.bg-cyan-300 { background-color: var(--bs-cyan-300) !important; }
.bg-cyan-400 { background-color: var(--bs-cyan-400) !important; }
.bg-cyan-500 { background-color: var(--bs-cyan-500) !important; }
.bg-cyan-600 { background-color: var(--bs-cyan-600) !important; }
.bg-cyan-700 { background-color: var(--bs-cyan-700) !important; }
.bg-cyan-800 { background-color: var(--bs-cyan-800) !important; }
.bg-cyan-900 { background-color: var(--bs-cyan-900) !important; }

.bg-yellow-100 { background-color: var(--bs-yellow-100) !important; }
.bg-yellow-200 { background-color: var(--bs-yellow-200) !important; }
.bg-yellow-300 { background-color: var(--bs-yellow-300) !important; }
.bg-yellow-400 { background-color: var(--bs-yellow-400) !important; }
.bg-yellow-500 { background-color: var(--bs-yellow-500) !important; }
.bg-yellow-600 { background-color: var(--bs-yellow-600) !important; }
.bg-yellow-700 { background-color: var(--bs-yellow-700) !important; }
.bg-yellow-800 { background-color: var(--bs-yellow-800) !important; }
.bg-yellow-900 { background-color: var(--bs-yellow-900) !important; }

.bg-pink-100 { background-color: var(--bs-pink-100) !important; }
.bg-pink-200 { background-color: var(--bs-pink-200) !important; }
.bg-pink-300 { background-color: var(--bs-pink-300) !important; }
.bg-pink-400 { background-color: var(--bs-pink-400) !important; }
.bg-pink-500 { background-color: var(--bs-pink-500) !important; }
.bg-pink-600 { background-color: var(--bs-pink-600) !important; }
.bg-pink-700 { background-color: var(--bs-pink-700) !important; }
.bg-pink-800 { background-color: var(--bs-pink-800) !important; }
.bg-pink-900 { background-color: var(--bs-pink-900) !important; }

.bg-purple-100 { background-color: var(--bs-purple-100) !important; }
.bg-purple-200 { background-color: var(--bs-purple-200) !important; }
.bg-purple-300 { background-color: var(--bs-purple-300) !important; }
.bg-purple-400 { background-color: var(--bs-purple-400) !important; }
.bg-purple-500 { background-color: var(--bs-purple-500) !important; }
.bg-purple-600 { background-color: var(--bs-purple-600) !important; }
.bg-purple-700 { background-color: var(--bs-purple-700) !important; }
.bg-purple-800 { background-color: var(--bs-purple-800) !important; }
.bg-purple-900 { background-color: var(--bs-purple-900) !important; }

.bg-brown-100 { background-color: var(--bs-brown-100) !important; }
.bg-brown-200 { background-color: var(--bs-brown-200) !important; }
.bg-brown-300 { background-color: var(--bs-brown-300) !important; }
.bg-brown-400 { background-color: var(--bs-brown-400) !important; }
.bg-brown-500 { background-color: var(--bs-brown-500) !important; }
.bg-brown-600 { background-color: var(--bs-brown-600) !important; }
.bg-brown-700 { background-color: var(--bs-brown-700) !important; }
.bg-brown-800 { background-color: var(--bs-brown-800) !important; }
.bg-brown-900 { background-color: var(--bs-brown-900) !important; }

.bg-orange-100 { background-color: var(--bs-orange-100) !important; }
.bg-orange-200 { background-color: var(--bs-orange-200) !important; }
.bg-orange-300 { background-color: var(--bs-orange-300) !important; }
.bg-orange-400 { background-color: var(--bs-orange-400) !important; }
.bg-orange-500 { background-color: var(--bs-orange-500) !important; }
.bg-orange-600 { background-color: var(--bs-orange-600) !important; }
.bg-orange-700 { background-color: var(--bs-orange-700) !important; }
.bg-orange-800 { background-color: var(--bs-orange-800) !important; }
.bg-orange-900 { background-color: var(--bs-orange-900) !important; }

/* ===== Text color utilities ===== */
.text-cyan-100 { color: var(--bs-cyan-100) !important; }
.text-cyan-200 { color: var(--bs-cyan-200) !important; }
.text-cyan-300 { color: var(--bs-cyan-300) !important; }
.text-cyan-400 { color: var(--bs-cyan-400) !important; }
.text-cyan-500 { color: var(--bs-cyan-500) !important; }
.text-cyan-600 { color: var(--bs-cyan-600) !important; }
.text-cyan-700 { color: var(--bs-cyan-700) !important; }
.text-cyan-800 { color: var(--bs-cyan-800) !important; }
.text-cyan-900 { color: var(--bs-cyan-900) !important; }

.text-yellow-100 { color: var(--bs-yellow-100) !important; }
.text-yellow-200 { color: var(--bs-yellow-200) !important; }
.text-yellow-300 { color: var(--bs-yellow-300) !important; }
.text-yellow-400 { color: var(--bs-yellow-400) !important; }
.text-yellow-500 { color: var(--bs-yellow-500) !important; }
.text-yellow-600 { color: var(--bs-yellow-600) !important; }
.text-yellow-700 { color: var(--bs-yellow-700) !important; }
.text-yellow-800 { color: var(--bs-yellow-800) !important; }
.text-yellow-900 { color: var(--bs-yellow-900) !important; }

.text-pink-100 { color: var(--bs-pink-100) !important; }
.text-pink-200 { color: var(--bs-pink-200) !important; }
.text-pink-300 { color: var(--bs-pink-300) !important; }
.text-pink-400 { color: var(--bs-pink-400) !important; }
.text-pink-500 { color: var(--bs-pink-500) !important; }
.text-pink-600 { color: var(--bs-pink-600) !important; }
.text-pink-700 { color: var(--bs-pink-700) !important; }
.text-pink-800 { color: var(--bs-pink-800) !important; }
.text-pink-900 { color: var(--bs-pink-900) !important; }

.text-purple-100 { color: var(--bs-purple-100) !important; }
.text-purple-200 { color: var(--bs-purple-200) !important; }
.text-purple-300 { color: var(--bs-purple-300) !important; }
.text-purple-400 { color: var(--bs-purple-400) !important; }
.text-purple-500 { color: var(--bs-purple-500) !important; }
.text-purple-600 { color: var(--bs-purple-600) !important; }
.text-purple-700 { color: var(--bs-purple-700) !important; }
.text-purple-800 { color: var(--bs-purple-800) !important; }
.text-purple-900 { color: var(--bs-purple-900) !important; }

.text-brown-100 { color: var(--bs-brown-100) !important; }
.text-brown-200 { color: var(--bs-brown-200) !important; }
.text-brown-300 { color: var(--bs-brown-300) !important; }
.text-brown-400 { color: var(--bs-brown-400) !important; }
.text-brown-500 { color: var(--bs-brown-500) !important; }
.text-brown-600 { color: var(--bs-brown-600) !important; }
.text-brown-700 { color: var(--bs-brown-700) !important; }
.text-brown-800 { color: var(--bs-brown-800) !important; }
.text-brown-900 { color: var(--bs-brown-900) !important; }

.text-orange-100 { color: var(--bs-orange-100) !important; }
.text-orange-200 { color: var(--bs-orange-200) !important; }
.text-orange-300 { color: var(--bs-orange-300) !important; }
.text-orange-400 { color: var(--bs-orange-400) !important; }
.text-orange-500 { color: var(--bs-orange-500) !important; }
.text-orange-600 { color: var(--bs-orange-600) !important; }
.text-orange-700 { color: var(--bs-orange-700) !important; }
.text-orange-800 { color: var(--bs-orange-800) !important; }
.text-orange-900 { color: var(--bs-orange-900) !important; }

/* ===== Border color utilities ===== */
.border-cyan-100 { border-color: var(--bs-cyan-100) !important; }
.border-cyan-200 { border-color: var(--bs-cyan-200) !important; }
.border-cyan-300 { border-color: var(--bs-cyan-300) !important; }
.border-cyan-400 { border-color: var(--bs-cyan-400) !important; }
.border-cyan-500 { border-color: var(--bs-cyan-500) !important; }
.border-cyan-600 { border-color: var(--bs-cyan-600) !important; }
.border-cyan-700 { border-color: var(--bs-cyan-700) !important; }
.border-cyan-800 { border-color: var(--bs-cyan-800) !important; }
.border-cyan-900 { border-color: var(--bs-cyan-900) !important; }

.border-yellow-100 { border-color: var(--bs-yellow-100) !important; }
.border-yellow-200 { border-color: var(--bs-yellow-200) !important; }
.border-yellow-300 { border-color: var(--bs-yellow-300) !important; }
.border-yellow-400 { border-color: var(--bs-yellow-400) !important; }
.border-yellow-500 { border-color: var(--bs-yellow-500) !important; }
.border-yellow-600 { border-color: var(--bs-yellow-600) !important; }
.border-yellow-700 { border-color: var(--bs-yellow-700) !important; }
.border-yellow-800 { border-color: var(--bs-yellow-800) !important; }
.border-yellow-900 { border-color: var(--bs-yellow-900) !important; }

.border-pink-100 { border-color: var(--bs-pink-100) !important; }
.border-pink-200 { border-color: var(--bs-pink-200) !important; }
.border-pink-300 { border-color: var(--bs-pink-300) !important; }
.border-pink-400 { border-color: var(--bs-pink-400) !important; }
.border-pink-500 { border-color: var(--bs-pink-500) !important; }
.border-pink-600 { border-color: var(--bs-pink-600) !important; }
.border-pink-700 { border-color: var(--bs-pink-700) !important; }
.border-pink-800 { border-color: var(--bs-pink-800) !important; }
.border-pink-900 { border-color: var(--bs-pink-900) !important; }

.border-purple-100 { border-color: var(--bs-purple-100) !important; }
.border-purple-200 { border-color: var(--bs-purple-200) !important; }
.border-purple-300 { border-color: var(--bs-purple-300) !important; }
.border-purple-400 { border-color: var(--bs-purple-400) !important; }
.border-purple-500 { border-color: var(--bs-purple-500) !important; }
.border-purple-600 { border-color: var(--bs-purple-600) !important; }
.border-purple-700 { border-color: var(--bs-purple-700) !important; }
.border-purple-800 { border-color: var(--bs-purple-800) !important; }
.border-purple-900 { border-color: var(--bs-purple-900) !important; }

.border-brown-100 { border-color: var(--bs-brown-100) !important; }
.border-brown-200 { border-color: var(--bs-brown-200) !important; }
.border-brown-300 { border-color: var(--bs-brown-300) !important; }
.border-brown-400 { border-color: var(--bs-brown-400) !important; }
.border-brown-500 { border-color: var(--bs-brown-500) !important; }
.border-brown-600 { border-color: var(--bs-brown-600) !important; }
.border-brown-700 { border-color: var(--bs-brown-700) !important; }
.border-brown-800 { border-color: var(--bs-brown-800) !important; }
.border-brown-900 { border-color: var(--bs-brown-900) !important; }

.border-orange-100 { border-color: var(--bs-orange-100) !important; }
.border-orange-200 { border-color: var(--bs-orange-200) !important; }
.border-orange-300 { border-color: var(--bs-orange-300) !important; }
.border-orange-400 { border-color: var(--bs-orange-400) !important; }
.border-orange-500 { border-color: var(--bs-orange-500) !important; }
.border-orange-600 { border-color: var(--bs-orange-600) !important; }
.border-orange-700 { border-color: var(--bs-orange-700) !important; }
.border-orange-800 { border-color: var(--bs-orange-800) !important; }
.border-orange-900 { border-color: var(--bs-orange-900) !important; }

/* ===== Gradient utilities ===== */
.bg-gradient-cyan { background: linear-gradient(90deg, var(--bs-cyan-200) 0%, var(--bs-cyan-500) 50%, var(--bs-cyan-800) 100%); }
.bg-gradient-cyan-v { background: linear-gradient(180deg, var(--bs-cyan-200) 0%, var(--bs-cyan-500) 50%, var(--bs-cyan-800) 100%); }
.bg-gradient-yellow { background: linear-gradient(90deg, var(--bs-yellow-200) 0%, var(--bs-yellow-500) 50%, var(--bs-yellow-800) 100%); }
.bg-gradient-yellow-v { background: linear-gradient(180deg, var(--bs-yellow-200) 0%, var(--bs-yellow-500) 50%, var(--bs-yellow-800) 100%); }
.bg-gradient-pink { background: linear-gradient(90deg, var(--bs-pink-200) 0%, var(--bs-pink-500) 50%, var(--bs-pink-800) 100%); }
.bg-gradient-pink-v { background: linear-gradient(180deg, var(--bs-pink-200) 0%, var(--bs-pink-500) 50%, var(--bs-pink-800) 100%); }
.bg-gradient-purple { background: linear-gradient(90deg, var(--bs-purple-200) 0%, var(--bs-purple-500) 50%, var(--bs-purple-800) 100%); }
.bg-gradient-purple-v { background: linear-gradient(180deg, var(--bs-purple-200) 0%, var(--bs-purple-500) 50%, var(--bs-purple-800) 100%); }
.bg-gradient-brown { background: linear-gradient(90deg, var(--bs-brown-200) 0%, var(--bs-brown-500) 50%, var(--bs-brown-800) 100%); }
.bg-gradient-brown-v { background: linear-gradient(180deg, var(--bs-brown-200) 0%, var(--bs-brown-500) 50%, var(--bs-brown-800) 100%); }
.bg-gradient-orange { background: linear-gradient(90deg, var(--bs-orange-200) 0%, var(--bs-orange-500) 50%, var(--bs-orange-800) 100%); }
.bg-gradient-orange-v { background: linear-gradient(180deg, var(--bs-orange-200) 0%, var(--bs-orange-500) 50%, var(--bs-orange-800) 100%); }

/* ===== Base convenience classes (ไม่ต้องระบุ level = ใช้เฉด 500) ===== */
.bg-cyan { background-color: var(--bs-cyan-500) !important; }
.text-cyan { color: var(--bs-cyan-500) !important; }
.border-cyan { border-color: var(--bs-cyan-500) !important; }
.bg-yellow { background-color: var(--bs-yellow-500) !important; }
.text-yellow { color: var(--bs-yellow-500) !important; }
.border-yellow { border-color: var(--bs-yellow-500) !important; }
.bg-pink { background-color: var(--bs-pink-500) !important; }
.text-pink { color: var(--bs-pink-500) !important; }
.border-pink { border-color: var(--bs-pink-500) !important; }
.bg-purple { background-color: var(--bs-purple-500) !important; }
.text-purple { color: var(--bs-purple-500) !important; }
.border-purple { border-color: var(--bs-purple-500) !important; }
.bg-brown { background-color: var(--bs-brown-500) !important; }
.text-brown { color: var(--bs-brown-500) !important; }
.border-brown { border-color: var(--bs-brown-500) !important; }
.bg-orange { background-color: var(--bs-orange-500) !important; }
.text-orange { color: var(--bs-orange-500) !important; }
.border-orange { border-color: var(--bs-orange-500) !important; }