/* ============================================================
   Report Overview  ·  #/report

   Một màn cuộn dài, dựng theo từng khối từ trên xuống. Mỗi khối
   một mục trong file này, thứ tự trùng thứ tự trên màn hình.
   ============================================================ */

#s-report {
    background: var(--surface-grey);
    display: flex;
    flex-direction: column
}

/* ---------------------------------------------------------- header */

.rp-hdr { position: relative; flex-shrink: 0 }

/* Nền tím pha hồng của design là lưới nhiều lớp radial chồng lên một
   nền đặc, không phải một dải gradient thẳng như Home. Ba lớp, vẽ từ
   trên xuống: vệt sáng mảnh trên đỉnh, quầng sáng trắng phía dưới trái,
   và lớp màu chính hắt lên từ ngoài mép trên. */
.rp-hdr-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 249px 63px at 187px 29px,
            rgba(255,255,255,.10), rgba(255,255,255,0) 100%),
        radial-gradient(ellipse 145px 82px at 117px 70px,
            rgba(255,255,255,.22), rgba(255,255,255,.04) 100%),
        radial-gradient(ellipse 320px 150px at 164px -29px,
            rgba(170,34,156,.92) 24%, rgba(166,64,202,.905) 55%, rgba(162,95,248,.89) 85%),
        #5B099B;
    box-shadow: inset 0 0 10px rgba(255,255,255,.4)
}

.rp-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px
}
.rp-nav-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}
.rp-nav-btn > img { display: block }
.rp-nav-title {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: var(--weight-bold);
    line-height: 28px;
    color: var(--surface-white);
    text-align: center
}

.rp-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px
}
.rp-scroll::-webkit-scrollbar { display: none }
/* Cột flex bóp con cho vừa khung trước khi chịu tràn ra. Trang này dài
   gấp bốn màn hình nên phải chặn: mỗi khối giữ nguyên chiều cao thật,
   phần dư đẩy xuống cho .rp-scroll cuộn. */
.rp-scroll > * { flex-shrink: 0 }

/* ---------------------------------------------------------- hàng sản phẩm */

.rp-apps {
    display: flex;
    align-items: stretch;
    gap: 4px
}
.rp-app {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 4px;
    background: var(--surface-white);
    border-radius: 8px;
    filter: drop-shadow(0 .4px .4px rgba(0,0,0,.08))
}
.rp-app-ico { display: block; flex-shrink: 0 }
.rp-app-lbl {
    font-size: var(--text-xs);      /* Figma font-size/s = 12 */
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--ink-600);
    text-align: center
}

/* ---------------------------------------------------------- segment control */

/* Nút đang chọn không tô nền mà viền tím 1.5px — nền trắng của nó trùng
   với nền thanh, nên chỉ đường viền và màu chữ làm nhiệm vụ đánh dấu. */
.rp-seg {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px;
    background: var(--surface-white);
    border-radius: 10px
}
.rp-seg-btn {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: var(--text-s);       /* Figma font-size/m = 14 */
    font-weight: var(--weight-regular);
    line-height: 20px;
    color: var(--ink-500);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, border-color .15s
}
.rp-seg-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--weight-semibold)
}

/* ---------------------------------------------------------- hero AI summary */

/* Khối duy nhất trên trang có nền tối — nó là câu kết luận, mọi khối
   sau chỉ là số liệu chống lưng cho nó, nên được phép nổi bật hẳn. */
.rp-hero {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: var(--radius-m);
    background: linear-gradient(133.73deg, #110F19 0%, #1A1627 100%);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)
}
/* Quầng tím thò ra ngoài mép phải trên, bị khung cắt bớt — chính chỗ cắt
   đó tạo cảm giác ánh sáng hắt từ ngoài vào. */
.rp-hero-glow {
    position: absolute;
    top: -65px;
    right: -67px;
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: rgba(95,46,234,.5);
    filter: blur(32px);
    pointer-events: none
}
.rp-hero-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px
}
.rp-hero-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--surface-white)
}
.rp-hero-tag > img { display: block; flex-shrink: 0 }
.rp-hero-h {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 32px;
    color: var(--surface-white)
}
.rp-hero-sub {
    font-size: var(--text-s);
    font-weight: var(--weight-regular);
    line-height: 20px;
    color: var(--surface-white)
}
.rp-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border-medium)
}
.rp-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}
.rp-hero-stat-lbl {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: var(--surface-white)
}
.rp-hero-stat-val {
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    line-height: 24px;
    color: var(--surface-white)
}

