/* IFS OPS Web · Kiểu dáng lời nhắc « Cài thành app » và « Có bản mới » (install.js của luồng Check-in) — thread "Nâng cấp giao diện Web", 11/10/2026.
   File đứng riêng, dùng cho trang nhân viên, /hoi-vien và /kiosk. Bộ chọn có #id nên thắng kiểu mặc định install.js tự chèn.
   Gọn theo ý Tri: một thanh nhỏ nổi ở đáy, biểu tượng app bên trái, hai nút; trên điện thoại nằm trên thanh menu dưới. */
#ifsInstallBar.ifs-install, #ifsUpdateBar.ifs-install {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100% - 24px));
  padding: 10px 10px 10px 12px; border-radius: 18px; background: #151515; color: #fff; border: 1px solid rgba(255,255,255,.08);
  font-size: 14px; line-height: 1.35; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); animation: ifs-inst-in .28s cubic-bezier(.2,.9,.3,1.1) both;
}
#ifsInstallBar.ifs-install::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #151515 url("/brand/app-192.png") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
#ifsUpdateBar.ifs-install::before { content: "↻"; flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow, #F4CF33); color: var(--on-accent, #151515); font-size: 22px; font-weight: 700; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install > span { flex: 1 1 auto; min-width: 0; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install b { display: block; font-size: 14.5px; font-weight: 700; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install small { display: block; color: #C9C9C2; font-size: 12.5px; margin-top: 1px; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install button { flex: none; font: inherit; font-size: 13.5px; font-weight: 700; border: 0; border-radius: 12px; min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: transform .12s, background .15s; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install button:active { transform: scale(.96); }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install .ifs-install-go { background: var(--yellow, #F4CF33); color: var(--on-accent, #151515); }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install .ifs-install-later { background: transparent; color: #C9C9C2; padding: 0 10px; }
:is(#ifsInstallBar, #ifsUpdateBar).ifs-install .ifs-install-later:hover { color: #fff; background: rgba(255,255,255,.08); }
/* hai thanh cùng lúc: thanh "bản mới" nằm trên */
#ifsInstallBar.ifs-install ~ #ifsUpdateBar.ifs-install, #ifsUpdateBar.ifs-install ~ #ifsInstallBar.ifs-install { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
@keyframes ifs-inst-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* điện thoại và máy tính bảng dọc: nằm trên thanh menu dưới, rộng gần hết màn hình, chữ được xuống dòng, nút không bị ép */
@media (max-width: 760px) {
  #ifsInstallBar.ifs-install, #ifsUpdateBar.ifs-install { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: auto; left: 10px; right: 10px; max-width: none; transform: none; flex-wrap: wrap; animation-name: ifs-inst-in-m; }
  :is(#ifsInstallBar, #ifsUpdateBar).ifs-install > span { flex: 1 1 calc(100% - 60px); }
  :is(#ifsInstallBar, #ifsUpdateBar).ifs-install button { flex: 1 1 0; min-height: 44px; }
  :is(#ifsInstallBar, #ifsUpdateBar).ifs-install .ifs-install-later { flex: 0 0 auto; }
  #ifsInstallBar.ifs-install ~ #ifsUpdateBar.ifs-install, #ifsUpdateBar.ifs-install ~ #ifsInstallBar.ifs-install { bottom: calc(214px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes ifs-inst-in-m { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* thẻ "Cài lên màn hình chính" ở Trang chủ app hội viên */
.instcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line, #E5E5E1); border-radius: var(--r-lg, 18px); background: var(--surface, #fff); color: var(--text, #151515); font: inherit; text-align: left; cursor: pointer; }
.instcard::before { content: ""; flex: none; width: 46px; height: 46px; border-radius: 13px; background: #151515 url("/brand/app-192.png") center / cover no-repeat; }
.instcard > :is(span, div):first-of-type { flex: 1; min-width: 0; }
.instcard b { display: block; font-size: 15px; } .instcard small { display: block; color: var(--muted, #626262); font-size: 12.5px; margin-top: 1px; }
.instcard :is(button, .btn) { flex: none; font: inherit; font-weight: 700; font-size: 13.5px; border: 0; border-radius: 12px; min-height: 40px; padding: 0 14px; background: var(--yellow, #F4CF33); color: var(--on-accent, #151515); cursor: pointer; }
.instcard .x, .instcard [data-i="later"] { background: none; color: var(--muted, #626262); padding: 0 8px; }
@media (prefers-reduced-motion: reduce) { #ifsInstallBar.ifs-install, #ifsUpdateBar.ifs-install { animation: none; } }
@media print { #ifsInstallBar, #ifsUpdateBar, .instcard { display: none !important; } }

/* Trang nhân viên thu nhỏ 70% (uiscale.js đặt --ifs-unzoom): thanh nhắc phóng ngược lại để chữ và nút đúng cỡ thật. Trang hội viên không có biến này nên giữ nguyên. */
#ifsInstallBar.ifs-install, #ifsUpdateBar.ifs-install { zoom: var(--ifs-unzoom, 1); }
@media (max-width: 760px) {
  #ifsInstallBar.ifs-install, #ifsUpdateBar.ifs-install { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; }
  #ifsInstallBar.ifs-install ~ #ifsUpdateBar.ifs-install, #ifsUpdateBar.ifs-install ~ #ifsInstallBar.ifs-install { bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  /* nút nổi "Chỉnh trang" nhường chỗ cho thanh nhắc */
  body:has(#ifsInstallBar, #ifsUpdateBar) .cueditbtn { display: none; }
}