:root {
    --swal2-outline: 0 0 0 3px rgba(100, 150, 200, 0.5);
    --swal2-container-padding: 0.625em;
    --swal2-backdrop: rgba(0, 0, 0, 0.4);
    --swal2-backdrop-transition: background-color 0.15s;
    --swal2-width: 32em;
    --swal2-padding: 0 0 1.25em;
    --swal2-border: none;
    --swal2-border-radius: 0.3125rem;
    --swal2-background: white;
    --swal2-color: #545454;
    --swal2-show-animation: swal2-show 0.3s;
    --swal2-hide-animation: swal2-hide 0.15s forwards;
    --swal2-icon-zoom: 1;
    --swal2-icon-animations: true;
    --swal2-title-padding: 0.8em 1em 0;
    --swal2-html-container-padding: 1em 1.6em 0.3em;
    --swal2-input-border: 1px solid #d9d9d9;
    --swal2-input-border-radius: 0.1875em;
    --swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;
    --swal2-input-background: transparent;
    --swal2-input-transition: border-color 0.2s, box-shadow 0.2s;
    --swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;
    --swal2-input-focus-border: 1px solid #b4dbed;
    --swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);
    --swal2-progress-step-background: #add8e6;
    --swal2-validation-message-background: #f0f0f0;
    --swal2-validation-message-color: #666;
    --swal2-footer-border-color: #eee;
    --swal2-footer-background: transparent;
    --swal2-footer-color: inherit;
    --swal2-timer-progress-bar-background: rgba(0, 0, 0, 0.3);
    --swal2-close-button-position: initial;
    --swal2-close-button-inset: auto;
    --swal2-close-button-font-size: 2.5em;
    --swal2-close-button-color: #ccc;
    --swal2-close-button-transition: color 0.2s, box-shadow 0.2s;
    --swal2-close-button-outline: initial;
    --swal2-close-button-box-shadow: inset 0 0 0 3px transparent;
    --swal2-close-button-focus-box-shadow: inset var(--swal2-outline);
    --swal2-close-button-hover-transform: none;
    --swal2-actions-justify-content: center;
    --swal2-actions-width: auto;
    --swal2-actions-margin: 1.25em auto 0;
    --swal2-actions-padding: 0;
    --swal2-actions-border-radius: 0;
    --swal2-actions-background: transparent;
    --swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s;
    --swal2-action-button-hover: black 10%;
    --swal2-action-button-active: black 10%;
    --swal2-confirm-button-box-shadow: none;
    --swal2-confirm-button-border-radius: 0.25em;
    --swal2-confirm-button-background-color: #7066e0;
    --swal2-confirm-button-color: #fff;
    --swal2-deny-button-box-shadow: none;
    --swal2-deny-button-border-radius: 0.25em;
    --swal2-deny-button-background-color: #dc3741;
    --swal2-deny-button-color: #fff;
    --swal2-cancel-button-box-shadow: none;
    --swal2-cancel-button-border-radius: 0.25em;
    --swal2-cancel-button-background-color: #6e7881;
    --swal2-cancel-button-color: #fff;
    --swal2-toast-show-animation: swal2-toast-show 0.5s;
    --swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards;
    --swal2-toast-border: none;
    --swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075)
}

[data-swal2-theme=dark] {
    --swal2-dark-theme-black: #19191a;
    --swal2-dark-theme-white: #e1e1e1;
    --swal2-background: var(--swal2-dark-theme-black);
    --swal2-color: var(--swal2-dark-theme-white);
    --swal2-footer-border-color: #555;
    --swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);
    --swal2-validation-message-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);
    --swal2-validation-message-color: var(--swal2-dark-theme-white);
    --swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)
}

@media(prefers-color-scheme: dark) {
    [data-swal2-theme=auto] {
        --swal2-dark-theme-black: #19191a;
        --swal2-dark-theme-white: #e1e1e1;
        --swal2-background: var(--swal2-dark-theme-black);
        --swal2-color: var(--swal2-dark-theme-white);
        --swal2-footer-border-color: #555;
        --swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);
        --swal2-validation-message-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);
        --swal2-validation-message-color: var(--swal2-dark-theme-white);
        --swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)
    }
}

body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
    overflow: hidden
}

body.swal2-height-auto {
    height: auto !important
}

body.swal2-no-backdrop .swal2-container {
    background-color: rgba(0, 0, 0, 0) !important;
    pointer-events: none
}

body.swal2-no-backdrop .swal2-container .swal2-popup {
    pointer-events: all
}

body.swal2-no-backdrop .swal2-container .swal2-modal {
    box-shadow: 0 0 10px var(--swal2-backdrop)
}

body.swal2-toast-shown .swal2-container {
    box-sizing: border-box;
    width: 360px;
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none
}

body.swal2-toast-shown .swal2-container.swal2-top {
    inset: 0 auto auto 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    inset: 0 0 auto auto
}

body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-left {
    inset: 0 auto auto 0
}

body.swal2-toast-shown .swal2-container.swal2-center-start,
body.swal2-toast-shown .swal2-container.swal2-center-left {
    inset: 50% auto auto 0;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-center {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%)
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
    inset: 50% 0 auto auto;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-start,
body.swal2-toast-shown .swal2-container.swal2-bottom-left {
    inset: auto auto 0 0
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
    inset: auto auto 0 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    inset: auto 0 0 auto
}

@media print {
    body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
        overflow-y: scroll !important
    }

    body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown)>[aria-hidden=true] {
        display: none
    }

    body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) .swal2-container {
        position: static !important
    }
}

div:where(.swal2-container) {
    display: grid;
    position: fixed;
    z-index: 1060;
    inset: 0;
    box-sizing: border-box;
    grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
    height: 100%;
    padding: var(--swal2-container-padding);
    overflow-x: hidden;
    transition: var(--swal2-backdrop-transition);
    -webkit-overflow-scrolling: touch
}

div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
    background: var(--swal2-backdrop)
}

div:where(.swal2-container).swal2-backdrop-hide {
    background: rgba(0, 0, 0, 0) !important
}

div:where(.swal2-container).swal2-top-start,
div:where(.swal2-container).swal2-center-start,
div:where(.swal2-container).swal2-bottom-start {
    grid-template-columns: minmax(0, 1fr) auto auto
}

