/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  color: #899bbd;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0;
}

.dark-style .profile .profile-card h2,
.dark-style .pagetitle h1 {
  color: var(--bs-heading-color);
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  list-style: none;
  gap: 10px
}

.pagination li a {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  position: relative;
  display: flex;
  border-radius: 3px;
  background: rgba(34, 48, 62, 0.06);
  justify-content: center;
  align-items: center;
  color: #333;
}

.pagination li a.disabled.prev,
.pagination li a.disabled.next {
  display: none;
}

.pagination li a.paginate_active {
  border-color: #696cff;
  background-color: #696cff;
  color: var(--bs-white);
}

.pagination .paginate_button span {
  display: none;
}

/*===========affiliate==============*/
/* Card container */
.u-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow)
}

/* Section title */
.u-sec-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text);
  margin-bottom: 16px
}

/* Red text */
.u-red {
  color: var(--red)
}

/* Stat number — dùng chung cho các số liệu lớn */
.u-stat-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 2px
}

.u-stat-label {
  font-size: 12px;
  color: var(--gray);
  font-weight: 500;
  margin-bottom: 8px
}

/* Link underline red */
.u-link-red {
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--trans)
}

.u-link-red:hover {
  gap: 7px;
  color: var(--red-d)
}

/* Badge pill */
.u-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}

.u-badge--green {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

.u-badge--orange {
  background: rgba(217, 119, 6, .1);
  color: var(--orange)
}

.u-badge--gray {
  background: #f3f4f6;
  color: var(--gray)
}

/* Icon circle */
.u-ico-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px
}

.u-ico-circle--red {
  background: rgba(153, 3, 3, .1);
  color: var(--red)
}

.u-ico-circle--light {
  background: rgba(153, 3, 3, .08);
  color: var(--red)
}

/* Btn shared */
.u-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--trans);
  white-space: nowrap
}

.u-btn--primary {
  background: var(--red);
  color: var(--bs-white);
  border: none;
  padding: 10px 22px
}

.u-btn--primary:hover {
  background: var(--red-d);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(153, 3, 3, .3)
}

.u-btn--outline {
  background: var(--bs-white);
  color: var(--text);
  border: 1.5px solid rgba(255, 255, 255, .5);
  padding: 10px 20px
}

.u-btn--outline:hover {
  background: rgba(255, 255, 255, .15);
  color: var(--bs-white)
}

.u-btn--sm {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 7px
}

.u-btn--filter {
  background: var(--red);
  color: var(--bs-white);
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--trans)
}

.u-btn--filter:hover {
  background: var(--red-d)
}

.u-btn--excel {
  background: var(--bs-white);
  border: 1.5px solid var(--border);
  color: var(--gray);
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--trans)
}

.u-btn--excel:hover {
  border-color: var(--green);
  color: var(--green)
}

/* Select filter */
.u-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bs-white);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--trans)
}

.u-select:focus,
.u-select:hover {
  border-color: var(--red)
}

/* ═══════════════════════════════════════════
3. HERO BANNER
═══════════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #6b0000 0%, var(--red) 40%, #c0392b 100%);
  position: relative;
  overflow: hidden;
  padding: 32px 0;
  margin-bottom: 10px
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--bs-white);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 14px
}

.hero h1 {
  font-size: 32px;
  font-weight: 900;
  color: var(--bs-white);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.5px;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .2)
}

.hero-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 22px;
  font-weight: 400
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

/* Network SVG decoration */
.hero-network {
  position: absolute;
  right: 280px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .9;
  pointer-events: none
}

.net-circle {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.net-circle .mf-logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--bs-white)
}

.net-node {
  position: absolute;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .15);
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .8);
  font-size: 14px
}

/* 2% card */
.hero-card {
  background: var(--bs-white);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 220px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2)
}

.hero-card .pct {
  font-size: 36px;
  font-weight: 900;
  color: var(--red);
  line-height: 1
}

.hero-card .pct-label {
  font-size: 13px;
  color: var(--text)
}

.hero-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--gray)
}

.hero-card-row i {
  width: 18px;
  text-align: center;
  color: var(--gray)
}

/* ═══════════════════════════════════════════
4. STATS BAR
═══════════════════════════════════════════ */
.stats-bar {
  padding: 0
}

.stat-cell .box_icon {
  width: 30px;
  height: 45px;
  min-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center
}

.stat-cell .icon {
  font-size: 26px;
  color: var(--red);
}

.link-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 8px;
  word-break: break-all;
}

.btn-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--red);
  background: var(--bs-white);
  color: var(--red);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--trans);
}

.btn-copy:hover {
  background-color: var(--red);
  color: var(--bs-white);
}

/* ═══════════════════════════════════════════
5. MAIN CONTENT GRID
═══════════════════════════════════════════ */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 18px;
  padding: 22px 0
}

/* ─── Cách hoạt động ─── */
.step-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative
}

.step-row+.step-row {
  margin-top: 18px
}

.step-num {
  width: 28px;
  height: 28px;
  background: var(--red);
  color: var(--bs-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.step-ico {
  width: 48px;
  height: 48px;
  background: var(--red-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--red);
  flex-shrink: 0
}

.step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px
}

.step-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.55
}

.step-arrow {
  color: #d1d5db;
  font-size: 16px;
  margin: 0 4px;
  align-self: center;
  flex-shrink: 0
}

/* ─── Cơ chế thu nhập ─── */
.income-card {
  background: var(--red);
  padding: 20px 14px;
  color: var(--bs-white)
}

.income-card .pct {
  font-size: 52px;
  font-weight: 900;
  line-height: 1
}

.income-card .pct-sub {
  font-size: 14px;
  font-weight: 700;
  opacity: .9
}

.income-tag {
  font-size: 12px;
  background: rgba(255, 255, 255, .2);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px
}

.income-example {
  border-radius: 10px;
  padding-left: 0;
}

.eg-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0
}

.eg-row:last-child {
  border: none
}

.eg-label {
  color: var(--gray)
}

.eg-val {
  font-weight: 700;
  color: var(--text)
}

.income-result {
  background: rgba(153, 3, 3, .06);
  border: 1px solid rgba(153, 3, 3, .15);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px
}

.ir-label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px
}

.ir-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--red)
}

.ir-note {
  font-size: 11px;
  color: var(--red);
  margin-top: 3px
}

.check-list {
  margin-top: 10px
}

.check-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--bs-white);
  margin-bottom: 6px
}

/* ─── Thu nhập chart ─── */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px
}

.chart-total {
  font-size: 13px;
  color: var(--gray);
  margin-top: 8px
}

.chart-total strong {
  color: var(--text)
}

/* ═══════════════════════════════════════════
6. BOTTOM GRID
═══════════════════════════════════════════ */
.bottom-grid {
  display: grid;
  grid-template-columns: 280px 1fr 240px;
  gap: 18px;
  padding-bottom: 22px
}

/* ─── Network tree ─── */
.net-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.tree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0
}

.tree-root {
  background: var(--red);
  color: var(--bs-white);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  min-width: 90px
}

.tree-root small {
  display: block;
  font-size: 11px;
  opacity: .85;
  font-weight: 400
}

.tree-connector {
  width: 1px;
  height: 20px;
  background: #d1d5db
}

.tree-h-line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%
}

.tree-h-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: #d1d5db
}

.tree-level {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  width: 100%;
  margin-top: 0
}

.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer
}

.tree-node-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.tree-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--gray)
}

.tree-avatar.active {
  border-color: var(--green)
}

.tree-avatar.inactive {
  border-color: var(--orange)
}

.tree-avatar.off {
  border-color: #e5e7eb;
  opacity: .6
}

.tree-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center
}

.tree-txn {
  font-size: 10.5px;
  color: var(--gray);
  text-align: center
}

.tree-vline {
  width: 1px;
  height: 12px;
  background: #d1d5db
}

.net-legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap
}

.leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray)
}

.leg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.leg-dot--green {
  background: var(--green)
}

.leg-dot--orange {
  background: var(--orange)
}

.leg-dot--gray {
  background: #d1d5db
}

.tree-add {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--trans)
}

.tree-add:hover {
  border-color: var(--red);
  color: var(--red)
}

/* ─── Giao dịch phát sinh ─── */
.txn-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.txn-table {
  width: 100%;
  border-collapse: collapse
}

.txn-table thead th {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gray);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  background: #fafafa
}

.txn-table thead th:first-child {
  width: 32px;
  padding-left: 14px
}

.txn-table tbody tr {
  border-bottom: 1px solid #f5f5f5;
  transition: background var(--trans)
}

.txn-table tbody tr:last-child {
  border: none
}

.txn-table tbody tr:hover {
  background: #fef8f8
}

.txn-table tbody td {
  padding: 10px 12px;
  font-size: 12.5px;
  vertical-align: middle
}

.txn-table tbody td:first-child {
  padding-left: 14px;
  color: var(--gray);
  font-size: 12px
}

.td-sale {
  display: flex;
  align-items: center;
  gap: 7px
}

.td-sale-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gray);
  flex-shrink: 0
}

.td-price {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap
}

.td-price-red {
  font-weight: 800;
  color: var(--red);
  white-space: nowrap
}

.td-date {
  color: var(--gray);
  font-size: 12px;
  white-space: nowrap
}

/* Pagination */
.pgn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  justify-content: center
}

.pg {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bs-white);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--trans)
}

.pg:hover {
  border-color: var(--red);
  color: var(--red)
}

.pg.a {
  background: var(--red);
  border-color: var(--red);
  color: var(--bs-white)
}

.pg-arr {
  padding: 0 8px
}

/* ─── Right sidebar ─── */
.top-aff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5
}

.top-aff-item:last-child {
  border: none
}

.rank-num {
  width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0
}

.rank-1 {
  color: var(--gold)
}

.rank-2 {
  color: var(--silver)
}

.rank-3 {
  color: var(--bronze)
}

.aff-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--gray);
  flex-shrink: 0;
  overflow: hidden
}

.aff-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px
}

.aff-income {
  font-size: 12px;
  font-weight: 700;
  color: var(--red)
}

