/* Tailwind CSS từ CDN - chỉ được sử dụng khi Vite build không hoạt động */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@3.3.5/dist/tailwind.min.css');

/* Các lớp cơ bản */
.flex { display: flex !important; }
.block { display: block !important; }
.hidden { display: none !important; }
.grid { display: grid !important; }
.inline-block { display: inline-block !important; }
.inline-flex { display: inline-flex !important; }

@media (min-width: 640px) {
    .sm\:flex { display: flex !important; }
    .sm\:block { display: block !important; }
    .sm\:hidden { display: none !important; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:block { display: block !important; }
    .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
    .lg\:flex { display: flex !important; }
    .lg\:block { display: block !important; }
    .lg\:hidden { display: none !important; }
}

/* Fix các lớp tiện ích */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

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

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

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

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

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

.space-x-4 > * + * {
    margin-left: 1rem !important;
}

.space-y-4 > * + * {
    margin-top: 1rem !important;
}

.border {
    border-width: 1px !important;
}

.rounded {
    border-radius: 0.25rem !important;
}

.text-white {
    color: white !important;
}

.bg-red-600 {
    background-color: #dc2626 !important;
}

.hover\:bg-red-700:hover {
    background-color: #b91c1c !important;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

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

.text-lg {
    font-size: 1.125rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
}