/* ---------------------------------------------------------- report card, khung chung */

/* Mọi khối số liệu từ đây trở xuống dùng chung một vỏ: thẻ trắng, bo 12,
   đệm 16, các phần bên trong cách nhau 16. */
.rp-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--surface-white);
    border-radius: var(--radius-m);
    overflow: hidden
}
.rp-card-hd {
    display: flex;
    align-items: center;
    gap: 8px
}
.rp-card-t {
    flex: 1;
    min-width: 0;
    font-size: var(--text-l);
    font-weight: var(--weight-semibold);
    line-height: 22px;      /* Figma ghim ô chữ ở 22, không phải 1.4×18 */
    color: var(--ink-600)
}
/* Nhãn nguồn số liệu — bấm được, dẫn sang app đẻ ra con số đó. */
.rp-card-src {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}
.rp-card-src > img { display: block }

/* ---------------------------------------------------------- thanh tỉ lệ */

.rp-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px
}
.rp-bar-note {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: var(--ink-300)
}
.rp-bar {
    height: 8px;
    border-radius: 100px;
    background: rgba(207,207,207,.5);
    overflow: hidden
}
.rp-bar-fill {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: var(--color-primary)
}
.rp-bar-fill.green { background: var(--color-success-dark) }

/* ---------------------------------------------------------- thẻ con dùng chung */

/* Hai thẻ đứng cạnh nhau, chia đôi bề ngang. */
.rp-row {
    display: flex;
    align-items: stretch;
    gap: 8px
}
/* Nhiều hàng thẻ xếp dọc — cách nhau 8 như khoảng cách trong hàng, chứ
   không phải 16 như khoảng cách giữa các mục. */
.rp-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}
/* Vỏ thẻ con dùng lại khắp trang: nền trắng, viền trắng ấm, bo 12, đệm 12,
   nội dung đẩy về hai đầu. Chiều cao và màu nền do lớp bổ nghĩa quyết định. */
.rp-mini {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 11px;      /* 12 của Figma trừ 1px viền — nét viền Figma vẽ bên trong */
    overflow: hidden;
    border: 1px solid var(--surface-white-warm);
    border-radius: var(--radius-m);
    background: var(--surface-white);
    box-shadow: 0 2px 16px rgba(0,0,0,.1)
}
/* Ngôi sao mờ đè lên mép thẻ và bị xén — trang trí thuần tuý, không bắt
   sự kiện, không chiếm chỗ trong luồng. */
.rp-deco {
    position: absolute;
    right: -90px;
    top: calc(50% - 14px);
    transform: translateY(-50%) rotate(12deg);
    pointer-events: none
}
.rp-deco-top {
    right: auto;
    top: 13px;
    left: calc(50% - 52px);
    transform: rotate(12deg)
}

/* ---------------------------------------------------------- hai ô so sánh */

.rp-inc-card {
    height: 124px;
    background: #F5F4F5;
    color: rgba(61,61,61,.7)
}
.rp-inc-card.ai {
    background: var(--color-primary);
    color: var(--surface-white)
}
.rp-inc-lbl {
    position: relative;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    white-space: nowrap
}
/* Figma ghim khối này ở 52px. Ở đây để `min-height`: nhãn dài hơn một
   dòng thì thẻ nở ra thay vì để chữ tràn ra ngoài. */
.rp-inc-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 52px
}
.rp-inc-val {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 28px
}
.rp-inc-sub {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px
}

/* ---------------------------------------------------------- customers */

