/* css/styles.css */

/* Định dạng danh sách thực phẩm */
#food-table-body tr td {
    vertical-align: middle;
}
/* Điều chỉnh giao diện cho Select2 */
.select2-container--bootstrap5 .select2-selection {
    height: 38px;
    padding: 6px 12px;
    font-size: 1rem;
    border-radius: .25rem;
    border: 1px solid #ced4da;
}

/* Điều chỉnh kiểu hiển thị khi dropdown mở */
.select2-container--bootstrap5 .select2-dropdown {
    font-size: 1rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: .25rem;
}

/* Điều chỉnh chiều rộng của dropdown */
.select2-container--bootstrap5 .select2-selection--single {
    width: 100% !important;
}

/* Tùy chỉnh danh sách chọn trong dropdown */
.select2-container--bootstrap5 .select2-results__option {
    padding: 10px;
    font-size: 1rem;
}

/* Tùy chỉnh nhóm tùy chọn trong dropdown */
.select2-container--bootstrap5 .select2-results__group {
    font-weight: bold;
    background-color: #f4f4f4;
    padding: 5px 10px;
}

/* Tối ưu hóa cho điện thoại */
@media (max-width: 576px) {
    body {
        font-size: 14px; /* Giảm kích thước font cho dễ đọc trên điện thoại */
    }

    .container {
        padding: 15px; /* Thêm padding cho container để không bị sát mép */
    }

    /* Điều chỉnh bảng để hiển thị tốt hơn trên màn hình nhỏ */
    #food-table-body {
        font-size: 0.9rem; /* Giảm kích thước chữ của bảng */
    }

    .table {
        width: 100%;
        table-layout: fixed;
    }

    /* Sửa chiều rộng Select2 cho phù hợp với màn hình nhỏ */
    .select2-container--bootstrap5 .select2-selection--single {
        width: 100% !important;
    }

    /* Thực phẩm và số lượng hiển thị tốt hơn */
    .form-control, .form-select {
        width: 100%;
    }

    .btn {
        width: 100%; /* Nút sẽ chiếm toàn bộ chiều rộng trên điện thoại */
        margin-bottom: 10px; /* Khoảng cách giữa các nút */
    }

    .input-group {
        width: 100%; /* Nâng cấp ô nhập link chia sẻ để chiếm toàn bộ chiều rộng */
    }

    .input-group .form-control {
        margin-bottom: 0; /* Bỏ margin bottom cho input */
    }

    /* Điều chỉnh vị trí các nút chia sẻ */
    .d-flex {
        flex-direction: column; /* Các nút chia sẻ sẽ xếp dọc trên màn hình nhỏ */
        gap: 5px;
    }

    .btn {
        font-size: 14px; /* Giảm kích thước font của nút */
    }
}

/* Cho các màn hình lớn hơn */
@media (min-width: 577px) {
    .btn {
        width: auto; /* Nút sẽ có chiều rộng tự động */
    }
}
/* Đảm bảo các nút Tiến và Lùi có kiểu dáng đẹp */
#prev-tab, #next-tab, #prev-tab-bottom, #next-tab-bottom {
    font-size: 16px;
    margin: 10px;
    padding: 10px 20px;
}

/* Giúp các nút đứng cùng một dòng nếu cần */
.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Vô hiệu hóa khả năng chọn các tab */
.nav-tabs .nav-link {
    pointer-events: none;
    cursor: default;
    color: #6c757d; /* Thêm màu xám cho các tab */
}

/* Thay đổi màu sắc của tab đang được chọn để giữ nguyên */
.nav-tabs .nav-link.active {
    pointer-events: auto;
    cursor: pointer;
    color: #0d6efd; /* Thêm màu xanh cho tab đang được chọn */
}
/* Làm cho tab đang kích hoạt in đậm */
.nav-link.active {
    font-weight: bold;  /* In đậm chữ */
}
/* Điều chỉnh kích thước của icon */
button i {
    margin-right: 8px; /* Khoảng cách giữa icon và văn bản */
    font-size: 1.2em; /* Tăng kích thước của icon */
}
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0.6%;
}

.input-group .form-control {
    flex-grow: 1;  /* Cho phép input chiếm toàn bộ không gian */
}

.input-group .btn {
    border-radius: 0; /* Để cho nút và input thẳng hàng */
    margin-left: -1px; /* Đảm bảo nút sát với ô input */
    height: 50%;
}