/* =========================================================================
   TUVI AFFILIATE — biểu mẫu đăng ký / hồ sơ / dashboard Cộng Tác Viên.
   Bảng màu "đỏ rượu vang + vàng đồng", tối ưu mobile-first, ưu tiên
   phân nhóm rõ ràng + giãn dòng thoáng để tạo cảm giác uy tín, chuyên
   nghiệp. File khai báo lại biến ở :root để luôn chạy đúng màu dù trang
   chỉ nhúng riêng shortcode affiliate (không phụ thuộc tuvi.css).
   ========================================================================= */
:root {
    --aff-wine:        #7A1F1F;
    --aff-wine-dark:   #5C1717;
    --aff-wine-deep:   #4A1212;
    --aff-gold:        #B58A3C;
    --aff-gold-light:  #C9A566;
    --aff-gold-title:  #F3D67A;
    --aff-bg:          #FFFDF8;
    --aff-card:        #FFFFFF;
    --aff-border:      #E5D9B8;
    --aff-border-soft: #EFE6CC;
    --aff-text:        #2A1A12;
    --aff-text-light:  #4A3428;
    --aff-text-muted:  #7A6B5A;
    --aff-success:     #1E7A37;
    --aff-success-bg:  #E8F6EC;
    --aff-error:       #B3261E;
    --aff-error-bg:    #FDECEA;
    --aff-radius:       14px;
    --aff-radius-sm:    10px;
    --aff-radius-lg:    18px;
    --aff-shadow:       0 2px 18px rgba(96,76,60,.10);
    --aff-shadow-lg:    0 10px 36px rgba(74,18,18,.16);
    --aff-transition:   all .22s cubic-bezier(.4,0,.2,1);
    --aff-font:         'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
    --aff-font-title:   'Cormorant Garamond', 'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* ── Lá chắn chống theme đè ──────────────────────────────────────────────
   Nhiều theme WordPress có CSS toàn cục kiểu `button, input[type=submit] {...}`
   với độ ưu tiên cao (hoặc nạp SAU do enqueue muộn) khiến nút/input của
   plugin bị "trả về" style mặc định của theme dù đúng class. Khối dưới
   đây khoá lại các thuộc tính THỊ GIÁC cốt lõi (không đụng layout) ngay
   trong phạm vi .tuvi-aff-wrapper để đảm bảo nhận diện thương hiệu luôn
   đúng, bất kể theme đang dùng là gì. */
.tuvi-aff-wrapper button,
.tuvi-aff-wrapper input,
.tuvi-aff-wrapper a.tuvi-aff-profile-link-btn,
.tuvi-aff-wrapper a.tuvi-aff-cta-btn {
    font-family: var(--aff-font) !important;
    box-shadow: none;
    text-decoration: none !important;
}
.tuvi-aff-wrapper .tuvi-aff-submit-btn {
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--aff-radius-sm) !important;
}
.tuvi-aff-wrapper .tuvi-aff-cancel-btn {
    background: var(--aff-bg) !important;
    color: var(--aff-text-light) !important;
    border: 1.5px solid var(--aff-border) !important;
    border-radius: var(--aff-radius-sm) !important;
}
.tuvi-aff-wrapper .tuvi-aff-copy-btn {
    background: var(--aff-gold) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--aff-radius-sm) !important;
}
.tuvi-aff-wrapper .tuvi-aff-copy-btn:hover {
    background: var(--aff-wine) !important;
}
.tuvi-aff-wrapper .tuvi-aff-ref-link-input {
    background: #F7F1DE !important;
    color: var(--aff-wine-dark) !important;
    border: 1.5px solid var(--aff-gold-light) !important;
}
.tuvi-aff-wrapper a.tuvi-aff-cta-btn {
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--aff-radius-sm) !important;
}
.tuvi-aff-wrapper a.tuvi-aff-cta-btn--outline {
    background: transparent !important;
    color: var(--aff-wine) !important;
    border: 2px solid var(--aff-wine) !important;
}
.tuvi-aff-wrapper a.tuvi-aff-cta-btn--outline:hover {
    background: var(--aff-wine) !important;
    color: #fff !important;
}