div:where(.swal2-container).swal2-top,
div:where(.swal2-container).swal2-center,
div:where(.swal2-container).swal2-bottom {
    grid-template-columns: auto minmax(0, 1fr) auto
}

div:where(.swal2-container).swal2-top-end,
div:where(.swal2-container).swal2-center-end,
div:where(.swal2-container).swal2-bottom-end {
    grid-template-columns: auto auto minmax(0, 1fr)
}

div:where(.swal2-container).swal2-top-start>.swal2-popup {
    align-self: start
}

div:where(.swal2-container).swal2-top>.swal2-popup {
    grid-column: 2;
    place-self: start center
}

div:where(.swal2-container).swal2-top-end>.swal2-popup,
div:where(.swal2-container).swal2-top-right>.swal2-popup {
    grid-column: 3;
    place-self: start end
}

div:where(.swal2-container).swal2-center-start>.swal2-popup,
div:where(.swal2-container).swal2-center-left>.swal2-popup {
    grid-row: 2;
    align-self: center
}

div:where(.swal2-container).swal2-center>.swal2-popup {
    grid-column: 2;
    grid-row: 2;
    place-self: center center
}

div:where(.swal2-container).swal2-center-end>.swal2-popup,
div:where(.swal2-container).swal2-center-right>.swal2-popup {
    grid-column: 3;
    grid-row: 2;
    place-self: center end
}

div:where(.swal2-container).swal2-bottom-start>.swal2-popup,
div:where(.swal2-container).swal2-bottom-left>.swal2-popup {
    grid-column: 1;
    grid-row: 3;
    align-self: end
}

div:where(.swal2-container).swal2-bottom>.swal2-popup {
    grid-column: 2;
    grid-row: 3;
    place-self: end center
}

div:where(.swal2-container).swal2-bottom-end>.swal2-popup,
div:where(.swal2-container).swal2-bottom-right>.swal2-popup {
    grid-column: 3;
    grid-row: 3;
    place-self: end end
}

div:where(.swal2-container).swal2-grow-row>.swal2-popup,
div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup {
    grid-column: 1/4;
    width: 100%
}

div:where(.swal2-container).swal2-grow-column>.swal2-popup,
div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup {
    grid-row: 1/4;
    align-self: stretch
}

div:where(.swal2-container).swal2-no-transition {
    transition: none !important
}

div:where(.swal2-container)[popover] {
    width: auto;
    border: 0
}

div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: var(--swal2-width);
    max-width: 100%;
    padding: var(--swal2-padding);
    border: var(--swal2-border);
    border-radius: var(--swal2-border-radius);
    background: var(--swal2-background);
    color: var(--swal2-color);
    font-family: inherit;
    font-size: 1rem;
    container-name: swal2-popup
}

div:where(.swal2-container) div:where(.swal2-popup):focus {
    outline: none
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-loading {
    overflow-y: hidden
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable {
    cursor: grab
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable div:where(.swal2-icon) {
    cursor: grab
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging {
    cursor: grabbing
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging div:where(.swal2-icon) {
    cursor: grabbing
}

div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: var(--swal2-title-padding);
    color: inherit;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    overflow-wrap: break-word;
    cursor: initial
}

div:where(.swal2-container) div:where(.swal2-actions) {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--swal2-actions-justify-content);
    width: var(--swal2-actions-width);
    margin: var(--swal2-actions-margin);
    padding: var(--swal2-actions-padding);
    border-radius: var(--swal2-actions-border-radius);
    background: var(--swal2-actions-background)
}

div:where(.swal2-container) div:where(.swal2-loader) {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: .25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 rgba(0, 0, 0, 0) #2778c4 rgba(0, 0, 0, 0)
}

div:where(.swal2-container) button:where(.swal2-styled) {
    margin: .3125em;
    padding: .625em 1.1em;
    transition: var(--swal2-action-button-transition);
    border: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    font-weight: 500
}

div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
    cursor: pointer
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    border-radius: var(--swal2-confirm-button-border-radius);
    background: initial;
    background-color: var(--swal2-confirm-button-background-color);
    box-shadow: var(--swal2-confirm-button-box-shadow);
    color: var(--swal2-confirm-button-color);
    font-size: 1em
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover {
    background-color: color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-hover))
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):active {
    background-color: color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-active))
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny) {
    border-radius: var(--swal2-deny-button-border-radius);
    background: initial;
    background-color: var(--swal2-deny-button-background-color);
    box-shadow: var(--swal2-deny-button-box-shadow);
    color: var(--swal2-deny-button-color);
    font-size: 1em
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover {
    background-color: color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-hover))
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):active {
    background-color: color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-active))
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
    border-radius: var(--swal2-cancel-button-border-radius);
    background: initial;
    background-color: var(--swal2-cancel-button-background-color);
    box-shadow: var(--swal2-cancel-button-box-shadow);
    color: var(--swal2-cancel-button-color);
    font-size: 1em
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover {
    background-color: color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-hover))
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):active {
    background-color: color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-active))
}

div:where(.swal2-container) button:where(.swal2-styled):focus-visible {
    outline: none;
    box-shadow: var(--swal2-action-button-focus-box-shadow)
}

div:where(.swal2-container) button:where(.swal2-styled)[disabled]:not(.swal2-loading) {
    opacity: .4
}

div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner {
    border: 0
}

div:where(.swal2-container) div:where(.swal2-footer) {
    margin: 1em 0 0;
    padding: 1em 1em 0;
    border-top: 1px solid var(--swal2-footer-border-color);
    background: var(--swal2-footer-background);
    color: var(--swal2-footer-color);
    font-size: 1em;
    text-align: center;
    cursor: initial
}

div:where(.swal2-container) .swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    overflow: hidden;
    border-bottom-right-radius: var(--swal2-border-radius);
    border-bottom-left-radius: var(--swal2-border-radius)
}

div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    width: 100%;
    height: .25em;
    background: var(--swal2-timer-progress-bar-background)
}

div:where(.swal2-container) img:where(.swal2-image) {
    max-width: 100%;
    margin: 2em auto 1em;
    cursor: initial
}

div:where(.swal2-container) button:where(.swal2-close) {
    position: var(--swal2-close-button-position);
    inset: var(--swal2-close-button-inset);
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    overflow: hidden;
    transition: var(--swal2-close-button-transition);
    border: none;
    border-radius: var(--swal2-border-radius);
    outline: var(--swal2-close-button-outline);
    background: rgba(0, 0, 0, 0);
    color: var(--swal2-close-button-color);
    font-family: monospace;
    font-size: var(--swal2-close-button-font-size);
    cursor: pointer;
    justify-self: end
}

