/* Layout chung */
.tab-content { padding: 20px; background: #fff; min-height: 300px; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }

/* Grouping thông tin */
.info-section { margin-bottom: 20px; }
.info-title { font-weight: bold; color: #2c3e50; border-left: 4px solid #3498db; padding-left: 10px; margin-bottom: 15px; font-size: 0.9rem; text-transform: uppercase; }

/* Field styling */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 12px; color: #666; font-weight: 500; }
.form-value { font-size: 14px; color: #333; font-weight: 600; padding: 8px 12px; background: #f8f9fa; border-radius: 4px; min-height: 36px; display: flex; align-items: center; }

/* Status Badges */
.badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.status-active { background: #e6fffa; color: #0694a2; }
.status-draft { background: #f4f5f7; color: #4b5563; }
.status-expiring { background: #fff8e6; color: #d97706; }
.status-cancelled { background: #fde8e8; color: #e02424; }

/* Tab Bar */
.tab-bar { display: flex; gap: 4px; border-bottom: 2px solid #ddd; padding: 0 10px; }
.tab { padding: 10px 20px; cursor: pointer; border: none; background: #eee; border-radius: 8px 8px 0 0; font-weight: 600; transition: 0.3s; color: #666; }
.tab.active { background: #3498db; color: #fff; }

/* Footer Action */
.action-bar { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; background: #fdfdfd; border-top: 1px solid #eee; }
.btn { padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline-danger { border: 1px solid #e74c3c; color: #e74c3c; background: transparent; }

.tab-pane {
    display: none; /* Ẩn mặc định */
}
.tab-pane.active {
    display: block; /* Chỉ hiện khi có class active */
}


.pl-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}
.pl-item-row:hover {
    background: #f0f7ff;
}
.pl-item-info {
    display: flex;
    flex-direction: column;
}
.pl-item-info strong {
    font-size: 14px;
    color: #333;
}
.pl-item-info span {
    font-size: 12px;
    color: #666;
}