/**
 * Affiliate hub (`page/affiliate.php`) — task 112.
 *
 * File RIÊNG, cố ý không nhét vào `css/style.css`: (a) style.css đang được
 * session khác sửa cùng lúc, (b) đây là style chỉ dùng cho đúng 1 trang.
 *
 * Mọi giá trị lấy từ `css/design-tokens.css` (§1 UI_COMPONENT_LIBRARY) —
 * không tự chọn padding/radius/shadow mới. Trang này chạy trong vỏ
 * `agency-portal-layout.php` nên đã có sẵn `admin-template.css` (.card, .btn,
 * .stats-grid, .stat-card, .users-table) — bên dưới chỉ là những thứ
 * admin-template KHÔNG có.
 */

/* ---------------------------------------------------------------
   1. Hộp link chia sẻ — định danh chính của trang, phải nằm trên cùng
   và chiếm được sự chú ý mà không cần banner trang trí (UX §1).
   --------------------------------------------------------------- */
.aff-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: var(--card-pad);
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    background: #f9fafb;
}

.aff-share__input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--num-font);
    font-size: 0.95rem;
    color: #111827;
}

.aff-share__input:focus {
    outline: 2px solid var(--brand-600, #2158d8);
    outline-offset: 1px;
}

/* Link dự phòng `?ref=` — phụ, nên mờ và nhỏ hơn link chính. */
.aff-share__alt {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    word-break: break-all;
}

.aff-share__alt code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-family: var(--num-font);
}

/* ---------------------------------------------------------------
   2. Chỉ báo copy — phản hồi tức thì, không dùng alert() chặn luồng.
   --------------------------------------------------------------- */
.aff-copied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #047857;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.aff-copied.is-on {
    opacity: 1;
}

/* ---------------------------------------------------------------
   3. Giải thích tiệm tiến (UX §2: hướng dẫn KHÔNG được là card thường trực).
   Gập sẵn — mở ra mới chiếm chỗ.
   --------------------------------------------------------------- */
.aff-explain {
    margin-top: 14px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    background: #fff;
}

.aff-explain > summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #374151;
    cursor: pointer;
    list-style: none;
}

.aff-explain > summary::-webkit-details-marker {
    display: none;
}

.aff-explain > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--brand-600, #2158d8);
    transition: transform 0.15s ease;
}

.aff-explain[open] > summary::before {
    transform: rotate(90deg);
}

.aff-explain__body {
    padding: 0 16px 16px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #4b5563;
}

.aff-explain__body ol {
    margin: 8px 0 0;
    padding-left: 20px;
}

.aff-explain__body li {
    margin-bottom: 6px;
}

