/* SCT CRM — giao diện phòng khám (sáng, nhấn teal/xanh lá). CSP: không style inline. */

:root {
  /* Màu */
  --c-bg: #f4f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafb;
  --c-border: #dce3e8;
  --c-border-strong: #c3ced6;
  --c-text: #17242b;
  --c-text-soft: #5b6b75;
  --c-text-faint: #8695a0;
  --c-primary: #0f8f76;
  --c-primary-dark: #0b705d;
  --c-primary-soft: #e3f4ef;
  --c-accent: #2f9e6f;
  --c-danger: #c0392b;
  --c-danger-soft: #fbecea;
  --c-warn: #b8791a;
  --c-warn-soft: #fbf1df;
  --c-info: #2a6fb0;
  --c-focus: #1aa98a;

  /* Trạng thái */
  --s-booked: #2a6fb0;      --s-booked-bg: #e7f0f9;
  --s-confirmed: #0b806a;   --s-confirmed-bg: #e0f3ee;
  --s-arrived: #227a3b;     --s-arrived-bg: #e4f3e8;
  --s-no_show: #b8791a;     --s-no_show-bg: #fbf1df;
  --s-cancelled: #8a949b;   --s-cancelled-bg: #eef1f3;
  --s-waiting: #b8791a;     --s-waiting-bg: #fbf1df;
  --s-in_consult: #2a6fb0;  --s-in_consult-bg: #e7f0f9;
  --s-done: #227a3b;        --s-done-bg: #e4f3e8;
  --s-left: #8a949b;        --s-left-bg: #eef1f3;
  --s-unknown: #8a949b;     --s-unknown-bg: #eef1f3;
  /* Chữ đậm trên nền trạng thái (tương phản cao; có biến thể tối bên dưới) */
  --s-green-strong: #1f6b34;
  --s-amber-strong: #7a4d06;

  /* Hình khối */
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(23, 36, 43, .06), 0 1px 3px rgba(23, 36, 43, .08);
  --shadow-2: 0 8px 28px rgba(23, 36, 43, .16);
  --topbar-h: 58px;
  --sidebar-w: 236px;
  --bottomnav-h: 54px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Màu theo vai trò (hành trình khách qua các bàn) */
  --r-letan: #2a6fb0;     --r-letan-bg: #e7f0f9;
  --r-tlbs: #0f8f76;      --r-tlbs-bg: #e3f4ef;
  --r-bacsi: #5b6b75;     --r-bacsi-bg: #eef1f3;
  --r-thungan: #b8791a;   --r-thungan-bg: #fbf1df;
  --r-dieuduong: #6b4fb3; --r-dieuduong-bg: #efeafa;
  --r-none: #8a949b;      --r-none-bg: #eef1f3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #10171b;
    --c-surface: #182127;
    --c-surface-2: #1e2930;
    --c-border: #2a3640;
    --c-border-strong: #3a4954;
    --c-text: #e6edf1;
    --c-text-soft: #a7b4bd;
    --c-text-faint: #7d8c96;
    --c-primary: #28b394;
    --c-accent: #46c08a;
    --c-primary-dark: #1f9e82;
    --c-primary-soft: #16302a;
    --c-danger-soft: #3a211e;
    --c-warn-soft: #352a16;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);

    /* Trạng thái (dark): nền tối, chữ sáng — tương phản ≥ 4.5:1 */
    --s-booked: #6ba8de;      --s-booked-bg: #1a2a38;
    --s-confirmed: #39c2a3;   --s-confirmed-bg: #15302a;
    --s-arrived: #5fc07e;     --s-arrived-bg: #18301f;
    --s-no_show: #d79b3e;     --s-no_show-bg: #352a16;
    --s-cancelled: #9fb0ba;   --s-cancelled-bg: #232d34;
    --s-waiting: #d79b3e;     --s-waiting-bg: #352a16;
    --s-in_consult: #6ba8de;  --s-in_consult-bg: #1a2a38;
    --s-done: #5fc07e;        --s-done-bg: #18301f;
    --s-left: #9fb0ba;        --s-left-bg: #232d34;
    --s-unknown: #9fb0ba;     --s-unknown-bg: #232d34;
    --s-green-strong: #6fcf8e;
    --s-amber-strong: #e0a94e;

    --r-letan: #6ba8de;     --r-letan-bg: #1a2a38;
    --r-tlbs: #39c2a3;      --r-tlbs-bg: #15302a;
    --r-bacsi: #9fb0ba;     --r-bacsi-bg: #232d34;
    --r-thungan: #d79b3e;   --r-thungan-bg: #352a16;
    --r-dieuduong: #a890e0; --r-dieuduong-bg: #241d38;
    --r-none: #9fb0ba;      --r-none-bg: #232d34;
  }
}
:root[data-theme="dark"] {
  --c-bg: #10171b; --c-surface: #182127; --c-surface-2: #1e2930;
  --c-border: #2a3640; --c-border-strong: #3a4954; --c-text: #e6edf1;
  --c-text-soft: #a7b4bd; --c-text-faint: #7d8c96; --c-primary: #28b394;
  --c-primary-dark: #1f9e82; --c-primary-soft: #16302a; --c-accent: #46c08a; --c-danger-soft: #3a211e;
  --c-warn-soft: #352a16;
  --s-booked: #6ba8de;      --s-booked-bg: #1a2a38;
  --s-confirmed: #39c2a3;   --s-confirmed-bg: #15302a;
  --s-arrived: #5fc07e;     --s-arrived-bg: #18301f;
  --s-no_show: #d79b3e;     --s-no_show-bg: #352a16;
  --s-cancelled: #9fb0ba;   --s-cancelled-bg: #232d34;
  --s-waiting: #d79b3e;     --s-waiting-bg: #352a16;
  --s-in_consult: #6ba8de;  --s-in_consult-bg: #1a2a38;
  --s-done: #5fc07e;        --s-done-bg: #18301f;
  --s-left: #9fb0ba;        --s-left-bg: #232d34;
  --s-unknown: #9fb0ba;     --s-unknown-bg: #232d34;
  --s-green-strong: #6fcf8e;
  --s-amber-strong: #e0a94e;
  --r-letan: #6ba8de;     --r-letan-bg: #1a2a38;
  --r-tlbs: #39c2a3;      --r-tlbs-bg: #15302a;
  --r-bacsi: #9fb0ba;     --r-bacsi-bg: #232d34;
  --r-thungan: #d79b3e;   --r-thungan-bg: #352a16;
  --r-dieuduong: #a890e0; --r-dieuduong-bg: #241d38;
  --r-none: #9fb0ba;      --r-none-bg: #232d34;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary-dark); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; }

/* Focus rõ ràng, dễ tiếp cận */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sct-boot { padding: 40px; text-align: center; color: var(--c-text-soft); }

/* ===== Shell ===== */
.sct-shell { display: flex; flex-direction: column; min-height: 100vh; }
.sct-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.sct-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-text); font-weight: 700; }
.sct-brand__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 800;
}
.sct-brand__name { font-size: 18px; letter-spacing: .3px; }
.sct-topbar__spacer { flex: 1; }

