/* Chuyen dong theo bo thiet ke 21/10/2026, chuyen-dong/pa-2 "Vua phai" (lane uithongbao 29/10/2026): truot nhe,
   dong ben duoi dich em, so tong dem len, ra nhanh hon vao. Nap SAU app.css va man-*.css (base.html) nen ghi de
   cac luat chuyen canh cua app.css va khung chi tiet cua man Kho, Vat lieu ma khong phai sua cac tep do.
   Thoi gian lay tu token cua chu de (--tg-nhanh 120, --tg-vua 200, --tg-cham 320 o chu de 1), khong gan so cung.
   Luat chung: chi doi transform, opacity, mau; KHONG chuyen dong tren duong phim cua man Soat (chon dong, doi
   trang tinh khong co hieu ung nao ngoai nhay xanh dong vua luu sau khi luu xong). */

/* ===== TOKEN CHUYEN DONG (mot cho duy nhat; lane khac chi DUNG bien, khong tu dat so) =====
   Goc la token cua mau pa-2 (mau-chung.css) da co san trong tokens-mau.css theo chu de:
     --tg-nhanh (ra, bam, doi trang thai) · --tg-vua (vao) · --tg-cham (nhan nay, nhay) · --cong-ra (vao) ·
     --cong-vao (ra) · --cong-nay (overshoot nhe)
   Ten dung chung dat o day, doc theo y nghia (vao = hien ra, ra = bien di; ra luon nhanh hon vao):
     --cd-vao   thoi gian vao           --cd-e-vao  easing khi vao (giam toc)
     --cd-ra    thoi gian ra            --cd-e-ra   easing khi ra (tang toc)
     --cd-nhan  thoi gian nhan/nhay     --cd-e-nay  easing co overshoot nhe
     --cd-truot khoang truot ngang      --cd-nang   khoang noi len doc      --cd-pop  ti le phong khi vao
     --cd-pop2  ti le phong cua chip/dau tich   --cd-huong  +1 di toi, -1 quay lai (Back)
   Thao tac lap o man Soat (phim) dung --cd-ra hoac --cd-vao, khong dai hon --tg-vua (200 ms o chu de 1).
   NHIP (soat 03/11/2026): re chuot va nhan dung --tg-nhanh (120, 140, 80 ms theo chu de, luon <= 150) voi --cong-ra;
   doi trang thai cau truc (truot, mo khung, hop thoai) --tg-vua; nhan manh, dem so --tg-cham. Khong ghi so ms hay
   ease-out/linear tai cho dung, tru vong lap (quay, quet). Chi hai tri hoan co chu y, deu la chong nhay chu khong
   phai cho phan hoi: goi y thanh ben thu gon 250 ms, vong quay nut gui hien sau 220 ms.
   Giam chuyen dong: khoang truot, noi, phong ve 0 / 1; khoang thoi gian con lai chi doi mau va do mo. */
:root {
  --cd-vao: var(--tg-vua); --cd-ra: var(--tg-nhanh); --cd-nhan: var(--tg-cham);
  --cd-e-vao: var(--cong-ra); --cd-e-ra: var(--cong-vao); --cd-e-nay: var(--cong-nay);
  --cd-truot: 24px; --cd-nang: 8px; --cd-pop: .96; --cd-pop2: .8; --cd-huong: 1;
  --cd-pop-hop: .9; --cd-ngan: 100%;   /* hop xac nhan (#049) phong 0,9 -> 1; ngan keo (#050) truot het be rong cua no */
  /* NUT LUN khi bam (:active), MOT kieu cho moi nut: thu nho, khong doi bo cuc. --lun cho nut gon (nut, chip, nut vuong);
     --lun-rong cho nut ngang rong (hang goi y, hang thanh ben, nut .rong) de dich bien chi khoang 1,5 px, vi bien dich
     nhieu hon thi diem tha chuot o mep co the roi ra ngoai nut va mat cu bam. Giam chuyen dong: khong lun. */
  --lun: scale(.97); --lun-rong: scale(.99);
}
:root:active-view-transition-type(lui) { --cd-huong: -1; }
@media (prefers-reduced-motion: reduce) {
  :root { --cd-truot: 0px; --cd-nang: 0px; --cd-pop: 1; --cd-pop2: 1; --cd-pop-hop: 1; --cd-ngan: 0%; --lun: none; --lun-rong: none; }
}
@property --hl-a { syntax: "<number>"; inherits: false; initial-value: 1; }

