body {

    width: 100%;
    height: 80vh;
    position: relative;
    background: #f5f8fd url('../dist/img/bg/bg.png') center top no-repeat;
    background-size: cover;
    /* padding-top: 110px; */
    font-family: "kanit";
}

.mobile {
    margin-top: 200px;
}

.logo {
    width: 70%;
    margin: auto;
    /* text-align: center; */

}

.jumbotron-head {
    padding: 0rem 1rem;
    margin-bottom: -4rem;
    height: 30vh;
    background-color: rgb(21, 29, 221, 0.7);
    /* border-radius: 1.5rem; */
}

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;

    background-color: rgba(230, 232, 238, 0.7);
    border-radius: 1.5rem;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 2rem 1rem;
        
    }
}

.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

@media screen and (max-width: 1024px) {
    body {
        width: 100%;
        height: 80vh;
        position: relative;
        background: #f5f8fd url('../dist/img/bg/bg.png') center top no-repeat;
        background-size: cover;
        /* padding-top: 110px; */
    }
    .logo {
        width: 80%;
        margin: auto;
        /* text-align: center; */

    }

    .jumbotron-head {
        padding: 0.2rem 1rem;
        margin-bottom: -4rem;
        height: 25vh;
        background-color: rgb(11 15 129);
        /* border-radius: 1.5rem; */
    }
}
@media screen and (max-width: 666px) {
    body {
        width: 100%;
        height: 80vh;
        position: relative;
        background: #f5f8fd url('../dist/img/bg/bg.png') center top no-repeat;
        background-size: auto;
        /* padding-top: 110px; */
    }
    .logo {
        width: 80%;
        margin: auto;
        /* text-align: center; */

    }

    .jumbotron-head {
        padding: 0.2rem 1rem;
        margin-bottom: -4rem;
        height: 25vh;
        background-color: rgb(11 15 129);
        /* border-radius: 1.5rem; */
    }
}
@media screen and (max-width: 640px) {
    body {
        width: 100%;
        height: 100vh;
        position: relative;
        background: #f5f8fd url('../dist/img/bg/bg.png') center top no-repeat;
        background-size: cover;
        /* padding-top: 110px; */
    }
    .logo {
        width: 70%;
        margin: auto;
        /* text-align: center; */

    }

    .jumbotron-head {
        padding: 0.2rem 1rem;
        margin-bottom: -4rem;
        height: 30vh;
        background-color: rgb(11 15 129);
        /* border-radius: 1.5rem; */
    }
}

@media screen and (max-width: 480px) {
    body {
        width: 100%;
        height: 80vh;
        position: relative;
        background: #f5f8fd url('../dist/img/bg/bg.png') center top no-repeat;
        background-size: cover;
        /* padding-top: 110px; */
    }

    .logo {
        width: 100%;
        margin: auto;
        /* text-align: center; */

    }

    .jumbotron-head {
        padding: 0.2rem 1rem;
        margin-bottom: -4rem;
        height: 16vh;
        background-color: rgb(11 15 129);
        /* border-radius: 1.5rem; */
    }

}


.button-container {
    text-align: center;
    /* จัดตำแหน่งให้อยู่กึ่งกลาง */
    margin-top: 10px;
    /* ระยะห่างจากด้านบน */
}

/* ออกแบบปุ่ม */
.qr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4CAF50;
    /* สีพื้นหลังปุ่ม */
    color: white;
    /* สีข้อความ */
    border: none;
    /* ไม่มีขอบ */
    padding: 10px 20px;
    /* ระยะห่างภายในปุ่ม */
    font-size: 16px;
    /* ขนาดฟอนต์ */
    border-radius: 50px;
    /* ขอบโค้งมน */
    cursor: pointer;
    /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
    transition: background-color 0.3s;
    /* เอฟเฟกต์เปลี่ยนสีเมื่อ hover */
}

.stop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b43a3a;
    /* สีพื้นหลังปุ่ม */
    color: white;
    /* สีข้อความ */
    border: none;
    /* ไม่มีขอบ */
    padding: 10px 20px;
    /* ระยะห่างภายในปุ่ม */
    font-size: 16px;
    /* ขนาดฟอนต์ */
    border-radius: 50px;
    /* ขอบโค้งมน */
    cursor: pointer;
    /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
    transition: background-color 0.3s;
    /* เอฟเฟกต์เปลี่ยนสีเมื่อ hover */
}

.qr-button:hover {
    background-color: #45a049;
    /* สีเมื่อ hover */
}

/* จัดการไอคอนในปุ่ม */
.qr-button img {
    width: 20px;
    /* ขนาดของไอคอน */
    height: 20px;
    margin-right: 10px;
    /* ระยะห่างระหว่างไอคอนและข้อความ */
}

.stop-button img {
    width: 20px;
    /* ขนาดของไอคอน */
    height: 20px;
    margin-right: 10px;
    /* ระยะห่างระหว่างไอคอนและข้อความ */
}

#qr-video {
    line-height: 0;
    width: 300px;
    /* height: 300px; */
}
#cam-has-camera {
    display: none;
}
#cam-qr-result {
    display: none;
}