/* ── Khung ngoài + thẻ chính ─────────────────────────────────────────── */
.tuvi-aff-wrapper {
    max-width: 560px;
    margin: 32px auto;
    padding: 0 16px;
    font-family: var(--aff-font);
    color: var(--aff-text);
    -webkit-font-smoothing: antialiased;
}
.tuvi-aff-dashboard.tuvi-aff-wrapper { max-width: 780px; }

.tuvi-aff-box {
    position: relative;
    background: var(--aff-card);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius-lg);
    padding: 30px 26px 28px;
    box-shadow: var(--aff-shadow-lg);
    overflow: hidden;
}
/* Dải viền trên cùng — điểm nhấn thương hiệu, tạo cảm giác "official" */
.tuvi-aff-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--aff-wine) 0%, var(--aff-gold) 55%, var(--aff-gold-title) 100%);
}

@media (max-width: 600px) {
    .tuvi-aff-wrapper { margin: 0 auto; padding: 0; }
    .tuvi-aff-box {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 26px 18px 24px;
        box-shadow: none;
    }
}

/* ── Tiêu đề + mô tả ──────────────────────────────────────────────────── */
.tuvi-aff-title {
    margin: 0 0 8px;
    font-family: var(--aff-font-title);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    color: var(--aff-wine);
    text-align: center;
}
.tuvi-aff-desc {
    margin: 0 auto 22px;
    max-width: 460px;
    color: var(--aff-text-muted);
    font-size: 14.5px;
    line-height: 1.7;
    text-align: center;
}

/* ── Thông báo trạng thái (thành công / lỗi) ─────────────────────────── */
.tuvi-aff-msg {
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: var(--aff-radius-sm);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}
.tuvi-aff-msg.tuvi-aff-msg--ok {
    background: var(--aff-success-bg);
    color: var(--aff-success);
    border: 1px solid #b7e4c4;
}
.tuvi-aff-msg.tuvi-aff-msg--err {
    background: var(--aff-error-bg);
    color: var(--aff-error);
    border: 1px solid #f3b7b2;
}

/* ── Khối lợi ích khi đăng ký / tham gia CTV ─────────────────────────── */
.tuvi-aff-benefits-box {
    background: linear-gradient(155deg, #FBF3DF 0%, #FDF9EF 60%);
    border: 1px solid var(--aff-gold-light);
    border-radius: var(--aff-radius);
    padding: 20px 22px;
    margin-bottom: 24px;
}
.tuvi-aff-benefits-title {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aff-wine-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tuvi-aff-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tuvi-aff-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    color: var(--aff-text-light);
    line-height: 1.5;
}
.tuvi-aff-benefits-list .tuvi-aff-check {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--aff-wine);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    box-shadow: 0 2px 6px rgba(122,31,31,.25);
}
.tuvi-aff-benefits-list li.tuvi-aff-benefits-highlight .tuvi-aff-check {
    background: var(--aff-gold);
    box-shadow: 0 2px 6px rgba(181,138,60,.3);
}
.tuvi-aff-benefits-list li.tuvi-aff-benefits-highlight {
    font-weight: 600;
    color: var(--aff-wine-dark);
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px dashed var(--aff-gold-light);
}
.tuvi-aff-benefits-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--aff-gold-light);
    font-size: 13px;
    color: var(--aff-text-muted);
    line-height: 1.55;
}

/* ── Nhóm trường trong form: mỗi nhóm là một "thẻ" riêng biệt, rõ ràng ── */
.tuvi-aff-field-group {
    margin-bottom: 20px;
    padding: 20px 18px;
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: var(--aff-radius);
}
.tuvi-aff-field-group:last-of-type { margin-bottom: 22px; }

.tuvi-aff-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aff-wine-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--aff-border-soft);
}
.tuvi-aff-group-label::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--aff-gold), var(--aff-wine));
    flex: 0 0 auto;
}
.tuvi-aff-group-note {
    margin: -10px 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--aff-wine-dark);
    line-height: 1.5;
}

.tuvi-aff-field { margin-bottom: 16px; }
.tuvi-aff-field:last-child { margin-bottom: 0; }
.tuvi-aff-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--aff-text-light);
    margin-bottom: 7px;
}
.tuvi-aff-field .req { color: var(--aff-wine); }

