/* Body (đã định nghĩa trong header.php) */

/* Container */
.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-8;
}

/* Navbar */
.navbar {
    @apply bg-gradient-to-r from-indigo-700 via-purple-600 to-pink-500 shadow-2xl sticky top-0 z-20 rounded-b-lg;
    transition: all 0.3s ease;
}
.navbar:hover {
    @apply shadow-[0_8px_20px_rgba(79,70,229,0.4)];
    transform: translateY(-2px);
}

/* Nav item */
.nav-item {
    @apply text-white hover:text-indigo-200 transition duration-300 text-sm font-medium;
}

/* Table */
.table {
    @apply bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden;
    animation: fadeIn 0.5s ease-in-out;
}

/* Table auto */
.table-auto th,
.table-auto td {
    @apply px-6 py-4 transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-800;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Button */
.button {
    @apply py-2 px-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300 transform hover:scale-105;
}

/* Button secondary */
.button-secondary {
    @apply py-2 px-4 bg-red-600 text-white rounded-lg hover:bg-red-700 transition duration-300 transform hover:scale-105;
}

/* Input */
.input {
    @apply w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200;
}

/* Textarea */
.textarea {
    @apply w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200;
}

/* Error */
.error {
    @apply p-4 bg-red-100 text-red-700 rounded-lg;
}

/* Footer */
.footer {
    @apply bg-gradient-to-r from-indigo-700 via-purple-600 to-pink-500 text-white text-center py-6 mt-12;
}

/* Animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}