/* =====================================================================================================
   IFS OPS Web · Lớp giao diện chung v3 (09/10/2026, thread "Nâng cấp giao diện Web")
   Nạp SAU style.css + gm.css. Chỉ đổi cách trình bày (màu, bo góc, bóng, hiệu ứng, bố cục theo thiết bị) —
   không đổi chức năng. Hiệu ứng chuyển trang / số chạy nằm trong ui.js.
   Giữ nguyên quyết định cũ: thu nhỏ cố định 70% (uiscale.js), Hội viên kiểu GymMaster, Check-in (body.ckv) do thread check-in lo bố cục.
   ===================================================================================================== */

:root {
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --radius: 14px;
  --line-strong: #D6D6D1;
  --sh-1: 0 1px 2px rgba(21,21,21,.04), 0 1px 1px rgba(21,21,21,.03);
  --sh-2: 0 1px 2px rgba(21,21,21,.04), 0 4px 14px rgba(21,21,21,.06);
  --sh-3: 0 2px 6px rgba(21,21,21,.06), 0 14px 36px rgba(21,21,21,.12);
  --sh-pop: 0 8px 28px rgba(21,21,21,.14), 0 2px 6px rgba(21,21,21,.06);
  --ring: 0 0 0 3px rgba(244,207,51,.45);
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .12s; --t: .2s; --t-slow: .32s;
  --input-line: #D9D9D4;
  --top-bg: #121212;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line-strong: #3A3A37; --input-line: #34342F;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 10px rgba(0,0,0,.45); --sh-3: 0 14px 36px rgba(0,0,0,.55); --sh-pop: 0 10px 30px rgba(0,0,0,.6);
    --top-bg: #0A0A0A;
  }
}

/* ---------- nền tảng ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
button, .btn, [role="button"], summary, label.rad, .gmopt { touch-action: manipulation; }
::selection { background: rgba(244,207,51,.55); color: var(--black); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--yellow); } }
.n, td.n, th.n, .v, .big, .num { font-variant-numeric: tabular-nums; }

/* thanh cuộn mảnh (máy tính) */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #C9C9C4 transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #CFCFCA; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: #A9A9A4; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- thanh trên ---------- */
.top { background: var(--top-bg); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.08); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--yellow) 0, var(--yellow) 64px, transparent 64px); opacity: .9; pointer-events: none; }
.brand-logo { transition: opacity var(--t); }
.me { transition: background var(--t-fast) var(--ease); }
.me .av { box-shadow: 0 0 0 2px rgba(244,207,51,.25); transition: box-shadow var(--t) var(--ease); }
.me:hover .av { box-shadow: 0 0 0 3px rgba(244,207,51,.4); }
.badge { box-shadow: 0 0 0 2px var(--surface); }

/* menu tài khoản */
.menu { border-radius: var(--r-md); box-shadow: var(--sh-pop); transform-origin: top right; animation: ui-pop var(--t) var(--ease-out); }
.menu button { transition: background var(--t-fast); }