/* Bảng 2 tỷ lệ — điểm mấu chốt của "minh bạch": 10% vs 20% phải đọc được ngay. */
.aff-rates {
    width: 100%;
    margin: 10px 0 4px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.aff-rates th,
.aff-rates td {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.aff-rates th {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.aff-rates .aff-rates__pct {
    font-family: var(--num-font);
    font-weight: 700;
    color: #4338ca;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   4. Tooltip `?` cạnh nhãn KPI — thay cho khối chữ thường trực.
   --------------------------------------------------------------- */
.aff-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}

.aff-hint:hover {
    background: var(--brand-600, #2158d8);
    color: #fff;
}

/* ---------------------------------------------------------------
   5. Công cụ nhúng.
   --------------------------------------------------------------- */
.aff-snippets {
    display: grid;
    gap: 14px;
}

.aff-snippet {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.aff-snippet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.aff-snippet__title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #111827;
}

.aff-snippet__hint {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 0.8rem;
    color: #6b7280;
}

.aff-snippet__code {
    /* <textarea> có chiều rộng mặc định theo thuộc tính `cols` (~20 ký tự) —
       không set width thì ô code chỉ chiếm một dải hẹp bên trái và đoạn HTML
       bị ngắt dòng vụn (đã NHÌN thấy trên ảnh chụp lúc verify task 112). */
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    resize: vertical;
    max-height: 132px;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    background: #fff;
    font-family: var(--num-font);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-all;
}

.aff-snippet__preview {
    padding: 14px;
    border-top: 1px dashed #e5e7eb;
    background: #fcfcfd;
}

.aff-snippet__preview-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

/* ---------------------------------------------------------------
   6. Dòng phụ dưới định danh chính trong bảng (UX §3: thuộc tính mới đi VÀO
   ô đã có, không mở cột mới). Nhỏ hơn + mờ hơn để cột vẫn quét dọc được.
   --------------------------------------------------------------- */
.aff-subline {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Giá trị tiền trong stat-card.
   `.stat-value` mặc định 2rem — chuỗi "1.500.000 VNĐ" ở cỡ đó xuống 2 dòng
   (đã NHÌN thấy "0" và "VNĐ" nằm 2 dòng trên ảnh chụp lúc verify task 112),
   làm card cao lệch so với các card số đếm bên cạnh. Nhỏ hơn + nowrap. */
.aff-stat-money {
    font-size: 1.45rem;
    white-space: nowrap;
}

/* Dòng phụ BÊN TRONG stat-card.
   `.stat-label` ở theme này viết HOA + giãn chữ; nếu để thừa kế, dòng phụ
   trông như một nhãn thứ hai ngang hàng và ngắt dòng lộn xộn (đã NHÌN thấy
   trên ảnh chụp). Reset tường minh về chữ thường, nhỏ, mờ — đúng tinh thần
   UX §3: dòng phụ phải chìm xuống dưới định danh chính. */
.stat-label .aff-subline {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    color: #9ca3af;
}

/* Số tiền: dùng font số để cột tiền so sánh được theo chiều dọc. */
.aff-amount {
    font-family: var(--num-font);
    font-weight: 700;
    white-space: nowrap;
}

.aff-amount--zero {
    color: #9ca3af;
    font-weight: 500;
}

/* "—" nghĩa là CHƯA ĐO ĐƯỢC, khác hẳn số 0. Không được trông giống dữ liệu thật. */
.aff-unmeasured {
    color: #d1d5db;
}

/* ===============================================================
   8. Task 120 — tab "Khách hàng" của `/partner`: bảng hợp nhất referral +
   managed client, 1 dòng / 1 người.
   =============================================================== */

/* Bug thật bắt được qua screenshot review (task 120 §5, Rule 0) — KHÔNG được
   dùng `.stat-card` trần cho khối balance-breakdown ở đây: `css/style.css`
   có bản `.stat-card` THỨ HAI (dùng bởi `conversions/overview.php`, layout
   icon-trái/nội-dung-phải) đặt `display:flex;align-items:center` — bản đó
   nạp TRƯỚC `admin-template.css` trong DOM, nhưng `admin-template.css`'s
   `.stat-card` không tự đặt `display` nên KHÔNG ghi đè được thuộc tính đó
   (cascade tính theo TỪNG thuộc tính, không phải "đè nguyên khối"). Kết quả:
   `.stat-value`/`.stat-label`/`.balance-breakdown` xếp ngang thay vì dọc,
   đè chữ lên nhau (đã NHÌN thấy trên ảnh 1366×768 khi implement). Đây đúng
   là cái bẫy UI_COMPONENT_LIBRARY.md §3 đã cảnh báo cho tên `.stat-card`
   dùng chung — chỉ scope theo container của mình, không sửa rule dùng chung. */
.aff-dash__side .stat-card {
    display: block;
}

.aff-dash__side .balance-breakdown-actions {
    flex-wrap: wrap;
}

/* Định danh chính KHÔNG bấm được (dòng `referral`) — bất biến privacy có chủ
   ý, xem `page/_parts/partner/customers.php`'s docblock. Chỉ đổi màu chữ,
   KHÔNG gạch chân / KHÔNG con trỏ pointer, để không trông giống link chết. */
.locked {
    color: #374151;
    cursor: default;
}

.partner-customer-link {
    color: var(--brand-600, #2158d8);
    font-weight: 600;
    text-decoration: none;
}
.partner-customer-link:hover {
    text-decoration: underline;
}

/* Badge loại quan hệ — dòng phụ dưới tên+email, KHÔNG BAO GIỜ cột riêng
   (UX_PAGE_STANDARD.md §3). Màu lấy nguyên từ `.aff-agency--eligible`
   (xanh dương, task 112) / `.aff-agency--active` (xanh lá, task 112) —
   không có mã màu mới. */
.rel-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
}
.rel-badge--referral { background: #eff6ff; color: #1d4ed8; }
.rel-badge--managed  { background: #ecfdf5; color: #047857; }

/* Task 124 §3.5 fix (thấy qua npm run shot:admin, 375px, email dài): subline
   "Khách hàng" giờ có tới 3 mục (email · rel-badge · pending-badge) — flex
   nowrap + email tự ellipsis giữ cả cụm LUÔN đúng 1 dòng, 2 badge không bao
   giờ bị bóp méo hay rớt dòng, đúng luật UX_PAGE_STANDARD.md §3c ("không ô
   nào cao quá 2 dòng": tên = dòng 1, subline này = dòng 2, cố định). */
.aff-subline--customer-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}
.aff-subline__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.aff-subline__dot {
    flex: none;
}
.aff-subline--customer-row .rel-badge,
.aff-subline--customer-row .pending-badge {
    flex: none;
}

/* Badge "hoá đơn gia hạn đang chờ khách trả" (task 124 §3.5) — cùng dòng phụ
   với .rel-badge, KHÔNG mở cột/dòng mới (UX_PAGE_STANDARD.md). Màu = ĐÚNG cặp
   "pending" bán-semantic đã tồn tại trong CÙNG họ trang partner
   (page/_parts/partner/ledger.php's .commission-status-badge.status-pending)
   — không dùng --warning-bg/--warning-ink (design-tokens.css) như mô tả gốc
   của mockup vì cặp đó (#fbbf24 ink trên nền gần-trắng, mục tiêu cho theme tối
   Direction B) không đủ tương phản trên nền sáng mà trang này đang dùng; xem
   ghi chú lệch mockup trong task doc report. */
.pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: #fffbeb;
    color: #92400e;
    border: none;
    cursor: pointer;
    margin-left: 4px;
}
.pending-badge:hover {
    background: #fef3c7;
}

/* Dòng phụ "hết hạn" — mờ hơn dòng phụ thường, phân biệt với "còn hạn". */
.aff-subline--dim {
    color: #d1d5db;
}

/* Hàng pill lọc nguồn tab "Sổ hoa hồng" — KHÔNG dùng `.filter-toolbar`
   (`justify-content:flex-end`, thiết kế cho nút Reset/Tìm kiếm của MỘT form,
   xem bug thật ở `page/_parts/partner/ledger.php`). Đây là lựa chọn xem
   thường trực, canh trái đúng hướng đọc + tự xuống dòng trên mobile. */
.partner-ledger-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 640px) {
    .aff-share__input {
        flex-basis: 100%;
    }
}

/* ===============================================================
   7. Trang giới thiệu chương trình đối tác — `/partner-program`
   (task 112, bổ sung theo yêu cầu chủ dự án 2026-08-14)

   Trang CÔNG KHAI, không có sidebar, không nạp `admin-template.css`
   → không dùng được `.card` ở đây (xem UI_COMPONENT_LIBRARY §2.9:
   không trộn `.card` vào trang chỉ có `style.css`). Vì vậy các khối
   dưới đây tự dựng, nhưng vẫn ĂN TOKEN chung, không chọn số mới.
   =============================================================== */
.partner-page {
    background: #fff;
}

.partner-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.partner-hero {
    padding: 56px 0 44px;
    background: linear-gradient(135deg, var(--brand-600, #2158d8), var(--cyan-600, #0e7490));
    color: #fff;
    text-align: center;
}

.partner-eyebrow {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
}

.partner-title {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.22;
    color: #fff;
}

.partner-lead {
    max-width: 660px;
    margin: 0 auto 26px;
    font-size: 1.03rem;
    line-height: 1.65;
    opacity: 0.93;
}

.partner-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.partner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-pill, 8px);
}

/* Nút chính trên nền gradient: đảo màu để còn tương phản. */
.partner-hero .btn-primary {
    background: #fff;
    color: #4c51bf;
    border: none;
}

.partner-hero .btn-primary:hover {
    background: #f3f4ff;
    color: #4c51bf;
}

.partner-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.partner-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.partner-note {
    margin: 18px 0 0;
    font-size: 0.88rem;
    opacity: 0.85;
}

.partner-section {
    padding: 44px 20px 0;
}

.partner-h2 {
    margin: 0 0 8px;
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
}

.partner-sub {
    margin: 0 0 20px;
    color: #6b7280;
    line-height: 1.6;
}

/* --- 4 bước --- */
.partner-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.partner-step {
    position: relative;
    padding: 20px 18px 18px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius, 10px);
    background: #fff;
    box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .07));
}

.partner-step__num {
    position: absolute;
    top: -11px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand-600, #2158d8);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.partner-step__icon {
    display: block;
    margin-bottom: 8px;
    color: var(--brand-600, #2158d8);
}

.partner-step__body strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.98rem;
    color: #111827;
}

.partner-step__body span {
    font-size: 0.89rem;
    line-height: 1.55;
    color: #6b7280;
}

/* --- 2 tỷ lệ: đây là phần "minh bạch", phải đọc được ngay --- */
.partner-rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.partner-rate-card {
    padding: 24px 22px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius, 10px);
    background: #fff;
    box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .07));
}