div:where(.swal2-container) button:where(.swal2-close):hover {
    transform: var(--swal2-close-button-hover-transform);
    background: rgba(0, 0, 0, 0);
    color: #f27474
}

div:where(.swal2-container) button:where(.swal2-close):focus-visible {
    outline: none;
    box-shadow: var(--swal2-close-button-focus-box-shadow)
}

div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner {
    border: 0
}

div:where(.swal2-container) div:where(.swal2-html-container) {
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: var(--swal2-html-container-padding);
    overflow: auto;
    color: inherit;
    font-size: 1.125em;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    cursor: initial
}

div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea),
div:where(.swal2-container) select:where(.swal2-select),
div:where(.swal2-container) div:where(.swal2-radio),
div:where(.swal2-container) label:where(.swal2-checkbox) {
    margin: 1em 2em 3px
}

div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
    box-sizing: border-box;
    width: auto;
    transition: var(--swal2-input-transition);
    border: var(--swal2-input-border);
    border-radius: var(--swal2-input-border-radius);
    background: var(--swal2-input-background);
    box-shadow: var(--swal2-input-box-shadow);
    color: inherit;
    font-size: 1.125em
}

div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,
div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,
div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important
}

div:where(.swal2-container) input:where(.swal2-input):hover,
div:where(.swal2-container) input:where(.swal2-file):hover,
div:where(.swal2-container) textarea:where(.swal2-textarea):hover {
    box-shadow: var(--swal2-input-hover-box-shadow)
}

div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
    border: var(--swal2-input-focus-border);
    outline: none;
    box-shadow: var(--swal2-input-focus-box-shadow)
}

div:where(.swal2-container) input:where(.swal2-input)::placeholder,
div:where(.swal2-container) input:where(.swal2-file)::placeholder,
div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder {
    color: #ccc
}

div:where(.swal2-container) .swal2-range {
    margin: 1em 2em 3px;
    background: var(--swal2-background)
}

div:where(.swal2-container) .swal2-range input {
    width: 80%
}

div:where(.swal2-container) .swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center
}

div:where(.swal2-container) .swal2-range input,
div:where(.swal2-container) .swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em
}

div:where(.swal2-container) .swal2-input {
    height: 2.625em;
    padding: 0 .75em
}

div:where(.swal2-container) .swal2-file {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background: var(--swal2-input-background);
    font-size: 1.125em
}

div:where(.swal2-container) .swal2-textarea {
    height: 6.75em;
    padding: .75em
}

div:where(.swal2-container) .swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: var(--swal2-input-background);
    color: inherit;
    font-size: 1.125em
}

div:where(.swal2-container) .swal2-radio,
div:where(.swal2-container) .swal2-checkbox {
    align-items: center;
    justify-content: center;
    background: var(--swal2-background);
    color: inherit
}

div:where(.swal2-container) .swal2-radio label,
div:where(.swal2-container) .swal2-checkbox label {
    margin: 0 .6em;
    font-size: 1.125em
}

div:where(.swal2-container) .swal2-radio input,
div:where(.swal2-container) .swal2-checkbox input {
    flex-shrink: 0;
    margin: 0 .4em
}

div:where(.swal2-container) label:where(.swal2-input-label) {
    display: flex;
    justify-content: center;
    margin: 1em auto 0
}

div:where(.swal2-container) div:where(.swal2-validation-message) {
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: .625em;
    overflow: hidden;
    background: var(--swal2-validation-message-background);
    color: var(--swal2-validation-message-color);
    font-size: 1em;
    font-weight: 300
}

div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    content: "!";
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 .625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center
}

div:where(.swal2-container) .swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 1.25em auto;
    padding: 0;
    background: rgba(0, 0, 0, 0);
    font-weight: 600
}

div:where(.swal2-container) .swal2-progress-steps li {
    display: inline-block;
    position: relative
}

div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #2778c4;
    color: #fff;
    line-height: 2em;
    text-align: center
}

div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #2778c4
}

div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step {
    background: var(--swal2-progress-step-background);
    color: #fff
}

div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
    background: var(--swal2-progress-step-background)
}

div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    flex-shrink: 0;
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #2778c4
}

div:where(.swal2-icon) {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 2.5em auto .6em;
    zoom: var(--swal2-icon-zoom);
    border: .25em solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    user-select: none
}

div:where(.swal2-icon) .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em
}

div:where(.swal2-icon).swal2-error {
    border-color: #f27474;
    color: #f27474
}

div:where(.swal2-icon).swal2-error .swal2-x-mark {
    position: relative;
    flex-grow: 1
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: .3125em;
    border-radius: .125em;
    background-color: #f27474
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 1.0625em;
    transform: rotate(45deg)
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: 1em;
    transform: rotate(-45deg)
}

@container swal2-popup style(--swal2-icon-animations:true) {
    div:where(.swal2-icon).swal2-error.swal2-icon-show {
        animation: swal2-animate-error-icon .5s
    }

    div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark {
        animation: swal2-animate-error-x-mark .5s
    }
}

div:where(.swal2-icon).swal2-warning {
    border-color: #f8bb86;
    color: #f8bb86
}

@container swal2-popup style(--swal2-icon-animations:true) {
    div:where(.swal2-icon).swal2-warning.swal2-icon-show {
        animation: swal2-animate-error-icon .5s
    }

    div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content {
        animation: swal2-animate-i-mark .5s
    }
}

div:where(.swal2-icon).swal2-info {
    border-color: #3fc3ee;
    color: #3fc3ee
}

@container swal2-popup style(--swal2-icon-animations:true) {
    div:where(.swal2-icon).swal2-info.swal2-icon-show {
        animation: swal2-animate-error-icon .5s
    }

    div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content {
        animation: swal2-animate-i-mark .8s
    }
}

div:where(.swal2-icon).swal2-question {
    border-color: #87adbd;
    color: #87adbd
}

@container swal2-popup style(--swal2-icon-animations:true) {
    div:where(.swal2-icon).swal2-question.swal2-icon-show {
        animation: swal2-animate-error-icon .5s
    }

    div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content {
        animation: swal2-animate-question-mark .8s
    }
}

