:root {
  /* Bảng màu lấy từ không gian spa: tường kem ngà, vải bọc xanh ngọc, ghế da bò, gạch bông xanh xám — chuyển sang pastel */
  --bg: #f4ecdf;
  --surface: #fffbf4;
  --surface-2: #f8f0e3;
  --line: #e6d8c4;
  --text: #3a2f28;
  --muted: #8a7a6b;
  --primary: #171D4E;
  --primary-ink: #ffffff;
  --primary-soft: #d4ebe4;
  --accent: #8A3F6B;
  --accent-soft: #f7dccb;
  --ok: #3e8e5a; --ok-soft: #d8eedd;
  --warn: #b37f17; --warn-soft: #f7e5bb;
  --danger: #c24b45; --danger-soft: #f8d8d3;
  --info: #3f6fb0; --info-soft: #d9e5f5;
  --lavender-soft: #e9dbf1;
  --veil-1: rgba(240,230,215,.93); --veil-2: rgba(236,225,208,.93);
  --heading: #245e57; --card-title: #7a4630; --lavender: #8a5fa6; --th: #9a7a5f;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(110, 80, 50, .06), 0 10px 26px rgba(110, 80, 50, .08);
  --font: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%235c77a3' stroke-width='1.2'%3E%3Cpath d='M28 10c4 6 4 12 0 18c-4-6-4-12 0-18zM28 46c4-6 4-12 0-18c-4 6-4 12 0 18zM10 28c6-4 12-4 18 0c-6 4-12 4-18 0zM46 28c-6-4-12-4-18 0c6 4 12 4 18 0z'/%3E%3Ccircle cx='28' cy='28' r='2.2'/%3E%3Cpath d='M0 0q14 6 0 14M56 0q-14 6 0 14M0 56q14-6 0-14M56 56q-14-6 0-14'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1a18; --surface: #252220; --surface-2: #2b2724; --line: #3a3531;
    --text: #f1ebe4; --muted: #a99f95; --primary: #8cc4bc; --primary-ink: #13211f; --primary-soft: #263734;
    --accent: #e3b195; --accent-soft: #3b2d26;
    --ok: #8fcb9f; --ok-soft: #22322a; --warn: #e6c27a; --warn-soft: #3a3120; --danger: #ee9a92; --danger-soft: #3e2624; --info: #a3bbe2; --info-soft: #242d3d;
    --lavender-soft: #2e2a38; --veil-1: rgba(37,34,32,.95); --veil-2: rgba(29,26,24,.95); --heading: #9fd3c9; --card-title: #e8b79e; --lavender: #c7a6dd; --th: #b9a28c;
    --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1a18; --surface: #252220; --surface-2: #2b2724; --line: #3a3531;
  --text: #f1ebe4; --muted: #a99f95; --primary: #8cc4bc; --primary-ink: #13211f; --primary-soft: #263734;
  --accent: #e3b195; --accent-soft: #3b2d26;
  --ok: #8fcb9f; --ok-soft: #22322a; --warn: #e6c27a; --warn-soft: #3a3120; --danger: #ee9a92; --danger-soft: #3e2624; --info: #a3bbe2; --info-soft: #242d3d;
  --lavender-soft: #2e2a38; --veil-1: rgba(37,34,32,.95); --veil-2: rgba(29,26,24,.95); --heading: #9fd3c9; --card-title: #e8b79e; --lavender: #c7a6dd; --th: #b9a28c;
  --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; }
