@import './input.css';
body { overflow-x: hidden;}

:root {
    --ssg-color-primary: #3758F9;
    --ssg-color-secondary: #13C296;
    --ssg-dark:#111928;
    --ssg-dark-1: #798cab;
    --ssg-dark-2: #1F2A37;
    --ssg-dark-3: #374151;
    --ssg-gray-3: #E5E7EB;
    --ssg-blue-light-5: #E1E8FF;
    --ssg-body-color: #637381;
    --ssg-yellow-dark: #F59E0B;
    --ssg-yellow-dark-title: #9D5425;
    --ssg-yellow-dark-text: #D0915C;
    --ssg-red-dark: #E10E0E;
    --ssg-text-red: #F23030;
    --ssg-text-red-light: #F56060;
    --ssg-green-dark: #1A8245;
    --ssg-green-dark-text: #4BB17B;
    --ssg-green-dark-title: #004434;
    --ssg-cyan: #01A9DB;
    --ssg-cyan-text: #66D1F0;
    --ssg-cyan-title: #0284C7;
    --ssg-light: #efefef;
    --ssg-color-black: #000000;
}


.ssg-left-10 {
    left: calc(var(--spacing) * 10);
}
.ssg-border-r {
    border-right-style: solid;
    border-right-width: 1px;
}

.ssg-text-color-red-600{
    color: var(--color-red-600);
}

.ssg-text-color-red-500{
    color: var(--color-red-500);
}

.ssg-border-gray-400 {
    border-color: var(--color-gray-400);
}

.ssg-border-gray-500 {
    border-color: var(--color-gray-500);
}

.ssg-border-gray-600 {
    border-color: var(--color-gray-600);
}

.dark\:bg-gray-500 {
    &:where(.dark, .dark *) {
     background-color: var(--color-gray-500);
    }
}

.ssg-bg-dark-1 {
    background-color: var(--ssg-dark-1);
}

.ssg-bg-dark-2 {
    background-color: var(--ssg-dark-2);
}

.ssg-bg-dark-3 {
    background-color: var(--ssg-dark-3);
}

.dark\:ssg-bg-dark-2 {
    &:where(.dark, .dark *) {
        background-color: var(--ssg-dark-2);
    }
}

.dark\:ssg-bg-dark-3 {
    &:where(.dark, .dark *) {
        background-color: var(--ssg-dark-3);
    }
}

.ssg-bg-gray-3 {
    background-color: var(--ssg-gray-3);
}

.ssg-bg-blue-light-5 {
    background-color: var(--ssg-blue-light-5)F;
}

.ssg-text-primary {
    color: var(--ssg-color-primary);
}

.ssg-bg-primary {
    background-color: var(--ssg-color-primary);
}

.ssg-border-primary {
    border-color: var(--ssg-color-primary);
}

.ssg-text-red{
    color: var(--color-red-500);
}

.ssg-bg-secondary {
    background-color: var(--ssg-color-secondary);
}

.ssg-bg-dark {
    background-color: var(--ssg-dark);
}

.ssg-bg-body-color {
    background-color: var(--ssg-body-color);
}

.ssg-bg-gray-3 {
    background-color: var(--ssg-gray-3);
}

.ssg-bg-yellow-dark {
    background-color: var(--ssg-yellow-dark);
}

.ssg-bg-red-dark {
    background-color: var(--ssg-red-dark);
}

.ssg-bg-green-dark {
    background-color: var(--ssg-green-dark);
}

.ssg-bg-cyan {
    background-color: var(--ssg-cyan);
}

.ssg-border-green-dark {
    border-color: var(--ssg-green-dark);
}

.ssg-border-secondary {
    border-color: var(--ssg-color-secondary);
}

.ssg-border-yellow-dark {
    border-color: var(--ssg-yellow-dark);
}

.ssg-border-red-dark {
    border-color: var(--ssg-red-dark);
}

.ssg-border-cyan {
    border-color: var(--ssg-cyan);
}

.ssg-border-dark {
    border-color: var(--ssg-dark);
}

.ssg-border-body-color {
    border-color: var(--ssg-body-color);
}

.ssg-border-light {
    border-color: var(--ssg-light);
}

.ssg-text-green-dark {
    color: var(--ssg-green-dark);
}

.ssg-text-red {
    color: var(--ssg-text-red);
}

.ssg-text-red-dark {
    color: var(--ssg-red-dark);
}

.ssg-text-red-light {
    color: var(--ssg-text-red-light);
}

.ssg-text-secondary {
    color: var(--ssg-color-secondary);
}

.ssg-text-yellow-dark {
    color: var(--ssg-yellow-dark);
}

.ssg-text-cyan {
    color: var(--ssg-cyan);
}

.ssg-text-dark {
    color: var(--ssg-dark);
}

.ssg-text-body-color {
    color: var(--ssg-body-color);
}

.ssg-bg-primary\/10 {
    background-color: color-mix(in oklab, var(--ssg-color-primary) 10%, transparent);
}

.ssg-bg-secondary\/10 {
    background-color: color-mix(in oklab, var(--ssg-color-secondary) 10%, transparent);
}

.ssg-bg-dark\/10 {
    background-color: color-mix(in oklab, var(--ssg-dark) 10%, transparent);
}

.ssg-bg-body-color\/10 {
    background-color: color-mix(in oklab, var(--ssg-body-color) 10%, transparent);
}

.ssg-bg-gray-3\/50 {
    background-color: color-mix(in oklab, var(--ssg-gray-3) 50%, transparent);
}

.ssg-bg-yellow-dark\/10 {
    background-color: color-mix(in oklab, var(--ssg-yellow-dark) 10%, transparent);
}

.ssg-bg-red-dark\/10 {
    background-color: color-mix(in oklab, var(--ssg-red-dark) 10%, transparent);
}

.ssg-bg-green-dark\/10 {
    background-color: color-mix(in oklab, var(--ssg-green-dark) 10%, transparent);
}

.ssg-bg-cyan\/10 {
    background-color: color-mix(in oklab, var(--ssg-cyan) 10%, transparent);
}

.ssg-bg-neutral-primary-soft {
    background-color: oklch(21% .034 264.665);
}
/* Khi checkbox bên trong row được tick, đổi màu row */
tr:has(.ssg-checkbox:checked) {
  background-color: var(--color-blue-100) !important; 
  color: var(--color-black );
}

.ssg-rounded-s-lg {
    border-start-start-radius: var(--radius-lg);
    border-end-start-radius: var(--radius-lg);
}

.ssg-rounded-e-lg {
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
}

.ssg-pt-4 {
    padding-top: calc(var(--spacing) * 4);
}

.ssg-ml-2 {
    margin-left: calc(var(--spacing) * 2);
} 

.ssg-mb-2 {
    margin-bottom: calc(var(--spacing) * 2) !important;
}

.ssg-px-5 {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
} 

.ssg-px-10 {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
}

.ssg-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ssg-top-25 {
    top: 25px;
}

.ssg-ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
}

.ssg-ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
}

.ssg-bottom-2\.5 {
    bottom: calc(var(--spacing) * 2.5);
}

.ssg-end-2\.5 {
    inset-inline-end: calc(var(--spacing) * 2.5);
}

.ssg-pl-12 {
    padding-left: calc(var(--spacing) * 12);
}

.ssg-pr-5 {
    padding-right: calc(var(--spacing) * 5);
}

.ssg-p-5{
    padding: calc(var(--spacing) * 5);
}

.ssg-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ssg-rounded-none {
    border-radius: 0;
}

.ssg-rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ssg-rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ssg-label-page{
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ssg-color-black);
}

.dark .ssg-label-page{
    color: var(--color-white);
}

