@keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(40px);
         }

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

     /* จุด indicators */
     .card-indicators {
         display: none;
         justify-content: center;
         margin-top: 16px;
         gap: 10px;
     }

     .card-indicators .dot {
         width: 10px;
         height: 10px;
         background-color: #ccc;
         border-radius: 50%;
         display: inline-block;
         transition: background-color 0.3s;
     }

     .card-indicators .dot.active {
         background-color: #A27702;
         /* สีทองน้ำตาลหลัก */
     }



     .card-container {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: clamp(30px, 4vw, 64px);
         width: clamp(320px, 92vw, 1440px);
         margin: 40px auto;
         padding: 32px clamp(16px, 5vw, 0);
         box-sizing: border-box;

         /* กล่องสวย ๆ */
         background: #fff;
         border-radius: 18px;
         box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
     }

     .menu-card.show {
         animation: fadeInUp 0.8s ease forwards;
     }

     /* การ์ดเมนูสีน้ำตาลหลัก */
     .menu-card {
         background-color: #A27702;
         margin: 20px 0 20px 0;
         padding: 40px;
         border-radius: 20px;
         padding-top: 190px;
         text-align: center;
         position: relative;
         width: 390px;
         /* ย่อขนาดลงเล็กน้อยเพื่อให้วางเรียงกันสวยขึ้น */
         height: 500px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         flex-shrink: 0;

         opacity: 0;
         transform: translateY(40px);
         transition: opacity 0.6s ease, transform 0.6s ease;
     }

     /* เอฟเฟกต์นูนตอน hover */
     /* .menu-card:hover .menu-image {
    transform: translateX(-40%) translateY(-10px) scale(1.08);
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0px 12px 20px rgba(0, 0, 0, 0.45));
}

.menu-card:hover {
    transform: translateY(-8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
} */
     .menu-image {
         position: absolute;
         top: -60px;
         left: 30%;
         transform: translateX(-40%);
         width: 350px;
         z-index: 2;
         filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.35));
     }


     .price-tag {
         font-family: "Bebas Neue";
         position: absolute;
         top: 170px;
         right: 10px;
         background-color: white;
         color: #B82323;
         font-size: 30px;
         font-weight: 800;
         padding: 8px 30px;
         border-radius: 12px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
         z-index: 1;
         /* แก้ไข: เพิ่ม z-index ให้อยู่เหนือรูปภาพ */
     }

     .new-badge {
         font-family: "Bebas Neue", sans-serif;
         position: absolute;
         top: -25px;
         right: -20px;
         width: 90px;
         height: 90px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30px;
         font-weight: 700;
         color: #fff;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         z-index: 4;

         /* พื้นทอง gradient */
         background: linear-gradient(135deg, #c89b3c, #f6e27a, #b8860b);
         background-size: 200% 200%;
         animation: shimmerGold 4s ease-in-out infinite;

         /* box-shadow:
             0 0 0 3px rgba(255, 255, 255, 0.3),
             0 6px 15px rgba(0, 0, 0, 0.25), */
     }

     @keyframes shimmerGold {
         0% {
             background-position: 0% 50%;
         }

         50% {
             background-position: 100% 50%;
         }

         100% {
             background-position: 0% 50%;
         }
     }

     .new-badge::after {
         content: "";
         position: absolute;
         width: 45%;
         height: 45%;
         top: 20%;
         left: 20%;
         /* background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent 70%); */
         border-radius: 50%;
         filter: blur(3px);
     }



     .menu-title {
         color: rgb(255, 255, 255);
         font-size: 30px;
         font-weight: 800;
         margin-top: 3.5rem;
         margin-bottom: 0.5rem;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
     }


     /* คำอธิบายเมนู */
     .menu-description {
         color: #ffffff;
         font-size: 16px;
         line-height: 1.5;
     }


     @media (max-width: 1200px) {
         .card-container {
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
             gap: 50px;
             border-radius: 20px;
         }

         .menu-image {
             width: 300px;
             left: 40%;
         }
     }


     @media (max-width: 1024px) {
         .menu-card {
             width: 270px;
         }
     }

     /* ให้แสดงเฉพาะ mobile */
     @media (max-width: 768px) {
         .card-indicators {
             display: flex;
         }
     }

     @media (max-width: 768px) {
         .card-container {
             width: clamp(320px, 45vw, 1440px);
             flex-wrap: nowrap;
             justify-content: flex-start;
             overflow-x: auto;
             -webkit-overflow-scrolling: touch;
             scroll-snap-type: x mandatory;
             padding: 20px 0;
             gap: 50px;
             scrollbar-width: none;
             -ms-overflow-style: none;
             scroll-behavior: smooth;
             scroll-padding-left: 35px;
         }

         .menu-title {
             font-size: 25px;
         }

         .menu-description {
             font-size: 14px;
             padding: 0 10px 0 10px;
         }


         .card-container::-webkit-scrollbar {
             display: none;
         }

         /* สร้างก้อนว่างซ้ายขวาเป็นระยะห่าง */
         .card-container::before,
         .card-container::after {
             content: "";
             flex: 0 0 24px;
             /* ระยะห่างที่ต้องการจากขอบซ้าย/ขวา */
         }

         .new-badge {
             width: 70px;
             height: 70px;
             top: -25px;
             right: -10px;
         }

         .menu-card {
             width: 80%;
             max-width: 300px;
             flex-shrink: 0;
             scroll-snap-align: start;
             height: 400px;
             padding: 150px 10px 0 10px;
         }


         .menu-image {
             left: -4%;
             transform: translateY(10%);
             width: 270px;

         }
     }


     @media (max-width: 480px) {
         .card-container {
             width: clamp(320px, 45vw, 1440px);
             flex-wrap: nowrap;
             justify-content: flex-start;
             overflow-x: auto;
             -webkit-overflow-scrolling: touch;
             scroll-snap-type: x mandatory;
             padding: 20px 0;
             gap: 50px;
             scrollbar-width: none;
             -ms-overflow-style: none;


             scroll-padding-left: 35px;
         }

         .card-container::-webkit-scrollbar {
             display: none;
         }

         /* สร้างก้อนว่างซ้ายขวาเป็นระยะห่าง */
         .card-container::before,
         .card-container::after {
             content: "";
             flex: 0 0 24px;
             /* ระยะห่างที่ต้องการจากขอบซ้าย/ขวา */
         }

         .new-badge {
             width: 70px;
             height: 70px;
             top: -25px;
             right: -10px;
         }

         .menu-card {
             width: 80%;
             max-width: 300px;
             flex-shrink: 0;
             scroll-snap-align: start;
             height: 370px;
         }

         .price-tag {
             padding: 3px 20px;
         }

         .menu-image {
             left: 0%;
             transform: translateY(15%);
             width: 250px;

         }
     }

     @media (max-width: 320px) {
         .card-container {
             width: clamp(320px, 45vw, 1440px);
             flex-wrap: nowrap;
             justify-content: flex-start;
             overflow-x: auto;
             -webkit-overflow-scrolling: touch;
             padding: 20px 0;
             gap: 50px;
             scrollbar-width: none;
             -ms-overflow-style: none;


             scroll-padding-left: 35px;
         }

         .card-container::-webkit-scrollbar {
             display: none;
         }

         /* สร้างก้อนว่างซ้ายขวาเป็นระยะห่าง */
         .card-container::before,
         .card-container::after {
             content: "";
             flex: 0 0 24px;
             /* ระยะห่างที่ต้องการจากขอบซ้าย/ขวา */
         }

         .new-badge {
             width: 70px;
             height: 70px;
             top: -25px;
             right: -10px;
         }

         .menu-card {
             width: 80%;
             max-width: 300px;
             flex-shrink: 0;
             scroll-snap-align: start;
             height: 370px;
         }


         .menu-image {
             left: 0;
             transform: translateY(30%);
             width: 220px;
         }
     }

     /*
     @media (max-width: 480px) {
         .card-container {
             margin: 10px auto;
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
             gap: 20px;
             border-radius: 20px;

         }

         .menu-image{
            width: 300px;
            left: 35%;
         }
     }

         @media (max-width: 320px) {
            .menu-image{
                width: 250px;
                top:0;
            }
            .new-badge{
                width: 70px;
                height: 70px;
                right: -25px;
            }
         } */