/* V404 — Dashboard weekly revenue + Top 5 product responsive */

/* Top 5: desktop */
.v367-top5-table{
  width:100%;
  min-width:0;
  overflow:visible;
}
.v367-top5-head,
.v367-top5-row{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 88px minmax(105px,120px)!important;
  align-items:center;
  gap:10px!important;
  width:100%;
  box-sizing:border-box;
}
.v367-top5-head{
  padding:0 6px 8px!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--muted-foreground);
  border-bottom:1px solid var(--border);
}
.v367-top5-head span:nth-child(3),
.v367-top5-head span:nth-child(4){text-align:right}
.v367-top5-row{
  min-height:58px!important;
  padding:9px 6px!important;
  border-bottom:1px solid var(--border);
  border-radius:0!important;
}
.v367-top5-row:last-child{border-bottom:0}
.v367-top5-product strong{
  display:block;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:700!important;
  color:var(--foreground);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v367-top5-product small{
  display:block;
  margin-top:3px;
  font-size:10.5px!important;
  line-height:1.3!important;
  color:var(--muted-foreground);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v367-top5-rank{
  width:24px!important;
  height:24px!important;
  font-size:11px!important;
  font-weight:700!important;
}
.v367-top5-number{text-align:right}
.v367-top5-number strong{
  display:block;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:700!important;
}
.v367-top5-number small{
  display:block;
  margin-top:3px;
  font-size:10px!important;
  color:var(--muted-foreground);
}
.v367-top5-revenue{
  min-width:0;
  text-align:right;
  font-size:12.5px!important;
  line-height:1.3!important;
  font-weight:700!important;
  color:var(--foreground)!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* laptop / desktop hẹp */
@media (min-width:768px) and (max-width:1280px){
  .v367-top5-head,
  .v367-top5-row{
    grid-template-columns:26px minmax(0,1fr) 78px minmax(92px,105px)!important;
    gap:7px!important;
  }
  .v367-top5-product strong{font-size:12px!important}
  .v367-top5-product small{font-size:9.5px!important}
  .v367-top5-number strong{font-size:12px!important}
  .v367-top5-revenue{font-size:11.5px!important}
}

/* Mobile: card rõ ràng, không ép bảng */
@media (max-width:767px){
  .ledger-cell:has(.v367-top5-table){
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .v367-top5-head{display:none!important}
  .v367-top5-table{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .v367-top5-row{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    grid-template-areas:
      "rank product product"
      "rank qty revenue"!important;
    gap:6px 10px!important;
    min-height:0!important;
    padding:11px 10px!important;
    border:1px solid var(--border)!important;
    border-radius:10px!important;
    background:var(--card);
  }
  .v367-top5-rank{
    grid-area:rank;
    align-self:center;
    width:28px!important;
    height:28px!important;
    font-size:12px!important;
  }
  .v367-top5-product{grid-area:product;min-width:0}
  .v367-top5-product strong{
    font-size:13.5px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .v367-top5-product small{
    font-size:10.5px!important;
    white-space:normal!important;
  }
  .v367-top5-number{
    grid-area:qty;
    text-align:left!important;
    display:flex!important;
    align-items:baseline;
    gap:5px;
    min-width:0;
  }
  .v367-top5-number:before{
    content:"SL:";
    font-size:10px;
    color:var(--muted-foreground);
  }
  .v367-top5-number strong{
    display:inline!important;
    font-size:12.5px!important;
  }
  .v367-top5-number small{
    display:inline!important;
    margin:0!important;
    font-size:10px!important;
  }
  .v367-top5-revenue{
    grid-area:revenue;
    text-align:right!important;
    font-size:12.5px!important;
    color:var(--foreground)!important;
  }
  .v367-top5-revenue:before{
    content:"DT ";
    font-size:9.5px;
    font-weight:500;
    color:var(--muted-foreground);
  }
}

/* very small mobile */
@media (max-width:390px){
  .v367-top5-row{
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-areas:
      "rank product"
      "rank qty"
      "rank revenue"!important;
  }
  .v367-top5-revenue{text-align:left!important}
}