/* Custom Styles & Utility Classes */

/* Hiệu ứng giấy */
.bg-paper {
    background-color: #f2f9f5;
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
}

/* Animation Utility */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

/* Custom Card & Filter Styles */
.product-card {
    /* Dùng @apply để tái sử dụng Tailwind classes */
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:shadow-2xl hover:-translate-y-1 group;
}

.filter-btn {
    @apply px-4 py-2 text-sm font-medium rounded-full border border-brand-green-200 text-brand-green-800 bg-white hover:bg-brand-green-100 transition duration-200 cursor-pointer;
}

.active-filter {
    @apply bg-brand-green-600 text-white border-brand-green-600 hover:bg-brand-green-800;
}



/* FILTER BUTTON LUXURY */
.filter-btn {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 1.8px solid rgba(197, 164, 126, 0.6);
    background: #ffffff;
    color: #1e4a33;
    transition: all .25s ease;
}

.filter-btn:hover {
    background: #f8f5ef;
    border-color: #c5a47e;
    color: #3d7a53;
}

.active-filter {
    background: #3d7a53 !important;
    color: white !important;
    border-color: #3d7a53 !important;
    box-shadow: 0 4px 10px rgba(61, 122, 83, .3);
}

/* --- PRODUCT CARD UPGRADE --- */

.product-card {
    position: relative;
    background: linear-gradient(#ffffff, #ffffff),
        url("https://www.transparenttextures.com/patterns/white-paper.png");
    background-blend-mode: overlay;

    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    transition: all .35s ease;

    /* Border ép kim */
    border: 2px solid rgba(197, 164, 126, 0.45);

    /* Shadow mềm cao cấp */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* Hover sang trọng hơn */
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(197, 164, 126, 0.8);
}

/* Tạo viền vàng mờ phát sáng khi hover */
.product-card:hover::before {
    opacity: 1;
    transform: scale(1.02);
}

.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #e9d3b5 0%, #c5a47e 40%, #f0e6d8 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transform: scale(1);
    transition: all .35s ease;
}

/* Ảnh có khung bo nhẹ */
.product-card img {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Tăng độ sang phần nội dung */
.product-card .p-4 {
    background: #ffffffdd;
    backdrop-filter: blur(3px);
}

/* Bỏ aspect ratio cũ */
.product-card .aspect-\[4\/5\] {
    aspect-ratio: unset !important;
    height: 260px !important;
    /* hoặc 220 / 240 tùy bạn */
}

/* Ảnh fill đúng khung, không bị lệch */
.product-card .aspect-\[4\/5\] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}