/* Campaign Detail page */

/* Campaign Hero */
.cd-hero{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px}
.cd-icon{width:64px;height:64px;border-radius:var(--r-lg);background:linear-gradient(135deg,#1e3a5f,#2a4a7f);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;border:2px solid var(--border)}
.cd-info{flex:1}
.cd-name{font-size:24px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.cd-status{font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--r-full);background:#d1fae5;color:#065f46}
.cd-meta{font-size:12px;color:var(--txt3);display:flex;align-items:center;gap:14px;margin-bottom:10px}
.cd-tags{display:flex;gap:5px}
.cd-actions{display:flex;gap:10px;flex-shrink:0}

/* Detail KPIs */
.dkpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.dkpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden}
.dkpi-label{font-size:10.5px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.dkpi-val{font-size:22px;font-weight:900;line-height:1;margin-bottom:4px;letter-spacing:-.5px}
.dkpi-sub{font-size:11px;color:var(--txt3)}
.dkpi-chart{position:absolute;right:10px;bottom:10px;opacity:.15;font-size:28px}
.dkpi-progress{display:flex;align-items:center;gap:8px;margin-top:6px}
.dkpi-pbar{flex:1;height:6px;background:var(--border-lt);border-radius:3px;overflow:hidden}
.dkpi-pfill{height:100%;background:linear-gradient(90deg,var(--blue),#60a5fa);border-radius:3px}
.dkpi-pct{font-size:14px;font-weight:800;color:var(--blue)}
.dkpi.deadline{border-color:#fed7aa}
.dkpi.deadline .dkpi-val{color:var(--red);font-size:20px}

/* Detail Tabs */
.dtabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:22px}
.dtab{padding:11px 18px;font-size:12.5px;font-weight:500;color:var(--txt3);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:var(--tr);background:none;white-space:nowrap}
.dtab:hover{color:var(--txt)}
.dtab.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}

/* Three Column Content */
.detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:22px}
.detail-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.detail-box-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);margin-bottom:14px}

/* Description */
.desc-text{font-size:12.5px;color:var(--txt2);line-height:1.7;margin-bottom:14px}
.desc-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12px;color:var(--txt2)}
.desc-item i{color:var(--txt3);width:14px;margin-top:2px}
.desc-item strong{color:var(--txt)}

/* Tracking Links */
.track-section{margin-bottom:14px}
.track-label{font-size:11px;color:var(--txt3);margin-bottom:6px;font-weight:600}
.track-box{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px}
.track-url{flex:1;font-size:11px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}
.track-code{font-size:14px;font-weight:800;color:var(--navy);padding:6px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);display:inline-block;margin-right:8px}
.track-copy{padding:5px 12px;border-radius:var(--r-sm);font-size:10.5px;font-weight:600;background:var(--blue);color:#fff;transition:var(--tr);flex-shrink:0}
.track-copy:hover{background:#2563eb}
.track-detail{font-size:11px;color:var(--txt3);margin-top:6px;line-height:1.5}

/* Commission Structure */
.com-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-lt);font-size:12px}
.com-row:last-child{border-bottom:none}
.com-label2{color:var(--txt2)}
.com-val2{font-weight:700;color:var(--txt);text-align:right}
.com-val2 span{display:block;font-size:10.5px;color:var(--txt3);font-weight:500}