.tuvi-aff-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1.5px solid var(--aff-border);
    border-radius: var(--aff-radius-sm);
    font-size: 16px; /* >=16px tránh Safari mobile tự zoom khi focus */
    font-family: var(--aff-font);
    color: var(--aff-text);
    background: #fff;
    transition: var(--aff-transition);
    min-height: 48px; /* vùng chạm thoải mái trên di động */
}
.tuvi-aff-field input::placeholder { color: #A99A86; }
.tuvi-aff-field input:hover { border-color: var(--aff-gold-light); }
.tuvi-aff-field input:focus {
    outline: none;
    border-color: var(--aff-gold);
    box-shadow: 0 0 0 4px rgba(181,138,60,.14);
}
.tuvi-aff-field input:disabled {
    background: #F3EEE0;
    color: var(--aff-text-muted);
    cursor: not-allowed;
}
.tuvi-aff-field-note {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--aff-text-muted);
    line-height: 1.5;
}

/* ── Mã giới thiệu: dùng mặc định hoặc tự chọn ───────────────────────── */
.tuvi-aff-ma-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    background: #FBF3DF;
    border: 1.5px solid var(--aff-gold-light);
    border-radius: var(--aff-radius-sm);
    margin-bottom: 12px;
    cursor: pointer;
    transition: var(--aff-transition);
}
.tuvi-aff-ma-choice:hover { border-color: var(--aff-gold); }
.tuvi-aff-ma-choice input[type="checkbox"] {
    width: 19px;
    height: 19px;
    accent-color: var(--aff-wine);
    flex: 0 0 auto;
    cursor: pointer;
    margin-top: 1px;
}
.tuvi-aff-ma-choice-text {
    font-size: 13.5px;
    color: var(--aff-text-light);
    line-height: 1.55;
}
.tuvi-aff-ma-choice-text strong { color: var(--aff-wine-dark); }
.tuvi-aff-ma-custom { transition: var(--aff-transition); }
.tuvi-aff-ma-custom.is-hidden { display: none; }
.tuvi-aff-ma-row {
    display: flex;
    align-items: center;
}
.tuvi-aff-ma-prefix {
    padding: 13px 10px 13px 15px;
    background: #F7F1DE;
    border: 1.5px solid var(--aff-border);
    border-right: none;
    border-radius: var(--aff-radius-sm) 0 0 var(--aff-radius-sm);
    font-size: 15px;
    color: var(--aff-text-muted);
}
.tuvi-aff-ma-row input { border-radius: 0 var(--aff-radius-sm) var(--aff-radius-sm) 0; }

/* ── Nhãn "Link giới thiệu" + badge % hoa hồng đi kèm ─────────────────── */
.tuvi-aff-link-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.tuvi-aff-link-head .tuvi-aff-hint { margin: 0; }
.tuvi-aff-commission-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--aff-success-bg);
    color: var(--aff-success);
    white-space: nowrap;
}
.tuvi-aff-commission-badge strong { font-weight: 800; }
.tuvi-aff-wrapper .tuvi-aff-commission-badge {
    background: var(--aff-success-bg) !important;
    color: var(--aff-success) !important;
}