/* ---------- menu dọc (máy tính / máy tính bảng) ---------- */
@media (min-width: 601px) {
  nav#nav { background: var(--surface); border-right: 1px solid var(--line); scrollbar-width: none; }
  nav#nav::-webkit-scrollbar { display: none; }
  nav#nav::before { text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); opacity: .8; }
  nav#nav button { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  nav#nav button::before { transition: background var(--t-fast) var(--ease), transform var(--t) var(--ease); }
  nav#nav button:hover::before { background: var(--text); }
  nav#nav button.on { background: var(--accent-soft); color: var(--text); }
  nav#nav button.on::after { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--yellow); animation: ui-grow-y var(--t) var(--ease-out); }
  nav#nav button.on::before { background: var(--black); }
  nav#nav button:active::before { transform: scale(.9); }
}
@media (prefers-color-scheme: dark) and (min-width: 601px) { :root:not([data-theme="light"]) nav#nav button.on::before { background: var(--yellow); } }
@media (min-width: 601px) and (max-width: 1023px) {
  nav#nav button.on::after { left: -6px; }
}
/* biểu tượng "Lịch dạy" (trước đây thiếu → hiện ô vuông xám) — lấy từ TAB_ICON.lich trong tabbar.js */
#nav button[data-view="lich"] { --ic: 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%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275%27%20width%3D%2717%27%20height%3D%2715%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%209.5h17M8%203v4M16%203v4M8%2013.5h3M8%2016.5h6%27%2F%3E%3C%2Fsvg%3E"); }

/* biểu tượng "Thu chi" (mục mới của thread NextXGymmaster) — ví tiền */
#nav button[data-view="thuchi"] { --ic: 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%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207.5A2.5%202.5%200%200%201%206.5%205H18v3%27%2F%3E%3Crect%20x%3D%273.5%27%20y%3D%278%27%20width%3D%2717%27%20height%3D%2711.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M20.5%2012h-4a1.75%201.75%200%200%200%200%203.5h4%27%2F%3E%3C%2Fsvg%3E"); }

/* biểu tượng "Nhân sự" (mục quản lý của thread Fullstack Web) — cặp hồ sơ */
#nav button[data-view="nhansu"] { --ic: 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%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%277%27%20width%3D%2717%27%20height%3D%2712.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M9%207V5.5A1.5%201.5%200%200%201%2010.5%204h3A1.5%201.5%200%200%201%2015%205.5V7M3.5%2012.5h17M11%2012.5v1.5h2v-1.5%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- vùng nội dung: dùng hết bề ngang còn lại, căn giữa khi màn hình rất rộng ----------
   (uiscale.js đặt main#app max-width 1100px/0.7 — ở đây chỉ áp khi có menu dọc, trừ trang Check-in body.ckv) */
@media (min-width: 601px) {
  body:not(.ckv):not(.kiosk):has(#nav:not([hidden])) main#app {
    max-width: 1680px;
    margin-left: max(var(--side-w), calc(var(--side-w) + (100vw / var(--ifs-zoom, 1) - var(--side-w) - 1680px) / 2));
    margin-right: 0;
  }
}

/* ---------- nút ---------- */
.btn {
  border-color: var(--line-strong); border-radius: var(--r-sm); font-weight: 500; line-height: 1.2;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
  box-shadow: var(--sh-1); -webkit-user-select: none; user-select: none;
}
.btn:hover:not(:disabled) { border-color: #BDBDB8; background: var(--hover); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--black); }
.btn.primary { box-shadow: 0 1px 2px rgba(122,83,0,.18), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(196,157,18,.32), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn.primary.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); color: #fff; }
.btn:disabled { box-shadow: none; filter: grayscale(.3); }
.btn.link, .link, .linkbtn, .gmlink { box-shadow: none; transition: color var(--t-fast); }
.btn.link:active, .link:active { transform: none; }
.btn.sm { border-radius: var(--r-xs); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover:not(:disabled) { border-color: #4A4A46; } }

/* nút đang xử lý: thêm class "busy" cho nút (dùng khi cần) */
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--text) transparent var(--text) transparent; animation: ui-spin .7s linear infinite; }
.btn.primary.busy::after { border-color: var(--black) transparent var(--black) transparent; }

/* ---------- khối / thẻ ---------- */
.panel { border-radius: var(--radius); box-shadow: var(--sh-1); }
.panel h2, .panel h3 { letter-spacing: -.1px; }
.card, .rc, .kc { border-radius: var(--radius); box-shadow: var(--sh-1); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
@media (hover: hover) {
  .card:hover, .rc:hover, .kc:hover { box-shadow: var(--sh-2); }
}
.card .v, .rc .v, .kc .big { letter-spacing: -.4px; }
@media (min-width: 561px) { .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.chart svg { max-height: 360px; }
.card .k, .rc .k { font-weight: 500; }
.rc.hero { background: linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 40%, var(--surface)) 100%); }

/* thẻ bấm được: nổi nhẹ khi rê chuột */
.kindgrid button, .slipk, .ckmode button, .crow, .hvrow:not(.hvhead), .pmrow, .morelist button[data-mv] {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.kindgrid button { border-radius: var(--r-md); box-shadow: var(--sh-1); }
@media (hover: hover) {
  .kindgrid button:hover, .slipk:hover { transform: translateY(-2px); box-shadow: var(--sh-2); background: var(--surface); }
}
.kindgrid button:active, .slipk:active, .ckmode button:active { transform: scale(.985); }

/* ---------- bảng ---------- */
body:not(.ckv) table:not(.xl) thead th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
table:not(.xl) tbody tr td { transition: background var(--t-fast); }
table:not(.xl) tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap { -webkit-overflow-scrolling: touch; }
.panel > .tbl-wrap:first-child table thead th:first-child, .gmtbl table thead th:first-child { border-top-left-radius: var(--r-sm); }
.gmtbl { border-radius: var(--radius); box-shadow: var(--sh-1); }
.xl-wrap { box-shadow: var(--sh-1); }
.hvlist { border-radius: var(--radius); }
.hvhead { font-weight: 600; }

/* ---------- ô nhập ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast);
}
label.f input, label.f select, label.f textarea, .fcell input, .fcell select, .fcell textarea, .search, .bar select, .period select,
.period input[type=date], .daynav input[type=date], .gmsel, .gmdates input, .hrfilter select, .hrfilter input, .ufilter select, .rqa select, .user .ctl select, .user .ctl input {
  border-color: var(--input-line); border-radius: var(--r-sm); background-color: var(--surface);
}
:is(label.f, .fcell) :is(input, select, textarea):hover, .search:hover, .gmsel:hover, .bar select:hover, .period select:hover { border-color: #B9B9B4; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus, .search:focus {
  outline: none !important; border-color: var(--black) !important; box-shadow: var(--ring);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .search):focus { border-color: var(--yellow) !important; } }
::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input.search[type=search] { padding-left: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px 50%; background-size: 16px; }
input[type=checkbox], input[type=radio] { accent-color: var(--black); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--yellow); } }
.err:not(:empty) { animation: ui-shake .32s var(--ease); }

/* ---------- thẻ chọn / nút chọn ---------- */
.tabs button, .subtabs button, .sheet-tabs button, .seg button, .chips2 button, .hvchip, .rad, .who-pick button, .chips a {
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.tabs button, .subtabs button { border-radius: var(--r-sm) var(--r-sm) 0 0; }
@media (hover: hover) {
  .tabs button:not(.on):hover, .subtabs button:not(.on):hover { color: var(--text); background: var(--hover); }
  .chips2 button:not(.on):hover, .hvchip:not(.on):hover, .rad:hover, .chips a:hover { border-color: var(--line-strong); background: var(--hover); }
}
.subtabs .n, .tabs .n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--soft); font-size: 11.5px; line-height: 18px; text-align: center; }
.subtabs button.on .n { background: var(--yellow); color: var(--black); }
.seg { border-radius: var(--r-sm); }
.seg button.on { box-shadow: var(--sh-1); }
.who-pick { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- thông báo / ghi chú ---------- */
.note { border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); }
.pill, .pill2 { font-weight: 600; letter-spacing: .01em; }
.hvnote, .warnp { border-radius: var(--r-sm); }

/* ---------- đang tải / trống ---------- */
.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13.5px; }
.loading::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--yellow); animation: ui-spin .75s linear infinite; }
.empty { font-size: 14px; line-height: 1.6; }
.panel > .empty:only-child, .panel > .empty:first-child { padding: 36px 16px; }

