/* ===========================================================
   Aura Wellness — spa.css
   Console spa: CÔNG CỤ, không phải thương hiệu.
   Mobile-first tuyệt đối · chỉ Be Vietnam Pro · vùng chạm ≥48px
   · mật độ thông tin cao · tương phản mạnh · ít chuyển động.
   =========================================================== */

body.spa {
  background: var(--surface-2);
  font-family: var(--font-ui);           /* KHÔNG dùng serif ở console */
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
}
body.spa .display { font-family: var(--font-ui); }

/* ---------- Khung ---------- */
.shell { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--surface-2); position: relative; }
@media (min-width: 760px) {
  .shell { box-shadow: 0 0 0 1px var(--line); }
}

/* ---------- Thanh trên ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--forest);
  color: var(--cream);
  padding: env(safe-area-inset-top, 0) 0 0;
}
.topbar-in {
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}
.topbar .tb-btn {
  min-width: var(--tap); min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); border-radius: var(--r-sm);
  font-size: 19px; flex: none;
}
.topbar .tb-btn:hover { background: rgba(247,243,234,.12); }
.topbar .tb-title { flex: 1; min-width: 0; }
.topbar .tb-title b { display: block; font-size: var(--fs-md); font-weight: var(--fw-sem); line-height: 1.25; }
.topbar .tb-title small { display: block; font-size: var(--fs-2xs); color: rgba(247,243,234,.66); }
.topbar .tb-actions { display: flex; gap: 2px; flex: none; }

/* ---------- Bottom nav (tầm ngón cái) ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
}
.bottomnav-in { display: flex; width: 100%; max-width: 720px; margin: 0 auto; }
.bottomnav a {
  flex: 1;
  min-height: var(--bottomnav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-med);
  position: relative;
  padding: 6px 2px;
}
.bottomnav a .ic { font-size: 19px; line-height: 1; }
.bottomnav a[aria-current="page"] { color: var(--forest); font-weight: var(--fw-sem); }
.bottomnav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--gold);
}
.bottomnav a .badge {
  position: absolute; top: 8px; left: 54%;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--risk); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Vùng nội dung ---------- */
.view { padding: var(--s-3) var(--s-3) var(--s-7); }
.view > * + * { margin-top: var(--s-3); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  background: var(--surface);
}
.panel-head h2 { font-size: var(--fs-sm); font-weight: var(--fw-sem); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.panel-body { padding: var(--s-4); overflow-x: auto; }   /* bảng rộng tự cuộn ngang, không đẩy trang */
.panel-body.tight { padding: var(--s-3); }

/* ---------- Hàng danh sách chạm được ---------- */
.lrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: var(--tap);
  border-bottom: 1px solid var(--line);
  width: 100%; text-align: left;
  background: var(--surface);
  text-decoration: none; color: inherit;
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: #FCFAF5; }
.lrow:active { background: var(--sand); }
.lrow .lrow-main { flex: 1; min-width: 0; }
.lrow .lrow-t { font-size: var(--fs-sm); font-weight: var(--fw-sem); line-height: 1.35; }
.lrow .lrow-s { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.4; margin-top: 1px; }
.lrow .lrow-end { flex: none; text-align: right; font-size: var(--fs-xs); color: var(--ink-soft); }
.lrow .chev { color: var(--line-strong); font-size: 18px; flex: none; }

/* ---------- Ô thống kê ---------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.stat .k { font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: var(--fw-med); line-height: 1.3; }
.stat .v { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px; }
.stat .d { font-size: var(--fs-2xs); margin-top: 2px; }
.stat.dark { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.stat.dark .k { color: rgba(247,243,234,.72); }
.stat.dark .v { color: var(--gold); }

/* ---------- Ô tìm kiếm nổi bật (S4) ---------- */
.searchbar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 30;
  background: var(--surface-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(var(--s-3) * -1);
}
.searchbar .sfield { position: relative; }
.searchbar input {
  width: 100%;
  min-height: 52px;
  font-size: var(--fs-md);
  padding: 0 var(--s-8) 0 44px;
  border-radius: var(--r-md);
  border: 2px solid var(--forest);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.searchbar input:focus { outline: none; box-shadow: 0 0 0 4px rgba(201,169,97,.3); }
.searchbar .sico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--ink-soft); pointer-events: none;
}
.searchbar .sclear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.keypad-hint { font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 6px; }