.tuvi-aff-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--aff-text-muted);
    line-height: 1.5;
}
.tuvi-aff-hint.tuvi-aff-hint--ok { color: var(--aff-success); }
.tuvi-aff-hint.tuvi-aff-hint--err { color: var(--aff-error); }
.tuvi-aff-logged-as {
    font-size: 14px;
    color: var(--aff-text-light);
    margin-bottom: 20px;
    padding: 13px 15px;
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: var(--aff-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Header Dashboard: tiêu đề/trạng thái bên trái, CTA hồ sơ bên phải ──── */
.tuvi-aff-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.tuvi-aff-dash-head-main { flex: 1 1 260px; min-width: 0; }
.tuvi-aff-dash-head-main .tuvi-aff-desc { margin-bottom: 0; }
.tuvi-aff-profile-link-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: var(--aff-bg);
    border: 1.5px solid var(--aff-gold-light);
    color: var(--aff-wine-dark);
    border-radius: var(--aff-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--aff-transition);
}
.tuvi-aff-profile-link-btn:hover { background: var(--aff-gold-light); color: #fff; border-color: var(--aff-gold-light); }
.tuvi-aff-profile-link-icon { font-size: 15px; line-height: 1; }
@media (max-width: 480px) {
    .tuvi-aff-dash-head { flex-direction: column; align-items: stretch; }
    .tuvi-aff-profile-link-btn { justify-content: center; width: 100%; }
}

/* ── Nút submit & CTA ─────────────────────────────────────────────────── */
.tuvi-aff-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark));
    color: #fff;
    border: none;
    border-radius: var(--aff-radius-sm);
    font-family: var(--aff-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(122,31,31,.28);
    transition: var(--aff-transition);
    min-height: 52px;
}
.tuvi-aff-submit-btn:hover { background: linear-gradient(135deg, var(--aff-wine-dark), var(--aff-wine-deep)); box-shadow: 0 8px 22px rgba(122,31,31,.34); transform: translateY(-1px); }
.tuvi-aff-submit-btn:active { transform: translateY(0); }
.tuvi-aff-submit-btn:focus-visible { outline: 2px solid var(--aff-gold); outline-offset: 2px; }
.tuvi-aff-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.tuvi-aff-thong-bao {
    margin: 0;
    font-size: 15px;
    color: var(--aff-text-light);
    line-height: 1.6;
}
.tuvi-aff-box--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 26px;
}
.tuvi-aff-cta-btn {
    display: inline-block;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark));
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--aff-radius-sm);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(122,31,31,.28);
    transition: var(--aff-transition);
}
.tuvi-aff-cta-btn:hover {
    background: linear-gradient(135deg, var(--aff-wine-dark), var(--aff-wine-deep));
    box-shadow: 0 8px 22px rgba(122,31,31,.34);
    transform: translateY(-1px);
    color: #fff !important;
}
.tuvi-aff-cta-btn:focus-visible { outline: 2px solid var(--aff-gold); outline-offset: 2px; }

/* ── Khối đăng ký thành công ──────────────────────────────────────────── */
.tuvi-aff-success-box {
    text-align: center;
    padding: 10px 4px 4px;
}
.tuvi-aff-success-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-gold), var(--aff-wine));
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(122,31,31,.26);
}
.tuvi-aff-success-title {
    margin: 0 0 10px;
    font-family: var(--aff-font-title);
    font-weight: 700;
    font-size: 23px;
    color: var(--aff-wine);
}
.tuvi-aff-success-desc {
    margin: 0 0 22px;
    font-size: 14.5px;
    color: var(--aff-text-light);
    line-height: 1.6;
}
.tuvi-aff-success-desc strong { color: var(--aff-wine-dark); letter-spacing: .02em; }
.tuvi-aff-success-box .tuvi-aff-hint {
    text-align: left;
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--aff-text-light);
}
.tuvi-aff-copy-row {
    display: flex;
    gap: 9px;
}
.tuvi-aff-copy-row .tuvi-aff-ref-link-input { margin-top: 0; }
.tuvi-aff-copy-btn {
    flex: 0 0 auto;
    padding: 0 20px;
    background: var(--aff-gold);
    color: #fff;
    border: none;
    border-radius: var(--aff-radius-sm);
    font-family: var(--aff-font);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--aff-transition);
    min-height: 48px;
}
.tuvi-aff-copy-btn:hover { background: var(--aff-wine); }

.tuvi-aff-success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}
.tuvi-aff-cta-btn--outline {
    background: transparent;
    color: var(--aff-wine) !important;
    border: 2px solid var(--aff-wine);
    box-shadow: none;
}
.tuvi-aff-cta-btn--outline:hover {
    background: var(--aff-wine);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(122,31,31,.22);
}

@media (max-width: 400px) {
    .tuvi-aff-copy-row { flex-direction: column; }
    .tuvi-aff-copy-btn { width: 100%; }
    .tuvi-aff-success-actions { flex-direction: column; }
}