.support-box {
  background: var(--red);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  color: var(--bs-white)
}

.sup-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px
}

.sup-desc {
  font-size: 11.5px;
  opacity: .85;
  margin-bottom: 12px;
  line-height: 1.5
}

.sup-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sup-btn {
  flex: 1;
  background: var(--bs-white);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 9px 8px;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--trans)
}

.sup-btn:hover {
  background: rgba(255, 255, 255, .25);
  color: var(--bs-white);
}

.sup-btn i {
  display: block;
  font-size: 24px;
  margin-bottom: 4px
}

/* ═══════════════════════════════════════════
7. FOOTER
═══════════════════════════════════════════ */
.site-footer {
  background: var(--bs-white);
  border-top: 1px solid var(--border);
  padding: 14px 0;
  text-align: center
}

.site-footer p {
  font-size: 12px;
  color: var(--gray);
  margin: 0
}

.site-footer a {
  color: var(--gray);
  text-decoration: none;
  transition: color var(--trans)
}

.site-footer a:hover {
  color: var(--red)
}

/* ═══════════════════════════════════════════
8. RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1199px) {
  .bottom-grid {
    grid-template-columns: 240px 1fr 220px
  }

  .main-grid {
    grid-template-columns: 1fr 1fr
  }

  .main-grid>*:last-child {
    grid-column: 1/-1
  }
}

@media(max-width:991px) {
  .main-grid {
    grid-template-columns: 1fr
  }

  .bottom-grid {
    grid-template-columns: 1fr
  }

  .hero h1 {
    font-size: 24px
  }

  .hero-card {
    display: none
  }

  .hero-network {
    display: none
  }

  .stat-cell {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 18px
  }
}

@media(max-width:767px) {
  .hero {
    padding: 24px 0
  }

  .hero h1 {
    font-size: 20px
  }

  .txn-table {
    font-size: 11.5px
  }

  .txn-filters {
    gap: 6px
  }

  .pgn {
    gap: 3px
  }
}

@media(max-width:575px) {
  .hero-actions {
    flex-direction: column;
    gap: 8px
  }

  .u-btn--primary,
  .u-btn--outline {
    justify-content: center
  }
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.anim-1 {
  animation: fadeUp .4s ease .05s both
}

.anim-2 {
  animation: fadeUp .4s ease .10s both
}

.anim-3 {
  animation: fadeUp .4s ease .15s both
}

.anim-4 {
  animation: fadeUp .4s ease .20s both
}

/* scroll reveal */
.sr {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease
}

.sr.in {
  opacity: 1;
  transform: translateY(0)
}

/*===========end affiliate==============*/
/* Referral link card premium layout */
.u-referral-card {
  position: relative;
}

.u-referral-card .flex-grow-1 {
  min-width: 0;
  padding-right: 60px;
}

.u-referral-card .u-ref-label {
  font-size: 11px;
}

.u-referral-card .u-ref-badge {
  background-color: var(--red);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.u-referral-card .u-ref-link-val {
  background: #f9fafb;
  font-family: monospace;
  font-size: 11px;
}

.u-btn-copy-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 46px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0;
  border: 2px solid var(--red);
  color: var(--red);
  background: var(--bs-white);
  cursor: pointer;
  transition: all var(--trans);
}

.u-btn-copy-icon:hover {
  background-color: var(--red);
  color: var(--bs-white);
}

.wallet-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(240, 245, 241, 0.85) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(226 226 226 / 80%) !important;
  box-shadow: 0 8px 32px 0 rgba(46, 204, 113, 0.08);
  border-radius: 16px;
  margin-bottom: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-card:hover {
  box-shadow: 0 12px 40px 0 rgba(46, 204, 113, 0.12);
  transform: translateY(-2px);
}

.wallet-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(46, 204, 113, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-title {
  font-size: 18px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 2px 0;
}

.wallet-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.wallet-stat-subcell {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(229, 231, 235, 0.5);
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subcell-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.subcell-val {
  font-size: 16px;
  font-weight: 800;
}

.text-main {
  color: #990303 !important;
}

.u-btn--withdraw {
  background: linear-gradient(135deg, #6f0000 0%, #9b0505 100%) !important;
  color: var(--bs-white)fff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 0.3s;
}

.u-btn--withdraw:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3);
  background: linear-gradient(135deg, #27ae60 0%, #219653 100%) !important;
}

/* Glassmorphism Modal */
.glass-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.glass-modal-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.glass-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close-btn:hover {
  color: #1f2937;
}

.glass-modal-body {
  padding: 24px;
}

.wallet-balance-summary {
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.15);
}

.input-group-custom {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: none;
}

.form-control-custom {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: rgba(255, 255, 255, 0.8);
  outline: none;
  font-size: 14px;
  transition: all 0.2s;
}

.form-control-custom:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
  background: var(--bs-white);
}

.anim-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (min-width: 768px) {
  .text-end-md {
    text-align: right !important;
  }
}

/* ================================================================
   PROFILE DASHBOARD 2026 — New App-Shell Layout
   NOTE: "Be Vietnam Pro" font must be loaded via the global layout
   template (<link> in header.tpl or global.css @import).
   Conflicting Bootstrap/legacy classes scoped under .app-layout.
================================================================ */
/* =============================================
   DESIGN TOKENS (extends global)
============================================= */
:root {
  --mf-red: #C62828;
  --mf-red-light: #FFEBEE;
  --mf-navy: #1a1f3d;
  --mf-navy-2: #252a4a;
  --mf-purple: #696cff;
  --mf-purple-bg: #f0f0ff;
  --mf-sidebar-w: 200px;
  --mf-header-h: 60px;
  --mf-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   LAYOUT SHELL
============================================= */
.app-layout {
  display: grid;
  grid-template-columns: var(--mf-sidebar-w) 1fr;
  grid-template-rows: var(--mf-header-h) 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

/* =============================================
   HEADER
============================================= */
.app-header {
  grid-area: header;
  background: var(--bs-white);
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
  min-width: 130px;
}

.logo-top {
  font-size: 18px;
  font-weight: 800;
  color: var(--mf-navy);
  letter-spacing: -0.5px;
}

.logo-top span {
  color: var(--mf-red);
}

.logo-sub {
  font-size: 9px;
  color: #999;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.header-search {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bs-white);
  transition: var(--mf-transition);
}

.header-search:focus-within {
  border-color: var(--mf-red);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.08);
}

.search-cat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: #444;
  border-right: 1px solid #e0e0e0;
  height: 36px;
  cursor: pointer;
  white-space: nowrap;
}

.search-cat svg {
  width: 10px;
  height: 10px;
}

.header-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 12.5px;
  color: #555;
  background: transparent;
}

.header-search input::placeholder {
  color: #bbb;
}

.search-btn {
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mf-red);
  color: var(--bs-white);
  cursor: pointer;
  flex-shrink: 0;
}

.search-btn svg {
  width: 16px;
  height: 16px;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f9;
  cursor: pointer;
  transition: var(--mf-transition);
}

.icon-btn:hover {
  background: #eee;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  color: #555;
}

/* Notification badge — scoped to avoid Bootstrap badge conflict */
.app-layout .icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--mf-red);
  color: var(--bs-white);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--bs-white);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 24px;
  cursor: pointer;
  transition: var(--mf-transition);
}

.user-chip:hover {
  background: #f5f5f9;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bs-white);
  font-size: 14px;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
}

.user-role {
  font-size: 10px;
  color: var(--mf-purple);
  font-weight: 600;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: #555;
  border-radius: 2px;
  transition: var(--mf-transition);
}

/* =============================================
   SIDEBAR
============================================= */
.app-sidebar {
  grid-area: sidebar;
  background: var(--bs-white);
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: var(--mf-header-h);
  height: calc(100vh - var(--mf-header-h));
}

.nav-section {
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 15px;
  font-size: 12.5px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: var(--mf-transition);
  border-left: 3px solid transparent;
}

.dropdown-notifications{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.nav-item:hover {
  background: #fafafa;
  color: #222;
}

.nav-item.active {
  color: var(--mf-red);
  background: var(--mf-red-light);
  border-left-color: var(--mf-red);
  font-weight: 600;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-item span {
  flex: 1;
}

.nav-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 16px;
}

.sidebar-support {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid #eee;
}

.support-card {
  background: #fff5f5;
  border: 1px solid #fdd;
  border-radius: 10px;
  padding: 12px;
}

.support-hotline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.support-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mf-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-icon svg {
  width: 16px;
  height: 16px;
  color: var(--bs-white);
}

.support-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mf-red);
}

.support-number {
  font-size: 11px;
  color: #555;
}

.support-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--mf-transition);
  border: 1px solid transparent;
}

.support-btn.zalo {
  background: #e8f4fd;
  color: #0068ff;
  border-color: #c2dcf8;
}

.support-btn.request {
  background: var(--bs-white);
  color: #555;
  border-color: #e0e0e0;
}

.support-btn:hover {
  filter: brightness(0.95);
}

.support-btn svg {
  width: 14px;
  height: 14px;
}

/* =============================================
   MAIN CONTENT
============================================= */
.app-main {
  grid-area: main;
  overflow: auto;
  display: flex;
  gap: 0;
}

.content-area {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

/* =============================================
   PAGE HEADER
============================================= */
.page-header {
  margin-bottom: 16px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #1a1f3d;
  margin-bottom: 4px;
}

.page-title svg {
  width: 20px;
  height: 20px;
  color: #bbb;
  cursor: pointer;
}

.page-title svg:hover {
  color: #f59e0b;
}

.page-sub {
  font-size: 12px;
  color: #888;
}

/* =============================================
   TABS
============================================= */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition: var(--mf-transition);
}

.tab:hover {
  color: #555;
}

.tab.active {
  color: var(--mf-red);
  border-bottom-color: var(--mf-red);
  font-weight: 600;
}

