/* Man Sao luu (/sao-luu, goi G5 soat dep 05/10/2026): trang DOC hien trang sao luu. Mot the lon
   "Ban sao gan nhat" (mau theo trang thai), ba the nho (lich, ban dang giu, dich vu), the o dia co
   thanh do. Chi dung token va thanh phan cua app.css; khong ma mau cung, khong re nhanh theo kieu. */

.sl .sl-nhan { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-vua); color: var(--muted); }

/* co "ban sao luu cung o voi du lieu": bang canh bao co san cua app.css, chi them khoang cach */
.sl > .bao { margin-bottom: 14px; }

/* the lon: ban sao gan nhat */
.sl-gan-nhat { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid var(--ok); }
.sl-gan-nhat.can { border-left-color: var(--warn); }
.sl-gan-nhat.loi, .sl-gan-nhat.chua { border-left-color: var(--danger); }
.sl-bieu {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-line);
}
.sl-bieu .ic { width: 26px; height: 26px; }
.sl-gan-nhat.can .sl-bieu { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.sl-gan-nhat.loi .sl-bieu, .sl-gan-nhat.chua .sl-bieu { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.sl-noi-dung { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sl .sl-lon { font-size: var(--fs-so); font-weight: var(--fw-dam); letter-spacing: -.01em; line-height: var(--lh-tieu-de); color: var(--ink); }
.sl .sl-kq { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.sl .sl-viec { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-md); max-width: 70ch; }

/* ba the nho */
.sl-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sl-o { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sl-bieu-nho {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
}
.sl-bieu-nho .ic { width: 18px; height: 18px; }
.sl .sl-so { font-size: var(--fs-xl); font-weight: var(--fw-dam); color: var(--ink); padding-right: 40px; }
.sl .sl-phu { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-van); }

/* the o dia: moi o mot dong, thanh do phan da dung */
.sl-dia { margin-bottom: 14px; }
.sl-dong {
  display: grid; grid-template-columns: 150px minmax(120px, 1fr) auto 96px; gap: 16px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.sl-dia > h2 + .sl-dong { border-top: 0; }
.sl-ten { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-vua); color: var(--ink-2); }
.sl-ten .ic { color: var(--muted); }
.sl-thanh { height: 8px; border-radius: 4px; background: var(--surface-3); box-shadow: inset 0 1px 1px var(--bong-dinh); overflow: hidden; }
.sl-thanh i { display: block; height: 100%; border-radius: 4px; background: var(--accent-grad); }
.sl-dong.can .sl-thanh i { background: var(--warn); }
.sl-gb { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.sl-gb b { color: var(--ink); font-weight: var(--fw-dam); }
.sl-dong .nhan { justify-self: end; }


@media (max-width: 1000px) {
  .sl-luoi { grid-template-columns: 1fr; }
  .sl-dong { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .sl-thanh { grid-column: 1 / -1; grid-row: 2; }
}