.text-balance {
    text-wrap: balance;
}

.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 var(--primary);
    }

    50% {
        box-shadow: 0 0 10px 5px rgba(82, 115, 77, 0.5);
    }

    100% {
        box-shadow: 0 0 0 0 var(--primary);
    }
}

.pulse-glow {
    animation: pulse-glow 2s infinite;
}

/* Thêm hiệu ứng fade-in-up và fade-in-down */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.reset-tailwind *:not(blockquote) {
    font-size: revert;
    font-weight: revert;
    line-height: revert;
    color: revert;
    /* margin: revert; */
    padding: revert;
    border: revert;
    background: revert;
    text-decoration: revert;
    list-style: revert;
}


.space-y-ul ul> :not([hidden])~ :not([hidden]) {
    margin-top: 0.75rem;
}

input,
textarea {
    outline: none;
}

/* Ẩn scrollbar cho mọi trình duyệt */
.scrollbar-none::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.scrollbar-none {
    -ms-overflow-style: none;
    /* IE và Edge */
    scrollbar-width: none;
    /* Firefox */
}


.masonry {
    column-count: 3;
    column-gap: 1rem;
}

.masonry img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

@media (max-width: 1024px) {
    .masonry {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .masonry {
        column-count: 1;
    }
}

blockquote {
    border-left-width: 4px;
    border-left-color: var(--primary);
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #f5f3ff;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    color: var(--secondary);
}