@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

body,
html {
    height: 100%;
}

/*form {
    max-height: 100vh;*/ /* Giới hạn chiều cao tối đa cho form */
/*overflow-y: auto;*/ /* Thêm cuộn dọc nếu cần */
/*}*/




body {
    font-family: 'Open Sans';
    /*font-weight: bold;*/
    margin: 0;
    min-height: 100vh; /* Đảm bảo chiều cao toàn màn hình */
    overflow: auto;
    padding: 0.5rem;
    display: flex; /* Bắt buộc phải có để align-items hoạt động */
    flex-direction: column; /* Nếu muốn sắp xếp nội dung theo cột */
    justify-content: flex-start; /* Căn giữa theo chiều dọc */
    align-items: center; /* Căn giữa nội dung bên trong theo chiều ngang */
}

.main-form {
    width: 100%; /* Để chiếm toàn bộ chiều rộng trên thiết bị nhỏ */
    max-width: 600px; /* Giới hạn chiều rộng tối đa */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung theo chiều dọc */
    align-items: center; /* Căn giữa nội dung theo chiều ngang */
    margin: 0 auto; /* Căn giữa container theo chiều ngang */
    margin-top: 10px;
    /*padding: 1rem;*/ /* Thêm khoảng cách bên trong */
    /*animation: FadeIn 3s ease-out forwards;*/ /* Chạy animation */
    /*display: none;*/
    /*opacity: 0;*/
}

.login-form {
    width: 100%; /* To take up full width on small devices */
    max-width: 600px; /* Limit maximum width */
    /*box-sizing: border-box;*/
    /*display: flex;*/
    flex-direction: column;
    /*justify-content: center;*/ /* Center content vertically */
    /*align-items: center;*/ /* Center content horizontally */
    /*margin: 0rem auto;*/ /* Center the container horizontally */
    /*animation: FadeIn 3s ease-out forwards;*/ /* Animation */
    /*height: 100%;*/ /* Make sure it takes up the full height of the container */
}

@keyframes FadeIn {
    0% {
        opacity: 0; /* Bắt đầu ẩn */
    }

    100% {
        opacity: 1; /* Hiện lên hoàn toàn */
    }
}

.camera {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    /*margin: 1rem auto;*/
    width: 30vw;
    height: 40vw;
    /*width: 6vw;
    height: 5vw;*/
    max-width: 600px;
    padding: 0.25rem;
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    object-fit: cover;
}

    .camera:hover, .camera:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }


.logo {
    margin: 0 auto; /* Căn giữa theo chiều ngang */
}

.logoMain {
    width: 25vw;
    margin-top: 5px;
    opacity: 0; /* Đặt ban đầu là ẩn */
    animation: slideAndFade 1.5s ease-out forwards; /* Chạy animation */
}

@keyframes slideAndFade {
    0% {
        transform: translateY(-50px); /* Di chuyển từ trên */
        opacity: 0; /* Bắt đầu ẩn */
    }

    100% {
        transform: translateY(0); /* Dừng tại vị trí ban đầu */
        opacity: 1; /* Hiện lên hoàn toàn */
    }
}

.btnLoginForm {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 45vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    height: 10vw;
    max-width: 700px; /* Tùy chọn để hạn chế kích thước tối đa */
    /*padding: 0.25rem;*/
    transition: 250ms background ease-in;
    font-size: 1.2rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .btnLoginForm:hover, .btnLoginForm:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.txtLoginForm {
    background: transparent;
    border: 0 solid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: whitesmoke;
    display: block;
    margin: 1rem auto;
    /*margin-bottom: 10px;*/
    padding: 1rem;
    transition: 250ms background ease-in;
    width: 50vw; /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    max-width: 600px; /* Giới hạn chiều rộng tối đa */
    font-size: 1.2rem;
    text-align: center;
    font-family: 'Open Sans';
}

.btnStatusCamera {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 25vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    height: 5vw;
    max-width: 700px; /* Tùy chọn để hạn chế kích thước tối đa */
    /*padding: 0.25rem;*/
    transition: 250ms background ease-in;
    font-size: 1.4rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .btnStatusCamera:hover, .btnStatusCamera:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.combobox {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 30vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    height: 3vw;
    max-width: 700px; /* Tùy chọn để hạn chế kích thước tối đa */
    /*padding: 0.25rem;*/
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .combobox:hover, .combobox:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.button {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: calc(100%); /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    max-width: 600px; /* Tùy chọn để hạn chế kích thước tối đa */
    padding: 0.25rem;
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .button:hover, .button:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

input ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

input ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

input :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

input:focus {
    outline: 0 transparent solid;
}

    input:focus ::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.7);
    }

    input:focus ::-moz-placeholder {
        color: rgba(0, 0, 0, 0.7);
    }

    input:focus :-ms-input-placeholder {
        color: rgba(0, 0, 0, 0.7);
    }



.input-text {
    background: transparent;
    border: 0 solid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: whitesmoke;
    display: block;
    margin: 0rem auto;
    /*margin-bottom: 10px;*/
    padding: 1rem;
    transition: 250ms background ease-in;
    width: calc(100% - 2rem); /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    max-width: 600px; /* Giới hạn chiều rộng tối đa */
    font-size: 1.5rem;
    font-family: 'Open Sans';
}
/* Thêm chiều rộng mặc định cho các input có id #txtQuantity và #txtUOM */
#txtQuantity {
    width: 108px; /* Chiều rộng mặc định cho #txtQuantity */
}

#txtUOM {
    width: 90px; /* Chiều rộng mặc định cho #txtUOM */
}