/* =============================================
   STAT CARDS ROW
============================================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bs-white);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: var(--mf-transition);
}

.stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 18px;
  height: 18px;
}

.si-purple {
  background: #ede9fe;
  color: #7c3aed;
}

.si-green {
  background: #dcfce7;
  color: #16a34a;
}

.si-orange {
  background: #fff7ed;
  color: #ea580c;
}

.si-blue {
  background: #eff6ff;
  color: #2563eb;
}

.si-star {
  background: #fefce8;
  color: #ca8a04;
}

.stat-body {
  flex: 1;
  min-width: 0;
}

.stat-label {
  font-size: 10.5px;
  color: #888;
  margin-bottom: 3px;
}

.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: #1a1f3d;
  line-height: 1.1;
}

.stat-meta {
  font-size: 10px;
  color: #aaa;
  margin-top: 3px;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
}

.stat-change.up {
  color: #16a34a;
}

.stat-change.neutral {
  color: #888;
}

/* =============================================
   GRID 3-COL (chart / donut / todo)
============================================= */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* =============================================
   CARD BASE — scoped under .app-layout to avoid
   Bootstrap .card conflict
============================================= */
.app-layout .card {
  background: var(--bs-white);
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.app-layout .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  background: transparent;
  border-bottom: none;
}

.app-layout .card-body {
  padding: 14px 16px;
}

.app-layout .card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1f3d;
  margin-bottom: 0;
}

.app-layout .card-link {
  font-size: 11px;
  color: var(--mf-red);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.app-layout .card-link:hover {
  text-decoration: underline;
}

/* =============================================
   BAR CHART (SVG)
============================================= */
.chart-wrap {
  padding: 10px 16px 14px;
  position: relative;
}

.chart-select {
  font-size: 11px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 3px 8px;
  color: #555;
  background: var(--bs-white);
  cursor: pointer;
}

.chart-svg {
  width: 100%;
  display: block;
}

/* =============================================
   DONUT CHART
============================================= */
.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px 16px;
}

.donut-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-pct {
  font-size: 20px;
  font-weight: 800;
  color: #1a1f3d;
}

.donut-lbl {
  font-size: 9px;
  color: #888;
}

.donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
}

.legend-left {
  display: flex;
  align-items: center;
  color: #555;
}

.legend-val {
  font-weight: 600;
  color: #333;
}

/* =============================================
   TODO / VIỆC CẦN LÀM
============================================= */
.todo-list {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}

.todo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ti-orange {
  background: #fff7ed;
}

.ti-red {
  background: #fef2f2;
}

.ti-blue {
  background: #eff6ff;
}

.ti-gray {
  background: #f5f5f9;
}

.todo-icon svg {
  width: 14px;
  height: 14px;
}

.todo-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.todo-sub {
  font-size: 10.5px;
  color: #888;
}

.todo-footer {
  padding: 0 16px 14px;
  display: flex;
  justify-content: flex-end;
}

/* btn-link — scoped to avoid Bootstrap .btn-link conflict */
.app-layout .btn-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--mf-red);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.app-layout .btn-link:hover {
  text-decoration: underline;
  color: var(--mf-red);
}

/* =============================================
   NETWORK + ACTIVITY GRID
   Scoped: conflicts with existing .bottom-grid
============================================= */
.app-layout .bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}

/* =============================================
   NETWORK TREE
   Scoped: conflicts with existing tree classes
============================================= */
.network-tree {
  padding: 14px 16px;
  overflow-x: auto;
}

.app-layout .tree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 460px;
}

.app-layout .tree-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.app-layout .tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-layout .tree-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bs-white);
  font-size: 14px;
  border: 3px solid var(--bs-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  position: relative;
}

.app-layout .tree-avatar.root {
  width: 52px;
  height: 52px;
  border-color: var(--mf-red);
}

.app-layout .tree-name {
  font-size: 11px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.tree-id {
  font-size: 9.5px;
  color: #aaa;
  text-align: center;
}

.app-layout .tree-connector {
  width: 2px;
  height: 20px;
  background: #e0e0e0;
}

.tree-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
}

.tree-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tree-branch-line {
  display: flex;
  align-items: center;
  position: relative;
}

.tree-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background: var(--bs-white);
  margin: 0 6px;
}

.level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bs-white);
  font-size: 7px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-white);
}

.lb-green {
  background: #16a34a;
}

.lb-yellow {
  background: #f59e0b;
}

.lb-gray {
  background: #9e9e9e;
}

.more-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5f5f9;
  border: 2px dashed #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
}

.tree-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tree-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #666;
}

.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* =============================================
   ACTIVITY FEED
============================================= */
.activity-list {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f9;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-link {
  background: #eff6ff;
  color: #2563eb;
}

.ai-doc {
  background: #f0fdf4;
  color: #16a34a;
}

.ai-user {
  background: #fdf4ff;
  color: #9333ea;
}

.ai-money {
  background: #fff7ed;
  color: #ea580c;
}

.ai-login {
  background: #f5f5f9;
  color: #888;
}

.activity-icon svg {
  width: 14px;
  height: 14px;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 11.5px;
  color: #444;
  line-height: 1.4;
}

.activity-text strong {
  font-weight: 600;
  color: #222;
}

.activity-time {
  font-size: 10px;
  color: #bbb;
  margin-top: 2px;
}

/* =============================================
   PROFILE PANEL (right sidebar)
============================================= */
.profile-panel {
  width: 260px;
  flex-shrink: 0;
  padding: 16px 12px;
  overflow-y: auto;
  background: transparent;
}

/* Subtle gradient banner on top of profile card */
.profile-banner {
  height: 70px;
  background: linear-gradient(135deg, #ece9ff 0%, #f5f3ff 100%);
}

/* Circular container for share-icons (uses Bootstrap .bg-label-*) */
.share-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

/* Small icon square inside achievements list (uses Bootstrap .bg-label-*) */
.ach-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.profile-panel .profile-card {
  text-align: center;
  margin-bottom: 16px;
}

.profile-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
}

.profile-panel .profile-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--bs-white);
  overflow: hidden;
}

/* Always render the letter as a fallback. <img> sits on top via z-index. */
.profile-panel .profile-avatar::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--bs-white);
  letter-spacing: -1px;
  text-transform: uppercase;
  z-index: 0;
}

.profile-panel .profile-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bs-white);
  border: 1.5px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.camera-btn svg {
  width: 12px;
  height: 12px;
  color: #555;
}

.camera-btn i {
  font-size: 13px;
  color: #555;
  line-height: 1;
}

.profile-panel .profile-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1f3d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}

.verified {
  color: var(--mf-purple);
}

.profile-panel .profile-role {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--bs-white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.vip-badge svg {
  width: 12px;
  height: 12px;
}

.profile-code {
  font-size: 10.5px;
  color: #888;
  margin-bottom: 6px;
}

.profile-code strong {
  color: #444;
  font-weight: 600;
}

.profile-panel .profile-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 10px;
}

.profile-panel .profile-rating span {
  color: #555;
  font-size: 11px;
}

.btn-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border: 1.5px solid var(--mf-red);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mf-red);
  cursor: pointer;
  transition: var(--mf-transition);
  background: transparent;
}

.btn-profile:hover {
  background: var(--mf-red-light);
}

.btn-profile svg {
  width: 14px;
  height: 14px;
}

.panel-section {
  margin-bottom: 16px;
}

.panel-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-section-title svg {
  width: 14px;
  height: 14px;
  color: #bbb;
  cursor: pointer;
}

.ref-link-box {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.ref-link-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 10px;
  padding: 7px 8px;
  color: #888;
  background: transparent;
}

.copy-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f9;
  cursor: pointer;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.copy-btn svg {
  width: 14px;
  height: 14px;
  color: #888;
}

.copy-btn:hover {
  background: #ebebf0;
}

.qr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.qr-box {
  width: 96px;
  height: 96px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-white);
  flex-shrink: 0;
  padding: 6px;
}

.qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-meta {
  flex: 1;
}

.qr-hint {
  font-size: 10px;
  color: #888;
  line-height: 1.4;
  margin-bottom: 6px;
}

.btn-download-qr {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bs-white);
  background: #1a1f3d;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-block;
  transition: var(--mf-transition);
}

.btn-download-qr:hover {
  background: #252a4a;
}

.share-icons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.share-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.share-icon-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.si-zalo {
  background: #e8f4fd;
}

.si-fb {
  background: #e8eeff;
}

.si-msg {
  background: #fce8f8;
}

.si-copy-lnk {
  background: #f5f5f9;
}

.share-icon span {
  font-size: 9px;
  color: #888;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.achievement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ach-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.ach-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ach-icon svg {
  width: 12px;
  height: 12px;
}

.ai-deal {
  background: #eff6ff;
  color: #2563eb;
}

.ai-crm {
  background: #f0fdf4;
  color: #16a34a;
}

.ai-net {
  background: #ede9fe;
  color: #7c3aed;
}

.ai-view {
  background: #fff7ed;
  color: #ea580c;
}

.ai-guest {
  background: #fdf4ff;
  color: #9333ea;
}

.ach-val {
  font-size: 12px;
  font-weight: 700;
  color: #1a1f3d;
}

.ach-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--mf-red);
  cursor: pointer;
  text-align: right;
  margin-top: 4px;
}

/* =============================================
   UPGRADE BANNER
============================================= */
.upgrade-banner {
  background: linear-gradient(135deg, #1a1f3d 0%, #252a4a 100%);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.upgrade-banner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
}

.upgrade-crown {
  font-size: 32px;
  flex-shrink: 0;
}

.upgrade-text {
  flex: 1;
}

.upgrade-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-white);
  margin-bottom: 4px;
}

.upgrade-title span {
  color: #fbbf24;
}

.upgrade-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.upgrade-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  flex: 1;
}

.upgrade-feat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

.upgrade-feat svg {
  width: 13px;
  height: 13px;
  color: #4ade80;
  flex-shrink: 0;
}

.upgrade-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #C62828, #e53935);
  color: var(--bs-white);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--mf-transition);
  border: none;
}

.upgrade-cta:hover {
  box-shadow: 0 4px 16px rgba(198, 40, 40, 0.4);
  transform: translateY(-1px);
}

.upgrade-cta svg {
  width: 16px;
  height: 16px;
}

