/* =========================================================================
   The Nail — Sổ tiệm v2.1 · styles.css · theme "Sage & Cream"
   Mobile-first 390px · app max-width 520px · 0 dependency
   Quy tắc màu: cam đất --brand = CTA/nav active; xanh rêu --green/--sage-deep
                = heading, chip đang chọn, giá trị nhấn.
                DATA chỉ dùng --blue (doanh thu) / --orange (chi, khách mới)
                / --data-grey #c3c2b7 (khách lẻ). Không tô data bằng brand.
   Layout / cỡ chữ / radius / shadow GIỮ NGUYÊN như v2 — chỉ đổi màu.
   ========================================================================= */

/* ---------- 1. Tokens (spec-v2.1 §1) ---------- */
:root{ color-scheme:light;
  --bg:#fdf6ed; --surface:#fffdf9; --ink:#2f352c; --ink2:#5d635a; --muted:#8b9083;
  --line:#e7dccd; --grid:#e7dccd; --baseline:#cfc4b2;
  --brand:#C05A33; --brand-deep:#9E4426; --brand-soft:#f7e3d7; --brand-border:#eccfbc;
  --green:#2E4A3C; --sage:#778873; --sage-deep:#4a5848; --sage-soft:#e9ede5;
  --sage-border:#d9e0d2;
  --blue:#2a78d6; --blue-deep:#1c5cab; --blue-soft:#e7f0fc; --orange:#eb6834;
  --data-grey:#c3c2b7;                     /* GIỮ — màu data "khách lẻ" (đã validate CVD) */
  --good-text:#2c6a44; --danger:#b3402e; --danger-text:#96351f; --danger-soft:#f7e1da;
  --danger-border:#edcabc;
  --wash:#f3ece1;                          /* nền chìm: track, segmented, thumbnail */
  --ring:rgba(46,74,60,.10);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent }
input,select,textarea{ font:inherit; color:inherit }
img{ max-width:100%; display:block }
svg{ display:block }
a{ color:var(--brand-deep) }
[hidden]{ display:none !important }
::selection{ background:var(--brand-soft) }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px }

/* ---------- 3. App shell ---------- */
.app{
  max-width:520px; margin:auto; min-height:100vh; background:var(--bg);
  position:relative; display:flex; flex-direction:column;
}
/* Desktop: khung giữa màn hình có viền */
@media (min-width:560px){
  body{ background:#f4ebdd; padding:0 }
  .app{
    min-height:100vh; border-left:1px solid var(--line); border-right:1px solid var(--line);
    box-shadow:0 0 0 1px rgba(11,11,11,.02), 0 18px 50px rgba(11,11,11,.07);
  }
}

/* ---------- 4. Header ---------- */
.hd{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px 10px; min-height:56px;
  background:rgba(255,253,249,.94); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.hd-brand{ min-width:0; display:flex; align-items:center }
/* logo SVG inline (src/logo.svg, bản không nền) — cao 34px, tỉ lệ tự do */
.hd-logo{ display:block; height:34px; width:auto; flex:none }

/* ---------- 5. Role switch (segmented, giống .seg) ---------- */
.role-switch{
  display:flex; gap:2px; padding:3px; flex:none;
  background:var(--wash); border:1px solid var(--line); border-radius:999px;
}
.role-btn{
  padding:6px 11px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--ink2); white-space:nowrap; transition:background .15s, color .15s;
}
.role-btn.on{ background:var(--brand); color:#fff; box-shadow:0 1px 3px rgba(192,90,51,.32) }

/* ---------- 6. Demo note ---------- */
.demo-note{
  padding:7px 16px; font-size:11.5px; line-height:1.35; color:var(--sage-deep);
  background:var(--sage-soft); border-bottom:1px solid var(--sage-border);
}

/* ---------- 7. Tabs / main ---------- */
.main{ flex:1 1 auto }
.tab{ display:none; padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px)) }
.tab.on{ display:block; animation:fadeup .22s ease both }
@keyframes fadeup{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ---------- 8. Bottom nav ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:520px; margin:auto;
  display:grid; grid-template-columns:repeat(5,1fr);   /* v2.5: thêm tab Lịch hẹn */
  background:rgba(255,253,249,.96); backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
}
@media (min-width:560px){
  .nav{ border-left:1px solid var(--line); border-right:1px solid var(--line) }
}
.nav-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:5px 2px 4px; color:var(--muted); border-radius:12px; transition:color .15s;
}
.nav-btn.on{ color:var(--brand) }
.nav-ico{ position:relative; display:block; width:24px; height:24px }
.nav-ico svg{ width:24px; height:24px }
.nav-lbl{ font-size:10.5px; font-weight:600; letter-spacing:.1px }
.nav-btn.on .nav-lbl{ font-weight:700 }

/* Bubble đỏ brand trên icon nav (số việc chăm sóc) */
.navbadge{
  position:absolute; top:-5px; right:-8px; min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; border:2px solid var(--surface);
  border-radius:999px; font-size:10px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}
/* ổ khoá nav: icon SVG stroke 12px (spec-v2.1 §2 — không emoji) */
.navlock{
  position:absolute; top:-6px; right:-9px; width:16px; height:16px; padding:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border-radius:50%; color:var(--ink2); line-height:1;
}
.navlock svg{ width:12px; height:12px }

/* ---------- 9. Typography helpers ---------- */
.sec-title{
  font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin:18px 2px 8px;
}
.sec-title:first-child{ margin-top:2px }
.h-hello{ font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--green) }
.h-sub{ font-size:12.5px; color:var(--muted); margin-top:2px }
.sub{ font-size:12.5px; color:var(--ink2) }
.muted{ color:var(--muted) }
.num{ font-variant-numeric:tabular-nums }
.strong{ font-weight:700 }
.row{ display:flex; align-items:center; gap:8px }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.stack{ display:flex; flex-direction:column; gap:10px }
.empty{
  padding:26px 14px; text-align:center; color:var(--muted); font-size:13.5px;
  background:var(--surface); border:1px dashed var(--line); border-radius:14px;
}