h1, h2, h3, .form-section, .brand-name, .brand-mark { font-feature-settings: 'lnum' 1; font-variant-numeric: lining-nums; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .2px; }
h1 { font-size: 32px; } h2 { font-size: 23px; } h3 { font-size: 20px; }
.sub-h { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin: 0 0 8px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .grow { flex: 1; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* Bố cục */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--veil-1), var(--veil-2)), var(--tile) var(--surface); background-size: auto, 56px 56px; border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, #9fcfc8, #f1c9b4); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; letter-spacing: .5px; font-size: 18px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.brand-name { font-family: var(--serif); font-weight: 700; letter-spacing: 2px; font-size: 21px; color: var(--primary); }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text); font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 650; box-shadow: inset 3px 0 0 var(--primary); }
.nav .ico { width: 20px; text-align: center; opacity: .9; }
.nav .badge { margin-left: auto; }
.nav-sep { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 14px 12px 4px; }
.sidebar-foot { margin-top: auto; padding: 12px 10px 0; font-size: 12px; color: var(--muted); }
.main { padding: 24px 28px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.topbar h1 { margin-right: auto; }
.menu-btn { display: none; }

/* Thành phần */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin-right: auto; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 16px 18px; }
.stat .label { font-size: 13px; color: var(--muted); }
.stat .value { font-size: 26px; font-weight: 650; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .hint { font-size: 12px; color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; background: var(--surface-2); color: var(--text); border-color: var(--line); white-space: nowrap; }
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: 0 2px 8px rgba(23,29,78,.22); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.icon-btn { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.b-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.b-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.b-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.b-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.b-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.b-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; margin: 0 4px 4px 0; }

/* Form */
label.f { display: block; }
label.f > span, div.f > label > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
div.f > label > span b, label.f > span b[data-unit-label] { color: inherit; font-weight: inherit; }
label.f > span em { color: var(--danger); font-style: normal; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; }
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
input.invalid { border-color: var(--danger); }
input[type=checkbox], input[type=radio] { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .3px; color: var(--accent); margin-top: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.search { position: relative; }
.search input { padding-left: 34px; min-width: 260px; }
.search::before { content: '⌕'; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 17px; }
.chips-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check input { display: none; }
.chip-check span { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; cursor: pointer; background: var(--surface); }
.chip-check input:checked + span { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* Bảng */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 650; }
tbody tr:hover { background: var(--surface-2); }
tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 72px; height: 72px; font-size: 22px; }
.person { display: flex; align-items: center; gap: 10px; }
.person b { display: block; }

.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .big { font-size: 34px; margin-bottom: 6px; }

/* Danh sách */
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.time-pill { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; color: var(--primary); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-head .meta { flex: 1; min-width: 220px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.alert-box { border-radius: 10px; padding: 10px 12px; background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 14px; }
.note-box { border-radius: 10px; padding: 10px 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }

/* Lịch */
.cal { display: grid; grid-template-columns: 56px repeat(7, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal.day-view { grid-template-columns: 56px 1fr; }
.cal-head { padding: 8px; text-align: center; font-weight: 650; font-size: 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-head.today { color: var(--primary); }
.cal-head small { display: block; color: var(--muted); font-weight: 500; }
.cal-times { border-right: 1px solid var(--line); }
.cal-time { height: 56px; font-size: 11px; color: var(--muted); text-align: right; padding: 2px 6px; border-bottom: 1px dashed var(--line); }
.cal-col { position: relative; border-right: 1px solid var(--line); }
.cal-col:last-child { border-right: 0; }
.cal-slot { height: 56px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.cal-slot:hover { background: var(--primary-soft); }
.cal-evt { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 6px; font-size: 12px; line-height: 1.3; overflow: hidden; cursor: pointer; border-left: 3px solid var(--primary); background: var(--primary-soft); color: var(--text); }
.cal-evt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Màu thẻ theo trạng thái — khớp màu nhãn trạng thái bên dưới lịch */
.cal-evt.st-booked { background: var(--info-soft); }
.cal-evt.st-confirmed { background: var(--primary-soft); }
.cal-evt.st-arrived { background: var(--accent-soft); }
.cal-evt.st-done { background: var(--ok-soft); opacity: .75; }
.cal-evt.st-cancel { background: var(--surface-2); opacity: .55; text-decoration: line-through; }
.cal-evt.st-noshow { background: var(--danger-soft); opacity: .6; text-decoration: line-through; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; }

/* Ảnh */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.photo .cap { padding: 6px 8px; font-size: 12px; }
.photo .sel { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.85); border: 2px solid var(--primary); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--primary); }
.photo.selected { outline: 3px solid var(--primary); }
.photo .ph-badge { position: absolute; top: 6px; right: 6px; }
.compare { position: relative; width: min(100%, calc(62vh * .75)); max-width: 720px; margin: 0 auto; aspect-ratio: 3/4; overflow: hidden; border-radius: 12px; background: #000; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.compare .top { clip-path: inset(0 50% 0 0); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.5); pointer-events: none; }
.compare .lbl { position: absolute; top: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-by-side figure { margin: 0; }
.side-by-side img { width: 100%; border-radius: 10px; display: block; }
.side-by-side figcaption { font-size: 13px; text-align: center; padding: 4px; color: var(--muted); }
.lightbox img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: 10px; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 20px; text-align: center; color: var(--muted); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); }
.preview-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.preview-strip img { width: 70px; height: 90px; object-fit: cover; border-radius: 8px; }

/* Dòng thời gian điều trị */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before { content: ''; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.tl-item.reaction-bad::before { border-color: var(--danger); }
.tl-item.reaction-mild::before { border-color: var(--warn); }
.tl-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tl-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tl-thumbs img { width: 54px; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; }

.progress { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.chart { width: 100%; height: 220px; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .grid-line { stroke: var(--line); }
.chart .series { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.chart .dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.chart .bar { fill: var(--primary); }
.chart .bar.alt { fill: var(--accent); }

.sig-pad { width: 100%; height: 160px; border: 1px dashed var(--muted); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.sig-img { max-width: 260px; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.consent-text { max-height: 220px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 14px; white-space: pre-wrap; }

/* Hộp thoại + thông báo */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 15, 12, .45); display: grid; place-items: center; padding: 16px; z-index: 50; animation: fade .15s; }
.modal { background: var(--surface); border-radius: 18px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-wide { width: min(880px, 100%); }
.modal header, .modal footer { display: flex; align-items: center; gap: 8px; padding: 14px 18px; }
.modal header { border-bottom: 1px solid var(--line); }
.modal header h3 { margin-right: auto; }
.modal footer { border-top: 1px solid var(--line); }
.modal-body { padding: 18px; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 600; box-shadow: var(--shadow); transition: opacity .3s, transform .3s; }
.toast-warn { background: var(--warn); color: #fff; } .toast-err { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; transform: translateY(6px); }

.msg-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; white-space: pre-wrap; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; width: 250px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .main { padding: 16px 16px 60px; }
  .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .search input { min-width: 0; }
  .kv { grid-template-columns: 110px 1fr; }
  .cal { grid-template-columns: 44px repeat(7, minmax(90px, 1fr)); overflow-x: auto; }
}
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr 1fr; } .stat .value { font-size: 20px; } }
@media print {
  .sidebar, .topbar .btn, .no-print { display: none !important; }
  .app { display: block; } body { background: #fff; } .card { box-shadow: none; border: 0; }
}

/* Thẻ thống kê: mỗi thẻ một tông pastel */
.grid-4 > .stat:nth-child(1), .grid-3 > .stat:nth-child(1) { background: var(--primary-soft); border-color: transparent; }
.grid-4 > .stat:nth-child(2), .grid-3 > .stat:nth-child(2) { background: var(--accent-soft); border-color: transparent; }
.grid-4 > .stat:nth-child(3), .grid-3 > .stat:nth-child(3) { background: var(--info-soft); border-color: transparent; }
.grid-4 > .stat:nth-child(4) { background: var(--lavender-soft); border-color: transparent; }
.kv-pre dd { white-space: pre-wrap; }

/* Ô chọn có gõ tìm */
.picker { position: relative; }
.picker-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.picker-group { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); padding: 8px 10px 4px; font-weight: 700; }
.picker-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.picker-item:hover, .picker-item.on { background: var(--primary-soft); }
.picker-empty { padding: 10px; }

/* Vấn đề da có phân loại */
.concern-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.concern-sub { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px 6px; border-radius: 999px; background: var(--surface-2); border: 1px dashed var(--line); }
.chip-sub span { padding: 2px 9px; font-size: 12px; }

/* Khu quản lý */
.gate { max-width: 380px; margin: 40px auto; text-align: center; }
.gate-ico { font-size: 34px; margin-bottom: 6px; }
.gate h2 { margin-bottom: 6px; }
.nav-lock { border: 0; background: var(--primary-soft); color: var(--primary); border-radius: 999px; font: inherit; font-size: 11px; padding: 1px 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pl-row { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.pl-head b { color: var(--primary); }
.pl-sub { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; border-bottom: 0; margin: 4px 0; }
.pl-total { background: var(--primary-soft); border-radius: 10px; padding: 10px; border-bottom: 0; margin-top: 6px; font-size: 16px; }
.cost-summary { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.cost-summary .row { padding: 3px 0; }
tr.archived td { opacity: .55; }

/* ── Bảng màu v3: nền kem be, màu nhấn đậm hơn ── */
h1 { color: var(--heading); }
.card h2, .card h3, .modal header h3 { color: var(--card-title); }
th { color: var(--th); }
.nav-sep { color: var(--accent); font-weight: 700; }
.sidebar { border-right-color: var(--line); }
.nav a { color: var(--text); }
.nav a.active { background: var(--primary); color: #fff; box-shadow: 0 3px 10px rgba(23,29,78,.28); }
.nav a.active .ico { opacity: 1; }
.brand-mark { background: linear-gradient(140deg, #171D4E, #8A3F6B); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.card { border-color: rgba(23,29,78,.16); }
.grid-4 > .stat, .grid-3 > .stat { border: 0; border-top: 4px solid transparent; }
.grid-4 > .stat:nth-child(1), .grid-3 > .stat:nth-child(1) { border-top-color: var(--primary); }
.grid-4 > .stat:nth-child(2), .grid-3 > .stat:nth-child(2) { border-top-color: var(--accent); }
.grid-4 > .stat:nth-child(3), .grid-3 > .stat:nth-child(3) { border-top-color: var(--info); }
.grid-4 > .stat:nth-child(4) { border-top-color: var(--lavender); }
.grid-4 > .stat:nth-child(1) .value, .grid-3 > .stat:nth-child(1) .value { color: var(--heading); }
.grid-4 > .stat:nth-child(2) .value, .grid-3 > .stat:nth-child(2) .value { color: var(--accent); }
.grid-4 > .stat:nth-child(3) .value, .grid-3 > .stat:nth-child(3) .value { color: var(--info); }
.grid-4 > .stat:nth-child(4) .value { color: var(--lavender); }
.stat .label { color: var(--text); opacity: .75; font-weight: 600; }
.tabs a.active { color: var(--primary); border-bottom-width: 3px; }
.time-pill { color: var(--accent); }
.chip-check span { border-color: var(--line); }
.chip-check input:checked + span { box-shadow: 0 2px 6px rgba(23,29,78,.25); }
.progress > i { background: linear-gradient(90deg, var(--primary), #171D4E); }
.chart .bar { fill: var(--primary); }
.chart .series { stroke: var(--accent); }
.chart .dot { stroke: var(--accent); }
.pl-total { background: var(--primary-soft); }
.bio-btn { background: var(--lavender-soft); color: var(--lavender); border-color: transparent; font-weight: 700; }

/* Chi tiêu của khách theo ngày */
.spend-list { display: flex; flex-direction: column; }
.spend-row { display: flex; gap: 16px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.spend-row:last-child { border-bottom: 0; }
.spend-date { min-width: 96px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.spend-row .num { text-align: right; white-space: nowrap; }
.cal-evt .evt-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt.compact { font-size: 11px; padding: 3px 4px; }
.cal-evt { box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ===== v1.4: Chấm điểm nám + Thói quen ===== */
details.fold-section { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--surface-2); }
.mz-head { cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--accent); list-style-position: inside; }
details.mz-kind { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 12px; }
details.mz-kind > summary { cursor: pointer; font-weight: 700; color: var(--heading); padding: 4px 0; }
.mz-form { margin-top: 10px; }
.mz-scale { margin-top: 14px; }
.mz-title { font-weight: 700; color: var(--card-title); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mz-q { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: 8px 12px; padding: 9px 0; border-top: 1px dashed var(--line); align-items: start; }
.mz-qtext { font-size: 14px; }
.mz-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mz-opt input { display: none; }
.mz-opt span { display: block; height: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; cursor: pointer; background: var(--surface); line-height: 1.35; }
.mz-opt span b { display: inline-block; min-width: 16px; color: var(--primary); }
.mz-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 2px 6px rgba(23,29,78,.25); }
.mz-opt input:checked + span b { color: var(--primary-ink); }
.mz-record { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--line); }
.mz-record.removed { opacity: .45; text-decoration: line-through; }
.mz-date { font-weight: 700; white-space: nowrap; min-width: 86px; color: var(--heading); }
.mz-score { margin: 2px 0; font-size: 14px; }
.mz-history { margin-bottom: 8px; }
.mz-strategy { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); border: 1px solid var(--line); font-size: 14px; }
.mz-concl { margin: 4px 0 6px; }
.mz-list { margin: 4px 0 0; padding-left: 20px; }
.mz-list li { margin: 3px 0; }
[data-band] { margin-top: 6px; }
@media (max-width: 720px) {
  .mz-q { grid-template-columns: 1fr; }
  .mz-opts { grid-template-columns: 1fr; }
}

/* ===== v1.5: Tra cứu hoạt chất ===== */
.act-client { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--primary-soft); }
.tag.tag-off { background: var(--surface-2); color: var(--muted); }
.act-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; margin: 0 6px 6px 0; line-height: 1.3; }
.act-chip.ok { border-color: var(--primary); background: var(--primary-soft); color: var(--heading); }
.act-chip.warn { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.act-chip.sup { border-style: dashed; color: var(--muted); }
.act-chip i { font-style: normal; font-weight: 500; font-size: 11px; }
.act-chip small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.act-table td { vertical-align: top; }
.act-table .act-chip { margin: 0; }
.act-block { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line); }
.act-block.sensitive { background: var(--lavender-soft); }
.act-block.healthy { background: var(--primary-soft); }
.act-bhead { margin-bottom: 6px; }
.act-steps { margin-top: 12px; }
.act-steps > summary { cursor: pointer; font-weight: 700; color: var(--heading); padding: 6px 0; }
.act-step { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.act-stitle { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--card-title); }
.act-factor { margin-top: 8px; }
.act-fname { margin-bottom: 5px; }
.act-code { display: inline-block; min-width: 26px; color: var(--accent); }
.act-chips { display: flex; flex-wrap: wrap; }
.act-note { font-style: italic; margin-top: -2px; }
.act-foot { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 8px; }

/* ===== v1.6: danh sách khách — sáng, ít màu (xanh ngọc + cam đất nhạt) ===== */
.clients-table thead th { background: var(--primary-soft); color: var(--heading); border-bottom: 0; }
.clients-table thead th:first-child { border-radius: 12px 0 0 12px; }
.clients-table thead th:last-child { border-radius: 0 12px 12px 0; }
.clients-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.clients-table tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.clients-table tbody td { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.clients-table .person b { color: var(--heading); }
.clients-table td.money { color: var(--primary); font-weight: 700; }
.clients-table .tag { background: var(--primary-soft); color: var(--primary); }
.act-ok { color: var(--primary); font-weight: 700; }

/* ===== v1.6: font không chân + logo một dòng + nền thanh bên chuyển màu ===== */
:root { --serif: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, .form-section, .mz-head, .act-stitle { letter-spacing: 0; }
h1 { font-size: 27px; font-weight: 700; } h2 { font-size: 20px; } h3 { font-size: 17px; font-weight: 650; }
.form-section { font-size: 16px; font-weight: 700; }
.mz-head { font-size: 15.5px; }
.act-stitle { font-size: 15px; }
.brand-mark { font-size: 15px; letter-spacing: 0; flex-shrink: 0; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.brand-sub { white-space: nowrap; }
:root {
  --side-1: #ffffff; --side-2: #F4F6FA; --side-3: #EDF0F6; --side-glow: rgba(23,29,78,.10);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side-1: #2a2623; --side-2: #221f1c; --side-3: #1a1816; --side-glow: rgba(140,196,188,.10); } }
:root[data-theme="dark"] { --side-1: #2a2623; --side-2: #221f1c; --side-3: #1a1816; --side-glow: rgba(140,196,188,.10); }
.sidebar {
  background:
    radial-gradient(120% 45% at 0% 0%, var(--side-glow), transparent 70%),
    linear-gradient(172deg, var(--side-1) 0%, var(--side-2) 48%, var(--side-3) 100%);
  background-size: auto;
  box-shadow: inset -10px 0 18px -14px rgba(23,29,78,.3);
}

/* ===== v1.6: dải nồng độ (màu theo tài liệu: xanh = thấp, vàng = quanh mốc 1%, hồng = cao) ===== */
:root { --band-low: #3f6fb0; --band-low-soft: #dfe9f7; --band-mid: #c08a12; --band-mid-soft: #fbedc7; --band-high: #c24b45; --band-high-soft: #f9dcd8; }
.band { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.band-low { background: var(--band-low-soft); color: var(--band-low); }
.band-mid { background: var(--band-mid-soft); color: var(--band-mid); }
.band-high { background: var(--band-high-soft); color: var(--band-high); }
.act-form { display: inline-block; padding: 0 5px; border-radius: 6px; margin: 1px 2px 0 0; }
.act-form.fb-low { background: var(--band-low-soft); color: var(--band-low); }
.act-form.fb-mid { background: var(--band-mid-soft); color: var(--band-mid); }
.act-form.fb-high { background: var(--band-high-soft); color: var(--band-high); }
.act-chip.excluded { opacity: .45; text-decoration: line-through; }

/* ===== v1.7: menu trái viết hoa chữ cái đầu ===== */
.nav a, .nav-sep, .brand-sub { text-transform: capitalize; }
.nav-sep { letter-spacing: .3px; font-size: 12px; }

/* ===== v1.8: tiêu đề trang viết hoa chữ cái đầu ===== */
.topbar h1 { text-transform: capitalize; }

/* ===== v1.15: hình chìm menu trái = hoạ tiết vòng tròn đan (cánh thấu kính chéo 45° ghép hoa 4 cánh, đúng chiều viên gạch bông; ô co theo bề ngang menu) — nét rất nhạt để chữ đọc rõ không cần nền riêng ===== */
:root { --side-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 0 0Z M100 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z M0 100A50 50 0 0 1 50 50A50 50 0 0 1 0 100Z M100 100A50 50 0 0 1 50 50A50 50 0 0 1 100 100Z' fill='%232e7d73' fill-opacity='.07' stroke='%232e7d73' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/svg%3E"); --side-sep: #6B7291; --side-muted: #3C4160; --side-link: #171D4E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side-link: #a9dcd2; --side-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 0 0Z M100 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z M0 100A50 50 0 0 1 50 50A50 50 0 0 1 0 100Z M100 100A50 50 0 0 1 50 50A50 50 0 0 1 100 100Z' fill='%23cfe5df' fill-opacity='.045' stroke='%23cfe5df' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E"); --side-sep: #f0b896; --side-muted: #d6cabe; } }
:root[data-theme="dark"] { --side-link: #a9dcd2; --side-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 0 0Z M100 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z M0 100A50 50 0 0 1 50 50A50 50 0 0 1 0 100Z M100 100A50 50 0 0 1 50 50A50 50 0 0 1 100 100Z' fill='%23cfe5df' fill-opacity='.045' stroke='%23cfe5df' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E"); --side-sep: #f0b896; --side-muted: #d6cabe; }
.sidebar {
  /* v1.19: nền MỘT màu (màu kem sáng ở đầu cột cũ), bỏ chuyển màu + vệt sáng + bóng mép; hoạ tiết giữ nguyên */
  background: var(--side-pattern) repeat right 0 top 0 / 52px 52px, var(--side-1); /* hoa cỡ cũ 52px, căn mép PHẢI + mép trên → phần bị cắt dồn về bên trái và dưới */
  background-attachment: local, scroll; /* căn theo vùng nội dung (đã trừ thanh cuộn) → thanh cuộn không che cột hoa bên phải */
}
@media (min-width: 861px) { .sidebar { box-shadow: none; } }
@media (max-width: 860px) { .sidebar { box-shadow: var(--shadow); } } /* điện thoại: bóng đổ tách menu khỏi nội dung khi mở */
.sidebar .nav-sep { color: var(--side-sep); }
.sidebar .brand-sub, .sidebar .sidebar-foot { color: var(--side-muted); }
.sidebar .brand-name { color: var(--heading); }
.sidebar .sidebar-foot a { color: var(--side-link); font-weight: 600; }
/* Mục đang chọn: chữ theo màu "mực trên nền chủ đạo" (sáng: trắng trên xanh đậm; tối: chữ tối trên xanh nhạt) */
.nav a.active { color: var(--primary-ink); }
.sidebar .brand-name { color: var(--side-link); }
/* Huy hiệu: chữ đủ tương phản (WCAG ≥4,5:1) — nền sáng dùng sắc đậm hơn cùng tông; nền tối giữ màu cũ (đã đạt) */
:root { --bd-ok: #2b6b40; --bd-warn: #76500a; --bd-danger: #9c302b; --bd-info: #2c5590; --bd-primary: #1f5f56; --bd-accent: #8f4220; --bd-plain: #5e5045; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bd-ok: var(--ok); --bd-warn: var(--warn); --bd-danger: var(--danger); --bd-info: var(--info); --bd-primary: var(--primary); --bd-accent: var(--accent); --bd-plain: var(--muted); } }
:root[data-theme="dark"] { --bd-ok: var(--ok); --bd-warn: var(--warn); --bd-danger: var(--danger); --bd-info: var(--info); --bd-primary: var(--primary); --bd-accent: var(--accent); --bd-plain: var(--muted); }
.badge { color: var(--bd-plain); }
.badge.b-ok { color: var(--bd-ok); } .badge.b-warn { color: var(--bd-warn); } .badge.b-danger { color: var(--bd-danger); }
.badge.b-info { color: var(--bd-info); } .badge.b-primary { color: var(--bd-primary); } .badge.b-accent { color: var(--bd-accent); }
.tag { color: var(--bd-accent); }
.clients-table .tag, .act-client .tag { color: var(--bd-primary); }
.tag.tag-off { color: var(--bd-plain); }

/* ===== v1.21: thẻ số liệu — bỏ sọc màu trên, thay bằng vạt màu vát chéo góc trên-trái; chữ lùi vào để không đè vạt ===== */
.grid-4 > .stat, .grid-3 > .stat { border-top: 0; position: relative; overflow: hidden; padding-left: 34px; }
.grid-4 > .stat::before, .grid-3 > .stat::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 46px; background: linear-gradient(135deg, var(--stat-tab, var(--primary)) 0 50%, transparent 50%); pointer-events: none; }
.grid-4 > .stat:nth-child(1), .grid-3 > .stat:nth-child(1) { --stat-tab: var(--primary); }
.grid-4 > .stat:nth-child(2), .grid-3 > .stat:nth-child(2) { --stat-tab: var(--accent); }
.grid-4 > .stat:nth-child(3), .grid-3 > .stat:nth-child(3) { --stat-tab: var(--info); }
.grid-4 > .stat:nth-child(4) { --stat-tab: var(--lavender); }
/* Biểu tượng menu: SVG nét cùng cỡ với emoji, căn giữa */
.nav .ico { display: inline-flex; align-items: center; justify-content: center; height: 20px; font-size: 16px; line-height: 1; }
.nav .ico-svg { width: 20px; height: 20px; }
.nav .ico-art { width: 22px; height: 22px; }
.nav a.active .ico-art { background: #ffffff; border-radius: 7px; padding: 1.5px; box-sizing: content-box; width: 20px; height: 20px; }

/* v1.27 — dòng thời gian: một khung = một buổi (ngày), nhiều dịch vụ bên trong */
.tl-day { margin-bottom: 4px; }
.tl-part { padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--line); }
.tl-part:first-of-type { border-top: 0; margin-top: 0; padding-top: 4px; }
.tl-inv { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.tl-inv a { text-decoration: none; }
.qfilter { width: 220px; max-width: 100%; }
@media (max-width: 600px) { .qfilter { width: 100%; } }

/* Tìm chất đặc trị */
.sp-h { margin: 14px 0 6px; font-size: 15px; }
.sp-cort-line { font-weight: 800; color: var(--danger); font-size: 16px; margin-bottom: 8px; }
.sp-table td, .sp-table th { vertical-align: top; }
.sp-table tr.sp-hit td:nth-child(2) b { color: var(--primary); }
.sp-table tr.sp-out td { color: var(--muted); }
.sp-table tr.sp-out td b { font-weight: 500; }
.sp-table tr.sp-cort td:nth-child(2) b { color: var(--danger); }
.sp-a { margin-top: 10px; }
.sp-a summary { cursor: pointer; font-weight: 600; }
.sp-raw { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; background: var(--surface-2); padding: 8px 10px; border-radius: 8px; }
.sp-table td:nth-child(3) { min-width: 118px; }
.sp-table td:nth-child(5) .band { white-space: normal; }
/* Ô tìm khách: nút ✕ xoá nhanh */
.search input[data-q] { padding-right: 34px; }
.search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 26px; cursor: pointer; padding: 0; }
.search-clear:hover { background: var(--line); color: var(--text); }
.search-clear[hidden] { display: none; }
/* Icon lịch hẹn trong nút (đồng bộ với menu) */
.btn .ico-svg { width: 18px; height: 18px; vertical-align: -4px; flex: none; }

/* Ô chọn tháng: một ô "Tháng 11 năm 2026" + biểu tượng lịch; input month trong suốt phủ kín để bấm mở bảng chọn */
.month-box { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; white-space: nowrap; }
.month-box .mb-ico { width: 16px; height: 16px; flex: none; }
.month-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.month-box:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.month-box.disabled { opacity: .5; cursor: not-allowed; } .month-box.disabled input { cursor: not-allowed; }
.month-box.no-native span, .month-box.no-native .mb-ico { visibility: hidden; } .month-box.no-native input { opacity: 1; padding: 0 12px; }
/* Hướng Dẫn Chăm Da */
.cg-body { white-space: pre-wrap; line-height: 1.55; margin: 6px 0 10px; }
.cg-card .cg-body.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Băng nhắc: đã chuyển dữ liệu sang localhost mà vẫn mở bằng file:// */
.moved-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: var(--warn-soft); color: var(--text); border-bottom: 1px solid var(--warn); font-size: 14px; }
.moved-banner span { flex: 1 1 320px; }
/* Icon Khách hàng: hình người + lá do Bác sĩ chọn (img/khach-hang.png), dùng làm mặt nạ để tự theo màu chữ menu (sáng/tối/đang chọn) */
.ico-mask { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-client { --m: url("data:image/png;base64,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"); }

/* v1.48: chọn nhanh quy cách sản phẩm */
.size-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-btn { padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.chip-btn:hover { border-color: var(--primary); }
.chip-btn.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* v1.49: nút ✕ dẹp khung tìm dịch vụ */
.picker > input { padding-right: 40px; }
.picker-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--primary-soft); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.picker-x:hover { background: var(--primary); color: var(--primary-ink); }
.picker-x.hidden { display: none; }
.picker .picker-list { top: calc(100% + 4px); }
.staff-work { border-top: 1px solid var(--line); padding: 8px 0; }
.staff-work summary { cursor: pointer; padding: 4px 0; }
.staff-work table { margin-top: 6px; }

/* v1.52: xem theo ngày (Thu ngân, Tài chính) */
.day-range { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.day-range .dr-presets, .day-range .dr-custom { display: inline-flex; align-items: center; gap: 6px; }
.day-range .dr-presets { padding-right: 10px; border-right: 1px solid var(--line); }
.dr-field { position: relative; display: inline-flex; align-items: center; }
.dr-field input[type=text] { width: calc(8ch + 46px); padding: 5px 32px 5px 10px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.dr-field input.bad { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent); }
.dr-cal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; cursor: pointer; }
.dr-cal:hover { color: var(--primary); background: var(--primary-soft); }
.dr-cal svg { width: 15px; height: 15px; pointer-events: none; }
.dr-cal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.day-range.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.month-box.dim { opacity: .45; }

/* v1.52: Lịch hẹn — nhóm khách trùng giờ (tuần) */
.cal-grp { position: absolute; left: 3px; right: 3px; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 4px; overflow-y: auto; box-sizing: border-box; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.cal-grp:hover { z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.cal-grp-n { font-size: 11px; font-weight: 600; color: var(--accent); padding: 0 3px 1px; }
.cal-grp-n b { font-variant-numeric: tabular-nums; }
.cal-grp-item { display: block; flex: none; min-height: 22px; padding: 3px 6px 3px 7px; border-radius: 7px; border-left: 3px solid var(--primary); background: var(--primary-soft); font-size: 12px; line-height: 1.25; cursor: pointer; }
.cal-grp-item .t { display: block; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-grp-item b { display: block; font-weight: 650; overflow-wrap: anywhere; word-break: normal; }
.cal-grp-item:hover { filter: brightness(.96); }
.cal-grp-item.st-booked { background: var(--info-soft); }
.cal-grp-item.st-confirmed { background: var(--primary-soft); }
.cal-grp-item.st-arrived { background: var(--accent-soft); }
.cal-grp-item.st-done { background: var(--ok-soft); }
.cal-grp-item.st-cancel { background: var(--surface-2); text-decoration: line-through; opacity: .6; }
.cal-grp-item.st-noshow { background: var(--danger-soft); text-decoration: line-through; opacity: .7; }
/* Điện thoại: ô "Xem theo ngày" xuống hàng, hai ô ngày co lại — không tràn ngang */
@media (max-width: 600px) {
  .day-range { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; box-sizing: border-box; }
  .day-range .dr-presets { border-right: 0; padding-right: 0; flex-basis: 100%; }
  .day-range .dr-custom { flex: 1 1 100%; min-width: 0; }
  .dr-field { flex: 1 1 0; min-width: 0; } .dr-field input[type=text] { width: 100%; min-width: 0; }
  [data-invsearch] { max-width: 100% !important; width: 100%; }
}
.cal-grp-more { color: var(--muted); font-weight: 500; }

/* ═════ Dilacos Spa: phủ phong cách Frigate lên giao diện gốc (navy, giấy ngà, góc vuông, không đổ bóng, không chuyển sắc) ═════ */
:root {
  --bg: #FBFAF8; --surface: #ffffff; --surface-2: #F4F6FA; --line: rgba(23,29,78,.16);
  --text: #3C4160; --muted: #565C7E;
  --primary: #171D4E; --primary-ink: #ffffff; --primary-soft: #E7EAF4;
  --accent: #8A3F6B; --accent-soft: #F5E8F0;
  --ok: #2F7D4F; --ok-soft: #E6F2EA; --warn: #9A6208; --warn-soft: #FBF0DC; --danger: #C22B2B; --danger-soft: #FBE6E6; --info: #1F7A7A; --info-soft: #E2F1F1;
  --lavender: #8A3F6B; --lavender-soft: #F5E8F0;
  --veil-1: #ffffff; --veil-2: #ffffff; --tile: none; --side-pattern: none;
  --side-1: #ffffff; --side-2: #ffffff; --side-3: #ffffff; --side-glow: transparent; --side-link: #171D4E;
  --heading: #171D4E; --card-title: #171D4E; --th: #171D4E;
  --bd-ok: #2F7D4F; --bd-warn: #7A4E06; --bd-danger: #A82424; --bd-info: #17605F; --bd-primary: #171D4E; --bd-accent: #7A3560; --bd-plain: #3C4160;
  --radius: 0px; --shadow: none;
  --font: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }
.avatar, .avatar img, .brand-mark, .gate-mark, input[type=radio], .dot, .color-dot, .staff-dot { border-radius: 50% !important; }
body { font-size: 16px; }
h1, h2, h3 { font-family: var(--serif); letter-spacing: -.005em; color: var(--heading); }
h1 { font-weight: 400; } h2 { font-weight: 400; } h3 { font-weight: 600; }
.sidebar { background: #ffffff !important; border-right: 1px solid var(--line); }
.brand-mark { background: var(--primary) !important; color: #fff; font-family: var(--serif); font-weight: 600; letter-spacing: .04em; }
.brand-name { font-family: var(--serif); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 15px; color: var(--primary); }
.nav a.active { background: var(--primary); color: #fff; }
.nav-sep { font-family: var(--serif); letter-spacing: .18em; }
.progress > i { background: var(--primary) !important; }
.grid-4 > .stat::before, .grid-3 > .stat::before { display: none; }
.card.stat { border-top: 3px solid var(--primary); }
.btn { font-weight: 700; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
table th { font-family: var(--serif); letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: var(--primary); background: #EDF0F6; }
table.cashbook td, table.cashbook th { border: 1px solid var(--line); }
tr.cb-day td { background: #E7EAF4; font-weight: 700; color: var(--primary); }
tr.cb-total td { background: #EDF0F6; font-weight: 700; color: var(--primary); }
.sidebar-foot { color: var(--text); line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Màn đăng nhập */
body:not(.signed-in) .app { display: none; }
.gate-screen { position: fixed; inset: 0; z-index: 1000; background: #171D4E; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.gate-box { width: 100%; max-width: 400px; background: #FBFAF8; padding: 28px 24px; }
.gate-mark { width: 52px; height: 52px; background: #171D4E; color: #fff; display: grid; place-items: center; font: 600 17px 'Josefin Sans', sans-serif; letter-spacing: .04em; margin-bottom: 16px; }
.gate-eyebrow { font: 600 11.5px 'Josefin Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #6B7291; margin: 0 0 6px; }
.gate-eyebrow::before { content: ''; display: inline-block; width: 26px; height: 1px; background: #D9232E; vertical-align: middle; margin-right: 10px; }
.gate-box h1 { font-size: 30px; font-weight: 300; margin-bottom: 6px; }
.gate-lead { margin-bottom: 18px; color: #3C4160; }
.gate-box .f { display: block; margin-bottom: 12px; }
.gate-box .f > span { display: block; margin-bottom: 4px; font: 600 11.5px 'Josefin Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6B7291; }
.gate-box input { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid rgba(23,29,78,.3); background: #fff; font-size: 16px; }
.gate-box .btn { min-height: 46px; }
.gate-err { background: #FBE6E6; border-left: 4px solid #C22B2B; padding: 8px 10px; margin: 0 0 12px; color: #3C4160; }

/* Điện thoại: không để trang tràn ngang; bảng rộng thì vuốt ngang trong khung của nó */
html, body { max-width: 100%; overflow-x: hidden; }
.main { min-width: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; } /* iPhone không tự phóng to khi chạm vào ô nhập */
  .topbar { flex-wrap: wrap; }
  .card { overflow-x: auto; }
}
.sidebar { overflow-y: auto; }