/* ============================================
   CUSTOM UTILITY CLASSES
   Additional utilities not provided by Bootstrap
   ============================================ */

/* ========== SPACING UTILITIES ========== */
/* Bootstrap 3 không có spacing utilities như Bootstrap 4/5 */

/* Margin utilities - 0 */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Margin utilities - 1 (0.25rem = 4px) */
.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }

/* Margin utilities - 2 (0.5rem = 8px) */
.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

/* Margin utilities - 3 (1rem = 16px) */
.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

/* Margin utilities - 4 (1.5rem = 24px) */
.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* Margin utilities - 5 (3rem = 48px) */
.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Margin auto */
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding utilities - 0 */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Padding utilities - 1 (0.25rem = 4px) */
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

/* Padding utilities - 2 (0.5rem = 8px) */
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* Padding utilities - 3 (1rem = 16px) */
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* Padding utilities - 4 (1.5rem = 24px) */
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* Padding utilities - 5 (3rem = 48px) */
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Extra small spacing (giữ lại từ code cũ) */
.m-xs { margin: 0.125rem !important; }
.mt-xs { margin-top: 0.125rem !important; }
.mb-xs { margin-bottom: 0.125rem !important; }
.ml-xs { margin-left: 0.125rem !important; }
.mr-xs { margin-right: 0.125rem !important; }
.mx-xs { margin-left: 0.125rem !important; margin-right: 0.125rem !important; }
.my-xs { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; }

.p-xs { padding: 0.125rem !important; }
.pt-xs { padding-top: 0.125rem !important; }
.pb-xs { padding-bottom: 0.125rem !important; }
.pl-xs { padding-left: 0.125rem !important; }
.pr-xs { padding-right: 0.125rem !important; }
.px-xs { padding-left: 0.125rem !important; padding-right: 0.125rem !important; }
.py-xs { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }

/* ========== LINE HEIGHT UTILITIES ========== */
.lh-1 { line-height: 1 !important; }
.lh-xs { line-height: 0.75 !important; }
.lh-sm { line-height: 1.1 !important; }
.lh-md { line-height: 1.3 !important; }
.lh-lg { line-height: 1.6 !important; }
.lh-xl { line-height: 2 !important; }

/* ========== FONT SIZE UTILITIES ========== */
.fs-xs { font-size: 0.625rem !important; } /* 10px */
.fs-xxs { font-size: 0.5rem !important; } /* 8px */

/* ========== HEIGHT UTILITIES ========== */
.h-10vh { height: 10vh !important; }
.h-20vh { height: 20vh !important; }
.h-30vh { height: 30vh !important; }
.h-40vh { height: 40vh !important; }
.h-50vh { height: 50vh !important; }
.h-60vh { height: 60vh !important; }
.h-70vh { height: 70vh !important; }
.h-80vh { height: 80vh !important; }
.h-90vh { height: 90vh !important; }

.max-h-10vh { max-height: 10vh !important; }
.max-h-20vh { max-height: 20vh !important; }
.max-h-30vh { max-height: 30vh !important; }
.max-h-40vh { max-height: 40vh !important; }
.max-h-50vh { max-height: 50vh !important; }
.max-h-55vh { max-height: 55vh !important; }
.max-h-60vh { max-height: 60vh !important; }
.max-h-70vh { max-height: 70vh !important; }
.max-h-80vh { max-height: 80vh !important; }
.max-h-90vh { max-height: 90vh !important; }

.min-h-10vh { min-height: 10vh !important; }
.min-h-20vh { min-height: 20vh !important; }
.min-h-30vh { min-height: 30vh !important; }
.min-h-40vh { min-height: 40vh !important; }
.min-h-50vh { min-height: 50vh !important; }

/* ========== WIDTH UTILITIES ========== */
.w-10vw { width: 10vw !important; }
.w-20vw { width: 20vw !important; }
.w-30vw { width: 30vw !important; }
.w-40vw { width: 40vw !important; }
.w-50vw { width: 50vw !important; }
.w-60vw { width: 60vw !important; }
.w-70vw { width: 70vw !important; }
.w-80vw { width: 80vw !important; }
.w-90vw { width: 90vw !important; }

