body{
    background-color: #FFFFFF;
    font-family: sans-serif;
    margin: 10px;
}
h2{
    color: #111111;
    text-align: center;
    font-weight: bold;
}
.algo-selection{
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: space-between;
}
.algo-selection-1{
    display: flex;
    align-items: center;
    gap: 6px;
}
.algo-selection-2{
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}
.algo-selection-1 p {
    margin: 0;
}
.algo-selection-2 p {
    margin: 0;
}
#selection1{
    padding: 6px;
    border-radius: 6px;
    border: 1px solid;
}
#selection2{
    padding: 6px;
    border-radius: 6px;
    border: 1px solid;
}
#custom{
    margin-right: 10px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid;
}
#random{
    margin-left: 10px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid;
}
#input{
    margin-top: 10px;
    display: none;
    gap: 10px;
}
#set-array{
    height: 30px;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid;
    background-color: lightseagreen;
}
#elements{
    width: 500px;
}
.mode{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
/* #before{
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid;
} */
#play{
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid;
    background-color: lightseagreen;
}
/* #next{
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid;
}
#reset{
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid;
} */
.speed-selection{
    display: flex;
    align-items: center;
    gap: 6px;
}
.speed-selection p{
    margin: 0;
}
#select-speed{
    padding: 6px;
    border-radius: 6px;
    border: 1px solid;
}
.control{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 10px;
}
/* Khung chứa chung cho mọi chế độ */
.bar-container {
    background-color: #f1f3f5;  /* Màu nền xám nhạt */
    border: 2px solid #dee2e6;
    border-radius: 8px;
    display: flex;  /* Flexbox để các cột xếp hàng ngang và mọc từ dưới lên */
    align-items: flex-end;  /* Cột bám vào đáy khung */
    justify-content: center;    /* Cột nằm giữa khung */
    padding: 10px;
    width: 100%;
    height: 400px;  /* Chiều cao cố định để không bị nhảy khi tạo mảng */
    margin-bottom: 10px;
    overflow: hidden;   /* Cột quá cao sẽ bị cắt, không tràn ra ngoài */
}
/* Style cho từng cột */
.bar {
    background-color: lightseagreen;
    margin: 0 1px;  /* Khoảng cách giữa các cột */
    width: 60px; 
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border: 1px solid;
    transition: height 0.2s ease, background-color 0.2s ease;   /* Hiệu ứng chuyển động khi đổi chiều cao và màu sắc */
    position: relative;    /* Làm mốc tọa độ cho con số */
    overflow: visible !important;   /* Cho phép số bay ra khỏi phạm vi cột mà không bị cắt */
}
/* Style số trên cột */
.bar-label {
    position: absolute;    /* Định vị vị trí */
    bottom: 100%;   /* Đẩy số lên đỉnh cột (100% chiều cao cột) */
    left: 50%;    /* Căn giữa số theo chiều ngang của cột */
    transform: translateX(-50%);
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: black;

}
/* Tinh chỉnh cho chế độ So Sánh */
#compare-container .bar-container {
    height: 360px;  /* Ở chế độ so sánh, khung nhỏ hơn một chút cho vừa màn hình */
    border-color: #ced4da;
}
.evaluate{
    /* visibility: visible; */
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
    margin-bottom: 10px;
}
.annotate{
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: space-around;
    align-items: center;
}
#compare-container{
    display: none;
    margin-top: 10px;
}
#single-container{
    display: block;
    margin-top: 10px;
}