/* Quy tắc khi focus vào input */
.input-text:focus {
    background: whitesmoke;
    color: black;
    transition: 250ms background ease-in;
}

.input-text:focus {
    background: whitesmoke;
    color: black;
    transition: 250ms background ease-in;
}


.input-barcode {
    background: transparent;
    border: 0 solid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: whitesmoke;
    display: block;
    margin: 1rem auto;
    margin-bottom: 10px;
    /*padding: 1rem;*/
    transition: 250ms background ease-in;
    width: 35vw; /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    max-width: 800px; /* Giới hạn chiều rộng tối đa */
    font-size: 1.5rem;
}

    .input-barcode:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

/*.video {
    width: 10%;*/ /* Đặt chiều rộng video bằng 100% */
/*height: auto;*/ /* Để chiều cao tự động theo tỷ lệ */
/*max-width: 300px;*/ /* Giới hạn chiều rộng tối đa */
/*border: 1px solid #000;*/ /* Thêm viền cho video */
/*display: none;*/ /* Ẩn video mặc định */
/*}*/

.tableItem {
    font-family: 'Open Sans';
    background: transparent;
    color: whitesmoke;
    /*display: block;*/
    margin-top: 10px;
    margin-bottom: 10px;
    /*padding: 1rem;*/
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    font-size: 1.2rem;
    font-weight: bold;
    border-collapse: collapse; /* Xóa khoảng cách giữa các ô */
    width: 62vw; /* Chiếm toàn bộ chiều rộng của phần tử chứa */
    /*border: 1px solid #ddd;*/ /* Đặt viền bên ngoài cho bảng */
    margin: 1rem 0; /* Khoảng cách trên và dưới bảng */
}

    .tableItem th, .tableItem td {
        border: 3px solid #ddd; /* Viền cho các ô */
        padding: 0.5rem; /* Khoảng cách bên trong các ô */
        text-align: center; /* Canh lề văn bản bên trái */
    }


/*.tableItem td:nth-child(2) {
            text-align: left;          
        }*/