.max-w-10vw { max-width: 10vw !important; }
.max-w-20vw { max-width: 20vw !important; }
.max-w-30vw { max-width: 30vw !important; }
.max-w-40vw { max-width: 40vw !important; }
.max-w-50vw { max-width: 50vw !important; }

/* ========== SCROLL UTILITIES ========== */
.overflow-scroll-x { overflow-x: auto !important; }
.overflow-scroll-y { overflow-y: auto !important; }
.overflow-scroll-xy { overflow: auto !important; }
.overflow-hidden-x { overflow-x: hidden !important; }
.overflow-hidden-y { overflow-y: hidden !important; }
.overflow-visible-x { overflow-x: visible !important; }
.overflow-visible-y { overflow-y: visible !important; }

/* ========== CURSOR UTILITIES ========== */
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }
.cursor-zoom-in { cursor: zoom-in !important; }
.cursor-zoom-out { cursor: zoom-out !important; }

/* ========== BORDER RADIUS UTILITIES ========== */
.rounded-xs { border-radius: 0.125rem !important; }
.rounded-xxl { border-radius: 1rem !important; }
.rounded-circle-sm { border-radius: 50% !important; width: 2rem; height: 2rem; }
.rounded-circle-lg { border-radius: 50% !important; width: 4rem; height: 4rem; }

/* ========== SHADOW UTILITIES ========== */
.shadow-xs { box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.075) !important; }
.shadow-inner { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important; }
.shadow-outline { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; }

