/* =====================================================================
   AMASS V12 — QUIET LUXURY CLINIC
   Bảng màu: Ivory (nền) · Charcoal (chữ, nút chính) · Champagne (điểm nhấn, đang chọn) · Sage Grey (phụ, trạng thái ổn)
   Nền sáng · đường kẻ mảnh · khoảng trắng rộng · chữ rõ. Lớp này nạp SAU app.css / admin.css — chỉ đổi token & phong cách,
   không đổi cấu trúc màn hình (mọi chức năng giữ nguyên).
   ===================================================================== */
:root {
  --ivory: #f7f4ee;          /* nền trang */
  --paper: #fffdf9;          /* bề mặt khối */
  --sand: #f1ece3;           /* nền phụ rất nhạt */
  --nude: #e7dfd2;
  --line: #ebe5da;           /* đường kẻ mảnh */
  --line-2: #ddd5c7;
  --ink: #2a2a28;            /* Charcoal */
  --ink-2: #474641;
  --muted: #76746d;
  --soft: #a29f97;
  --sage: #87958a;           /* Sage Grey */
  --sage-2: #a8b2a9;
  --sage-soft: #eef1ec;
  --olive: var(--sage);
  --olive-2: var(--sage-2);
  --champagne: #c6ae80;      /* Champagne */
  --champagne-deep: #8a7243; /* chữ / viền champagne trên nền sáng (đủ tương phản) */
  --champagne-soft: #f5efe3;
  --ok: #5d7362;
  --warn: #a5712a;
  --danger: #9e4637;
  --info: #5b6f7f;
  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 1px 1px rgba(42, 42, 40, .03), 0 12px 32px -20px rgba(42, 42, 40, .18);
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
}
body { color: var(--ink); background: var(--ivory); line-height: 1.6; }
::selection { background: var(--champagne-soft); }
a { text-underline-offset: 3px; }
.link { color: var(--champagne-deep); }
input:focus, select:focus, textarea:focus { border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(198, 174, 128, .22); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* ---------- Chữ ---------- */
.admin-body h1, .admin-body .head h1 { font-family: var(--display); font-weight: 600; font-size: 36px; letter-spacing: .005em; line-height: 1.12; }
.admin-body h3 { font-size: 15.5px; font-weight: 600; letter-spacing: .005em; }
.admin-body .panel h3, .admin-body .modal-head h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; }
.admin-body .modal-head h3 { font-family: var(--display); font-size: 26px; font-weight: 600; }
.eyebrow { letter-spacing: .16em; color: var(--champagne-deep); font-size: 10.5px; font-weight: 600; }
.small { font-size: 13.5px; } .xs { font-size: 12.5px; }
.muted { color: var(--muted); }