/* =============================================
   FOOTER
============================================= */
.app-footer {
  grid-area: footer;
  background: var(--bs-white);
  border-top: 1px solid #eee;
  padding: 12px 20px;
  font-size: 10.5px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-links {
  display: flex;
  gap: 12px;
}

.footer-links a {
  color: #888;
}

.footer-links a:hover {
  color: #555;
}

/* =============================================
   MOBILE SIDEBAR OVERLAY
============================================= */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}

/* =============================================
   CUSTOM SCROLLBAR
============================================= */
.app-layout ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.app-layout ::-webkit-scrollbar-track {
  background: transparent;
}

.app-layout ::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}

.app-layout ::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1.4fr 1fr;
  }

  .dashboard-grid>.app-layout .card:last-child {
    grid-column: 1 / -1;
  }

  .profile-panel {
    display: none;
  }
}

@media (max-width: 992px) {
  :root {
    --mf-sidebar-w: 0px;
  }

  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding-top: var(--mf-header-h);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.show {
    display: block;
  }

  .hamburger {
    display: flex;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .app-layout .bottom-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-features {
    display: none;
  }
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-area {
    padding: 14px;
  }

  .user-info {
    display: none;
  }

  .upgrade-banner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .upgrade-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr;
  }

  .header-search {
    display: none;
  }

  .tabs {
    gap: 0;
  }

  .tab {
    padding: 8px 12px;
    font-size: 11.5px;
  }
}

/*upgrade pro*/
:root {
  --primary-light: #fdf2f2;
  --text-dark: #222;
  --text-muted: #666;
  --border-color: #eaedf1;
}

/* --- Utilities --- */
.content_upgrade_pro .text-primary-red {
  color: var(--red) !important;
}

.content_upgrade_pro .bg-primary-red {
  background-color: var(--red) !important;
}

.content_upgrade_pro .btn-primary-red {
  background-color: var(--red);
  color: var(--bs-white);
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.content_upgrade_pro .btn-primary-red:hover {
  background-color: #7a0202;
  color: var(--bs-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(153, 3, 3, 0.2);
}

.content_upgrade_pro .btn-outline-red {
  border: 1px solid var(--red);
  color: var(--red);
  background: var(--bs-white);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
}

/* --- Hero Section --- */
.content_upgrade_pro .hero-section {
  padding: 60px 0;
  /*	background: radial-gradient(circle at right center, #fff0f0 0%, #fafbfc 50%);*/
  position: relative;
}

.content_upgrade_pro .badge-pro {
  background-color: var(--primary-light);
  color: var(--red);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 20px;
}

.content_upgrade_pro .hero-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--text)
}

/* Floating Animation for Image */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

.content_upgrade_pro .floating-img {
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(153, 3, 3, 0.15));
}

/* --- Form Card --- */
.content_upgrade_pro .form-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--primary-light);
}

.content_upgrade_pro .form-card h4 {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
  line-height: 1.4;
  font-size: 20px;
}

.content_upgrade_pro .check-list li {
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.content_upgrade_pro .check-list i {
  margin-right: 10px;
  font-size: 12px;
}

.content_upgrade_pro .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}

.content_upgrade_pro .form-control,
.form-select {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 8px;
  border-color: var(--border-color);
}

.content_upgrade_pro .form-control:focus,
.content_upgrade_pro .form-select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 0.2rem rgba(153, 3, 3, 0.1);
}

/* --- Features Section --- */
/*.content_upgrade_pro .features-section {margin-top: 60px;}*/
.content_upgrade_pro .feature-card {
  background: white;
  border-radius: 12px;
  padding: 25px 15px 15px;
  height: 100%;
  border: 1px solid var(--border-color);
  transition: all 0.3s;
}

.content_upgrade_pro .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  border-color: #f5c2c2;
}

.content_upgrade_pro .feature-icon,
.icon_stat {
  width: 50px;
  height: 50px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--red);
  margin: 0 auto 20px;
  padding: 12px;
}

.content_upgrade_pro .feature-icon svg {
  fill: var(--red);
}

.content_upgrade_pro .feature-title {
  color: var(--text);
  line-height: 1.5;
}

.content_upgrade_pro .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
}

.content_upgrade_pro .feature-list li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 12px;
}

.content_upgrade_pro .feature-list li:last-child {
  margin-bottom: 0;
}

.content_upgrade_pro .feature-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ccc;
}

/* --- Stats Section --- */
.content_upgrade_pro .stats-section {
  padding-bottom: 40px;
}

.content_upgrade_pro .stat-item {
  text-align: center;
}

.content_upgrade_pro .stat-item i {
  font-size: 24px;
  color: var(--red)
}

.content_upgrade_pro .stat-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 5px;
}

.content_upgrade_pro .stat-text {
  font-size: 13px;
  font-weight: 600;
}

.content_upgrade_pro .progress-box {
  background: var(--bs-white);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid var(--border-color);
}

.content_upgrade_pro .progress {
  height: 10px;
  border-radius: 10px;
  background-color: #eee;
}

.content_upgrade_pro .progress-bar {
  background-color: var(--red);
  border-radius: 10px;
}

/* --- Roadmap Section --- */
.content_upgrade_pro .roadmap-section {
  padding: 40px 0 30px;
  text-align: center;
}

.content_upgrade_pro .roadmap-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  z-index: 1;
}

.content_upgrade_pro .roadmap-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  border-top: 2px dashed #ccc;
  z-index: -1;
}

.content_upgrade_pro .roadmap-step {
  width: 30%;
  position: relative;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
  background: var(--bs-white)
}

.content_upgrade_pro .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--bs-white);
  margin: -40px auto 40px;
  z-index: 2;
  position: relative;
}

.content_upgrade_pro .step-1 .step-circle {
  background: var(--red);
  box-shadow: 0 0 0 5px white;
}

.content_upgrade_pro .step-2 .step-circle,
.content_upgrade_pro .step-3 .step-circle {
  background: #6c757d;
  box-shadow: 0 0 0 5px var(--bs-white);
}

.content_upgrade_pro .roadmap-card {
  text-align: left;
  display: flex;
  gap: 20px
}

.content_upgrade_pro .roadmap_icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #000000;
  padding: 12px;
  box-shadow: 0px 0px 16px #cbcbcb;
}

.content_upgrade_pro .roadmap_icon.active {
  background: var(--primary-light);
  color: var(--red);
}

/* --- FAQ Section --- */
.content_upgrade_pro .faq-section {
  padding: 40px 0;
}

.content_upgrade_pro .accordion-item {
  border: 1px solid var(--border-color);
  border-radius: 8px !important;
  margin-bottom: 15px;
  overflow: hidden;
}

.content_upgrade_pro .accordion-button {
  font-weight: 600;
  font-size: 14px;
  box-shadow: none !important;
  justify-content: space-between
}

.content_upgrade_pro .accordion-button:not(.collapsed) {
  background-color: var(--primary-light);
  color: var(--red);
}

.content_upgrade_pro .accordion-button::after {
  display: none
}

.content_upgrade_pro .accordion-button i {
  font-size: 20px
}

.content_upgrade_pro .accordion-button:not(.collapsed) i {
  transform: rotate(90deg);
}

.content_upgrade_pro .accordion_icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* --- CTA Footer --- */
.content_upgrade_pro .cta-section {
  padding: 50px 0;
}

.content_upgrade_pro .cta-box {
  background: linear-gradient(135deg, #fdf2f2 0%, #fae6e6 100%);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.content_upgrade_pro .cta-title {
  font-size: 22px;
  font-weight: 700;
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.4;
}

.content_upgrade_pro .content_left {
  max-width: 500px;
  padding-bottom: 60px;
}

.content_upgrade_pro .bg_content {
  background: url(/application/themes/images/bg_upgrade_pro.png);
  background-position: top right;
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.content_upgrade_pro .has_request {
  max-height: 650px;
}

@media screen and (max-width:1400px) {
  .content_upgrade_pro .bg_content:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffffcf;
  }
}

@media screen and (max-width:767px) {
  .content_upgrade_pro .roadmap-container {
    flex-wrap: wrap;
    gap: 40px;
  }

  .content_upgrade_pro .roadmap-step {
    width: 100%;
  }

  .content_upgrade_pro .content_left,
  .content_upgrade_pro .hero-section {
    padding-bottom: 30px;
  }

  .content_upgrade_pro .roadmap-section {
    padding-top: 20px;
  }

  .content_upgrade_pro .has_request {
    max-height: 350px;
  }
}

/*end upgrade pro*/
/*profile*/
.profile_info .nav-tabs .nav-item .nav-link.active {
  color: var(--red);
  border-bottom: 0;
  font-weight: 700;
}

.profile_info .nav-tabs:not(.nav-tabs-bordered) .nav-item .nav-link:not(.active) {
  background: inherit;
}

.profile_info .mf-header {
  background: var(--bs-white);
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.profile_info .mf-header .logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
}

.profile_info .mf-header .logo .my {
  color: #3a3f4a;
  font-weight: 600;
}

.profile_info .mf-header .logo .future {
  color: var(--mf-red);
}

.profile_info .mf-header .hicon {
  font-size: 21px;
  color: #3a3f4a;
  cursor: pointer;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}

.profile_info .mf-header .hicon:active {
  transform: scale(.9);
}

.profile_info .mf-header .bell-wrap {
  position: relative;
}

.profile_info .mf-header .badge-count {
  position: absolute;
  top: -7px;
  right: -8px;
  background: var(--mf-red);
  color: var(--bs-white);
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.profile_info .mf-header .avatar-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--mf-red);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.profile_info .mf-header .avatar-ring .dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  border: 1.5px solid var(--bs-white);
}

.profile_info .mf-header .avatar-ring small {
  font-size: 6px;
  color: var(--mf-red);
  font-weight: 700;
  line-height: 1;
}

/* ===== PROFILE CARD ===== */
.profile_info .mf-card {
  background: var(--bs-white);
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 24px;
  box-shadow: 0 2px 14px rgba(20, 30, 60, .05);
  animation: fadeInUp .5s ease both;
}