/* ---------- Nhóm việc cần làm (S3) ---------- */
.taskgroup { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.taskgroup + .taskgroup { margin-top: var(--s-3); }
.taskgroup > summary {
  list-style: none;
  padding: var(--s-3) var(--s-4);
  min-height: var(--tap);
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
  background: var(--surface);
  border-bottom: 1px solid transparent;
}
.taskgroup[open] > summary { border-bottom-color: var(--line); }
.taskgroup > summary::-webkit-details-marker { display: none; }
.taskgroup > summary .tg-ic {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: none;
}
.taskgroup > summary .tg-t { flex: 1; min-width: 0; }
.taskgroup > summary .tg-t b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sem); }
.taskgroup > summary .tg-t small { font-size: var(--fs-2xs); color: var(--ink-soft); }
.taskgroup > summary .tg-n {
  min-width: 26px; height: 24px; padding: 0 7px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; flex: none;
}
.taskgroup > summary .caret { color: var(--line-strong); transition: transform var(--dur) var(--ease); flex: none; }
.taskgroup[open] > summary .caret { transform: rotate(90deg); }

.task {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.task:last-child { border-bottom: 0; }
.task.done { background: #F6F8F5; }
.task-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.task-top .grow { min-width: 0; }
.task-name { font-size: var(--fs-sm); font-weight: var(--fw-sem); }
.task-why { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 1px; line-height: 1.45; }
.task-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.task-acts .btn { min-height: var(--tap); flex: 1 1 auto; }
.task-acts .btn.narrow { flex: 0 0 auto; }
.outcome {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: var(--fw-sem); color: var(--ok-ink);
  background: var(--ok-bg); border-radius: var(--r-sm); padding: 7px var(--s-3);
}
/* Đã nhắn nhưng chưa biết kết quả — chưa xong, nên không dùng màu "xong" */
.outcome.waiting { color: var(--warn-ink); background: var(--warn-bg); }

/* ---------- Hồ sơ khách (S5) ---------- */
.profile-hero {
  background: var(--forest);
  color: var(--cream);
  padding: var(--s-4);
  border-radius: var(--r-md);
}
.profile-hero .ava { background: var(--gold); color: var(--forest-deep); }
.profile-hero .muted { color: rgba(247,243,234,.7); }
.profile-hero a { color: var(--gold-soft); }

.tabbar {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md) var(--r-md) 0 0;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  min-height: var(--tap); padding: 0 var(--s-4);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  color: var(--ink-soft); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tabbar button[aria-selected="true"] { color: var(--forest); font-weight: var(--fw-sem); border-bottom-color: var(--gold); }

/* Timeline hợp nhất */
.tl { position: relative; padding-left: 26px; }
.tl::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: var(--s-4); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--gold);
}
.tl-item.visit::before { border-color: var(--forest); background: var(--forest); }
.tl-item.scan::before { border-color: var(--gold); background: var(--gold); }
.tl-item.note::before { border-color: var(--line-strong); }
.tl-item.routine::before { border-color: var(--ok); background: var(--ok); }
.tl-date { font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: var(--fw-sem); }
.tl-body { font-size: var(--fs-sm); margin-top: 2px; line-height: 1.45; }
.tl-sub { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }

/* ---------- Lịch (S6) ---------- */
.daystrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.daystrip::-webkit-scrollbar { display: none; }
.daystrip button {
  flex: 0 0 auto; min-width: 52px; min-height: 62px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.daystrip button .dw { font-size: var(--fs-2xs); color: var(--ink-soft); }
.daystrip button .dd { font-size: var(--fs-lg); font-weight: var(--fw-sem); font-variant-numeric: tabular-nums; }
.daystrip button .dn { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.daystrip button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.daystrip button[aria-pressed="true"] .dw { color: rgba(247,243,234,.75); }

.slot {
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line); min-height: var(--tap);
  align-items: flex-start; width: 100%; text-align: left; background: var(--surface);
}
.slot:last-child { border-bottom: 0; }
.slot .stime {
  flex: none; width: 48px; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.slot .sbar { flex: none; width: 3px; align-self: stretch; border-radius: 2px; background: var(--gold); }
.slot.done .sbar { background: var(--ok); }
.slot.noshow .sbar { background: var(--risk); }
.slot.arrived .sbar { background: var(--warn); }

/* ---------- FAB ---------- */
.fab {
  position: fixed; z-index: 45;
  right: max(var(--s-4), calc(50vw - 360px + var(--s-4)));
  bottom: calc(var(--bottomnav-h) + var(--s-4) + env(safe-area-inset-bottom, 0px));
  min-height: 54px; padding: 0 var(--s-5);
  border-radius: var(--r-full);
  background: var(--gold); color: var(--forest-deep);
  font-weight: var(--fw-sem); font-size: var(--fs-sm);
  box-shadow: var(--sh-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.fab:active { transform: scale(.97); }

/* ---------- Lưới nút hành động nhanh ---------- */
.qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
@media (max-width: 400px) { .qgrid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
.qgrid a, .qgrid button {
  min-height: 74px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: var(--fw-med); color: var(--ink);
  text-decoration: none; text-align: center; padding: var(--s-2) 4px; line-height: 1.25;
}
.qgrid .qi { font-size: 20px; color: var(--forest); }
.qgrid a:active, .qgrid button:active { background: var(--sand); }

/* ---------- Chọn nhiều (S7, S8) ---------- */
.pickrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); min-height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); width: 100%; text-align: left;
}
.pickrow + .pickrow { margin-top: 6px; }
.pickrow[aria-pressed="true"] { border-color: var(--forest); background: #F5F8F6; border-width: 2px; }
.pickrow .pk-box {
  width: 22px; height: 22px; border-radius: var(--r-xs); flex: none;
  border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: transparent;
}
.pickrow[aria-pressed="true"] .pk-box { background: var(--forest); border-color: var(--forest); color: #fff; }

/* Thanh tổng kết dính đáy */
.sumbar {
  position: sticky;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  background: var(--forest); color: var(--cream);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-3);
  margin-top: var(--s-4);
}
.sumbar .srow { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: rgba(247,243,234,.78); }
.sumbar .stotal { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 var(--s-3); }
.sumbar .stotal b { font-size: var(--fs-xl); color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- Bảng gọn cho mobile ---------- */
.mtable { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.mtable th, .mtable td { padding: 9px var(--s-2); border-bottom: 1px solid var(--line); text-align: left; }
.mtable th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: var(--fw-sem); }
.mtable td.n, .mtable th.n { text-align: right; font-variant-numeric: tabular-nums; }
.mtable tr:last-child td { border-bottom: 0; }
.mtable .rank { width: 26px; color: var(--ink-soft); font-weight: var(--fw-bold); }
.mtable tbody tr.me { background: #FBF6E9; }

/* ---------- Cấu hình (S14) ---------- */
.cfg-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); min-height: var(--tap);
}
.cfg-row:last-child { border-bottom: 0; }
.cfg-row .cfg-t { flex: 1; min-width: 0; }
.cfg-row .cfg-t b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med); }
.cfg-row .cfg-t small { display: block; font-size: var(--fs-2xs); color: var(--ink-soft); line-height: 1.4; margin-top: 1px; }
.cfg-row .cfg-c { flex: none; width: 96px; }
.cfg-row .cfg-c .input { text-align: right; font-variant-numeric: tabular-nums; }

.philosophy {
  background: var(--forest-deep); color: var(--cream);
  border-radius: var(--r-md); padding: var(--s-4);
}
.philosophy b { color: var(--gold); }
.philosophy p { font-size: var(--fs-xs); line-height: 1.6; color: rgba(247,243,234,.8); }

/* ---------- Đăng nhập (S1) ---------- */
.login {
  min-height: 100vh; background: var(--forest-deep); color: var(--cream);
  display: flex; align-items: center; justify-content: center; padding: var(--s-5);
}
.login-box { width: 100%; max-width: 400px; }
.login-brand { text-align: center; margin-bottom: var(--s-7); }
.login-brand .mark {
  width: 58px; height: 58px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md); border: 1px solid rgba(201,169,97,.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 24px;
}
.login-brand h1 { font-size: var(--fs-xl); font-weight: var(--fw-sem); }
.login-brand p { font-size: var(--fs-xs); color: rgba(247,243,234,.65); margin-top: 4px; }
.login .spa-opt {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left; padding: var(--s-3) var(--s-4); min-height: 68px;
  border: 1px solid rgba(201,169,97,.3); border-radius: var(--r-md);
  background: rgba(247,243,234,.05); color: var(--cream);
}
.login .spa-opt + .spa-opt { margin-top: var(--s-2); }
.login .spa-opt[aria-pressed="true"] { border-color: var(--gold); background: rgba(201,169,97,.16); }
.login .spa-opt b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sem); }
.login .spa-opt small { display: block; font-size: var(--fs-2xs); color: rgba(247,243,234,.62); margin-top: 2px; }
.login .spa-opt .tick { color: var(--gold); font-size: 18px; flex: none; opacity: 0; }
.login .spa-opt[aria-pressed="true"] .tick { opacity: 1; }
.login .demo-note { font-size: var(--fs-2xs); color: rgba(247,243,234,.5); text-align: center; margin-top: var(--s-5); line-height: 1.6; }