/* a. khung chi tiet (Kho, Vat lieu) truot nhe tu phai 24 px va hien dan, thay vi truot het be ngang 420 px */
@media (max-width: 1699px) {
  .kho-than .ct, .vl-than .ct {
    transform: translateX(var(--cd-truot)); opacity: 0;
    transition: transform var(--tg-nhanh) var(--cong-vao), opacity var(--tg-nhanh) var(--cong-vao), visibility 0s linear var(--tg-nhanh);
  }
  .kho-than.mo-ct .ct, .vl-than.mo-ct .ct {
    transform: none; opacity: 1;
    transition: transform var(--tg-vua) var(--cong-ra), opacity var(--tg-vua) var(--cong-ra), visibility 0s;
  }
}

/* b. doi man hinh (chuyen trang that): man cu mo di va lui 12 px, man moi truot vao tu 12 px theo chieu di toi
   (chieu quay lai, nut Back cua trinh duyet: lui). Thanh ben dung yen (nhom rieng trong app.css). */
html:active-view-transition-type(chuyen-trang)::view-transition-old(root) { animation: cd-ra-ngang var(--tg-nhanh) var(--cong-vao) both; }
html:active-view-transition-type(chuyen-trang)::view-transition-new(root) { animation: cd-vao-ngang var(--tg-vua) var(--cong-ra) calc(var(--tg-nhanh) / 2) both; }
@keyframes cd-ra-ngang { to { opacity: 0; transform: translateX(calc(var(--cd-truot) * -0.5 * var(--cd-huong))); } }
@keyframes cd-vao-ngang { from { opacity: 0; transform: translateX(calc(var(--cd-truot) * 0.5 * var(--cd-huong))); } }

/* c. man Soat: dong vua luu nhay xanh roi ve nen cu, nhan trang thai cua dong no nay len mot nhip */
@keyframes cd-nhay-dong { 0% { background-color: transparent; } 12% { background-color: var(--dat-nhat); } 100% { background-color: transparent; } }
@keyframes cd-nay { from { opacity: 0; transform: scale(.8); } }
table.bang tbody tr.item.nhay td { animation: cd-nhay-dong calc(var(--tg-cham) * 3) var(--cong-ra); }
table.bang tbody tr.item.nhay td.c-tt .nhan { animation: cd-nay var(--tg-cham) var(--cong-nay); }

/* e. thanh tien trinh o thanh ben: vet sang quet qua khi may dang chay (chi hien khi co viec nen) */
.mini-bar i { position: relative; overflow: hidden; }
.mini-bar i::after {
  content: ""; position: absolute; inset: 0; opacity: .35; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--tren-chinh), transparent); animation: cd-quet 1.6s linear infinite;
}
@keyframes cd-quet { to { transform: translateX(100%); } }

/* g. dau tich "xong" nay len khi ket qua thanh cong hien ra */
.bao.xong .bieu, .bao.ok .bieu { animation: cd-nay var(--tg-cham) var(--cong-nay); }

/* h. so tong doi gia tri (giao-dien-chung.js them lop khi dem): nen nhay xanh nhat roi ve */
@keyframes cd-nhay-so { from { background-color: var(--thong-tin-nhat); } to { background-color: transparent; } }
.nhay-so { animation: cd-nhay-so calc(var(--tg-cham) * 2) var(--cong-ra); border-radius: var(--bo-goc-nho); }

/* ===================================================================================================================
   Phan tu lay tu thu vien Motion Prompt (https://showheyohtaki.github.io/motion-prompt/), cong nhan MIT License
   (c) 2026 Shohei Ohtaki. Chuyen tu Canvas sang CSS/JS: giu thu tu, nhip, do tre, khoang cach; thoi gian lay tu token
   cua pa-2 o tren (loi tung cho lech ghi o BAOCAO.md).
   =================================================================================================================== */