/* ========== FLEX UTILITIES ========== */
.flex-basis-auto { flex-basis: auto !important; }
.flex-basis-0 { flex-basis: 0 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-2 { flex-grow: 2 !important; }
.flex-grow-3 { flex-grow: 3 !important; }

/* ========== POSITION UTILITIES ========== */
.top-auto { top: auto !important; }
.bottom-auto { bottom: auto !important; }
.left-auto { left: auto !important; }
.right-auto { right: auto !important; }

.top-50 { top: 50% !important; }
.left-50 { left: 50% !important; }
.transform-center { transform: translate(-50%, -50%) !important; }
.transform-center-x { transform: translateX(-50%) !important; }
.transform-center-y { transform: translateY(-50%) !important; }

/* ========== TABLE UTILITIES ========== */
.table-sticky { 
  position: sticky !important; 
  top: 0 !important; 
  z-index: 10 !important; 
  background-color: inherit !important;
}

.table-hover-row:hover {
  background-color: rgba(0, 0, 0, 0.025) !important;
  cursor: pointer !important;
}

.table-compact th,
.table-compact td {
  padding: 0.25rem !important;
  line-height: 1 !important;
}

.table-scroll-container {
  overflow-y: auto !important;
  max-height: 55vh !important;
}

.table-scroll-container thead th {
  position: sticky !important;
  top: 0 !important;
  background-color: #f8f9fa !important;
  z-index: 1 !important;
}

/* ========== BACKGROUND UTILITIES ========== */
.bg-transparent { background-color: transparent !important; }
.bg-white-50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-black-50 { background-color: rgba(0, 0, 0, 0.5) !important; }
.bg-overlay { background-color: rgba(0, 0, 0, 0.6) !important; }

/* ========== TEXT UTILITIES ========== */
.text-ellipsis { 
  white-space: nowrap !important; 
  overflow: hidden !important; 
  text-overflow: ellipsis !important; 
}

.text-break-all { word-break: break-all !important; }
.text-no-wrap { white-space: nowrap !important; }
.text-pre-wrap { white-space: pre-wrap !important; }

/* ========== VISIBILITY UTILITIES ========== */
.invisible-xs { visibility: hidden !important; }
.visible-xs { visibility: visible !important; }

/* ========== ANIMATION UTILITIES ========== */
.transition-all { transition: all 0.3s ease !important; }
.transition-color { transition: color 0.2s ease !important; }
.transition-bg { transition: background-color 0.2s ease !important; }
.transition-transform { transition: transform 0.2s ease !important; }

.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.rotate-270 { transform: rotate(270deg) !important; }

.scale-hover:hover { transform: scale(1.05) !important; }
.scale-sm:hover { transform: scale(0.95) !important; }

/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 575.98px) {
  .d-xs-none { display: none !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex { display: flex !important; }
}

/* ========== FORM UTILITIES ========== */
.form-control-xs { 
  padding: 0.125rem 0.25rem !important; 
  font-size: 0.75rem !important; 
  line-height: 1.2 !important;
}

.btn-xs { 
  padding: 0.125rem 0.25rem !important; 
  font-size: 0.75rem !important; 
  line-height: 1.2 !important;
  border-radius: 0.125rem !important;
}

/* ========== Z-INDEX UTILITIES ========== */
.z-index-0 { z-index: 0 !important; }
.z-index-10 { z-index: 10 !important; }
.z-index-20 { z-index: 20 !important; }
.z-index-30 { z-index: 30 !important; }
.z-index-40 { z-index: 40 !important; }
.z-index-50 { z-index: 50 !important; }
.z-index-100 { z-index: 100 !important; }
.z-index-999 { z-index: 999 !important; }
.z-index-9999 { z-index: 9999 !important; }

/* ========== BOOTSTRAP 5 COLOR UTILITIES ========== */

/* Primary Colors */
.bg-primary { 
  background-color: #0d6efd !important; 
  color: #fff !important;
}
.bg-secondary { 
  background-color: #6c757d !important; 
  color: #fff !important;
}
.bg-success { 
  background-color: #198754 !important; 
  color: #fff !important;
}
.bg-info { 
  background-color: #0dcaf0 !important; 
  color: #fff !important;
}
.bg-warning { 
  background-color: #ffc107 !important; 
  color: #fff !important;
}
.bg-danger { 
  background-color: #dc3545 !important; 
  color: #fff !important;
}

/* Light and Dark */
.bg-light { 
  background-color: #f8f9fa !important; 
  color: #000 !important;
}
.bg-dark { 
  background-color: #212529 !important; 
  color: #fff !important;
}
.bg-white { 
  background-color: #ffffff !important; 
  color: #000 !important;
}

/* Gradient Colors */
.bg-gradient { 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important; 
}
.bg-gradient-primary { 
  background-color: #0d6efd !important; 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
  color: #fff !important;
}
.bg-gradient-success { 
  background-color: #198754 !important; 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
  color: #fff !important;
}
.bg-gradient-info { 
  background-color: #0dcaf0 !important; 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
  color: #000 !important;
}
.bg-gradient-warning { 
  background-color: #ffc107 !important; 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
  color: #000 !important;
}
.bg-gradient-danger { 
  background-color: #dc3545 !important; 
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
  color: #fff !important;
}

/* Border Colors */
.border-primary { 
  border-color: #0d6efd !important; 
}
.border-secondary { 
  border-color: #6c757d !important; 
}
.border-success { 
  border-color: #198754 !important; 
}
.border-info { 
  border-color: #0dcaf0 !important; 
}
.border-warning { 
  border-color: #ffc107 !important; 
}
.border-danger { 
  border-color: #dc3545 !important; 
}
.border-light { 
  border-color: #f8f9fa !important; 
}
.border-dark { 
  border-color: #212529 !important; 
}

/* Text Colors */
.text-primary { 
  color: #0d6efd !important; 
}
.text-secondary { 
  color: #6c757d !important; 
}
.text-success { 
  color: #198754 !important; 
}
.text-info { 
  color: #0dcaf0 !important; 
}
.text-warning { 
  color: #ffc107 !important; 
}
.text-danger { 
  color: #dc3545 !important; 
}
.text-light { 
  color: #f8f9fa !important; 
}
.text-dark { 
  color: #212529 !important; 
}
.text-white { 
  color: #ffffff !important; 
}
.text-muted { 
  color: #6c757d !important; 
}

/* Badge Style Combinations */
.badge-primary { 
  background-color: #0d6efd !important; 
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-secondary { 
  background-color: #6c757d !important; 
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-success { 
  background-color: #198754 !important; 
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-info { 
  background-color: #0dcaf0 !important; 
  color: #000 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-warning { 
  background-color: #ffc107 !important; 
  color: #000 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-danger { 
  background-color: #dc3545 !important; 
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}
.badge-light { 
  background-color: #f8f9fa !important; 
  color: #000 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
  border: 1px solid #dee2e6 !important;
}
.badge-dark { 
  background-color: #212529 !important; 
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  display: inline-block !important;
}