/* ---------- hộp thoại / bảng trượt / thông báo nổi ---------- */
.modal, .sheet-bg { animation: ui-fade var(--t) var(--ease); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overscroll-behavior: contain; }
.mbox { animation: ui-pop var(--t-slow) var(--ease-out); border: 1px solid var(--line); }
.sheet { animation: ui-sheet var(--t-slow) var(--ease-out); box-shadow: var(--sh-3); overscroll-behavior: contain; }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: -8px auto 12px; }
@media (min-width: 700px) { .sheet { animation-name: ui-pop; } .sheet::before { display: none; } }
#toast { transform: translate(-50%, 14px) scale(.98); transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-out); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; }
#toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
#toast.show { transform: translate(-50%, 0) scale(1); }

/* ---------- đăng nhập ---------- */
main#app:has(> .auth) { min-height: calc(100vh / var(--ifs-zoom, 1) - var(--header-h)); }
body:has(main#app > .auth) {
  background:
    radial-gradient(900px 480px at 50% -120px, rgba(244,207,51,.20), transparent 70%),
    var(--workspace);
}
.auth { box-shadow: var(--sh-3); border-radius: var(--r-xl); animation: ui-rise var(--t-slow) var(--ease-out); position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--yellow); }
.auth h1 { display: flex; align-items: center; gap: 10px; }
.auth h1::before { content: ""; width: 34px; height: 34px; border-radius: 10px; background: var(--black) url("/brand/icon-256.png") center / 70% no-repeat; flex: none; }
.who-pick { animation: ui-rise var(--t-slow) var(--ease-out); }
@media (max-width: 600px) {
  .auth, .who-pick { margin-left: auto !important; margin-right: auto !important; width: calc(100% - 24px); max-width: 440px; }
}