/* ---------- 10. Card ---------- */
.card{
  background:var(--surface); border:1px solid var(--ring); border-radius:16px;
  padding:14px; box-shadow:0 1px 2px rgba(11,11,11,.03);
}
.card + .card{ margin-top:10px }
.card-tight{ padding:10px 12px }
.card-title{ font-size:14px; font-weight:700; margin-bottom:2px; color:var(--green) }

/* ---------- 11. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:13px; font-size:14.5px; font-weight:700;
  background:var(--surface); border:1px solid var(--ring); color:var(--ink);
  box-shadow:0 1px 2px rgba(11,11,11,.04); text-decoration:none;
  transition:transform .1s, background .15s, opacity .15s;
}
.btn:active{ transform:scale(.975) }
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 2px 8px rgba(192,90,51,.28);
}
.btn-primary:disabled{ background:#ded6c8; border-color:#ded6c8; color:#fff;
  box-shadow:none; cursor:not-allowed; transform:none }
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink2);
  box-shadow:none; font-weight:600;
}
.btn-danger{ background:var(--danger-soft); border-color:var(--danger-border); color:var(--danger-text) }
/* nút phụ tông xanh rêu (In bill, Copy tin…) */
.btn-sage{ background:var(--sage-soft); border-color:var(--sage-border); color:var(--sage-deep) }
.btn-full{ display:flex; width:100% }
.btn-sm{ padding:8px 12px; font-size:13px; border-radius:11px }
.btn-row{ display:flex; gap:8px }
.btn-row > .btn{ flex:1 1 0; min-width:0 }

/* ---------- 12. Chip ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:7px }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--ink2);
  transition:background .15s, color .15s, border-color .15s;
}
/* chip đang chọn: xanh rêu đậm chữ trắng (spec-v2.1 §1) */
.chip.on{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff }
.chip .n{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.chip.on .n{ color:rgba(255,255,255,.78) }

/* ---------- 13. Badge hạng khách (spec-v2.1 §3 — luôn kèm chữ) ---------- */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
  vertical-align:middle;
}
.b-vip{ background:var(--brand-soft); color:var(--brand-deep) }
.b-loyal{ background:var(--sage-soft); color:var(--sage-deep) }
.b-new{ background:var(--blue-soft); color:var(--blue-deep) }
.b-risk{ background:var(--danger-soft); color:var(--danger-text) }