.sct-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--c-border); border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-text-soft); cursor: pointer;
  font-size: 14px; max-width: 320px;
}
.sct-search-btn:hover { border-color: var(--c-border-strong); }
.sct-search-btn__label { white-space: nowrap; }
.sct-kbd, .sct-kbd {
  font: 11px/1 var(--font); padding: 3px 6px; border-radius: 5px;
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-faint);
}

.sct-user { display: flex; align-items: center; gap: 12px; }
.sct-user__info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.sct-user__name { font-weight: 600; font-size: 14px; }
.sct-user__role { font-size: 12px; color: var(--c-text-faint); }

.sct-body { flex: 1; display: flex; align-items: stretch; }
.sct-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--c-surface); border-right: 1px solid var(--c-border);
  padding: 14px 10px; overflow-y: auto;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
}
.sct-main { flex: 1; min-width: 0; padding: 22px clamp(16px, 3vw, 32px); }
.sct-main:focus { outline: none; }

/* Khách chưa đăng nhập: ẩn khung điều hướng */
body.is-guest .sct-topbar,
body.is-guest .sct-sidebar { display: none; }
body.is-guest .sct-main { padding: 0; }

.sct-menu-toggle {
  display: none; border: 1px solid var(--c-border); background: var(--c-surface-2);
  border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; color: var(--c-text);
}