.labelName {
    background: transparent;
    border: 0 solid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: whitesmoke;
    display: block;
    /*margin: 1rem auto;*/
    /*margin-bottom: 10px;*/
    padding: 1rem;
    transition: 250ms background ease-in;
    width: 32.5vw; /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    height: 32.5vw; /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    /*width: 40.5vw;*/ /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    font-size: 1.5rem;
    font-family: 'Open Sans';
}

    .labelName:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.button {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 47vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    max-width: 600px; /* Tùy chọn để hạn chế kích thước tối đa */
    padding: 0.25rem;
    transition: 250ms background ease-in;
    font-size: 0.8rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .button:hover, .button:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.buttonSave {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 34vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    max-width: 600px; /* Tùy chọn để hạn chế kích thước tối đa */
    padding: 0.25rem;
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .buttonSave:hover, .buttonSave:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.buttonScan {
    border: 3px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-top: 50px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: 31vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    height: 5vw; /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    max-width: 600px; /* Tùy chọn để hạn chế kích thước tối đa */
    /*padding: 0.25rem;*/
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .buttonScan:hover, .buttonScan:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }

.buttonDelete {
    border: 0px solid whitesmoke;
    background: transparent;
    color: whitesmoke;
    display: block;
    /*margin-bottom: 100px;*/
    margin: 1rem auto; /* Căn giữa theo chiều ngang */
    width: calc(100%); /* Đặt kích thước bằng với độ phân giải màn hình và trừ đi khoảng cách từ các cạnh */
    max-width: 600px; /* Tùy chọn để hạn chế kích thước tối đa */
    padding: 0.25rem;
    transition: 250ms background ease-in;
    font-size: 1.5rem;
    box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng cộng */
}

    .buttonDelete:hover, .buttonDelete:focus {
        background: whitesmoke;
        color: black;
        transition: 250ms background ease-in;
    }


[class*=underlay] {
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    top: 0;
}

.underlay-photo {
    -webkit-animation: hue-rotate 6s infinite;
    animation: hue-rotate 6s infinite;
    background: url("../../Images/backg.jpg");
    /*background: url("https://31.media.tumblr.com/41c01e3f366d61793e5a3df70e46b462/tumblr_n4vc8sDHsd1st5lhmo1_1280.jpg");*/
    background-size: cover;
    -webkit-filter: grayscale(30%);
    z-index: -1;
}

.underlay-black {
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

@-webkit-keyframes hue-rotate {
    from {
        -webkit-filter: grayscale(30%) hue-rotate(0deg);
    }

    to {
        -webkit-filter: grayscale(30%) hue-rotate(360deg);
    }
}

@keyframes hue-rotate {
    from {
        -webkit-filter: grayscale(30%) hue-rotate(0deg);
    }

    to {
        -webkit-filter: grayscale(30%) hue-rotate(360deg);
    }
}



.space {
    padding: 15px;
}

.errorlist {
    font: 1;
    color: whitesmoke;
    display: flex;
    /* flex-direction:row; */
    justify-content: center;
}

.thankyoubtn {
    /*border: 3px solid whitesmoke;*/
    background: transparent;
    color: whitesmoke;
    display: block;
    margin: 1rem auto;
    min-width: 20%;
    /* padding: 0.25rem; */
    transition: 250ms background ease-in;
    font-size: 3rem;
    text-align: center;
}

.object {
    display: flex;
    gap: 1rem;
}


.objectDon {
    margin-top: 100px;
    flex-direction: column; /* Nếu muốn sắp xếp nội dung theo cột */
    justify-content: flex-start; /* Căn giữa theo chiều dọc */
    align-items: center; /* Căn giữa nội dung bên trong theo chiều ngang */
    /*display: flex;*/
    gap: 1rem;
}

.heightspace {
    padding: 90px;
}
/* Đối với màn hình nhỏ hơn */
@media (max-width: 600px) {

    .combobox {
        /*width: 96vw;*/
        width: 36vw;
        height: 10vw;
        font-size: 1rem;
    }

    .main-form {
        width: 100%;
        margin: 0;
    }

    .object {
        gap: 0.3rem;
    }

    .logoMain {
        width: 85vw;
    }

    .buttonScan {
        width: 58vw;
        /*width: 49vw;*/
        height: 15vw;
        font-size: 1rem;
    }

    .input-text {
        font-size: 1.1rem;
        width: 19vw;
        height: 2vw;
    }

    .txtLoginForm {
        width: 70vw; /* Chiếm toàn bộ chiều rộng trừ đi khoảng cách */
        font-size: 1.2rem;
    }

    .labelName {
        /*width: 64vw;*/
        height: 38.5vw;
        width: 49vw;
        font-size: 1.1rem;
    }

    .input-barcode {
        width: 53vw;
        /*width: 43vw;*/
        /*height: 9vw;*/
        font-size: 1.2rem;
    }

    .buttonSave {
        width: 36vw;
        /*width: 45vw;*/
        height: 15vw;
        font-size: 1rem;
    }

    .camera {
        /*width: 20vw;*/
        /*height: 34vw;*/
        width: 36vw;
        height: 60vw;
    }

    .tableItem {
        width: 95vw;
        font-size: 0.8rem;
    }

    .btnStatusCamera {
        width: 31vw;
        height: 19vw;
        font-size: 1.1rem;
    }

    #txtQuantity {
        width: 20vw;
    }

    #txtUOM {
        width: 17vw;
    }
}