/* CSS cho nút nhấn */
.button {
    background-color: red; /* Màu mặc định cho nút */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px; /* Khoảng cách giữa các nút */
    cursor: pointer;
    border-radius: 5px;
    min-width: 100px; /* Độ rộng tối thiểu của nút */
}

/* CSS cho nút nhấn được chọn */
.active {
    background-color: green; /* Màu nút nhấn khi được chọn */
}

/* CSS cho đèn báo */
.indicator {
    width: 110px; /* Kích thước của đèn báo */
    height: 60px; /* Kích thước của đèn báo */
    border-radius: 50%; /* Đảm bảo nút hình tròn */
    background-color: red; /* Màu sắc mặc định */
    display: flex; /* Hiển thị nội dung chữ giữa đèn báo */
    justify-content: center; /* Căn giữa nội dung chữ */
    align-items: center; /* Căn giữa nội dung chữ */
    color: white; /* Màu chữ */
    font-weight: bold; /* Chữ in đậm */
    font-size: 13px; /* Kích thước chữ */
}

/* Đèn báo cho tag_over_load_error, tag_limit_trai_1KB, tag_limit_phải_2KB, tag_limit_trên_4KB, tag_ĐC_quay_đá_mài, tag_bơm_TL, tag_bơm_dầu, tag_ĐC_nâng_đá_mài, tag_ĐC_hạ_đá_mài, tag_ĐC_bơm_nước, tag_ĐC_gạt_phoi, tag_van_TL_rẽ_trái, tag_van_TL_rẽ_phải, tag_đèn_DH  */
.indicator-text {
    width: 100px; /* Kích thước của đèn báo */
    height: 150px; /* Kích thước của đèn báo */
    border-radius: 50%; /* Đảm bảo nút hình tròn */
    background-color: red; /* Màu sắc mặc định */
    display: flex; /* Hiển thị nội dung chữ giữa đèn báo */
    justify-content: center; /* Căn giữa nội dung chữ */
    align-items: center; /* Căn giữa nội dung chữ */
    color: black; /* Màu chữ */
    font-weight: bold; /* Chữ in đậm */
    font-size: 13px; /* Kích thước chữ */
    text-align: center; /* Căn giữa văn bản */
}
.on {
    background-color: green; /* Màu xanh khi có tín hiệu */
}

.off {
    background-color: red; /* Màu đỏ khi không có tín hiệu */
}


/* CSS cho nút stop1_1KY */
#Screen1 #btn_stop1_1KY {
    position: absolute;
    left: 50px; top: 230px;
    width: 110px; height: 50px;
    background-color: gray;
    ;
}

#Screen1 #btn_stop1_1KY:hover {
    background-color: red; /* Màu nền khi di chuột qua */
}

/* CSS cho nút stop2_2KY */
#Screen1 #btn_stop2_2KY {
    position: absolute;
    left: 200px; top: 230px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_stop2_2KY:hover {
    background-color: red; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Bơm_dầu_3KY */
#Screen1 #btn_Bơm_dầu_3KY {
    position: absolute;
    left: 350px; top: 230px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_Bơm_dầu_3KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Bơm_nước_4KY */
#Screen1 #btn_Bơm_nước_4KY {
    position: absolute;
    left: 500px; top: 230px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_Bơm_nước_4KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Dừng_TL_5KY */
#Screen1 #btn_Dừng_TL_5KY {
    position: absolute;
    left: 50px; top: 330px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_Dừng_TL_5KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Chạy_TL_6KY */
#Screen1 #btn_Chạy_TL_6KY {
    position: absolute;
    left: 200px; top: 330px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_Chạy_TL_6KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Lên_mài_7KY */
#Screen1 #btn_Lên_mài_7KY {
    position: absolute;
    left: 350px; top: 330px;
    width: 110px; height: 50px;
    background-color: gray;
}


#Screen1 #btn_Lên_mài_7KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/* CSS cho nút Hạ_mài_8KY */
#Screen1 #btn_Hạ_mài_8KY {
    position: absolute;
    left: 500px; top: 330px;
    width: 110px; height: 50px;
    background-color: gray;
}

#Screen1 #btn_Hạ_mài_8KY:hover {
    background-color: green; /* Màu nền khi di chuột qua */
}

/*nút nhấn chuyển mạch*/
.switch-container {
    display: flex; /* Sử dụng flexbox để căn chỉnh các thành phần con */
    justify-content: left; /* Căn giữa các thành phần theo trục chính (horizontal) */
    align-items: center; /* Căn giữa các thành phần theo trục phụ (vertical) */
    height: 100vh; /* Thiết lập chiều cao bằng 100% chiều cao của viewport */
}

.switch-label {
    display: flex; /* Sử dụng flexbox để căn chỉnh các thành phần con */
    align-items: center; /* Căn giữa các thành phần theo trục phụ (vertical) */
    margin-right: 60px; /* Khoảng cách bên phải giữa các nút nhấn */
}

.switch {
    position: relative; /* Thiết lập vị trí tương đối để có thể sử dụng vị trí tuyệt đối cho các phần tử con */
    display: inline-block; /* Hiển thị nút nhấn dưới dạng khối trên cùng một hàng */
    width: 60px; /* Chiều rộng của nút nhấn */
    height: 34px; /* Chiều cao của nút nhấn */
}

.switch input {
    opacity: 0; /* Ẩn input nhưng vẫn giữ không gian cho nó */
    width: 0; /* Ẩn input nhưng vẫn giữ không gian cho nó */
    height: 0; /* Ẩn input nhưng vẫn giữ không gian cho nó */
}

.slider {
    position: absolute; /* Thiết lập vị trí tuyệt đối để có thể điều chỉnh vị trí theo input */
    cursor: pointer; /* Chuyển đổi con trỏ thành dấu nhấn khi di chuột vào */
    top: 0; /* Đặt vị trí trên cùng của nút nhấn */
    left: 0; /* Đặt vị trí bên trái của nút nhấn */
    right: 0; /* Đặt vị trí bên phải của nút nhấn */
    bottom: 0; /* Đặt vị trí dưới cùng của nút nhấn */
    background-color: #ccc; /* Màu nền của nút nhấn */
    transition: .4s; /* Hiệu ứng chuyển đổi màu nền khi có sự thay đổi */
    border-radius: 34px; /* Bo tròn các góc của nút nhấn */
}

.slider:before {
    position: absolute; /* Thiết lập vị trí tuyệt đối để có thể điều chỉnh vị trí theo input */
    content: ""; /* Không hiển thị bất kỳ nội dung nào */
    height: 26px; /* Chiều cao của nút trượt */
    width: 26px; /* Chiều rộng của nút trượt */
    left: 4px; /* Đặt vị trí bên trái của nút trượt */
    bottom: 4px; /* Đặt vị trí dưới cùng của nút trượt */
    background-color: white; /* Màu nền của nút trượt */
    transition: .4s; /* Hiệu ứng chuyển đổi màu nền khi có sự thay đổi */
    border-radius: 50%; /* Bo tròn nút trượt để tạo hình tròn */
}

input:checked + .slider {
    background-color: green; /* Đổi màu nền của nút nhấn khi được nhấn */
}

input:focus + .slider {
    box-shadow: 0 0 1px green; /* Tạo hiệu ứng đổ bóng khi di chuột vào */
}

input:checked + .slider:before {
    transform: translateX(26px); /* Di chuyển nút trượt sang phải khi nút nhấn được nhấn */
}

.slider.round {
    border-radius: 34px; /* Bo tròn các góc của nút nhấn */
}

.slider.round:before {
    border-r