/* ===== Nav ===== */
.sct-nav__group { margin-bottom: 16px; }
.sct-nav__group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-text-faint); padding: 4px 10px; font-weight: 700;
}
.sct-nav__links { display: flex; flex-direction: column; gap: 2px; }
.sct-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; text-decoration: none;
  color: var(--c-text-soft); font-weight: 500; font-size: 14px;
}
.sct-nav__link:hover { background: var(--c-surface-2); color: var(--c-text); }
.sct-nav__link.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 700; }
.sct-nav__icon { width: 20px; text-align: center; }

/* ===== Panel / state ===== */
.sct-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-1);
  margin-bottom: 18px;
}
.sct-panel__title { font-size: 16px; }
.sct-state { padding: 28px; text-align: center; color: var(--c-text-soft); }
.sct-state__title { font-size: 18px; color: var(--c-text); }
.sct-state__detail { margin: 4px 0; }
.sct-state__hint { font-size: 12px; color: var(--c-text-faint); }
.sct-state--empty { color: var(--c-text-faint); }

/* ===== Buttons ===== */
.sct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  font: 600 14px/1 var(--font); cursor: pointer; background: var(--c-surface-2); color: var(--c-text);
}
.sct-btn:disabled { opacity: .6; cursor: not-allowed; }
.sct-btn--primary { background: var(--c-primary); color: #fff; }
.sct-btn--primary:hover:not(:disabled) { background: var(--c-primary-dark); }
/* Thứ cấp = viền (outlined) — rõ ràng là nút bấm được, KHÔNG giống trạng thái vô hiệu.
   Chữ + viền dùng --c-primary (đủ tương phản trên nền sáng/tối). */
.sct-btn--secondary { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.sct-btn--secondary:hover:not(:disabled) { background: var(--c-primary-soft); }
.sct-btn--ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.sct-btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); }
.sct-btn--danger { background: var(--c-danger); color: #fff; }
.sct-btn--danger:hover:not(:disabled) { filter: brightness(.95); }

/* ===== Forms ===== */
.sct-field { margin-bottom: 14px; }
.sct-field__label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; color: var(--c-text); }
.sct-req { color: var(--c-danger); }
.sct-input {
  width: 100%; padding: 9px 12px; font: 15px/1.4 var(--font);
  border: 1px solid var(--c-border-strong); border-radius: 8px;
  background: var(--c-surface); color: var(--c-text);
}
/* iOS: input ngày/giờ/tháng có min-width nội tại khá lớn → tràn khi đặt trong flex/grid.
   Ép co lại để vừa ô chứa; chừa chỗ cho nút lịch gốc của trình duyệt. */
input[type="date"].sct-input, input[type="month"].sct-input,
input[type="time"].sct-input, input[type="datetime-local"].sct-input {
  min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none;
}
.sct-input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.sct-input:focus { border-color: var(--c-primary); }
.sct-textarea { resize: vertical; min-height: 64px; }
.sct-select { appearance: none; background-image: none; cursor: pointer; }
.sct-field--error .sct-input { border-color: var(--c-danger); }
.sct-field__hint { font-size: 12px; color: var(--c-text-faint); margin-top: 4px; }
.sct-field__error { font-size: 13px; color: var(--c-danger); margin-top: 5px; }

