/*
 * DDT Reset CSS v1.0.0
 * Comprehensive CSS Reset with  prefix
 */

/* ========================================
   BASIC RESET
   ======================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-size: 16px; /* Project khác chỉ cần đổi 15/17/18px là mọi thứ scale theo */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ========================================
   HEADINGS & TEXT ELEMENTS
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: 1.2;
}

p, blockquote, pre, address {
  margin: 0;
  padding: 0;
}

/* ========================================
   LINKS
   ======================================== */

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

a:hover, a:focus, a:active {
  outline: 0;
  text-decoration: none;
}
a,.anchor,.circle,button,.transition {
    transition: color .2s ease 0s,background-color .2s ease 0s,opacity .2s ease 0s,background-position .2s ease 0s,box-shadow .2s ease 0s,border .2s ease 0s
}
a:hover,i:hover,.anchor:hover,.circle:hover,button:hover,.transition:hover {
    transition: color 0s ease 0s,background-color 0s ease 0s,opacity 0s ease 0s,background-position 0s ease 0s,box-shadow 0s ease 0s,border 0s ease 0s
}
/* ========================================
   LISTS
   ======================================== */

ul, ol, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hidden {
    display: none !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

button, input, optgroup, select, textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* button, input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
} */

button {
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea {
  resize: vertical;
  overflow: auto;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

legend {
  padding: 0;
  display: table;
}

/* Form Control - Giống Bootstrap */
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

/* Focus state */
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 1px #ced4da;
}

/* Placeholder */
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Disabled state */
.form-control:disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}

/* Readonly */
.form-control:read-only {
  background-color: #e9ecef;
  opacity: 1;
}

/* Small size */
.form-control-sm,
.input-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

/* Large size */
.form-control-lg,
.input-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* Textarea */
textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
  resize: vertical;
}

/* Select */
select.form-control {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* File input */
input[type="file"].form-control {
  overflow: hidden;
}

input[type="file"].form-control:not(:disabled):not(:read-only) {
  cursor: pointer;
}

/* Color input */
input[type="color"].form-control {
  height: auto;
  padding: 0.375rem;
}

/* Validation states */
.form-control.is-valid {
  border-color: #198754;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Form label */
.form-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #212529;
}

/* Form text (helper text) */
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}

/* Input Group Base */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .custom-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus {
  z-index: 3;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Input Group Prepend & Append */
.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

/* Input Group Text */
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-append .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Input Group with Buttons */
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn {
  position: relative;
  z-index: 2;
}

.input-group > .input-group-prepend > .btn:focus,
.input-group > .input-group-append > .btn:focus {
  z-index: 3;
}

.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .input-group-prepend:first-child > .btn,
.input-group > .input-group-append:last-child > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
 
/* Input Group Sizes */
.input-group-sm > .form-control,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

/* Multiple Inputs/Addons */
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
 


/* Validation feedback */
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #198754;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
  display: block;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}



/* Base Button */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,               border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border:1px #ccc solid;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, ;
  -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, ;
  -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, ;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, ;
}

.btn:hover {
  color: #212529;
}

.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.25);
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 1px rgba(49, 132, 253, 0.5);
}

.btn-primary:active {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}

/* Secondary Button */
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}

.btn-secondary:focus {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
  box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
}

/* Success Button */
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}

.btn-success:focus {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
  box-shadow: 0 0 0 1px rgba(60, 153, 110, 0.5);
}

/* Danger Button */
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.btn-danger:focus {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
  box-shadow: 0 0 0 1px rgba(225, 83, 97, 0.5);
}

/* Warning Button */
.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
}

.btn-warning:focus {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
  box-shadow: 0 0 0 1px rgba(217, 164, 6, 0.5);
}

/* Info Button */
.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-info:hover {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
}

.btn-info:focus {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
  box-shadow: 0 0 0 1px rgba(11, 172, 204, 0.5);
}

/* Light Button */
.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-light:focus {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
  box-shadow: 0 0 0 1px rgba(211, 212, 213, 0.5);
}

/* Dark Button */
.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}

.btn-dark:focus {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
  box-shadow: 0 0 0 1px rgba(66, 70, 73, 0.5);
}

/* Outline Buttons */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-success {
  color: #198754;
  border-color: #198754;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-info:hover {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-dark {
  color: #212529;
  border-color: #212529;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

/* Button Sizes */
.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

/* Block Button */
.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

/* Link Button */
.btn-link {
  font-weight: 400;
  color: #0d6efd;
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

.btn-link:hover {
  color: #0a58ca;
}

.btn-link:focus {
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:disabled {
  color: #6c757d;
}

/* Button Group */
.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active {
  z-index: 1;
}

.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Button Toolbar */
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .btn-group {
  margin-right: 0.5rem;
}

/* Close Button */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
  cursor: pointer;
}

.btn-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}

.btn-close:disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

/* Loading State */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.65;
}

.btn.loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 0.15rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.75s linear infinite;
}

@keyframes btn-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   MEDIA ELEMENTS
   ======================================== */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
  vertical-align: middle;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

