/* [SF-MARKETPLACE-050 mục 7] Hai màn thống kê chợ + bộ chọn khoảng dùng chung.

   Để ở tệp dùng chung chứ không nhúng vào từng trang: ba thành phần (màn chủ sân, màn vận hành, bộ chọn
   khoảng) dùng chung một bộ lớp, nhúng theo trang là chép bộ lớp ra hai bản rồi chúng lệch nhau.

   KHÔNG có lớp nào dựng ra con số phần trăm (FR-21) — bề rộng thanh phễu là thuộc tính style tính từ số
   thật, không phải nhãn cho người đọc. */

.mpa {
    max-width: 1180px;
}

/* ── Bộ chọn khoảng ──────────────────────────────────────────────────────── */

.mpa-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 18px;
}

.mpa-range {
    padding: 6px 14px;
    border: 1px solid var(--rz-base-300, #d6d9de);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.mpa-range:hover {
    border-color: var(--rz-primary, #3f51b5);
}

.mpa-range.is-on {
    background: var(--rz-primary, #3f51b5);
    border-color: var(--rz-primary, #3f51b5);
    color: #fff;
    font-weight: 600;
}

.mpa-range-custom {
    display: flex;
    gap: 16px;
    margin: -8px 0 18px;
    font-size: 13px;
}

.mpa-range-custom input {
    margin-left: 6px;
    padding: 4px 8px;
    border: 1px solid var(--rz-base-300, #d6d9de);
    border-radius: 6px;
}

/* ── Ô số ────────────────────────────────────────────────────────────────── */

.mpa-lead {
    margin: 0 0 10px;
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 14px;
}

.mpa-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mpa-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
    padding: 18px 22px;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 14px;
    background: #fff;
}

.mpa-ico {
    font-size: 30px;
    line-height: 1;
}

.mpa-txt {
    display: flex;
    flex-direction: column;
}

.mpa-n {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

/* Mẫu số đứng cạnh tử số nhưng nhẹ hơn — nó là bối cảnh, không phải con số chính. */
.mpa-of {
    font-size: 20px;
    font-weight: 500;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-lbl {
    font-size: 13px;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-foot {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-collecting {
    margin: 8px 0 0;
    padding: 20px 22px;
    border: 1px dashed var(--rz-base-300, #d6d9de);
    border-radius: 14px;
    background: var(--rz-base-100, #f7f8fa);
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-loading {
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-more {
    margin: 18px 0 0;
    padding: 8px 16px;
    border: 1px solid var(--rz-base-300, #d6d9de);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mpa-details {
    margin-top: 18px;
}

.mpa-sub {
    margin: 26px 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.mpa-caption {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* ── Bảng ────────────────────────────────────────────────────────────────── */

/* Bảng rộng cuộn TRONG khung của nó — thân trang không bao giờ cuộn ngang. */
.mpa-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.mpa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mpa-table th,
.mpa-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rz-base-200, #e5e7eb);
    white-space: nowrap;
}

.mpa-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpa-table tbody tr:last-child td {
    border-bottom: none;
}

.mpa-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mpa-table .is-crit {
    color: #c62828;
    font-weight: 700;
}

.mpo-listings tr.is-clickable {
    cursor: pointer;
}

.mpo-listings tr.is-clickable:hover {
    background: var(--rz-base-100, #f7f8fa);
}

/* ── Danh sách việc ──────────────────────────────────────────────────────── */

.mpo-tasks {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 14px;
    background: #fff;
}

.mpo-tasks-head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rz-text-secondary-color, #6b7280);
    margin-bottom: 10px;
}

.mpo-tasks-empty {
    margin: 0;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpo-task-group + .mpo-task-group {
    margin-top: 14px;
}

.mpo-task-group-t {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mpo-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.mpo-task:hover {
    background: var(--rz-base-100, #f7f8fa);
}

.mpo-sev {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mpo-task-txt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.mpo-task-what {
    font-weight: 600;
}

.mpo-task-do {
    font-size: 13px;
    color: var(--rz-text-secondary-color, #6b7280);
}

.mpo-tag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Ba mức của mục 7: đỏ phải xử lý · vàng nên làm · xanh cơ hội.
   Nhóm Sân mồi mang sắc xanh — nó là CƠ HỘI, không phải sự cố, và màu phải nói đúng điều đó. */
.mpo-sev-crit { background: #fdecea; color: #c62828; }
.mpo-sev-warn { background: #fff6e5; color: #a15c00; }
.mpo-sev-ok   { background: #e8f5e9; color: #2e7d32; }

span.mpo-sev.mpo-sev-crit { background: #c62828; }
span.mpo-sev.mpo-sev-warn { background: #e8a33d; }
span.mpo-sev.mpo-sev-ok   { background: #2e7d32; }

/* ── Phễu ────────────────────────────────────────────────────────────────── */

.mpo-funnel {
    padding: 14px 18px;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.mpo-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.mpo-step-lbl {
    flex: 0 0 130px;
    font-size: 13px;
}

.mpo-step-lbl i {
    font-style: normal;
    margin-right: 6px;
}

.mpo-track {
    flex: 1 1 auto;
    height: 14px;
    border-radius: 7px;
    background: var(--rz-base-100, #f0f1f4);
    overflow: hidden;
}

/* Thanh luôn vẽ được một vệt: tầng đáy bằng 0 mà biến mất hẳn thì dòng đó trông như chưa nạp xong. */
.mpo-bar {
    display: block;
    min-width: 3px;
    height: 100%;
    border-radius: 7px;
    background: var(--rz-primary, #3f51b5);
}

.mpo-step-n {
    flex: 0 0 70px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Bộ lọc bảng cặp ─────────────────────────────────────────────────────── */

.mpo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.mpo-filters select,
.mpo-filters input,
.mpo-filters button {
    padding: 6px 12px;
    border: 1px solid var(--rz-base-300, #d6d9de);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}

.mpo-filters button {
    cursor: pointer;
    font-weight: 600;
}

@media (max-width: 768px) {
    .mpa-stat {
        flex: 1 1 100%;
    }

    .mpo-step-lbl {
        flex-basis: 96px;
    }
}