/* Base style */
.ssg-checkbox-dot {
    position: absolute;
    left: 0.25rem;   /* left-1 */
    top: 0.25rem;    /* top-1 */
    width: 1.5rem;   /* w-6 */
    height: 1.5rem;  /* h-6 */
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    transition: all 0.2s;
}

/* Dark mode */
.dark .ssg-checkbox-dot {
    background-color: var(--dark-4, #2f2f2f);
}

/* When input is checked */
input:checked ~ .ssg-checkbox-dot {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--ssg-color-primary); /* primary */
}

/* Icon switching */
input:checked ~ .ssg-checkbox-dot .active {
    display: block;
}

input:checked ~ .ssg-checkbox-dot .inactive {
    display: none;
}

.ssg-shadow-1 {
    --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(166, 175, 195, 0.40));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ssg-select-option {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssg-select-option:hover {
    background-color: var(--color-gray-100);
    color: var(--color-blue-700);
}

.dark .ssg-select-option {
    color: var(--color-white);
}

.dark .ssg-select-option:hover {
    background-color: var(--color-gray-700);
    color: var(--color-blue-500);
}

.ssg-select-dropdown {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: 0.25rem; /* mt-1 */
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 18rem; /* h-72 */
    overflow-y: auto;
    
}

/* Dark mode */
.dark .ssg-select-dropdown {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-300);
}

.ssg-multi-option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); /* py-2 px-4 */
    cursor: pointer;
}

/* Hover light mode */
.ssg-multi-option-item:hover {
    background-color: var(--color-gray-100);
}

/* Dark mode */
.dark .ssg-multi-option-item {
    color: var(--color-white);
}

.dark .ssg-multi-option-item:hover {
    background-color: var(--color-gray-700);
}

.ssg-tag {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px); /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    margin-right: calc(var(--spacing) * 1);
}

/* Dark mode */
.dark .ssg-tag {
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-200);
}

.ssg-checkbox-label {
  display: flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
  color: rgb(31 41 55); /* text-dark */
}

.dark .ssg-checkbox-label {
  color: var(--color-white);
}

.ssg-checkbox-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0; /* tương đương sr-only cho checkbox */
}

.ssg-checkbox-box {
  margin-right: 0.625rem; /* mr-2.5 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  border-radius: 0.125rem; /* rounded-sm */
  border: 1px solid rgb(209 213 219); /* border-gray-300 */
}

.dark .ssg-checkbox-box {
  border-color: rgb(75 85 99); /* dark:border-dark-3 */
}

.ssg-radio{
    margin-right: 0.625rem; /* mr-2.5 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    border-radius: calc(infinity * 1px); /* rounded-full */
    border: 1px solid rgb(209 213 219); /* border-gray-300 */
}

.ssg-input-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8125rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #1f2937; /* text-dark */
}

.dark .ssg-input-label {
    color: var(--color-white); /* dark:text-white */
}

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

.ssg-breadcrumb-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--tw-prose-body, #6b7280); /* text-body-color */
    text-decoration: none;
}

.ssg-breadcrumb-link:hover {
    color: var(--color-blue-500); /* hover:text-blue-500 */
}

.dark .ssg-breadcrumb-link {
    color: var(--color-white);
}

.dark .ssg-breadcrumb-link:hover {
    color: var(--color-blue-700); /* dark:hover:text-blue-600 */
}

.ssg-breadcrumb-separator {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: var(--tw-prose-body, #6b7280);
}

.dark .ssg-breadcrumb-separator {
    color: var(--color-white);
}

.ssg-breadcrumb-current {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
}

.dark .ssg-breadcrumb-current {
    color: var(--color-white);
}

.ssg-dialog-btn {
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: var(--color-blue-500); /* ssg-bg-primary */
    padding: 0.375rem 0.625rem; /* px-2.5 py-1.5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600;
    color: var(--color-white);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); /* inset-ring */
}

.ssg-dialog-btn:hover {
    background-color: var(--color-blue-200); /* hover:bg-blue-100/20 */
}

.ssg-dialog-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(17,24,39,0.5); /* bg-gray-900/50 */
    transition: opacity 0.2s ease-in;
}