/* Một mục con trong thẻ lớn: tiêu đề của mục ở trên, nội dung cách 16. */
.rp-sec {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.rp-legend {
    display: flex;
    gap: 16px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: rgba(61,61,61,.7)
}
.rp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}
.rp-legend-sw {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--purple-50);
    flex-shrink: 0
}
.rp-legend-sw.ai { background: var(--color-primary) }

.rp-cust-t {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: var(--ink-500);
    white-space: nowrap
}
.rp-cust-bot {
    display: flex;
    flex-direction: column;
    gap: 16px
}

/* Cặp cột so sánh. Chiều cao cột đặt inline vì nó LÀ số liệu, không phải
   trang trí — đọc thẳng từ bản vẽ, đổi số thì đổi luôn chiều cao. */
.rp-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px
}
.rp-bars-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}
.rp-bars-n {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 14px;
    color: rgba(61,61,61,.7);
    white-space: nowrap
}
.rp-bars-col.ai .rp-bars-n { color: var(--color-primary) }
.rp-bars-b {
    width: 46px;
    border-radius: 8px 8px 0 0;
    background: var(--purple-50)
}
.rp-bars-col.ai .rp-bars-b { background: var(--color-primary) }

.rp-cust-note {
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    font-style: italic;
    line-height: 16px;
    color: rgba(61,61,61,.7)
}
.rp-cust-note > b {
    font-weight: var(--weight-semibold);
    color: var(--color-primary)
}

/* ---------------------------------------------------------- ô Boost */

.rp-boost {
    padding: 15px;      /* 16 trừ viền */
    background: var(--color-primary);
    color: var(--surface-white)
}
.rp-boost-top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px
}
.rp-boost-ico {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    background: var(--surface-white);
    flex-shrink: 0
}
.rp-boost-ico > img { display: block }
.rp-boost-txt {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px
}
.rp-boost-act {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}
.rp-boost-act > img { display: block }

/* ---------------------------------------------------------- đường kẻ đứt */

/* Figma xuất ra dưới dạng ảnh SVG rộng cố định, kéo giãn là hỏng nhịp đứt.
   Dựng bằng gradient lặp thì nhịp đúng 6-6 ở mọi bề ngang.

   Ô kẻ cao 0 và nét nằm ở ::before đè lên trên, y như Figma (node height 0,
   stroke vẽ ở inset -1px). Cho nó cao 1px thì mỗi đường kẻ đội chiều cao
   khối lên 1px — ba đường trong danh sách campaign là lệch 3px so với bản vẽ. */
.rp-div {
    position: relative;
    height: 0;
    border: 0;
    margin: 0
}
.rp-div::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: repeating-linear-gradient(to right,
        var(--purple-100) 0 6px, transparent 6px 12px)
}
/* Trong một camp-item thì nét ngắn hơn, 4-4 — kẻ phụ, không phải kẻ phân mục. */
.rp-div-tight::before {
    background: repeating-linear-gradient(to right,
        var(--purple-100) 0 4px, transparent 4px 8px)
}

/* ---------------------------------------------------------- AI campaigns */

.rp-sec-tight { gap: 8px }
.rp-sec-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(61,61,61,.7)
}
.rp-sec-t {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: 24px;
    white-space: nowrap
}
.rp-sec-note {
    font-size: var(--text-2xs);
    font-style: italic;
    line-height: 16px;
    white-space: nowrap
}

/* Vỏ tím rất nhạt bọc cả cụm — tách nhóm này khỏi nền trắng của thẻ lớn. */
.rp-camp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 11px;      /* 12 trừ viền */
    overflow: hidden;
    border: 1px solid var(--surface-white-warm);
    border-radius: var(--radius-m);
    background: #F8F5FF
}
.rp-camp-stat {
    justify-content: flex-start;
    color: rgba(61,61,61,.7);
    background: #F5F4F5
}
.rp-camp-stat.ai {
    background: var(--color-primary);
    color: var(--surface-white)
}
.rp-camp-stat-n {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 28px
}
.rp-camp-stat-l {
    position: relative;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px
}
.rp-deco-mid {
    right: -102px;
    top: calc(50% + 12px)
}