/* ===== Badge / tag ===== */
.sct-badge, .sct-tag {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sct-badge { color: var(--s-unknown); background: var(--s-unknown-bg); }
.sct-badge--booked { color: var(--s-booked); background: var(--s-booked-bg); }
.sct-badge--confirmed { color: var(--s-confirmed); background: var(--s-confirmed-bg); }
.sct-badge--arrived { color: var(--s-arrived); background: var(--s-arrived-bg); }
.sct-badge--no_show { color: var(--s-no_show); background: var(--s-no_show-bg); }
.sct-badge--cancelled { color: var(--s-cancelled); background: var(--s-cancelled-bg); }
.sct-badge--waiting { color: var(--s-waiting); background: var(--s-waiting-bg); }
.sct-badge--in_consult { color: var(--s-in_consult); background: var(--s-in_consult-bg); }
.sct-badge--done { color: var(--s-done); background: var(--s-done-bg); }
.sct-badge--left { color: var(--s-left); background: var(--s-left-bg); }
.sct-tag--neutral { color: var(--c-text-soft); background: var(--c-surface-2); }
.sct-tag--info { color: var(--c-info); background: var(--s-booked-bg); }
.sct-tag--warn { color: var(--c-warn); background: var(--c-warn-soft); }
.sct-tag--success { color: var(--s-done); background: var(--s-done-bg); }
.sct-tag--danger { color: var(--c-danger); background: var(--c-danger-soft); }

/* ===== Table ===== */
.sct-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.sct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sct-table th, .sct-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.sct-table thead th { background: var(--c-surface-2); color: var(--c-text-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; }
.sct-table tbody tr:last-child td { border-bottom: none; }
.sct-th--sortable { cursor: pointer; user-select: none; }
.sct-th--sortable:hover { color: var(--c-text); }
.sct-th--right, .sct-td--right { text-align: right; }
.sct-th--center, .sct-td--center { text-align: center; }
.sct-tr--click { cursor: pointer; }
.sct-tr--click:hover td { background: var(--c-primary-soft); }

/* ===== Loading / skeleton ===== */
.sct-loading { display: flex; align-items: center; gap: 10px; color: var(--c-text-soft); padding: 20px; justify-content: center; }
.sct-spinner { width: 18px; height: 18px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-primary); border-radius: 50%; animation: sct-spin .7s linear infinite; }
@keyframes sct-spin { to { transform: rotate(360deg); } }
.sct-skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--c-surface-2), var(--c-border), var(--c-surface-2)); background-size: 200% 100%; animation: sct-shimmer 1.2s infinite; }
@keyframes sct-shimmer { to { background-position: -200% 0; } }

/* ===== Toast ===== */
.sct-toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.sct-toast { padding: 11px 15px; border-radius: 9px; background: var(--c-text); color: #fff; box-shadow: var(--shadow-2); cursor: pointer; font-size: 14px; animation: sct-toast-in .2s ease; }
.sct-toast--success { background: var(--c-primary-dark); }
.sct-toast--error { background: var(--c-danger); }
.sct-toast--warn { background: var(--c-warn); }
.sct-toast--info { background: var(--c-info); }
.sct-toast--out { opacity: 0; transform: translateY(8px); transition: .2s; }
@keyframes sct-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ===== Modal ===== */
.sct-modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15, 25, 30, .48); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.sct-modal { background: var(--c-surface); color: var(--c-text); border-radius: var(--radius); box-shadow: var(--shadow-2); width: 100%; max-width: 480px; animation: sct-modal-in .18s ease; }
@keyframes sct-modal-in { from { opacity: 0; transform: translateY(-8px); } }
.sct-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
.sct-modal__title { font-size: 17px; margin: 0; }
.sct-modal__close { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--c-text-faint); line-height: 1; padding: 4px; }
.sct-modal__body { padding: 20px; }
.sct-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--c-border); }
.sct-confirm__msg { margin: 0; }

