/* =========================================================================
   FIT KIT — UI KIT (ui-kit.css) · nạp sau themes.css
   Token cấu trúc + trạng thái rỗng / đang tải / lỗi + ảnh dự phòng + chế độ máy yếu
   ========================================================================= */
:root{
  /* Bo góc 4 bậc */
  --fk-r-1:10px; --fk-r-2:16px; --fk-r-3:22px; --fk-r-4:28px; --fk-r-pill:999px;
  /* Khoảng cách 5 bậc */
  --fk-s-1:4px; --fk-s-2:8px; --fk-s-3:12px; --fk-s-4:16px; --fk-s-5:24px;
  /* Cỡ chữ 6 bậc (tối thiểu 12px) */
  --fk-fs-1:12px; --fk-fs-2:13px; --fk-fs-3:15px; --fk-fs-4:17px; --fk-fs-5:22px; --fk-fs-6:28px;
  --fk-tap:44px;
}

/* ---------- Trạng thái chung (rỗng / lỗi) ---------- */
.fk-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--fk-s-2);
  padding:var(--fk-s-5) var(--fk-s-4); border-radius:var(--fk-r-3);
  border:1px dashed var(--border-strong, rgba(255,255,255,.26));
  background:rgba(var(--fk-ov-rgb, 255,255,255), calc(.05 * var(--fk-ov-k, 1)));
  color:var(--text, #fff); }
.fk-state-ic{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--mint-rgb, 94,230,199), .14); color:var(--mint, #5EE6C7); margin-bottom:var(--fk-s-1); }
.fk-state-ic .material-symbols-rounded{ font-size:26px; }
.fk-state b{ font-size:var(--fk-fs-3); font-weight:600; line-height:1.3; }
.fk-state p{ font-size:var(--fk-fs-2); line-height:1.5; color:var(--text-muted, rgba(255,255,255,.78)); max-width:300px; }
.fk-state .btn{ margin-top:var(--fk-s-2); min-height:var(--fk-tap); }
.fk-state.err{ border-style:solid; border-color:rgba(var(--coral-rgb, 255,122,69), .45);
  background:rgba(var(--coral-rgb, 255,122,69), .08); }
.fk-state.err .fk-state-ic{ background:rgba(var(--coral-rgb, 255,122,69), .16); color:var(--coral-2, #FFB08A); }
.fk-state.sm{ flex-direction:row; text-align:left; gap:var(--fk-s-3); padding:var(--fk-s-3) var(--fk-s-4); }
.fk-state.sm .fk-state-ic{ width:40px; height:40px; flex:none; margin:0; }
.fk-state.sm .fk-state-ic .material-symbols-rounded{ font-size:20px; }
.fk-state.sm .fk-state-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fk-state.sm .btn{ margin:0; flex:none; }

/* .empty-hint có sẵn → tự nâng cấp (MutationObserver trong ui-kit.js) */
.empty-hint.fk-eh{ display:flex; flex-direction:column; align-items:center; gap:var(--fk-s-2);
  padding:var(--fk-s-5) var(--fk-s-4); margin:2px 0; border-radius:var(--fk-r-3);
  border:1px dashed var(--border-strong, rgba(255,255,255,.26));
  background:rgba(var(--fk-ov-rgb, 255,255,255), calc(.05 * var(--fk-ov-k, 1)));
  color:var(--text-muted, rgba(255,255,255,.78)); font-size:var(--fk-fs-2); line-height:1.5; }
.empty-hint.fk-eh > .fk-eh-ic{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--mint-rgb, 94,230,199), .14); color:var(--mint, #5EE6C7); font-size:22px; flex:none; }
.empty-hint.fk-eh a{ display:inline-flex; align-items:center; min-height:var(--fk-tap); padding:0 6px;
  color:var(--mint-2, #9AF1DD) !important; font-weight:600; }
.empty-hint.fk-eh.sm{ flex-direction:row; justify-content:center; padding:var(--fk-s-2) var(--fk-s-3) !important; border-radius:var(--fk-r-2); }
.empty-hint.fk-eh.sm > .fk-eh-ic{ width:30px; height:30px; font-size:16px; }
.empty-hint.fk-eh[hidden]{ display:none; }
/* integrator (FIX-core vòng 2 · chuyển giao ux #2): dòng "lối tắt ẩn" của menu ☰ (app.js TE_MENU_DEEP) — [hidden] thắng display:flex của .link-row */
.link-row.te-mdeep[hidden]{ display:none; }

/* ---------- Skeleton (đang tải) ---------- */
.fk-skel{ display:flex; flex-direction:column; gap:var(--fk-s-2); }
.fk-skel.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--fk-s-2); }
.fk-sk{ position:relative; overflow:hidden; border-radius:var(--fk-r-1);
  background:rgba(var(--fk-ov-rgb, 255,255,255), calc(.08 * var(--fk-ov-k, 1))); }
.fk-sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(100deg, transparent 20%, rgba(var(--fk-ov-rgb, 255,255,255), calc(.12 * var(--fk-ov-k, 1))) 50%, transparent 80%);
  animation:fkShimmer 1.25s ease-in-out infinite; }
html.fk-light .fk-sk::after{ background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%); }
@keyframes fkShimmer{ to{ transform:translateX(100%); } }
.fk-sk-row{ display:flex; align-items:center; gap:var(--fk-s-3); padding:10px; border-radius:14px;
  border:1px solid var(--border, rgba(255,255,255,.16)); }
.fk-sk-row .fk-sk.th{ width:56px; height:56px; flex:none; }
.fk-sk-row .ln{ flex:1; display:flex; flex-direction:column; gap:8px; }
.fk-sk.l1{ height:14px; width:70%; } .fk-sk.l2{ height:12px; width:45%; }
.fk-sk.card{ height:120px; border-radius:var(--fk-r-3); }
.fk-sk.tile{ aspect-ratio:1.15; border-radius:var(--fk-r-3); }
.fk-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .fk-sk::after{ animation:none; display:none; } }

