/* กำหนดสีตามบรีฟ  */
        :root {
            --amari-orange: #FF6B00;
            --amari-cream: #F9F5F0;
        }

        .bg-amari-orange {
            background-color: var(--amari-orange);
        }

        .text-amari-orange {
            color: var(--amari-orange);
        }

        html{
            scroll-behavior: smooth;
        }

                @keyframes fadeUpSlow {
                    from {
                        transform: translateY(60px);
                        opacity: 0;
                    }
        
                    to {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
        
                .animate-fadeup-slow {
                    animation: fadeUpSlow 2.5s ease-out forwards;
                }
        
                .animate-fadeup-slower {
                    animation: fadeUpSlow 3.2s ease-out forwards;
                }

                                .no-scrollbar::-webkit-scrollbar {
                                    display: none;
                                }
                
                                .no-scrollbar {
                                    -ms-overflow-style: none;
                                    scrollbar-width: none;
                                }
                
                                /* Active state */
                                .recommended-card.active {
                                    transform: scale(1.05);
                                }
                
                                .recommended-card.active .card-content {
                                    opacity: 1;
                                    transform: translateY(0);
                                }

                                /* ซ่อน Scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ดีไซน์ปุ่ม Filter */
.filter-btn {
    padding: 8px 20px;          /* ขนาดปุ่ม */
    border-radius: 50px;        /* ความมน (50px คือวงรีแบบแคปซูล) */
    font-size: 14px;            /* ขนาดตัวหนังสือ */
    font-weight: 500;
    white-space: nowrap;        /* ห้ามขึ้นบรรทัดใหม่ */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* เอฟเฟกต์สมูทๆ */
    
    /* สถานะปกติ (ยังไม่กด) */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;  /* สีขอบเทาจางๆ */
    color: #6b7280;             /* สีตัวหนังสือเทา */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* ตอนเอาเมาส์ชี้ (Hover) */
.filter-btn:hover {
    border-color: #C9A24D;      /* ขอบสีทอง */
    color: #C9A24D;             /* ตัวหนังสือสีทอง */
    transform: translateY(-2px); /* ลอยขึ้นนิดนึง */
    box-shadow: 0 4px 12px rgba(201, 162, 77, 0.15); /* เงาสีทองฟุ้งๆ */
}

/* สถานะเลือกอยู่ (Active) */
.filter-btn.active {
    background-color: #C9A24D;  /* พื้นหลังสีทอง */
    color: #ffffff;             /* ตัวหนังสือสีขาว */
    border-color: #C9A24D;
    box-shadow: 0 4px 12px rgba(201, 162, 77, 0.3); /* เงาสีทองเข้มขึ้น */
}