@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

*, ::before, ::after{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

:root {
    --background: 220 20% 97%;
    --foreground: 222 47% 11%;
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --accent: 280 65% 60%;
  }

.container{
    width: 100%;
}

@media (min-width: 640px){

    .container{
        max-width: 640px;
    }
}

@media (min-width: 768px){

    .container{
        max-width: 768px;
    }
}

@media (min-width: 1024px){

    .container{
        max-width: 1024px;
    }
}

@media (min-width: 1280px){

    .container{
        max-width: 1280px;
    }
}

@media (min-width: 1536px){

    .container{
        max-width: 1536px;
    }
}

.pointer-events-none{
    pointer-events: none;
}

.visible{
    visibility: visible;
}

.collapse{
    visibility: collapse;
}

.static{
    position: static;
}

.fixed{
    position: fixed;
}

.absolute{
    position: absolute;
}

.relative{
    position: relative;
}

.sticky{
    position: sticky;
}

.inset-0{
    inset: 0px;
}

.-top-6{
    top: -1.5rem;
}

.bottom-3{
    bottom: 0.75rem;
}

.bottom-4{
    bottom: 1rem;
}

.left-0{
    left: 0px;
}

.left-1\/2{
    left: 50%;
}

.left-3{
    left: 0.75rem;
}

.left-4{
    left: 1rem;
}

.right-3{
    right: 0.75rem;
}

.right-4{
    right: 1rem;
}

.top-0{
    top: 0px;
}

.top-1\/2{
    top: 50%;
}

.top-4{
    top: 1rem;
}

.isolate{
    isolation: isolate;
}

.z-0{
    z-index: 0;
}

.z-10{
    z-index: 10;
}

.z-20{
    z-index: 20;
}

.z-30{
    z-index: 30;
}

.z-40{
    z-index: 40;
}

.z-50{
    z-index: 50;
}

.z-\[100\]{
    z-index: 100;
}

.col-span-2{
    grid-column: span 2 / span 2;
}

.m-0{
    margin: 0px;
}

.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.mb-1{
    margin-bottom: 0.25rem;
}

.mb-16{
    margin-bottom: 4rem;
}

.mb-2{
    margin-bottom: 0.5rem;
}

.mb-3{
    margin-bottom: 0.75rem;
}

.mb-4{
    margin-bottom: 1rem;
}

.mb-6{
    margin-bottom: 1.5rem;
}

.mb-8{
    margin-bottom: 2rem;
}

.ml-1{
    margin-left: 0.25rem;
}

.ml-2{
    margin-left: 0.5rem;
}

.ml-8{
    margin-left: 2rem;
}

.mt-0\.5{
    margin-top: 0.125rem;
}

.mt-1{
    margin-top: 0.25rem;
}

.mt-12{
    margin-top: 3rem;
}

.mt-2{
    margin-top: 0.5rem;
}

.mt-3{
    margin-top: 0.75rem;
}

.mt-4{
    margin-top: 1rem;
}

.mt-6{
    margin-top: 1.5rem;
}

.mt-8{
    margin-top: 2rem;
}

.block{
    display: block;
}

.inline-block{
    display: inline-block;
}

.inline{
    display: inline;
}

.flex{
    display: flex;
}

.inline-flex{
    display: inline-flex;
}

.table{
    display: table;
}

.\!grid{
    display: grid !important;
}

.grid{
    display: grid;
}

.hidden{
    display: none;
}

.aspect-square{
    aspect-ratio: 1 / 1;
}

.h-1{
    height: 0.25rem;
}

.h-1\.5{
    height: 0.375rem;
}

.h-10{
    height: 2.5rem;
}

.h-12{
    height: 3rem;
}

.h-14{
    height: 3.5rem;
}

.h-16{
    height: 4rem;
}

.h-2{
    height: 0.5rem;
}

.h-2\.5{
    height: 0.625rem;
}

.h-20{
    height: 5rem;
}

.h-4{
    height: 1rem;
}

.h-5{
    height: 1.25rem;
}

.h-6{
    height: 1.5rem;
}

.h-7{
    height: 1.75rem;
}

.h-8{
    height: 2rem;
}

.h-\[400px\]{
    height: 400px;
}

.h-full{
    height: 100%;
}

.h-max{
    height: -moz-max-content;
    height: max-content;
}

.min-h-screen{
    min-height: 100vh;
}

.w-1\/2{
    width: 50%;
}

.w-10{
    width: 2.5rem;
}

.w-12{
    width: 3rem;
}

.w-14{
    width: 3.5rem;
}

.w-16{
    width: 4rem;
}

.w-2\.5{
    width: 0.625rem;
}

.w-20{
    width: 5rem;
}

.w-4{
    width: 1rem;
}

.w-40{
    width: 10rem;
}

.w-5{
    width: 1.25rem;
}

.w-56{
    width: 14rem;
}

.w-6{
    width: 1.5rem;
}

.w-7{
    width: 1.75rem;
}

.w-8{
    width: 2rem;
}

.w-80{
    width: 20rem;
}

.w-\[800px\]{
    width: 800px;
}

.w-full{
    width: 100%;
}

.min-w-\[140px\]{
    min-width: 140px;
}

.max-w-2xl{
    max-width: 42rem;
}

.max-w-4xl{
    max-width: 56rem;
}

.max-w-6xl{
    max-width: 72rem;
}

.max-w-7xl{
    max-width: 80rem;
}

.flex-1{
    flex: 1 1 0%;
}

.flex-\[2\]{
    flex: 2;
}

.flex-shrink{
    flex-shrink: 1;
}

.flex-shrink-0{
    flex-shrink: 0;
}

.shrink-0{
    flex-shrink: 0;
}

.border-collapse{
    border-collapse: collapse;
}

.-translate-x-1\/2{
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-105{
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-110{
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes spin{

    to{
        transform: rotate(360deg);
    }
}

.animate-spin{
    animation: spin 1s linear infinite;
}

.cursor-default{
    cursor: default;
}

.cursor-move{
    cursor: move;
}

.cursor-pointer{
    cursor: pointer;
}

.resize-none{
    resize: none;
}

.resize{
    resize: both;
}

.snap-x{
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-center{
    scroll-snap-align: center;
}

.list-disc{
    list-style-type: disc;
}

.appearance-none{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.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));
}

.flex-col{
    flex-direction: column;
}

.flex-wrap{
    flex-wrap: wrap;
}

.items-start{
    align-items: flex-start;
}

.items-end{
    align-items: flex-end;
}

.items-center{
    align-items: center;
}

.items-baseline{
    align-items: baseline;
}

.justify-end{
    justify-content: flex-end;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}

.gap-1{
    gap: 0.25rem;
}

.gap-1\.5{
    gap: 0.375rem;
}

.gap-12{
    gap: 3rem;
}

.gap-2{
    gap: 0.5rem;
}

.gap-3{
    gap: 0.75rem;
}

.gap-4{
    gap: 1rem;
}

.gap-6{
    gap: 1.5rem;
}

.gap-8{
    gap: 2rem;
}

.gap-x-6{
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
}

.gap-y-2{
    row-gap: 0.5rem;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.overflow-hidden{
    overflow: hidden;
}

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

.overflow-y-auto{
    overflow-y: auto;
}

.truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-nowrap{
    white-space: nowrap;
}

.whitespace-pre-wrap{
    white-space: pre-wrap;
}

.break-all{
    word-break: break-all;
}

.rounded{
    border-radius: 0.25rem;
}

.rounded-2xl{
    border-radius: 1rem;
}

.rounded-full{
    border-radius: 9999px;
}

.rounded-lg{
    border-radius: 0.5rem;
}

.rounded-md{
    border-radius: 0.375rem;
}

.rounded-xl{
    border-radius: 0.75rem;
}

.rounded-t-xl{
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.border{
    border-width: 1px;
}

.border-2{
    border-width: 2px;
}

.border-4{
    border-width: 4px;
}

.border-b{
    border-bottom-width: 1px;
}

.border-b-2{
    border-bottom-width: 2px;
}

.border-t{
    border-top-width: 1px;
}

.border-none{
    border-style: none;
}

.border-blue-100{
    --tw-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200{
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-200\/50{
    border-color: rgb(191 219 254 / 0.5);
}

.border-gray-100{
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-200\/50{
    border-color: rgb(187 247 208 / 0.5);
}

.border-green-500{
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-indigo-200\/50{
    border-color: rgb(199 210 254 / 0.5);
}

.border-orange-200\/50{
    border-color: rgb(254 215 170 / 0.5);
}

.border-primary{
    --tw-border-opacity: 1;
    border-color: rgb(35 167 211 / var(--tw-border-opacity, 1));
}

.border-primary\/20{
    border-color: rgb(35 167 211 / 0.2);
}

.border-primary\/30{
    border-color: rgb(35 167 211 / 0.3);
}

.border-red-400{
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-transparent{
    border-color: transparent;
}

.border-white{
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/20{
    border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30{
    border-color: rgb(255 255 255 / 0.3);
}

.border-white\/40{
    border-color: rgb(255 255 255 / 0.4);
}

.border-yellow-200\/50{
    border-color: rgb(254 240 138 / 0.5);
}

.border-t-primary{
    --tw-border-opacity: 1;
    border-top-color: rgb(35 167 211 / var(--tw-border-opacity, 1));
}

.border-t-transparent{
    border-top-color: transparent;
}

.border-t-white{
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-black\/60{
    background-color: rgb(0 0 0 / 0.6);
}

.bg-blue-50{
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500{
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600{
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-100{
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(35 167 211 / var(--tw-bg-opacity, 1));
}

.bg-primary\/10{
    background-color: rgb(35 167 211 / 0.1);
}

.bg-primary\/5{
    background-color: rgb(35 167 211 / 0.05);
}

.bg-red-50{
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/40{
    background-color: rgb(255 255 255 / 0.4);
}

.bg-white\/80{
    background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90{
    background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/95{
    background-color: rgb(255 255 255 / 0.95);
}

.bg-gradient-to-br{
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-100{
    --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50\/50{
    --tw-gradient-from: rgb(239 246 255 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500{
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-50\/50{
    --tw-gradient-from: rgb(240 253 244 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-50\/50{
    --tw-gradient-from: rgb(238 242 255 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-50\/50{
    --tw-gradient-from: rgb(255 247 237 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/10{
    --tw-gradient-from: rgb(35 167 211 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(35 167 211 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5{
    --tw-gradient-from: rgb(35 167 211 / 0.05) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(35 167 211 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-50\/50{
    --tw-gradient-from: rgb(254 252 232 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary{
    --tw-gradient-to: rgb(35 167 211 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #23A7D3 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-blue-100{
    --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}

.to-primary{
    --tw-gradient-to: #23A7D3 var(--tw-gradient-to-position);
}

.to-transparent{
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white\/50{
    --tw-gradient-to: rgb(255 255 255 / 0.5) var(--tw-gradient-to-position);
}

.object-contain{
    -o-object-fit: contain;
       object-fit: contain;
}

.p-1{
    padding: 0.25rem;
}

.p-1\.5{
    padding: 0.375rem;
}

.p-3{
    padding: 0.75rem;
}

.p-4{
    padding: 1rem;
}

.p-6{
    padding: 1.5rem;
}

.p-8{
    padding: 2rem;
}

.px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4{
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8{
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-0\.5{
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-3\.5{
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.pb-2{
    padding-bottom: 0.5rem;
}

.pb-20{
    padding-bottom: 5rem;
}

.pb-3{
    padding-bottom: 0.75rem;
}

.pb-4{
    padding-bottom: 1rem;
}

.pb-6{
    padding-bottom: 1.5rem;
}

.pl-5{
    padding-left: 1.25rem;
}

.pt-2{
    padding-top: 0.5rem;
}

.pt-3{
    padding-top: 0.75rem;
}

.pt-4{
    padding-top: 1rem;
}

.pt-6{
    padding-top: 1.5rem;
}

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

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

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

.text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-6xl{
    font-size: 3.75rem;
    line-height: 1;
}

.text-\[10px\]{
    font-size: 10px;
}

.text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold{
    font-weight: 700;
}

.font-extrabold{
    font-weight: 800;
}

.font-medium{
    font-weight: 500;
}

.font-normal{
    font-weight: 400;
}

.font-semibold{
    font-weight: 600;
}

.uppercase{
    text-transform: uppercase;
}

.italic{
    font-style: italic;
}

.leading-relaxed{
    line-height: 1.625;
}

.tracking-tight{
    letter-spacing: -0.025em;
}

.tracking-wider{
    letter-spacing: 0.05em;
}

.text-\[\#1f2937\]{
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-blue-500{
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600{
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-gray-300{
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400{
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-500{
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600{
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-indigo-600{
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-orange-500{
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600{
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-primary{
    --tw-text-opacity: 1;
    color: rgb(35 167 211 / var(--tw-text-opacity, 1));
}

.text-red-600{
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-600{
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.underline{
    text-decoration-line: underline;
}

.line-through{
    text-decoration-line: line-through;
}

.accent-primary{
    accent-color: #23A7D3;
}

.opacity-40{
    opacity: 0.4;
}

.opacity-50{
    opacity: 0.5;
}

.opacity-80{
    opacity: 0.8;
}

.shadow-2xl{
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_30px_rgb\(0\2c 0\2c 0\2c 0\.04\)\]{
    --tw-shadow: 0 8px 30px rgb(0,0,0,0.04);
    --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner{
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.outline{
    outline-style: solid;
}

.blur{
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[100px\]{
    --tw-blur: blur(100px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-md{
    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[1px\]{
    --tw-backdrop-blur: blur(1px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity{
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow{
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform{
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300{
    transition-duration: 300ms;
}

.duration-500{
    transition-duration: 500ms;
}

.ease-in-out{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    margin: 0;
    padding: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Outfit', sans-serif;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  border-radius: 12px;
}

/* Notification deep link highlight animation */

.highlight-row td {
    background-color: #e6f7ff !important;
    animation: highlight-pulse 0.5s ease-in-out 2;
}

@keyframes highlight-pulse {
    0% {
        background-color: #e6f7ff;
    }

    50% {
        background-color: #91d5ff;
    }

    100% {
        background-color: #e6f7ff;
    }
}

/* Nâng cấp chiều rộng các modal chức năng lên 80% trên Desktop (trừ các modal confirm/alert nhỏ) */

@media (min-width: 992px) {
    .ant-modal-wrap:not(:has(.ant-modal-confirm)) .ant-modal,
    .ant-modal-root .ant-modal:not(.ant-modal-confirm) {
        width: 80% !important;
        max-width: 1600px !important;
    }
}

.last\:mb-0:last-child{
    margin-bottom: 0px;
}

.last\:border-0:last-child{
    border-width: 0px;
}

.last\:border-b-0:last-child{
    border-bottom-width: 0px;
}

.last\:pb-0:last-child{
    padding-bottom: 0px;
}

.hover\:-translate-y-2:hover{
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover{
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover{
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-dashed:hover{
    border-style: dashed;
}

.hover\:border-blue-400:hover{
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-200:hover{
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover{
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-100:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary\/90:hover{
    background-color: rgb(35 167 211 / 0.9);
}

.hover\:bg-red-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:text-gray-600:hover{
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover{
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:no-underline:hover{
    text-decoration-line: none;
}

.hover\:shadow-\[0_20px_40px_rgb\(0\2c 0\2c 0\2c 0\.08\)\]:hover{
    --tw-shadow: 0 20px 40px rgb(0,0,0,0.08);
    --tw-shadow-colored: 0 20px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover{
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-blue-400:focus{
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.focus\:ring-2:focus{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary\/50:focus{
    --tw-ring-color: rgb(35 167 211 / 0.5);
}

.active\:scale-95:active{
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active{
    --tw-scale-x: 0.98;
    --tw-scale-y: 0.98;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:opacity-70:disabled{
    opacity: 0.7;
}

.group:hover .group-hover\:scale-110{
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(35 167 211 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px){

    .md\:static{
        position: static;
    }

    .md\:mt-0{
        margin-top: 0px;
    }

    .md\:mt-8{
        margin-top: 2rem;
    }

    .md\:block{
        display: block;
    }

    .md\:flex{
        display: flex;
    }

    .md\:w-6\/12{
        width: 50%;
    }

    .md\:w-auto{
        width: auto;
    }

    .md\:min-w-\[180px\]{
        min-width: 180px;
    }

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

    .md\:flex-row{
        flex-direction: row;
    }

    .md\:gap-12{
        gap: 3rem;
    }

    .md\:gap-8{
        gap: 2rem;
    }

    .md\:border-b-0{
        border-bottom-width: 0px;
    }

    .md\:border-r{
        border-right-width: 1px;
    }

    .md\:p-8{
        padding: 2rem;
    }

    .md\:py-12{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .md\:text-left{
        text-align: left;
    }

    .md\:text-2xl{
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .md\:text-4xl{
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .md\:text-base{
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media (min-width: 1024px){

    .lg\:sticky{
        position: sticky;
    }

    .lg\:top-24{
        top: 6rem;
    }

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