body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Jost', sans-serif;
}

.background-video-landscape, .background-video-portrait {
    position: fixed; /* หรือ absolute ก็ได้ */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* วิดีโอจะอยู่ด้านหลัง */
}

.login-box {
    position: relative; /* เพื่อให้เนื้อหาอยู่ด้านหน้า */
    z-index: 1; /* เนื้อหาจะอยู่ด้านหน้าวิดีโอ */
    background-color: rgba(255, 255, 255, 0.9); /* เพิ่มพื้นหลังขาวโปร่งใส */
    padding: 20px; /* เพิ่ม padding เพื่อเว้นระยะจากขอบ */
    border-radius: 10px; /* เพิ่มความโค้งของขอบ */
}

/* ซ่อนวิดีโอแนวตั้งเริ่มต้น */
.background-video-portrait {
    display: none;
}

/* แสดงวิดีโอแนวนอนในโหมด Landscape */
@media screen and (orientation: landscape) {
    .background-video-landscape {
        display: block;
    }

    .background-video-portrait {
        display: none;
    }
}

/* แสดงวิดีโอแนวตั้งในโหมด Portrait */
@media screen and (orientation: portrait) {
    .background-video-landscape {
        display: none;
    }

    .background-video-portrait {
        display: block;
    }

}
@media screen and (orientation: portrait) {
    .center-box.hide-on-mobile {
        display: none;
    }
}