[data-closed] .ssg-dialog-backdrop {
    opacity: 0;
}

.ssg-dialog-panel {
    position: relative;
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-800); /* bg-gray-800 */
    text-align: left;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* shadow-xl */
    outline: 1px solid rgba(255,255,255,0.1); /* outline */
    transition: all 0.3s ease-out;
}

[data-closed] .ssg-dialog-panel {
    transform: translateY(1rem);
    opacity: 0;
}

.sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.dialog-sm { max-width: 24rem; }   /* sm:max-w-sm */
.dialog-lg { max-width: 32rem; }   /* sm:max-w-lg */
.dialog-xl { max-width: 36rem; }   /* sm:max-w-xl */
.dialog-2xl { max-width: 42rem; }  /* sm:max-w-2xl */
.dialog-full { width: 100%; height: 100vh; }
.dialog-right { margin-left: auto; width: 50%; height: 100vh; }
.dialog-left { margin-right: auto; width: 50%; height: 100vh; }

.ssg-dialog-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px); /* rounded-full */
    background-color: rgba(239, 68, 68, 0.1); /* bg-red-500/10 */
    width: calc(var(--spacing) * 10); 
    height: calc(var(--spacing) * 10); /* size-10 */
    margin: 0 auto; /* sm:mx-0 override margin nếu cần */
    flex-shrink: 0;
}

.ssg-dialog-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    color: var(--ssg-red-dark); /* text-red-400 */
}

.ssg-dialog-action {
    display: inline-flex;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    width: 100%;
    margin-top: 0.75rem;
}

.ssg-dialog-action:hover { opacity: 0.9; }

.ssg-dialog-action-deactivate {
    background-color: var(--color-red-500); /* bg-red-500 */
    color: var(--color-white);
}

.ssg-dialog-action-deactivate:hover {
    background-color: var(--color-red-400); /* hover:bg-red-400 */
}

.ssg-dialog-action-cancel {
    background-color: var(--color-gray-500); /* bg-gray-500 */
    color: var(--color-gray-900); /* text-gray-900 */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); /* inset-ring */
}

.ssg-dialog-action-cancel:hover {
    background-color: rgba(255,255,255,0.2); /* hover:bg-white/20 */
}

@media (min-width: 640px) {
    .sm\:w-auto { width: auto; }
    .sm\:ml-3 { margin-left: 0.75rem; }
    .sm\:mt-0 { margin-top: 0; }
}

.ssg-badge {
    display: inline-block;
    margin: 0.5rem; /* m-2 */
    border-radius: var(--radius-sm); /* rounded-sm */
    border: 1px solid transparent;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); /* py-1 px-2.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    line-height: 1rem;
}

.ssg-badge-border {
    display: inline-block;
    margin: 0.5rem; /* m-2 */
    border-radius: var(--radius-sm); /* rounded-sm */
    border: 1px solid;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); /* py-1 px-2.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    line-height: 1rem;
}

.ssg-badge-oval {
    display: inline-block;
    margin: 0.5rem; /* m-2 */
    border-radius: calc(infinity * 1px); /* rounded-full */
    border: 1px solid transparent;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); /* py-1 px-2.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    line-height: 1rem;
}

.ssg-badge-oval-border {
    display: inline-block;
    margin: 0.5rem; /* m-2 */
    border-radius: calc(infinity * 1px); /* rounded-full */
    border: 1px solid;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); /* py-1 px-2.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    line-height: 1rem;
}

.ssg-toast {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 422px;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem; /* rounded-lg */
  background-color: var(--color-white);
  padding: 0.5rem; /* p-2 */
  padding-left: 1.25rem;  /* ssg-px-5 */
  padding-right: 1.25rem; /* ssg-px-5 */
  box-shadow: var(--shadow-pricing-4);
}