div:where(.swal2-icon).swal2-success {
    border-color: #a5dc86;
    color: #a5dc86
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 3.75em;
    height: 7.5em;
    border-radius: 50%
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -0.4375em;
    left: -2.0635em;
    transform: rotate(-45deg);
    transform-origin: 3.75em 3.75em;
    border-radius: 7.5em 0 0 7.5em
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -0.6875em;
    left: 1.875em;
    transform: rotate(-45deg);
    transform-origin: 0 3.75em;
    border-radius: 0 7.5em 7.5em 0
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
    position: absolute;
    z-index: 2;
    top: -0.25em;
    left: -0.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: .25em solid rgba(165, 220, 134, .3);
    border-radius: 50%
}

div:where(.swal2-icon).swal2-success .swal2-success-fix {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: 1.625em;
    width: .4375em;
    height: 5.625em;
    transform: rotate(-45deg)
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
    display: block;
    position: absolute;
    z-index: 2;
    height: .3125em;
    border-radius: .125em;
    background-color: #a5dc86
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 2.875em;
    left: .8125em;
    width: 1.5625em;
    transform: rotate(45deg)
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
    transform: rotate(-45deg)
}

@container swal2-popup style(--swal2-icon-animations:true) {
    div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip {
        animation: swal2-animate-success-line-tip .75s
    }

    div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long {
        animation: swal2-animate-success-line-long .75s
    }

    div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right {
        animation: swal2-rotate-success-circular-line 4.25s ease-in
    }
}

[class^=swal2] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.swal2-show {
    animation: var(--swal2-show-animation)
}

.swal2-hide {
    animation: var(--swal2-hide-animation)
}

.swal2-noanimation {
    transition: none
}

.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.swal2-rtl .swal2-close {
    margin-right: initial;
    margin-left: 0
}

.swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto
}

.swal2-toast {
    box-sizing: border-box;
    grid-column: 1/4 !important;
    grid-row: 1/4 !important;
    grid-template-columns: min-content auto min-content;
    padding: 1em;
    overflow-y: hidden;
    border: var(--swal2-toast-border);
    background: var(--swal2-background);
    box-shadow: var(--swal2-toast-box-shadow);
    pointer-events: all
}

.swal2-toast>* {
    grid-column: 2
}

.swal2-toast h2:where(.swal2-title) {
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial
}

.swal2-toast .swal2-loading {
    justify-content: center
}

.swal2-toast input:where(.swal2-input) {
    height: 2em;
    margin: .5em;
    font-size: 1em
}

.swal2-toast .swal2-validation-message {
    font-size: 1em
}

.swal2-toast div:where(.swal2-footer) {
    margin: .5em 0 0;
    padding: .5em 0 0;
    font-size: .8em
}

.swal2-toast button:where(.swal2-close) {
    grid-column: 3/3;
    grid-row: 1/99;
    align-self: center;
    width: .8em;
    height: .8em;
    margin: 0;
    font-size: 2em
}

.swal2-toast div:where(.swal2-html-container) {
    margin: .5em 1em;
    padding: 0;
    overflow: initial;
    font-size: 1em;
    text-align: initial
}

.swal2-toast div:where(.swal2-html-container):empty {
    padding: 0
}

.swal2-toast .swal2-loader {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    height: 2em;
    margin: .25em
}

.swal2-toast .swal2-icon {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0 .5em 0 0
}

.swal2-toast .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: bold
}

.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top: .875em;
    width: 1.375em
}

.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: .3125em
}

.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: .3125em
}

.swal2-toast div:where(.swal2-actions) {
    justify-content: flex-start;
    height: auto;
    margin: 0;
    margin-top: .5em;
    padding: 0 .5em
}

.swal2-toast button:where(.swal2-styled) {
    margin: .25em .5em;
    padding: .4em .6em;
    font-size: 1em
}

.swal2-toast .swal2-success {
    border-color: #a5dc86
}

.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 1.6em;
    height: 3em;
    border-radius: 50%
}

.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -0.8em;
    left: -0.5em;
    transform: rotate(-45deg);
    transform-origin: 2em 2em;
    border-radius: 4em 0 0 4em
}

.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -0.25em;
    left: .9375em;
    transform-origin: 0 1.5em;
    border-radius: 0 4em 4em 0
}

.swal2-toast .swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-toast .swal2-success .swal2-success-fix {
    top: 0;
    left: .4375em;
    width: .4375em;
    height: 2.6875em
}

.swal2-toast .swal2-success [class^=swal2-success-line] {
    height: .3125em
}

.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
    top: 1.125em;
    left: .1875em;
    width: .75em
}

.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
    top: .9375em;
    right: .1875em;
    width: 1.375em
}

@container swal2-popup style(--swal2-icon-animations:true) {
    .swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
        animation: swal2-toast-animate-success-line-tip .75s
    }

    .swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
        animation: swal2-toast-animate-success-line-long .75s
    }
}

.swal2-toast.swal2-show {
    animation: var(--swal2-toast-show-animation)
}

.swal2-toast.swal2-hide {
    animation: var(--swal2-toast-hide-animation)
}

@keyframes swal2-show {
    0% {
        transform: translate3d(0, -50px, 0) scale(0.9);
        opacity: 0
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1
    }
}

@keyframes swal2-hide {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate3d(0, -50px, 0) scale(0.9);
        opacity: 0
    }
}

@keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }

    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }

    70% {
        top: 2.1875em;
        left: -0.375em;
        width: 3.125em
    }

    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }

    100% {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }

    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }

    100% {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }

    5% {
        transform: rotate(-45deg)
    }

    12% {
        transform: rotate(-405deg)
    }

    100% {
        transform: rotate(-405deg)
    }
}

@keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(0.4);
        opacity: 0
    }

    50% {
        margin-top: 1.625em;
        transform: scale(0.4);
        opacity: 0
    }

    80% {
        margin-top: -0.375em;
        transform: scale(1.15)
    }

    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1
    }
}

@keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg)
    }

    100% {
        transform: rotateY(0)
    }
}

@keyframes swal2-animate-i-mark {
    0% {
        transform: rotateZ(45deg);
        opacity: 0
    }

    25% {
        transform: rotateZ(-25deg);
        opacity: .4
    }

    50% {
        transform: rotateZ(15deg);
        opacity: .8
    }

    75% {
        transform: rotateZ(-5deg);
        opacity: 1
    }

    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-toast-show {
    0% {
        transform: translateY(-0.625em) rotateZ(2deg)
    }

    33% {
        transform: translateY(0) rotateZ(-2deg)
    }

    66% {
        transform: translateY(0.3125em) rotateZ(2deg)
    }

    100% {
        transform: translateY(0) rotateZ(0deg)
    }
}

@keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0
    }
}

@keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }

    54% {
        top: .125em;
        left: .125em;
        width: 0
    }

    70% {
        top: .625em;
        left: -0.25em;
        width: 1.625em
    }

    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }

    100% {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }

    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }

    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }

    100% {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}
        :root {
            /* สีหลัก */
            --primary-color: #b5d2fc;
            --primary-light: #b5d2fc33;
            --primary-dark: #b5d2fc;
            --primary-rgb: 181, 210, 252;

            /* สีรอง */
            --secondary-color: #50b3ca;
            --secondary-rgb: 80, 179, 202;

            --accent-color: #b5d2fc;
            --dark-color: #121212;
            --light-color: #f8f9fa;
            --text-color: #212529;
            --text-light: #6c757d;
            --button-color: #4361ee;
            --button-hover-color: #3a0ca3;
            --link-color: #4361ee;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --border-color: #e5e7eb;
            --card-bg-color: #ffffff;
            --input-bg-color: #ffffff;
            --bg-gradient-start: #0f172a;
            --bg-gradient-end: #1e293b;
        }

        body {
            font-family: 'Kanit', sans-serif;
            background-color: var(--light-color);
            color: var(--text-color);
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

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

        [x-cloak] {
            display: none !important;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.5s ease;
        }

        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
        }

        /* ป้องกันการซูมบนมือถือ */
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        textarea,
        select {
            font-size: 16px !important;
        }

        /* Custom styles for login/register modal */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(var(--primary-rgb), 0.05);
            animation: float 20s infinite linear;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.5;
            }

            50% {
                transform: translateY(-100px) rotate(180deg);
                opacity: 0.8;
            }
        }

        /* Login Modal Styles - ปรับให้กระชับ */
        .login-modal {
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
            display: none;
            animation: fadeIn 0.3s ease;
            z-index: 9999;
            padding: 0.5rem;
        }

        .login-modal.show {
            display: flex !important;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .login-card {
            background: var(--card-bg-color);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.4s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            max-height: 88vh;
            min-height: 380px;
            overflow-y: auto;
            width: 100%;
            max-width: 400px;
            margin: 0.5rem;
        }

        /* สำหรับโทรศัพท์ */
        @media (max-width: 480px) {
            .login-card {
                max-height: 92vh;
                min-height: 360px;
                margin: 0.25rem;
                border-radius: 12px;
                max-width: 98%;
            }
        }

        /* สำหรับคอมพิวเตอร์ขนาดใหญ่ */
        @media (min-width: 1024px) {
            .login-card {
                max-width: 420px;
                max-height: 85vh;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .logo-container {
            display: flex;
            justify-content: center;
            margin-bottom: 0.5rem;
            padding-top: 0.75rem;
        }

        .logo {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2.5px solid var(--primary-color);
            padding: 3px;
            background: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        @media (max-width: 480px) {
            .logo {
                width: 55px;
                height: 55px;
            }
        }

        .site-title {
            font-size: 1.4rem;
            font-weight: bold;
            color: var(--text-color);
            text-align: center;
            margin-bottom: 0.2rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            padding: 0 1rem;
        }

        @media (max-width: 480px) {
            .site-title {
                font-size: 1.3rem;
            }
        }

        .site-subtitle {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 1rem;
            font-size: 0.75rem;
            padding: 0 1rem;
            line-height: 1.3;
        }

        @media (max-width: 480px) {
            .site-subtitle {
                font-size: 0.7rem;
                margin-bottom: 0.9rem;
            }
        }

        /* Navigation Tabs - แสดงเฉพาะเมื่อเป็นหน้า login */
        .nav-tabs {
            display: flex;
            background: var(--light-color);
            border-radius: 8px;
            padding: 3px;
            margin: 0 1.25rem 1rem;
            border: 1px solid var(--border-color);
        }

        @media (max-width: 480px) {
            .nav-tabs {
                margin: 0 1rem 0.9rem;
            }
        }

        .nav-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--text-light);
            text-decoration: none;
            border: none;
            background: none;
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .nav-tab i {
            font-size: 0.8rem;
        }

        @media (max-width: 480px) {
            .nav-tab {
                padding: 7px;
                font-size: 0.75rem;
                gap: 4px;
            }

            .nav-tab i {
                font-size: 0.75rem;
            }
        }

        .nav-tab:hover {
            background: rgba(var(--primary-rgb), 0.08);
            color: var(--primary-color);
        }

        .nav-tab.active {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.25);
        }

        .form-container {
            display: none;
            animation: fadeIn 0.3s ease;
            padding: 0 1.25rem;
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 0 1rem;
            }
        }

        .form-container.active {
            display: block !important;
        }

        .form-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1rem;
            text-align: center;
            line-height: 1.2;
        }

        @media (max-width: 480px) {
            .form-title {
                font-size: 0.95rem;
                margin-bottom: 0.9rem;
            }
        }

        .form-group {
            margin-bottom: 0.75rem;
        }

        @media (max-width: 480px) {
            .form-group {
                margin-bottom: 0.7rem;
            }
        }

        .form-label {
            display: block;
            margin-bottom: 0.3rem;
            color: var(--text-color);
            font-weight: 500;
            font-size: 0.75rem;
            line-height: 1.2;
        }

        @media (max-width: 480px) {
            .form-label {
                font-size: 0.7rem;
                margin-bottom: 0.25rem;
            }
        }

        .input-group {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-icon {
            position: absolute;
            left: 10px;
            color: var(--text-light);
            z-index: 1;
            font-size: 0.8rem;
        }

        @media (max-width: 480px) {
            .input-icon {
                left: 9px;
                font-size: 0.75rem;
            }
        }

        .form-input {
            width: 100%;
            padding: 10px 10px 10px 34px;
            border: 1.5px solid var(--border-color);
            border-radius: 8px;
            background: var(--input-bg-color);
            color: var(--text-color);
            font-size: 16px !important;
            /* ป้องกันซูม */
            transition: all 0.3s ease;
            font-family: 'Kanit', sans-serif;
            line-height: 1.3;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        @media (max-width: 480px) {
            .form-input {
                padding: 9px 9px 9px 32px;
                font-size: 16px !important;
                /* ป้องกันซูม */
                border-radius: 7px;
                height: 38px;
            }
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

        .toggle-password {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            z-index: 1;
            padding: 0;
            font-size: 0.8rem;
            transition: color 0.3s ease;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 480px) {
            .toggle-password {
                right: 9px;
                font-size: 0.75rem;
                height: 38px;
            }
        }

        .password-strength {
            height: 3px;
            background: var(--border-color);
            border-radius: 1.5px;
            margin-top: 4px;
            overflow: hidden;
        }

        .strength-bar {
            height: 100%;
            width: 0%;
            border-radius: 1.5px;
            transition: width 0.3s ease, background 0.3s ease;
        }

        .password-hint {
            font-size: 0.65rem;
            color: var(--text-light);
            margin-top: 3px;
            line-height: 1.2;
        }

        @media (max-width: 480px) {
            .password-hint {
                font-size: 0.6rem;
            }
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Kanit', sans-serif;
            height: 42px;
            margin-top: 0.25rem;
        }

        .btn i {
            font-size: 0.8rem;
        }

        @media (max-width: 480px) {
            .btn {
                padding: 9px;
                font-size: 0.8rem;
                border-radius: 7px;
                height: 40px;
            }

            .btn i {
                font-size: 0.75rem;
            }
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.2);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn-primary:hover::after {
            left: 100%;
        }

        .alert {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 8px;
            margin-bottom: 1rem;
            animation: slideIn 0.5s ease;
            font-size: 0.75rem;
            margin: 0 1.25rem 1rem;
            line-height: 1.3;
        }

        .alert i {
            font-size: 0.8rem;
        }

        @media (max-width: 480px) {
            .alert {
                padding: 7px 10px;
                margin: 0 1rem 0.9rem;
                font-size: 0.7rem;
                border-radius: 7px;
            }

            .alert i {
                font-size: 0.75rem;
            }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .alert-error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: var(--danger-color);
        }

        .alert-success {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            color: var(--success-color);
        }

        /* Features สำหรับหน้า login เท่านั้น */
        .features-list {
            margin: 1.25rem 1.25rem 0;
            padding: 0.9rem;
            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(76, 201, 240, 0.05));
            border-radius: 8px;
            border: 1px solid rgba(var(--primary-rgb), 0.1);
        }

        /* ซ่อน features เมื่อหน้าจอเล็ก */
        @media (max-height: 600px),
        (max-width: 480px) {
            .features-list {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .features-list {
                margin: 1rem 1rem 0;
                padding: 0.8rem;
            }
        }

        .features-title {
            text-align: center;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0.6rem;
            font-size: 0.85rem;
        }

        .features-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.75rem;
            color: var(--text-color);
        }

        .feature-icon {
            color: var(--primary-color);
            font-size: 0.8rem;
        }

        /* ปรับ padding ของ card header และ body */
        .card-header {
            padding: 1.25rem 1.25rem 0;
        }

        .card-body {
            padding: 0 0 1.25rem;
        }

        @media (max-width: 480px) {
            .card-header {
                padding: 1rem 1rem 0;
            }

            .card-body {
                padding: 0 0 1rem;
            }
        }

        /* ปรับปุ่มปิด modal */
        .close-modal-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            z-index: 10;
            padding: 5px;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            background: rgba(0, 0, 0, 0.05);
            font-size: 0.9rem;
        }

        .close-modal-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            color: var(--text-color);
        }

        @media (max-width: 480px) {
            .close-modal-btn {
                top: 8px;
                right: 8px;
                width: 26px;
                height: 26px;
                font-size: 0.85rem;
            }
        }

        /* Language Selector Styles */
        .language-selector {
            position: relative;
        }

        .language-button {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 8px;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .language-button:hover {
            background: var(--light-color);
            border-color: var(--primary-color);
        }

        .language-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            min-width: 140px;
            z-index: 100;
            overflow: hidden;
            border: 1px solid var(--border-color);
            margin-top: 8px;
            display: none;
        }

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

        .language-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            width: 100%;
            border: none;
            background: none;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .language-option:hover {
            background: var(--light-color);
        }

        .language-option.active {
            background: var(--primary-color);
            color: white;
        }

        .flag-icon {
            font-size: 1.2rem;
        }

        /* User dropdown */
        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            z-index: 1000;
            overflow: hidden;
            border: 1px solid var(--border-color);
            display: none;
        }

        .user-dropdown.show {
            display: block;
            animation: fadeInDown 0.3s ease;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-header {
            padding: 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            font-family: inherit;
        }

        .dropdown-item:hover {
            background: var(--light-color);
            color: var(--primary-color);
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 4px 0;
        }

        /* Go to Home button style */
        .go-home-btn {
            background: linear-gradient(135deg, #10b981, #34d399);
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .go-home-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
        }

        /* Fix for list view image */
        .list-view-img {
            width: 150px;
            height: 150px;
            min-width: 150px;
        }

        /* Emoji flags */
        .flag-emoji {
            font-size: 1.1rem;
        }

        /* Rating stars style */
        .rating-stars {
            display: flex;
            align-items: center;
            gap: 2px;
            color: #fbbf24;
        }

        .star-full {
            color: #fbbf24;
        }

        .star-half {
            color: #fbbf24;
            position: relative;
        }

        .star-half::before {
            content: "★";
            position: absolute;
            left: 0;
            width: 50%;
            overflow: hidden;
            color: #fbbf24;
        }

        .star-empty {
            color: #d1d5db;
        }

        .rating-text {
            font-size: 0.75rem;
            color: #6b7280;
            margin-left: 4px;
        }

        /* Flash sale sold progress bar */
        .sold-progress {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px;
        }

        .sold-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ffd700, #ff9800);
            border-radius: 3px;
        }

        /* Pagination styles */
        .pagination-btn {
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: white;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .pagination-btn:hover:not(.disabled) {
            background: var(--light-color);
            border-color: var(--primary-color);
        }

        .pagination-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .pagination-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--light-color);
        }

        /* ป้องกันการซูมบนมือถือเมื่อกรอกฟอร์ม */
        @media (max-width: 768px) {

            input,
            textarea,
            select {
                font-size: 16px !important;
            }

            .login-modal {
                align-items: flex-start;
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .login-card {
                margin: auto 0;
            }
        }

        /* Viewport meta tag fix for mobile */
        @media (max-width: 480px) {
            html {
                -webkit-text-size-adjust: none;
                text-size-adjust: none;
            }
        }
        *,
        ::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:
        }

        /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
        *,
        ::after,
        ::before {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: #e5e7eb
        }

        ::after,
        ::before {
            --tw-content: ''
        }

        :host,
        html {
            line-height: 1.5;
            -webkit-text-size-adjust: 100%;
            -moz-tab-size: 4;
            tab-size: 4;
            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-feature-settings: normal;
            font-variation-settings: normal;
            -webkit-tap-highlight-color: transparent
        }

        body {
            margin: 0;
            line-height: inherit
        }

        hr {
            height: 0;
            color: inherit;
            border-top-width: 1px
        }

        abbr:where([title]) {
            -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: inherit;
            font-weight: inherit
        }

        a {
            color: inherit;
            text-decoration: inherit
        }

        b,
        strong {
            font-weight: bolder
        }

        code,
        kbd,
        pre,
        samp {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-feature-settings: normal;
            font-variation-settings: normal;
            font-size: 1em
        }

        small {
            font-size: 80%
        }

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

        sub {
            bottom: -.25em
        }

        sup {
            top: -.5em
        }

        table {
            text-indent: 0;
            border-color: inherit;
            border-collapse: collapse
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            font-family: inherit;
            font-feature-settings: inherit;
            font-variation-settings: inherit;
            font-size: 100%;
            font-weight: inherit;
            line-height: inherit;
            letter-spacing: inherit;
            color: inherit;
            margin: 0;
            padding: 0
        }

        button,
        select {
            text-transform: none
        }

        button,
        input:where([type=button]),
        input:where([type=reset]),
        input:where([type=submit]) {
            -webkit-appearance: button;
            background-color: transparent;
            background-image: none
        }

        :-moz-focusring {
            outline: auto
        }

        :-moz-ui-invalid {
            box-shadow: none
        }

        progress {
            vertical-align: baseline
        }

        ::-webkit-inner-spin-button,
        ::-webkit-outer-spin-button {
            height: auto
        }

        [type=search] {
            -webkit-appearance: textfield;
            outline-offset: -2px
        }

        ::-webkit-search-decoration {
            -webkit-appearance: none
        }

        ::-webkit-file-upload-button {
            -webkit-appearance: button;
            font: inherit
        }

        summary {
            display: list-item
        }

        blockquote,
        dd,
        dl,
        figure,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        pre {
            margin: 0
        }

        fieldset {
            margin: 0;
            padding: 0
        }

        legend {
            padding: 0
        }

        menu,
        ol,
        ul {
            list-style: none;
            margin: 0;
            padding: 0
        }

        dialog {
            padding: 0
        }

        textarea {
            resize: vertical
        }

        input::placeholder,
        textarea::placeholder {
            opacity: 1;
            color: #9ca3af
        }

        [role=button],
        button {
            cursor: pointer
        }

        :disabled {
            cursor: default
        }

        audio,
        canvas,
        embed,
        iframe,
        img,
        object,
        svg,
        video {
            display: block;
            vertical-align: middle
        }

        img,
        video {
            max-width: 100%;
            height: auto
        }

        [hidden]:where(:not([hidden=until-found])) {
            display: none
        }

        .fixed {
            position: fixed
        }

        .absolute {
            position: absolute
        }

        .relative {
            position: relative
        }

        .sticky {
            position: sticky
        }

        .inset-0 {
            inset: 0px
        }

        .inset-y-0 {
            top: 0px;
            bottom: 0px
        }

        .left-4 {
            left: 1rem
        }

        .right-0 {
            right: 0px
        }

        .right-4 {
            right: 1rem
        }

        .top-0 {
            top: 0px
        }

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

        .top-4 {
            top: 1rem
        }

        .left-2 {
            left: 0.5rem
        }

        .top-2 {
            top: 0.5rem
        }

        .right-2 {
            right: 0.5rem
        }

        .z-10 {
            z-index: 10
        }

        .z-20 {
            z-index: 20
        }

        .z-40 {
            z-index: 40
        }

        .z-50 {
            z-index: 50
        }

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

        .z-\[60\] {
            z-index: 60
        }

        .col-span-1 {
            grid-column: span 1 / span 1
        }

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

        .my-1 {
            margin-top: 0.25rem;
            margin-bottom: 0.25rem
        }

        .mb-10 {
            margin-bottom: 2.5rem
        }

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

        .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-auto {
            margin-left: auto
        }

        .mr-3 {
            margin-right: 0.75rem
        }

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

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

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

        .mt-auto {
            margin-top: auto
        }

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

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

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

        .line-clamp-2 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2
        }

        .flex {
            display: flex
        }

        .grid {
            display: grid
        }

        .hidden {
            display: none
        }

        .h-10 {
            height: 2.5rem
        }

        .h-16 {
            height: 4rem
        }

        .h-3 {
            height: 0.75rem
        }

        .h-4 {
            height: 1rem
        }

        .h-64 {
            height: 16rem
        }

        .h-8 {
            height: 2rem
        }

        .h-9 {
            height: 2.25rem
        }

        .h-\[300px\] {
            height: 300px
        }

        .h-full {
            height: 100%
        }

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

        .h-40 {
            height: 10rem
        }

        .h-44 {
            height: 11rem
        }

        .h-36 {
            height: 9rem
        }

        .max-h-\[90vh\] {
            max-height: 90vh
        }

        .min-h-\[600px\] {
            min-height: 600px
        }

        .min-h-\[60vh\] {
            min-height: 60vh
        }

        .w-10 {
            width: 2.5rem
        }

        .w-16 {
            width: 4rem
        }

        .w-4 {
            width: 1rem
        }

        .w-8 {
            width: 2rem
        }

        .w-9 {
            width: 2.25rem
        }

        .w-full {
            width: 100%
        }

        .w-screen {
            width: 100vw
        }

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

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

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

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

        .max-w-full {
            max-width: 100%
        }

        .max-w-md {
            max-width: 28rem
        }

        .max-w-sm {
            max-width: 24rem
        }

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

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

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

        .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 pulse {
            50% {
                opacity: .5
            }
        }

        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
        }

        .cursor-pointer {
            cursor: pointer
        }

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

        .snap-start {
            scroll-snap-align: start
        }

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

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

        .flex-col {
            flex-direction: column
        }

        .flex-wrap {
            flex-wrap: wrap
        }

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

        .items-center {
            align-items: center
        }

        .justify-center {
            justify-content: center
        }

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

        .gap-1 {
            gap: 0.25rem
        }

        .gap-12 {
            gap: 3rem
        }

        .gap-2 {
            gap: 0.5rem
        }

        .gap-3 {
            gap: 0.75rem
        }

        .gap-4 {
            gap: 1rem
        }

        .gap-5 {
            gap: 1.25rem
        }

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

        .space-x-8> :not([hidden])~ :not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-right: calc(2rem * var(--tw-space-x-reverse));
            margin-left: calc(2rem * calc(1 - var(--tw-space-x-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))
        }

        .overflow-hidden {
            overflow: hidden
        }

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

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

        .scroll-smooth {
            scroll-behavior: smooth
        }

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

        .rounded {
            border-radius: 0.25rem
        }

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

        .rounded-3xl {
            border-radius: 1.5rem
        }

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

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

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

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

        .border {
            border-width: 1px
        }

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

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

        .border-l {
            border-left-width: 1px
        }

        .border-l-4 {
            border-left-width: 4px
        }

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

        .border-dashed {
            border-style: dashed
        }

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

        .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-800 {
            --tw-border-opacity: 1;
            border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
        }

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

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

        .border-transparent {
            border-color: transparent
        }

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

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

        .bg-black\/30 {
            background-color: rgb(0 0 0 / 0.3)
        }

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

        .bg-black\/70 {
            background-color: rgb(0 0 0 / 0.7)
        }

        .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-800 {
            --tw-bg-opacity: 1;
            background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
        }

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

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

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

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

        .bg-white\/20 {
            background-color: rgb(255 255 255 / 0.2)
        }

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

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

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

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

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

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

        .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-red-600 {
            --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .to-blue-600 {
            --tw-gradient-to: #2563eb var(--tw-gradient-to-position)
        }

        .to-orange-500 {
            --tw-gradient-to: #f97316 var(--tw-gradient-to-position)
        }

        .object-contain {
            object-fit: contain
        }

        .object-cover {
            object-fit: cover
        }

        .p-1 {
            padding: 0.25rem
        }

        .p-2 {
            padding: 0.5rem
        }

        .p-3 {
            padding: 0.75rem
        }

        .p-4 {
            padding: 1rem
        }

        .p-6 {
            padding: 1.5rem
        }

        .p-8 {
            padding: 2rem
        }

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

        .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-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

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

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

        .py-10 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem
        }

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

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

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

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

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

        .py-6 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem
        }

        .px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem
        }

        .pb-12 {
            padding-bottom: 3rem
        }

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

        .pb-8 {
            padding-bottom: 2rem
        }

        .pl-10 {
            padding-left: 2.5rem
        }

        .pl-3 {
            padding-left: 0.75rem
        }

        .pl-4 {
            padding-left: 1rem
        }

        .pt-16 {
            padding-top: 4rem
        }

        .pt-8 {
            padding-top: 2rem
        }

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

        .text-center {
            text-align: center
        }

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

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

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

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

        .font-black {
            font-weight: 900
        }

        .font-bold {
            font-weight: 700
        }

        .font-medium {
            font-weight: 500
        }

        .uppercase {
            text-transform: uppercase
        }

        .italic {
            font-style: italic
        }

        .leading-relaxed {
            line-height: 1.625
        }

        .leading-tight {
            line-height: 1.25
        }

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

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

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

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

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

        .text-gray-200 {
            --tw-text-opacity: 1;
            color: rgb(229 231 235 / 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-red-500 {
            --tw-text-opacity: 1;
            color: rgb(239 68 68 / 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-300 {
            --tw-text-opacity: 1;
            color: rgb(253 224 71 / var(--tw-text-opacity, 1))
        }

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

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

        .opacity-0 {
            opacity: 0
        }

        .opacity-80 {
            opacity: 0.8
        }

        .opacity-60 {
            opacity: 0.6
        }

        .opacity-100 {
            opacity: 1
        }

        .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-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 {
            --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .ring-2 {
            --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)
        }

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

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

        .drop-shadow-lg {
            --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
            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)
        }

        .backdrop-blur-md {
            --tw-backdrop-blur: blur(12px);
            -webkit-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-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);
            -webkit-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-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, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms
        }

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

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

        .duration-700 {
            transition-duration: 700ms
        }

        .duration-1000 {
            transition-duration: 1000ms
        }

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

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

        .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\:border-blue-100:hover {
            --tw-border-opacity: 1;
            border-color: rgb(219 234 254 / var(--tw-border-opacity, 1))
        }

        .hover\:border-red-200:hover {
            --tw-border-opacity: 1;
            border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))
        }

        .hover\:bg-black:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
        }

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

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

        .hover\:bg-gray-100:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(243 244 246 / 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-pink-500:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1))
        }

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

        .hover\:text-blue-300:hover {
            --tw-text-opacity: 1;
            color: rgb(147 197 253 / var(--tw-text-opacity, 1))
        }

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

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

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

        .hover\:shadow-xl:hover {
            --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)
        }

        .hover\:shadow-md:hover {
            --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)
        }

        .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\:text-blue-600 {
            --tw-text-opacity: 1;
            color: rgb(37 99 235 / var(--tw-text-opacity, 1))
        }

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

        .group:hover .group-hover\:opacity-100 {
            opacity: 1
        }

        @media (min-width: 640px) {
            .sm\:px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }
        }

        @media (min-width: 768px) {
            .md\:col-span-1 {
                grid-column: span 1 / span 1
            }

            .md\:ml-2 {
                margin-left: 0.5rem
            }

            .md\:block {
                display: block
            }

            .md\:flex {
                display: flex
            }

            .md\:h-10 {
                height: 2.5rem
            }

            .md\:h-20 {
                height: 5rem
            }

            .md\:h-\[500px\] {
                height: 500px
            }

            .md\:h-full {
                height: 100%
            }

            .md\:h-48 {
                height: 12rem
            }

            .md\:h-64 {
                height: 16rem
            }

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

            .md\:w-10 {
                width: 2.5rem
            }

            .md\:w-20 {
                width: 5rem
            }

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

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

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

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

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

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

            .md\:space-x-5> :not([hidden])~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(1.25rem * var(--tw-space-x-reverse));
                margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .md\:p-4 {
                padding: 1rem
            }

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

            .md\:py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

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

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

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

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

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

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

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