@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../font/Prompt/Prompt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

html,
body {
    height: 100%;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif !important;
}

* {
    font-family: 'Prompt', sans-serif !important;
}

.gradient-text {
    background: linear-gradient(135deg, #9D4EDD, #FF00FF);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.btn-gradient {
    background: linear-gradient(135deg, #9D4EDD, #FF00FF) !important;
    transition: all 0.3s ease !important;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.font-medium {
    font-weight: 600 !important;
    font-size: small;
}

.rounded-full {
    border-radius: 9999px;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2-5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.py-1-5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.hover-purple:hover {
    color: #9D4EDD;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-p-gray {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.btn-outline-purle {
    border: solid 2px #9D4EDD;
    color: #9D4EDD;
}

.btn-outline-purle:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
    background: linear-gradient(135deg, #9D4EDD, #FF00FF) !important;
    transition: all 0.3s ease !important;
}

.card-step {
    border: none;
    transition: all 0.3s ease !important;
    border-radius: 20px;
}

.card-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
}



.step-number {
    position: absolute;
    /* absolute */
    top: 1rem;
    /* top-4 (4 x 0.25rem) */
    right: 1rem;
    /* right-4 (4 x 0.25rem) */
    font-size: 3rem;
    /* text-5xl (ปกติคือ 3rem หรือ 48px) */
    line-height: 1;
    /* text-5xl มักจะมาพร้อม line-height ที่แคบลง */
    font-weight: 900;
    /* font-black */
    color: #f3e8ff;
    /* text-purple-100 (รหัสสีโดยประมาณของ Tailwind) */
}

.step-icon {
    /* ขนาดและระยะห่าง (w-20 h-20 mx-auto mb-6) */
    width: 5rem;
    /* 80px */
    height: 5rem;
    /* 80px */
    margin-left: auto;
    /* mx-auto */
    margin-right: auto;
    /* mx-auto */
    margin-bottom: 1.5rem;
    /* mb-6 */

    /* รูปทรงและสีพื้นหลัง (rounded-2xl bg-purple-50) */
    border-radius: 1rem;
    /* 16px */
    background-color: #faf5ff;
    /* สีม่วงอ่อนมาก purple-50 */

    /* การจัดวางรูปภาพภายใน (flex items-center justify-center) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* เอฟเฟกต์การเคลื่อนไหว (transition-all duration-300) */
    transition: all 0.3s ease-in-out;
}

.step-icon img {
    height: auto;
    /* คุณสามารถกำหนด max-width เพื่อไม่ให้รูปใหญ่เกินกล่อง */
    max-width: 60%;
}
   
.card-step:hover .step-icon {
    /* เลื่อนขึ้น 5px และหมุนไปทางขวา 10 องศา */
    transform: translateY(-5px) rotate(5deg);
    /* ใส่ Gradient สีม่วงตามที่คุณต้องการ */
    background: linear-gradient(135deg, #9D4EDD, #FF00FF) !important;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* กำหนดความโค้งมนพิเศษให้เหมือน Tailwind rounded-3xl */
.rounded-4 {
    border-radius: 1.5rem !important;
    /* ประมาณ 24px */
}

/* เอฟเฟกต์ Hover สำหรับ Card */
.card-hover {
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
}

/* ปรับแต่งสี Badge อ่อนๆ แบบ Bootstrap 5.3 */
.bg-success-subtle {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

/* กำหนดสีม่วงหลักให้เข้ากับ Theme */
.text-purple {
    color: #9D4EDD;
}

/* ตกแต่ง Review Card */
.review-card {
    border-radius: 1.25rem !important;
    /* ความโค้งมน */
    transition: all 0.3s ease;
    background: #ffffff;
}

/* เอฟเฟกต์เมื่อ Hover */
.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(157, 78, 221, 0.15) !important;
    background: linear-gradient(to bottom right, #ffffff, #faf5ff);
}

/* ตกแต่งข้อความคำนิยม */
.card-text.italic {
    font-style: italic;
    line-height: 1.6;
}

/* ปรับแต่งภาพโปรไฟล์ */
.review-card img {
    border: 2px solid #f3e8ff;
    object-fit: cover;
}

/* ปรับแต่งหัวข้อคำถาม */
.accordion-button:not(.collapsed) {
    color: #9D4EDD !important;
    /* เปลี่ยนข้อความสีม่วงเมื่อเปิด */
    background-color: transparent !important;
}

/* เปลี่ยนสีไอคอนลูกศรเป็นสีม่วง */
.accordion-button::after {
    filter: invert(36%) sepia(87%) saturate(1633%) hue-rotate(244deg) brightness(92%) contrast(96%);
    /* รหัส filter นี้จะเปลี่ยนไอคอนสีดำเป็นม่วง #9D4EDD */
    background-size: 1.25rem;
}

/* ลบเงาสีฟ้าเวลา Focus/Click */
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}

/* เพิ่มระยะห่างและสไตล์ข้อความ */
.accordion-body {
    line-height: 1.6;
}

/* สีตัวอักษรพิเศษที่ Tailwind ใช้บ่อยๆ */
.text-purple-200 {
    color: #e9d5ff !important;
}

.text-purple-300 {
    color: #d8b4fe !important;
}

/* ตกแต่งปุ่ม Social Media */
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-3px);
}

@media (max-width: 770px) {
    .review2 {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        max-width: 60%;
        /* ให้ชื่อร้านกินพื้นที่ไม่เกิน 60% ของจอ */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* ถ้าชื่อยาวเกินจะเปลี่ยนเป็น ... */
        font-size: 1.1rem;
        /* ปรับขนาดฟอนต์ให้เล็กลงตามความเหมาะสม */
    }
}


.btn-pill {
    /* ขนาดและระยะห่าง */
    /* padding: 12px 40px;
    min-width: 250px; */
    padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        padding-left: 1.5rem;
            padding-right: 1.5rem;

    /* สีพื้นหลังและตัวอักษร */
    background-color: #ffffff;
    color: #333333;
    font-family: 'Sarabun', sans-serif;
    /* ฟอนต์ภาษาไทยที่ดูสะอาดตา */
    font-size: 18px;
    font-weight: 500;

    /* ความโค้งมน (ทรงแคปซูล) */
    border-radius: 50px;

    /* เส้นขอบ (บางมากจนแทบมองไม่เห็นเหมือนในรูป) */
    border: 1px solid rgba(0, 0, 0, 0.05);

    /* เงา (Shadow) หัวใจสำคัญที่ทำให้ปุ่มดูลอยและนุ่ม */
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05),
        /* เงาฟุ้งด้านล่าง */
        0 5px 10px rgba(0, 0, 0, 0.05);
    /* เงาเข้มขึ้นมานิดหน่อยเพื่อให้ดูมีมิติ */

    /* การตั้งค่าอื่นๆ */
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

/* เอฟเฟกต์ตอนเอาเมาส์ไปชี้ (Hover) */
.btn-pill:hover {
    background-color: #fafafa;
    transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
}

/* เอฟเฟกต์ตอนกด (Active) */
.btn-pill:active {
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4) !important;
}

/* คลาสหลักสำหรับ Animation */
.floating-glow {
    position: relative;
    animation: float 3s ease-in-out infinite, glow 3s ease-in-out infinite;
    box-shadow: 0 0 0px rgba(126, 34, 206, 0);
    /* ค่าเริ่มต้น */
}

/* Animation ลอยขึ้นลง */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
        /* ลอยขึ้น 15px */
    }

    100% {
        transform: translateY(0px);
    }
}

/* Animation แสงออร่า (Glow) */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(166, 74, 247, 0.4), 0 0 20px rgba(126, 34, 206, 0.2);
    }

    50% {
        box-shadow: 0 0 15px rgba(170, 79, 250, 0.8), 0 0 50px rgba(126, 34, 206, 0.4);
    }

    100% {
        box-shadow: 0 0 5px rgba(171, 81, 250, 0.4), 0 0 20px rgba(126, 34, 206, 0.2);
    }
}