@import url('/THAYTUNG/assets/ui-system.css?v=20260806');

html {
    -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

table {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 2px solid rgba(148, 163, 184, 0.42);
}

[class*="border-gray-100"],
[class*="border-gray-200"] {
    border-color: #dbe3ef !important;
}

[class*="border-gray-700"],
[class*="border-gray-800"] {
    border-color: rgba(148, 163, 184, 0.42) !important;
}

.table-responsive,
.overflow-x-auto,
[class*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }

    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .container {
        width: 100% !important;
    }

    main,
    .admin-shell,
    .content,
    .page-content {
        max-width: 100%;
    }

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

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

    .lg\:flex-row {
        flex-direction: column !important;
    }

    .lg\:w-64,
    .lg\:w-72,
    .lg\:w-80,
    .w-64,
    .w-72,
    .w-80 {
        max-width: 100%;
    }

    .min-w-\[900px\],
    .min-w-\[1000px\],
    .min-w-\[1100px\],
    .min-w-\[1200px\] {
        min-width: 760px !important;
    }
}

@media (max-width: 768px) {
    main,
    .admin-shell {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .site-header,
    nav > div,
    header > div {
        max-width: 100%;
    }

    nav .h-16,
    nav [class*="h-16"] {
        min-height: 4rem;
        height: auto !important;
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    nav .flex.justify-between {
        flex-wrap: wrap;
        gap: .75rem;
    }

    nav .space-x-4 {
        gap: .5rem;
    }

    nav .space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }

    .grid,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .flex-row,
    .md\:flex-row {
        flex-direction: column !important;
    }

    .items-center.md\:items-start,
    .md\:items-start {
        align-items: stretch !important;
    }

    .justify-between,
    .md\:justify-between {
        gap: .75rem;
    }

    .w-1\/2,
    .w-1\/3,
    .w-2\/3,
    .w-3\/4,
    .md\:w-1\/2,
    .md\:w-1\/3,
    .md\:w-2\/3 {
        width: 100% !important;
    }

    .min-w-\[700px\],
    .min-w-\[760px\],
    .min-w-\[900px\],
    .min-w-\[1000px\],
    .min-w-\[1100px\],
    .min-w-\[1200px\] {
        min-width: 680px !important;
    }

    table {
        font-size: .875rem;
    }

    th,
    td {
        white-space: normal;
    }

    .fixed.inset-0,
    [role="dialog"] {
        padding: 1rem;
    }

    .fixed .max-w-lg,
    .fixed .max-w-xl,
    .fixed .max-w-2xl,
    .fixed .max-w-3xl {
        width: min(100%, calc(100vw - 2rem)) !important;
        max-height: calc(100dvh - 2rem);
        overflow: auto;
    }
}

@media (max-width: 480px) {
    main,
    .admin-shell {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    h1,
    .text-4xl,
    .text-5xl {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
        line-height: 1.08 !important;
    }

    h2,
    .text-3xl {
        font-size: clamp(1.25rem, 6vw, 1.7rem) !important;
        line-height: 1.15 !important;
    }

    .text-xl,
    .text-2xl {
        line-height: 1.25 !important;
    }

    a,
    button,
    input,
    select,
    textarea {
        min-height: 42px;
    }

    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}