/* ===== Quick search ===== */
.sct-quick { display: flex; flex-direction: column; gap: 12px; }
.sct-quick__results { min-height: 80px; }
.sct-quick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sct-quick__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sct-quick__item:hover, .sct-quick__item:focus { background: var(--c-primary-soft); outline: none; }
.sct-quick__name { font-weight: 600; }
.sct-quick__meta { display: flex; gap: 10px; color: var(--c-text-faint); font-size: 13px; }
.sct-quick__code { font-variant-numeric: tabular-nums; }

/* ===== Login ===== */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--c-primary-soft), var(--c-bg)); }
.login-card { width: 100%; max-width: 380px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--shadow-2); padding: 30px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.login-title { font-size: 20px; margin: 0; }
.login-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--c-text-faint); }
.login-submit { width: 100%; margin-top: 6px; }
.login-error { background: var(--c-danger-soft); color: var(--c-danger); padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
.login-foot { margin: 18px 0 0; font-size: 12px; color: var(--c-text-faint); text-align: center; }

/* ===== Account ===== */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.account-force { background: var(--c-warn-soft); color: var(--c-warn); border: 1px solid var(--c-warn); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-weight: 600; }
.account-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.account-info dt { color: var(--c-text-faint); font-size: 13px; }
.account-info dd { margin: 0; font-weight: 600; }
.account-connector__explain { font-size: 13px; color: var(--c-text-soft); }
.account-token { margin-top: 14px; }
.account-token__row { display: flex; gap: 8px; }
.account-token__warn { font-size: 12px; color: var(--c-warn); margin: 8px 0 0; }
.account-install { display: flex; flex-direction: column; gap: 10px; }
.account-install__ok { color: var(--c-primary-dark); font-weight: 600; margin: 0; }
.account-install__steps { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--c-text-soft); display: flex; flex-direction: column; gap: 6px; }
.account-install__steps b { color: var(--c-text); }

/* ===== Chấm màu vai trò ===== */
.sct-role-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; background: var(--r-none);
}
.sct-role-dot--letan { background: var(--r-letan); }
.sct-role-dot--tlbs { background: var(--r-tlbs); }
.sct-role-dot--bacsi { background: var(--r-bacsi); }
.sct-role-dot--thungan { background: var(--r-thungan); }
.sct-role-dot--dieuduong { background: var(--r-dieuduong); }
.sct-role-dot--admin, .sct-role-dot--quanly, .sct-role-dot--telesale, .sct-role-dot--none { background: var(--r-none); }

/* ===== Huy hiệu bước phiếu khách ===== */
.sct-stage {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--r-none); background: var(--r-none-bg);
}
.sct-stage--reception { color: var(--r-letan); background: var(--r-letan-bg); }
.sct-stage--intake,
.sct-stage--quote,
.sct-stage--handoff { color: var(--r-tlbs); background: var(--r-tlbs-bg); }
.sct-stage--doctor { color: var(--r-bacsi); background: var(--r-bacsi-bg); }
.sct-stage--payment { color: var(--r-thungan); background: var(--r-thungan-bg); }
.sct-stage--nurse_queue,
.sct-stage--treating { color: var(--r-dieuduong); background: var(--r-dieuduong-bg); }
.sct-stage--done { color: var(--s-done); background: var(--s-done-bg); }
.sct-stage--left { color: var(--s-left); background: var(--s-left-bg); }