/* ── Trạng thái hồ sơ (chấm màu trực quan) ────────────────────────────── */
.tuvi-aff-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}
.tuvi-aff-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tuvi-aff-status-badge--active {
    background: var(--aff-success-bg);
    color: var(--aff-success);
}
.tuvi-aff-status-badge--active .tuvi-aff-status-dot {
    background: var(--aff-success);
    box-shadow: 0 0 0 3px rgba(30,122,55,.18);
    animation: tuviAffPulseDot 1.8s ease-in-out infinite;
}
.tuvi-aff-status-badge--paused {
    background: #FBF0DA;
    color: #96650E;
}
.tuvi-aff-status-badge--paused .tuvi-aff-status-dot { background: #C4890E; }
.tuvi-aff-status-badge--banned {
    background: var(--aff-error-bg);
    color: var(--aff-error);
}
.tuvi-aff-status-badge--banned .tuvi-aff-status-dot { background: var(--aff-error); }
@keyframes tuviAffPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(30,122,55,.18); }
    50% { box-shadow: 0 0 0 5px rgba(30,122,55,.08); }
}
.tuvi-aff-ref-link-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1.5px solid var(--aff-gold-light);
    border-radius: var(--aff-radius-sm);
    font-size: 13.5px;
    margin-top: 8px;
    background: #F7F1DE;
    color: var(--aff-wine-dark);
    font-weight: 600;
    min-height: 48px;
}

/* Trang hồ sơ: bố cục hàng thông tin rõ ràng, giãn dòng thoáng */
.tuvi-aff-box p { line-height: 1.7; margin: 0 0 14px; font-size: 14.5px; }
.tuvi-aff-box p:last-child { margin-bottom: 0; }
.tuvi-aff-box p strong { color: var(--aff-text-light); font-weight: 600; }

/* ── Trang Hồ Sơ CTV (tuvi_aff_ho_so): card thông tin chuyên nghiệp ──── */
.tuvi-aff-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.tuvi-aff-profile-header .tuvi-aff-title { margin: 0; text-align: left; }

.tuvi-aff-info-list {
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: var(--aff-radius);
    padding: 4px 18px;
    margin-bottom: 22px;
}
.tuvi-aff-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--aff-border-soft);
}
.tuvi-aff-info-row:last-child { border-bottom: none; }
.tuvi-aff-info-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--aff-text-muted);
    flex: 0 0 auto;
}
.tuvi-aff-info-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--aff-wine-dark);
    text-align: right;
    letter-spacing: .01em;
}

.tuvi-aff-link-block { margin-bottom: 22px; }
.tuvi-aff-link-block .tuvi-aff-hint { text-align: left; margin-top: 0; margin-bottom: 8px; font-weight: 600; color: var(--aff-text-light); }

.tuvi-aff-dashboard-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px dashed var(--aff-gold-light);
    flex-wrap: wrap;
}
.tuvi-aff-dashboard-cta .tuvi-aff-hint { max-width: 320px; }
.tuvi-aff-cta-btn--sm {
    padding: 11px 20px;
    font-size: 13.5px;
    white-space: nowrap;
}
@media (max-width: 460px) {
    .tuvi-aff-dashboard-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .tuvi-aff-dashboard-cta .tuvi-aff-hint { max-width: none; }
    .tuvi-aff-cta-btn--sm { text-align: center; }
}

/* ── DASHBOARD (GĐ4) ─────────────────────────────────────────────────── */
.tuvi-aff-dashboard .tuvi-aff-box { margin-bottom: 18px; }

.tuvi-aff-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.tuvi-aff-wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 700px) {
    .tuvi-aff-stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .tuvi-aff-wallet-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .tuvi-aff-stat-grid,
    .tuvi-aff-wallet-grid { grid-template-columns: 1fr; }
}

.tuvi-aff-stat-card,
.tuvi-aff-wallet-card {
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: var(--aff-radius-sm);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--aff-transition);
}
.tuvi-aff-stat-card:hover,
.tuvi-aff-wallet-card:hover { border-color: var(--aff-gold-light); box-shadow: var(--aff-shadow); }
.tuvi-aff-wallet-card--pending { border-left: 4px solid var(--aff-gold); }
.tuvi-aff-wallet-card--confirmed { border-left: 4px solid var(--aff-success); }
.tuvi-aff-wallet-card--paid { border-left: 4px solid var(--aff-wine); }

/* Ô "Tỉ lệ hoa hồng" — nổi bật hơn các ô còn lại vì đây là thông tin CTV
   quan tâm hàng đầu, cần thấy ngay không phải đi tìm ở đâu khác. */