/* ---------- Nút ---------- */
.btn { border-radius: 10px; min-height: 42px; padding: 0 18px; font-size: 14px; letter-spacing: .01em; }
.btn-sm { min-height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.btn-primary { background: var(--ink); color: #fbf8f2; }
.btn-primary:hover:not(:disabled) { background: #161615; }
.btn-ghost { border-color: var(--line-2); background: var(--paper); }
.btn-ghost:hover:not(:disabled) { background: var(--sand); border-color: var(--line-2); }
.btn-olive { background: var(--sage); color: #fff; }
.btn-champagne { background: var(--champagne); color: #221f19; }
.btn-champagne:hover:not(:disabled) { background: #b99f6e; }
.icon-btn:hover { background: var(--sand); }

/* ---------- Nhãn trạng thái: nhẹ, không viền ---------- */
.pill { font-size: 11.5px; padding: 1px 9px; line-height: 20px; border: 0; letter-spacing: .01em; }
.pill-line { background: var(--sand); color: var(--muted); }
.pill-ok { background: var(--sage-soft); color: var(--ok); }
.pill-warn { background: #f7ecdb; color: #8a5a1c; }
.pill-danger { background: #f5e4df; color: var(--danger); }
.pill-gold { background: var(--champagne-soft); color: var(--champagne-deep); }
.pill-ink { background: var(--ink); color: #fbf8f2; }
.pill-mute { background: var(--sand); color: var(--soft); }
.pill-demo { background: transparent; border: 1px solid var(--line-2); color: var(--muted); }
.chip { border: 1px solid var(--line); background: var(--paper); padding: 6px 13px; font-size: 13px; color: var(--ink-2); }
.chip b { color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fbf8f2; }
.chip.on b { color: #fbf8f2; }
.chip-danger { border-color: #ecd3cc; color: var(--danger); background: #fcf5f3; }
.subtabs a { border-color: var(--line); }
.subtabs a.on { background: var(--ink); border-color: var(--ink); }

/* ---------- Khối & bảng: đường mảnh, khoảng trắng rộng ---------- */
.admin-body .panel, .admin-body .kpi-card, .admin-body .metric, .admin-body .stat, .admin-body .card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.admin-body .panel { padding: 24px 26px; }
.admin-body .panel + .panel { margin-top: 20px; }
.admin-body .panel-head { margin-bottom: 16px; }
.admin-body .kpi-card { padding: 20px 22px; }
.admin-body .metric .v, .admin-body .stat .v, .admin-body .kpi-nums b, .admin-body .big-kpi .kpi-card b.big { font-family: var(--display); }
.notice { background: var(--champagne-soft); color: var(--ink-2); border-radius: var(--radius-s); padding: 12px 16px; }
.notice .ic { color: var(--champagne-deep); }
.notice-warn { background: #f8efe1; } .notice-warn .ic { color: var(--warn); }
.notice-danger { background: #f8ebe7; }
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.tbl th { background: var(--paper); color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 12px 14px; }
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.tbl tr.click:hover td, .list-item:hover { background: #fbf8f3; }
.atabs { gap: 2px; border-bottom: 1px solid var(--line); }
.atabs a, .atabs button { font-size: 14px; padding: 11px 16px; }
.atabs .on { border-bottom-color: var(--champagne); color: var(--ink); }
.ver { border-top-color: var(--line); }
.divider { background: var(--line); }

/* ---------- Thân trang ---------- */
.admin-body .main { padding: 34px 48px 72px; max-width: 1480px; }
.admin-body .head { margin-bottom: 28px; }
.admin-body .head .eyebrow { margin-bottom: 8px; }
@media (max-width: 900px) { .admin-body .main { padding: 20px 16px 96px; } .admin-body h1, .admin-body .head h1 { font-size: 28px; } .admin-body .panel { padding: 18px; } }

/* ---------- Thanh bên: nền sáng, gọn ---------- */
@media (min-width: 901px) { .adm { grid-template-columns: 256px 1fr; } } /* chỉ máy tính — điện thoại giữ 1 cột của admin.css */
.side { background: var(--paper); color: var(--ink-2); border-right: 1px solid var(--line); padding: 26px 16px 18px; }
.side .brand { color: var(--ink); padding: 0 10px 22px; }
.side .brand small { color: var(--champagne-deep); }
.side .grp { color: var(--champagne-deep); font-size: 10px; letter-spacing: .18em; padding: 18px 10px 6px; font-weight: 600; }
.side a { color: var(--ink-2); font-size: 14px; padding: 9px 10px; border-radius: 9px; position: relative; }
.side a .ic { color: var(--soft); }
.side a:hover { background: var(--sand); }
.side a.on { background: var(--champagne-soft); color: var(--ink); font-weight: 500; }
.side a.on::before { content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 2px; background: var(--champagne); border-radius: 2px; }
.side a.on .ic { color: var(--champagne-deep); }
.side .side-cta { background: var(--ink); color: #fbf8f2; font-weight: 500; border-radius: 10px; margin: 0 2px 10px; }
.side .side-cta, .side .side-cta span, .side .side-cta .ic { color: #fbf8f2; }
.side .side-cta:hover, .side .side-cta.on { background: #161615; color: #fbf8f2; }
.side .me { border-top: 1px solid var(--line); color: var(--muted); }
.side .me b { color: var(--ink); }
.side .me .link { color: var(--champagne-deep) !important; }
/* nhóm menu thu gọn (V12): chỉ mở nhóm đang dùng */
.side details.nav-grp { border-top: 1px solid var(--line); }
.side details.nav-grp > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px 10px; font-size: 13px; color: var(--ink-2); font-weight: 500; border-radius: 9px; }
.side details.nav-grp > summary::-webkit-details-marker { display: none; }
.side details.nav-grp > summary .ic { color: var(--soft); transition: transform .15s; }
.side details.nav-grp[open] > summary .ic { transform: rotate(180deg); }
.side details.nav-grp > summary:hover { background: var(--sand); }
.side details.nav-grp > div { padding: 0 0 10px; display: flex; flex-direction: column; gap: 1px; }
.side .nav-daily { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.side details.nav-more > summary { color: var(--muted); }
.mtop { background: rgba(255, 253, 249, .96); }

/* ---------- Thanh tìm kiếm toàn hệ thống (V12) ---------- */
.tbar { margin: 22px 48px 0; gap: 12px; }
@media (max-width: 900px) { .tbar { margin: 12px 16px 0; } }
.gsearch { position: relative; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); padding: 0 14px; }
.gsearch:focus-within { border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(198, 174, 128, .18); }
.gsearch input { min-height: 46px; font-size: 15px; }
.gs-pop { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 60; max-height: min(72vh, 640px); overflow: auto; padding: 8px 0; }
.gs-pop[hidden] { display: none; }
.gs-sec { padding: 8px 16px 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-deep); font-weight: 600; }
.gs-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; text-decoration: none; color: inherit; border-top: 1px solid transparent; }
.gs-row:hover, .gs-row.on { background: var(--champagne-soft); }
.gs-row .gs-when { width: 86px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; }
.gs-row .gs-main { flex: 1; min-width: 0; }
.gs-row .gs-main b { font-weight: 600; }
.gs-row .gs-sub { font-size: 12.5px; color: var(--muted); }
.gs-row .gs-money { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.gs-empty { padding: 14px 16px; color: var(--muted); font-size: 13.5px; }
.gs-foot { padding: 8px 16px 6px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* ---------- Trang chủ V12 ---------- */
body.is-home .tbar .gsearch { display: none; }
body.is-home .tbar { justify-content: flex-end; }
@media (max-width: 900px) { body.is-home .tbar { display: none; } }
.home12-search .gsearch { border-color: var(--line-2); }
.home12 { display: grid; gap: 22px; }
.home12-search .gsearch { box-shadow: none; }
.home12-search .gsearch input { min-height: 54px; font-size: 16px; }
.h12-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.h12-sec h2 { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: .005em; }
.h12-appt { display: grid; grid-template-columns: 92px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.h12-appt:first-child { border-top: 0; }
.h12-appt .t { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.h12-appt .t span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.h12-appt .who a { color: var(--ink); text-decoration: none; font-weight: 600; }
.h12-appt .who a:hover { text-decoration: underline; }
.h12-appt .rev { font-variant-numeric: tabular-nums; font-size: 13px; }
.h12-appt.is-done { opacity: .55; }
@media (max-width: 1100px) { .h12-appt { grid-template-columns: 70px minmax(0, 1fr) auto; } .h12-appt .svc, .h12-appt .rev { grid-column: 2 / 3; } }
.h12-rev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.h12-rev > div { padding: 20px 22px; border-left: 1px solid var(--line); }
.h12-rev > div:first-child { border-left: 0; }
.h12-rev .v { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.h12-rev .n { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .h12-rev { grid-template-columns: 1fr 1fr; } .h12-rev > div:nth-child(3) { border-left: 0; } .h12-rev > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.h12-task { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.h12-task:first-child { border-top: 0; }
.h12-task .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-2); flex: none; }
.h12-task.is-overdue .dot { background: var(--danger); }
.h12-task.is-urgent .dot { background: var(--warn); }
.h12-score { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }
.h12-score b { font-family: var(--display); font-size: 28px; font-weight: 600; }

/* ---------- Việc & cảnh báo: bỏ vạch màu dày ---------- */
.task-card { border-color: var(--line); }
.task-card.is-overdue, .task-mini.is-overdue { box-shadow: none; }
.task-mini.is-overdue .small b::before, .task-card.is-overdue .task-title b::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); margin-right: 8px; vertical-align: middle; }
.work-item.is-overdue { box-shadow: none; padding-left: 0; }

/* ---------- Việc toàn đội & điểm hiệu suất ---------- */
.team-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tb-person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tb-person h4 { font-size: 15px; font-weight: 600; }
.tb-person .tb-meta { font-size: 12.5px; color: var(--muted); }
.tb-person .tb-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line); }
.tb-person .tb-row:first-of-type { border-top: 0; padding-top: 0; }
.tb-person .tb-row .grow { min-width: 0; overflow-wrap: anywhere; }
.tb-me { border-color: var(--champagne); }
.score-ring { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; }

/* ---------- Tiến trình bill (V12) ---------- */
.bill12-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.bill12-steps > div { padding: 16px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bill12-steps > div:first-child { border-left: 0; }
.bill12-steps .n { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bill12-steps .done .n { color: var(--ok); }
.bill12-steps .cur { background: var(--champagne-soft); }
.bill12-steps .cur .n { color: var(--champagne-deep); }
.bill12-steps b { font-size: 14.5px; }
@media (max-width: 900px) { .bill12-steps { grid-template-columns: 1fr 1fr; } .bill12-steps > div:nth-child(3) { border-left: 0; } .bill12-steps > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.sys-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; }
.sys-check > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.sys-check .ok { color: var(--ok); } .sys-check .wait { color: var(--warn); } .sys-check .na { color: var(--soft); }

/* ---------- Bill chính thức (bản in cao cấp) ---------- */
.rc-paper { border-color: var(--line); border-radius: 4px; padding: 40px 44px; color: var(--ink); max-width: 860px; }
.rc-head { border-bottom: 1px solid var(--champagne); padding-bottom: 16px; }
.rc-word b { font-family: var(--display); font-size: 28px; letter-spacing: .32em; font-weight: 600; }
.rc-word span { color: var(--champagne-deep); }
.rc-mark, .rc-mark i { border-color: var(--champagne); }
.rc-title { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.rc-sec > h4 { border-bottom: 1px solid var(--line-2); color: var(--champagne-deep); letter-spacing: .14em; font-size: 11px; }
.rc-tbl th { background: transparent; color: var(--muted); border-bottom: 1px solid var(--champagne); letter-spacing: .06em; }
.rc-grand { background: var(--champagne-soft); border-radius: 2px; }
.rc-grand .rc-big { font-family: var(--display); font-size: 28px; }
.rc-sign > div { border-color: var(--line-2); }
.rc-printed { text-align: right; font-size: 11px; letter-spacing: .12em; color: var(--champagne-deep); text-transform: uppercase; }
@media print {
  @page { size: A4; margin: 14mm; }
  body.admin-body { background: #fff; }
  .side, .tbar, .mtop, .bnav, .head, .no-print, .notice, #toasts { display: none !important; }
  .adm { display: block; }
  .admin-body .main { padding: 0; max-width: none; }
  .rc-paper { border: 0; padding: 0; margin: 0 auto; max-width: none; box-shadow: none; }
  .rc-tbl tr, .rc-sec { break-inside: avoid; }
}
/* Bill: thanh tiến trình V12 thay cho dòng "Bước tiếp theo" cũ (đỡ trùng) */
#bill12 ~ .bc-next { display: none; } /* khối tiến trình bị gỡ khi tải lỗi → dòng "Bước tiếp theo" cũ hiện lại */
#bill12:empty { min-height: 96px; }
#bill12 details > summary { cursor: pointer; list-style: none; }
#bill12 details > summary::-webkit-details-marker { display: none; }
.bc-steps { gap: 6px; }
.bc-step { border-color: var(--line); padding: 6px 12px 6px 6px; font-size: 12.5px; }
.bc-step.cur { border-color: var(--champagne); background: var(--champagne-soft); }
.bc-step.cur .bc-step-n { background: var(--ink); }
.bc-step.done .bc-step-n { background: var(--sage); }
/* Trang chủ trên điện thoại: lịch hẹn 2 cột (giờ | nội dung), trạng thái & nút xuống dòng */
@media (max-width: 640px) {
  .h12-appt { grid-template-columns: 58px minmax(0, 1fr); gap: 6px 12px; }
  .h12-appt .who, .h12-appt .svc, .h12-appt .rev, .h12-appt > .toolbar { grid-column: 2 / 3; }
  .h12-appt .t { grid-row: 1 / span 4; align-self: start; }
  .h12-sec { flex-wrap: wrap; }
  .h12-sec h2 { font-size: 23px; }
}

/* Ô tìm chức năng trong menu (V12) */
.side .nav-find { min-height: 36px; padding: 6px 12px; font-size: 13px; margin: 0 2px 6px; border-color: var(--line); background: var(--ivory); border-radius: 9px; }
.side details[hidden], .side a[hidden], .side .grp[hidden] { display: none !important; }