.partner-rate-card--primary {
    border-color: var(--brand-600, #2158d8);
    box-shadow: 0 0 0 1px var(--brand-600, #2158d8), var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .07));
}

.partner-rate-card__pct {
    font-family: var(--num-font);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    color: #4338ca;
}

.partner-rate-card__name {
    margin-top: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #111827;
}

.partner-rate-card__desc {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6b7280;
}

/* --- FAQ: tái dùng `.aff-explain` để câu hỏi trông giống hệt khối
       "Hoa hồng được tính như thế nào?" ở /affiliate --- */
.partner-faq__item {
    margin-bottom: 10px;
}

.partner-closing {
    /* Khoảng chừa cho .floating-auth-buttons giờ xử lý chung ở footer.php's
       .footer--floating-auth-reserve (css/style.css, margin-bottom: 104px) —
       tổng quát hoá từ đúng bản vá này (task 060, sprint v1.0.5) sang mọi
       trang dùng chung footer.php (task 145, sprint v1.0.8). Giữ lại
       padding-bottom bình thường ở đây (khớp nhịp padding-top của
       .partner-section, :543) để trang vẫn có khoảng cách nội dung/footer
       hợp lý — không phải để né thanh CTA nữa, tránh cộng dồn ~208px trống. */
    padding-bottom: 44px;
    text-align: center;
}

.partner-closing .partner-cta {
    margin-top: 6px;
}

@media (max-width: 640px) {
    .partner-hero {
        padding: 40px 0 34px;
    }
    .partner-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ===============================================================
   8. Bố cục DASHBOARD của `/affiliate` (task 112, sửa theo mẫu
   chủ dự án đưa 2026-08-14: "cần đóng vai trò dashboard").

   Trái = tiền, phải = hiệu suất + link. Dưới 900px xếp dọc, khối
   tiền vẫn lên trước vì đó là thứ người dùng vào đây để xem.
   =============================================================== */
.aff-dash {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .aff-dash {
        grid-template-columns: 1fr;
    }
}

/* --- Cột trái: khối tiền --- */
/* Cot trai gio la mot NGAN XEP: khoi tien + khoi trang thai Agency.
   Truoc do khoi Agency nam full-width duoi grid, de lai mot mang trang lon
   duoi khoi tien (da NHIN thay tren anh 1440x900 - dung "du khoang trang"
   ma chu du an neu). Ca hai deu tra loi "tinh trang cua TOI", nen o chung cot. */
.aff-dash__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.aff-dash__side > .card {
    margin-bottom: 0 !important;
}

.aff-money {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius, 10px);
    background: #fff;
    box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .07));
}