/* ===== Chuông bảng tin ===== */
.sct-bell-slot { display: inline-flex; }
body.is-guest .sct-bell-slot { display: none; }
.sct-bell { position: relative; }
.sct-bell__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-text); cursor: pointer; font-size: 18px;
}
.sct-bell__btn:hover { border-color: var(--c-border-strong); }
.sct-bell__badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}
.sct-bell__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(360px, calc(100vw - 32px));
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden;
}
.sct-bell__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
}
.sct-bell__title { font-weight: 700; }
.sct-bell__all { font-size: 13px; text-decoration: none; }
.sct-bell__list { max-height: min(60vh, 420px); overflow-y: auto; }
.sct-bell__empty { padding: 24px 16px; text-align: center; color: var(--c-text-faint); }
.sct-bell__item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 16px; border: none; border-bottom: 1px solid var(--c-border);
  background: transparent; color: var(--c-text); cursor: pointer; text-align: left;
}
.sct-bell__item:last-child { border-bottom: none; }
.sct-bell__item:hover { background: var(--c-surface-2); }
.sct-bell__item.is-new { background: var(--c-primary-soft); }
.sct-bell__item .sct-role-dot { margin-top: 6px; }
.sct-bell__item-main { min-width: 0; flex: 1; }
.sct-bell__item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sct-bell__item-kind { font-size: 12px; font-weight: 700; color: var(--c-text-soft); }
.sct-bell__item-time { font-size: 12px; color: var(--c-text-faint); white-space: nowrap; }
.sct-bell__item-msg { font-size: 14px; margin-top: 2px; }
.sct-bell__item-who { font-size: 12px; color: var(--c-text-faint); margin-top: 2px; }

/* ===== Tiện ích responsive dùng chung (điện thoại trước) ===== */
/* Bảng → thẻ: dùng .sct-only-desktop / .sct-only-mobile để đổi hiển thị. */
.sct-only-mobile { display: none; }

/* Danh sách thẻ (ui.cards) */
.sct-cards { display: flex; flex-direction: column; gap: 10px; }
.sct-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-1);
}
.sct-card--click { cursor: pointer; }
.sct-card--click:hover { border-color: var(--c-border-strong); }
.sct-card--click:active { background: var(--c-surface-2); }
.sct-card__title { font-weight: 700; margin-bottom: 6px; }
.sct-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.sct-card__label { color: var(--c-text-faint); flex: 0 0 auto; }
.sct-card__value { text-align: right; min-width: 0; }
/* Hàng nút thao tác trong thẻ (từ cột không nhãn của responsiveTable) */
.sct-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sct-card__acts:empty { display: none; }
.sct-card__acts > .sct-btn { flex: 1 1 auto; min-height: 44px; }

/* Dải cuộn ngang (tab/ bộ lọc) trong khung riêng — không làm trang cuộn ngang. */
.sct-scroll-x {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
  /* Gợi ý còn cuộn: làm mờ nhẹ mép phải (không che nội dung khi không tràn). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.sct-scroll-x::-webkit-scrollbar { display: none; }
.sct-scroll-x > * { flex: 0 0 auto; }

/* Thanh nút hành động (ui.actionBar) */
.sct-actionbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ===== Thanh điều hướng dưới đáy (chỉ điện thoại) ===== */
.sct-bottomnav { display: none; }
.sct-bottomnav__item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  min-height: 54px; padding: 6px 2px; border: 0; background: transparent;
  color: var(--c-text-soft); font: 600 11px/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.sct-bottomnav__item.is-active { color: var(--c-primary-dark); }
.sct-bottomnav__icon { font-size: 20px; line-height: 1; }
.sct-bottomnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sheet "Thêm" */
.sct-moremenu { display: flex; flex-direction: column; gap: 14px; }
.sct-moremenu__title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--c-text-faint); font-weight: 700; margin-bottom: 4px; }
.sct-moremenu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sct-moremenu__link {
  display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 48px;
  border: 1px solid var(--c-border); border-radius: 10px; text-decoration: none;
  color: var(--c-text); font-weight: 600; background: var(--c-surface);
}
.sct-moremenu__link:hover { background: var(--c-surface-2); }
.sct-moremenu__icon { width: 22px; text-align: center; font-size: 18px; }
.sct-moremenu__logout { width: 100%; min-height: 48px; color: var(--c-danger); border-color: var(--c-border-strong); }
.sct-moremenu__logout:hover { background: var(--c-danger-soft); }