/* ========================================
   TABLE ELEMENTS
   ======================================== */

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th, td {
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

/* ========================================
   OTHER ELEMENTS
   ======================================== */

hr {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

code, kbd, samp, pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
}

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: none;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ========================================
   HIDDEN & DISPLAY
   ======================================== */

[hidden] {
  display: none !important;
}

template {
  display: none;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========================================
   SELECTION & SCROLLBAR
   ======================================== */

::selection {
  background-color: #b3d4fc;
  text-shadow: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.chromeframe {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    width: 100% !important;
    z-index: 99999999999999 !important;
    background-color: #ffff00 !important;
    color: #000 !important;
    height: 25px;
    line-height: 25px;
    padding: 0.2em 0;
    text-align: center !important;
}

#timeoutsess {
    display: none;
}

#timeoutsess a {
    color: #2f70a7 !important;
}
.cookie-notice {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 350px;
    z-index: 99999999999999;
    background-color: #eee;
    border: solid 1px #dedede;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.cookie-notice div {
    position: relative;
    width: 100%;
    padding: 20px;
    color: #333;
}
.cookie-notice button {
    float: right;
    margin-top: -20px;
    margin-right: -20px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    font-size: 24px;
}
 
 /*
 * DDT Flexbox CSS v1.0.0
 * Professional 12-column grid system with flexbox
 */

/* ========================================
   CONTAINER
   ======================================== */

.container {
    width: 100%;
    max-width: 75rem; /* ~1200px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

.container-fluid {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Responsive containers */
@media (min-width: 576px) {
  /* .container { max-width: 540px; } */
  .container,.container-sm, .container-md, .container-lg, .container-xl { max-width: 100%; }
}

@media (min-width: 768px) {
  /* .container { max-width: 720px; } */
  .container,.container-sm, .container-md, .container-lg, .container-xl { max-width: 100%; }
}

@media (min-width: 992px) {
  .container,.container-sm, .container-md, .container-lg, .container-xl { max-width: 100%; }
}

@media (min-width: 1200px) {
  .container,.container-sm, .container-md, .container-lg, .container-xl { max-width: 1230px; }
}
@media (min-width: 1800px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1650px;
    }
}
/* @media (min-width: 1400px) {
  .container { max-width: 1400px; }
} */

/* ========================================
   ROW & COLUMN BASE
   ======================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  /* margin-left: -15px;
  margin-right: -15px; */
  --gutter-x: 1.5rem;  /* ngang mặc định */
 --gutter-y: 1.5rem;  /* dọc mặc định */
  margin-left: calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);
  margin-top: calc(var(--gutter-y) / -2);
  margin-bottom: calc(var(--gutter-y) / -2);
}
.row > [class*="col-"] {
    box-sizing: border-box;
    padding-left: calc(var(--gutter-x) / 2);
    padding-right: calc(var(--gutter-x) / 2);
    padding-top: calc(var(--gutter-y) / 2);
    padding-bottom: calc(var(--gutter-y) / 2);
}
/* [class*="col"] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
} */
/* ===== Utilities gutter ngang (gx) ===== */
.gx-0 { --gutter-x: 0; }
.gx-1 { --gutter-x: 0.25rem; }
.gx-2 { --gutter-x: 0.5rem; }
.gx-3 { --gutter-x: 1rem; }
.gx-4 { --gutter-x: 1.5rem; }
.gx-5 { --gutter-x: 2rem; }

/* ===== Utilities gutter dọc (gy) ===== */
.gy-0 { --gutter-y: 0; }
.gy-1 { --gutter-y: 0.25rem; }
.gy-2 { --gutter-y: 0.5rem; }
.gy-3 { --gutter-y: 1rem; }
.gy-4 { --gutter-y: 1.5rem; }
.gy-5 { --gutter-y: 2rem; }

/* Nếu cần cả hai cùng lúc */
.g-0 { --gutter-x: 0; --gutter-y: 0; }
.g-1 { --gutter-x: 0.25rem; --gutter-y: 0.25rem; }
.g-2 { --gutter-x: 0.5rem; --gutter-y: 0.5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 2rem; --gutter-y: 2rem; }
/* ========================================
   12 COLUMN GRID SYSTEM
   ======================================== */

/* Auto columns */
.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Fixed columns */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* ========================================
   RESPONSIVE COLUMNS - SM (≥576px)
   ======================================== */

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - MD (≥768px)
   ======================================== */

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - LG (≥992px)
   ======================================== */

@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - XL (≥1200px)
   ======================================== */

@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   RESPONSIVE COLUMNS - XXL (≥1400px)
   ======================================== */

@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================
   OFFSET COLUMNS
   ======================================== */

.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

/* Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* Align Content */
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-center { align-content: center; }
.align-content-between { align-content: space-between; }
.align-content-around { align-content: space-around; }
.align-content-stretch { align-content: stretch; }

/* Align Self */
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

/* Flex Grow & Shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* Gap utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

/* Row gap */
.row-gap-0 { row-gap: 0; }
.row-gap-1 { row-gap: 0.25rem; }
.row-gap-2 { row-gap: 0.5rem; }
.row-gap-3 { row-gap: 0.75rem; }
.row-gap-4 { row-gap: 1rem; }
.row-gap-5 { row-gap: 1.25rem; }

/* Column gap */
.col-gap-0 { column-gap: 0; }
.col-gap-1 { column-gap: 0.25rem; }
.col-gap-2 { column-gap: 0.5rem; }
.col-gap-3 { column-gap: 0.75rem; }
.col-gap-4 { column-gap: 1rem; }
.col-gap-5 { column-gap: 1.25rem; }

/* Order */
.order-first { order: -1; }
.order-last { order: 999; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
 

/* Responsive Order - SM (≥576px) */
@media (min-width: 576px) {
  .order-sm-first { order: -1; }
  .order-sm-last { order: 999; }
  .order-sm-0 { order: 0; }
  .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; }
  .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; }
  .order-sm-5 { order: 5; }
}

/* Responsive Order - MD (≥768px) */
@media (min-width: 768px) {
  .order-md-first { order: -1; }
  .order-md-last { order: 999; }
  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
}

/* Responsive Order - LG (≥992px) */
@media (min-width: 992px) {
  .order-lg-first { order: -1; }
  .order-lg-last { order: 999; }
  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
}

/* Responsive Order - XL (≥1200px) */
@media (min-width: 1200px) {
  .order-xl-first { order: -1; }
  .order-xl-last { order: 999; }
  .order-xl-0 { order: 0; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
  .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; }
  .order-xl-5 { order: 5; }
}
/* ========================================
   DISPLAY UTILITIES
   ======================================== */

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex, .d-flex, .flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Responsive display */
@media (min-width: 576px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
}