/* ---------- chuyển trang (ui.js thêm .ui-enter cho #app khi đổi mục) ---------- */
main#app.ui-enter > * { animation: ui-rise .34s var(--ease-out) both; }
main#app.ui-enter > *:nth-child(2) { animation-delay: .03s; }
main#app.ui-enter > *:nth-child(3) { animation-delay: .06s; }
main#app.ui-enter > *:nth-child(4) { animation-delay: .09s; }
main#app.ui-enter > *:nth-child(n+5) { animation-delay: .12s; }
/* thẻ số liệu xuất hiện lần lượt */
main#app.ui-enter :is(.cards, .rcards, .kgrid, .kindgrid, .hvtiles) > * { animation: ui-rise .4s var(--ease-out) both; }
main#app.ui-enter :is(.cards, .rcards, .kgrid, .kindgrid, .hvtiles) > *:nth-child(2) { animation-delay: .04s; }
main#app.ui-enter :is(.cards, .rcards, .kgrid, .kindgrid, .hvtiles) > *:nth-child(3) { animation-delay: .08s; }
main#app.ui-enter :is(.cards, .rcards, .kgrid, .kindgrid, .hvtiles) > *:nth-child(4) { animation-delay: .12s; }
main#app.ui-enter :is(.cards, .rcards, .kgrid, .kindgrid, .hvtiles) > *:nth-child(n+5) { animation-delay: .16s; }
/* thanh tiến độ KPI chạy từ 0 */
main#app.ui-enter .track .fill, main#app.ui-enter .bl .bar div { animation: ui-fill .8s var(--ease-out) both .1s; transform-origin: left center; }
main#app.ui-enter .chart svg rect { animation: ui-bar .6s var(--ease-out) both .08s; transform-box: fill-box; transform-origin: bottom; }

/* ---------- máy tính bảng (601–1023 px) ---------- */
@media (min-width: 601px) and (max-width: 1023px) {
  .bar, .rbar { gap: 8px; }
  .gmwrap { grid-template-columns: 200px minmax(0, 1fr); }
  .btn { min-height: 42px; }
  .modal .mbox { max-width: 520px; }
}

