.content__nav2 {
     background-color: #FFFFFF;
     height: 50px;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1000;
 }

/* Campaign Container */
.campaign-container {
     margin-top: 50px;
     padding: 20px;
     background-color: #f8f9fa;
     min-height: 100vh;
}

.campaign-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
     padding: 20px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.campaign-header h2 {
     margin: 0;
     color: #333;
     font-size: 24px;
     font-weight: 600;
}



/* Loading */
.campaign-loading {
     text-align: center;
     padding: 60px 20px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.campaign-loading .fa-spinner {
     color: #007bff;
     margin-bottom: 15px;
}

.campaign-loading p {
     color: #666;
     margin: 0;
     font-size: 16px;
}

/* Campaign List */
.campaign-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
}

.campaign-card {
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.campaign-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.campaign-image {
     height: 200px;
     overflow: hidden;
     position: relative;
}

.campaign-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease, opacity 0.3s ease;
}

.campaign-image img {
     transition: opacity 0.3s ease;
}

.campaign-image img[src*="banner_picture_default.png"] {
     opacity: 0.8;
     filter: grayscale(20%);
}

.no-image-placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     background-color: #f8f9fa;
     color: #6c757d;
     text-align: center;
}

.no-image-placeholder i {
     font-size: 48px;
     margin-bottom: 10px;
     opacity: 0.5;
}

.no-image-placeholder p {
     margin: 0;
     font-size: 14px;
     font-weight: 500;
}

.campaign-card:hover .campaign-image img {
     transform: scale(1.05);
}

.campaign-content {
     padding: 20px;
}

.campaign-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 15px;
}

.campaign-title {
     font-size: 18px;
     font-weight: 600;
     color: #333;
     margin: 0;
     flex: 1;
     margin-right: 15px;
}

.campaign-status {
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
}

.status-active {
     background-color: #d4edda;
     color: #155724;
}

.status-inactive {
     background-color: #f8d7da;
     color: #721c24;
}

.campaign-description {
     color: #666;
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 20px;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.campaign-details {
     margin-bottom: 20px;
}

.detail-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 0;
     border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
     border-bottom: none;
}

.detail-label {
     font-weight: 500;
     color: #666;
     font-size: 14px;
}

.detail-value {
     color: #333;
     font-size: 14px;
     font-weight: 500;
}

.commission-value {
     color: #28a745;
     font-weight: 600;
}

.campaign-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}

.campaign-actions .btn {
     padding: 6px 12px;
     font-size: 12px;
     border-radius: 6px;
     font-weight: 500;
}

/* No Campaigns */
.no-campaigns {
     text-align: center;
     padding: 60px 20px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.no-campaigns p {
     color: #666;
     font-size: 16px;
     margin: 0;
}

/* Pagination */
.campaign-pagination {
     margin-top: 30px;
}

.pagination-info {
     background: white;
     padding: 15px 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     margin-bottom: 15px;
}

.pagination-info .text-muted {
     font-size: 14px;
     color: #6c757d;
}

.campaign-pagination .pagination {
     margin: 0;
}

.campaign-pagination .page-link {
     color: #007bff;
     border: 1px solid #dee2e6;
     padding: 8px 12px;
     margin: 0 2px;
     border-radius: 6px;
     min-width: 40px;
     text-align: center;
     transition: all 0.2s ease;
}

.campaign-pagination .page-link:hover {
     color: #0056b3;
     background-color: #e9ecef;
     border-color: #dee2e6;
     transform: translateY(-1px);
}

.campaign-pagination .page-item.active .page-link {
     background-color: #007bff;
     border-color: #007bff;
     color: white;
     font-weight: 600;
}

.campaign-pagination .page-item.disabled .page-link {
     color: #6c757d;
     background-color: #f8f9fa;
     border-color: #dee2e6;
     cursor: not-allowed;
}

.campaign-pagination .page-link[title] {
     font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
     .campaign-list {
         grid-template-columns: 1fr;
     }
     
     
     .pagination-info .row {
         flex-direction: column;
         gap: 10px;
     }
     
     .pagination-info .col-md-6 {
         text-align: center !important;
     }
     
     .campaign-pagination .page-link {
         padding: 6px 8px;
         margin: 0 1px;
         min-width: 35px;
         font-size: 14px;
     }
}

@media (max-width: 480px) {
     .campaign-container {
         padding: 10px;
     }
     
     .campaign-header {
         padding: 15px;
     }
     
     .campaign-filters {
         padding: 15px;
     }
     
     .campaign-content {
         padding: 15px;
     }
}