.aff-money__label {
    font-size: 0.87rem;
    color: #6b7280;
}

/* Con số CHÍNH của cả trang — to nhất, không bao giờ ngắt dòng. */
.aff-money__primary {
    margin: 4px 0 18px;
    /* KHÔNG dùng --num-font ở đây: Courier ở cỡ 1.9rem làm khoảng trắng giữa
       số và "VNĐ" rộng bất thường, nhìn như lỗi render (đã NHÌN trên ảnh chụp).
       Số tiền ở đây là một con số đơn lẻ, không phải cột cần canh dọc, nên
       font thường hợp hơn. Các cột tiền trong BẢNG vẫn giữ --num-font. */
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.15;
    color: #2563eb;
    white-space: nowrap;
}

.aff-money__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid #f3f4f6;
}

.aff-money__value {
    font-weight: 700;
    font-size: 0.95rem;
    color: #374151;
    white-space: nowrap;
}

.aff-money__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
}

/* Nút vô hiệu phải TRÔNG vô hiệu — nếu không người dùng bấm mãi không hiểu. */
.aff-money__cta[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Ghi chú ngưỡng rút: màu cảnh báo, không phải màu lỗi — đây là thông tin,
   không phải người dùng làm sai điều gì. */
.aff-money__note {
    margin: 12px 0 0;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.55;
    color: #b45309;
}

/* --- Cột phải: KPI --- */
.aff-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.aff-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius, 10px);
    background: #fff;
    box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, .07));
}