.profile_info .profile-top {
  display: flex;
  gap: 16px;
  align-items: center;
}

.profile_info .profile-avatar {
  position: relative;
  flex: 0 0 auto;
}

.profile_info .profile-avatar .ava {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-white);
}

.profile_info .profile-avatar .ava .logo-img {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.profile_info .profile-avatar .ava .logo-img .my {
  color: #3a3f4a;
}

.profile_info .profile-avatar .ava .logo-img .future {
  color: var(--mf-red);
}

.profile_info .profile-avatar .ava .logo-img small {
  display: block;
  font-size: 5px;
  color: #999;
  letter-spacing: .3px;
  font-weight: 500;
}

.profile_info .profile-avatar .cam {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bs-white);
  border: 1px solid #eef0f4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6473;
  cursor: pointer;
  transition: transform .2s ease;
}

.profile_info .profile-avatar .cam:active {
  transform: translateX(-50%) scale(.9);
}

.profile_info .profile-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.profile_info .profile-info .name {
  font-size: 19px;
  font-weight: 700;
  color: #222;
  margin: 0 0 6px;
}

.profile_info .profile-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.profile_info .badge-pro {
  background: #2563eb;
  color: var(--bs-white);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1;
}

.profile_info .profile-meta .org {
  font-size: 13px;
  color: #5a6473;
}

.profile_info .profile-meta .org::before {
  content: "•";
  margin-right: 7px;
  color: #c5cad3;
}

.profile_info .progress-label {
  font-size: 13px;
  color: #5a6473;
  margin-bottom: 6px;
}

.profile_info .progress-label b {
  color: var(--mf-red);
  font-weight: 700;
}

.profile_info .mf-progress {
  height: 12px;
  background: #eef0f4;
  border-radius: 10px;
  overflow: hidden;
}

.profile_info .mf-progress .bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 10px;
  transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.profile_info .btn-edit-profile {
  border: 1px solid #d9dde3;
  background: var(--bs-white);
  color: #3a4250;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--bs-transition, all .25s);
}

.profile_info .btn-edit-profile:hover {
  border-color: var(--mf-blue-light);
  color: var(--mf-blue-light);
}

.profile_info .btn-edit-profile i {
  color: var(--mf-blue-light);
}

/* ===== TABS ===== */
.profile_info .mf-tabs {
  display: flex;
  gap: 10px;
  margin: 0 14px 4px;
}

.profile_info .mf-tab {
  flex: 1;
  text-align: center;
  padding: 13px;
  border-radius: 12px;
  background: var(--bs-white);
  font-size: 14px;
  font-weight: 600;
  color: #8a93a0;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
  transition: var(--bs-transition, all .25s);
}

.profile_info .mf-tab.active {
  color: var(--mf-blue-light);
  background: var(--bs-white);
}

.profile_info .mf-tab:not(.active) {
  background: #eef0f4;
  box-shadow: none;
}

/* ===== SECTION ===== */
.profile_info .section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.profile_info .section-head .ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eef2ff;
  color: var(--mf-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.profile_info .section-head .ttl {
  font-size: 15px;
  font-weight: 700;
  color: #2a3340;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* generic field row */
.profile_info .field {
  padding: 12px 2px;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
}

.profile_info .field:last-child {
  border-bottom: none;
}

.profile_info .field .f-label {
  font-size: 12.5px;
  color: #9aa2ad;
  margin-bottom: 3px;
}

.profile_info .profile_info .field .f-value {
  font-size: 15px;
  font-weight: 600;
  color: #2a3340;
}

.profile_info .row-login {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.profile_info .row-login .li-ico {
  color: #aab1bc;
  font-size: 24px;
  margin-top: 12px;
}

.profile_info .row-login .lock {
  font-size: 12.5px;
  color: #9aa2ad;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  margin-top: 14px;
}

/* yellow referral box */
.profile_info .referral-box {
  background: var(--mf-yellow-bg);
  border: 1px solid var(--mf-yellow-border);
  border-radius: 12px;
  padding: 13px 14px;
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

.profile_info .referral-box .r-ico {
  color: #e8a33d;
  font-size: 24px;
  margin-top: 2px;
}

.profile_info .referral-box .f-label {
  color: #b07d2e;
}

.profile_info .referral-box .f-value {
  color: #3a2c12;
}

.profile_info .referral-box .sub {
  font-size: 12.5px;
  color: #9c7a3e;
  margin-top: 7px;
}

.profile_info .referral-box .change {
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* clickable personal rows show chevron */
.profile_info .field.clickable {
  cursor: pointer;
}

.profile_info .field.editing .chev {
  opacity: 0;
}

.profile_info .field.clickable .chev {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  font-size: 24px;
  transition: transform .25s ease;
}

.profile_info .field.clickable:hover .chev {
  color: var(--mf-blue-light);
}

.profile_info .field.editing .chev {
  transform: translateY(-50%) rotate(90deg);
  color: var(--mf-blue-light);
}

/* edit area animation */
.profile_info .edit-area {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, margin .3s ease;
}

.profile_info .field.editing .edit-area,
.profile_info .referral-box.editing .edit-area {
  max-height: 160px;
  opacity: 1;
  margin-top: 10px;
}

.profile_info .field.editing .f-value {
  display: none;
}

.profile_info .referral-box.editing .static-val {
  display: none;
}

.profile_info .edit-area .form-control,
.profile_info .edit-area .form-select {
  /*border:1.5px solid #e3e6ec;*/
  border-radius: 9px;
  font-size: 14px;
  padding: 9px 11px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.profile_info .edit-area .form-control:focus,
.profile_info .edit-area .form-select:focus {
  outline: none;
}

.profile_info .edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.profile_info .btn-ok {
  background: var(--red);
  color: var(--bs-white);
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
}

.profile_info .btn-ok:active {
  transform: scale(.96);
}

.profile_info .btn-cancel {
  background: #f1f2f5;
  color: #5a6473;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}

/* save button */
.profile_info .btn-save {
  margin-top: 24px;
  background: var(--mf-red);
  color: var(--bs-white);
  border: none;
  border-radius: 13px;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(150, 12, 38, .28);
  transition: transform .15s ease, box-shadow .2s ease;
}

.profile_info .btn-save:hover {
  box-shadow: 0 8px 24px rgba(150, 12, 38, .36);
}

.profile_info .btn-save:active {
  transform: scale(.985);
}

/* flash highlight after save */
@keyframes flashSaved {
  0% {
    background: rgba(37, 99, 235, .10);
  }

  100% {
    background: transparent;
  }
}

.profile_info .field.flash,
.referral-box.flash {
  animation: flashSaved 1s ease;
}

/* ===== BOTTOM NAV ===== */
.profile_info .mf-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 434px;
  background: var(--bs-white);
  border-top: 1px solid #eef0f4;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 9px 8px 12px;
  z-index: 60;
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .05);
}

.profile_info .mf-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #9aa2ad;
  font-size: 11px;
  cursor: pointer;
  flex: 1;
  transition: color .2s;
}

.profile_info .mf-nav-item i {
  font-size: 21px;
}

.profile_info .mf-nav-item.active {
  color: var(--mf-red);
}

.profile_info .mf-nav-item.center {
  position: relative;
}

.profile_info .mf-nav-center {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c41a3a, #7a0202);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-white);
  margin-top: -22px;
  box-shadow: 0 6px 16px rgba(150, 12, 38, .4);
  font-size: 14px;
  font-weight: 700;
  position: relative;
}

.profile_info .mf-nav-center::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 5px;
  height: 5px;
  background: #ffd66b;
  border-radius: 50%;
  box-shadow: 6px 6px 0 -1px #ffd66b, -3px 4px 0 -2px #ffd66b;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile_info .mf-card {
  animation: fadeInUp .5s ease both;
}

.profile_info .mf-card:nth-of-type(2) {
  animation-delay: .06s;
}

.profile_info .mf-card:nth-of-type(3) {
  animation-delay: .12s;
}

@media screen and (max-width:575px) {
  .nav-item {
    flex: 1 1 0;
  }

  .profile_info .row-login .lock {
    display: none
  }
}

/*=============== Trang ?mod=member&act=member: danh sách người dùng (đã tách từ inline trong member.tpl, scope dưới .page_member để không leak) - START ===============*/
.page_member {
  --red: #a80414;
  --red2: #c20b1d;
  --dark: #121826;
  --muted: #667085;
  --line: #e7eaf0;
  --soft: #f7f8fb;
  --green: #177a36;
  --green-bg: #dff5e5;
  --purple: #7c3aed;
  --purple-bg: #f1e8ff;
  --shadow: 0 18px 50px rgba(16, 24, 40, .08);
  --radius: 18px;
}

.page_member a {
  text-decoration: none;
  color: inherit;
}

.page_member .topbar {
  height: 72px;
  background: var(--bs-white);
  border-bottom: 1px solid #eef0f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.page_member .logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.page_member .logo-main {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #b20718;
}

.page_member .logo-sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .8px;
  text-align: center;
  margin-top: 1px;
  color: #555;
}

.page_member .nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 16px;
  font-weight: 600;
}

.page_member .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  background: #b20a1b;
  color: white;
  font-size: 11px;
  font-weight: 800;
  margin-right: 6px;
}

.page_member .pro {
  font-size: 9px;
  border-radius: 7px;
}

.page_member .chev {
  font-size: 12px;
  color: #555;
  margin-left: 2px;
}

.page_member .hero {
  background: radial-gradient(circle at 75% 10%, rgba(255, 255, 255, .15), transparent 34%), linear-gradient(135deg, #8d0010 0%, #a90618 45%, #c5162b 100%);
  color: white;
  padding: 34px 64px 36px;
  min-height: 164px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.page_member .crumb {
  font-size: 14px;
  font-weight: 500;
  opacity: .92;
  margin-bottom: 22px;
}

.page_member .crumb span {
  opacity: .72;
  margin: 0 8px;
}

.page_member .hero h1 {
  font-size: 31px;
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -.7px;
}

.page_member .hero p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 840px;
  color: rgba(255, 255, 255, .94);
  font-weight: 500;
}

.page_member .trust-card {
  background: rgba(255, 255, 255, .94);
  color: #1b2230;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 340px;
}

.page_member .shield {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff0f2;
  display: grid;
  place-items: center;
  color: #a80414;
}

.page_member .trust-card b {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.page_member .trust-card small {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.page_member .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bs-white);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .035);
}

