/* Khung nền mờ phủ toàn màn hình */
.detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition); /* Đã đồng bộ hiệu ứng chuyển động mượt */
}

/* Kích hoạt hiển thị modal */
.detail-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Hộp thoại nội dung chính trung tâm */
.detail-content {
    background: var(--sf);
    width: 100%;
    max-width: 480px;
    padding: 24px;
    border-radius: var(--r);       /* Đã đồng bộ bo góc modal (16px) */
    box-shadow: var(--shadow-md);   /* Đã đồng bộ bóng đổ vừa */
    position: relative; /* Giữ vị trí cố định để làm tâm căn góc cho nút X */
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.detail-modal.active .detail-content {
    transform: translateY(0);
}


/* Tiêu đề Modal */
.detail-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: var(--f-size-lg);       /* Đã đổi (18px) */
    color: var(--t);
    border-bottom: 1px solid var(--b);
    padding-bottom: 12px;
    font-weight: var(--f-weight-bold); /* Đã bổ sung độ đậm tiêu chuẩn cho h3 */
}

/* Các hàng thông tin chi tiết */
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: var(--f-size-base);     /* Đã đổi (14px) */
    border-bottom: 1px dashed var(--b);
}

.detail-row:last-of-type {
    border-bottom: none;
    margin-bottom: 20px; /* Tăng khoảng cách một chút để không dính sát vào nút bấm dưới */
}

.detail-label {
    color: var(--ts);
    font-weight: var(--f-weight-medium); /* Đã đổi (500) */
}

.detail-value {
    color: var(--t);
    font-weight: var(--f-weight-semibold); /* Đã đổi (600) */
}

/* NÚT XÓA HÓA ĐƠN MÀU ĐỎ PHÍA DƯỚI */
.detail-delete-btn {
    width: 100%;
    height: 44px;
    background: var(--d);
    border: none;
    border-radius: var(--r-md);         /* Đã đồng bộ bo góc nút (10px) */
    color: var(--white);
    font-weight: var(--f-weight-bold);  /* Đã đổi (700) */
    font-size: var(--f-size-base);      /* Đã đổi (14px) */
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s;
}

.detail-delete-btn:hover {
    background: #b91c1c; /* Đổi sang màu đỏ sẫm khi nhân viên rê chuột vào */
}