/* ========================================================================
   Referral dashboard (/referral)
   Gold = the "earn by sharing" identity, consistent with the homepage promo.
   ======================================================================== */
/* width/margin/padding inherited from .app-container (shared with other pages) */
.ref-wrap { padding-bottom: 64px; }

/* ---- Hybrid layout --------------------------------------------------------
   Hero + stats stay full-width (the share CTA is the page's focal point);
   only the two lists below sit side-by-side so the page isn't a long stack. */
.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;   /* both list cards share the taller card's height */
}
.ref-grid > * { min-width: 0; }            /* prevent content from blowing out a column */
.ref-grid > .ref-list-card { margin-bottom: 0; }
@media (max-width: 1024px) {
  .ref-grid { grid-template-columns: 1fr; }
  .ref-grid > .ref-list-card:not(:last-child) { margin-bottom: 18px; }
}

/* ---- Header ---- */
.ref-page-head { text-align: center; margin-bottom: 22px; }
.ref-page-title {
  font-size: 28px; font-weight: 800; letter-spacing: -0.4px;
  color: var(--text); margin-bottom: 8px;
}
.ref-page-title i { color: var(--accent); }
.ref-page-sub {
  font-size: 15px; color: var(--text-muted);
  max-width: 600px; margin: 0 auto; line-height: 1.6;
}
.ref-page-sub strong { color: var(--text); }

