/* IFS OPS Web · GIAO DIỆN MỚI (bản mẫu Tri duyệt 11/10/2026) — thread "Nâng cấp giao diện Web".
   Nạp SAU ui.css / ui-pc.css / ui-m.css. Làm theo từng phần, mỗi phần lên web chính riêng:
   PHẦN 1 (file này, mục A–C): khung chung — thanh biểu tượng hẹp bên trái, thanh trên sáng có tên trang + ô tìm, thanh dưới điện thoại.
   Cần đánh dấu của Fullstack: #nav button > span.nl (nhãn), [data-short] (nhãn ngắn ≤ 9 ký tự), .nav-bottom (Tuỳ chỉnh web, Tài khoản),
   [data-group], header.top #pageTitle + #pageSub ở mọi cỡ màn hình. Vạch ngăn nhóm: ui.js gắn .nsep.
   Bộ giao diện của Admin (theme.js) vẫn chạy: thanh biểu tượng lấy màu --bar / --bar-ink, màu nhấn lấy --yellow / --on-accent. Nền luôn sáng. */

/* ================= A. Máy tính + máy tính bảng (≥ 601px): thanh biểu tượng + thanh trên sáng ================= */
@media (min-width: 601px) {
  :root { --side-w: 112px; --header-h: 92px; --rail: var(--bar, #151515); --rail-ink: var(--bar-ink, #FFFFFF); }
  body.ui-navmin { --side-w: 112px; }
  #uiNavT, #uiNavT:not([hidden]) { display: none !important; }

  /* --- thanh biểu tượng --- */
  nav#nav { top: 0; width: var(--side-w); z-index: 26; background: var(--rail); border-right: 0; padding: calc(var(--header-h) + 2px) 10px 12px; gap: 2px; align-items: stretch; scrollbar-width: none; }
  nav#nav::-webkit-scrollbar { display: none; }
  nav#nav::before, body.ui-navmin nav#nav::before { content: none; display: none; }
  nav#nav button[data-view], body.ui-navmin nav#nav button[data-view] { flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; min-height: 64px; padding: 8px 2px 7px; margin: 0;
    border-radius: 16px; color: color-mix(in srgb, var(--rail-ink) 72%, transparent); font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; white-space: nowrap; background: none; transition: background var(--t), color var(--t); }
  nav#nav button[data-view]::before { width: 26px; height: 26px; background: currentColor; }
  nav#nav button[data-view]::after { content: none !important; }
  nav#nav button[data-view]:hover:not(.on) { background: color-mix(in srgb, var(--rail-ink) 10%, transparent); color: var(--rail-ink); }
  nav#nav button[data-view].on { background: color-mix(in srgb, var(--rail-ink) 13%, transparent); color: var(--accent-on-dark, var(--yellow)); font-weight: 700; }
  nav#nav button[data-view].on::before { background: currentColor; }
  /* vạch nhấn bên trái mục đang mở */
  nav#nav button[data-view].on { box-shadow: inset 0 0 0 0 transparent; }
  nav#nav button[data-view].on > .nl::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 5px; border-radius: 0 5px 5px 0; background: var(--accent-on-dark, var(--yellow)); }
  /* nhãn: dùng nhãn ngắn nếu có */
  nav#nav button[data-view] > .nl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  nav#nav button[data-view] > .nl[data-short] { font-size: 0; line-height: 0; overflow: visible; }
  nav#nav button[data-view] > .nl[data-short]::after { content: attr(data-short); display: block; max-width: calc(var(--side-w) - 24px); font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
  /* chấm số ở góc biểu tượng */
  nav#nav .badge, body.ui-navmin nav#nav .badge { position: absolute; top: 6px; right: 14px; margin: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 13px; line-height: 22px; background: var(--danger); color: #fff; box-shadow: 0 0 0 2px var(--rail); }
  /* nhóm: vạch ngăn mảnh (ui.js gắn .nsep vào nút đầu mỗi nhóm) */
  nav#nav button[data-view].nsep { margin-top: 11px; }
  nav#nav button[data-view].nsep::after { content: "" !important; position: absolute; left: 18px; right: 18px; top: -7px; height: 1px; background: color-mix(in srgb, var(--rail-ink) 16%, transparent) !important; }
  /* Tuỳ chỉnh web + Tài khoản luôn ở đáy */
  nav#nav button.nav-bottom { order: 90; }
  nav#nav button.nav-bottom:not([hidden]) { margin-top: 0; }
  nav#nav:has(button.nav-bottom:not([hidden]))::after { content: ""; order: 89; flex: 1 1 auto; min-height: 12px; }
  nav#nav #tsLink { order: 95; color: color-mix(in srgb, var(--rail-ink) 60%, transparent); font-size: 12px; text-align: center; }
  /* bộ có menu tối / sáng của bản cũ không còn nghĩa: thanh biểu tượng luôn theo --bar */
  html.ifs-side-dark nav#nav button[data-view].on { background: color-mix(in srgb, var(--rail-ink) 13%, transparent); color: var(--accent-on-dark, var(--yellow)); }
  html.ifs-side-dark nav#nav button[data-view].on::before { background: currentColor; }
  html.ifs-bar-light nav#nav { border-right: 1px solid var(--line); }
  html.ifs-bar-light nav#nav button[data-view].on { color: var(--gold, #7A5300); background: var(--accent-soft); }
  html.ifs-bar-light nav#nav button[data-view].on > .nl::before { background: var(--gold, #C49D12); }
  html.ifs-bar-light nav#nav .badge { box-shadow: 0 0 0 2px #fff; }

  /* --- thanh trên: sáng, nằm trong vùng nội dung; logo thành ô vuông trên đầu thanh biểu tượng --- */
  header.top, html.ifs-themed header.top { background: var(--workspace) !important; color: var(--text) !important; box-shadow: none !important; height: var(--header-h); padding: 0 32px 0 calc(var(--side-w) + 32px); gap: 16px; z-index: 25; }
  header.top::after { content: none; }
  header.top .brand { position: fixed; left: 0; top: 0; z-index: 27; width: var(--side-w); height: var(--header-h); display: grid; place-items: center; margin: 0; padding: 0; }
  header.top .brand::before { content: ""; width: 62px; height: 62px; border-radius: 18px; background: var(--yellow) url("/brand/icon-256.png") center / 74% no-repeat; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rail-ink) 10%, transparent); }
  header.top .brand > * { display: none !important; }
  header.top :is(#pageTitle, .ptitle) { display: block !important; position: static; margin: 0; padding: 0; border: 0; font-size: 33px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  header.top :is(#pageTitle, .ptitle)::before { content: none; }
  header.top #pageSub { display: block; align-self: flex-end; margin: 0 auto 26px 0; color: var(--sub); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  header.top #pageSub:empty { display: none; }
  header.top:not(:has(#pageSub:not(:empty))) :is(#pageTitle, .ptitle) { margin-right: auto; }
  /* ô tìm + tài khoản kiểu sáng */
  header.top #uiFind { height: 56px; min-width: 300px; padding: 0 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 18px; box-shadow: var(--sh-1); }
  header.top #uiFind:hover { border-color: var(--black); color: var(--text); }
  header.top #uiFind kbd { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
  header.top .me { background: none; color: var(--text); border: 0; padding: 4px 6px 4px 4px; max-width: 300px; font-weight: 600; font-size: 18px; }
  header.top .me:hover { background: var(--soft); }
  header.top .me .av { width: 46px; height: 46px; font-size: 16px; background: var(--yellow); color: var(--on-accent, var(--black)); box-shadow: none; }
  header.top :is(.net, #net) { color: var(--warn); background: var(--warn-soft); }
  header.top #uiBack { color: var(--text); }
  header.top .tsbadge, header.top #tsBadge { position: static; transform: none; margin: 0 auto 0 0; }
  .menu { top: calc(var(--header-h) - 14px); }
  /* trang đăng nhập (chưa có menu): giữ thanh trên tối như cũ */
  body:has(#nav[hidden]) header.top, html.ifs-themed body:has(#nav[hidden]) header.top { background: var(--bar, var(--black)) !important; color: var(--bar-ink, #fff) !important; height: 62px; padding: 0 24px; }
  body:has(#nav[hidden]) header.top .brand { position: static; width: auto; height: auto; display: flex; }
  body:has(#nav[hidden]) header.top .brand::before { content: none; }
  body:has(#nav[hidden]) header.top .brand > * { display: revert !important; }
  body:has(#nav[hidden]) header.top :is(#pageTitle, #pageSub) { display: none !important; }

  /* --- vùng nội dung: tên trang đã lên thanh trên → ẩn h1 trùng trong trang, giữ dòng mô tả và các nút --- */
  body:not(.ckv):has(#nav:not([hidden])) main#app { padding-top: 6px; }
  body:has(#nav:not([hidden])) main#app > :is(.bar, .rbar):first-child .ttl > h1 { display: none; }
  body:has(#nav:not([hidden])) main#app > :is(.bar, .rbar):first-child .ttl > span { font-size: 15px; color: var(--sub); }
  body:has(#nav:not([hidden])) main#app > :is(.bar, .rbar):first-child { margin-top: 0; min-height: 0; }
  .chips { top: var(--header-h); }
}
/* máy tính bảng dọc (601–1023): thanh hẹp hơn một chút, ô tìm chỉ còn biểu tượng */
@media (min-width: 601px) and (max-width: 1023px) {
  :root { --side-w: 100px; --header-h: 84px; }
  body.ui-navmin { --side-w: 100px; }
  nav#nav { padding-left: 6px; padding-right: 6px; }
  nav#nav button[data-view] { min-height: 62px; }
  header.top { padding: 0 20px 0 calc(var(--side-w) + 20px); }
  header.top :is(#pageTitle, .ptitle) { font-size: 28px; }
  header.top #pageSub { display: none; }
  header.top :is(#pageTitle, .ptitle) { margin-right: auto; }
  header.top #uiFind { min-width: 0; width: 56px; padding: 0; justify-content: center; }
  header.top #uiFind :is(span, kbd) { display: none; }
  header.top .me .nm { display: none; }
}

/* ================= B. Điện thoại (≤ 600px): thanh dưới theo bản mẫu ================= */
@media (max-width: 600px) {
  #tabbar { background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(21,21,21,.06); }
  #tabbar button { color: var(--muted); font-weight: 600; }
  #tabbar button.on { color: var(--text); background: none; }
  #tabbar button.on::before { content: none; }
  #tabbar button.on :is(svg, .ti, i):first-child { background: var(--yellow); color: var(--on-accent, var(--black)); border-radius: 12px; padding: 4px 10px; box-sizing: content-box; }
  header.top #pageSub { display: none; }
}

/* ================= C. Kiểu chung theo bản mẫu ================= */
:root { --radius: 14px; }
.panel, .card { border-radius: var(--r-lg, 16px); }
.btn { border-radius: var(--r-md, 12px); font-weight: 600; }
.btn.primary { box-shadow: none; }
.hvchip, .chip3 { font-weight: 600; }
@media print { nav#nav, header.top .brand { display: none !important; } header.top { padding-left: 0 !important; } }

/* ================= PHẦN 2. Trang « Hôm nay » theo bản mẫu (today.js: .t2grid, .t2hero, .t2tiles, .t2acts, .t2todo, .t2row) ================= */
.t2grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.t2col { display: grid; gap: 18px; min-width: 0; }
.t2col > .panel, .t2side > .panel { margin-bottom: 0; }
.t2side { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 1100px) { .t2grid { grid-template-columns: minmax(0, 1fr) 420px; } .t2side { position: sticky; top: calc(var(--header-h) + 8px); } }
/* ô số liệu lớn: Tổng thu | MBS | PT */
.t2hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: hidden; box-shadow: var(--sh-1); }
.t2hero > * { padding: 22px 24px; border-left: 1px solid var(--line); min-width: 0; }
.t2hero > :first-child { border-left: 0; }
.t2main { background: linear-gradient(140deg, var(--surface) 0%, var(--accent-soft) 100%); }
.t2lb { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--sub); }
.t2lb i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--black)); flex: none; }
.t2big { font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.t2mid { font-size: 31px; font-weight: 700; line-height: 1.2; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.t2cap { font-size: 15px; color: var(--muted); margin-top: 8px; }
.t2hero .track { margin-top: 14px; }
/* ô số nhỏ */
.t2tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.t2tile { border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 14px 16px; background: var(--surface); min-width: 0; }
.t2tile b { display: block; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.t2tile span { font-size: 16px; color: var(--sub); }
/* nút việc chính của lễ tân */
.t2acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.t2a { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--r-lg, 16px); background: var(--surface); border: 1px solid var(--line); font: inherit; font-size: 19px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.t2a:hover { border-color: var(--black); transform: translateY(-2px); box-shadow: var(--sh-2); }
.t2a:active { transform: none; }
.t2a:focus-visible { outline: none; box-shadow: var(--ring); }
.t2a > i { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: var(--soft); font-style: normal; font-size: 24px; flex: none; }
.t2a > i svg { width: 26px; height: 26px; }
.t2a small { display: block; font-weight: 500; font-size: 15.5px; color: var(--muted); margin-top: 2px; }
.t2a.pri { background: var(--black); border-color: var(--black); color: #fff; }
.t2a.pri > i { background: var(--yellow); color: var(--on-accent, var(--black)); }
.t2a.pri small { color: #C9C9C2; }
/* hàng: vừa vào cửa, cần làm */
.t2row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); min-width: 0; }
.t2row:first-of-type { border-top: 0; padding-top: 2px; }
.t2row .tx { flex: 1; min-width: 0; }
.t2row .tx b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2row .tx span { display: block; font-size: 15.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2ic { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--soft); color: var(--sub); font-style: normal; }
.t2ic::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.t2ic[data-k="exp"] { background: var(--danger-soft); color: var(--danger); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.t2ic[data-k="soon"] { background: #FFF0DB; color: #B45309; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.t2ic[data-k="chat"] { background: #E6EEFD; color: var(--mbs); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L3 21l1.9-6.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.t2ic[data-k="shift"], .t2ic[data-k="debt"] { background: #E4F3EA; color: var(--good); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.t2todo h3 small { margin-left: 6px; }
@media (max-width: 900px) { .t2hero { grid-template-columns: minmax(0, 1fr); } .t2hero > * { border-left: 0; border-top: 1px solid var(--line); } .t2hero > :first-child { border-top: 0; } }
@media (max-width: 600px) {
  .t2grid, .t2col, .t2side { gap: 12px; }
  .t2hero > * { padding: 14px 16px; } .t2big { font-size: 30px; } .t2mid { font-size: 22px; } .t2lb, .t2cap { font-size: 13px; }
  .t2tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .t2tile { padding: 10px 12px; } .t2tile b { font-size: 20px; } .t2tile span { font-size: 12.5px; }
  .t2acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .t2a { padding: 12px; gap: 10px; font-size: 14.5px; } .t2a > i { width: 40px; height: 40px; border-radius: 12px; } .t2a small { font-size: 12px; }
  .t2row { gap: 10px; padding: 10px 0; } .t2row .tx span { font-size: 12.5px; } .t2ic { width: 36px; height: 36px; border-radius: 10px; } .t2ic::before { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .t2a { transition: none; } }

/* ---- PHẦN 2b: khớp với trang Hôm nay thật của Fullstack (today.js 11/10) ---- */
/* không có việc cần làm → cột phải ẩn, cột chính rộng hết */
.t2grid:has(> #t2side[hidden]), .t2grid:not(:has(> .t2side)) { grid-template-columns: minmax(0, 1fr); }
/* ô lớn dùng thanh KPI sẵn có (.tkpi) và nhãn tăng giảm sẵn có (.dl) */
.t2hero .tkpi { margin-top: 14px; } .t2hero .dl { font-size: 15px; }
.t2hero > :only-child { border-left: 0; }
.t2hero:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.t2big, .t2mid { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2cell .t2lb i, .t2main .t2lb i { background: var(--c, var(--black)); }
.t2tile { border-left: 4px solid var(--c, var(--line)); }
.t2tile small { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.t2tile .dl { margin-top: 6px; }
.panel h3 > #t2All, .panel h3 > .linkbtn { margin-left: auto; font-size: 15px; font-weight: 600; }
.panel:has(> h3 > #t2All) > h3 { display: flex; align-items: center; gap: 8px; }
/* biểu tượng 4 nút việc chính của lễ tân + việc "chưa ký HĐ giấy" */
.t2a > i[data-ic] { font-size: 0; }
.t2a > i[data-ic]::before { content: ""; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.t2a > i[data-ic="scan"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208V6a2%202%200%200%201%202-2h2M16%204h2a2%202%200%200%201%202%202v2M20%2016v2a2%202%200%200%201-2%202h-2M8%2020H6a2%202%200%200%201-2-2v-2%27%2F%3E%3Cpath%20d%3D%27M8%208h3v3H8zM13%2013h3v3h-3zM13%208h3M8%2013v3%27%2F%3E%3C%2Fsvg%3E"); }
.t2a > i[data-ic="userplus"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M3%2020c1-3.8%203.7-5.6%207-5.6%201.5%200%202.8.4%203.9%201.1M18%2013v6M15%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.t2a > i[data-ic="cash"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6.5%209.5v5M17.5%209.5v5%27%2F%3E%3C%2Fsvg%3E"); }
.t2a > i[data-ic="chat"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a8%208%200%200%201-11.6%207.1L3%2021l1.9-6.4A8%208%200%201%201%2021%2012z%27%2F%3E%3C%2Fsvg%3E"); }
.t2ic[data-k="sign"] { background: #EDE7FB; color: var(--contracts, #7C3AED); --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203.5h7l4%204V19a1.5%201.5%200%200%201-1.5%201.5h-9.5A1.5%201.5%200%200%201%205.5%2019V5A1.5%201.5%200%200%201%207%203.5z%27%2F%3E%3Cpath%20d%3D%27M14%203.5V8h4M8.5%2016c1.2-2.2%202-2.2%202.6-.6.5%201.3%201.1%201.3%201.9%200%20.5-.8%201.2-.8%202%20.2%27%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 600px) { .t2a > i[data-ic]::before { width: 22px; height: 22px; } .t2hero .dl, .panel h3 > #t2All { font-size: 12.5px; } .t2tile small { font-size: 11.5px; } .t2big, .t2mid { white-space: normal; } }
/* nhãn tăng / giảm trong ô lớn và ô nhỏ: viên gọn một dòng */
.t2hero .dl, .t2tile .dl { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.t2hero .dl.up, .t2tile .dl.up { background: #E4F3EA; color: var(--good); }
.t2hero .dl.down, .t2tile .dl.down, .t2hero .dl.dn, .t2tile .dl.dn { background: var(--danger-soft); color: var(--danger); }
.t2tile .dl { font-size: 13.5px; padding: 1px 8px; }
.t2tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.t2tile span { display: block; }
.t2tile .dl span, .t2hero .dl span { display: inline; font-size: inherit; color: inherit; }

/* ================= PHẦN 3. Hội viên + Check-in theo bản mẫu (chỉ CSS, không đổi mã trang) ================= */
/* --- Hội viên (danh sách): bộ lọc thành hàng viên chọn phía trên bảng ở mọi cỡ màn hình (trước đây là cột trái trên máy tính) --- */
@media (min-width: 901px) {
  .gmwrap.hvgm { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hvgm .gmside .gmsech { display: none; }
  .hvgm .gmside .gmsec { margin: 0; padding: 0; border: 0; }
  .hvgm .gmside { display: block; position: static; background: none; border: 0; padding: 0; max-height: none; overflow: visible; box-shadow: none; }
  .hvgm .gmside > :is(h4, .gmh, b, .gmsidehd) { display: none; }
  .hvgm .gmside .hvchips { flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0 0 8px; padding: 0; }
  .hvgm .gmside .hvchip { justify-content: flex-start; gap: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); min-height: 44px; padding: 0 18px; font-size: 17px; }
  .hvgm .gmside .hvchip.on { background: var(--black); border-color: var(--black); color: #fff; }
  .hvgm .gmside .hvchip :is(b, .n, span:last-child) { opacity: .7; }
}
.hvgm .gmtbl { border-radius: var(--r-lg, 16px); }
.hvgm .gmtbl tbody tr { transition: background var(--t); }
.hvgm .gmtbl .hvav, .hvgm .gmtbl .uav { border-radius: 14px; }
/* --- Check-in: thẻ quét và thẻ hội viên theo bản mẫu --- */
body.ckv .ckcam, body.ckv .cam-off, body.ckv .ckscan { border-radius: var(--r-lg, 16px); }
body.ckv .ckf2 .search { border-radius: var(--r-md, 12px); }
body.ckv .ckstats > *, body.ckv .ckst4 > * { border-radius: var(--r-md, 12px); }

/* Check-in: thẻ kết quả quét (#res > div; trạng thái .rc-ok / .rc-warn / .rc-bad / .rc-in đã tự đặt --c) — viền màu phía trên, bo góc theo bản mẫu */
body.ckv #res > :is(.rc-ok, .rc-warn, .rc-bad, .rc-in) { border-top: 4px solid var(--c, var(--line)); border-radius: var(--r-lg, 16px); }

/* ================= PHẦN 4. Thu chi theo bản mẫu (tien.js: .t2acts.tcacts, .tctiles > .lead) ================= */
.t2a > i[data-ic="out"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203.5h9l3.5%203.5V19a1.5%201.5%200%200%201-1.5%201.5H6A1.5%201.5%200%200%201%204.5%2019V5A1.5%201.5%200%200%201%206%203.5z%27%2F%3E%3Cpath%20d%3D%27M12%209v7M9%2013l3%203%203-3%27%2F%3E%3C%2Fsvg%3E"); }
.tcacts { grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); margin-bottom: 16px; }
.tctiles > .lead { background: linear-gradient(140deg, var(--surface) 0%, var(--accent-soft) 100%); border-color: rgba(var(--yellow-rgb, 244,207,51), .6); }
.tctiles > .lead b, .tctiles > .lead .v { font-size: 1.25em; }
@media (max-width: 600px) { .tcacts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; } }

/* ================= Đợt trau chuốt 11/10 (Tri chọn mục 1 + 3) ================= */
/* --- Mục 3a: logo vuông tự tải lên (theme.js đặt --ifs-logo-sq + html.ifs-logo-sq) — trống = biểu tượng IFS --- */
@media (min-width: 601px) {
  html.ifs-logo-sq header.top .brand::before { background: #fff var(--ifs-logo-sq) center / contain no-repeat; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rail-ink) 14%, transparent); }
}
/* --- Mục 3b: màn hình thấp (laptop 768px…): thanh biểu tượng tự gọn để 16 mục của Admin vừa một màn hình, không phải cuộn --- */
@media (min-width: 601px) and (max-height: 840px) {
  :root { --header-h: 80px; }
  nav#nav { padding-top: calc(var(--header-h) - 2px); padding-bottom: 6px; gap: 1px; }
  nav#nav button[data-view], body.ui-navmin nav#nav button[data-view] { min-height: 51px; padding: 5px 2px 4px; gap: 2px; border-radius: 13px; }
  nav#nav button[data-view]::before { width: 22px; height: 22px; }
  nav#nav button[data-view] > .nl, nav#nav button[data-view] > .nl[data-short]::after { font-size: 12.5px; }
  nav#nav button[data-view].nsep { margin-top: 7px; }
  nav#nav button[data-view].nsep::after { top: -4px; }
  nav#nav button[data-view].on > .nl::before { top: 9px; bottom: 9px; }
  nav#nav .badge, body.ui-navmin nav#nav .badge { top: 2px; right: 16px; min-width: 19px; height: 19px; line-height: 19px; font-size: 11.5px; }
  nav#nav:has(button.nav-bottom:not([hidden]))::after { min-height: 4px; }
  header.top .brand::before { width: 54px; height: 54px; border-radius: 16px; }
  header.top :is(#pageTitle, .ptitle) { font-size: 29px; }
  header.top #pageSub { margin-bottom: 22px; font-size: 16.5px; }
  header.top #uiFind { height: 50px; }
  header.top .me .av { width: 42px; height: 42px; }
}
/* --- Mục 1: canh lề — nội dung trang thẳng hàng với tên trang ở thanh trên (trước đây nội dung thụt vào giữa) --- */
@media (min-width: 601px) {
  body:not(.ckv):not(.kiosk):has(#nav:not([hidden])) main#app { max-width: 1840px; margin-left: var(--side-w); margin-right: 0; padding-left: 32px; padding-right: 32px; }
  header.top :is(#pageTitle, .ptitle) { line-height: 1.3; padding-bottom: 2px; }
}
@media (min-width: 601px) and (max-width: 1023px) { body:not(.ckv):not(.kiosk):has(#nav:not([hidden])) main#app { padding-left: 20px; padding-right: 20px; } }
/* Tổng quan (report.js): ô lớn và hàng ô nhỏ nằm trực tiếp trong mục, không có khung panel → tự tạo khoảng cách trên dưới */
.t2hero + .t2tiles { margin-top: 14px; }
:is(.t2hero, .t2tiles) + :not(.t2tiles):not(.t2hero) { margin-top: 16px; }
.t2col > :is(.t2hero, .t2tiles), .panel > .t2tiles { margin-top: 0; }
.t2col > :is(.t2hero, .t2tiles) + :not(.t2tiles):not(.t2hero) { margin-top: 0; }
@media (max-width: 600px) { .t2hero + .t2tiles { margin-top: 8px; } :is(.t2hero, .t2tiles) + :not(.t2tiles):not(.t2hero) { margin-top: 10px; } .t2col > :is(.t2hero, .t2tiles) + :not(.t2tiles):not(.t2hero) { margin-top: 0; } }

/* ================= Sửa bố cục màn hình rộng (Tri báo 11/10, xem trên Chrome 1920px) =================
   Trước: nội dung dừng ở 1840px nên màn hình 1920 trống 1/5 bên phải; riêng Check-in lại bị đẩy vào giữa, lệch với tên trang.
   Sau: mọi trang chạy hết bề ngang, mép trái thẳng với tên trang. */
@media (min-width: 601px) {
  body:not(.ckv):not(.kiosk):has(#nav:not([hidden])) main#app { max-width: none; }
  /* Check-in tự phóng lại 100% (zoom ngược) nên bề rộng thanh biểu tượng phải nhân với hệ số thu nhỏ */
  body.ckv:has(#nav:not([hidden])) main#app, body.ckv:has(#nav:not([hidden])) #app:has(.ckpc) { max-width: none; margin-left: calc(var(--side-w) * var(--ifs-zoom, 1)); margin-right: 0; padding-left: calc(32px * var(--ifs-zoom, 1)); padding-right: calc(32px * var(--ifs-zoom, 1)); }
  /* trang chỉ có biểu mẫu / danh sách ngắn: không kéo ô nhập dài hết màn hình */
  main#app > :is(form, .auth, .narrow), main#app .cuform { max-width: 1500px; }
  /* cột "Cần làm" rộng hơn một chút khi màn hình rất rộng */
}
@media (min-width: 1700px) { .t2grid { grid-template-columns: minmax(0, 1fr) 480px; } }
/* nhãn so sánh trong ô nhỏ: cho xuống dòng thay vì cắt bằng "…" (ở Tổng quan bị cắt mất chữ "tháng trước") */
.t2tile .dl { white-space: normal; overflow: visible; text-overflow: clip; border-radius: 12px; line-height: 1.3; padding: 2px 8px; }