.rp-camp-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-s);
    background: var(--surface-white)
}
.rp-camp-top {
    display: flex;
    align-items: center;
    gap: 8px
}
.rp-camp-ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    overflow: hidden
}
.rp-camp-ico > img { display: block }
.rp-camp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px
}
.rp-camp-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}
.rp-camp-col.right {
    width: 90px;
    flex-shrink: 0;
    align-items: flex-end;
    text-align: right
}
.rp-camp-name {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--ink-500)
}
.rp-camp-meta {
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    line-height: 14px;
    color: rgba(61,61,61,.7);
    white-space: nowrap
}
.rp-camp-meta > b.on { font-weight: inherit; color: var(--color-warning) }
.rp-camp-book {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--color-primary);
    white-space: nowrap
}
.rp-camp-inc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: rgba(61,61,61,.7)
}
.rp-camp-inc > b {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    color: var(--ink-700)
}
.rp-camp-total {
    font-size: var(--text-2xs);
    font-style: italic;
    line-height: 16px;
    color: rgba(61,61,61,.7)
}
.rp-camp-total > span { font-style: normal }
.rp-camp-total > b {
    font-weight: var(--weight-semibold);
    color: var(--color-primary)
}

/* ---------------------------------------------------------- performance by channel */

/* Đầu thẻ mang màu của kênh, hàng số liệu bên dưới trắng — nhìn lướt là
   phân biệt được kênh, mà bốn cột vẫn so ngang được giữa hai thẻ. */
.rp-ch {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 11px;      /* 12 trừ viền */
    border: 1px solid var(--surface-white-warm);
    border-radius: var(--radius-m);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.1))
}
.rp-ch.sms   { background: linear-gradient(90deg, #E9F2FF, #D2E7FF) }
.rp-ch.email { background: linear-gradient(90deg, #D9FFEC, #D2FFE8) }

.rp-ch-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 11px
}
.rp-ch-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    line-height: 1.2
}
.rp-ch-name > img { display: block; flex-shrink: 0 }
.rp-ch-rate {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    white-space: nowrap
}
.rp-ch.sms   .rp-ch-name, .rp-ch.sms   .rp-ch-rate { color: var(--color-info) }
.rp-ch.email .rp-ch-name, .rp-ch.email .rp-ch-rate { color: var(--color-success-dark) }

.rp-ch-stats {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 0 0 11px 11px
}
.rp-ch-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-white-warm);
    border-right: 1px solid #F4F4F4
}
.rp-ch-cell:last-child { border-right: 0 }
.rp-ch-v {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    color: var(--ink-700)
}
/* Ghim hai dòng: "Points Spent" xuống dòng còn "Income" thì không, không
   ghim là bốn ô so le nhau. Figma đạt điều này bằng một dòng trống thứ hai. */
.rp-ch-l {
    height: 32px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: rgba(61,61,61,.7)
}

/* ---------------------------------------------------------- social reach */

/* Bốn thẻ, mỗi thẻ một tông theo nguồn số liệu. Mỗi tông là một bộ ba
   biến: nền thẻ nhạt nhất, nền icon/nhãn đậm hơn, chữ nhấn đậm nhất —
   khai báo một lần ở đây thay vì rải màu khắp từng thành phần. */