/* Rank Card */
.rank-card{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fcd34d;border-radius:var(--r-md);padding:14px;margin-top:14px;text-align:center}
.rank-badge{font-size:11px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.rank-val{font-size:28px;font-weight:900;color:#92400e;display:flex;align-items:center;justify-content:center;gap:8px}
.rank-val .trophy{font-size:22px}
.rank-total{font-size:12px;color:#a16207;font-weight:500}
.rank-detail{font-size:11px;color:#a16207;margin-top:4px}

/* Timeline */
.timeline-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:16px}
.timeline-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);margin-bottom:16px}
.timeline{display:flex;align-items:flex-start;gap:0;position:relative}
.tl-step{flex:1;text-align:center;position:relative;padding:0 10px}
.tl-step::before{content:'';position:absolute;top:14px;left:0;right:0;height:2px;background:var(--border)}
.tl-step:first-child::before{left:50%}
.tl-step:last-child::before{right:50%}
.tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;position:relative;z-index:1;font-size:12px}
.tl-dot.done{background:var(--green);color:#fff}
.tl-dot.current{background:var(--blue);color:#fff}
.tl-dot.pending{background:var(--border);color:var(--txt3)}
.tl-label{font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:3px}
.tl-date{font-size:10px;color:var(--txt3)}
.tl-detail{font-size:10px;color:var(--txt3);margin-top:2px;line-height:1.4}

/* Suggestions */
.suggest-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.suggest-title{font-size:13px;font-weight:700;margin-bottom:12px}
.suggest-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:12px;color:var(--txt2)}
.suggest-item i{color:var(--green);margin-top:2px;font-size:11px}

/* Star highlight for dashboard */
.camp.starred{border:2px solid var(--yellow);position:relative;box-shadow:0 0 0 3px rgba(245,158,11,.1)}
.camp.starred::before{content:'⭐';position:absolute;top:-8px;right:-8px;font-size:18px;z-index:2}
.camp.starred .camp-name{color:var(--navy)}

/* Easy Speak Logo override */
.cd-icon-logo {
  width: 64px; height: 64px; border-radius: var(--r-lg);
  background: #1e293b; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; text-align: center; font-weight: 900; line-height: 1.1; font-size: 15px; border: 2px solid var(--border); overflow: hidden;
}
.cd-icon-logo span { color: #f97316; }

/* Bronze Sidebar Promo */
.s-promo.bronze {
  background: linear-gradient(135deg, #b45309, #d97706);
}
.s-promo.bronze h4 { color: #fff; margin-bottom: 8px; font-size: 13px; }
.s-promo.bronze p { color: rgba(255,255,255,0.9); margin-bottom: 12px; }
.s-promo.bronze .s-promo-btn { color: #fff; font-weight: 600; text-decoration: underline; background: transparent; padding: 0; }

@media(max-width:1200px){.dkpi-row{grid-template-columns:repeat(3,1fr)}.detail-grid{grid-template-columns:1fr}}

/* =========================================
   TABS & YÊU CẦU CHIẾN DỊCH
========================================= */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s ease forwards; }

.req-grid { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 20px; }
@media(max-width: 992px) { .req-grid { grid-template-columns: 1fr; } }

.req-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.req-table th, .req-table td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--border-lt); font-size: 13px; color: var(--txt2); }
.req-table th { font-weight: 600; color: var(--txt3); font-size: 11px; text-transform: uppercase; }
.req-center { text-align: center !important; }
.req-item { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--txt1); }
.req-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.req-icon.blue { background: rgba(59,130,246,.1); color: var(--blue); }
.req-icon.purple { background: rgba(168,85,247,.1); color: var(--purple); }
.req-icon.green { background: rgba(34,197,94,.1); color: var(--green); }
.req-icon.orange { background: rgba(249,115,22,.1); color: var(--orange); }

.req-list { list-style: none; padding: 0; margin: 10px 0 20px 0; }
.req-list li { padding-left: 20px; position: relative; margin-bottom: 12px; font-size: 13px; color: var(--txt2); line-height: 1.6; }
.req-list li::before { content: '•'; position: absolute; left: 4px; top: 0px; color: var(--txt1); font-weight: bold; font-size: 16px; }

.req-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; border-top: 1px solid var(--border-lt); padding-top: 20px;}
.req-btn-outline { padding: 12px; border: 1px solid var(--border); background: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--txt1); transition: var(--tr); }
.req-btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.req-btn-fill { padding: 12px; border: none; background: #0b132b; color: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; transition: var(--tr); }
.req-btn-fill:hover { background: #1a294a; }