.page_member .panel-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}

.page_member .head-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #b20718;
}

.page_member .panel-head h2 {
  font-size: 18px;
  color: #b20718;
  margin: 0 0 4px;
  font-weight: 800;
}

.page_member .panel-head p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.page_member table {
  width: 100%;
  border-collapse: collapse;
}

.page_member th {
  height: 38px;
  background: #fbfcfe;
  color: #475467;
  font-size: 13px;
  text-align: left;
  font-weight: 700;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.page_member td {
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

.page_member tr:last-child td {
  border-bottom: none;
}

.page_member .rank {
  width: 44px;
  text-align: center;
  font-weight: 700;
  color: #111827;
}

.page_member .usercell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page_member .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fbebed;
  display: grid;
  place-items: center;
  color: #b20718;
  flex: 0 0 auto;
}

.page_member .masked {
  font-weight: 800;
  letter-spacing: .8px;
}

.page_member .id {
  font-size: 12px;
  color: #667085;
  margin-top: 4px;
  font-weight: 500;
}

.page_member .badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--purple-bg);
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
}

.page_member .status {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.page_member .dotmenu {
  font-size: 20px;
  color: #344054;
  text-align: right;
  letter-spacing: 2px;
}

.page_member .side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page_member .box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bs-white);
  padding: 22px 22px 20px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .035);
}

.page_member .box-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff0f2;
  color: #b20718;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.page_member .box h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -.2px;
}

.page_member .box p {
  margin: 0 0 14px;
  color: #475467;
  line-height: 1.65;
  font-size: 14px;
  font-weight: 500;
}

.page_member .btn {
  height: 44px;
  border-radius: 9px;
  border: 1px solid #b20718;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  margin-top: 10px;
}

.page_member .btn.primary {
  background: linear-gradient(180deg, #b20718, #930010);
  color: white;
  box-shadow: 0 10px 22px rgba(178, 7, 24, .2);
}

.page_member .btn.outline {
  color: #b20718;
  background: var(--bs-white);
}

.page_member .note {
  font-size: 12px;
  color: #667085;
  margin-top: 14px;
}

.page_member .footer-note {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #475467;
  font-size: 13px;
  background: var(--bs-white);
}

.page_member .footer-note a {
  font-weight: 700;
  color: #344054;
}

.page_member .mobile-cards {
  display: none;
}

.page_member .tiny {
  font-size: 11px;
  color: #667085;
}

.page_member .dotmenu-container {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
}

.page_member .dropdown-menu {
  position: fixed;
  background: var(--bs-white)fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 9999;
  min-width: 140px;
  display: none;
  flex-direction: column;
  padding: 5px 0;
}

.page_member .dropdown-menu.show {
  display: flex;
}

.page_member .dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--dark);
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-weight: 600;
  font-family: Inter, sans-serif;
  transition: background 0.2s, color 0.2s;
}

.page_member .dropdown-item:hover {
  background: var(--soft);
  color: var(--red);
}

.page_member .mline {
  position: relative;
}

@media(max-width:1080px) {
  .page_member .topbar {
    padding: 0 22px;
  }

  .page_member .nav {
    gap: 16px;
    font-size: 14px;
  }

  .page_member .hero {
    padding: 30px 22px;
    flex-direction: column;
    align-items: flex-start;
  }

  .page_member .page {
    padding: 22px;
  }

  .page_member .grid {
    grid-template-columns: 1fr;
  }

  .page_member .trust-card {
    min-width: 0;
    width: 100%;
  }
}

@media(max-width:760px) {
  .page_member .topbar {
    height: auto;
    padding: 14px 18px;
    align-items: flex-start;
  }

  .page_member .logo-main {
    font-size: 27px;
  }

  .page_member .nav {
    display: none;
  }

  .page_member .hero h1 {
    font-size: 25px;
  }

  .page_member .hero p {
    font-size: 14px;
  }

  .page_member .page {
    padding: 16px;
  }

  .page_member .panel {
    border-radius: 15px;
  }

  .page_member table {
    display: none;
  }

  .page_member .mobile-cards {
    display: block;
    padding: 10px;
  }

  .page_member .mcard {
    display: flex;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
  }

  .page_member .mcard:last-child {
    border-bottom: 0;
  }

  .page_member .mmeta {
    flex: 1;
  }

  .page_member .mline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .page_member .masked {
    font-size: 14px;
  }

  .page_member .status,
  .page_member .badge {
    height: 24px;
    font-size: 11px;
    padding: 0 9px;
  }

  .page_member .side {
    gap: 12px;
  }

  .page_member .box {
    padding: 18px;
  }

  .page_member .footer-note {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }
}

/* Loading + empty states */
.page_member .panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 20px;
  color: #667085;
}

.page_member .panel-loading .spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--purple-bg);
  border-top-color: var(--purple);
  animation: page_member_spin 0.8s linear infinite;
}

.page_member .panel-loading p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #475467;
}

.page_member .panel-empty {
  padding: 48px 20px;
  text-align: center;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
}

@keyframes page_member_spin {
  to {
    transform: rotate(360deg);
  }
}

/*=============== Trang ?mod=member&act=member - END ===============*/
/*end profile*/

/* Premium Badge Gói Thành Viên */
.badge-package {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 50px;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  cursor: default;
  margin-top: 3px;
}

.badge-package:hover {
  transform: translateY(-1px);
}

.badge-package-free {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge-package-pro {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: var(--bs-white);
  border-color: #f59e0b;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.badge-package-vip {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%);
  color: var(--bs-white);
  border-color: #3b82f6;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.badge-package i {
  font-size: 13px;
}

/* =====================================================================
 * MBP — Hồ sơ & Hiệu suất Sale (tab Tổng quan / profile2)
 * CSS THUẦN, tự chứa, scope dưới .mbp. KHÔNG dùng class/biến framework (--bs-*).
 * Lưới cột/hàng dùng Bootstrap row/col-* ở .tpl; phần "nhìn" dùng class .mbp-*.
 * ===================================================================== */
.mbp {
  --b: #c62828;
  --bd: #950b25;
  --b50: #fdecee;
  --b100: #fad7dc;
  --pp: #7367f0;
  --pp50: #eeecfe;
  --gn: #28c76f;
  --gn50: #dcf6e8;
  --og: #ff9f43;
  --og50: #fff1e0;
  --bl: #00b8d9;
  --bl50: #d9f7fb;
  --gd: #ff9f1c;
  --gd50: #fff3df;
  --ink: #2f2b3d;
  --ink2: #5d5870;
  --muted: #8a8d93;
  --line: #ececf1;
  --line2: #f3f3f7;
  --paper: #f5f5f9;
  --card: #fff;
  --r: 10px;
  --sh: 0 3px 12px -4px rgba(47, 43, 61, .10), 0 1px 3px rgba(47, 43, 61, .06);
  color: var(--ink);
  font-size: 14px;
}

.mbp * {
  box-sizing: border-box;
}

.mbp a {
  text-decoration: none;
}

.mbp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
}

.mbp-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px 0;
}

.mbp-card-hd h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.mbp-card-bd {
  padding: 16px 18px;
  flex: 1;
}

.mbp-linkr {
  font-size: 12.5px;
  color: var(--b);
  font-weight: 600;
}

/* sticky left column */
.mbp-pcol {
  position: sticky;
  top: 76px;
}

@media(max-width:991px) {
  .mbp-pcol {
    position: static;
  }
}

/* profile card + wave banner */
.mbp-pcard {
  overflow: hidden;
  text-align: center;
}

.mbp-pbanner {
  height: 90px;
  position: relative;
  overflow: hidden;
  background: #efe9fd;
}

.mbp-pbanner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mbp-pav {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid var(--bs-white);
  margin: -46px auto 6px;
  background: linear-gradient(135deg, #c9a24a, var(--b));
  display: grid;
  place-items: center;
  color: var(--bs-white);
  font-size: 34px;
  font-weight: 700;
  position: relative;
  box-shadow: var(--sh);
}

.mbp-pav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mbp-pav .mbp-cam {
  position: absolute;
  right: 5px;
  bottom: -5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bs-white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink2);
  font-size: 14px;
  cursor: pointer;
}

.mbp-pname {
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mbp-pname i {
  color: var(--b);
  font-size: 16px;
}

.mbp-prole {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.mbp-badge-pkg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 9px 0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--bs-white);
}

.mbp-badge-pkg.lv0 {
  background: linear-gradient(135deg, #9aa0ab, #6e7480);
}

.mbp-badge-pkg.lv1 {
  background: linear-gradient(135deg, #7b2ff7, #a14bf0);
}

.mbp-badge-pkg.lv2 {
  background: linear-gradient(135deg, #c9a24a, var(--b));
}

.mbp-code {
  font-size: 12px;
  color: var(--ink2);
}

.mbp-code b {
  color: var(--b);
}

.mbp-rating {
  font-size: 12.5px;
  margin: 5px 0 12px;
}

.mbp-rating i {
  color: var(--gd);
}

.mbp-rating b {
  font-weight: 700;
}

.mbp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}

.mbp-btn-out {
  background: var(--bs-white);
  border-color: #d8cdf7;
  color: var(--pp);
}

.mbp-btn-out.dis {
  opacity: .55;
  cursor: not-allowed;
}

.mbp-btn-dark {
  background: #2f2b3d;
  color: var(--bs-white);
  font-size: 12px;
  padding: 7px 12px;
  width: auto;
}

.mbp-reflink {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.mbp-reflink input {
  flex: 1;
  border: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink2);
  background: var(--paper);
  min-width: 0;
}

.mbp-reflink button {
  border: 0;
  background: var(--bs-white);
  border-left: 1px solid var(--line);
  width: 38px;
  color: var(--ink2);
  cursor: pointer;
}

.mbp-qr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0;
}

.mbp-qr {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 5px;
  background: var(--bs-white);
  flex: none;
}

.mbp-qr img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.mbp-share {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.mbp-share a {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
}

.mbp-share .c {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin: 0 auto 3px;
}

.mbp-share .zalo {
  background: var(--bl50);
  color: #0068ff;
}

.mbp-share .fb {
  background: #e7efff;
  color: #1877f2;
}

.mbp-share .mes {
  background: var(--pp50);
  color: var(--pp);
}

.mbp-share .cp {
  background: var(--line2);
  color: var(--ink2);
}

.mbp-ach {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mbp-ach li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line2);
}

.mbp-ach li:last-child {
  border-bottom: 0;
}

.mbp-ach .l {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink2);
}

