/**

 * Báo cáo khách hàng mobile — route-reports-tools (tab) + route-customer-report (subpage).

 */



@media (max-width: 900px) {

  body.use-new-ui.route-reports-tools #contentScroll.content-scroll,

  body.use-new-ui.route-customer-report #contentScroll.content-scroll,

  body.use-new-ui.route-reports-tools .content-scroll,

  body.use-new-ui.route-customer-report .content-scroll {

    padding-bottom: calc(var(--hydra-bottom-nav-h, 72px) + 24px + env(safe-area-inset-bottom, 0px)) !important;

  }



  body.use-new-ui.route-reports-tools .reports-tools-page {

    gap: 12px;

    padding: 0 0 8px;

  }



  body.use-new-ui.route-reports-tools .reports-tools-tabbar {

    margin-bottom: 2px;

  }



  body.use-new-ui.route-reports-tools .customer-reports-section--mo,

  body.use-new-ui.route-customer-report .customer-reports-section--mo {

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 0;

    min-width: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-head {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 0 2px;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-title {

    margin: 0;

    font-size: 21px;

    font-weight: 750;

    line-height: 1.25;

    color: #0f172a;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-sub {

    margin: 0;

    font-size: 13px;

    line-height: 1.4;

    color: #64748b;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-block,

  body.use-new-ui.route-customer-report .cust-report-mo-block {

    min-width: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi-grid,

  body.use-new-ui.route-customer-report .cust-report-kpi-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi,

  body.use-new-ui.route-customer-report .cust-report-kpi {

    padding: 10px 12px;

    border-radius: 12px;

    border: 1px solid #e2e8f0;

    background: #fff;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi__label,

  body.use-new-ui.route-customer-report .cust-report-kpi__label {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: #64748b;

    line-height: 1.2;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi__value,

  body.use-new-ui.route-customer-report .cust-report-kpi__value {

    font-size: 22px;

    font-weight: 800;

    line-height: 1.15;

    color: #0f172a;

    font-variant-numeric: tabular-nums;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi:nth-child(3) .cust-report-kpi__value,

  body.use-new-ui.route-customer-report .cust-report-kpi:nth-child(3) .cust-report-kpi__value {

    color: #ea580c;

    font-size: 20px;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-grid,

  body.use-new-ui.route-customer-report .cust-report-tier-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill,

  body.use-new-ui.route-customer-report .cust-report-tier-pill {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 10px 12px;

    border-radius: 12px;

    border: 1px solid #e2e8f0;

    background: #fff;

    min-width: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill__label,

  body.use-new-ui.route-customer-report .cust-report-tier-pill__label {

    font-size: 13px;

    font-weight: 650;

    color: #334155;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill__value {

    font-size: 18px;

    font-weight: 800;

    font-variant-numeric: tabular-nums;

    flex-shrink: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--vip,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--vip {

    background: #fffbeb;

    border-color: #fde68a;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--vip .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--vip .cust-report-tier-pill__value {

    color: #b45309;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--loyal,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--loyal {

    background: #f0fdf4;

    border-color: #bbf7d0;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--loyal .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--loyal .cust-report-tier-pill__value {

    color: #15803d;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--dormant,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--dormant {

    background: #f8fafc;

    border-color: #e2e8f0;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--dormant .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--dormant .cust-report-tier-pill__value {

    color: #64748b;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--new,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--new {

    background: #fff7ed;

    border-color: #fed7aa;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill--new .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill--new .cust-report-tier-pill__value {

    color: #c2410c;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-panel,

  body.use-new-ui.route-customer-report .cust-report-mo-panel {

    padding: 12px 14px;

    border-radius: 14px;

    border: 1px solid #e2e8f0;

    background: #fff;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

    min-width: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-panel--compact,

  body.use-new-ui.route-customer-report .cust-report-mo-panel--compact {

    padding-bottom: 10px;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-panel__title,

  body.use-new-ui.route-customer-report .cust-report-mo-panel__title {

    margin: 0 0 8px;

    font-size: 15px;

    font-weight: 750;

    color: #0f172a;

    line-height: 1.25;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-panel__sub,

  body.use-new-ui.route-customer-report .cust-report-mo-panel__sub {

    margin: -4px 0 8px;

    font-size: 12px;

    line-height: 1.35;

    color: #64748b;

  }



  body.use-new-ui.route-reports-tools .cust-report-empty,

  body.use-new-ui.route-customer-report .cust-report-empty {

    font-size: 13px;

    padding: 8px 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-list,

  body.use-new-ui.route-customer-report .cust-report-src-list {

    display: flex;

    flex-direction: column;

    gap: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-row,

  body.use-new-ui.route-customer-report .cust-report-src-row {

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) auto auto;

    gap: 10px;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid #f1f5f9;

    font-size: 14px;

    min-width: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-row:last-child,

  body.use-new-ui.route-customer-report .cust-report-src-row:last-child {

    border-bottom: 0;

    padding-bottom: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-row:first-child,

  body.use-new-ui.route-customer-report .cust-report-src-row:first-child {

    padding-top: 0;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-name,

  body.use-new-ui.route-customer-report .cust-report-src-name {

    font-weight: 650;

    color: #0f172a;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-count,

  body.use-new-ui.route-customer-report .cust-report-src-count {

    font-size: 12px;

    color: #64748b;

    white-space: nowrap;

    text-align: right;

  }



  body.use-new-ui.route-reports-tools .cust-report-src-amt,

  body.use-new-ui.route-customer-report .cust-report-src-amt {

    font-size: 14px;

    font-weight: 750;

    color: #ea580c;

    white-space: nowrap;

    text-align: right;

    font-variant-numeric: tabular-nums;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-list,

  body.use-new-ui.route-customer-report .cust-report-top-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-item,

  body.use-new-ui.route-customer-report .cust-report-top-item {

    display: grid;

    grid-template-columns: 28px minmax(0, 1fr) auto auto;

    gap: 8px;

    align-items: center;

    padding: 8px 10px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #f1f5f9;

    min-width: 0;

    font-size: 14px;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-rank,

  body.use-new-ui.route-customer-report .cust-report-top-rank {

    font-size: 12px;

    font-weight: 800;

    color: #94a3b8;

    font-variant-numeric: tabular-nums;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-name,

  body.use-new-ui.route-customer-report .cust-report-top-name {

    font-weight: 650;

    color: #0f172a;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-spent,

  body.use-new-ui.route-customer-report .cust-report-top-spent {

    font-weight: 750;

    color: #ea580c;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;

  }



  body.use-new-ui.route-reports-tools .cust-report-top-orders,

  body.use-new-ui.route-customer-report .cust-report-top-orders {

    font-size: 12px;

    color: #64748b;

    white-space: nowrap;

    text-align: right;

  }



  body.use-new-ui.route-reports-tools .cust-report-growth-list,

  body.use-new-ui.route-customer-report .cust-report-growth-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

  }



  body.use-new-ui.route-reports-tools .cust-report-growth-item,

  body.use-new-ui.route-customer-report .cust-report-growth-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 10px;

    background: #f8fafc;

    font-size: 14px;

  }



  body.use-new-ui.route-reports-tools .cust-report-growth-label,

  body.use-new-ui.route-customer-report .cust-report-growth-label {

    font-weight: 700;

    color: #334155;

    font-variant-numeric: tabular-nums;

  }



  body.use-new-ui.route-reports-tools .cust-report-growth-val,

  body.use-new-ui.route-customer-report .cust-report-growth-val {

    font-weight: 650;

    color: #64748b;

  }

}



@media (max-width: 640px) {

  body.use-new-ui.route-reports-tools .cust-report-mo-title {

    font-size: 20px;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi,

  body.use-new-ui.route-customer-report .cust-report-kpi {

    padding: 9px 11px;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi__value,

  body.use-new-ui.route-customer-report .cust-report-kpi__value {

    font-size: 20px;

  }



  body.use-new-ui.route-reports-tools .cust-report-kpi:nth-child(3) .cust-report-kpi__value,

  body.use-new-ui.route-customer-report .cust-report-kpi:nth-child(3) .cust-report-kpi__value {

    font-size: 18px;

  }



  body.use-new-ui.route-reports-tools .cust-report-tier-pill__value,

  body.use-new-ui.route-customer-report .cust-report-tier-pill__value {

    font-size: 17px;

  }



  body.use-new-ui.route-reports-tools .cust-report-mo-panel,

  body.use-new-ui.route-customer-report .cust-report-mo-panel {

    padding: 11px 12px;

  }

}



@media (max-width: 900px) {

  body.use-new-ui.route-reports-tools .reports-tools-tabbar .segment-btn.active {

    background: linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%);

    color: #fff;

    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.22);

  }

}