/* =========================================================
   V357 — Premium Financial KPI Cards
   Thiết kế lại dãy ô tài chính: sắc nét, tách thẻ, dễ đọc.
   Không thay đổi dữ liệu hay công thức.
   ========================================================= */

/* Grid chứa KPI tài chính: tách thành từng card riêng */
.grid:has(> .v357-premium-kpi){
  gap:10px!important;
  background:transparent!important;
  overflow:visible!important;
  border-radius:0!important;
}

/* Card chung */
.v357-premium-kpi{
  min-width:0;
  min-height:128px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--v357-border,var(--border))!important;
  border-radius:12px!important;
  background:var(--v357-bg,#fff)!important;
  box-shadow:
    0 1px 1px rgba(15,23,42,.025),
    0 4px 12px rgba(15,23,42,.035)!important;
  padding:16px 17px 15px!important;
  overflow:hidden!important;
  transform:none!important;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease!important;
}

.v357-premium-kpi:hover{
  transform:none!important;
  border-color:var(--v357-accent,var(--border))!important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.035),
    0 7px 18px rgba(15,23,42,.06)!important;
}

/* Accent bar trên cùng */
.v357-premium-kpi::before{
  content:"";
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:auto!important;
  height:4px!important;
  background:var(--v357-accent,#64748b)!important;
  opacity:1!important;
}

/* Nhãn */
.v357-premium-kpi .eyebrow{
  margin:1px 0 0!important;
  color:var(--v357-label,#64748b)!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  opacity:1!important;
}

/* Số chính */
.v357-premium-kpi .stat-figure{
  margin-top:10px!important;
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  color:var(--v357-value,#0f172a)!important;
  font-size:clamp(24px,1.8vw,31px)!important;
  line-height:1.03!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}

/* Prefix ₫ nhỏ hơn, cùng tone */
.v357-premium-kpi .stat-figure>span:first-child{
  color:var(--v357-value,#0f172a)!important;
  font-size:14px!important;
  font-weight:800!important;
  opacity:.78!important;
}

/* Dòng tháng / tăng trưởng */
.v357-premium-kpi>div:last-child:not(.stat-figure){
  width:max-content;
  max-width:100%;
  margin-top:11px!important;
  padding:4px 7px!important;
  border:1px solid var(--v357-chip-border,var(--border))!important;
  border-radius:999px!important;
  background:var(--v357-chip-bg,rgba(100,116,139,.06))!important;
  color:var(--v357-chip-text,#64748b)!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Tông màu theo ý nghĩa */
.v354-fin-revenue{
  --v357-accent:#0f8b73;
  --v357-border:#b9e3d9;
  --v357-bg:#f2fbf8;
  --v357-label:#277565;
  --v357-value:#075f50;
  --v357-chip-bg:#e5f5f0;
  --v357-chip-border:#c7e8df;
  --v357-chip-text:#2f7565;
}

.v354-fin-collected{
  --v357-accent:#3579bd;
  --v357-border:#c4daf0;
  --v357-bg:#f3f8fd;
  --v357-label:#426f99;
  --v357-value:#245b8e;
  --v357-chip-bg:#e9f2fb;
  --v357-chip-border:#d1e2f3;
  --v357-chip-text:#426f99;
}

.v354-fin-profit{
  --v357-accent:#55943d;
  --v357-border:#cbe3c2;
  --v357-bg:#f5fbf2;
  --v357-label:#577b4b;
  --v357-value:#376e29;
  --v357-chip-bg:#eaf5e6;
  --v357-chip-border:#d4e9cc;
  --v357-chip-text:#567848;
}

.v354-fin-debt{
  --v357-accent:#c85a50;
  --v357-border:#efcbc7;
  --v357-bg:#fff6f5;
  --v357-label:#915c56;
  --v357-value:#983d35;
  --v357-chip-bg:#fdecea;
  --v357-chip-border:#f3d3cf;
  --v357-chip-text:#9a544d;
}

.v354-fin-cost{
  --v357-accent:#8065aa;
  --v357-border:#d9cee9;
  --v357-bg:#faf7fd;
  --v357-label:#75648b;
  --v357-value:#604886;
  --v357-chip-bg:#f0eaf8;
  --v357-chip-border:#dfd3ed;
  --v357-chip-text:#705d89;
}

.v354-fin-count{
  --v357-accent:#c68b32;
  --v357-border:#ecd9b8;
  --v357-bg:#fffbf3;
  --v357-label:#866d47;
  --v357-value:#8e5d18;
  --v357-chip-bg:#fff3db;
  --v357-chip-border:#f0dfbd;
  --v357-chip-text:#906722;
}

.v354-fin-neutral{
  --v357-accent:#64748b;
  --v357-border:#dce2e9;
  --v357-bg:#fafbfc;
  --v357-label:#64748b;
  --v357-value:#3f4b5b;
  --v357-chip-bg:#f2f4f7;
  --v357-chip-border:#e0e5eb;
  --v357-chip-text:#64748b;
}

/* Loại "Giá trị TB / đơn" có chữ doanh thu nên dùng tone doanh thu,
   nhưng làm dịu hơn để không trùng hoàn toàn Tổng doanh thu */
.v357-premium-kpi[data-fin-tone="revenue"]:nth-last-child(1){
  --v357-accent:#16877d;
}

/* Xuất báo cáo — đồng bộ cùng ngôn ngữ thiết kế */
.v354-money-box{
  border-radius:10px!important;
  box-shadow:0 2px 8px rgba(15,23,42,.035)!important;
}
.v354-money-box::before{
  height:3px!important;
}

/* Mobile */
@media(max-width:1100px){
  .grid:has(> .v357-premium-kpi){
    gap:8px!important;
  }
  .v357-premium-kpi{
    min-height:116px;
    padding:14px 14px 13px!important;
  }
  .v357-premium-kpi .stat-figure{
    font-size:clamp(22px,3vw,28px)!important;
  }
}

@media(max-width:700px){
  .grid:has(> .v357-premium-kpi){
    gap:8px!important;
  }
  .v357-premium-kpi{
    min-height:108px!important;
    border-radius:10px!important;
    padding:13px!important;
  }
  .v357-premium-kpi .eyebrow{
    font-size:9.5px!important;
  }
  .v357-premium-kpi .stat-figure{
    margin-top:8px!important;
    font-size:clamp(21px,6.2vw,27px)!important;
  }
  .v357-premium-kpi>div:last-child:not(.stat-figure){
    margin-top:9px!important;
    font-size:9.5px!important;
  }
}

/* Dark mode */
.dark .v354-fin-revenue{--v357-bg:#11312c;--v357-border:#285f55;--v357-label:#9bcfc4;--v357-value:#8bdfce;--v357-chip-bg:#173d36;--v357-chip-border:#2b5c53;--v357-chip-text:#a6d9ce}
.dark .v354-fin-collected{--v357-bg:#172f46;--v357-border:#345f85;--v357-label:#9ebbd3;--v357-value:#9ac9f0;--v357-chip-bg:#1f3b54;--v357-chip-border:#365d7d;--v357-chip-text:#a8c9e3}
.dark .v354-fin-profit{--v357-bg:#20351d;--v357-border:#4b7141;--v357-label:#afd1a4;--v357-value:#a0d78e;--v357-chip-bg:#284322;--v357-chip-border:#4b6c43;--v357-chip-text:#b7dbaa}
.dark .v354-fin-debt{--v357-bg:#3f2321;--v357-border:#7c4d48;--v357-label:#ddb0ac;--v357-value:#f1a39b;--v357-chip-bg:#4e2c29;--v357-chip-border:#79504b;--v357-chip-text:#e8b5b0}
.dark .v354-fin-cost{--v357-bg:#302840;--v357-border:#65527d;--v357-label:#c5b9d4;--v357-value:#c7b4e0;--v357-chip-bg:#3b3150;--v357-chip-border:#625279;--v357-chip-text:#d0c2df}
.dark .v354-fin-count{--v357-bg:#3c301b;--v357-border:#755e36;--v357-label:#d8c298;--v357-value:#eac47e;--v357-chip-bg:#473922;--v357-chip-border:#735e3b;--v357-chip-text:#e2cca4}
.dark .v354-fin-neutral{--v357-bg:#252e39;--v357-border:#465565;--v357-label:#aebaca;--v357-value:#d5dde7;--v357-chip-bg:#2d3844;--v357-chip-border:#475665;--v357-chip-text:#bcc7d3}