/* ---------- điện thoại (≤ 600 px · iOS / Android) ---------- */
@media (max-width: 600px) {
  .top { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .top::after { background: linear-gradient(90deg, var(--yellow) 0, var(--yellow) 40px, transparent 40px); }
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  #tabbar { -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); background: color-mix(in srgb, var(--surface) 88%, transparent); }
  #tabbar button { transition: color var(--t-fast) var(--ease), background var(--t) var(--ease), transform var(--t-fast) var(--ease); }
  #tabbar button:active { transform: scale(.94); }
  #tabbar button.on svg { animation: ui-bounce .36s var(--ease-out); }
  .panel, .card, .rc, .kc { border-radius: var(--r-md); }
  .btn { border-radius: 10px; }
  .modal { align-items: end; padding: 0; }
  .modal .mbox { border-radius: var(--r-xl) var(--r-xl) 0 0; max-width: none; padding-bottom: calc(22px + env(safe-area-inset-bottom)); animation-name: ui-sheet; max-height: calc(100vh / var(--ifs-zoom, 1) - 40px); }
  .sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .menu { left: 12px; right: 12px; min-width: 0; }
  /* bảng rộng: vuốt ngang mượt, có bóng ở mép báo còn nội dung */
  .tbl-wrap, .hrscroll { background:
      linear-gradient(90deg, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(270deg, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) left / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right / 10px 100% no-repeat scroll; }
}
/* điện thoại nằm ngang: thanh dưới gọn */
@media (max-width: 920px) and (max-height: 500px) and (orientation: landscape) {
  #tabbar button { flex-direction: row; justify-content: center; gap: 6px; padding: 5px 2px; }
  #tabbar button svg { width: 20px; height: 20px; }
}
/* màn hình rất rộng */
@media (min-width: 1800px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---------- đợt 2: chi tiết nhỏ ---------- */
/* ô "Mục khác" (điện thoại): mục đang mở nền vàng nhạt */
.morelist button[data-mv] { border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.morelist button[data-mv].on { background: var(--accent-soft); border-top-color: transparent; }
.morelist button[data-mv].on + button[data-mv] { border-top-color: transparent; }
.morelist button[data-mv].on svg { color: var(--warn); }
.morelist button[data-mv]:active { background: var(--soft); }
/* vòng tròn chữ viết tắt hội viên: tô màu nhẹ xen kẽ cho dễ nhìn */
.hvrow:nth-child(5n+1) .hvav:not(.big) { background: #E8EEFD; color: #2B4FB8; }
.hvrow:nth-child(5n+2) .hvav:not(.big) { background: #FCE7F1; color: #A3195B; }
.hvrow:nth-child(5n+3) .hvav:not(.big) { background: #E3F4EC; color: #17653D; }
.hvrow:nth-child(5n+4) .hvav:not(.big) { background: #FFF3BD; color: #7A5300; }
.hvrow:nth-child(5n+5) .hvav:not(.big) { background: #EFE7FD; color: #5B2DB0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hvrow .hvav:not(.big) { background: var(--soft); color: var(--sub); } }
.hvav.big { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--yellow); }

/* mất mạng: dải báo trên cùng (ui.js bật / tắt) */
#uiNet { position: fixed; left: 50%; top: calc(var(--header-h) + 10px + env(safe-area-inset-top)); z-index: 70; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  background: var(--danger); color: #fff; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; box-shadow: var(--sh-pop);
  display: flex; align-items: center; gap: 8px; transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-out); max-width: calc(100vw / var(--ifs-zoom, 1) - 32px); width: max-content; }
#uiNet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ui-blink 1.2s ease-in-out infinite; }
#uiNet.show { opacity: 1; transform: translate(-50%, 0); }
#uiNet.ok { background: var(--good); }
#uiNet.ok::before { animation: none; }

/* nút lên đầu trang (trang dài) */
#uiTop { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 24px; z-index: 35; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-2); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t-fast); }
#uiTop.show { opacity: 1; transform: none; pointer-events: auto; }
#uiTop:hover { background: var(--hover); }
#uiTop:active { transform: scale(.92); }
@media (max-width: 600px) { #uiTop { bottom: calc(84px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } }
body.kiosk #uiTop, body.ckv #uiTop { display: none; }

/* ---------- đợt 3 ---------- */
/* menu dọc: chia nhóm Vận hành · Báo cáo · Dữ liệu · Quản trị bằng khoảng cách + vạch mảnh */
@media (min-width: 601px) {
  nav#nav :is(button[data-view="today"], button[data-view="today"][hidden] + button[data-view="me"], button[data-view="entries"], button[data-view="nhansu"]) { margin-top: 15px; }
  nav#nav :is(button[data-view="today"], button[data-view="today"][hidden] + button[data-view="me"], button[data-view="entries"], button[data-view="nhansu"]):not(.on)::after {
    content: ""; position: absolute; left: 12px; right: 12px; top: -9px; height: 1px; background: var(--line); }
  nav#nav button[data-view="nhansu"][hidden] + button[data-view="users"] { margin-top: 15px; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  nav#nav :is(button[data-view="today"], button[data-view="entries"], button[data-view="nhansu"]):not(.on)::after { left: 18px; right: 18px; }
}

/* trang trống: biểu tượng hộp nhẹ phía trên dòng chữ */
.panel > .empty:only-child::before, .panel > .empty:first-child::before, main#app > .empty::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 14px; background-color: var(--soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A39E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5l2.2-7A2 2 0 0 1 8.1 5h7.8a2 2 0 0 1 1.9 1.5l2.2 7'/%3E%3Cpath d='M4 13.5V18a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 20 18v-4.5h-4.5l-1 2h-5l-1-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px; }
.empty { color: var(--sub); }

/* nút chọn dạng viên thuốc (.rad): bỏ chấm tròn, mục đang chọn viền đen nền vàng nhạt */
.rad { position: relative; min-height: 34px; }
.rad input[type=radio], .rad input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.rad:has(input:checked) { background: var(--accent-soft); border-color: var(--black); }
.rad:has(input:focus-visible) { box-shadow: var(--ring); }

/* ô nhập sai sau khi người dùng đã nhập (không đỏ ngay khi mở form) */
:is(input, select, textarea):user-invalid { border-color: var(--danger) !important; }
:is(input, select, textarea):user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
/* ô số: bỏ nút tăng giảm nhỏ khó bấm */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=date], input[type=time], input[type=month] { min-height: 38px; }

/* số chờ duyệt trên menu: nhịp nhẹ để dễ thấy */
.badge:not([hidden]), #tabbar .tb, .morelist .tb { animation: ui-pulse 2.4s ease-in-out infinite; }

/* thông báo nổi theo loại (ui.js gắn .ok / .err) */
#toast.ok::before { background: #4ADE80; }
#toast.err { background: var(--danger); }
#toast.err::before { background: #fff; }

/* ---------- đợt 4 ---------- */
/* bảng trượt dài (thêm hợp đồng, phiếu…): tiêu đề dính trên, hàng nút Lưu / Huỷ dính dưới — không phải cuộn xuống mới thấy nút */
.sheet > h2:first-of-type { position: sticky; top: -18px; z-index: 3; background: var(--surface); margin: -18px -18px 12px; padding: 18px 18px 10px; }
.sheet:has(> h2:first-of-type)::before { position: sticky; top: -18px; z-index: 4; }
:is(.sheet > .ra:last-child, .sheet > form > .ra:last-child) {
  position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 3; background: var(--surface);
  margin: 14px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); box-shadow: 0 -8px 18px -12px rgba(21,21,21,.18); }
.sheet .ra .btn.primary { min-width: 120px; }

/* hồ sơ hội viên: ô số liệu có màu nhấn mảnh bên trái, ô cảnh báo đỏ rõ hơn */
.hvtiles > div { position: relative; background: var(--surface); box-shadow: var(--sh-1); }
.hvtiles > div::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--yellow); }
.hvtiles > div.bad { background: var(--danger-soft); }
.hvtiles > div.bad::before { background: var(--danger); }
.hvhero { box-shadow: var(--sh-2); }

/* bước 1 · 2 · 3 trong biểu mẫu: số tròn vàng */
.step b { background: var(--yellow); color: var(--black); }

/* ---------- đợt 5 ---------- */
/* (1) đăng nhập trên máy tính: chia đôi — bên trái khung thương hiệu đen, bên phải ô đăng nhập */
@media (min-width: 900px) {
  main#app:has(> .auth) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(32px, 6vw, 96px); align-items: start; max-width: 1180px !important; margin: 0 auto !important;
    padding: 6vh 32px; min-height: calc(100vh / var(--ifs-zoom, 1) - var(--header-h));
  }
  main#app:has(> .auth)::before {
    content: "Phần mềm vận hành phòng tập\A\A✓  Check-in hội viên bằng mã QR\A✓  Hợp đồng, thu chi, nhập liệu tại quầy\A✓  Báo cáo doanh số theo ngày, theo tháng";
    white-space: pre-line; grid-column: 1; grid-row: 2 / 4; align-self: stretch; min-height: 440px;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 44px 48px; border-radius: var(--r-xl);
    color: #E9E9E4; font-size: 18px; line-height: 1.75; font-weight: 500; box-shadow: var(--sh-3);
    background:
      url("/brand/logo-white.png") 44px 48px / 260px auto no-repeat,
      radial-gradient(520px 360px at 85% 8%, rgba(244,207,51,.30), transparent 70%),
      radial-gradient(420px 300px at 0% 100%, rgba(244,207,51,.12), transparent 70%),
      linear-gradient(160deg, #1D1D1B 0%, #121212 60%, #0B0B0B 100%);
    animation: ui-rise var(--t-slow) var(--ease-out);
  }
  main#app:has(> .auth) > .who-pick { grid-column: 2; grid-row: 2; margin: 0 0 14px !important; width: 100%; max-width: none; }
  main#app:has(> .auth) > .auth { grid-column: 2; grid-row: 3; margin: 0 !important; width: 100%; max-width: none; }
  main#app:has(> .auth) > :not(.who-pick):not(.auth) { grid-column: 2; }
}

/* (2) bảng rộng trên điện thoại → từng thẻ dọc (ui.js gắn class ui-cardable + nhãn cột cho từng ô) */
@media (max-width: 600px) {
  .tbl-wrap:has(> table.ui-cardable) { overflow: visible; margin: 0; padding: 0; background: none; }
  table.ui-cardable, table.ui-cardable tbody, table.ui-cardable tr, table.ui-cardable td { display: block; width: 100%; }
  table.ui-cardable thead { display: none; }
  table.ui-cardable tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 8px; background: var(--surface); box-shadow: var(--sh-1); }
  table.ui-cardable tr.mine { background: var(--accent-soft); }
  table.ui-cardable tr.total { background: var(--soft); border-color: var(--line-strong); }
  table.ui-cardable td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 !important; border: 0 !important;
    white-space: normal; text-align: right; background: none !important; font-size: 14.5px; position: static !important; }
  table.ui-cardable td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; flex: none; max-width: 55%; }
  table.ui-cardable td:first-child { grid-column: 1 / -1; display: block; text-align: left; font-size: 16px; font-weight: 700; padding: 2px 0 6px !important; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; }
  table.ui-cardable td:first-child::before { display: none; }
  table.ui-cardable td:empty, table.ui-cardable td[data-label=""]:not(:first-child)::before { display: none; }
}