.tuvi-aff-stat-card--highlight {
    background: linear-gradient(135deg, #FBF3E1, #F7EBCB);
    border: 1.5px solid var(--aff-gold);
}
.tuvi-aff-stat-card--highlight .tuvi-aff-stat-value { color: var(--aff-wine); }

.tuvi-aff-stat-label {
    font-size: 12px;
    color: var(--aff-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tuvi-aff-stat-value {
    font-family: var(--aff-font-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--aff-wine-dark);
}
.tuvi-aff-wallet-note { margin-top: 6px; }

.tuvi-aff-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 140px;
    padding-top: 20px;
}
.tuvi-aff-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.tuvi-aff-chart-bar {
    width: 100%;
    max-width: 22px;
    background: linear-gradient(180deg, var(--aff-gold), var(--aff-wine));
    border-radius: 5px 5px 0 0;
    position: relative;
    min-height: 3px;
    transition: height 0.3s ease;
}
.tuvi-aff-chart-val {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--aff-text-muted);
    white-space: nowrap;
}
.tuvi-aff-chart-label {
    margin-top: 6px;
    font-size: 10px;
    color: var(--aff-text-muted);
}

.tuvi-aff-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tuvi-aff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tuvi-aff-table th,
.tuvi-aff-table td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--aff-border-soft);
    white-space: nowrap;
}
.tuvi-aff-table th {
    color: var(--aff-gold);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.tuvi-aff-table tbody tr:hover { background: #FDFAF0; }

.tuvi-aff-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.tuvi-aff-badge--pending { background: #FBF0DA; color: #96650E; }
.tuvi-aff-badge--approved { background: var(--aff-success-bg); color: var(--aff-success); }
.tuvi-aff-badge--paid { background: #F7EFD9; color: var(--aff-wine-dark); }
.tuvi-aff-badge--cancelled,
.tuvi-aff-badge--rejected { background: var(--aff-error-bg); color: var(--aff-error); }
.tuvi-aff-badge--processing { background: #EFEADA; color: var(--aff-gold-dim, #93702F); }

/* ── Chi tiết lượt click (giờ click, đã dùng miễn phí/trả phí, hoa hồng) ── */
.tuvi-aff-badge--chua-xac-dinh { background: #F0EEE8; color: var(--aff-text-muted); }
.tuvi-aff-badge--chua-su-dung  { background: #F0EEE8; color: var(--aff-text-muted); }
.tuvi-aff-badge--mien-phi      { background: #EAF1FB; color: #2A5CA8; }
.tuvi-aff-badge--premium       { background: var(--aff-success-bg); color: var(--aff-success); }

/* ── Mã Xem Thưởng theo mốc (đăng ký / 5 đơn / 10 đơn trả phí) ── */
.tuvi-aff-badge--active   { background: var(--aff-success-bg); color: var(--aff-success); }
.tuvi-aff-badge--used     { background: #F0EEE8; color: var(--aff-text-muted); }
.tuvi-aff-badge--expired,
.tuvi-aff-badge--khong_ro { background: var(--aff-error-bg); color: var(--aff-error); }
.tuvi-aff-badge--revoked  { background: var(--aff-error-bg); color: var(--aff-error); }

.tuvi-aff-bonus-code-box {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FBF7EC;
    border: 1px dashed var(--aff-gold-dim, #93702F);
}
.tuvi-aff-bonus-code-box .tuvi-aff-hint { margin-top: 0; font-weight: 700; }

.tuvi-aff-click-time { display: block; font-weight: 700; color: var(--aff-text); font-size: 13.5px; }
.tuvi-aff-click-date { display: block; font-size: 11.5px; color: var(--aff-text-muted); margin-top: 1px; }
.tuvi-aff-click-subtext { display: inline-block; font-size: 11.5px; color: var(--aff-text-muted); margin-top: 4px; }
.tuvi-aff-table td .tuvi-aff-click-subtext { display: block; }
.tuvi-aff-click-hoahong { color: var(--aff-wine-dark); font-size: 13.5px; }

.tuvi-aff-group-note--muted {
    color: var(--aff-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Giai đoạn 5/7 — khối "Yêu cầu rút tiền" trong Dashboard */
.tuvi-aff-payout-box .tuvi-aff-field { margin-bottom: 14px; }
.tuvi-aff-payout-box .tuvi-aff-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--aff-text-light);
    margin-bottom: 6px;
}
.tuvi-aff-payout-box .tuvi-aff-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--aff-border);
    border-radius: var(--aff-radius-sm);
    font-size: 16px;
    background: var(--aff-bg);
    min-height: 48px;
}

/* Giai đoạn 7/7 — huy hiệu (Dashboard) + bảng xếp hạng công khai */
.tuvi-aff-huy-hieu-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FBF3DF, #FDF9EF);
    border: 1px solid var(--aff-gold-light);
    border-radius: var(--aff-radius-sm);
    font-size: 13px;
    color: var(--aff-text-light);
    line-height: 1.55;
}
.tuvi-aff-huy-hieu-icon {
    font-size: 26px;
    line-height: 1;
}
.tuvi-aff-badge--huy-hieu {
    background: transparent;
    color: var(--aff-wine-dark);
    font-size: 14px;
    padding: 0 4px;
}
.tuvi-aff-leaderboard-table tr.tuvi-aff-rank-top td {
    font-weight: 700;
    background: #FBF3DF;
}

/* ── Tiện ích ẩn/hiện dùng chung — khối sửa hồ sơ + tab bảng xếp hạng ──── */
.tuvi-aff-hidden { display: none !important; }

/* ── Trang Hồ Sơ CTV (07/2026): khối xem/sửa thông tin cá nhân + nhận
   hoa hồng — cùng ngôn ngữ thị giác với .tuvi-aff-field-group của form
   đăng ký (viền mảnh, bo góc, focus vàng đồng) để CTV không cảm thấy lạ
   lẫm khi chuyển từ "xem" sang "sửa". ─────────────────────────────────── */
.tuvi-aff-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tuvi-aff-section-head .tuvi-aff-group-label { margin: 0; padding: 0; border: 0; }
.tuvi-aff-edit-toggle-btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    background: transparent;
    border: 1.5px solid var(--aff-gold);
    color: var(--aff-wine-dark);
    border-radius: var(--aff-radius-sm);
    font-family: var(--aff-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--aff-transition);
}
.tuvi-aff-edit-toggle-btn:hover { background: var(--aff-gold); color: #fff; }
.tuvi-aff-edit-toggle-btn:focus-visible { outline: 2px solid var(--aff-gold); outline-offset: 2px; }

.tuvi-aff-info-value--masked { font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: .03em; font-size: 14px; }

#tuvi-aff-edit-form { margin-top: 4px; }
.tuvi-aff-edit-actions {
    display: flex;
    flex-direction: row-reverse; /* nút chính (Lưu) luôn bên phải, đúng thói quen đọc trái→phải, dừng ở nút xác nhận */
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--aff-border-soft); /* tách rõ khỏi ghi chú/field phía trên, đỡ dính-rối */
}
.tuvi-aff-edit-actions .tuvi-aff-submit-btn { flex: 1 1 auto; margin: 0; width: auto; }
.tuvi-aff-cancel-btn {
    flex: 1 1 auto;
    padding: 0 22px;
    min-height: 52px;
    background: var(--aff-bg);
    border: 1.5px solid var(--aff-border);
    color: var(--aff-text-light);
    border-radius: var(--aff-radius-sm);
    font-family: var(--aff-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--aff-transition);
}
.tuvi-aff-cancel-btn:hover { border-color: var(--aff-gold-light); background: #fff; }
.tuvi-aff-cancel-btn:focus-visible { outline: 2px solid var(--aff-gold); outline-offset: 2px; }
/* Tỷ lệ 60/40 trên desktop/tablet: Lưu (chính) chiếm ưu thế thị giác hơn Huỷ (phụ) thay vì 50/50 khiến 2 nút "ngang hàng" gây phân vân */
@media (min-width: 421px) {
    .tuvi-aff-edit-actions .tuvi-aff-submit-btn { flex-grow: 3; }
    .tuvi-aff-edit-actions .tuvi-aff-cancel-btn { flex-grow: 2; }
}
@media (max-width: 420px) {
    .tuvi-aff-edit-actions { flex-direction: column; }
    .tuvi-aff-edit-actions .tuvi-aff-submit-btn { order: 1; }
    .tuvi-aff-cancel-btn { order: 2; width: 100%; }
}

/* ── Bảng Xếp Hạng CTV (gộp vào Dashboard + vẫn dùng được như shortcode
   riêng [tuvi_aff_bang_xep_hang]) — cùng .tuvi-aff-box/.tuvi-aff-table với
   phần còn lại của Dashboard để không tạo cảm giác "khối rời", thêm thẻ
   podium top-3 và tab kỳ hạn cho chuyên nghiệp hơn bảng thô trước đây. ── */
.tuvi-aff-lb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.tuvi-aff-lb-title { margin: 0; text-align: left; font-size: 21px; }
.tuvi-aff-lb-desc { margin: 0 0 22px; text-align: left; max-width: none; }

.tuvi-aff-lb-tabs {
    display: inline-flex;
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    flex: 0 0 auto;
}
.tuvi-aff-lb-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-family: var(--aff-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aff-text-muted);
    cursor: pointer;
    transition: var(--aff-transition);
    white-space: nowrap;
}
.tuvi-aff-lb-tab.is-active {
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark));
    color: #fff;
    box-shadow: 0 3px 10px rgba(122,31,31,.25);
}
.tuvi-aff-lb-tab:not(.is-active):hover { color: var(--aff-wine-dark); }
.tuvi-aff-lb-tab:focus-visible { outline: 2px solid var(--aff-gold); outline-offset: 2px; }

/* Lá chắn chống theme đè — cùng lý do như khối đầu file: nút tab
   ".is-active" trước đây không có !important nên 1 số theme (CSS toàn cục
   kiểu `button { color: ... }`) đè chữ trắng thành đen, khiến chữ chìm vào
   nền đỏ rượu vang, không đọc được. */
.tuvi-aff-wrapper .tuvi-aff-lb-tab.is-active {
    background: linear-gradient(135deg, var(--aff-wine), var(--aff-wine-dark)) !important;
    color: #fff !important;
    border: none !important;
}
.tuvi-aff-wrapper .tuvi-aff-lb-tab:not(.is-active) {
    background: transparent !important;
    color: var(--aff-text-muted) !important;
    border: none !important;
}

.tuvi-aff-lb-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 560px) {
    .tuvi-aff-lb-podium { grid-template-columns: 1fr; }
}
.tuvi-aff-lb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px 16px;
    background: var(--aff-bg);
    border: 1px solid var(--aff-border-soft);
    border-radius: var(--aff-radius);
    transition: var(--aff-transition);
}
/* Hạng #1 nổi bật hơn — nền vàng nhạt + phóng to nhẹ, xếp ở giữa trên
   desktop (order) giống bố cục "bục nhận huy chương" quen thuộc. */
.tuvi-aff-lb-card--1 {
    background: linear-gradient(160deg, #FBF3DF 0%, #FDF9EF 60%);
    border-color: var(--aff-gold-light);
    order: 2;
    transform: scale(1.04);
}
.tuvi-aff-lb-card--2 { order: 1; }
.tuvi-aff-lb-card--3 { order: 3; }
@media (max-width: 560px) {
    .tuvi-aff-lb-card--1,
    .tuvi-aff-lb-card--2,
    .tuvi-aff-lb-card--3 { order: initial; transform: none; }
}
.tuvi-aff-lb-card.is-me { border-color: var(--aff-wine); box-shadow: 0 0 0 2px rgba(122,31,31,.14); }
.tuvi-aff-lb-medal { font-size: 26px; line-height: 1; }
.tuvi-aff-lb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-gold), var(--aff-wine));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tuvi-aff-lb-name { font-size: 13.5px; font-weight: 700; color: var(--aff-wine-dark); line-height: 1.4; }
.tuvi-aff-lb-you-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    background: var(--aff-wine);
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    vertical-align: middle;
}
.tuvi-aff-lb-amount { font-family: var(--aff-font-title); font-size: 17px; font-weight: 700; color: var(--aff-text); }

.tuvi-aff-lb-row-me td { background: #FBF3DF; font-weight: 700; }

.tuvi-aff-lb-me-box {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--aff-bg);
    border: 1px dashed var(--aff-gold-light);
    border-radius: var(--aff-radius-sm);
    font-size: 13.5px;
    color: var(--aff-text-light);
    text-align: center;
}