/* resources/css/custom.css */

.desktop-only {
    
}

@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }
}

.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
}


.materials-list {
    list-style: none;
    padding-left: 0;
    font-size: 16px;
    /* Kích thước font nhỏ hơn cho danh sách vật tư */
}

.materials-list li {
    padding: .25rem 0;
    border-bottom: 1px dashed #eee !important;
}

.materials-list li:last-child {
    border-bottom: none;
}

.sub-materials-list {
    list-style-type: none; 
    padding-left: 1.6rem;
    margin-top: 0.5rem;
}

.product-list-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    /* Đảm bảo ảnh không bị méo */
    border-radius: 4px;
    border: 1px solid #ddd;
}

.image-clickable:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#imageModal .modal-content {
    background-color: #fff;
    border-radius: 8px;
}

#imageModal .modal-body {
    padding: 20px;
}

#modalImage {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.square-18 {
    width: 18px;
    height: 18px;
}


/* CSS để thông báo tự động xuống dòng */
.notification-item {
    white-space: normal !important; /* Cho phép nội dung xuống dòng */
    overflow: hidden; /* Ẩn phần nội dung nếu nó vẫn vượt quá (tùy chọn) */
    text-overflow: ellipsis; /* Hiển thị dấu ba chấm nếu nội dung bị ẩn (tùy chọn) */
    height: auto; /* Đảm bảo chiều cao tự động điều chỉnh */
    padding-top: .5rem; /* Điều chỉnh padding nếu cần để có thêm không gian */
    padding-bottom: .5rem; /* Điều chỉnh padding nếu cần */
}

/* Tùy chỉnh thêm cho phần message bên trong dropdown-item */
.notification-item i.mr-2 {
    float: left; /* Để icon nằm bên trái và text chảy quanh */
    margin-top: 5px; /* Điều chỉnh vị trí icon theo text */
}
.notification-item .text-muted.text-sm {
    display: block; /* Đảm bảo thời gian nằm trên một dòng riêng */
    margin-top: 5px; /* Khoảng cách giữa message và time */
    clear: both; /* Clear float từ icon nếu có */
}