/* Kiểu dáng riêng của Dashboard Truy Cập Landing (TCLP).
   Bộ biến màu và phần khung/đăng nhập nằm trong <style> của index.html.
   LUẬT MÀU chung công cụ nội bộ: đơn sắc teal; màu chỉ để BÁO TRẠNG THÁI
   (xanh = tốt, đỏ = cần xử lý, cam = chú ý). */

.luoi{display:grid;gap:13px}
.luoi.the4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.luoi.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}

.the{background:#fff;border:1px solid var(--vien);border-radius:13px;padding:16px 18px;margin-bottom:16px}
.the h2{margin:0 0 3px;font-size:16px;color:var(--teal-dam)}
.the .mo-ta{margin:0 0 14px;font-size:12.5px;color:var(--xam)}

/* ── Thẻ số lớn ── */
.so-lon{background:#fff;border:1px solid var(--vien);border-radius:13px;
  padding:14px 16px;border-top:3px solid var(--teal)}
.so-lon .nhan{font-size:12px;color:var(--xam);text-transform:uppercase;
  letter-spacing:.3px;font-weight:600}
.so-lon .gia-tri{font-size:26px;font-weight:800;color:var(--teal-dam);
  line-height:1.2;margin:3px 0 2px}
.so-lon .phu{font-size:12px;color:var(--xam);line-height:1.4}
.so-lon .phu.tang{color:var(--xanh);font-weight:600}
.so-lon .phu.giam{color:var(--do);font-weight:600}
.so-lon.mo{opacity:.55}
.so-lon.mo .gia-tri{font-size:17px;color:var(--xam)}

/* ── Biểu đồ cột theo ngày (SVG vẽ tay, không thư viện) ── */
.bieu-do{width:100%;overflow-x:auto}
.bieu-do svg{display:block;width:100%;min-width:320px;height:auto}

/* ── Bảng xếp hạng ── */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tc{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px}
table.tc th,table.tc td{padding:8px 9px;text-align:right;
  border-bottom:1px solid var(--vien);vertical-align:top;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tc th{background:#f3f7f8;color:var(--teal-dam);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.2px;font-weight:700}
table.tc th:first-child,table.tc td:first-child{text-align:left}
table.tc td:first-child{font-weight:700}
table.tc tbody tr{cursor:pointer}
table.tc tbody tr:hover{background:#f0f9fa}
table.tc .tot{color:var(--xanh);font-weight:700}
table.tc .xau{color:var(--do);font-weight:700}
table.tc .lang{color:#b6bfc7}

/* ── Thanh ngang nguồn khách ── */
.day-nguon{display:flex;flex-direction:column;gap:8px;font-size:13px}
.day-nguon .hang{display:flex;align-items:center;gap:8px}
.day-nguon .nhan{width:96px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-nguon .ray{flex:1;height:10px;background:#eef2f4;border-radius:5px;overflow:hidden}
.day-nguon .ray i{display:block;height:100%;background:var(--teal);border-radius:5px}
.day-nguon .so{width:76px;flex:none;text-align:right;color:var(--xam);
  font-variant-numeric:tabular-nums}

/* ── Máy nhắc việc ── */
.nhac{background:var(--vang);border-left:3px solid var(--cam);border-radius:9px;
  padding:12px 14px;font-size:13.5px;color:#6d4a00;line-height:1.6}
.nhac b{color:#4a3200}
.nhac ul{margin:6px 0 0;padding-left:19px}
.nhac li{margin:4px 0}

/* ── Chú thích trung thực — số nào đo kiểu gì phải tự khai ── */
.that-tha{margin-top:13px;padding:11px 13px;border-radius:9px;font-size:12.5px;
  line-height:1.55;background:#f3f7f8;border-left:3px solid var(--teal);color:#3d5560}

/* ── Màn chi tiết ── */
.duong-ve{margin-bottom:12px}
.duong-ve button{background:none;border:none;color:var(--teal);font-weight:700;
  font-size:14px;padding:0}
.duong-ve button:hover{text-decoration:underline}
.tieu-de-trang{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.tieu-de-trang h2{margin:0;font-size:19px;color:var(--teal-dam)}
.tieu-de-trang a{font-size:12.5px;color:var(--teal)}

.gio-vang{display:flex;align-items:flex-end;gap:2px;height:90px}
.gio-vang .cot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.gio-vang .cot i{display:block;background:var(--teal);border-radius:2px 2px 0 0;min-height:1px}
.gio-vang-nhan{display:flex;gap:2px;font-size:10.5px;color:var(--xam);margin-top:3px}
.gio-vang-nhan span{flex:1;text-align:center}

.trong{padding:26px 18px;text-align:center;color:var(--xam);font-size:13.5px;
  border:1.5px dashed var(--vien);border-radius:11px;background:#fcfdfd}