.rp-soc {
    height: 150px;
    background: var(--rp-soc-bg)
}
.rp-soc.amber  { --rp-soc-bg: #FFFBEB; --rp-soc-tint: #FEF3C7; --rp-soc-ink: #D97705 }
.rp-soc.blue   { --rp-soc-bg: #EFF6FF; --rp-soc-tint: #DBEAFE; --rp-soc-ink: #386FEC }
.rp-soc.violet { --rp-soc-bg: #F5F3FF; --rp-soc-tint: var(--purple-100); --rp-soc-ink: #7158EE }
.rp-soc.green  { --rp-soc-bg: #F0FDF4; --rp-soc-tint: #D1FAE5; --rp-soc-ink: #059669 }

.rp-soc-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}
.rp-soc-ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    background: var(--rp-soc-tint);
    overflow: hidden
}
.rp-soc-ico > img { display: block }
.rp-soc-bag {
    flex-shrink: 0;
    padding: 2px 4px;
    border-radius: var(--radius-s);
    background: var(--rp-soc-tint);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 14px;
    color: var(--rp-soc-ink);
    white-space: nowrap
}
/* Cao 52 nhưng con số ăn lấn xuống nhãn 4px — Figma bù bằng margin âm, giữ
   nguyên để hai dòng sát nhau đúng như bản vẽ. */
.rp-soc-bot {
    position: relative;
    height: 52px;
    display: flex;
    flex-direction: column
}
.rp-soc-v {
    flex: 1;
    display: flex;
    align-items: center;
    margin-bottom: -4px;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 28px;
    color: var(--ink-500)
}
.rp-soc-l {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: rgba(61,61,61,.7)
}
.rp-soc-foot {
    position: relative;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--rp-soc-ink)
}
/* Hoạ tiết chìm ở góc dưới phải, bị thẻ xén — chỉ thẻ Total Views có. */
.rp-soc-pattern {
    position: absolute;
    left: 80px;
    top: 62px;
    pointer-events: none
}

/* ---------------------------------------------------------- SEO & local search */

/* Đệm ở các mép trong đều trừ đi 1px viền — cùng quy tắc "nét viền Figma
   vẽ bên trong" áp cho mọi khối có viền trong file này. */
.rp-perf {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-m);
    background: var(--surface-white)
}
.rp-div-solid::before {
    background: var(--purple-50)
}

.rp-perf-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 8px;
    background: var(--purple-50);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: var(--ink-500)
}
.rp-perf-hd > img { display: block; flex-shrink: 0 }

.rp-perf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 11px
}
.rp-perf-l {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 16px;
    color: rgba(61,61,61,.7);
    white-space: nowrap
}
.rp-perf-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0
}
.rp-perf-dot.blue  { background: var(--color-info) }
.rp-perf-dot.green { background: #059669 }
.rp-perf-dot.amber { background: var(--color-warning) }
.rp-perf-dot.red   { background: var(--color-danger) }

.rp-perf-r {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0
}
/* Cột số ghim 48px để bốn dòng thẳng hàng dù số dài ngắn khác nhau. */
.rp-perf-r > b {
    width: 48px;
    text-align: right;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    color: var(--ink-500)
}
.rp-perf-r > em {
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 16px;
    color: var(--color-success-dark);
    white-space: nowrap
}

.rp-perf-cta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 11px 11px;
    background: var(--purple-50)
}
.rp-perf-cta-t {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    color: var(--color-primary)
}
.rp-perf-cta-t > img { display: block; flex-shrink: 0 }
.rp-perf-cta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-2xs);
    font-style: italic;
    line-height: 16px;
    color: rgba(61,61,61,.7);
    white-space: nowrap
}
.rp-perf-cta-row > b {
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-align: right
}

/* ---------------------------------------------------------- GCI ecosystem */

/* Cùng hình dạng hàng với camp-item — icon, cột trái co giãn, cột phải ghim
   90px canh phải — nên dùng lại .rp-camp-main / .rp-camp-col, ở đây chỉ khai
   báo phần chữ to hơn một bậc. */
.rp-eco-row {
    display: flex;
    align-items: center;
    gap: 8px
}
.rp-eco-ico { display: block; flex-shrink: 0 }
.rp-eco-name {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    color: var(--ink-500)
}
.rp-eco-sub {
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    line-height: 14px;
    color: rgba(61,61,61,.7);
    white-space: nowrap
}
/* Màu con số nói loại giá trị: giữ được, thu về, hay tiết kiệm được. */
.rp-eco-val {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    white-space: nowrap
}
.rp-eco-val.green  { color: var(--color-success-dark) }
.rp-eco-val.purple { color: var(--color-primary) }
.rp-eco-val.amber  { color: var(--color-warning) }