/* ฟอนต์ */

        body {
            font-family: "Kanit", sans-serif;
            margin: 0;
        }

        /* เว้นระยะ */

        .spc {
            margin: 20px;
        }

        /* ธีมสี */

        .theme {
            background-color: #1f4690;
        }

        /* Sidebar */

        .sidebar {
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            width: 220px;
            background-color: #1f4690;
            padding-top: 20px;
        }

        .sidebar a {
            display: block;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
        }

        .sidebar a:hover,
        .sidebar a.active {
            background-color: #0080ff;
        }

        /* เนื้อหา */

        .content {
            margin-left: 230px;
            /* เว้นที่ให้ sidebar */
            padding: 20px;
        }

        table.table thead tr th {
            background-color: #1f4690 !important;
            color: white !important;
        }

        body,
        html {
            overflow-x: hidden;
        }

        table td {
            white-space: nowrap;
            max-width: 150px;
            /* ปรับตามเหมาะสม */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h2 {
            position: relative;
            display: inline-block;
            /* เพื่อให้เส้นใต้ขนาดพอดีกับข้อความ */
            font-weight: bold;
            color: #000000;
            /* สีตัวอักษรตามภาพ */
        }

        /*h2::after {
            content: "";
            position: absolute;
            left: 45%;
            bottom: -15px;
            transform: translateX(-30%);
            width: 70px;
            height: 4px;
            background-color: #0384fd;
            border-radius: 2px;
        }*/

        .border-rd {
            overflow: hidden;
            border-radius: 20px;
        }

        .box-shadow {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        .services-container {
            border-radius: 50px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-weight: bold;
            ;
        }

        .faq-container {
            max-width: 800px;
            margin: auto;
        }

        .faq-item {
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
            /* ครอบทั้งปุ่มกับคำตอบให้เป็นชิ้นเดียว */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .faq-question {
            background-color: #1f4690;
            color: white;
            width: 100%;
            padding: 15px 20px;
            text-align: left;
            border: none;
            outline: none;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s;
        }

        .faq-question:hover {
            background-color: #0059ff;
        }

        .faq-question.active {
            background-color: #0059ff;
        }

        /* ปรับให้ .faq-answer ติดกับปุ่มและเต็มความกว้าง */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            background-color: #fff;
            padding: 0 20px;
            font-size: 16px;
            line-height: 1.6;
            transition: max-height 0.3s ease, padding 0.3s ease;
            /* เส้นแบ่งเล็ก ๆ */
        }

        .faq-answer.show {
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 55px;
            padding-left: 15px;
        }


        .faq-icon {
            font-size: 20px;
            font-weight: bold;
            transition: transform 0.3s ease;
        }

        .faq-question.active .faq-icon {
            transform: rotate(-90deg);
        }

        /* เอฟเฟกต์ลอยขึ้น */
        .card-float {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-float:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .underline-text {
            position: relative;
            display: inline-block;
            font-weight: bold;
            color: #ffde33;
        }

        .underline-text::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #ff3c3c, #ff9900, #3cff3c, #3c9cff, #ff3c3c);
            background-size: 300% 100%;
            animation: underline-move 3s linear infinite;
        }

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

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

        /* ใช้ได้กับ Chrome, Edge, Safari (และ Firefox รุ่นใหม่บางเวอร์ชัน) */
        .text-stroke {
            -webkit-text-stroke: 3px #000000;
            /* ความหนาและสีเส้นขอบ */
            paint-order: stroke fill;
            /* ให้ stroke วาดก่อน (กันโดนทับ) */
        }

        /* Fallback สำหรับเบราว์เซอร์ที่ยังไม่รองรับ: ใช้เงาซ้อนแทน */
        .text-stroke.fallback {
            text-shadow:
                1px 0 #000, -1px 0 #000,
                0 1px #000, 0 -1px #000,
                1px 1px #000, -1px -1px #000,
                1px -1px #000, -1px 1px #000;
        }

        /* สำหรับหน้าจอทั่วไป (เช่น desktop) */
        .card-col {
            width: 40%;
        }

        /* สำหรับมือถือ (จอเล็กกว่า 768px) ให้เต็มความกว้าง */
        @media (max-width: 768px) {
            .card-col {
                width: 100% !important;
            }
        }

        /* ขนาด font สำหรับ Desktop */
        .headline {
            font-size: 53px;
            font-weight: bold;
        }

        .subheadline {
            font-size: 40px;
            color: #ffde33;
        }

        /* ปรับขนาด font สำหรับ Mobile */
        @media (max-width: 768px) {
            .headline {
                font-size: 40px;
            }

            .subheadline {
                font-size: 30px;
            }
        }