/* ---------- 14. Search ---------- */
.search{ position:relative; margin-bottom:10px }
.search input{
  width:100%; padding:11px 12px 11px 36px; border-radius:13px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-size:14.5px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.search input::placeholder{ color:var(--muted) }
.search input:focus{ border-color:var(--brand-border); box-shadow:0 0 0 3px var(--brand-soft) }
/* kính lúp = SVG stroke (spec-v2.1 §2 — không emoji trong UI) */
.search::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; opacity:.75; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9083' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5 16.4 16.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 15. Danh sách giao dịch (.txrow) ---------- */
.txlist{ display:flex; flex-direction:column; gap:8px }
.txrow{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 12px; background:var(--surface);
  border:1px solid var(--ring); border-radius:14px;
  box-shadow:0 1px 2px rgba(11,11,11,.03);
  transition:transform .1s, background .15s;
}
.txrow:active{ transform:scale(.99); background:#faf3e9 }
.tx-ico{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--brand-soft); border:1px solid var(--brand-border);
}
/* pill 2 chữ cái đầu tên dịch vụ — thay icon emoji (spec-v2.1 §2) */
.sv-pill{
  border-radius:50%; font-size:12.5px; font-weight:800; letter-spacing:.3px;
  line-height:1; text-transform:uppercase;
}
.sv-pill.care{ background:var(--sage-soft); border-color:var(--sage-border); color:var(--sage-deep) }
.sv-pill.design{ background:var(--brand-soft); border-color:var(--brand-border); color:var(--brand-deep) }
.tx-mid{ flex:1 1 auto; min-width:0 }
.tx-name{
  font-size:14.5px; font-weight:700; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tx-sub{
  font-size:12px; color:var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tx-amt{
  flex:none; text-align:right; font-size:14.5px; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;
}
.tx-amt .tx-time{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-top:1px }
.tx-tag{
  display:inline-flex; align-items:center; gap:3px; margin-left:5px; padding:1px 5px;
  border-radius:5px; font-size:10px; font-weight:700; background:var(--wash);
  color:var(--muted); vertical-align:1px; line-height:1.4;
}
.tx-tag svg{ width:14px; height:14px; flex:none }
/* biến thể CHI — đỏ đất */
.txrow.out .tx-ico{ background:var(--danger-soft); border-color:var(--danger-border);
  color:var(--danger-text) }
.txrow.out .tx-amt{ color:var(--danger-text) }

/* ---------- 16. Thẻ khách (.cust) ---------- */
.custlist{ display:flex; flex-direction:column; gap:8px }
.cust{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 12px; background:var(--surface);
  border:1px solid var(--ring); border-radius:14px;
  box-shadow:0 1px 2px rgba(11,11,11,.03);
  transition:transform .1s, background .15s;
}
.cust:active{ transform:scale(.99); background:#faf3e9 }
.avatar{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:800; letter-spacing:.3px;
  background:var(--brand-soft); color:var(--brand-deep); border:1px solid var(--brand-border);
}
.avatar-lg{ width:56px; height:56px; font-size:18px }
.cust-mid{ flex:1 1 auto; min-width:0 }
.cust-name{
  font-size:14.5px; font-weight:700; line-height:1.25;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.cust-name svg{ width:14px; height:14px; color:var(--muted); flex:none }
.cust-sub{ font-size:12px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cust-amt{ flex:none; text-align:right; font-size:13.5px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap }

/* ---------- 17. Thẻ chăm sóc (.care) ---------- */
.carelist{ display:flex; flex-direction:column; gap:10px }
.care{
  background:var(--surface); border:1px solid var(--ring); border-radius:16px;
  padding:13px; box-shadow:0 1px 2px rgba(11,11,11,.03);
  transition:opacity .2s, transform .2s;
}
.care.gone{ opacity:0; transform:translateX(18px) }
.care-top{ display:flex; align-items:flex-start; gap:10px }
.care-mid{ flex:1 1 auto; min-width:0 }
.care-name{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.care-why{ font-size:12.5px; color:var(--muted); margin-top:2px }
.msg{
  margin-top:10px; padding:10px 11px; border-radius:12px;
  background:var(--sage-soft); border:1px solid var(--sage-border);
  color:var(--sage-deep); font-size:13px; line-height:1.5; white-space:pre-wrap;
}
.care-btns{ display:flex; gap:7px; margin-top:10px }
.care-btns .btn{ flex:1 1 0; min-width:0; padding:9px 8px; font-size:13px; border-radius:11px }
.care-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; margin-bottom:12px;
  background:var(--brand-soft); border:1px solid var(--brand-border); border-radius:16px;
}
.care-head b{ font-size:17px; color:var(--brand-deep) }

/* ---------- 18. KPI ---------- */
/* 3 ô hôm nay */
.kpi-today{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--ring); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(11,11,11,.03);
}
.kpi-today > div{ background:var(--surface); padding:12px 8px; text-align:center }
.kpi-lbl{ font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.2px }
.kpi-val{ font-size:17px; font-weight:800; letter-spacing:-.3px; margin-top:3px; line-height:1.15;
  color:var(--green) }
.kpi-val.neg{ color:var(--danger-text) }

/* 4 ô báo cáo — 2×2 */
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.kpi{
  background:var(--surface); border:1px solid var(--ring); border-radius:16px;
  padding:12px 13px 11px; box-shadow:0 1px 2px rgba(11,11,11,.03);
  display:flex; flex-direction:column; min-height:92px;
}
.kpi .kpi-lbl{ font-size:11.5px }
.kpi .kpi-val{ font-size:19px; margin-top:4px }
.delta{
  display:inline-flex; align-items:center; gap:3px; margin-top:5px;
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted);
}
.delta.up{ color:var(--good-text) }
.delta.down{ color:var(--danger-text) }
/* sparkline (svg trong ô KPI) */
.spark{ margin-top:auto; padding-top:6px; height:26px }
.spark svg{ width:100%; height:22px; overflow:visible }
.spark path,.spark polyline{ fill:none; stroke:var(--blue); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.spark .fill{ fill:var(--blue-soft); stroke:none }

/* ---------- 19. Bộ chọn kỳ (.seg) ---------- */
.seg{
  display:flex; gap:3px; padding:3px; margin-bottom:12px;
  background:var(--wash); border:1px solid var(--line); border-radius:999px;
}
.seg button{
  flex:1 1 0; padding:8px 6px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--ink2);
  transition:background .15s, color .15s, box-shadow .15s;
}
.seg button.on{
  background:var(--surface); color:var(--green);
  box-shadow:0 1px 3px rgba(11,11,11,.10);
}

/* ---------- 20. Biểu đồ ---------- */
.chart-card{
  position:relative; background:var(--surface); border:1px solid var(--ring);
  border-radius:16px; padding:14px 13px 12px; margin-bottom:10px;
  box-shadow:0 1px 2px rgba(11,11,11,.03);
}
.chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px }
.chart-title{ font-size:14px; font-weight:700; color:var(--green) }
.chart-note{ font-size:11.5px; color:var(--muted) }
.chart-link{ font-size:12px; font-weight:700; color:var(--brand-deep) }

/* 20a. Cột dọc (doanh thu theo ngày/tuần) */
.colchart{ position:relative; display:flex; align-items:flex-end; gap:3px; height:136px;
  padding-top:18px; border-bottom:1px solid var(--grid) }
.colchart .grid{ position:absolute; left:0; right:0; height:1px; background:var(--grid) }
.col{ position:relative; flex:1 1 0; min-width:0; height:100%;
  display:flex; align-items:flex-end; justify-content:center }
.col-fill{
  position:relative; width:100%; max-width:24px; background:var(--blue);
  border-radius:4px 4px 0 0; min-height:2px;   /* đầu dữ liệu bo, chân trục vuông */
  transition:opacity .15s;
}
.col.dim .col-fill{ opacity:.45 }
/* nhãn giá trị: đặt TRONG .col-fill → bám đỉnh cột (dùng cho cột cao nhất) */
.col-val{
  position:absolute; top:-3px; left:50%; transform:translate(-50%,-100%);
  font-size:10.5px; font-weight:800; color:var(--ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none;
}
.axis-y{ position:absolute; left:0; top:0; bottom:0; width:100%; pointer-events:none }
.axis-y span{ position:absolute; left:0; font-size:10px; color:var(--muted);
  background:var(--surface); padding-right:4px; font-variant-numeric:tabular-nums }
.axis-x{ display:flex; gap:3px; margin-top:5px }
/* overflow:visible — nhãn trục X thưa được phép tràn sang ô rỗng bên cạnh,
   không bị cắt cụt thành "0…" (A7) */
.axis-x span{ flex:1 1 0; min-width:0; text-align:center; font-size:9.5px; color:var(--muted);
  overflow:visible; white-space:nowrap }

/* 20b. Thanh ngang (.hbar) */
.hbars{ display:flex; flex-direction:column; gap:11px }
.hbar-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px }
.hbar-name{ font-size:13px; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hbar-val{ font-size:12.5px; font-weight:700; color:var(--ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex:none }
.hbar-track{ height:10px; background:var(--wash); border-radius:0 4px 4px 0; overflow:hidden }
.hbar-fill{ height:100%; background:var(--blue); border-radius:0 4px 4px 0; min-width:3px;
  transition:width .3s ease }
.hbar.orange .hbar-fill{ background:var(--orange) }
.hbar.base .hbar-fill{ background:var(--data-grey) }

/* 20c. Stacked bar 1 thanh (khách quay lại) */
.stackbar{ display:flex; gap:2px; height:16px; background:var(--surface); margin-bottom:11px }
.stackbar > span{ display:block; min-width:3px; background:var(--data-grey) }
.stackbar > span:first-child{ border-radius:4px 0 0 4px }
.stackbar > span:last-child{ border-radius:0 4px 4px 0 }
.stackbar > span:only-child{ border-radius:4px }
.s-ret{ background:var(--blue) !important }
.s-new{ background:var(--orange) !important }
.s-walk{ background:var(--data-grey) !important }

/* 20d. Chú giải */
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px }
.legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2) }
.legend i{ width:9px; height:9px; border-radius:3px; background:var(--data-grey); flex:none }
.legend i.s-ret{ background:var(--blue) }
.legend i.s-new{ background:var(--orange) }
.legend i.s-walk{ background:var(--data-grey) }
.legend b{ font-variant-numeric:tabular-nums; color:var(--ink) }

/* 20e. Tooltip đen */
.chart-tip{
  position:absolute; z-index:5; transform:translate(-50%,-100%);
  padding:7px 10px; border-radius:10px; pointer-events:none;
  background:rgba(11,11,11,.92); color:#fff; font-size:11.5px; line-height:1.45;
  white-space:nowrap; box-shadow:0 6px 18px rgba(11,11,11,.22);
}
.chart-tip b{ font-size:13px; font-variant-numeric:tabular-nums }
.chart-tip::after{
  content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px;
  transform:translateX(-50%) rotate(45deg); background:rgba(11,11,11,.92);
}

/* 20f. Bảng nhỏ */
table.mini{ width:100%; border-collapse:collapse; font-size:12.5px;
  font-variant-numeric:tabular-nums; margin-top:10px }
table.mini th{
  text-align:right; font-size:10.5px; font-weight:800; letter-spacing:.3px;
  text-transform:uppercase; color:var(--muted); padding:6px 4px;
  border-bottom:1px solid var(--line);
}
table.mini th:first-child,table.mini td:first-child{ text-align:left }
table.mini td{ text-align:right; padding:7px 4px; border-bottom:1px solid var(--line); color:var(--ink2) }
table.mini tbody tr:last-child td{ border-bottom:0 }
table.mini td.v{ color:var(--ink); font-weight:700 }

/* ---------- 21. Nhận xét nhanh (.insight) ---------- */
/* D5.4: bỏ cột emoji → chỉ còn 1 khối chữ, không cần gap icon */
.insight{
  display:flex; align-items:flex-start; gap:0; width:100%; text-align:left;
  padding:11px 12px; margin-bottom:8px;
  background:var(--surface); border:1px solid var(--ring); border-radius:14px;
  font-size:13px; line-height:1.5; color:var(--ink2);
  box-shadow:0 1px 2px rgba(11,11,11,.03);
}
.insight em{ font-style:normal; font-size:15px; line-height:1.2; flex:none }
.insight b{ color:var(--ink) }
.insight.go{ border-color:var(--brand-border); background:var(--brand-soft); color:var(--brand-deep) }
.insight.go b{ color:var(--brand-deep) }
.insight.go::after{ content:"›"; margin-left:auto; font-size:18px; font-weight:700; opacity:.6 }
.insight.warn{ border-color:var(--danger-border); background:var(--danger-soft); color:var(--danger-text) }
.insight.warn b{ color:var(--danger-text) }

/* ---------- 22. (bỏ) Màn khóa Báo cáo — D8.5: vai Thợ nay có báo cáo
                của mình, không còn màn "Chỉ chủ tiệm" nào để style ---------- */

/* ---------- 23. Overlay + Sheet ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(11,11,11,.42);
  animation:fadein .2s ease both;
}
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-width:520px; margin:auto;
  background:var(--surface); border-radius:22px 22px 0 0;
  box-shadow:0 -10px 40px rgba(11,11,11,.20);
  max-height:92vh; display:flex; flex-direction:column;
  animation:slideup .26s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes slideup{ from{ transform:translateY(100%) } to{ transform:none } }
.grab{ width:38px; height:4px; border-radius:999px; background:var(--line); margin:9px auto 2px; flex:none }
.sh-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 16px 10px; border-bottom:1px solid var(--line); flex:none;
}
.sh-title{ font-size:16.5px; font-weight:800; letter-spacing:-.2px; min-width:0; color:var(--green);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sh-x{
  flex:none; width:30px; height:30px; border-radius:50%; font-size:14px; color:var(--ink2);
  display:flex; align-items:center; justify-content:center; background:var(--wash);
}
.sh-body{
  padding:14px 16px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto;
}
.sh-foot{
  padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line); background:var(--surface); flex:none;
}

/* ---------- 24. Form trong sheet ---------- */
.f-lbl{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); margin:14px 0 7px;
}
.f-lbl:first-child{ margin-top:0 }
.f-lbl .req{ color:var(--brand); margin-left:2px }
.inp{
  width:100%; padding:11px 12px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.inp::placeholder{ color:var(--muted) }
.inp:focus{ border-color:var(--brand-border); box-shadow:0 0 0 3px var(--brand-soft) }
.inp.num{ font-variant-numeric:tabular-nums; font-weight:700 }
textarea.inp{ resize:vertical; min-height:64px; line-height:1.45 }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.row2 .f-lbl{ margin-top:0 }
.f-hint{ font-size:11.5px; color:var(--muted); margin-top:5px }

/* lưới dịch vụ dạng chip có giá + tiêu đề nhóm NAIL CARE / DESIGN */
.svc-group{
  font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--muted); margin:0 2px 7px;
}
.svc-grid + .svc-group{ margin-top:12px }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.svc{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 11px; border-radius:12px; text-align:left;
  background:#fff; border:1px solid var(--line);
  transition:background .15s, border-color .15s;
}
.svc b{ font-size:13px; font-weight:700; line-height:1.25 }
.svc span{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.svc.on{ background:var(--sage-deep); border-color:var(--sage-deep) }
.svc.on b{ color:#fff }
.svc.on span{ color:rgba(255,255,255,.78) }

/* khối "Đã chọn" — mỗi dòng: tên + ô giá sửa được + nút bỏ (spec-v2.1 §4.3) */
.picked-list{ display:flex; flex-direction:column; gap:7px; margin-top:9px }
.picked-list:empty{ display:none }
.pick-row{
  display:flex; align-items:center; gap:8px; padding:7px 8px 7px 12px;
  background:var(--sage-soft); border:1px solid var(--sage-border); border-radius:12px;
}
.pick-name{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; color:var(--sage-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pick-price{ flex:none; position:relative }
.pick-price input{
  width:112px; padding:7px 22px 7px 10px; border-radius:10px; text-align:right;
  background:#fff; border:1px solid var(--sage-border); color:var(--ink);
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.pick-price input:focus{ border-color:var(--brand-border); box-shadow:0 0 0 3px var(--brand-soft) }
.pick-price::after{
  content:"đ"; position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:700; color:var(--muted); pointer-events:none;
}
.pick-x{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--sage-deep); background:rgba(255,255,255,.75);
}
.pick-hint{ font-size:11.5px; color:var(--muted); margin-top:7px }

/* chọn khách: kết quả tìm + khách đã chọn */
.cust-pick{
  max-height:196px; overflow-y:auto; margin-top:8px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.cust-pick button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 11px; border-bottom:1px solid var(--line);
}
.cust-pick button:last-child{ border-bottom:0 }
.cust-pick button:active{ background:var(--sage-soft) }
.cust-pick .avatar{ width:30px; height:30px; font-size:11px }
.cust-pick b{ font-size:13.5px; font-weight:700; display:block }
.cust-pick small{ font-size:11.5px; color:var(--muted) }
.picked{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  padding:9px 11px; border-radius:12px;
  background:var(--brand-soft); border:1px solid var(--brand-border);
}
.picked .avatar{ width:32px; height:32px; font-size:12px; background:#fff }
.picked b{ font-size:14px; font-weight:700; color:var(--brand-deep); display:block }
.picked small{ font-size:11.5px; color:var(--brand) }
.picked .picked-x{
  margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--brand-deep); background:rgba(255,255,255,.75);
}
/* tổng tiền realtime */
.total-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:14px; padding:12px 14px; border-radius:14px;
  background:var(--brand-soft); border:1px solid var(--brand-border);
}
.total-line span{ font-size:12.5px; font-weight:700; color:var(--brand-deep) }
.total-line b{ font-size:21px; font-weight:800; letter-spacing:-.4px; color:var(--green);
  font-variant-numeric:tabular-nums }

/* ---------- 25. Ảnh móng ---------- */
.photo-add{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:12px; border-radius:12px; font-size:13.5px; font-weight:700;
  color:var(--brand-deep); background:var(--brand-soft);
  border:1px dashed var(--brand-border);
}
.photo-add svg{ width:16px; height:16px; flex:none }
.photo-add:disabled{ color:var(--muted); background:var(--wash); border-color:var(--line); cursor:not-allowed }
.photo-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:9px }
.photo-thumbs:empty{ display:none }
.thumb{
  position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden;
  background:var(--wash); border:1px solid var(--line);
}
.thumb img{ width:100%; height:100%; object-fit:cover }
.thumb-x{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; color:#fff; background:rgba(11,11,11,.62);
  backdrop-filter:blur(2px);
}
/* gallery trong hồ sơ khách */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.photo-grid button{
  position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:var(--wash); border:1px solid var(--line);
}
.photo-grid img{ width:100%; height:100%; object-fit:cover }
.photo-grid .ph-date{
  position:absolute; left:0; right:0; bottom:0; padding:11px 6px 4px;
  font-size:10px; font-weight:700; color:#fff; text-align:left;
  background:linear-gradient(to top,rgba(11,11,11,.62),rgba(11,11,11,0));
}
/* xem ảnh to */
/* z-index 95 > .toast (90): xem ảnh to luôn nằm TRÊN toast (A7) */
.photo-viewer{
  position:fixed; inset:0; z-index:95; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:20px;
  background:rgba(11,11,11,.94); animation:fadein .18s ease both;
}
.photo-viewer img{
  width:100%; max-width:420px; max-height:74vh; height:auto;
  border-radius:14px; object-fit:contain;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.photo-viewer .pv-cap{ color:#fff; font-size:13px; text-align:center; opacity:.92; max-width:340px }
.photo-viewer .pv-x{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff; background:rgba(255,255,255,.16);
}

/* ---------- 26. Bill (spec-v2.1 §5 — nền kem, logo SVG, không emoji) ---------- */
.bill-print-area{ display:block }
.bill{
  width:100%; max-width:300px; margin:0 auto; padding:16px 14px 14px;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  font-size:12.5px; line-height:1.5; font-variant-numeric:tabular-nums;
}
.bill-logo{ display:flex; align-items:center; justify-content:center; margin-bottom:7px }
.bill-logo svg{ height:48px; width:auto; display:block }
.bill-shop{ text-align:center; font-size:17px; font-weight:800; letter-spacing:.2px; color:var(--green) }
.bill-sub{
  text-align:center; font-size:9px; font-weight:800; letter-spacing:1.6px;
  color:var(--green); text-transform:uppercase;
}
.bill-addr{ text-align:center; font-size:10.5px; color:var(--ink2); margin-top:4px; line-height:1.45 }
.bill-sep{ border:0; border-top:1px dashed var(--baseline); margin:10px 0 }
.bill-meta{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--ink2) }
.bill-meta + .bill-meta{ margin-top:3px }
.bill-meta b{ color:var(--ink); font-weight:700 }
.bill-line{ display:flex; justify-content:space-between; gap:10px; padding:3px 0 }
.bill-line span:first-child{ min-width:0 }
.bill-line span:last-child{ flex:none; font-weight:600 }
.bill-line.tip span:first-child{ font-style:italic; color:var(--ink2) }
.bill-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:4px; font-size:15px; font-weight:800;
}
.bill-total b{ font-size:21px; font-weight:800; letter-spacing:-.4px; color:var(--green) }
.bill-pay{ text-align:right; font-size:11.5px; color:var(--ink2); margin-top:4px }
.bill-thanks{ text-align:center; font-size:11.5px; color:var(--ink2); margin-top:12px; line-height:1.45 }
.bill-slogan{ display:block; font-style:italic; color:var(--green); margin-bottom:2px }
.bill-actions{ display:flex; gap:8px; margin-top:14px }
.bill-actions .btn{ flex:1 1 0; min-width:0 }
.bill-png{ margin-top:12px }
.bill-png img{ width:100%; max-width:300px; margin:0 auto; border-radius:12px; border:1px solid var(--line) }
.bill-png p{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:6px }

/* In: chỉ in vùng bill, khổ 80mm (contract §7) */
@media print{
  body *{ visibility:hidden }
  .bill-print-area, .bill-print-area *{ visibility:visible }
  .bill-print-area{ position:absolute; left:0; top:0; width:100%; margin:0; padding:0 }
  .bill{ max-width:none; width:100%; border:0; border-radius:0; padding:0; font-size:12px;
    background:#fff }
  .bill-actions, .bill-png{ display:none !important }
  @page{ size:80mm auto; margin:4mm }
}

/* ---------- 27. Toast ---------- */
.toast{
  /* Fix 29/07 (Hào báo): toast trên đầu che role switch → chuyển xuống đáy,
     nổi trên bottom nav, và pointer-events:none để không chặn thao tác. */
  position:fixed; bottom:calc(86px + env(safe-area-inset-bottom,0px)); left:50%;
  transform:translateX(-50%); z-index:90; pointer-events:none;
  max-width:calc(100% - 32px); padding:10px 16px; border-radius:999px;
  background:rgba(11,11,11,.92); color:#fff; font-size:13.5px; font-weight:600;
  text-align:center; box-shadow:0 8px 26px rgba(11,11,11,.28);
  animation:toastin .24s cubic-bezier(.22,.9,.32,1) both;
}
body[data-role="guest"] .toast{ bottom:calc(22px + env(safe-area-inset-bottom,0px)) } /* vai Khách không có nav */
@keyframes toastin{ from{ opacity:0; transform:translate(-50%,14px) } to{ opacity:1; transform:translateX(-50%) } }

/* ---------- 28. Tiện ích nhỏ ---------- */
.mt0{ margin-top:0 } .mt8{ margin-top:8px } .mt12{ margin-top:12px } .mt16{ margin-top:16px }
.mb8{ margin-bottom:8px } .mb12{ margin-bottom:12px }
.tar{ text-align:right } .tac{ text-align:center }
.hide{ display:none !important }
.divider{ height:1px; background:var(--line); margin:14px 0 }
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0;
  font-size:13.5px; border-bottom:1px solid var(--line) }
.kv:last-child{ border-bottom:0 }
.kv span{ color:var(--muted); font-size:12.5px }
.kv b{ font-weight:700; font-variant-numeric:tabular-nums }

/* ---------- 29. Báo cáo vai Thợ (spec-v2.2 §2) ---------- */
/* 3 ô KPI trên 1 hàng: Mình làm · Tip nhận · Lượt làm */
.kpis-3{ grid-template-columns:repeat(3,1fr); gap:8px }
.kpis-3 .kpi{ padding:11px 10px 10px; min-height:86px }
.kpis-3 .kpi .kpi-val{ font-size:17.5px }
.kpis-3 .delta{ flex-wrap:wrap; row-gap:0; font-size:11px; line-height:1.3 }
/* "… còn N lượt nữa" dưới danh sách 30 dòng (D8.4) */
.more-line{
  margin:10px 2px 0; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--muted);
}

/* ---------- 30. Cổng khách tra cứu (spec-v2.2 §3) ---------- */
/* D8.5: vai Khách ẩn hẳn bottom nav — chỉ còn 1 màn tra cứu */
body[data-role="guest"] nav{ display:none }
body[data-role="guest"] .tab{ padding-bottom:32px }

.guest{ display:block }
.guest-intro{ text-align:center; padding:18px 6px 20px }
.guest-logo{ display:flex; justify-content:center; margin-bottom:14px }
.guest-logo svg{ height:40px; width:auto }
.guest-title{ font-size:19px; font-weight:800; letter-spacing:-.2px; color:var(--green) }
.guest-lead{
  margin-top:6px; font-size:13px; line-height:1.5; color:var(--ink2);
  max-width:290px; margin-left:auto; margin-right:auto;
}
.guest-form .f-lbl{ margin-top:13px }
.guest-form .f-lbl:first-child{ margin-top:0 }
.guest-go{ margin-top:16px }
.guest-err{
  margin-top:12px; padding:10px 12px; border-radius:12px;
  font-size:13px; line-height:1.5;
  background:var(--danger-soft); border:1px solid var(--danger-border); color:var(--danger-text);
}
.guest-foot{
  margin-top:14px; text-align:center; font-size:11.5px; line-height:1.5; color:var(--muted);
}

/* màn kết quả */
.guest-hello{ padding:16px 14px 14px }
.guest-hi{ font-size:19px; font-weight:800; letter-spacing:-.2px; color:var(--green) }
.guest-hi-sub{ margin-top:3px; font-size:12.5px; color:var(--muted) }
.guest-hello .kpis{ margin-top:13px }
.guest-hello .kpi{ min-height:0; padding:11px 12px }

.guest-contact{
  margin-top:18px; padding:14px; border-radius:16px; text-align:center;
  background:var(--sage-soft); border:1px solid var(--sage-border);
}
.guest-contact .gc-lbl{ font-size:13px; font-weight:700; color:var(--sage-deep) }
.guest-contact .gc-phone{
  margin-top:2px; font-size:20px; font-weight:800; letter-spacing:.3px;
  color:var(--green); font-variant-numeric:tabular-nums;
}
.guest-contact .gc-links{ display:flex; gap:8px; margin-top:10px }
.guest-contact .gc-links .btn{ flex:1 1 0; min-width:0; font-size:13.5px; padding:10px 10px }
.guest-exit{ margin-top:10px }

/* ---------- 31. Tab Lịch hẹn (spec-v2.5 §3 · D12 · spec-v2.7 §1/§2) ---------- */
/* Dùng NGUYÊN token màu có sẵn — không thêm màu mới, không đụng màu data chart. */

/* đầu tab: tên + câu nhắc gọn */
.ap-top{ margin-bottom:10px }

/* thanh điều hướng: ◀  Tháng 7, 2026  ▶   [Tháng ▾]  [Hôm nay] */
.ap-nav{
  display:flex; align-items:center; gap:3px; margin-bottom:8px;
  padding:5px 5px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
}
.ap-nav .ap-arrow{
  flex:none; width:26px; height:30px; border-radius:9px;
  font-size:11px; line-height:1; color:var(--ink2); background:transparent;
}
.ap-nav .ap-arrow:active{ background:var(--wash) }
/* tiêu đề co giãn nhưng vẫn đủ chỗ cho "Tháng 12, 2026" ở 390px */
.ap-nav .ap-title{
  flex:1 1 auto; min-width:0; padding:6px 2px; border-radius:10px;
  font-size:14px; font-weight:800; letter-spacing:-.2px; color:var(--green);
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ap-nav .ap-month,.ap-nav .ap-jump{
  flex:none; padding:6px 8px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
  background:var(--wash); color:var(--ink2); border:1px solid var(--line);
}
.ap-nav .ap-jump{
  background:var(--brand-soft); border-color:var(--brand-border); color:var(--brand-deep);
}

/* dải tuần (7 ô) / lưới tháng (42 ô) — cùng lưới 7 cột đều nhau */
.ap-cal{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  margin-bottom:12px; padding:6px 4px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
}
.ap-cal .ap-wd{
  padding:2px 0 4px; text-align:center;
  font-size:10.5px; font-weight:800; letter-spacing:.3px; color:var(--muted);
}
.ap-cal .ap-day{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; min-height:40px; padding:4px 0 5px; border-radius:11px;
  background:transparent; color:var(--ink);
  transition:background .12s, color .12s, box-shadow .12s;
}
.ap-cal.month .ap-day{ min-height:42px }
.ap-cal .ap-dnum{
  font-size:14px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums;
}
.ap-cal .ap-dots{
  display:flex; align-items:center; justify-content:center; gap:3px; height:4px;
}
.ap-cal .dot{
  display:block; width:4px; height:4px; border-radius:50%; background:var(--sage-deep);
}
/* ngày tràn của tháng đang xem — chữ mờ */
.ap-cal .ap-day.out .ap-dnum{ color:var(--muted); font-weight:600 }
/* hôm nay: viền cam đất */
.ap-cal .ap-day.today{ box-shadow:inset 0 0 0 1.5px var(--brand) }
/* ngày đang chọn: nền cam đất, chữ + chấm trắng (đè cả .out/.today) */
.ap-cal .ap-day.sel{ background:var(--brand); box-shadow:none }
.ap-cal .ap-day.sel .ap-dnum{ color:#fff; font-weight:800 }
.ap-cal .ap-day.sel .dot{ background:#fff }
.ap-cal .ap-day.sel.today{ box-shadow:0 1px 3px rgba(192,90,51,.32) }
.ap-cal .ap-day:active{ transform:scale(.97) }

/* tiêu đề ngày + nút ＋ Đặt lịch nằm cạnh nhau */
.ap-dayhead{
  display:flex; align-items:center; gap:10px; margin:2px 2px 9px;
}
.ap-daytitle{
  flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:800;
  letter-spacing:-.2px; color:var(--green);
}
.ap-dayhead .btn{ flex:none }

/* khối "Sắp tới" (spec-v2.7 §2 — dòng [data-ajump], bấm chỉ đổi ngày) */
.ap-jlist{ display:flex; flex-direction:column; gap:6px }
.ap-jrow{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px;
  border-radius:12px; text-align:left;
  background:var(--sage-soft); border:1px solid var(--sage-border);
  transition:transform .1s;
}
.ap-jrow:active{ transform:scale(.99) }
.ap-jwhen{
  flex:none; font-size:12.5px; font-weight:800; color:var(--sage-deep);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ap-jname{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; color:var(--green);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;
}

.aplist{ display:flex; flex-direction:column; gap:8px }
.aprow{
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  background:var(--surface); border:1px solid var(--ring); border-radius:14px;
  box-shadow:0 1px 2px rgba(11,11,11,.03);
  transition:transform .1s, border-color .15s;
}
.aprow:active{ transform:scale(.99) }
/* D12.2: lịch của chính mình tô đậm nhẹ (vạch xanh rêu bên trái) */
.aprow.mine{
  border-color:var(--sage-border);
  box-shadow:0 1px 2px rgba(11,11,11,.03), inset 3px 0 0 var(--sage);
}
.ap-time{
  flex:none; width:52px; font-size:17px; font-weight:800; letter-spacing:-.3px;
  color:var(--green); font-variant-numeric:tabular-nums;
}
.ap-mid{ flex:1 1 auto; min-width:0 }
.ap-name{ font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ap-sub{ font-size:12px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* chip trạng thái — 4 màu lấy từ token sẵn có (D12.5) */
.ap-chip{
  flex:none; display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
.ap-dat{ background:var(--sage-soft); color:var(--sage-deep) }
.ap-xong{ background:#e3f0e7; color:var(--good-text) }
.ap-huy{ background:var(--wash); color:var(--muted) }
.ap-vang{ background:var(--danger-soft); color:var(--danger-text) }
.ap-late{ background:var(--brand-soft); color:var(--brand-deep) }

/* sheet chi tiết */
.ap-hero{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:12px; border-radius:14px;
  background:var(--sage-soft); border:1px solid var(--sage-border);
}
.ap-hero-time{ font-size:26px; font-weight:800; letter-spacing:-.6px; color:var(--green);
  font-variant-numeric:tabular-nums; line-height:1 }
.ap-hero-day{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--sage-deep) }
.ap-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px;
}
.ap-meta:last-of-type{ border-bottom:0 }
.ap-meta span{ flex:none; color:var(--muted) }
.ap-meta b{ min-width:0; text-align:right; font-weight:700 }

/* form Đặt lịch */
.picked-alt{
  margin-left:auto; flex:none; padding:6px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; color:var(--brand-deep); background:rgba(255,255,255,.75);
}
#apDate,#apTime{ font-variant-numeric:tabular-nums; font-weight:700 }
/* cảnh báo trùng MỀM — cam đất, ngay trên nút Lưu (spec-v2.5 §3) */
.ap-warn{
  margin-bottom:10px; padding:9px 11px; border-radius:12px;
  font-size:12.5px; line-height:1.45;
  background:var(--brand-soft); border:1px solid var(--brand-border); color:var(--brand-deep);
}

/* ---------- 32. Dải nhắc lịch ở tab Hôm nay (spec-v2.5 §4) ---------- */
.today-appt{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:10px;
  padding:11px 13px; border-radius:14px; text-align:left;
  background:var(--sage-soft); border:1px solid var(--sage-border);
  transition:transform .1s;
}
.today-appt:active{ transform:scale(.99) }
.today-appt .ta-txt{ flex:1 1 auto; min-width:0; font-size:13px; line-height:1.4;
  color:var(--sage-deep) }
.today-appt .ta-txt b{ display:block; font-size:13.5px; font-weight:800; color:var(--green) }
.today-appt .ta-go{ flex:none; font-size:12px; font-weight:700; color:var(--brand-deep) }

/* ---------- 33. Màn đăng nhập (v3 — CHỈ hiện ở chế độ máy chủ) ----------
   Dùng nguyên token + class có sẵn (.card .inp .btn .f-lbl), chỉ thêm khung
   phủ toàn màn + vài lớp bố cục. body[data-auth="login"] ẩn app phía sau. */
body[data-auth="login"] .app{ display:none }
.auth-screen{
  position:fixed; inset:0; z-index:60; overflow-y:auto;
  background:var(--bg); padding:24px 18px 32px;
}
.auth{ max-width:360px; margin:0 auto; display:block }
.auth-intro{ text-align:center; padding:12px 6px 20px }
.auth-logo{ display:flex; justify-content:center; margin-bottom:16px }
.auth-logo svg{ height:44px; width:auto }
.auth-title{ font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--green) }
.auth-lead{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--ink2) }
.auth-form .f-lbl{ margin-top:13px }
.auth-form .f-lbl:first-child{ margin-top:0 }
.auth-go{ margin-top:16px }
.auth-err{
  margin-top:12px; padding:10px 12px; border-radius:12px;
  font-size:13px; line-height:1.5;
  background:var(--danger-soft); border:1px solid var(--danger-border); color:var(--danger-text);
}
.auth-guest{ margin-top:12px }
.auth-foot{
  margin-top:14px; text-align:center; font-size:11.5px; line-height:1.5; color:var(--muted);
}

/* ---------- 34. Nút tên ở header + sheet đăng xuất (v3 — chế độ máy chủ) ----
   Pill giống .role-btn nhưng trung tính: nền --wash, viền --line, chữ
   --sage-deep. Không thêm token màu mới. */
.who-btn{
  flex:none; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--sage-deep); background:var(--wash); border:1px solid var(--line);
  transition:background .15s;
}
.who-btn:active{ background:var(--sage-soft) }
.who-mail{
  font-size:13.5px; line-height:1.5; color:var(--ink2); word-break:break-all;
}