/* Motion Prompt #049 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#049
   Hop xac nhan: nen mo toi 0,42 hien dan, hop phong 0,9 -> 1 va hien dan khi vao (easeOut), dong nhanh hon. */
dialog::backdrop { background: color-mix(in srgb, #12141c 42%, transparent); }
dialog[open] { animation: cd-hop-vao var(--cd-nhan) var(--cd-e-vao); }
dialog[open]::backdrop { animation: cd-nen-vao var(--cd-nhan) var(--cd-e-vao); }
@keyframes cd-hop-vao { from { opacity: 0; transform: scale(var(--cd-pop-hop)); } }
@keyframes cd-nen-vao { from { opacity: 0; } }
@supports (transition-behavior: allow-discrete) {
  dialog:not([open]) { transform: scale(var(--cd-pop-hop)); }
}

/* Motion Prompt #050 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#050
   Khung chi tiet dong cua man Soat: truot vao tu phai (easeOut) khi mo, doi dong chi mo nhanh noi dung. */
.kp.truot-vao { animation: cd-ngan-vao var(--cd-nhan) var(--cd-e-vao) both; }
@keyframes cd-ngan-vao { from { transform: translateX(var(--cd-ngan)); opacity: .4; } }
.kp.doi-dong > * { animation: cd-doi-dong var(--cd-ra) var(--cd-e-vao); }
@keyframes cd-doi-dong { from { opacity: .35; } }

/* Motion Prompt #160 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#160
   Nut gui yeu cau htmx: thu thanh vong tron (spinner co san o app.css .htmx-request), may chu tra 2xx thi xanh len va
   gian ra "Xong" co dau tich (giao-dien-chung.js, lop .nut-tron va .nut-xong). */
.btn.nut-chuan {
  position: relative; overflow: hidden; white-space: nowrap;
  transition: width var(--cd-nhan) var(--cd-e-vao), padding var(--cd-nhan) var(--cd-e-vao),
    background-color var(--cd-nhan) var(--cd-e-vao), border-radius var(--cd-nhan) var(--cd-e-vao);
}
.btn.nut-tron { padding-inline: 0; border-radius: 999px; font-size: 0; }
.btn.nut-tron > *, .btn.nut-xong > * { display: none; }
.btn.nut-xong { background: var(--ok); color: var(--on-fill); font-size: 0; pointer-events: none; }
.btn.nut-xong::before, .btn.nut-xong::after { font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); color: var(--on-fill); }
.btn.nut-xong::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ic-tich) center / contain no-repeat; mask: var(--ic-tich) center / contain no-repeat;
  animation: cd-nay var(--cd-nhan) var(--cd-e-nay);
}
.btn.nut-xong::after {
  content: "Xong"; position: static; inset: auto; width: auto; height: auto; margin: 0; border: 0; opacity: 1;
  animation: cd-hien-chu var(--cd-vao) var(--cd-e-vao) var(--cd-ra) backwards;
}
@keyframes cd-hien-chu { from { opacity: 0; } }

/* Motion Prompt #070 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#070
   Viec nen o thanh ben het chay: dau tich noi len (0,7 -> 1, easeOut) giu mot nhip roi mo di. */
.thanh-ben .vm-xong {
  display: flex; align-items: center; gap: var(--k2); padding: 8px 12px; border-radius: var(--bo-goc); color: var(--ok);
  font-size: var(--fs-sm); font-weight: var(--fw-dam); opacity: 1; transition: opacity var(--cd-vao) var(--cd-e-ra);
}
.thanh-ben .vm-xong.mo-di { opacity: 0; }
.vm-tich {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); position: relative;
  animation: cd-nay-tich var(--cd-vao) var(--cd-e-vao);
}
.vm-tich::after {
  content: ""; position: absolute; inset: 4px; background: var(--on-fill);
  -webkit-mask: var(--ic-tich) center / contain no-repeat; mask: var(--ic-tich) center / contain no-repeat;
}
@keyframes cd-nay-tich { from { opacity: 0; transform: scale(.7); } }
html[data-ben="thu"] .thanh-ben .vm-xong .nh { display: none; }