.mbp-ach .i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.mbp-ach b {
  font-size: 13px;
}

/* page header + tabs */
.mbp-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
}

.mbp-head h1 i {
  color: #d9b400;
  font-size: 18px;
}

.mbp-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.mbp-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 18px;
}

.mbp-tab {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.mbp-tab:hover {
  color: var(--b);
}

.mbp-tab.on {
  color: var(--b);
  border-bottom-color: var(--b);
}

/* stat card */
.mbp-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 16px 17px;
  height: 100%;
  display: flex;
  gap: 12px;
}

.mbp-stat-b {
  min-width: 0;
}

.mbp-stat .ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
  margin-bottom: 0;
}

.mbp-stat .lbl {
  font-size: 13px;
  color: var(--muted);
}

.mbp-stat .val {
  font-size: 20px;
  font-weight: 800;
  margin: 3px 0 1px;
  line-height: 1.15;
}

.mbp-stat .chg {
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

.mbp-stat .chg.up {
  color: var(--gn);
}

.mbp-stat .chg.dn {
  color: var(--b);
}

.mbp-stat .chg.mut {
  color: var(--muted);
  font-weight: 500;
}

.mbp-ico-pp {
  background: var(--pp50);
  color: var(--pp);
}

.mbp-ico-gn {
  background: var(--gn50);
  color: var(--gn);
}

.mbp-ico-og {
  background: var(--og50);
  color: var(--og);
}

.mbp-ico-bl {
  background: var(--bl50);
  color: var(--bl);
}

.mbp-ico-gd {
  background: var(--gd50);
  color: var(--gd);
}

/* charts */
.mbp-chartsel {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 9px;
  color: var(--ink2);
  background: var(--bs-white);
}

.mbp-revchart {
  height: 240px;
  width: 100%;
}

.mbp-conv-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mbp-conv-donut {
  position: relative;
  width: 168px;
  height: 168px;
  flex: none;
}

.mbp-convchart {
  height: 168px;
  width: 168px;
}

.mbp-conv-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mbp-conv-center .p {
  font-size: 22px;
  font-weight: 800;
}

.mbp-conv-center .s {
  font-size: 10.5px;
  color: var(--muted);
}

.mbp-legend {
  flex: 1;
  min-width: 0;
}

.mbp-legend .li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink2);
}

.mbp-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 7px;
}

/* todo */
.mbp-todo {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mbp-todo li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line2);
  align-items: flex-start;
}

.mbp-todo li:last-child {
  border-bottom: 0;
}

.mbp-todo .ti {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: none;
}

.mbp-todo .tt {
  font-size: 13px;
  font-weight: 600;
}

.mbp-todo .ts {
  font-size: 11.5px;
  color: var(--muted);
}

.mbp-ti-bl {
  background: #e7efff;
  color: #2563eb;
}

.mbp-ti-og {
  background: var(--og50);
  color: var(--og);
}

.mbp-ti-pp {
  background: var(--pp50);
  color: var(--pp);
}

.mbp-ti-wn {
  background: #fff1e0;
  color: #d97706;
}

/* network tree */
.mbp-tree {
  padding: 16px 5px 6px;
  text-align: center;
}

/* node = bordered card */
.mbp-tnode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #fff;
  min-width: 116px;
  position: relative;
}

.mbp-tav {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid #fff;
  box-shadow: var(--sh);
  position: relative;
}

.mbp-tav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mbp-tav.root {
  background: linear-gradient(135deg, var(--b), #e53935);
  width: 52px;
  height: 52px;
}

.mbp-tav .st {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.mbp-tname {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.mbp-tid {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* root wrapper + down connector */
.mbp-troot {
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 22px;
}

.mbp-troot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 22px;
  background: var(--line);
  transform: translateX(-50%);
}

/* F1 row + horizontal + per-node vertical connectors */
.mbp-trow {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  padding-top: 22px;
  position: relative;
  flex-wrap: wrap;
}

.mbp-trow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 1px;
  background: var(--line);
}

.mbp-trow>* {
  position: relative;
}

.mbp-trow>*::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 22px;
  background: var(--line);
}

.mbp-tmore {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 96px;
  font-size: 11px;
  color: var(--b);
  font-weight: 700;
  border: 1px dashed var(--b100);
  border-radius: 13px;
  padding: 8px 10px;
  text-align: center;
  background: var(--b50);
}

.mbp-tlegend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.mbp-tlegend .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* activity */
.mbp-act {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mbp-act li {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line2);
  align-items: center;
}

.mbp-act li:last-child {
  border-bottom: 0;
}

.mbp-act .i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: none;
}

.mbp-act .tx {
  font-size: 13px;
  font-weight: 500;
}

.mbp-act .sub {
  font-size: 11.5px;
  color: var(--bd);
}

.mbp-act .tm {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.mbp-ac-pp {
  background: var(--pp50);
  color: var(--pp);
}

.mbp-ac-gn {
  background: var(--gn50);
  color: var(--gn);
}

.mbp-ac-bl {
  background: var(--bl50);
  color: var(--bl);
}

.mbp-ac-og {
  background: var(--og50);
  color: var(--og);
}

.mbp-ac-mut {
  background: var(--line2);
  color: var(--ink2);
}

/* upgrade banner (full width) */
.mbp-up {
  background: linear-gradient(120deg, #f6f4ff, #fdeef1);
  border: 1px solid #ece9ff;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mbp-up .cr {
  font-size: 30px;
}

.mbp-up .tt {
  font-weight: 800;
  font-size: 16px;
}

.mbp-up .tt span {
  font-weight: 500;
  color: var(--ink2);
}

.mbp-up .ss {
  font-size: 12.5px;
  color: var(--ink2);
  margin-top: 2px;
}

.mbp-up .ff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink2);
}

.mbp-up .ff .f {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mbp-up .ff .f i {
  color: var(--gn);
}

.mbp-up .cta {
  margin-left: auto;
  background: linear-gradient(135deg, #7b2ff7, var(--b));
  color: var(--bs-white);
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 9px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 13.5px;
}

.mbp-empty {
  min-height: 150px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 24px 18px;
}

.mbp-empty-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3f3f7, #e9ebf1);
  color: #c2c5cf;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.mbp-empty .m {
  font-weight: 600;
  color: var(--ink2);
}

.mbp-empty .s {
  font-size: 11.5px;
  max-width: 250px;
  line-height: 1.5;
}

/* ghi chú rỗng nhỏ gọn (vd network giữa root & legend) */
.mbp-note {
  margin: 16px auto;
  max-width: 350px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.mbp-note i {
  font-size: 18px;
  color: #c2c5cf;
  display: block;
  margin-bottom: 4px;
}

/* % hoàn thiện hồ sơ + người giới thiệu + nút (gộp từ Hồ sơ cá nhân) */
.mbp-prog {
  margin: 4px 0 12px;
}

.mbp-prog-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink2);
  margin-bottom: 5px;
}

.mbp-prog-top b {
  color: var(--b);
  font-weight: 700;
}

.mbp-prog-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--line2);
  overflow: hidden;
}

.mbp-prog-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6b73c, var(--b));
  transition: width .5s ease;
}

.mbp-refby {
  font-size: 12px;
  color: var(--ink2);
  background: #fff8ec;
  border: 1px solid #f5e3c0;
  border-radius: 8px;
  padding: 8px 11px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mbp-refby i {
  color: #e0a420;
  font-size: 16px;
}

.mbp-refby b {
  color: var(--ink);
}

.mbp-pbtns {
  display: flex;
  gap: 8px;
}

.mbp-btn-edit {
  background: #fff;
  border-color: var(--line);
  color: var(--ink2);
}

.mbp-btn-edit:hover {
  border-color: var(--b);
  color: var(--b);
}

/* ===================== TAB: Lock của tôi ===================== */
.mbp-lock-hd {
  flex-wrap: wrap;
  gap: 10px;
}

.mbp-lock-tools {
  align-items: center;
}

.mbp-lock-search {
  flex: 1 1 240px;
  min-width: 200px;
}

.mbp-lock-proj {
  flex: 0 0 auto;
  min-width: 170px;
  max-width: 240px;
}

.mbp-lock-hd h3 i {
  color: var(--b);
  margin-right: 4px;
}

.mbp-lock-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mbp-lock-f {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: all .15s ease;
}

.mbp-lock-f:hover {
  border-color: var(--b100);
  color: var(--b);
}

.mbp-lock-f.on {
  background: var(--b);
  border-color: var(--b);
  color: #fff;
}

.mbp-lock-f b {
  font-weight: 800;
}

.mbp-lock-f.on b {
  color: #fff;
}

.mbp-lock-list {
  display: block;
}

.mbp-lock-loading {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0;
}

.mbp-lock-loading i {
  margin-right: 5px;
  color: var(--b);
}

.mbp-lock-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line2);
}

.mbp-lock-row:last-child {
  border-bottom: 0;
}

.mbp-lk-main {
  min-width: 0;
  flex: 1 1 auto;
}

.mbp-lk-title {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
}

.mbp-lk-title b {
  font-weight: 800;
  color: var(--ink);
}

.mbp-lk-sub {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: 12px;
  color: var(--muted);
}

.mbp-lk-sub span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mbp-lk-sub i {
  font-size: 14px;
  opacity: .85;
}