.ssg-toast .ssg-toast-icon {
  margin-right: 1.25rem; /* mr-5 */
  flex: 0 0 auto;
  height: 2.5rem; /* h-10 */
  width: 2.5rem;  /* w-10, max-w-[40px] */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* rounded-full */
}

.ssg-toast .ssg-toast-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ssg-toast h6 {
  font-size: 1rem; /* text-base */
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-dark */
}

.ssg-toast p {
  font-size: 0.875rem; /* text-sm */
  color: var(--color-gray-500); /* text-body-color */
}

.ssg-toast button {
  color: var(--color-gray-400); /* text-dark-5 */
}

.ssg-toast button:hover {
  color: var(--color-red-500); /* hover:text-red */
}

/* Dark mode */
.dark .ssg-toast {
  border-color: var(--color-gray-800); /* dark:border-dark-3 */
  box-shadow: var(--shadow-box-dark);
}

.dark .ssg-toast p {
  color: var(--color-gray-400); /* dark:text-dark-6 */
}

.ssg-alert-transparent {
  display: flex;
  width: 100%;
  border-left: 6px solid transparent;
  border-radius: 0.5rem;
  background-color: var(--color-white);
  padding: 2rem 1.75rem; /* px-7 py-8 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .ssg-alert-transparent {
    padding: 2.25rem; /* md:p-9 */
  }
}

.dark .ssg-alert-transparent {
  background-color: var(--ssg-dark-2);
}
/* ALERT */
.ssg-alert {
  display: flex;
  width: 100%;
  border-left-width: 6px;
  border-left-style: solid;
  border-radius: 0.5rem;
  background-color: white;
  padding: 32px 28px; /* py-8 px-7 */
}

/* ICON BOX CHUNG */
.ssg-alert-icon {
  margin-right: 1.25rem;
  display: flex;
  height: 34px;
  max-width: 34px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
}

/* WARNING */
.ssg-alert-warning-title {
  color: var(--ssg-yellow-dark-title);
}
.ssg-alert-warning-text {
  color: var(--ssg-yellow-dark-text);
}

.ssg-alert-warning {
  border-left-color: var(--ssg-yellow-dark);
  background-color: rgba(255, 193, 7, 0.1); /* yellow-dark/10 */
}

.ssg-alert-warning .ssg-alert-icon {
  background-color: var(--ssg-yellow-dark);
  color: var(--ssg-yellow-dark, white);
}

.ssg-alert-warning-title {
  color: var(--ssg-yellow-dark-title);
}

/* ERROR */
.ssg-alert-error-title {
  color: var(--ssg-text-red);
}

.ssg-alert-error-text {
  color: var(--ssg-red-text-light);
}

.ssg-alert-error {
  border-left-color: var(--ssg-red-dark);
  background-color: rgba(220, 38, 38, 0.1); /* red-dark/10 */
}

.ssg-alert-error .ssg-alert-icon {
  background-color: var(--ssg-red-dark);
  color: var(--ssg-red-dark, white);
}

.ssg-alert-red-title {
  color: var(--ssg-red-dark-title);
}

.ssg-alert-red-text {
  color: var(--ssg-red-text-light);
}
/* SUCCESS */
.ssg-alert-success-title {
  color: var(--ssg-green-dark-title);
}
.ssg-alert-success-text {
  color: var(--ssg-green-dark-text);
}

.ssg-alert-success {
  border-left-color: var(--ssg-green-dark);
  background-color: rgba(75, 177, 123, 0.1); /* green-dark/10 */
}

.ssg-alert-success .ssg-alert-icon {
  background-color: var(--ssg-green-dark);
  color: var(--ssg-green-dark, white);
}

.ssg-alert-success-title {
  color: var(--ssg-green-dark-title);
}
/* INFO */
.ssg-alert-info-text {
  color: var(--ssg-cyan-text);
}

