@extends('frontend::layouts.master')

@section('content')
    <div class="full-carousel-wrapper relative ">
        <div class="full-carousel-banner group">
            <x-frontend::plugin.splidecarousel slideName='splide-demo'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='modules/frontend/img/banner3.jpg'
                        slideUrl='' slideDescription='' class='full-screen-slide'>
                    </x-frontend::plugin.splidecarousel.image>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='modules/frontend/img/banner2.webp'
                        slideUrl='' slideDescription='' class='full-screen-slide'>
                    </x-frontend::plugin.splidecarousel.image>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='modules/frontend/img/banner1.jpg'
                        slideUrl='' slideDescription='' class='full-screen-slide'>
                    </x-frontend::plugin.splidecarousel.image>
                </x-slot:slideList>
            </x-frontend::plugin.splidecarousel>
        </div>
    </div>


    <!-- About Section -->
    <section class="py-20 relative overflow-hidden">
        <div class="container max-w-7xl mx-auto px-4">
            <!-- Main Content -->
            <div class="flex flex-col md:flex-row gap-16 items-center">
                <!-- Left Column with Stacked Images -->
                <div class="relative w-full md:w-1/2" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">
                    <div class="relative z-10 mx-auto">
                        <img src="{{ Module::asset('frontend:img/banner3.jpg') }}"
                            class="rounded-2xl shadow-2xl" alt="Main office">
                    </div>
                    <div class="absolute -bottom-8 right-0 md:-right-8 w-2/6 z-10">
                        <img src="{{ Module::asset('frontend:img/banner1.jpg') }}"
                            class="rounded-2xl shadow-xl border-4 border-white" alt="Team working">
                    </div>
                </div>

                <!-- Right Column Content -->
                <div class="w-full md:w-1/2 space-y-8" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="100">
                    <div class="inline-block">
                        <span class="bg-sky-100 text-sky-800 text-sm font-medium px-4 py-1 rounded-full">เกี่ยวกับเรา</span>
                    </div>

                    <h2 class="text-4xl md:text-5xl font-bold">
                        <span class="block">สร้างความสำเร็จ</span>
                        <span class="relative">
                            ด้วยมาตรฐานระดับมืออาชีพ
                            <svg class="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 300 8" fill="none">
                                <path d="M1 5.5C71 1.5 143.5 1.5 299 5.5" stroke="#0EA5E9" stroke-width="4"
                                    stroke-linecap="round" />
                            </svg>
                        </span>
                    </h2>

                    <p class="text-gray-600 text-lg leading-relaxed">
                        เรามุ่งมั่นพัฒนาการบริการด้านบัญชีและภาษีมากว่า 20 ปี
                        ด้วยทีมงานผู้เชี่ยวชาญที่พร้อมดูแลธุรกิจของคุณอย่างใกล้ชิด ครอบคลุมทุกด้านของการบริการทางบัญชี
                    </p>
                    <a href="/about"
                        class="inline-flex text-base font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-sky-500 text-white hover:bg-sky-500/90 px-12 py-3 group relative gap-2 rounded-full transition-all duration-300 ease-out hover:ring-2 hover:ring-sky-500 hover:ring-offset-2">
                        <div class="flex items-center">
                            <span class="ml-1 text-white">ดูเพิ่มเติม</span>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </section>

    <!-- Features Section with Floating Cards -->
    <section id="testbg" class="">
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const section = document.getElementById('testbg');
                let lastScrollY = window.scrollY;
                section.style.backgroundAttachment = "fixed";
                section.style.backgroundSize = "cover";
                section.style.backgroundPosition = "center";
                section.style.backgroundRepeat = "no-repeat";

                window.addEventListener('scroll', () => {
                    const currentScrollY = window.scrollY;
                    const parallaxOffset = currentScrollY * 0.05;
                    section.style.backgroundPosition = `center ${parallaxOffset}px`;
                    lastScrollY = currentScrollY;
                });
            });
        </script>
        <div class="py-10 lg:py-16 relative overflow-hidden max-w-7xl mx-auto px-4">
            <div class="container mx-auto px-4 relative">
                <!-- Section Header -->
                <div class="text-center mb-16 relative">
                    <!-- Decorative Elements -->
                    <div class="absolute inset-0 -z-10 overflow-hidden">
                        <div class="absolute top-0 left-1/4 w-32 h-32 bg-sky-200/50 rounded-full blur-3xl"></div>
                        <div class="absolute bottom-0 right-1/4 w-32 h-32 bg-blue-200/50 rounded-full blur-3xl"></div>
                    </div>

                    <div class="space-y-8">
                        <h1 class="relative inline-block">
                            <span class="text-22 sm:text-24 md:text-26 lg:text-30 xl:text-36 font-bold text-gray-900">
                                บริการทางบัญชี
                            </span>
                            <div>
                                <span
                                    class="text-22 sm:text-24 md:text-26 lg:text-30 xl:text-36 font-light text-gray-600 relative">
                                    ครบวงจร
                                    <svg class="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 300 8"
                                        fill="none">
                                        <path d="M1 5.5C71 1.5 143.5 1.5 299 5.5" stroke="#0EA5E9" stroke-width="4"
                                            stroke-linecap="round" />
                                    </svg>
                                </span>
                            </div>
                        </h1>

                        <p class="text-gray-600 text-xl max-w-3xl mx-auto mt-8">
                            บริการด้านบัญชีและภาษีที่ครอบคลุม พร้อมทีมงานมืออาชีพ
                        </p>
                    </div>
                </div>

                <div class="grid grid-cols-1 tn:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    <!-- Card 1 -->
                    <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                        <div class="h-full relative">
                            <img src="{{ Module::asset('frontend:img/banner3.jpg') }}" alt="Accounting Service"
                                class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                            <div class="p-6 absolute bottom-0 w-full flex flex-col justify-between">
                                <div>
                                    <h3 class="text-2xl font-bold text-white mb-4">บริการจัดทำบัญชี</h3>
                                    <p class="text-gray-200 mb-6 line-clamp-3">
                                        ให้บริการจัดทำบัญชีอย่างครบวงจร ด้วยทีมงานมืออาชีพที่มีประสบการณ์
                                        ครอบคลุมทั้งการจัดทำงบการเงินประจำปี การบันทึกรายการบัญชี การจัดทำรายงานภาษี
                                        และการให้คำปรึกษาด้านบัญชี เพื่อให้ธุรกิจของคุณดำเนินไปอย่างราบรื่น
                                    </p>
                                    <a href="/service-detail"
                                        class="text-white font-medium inline-flex items-center transition-all duration-500">
                                        <span>ดูรายละเอียด</span>
                                        <span
                                            class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2 -->
                    <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                        <div class="h-full relative">
                            <img src="{{ Module::asset('frontend:img/banner1.jpg') }}" alt="Tax Planning"
                                class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                            <div class="p-6 absolute bottom-0 w-full">
                                <h3 class="text-2xl font-bold text-white mb-4">วางแผนภาษี</h3>
                                <p class="text-gray-200 mb-6 line-clamp-3">
                                    บริการให้คำปรึกษาและวางแผนภาษีอย่างมืออาชีพ
                                    วิเคราะห์โครงสร้างภาษีให้เหมาะสมกับธุรกิจของคุณ พร้อมวางแผนการจ่ายภาษีอย่างมีประสิทธิภาพ
                                    เพื่อประโยชน์สูงสุดทางภาษีภายใต้กรอบของกฎหมาย
                                </p>
                                <a href="/service-detail"
                                    class="text-white font-medium inline-flex items-center transition-all duration-500">
                                    <span>ดูรายละเอียด</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3 -->
                    <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="h-full relative">
                            <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Business Consulting"
                                class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                            <div class="p-6 absolute bottom-0 w-full">
                                <h3 class="text-2xl font-bold text-white mb-4">ที่ปรึกษาธุรกิจ</h3>
                                <p class="text-gray-200 mb-6 line-clamp-3">
                                    บริการให้คำปรึกษาทางธุรกิจแบบครบวงจร ตั้งแต่การวางแผนธุรกิจ การวิเคราะห์ต้นทุน
                                    ไปจนถึงการพัฒนาระบบบัญชี ด้วยประสบการณ์ที่สั่งสมมายาวนาน
                                    เราพร้อมช่วยให้ธุรกิจของคุณเติบโตอย่างยั่งยืน
                                </p>
                                <a href="/service-detail"
                                    class="text-white font-medium inline-flex items-center transition-all duration-500">
                                    <span>ดูรายละเอียด</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card 4 -->
                    <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="450">
                        <div class="h-full relative">
                            <img src="{{ Module::asset('frontend:img/photo1.jpg') }}"
                                alt="Financial Analysis"
                                class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                            <div class="p-6 absolute bottom-0 w-full">
                                <h3 class="text-2xl font-bold text-white mb-4">วิเคราะห์การเงิน</h3>
                                <p class="text-gray-200 mb-6 line-clamp-3">
                                    บริการวิเคราะห์ทางการเงินอย่างมืออาชีพ ครอบคลุมการวิเคราะห์งบการเงิน การวางแผนการลงทุน
                                    และการบริหารความเสี่ยง พร้อมให้คำแนะนำที่เป็นประโยชน์เพื่อการตัดสินใจทางธุรกิจที่แม่นยำ
                                </p>
                                <a href="/service-detail"
                                    class="text-white font-medium inline-flex items-center transition-all duration-500">
                                    <span>ดูรายละเอียด</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-12 container mx-auto px-4 block text-center">
                    <a href="/about"
                        class="inline-flex text-base font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-sky-500 text-white hover:bg-sky-500/90 px-12 py-3 group relative gap-2 rounded-full transition-all duration-300 ease-out hover:ring-2 hover:ring-sky-500 hover:ring-offset-2">
                        <div class="flex items-center">
                            <span class="ml-1 text-white">ดูเพิ่มเติม</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="py-10 lg:py-16 relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute -top-8 -left-8 w-32 h-32 bg-sky-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
            <div
                class="absolute bottom-0 right-0 w-24 h-24 bg-sky-300 rounded-full blur-3xl opacity-20 animate-pulse delay-1000">
            </div>
            <div
                class="absolute top-1/2 left-1/3 w-28 h-28 bg-sky-100 rounded-full blur-3xl opacity-25 animate-pulse delay-500">
            </div>
        </div>

        <div class="container max-w-7xl mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-10">
                <h2 class="text-22 sm:text-24 md:text-26 lg:text-30 xl:text-36 font-bold text-gray-900 mb-6 relative">
                    บทความน่าสนใจ <svg class="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 300 8"
                        fill="none">
                        <path d="M1 5.5C71 1.5 143.5 1.5 299 5.5" stroke="#0EA5E9" stroke-width="4"
                            stroke-linecap="round" />
                    </svg></h2>
                <p class="text-gray-600 text-18 max-w-2xl mx-auto">อัพเดทความรู้ด้านบัญชีและภาษี
                    พร้อมเกร็ดความรู้ที่เป็นประโยชน์สำหรับธุรกิจของคุณ</p>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Blog Cards (Left) -->
                <div class="space-y-6">
                    <!-- Blog Card 1 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner3.jpg') }}"
                                alt="Blog 1" class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">10 มกราคม 2024</span>
                                <span class="text-gray-400">•</span>
                                <span class="text-gray-600 text-sm">ภาษี</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 2 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/photo1.jpg') }}" alt="Blog 2"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">5 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การวางแผนภาษีธุรกิจอย่างชาญฉลาด</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                แนวทางการวางแผนภาษีที่มีประสิทธิภาพสำหรับธุรกิจทุกขนาด</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 3 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Blog 3"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">1 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การบริหารการเงินในยุคดิจิทัล</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                เทคนิคการบริหารการเงินสมัยใหม่สำหรับธุรกิจยุคดิจิทัล</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Vertical Blog Cards (Right) -->
                <div class="space-y-6">
                    <!-- Blog Card 1 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner3.jpg') }}"
                                alt="Blog 1" class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">10 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 2 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/photo1.jpg') }}" alt="Blog 2"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">5 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การวางแผนภาษีธุรกิจอย่างชาญฉลาด</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                แนวทางการวางแผนภาษีที่มีประสิทธิภาพสำหรับธุรกิจทุกขนาด</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 3 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Blog 3"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">1 มกราคม 2024</span>
                                <span class="text-gray-400">•</span>
                                <span class="text-gray-600 text-sm">การเงิน</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การบริหารการเงินในยุคดิจิทัล</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                เทคนิคการบริหารการเงินสมัยใหม่สำหรับธุรกิจยุคดิจิทัล</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- View All Button -->
            <div class="mt-12 container mx-auto px-4 text-center">
                <a href="/blog"
                    class="inline-flex text-base font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-sky-500 text-white hover:bg-sky-500/90 px-12 py-3 group relative gap-2 rounded-full transition-all duration-300 ease-out hover:ring-2 hover:ring-sky-500 hover:ring-offset-2">
                    <div class="flex items-center">
                        <span class="ml-1 text-white">ดูเพิ่มเติม</span>
                    </div>
                </a>
            </div>
        </div>
    </section>
@endsection