/* Tối ưu điện thoại (dashboard) — nạp SAU style.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi. */

@media (max-width:760px){

  /* ============ THẺ KPI: gọn, số lớn – nhãn nhỏ, luôn 2 cột ============ */
  #page-dashboard .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
  #page-dashboard .stat{padding:12px 14px;border-radius:12px;min-width:0}
  #page-dashboard .stat::after{display:none}              /* hình tròn trang trí đè chữ ở khổ hẹp */
  #page-dashboard .stat .s-label{font-size:12px;line-height:1.3;margin-bottom:6px;gap:6px}
  #page-dashboard .stat .s-dot{width:8px;height:8px;flex:0 0 auto}
  #page-dashboard .stat .s-val{font-size:24px;line-height:1.1;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
  #page-dashboard .stat .s-sub{font-size:12px;line-height:1.35;margin-top:4px}

  /* ============ BIỂU ĐỒ 14 NGÀY: vừa trọn khung, không cuộn ngang ============ */
  #page-dashboard .panel-head .muted{font-size:12.5px;font-variant-numeric:tabular-nums}
  #page-dashboard #credit-chart{height:150px;gap:3px;padding:16px 0 0;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  #page-dashboard #credit-chart .bar{flex:1 1 0;min-width:0;gap:5px}
  #page-dashboard #credit-chart .b-fill{max-width:22px;border-radius:4px 4px 0 0}
  #page-dashboard #credit-chart .b-val{font-size:10px;line-height:1;white-space:nowrap;opacity:1;
    color:var(--muted);font-variant-numeric:tabular-nums}
  #page-dashboard #credit-chart .b-lbl{font-size:10.5px;line-height:1;font-variant-numeric:tabular-nums}
  /* nhãn trục X chỉ còn số ngày ("14"), tháng đã rõ qua tiêu đề "14 ngày" */
  #page-dashboard #credit-chart .b-mo{display:none}
  /* ngày 0 credit: vạch nền mờ, không lặp chữ "0" trên từng cột */
  #page-dashboard #credit-chart .b-zero .b-val{visibility:hidden}
  #page-dashboard #credit-chart .b-zero .b-fill{background:var(--line2);min-height:3px}
  /* cột cuối là hôm nay: nhãn đậm hơn để dễ định vị */
  #page-dashboard #credit-chart .bar:last-child .b-lbl{color:var(--txt);font-weight:700}

  /* ============ VIDEO THEO COOKIE CỦA USER: cùng khuôn biểu đồ credit ============ */
  #page-dashboard #video-owner-chart{height:150px;gap:3px;padding:16px 0 0;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  #page-dashboard #video-owner-chart .bar{flex:1 1 0;min-width:0;gap:5px}
  #page-dashboard #video-owner-chart .b-fill{max-width:22px}
  #page-dashboard #video-owner-chart .b-val{font-size:10px;line-height:1;white-space:nowrap;opacity:1;
    color:var(--muted);font-variant-numeric:tabular-nums}
  #page-dashboard #video-owner-chart .b-lbl{font-size:10.5px;line-height:1;font-variant-numeric:tabular-nums}
  #page-dashboard #video-owner-chart .b-mo{display:none}
  #page-dashboard #video-owner-chart .b-zero .b-val{visibility:hidden}
  #page-dashboard #video-owner-chart .bar:last-child .b-lbl{color:var(--txt);font-weight:700}
  #page-dashboard .vo-legend{gap:6px 12px;font-size:12.5px}
  #page-dashboard .vo-tip{max-width:calc(100% - 16px)}

  /* ============ DONUT: vòng bên trái, chú thích thành danh sách thẳng hàng ============ */
  #page-dashboard .donut-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    gap:16px;padding:2px 0}
  #page-dashboard .donut{width:108px;height:108px}
  #page-dashboard .donut::after{top:15px;right:15px;bottom:15px;left:15px;inset:15px}
  #page-dashboard .donut .d-center b{font-size:20px;font-variant-numeric:tabular-nums}
  #page-dashboard .donut-legend{gap:6px;font-size:13px;min-width:0}
  #page-dashboard .donut-legend div{gap:8px;padding:7px 10px;min-height:34px;background:var(--bg2);
    border:1px solid var(--line);border-radius:8px}
  #page-dashboard .donut-legend i{flex:0 0 auto}
  #page-dashboard .donut-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
  /* donut kép: vòng bên trái + chú thích cookie bên phải, chú thích phát bắn trải cả hàng dưới */
  #page-dashboard .ring2{width:124px;height:124px}
  #page-dashboard .ring2 .d-center b{font-size:20px}
  #page-dashboard .shot-legend{grid-column:1/-1;gap:8px;font-size:13px;padding-top:12px;border-top:1px solid var(--line)}
  #page-dashboard .shot-legend ul{gap:9px 10px;grid-template-columns:10px minmax(0,1fr) auto auto}

  /* ============ THỐNG KÊ THEO NGƯỜI DÙNG: mỗi người 1 thẻ 2 tầng ============
     Tầng 1: STT + avatar + tên (trái) · Credit hôm nay (phải).
     Tầng 2: Cookie / Live / Die / Dùng–còn / Video chia 5 cột, nhãn trên – số dưới. */
  #page-dashboard #tbl-peruser tbody{display:grid;gap:10px}
  /* bộ lọc thời gian: chip cuộn ngang 1 hàng (luật chung .filter-chips), ô ngày chia đôi bề ngang */
  #page-dashboard .pu-range{flex:1 1 100%;justify-content:flex-start}
  #page-dashboard .pu-range .filter-chips{flex:1 1 100%;min-width:0}
  #page-dashboard .pu-custom{flex:1 1 100%}
  #page-dashboard .pu-custom input{flex:1 1 0;min-width:0;min-height:36px}
  #page-dashboard .pu-note{margin:-4px 0 10px}
  /* flex-wrap + order: tầng 1 = ô 1,2,8; ::after rộng 100% làm vạch ngăn và ép xuống dòng; tầng 2 = ô 3–7 */
  #page-dashboard #tbl-peruser tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;
    padding:12px;margin:0}
  #page-dashboard #tbl-peruser tr::after{content:"";order:2;flex:0 0 100%;height:0;margin:10px 0;
    border-top:1px solid var(--line)}
  #page-dashboard #tbl-peruser td{position:static;display:block;min-height:0;padding:0;border:0;
    font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}
  #page-dashboard #tbl-peruser td::before{position:static;display:block;width:auto;margin:0 0 4px;
    font-size:12px;line-height:1.3;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* STT */
  #page-dashboard #tbl-peruser td:nth-child(1){order:0;flex:0 0 auto;line-height:0}
  #page-dashboard #tbl-peruser td:nth-child(1)::before{display:none}

  /* Người dùng: lấy hết chỗ còn lại, tên dài thì "…" */
  #page-dashboard #tbl-peruser td:nth-child(2){order:0;flex:1 1 0;min-width:0}
  #page-dashboard #tbl-peruser td:nth-child(2)::before{display:none}
  #page-dashboard #tbl-peruser .u-cell{display:block;min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;font-size:14px;font-weight:600;line-height:30px}
  #page-dashboard #tbl-peruser .u-dot{display:inline-grid;width:30px;height:30px;margin-right:8px;
    vertical-align:middle;line-height:1}

  /* Credit hôm nay: bên phải tầng 1, nhãn nhỏ trên số */
  #page-dashboard #tbl-peruser td:nth-child(8){order:1;flex:0 0 auto;text-align:right}
  #page-dashboard #tbl-peruser td:nth-child(8)::before{margin-bottom:2px;font-size:11.5px}
  #page-dashboard #tbl-peruser td:nth-child(8) .credit-chip{font-size:15px;line-height:1.1}

  /* 5 ô số tầng 2: chia đều; ô "đã dùng / còn lại" rộng hơn, nhãn rút gọn cho vừa */
  #page-dashboard #tbl-peruser td:nth-child(n+3):nth-child(-n+7){order:3;flex:1 1 0;min-width:0;
    align-self:flex-start;font-weight:600}
  /* .ck-cell thêm độ ưu tiên để thắng luật chia đều ngay trên */
  #page-dashboard #tbl-peruser td:nth-child(n+3):nth-child(-n+7).ck-cell{flex-grow:1.8}
  #page-dashboard #tbl-peruser td.ck-cell::before{content:"Dùng / còn"}
  #page-dashboard #tbl-peruser td.ck-cell .ck-split{font-size:13px}
  #page-dashboard #tbl-peruser td .badge{padding:2px 8px;font-size:12px;gap:5px}
  #page-dashboard #tbl-peruser td .badge::before{width:6px;height:6px}

  /* ============ XU HƯỚNG: nút chọn full ngang, chú giải cuộn 1 hàng, ô số 2 cột ============ */
  #page-dashboard #panel-trend .tr-head{margin-bottom:12px;gap:10px}
  #page-dashboard #panel-trend .tr-title{flex:1 1 100%}
  #page-dashboard #panel-trend .tr-title .muted{font-size:12px;line-height:1.35}
  #page-dashboard .tr-controls{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  #page-dashboard .tr-controls .seg{min-width:0}
  #page-dashboard .tr-controls #trend-frame{grid-column:1/-1}
  #page-dashboard .tr-controls .seg button{flex:1 1 auto;min-height:34px;padding:6px 7px;font-size:12.5px;white-space:nowrap}
  #page-dashboard .tr-controls #trend-frame button{flex:1 1 0}
  #page-dashboard .tr-legend{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 6px;padding:0 14px 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #page-dashboard .tr-legend::-webkit-scrollbar{display:none}
  #page-dashboard .tr-lg{flex:0 0 auto;min-height:34px;white-space:nowrap}
  #page-dashboard .tr-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
  #page-dashboard .tr-kpi{padding:8px 10px}
  #page-dashboard .tr-kpi b{font-size:18px}
  #page-dashboard .tr-foot{margin-top:6px}
  #page-dashboard .tr-hint{flex:1 1 100%}
  #page-dashboard .tr-foot-r{margin-left:0;flex:1 1 100%}
  #page-dashboard #trend-tip.dock{box-shadow:0 6px 24px rgba(0,0,0,.45)}
}

/* Tablet (761–960px): 6 thẻ KPI chia 3×2 thay vì 4 + 2 thẻ lẻ */
@media (min-width:761px) and (max-width:960px){
  #page-dashboard .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}