button,
input,
optgroup,
select,
textarea {
    color: white;
}

input:hover {
    background-color: #090915;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sugget {
    display: none;
}

.item:hover .sugget {
    display: block;
}

.sugget .active::after {
    content: "✔";
    /* Ký hiệu check */
    position: absolute;
    right: 0;
    top: 33%;
    transform: translateY(-50%);
    font-size: 14px;
    /* Kích thước của ký hiệu */
    color: #4caf50;
    /* Màu xanh cho ký hiệu */
}

.btn-login {
    background-image: url('/images/login.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: transparent;
    width: 73px;
    height: 32px;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    background-color: #ccc;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Thêm con trỏ tay khi hover */
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Màu gradient từ logo TaoVid.AI */
.bg-gradient-purple {
    background: var(--gradient-primary, linear-gradient(135deg, #C084FC 0%, #9333EA 50%, #581C87 100%));
}

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-primary-soft {
    background: var(--gradient-primary-soft);
}

.custom-dark-purple {
    background: #00000099;
}

.prose {
    color: #374151;
    max-width: 100%;
}

.prose h2 {
    color: #111827;
    font-weight: 600;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    line-height: 1.7;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 2rem 0;
}

.prose a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.prose a:hover {
    text-decoration: underline;
}

/* Dark mode styles */
.dark .prose {
    color: #d1d5db;
}

.dark .prose h2 {
    color: #f9fafb;
}

#generationVideo {
    display: block;
}

#generationVideo:hover {
    filter: none;
    transition: filter 0.7s ease-in-out;
}

#generationVideo:not(:hover) {
    filter: blur(5px);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal.active {
    z-index: 1000;
    display: block;
}

.comments-scroll {
    min-height: 600px;
    max-height: 600px;
    /* Adjust based on header/footer height */
    overflow-y: auto;
    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: #4a5568 #2d3748;
    /* For Firefox */
}

.comments-scroll::-webkit-scrollbar {
    width: 8px;
}

.comments-scroll::-webkit-scrollbar-track {
    background: #2d3748;
    /* bg-gray-800 */
}

.comments-scroll::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    /* bg-gray-600 */
    border-radius: 4px;
    border: 2px solid #2d3748;
    /* bg-gray-800 */
}

/* #videoDetail button {
    color: #000 !important;
} */

.emoji-grid-container::-webkit-scrollbar {
    width: 8px;
}

.emoji-grid-container::-webkit-scrollbar-track {
    background: #1a202c;
    /* bg-gray-900 */
}

.emoji-grid-container::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    /* bg-gray-600 */
    border-radius: 4px;
    border: 2px solid #1a202c;
}

.emoji-grid-container::-webkit-scrollbar-thumb:hover {
    background-color: #718096;
    /* bg-gray-500 */
}

input[type="radio"]:checked + div {
    background-color: #3a3a3a; /* Change background on check */
    color: white; /* Change text color on check */
}
input[type="radio"]:not(:checked) + div {
    background-color: transparent; /* Default background */
    color: #cccccc; /* Default text color */
}

#videoDetail {
    min-height: 75vh;
}

@media (max-width: 768px) {
    .comments-scroll {
        max-height: unset;
        min-height: unset;
    }
}


  /* Hiệu ứng bars loading */
.bars-loading {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bar {
    width: 4px;
    height: 20px;
    background-color: #C084FC;
    animation: bar-bounce 1.2s infinite ease-in-out;
}

.bar:nth-child(2) { animation-delay: -1.1s; }
.bar:nth-child(3) { animation-delay: -1.0s; }
.bar:nth-child(4) { animation-delay: -0.9s; }
.bar:nth-child(5) { animation-delay: -0.8s; }

@keyframes bar-bounce {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        opacity: 0.5;
    }
    20% { 
        transform: scaleY(1.0);
        opacity: 1;
    }
}