/* ==========================================================================
 * NHÂN VIÊN — hồ sơ chia tab (Chỉ số / Đào tạo / Kỹ năng / Tiểu sử) + thanh Thái độ / Cảm xúc.
 * Tông kem–vàng, viền nâu đậm như Túi đồ / Cửa hàng.
 * ========================================================================== */
.modal.sd-modal { width: min(460px, calc(100vw - 20px)); padding: 14px 14px 16px; text-align: left; }
.sd { --rank: #8f7a5e; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.35; color: #2e211d; }
.sd-banner { align-self: flex-start; font: 800 12px/1 'Baloo 2', sans-serif; letter-spacing: .04em; color: #fff; background: linear-gradient(90deg, #ff9f1c, #ff5d8f); padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 0 #b8430f; }
.sd-banner.dup { background: #2f7fd0; box-shadow: 0 2px 0 #1b4f86; }
.sd-head { display: flex; gap: 12px; align-items: center; padding-right: 40px; }
.sd-head .hr-portrait { width: 76px; height: 86px; border-radius: 14px; border: 3px solid var(--rank); background: radial-gradient(circle at 50% 35%, #fff, color-mix(in srgb, var(--rank) 22%, #fff4dc)); box-shadow: 0 3px 0 color-mix(in srgb, var(--rank) 60%, #3a2420); }
.sd-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sd-name h2 { margin: 0; font: 800 23px/1.1 'Baloo 2', sans-serif; text-align: left; overflow-wrap: anywhere; }
.sd-id > small { font-size: 13px; font-weight: 700; color: #6b5747; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-chip { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f1e6cf; color: #6b5747; border: 1.5px solid #dcc59a; }
.sd-chip.on { background: #dff5e3; color: #1f7a38; border-color: #8ccc97; }
.sd-chip.pay { background: #fff3c4; color: #8a5a00; border-color: #e8c867; }

/* --- Thái độ & cảm xúc --- */
.sd-mood { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: #fff; border: 2px solid #ead7b2; box-shadow: 0 2px 0 #ead7b2; }
.sd-bar { display: grid; grid-template-columns: 86px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 800; }
.sd-bar i { position: relative; height: 12px; border-radius: 999px; background: #f0e6d3; overflow: hidden; box-shadow: inset 0 1px 2px #0002; }
.sd-bar u { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width .5s cubic-bezier(.2, 1.2, .4, 1); }
.sd-bar.att u { background: linear-gradient(90deg, #ffb347, #ff7a1a); }
.sd-bar.emo u { background: linear-gradient(90deg, #ff9ac1, #ff4f8b); }
.sd-bar.low u { background: linear-gradient(90deg, #9aa0a6, #6b7178); }
.sd-bar.high u { box-shadow: 0 0 8px #ffd54f; }
.sd-bar b { text-align: right; font: 800 16px/1 'VT323', monospace; }
.sd-bar.low b { color: #b3261e; }
.sd-mood-sum { font-size: 12.5px; color: #5a4636; text-align: center; }
.sd-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sd-act { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; border-radius: 10px; border: 1.5px solid #3a2420; background: #fff3d7; box-shadow: 0 2px 0 #3a2420; font: 800 12px/1.1 'Baloo 2', sans-serif; color: #3a2420; cursor: pointer; }
.sd-act small { font-size: 11.5px; color: #705032; }
.sd-act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #3a2420; }
.sd-act:disabled { cursor: not-allowed; background: #eee6d6; border-color: #b9a88c; box-shadow: 0 2px 0 #b9a88c; color: #8a7a64; }
.sd-act.cd small { font: 800 15px/1 'VT323', monospace; color: #6b5747; }
.sd-react { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding: 7px 9px; border-radius: 12px; background: #fff8e6; border: 1.5px dashed #e2c992; font-size: 12px; animation: sdPop .3s cubic-bezier(.2, 1.4, .4, 1); }
.sd-react q { flex-basis: 100%; text-align: center; font-weight: 700; font-style: italic; color: #4a3528; }
.sd-react span { font-weight: 800; }
.sd-react .up { color: #1f7a38; } .sd-react .down { color: #b3261e; }
@keyframes sdPop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Tab --- */
.sd-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #f1e6cf; position: sticky; top: -14px; z-index: 2; }
.sd-tabs button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; font: 800 13px 'Baloo 2', sans-serif; color: #6b5747; cursor: pointer; white-space: nowrap; }
.sd-tabs button.on { background: #fff; color: #2e211d; box-shadow: 0 2px 0 #d9c29a; }
.sd-tabs button i { font-style: normal; font-size: 10.5px; color: #2f7fd0; }
.sd-body { display: flex; flex-direction: column; gap: 8px; min-height: 190px; }
.sd-note { margin: 0; font-size: 11.5px; color: #8a7058; text-align: center; }

/* Chỉ số */
.sd-stats { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; }
.sd-stat { display: grid; grid-template-columns: 88px 1fr 32px; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: #5a4636; }
.sd-stat.main { color: #2e211d; }
.sd-stat i { position: relative; height: 10px; border-radius: 999px; background: #f0e6d3; }
.sd-stat u { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #8fb996; }
.sd-stat.main u { background: linear-gradient(90deg, #6fcf7f, #2f9e55); }
.sd-stat.over u { background: linear-gradient(90deg, #ffcf40, #ff8a3d); }
.sd-stat s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #3a242055; border-radius: 1px; }
.sd-stat b { text-align: right; font: 800 17px/1 'VT323', monospace; color: #2e211d; }
.sd-stat.over b { color: #b36b00; }
.sd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sd-tiles span { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: #fff; border: 1.5px solid #ead7b2; font-size: 11px; color: #8a7058; font-weight: 700; }
.sd-tiles b { font: 800 20px/1.1 'VT323', monospace; color: #2e211d; }
.sd-cta { display: flex; gap: 8px; }
.sd-cta .btn { flex: 1; min-height: 46px; }

/* Đào tạo */
.sd-away { padding: 8px 12px; border-radius: 12px; background: #e3f0ff; border: 2px solid #8fb8e0; font-weight: 800; color: #1b4f86; text-align: center; }
.sd-courses { display: flex; flex-direction: column; gap: 6px; }
.sd-course { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1.5px solid #3a2420; background: #fffaf0; box-shadow: 0 2px 0 #3a2420; font: inherit; color: #2e211d; cursor: pointer; }
.sd-course:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2420; }
.sd-course.off { border-color: #c9b99b; box-shadow: 0 2px 0 #c9b99b; background: #f6f0e4; }
.sd-course.off .sd-ct b, .sd-course.off em { opacity: .7; }
.sd-ct { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sd-ct b { font: 800 14px/1.15 'Baloo 2', sans-serif; }
.sd-ct small { font-size: 11.5px; color: #6b5747; }
.sd-ct > i { font-style: normal; font-size: 11px; font-weight: 800; color: #b3261e; }
.sd-course em { font-style: normal; display: flex; flex-direction: column; align-items: flex-end; font: 800 15px/1.1 'Baloo 2', sans-serif; color: #1f7a38; white-space: nowrap; }
.sd-course em small { font-size: 10.5px; color: #8a7058; font-weight: 700; }

/* Kỹ năng */
.sd-shards { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #eef7ff; border: 2px dashed #8fb8e0; }
.sd-shards > span { display: flex; flex-direction: column; font-size: 13px; }
.sd-shards > span em { font-style: normal; font-weight: 800; white-space: nowrap; }
.sd-shards > span b { font: 800 20px/1 'VT323', monospace; }
.sd-shards .btn { flex: none; white-space: nowrap; }
.sd-shards small { font-size: 10.5px; color: #6b7f93; }
.sd-empty { padding: 20px 10px; text-align: center; border-radius: 14px; background: #f6f0e4; color: #6b5747; font-weight: 700; }
.sd-skills { display: flex; flex-direction: column; gap: 6px; }
.sd-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #f3e8ff; border: 1.5px solid #b98fe6; }
.sd-skill.lv2 { background: #fff1c2; border-color: #e0a020; }
.sd-skill.lv3 { background: linear-gradient(135deg, #ffe3f1, #e3f4ff); border-color: #ff6bd5; box-shadow: 0 0 8px #ff6bd566; }
.sd-skill .sd-ct b i { font-style: normal; color: #8b48d6; }
.sd-skill .sd-ct strong { color: #1f7a38; }
.sd-sk-act { display: flex; flex-direction: column; gap: 4px; }
.sd-sk-act .btn { min-height: 36px; padding: 3px 8px; font-size: 12px; }
.sd-sk-act em { font-style: normal; font-weight: 800; font-size: 11px; color: #8b48d6; text-align: center; }

/* Tiểu sử */
.sd-bio { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid #ead7b2; font-size: 13px; line-height: 1.5; }
.sd-bio > b { font: 800 14px 'Baloo 2', sans-serif; }
.sd-bio q { font-style: italic; color: #6b5747; }
.sd-bio p { margin: 0; }
.sd-style { color: #8a7058; font-size: 12px; }
.sd-fire { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed #e2c992; }
.sd-fire small { font-size: 11px; color: #8a7058; text-align: right; }

/* --- Danh sách nhân viên (thẻ gọn) --- */
.hr-person { border: 2px solid #3a2420; border-radius: 14px; background: #fffaf0; box-shadow: 0 2px 0 #3a2420; min-height: 64px; }
.hr-person:hover { background: #fff3d7; border-color: #3a2420; }
.hr-person .hr-portrait { width: 40px; height: 46px; border-radius: 8px; }
.hr-person-name > b { font: 800 14px 'Baloo 2', sans-serif; }
.hr-person-mood { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.hr-person .hr-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #f1e6cf; color: #6b5747; margin-left: 4px; }
.hr-person .hr-tag.on { background: #dff5e3; color: #1f7a38; }
.hr-person .hr-tag.away { background: #e3f0ff; color: #1b4f86; }
@media (max-width: 380px) {
  .sd-head .hr-portrait { width: 64px; height: 74px; }
  .sd-name h2 { font-size: 20px; }
  .sd-bar { grid-template-columns: 76px 1fr 26px; }
  .sd-stat { grid-template-columns: 80px 1fr 30px; }
}
@media (prefers-reduced-motion: reduce) { .sd-react { animation: none; } .sd-bar u { transition: none; } }

/* --- Tab Chiêu mộ / Đội ngũ / Điều phối: đồng bộ tông game --- */
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hr-chips span { flex: 1; min-width: 0; text-align: center; padding: 6px 4px; border-radius: 12px; background: #fff; border: 1.5px solid #ead7b2; font-size: 11.5px; font-weight: 700; color: #6b5747; white-space: nowrap; }
.hr-chips b { display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 19px/1.1 'VT323', monospace; color: #2e211d; }
.hr-chips b i { font-style: normal; font-size: 13px; }
.hr-sec { margin: 8px 2px 5px; font: 800 12px 'Baloo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a7058; }
.hr-role-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 5px; }
.hr-role-chips button { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 2px solid #3a2420; background: #fff3d7; font: 800 13px/1.1 'Baloo 2', sans-serif; color: #3a2420; cursor: pointer; }
.hr-role-chips button.on { background: #ffcf40; box-shadow: 0 2px 0 #9c651d; }
.hr-role-chips button:disabled { border-color: #c9b99b; background: #f1eadc; color: #9a8b75; cursor: not-allowed; }
.hr-role-chips button:disabled { font-size: 12px; line-height: 1; }
.hr-role-chips small { font-size: 10px; font-weight: 700; }
.hr-channel-choice { border: 2px solid #3a2420; border-radius: 14px; background: #fffaf0; box-shadow: 0 3px 0 #3a2420; font-family: 'Baloo 2', sans-serif; }
.hr-channel-choice b { font-size: 13.5px; }
.hr-channel-choice span { font: 800 16px/1 'VT323', monospace; color: #1f7a38; }
.hr-channel-choice.on { background: #fff0a8; border-color: #3a2420; box-shadow: 0 3px 0 #9c651d, inset 0 0 0 2px #ffb300; }
.hr-compact .hr-channel { border: 2px solid #ead7b2; border-radius: 16px; background: #fff; }
.hr-compact .hr-channel h3 { font-family: 'Baloo 2', sans-serif; }
.hr-compact .hr-channel > .btn { min-height: 48px; font-size: 15px; }
.hr-compact .hr-odds { border-top: 1.5px dashed #ead7b2; }
.hr-compact .hr-explainer { border: 1.5px solid #ead7b2; border-radius: 14px; background: #fffaf0; }
.hr-role-picker button { border: 2px solid #3a2420; border-radius: 12px; background: #fffaf0; font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.hr-role-picker button.on { background: #fff0a8; box-shadow: 0 2px 0 #9c651d; }
.hr-compact .hr-role-card { border: 2px solid #ead7b2; border-radius: 16px; }
.hr-compact .hr-slot { border: 1.5px solid #ead7b2; border-left: 5px solid #6fcf7f; border-radius: 12px; background: #fffaf0; }
.hr-compact .hr-slot.locked { border-left-color: #c9b99b; background: #f4eee2; }
.sd-fire-btn { font: 800 11.5px/1 'Baloo 2', sans-serif; padding: 4px 10px; border-radius: 999px; border: 1.5px solid #d9534f; background: #fff0ee; color: #b3261e; cursor: pointer; min-height: 26px; }
.sd-fire-btn:hover { background: #ffe0dc; }
.sd-fire-btn:active { transform: translateY(1px); }

/* --- Đếm ngược tự chọn (popup sự kiện 5s) & tự qua ngày (10s) --- */
.auto-cd { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.auto-cd i { display: block; height: 6px; border-radius: 999px; background: #eee3cc; overflow: hidden; }
.auto-cd u { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb347, #ff7a1a); transition: width .2s linear; }
.auto-cd span { font-size: 12px; font-weight: 700; color: #8a7058; text-align: center; }
.rep-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 8px 10px; border-radius: 12px; background: #fff8e6; border: 1.5px dashed #e2c992; cursor: pointer; }
.rep-auto input { width: 22px; height: 22px; accent-color: #2f9e55; margin: 0; cursor: pointer; }
.rep-auto > span { font-weight: 800; font-size: 13.5px; color: #3a2420; }
.rep-auto .auto-cd { flex-basis: 100%; margin-top: 2px; }
.rep-auto .auto-cd u { background: linear-gradient(90deg, #6fcf7f, #2f9e55); }

/* --- TỔNG KẾT NGÀY: gọn, 2 tab, chân cố định --- */
.modal.report.rp { width: min(440px, 100%); padding-bottom: 0; }
.rp-head h2 { margin: 0 0 8px; font-size: 21px; }
.rp-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 16px; border: 2px solid #3a2420; background: linear-gradient(180deg, #e9f9e7, #fff); box-shadow: 0 3px 0 #3a2420; }
.rp-hero.neg { background: linear-gradient(180deg, #ffe6e1, #fff); }
.rp-hero > small { font: 800 12px 'Baloo 2', sans-serif; letter-spacing: .1em; color: #6b5747; }
.rp-hero > b { font: 800 30px/1.1 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums; color: var(--green-d, #2f7a3a); }
.rp-hero.neg > b { color: var(--red, #c0392b); }
.rp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 4px; }
.rp-flow span { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; color: #8a7058; }
.rp-flow b { font: 800 14px 'Baloo 2', sans-serif; color: #2e211d; }
.rp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 10px 0 8px; padding: 4px; border-radius: 14px; background: #f1e6cf; }
.rp-tabs button { min-height: 36px; border: 0; border-radius: 10px; background: transparent; font: 800 13px 'Baloo 2', sans-serif; color: #6b5747; cursor: pointer; }
.rp-tabs button.on { background: #fff; color: #2e211d; box-shadow: 0 2px 0 #d9c29a; }
.rp-pane { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.rp-pane[hidden] { display: none; }
.rp-pane .chart.small { margin: 2px 0 0; height: 84px; }
.rp-extras { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-x { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #f1e6cf; color: #5a4636; }
.rp-x.good { background: #e6f7df; color: #1f6a2a; }
.rp-x.xp { background: #fff1c2; color: #8a5a00; }
.rp-pane .rep-night { margin: 0; }
.rp-pane .rep-market, .rp-pane .rep-finance { margin: 0; }
.rp-pane .report-cash { margin: 0; background: #fffaf0; border-color: #ead7b2; border-radius: 12px; }
.rp-pane .report-cash p { margin: 3px 0 0; }
/* A full-width ledger keeps Vietnamese labels and exact amounts readable. */
.rp-pane[data-pane="detail"] { gap: 8px; }
.rp-ledger-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--paper-2); border: 1px solid #ead7b2; border-radius: 4px; }
.rp-ledger-switch button { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; min-height: 44px; padding: 4px 8px; border: 2px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); font: 800 13px/1.3 var(--display); cursor: pointer; }
.rp-ledger-switch button.on { background: var(--card); border-color: var(--ink); box-shadow: 0 2px 0 #d9c29a; }
.rp-ledger-switch button b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-ledger-switch button:focus-visible,
.rp-pane[data-pane="detail"] summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.rp-pane[data-pane="detail"] .rep-col[hidden] { display: none; }
.rp-pane[data-pane="detail"] .rep-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rp-pane[data-pane="detail"] .rep-col,
.rp-pane[data-pane="detail"] .report-cash { min-width: 0; padding: 12px; }
.rp-pane[data-pane="detail"] h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font: 800 14px/1.4 var(--display); color: var(--ink); }
.rp-pane[data-pane="detail"] .rrow { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--paper-2); }
.rp-pane[data-pane="detail"] .rrow > span { min-width: 0; overflow-wrap: normal; word-break: normal; }
.rp-pane[data-pane="detail"] .rrow > b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.rp-pane[data-pane="detail"] .rrow.sum { margin-top: 4px; padding-top: 8px; border-top: 2px dashed #b89e6a; border-bottom: 0; font-weight: 800; }
.rp-prepaid { margin-top: 12px; padding-top: 8px; border-top: 1px solid #ead7b2; }
.rp-prepaid p { font-size: 12px; line-height: 1.5; }
.rp-pane[data-pane="detail"] details.report-cash { padding: 0; border-radius: 4px; }
.rp-pane[data-pane="detail"] summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; font-size: 13px; cursor: pointer; list-style: none; }
.rp-pane[data-pane="detail"] summary::-webkit-details-marker { display: none; }
.rp-pane[data-pane="detail"] summary::before { content: '›'; font-size: 20px; line-height: 1; }
.rp-pane[data-pane="detail"] details[open] > summary::before { content: '⌄'; }
.rp-pane[data-pane="detail"] summary > span { flex: 1; min-width: 0; }
.rp-pane[data-pane="detail"] summary > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-disclosure-body { padding: 0 12px 12px; }
.rp-xp-detail summary > b { color: #8a5a00; }
@media (max-width: 360px) {
  .rp-pane[data-pane="detail"] .rep-col,
  .rp-pane[data-pane="detail"] .report-cash { padding: 8px; }
  .rp-pane[data-pane="detail"] .rrow { gap: 8px; font-size: 12px; }
}
.rp-foot { position: sticky; bottom: 0; margin: 8px -18px 0; padding: 8px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--paper, #fff8ea); border-top: 2px solid #ead7b2; z-index: 3; }
.rp-foot .rep-auto { margin: 0 0 8px; padding: 6px 10px; }

/* ==========================================================================
 * BỘ KHUNG CHUNG "sx" — Nhân viên & Quản lý dùng cùng phong cách popup hồ sơ:
 * thẻ trắng viền kem, tab dạng khối, ô số liệu, chip, thanh tiến độ, nút viền đậm.
 * ========================================================================== */
.sx { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.35; color: #2e211d; }
.sx-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: #fff; border: 2px solid #ead7b2; box-shadow: 0 2px 0 #ead7b2; }
.sx-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 800 12px 'Baloo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a7058; }
.sx-h span { text-transform: none; letter-spacing: 0; font-size: 12px; color: #6b5747; }
.sd-tiles.sx-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-tiles.sx-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-tiles span { min-width: 0; }
.sd-tiles b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sd-tabs.sx-seg { position: static; }
.sd-tabs.sx-seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 4px 2px; min-height: 42px; white-space: normal; }
.sd-tabs.sx-seg button small { font: 700 10.5px 'Baloo 2', sans-serif; color: #8a7058; }
.sd-tabs.sx-seg button.on small { color: #1f7a38; }
.sx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 3px; }
.sx-chips::-webkit-scrollbar { display: none; }
.sx-chips button { flex: none; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid #dcc59a; background: #fff; font: 800 12.5px 'Baloo 2', sans-serif; color: #6b5747; cursor: pointer; }
.sx-chips button.on { background: #3a2420; border-color: #3a2420; color: #fff; }
.sx-list { display: flex; flex-direction: column; gap: 6px; }
.sx-person { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 16px; border: 2px solid #3a2420; background: #fffaf0; box-shadow: 0 3px 0 #3a2420; font: inherit; color: #2e211d; text-align: left; cursor: pointer; }
.sx-person:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2420; }
.sx-person.flat { border: 0; box-shadow: none; background: transparent; padding: 0; }
.sx-person.unmet { border-color: #c9b99b; box-shadow: 0 2px 0 #c9b99b; background: #f6f0e4; }
.sx-person.unmet .sx-av img { filter: grayscale(.7) opacity(.7); }
.sx-av { --rank: #8f7a5e; flex: none; display: grid; place-items: center; width: 46px; height: 52px; border-radius: 12px; border: 2.5px solid var(--rank); background: radial-gradient(circle at 50% 35%, #fff, color-mix(in srgb, var(--rank) 22%, #fff4dc)); overflow: hidden; }
.sx-av .hr-portrait { width: 40px; height: 46px; border: 0; background: none; border-radius: 0; }
.sx-av.sm { width: 36px; height: 40px; border-radius: 10px; }
.sx-av.sm .hr-portrait { width: 30px; height: 36px; }
.sx-pi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-pi .sd-name b { font: 800 15px/1.1 'Baloo 2', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pi > small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #6b5747; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pi .sd-chip { padding: 1px 8px; font-size: 10.5px; }
.sd-chip.away { background: #e3f0ff; color: #1b4f86; border-color: #8fb8e0; }
.sx-mood { width: 26px; height: 26px; flex: none; color: #7b6a50; }
.sx-mood svg { display: block; width: 100%; height: 100%; }
.sx-mood.up { color: #287847; }
.sx-mood.down { color: #a34135; }
.sx-score { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.sx-score b { font: 800 20px/1 'VT323', monospace; }
.sx-score small { font-size: 10px; color: #8a7058; font-weight: 700; }
.sx-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #6b5747; }
.sx-pages .btn { min-width: 48px; min-height: 40px; font-size: 20px; padding: 0 12px; }
/* Chiêu mộ */
.sx-odds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sx-odds span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; border-radius: 10px; background: #fffaf0; border: 1.5px solid #f0e2c4; }
.sx-odds b { font: 800 14px/1 'VT323', monospace; }
.sd-bar.pity { grid-template-columns: 92px 1fr 34px; }
.sd-bar.pity u { background: linear-gradient(90deg, #b98fe6, #8b48d6); }
.sd-bar.xp { grid-template-columns: 56px 1fr 44px; }
.sd-bar.xp u { background: linear-gradient(90deg, #ffe066, #ffb300); }
.sx-card .sd-cta .btn, .sx .sd-cta .btn { min-height: 48px; font-size: 15px; }
.sx-more { gap: 6px; }
.sx-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 30px; font: 800 13px 'Baloo 2', sans-serif; color: #5a4636; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more summary::after { content: '▾'; color: #8a7058; }
.sx-more[open] summary::after { content: '▴'; }
.sx-more summary i { font-style: normal; margin-left: auto; margin-right: 8px; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #f1e6cf; color: #6b5747; }
.sx-logrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 5px 2px; border-top: 1px dashed #f0e2c4; font-size: 12px; }
.sx-logrow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-logrow span { color: #8a7058; }
.sx-logrow em { font-style: normal; font-weight: 800; color: #1f7a38; }
.sx-logrow em.neg { color: #b3261e; }
.sx-logrow.sx-incident { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 8px 0; }
.sx-incident b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.sx-incident > span { grid-column: 1 / -1; overflow-wrap: anywhere; line-height: 1.5; }
.sx-incident em { white-space: nowrap; }
.sx-more summary:focus-visible { outline: 3px solid var(--blue, #2f7fd0); outline-offset: 2px; }
/* Điều phối */
.sx-slots { display: flex; flex-direction: column; gap: 8px; }
.sx-slot { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: #fffaf0; border: 2px solid #ead7b2; }
.sx-slot.on { border-color: #8ccc97; background: #f3fbf1; }
.sx-slot.empty { border-style: dashed; }
.sx-slot.locked { flex-direction: row; align-items: center; justify-content: space-between; background: #f4eee2; color: #8a7a64; font-weight: 700; font-size: 12.5px; }
.sx-slot-n { font: 800 11px 'Baloo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a7058; }
.sx-slot-acts { display: flex; gap: 6px; }
.sx-slot-acts > * { flex: 1; }
.sx-slot-acts .btn { min-height: 38px; }
.sx-select { min-height: 38px; padding: 4px 8px; border-radius: 10px; border: 2px solid #dcc59a; background: #fff; font: 700 12.5px 'Baloo 2', sans-serif; color: #3a2420; }
.sx-cands { display: flex; flex-direction: column; gap: 5px; }
.sx-cand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 12px; border: 2px solid #3a2420; background: #fff; box-shadow: 0 2px 0 #3a2420; font: inherit; color: #2e211d; text-align: left; cursor: pointer; }
.sx-cand:active { transform: translateY(2px); box-shadow: none; }
.sx-cand span { display: flex; flex-direction: column; min-width: 0; }
.sx-cand b { font: 800 13.5px 'Baloo 2', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-cand small { font-size: 11px; color: #8a7058; font-weight: 700; }
.sx-cand em { font-style: normal; font: 800 12px 'Baloo 2', sans-serif; color: #fff; background: #2f9e55; border-radius: 999px; padding: 4px 10px; }
.sx-none { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: #8a7058; }
/* Cấp quán */
.sx-hero { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; border: 2px solid #3a2420; background: linear-gradient(180deg, #fff6d1, #fff); box-shadow: 0 3px 0 #3a2420; }
.sx-hero > small { font: 800 11px 'Baloo 2', sans-serif; letter-spacing: .12em; color: #b36b00; }
.sx-hero h2 { margin: 0; font: 800 26px/1.1 'Baloo 2', sans-serif; text-align: left; }
.sx-hero h2 span { font-size: 17px; color: #6b5747; }
.sx-req { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.sx-req i { position: relative; height: 8px; border-radius: 999px; background: #f0e6d3; overflow: hidden; }
.sx-req u { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #ffb347, #ff7a1a); }
.sx-req.ok u { background: linear-gradient(90deg, #6fcf7f, #2f9e55); }
.sx-req b { font: 800 15px/1 'VT323', monospace; }
.sx-req.ok b { color: #1f7a38; }
.sx-unl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed #f0e2c4; font-size: 12.5px; }
.sx-unl:first-of-type { border-top: 0; }
.sx-unl span { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sx-unl em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #f1e6cf; color: #8a7058; }
.sx-unl em.on { background: #dff5e3; color: #1f7a38; }
/* Xác nhận sa thải */
.sx-confirm .sx-q { margin: 0; font-size: 15px; text-align: center; }
.sx-confirm .sd-head { padding-right: 40px; }

/* ==========================================================================
 * PANEL NHÂN VIÊN & QUẢN LÝ — tab dạng khối + thẻ trắng viền kem (giống popup hồ sơ nhân viên)
 * ========================================================================== */
#panel:is([data-panel="staff"], [data-panel="manage"]) .panel-tabs:not(.grouped-tabs),
#panel[data-panel="manage"] .panel-primary { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 8px 10px 0; border-radius: 14px; background: #f1e6cf; }
#panel[data-panel="manage"] .panel-tabs.grouped-tabs { padding: 0 0 0; gap: 6px; }
#panel[data-panel="manage"] .panel-primary { grid-template-columns: none; }
#panel:is([data-panel="staff"], [data-panel="manage"]) .panel-tabs:not(.grouped-tabs) button,
#panel[data-panel="manage"] .panel-primary button { min-height: 38px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; font: 800 13px 'Baloo 2', sans-serif; color: #6b5747; white-space: nowrap; }
#panel:is([data-panel="staff"], [data-panel="manage"]) .panel-tabs:not(.grouped-tabs) button.on,
#panel[data-panel="manage"] .panel-primary button.on { background: #fff; color: #2e211d; box-shadow: 0 2px 0 #d9c29a; }
#panel[data-panel="manage"] .panel-secondary { gap: 6px; padding: 2px 10px 8px; border-bottom: 2px solid #f1e6cf; scrollbar-width: none; }
#panel[data-panel="manage"] .panel-secondary button { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid #dcc59a; background: #fff; box-shadow: none; font: 800 12.5px 'Baloo 2', sans-serif; color: #6b5747; }
#panel[data-panel="manage"] .panel-secondary button.on { background: #3a2420; border-color: #3a2420; color: #fff; }
#panel[data-panel="manage"] .panel-primary .upgrade-ready-dot { top: 2px; right: 4px; border-color: #f1e6cf; }
#panel[data-panel="manage"] .panel-secondary .upgrade-ready-dot { top: -2px; right: 3px; }
.promotion-ready-cta .upgrade-ready-dot { top: -4px; right: -4px; width: 13px; height: 13px; border-color: #fff; }

/* --- Nội dung Quản lý --- */
#panel[data-panel="manage"] .panel-body { font-size: 13px; }
#panel[data-panel="manage"] .soft-title { margin: 12px 2px 6px; font: 800 12px 'Baloo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a7058; }
#panel[data-panel="manage"] .soft-title:first-child { margin-top: 2px; }
#panel[data-panel="manage"] .hint { background: #fff8e6; border: 1.5px dashed #e2c992; border-radius: 12px; color: #6b5747; }
#panel[data-panel="manage"] .muted { color: #8a7058; }
/* ô số liệu */
#panel[data-panel="manage"] .cards { gap: 6px; }
#panel[data-panel="manage"] .card { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 14px; background: #fff; border: 2px solid #ead7b2; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .card small { font-size: 11px; font-weight: 700; color: #8a7058; }
#panel[data-panel="manage"] .card b { font: 800 16px/1.2 'Baloo 2', sans-serif; color: #2e211d; }
#panel[data-panel="manage"] .card em { font-size: 10.5px; font-weight: 700; }
#panel[data-panel="manage"] .card.bad { background: #fff0ee; border-color: #f0b8b0; box-shadow: 0 2px 0 #f0b8b0; }
#panel[data-panel="manage"] .card-link { border-color: #3a2420; box-shadow: 0 3px 0 #3a2420; background: #fffaf0; cursor: pointer; text-align: left; font: inherit; }
#panel[data-panel="manage"] .card-link:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2420; }
/* thẻ chủ quán */
#panel[data-panel="manage"] .owner-profile-card { border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .owner-profile-card > img { border: 3px solid #e0a020; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #fff, #fff0cf); }
#panel[data-panel="manage"] .owner-profile-card small { font: 800 11px 'Baloo 2', sans-serif; letter-spacing: .1em; color: #b36b00; }
#panel[data-panel="manage"] .owner-profile-card b { font: 800 21px/1.1 'Baloo 2', sans-serif; }
/* cần xử lý */
/* tài sản */
#panel[data-panel="manage"] .asset-total, #panel[data-panel="manage"] .finance-balance { border-radius: 16px; border: 2px solid #3a2420; background: linear-gradient(180deg, #fff6d1, #fff); box-shadow: 0 3px 0 #3a2420; }
#panel[data-panel="manage"] .asset-total small, #panel[data-panel="manage"] .finance-balance small { font: 800 11px 'Baloo 2', sans-serif; letter-spacing: .1em; color: #b36b00; }
#panel[data-panel="manage"] .asset-total b, #panel[data-panel="manage"] .finance-balance b { font: 800 24px/1.1 'Baloo 2', sans-serif; }
#panel[data-panel="manage"] .asset-bar { border-radius: 999px; overflow: hidden; background: #f0e6d3; }
#panel[data-panel="manage"] .asset-group { margin-top: 8px; border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; padding: 4px 10px; }
#panel[data-panel="manage"] .asset-group > summary { min-height: 38px; font-size: 13px; }
#panel[data-panel="manage"] .asset-row { border-top: 1px dashed #f0e2c4; }
/* tài chính */
#panel[data-panel="manage"] .finance-warning { border-radius: 12px; background: #fff0ee; border: 1.5px dashed #f0b8b0; color: #8a2f25; font-size: 12px; }
#panel[data-panel="manage"] .loan-offers article { border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .loan-offers article b { font: 800 18px 'Baloo 2', sans-serif; }
/* hội viên / sổ nợ */
#panel[data-panel="manage"] .mem { border-radius: 14px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; padding: 6px 10px; }
#panel[data-panel="manage"] .mem > img { width: 32px; border-radius: 8px; background: #fff4dc; }
#panel[data-panel="manage"] .mem b { font: 800 14px 'Baloo 2', sans-serif; }
/* khách quen */
#panel[data-panel="manage"] .lx-reg { border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .lx-reg > img { border: 2.5px solid #e2c992; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #fff, #fff0cf); }
#panel[data-panel="manage"] .lx-reg-top b { font: 800 16px 'Baloo 2', sans-serif; }
#panel[data-panel="manage"] .lx-reg-top em { border-radius: 999px; padding: 1px 8px; }
#panel[data-panel="manage"] .lx-rel .bar { height: 9px; border-radius: 999px; background: #f0e6d3; overflow: hidden; border: 0; }
#panel[data-panel="manage"] .lx-rel .bar i { border-radius: 999px; background: linear-gradient(90deg, #ff9ac1, #ff4f8b); }
/* giá bán */
#panel[data-panel="manage"] .sale-row { margin-bottom: 6px; padding: 8px 10px; border: 2px solid #ead7b2; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .sale-row b { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
#panel[data-panel="manage"] .chip-btn { min-width: 34px; min-height: 34px; padding: 0 10px; border: 2px solid #3a2420; border-radius: 10px; background: #fff3d7; box-shadow: 0 2px 0 #3a2420; font-size: 16px; font-weight: 800; }
#panel[data-panel="manage"] .chip-btn.on { background: #3a2420; color: #fff; }
/* marketing */
#panel[data-panel="manage"] .lx-mk-card { border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .toggle { padding: 8px 10px; border-radius: 14px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .toggle input { width: 22px; height: 22px; accent-color: #2f9e55; }
/* kho hàng */
#panel[data-panel="manage"] .tbl { background: #fff; border: 2px solid #ead7b2; border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .tbl th { padding: 6px 4px; background: #fff8e6; font: 800 11px 'Baloo 2', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #8a7058; }
#panel[data-panel="manage"] .tbl td { padding: 6px 4px; border-bottom: 1px dashed #f0e2c4; }
#panel[data-panel="manage"] .tbl tr:last-child td { border-bottom: 0; }
/* kiếm thêm */
#panel[data-panel="manage"] .gig-sum { border-radius: 14px; background: #e9f9e7; border: 2px solid #8ccc97; box-shadow: 0 2px 0 #8ccc97; }
#panel[data-panel="manage"] .gig { border-radius: 16px; border: 2px solid #ead7b2; background: #fff; box-shadow: 0 2px 0 #ead7b2; }
#panel[data-panel="manage"] .gig-job { border-radius: 12px; background: #fffaf0; border: 1.5px solid #f0e2c4; }

/* Nhân viên: chữ rõ, icon nét SVG, ưu tiên chỗ cho hồ sơ và nội dung. */
#panel[data-panel="staff"] .sx { gap: 8px; }
#panel[data-panel="staff"] .sx-card { padding: 8px; gap: 6px; border-radius: 12px; }
#panel[data-panel="staff"] .sd-tiles span { padding: 5px 2px; border-radius: 10px; }
#panel[data-panel="staff"] .sd-cta .btn { min-height: 44px; font-size: 14px; }
.sd .sd-note, .sx .sd-note { font-size: 12px; color: #705b47; }
.sd .sd-ct small { font-size: 12px; line-height: 1.35; }
.sx-req-state { margin-left: 6px; font-size: 10.5px; font-style: normal; color: #9a4b30; }
.sx-req.ok .sx-req-state { color: #267244; }
.sd :is(button, select):focus-visible, .sx :is(button, select):focus-visible, .sx summary:focus-visible { outline: 3px solid #357fba; outline-offset: 3px; }
@media (max-width: 380px) {
  .sd-skill { grid-template-columns: minmax(0, 1fr); }
  .sd-sk-act { flex-direction: row; justify-content: flex-end; }
  .sd-shards { flex-wrap: wrap; }
  .sd-shards .btn { margin-left: auto; }
}
@media (pointer: coarse) {
  .sd-sk-act .btn, .sd-tabs button, .sd-fire-btn, .sx-chips button { min-height: 44px; }
}

/* Tab "Nghề": mô tả · nhiệm vụ · tính năng */
.sd-job { display: flex; flex-direction: column; gap: 8px; }
.sd-about { margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1.5px solid #ead7b2; font-size: 13px; line-height: 1.45; font-weight: 700; color: #4a3a30; }
.sd-jsec { padding: 9px 12px; border-radius: 14px; background: #fff; border: 1.5px solid #ead7b2; font-size: 12.5px; line-height: 1.45; }
.sd-jsec > b { display: block; margin-bottom: 3px; font: 800 13px 'Baloo 2', sans-serif; color: var(--rank, #2e211d); }
.sd-jsec ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 3px; }
.sd-jsec p { margin: 0; color: #6b5747; }
.sd-jsec li strong { color: #1f7a38; }
.sd-jfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-jfoot span { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 12px; background: #f6f0e4; font-size: 11px; color: #8a7058; }
.sd-jfoot span b { font: 800 13px 'Baloo 2', sans-serif; color: #2e211d; }

/* Hồ sơ giữ tên, tab và thao tác ca trực ngoài phần nội dung cuộn. */
.modal.sd-modal:has(.sd-root) { display:flex; flex-direction:column; overflow:hidden; padding:10px; height:min(660px,calc(var(--ui-vh,100dvh) - 24px)); max-height:calc(var(--ui-vh,100dvh) - 24px); }
.sd-root, .sd-shell { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.sd-shell { gap:8px; }
.sd-shell > .sd-head { flex:none; gap:8px; padding-right:44px; }
.sd-shell .sd-head .hr-portrait { width:52px; height:60px; flex:none; border-width:2px; border-radius:10px; box-shadow:0 2px 0 color-mix(in srgb,var(--rank) 60%,#3a2420); }
.sd-shell .sd-name h2 { font-size:20px; line-height:1.15; }
.sd-shell .sd-id > small { font-size:12px; }
.sd-shell .sd-chip { font-size:11px; padding:2px 7px; }
.sd-shell > .sd-tabs { position:static; flex:none; gap:3px; padding:3px; border-radius:10px; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:unset; }
.sd-shell > .sd-tabs:has(button:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sd-shell > .sd-tabs button { min-width:0; min-height:44px; padding:3px 1px; font-size:12px; white-space:normal; line-height:1.15; }
.sd-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scroll-padding:8px; padding:2px 2px 6px; }
.sd-scroll .sd-body { min-height:0; }
.sd-footer { flex:none; margin:0; padding-top:8px; padding-bottom:env(safe-area-inset-bottom); border-top:1.5px solid #ead7b2; }
.sd-footer .btn { min-width:0; min-height:44px; font-size:14px; padding:7px 8px; }
.sd-body .sd-mood { padding:8px; gap:5px; }
.sd-body .sd-mood-sum { text-align:left; font-size:12px; }
.sd-fire-btn { min-width:74px; min-height:44px; border-radius:10px; padding:8px; font-size:12px; }
.sd-shards { flex-wrap:wrap; }
.sd-shards .btn { min-height:44px; min-width:0; max-width:100%; white-space:normal; }
.sd-sk-act .btn { min-height:44px; min-width:44px; }
.sd-course, .sd-skill, .sd-jsec, .sd-bio { overflow-wrap:anywhere; }
.sx-filters { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px; flex:none; }
.sx-filters select { min-width:0; width:100%; min-height:44px; border:1.5px solid #dcc59a; border-radius:10px; padding:6px 8px; background:#fff; color:#5a4636; font:700 13px 'Baloo 2',sans-serif; }
.sx-list-view { height:100%; min-height:0; gap:8px; }
.sx-list-view > .sx-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:1px 2px 5px; }
.sx-list-view > .sd-tiles, .sx-pages { flex:none; }
.sx-pages .btn { min-height:44px; min-width:44px; }
.sx-panel-action { padding-top:8px; padding-bottom:env(safe-area-inset-bottom); border-top:1.5px solid #ead7b2; }
.sx-panel-action .btn { min-height:44px; min-width:0; width:100%; font-size:14px; padding:8px; }
#panel[data-panel="staff"] .sx { gap:8px; }
#panel[data-panel="staff"] .sx-card { padding:8px; gap:6px; border-radius:12px; box-shadow:0 1px 0 #ead7b2; }
#panel[data-panel="staff"] .sx-more summary { min-height:44px; }
#panel[data-panel="staff"] .sd-tabs.sx-seg button { min-height:44px; }
#panel[data-panel="staff"] .hr-role-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:5px; padding:0; }
#panel[data-panel="staff"] .hr-role-chips button { min-width:0; border-radius:10px; padding:4px; font-size:12px; }
.sx-person { gap:7px; padding:6px; border-radius:12px; }
.sx-pi > small { white-space:normal; flex-wrap:wrap; gap:3px; line-height:1.15; }
.sx-score { min-width:30px; }
.sx-slot, .sx-cand { min-width:0; }
.sx-slot-acts .btn, .sx-select { min-height:44px; }
.sd-shell button:focus-visible, .sx-filters select:focus-visible { outline:3px solid #2f7fd0; outline-offset:2px; }
@media (max-width:380px) { .sd-shell .sd-name h2 { font-size:18px; } .sd-shell .sd-head .hr-portrait { width:44px; height:52px; } .sd-shell .sd-chips { gap:3px; } .sd-acts { gap:5px; } .sd-act { font-size:11px; } .sd-skill { grid-template-columns:minmax(0,1fr); } .sd-sk-act { flex-direction:row; align-items:center; } .sd-sk-act > * { flex:1; } .sx-score small { font-size:9px; } }
@media (max-height:480px) and (min-width:601px) { .modal.sd-modal:has(.sd-root) { width:min(620px,calc(100vw - 24px)); } .sd-shell .sd-head .hr-portrait { width:40px; height:46px; } .sd-shell .sd-id { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px; } .sd-shell .sd-name { flex-basis:auto; } .sd-shell .sd-chips { flex-basis:auto; } .sd-shell { gap:6px; } }
#panel[data-panel="staff"] .sx-recruit-summary { display:flex; flex-wrap:wrap; gap:4px 10px; }
#panel[data-panel="staff"] .sx-recruit-summary span { flex:1; flex-direction:row; justify-content:center; gap:4px; padding:2px 0; border:0; border-radius:0; background:none; white-space:nowrap; font-size:11px; }
#panel[data-panel="staff"] .sx-recruit-summary b { font-size:18px; }
#panel[data-panel="staff"] .sx-role-select { width:100%; min-height:44px; font-size:14px; }

/* Điều phối theo tầng: giữ bộ chọn gần danh sách, chỉ hiển thị đội ngũ tại tầng đang chọn. */
.sx-deploy-nav { position:sticky; top:0; z-index:3; display:flex; flex-direction:column; gap:6px; background:#fff8ee; padding-bottom:6px; }
.sx-floor-nav { display:grid; grid-template-columns:repeat(var(--floor-count),minmax(0,1fr)); gap:5px; }
.sx-floor-nav button { min-width:0; min-height:48px; padding:5px 2px; display:flex; flex-direction:column; align-items:center; gap:2px; border:2px solid #dcc59a; border-radius:10px; background:#fff; color:#6b5747; font:800 13px/1.15 'Baloo 2',sans-serif; cursor:pointer; }
.sx-floor-nav button small { font-size:11px; font-weight:700; }
.sx-floor-nav button.on { background:#ffe078; color:#3a2420; border-color:#bd881a; box-shadow:0 2px 0 #bd881a; }
.sx-deployment .sx-h { letter-spacing:.02em; flex-wrap:wrap; }
.sx-deployment .sx-h span { margin-left:auto; font-size:14px; font-weight:800; color:#287847; }
.sx-vacancy { color:#705b47; font-size:12px; }
.sx-vacancy.full { color:#287847; }
.sx-deployment .sx-move { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sx-move > span { font-size:11px; color:#705b47; font-weight:700; }
.sx-move .sx-select { width:100%; min-width:0; }
.sx-deployment .sx-slot-acts { align-items:flex-end; }
.sx-deployment .sx-slot-acts > .btn { flex:.8; min-width:0; padding:6px; }
.sx-sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.sx-sources button { min-height:44px; min-width:0; border:1.5px solid #dcc59a; border-radius:10px; background:#fff8ee; color:#705b47; font:800 13px 'Baloo 2',sans-serif; cursor:pointer; }
.sx-sources button.on { background:#3a2420; border-color:#3a2420; color:#fff; }
.sx-sources button b { margin-left:3px; }
.sx-deployment .sx-cand { min-height:62px; grid-template-columns:auto minmax(0,1fr) auto; }
.sx-deployment .sx-cand:disabled { opacity:.65; cursor:default; box-shadow:none; }
.sx-deployment .sx-cand:disabled em { background:#796c5e; }
.sx-deployment .sx-none { flex-wrap:wrap; }
.sx-deployment .sx-none > span { flex:1 1 160px; }
.sx-deploy-nav button:focus-visible, .sx-deployment button:focus-visible, .sx-deployment select:focus-visible { outline:3px solid #2f7fd0; outline-offset:2px; }
@media (max-height:500px) { .sx-deploy-nav { position:static; } }

/* Chọn nhiều người trong Đội ngũ: cả thẻ là nút chọn, thao tác nhóm luôn hiện. */
.sx-bulk-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; }
.sx-bulk-top > b { font:800 13px 'Baloo 2',sans-serif; }
.sx-bulk-top .btn, .sx-bulk-tools .btn { min-height:44px; min-width:0; font-size:12px; padding:6px 8px; }
.sx-bulk-tools { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:6px; flex:none; }
.sx-bulk-scope { flex:none; text-align:left; font-size:11px !important; line-height:1.25; }
.sx-bulk-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding:2px 2px 5px; }
.sx-bulk-scroll > * { flex:none; }
.sx-bulk-person:focus-visible, .sx-bulk-view button:focus-visible { outline:3px solid #2f7fd0; outline-offset:2px; }
.sx-bulk-person { min-height:66px; }
.sx-bulk-person { grid-template-columns:auto auto minmax(0,1fr) auto; }
.sx-bulk-person.selected { border-color:#2f7fd0; background:#edf6ff; box-shadow:0 2px 0 #96bbdb; }
.sx-bulk-person:disabled { opacity:.65; cursor:default; box-shadow:none; }
.sx-bulk-check { width:24px; height:24px; flex:none; display:grid; place-items:center; border:2px solid #9b8464; border-radius:6px; background:#fff; color:#fff; }
.sx-bulk-check svg { width:20px; height:20px; }
.selected .sx-bulk-check { border-color:#216caf; background:#216caf; }
.sx-bulk-pay { flex:none; min-width:44px; display:flex; flex-direction:column; text-align:right; gap:2px; }
.sx-bulk-pay b { font:800 14px/1 'Baloo 2',sans-serif; color:#6b5747; }
.sx-bulk-pay small { font-size:10px; color:#705b47; }
.sd-chip.busy { color:#915128; background:#fff0dd; border-color:#d8ad76; }
.sx-bulk-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 8px; flex:none; padding-top:8px; padding-bottom:env(safe-area-inset-bottom); border-top:1.5px solid #ead7b2; }
.sx-bulk-total { min-width:0; display:flex; flex-direction:column; gap:3px; font-size:11px; color:#705b47; line-height:1.25; }
.sx-bulk-total b { font:800 12px/1.2 'Baloo 2',sans-serif; color:#3a2420; }
.sx-bulk-total strong { color:#915128; white-space:nowrap; }
.sx-bulk-footer .btn { min-width:0; min-height:44px; font-size:13px; padding:6px 10px; }
.sx-bulk-footer > small, .sx-bulk-error { grid-column:1/-1; margin:0; font-size:11px; line-height:1.25; }
.sx-bulk-footer > small { color:#705b47; }
.sx-bulk-error { color:#a5372e; }
.sx-bulk-confirm > h2 { margin:0; padding-right:36px; font:800 22px/1.15 'Baloo 2',sans-serif; }
.sx-bulk-names { list-style:none; margin:0; padding:0 4px; max-height:30dvh; min-height:0; overflow:auto; overscroll-behavior:contain; }
.sx-bulk-names li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px dashed #ead7b2; }
.sx-bulk-names li > span { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; }
.sx-bulk-names li small { flex-basis:100%; color:#705b47; }
.sx-bulk-names li strong { flex:none; color:#915128; }
.sx-bulk-confirm .sd-tiles b { font:800 17px/1.15 'Baloo 2',sans-serif; overflow-wrap:anywhere; }
@media (max-width:380px) {
  .sx-bulk-person { gap:5px; padding:5px; }
  .sx-bulk-person .sx-av { width:34px; height:40px; }
  .sx-bulk-person .sd-name { gap:4px; }
  .sx-bulk-person .sd-name > b { font-size:12px; }
  .sx-bulk-check { width:22px; height:22px; }
  .sx-bulk-pay b { font-size:12px; }
  .sx-bulk-tools .btn { font-size:11px; padding:5px; }
}

/* Kho mảnh dùng chung: ghi rõ nguồn, giữ nút trong khung điện thoại. */
.sd-shards { border-radius: 4px; }
.sd-shards > span { min-width: 0; }
.sd-shards small { overflow-wrap: anywhere; line-height: 1.4; }
.sd-skill { border-radius: 4px; }
.sd-skill .sd-ct { min-width: 0; overflow-wrap: anywhere; }

.sx-confirm .sx-fire-question { display: block; width: auto; height: auto; margin: 0; padding: 4px 0; background: none; font-size: 15px; text-align: center; color: var(--ink); }

/* A round for the entire shift, independent of roster filters. */
.sx-team-tea { flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:8px; border:2px solid var(--ink); border-radius:4px; background:var(--paper-2); box-shadow:var(--shadow-sm); }
.sx-team-tea > div { min-width:0; }
.sx-team-tea b { font:800 14px/1.2 var(--display); }
.sx-team-tea p { margin:4px 0 0; font-size:12px; overflow-wrap:anywhere; }
.sx-team-tea small { display:block; margin-top:4px; font-size:11px; color:var(--ink-2); }
.sx-team-tea .btn { align-self:center; min-height:44px; margin:0; padding:8px; font-size:12px; }
.sx-team-tea .sx-team-tea-status { grid-column:1/-1; margin:0; color:var(--ink-2); }

@media(max-height:500px) { #panel[data-panel="staff"] .sx-list-view:not(.sx-bulk-view) { height:auto; } #panel[data-panel="staff"] .sx-list-view:not(.sx-bulk-view) > .sx-list { flex:none; overflow:visible; } }

@media(max-height:500px) {
  .sx-list-view:not(.sx-bulk-view) > .sd-tiles { display:none; }
  .sx-list-view > .sx-team-tea { order:1; }
  .sx-list-view > .sx-pages { order:2; }
}

/* Giải thích hiệu suất chỉ mở khi người chơi cần xem. */
.modal.sd-modal.sd-has-help > .sd-help-btn { right:62px; font:800 22px/1 var(--display); }
.sd-has-help .sd-shell > .sd-head { padding-right:96px; }
.sd-performance-help { padding-top:4px; }
.sd-performance-help h2 { padding-right:48px; margin:0 0 8px; font:800 22px/1.2 var(--display); }
.sd-performance-help > .sd-note { text-align:left; line-height:1.6; }
.sd-performance-help .sd-cta { margin-top:16px; }
.sd-help-btn:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }