/* Customer Survey dashboard — bố cục và thành phần riêng của trang */

/* ---------------- Bộ lọc toàn cục ---------------- */
.filters { padding: 14px 16px; margin-bottom: 16px; }
.filters__toggle { display: none; }
.filters__grid { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(190px, 1.1fr) auto; gap: 12px; align-items: end; }
.filters__custom { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.filters__custom .field { width: 170px; }
.filters__error { color: var(--red-ink); font-size: 13px; width: 100%; }
.filters__summary { margin-top: 12px; display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-2); }
.filters__summary strong { color: var(--text); font-weight: 600; }
.filters__summary .sep { color: var(--border-strong); }

.viewbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.viewbar__label { font-size: 13px; color: var(--muted); }
.view-tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; gap: 4px; flex-wrap: wrap; }
.view-tabs button { border: 0; background: none; padding: 7px 14px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; }
.view-tabs button:hover { background: var(--surface-2); color: var(--text); }
.view-tabs button[aria-selected='true'] { background: var(--navy); color: #fff; }
.preview-note { font-size: 12.5px; color: var(--amber); background: var(--amber-soft); border: 1px solid #f6dcae; padding: 4px 10px; border-radius: 999px; }

/* ---------------- Lưới dashboard ---------------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.section-label { grid-column: span 12; margin: 8px 0 -6px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dash { transition: opacity .15s; }
.dash.is-refreshing { opacity: .5; pointer-events: none; }
.progress { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: 2px; z-index: 31; overflow: hidden; pointer-events: none; }
.progress::after { content: ''; position: absolute; inset: 0; width: 30%; background: var(--brand); animation: progress 0.9s ease-in-out infinite; }
@keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* ---------------- KPI (kế thừa thẻ KPI có viền trái của RTOP) ---------------- */
.kpis { grid-column: span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi {
  position: relative; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--navy); border-radius: var(--radius);
  padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 140px;
}
.kpi.is-clickable:hover { border-color: #c8ced8; border-left-color: var(--navy); box-shadow: 0 2px 8px rgba(14, 34, 56, .06); }
.kpi__hit { position: absolute; inset: 0; border: 0; background: none; border-radius: var(--radius); cursor: pointer; z-index: 1; }
.kpi .info { z-index: 2; }
.kpi.is-unavailable { border-left-color: var(--neutral-mark); background: var(--surface-2); }
.kpi__label { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--text-2); }
.kpi__value { font-size: 30px; font-weight: 600; letter-spacing: -.5px; line-height: 1.15; }
.kpi__value small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi__na { font-size: 18px; font-weight: 600; color: var(--muted); line-height: 1.6; }
.kpi__delta { font-size: 13px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kpi__delta .vs { color: var(--muted); }
.kpi__meta { font-size: 12.5px; color: var(--muted); margin-top: auto; }
.kpi__cta { position: absolute; top: 12px; right: 12px; color: var(--muted); }
.delta-up-good, .delta-down-good { color: var(--green); font-weight: 600; }
.delta-up-bad, .delta-down-bad { color: var(--red-ink); font-weight: 600; }
.delta-flat { color: var(--text-2); font-weight: 600; }
.delta-neutral { color: var(--text); font-weight: 600; }
.note-insufficient { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 1px 6px; }

/* ---------------- Biểu đồ xu hướng ---------------- */
.chart-tabs { margin-top: 12px; }
.chart-wrap { position: relative; margin-top: 10px; }
.chart-wrap svg { display: block; width: 100%; overflow: visible; }
.chart-legend { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.key i.line { height: 2px; border-radius: 1px; }
.key i.dashline { height: 0; border-top: 2px dashed var(--neutral-mark); background: none !important; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 8px 10px; font-size: 12.5px; min-width: 180px;
}
.chart-tip__title { font-weight: 600; margin-bottom: 4px; }
.chart-tip__row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.chart-tip__row span:first-child { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); }
.chart-tip__hint { margin-top: 6px; color: var(--blue); font-size: 12px; }
.axis text { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.hit { fill: transparent; cursor: pointer; }
.hit:focus { outline: none; }
.hit:focus-visible { fill: rgba(26, 134, 184, .08); }
.chart-table { margin-top: 12px; max-height: 280px; overflow: auto; }

/* ---------------- Điểm cần chú ý ---------------- */
.signals { display: flex; flex-direction: column; gap: 10px; }
.signal { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; gap: 10px; }
.signal__icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.signal--negative .signal__icon { background: var(--red-soft); color: var(--red-ink); }
.signal--warning .signal__icon { background: var(--amber-soft); color: var(--amber); }
.signal__title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.signal__evidence { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.signal__period { font-size: 12px; color: var(--muted); margin-top: 2px; }
.signal .btn--link { margin-top: 6px; font-size: 13px; }
.demo-tag { font-size: 11.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ---------------- Phân bổ chiến dịch ---------------- */
.share { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.share__bar { flex: 1; height: 8px; background: var(--blue-soft); border-radius: 4px; overflow: hidden; min-width: 60px; }
.share__bar i { display: block; height: 100%; background: var(--blue); border-radius: 0 4px 4px 0; }
.share__val { width: 48px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.rank { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: inline-grid; place-items: center; font-size: 12px; color: var(--text-2); }
.row-name { font-weight: 500; color: var(--text); background: none; border: 0; padding: 0; text-align: left; }
.row-name:hover { color: var(--blue); text-decoration: underline; }
.table-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.table-note p { margin: 0 0 4px; }

/* ---------------- Customer Voice ---------------- */
.topic-bar { display: flex; height: 10px; gap: 2px; min-width: 120px; }
.topic-bar i { display: block; height: 100%; }
.topic-bar i:first-child { border-radius: 3px 0 0 3px; }
.topic-bar i:last-child { border-radius: 0 3px 3px 0; }
.topic-bar i:only-child { border-radius: 3px; }
.sw-pos { background: var(--blue); }
.sw-neu { background: var(--neutral-mark); }
.sw-neg { background: var(--red); }
.sw-unk { background: repeating-linear-gradient(45deg, var(--unknown-mark) 0 3px, #fff 3px 5px); box-shadow: inset 0 0 0 1px #d6dae0; }

.sentiment { display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.sentiment__list { width: 100%; }
.topic-name { white-space: nowrap; font-weight: 500; }
.sentiment__donut { position: relative; width: 170px; height: 170px; }
.sentiment__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.sentiment__center b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.sentiment__center span { font-size: 12px; color: var(--muted); }
.sentiment__list { display: flex; flex-direction: column; gap: 4px; }
.sent-row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--radius-sm); border: 0; background: none; text-align: left; width: 100%; font-size: 13.5px; }
.sent-row:hover { background: var(--surface-2); }
.sent-row i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.sent-row .pct { font-weight: 600; font-variant-numeric: tabular-nums; width: 52px; text-align: right; }
.sent-row .cnt { color: var(--muted); font-variant-numeric: tabular-nums; width: 64px; text-align: right; }
.sent-row--unk { border-top: 1px dashed var(--border); border-radius: 0; margin-top: 4px; padding-top: 10px; }
.donut-seg { cursor: pointer; transition: opacity .12s; }
.donut-seg:hover, .donut-seg:focus-visible { opacity: .82; outline: none; }

/* ---------------- Danh sách phản hồi ---------------- */
.score { white-space: nowrap; font-variant-numeric: tabular-nums; }
.score .star { color: var(--amber-mark); }
.topic-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.card-list { display: none; flex-direction: column; gap: 10px; }
.r-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.r-card:hover { border-color: var(--border-strong); }
.r-card__top { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.r-card__title { font-weight: 600; font-size: 14px; }
.r-card__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-2); }

.pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.pager__btns { display: flex; gap: 6px; }
.drill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.drill-summary { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.drill-summary b { color: var(--text); }
.drawer__title-row { display: flex; align-items: center; gap: 10px; }
.drawer__title-row h2 { margin: 0; font-size: 18px; font-weight: 600; }
.drawer__toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.drawer__toolbar .input { max-width: 320px; }

/* ---------------- Chi tiết phản hồi ---------------- */
.qa { display: flex; flex-direction: column; }
.qa__item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.qa__item:last-child { border-bottom: 0; padding-bottom: 0; }
.qa__q { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.stars { color: var(--amber-mark); letter-spacing: 1px; }
.stars .off { color: #d9dde3; }
.mention-list { display: flex; flex-direction: column; gap: 8px; }
.mention { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; font-size: 13.5px; }
.mention q { color: var(--text-2); }

/* ---------------- Trạng thái ---------------- */
.state { padding: 36px 20px; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.state__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.state__title { font-weight: 600; color: var(--text); font-size: 15px; }
.state--error .state__icon { background: var(--red-soft); color: var(--red-ink); }
.state--compact { padding: 22px 12px; }
.skeleton { background: linear-gradient(90deg, #eceff3 0%, #f6f7f9 50%, #eceff3 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-card { height: 140px; border-radius: var(--radius); }
.sk-chart { height: 360px; border-radius: var(--radius); }
.sk-block { height: 280px; border-radius: var(--radius); }

.demo-footer { margin-top: 24px; font-size: 12px; color: var(--muted); display: flex; gap: 8px 16px; flex-wrap: wrap; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1279px) {
  .filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters__grid .filters__reset { grid-column: span 2; justify-self: start; }
}
@media (max-width: 1199px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
}
@media (max-width: 767px) {
  .filters__toggle { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 0; text-align: left; }
  .filters__toggle .summary { color: var(--muted); font-size: 12.5px; }
  .filters__toggle .icon { margin-left: auto; transition: transform .15s; }
  .filters.is-open .filters__toggle .icon { transform: rotate(180deg); }
  .filters__body { display: none; margin-top: 12px; }
  .filters.is-open .filters__body { display: block; }
  .filters__grid { grid-template-columns: 1fr; }
  .filters__grid .filters__reset { grid-column: auto; }
  .filters__custom .field { width: 100%; }
  .view-tabs { width: 100%; }
  .view-tabs button { flex: 1 1 45%; }
  .table-responsive .table-wrap { display: none; }
  .table-responsive .card-list { display: flex; }
  
  .sentiment__list { width: 100%; }
}
@media (max-width: 479px) {
  .kpis { grid-template-columns: 1fr; }
}