.ssg-alert-info {
  border-left-color: var(--ssg-cyan);
  background-color: rgba(6, 182, 212, 0.1); /* cyan/10 */
}

.ssg-alert-info .ssg-alert-icon {
  background-color: var(--ssg-cyan);
  color: var(--ssg-cyan, white);
}

.ssg-alert-info-title {
  color: var(--ssg-cyan-title);
}

/* ALERT MINI */
.ssg-alert-mini {
    display: inline-flex;
    padding: 16px 18px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.08);
}

.ssg-alert-mini-text {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.ssg-alert-mini-icon {
    margin-right: 12px;         /* mr-3 */
    display: flex;
    width: 20px;  
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--ssg-red-dark);
    color: var(--ssg-red-dark);
}

/* ERROR */
.ssg-alert-mini-error {
    background-color: color-mix(in oklab, var(--ssg-red-dark) 10%, transparent);
}

.ssg-alert-mini-error-text {
    color: var(--ssg-text-red);
}

.ssg-alert-mini-error-icon {
    background-color: var(--ssg-red-dark);
    color: var(--ssg-red-dark);
}

/* SUCCESS */
.ssg-alert-mini-success {
    background-color: color-mix(in oklab, var(--ssg-green-dark) 10%, transparent);
}

.ssg-alert-mini-success-text {
    color: var(--ssg-green-dark-title);
}

.ssg-alert-mini-success-icon {
    background-color: var(--ssg-green-dark);
    color: var(--ssg-green-dark);
}