@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none; }
  .d-xl-block { display: block; }
  .d-xl-flex { display: flex; }
}
 
/*
 * DDT Table CSS v1.0.0
 * Professional table styling and variations
 */

/* ========================================
   BASE TABLE STYLES
   ======================================== */

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  background-color: transparent;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  background-color: #f8f9fa;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: top;
  font-size: 0.875rem;
}

/* ========================================
   TABLE SIZES
   ======================================== */

.table-sm th,
.table-sm td {
  padding: 0.3rem;
  font-size: 0.875rem;
}

.table-lg th,
.table-lg td {
  padding: 1rem;
  font-size: 1.125rem;
}

/* ========================================
   TABLE BORDERED
   ======================================== */

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

/* ========================================
   TABLE BORDERLESS
   ======================================== */

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

/* ========================================
   TABLE STRIPED
   ======================================== */

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-striped-columns tbody tr td:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ========================================
   TABLE HOVER
   ======================================== */

.table-hover tbody tr {
  transition: background-color 0.15s ease-in-out;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
  cursor: pointer;
}

/* ========================================
   TABLE COLORS (ROW COLORS)
   ======================================== */

.table-primary {
  background-color: rgba(0, 123, 255, 0.1);
}

.table-secondary {
  background-color: rgba(108, 117, 125, 0.1);
}

.table-success {
  background-color: rgba(40, 167, 69, 0.1);
}

.table-danger {
  background-color: rgba(220, 53, 69, 0.1);
}

.table-warning {
  background-color: rgba(255, 193, 7, 0.1);
}

.table-info {
  background-color: rgba(23, 162, 184, 0.1);
}

.table-light {
  background-color: #f8f9fa;
}

.table-dark {
  background-color: #343a40;
  color: #fff;
}

/* Row specific colors */
tbody .table-primary {
  background-color: #cce5ff;
}

tbody .table-secondary {
  background-color: #e2e3e5;
}

tbody .table-success {
  background-color: #d4edda;
}

tbody .table-danger {
  background-color: #f8d7da;
}

tbody .table-warning {
  background-color: #fff3cd;
}

tbody .table-info {
  background-color: #d1ecf1;
}

tbody .table-light {
  background-color: #fdfdfe;
}

tbody .table-dark {
  background-color: #c6c8ca;
  color: #212529;
}

/* ========================================
   TABLE DARK THEME
   ======================================== */

.table-dark-theme {
  color: #fff;
  background-color: #343a40;
}

.table-dark-theme th,
.table-dark-theme td,
.table-dark-theme thead th {
  border-color: #454d55;
}

.table-dark-theme thead th {
  background-color: #23272b;
}

.table-dark-theme.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark-theme.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

/* ========================================
   RESPONSIVE TABLE
   ======================================== */

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

/* Responsive breakpoints */
@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   TABLE FIXED LAYOUT
   ======================================== */

.table-fixed {
  table-layout: fixed;
}

.table-fixed th,
.table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   STICKY HEADER
   ======================================== */

.table-sticky-header {
  position: relative;
}

.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-dark-theme.table-sticky-header thead th {
  background-color: #23272b;
}

/* ========================================
   SORTABLE TABLE
   ======================================== */

.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 2rem;
}

.table-sortable th::after {
  content: "⇅";
  position: absolute;
  right: 0.75rem;
  opacity: 0.3;
  font-size: 0.875rem;
}

.table-sortable th:hover::after {
  opacity: 0.6;
}

.table-sortable th.sort-asc::after {
  content: "↑";
  opacity: 1;
}

.table-sortable th.sort-desc::after {
  content: "↓";
  opacity: 1;
}

.table-sortable th.sort-active {
  background-color: rgba(0, 123, 255, 0.1);
}

/* ========================================
   TABLE WITH ACTIONS
   ======================================== */

.table-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.table-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #007bff;
  transition: color 0.15s ease-in-out;
}

.table-action-btn:hover {
  color: #0056b3;
  text-decoration: underline;
}

.table-action-btn-danger {
  color: #dc3545;
}

.table-action-btn-danger:hover {
  color: #bd2130;
}

/* ========================================
   TABLE WITH CHECKBOXES
   ======================================== */

.table-checkbox {
  width: 40px;
  text-align: center;
}

.table-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* ========================================
   TABLE COLUMN WIDTHS
   ======================================== */

.table-col-xs {
  width: 5%;
}

.table-col-sm {
  width: 10%;
}

.table-col-md {
  width: 20%;
}

.table-col-lg {
  width: 30%;
}

.table-col-xl {
  width: 40%;
}

/* Fixed widths */
.table-col-50 {
  width: 50px;
}

.table-col-100 {
  width: 100px;
}

.table-col-150 {
  width: 150px;
}

.table-col-200 {
  width: 200px;
}

/* ========================================
   TABLE TEXT ALIGNMENT
   ======================================== */

.table-align-left {
  text-align: left;
}

.table-align-center {
  text-align: center;
}

.table-align-right {
  text-align: right;
}

.table th.table-align-center,
.table td.table-align-center {
  text-align: center;
}

.table th.table-align-right,
.table td.table-align-right {
  text-align: right;
}

/* ========================================
   TABLE VERTICAL ALIGNMENT
   ======================================== */

.table-valign-top th,
.table-valign-top td {
  vertical-align: top;
}

.table-valign-middle th,
.table-valign-middle td {
  vertical-align: middle;
}

.table-valign-bottom th,
.table-valign-bottom td {
  vertical-align: bottom;
}

/* ========================================
   TABLE PAGINATION
   ======================================== */

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid #dee2e6;
  margin-top: 1rem;
}

.table-info {
  color: #6c757d;
  font-size: 0.875rem;
}

.table-pagination {
  display: flex;
  gap: 0.25rem;
}

