/* สไตล์สำหรับวิดีโอพื้นหลัง */
        .bg-video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            object-fit: cover;
        }

        body {
            background-color: #4ade80;
            /* สีพื้นหลังสำรอง */
            font-family: 'Sarabun', sans-serif;
            /* กำหนด font หลัก */
            color: #000000;
            /* กำหนดสีตัวอักษรหลักเป็นสีดำ */
        }

        .placeholder-gray-500::placeholder {
            /* ปรับสี placeholder ให้อ่านง่ายบนพื้นหลังใส */
            color: #333;
            /* หรือสีเทาเข้มอื่นๆ ที่เหมาะสม */
            opacity: 0.8;
            /* ทำให้ไม่เข้มเท่าตัวอักษรปกติ */
        }

        /* ทำให้ input text มีสีดำตาม body (ถ้าไม่ได้กำหนดไว้เฉพาะ) */
        input[type="text"],
        input[type="password"] {
            color: rgb(10, 60, 228);
            /* สีตัวอักษรใน input */
        }

        /* สไตล์สำหรับช่องใส่รหัสผ่าน 4 หลัก */
        .passcode-input {
            width: 3rem;
            height: 3rem;
            font-size: 1.5rem;
            text-align: center;
            margin: 0 0.25rem;
            border: 2px solid #d1d5db;
            border-radius: 0.5rem;
            background-color: rgba(255, 255, 255, 0.1);
            color: rgb(10, 60, 228);
        }

        .passcode-input:focus {
            border-color: #f97316;
            outline: none;
            box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
        }

        /* ปรับสไตล์สำหรับขนาดไอคอนที่ใหญ่ขึ้น */
        .program-icon {
            /* **ปรับขนาดความสูงและความกว้างของไอคอนที่นี่** */
            height: 150px;
            /* เพิ่มขนาดความสูง */
            width: 150px;
            /* เพิ่มขนาดความกว้าง */

            border-radius: 0.2rem;
            /* ปรับ shadow ให้ดูสวยขึ้น */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            /* เปลี่ยน margin-right ให้ใช้ Tailwind `space-x-*` แทน */
            /* margin-right: 0.5rem; */
            cursor: pointer;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .program-icon:hover {
            transform: scale(1.30);
            /* เอฟเฟกต์เมื่อเมาส์ชี้ */
            box-shadow: 0 10px 15px -3px rgba(216, 8, 8, 0.84), 0 4px 6px -2px rgba(216, 8, 8, 0.84);
        }

        /* **สไตล์สำหรับข้อความที่มีเงาฟุ้ง** */
        .text-fuzzy-shadow {
            /* x-offset | y-offset | blur-radius | color */
            text-shadow:
                2px 2px 5px rgb(82, 247, 5),
                /* เงาสีดำ ฟุ้ง 5px */
                -2px -2px 5px rgb(248, 245, 245);
            /* เงาสีขาว (แสง) ฟุ้ง 5px เพื่อความนูน */
            color: #ffffff;
            /* เปลี่ยนสีตัวอักษรหลักเป็นสีขาวเพื่อให้เงาชัดเจน */
        }

        /* หรือถ้าต้องการให้เงาดูเป็นสีเดียว ฟุ้งๆ */
        .text-soft-shadow {
            text-shadow:
                0px 0px 8px rgba(0, 0, 0, 0.7);
            /* เงาสีดำ ฟุ้ง 8px ไม่มีการเลื่อน */
            color: #ffffff;
        }

        /* Optional: Custom fuzzy shadow for the title */
        .text-fuzzy-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .text-pseudo-emboss {
            position: relative;
            color: #1a202c; /* สีข้อความหลัก */
        }

        .text-pseudo-emboss::before {
            content: attr(data-text); /* ใช้เนื้อหาจาก data-text attribute */
            position: absolute;
            top: -1px;
            left: -1px;
            color: rgba(255, 255, 255, 0.8); /* ไฮไลท์ด้านบนซ้าย */
            z-index: -1;
        }

        .text-pseudo-emboss::after {
            content: attr(data-text);
            position: absolute;
            top: 1px;
            left: 1px;
            color: rgba(0, 0, 0, 0.3); /* เงาด้านล่างขวา */
            z-index: -1;
        }