/* TOOLTIP */
.ssg-tooltip {
    position: absolute;
    z-index: 20;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: var(--ssg-dark, #1f2937);
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.group:hover .ssg-tooltip {
    opacity: 1;
}

.dark .ssg-tooltip {
    background-color: var(--ssg-dark-2, #111827);
}

.ssg-tooltip-arrow {
    position: absolute;
    z-index: -10;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background-color: var(--ssg-dark, #1f2937);
    border-radius: 2px;
}

.dark .ssg-tooltip-arrow {
    background-color: var(--ssg-dark-2, #111827);
}
/* TOP */
.ssg-tooltip-top {
    bottom: 100%;
    left: 50%;
    margin-bottom: 12px;
    transform: translateX(-50%);
}

.ssg-tooltip-top .ssg-tooltip-arrow {
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
/* RIGHT */
.ssg-tooltip-right {
    left: 100%;
    top: 50%;
    margin-left: 12px;
    transform: translateY(-50%);
}

.ssg-tooltip-right .ssg-tooltip-arrow {
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
/* BOTTOM */
.ssg-tooltip-bottom {
    top: 100%;
    left: 50%;
    margin-top: 12px;
    transform: translateX(-50%);
}

.ssg-tooltip-bottom .ssg-tooltip-arrow {
    top: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
/* LEFT */
.ssg-tooltip-left {
    right: 100%;
    top: 50%;
    margin-right: 12px;
    transform: translateY(-50%);
}

.ssg-tooltip-left .ssg-tooltip-arrow {
    right: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* ===== Table Wrapper ===== */
.ssg-table-wrapper {
    position: relative;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 0.5rem; /* sm:rounded-lg */
    max-height: 500px;
}

/* ===== Table Base ===== */
.ssg-table {
    width: 100%;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--color-gray-500); /* text-gray-500 */
}

.dark .ssg-table {
    color: var(--color-white);
}

/* ===== THEAD ===== */
.ssg-thead {
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--color-gray-700); /* text-gray-700 */
    background-color: var(--color-gray-100); /* bg-gray-50 */
    position: sticky;
    top: 0;
}

/* Dark mode */
.dark .ssg-thead {
    background-color: var(--color-gray-900); /* dark:bg-gray-900 */
    color: var(--color-gray-400); /* dark:text-gray-400 */
}

/* ===== Table Row ===== */
.ssg-row {
    background-color: var(--color-white);
    border-bottom: 1px solid #e5e7eb;
}

.dark .ssg-row {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

.ssg-row:hover {
    background-color: var(--color-gray-100);
}

.dark .ssg-row:hover {
    background-color: var(--color-gray-600);
}

/* ===== TD / TH padding ===== */
.ssg-td {
    padding: 0 1rem; /* py-1 px-6 */
}

.ssg-th {
    padding: 0 1rem; /* py-4 px-6 */
    white-space: nowrap;
}

.ssg-row-success {
    background-color: color-mix(in oklab, var(--ssg-green-dark-text) 10%, transparent) !important;
}

.ssg-row-error {
    background-color: color-mix(in oklab, var(--ssg-red-dark) 10%, transparent) !important;
}

.ssg-row-warning {
    background-color: color-mix(in oklab, var(--ssg-yellow-dark) 10%, transparent) !important;
}

.ssg-td-text {
  text-align: left;
}

.ssg-td-number {
  text-align: right;
}

.ssg-td-center {
  text-align: center;
}

.ssg-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* ===== Checkbox ===== */
.ssg-checkbox {
    width: 1rem;
    height: 1rem;
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.125rem;
}

.ssg-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-blue-300);
}

.dark .ssg-checkbox {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
}

/* ===== Action Icon Buttons ===== */
.ssg-icon-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
}

.ssg-icon-blue {
    color: var(--color-primary); /* #3758F9 */
}

.ssg-icon-blue:hover {
    color: var(--color-blue-600);
}

.ssg-icon-red {
    color: var(--ssg-red-dark-title);
}

.ssg-icon-red:hover {
    color: var(--ssg-red-dark);
}

/* PAGINATION */
.ssg-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem; /* px-3 */
  height: 2rem; /* h-8 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  background-color: #ffffff; /* bg-white */
  color: #6b7280; /* text-gray-500 */
  text-decoration: none;
  line-height: 2rem;
  transition: all 0.2s;
}

.ssg-pagination-btn:hover {
  background-color: #f3f4f6; /* hover:bg-gray-100 */
  color: #374151; /* hover:text-gray-700 */
}

/* Các nút active */
.ssg-pagination-btn-active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  height: 2rem;
  border: 1px solid #d1d5db;
  background-color: #eff6ff; /* bg-blue-50 */
  color: #2563eb; /* text-blue-600 */
}

.ssg-pagination-btn-active:hover {
  background-color: #dbeafe; /* hover:bg-blue-100 */
  color: #1d4ed8; /* hover:text-blue-700 */
}

/* Bo tròn đầu/cuối */
.ssg-rounded-s-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.ssg-rounded-e-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Select box */
.ssg-select-pagesize {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: transparent;
  height: 2rem;
  padding: 0 1rem; /* px-4 */
  color: #111827; /* text-dark */
  outline: none;
}

/* Buttons */
.ssg-button{
    border-radius: 0.5rem;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    margin-bottom: 10px;
}

.ssg-btn-primary{
    background-color: var(--ssg-color-primary);
    color: var(--color-white);
}

.ssg-btn-primary:hover{
    background-color: var(--color-blue-300);
}

.ssg-btn-danger{
    background-color: var(--ssg-red-dark);
    color: var(--color-white);
}

.ssg-btn-danger:hover{
    background-color: var(--ssg-text-red-light);
}

.ssg-btn-success{
    background-color: var(--ssg-green-dark);
    color: var(--color-white);
}

.ssg-btn-success:hover{
    background-color: var(--ssg-green-dark-text);
}

.ssg-btn-warning{
    background-color: var(--ssg-yellow-dark);
    color: var(--color-white);
}

.ssg-btn-warning:hover{
    background-color: var(--ssg-yellow-dark-text);
}

.ssg-btn-info{
    background-color: var(--ssg-cyan);
    color: var(--color-white);
}

.ssg-btn-info:hover{
    background-color: var(--ssg-cyan-text);
}

.ssg-btn-cancel{
    background-color: var(--color-gray-400);
    color: var(--color-white);
}

.ssg-btn-cancel:hover{
    background-color: var(--color-gray-600);
}

.ssg-btn-primary-no-text{
    border: 1px solid var(--ssg-color-primary);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-primary-no-text{
    color: var(--color-white);
}

.ssg-btn-primary-no-text:hover{
    background-color: var(--color-blue-300);
    color: var(--color-white);
}

.ssg-btn-danger-no-text{
    border: 1px solid var(--ssg-red-dark);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-danger-no-text{
    color: var(--color-white);
}

.ssg-btn-danger-no-text:hover{
    background-color: var(--ssg-text-red-light);
    color: var(--color-white);
}

.ssg-btn-success-no-text{
    border: 1px solid var(--ssg-green-dark);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-success-no-text{
    color: var(--color-white);
}

.ssg-btn-success-no-text:hover{
    background-color: var(--ssg-green-dark-text);
    color: var(--color-white);
}

.ssg-btn-warning-no-text{
    border: 1px solid var(--ssg-yellow-dark);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-warning-no-text{
    color: var(--color-white);
}

.ssg-btn-warning-no-text:hover{
    background-color: var(--ssg-yellow-dark-text);
    color: var(--color-white);
}

.ssg-btn-info-no-text{
    border: 1px solid var(--ssg-cyan);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-info-no-text{
    color: var(--color-white);
}

.ssg-btn-info-no-text:hover{
    background-color: var(--ssg-cyan-text);
    color: var(--color-white);
}

.ssg-btn-cancel-no-text{
    border: 1px solid var(--color-gray-400);
    color: var(--ssg-color-black);
}

.dark .ssg-btn-cancel-no-text{
    color: var(--color-white);
}

.ssg-btn-cancel-no-text:hover{
    background-color: var(--color-gray-600);
    color: var(--color-white);
}

/* PROCCESSING STAGE */
.ssg-processing-horizontal {
    position: relative;
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
}

.ssg-processing-vertical {
    display: flex;
    align-items: center;
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
}

.ssg-step {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: calc(infinity * 1px); /* rounded-full */
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    flex-shrink: 0;
    inset-inline-start: calc(var(--spacing) * -4);
}

/* các trạng thái */
.ssg-step-success { 
    background-color: var(--ssg-green-dark);
    color: var(--color-white);
}
.ssg-step-warning { 
    background-color: var(--ssg-yellow-dark);
    color: var(--color-white);
}
.ssg-step-cancel  { 
    background-color: var(--color-gray-400);
    color: var(--color-white);
}

.ssg-step-label {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
}

.ssg-step-content {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

/* Li step chung - layout flex + pseudo line */
.ssg-step-li-success,
.ssg-step-li-warning {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
}

.ssg-step-li-success::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    border-bottom: 4px solid #F59E0B; /* yellow */
    margin-left: 1rem;
    border-radius: 9999px;
}

.ssg-step-li-warning::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    border-bottom: 4px solid #D1D5DB; /* gray-300 */
    margin-left: 1rem;
    border-radius: 9999px;
}

/* Circle step chung */
.ssg-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;    /* 8 units Tailwind */
    height: 2rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Step colors */
.ssg-step-success {
    background-color: var(--ssg-green-dark); /* green */
    color: var(--color-white);
}

.ssg-step-warning {
    background-color: var(--ssg-yellow-dark); /* yellow */
    color: var(--color-white);
}

.ssg-step-cancel {
    background-color: var(--color-gray-400); /* red */
    color: var(--color-white);
}

/* Icon */
.ssg-step-icon {
    width: 1.25rem; /* Tailwind w-5 */
    height: 1.25rem; /* Tailwind h-5 */
}