/* (3) đang tải cả trang: khung xám mờ hình dạng trang thay cho vòng xoay */
main#app > .loading:only-child {
  display: block; color: transparent; font-size: 0; padding: 4px 0 0; min-height: 520px; position: relative;
  --sk: color-mix(in srgb, var(--text) 7%, transparent);
}
main#app > .loading:only-child::before {
  content: ""; display: block; width: min(320px, 50%); height: 30px; border-radius: 8px; border: 0; background: var(--sk); margin: 0 0 22px;
  animation: ui-sk 1.3s ease-in-out infinite;
}
main#app > .loading:only-child::after {
  content: ""; display: block; height: 470px; border-radius: 14px; animation: ui-sk 1.3s ease-in-out infinite .15s;
  background:
    linear-gradient(var(--sk) 0 0) 0 0 / calc(25% - 8px) 92px no-repeat,
    linear-gradient(var(--sk) 0 0) 33.333% 0 / calc(25% - 8px) 92px no-repeat,
    linear-gradient(var(--sk) 0 0) 66.666% 0 / calc(25% - 8px) 92px no-repeat,
    linear-gradient(var(--sk) 0 0) 100% 0 / calc(25% - 8px) 92px no-repeat,
    linear-gradient(var(--sk) 0 0) 0 110px / 100% 170px no-repeat,
    linear-gradient(var(--sk) 0 0) 0 298px / 100% 172px no-repeat;
}
@media (max-width: 600px) {
  main#app > .loading:only-child::after {
    background:
      linear-gradient(var(--sk) 0 0) 0 0 / calc(50% - 5px) 84px no-repeat,
      linear-gradient(var(--sk) 0 0) 100% 0 / calc(50% - 5px) 84px no-repeat,
      linear-gradient(var(--sk) 0 0) 0 94px / calc(50% - 5px) 84px no-repeat,
      linear-gradient(var(--sk) 0 0) 100% 94px / calc(50% - 5px) 84px no-repeat,
      linear-gradient(var(--sk) 0 0) 0 196px / 100% 130px no-repeat,
      linear-gradient(var(--sk) 0 0) 0 344px / 100% 126px no-repeat;
  }
}
@keyframes ui-sk { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- đợt 6 ---------- */
/* (1) thẻ số (Hôm nay, Tổng quan): mức tăng / giảm dạng viên màu, thanh KPI tháng trên thẻ doanh thu */
.rc .dl { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; width: fit-content; max-width: 100%; margin: 4px 0 2px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; line-height: 1.5; }
.rc .dl.up { background: color-mix(in srgb, var(--good) 12%, transparent); }
.rc .dl.down { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.rc .dl.eq { background: var(--soft); }
.rc .dl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc .k { font-weight: 600; color: var(--sub); }
.rc .k i { border-radius: 50%; }
.rc.hero .v { letter-spacing: -.8px; }
.tkpi { margin-top: 8px; }
.tkpi-t { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.tkpi-t i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--c, var(--black)); transform-origin: left center; }
.rc.hero .tkpi-t i { background: var(--black); }
.tkpi-t b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--gold); }
.tkpi span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkpi span b { color: var(--text); font-weight: 700; }
main#app.ui-enter .tkpi-t i { animation: ui-fill .8s var(--ease-out) both .15s; }
@media (max-width: 600px) { .rc .dl { font-size: 12.5px; padding: 1px 7px; } .tkpi span { font-size: 12.5px; } }

