.crm-table{
    width:100%;
    border-collapse: collapse;
}

.crm-table th, .crm-table td{
    padding:10px;
    border-bottom:1px solid #ddd;
}

.crm-table tr:hover{
    background:#f9f9f9;
}

.over{
    background:#ffe5e5;
}

.today{
    background:#fff3cd;
}

.menu button{
    margin:5px;
}
.history{
    margin-bottom:15px;
}

.his-row{
    padding:10px;
    border-bottom:1px solid #eee;
}

/* Container chính để không bị tràn */
#crm-content {
    padding: 10px;
    overflow-x: hidden;
}

/* Header Dashboard linh hoạt */
h3 { margin-top: 10px; font-size: 1.4rem; }

/* Các ô thống kê Dashboard trên Mobile */
div[style*="display:flex; gap:20px;"] {
    flex-direction: column !important;
    gap: 10px !important;
}

/* Thanh công cụ (Tìm kiếm, Select) */
div[style*="display:flex; gap:10px; flex-wrap:wrap;"] {
    flex-direction: column !important;
    align-items: stretch !important;
}
#search, #f-area, #f-staff {
    width: 100% !important;
    box-sizing: border-box;
}



/* Tối ưu form Sửa/Thêm khách hàng */
div[style*="max-width:400px;"] {
    max-width: 100% !important;
}
input, textarea, select {
    font-size: 16px !important; /* Chống iOS tự zoom khi click vào ô nhập liệu */
}

/* Container chính của Menu */
.crm-main-menu {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}


/* Style chung cho tất cả các nút */
.crm-btn {
    display: inline-flex;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
    height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    color: #444;
	    width: 100%;
    text-align: left;
}

/* Xử lý Icon Emoji từ WordPress */
.crm-btn .emoji {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Nút điều hướng (Dashboard, Danh sách...) */
.btn-nav {
    background: #f8f9fa;
    border: 1px solid #e9ecef !important;
}

.btn-nav:hover {
    background: #673ab7;
    color: #fff;
    border-color: #673ab7 !important;
}

/* Khi hover nút nav, đổi màu icon emoji (nếu có thể) hoặc hiệu ứng nháy nhẹ */
.btn-nav:hover .emoji {
    filter: brightness(0) invert(1);
}

/* Nút Thêm mới (Nổi bật) */
.btn-add {
    background: #28a745;
    color: #fff;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
}

.btn-add:hover {
    background: #218838;
    transform: translateY(-1px);
}

/* Nút Thoát */
.btn-logout {
    background: #dc3545;
    color: #fff;
    margin-left: auto; /* Đẩy về bên phải trên desktop */
}

.btn-logout:hover {
    background: #c82333;
}

/* --- TỐI ƯU CHO MOBILE (< 600px) --- */
@media screen and (max-width: 600px) {
    .crm-main-menu {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Chia làm 2 cột đều nhau */
        gap: 8px;
        padding: 10px;
    }

    .crm-btn {
        width: 100%; /* Nút chiếm hết ô lưới */
        height: 45px; /* Tăng chiều cao một chút để dễ bấm */
        font-size: 13px;
        padding: 0 8px;
    }

    /* Nút Thoát và Thêm mới chiếm toàn bộ chiều ngang ở hàng cuối */
    .btn-add, .btn-logout {
        grid-column: span 1; /* Hoặc span 2 nếu muốn nút đó dài ra */
        margin-left: 0;
    }
    
    /* Nếu muốn nút Thoát rộng hết cỡ ở cuối */
    .btn-logout {
        grid-column: span 2;
        margin-top: 5px;
    }
	.hidemobile {display:none!important;}
}


/* Ẩn tbody trống để không bị hiện khung card thừa trên mobile */
tbody:empty {
    display: none !important;
}

/* Hoặc cụ thể hơn nếu nó chứa khoảng trắng */
tbody:not(:has(tr)) {
    display: none !important;
}