.aff-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}

.aff-kpi__icon--warn  { background: #fffbeb; color: #b45309; }
.aff-kpi__icon--ok    { background: #ecfdf5; color: #047857; }
.aff-kpi__icon--money { background: #f5f3ff; color: #6d28d9; }

.aff-kpi__body {
    min-width: 0;
}

.aff-kpi__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
    white-space: nowrap;
}

.aff-kpi__label {
    display: block;
    margin-top: 2px;
    font-size: 0.83rem;
    color: #6b7280;
}

/* --- Tiêu đề khối dùng chung --- */
.aff-section-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.aff-section-sub {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #6b7280;
}

/* --- Tuỳ chỉnh trang đích --- */
.aff-custom__label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.aff-custom__row {
    display: flex;
    margin-bottom: 12px;
}

.aff-custom__row .aff-share__input {
    flex: 1 1 auto;
}

.aff-custom__hint {
    margin: -6px 0 12px;
    font-size: 0.82rem;
    color: #b91c1c;
}

.aff-custom__hint[hidden] {
    display: none;
}

.aff-custom__example {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: #6b7280;
    word-break: break-all;
}

.aff-custom__example code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-family: var(--num-font);
}

/* Dòng phụ trong KPI card ("Đã trả phí" nằm dưới "Đã đăng ký" — UX §3:
   thuộc tính là tập con thì đi VÀO ô đã có, không mở card mới). */
.aff-kpi__sub {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    color: #9ca3af;
}

/* ===============================================================
   9. Vòng phản hồi 2026-08-14 (chủ dự án): khối Agency, snippet
   2 cột, dropdown trang đích, và siết khoảng trắng thừa.
   =============================================================== */

/* --- Khối trạng thái bậc Agency ---
   LUÔN hiện, kể cả khi chưa đủ điều kiện. Viền trái đổi màu theo trạng thái
   để quét mắt một cái là biết mình đang ở đâu. */
.aff-agency {
    border-left: 3px solid #d1d5db;
}

.aff-agency--active      { border-left-color: #047857; }
.aff-agency--pending     { border-left-color: #b45309; }
.aff-agency--eligible    { border-left-color: #2563eb; }
.aff-agency--blocked     { border-left-color: #b91c1c; }
.aff-agency--not_eligible { border-left-color: #9ca3af; }

.aff-agency__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.aff-agency__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
}

.aff-agency--active .aff-agency__badge   { background: #ecfdf5; color: #047857; }
.aff-agency--pending .aff-agency__badge  { background: #fffbeb; color: #92400e; }
.aff-agency--eligible .aff-agency__badge { background: #eff6ff; color: #1d4ed8; }
.aff-agency--blocked .aff-agency__badge  { background: #fef2f2; color: #b91c1c; }

.aff-agency__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Danh sách điều kiện còn thiếu — nói rõ thiếu GÌ, không chỉ "chưa đủ". */
.aff-agency__reqs {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #6b7280;
}

/* --- Snippet: mã và xem trước nằm CẠNH nhau ---
   Xếp dọc làm mỗi mẫu cao gần 300px; 5 mẫu là cuộn mỏi tay mà phần lớn
   màn hình bỏ trống hai bên. */
.aff-snippet__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.aff-snippet__body--split .aff-snippet__code {
    max-height: none;
    border-right: 1px solid #e5e7eb;
}

.aff-snippet__preview--side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
}

@media (max-width: 820px) {
    .aff-snippet__body--split {
        grid-template-columns: 1fr;
    }
    .aff-snippet__body--split .aff-snippet__code {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }
}

/* --- Dropdown trang đích: một hàng gọn, không còn 2 label + ô nhập rời --- */
.aff-custom__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aff-custom__row .aff-custom__label {
    margin: 0;
    white-space: nowrap;
}

.aff-custom__select {
    flex: 0 1 260px;
    min-width: 180px;
}

/* --- Siết khoảng trắng (chủ dự án: "đang bị dư khoảng trắng") --- */
.aff-dash__main > .card:last-child {
    margin-bottom: 0 !important;
}

.aff-dash .card {
    padding: 16px 18px;
}

.aff-explain {
    margin-top: 10px;
}

/* Phân trang bám sát bảng thay vì thả 30px như mặc định admin-template. */
.aff-page .pagination,
.card + .pagination,
.pagination {
    margin-top: 16px;
}

/* ===============================================================
   10. Vong phan hoi 2026-08-14 (lan 5).
   =============================================================== */

/* --- Mot hang duy nhat: [trang dich] [link] [copy] ---
   Truoc do co HAI o link + HAI nut copy cho cung mot thu (chu du an:
   "dang co toi 2 link copy du thua, dung 1 cho duoc roi"). */
.aff-share--merged {
    row-gap: 8px;
}

.aff-share__destlabel {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.aff-share__dest {
    flex: 0 1 150px;
    min-width: 130px;
}

/* Base .aff-share__input la `flex: 1 1 320px` — o hang gop nay con them nhan +
   select + nut copy, nen 320px day nut copy xuong hang thu hai (da NHIN thay
   tren anh chup; chu du an: "select ben trai de khong phai 2 hang nhu vay").
   Ha basis xuong de ca 4 phan tu nam tren MOT hang o 1440px. */
.aff-share--merged .aff-share__input {
    flex: 1 1 200px;
}

/* --- Ghi chu "day KHONG phai goi Agency" ---
   Nen vang nhat: la luu y can doc, khong phai loi. */
.aff-agency__notplan {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #92400e;
}

.aff-agency__adminnote {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

/* --- Modal dieu khoan doi tac --- */
.aff-agency__policy {
    max-height: 320px;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius, 10px);
    background: #f9fafb;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #374151;
}

.aff-agency__policy img {
    max-width: 100%;
    height: auto;
}

.aff-agency__agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.aff-agency__agree input {
    margin-top: 3px;
}

.aff-agency__error {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #b91c1c;
}

.aff-agency__error[hidden] {
    display: none;
}