@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');
body {font-family:'Noto Sans Thai', sans-serif;background: #f4f6f9;margin:0;padding:0;}

/* Floating Button */
.fab {position: fixed;bottom: 25px;margin-top: 40px; right: 25px;background-color: #98f109;color: #fff;border: none;border-radius: 50%;width: 60px;height: 60px;font-size: 28px;cursor: pointer;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;}
.fab:hover {background-color: #41c305;}

/* Modal */
.modal {display: none;position: fixed;right: 30px;bottom: 100px;width: 290px;max-height: 500px;background: #fff;border-radius: 16px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);overflow: hidden;flex-direction: column;animation: slideUp 0.4s ease, fadeIn 0.4s ease;z-index: 9999;}

/* เมื่อ active ให้แสดง */
.modal.active {display:flex;}
.chat-container {
        display: flex;
        flex-direction: column;
        height: 500px;
        background: white;
        overflow: hidden; 
        border-radius: 2rem; 
        box-shadow: 0 0 0 2px #D4AF37, 0 20px 50px rgba(0,0,0,0.15);
        position: relative;
    }

    /* 2. Header: ปรับให้แนบสนิทกับขอบโค้งของแม่ */
.chat-header {
    background: linear-gradient(135deg, #A3FF33 0%, #8EDB2D 100%);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
.chat-body {flex: 1;height: 60px;padding: 12px;overflow-y: auto;background: #f7f9fc;max-height: 500px;scrollbar-width:thin;scrollbar-color:#CCC transparent;border-radius:4px;}
.bot-msg,
.user-msg {margin: 8px 0;padding: 10px 14px;border-radius: 12px;max-width: 90%;line-height: 1.5;font-size:12px;word-wrap: break-word;align-self:flex-end;background-color:#aaf5a5;}
.bot-msg {background: #e1f0ff;align-self: flex-start;}
.user-msg {background:#b1f788;color: #ffffff;align-self: flex-end;}
.chat-input {display:flex;padding: 10px;border-top: 1px solid #ddd;}
.chat-input input {flex: 1;padding: 1px;border-radius: 10px;border: 1px solid #ccc;}
.chat-input button {background: #98f109;border: none;color: #fff;font-family:'Noto Sans Thai';padding: 5px 9px;margin-left: 8px;border-radius: 50px;cursor: pointer;}
.chat-options {margin-top:8px;}
.chat-option {background:#fff;border: 1px solid #98f109;color: #303031;border-radius: 6px;padding: 4px 10px;margin-right: 6px;cursor: pointer;font-size: 12px;}

#chatFab {
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* บังคับให้หน้าต่างแชทตอนปิดอยู่ ไม่มาขวางการคลิก (Invisible Block) */
#chatModal:not(.active) {
    display: none !important;
    pointer-events: none !important;
}

/* บังคับให้ปุ่ม FAB อยู่บนสุดเสมอและกดได้ */
#chatFab {
    z-index: 99999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
/*Animation popup*/
@keyframes slideUp {
  from {transform:translateY(20px);opacity:0;}
  to {transform:translateY(0);opacity:1;}
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
.animate-slideUp {
  animation: slideUp 0.35s ease-out;
}

/* Redesign Chatbot */
#chatModal .chat-container {
        border-radius: 1rem;    /* กำหนดความมนที่กล่องแม่ */
        overflow: hidden;       /* บังคับให้ลูก (Header/Footer) โค้งตามแม่เป๊ะๆ */
        display: flex;
        flex-direction: column;
        border: 2px solid #8EDB2D; /* เส้นขอบหลัก */
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
.gold-gradient-border {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #D4AF37 0%, #F9F295 50%, #B8860B 100%) border-box;
    border: 1px solid transparent;
}
.premium-shadow {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(163, 255, 51, 0.1);
}
.premium-gold-card {
        border-radius: 2rem;
        background: white;
        position: relative;
        /* สร้างเส้นขอบสีทองที่โค้งตาม Container เป๊ะๆ */
        box-shadow: 0 0 0 2px #D4AF37, 0 10px 40px -10px rgba(0,0,0,0.2);
        overflow: hidden; /* บังคับให้ลูกทุกตัวอยู่ในมุมโค้งเดียวกัน */
    }

    /* สไตล์ปุ่มแบบ Apple-Inspired Premium */
.pill-style-btn {
        background: white;
        border: 1px solid #f1f5f9;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.85rem 1.25rem;
        font-weight: 600;
        color: #334155;
    }

    .pill-style-btn:hover {
        border-color: #D4AF37; /* เปลี่ยนเป็นขอบทองเวลา Hover */
        background: #fffcf0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
    }