.mbp-lk-reject {
  color: #d4380d !important;
  font-weight: 600;
}

.mbp-lk-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}

.mbp-lk-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.mbp-lk-badge.is-warn {
  background: #fff3e0;
  color: #b76e00;
}

.mbp-lk-badge.is-red {
  background: var(--b50);
  color: var(--b);
}

.mbp-lk-badge.is-green {
  background: #dcf6e8;
  color: #157347;
}

.mbp-lk-badge.is-gray {
  background: #f1f1f4;
  color: #6b7280;
}

.mbp-lk-cd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff4f4;
  color: var(--b);
  border: 1px solid var(--b100);
  white-space: nowrap;
}

.mbp-lk-cd.over {
  background: #f1f1f4;
  color: #6b7280;
  border-color: var(--line);
}

.mbp-lk-note {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.mbp-lk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--b);
  background: var(--b);
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
  transition: all .15s ease;
}

.mbp-lk-btn:hover {
  background: var(--bd);
  border-color: var(--bd);
  color: #fff;
}

.mbp-lk-btn.ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink2);
}

.mbp-lk-btn.ghost:hover {
  border-color: var(--b);
  color: var(--b);
  background: #fff;
}

.mbp-lk-cancel {
  background: none;
  border: 0;
  padding: 4px 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}

.mbp-lk-cancel:hover {
  color: #d4380d;
  text-decoration: underline;
}

.mbp-lock-empty {
  text-align: center;
  padding: 40px 16px;
}

.mbp-lock-empty .ic {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--b);
  background: var(--b50);
}

.mbp-lock-empty .m {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.mbp-lock-empty .s {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}

.mbp-lock-retry {
  margin-top: 14px;
}

@media (max-width: 575.98px) {
  .mbp-lock-row {
    flex-direction: column;
    gap: 10px;
  }

  .mbp-lk-right {
    justify-content: flex-start;
  }
}

/* ===================== TAB: Gói tài khoản (Gói của tôi) ===================== */
.mbp-pkg-hero {
  background: linear-gradient(135deg, #fdf3f5, #ffffff);
  border-color: var(--b100);
}

.mbp-pkg-hero .mbp-card-bd {
  padding: 22px 22px 20px;
}

.mbp-pkg-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mbp-pkg-ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  flex: none;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.mbp-pkg-ic.lv1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.mbp-pkg-ic.lv2 {
  background: linear-gradient(135deg, #7b2ff7, #a14bf0);
}

.mbp-pkg-meta {
  flex: 1;
  min-width: 200px;
}

.mbp-pkg-kick {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mbp-pkg-name {
  font-size: 23px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 2px;
}

.mbp-pkg-tag {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.mbp-pkg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.mbp-pkg-badge.is-on {
  background: #dcf6e8;
  color: #157347;
}

.mbp-pkg-badge.is-free {
  background: var(--b50);
  color: var(--b);
}

.mbp-pkg-badge.is-warn {
  background: #fff3e0;
  color: #b76e00;
}

.mbp-pkg-badge.sm {
  font-size: 11px;
  padding: 3px 9px;
}

.mbp-pkg-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28c76f;
  box-shadow: 0 0 0 3px rgba(40, 199, 111, .18);
}

.mbp-pkg-exp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

.mbp-pkg-exp .l b {
  color: var(--b);
  font-size: 15px;
  font-weight: 800;
}

.mbp-pkg-exp .r b {
  color: var(--ink2);
}

.mbp-pkg-prog {
  margin-top: 8px;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.mbp-pkg-prog span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--b), #e53935);
  border-radius: 4px;
}

.mbp-pkg-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.mbp-pkg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--b);
  background: var(--b);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}

.mbp-pkg-btn:hover {
  background: var(--bd);
  border-color: var(--bd);
  color: #fff;
}

.mbp-pkg-btn.ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink2);
}

.mbp-pkg-btn.ghost:hover {
  border-color: var(--b);
  color: var(--b);
  background: #fff;
}

.mbp-pkg-btn.w100 {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

.mbp-pkg-btn i {
  font-size: 17px;
}

.mbp-pkg-stat {
  height: 100%;
}

.mbp-pkg-stat .mbp-card-bd {
  padding: 15px 16px;
}

.mbp-pkg-stat .lbl {
  font-size: 12px;
  color: var(--muted);
}

.mbp-pkg-stat .val {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 3px;
  text-transform: uppercase;
}

.mbp-pkg-stat .val.b {
  color: var(--b);
}

.mbp-pkg-sectitle {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 13px;
}

.mbp-pkg-benefits {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.65;
}

.mbp-pkg-benefits ul {
  margin: 0;
  padding-left: 18px;
}

.mbp-pkg-benefits li {
  margin: 4px 0;
}

.mbp-pkg-upsell {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mbp-pkg-upsell li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink2);
  padding: 9px 0;
  border-bottom: 1px dashed var(--line2);
}

.mbp-pkg-upsell li:last-child {
  border-bottom: 0;
}

.mbp-pkg-upsell li i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dcf6e8;
  color: #157347;
  font-size: 12px;
  flex: none;
  margin-top: 1px;
}

.mbp-pkg-bills {
  max-height: 430px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.mbp-pkg-bill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line2);
}

.mbp-pkg-bill:last-child {
  border-bottom: 0;
}

.mbp-pkg-bill .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--b50);
  color: var(--b);
  font-size: 18px;
}

.mbp-pkg-bill .ic.is-cancel {
  background: var(--line2);
  color: var(--muted);
}

.mbp-pkg-bill .tx {
  flex: 1;
  min-width: 0;
}

.mbp-pkg-bill .tx b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.mbp-pkg-bill .tx small {
  font-size: 12px;
  color: var(--muted);
}

.mbp-pkg-bill .rt {
  text-align: right;
  flex: none;
}

.mbp-pkg-bill .amt {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.mbp-pkg-bill .rt .mbp-pkg-badge {
  margin-top: 4px;
}

.mbp-pkg-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
}

.mbp-pkg-sup {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  text-decoration: none;
  color: inherit;
}

.mbp-pkg-sup .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff;
}

.mbp-pkg-sup .ic.pp {
  background: linear-gradient(135deg, var(--b), #e53935);
}

.mbp-pkg-sup .ic.bl {
  background: linear-gradient(135deg, #00b8d9, #0095b3);
}

.mbp-pkg-sup .t {
  flex: 1;
  min-width: 0;
}

.mbp-pkg-sup .t small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mbp-pkg-sup .t b {
  font-size: 14px;
  color: var(--ink);
}

/* ===================== Modal: chỉnh sửa hồ sơ cá nhân ===================== */
.mbp-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.mbp-modal.show {
  display: flex;
}

.mbp-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(47, 43, 61, .55);
}

.mbp-modal-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(47, 43, 61, .42);
  overflow: hidden;
  animation: mbpModalIn .18s ease;
}

@keyframes mbpModalIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.mbp-modal-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.mbp-modal-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mbp-modal-hd h3 i {
  color: var(--b);
  font-size: 20px;
}

.mbp-modal-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--line2);
  border-radius: 9px;
  color: var(--ink2);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mbp-modal-x:hover {
  background: var(--b50);
  color: var(--b);
}

.mbp-modal-bd {
  padding: 18px 20px;
}

.mbp-modal-err {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: #fdecef;
  color: #c0223b;
  border: 1px solid #f7c5cf;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 14px;
}

.mbp-modal-err i {
  font-size: 17px;
  flex: none;
  margin-top: 1px;
}

.mbp-modal-ft {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fafafb;
}

/* nút: extend .btn của global.min.css + màu thương hiệu */
.btn.mbp-btn-brand {
  background: var(--b);
  border-color: var(--b);
  color: #fff;
  font-weight: 700;
}

.btn.mbp-btn-brand:hover,
.btn.mbp-btn-brand:focus {
  background: var(--bd);
  border-color: var(--bd);
  color: #fff;
}

.btn.mbp-btn-ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink2);
  font-weight: 600;
}

.btn.mbp-btn-ghost:hover,
.btn.mbp-btn-ghost:focus {
  border-color: var(--b);
  color: var(--b);
  background: #fff;
}

.mbp-fld {
  margin-bottom: 13px;
}

.mbp-fld label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 5px;
}

.mbp-fld-lock {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
}

.mbp-fld-hint {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.mbp-inp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  transition: border-color .15s ease;
}

.mbp-inp-wrap:focus-within {
  border-color: var(--b);
}

.mbp-inp-wrap > i {
  color: var(--muted);
  font-size: 18px;
  flex: none;
}

.mbp-inp-wrap input,
.mbp-inp-wrap select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}

.mbp-inp-wrap input[readonly] {
  color: var(--muted);
}

.mbp-inp-wrap.mbp-inp-ro {
  background: var(--line2);
  border-color: var(--line);
}

.mbp-inp-val {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

body.mbp-modal-open {
  overflow: hidden;
}

/* ===================== Popup: Thành viên trong hệ thống ===================== */
.mbp-modal-box.mbp-modal-lg {
  max-width: 660px;
}

.mbp-net-sum {
  margin-bottom: 14px;
}

.mbp-net-sumc {
  flex: 1;
  background: var(--b50);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}

.mbp-net-sumc .n {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--b);
}

.mbp-net-sumc .l {
  font-size: 12px;
  color: var(--muted);
}

.mbp-net-list {
  max-height: 50vh;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.mbp-net-row {
  padding: 10px 2px;
  border-bottom: 1px solid var(--line2);
}

.mbp-net-row:last-child {
  border-bottom: 0;
}

.mbp-net-av {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(135deg, #7c6cf0, #5b8def);
  overflow: hidden;
}

.mbp-net-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mbp-net-av .st {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.mbp-net-info {
  flex: 1;
  min-width: 0;
}

.mbp-net-info b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mbp-net-info small {
  font-size: 12px;
  color: var(--muted);
}

.mbp-net-lv {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--b50);
  color: var(--b);
}

.mbp-net-lv.lv2 {
  background: #eef0f3;
  color: var(--ink2);
}