/* Motion Prompt #069 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#069
   Cho may chu qua 450 ms: bang Soat thanh khoi xam dung hinh (xam #e9e7e5 ~ var(--vien)) co vet sang quet 0,9 giay;
   cho text "Máy đang..." cua mảnh tai muon cung co vet sang. Khong chan chuot, khong chan phim. */
#bang.tai-cham { position: relative; --sk: var(--vien); }
#bang.tai-cham table.bang tbody td {
  color: transparent; background-image: linear-gradient(var(--sk), var(--sk)); background-repeat: no-repeat;
  background-size: 68% 10px; background-position: 8px 50%; border-radius: 0;
}
#bang.tai-cham table.bang tbody td * { visibility: hidden; }
#bang.tai-cham::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 25%, color-mix(in srgb, var(--be-mat, #fff) 75%, transparent) 50%, transparent 75%) 100% 0 / 250% 100%;
  animation: cd-quet-khoi .9s linear infinite;
}
@keyframes cd-quet-khoi { to { background-position: -100% 0; } }
p[hx-get][hx-trigger="load"], div[hx-get][hx-trigger="load"].small {
  background: linear-gradient(90deg, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%) 100% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cd-quet-khoi 1.4s linear infinite;
}

/* Motion Prompt #063 (Stepper) · #071 (Badge) · MIT License (c) 2026 Shohei Ohtaki ·
   https://showheyohtaki.github.io/motion-prompt/#063 · #071
   So doi tai cho nay 1,18 -> 1 tuyen tinh trong 0,25 giay, chuyen mau chinh trong luc nay (dem dong can xem, bo loc);
   huy hieu tab nay 1,3 -> 1 kem vong song lan 12 -> 28 (0,5 giay), huy hieu moi phong 0,7 -> 1, ve 0 thi thu nho. */
.nay-so { display: inline-block; animation: cd-nay-so var(--tg-vua) var(--cong-ra); }
@keyframes cd-nay-so { from { transform: scale(1.18); color: var(--accent); } }
.dem { position: relative; }
.dem.nay-dem { animation: cd-nay-dem var(--cd-nhan) var(--cd-e-vao); }
.dem.nay-dem::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2.5px solid var(--warn); opacity: 0;
  animation: cd-song var(--tg-cham) var(--cong-ra);
}
.dem.nay-moi { animation: cd-nay-moi var(--cd-vao) var(--cd-e-vao); }
.dem.dem-tat { animation: cd-dem-tat var(--tg-vua) var(--cd-e-ra) forwards; }
@keyframes cd-nay-dem { from { transform: scale(1.3); } }
@keyframes cd-song { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }
@keyframes cd-nay-moi { from { transform: scale(.7); opacity: 0; } }
@keyframes cd-dem-tat { to { transform: scale(0); opacity: 0; } }

/* Motion Prompt #080 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#080
   Net vang #FFE36B quet tu trai sang phai tren dong vua sua, hoan tac, bac lua chon cua may (tung o tre 35 ms nen
   thanh mot net lien), roi phai di. Chu van o tren nen nen doc duoc. */
table.bang tbody tr.item.hl td {
  --hl-a: 1; background-repeat: no-repeat; background-position: left center;
  background-image: linear-gradient(rgb(255 227 107 / calc(var(--hl-a) * .6)), rgb(255 227 107 / calc(var(--hl-a) * .6)));
  animation: cd-hl calc(var(--cd-nhan) * 4.4) var(--cd-e-vao) both; animation-delay: calc(var(--i, 0) * 35ms);
}
table.bang tbody tr.item.hl td:nth-child(2) { --i: 1; } table.bang tbody tr.item.hl td:nth-child(3) { --i: 2; }
table.bang tbody tr.item.hl td:nth-child(4) { --i: 3; } table.bang tbody tr.item.hl td:nth-child(5) { --i: 4; }
table.bang tbody tr.item.hl td:nth-child(6) { --i: 5; } table.bang tbody tr.item.hl td:nth-child(7) { --i: 6; }
table.bang tbody tr.item.hl td:nth-child(8) { --i: 7; } table.bang tbody tr.item.hl td:nth-child(9) { --i: 8; }
table.bang tbody tr.item.hl td:nth-child(10) { --i: 9; }
@keyframes cd-hl {
  0% { background-size: 0% 100%; --hl-a: 1; }
  35% { background-size: 100% 100%; --hl-a: 1; }
  60% { background-size: 100% 100%; --hl-a: 1; }
  100% { background-size: 100% 100%; --hl-a: 0; }
}

