body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            overflow: hidden; /* ซ่อน scrollbar เมื่อมีวัตถุเคลื่อนที่ออกนอกจอ */
            background: linear-gradient(to top, #000000, #222379); /* ทำพื้นหลังเป็น gradient สวย ๆ */
            /* color: #fff; */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;

        }
        /* ฟองอากาศให้อยู่ด้านหลัง */
        /*.bubble-container {
            position: absolute;   ให้ยึดเต็มหน้าจอ */
          /*  top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;  เอาไปไว้หลังเนื้อหา 
            overflow: hidden;
        }*/
        .bubble-container {
            /*position: relative;  ตั้งตำแหน่งแบบ relative เพื่อให้ฟองอากาศใช้เป็น reference */
            /*width: 100%;
            height: 100vh;   ความสูงเต็มหน้าจอ */
            /*z-index: -1;  เอาไปไว้หลังเนื้อหา 
            overflow: hidden;*/
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            overflow: hidden; 
        } 
        .bubble {
            position: absolute; /* วางตำแหน่งอิสระ */
            bottom: -100px; /* เริ่มจากนอกหน้าจอล่าง */
            border-radius: 50%; /* ทำให้เป็นวงกลม */
            opacity: 0.7; /* โปร่งใสเล็กน้อย */
            animation: rise 10s linear infinite; /* เคลื่อนขึ้นด้วย animation */
             /* เอฟเฟกต์แสงสะท้อนบนฟองอากาศ */
            background: radial-gradient(
                circle at 30% 30%, 
                rgba(255, 255, 255, 0.8) 0%,  /* จุดแสง */
                rgba(227, 248, 255, 0.4) 40%, /* ฟ้าอ่อน */
                rgba(0, 100, 255, 0.2) 80%,   /* ฟ้าเข้ม */
                rgba(255, 255, 255, 0.1) 100% /* โปร่งใส */
            );

            /* เงาสะท้อน */
            box-shadow:
                inset -10px -10px 20px rgba(33, 33, 255, 0.2),
                inset 5px 5px 15px rgba(255, 255, 255, 0.3),
                0 0 20px rgba(42, 151, 230, 0.3);

            /* เอฟเฟกต์โปร่งใส */
            backdrop-filter: blur(3px);
            opacity: 0.8;
            transform-style: preserve-3d;
        }
        
        @keyframes rise {
            0% {
                transform: translateY(0) scale(0.8) rotate(0deg); /* เริ่มต้นอยู่ด้านล่าง ขนาดเล็ก */
                opacity: 0.7;
            }
            50% {
                transform: translateY(-50vh) scale(1) rotate(15deg);
                opacity: 1; /* กลางทางโปร่งใสน้อยลง */
            }
            100% {
                transform: translateY(-110vh) scale(1.1) rotate(-15deg); /* เคลื่อนขึ้นด้านบนและขยายเล็กน้อย */
                opacity: 0; /* หายไปเมื่อพ้นจอ */
            }
        }

        .neon-page{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;

        }
        .box-head{
            font-size: 1.5rem;
            align-items: center;
            margin: 20px;
            color: #fff;
            text-shadow: 0 0 5px #ffa1ef, 
            0 0 10px #f372ff, 0 0 20px #ffc272;
        }

        .container{
            /* margin: 100px; */
            text-align: center;
        }

        .box{
            width: auto;
            height: auto;
            margin: 20px;
            position: relative; /* บังคับให้ h1 อยู่เหนือฟอง */
            z-index: 1;
        }
        h3{
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #fff;
            text-shadow: 0 0 5px #04e6c7, 
            0 0 10px #04e6c7, 0 0 20px #04e6c7;
        }

        .box-item{
            text-align: center;  
            
        }

        .neon-button{
            background: none;
            border: 2px solid #00ffea;
            color: #00ffea;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px #00ffea, 0 0 20px #00ffea;
        }
        .neon-button::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(0, 255, 234, 0.3), transparent);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
            border-radius: 50%;
        }
        .neon-button:hover{
            color: #1a1a1a;
            background: #00ffea;
            box-shadow: 0 0 20px #00ffea, 0 0 40px #00ffea, 0 0 60px #00ffea;
        }
        .neon-button:hover::before{
            transform: translate(-50%, -50%) scale(1);
        }

        .box-item2{
            text-align: center;  
        }
       .box-item2 h3{
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #fff;
            text-shadow: 0 0 5px #c200e9, 
            0 0 10px #c200e9, 0 0 20px #c200e9;
       }

        .neon-button2{
            background: none;
            border: 2px solid #CC66FF;
            color: #CC66FF;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px #CC66FF, 0 0 20px #CC66FF;
        }
        .neon-button2::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(212, 0, 255, 0.3), transparent);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
            border-radius: 50%;
        }
        .neon-button2:hover{
            color: #1a1a1a;
            background: #CC66FF;
            box-shadow: 0 0 20px #CC66FF, 0 0 40px #CC66FF, 0 0 60px #CC66FF;
        }
        .neon-button2:hover::before{
            transform: translate(-50%, -50%) scale(1);
        }

        .box-item3{
            text-align: center;  
        }
       .box-item3 h3{
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #fff;
            text-shadow: 0 0 5px #00cf80, 
            0 0 10px #00cf80, 0 0 20px #00cf80;
       }

        .neon-button3{
            background: none;
            border: 2px solid #00FF99;
            color: #00FF99;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px #00FF99, 0 0 20px #00FF99;
        }
        .neon-button3::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(0, 255, 21, 0.3), transparent);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
            border-radius: 50%;
        }
        .neon-button3:hover{
            color: #1a1a1a;
            background: #00FF99;
            box-shadow: 0 0 20px #00FF99, 0 0 40px #00FF99, 0 0 60px #CC66FF;
        }
        .neon-button3:hover::before{
            transform: translate(-50%, -50%) scale(1);
        }
        .box-item4{
            text-align: center;  
        }
       .box-item4 h3{
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #fff;
            text-shadow: 0 0 5px #e6f700, 
            0 0 10px #e6f700, 0 0 20px #f4ff5e;
       }

        .neon-button4{
            background: none;
            border: 2px solid #FFFF99;
            color: #FFFF99;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px #FFFF99, 0 0 20px #FFFF99;
        }
        .neon-button4::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(255, 251, 0, 0.3), transparent);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
            border-radius: 50%;
        }
        .neon-button4:hover{
            color: #1a1a1a;
            background: #FFFF99;
            box-shadow: 0 0 20px #FFFF99, 0 0 40px #FFFF99, 0 0 60px #CC66FF;
        }
        .neon-button4:hover::before{
            transform: translate(-50%, -50%) scale(1);
        }