/* ---------- Xem trước tin nhắn Zalo ---------- */
.zalo-preview {
  background: #E8EDF2; border-radius: var(--r-md); padding: var(--s-4);
}
.zalo-bubble {
  background: #0068FF; color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm); line-height: 1.55;
  margin-left: auto; max-width: 92%;
  white-space: pre-wrap;
}
.zalo-meta { font-size: var(--fs-2xs); color: #5A6A7A; text-align: right; margin-top: 6px; }

/* ---------- Ảnh máy soi ---------- */
.scanshot {
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--sand); aspect-ratio: 4/5;
}
.scanshot img { width: 100%; height: 100%; object-fit: cover; }
.uploadbox {
  border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--s-5); text-align: center; background: var(--surface);
  min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
}
.uploadbox .ub-ic { font-size: 26px; color: var(--ink-soft); }

/* ---------- Thanh trượt chỉ số ---------- */
.metric-set { display: flex; flex-direction: column; gap: var(--s-4); }
.metric-in { }
.metric-in .mhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.metric-in .mhead b { font-size: var(--fs-sm); font-weight: var(--fw-med); }
/* Ô này giờ mang TÊN NẤC chứ không mang số — bỏ tabular-nums, hạ cỡ chữ */
.metric-in .mhead .mv { font-size: var(--fs-sm); font-weight: var(--fw-sem); text-align: right; }
.metric-in input[type=range] {
  width: 100%; height: 44px; accent-color: var(--forest); background: transparent;
}
.metric-in small { font-size: var(--fs-2xs); color: var(--ink-soft); }

/* ---------- Danh sách "thêm" ---------- */
.morelist .lrow .mi { font-size: 19px; width: 30px; text-align: center; flex: none; color: var(--forest); }

/* ---------- In / desktop rộng ---------- */
@media (min-width: 760px) {
  .view { padding: var(--s-4) var(--s-4) var(--s-8); }
  .searchbar { margin: 0 calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4); }
}