/* Motion Prompt #053 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#053
   Che do mo ra trong khung phai (Tim ma khac, Ly do khong bao gia, Ghi chu, Xac nhan DVT): mo xuong, ha 6 px va hien
   dan (easeOut). Chon xong dong lai theo luong cu cua soat.js (go hidden), khong doi luong phim. */
.pmode:not([hidden]) { animation: cd-xuong var(--cd-vao) var(--cd-e-vao); }
@keyframes cd-xuong { from { opacity: 0; transform: translateY(calc(var(--cd-nang) * -.75)); } }

/* Motion Prompt #054 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#054
   Goi y: bong nen toi #26282c, mui ten 8 px, noi len 6 px va hien dan (easeOut), mat thi mo dan. Khong nhan chuot. */
.tip {
  position: fixed; z-index: var(--z-toast); max-width: 320px; padding: 8px 12px; border-radius: 8px;
  background: #26282c; color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-dam); line-height: var(--lh-dong); pointer-events: none;
  opacity: 0; transform: translateY(calc(var(--cd-nang) * .75)); visibility: hidden;
  transition: opacity var(--cd-ra) var(--cd-e-ra), transform var(--cd-ra) var(--cd-e-ra), visibility 0s linear var(--cd-ra);
}
.tip.hien { opacity: 1; transform: none; visibility: visible; transition: opacity var(--cd-ra) var(--cd-e-vao), transform var(--cd-ra) var(--cd-e-vao), visibility 0s; }
.tip.duoi { transform: translateY(calc(var(--cd-nang) * -.75)); }
.tip.duoi.hien { transform: none; }
.tip::after {
  content: ""; position: absolute; left: var(--tip-mui, 50%); bottom: -8px; margin-left: -8px; border: 8px solid transparent;
  border-top-color: #26282c; border-bottom: 0;
}
.tip.duoi::after { bottom: auto; top: -8px; border-top: 0; border-bottom: 8px solid #26282c; border-bottom-color: #26282c; }

/* Motion Prompt #055 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#055
   Bang nho nguon gia: truot 6 px tu phia xa o bam va hien dan (easeOut), mui ten chi vao o, dong nhanh hon. */
.bang-nho {
  position: fixed; z-index: var(--z-pop); width: 300px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateX(calc(var(--cd-nang) * .75));
  transition: opacity var(--cd-ra) var(--cd-e-ra), transform var(--cd-ra) var(--cd-e-ra);
}
.bang-nho.ben-trai { transform: translateX(calc(var(--cd-nang) * -.75)); }
.bang-nho.hien { opacity: 1; transform: none; transition: opacity var(--cd-ra) var(--cd-e-vao), transform var(--cd-ra) var(--cd-e-vao); }
.bang-nho::before {
  content: ""; position: absolute; top: calc(var(--mui-y, 40px) - 8px); left: -10px; width: 10px; height: 16px;
  background: var(--surface); clip-path: polygon(100% 0, 0 50%, 100% 100%); filter: drop-shadow(-1px 0 0 var(--line));
}
.bang-nho.ben-trai::before { left: auto; right: -10px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.bang-nho h3 { margin: 0 0 var(--k2); font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); }
.bang-nho dl { margin: 0 0 var(--k3); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-sm); }
.bang-nho dt { color: var(--muted); font-weight: var(--fw-dam); }
.bang-nho dd { margin: 0; overflow-wrap: anywhere; }

/* tat chuyen dong: bo moi khoang truot, nhay, quet; con lai chi doi mau tuc thi. Chuyen canh trang tat o day va
   o base.html (globalViewTransitions). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mini-bar i::after, #bang.tai-cham::after { display: none; }
  p[hx-get][hx-trigger="load"], div[hx-get][hx-trigger="load"].small { background: none; -webkit-text-fill-color: currentColor; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  @view-transition { navigation: none; }
}