/* (3) biểu đồ: cột đang chọn nổi bật, các cột khác mờ; khung số khi rê chuột / chạm (ui.js) */
.chart svg rect[data-tip] { cursor: pointer; transition: opacity var(--t-fast); }
.chart svg.ui-hov rect[data-tip]:not(.ui-hl) { opacity: .35; }
.panel.chart { position: relative; }
#uiTip { position: absolute; z-index: 30; pointer-events: none; background: #151515; color: #fff; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.5;
  box-shadow: var(--sh-pop); min-width: 150px; max-width: 280px; opacity: 0; transform: translate(-50%, calc(-100% - 12px)) scale(.96); transition: opacity .12s, transform .16s var(--ease-out); }
#uiTip.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
#uiTip b { display: block; font-size: 12px; color: #CFCFCB; font-weight: 600; margin-bottom: 3px; }
#uiTip div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
#uiTip div i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
#uiTip div.sum { border-top: 1px solid rgba(255,255,255,.15); margin-top: 4px; padding-top: 4px; font-weight: 700; }

/* (4) hồ sơ hội viên trên điện thoại: gọn, nút thao tác nằm ở đáy màn hình cho dễ bấm một tay */
@media (max-width: 600px) {
  .hvhero { padding: 14px; }
  .hvhero .hvhead2 { gap: 6px 12px; margin-bottom: 12px; align-items: flex-start; flex-wrap: wrap; }
  .hvhero .hvhead2 > .hxtags { order: 3; flex-basis: 100%; }
  .hvhero .hvhead2 > div:not(.hxtags) { flex: 1; min-width: 0; }
  .hvhero .hvav.big { width: 48px; height: 48px; font-size: 17px; }
  .hvhero .hvhead2 h1 { font-size: 20px; gap: 6px; }
  .hvhero .hvhead2 .muted { font-size: 13.5px; line-height: 1.45; }
  .hvhero .hvtiles { gap: 8px; margin-bottom: 4px; }
  .hvhero .hvtiles > div { padding: 8px 10px 8px 12px; }
  .hvhero .hvtiles span { font-size: 12px; } .hvhero .hvtiles b { font-size: 16px; } .hvhero .hvtiles small { font-size: 12px; line-height: 1.35; display: block; }
  .hvhero .hvbtns {
    position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 26; display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; padding: 10px 12px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px -10px rgba(21,21,21,.2); scrollbar-width: none; }
  .hvhero .hvbtns::-webkit-scrollbar { display: none; }
  .hvhero .hvbtns .btn { flex: none !important; min-height: 46px; padding: 8px 14px; white-space: nowrap; }
  .hvhero .hvbtns .btn.primary { order: -2; }
  .hvhero .hvbtns #hvCk { order: -1; }
  body:has(.hvhero .hvbtns) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body:has(.hvhero .hvbtns) #uiTop { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .hvhero ~ .subtabs { position: sticky; top: var(--header-h); z-index: 6; background: var(--workspace); margin-left: -12px; margin-right: -12px; padding: 0 12px; }
}

/* ---------- in ---------- */
@media print {
  .top, nav#nav, #tabbar, #toast { display: none !important; }
  main#app { margin: 0 !important; max-width: none !important; }
  .panel, .card, .rc, .kc { box-shadow: none !important; }
}

/* ---------- hiệu ứng ---------- */
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ui-sheet { from { transform: translateY(100%); } }
@keyframes ui-grow-y { from { transform: scaleY(0); } }
@keyframes ui-fill { from { transform: scaleX(0); } }
@keyframes ui-bar { from { transform: scaleY(0); } }
@keyframes ui-bounce { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ui-blink { 50% { opacity: .3; } }
@keyframes ui-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px rgba(244,207,51,0); } 85% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px rgba(244,207,51,.4); } }
@keyframes ui-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .loading::before { animation: ui-spin 1.5s linear infinite !important; }
}