/* ---- Hero (gold) ---- */
.ref-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FFCB45 0%, #FFB800 100%);
  border-radius: var(--radius-xl);
  padding: 28px 30px;
  box-shadow: 0 18px 44px rgba(180, 83, 9, 0.26);
  margin-bottom: 22px;
}
.ref-hero::before {
  content: ''; position: absolute;
  width: 280px; height: 280px;
  background: rgba(255, 255, 255, 0.16); border-radius: 50%;
  top: -130px; right: -70px;
}
.ref-hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}
.ref-hero__earn-label { font-size: 13px; font-weight: 700; color: #7A4A12; margin-bottom: 4px; }
.ref-hero__earn-value { font-size: 40px; font-weight: 800; color: #5A2E00; line-height: 1.05; letter-spacing: -1px; }
.ref-hero__earn-split { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: #7A4A12; }
.ref-hero__earn-split strong { color: #5A2E00; }
.ref-hero__earn-split i { margin-right: 4px; }

/* tier */
.ref-hero__tier {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.ref-tier-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ref-tier-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 15px; color: #fff;
  padding: 5px 14px; border-radius: 999px;
}
.ref-tier-badge.tier-none      { background: linear-gradient(135deg, #B0B6BF, #6B7280); }
.ref-tier-badge.tier-dong      { background: linear-gradient(135deg, #C97B3C, #A35A22); }
.ref-tier-badge.tier-bac       { background: linear-gradient(135deg, #B8BFC8, #8A929C); }
.ref-tier-badge.tier-vang      { background: linear-gradient(135deg, #F5B301, #D98E00); }
.ref-tier-badge.tier-bach_kim  { background: linear-gradient(135deg, #5EEAD4, #14B8A6); }
.ref-tier-badge.tier-kim_cuong { background: linear-gradient(135deg, #A5B4FC, #6366F1); }
.ref-tier-rate { font-size: 12.5px; color: #6B3A00; }
.ref-tier-rate strong { font-size: 15px; font-weight: 800; color: #5A2E00; }
.ref-tier-top .tip-dot { margin-left: auto; }
.ref-tier-bar {
  height: 9px; border-radius: 999px;
  background: rgba(120, 53, 15, 0.16); overflow: hidden; margin-bottom: 8px;
}
.ref-tier-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #B45309, #5A2E00); }
.ref-tier-note { font-size: 12.5px; color: #6B3A00; line-height: 1.45; }
.ref-tier-note strong { color: #5A2E00; }

/* link box */
.ref-hero__code-box {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 12px;
  padding: 8px 8px 8px 14px;
  box-shadow: 0 6px 18px rgba(120, 53, 15, 0.18);
  margin-bottom: 12px;
}
.ref-hero__code-box > i { color: var(--primary); font-size: 15px; flex-shrink: 0; }
.ref-hero__code-box input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.ref-hero__copy {
  flex-shrink: 0; border: none; cursor: pointer;
  background: var(--primary); color: #fff;
  font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter 0.15s, transform 0.15s;
}
.ref-hero__copy:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* channel buttons */
.ref-hero__share {
  position: relative;
  display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px;
}
.ref-chan {
  flex: 1; min-width: 120px;
  border: none; cursor: pointer; color: #fff;
  font-weight: 700; font-size: 13.5px;
  padding: 11px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter 0.15s, transform 0.15s;
}
.ref-chan:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ref-chan--zalo { background: #0068FF; }
.ref-chan--mess { background: #0084FF; }
.ref-chan--fb   { background: var(--facebook, #1877F2); }
.ref-chan--qr   { background: #5A2E00; }

.ref-hero__chip {
  position: relative;
  font-size: 13px; color: #5A2E00; font-weight: 600;
}
.ref-hero__chip strong { letter-spacing: 1px; }

/* ---- Stats ---- */
/* Desktop: 3 separate cards. Mobile: merged into one card (see media query). */
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.ref-stat {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 16px;
}
.ref-stat__icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: var(--accent-light); color: var(--accent);
}
.ref-stat__icon.ok { background: var(--success-light); color: var(--success); }
.ref-stat__icon.wait { background: #FEF3C7; color: var(--warning); }
.ref-stat__value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.ref-stat__label { font-size: 13px; color: var(--text-muted); }

/* ---- Cards (friends + history) ---- */
.ref-list-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px;
}
.ref-list-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.ref-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); }
.ref-empty i { font-size: 32px; color: var(--border-strong); margin-bottom: 12px; }
.ref-empty p { font-size: 14px; max-width: 360px; margin: 0 auto; line-height: 1.6; }

/* friends list */
.ref-list { display: flex; flex-direction: column; }
.ref-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid rgba(240, 224, 214, 0.5);
}
.ref-row:last-child { border-bottom: none; }
.ref-row__avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, #FFCB45, #FFB800);
  color: #fff; font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(238, 77, 45, 0.1);
  border: 2px solid #fff;
  outline: 1px solid var(--border);
}
.ref-row__avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.ref-row__info { flex: 1; min-width: 0; }
.ref-row__name {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-row__date { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.ref-row__earned { flex-shrink: 0; text-align: right; min-width: 86px; }
.ref-row__earned .amt { display: block; font-size: 14px; font-weight: 800; color: var(--success); }
.ref-row__earned .cap { font-size: 11px; color: var(--text-muted); }
.ref-row__earned .cap.muted { color: var(--text-light); }

/* journey badges */
.ref-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ref-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}
.ref-badge.is-earning    { background: #E0F2FE; color: #0284C7; }   /* blue – generating commission */
.ref-badge.is-bought     { background: var(--success-light); color: var(--success); } /* green – first order */
.ref-badge.is-registered { background: #F3F4F6; color: var(--text-muted); } /* gray – just signed up */
.ref-badge.is-expired    { background: #FEE2E2; color: var(--error); }

/* commission history */
.ref-history { display: flex; flex-direction: column; }
.ref-hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.ref-hist-row:last-child { border-bottom: none; }
.ref-hist__date { color: var(--text-muted); width: 46px; flex-shrink: 0; }
.ref-hist__amt { font-weight: 800; color: var(--success); width: 78px; flex-shrink: 0; }
.ref-hist__desc { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-hist__status { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ref-hist__status.ok { background: var(--success-light); color: var(--success); }
.ref-hist__status.wait { background: #FEF3C7; color: #B45309; }
.ref-hist__status.cancel { background: #FEE2E2; color: #B91C1C; }
/* Đơn đã hủy: không còn là khoản "+" nên làm mờ số tiền cho khỏi hiểu nhầm. */
.ref-hist-row:has(.ref-hist__status.cancel) .ref-hist__amt { color: var(--text-muted); text-decoration: line-through; }

/* pager */
.ref-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.ref-pager__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 8px 14px; border-radius: 9px;
  text-decoration: none; transition: filter 0.15s;
}
.ref-pager__btn:hover { filter: brightness(0.97); }
.ref-pager__btn.is-disabled { color: var(--text-light); background: var(--bg); pointer-events: none; cursor: default; }
.ref-pager__info { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.ref-note {
  margin-top: 4px; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.55;
}
.ref-note i { color: var(--accent); margin-top: 2px; }
.ref-note strong { color: var(--text); }

/* ---- QR modal ---- */
.ref-qr-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.ref-qr-backdrop.show { display: flex; }
.ref-qr-card {
  position: relative; background: #fff; border-radius: var(--radius-xl);
  padding: 28px 28px 24px; text-align: center; max-width: 320px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.ref-qr-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: none; cursor: pointer;
  background: var(--bg); border-radius: 50%; color: var(--text-muted);
}
.ref-qr-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.ref-qr-img { display: grid; place-items: center; min-height: 220px; }
.ref-qr-img img { border-radius: 12px; }
.ref-qr-code { font-weight: 800; letter-spacing: 2px; color: var(--primary); margin: 12px 0 16px; }

/* ---- Guest variant ---- */
.ref-hero--guest { padding: 34px 30px; }
.ref-guest-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.ref-guest-step { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; }
.ref-guest-step__icon {
  width: 50px; height: 50px; margin: 0 auto 12px;
  background: linear-gradient(135deg, #FFE082, #FFC53D);
  border-radius: 14px; display: grid; place-items: center; color: #B45309; font-size: 21px;
}
.ref-guest-step h4 { font-size: 15px; font-weight: 700; color: #5A2E00; margin-bottom: 6px; }
.ref-guest-step p { font-size: 13px; color: #7A4A12; line-height: 1.5; }
.ref-guest-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ref-guest-note { font-size: 13px; color: #7A4A12; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .ref-list-card {
    padding: 18px;
  }
  .ref-page-title { font-size: 22px; }
  .ref-hero { padding: 22px 18px; }
  .ref-hero__grid { grid-template-columns: 1fr; gap: 16px; }
  .ref-hero__earn-value { font-size: 34px; }
  .ref-hero__code-box { flex-wrap: wrap; gap: 8px; }
  .ref-hero__copy { width: 100%; justify-content: center; padding: 9px 16px; font-size: 14px; }
  .ref-chan { min-width: 0; flex-basis: calc(50% - 5px); }
  /* Merge the three into one card with horizontal dividers. */
  .ref-stats {
    grid-template-columns: 1fr; gap: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  .ref-stat {
    justify-content: flex-start; text-align: left; padding: 14px 16px;
    background: transparent; border: 0; border-radius: 0;
  }
  .ref-stat + .ref-stat { border-top: 1px solid var(--border); }
  .ref-stat__icon { margin: 0; }
  .ref-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    align-items: center;
    padding: 16px 4px;
  }
  .ref-row__avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .ref-row__info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .ref-row__name {
    font-size: 14.5px;
    white-space: normal;
    word-break: break-word;
    text-overflow: clip;
    overflow: visible;
  }
  .ref-row__date {
    font-size: 11.5px;
  }
  .ref-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .ref-row__earned {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
    min-width: 76px;
  }
  .ref-hist__desc { white-space: normal; }
  .ref-guest-steps { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .ref-row {
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    align-items: start;
    padding: 12px 0;
  }
  .ref-row__avatar {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 2px;
  }
  .ref-row__info {
    grid-column: 2;
    grid-row: 1;
  }
  .ref-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .ref-row__earned {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    min-width: 0;
    align-self: start;
    margin-top: 4px;
  }
  .ref-row__earned .amt {
    display: inline;
    font-size: 13.5px;
    font-weight: 700;
  }
  .ref-row__earned .cap {
    display: inline;
    font-size: 12px;
    margin-left: 4px;
  }
}