/* ===== Responsive ===== */
@media (max-width: 920px) {
  .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sct-only-desktop { display: none !important; }
  .sct-only-mobile { display: block; }

  /* Topbar gọn + tôn trọng tai thỏ (standalone iOS: status bar đè lên trang).
     Cộng chiều cao bằng safe-area-inset-top để viền đáy KHÔNG cắt ngang nút. */
  .sct-topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 8px;
  }
  .sct-menu-toggle { display: none; }      /* đã có bottom-nav "Thêm" */
  .sct-search-btn__label, .sct-kbd { display: none; }
  /* Vùng chạm ≥44px cho tìm + chuông; ẩn nút "Đăng xuất" to (đưa vào sheet "Thêm"). */
  .sct-search-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 10px; }
  .sct-bell__btn { width: 44px; height: 44px; }
  .sct-logout { display: none; }
  .sct-user { gap: 0; }
  /* Panel: giảm đệm để nội dung dùng hết bề ngang (gutter 16px của main là đủ). */
  .sct-panel { padding: 14px; margin-bottom: 14px; }
  .sct-sidebar {
    position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top)); left: 0; bottom: 0; z-index: 25;
    transform: translateX(-100%); transition: transform .2s ease; height: auto;
    box-shadow: var(--shadow-2);
  }
  body.sct-nav-open .sct-sidebar { transform: translateX(0); }
  .sct-user__info { display: none; }
  .sct-main { padding: 16px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* Ô nhập ≥16px để iOS không tự phóng to */
  .sct-input, .sct-select, .sct-textarea { font-size: 16px; }

  /* Bottom nav bật lên */
  .sct-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.is-guest .sct-bottomnav { display: none; }

  /* Toast nổi phía TRÊN bottom-nav (và trên action bar nếu có) để không bị che */
  .sct-toast-host {
    left: 16px; right: 16px; max-width: none;
    bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom));
  }
  body:has(.sct-actionbar) .sct-toast-host {
    bottom: calc(var(--bottomnav-h) + 80px + env(safe-area-inset-bottom));
  }
  body.is-guest .sct-toast-host {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Thanh nút dính đáy, phía trên bottom-nav */
  .sct-actionbar {
    position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: 20;
    margin: 16px -16px 0; padding: 10px 16px;
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 10px rgba(23, 36, 43, .08);
  }
  .sct-actionbar .sct-btn { flex: 1 1 auto; min-height: 48px; }

  /* Vùng chạm ≥44px cho nút/chip/tab thao tác trên điện thoại (WCAG 2.5.5) */
  .today-act, .care-act, .care-tab, .care-chip, .care-subbtn,
  .catalog-mini, .catalog-kind, .report-tab, .report-grouptab,
  .tlbs-act, .visit-chip, .visit-wd__item { min-height: 44px; }
  .visit-med__btn { width: 44px; height: 44px; }

  .sct-moremenu__links { grid-template-columns: 1fr; }

  /* Modal → bottom sheet toàn chiều ngang */
  .sct-modal-overlay { align-items: flex-end; padding: 0; }
  .sct-modal {
    max-width: none; width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh; display: flex; flex-direction: column;
    animation: sct-sheet-in .22s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sct-modal__body { overflow-y: auto; }
  .sct-modal__foot { position: sticky; bottom: 0; background: var(--c-surface); }
  .sct-modal__foot .sct-btn { flex: 1 1 auto; min-height: 48px; }
}
@keyframes sct-sheet-in { from { opacity: 0; transform: translateY(24px); } }

/* ===== Print ===== */
@media print {
  .sct-topbar, .sct-sidebar, .sct-search-btn, .sct-logout, .sct-toast-host, .sct-menu-toggle, .sct-bottomnav, .sct-actionbar { display: none !important; }
  .sct-main { padding: 0; }
  .sct-panel { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}