/* ========================================
   TABLE WITH IMAGES
   ======================================== */

.table-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.table-img-square {
  border-radius: 0.375rem;
}

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

.table td .badge {
  font-size: 0.75rem;
  padding: 0.25em 0.5em;
}

/* ========================================
   TABLE EMPTY STATE
   ======================================== */

.table-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.table-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.table-empty-text {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.table-empty-subtext {
  font-size: 0.875rem;
  color: #adb5bd;
}

/* ========================================
   TABLE LOADING STATE
   ======================================== */

.table-loading {
  position: relative;
  pointer-events: none;
}

.table-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.table-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

/* ========================================
   TABLE CARD VIEW (Mobile Alternative)
   ======================================== */

@media (max-width: 767.98px) {
  .table-card-mobile {
    display: none;
  }

  .table-card-mobile + .table-card-list {
    display: block;
  }

  .table-card-item {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .table-card-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .table-card-row:last-child {
    border-bottom: none;
  }

  .table-card-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.875rem;
  }

  .table-card-value {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .table-card-list {
    display: none;
  }
}

/* ========================================
   TABLE FILTERS
   ======================================== */

.table-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.table-search {
  flex: 1;
  min-width: 200px;
}

.table-filter-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ========================================
   TABLE ROW SELECTION
   ======================================== */

.table tbody tr.selected {
  background-color: rgba(0, 123, 255, 0.1);
}

.table-hover tbody tr.selected:hover {
  background-color: rgba(0, 123, 255, 0.15);
}

/* ========================================
   TABLE EXPANDABLE ROWS
   ======================================== */

.table-expandable tbody tr {
  cursor: pointer;
}

.table-expand-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

.table-expand-icon::before {
  content: "▶";
}

tr.expanded .table-expand-icon {
  transform: rotate(90deg);
}

.table-expanded-content {
  display: none;
  background-color: #f8f9fa;
  padding: 1rem;
}

tr.expanded + tr .table-expanded-content {
  display: block;
}

/* ========================================
   TABLE SUMMARY/TOTALS ROW
   ======================================== */

.table tfoot {
  font-weight: 600;
  background-color: #f8f9fa;
  border-top: 2px solid #dee2e6;
}

.table tfoot td {
  border-top: 2px solid #dee2e6;
}

/* ========================================
   DATA TABLE WRAPPER
   ======================================== */

.datatable-wrapper {
  position: relative;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.datatable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

.datatable-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.datatable-body {
  overflow-x: auto;
}

/* ========================================
   COMPACT TABLE
   ======================================== */

.table-compact {
  font-size: 0.875rem;
}

.table-compact th,
.table-compact td {
  padding: 0.4rem 0.5rem;
}

/* ========================================
   TABLE WITH ICONS
   ======================================== */

.table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 0.5rem;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-actions,
  .table-checkbox,
  .table-filters,
  .table-pagination {
    display: none !important;
  }
}
/*
 * DDT Layout CSS v1.0.0
 * Professional layout components and structures
 */

/* ========================================
   NAVBAR COMPONENTS
   ======================================== */

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: inherit;
  white-space: nowrap;
  color: #212529;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: #007bff;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .nav-item {
  position: relative;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  color: #007bff;
}

.nav-link.active {
  color: #007bff;
  font-weight: 600;
}

.nav-link:disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

/* Navbar Toggle (Mobile Menu) */
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:hover {
  background-color: #f8f9fa;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: 0;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

/* Navbar Expand Variations */
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

/* Navbar Fixed Positions */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.navbar-sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Navbar Color Schemes */
.navbar-light {
  background-color: #f8f9fa;
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .nav-link {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark {
  background-color: #343a40;
  color: rgba(255, 255, 255, 0.95);
}

.navbar-dark .navbar-brand {
  color: rgba(255, 255, 255, 0.95);
}

.navbar-dark .navbar-brand:hover {
  color: #fff;
}

.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
  color: rgba(255, 255, 255, 0.95);
}

.navbar-dark .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========================================
   SIDEBAR COMPONENTS
   ======================================== */

.sidebarnav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 250px;
  padding: 0;
  background-color: #fff;
  border-right: 1px solid #dee2e6;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.sidebarnav-header {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #dee2e6;
  font-size: 1.25rem;
  font-weight: 600;
}

.sidebarnav-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.sidebarnav-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
}

.sidebarnav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebarnav-item {
  position: relative;
}

.sidebarnav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: #212529;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.sidebarnav-link:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

.sidebarnav-link.active {
  background-color: #007bff;
  color: #fff;
  font-weight: 600;
}

.sidebarnav-link .icon {
  margin-right: 0.75rem;
  width: 1.25rem;
  text-align: center;
}

/* Sidebar Collapsed */
.sidebarnav-collapsed {
  width: 70px;
}

.sidebarnav-collapsed .sidebarnav-link {
  justify-content: center;
  padding: 0.75rem;
}

.sidebarnav-collapsed .sidebarnav-link .icon {
  margin-right: 0;
}

.sidebarnav-collapsed .sidebarnav-link span:not(.icon) {
  display: none;
}

/* Sidebar Dark */
.sidebarnav-dark {
  background-color: #343a40;
  border-right-color: rgba(255, 255, 255, 0.1);
}

.sidebarnav-dark .sidebarnav-header {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebarnav-dark .sidebarnav-link {
  color: rgba(255, 255, 255, 0.8);
}

.sidebarnav-dark .sidebarnav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebarnav-dark .sidebarnav-link.active {
  background-color: #007bff;
  color: #fff;
}

/* Sidebar Mobile Toggle */
@media (max-width: 991.98px) {
  .sidebarnav {
    transform: translateX(-100%);
  }
  .sidebarnav.show {
    transform: translateX(0);
  }
}

/* ========================================
   MAIN CONTENT WITH SIDEBAR
   ======================================== */

.layout-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: 250px;
  padding: 2rem;
  transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapsed ~ .main-content {
  margin-left: 70px;
}

@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0;
  }
}

/* Content with fixed navbar */
.has-navbar-fixed {
  padding-top: 56px;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  position: relative;
  padding: 4rem 0;
  background-color: #f8f9fa;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #6c757d;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero sizes */
.hero-sm {
  padding: 2rem 0;
}

.hero-sm .hero-title {
  font-size: 2rem;
}

.hero-sm .hero-subtitle {
  font-size: 1.25rem;
}

.hero-lg {
  padding: 6rem 0;
}

.hero-lg .hero-title {
  font-size: 4rem;
}

.hero-lg .hero-subtitle {
  font-size: 1.75rem;
}

.hero-xl {
  padding: 8rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-xl .hero-title {
  font-size: 5rem;
}

/* Hero with background image */
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

/* ========================================
   FOOTER COMPONENTS
   ======================================== */

.footer {
  background-color: #343a40;
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.15s ease-in-out;
}

.footer-link:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
}

.footer-social {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.footer-social-link:hover {
  background-color: #007bff;
  transform: translateY(-2px);
}

/* Footer Light */
.footer-light {
  background-color: #f8f9fa;
  color: #212529;
}

.footer-light .footer-title {
  color: #212529;
}

.footer-light .footer-link {
  color: #6c757d;
}

.footer-light .footer-link:hover {
  color: #007bff;
}

.footer-light .footer-bottom {
  border-top-color: #dee2e6;
}

.footer-light .footer-social-link {
  background-color: #e9ecef;
  color: #212529;
}

/* ========================================
   SECTION SPACING
   ======================================== */

.section {
  padding: 4rem 0;
}

.section-sm {
  padding: 2rem 0;
}

.section-lg {
  padding: 6rem 0;
}

.section-xl {
  padding: 8rem 0;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #6c757d;
  margin-bottom: 3rem;
  text-align: center;
}

/* Section backgrounds */
.section-light {
  background-color: #f8f9fa;
}

.section-dark {
  background-color: #343a40;
  color: #fff;
}

.section-dark .section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.section-primary {
  background-color: #007bff;
  color: #fff;
}

.section-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

/* ========================================
   CSS GRID LAYOUT UTILITIES
   ======================================== */

.grid {
  display: grid;
  gap: 1rem;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Responsive Grid */
@media (min-width: 576px) {
  .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Grid Gap */
.grid-gap-0 { gap: 0; }
.grid-gap-1 { gap: 0.25rem; }
.grid-gap-2 { gap: 0.5rem; }
.grid-gap-3 { gap: 0.75rem; }
.grid-gap-4 { gap: 1rem; }
.grid-gap-5 { gap: 1.25rem; }
.grid-gap-6 { gap: 1.5rem; }
.grid-gap-8 { gap: 2rem; }

/* Grid Auto Fit */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ========================================
   ASPECT RATIO CONTAINERS
   ======================================== */

.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--aspect-ratio);
  content: "";
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-1x1 {
  --aspect-ratio: 100%;
}

.ratio-4x3 {
  --aspect-ratio: calc(3 / 4 * 100%);
}

.ratio-16x9 {
  --aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
  --aspect-ratio: calc(9 / 21 * 100%);
}

/* ========================================
   DIVIDER
   ======================================== */

.divider {
  height: 1px;
  background-color: #dee2e6;
  margin: 2rem 0;
  border: none;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background-color: #dee2e6;
  margin: 0 2rem;
}

.divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
  color: #6c757d;
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #dee2e6;
}

.divider-text::before {
  margin-right: 1rem;
}

.divider-text::after {
  margin-left: 1rem;
}

/* ========================================
   SPACER
   ======================================== */

.spacer {
  flex: 1 1 auto;
}

.spacer-sm {
  height: 1rem;
}

.spacer-md {
  height: 2rem;
}

.spacer-lg {
  height: 4rem;
}

.spacer-xl {
  height: 6rem;
}


/*
 * DDT Components CSS v1.0.0
 * Professional UI components library
 */

/* ========================================
   CARD COMPONENTS
   ======================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 1rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem 0.375rem 0 0;
  font-weight: 600;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0 0 0.375rem 0.375rem;
}

.card-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
  color: #6c757d;
  font-size: 0.875rem;
}

.card-text {
  margin-bottom: 1rem;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-img {
  width: 100%;
  border-radius: 0.375rem 0.375rem 0 0;
}

.card-img-bottom {
  width: 100%;
  border-radius: 0 0 0.375rem 0.375rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  border-radius: 0.375rem;
}

/* Card variants */
.card-hover {
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-img {
  max-width: 200px;
  border-radius: 0.375rem 0 0 0.375rem;
}

/* ========================================
   BADGE COMPONENTS
   ======================================== */

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

/* Badge pill */
.badge-pill {
  border-radius: 10rem;
}

/* Badge dot */
.badge-dot {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Badge with icon */
.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ========================================
   ALERT COMPONENTS
   ======================================== */

.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-heading {
  color: inherit;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.alert-link {
  font-weight: 600;
  text-decoration: underline;
}

.alert-dismissible {
  padding-right: 3rem;
}

.alert-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.alert-close:hover {
  opacity: 0.75;
}

/* Alert variants */
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

/* ========================================
   MODAL COMPONENTS
   ======================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show {
  display: block;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-overlay.show {
  opacity: 1;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 500px;
  pointer-events: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  outline: 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0.5rem 0.5rem 0 0;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s;
}

.modal-close:hover {
  opacity: 0.75;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-radius: 0 0 0.5rem 0.5rem;
  gap: 0.5rem;
}

/* Modal sizes */
.modal-sm .modal-dialog {
  max-width: 300px;
}

.modal-lg .modal-dialog {
  max-width: 800px;
}

.modal-xl .modal-dialog {
  max-width: 1140px;
}

.modal-fullscreen .modal-dialog {
  max-width: 100%;
  margin: 0;
  height: 100%;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* Modal centered */
.modal-centered .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

/* ========================================
   TOOLTIP COMPONENTS
   ======================================== */

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.15s;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.375rem;
}

.tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

/* Tooltip positions */
.tooltip-top {
  padding: 0.4rem 0;
}

.tooltip-top .tooltip-arrow {
  bottom: 0;
}

.tooltip-top .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.tooltip-bottom {
  padding: 0.4rem 0;
}

.tooltip-bottom .tooltip-arrow {
  top: 0;
}

.tooltip-bottom .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

/* ========================================
   DROPDOWN COMPONENTS
   ======================================== */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  background-color: #f8f9fa;
}

.dropdown-item.active {
  color: #fff;
  background-color: #007bff;
}

.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

/* Dropdown positions */
.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

/* ========================================
   BREADCRUMB COMPONENTS
   ======================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.375rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item.active {
  color: #6c757d;
}

/* ========================================
   PAGINATION COMPONENTS
   ======================================== */

.pagination,.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.375rem;
  gap: 0.25rem;
}

.page-item,.pagination>li {
  display: inline-block;
}
 
.page-link, .pagination>li>a {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.page-link:hover, .pagination>li>a:hover {
  z-index: 2;
  color: #0056b3;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus,.pagination>li>a:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.page-item.active .page-link,.pagination>li>a.active {
  z-index: 3;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.page-item.disabled .page-link, .pagination>li>a.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
  opacity: 0.6;
}

/* Pagination sizes */
.pagination-sm .page-link, .pagination-sm>li>a {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.pagination-lg .page-link, .pagination-lg>li>a {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* ========================================
   PROGRESS BAR COMPONENTS
   ======================================== */

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.375rem;
  box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Progress variants */
.progress-bar-success {
  background-color: #28a745;
}

.progress-bar-info {
  background-color: #17a2b8;
}

.progress-bar-warning {
  background-color: #ffc107;
}

.progress-bar-danger {
  background-color: #dc3545;
}

/* ========================================
   TABS COMPONENTS
   ======================================== */

.tabs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid #dee2e6;
}

.tab-item {
  margin-bottom: -1px;
}

.tab-link {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: #007bff;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.tab-link:hover {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}

.tab-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.tab-link:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
  border-color: transparent;
}

.tab-content {
  padding: 1rem;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ========================================
   ACCORDION COMPONENTS
   ======================================== */

.accordion {
  margin-bottom: 1rem;
}

.accordion-item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin-bottom: -1px;
}

.accordion-item:first-child {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.accordion-item:last-child {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  margin-bottom: 0;
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.accordion-button:hover {
  background-color: #f8f9fa;
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-button.collapsed::after {
  transform: rotate(-180deg);
}

.accordion-collapse {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion-body {
  padding: 1rem 1.25rem;
}

/* ========================================
   SPINNER / LOADING COMPONENTS
   ======================================== */

.spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

.spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

/* Spinner grow */
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ========================================
   TOAST / NOTIFICATION COMPONENTS
   ======================================== */

.toast {
  max-width: 350px;
  overflow: hidden;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.95);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.toast.show {
  opacity: 1;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

.toast-body {
  padding: 0.75rem;
}

.toast-close {
  margin-left: auto;
  margin-right: -0.375rem;
}

/* Toast container */
.toast-container {
  position: fixed;
  z-index: 1090;
  padding: 1rem;
  pointer-events: none;
}

.toast-container > .toast {
  pointer-events: auto;
  margin-bottom: 0.75rem;
}

/* Toast positions */
.toast-top-right {
  top: 0;
  right: 0;
}

.toast-top-left {
  top: 0;
  left: 0;
}

.toast-bottom-right {
  bottom: 0;
  right: 0;
}

.toast-bottom-left {
  bottom: 0;
  left: 0;
}

.toast-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.toast-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*
 * DDT Utilities CSS v1.0.0
 * Comprehensive utility classes for rapid development
 */

/* ========================================
   SPACING UTILITIES
   Scale: 0, 1(0.25rem), 2(0.5rem), 3(0.75rem), 4(1rem), 5(1.25rem), 
          6(1.5rem), 8(2rem), 10(2.5rem), 12(3rem), 16(4rem), 20(5rem)
   ======================================== */

/* Margin All Sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 1.25rem !important; }
.m-6 { margin: 1.5rem !important; }
.m-8 { margin: 2rem !important; }
.m-10 { margin: 2.5rem !important; }
.m-12 { margin: 3rem !important; }
.m-16 { margin: 4rem !important; }
.m-20 { margin: 5rem !important; }
.m-auto { margin: auto !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-16 { margin-top: 4rem !important; }
.mt-20 { margin-top: 5rem !important; }
.mt-auto { margin-top: auto !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mb-20 { margin-bottom: 5rem !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin Left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 1.25rem !important; }
.ml-6 { margin-left: 1.5rem !important; }
.ml-8 { margin-left: 2rem !important; }
.ml-10 { margin-left: 2.5rem !important; }
.ml-12 { margin-left: 3rem !important; }
.ml-16 { margin-left: 4rem !important; }
.ml-20 { margin-left: 5rem !important; }
.ml-auto { margin-left: auto !important; }

/* Margin Right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 1.25rem !important; }
.mr-6 { margin-right: 1.5rem !important; }
.mr-8 { margin-right: 2rem !important; }
.mr-10 { margin-right: 2.5rem !important; }
.mr-12 { margin-right: 3rem !important; }
.mr-16 { margin-right: 4rem !important; }
.mr-20 { margin-right: 5rem !important; }
.mr-auto { margin-right: auto !important; }

/* Margin X-axis (left & right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y-axis (top & bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding All Sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.p-12 { padding: 3rem !important; }
.p-16 { padding: 4rem !important; }
.p-20 { padding: 5rem !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pt-16 { padding-top: 4rem !important; }
.pt-20 { padding-top: 5rem !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pb-10 { padding-bottom: 2.5rem !important; }
.pb-12 { padding-bottom: 3rem !important; }
.pb-16 { padding-bottom: 4rem !important; }
.pb-20 { padding-bottom: 5rem !important; }

/* Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-5 { padding-left: 1.25rem !important; }
.pl-6 { padding-left: 1.5rem !important; }
.pl-8 { padding-left: 2rem !important; }
.pl-10 { padding-left: 2.5rem !important; }
.pl-12 { padding-left: 3rem !important; }
.pl-16 { padding-left: 4rem !important; }
.pl-20 { padding-left: 5rem !important; }

/* Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-5 { padding-right: 1.25rem !important; }
.pr-6 { padding-right: 1.5rem !important; }
.pr-8 { padding-right: 2rem !important; }
.pr-10 { padding-right: 2.5rem !important; }
.pr-12 { padding-right: 3rem !important; }
.pr-16 { padding-right: 4rem !important; }
.pr-20 { padding-right: 5rem !important; }

/* Padding X-axis (left & right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }

/* Padding Y-axis (top & bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

/* Font Size */
.text-xs { font-size: 0.75rem !important; line-height: 1rem; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem; }
.text-base { font-size: 1rem !important; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; }
.text-5xl { font-size: 3rem !important; line-height: 1; }

/* Font Weight */
.font-thin { font-weight: 100 !important; }
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* Text Align */
.text-left,.text-left { text-align: left !important; }
.text-center,.text-center { text-align: center !important; }
.text-right,.text-right { text-align: right !important; }
.text-justif,.text-justify { text-align: justify !important; }

/* Text Transform */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* Text Decoration */
.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-no-underline { text-decoration: none !important; }

/* Line Height */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }

/* Letter Spacing */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Text Truncate */
.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Word Break */
.break-normal { word-break: normal !important; overflow-wrap: normal !important; }
.break-words { overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }

/* White Space */
.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ========================================
   COLOR UTILITIES
   ======================================== */

/* Text Colors */
.text-primary { color: #007bff !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }
.text-light { color: #f8f9fa !important; }
.text-dark { color: #343a40 !important; }
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-muted { color: #6c757d !important; }

/* Background Colors */
.bg-primary { background-color: #007bff !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #28a745 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #17a2b8 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-transparent { background-color: transparent !important; }

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}
.bg-gradient-success {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}
.bg-gradient-danger {
  background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%) !important;
}
.bg-gradient-warning {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}
.bg-gradient-info {
  background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
}

/* ========================================
   BORDER UTILITIES
   ======================================== */

/* Border Width */
.border-0 { border: 0 !important; }
.border { border: 1px solid #dee2e6 !important; }
.border-2 { border: 2px solid #dee2e6 !important; }
.border-3 { border: 3px solid #dee2e6 !important; }
.border-4 { border: 4px solid #dee2e6 !important; }

.border-top { border-top: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-left { border-left: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }

.border-top-0 { border-top: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
.border-right-0 { border-right: 0 !important; }

/* Border Colors */
.border-primary { border-color: #007bff !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #28a745 !important; }
.border-danger { border-color: #dc3545 !important; }
.border-warning { border-color: #ffc107 !important; }
.border-info { border-color: #17a2b8 !important; }
.border-light { border-color: #f8f9fa !important; }
.border-dark { border-color: #343a40 !important; }
.border-white { border-color: #ffffff !important; }

/* Border Radius */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: 0.2rem !important; }
.rounded { border-radius: 0.375rem !important; }
.rounded-md { border-radius: 0.5rem !important; }
.rounded-lg { border-radius: 0.75rem !important; }
.rounded-xl { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.5rem !important; }
.rounded-3xl { border-radius: 2rem !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-circle { border-radius: 50% !important; }

/* Border Radius Per Corner */
.rounded-top { border-top-left-radius: 0.375rem !important; border-top-right-radius: 0.375rem !important; }
.rounded-bottom { border-bottom-left-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
.rounded-left { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }
.rounded-right { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }

/* Border Style */
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-double { border-style: double !important; }
.border-none { border-style: none !important; }

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
.shadow-md { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.shadow-lg { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.shadow-xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; }

/* ========================================
   SIZING UTILITIES
   ======================================== */

/* Width */
.w-auto { width: auto !important; }
.w-0 { width: 0 !important; }
.w-25 { width: 25% !important; }
.w-33 { width: 33.333333% !important; }
.w-50 { width: 50% !important; }
.w-66 { width: 66.666667% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-screen { width: 100vw !important; }

/* Fixed Width */
.w-px { width: 1px !important; }
.w-20 { width: 5rem !important; }
.w-24 { width: 6rem !important; }
.w-32 { width: 8rem !important; }
.w-40 { width: 10rem !important; }
.w-48 { width: 12rem !important; }
.w-56 { width: 14rem !important; }
.w-64 { width: 16rem !important; }

/* Height */
.h-auto { height: auto !important; }
.h-0 { height: 0 !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* Fixed Height */
.h-px { height: 1px !important; }
.h-20 { height: 5rem !important; }
.h-24 { height: 6rem !important; }
.h-32 { height: 8rem !important; }
.h-40 { height: 10rem !important; }
.h-48 { height: 12rem !important; }
.h-56 { height: 14rem !important; }
.h-64 { height: 16rem !important; }

/* Min/Max Width */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Min/Max Height */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }

/* ========================================
   POSITION UTILITIES
   ======================================== */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Position Values */
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.left-0 { left: 0 !important; }
.left-50 { left: 50% !important; }
.left-100 { left: 100% !important; }
.right-0 { right: 0 !important; }
.right-50 { right: 50% !important; }
.right-100 { right: 100% !important; }

/* Inset */
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-x-0 { left: 0 !important; right: 0 !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }

/* Z-Index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }
.z-negative { z-index: -1 !important; }
.z-top { z-index: 9999 !important; }

/* ========================================
   OVERFLOW UTILITIES
   ======================================== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* ========================================
   OPACITY UTILITIES
   ======================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }

/* ========================================
   CURSOR UTILITIES
   ======================================== */

.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-help { cursor: help !important; }
.cursor-zoom-in { cursor: zoom-in !important; }
.cursor-zoom-out { cursor: zoom-out !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

/* ========================================
   USER SELECT
   ======================================== */

.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }
.select-auto { user-select: auto !important; }

/* ========================================
   POINTER EVENTS
   ======================================== */

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ========================================
   VISIBILITY
   ======================================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ========================================
   VERTICAL ALIGN
   ======================================== */

.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-top { vertical-align: text-top !important; }
.align-text-bottom { vertical-align: text-bottom !important; }

/* ========================================
   TRANSFORM UTILITIES
   ======================================== */

.transform { transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) !important; }
.transform-none { transform: none !important; }

/* Rotate */
.rotate-0 { --rotate: 0deg; transform: rotate(0deg) !important; }
.rotate-45 { --rotate: 45deg; transform: rotate(45deg) !important; }
.rotate-90 { --rotate: 90deg; transform: rotate(90deg) !important; }
.rotate-180 { --rotate: 180deg; transform: rotate(180deg) !important; }
.rotate-270 { --rotate: 270deg; transform: rotate(270deg) !important; }
.rotate-neg-45 { --rotate: -45deg; transform: rotate(-45deg) !important; }
.rotate-neg-90 { --rotate: -90deg; transform: rotate(-90deg) !important; }
.rotate-neg-180 { --rotate: -180deg; transform: rotate(-180deg) !important; }

/* Scale */
.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }

/* Translate */
.translate-x-0 { transform: translateX(0) !important; }
.translate-x-full { transform: translateX(100%) !important; }
.translate-x-half { transform: translateX(50%) !important; }
.translate-x-neg-full { transform: translateX(-100%) !important; }
.translate-x-neg-half { transform: translateX(-50%) !important; }

.translate-y-0 { transform: translateY(0) !important; }
.translate-y-full { transform: translateY(100%) !important; }
.translate-y-half { transform: translateY(50%) !important; }
.translate-y-neg-full { transform: translateY(-100%) !important; }
.translate-y-neg-half { transform: translateY(-50%) !important; }

/* ========================================
   TRANSITION UTILITIES
   ======================================== */

.transition-none { transition: none !important; }
.transition-all { transition: all 0.3s ease !important; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important; }
.transition-opacity { transition: opacity 0.3s ease !important; }
.transition-shadow { transition: box-shadow 0.3s ease !important; }
.transition-transform { transition: transform 0.3s ease !important; }

/* Transition Duration */
.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.duration-1000 { transition-duration: 1000ms !important; }

/* Transition Timing */
.ease-linear { transition-timing-function: linear !important; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* ========================================
   OBJECT FIT & POSITION
   ======================================== */

.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

.object-center { object-position: center !important; }
.object-top { object-position: top !important; }
.object-bottom { object-position: bottom !important; }
.object-left { object-position: left !important; }
.object-right { object-position: right !important; }

/* ========================================
   FLOAT & CLEAR
   ======================================== */

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

.clear-left { clear: left !important; }
.clear-right { clear: right !important; }
.clear-both { clear: both !important; }
.clear-none { clear: none !important; }

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


/* ========================================
   IMAGE UTILITIES
   ======================================== */

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  max-width: 100%;
  height: auto;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  -ms-border-radius: 0.375rem;
  -o-border-radius: 0.375rem;
  border-radius: 0.375rem;
}

/* ========================================
   ASPECT RATIO
   ======================================== */

.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }
.aspect-4-3 { aspect-ratio: 4 / 3 !important; }
.aspect-21-9 { aspect-ratio: 21 / 9 !important; }
.aspect-auto { aspect-ratio: auto !important; }

/* ========================================
   LIST STYLE
   ======================================== */

.list-none { list-style-type: none !important; }
.list-disc { list-style-type: disc !important; }
.list-decimal { list-style-type: decimal !important; }
.list-inside { list-style-position: inside !important; }
.list-outside { list-style-position: outside !important; }

/* ========================================
   HOVER UTILITIES
   ======================================== */

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.hover-grow:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.hover-shrink:hover {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

.hover-opacity:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* ========================================
   RESPONSIVE UTILITIES (Mobile First)
   ======================================== */

/* SM - Small devices (≥576px) */
@media (min-width: 576px) {
  .text-sm-left { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-right { text-align: right !important; }
  
  .float-sm-left { float: left !important; }
  .float-sm-right { float: right !important; }
  .float-sm-none { float: none !important; }
}

/* MD - Medium devices (≥768px) */
@media (min-width: 768px) {
  .text-md-left { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right { text-align: right !important; }
  
  .float-md-left { float: left !important; }
  .float-md-right { float: right !important; }
  .float-md-none { float: none !important; }
}

/* LG - Large devices (≥992px) */
@media (min-width: 992px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right { text-align: right !important; }
  
  .float-lg-left { float: left !important; }
  .float-lg-right { float: right !important; }
  .float-lg-none { float: none !important; }
}

/* XL - Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  .text-xl-left { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-right { text-align: right !important; }
  
  .float-xl-left { float: left !important; }
  .float-xl-right { float: right !important; }
  .float-xl-none { float: none !important; }
}

/* ========================================
   PRINT UTILITIES
   ======================================== */

@media print {
  .print-none { display: none !important; }
  .print-block { display: block !important; }
  .print-inline { display: inline !important; }
  .print-inline-block { display: inline-block !important; }
}