/* ---------- Ảnh lỗi → placeholder ---------- */
img.fk-img-ph{ object-fit:cover !important; visibility:visible !important; opacity:1 !important; }

/* ---------- Máy yếu / giảm trong suốt: bỏ blur trong danh sách, giữ ở thanh trên/dưới & sheet ---------- */
html.lowfx :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal, .nu-water,
  .nu-recipe, .nu-tag span, .plan-card, .food-result, .ex-edit, .seg, .role-card, .streak-chip, .date-chip, .home-hero, .pp-card){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--glass-solid) !important; }
html.lowfx :is(.pill, .btn-outline, .choice-card, .nu-add, .nu-plan, .pp-chips span, .content .icon-btn, .sheet .icon-btn){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html.lowfx :is(.card, .nu-gauge-card, .home-hero)::after{ display:none !important; }
html.lowfx .nu-water{ background:linear-gradient(160deg, rgba(var(--mint-rgb, 94,230,199), .16), transparent 60%), var(--glass-solid) !important; }
@media (prefers-reduced-transparency: reduce){
  :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal, .nu-water,
    .nu-recipe, .nu-tag span, .plan-card, .food-result, .ex-edit, .seg, .role-card, .streak-chip, .date-chip, .home-hero, .pp-card){
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--glass-solid) !important; }
  :is(.pill, .btn-outline, .choice-card, .nu-add, .nu-plan){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* =========================================================================
   Vòng sửa QA UX (11/11/2026 — docs/qa/FIX-ux.md)
   ========================================================================= */
/* QU-35: chữ cho trình đọc màn hình, link "Bỏ qua tới nội dung", viền focus chung */
.fk-sr{ margin:-1px; padding:0; border:0; clip-path:inset(50%); }
.fk-skip{ position:fixed; left:12px; top:-80px; z-index:10050; padding:12px 16px; min-height:var(--fk-tap);
  border-radius:var(--fk-r-2); background:var(--navy, #061A24); color:#fff; font-weight:600; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4); }
.fk-skip:focus{ top:max(12px, env(safe-area-inset-top)); outline:2px solid var(--mint, #33D6C9); outline-offset:2px; }
#app-scroll:focus{ outline:none; }
:where(button, a, [role="button"], [role="radio"], [role="switch"], [role="tab"], [tabindex="0"], input, select, textarea, summary):focus-visible{
  outline:2px solid var(--mint, #33D6C9); outline-offset:2px; }

/* QU-26: dải "Đang ngoại tuyến" dùng chung toàn app (ui-kit.js lắng nghe online/offline) */
.fk-offline{ position:fixed; left:50%; top:max(10px, env(safe-area-inset-top)); z-index:10040;
  transform:translate(-50%, -140%); transition:transform .25s var(--e-out, ease);
  display:flex; align-items:center; gap:var(--fk-s-2); max-width:min(92vw, 440px); min-height:var(--fk-tap);
  padding:10px var(--fk-s-4); border-radius:var(--fk-r-pill); font-size:var(--fk-fs-2); font-weight:600; line-height:1.35;
  background:#2A1A12; color:#FFE4D6; border:1px solid rgba(var(--coral-rgb, 255,122,69), .55); box-shadow:0 10px 28px rgba(0,0,0,.45); }
.fk-offline.on{ transform:translate(-50%, 0); }
.fk-offline.back{ background:#0E2E29; color:#D6FFF6; border-color:rgba(var(--mint-rgb, 94,230,199), .55); }
.fk-offline .material-symbols-rounded{ font-size:18px; flex:none; }
@media (prefers-reduced-motion: reduce){ .fk-offline{ transition:none; } }

/* QU-04 / QU-34: video nền màn chào — nút Tạm dừng / Phát 44 px; ẩn video khi giảm chuyển động, tiết kiệm dữ liệu, máy yếu */
.fk-vid-toggle{ position:absolute; right:max(14px, env(safe-area-inset-right)); bottom:84px; z-index:6;
  width:var(--fk-tap); height:var(--fk-tap); border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); background:rgba(6,26,36,.55); color:#fff; cursor:pointer; }
.fk-vid-toggle svg{ width:18px; height:18px; fill:currentColor; }
html.fk-lowmedia .wl-hero-video, html.fk-lowmedia .wl-credit{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .wl-hero-video, .wl-credit{ display:none !important; } }

/* QU-05 / QU-10 hiệu năng: máy yếu (html.lowfx) bỏ blur cả ở thẻ module; đang cuộn (html.fk-scrolling) tạm bỏ blur thẻ trong danh sách */
html.lowfx :is(.fp-card, .cm-card, .kb-card, .sh-card, .sh-prod, .te-card, .ev-card, .fk-theme-opt, .exlib-row, .np-row, .tpl-card, .mg-card){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html.fk-scrolling:not(.fk-fx-full) #app-scroll :is(.card, .list-item, .stat-box, .plan-card, .nu-meal, .nu-recipe, .fp-card, .cm-card, .kb-card,
  .sh-card, .sh-prod, .te-card, .ev-card, .exlib-row, .np-row, .tpl-card, .pill, .content .icon-btn){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* nút icon nằm trong thẻ kính không cần blur lồng (thẻ đã blur) */
:is(.card, .sheet) .icon-btn{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Vòng 2 (ux · FIX-nutrition #4): thanh trên dính (.topbar, sticky) nền chuyển sắc trong suốt → khi đã cuộn
   (html.fk-scrolled do ui-kit.js gắn theo #app-scroll.scrollTop) có nền đặc theo màu nền theme (--fk-veil-rgb, mọi theme/gói)
   → tiêu đề "Dinh dưỡng" / nút ☰ không đè lên chữ nội dung. Thanh .transparent nằm trên ảnh hero (Tập luyện) giữ nguyên. */
html.fk-scrolled #app-scroll > .screen.active > .topbar:not(.transparent){
  background:rgba(var(--fk-veil-rgb, 6,26,36), .94) !important;      /* gần đặc, KHÔNG blur: phần tử dính trên vùng cuộn → blur vẽ lại mỗi khung (QU-05) */
  box-shadow:0 1px 0 rgba(var(--fk-ov-rgb, 255,255,255), .10), 0 10px 18px -12px rgba(0,0,0,.5);
}

/* QU-05: danh sách dài — bỏ qua vẽ phần ngoài khung nhìn */
:is(.fp-card, .cm-card, .kb-card, .exlib-row, .tpl-card, .np-row, .food-result){ content-visibility:auto; contain-intrinsic-size:auto 120px; }
:is(.fp-card){ contain-intrinsic-size:auto 280px; }
:is(.cm-card){ contain-intrinsic-size:auto 220px; }
:is(.exlib-row, .np-row, .food-result){ contain-intrinsic-size:auto 72px; }

/* QU-36: bản rộng (≥ 1024 px) — dashboard PT / hồ sơ học viên mở khung rộng (nội dung ≤ 820 px, căn giữa) thay vì bó 460 px;
   Cửa hàng (lớp phủ toàn màn hình) dùng lưới 4 cột. Trang chủ, buổi tập, Dinh dưỡng giữ khung điện thoại.
   Vòng 2: + Sự kiện / Cộng đồng / Kho kiến thức — commerce đã có lưới 2 cột trong events.css / community.css / kb.css
   (bám html[data-screen=…]); Tìm PT tự mở khung 1 120 px + album 2 cột trong findpt.css (pt) nên KHÔNG có trong danh sách này
   (nội dung Tìm PT rộng 1 080 px, khác giới hạn 820 px ở đây). data-screen do ui-kit.js (syncScreen) gắn. */
@media (min-width:1024px){
  html:is([data-screen="coach"], [data-screen="client"], [data-screen="events"], [data-screen="community"], [data-screen="kb"]) #app-shell{ max-width:min(1120px, 94vw); }
  html:is([data-screen="coach"], [data-screen="client"], [data-screen="events"], [data-screen="community"], [data-screen="kb"]) .bottom-nav{ width:436px; max-width:calc(100% - 24px); align-self:center; margin-left:auto; margin-right:auto; }
  html:is([data-screen="coach"], [data-screen="client"], [data-screen="events"], [data-screen="community"], [data-screen="kb"]) .screen.active > .content{ width:100%; max-width:820px; margin-left:auto; margin-right:auto; }
  .tsx-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }   /* Cửa hàng là lớp phủ toàn màn hình (không đổi data-screen) */
}


/* =========================================================================
   R3 (ux · 14/11/2026 — docs/qa/R3-ux.md): đa ngôn ngữ, PWA (bản mới / cài đặt)
   ========================================================================= */
/* mở app ở ngôn ngữ ≠ vi: che tới khi dịch xong lượt đầu (i18n.js tự gỡ, tối đa 1,5 s) */
html.fk-i18n-wait #app-shell{ visibility:hidden; }

/* nút ngôn ngữ ở màn chào / đăng nhập (góc trên, né nút ☰ của màn chào) */
.fk-lang-chip{ position:absolute; z-index:30; top:calc(env(safe-area-inset-top, 0px) + 12px); right:calc(env(safe-area-inset-right, 0px) + 66px);
  display:inline-flex; align-items:center; gap:6px; min-height:var(--fk-tap, 44px); min-width:var(--fk-tap, 44px); padding:0 12px;
  border-radius:999px; border:1px solid rgba(255,255,255,.32); background:rgba(6,26,36,.55); color:#fff;
  font:600 13px/1 Inter, system-ui, sans-serif; letter-spacing:.04em; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.fk-lang-chip svg{ flex:none; }
#auth:not(:has(.wl-burger)) .fk-lang-chip{ right:calc(env(safe-area-inset-right, 0px) + 14px); }
html.fk-light #auth:not(:has(.wl-hero)) .fk-lang-chip{ background:rgba(255,255,255,.8); color:var(--text, #0B2530); border-color:rgba(11,37,48,.2); }

/* mục Ngôn ngữ / Cài đặt app trong Hồ sơ */
.fk-lang-cardrow{ padding:6px !important; }
.fk-lang-item{ width:100%; text-align:left; background:transparent; border:0; color:inherit; font:inherit; cursor:pointer; min-height:56px;
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; }
.fk-lang-item .info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.fk-lang-item .name{ font-weight:700; font-size:14px; }
.fk-lang-item .meta{ font-size:12px; color:var(--text-muted); line-height:1.35; }
.fk-lang-thumb{ width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--mint-rgb, 94,230,199), .14); color:var(--mint, #33D6C9); }
.fk-lang-item .trailing{ font-size:22px; color:var(--text-muted); }

/* hộp chọn ngôn ngữ */
.fk-lang-dlg{ position:fixed; inset:0; z-index:10060; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(2,10,14,.6); padding:0 max(12px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(12px, env(safe-area-inset-left)); }
.fk-lang-card{ width:100%; max-width:440px; border-radius:22px; padding:18px 16px 14px; background:var(--sheet-bg, var(--glass-solid, #0C2733));
  color:var(--text, #EAF6F4); border:1px solid var(--border, rgba(255,255,255,.16)); box-shadow:0 20px 60px rgba(0,0,0,.5); max-height:calc(100dvh - 40px); overflow:auto; }
.fk-lang-card h2{ font-size:17px; margin:0 0 10px; }
.fk-lang-list{ display:flex; flex-direction:column; gap:8px; }
.fk-lang-opt{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:10px 14px; border-radius:14px; cursor:pointer;
  border:1px solid var(--border, rgba(255,255,255,.16)); background:transparent; color:inherit; font:inherit; text-align:left; }
.fk-lang-opt[aria-checked="true"]{ border-color:var(--mint, #33D6C9); background:rgba(var(--mint-rgb, 94,230,199), .12); }
.fk-lang-name{ flex:1; font-weight:600; font-size:15px; }
.fk-lang-code{ font-size:12px; color:var(--text-muted); letter-spacing:.06em; }
.fk-lang-tick{ width:18px; text-align:center; color:var(--mint, #33D6C9); visibility:hidden; }
.fk-lang-opt[aria-checked="true"] .fk-lang-tick{ visibility:visible; }
.fk-lang-note{ font-size:12px; line-height:1.45; color:var(--text-muted); margin:12px 2px; }
.fk-lang-close{ width:100%; min-height:var(--fk-tap, 44px); border-radius:999px; border:1px solid var(--border, rgba(255,255,255,.2));
  background:transparent; color:inherit; font:600 14px/1 inherit; cursor:pointer; }
@media (min-width:600px){ .fk-lang-dlg{ align-items:center; } }

/* dải gợi ý "Prefer English?" (lần đầu, máy không dùng tiếng Việt) + "Có bản mới" */
.fk-lang-hint, .fk-update{ position:fixed; left:50%; z-index:10045; transform:translateX(-50%);
  top:calc(env(safe-area-inset-top, 0px) + 10px); display:flex; align-items:center; gap:8px; width:max-content; max-width:min(94vw, 460px);
  padding:6px 6px 6px 14px; border-radius:999px; background:#0E2E29; color:#D6FFF6; border:1px solid rgba(var(--mint-rgb, 94,230,199), .55);
  box-shadow:0 10px 28px rgba(0,0,0,.45); font-size:13px; font-weight:600; line-height:1.3; }
.fk-update{ transform:translate(-50%, -160%); transition:transform .28s var(--e-out, ease); }
.fk-update.on{ transform:translate(-50%, 0); }
.fk-lang-hint span, .fk-update-t{ min-width:0; }
.fk-lang-hint button, .fk-update button{ flex:none; min-height:36px; min-width:36px; padding:0 12px; border-radius:999px; border:0; cursor:pointer; font:inherit; position:relative; }
.fk-lang-hint button::after, .fk-update button::after{ content:""; position:absolute; inset:-4px 0; }      /* vùng chạm 44 px */
.fk-lang-hint-yes, .fk-update-go{ background:var(--mint, #33D6C9); color:#061A24; }
.fk-lang-hint-no, .fk-update-x{ background:transparent; color:inherit; padding:0 !important; }

/* thanh mời cài đặt — nổi trên thanh điều hướng dưới */
.fk-install{ position:fixed; z-index:940; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 84px); width:min(94vw, 460px);
  transform:translate(-50%, 30px); opacity:0; pointer-events:none; transition:transform .3s var(--e-out, ease), opacity .3s;
  display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border-radius:18px;
  background:var(--glass-solid, #0C2733); color:var(--text, #EAF6F4); border:1px solid var(--border, rgba(255,255,255,.18)); box-shadow:0 14px 40px rgba(0,0,0,.45); }
.fk-install.on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.fk-install img{ border-radius:10px; flex:none; }
.fk-install-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.35; color:var(--text-muted); }
.fk-install-t b{ font-size:14px; color:var(--text, #EAF6F4); }
.fk-install-go{ flex:none; min-height:var(--fk-tap, 44px); padding:0 16px; border-radius:999px; border:0; cursor:pointer;
  background:var(--mint, #33D6C9); color:#061A24; font:700 14px/1 inherit; }
.fk-install-x{ flex:none; width:var(--fk-tap, 44px); height:var(--fk-tap, 44px); border-radius:50%; border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-size:15px; }
.fk-ios-guide h3{ font-size:18px; margin:0 0 12px; }
.fk-ios-guide ol{ margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:12px; font-size:15px; line-height:1.45; }
.fk-ios-guide li svg{ vertical-align:-4px; color:var(--mint, #33D6C9); }
@media (prefers-reduced-motion: reduce){ .fk-update, .fk-install{ transition:none; } }
@media print{ .fk-install, .fk-update, .fk-lang-hint, .fk-lang-chip{ display:none !important; } }