/* Thong bao noi va hop xac nhan theo bo thiet ke 21/10/2026, thong-bao/pa-2 "Dai tren dau trang" (lane uithongbao
   29/10/2026). Nap SAU app.css va man-*.css (base.html), nen thang cac luat .toast cu cua app.css va #toast cua
   man-soat.css ma khong phai sua hai tep do. Quy tac:
   - thong bao nam TRONG #khung-tb (dai tren dau vung lam viec, dinh khi cuon), DAY bang xuong, khong de len o nao;
   - .toast (go lop "hien" de an) duoc giao-dien-chung.js boc: .tb-bao > .tb-in > (.toast + nut Dong). Dai mo ra
     bang grid-template-rows 0fr -> 1fr nen bang ben duoi dich xuong em, khong nhay;
   - thong bao loi o lai den khi bam Dong; hop xac nhan: <dialog> .dl-dau / .dl-than / .dl-chan, nut an toan ben
     trai duoc focus san, nut do hay nut chinh ben phai ghi dung viec se lam.
   Man khong co #khung-tb (ban in) van dung .toast co dinh cu cua app.css. */

.tb-bao {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--tg-nhanh) var(--cong-vao), visibility 0s linear var(--tg-nhanh);
}
.tb-bao:has(.toast.hien) {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--tg-vua) var(--cong-ra), visibility 0s;
}
.tb-in {
  --tb-vach: var(--ok); --tb-nen: var(--ok-soft);
  min-height: 0; overflow: hidden; display: flex; align-items: center; gap: var(--k3); padding: 0 var(--k4);
  background: var(--tb-nen); color: var(--ink); box-shadow: inset 4px 0 0 var(--tb-vach), inset 0 -1px 0 var(--line);
  opacity: 0; transform: translateY(calc(-1 * var(--k3)));
  transition: opacity var(--tg-nhanh) var(--cong-vao), transform var(--tg-nhanh) var(--cong-vao);
}
.tb-bao:has(.toast.hien) .tb-in { opacity: 1; transform: none; transition: opacity var(--tg-vua) var(--cong-ra), transform var(--tg-vua) var(--cong-ra); }
.tb-bao:has(.toast.loi) .tb-in { --tb-vach: var(--danger); --tb-nen: var(--danger-soft); }

/* phan tu .toast ben trong dai: het co dinh, het bong, nam trong luong cua dai */
.tb-in > .toast, .tb-in > .toast.hien, .tb-in > .toast.loi {
  position: static; inset: auto; flex: 1 1 auto; min-width: 0; padding: var(--k2) 0; border: 0; background: none; box-shadow: none;
  opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: none;
  font-size: var(--fs-md); font-weight: var(--fw-dam);
}
.tb-in > .toast .lk { margin-left: var(--k2); }

.tb-in .tb-x {
  flex: none; display: grid; place-items: center; padding: 2px; border: 0; border-radius: var(--bo-goc-nho);
  background: none; color: var(--muted); cursor: pointer;
  transition: color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.tb-in .tb-x::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ic-dong) center / contain no-repeat; mask: var(--ic-dong) center / contain no-repeat;
}
.tb-in .tb-x:hover { color: var(--ink); }
.tb-in .tb-x:active { transform: var(--lun); }

/* Motion Prompt #056 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#056
   Thanh thoi gian 3 px o day dai thanh cong co lai tuyen tinh toi 0 (dung lai khi chuot tren dai), dai tu an khi het.
   Dai loi khong co thanh. */
.tb-in { position: relative; }
.tb-thanh {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tb-vach); opacity: .55;
  transform-origin: left; transform: scaleX(0);
}
.tb-thanh.chay { transform: scaleX(1); animation: tb-thanh var(--tb-t, 4s) linear forwards; }
.tb-thanh.giu { animation-play-state: paused; }
.tb-bao:has(.toast.loi) .tb-thanh { display: none; }
@keyframes tb-thanh { to { transform: scaleX(0); } }

/* hop xac nhan dung chung (giao-dien-chung.js, GiaoDien.xacNhan) */
dialog.hop-xn .dl-than p { margin: 0; color: var(--ink-2); }
dialog.hop-xn .dl-chan .btn.chinh, dialog.hop-xn .dl-chan .btn.nguy { min-width: 120px; }

@media (prefers-reduced-motion: reduce) {
  .tb-thanh { display: none; }
  .tb-bao, .tb-bao:has(.toast.hien), .tb-in, .tb-bao:has(.toast.hien) .tb-in { transition: none; transform: none; }
}