html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

/* Full-bleed pages (add class pg-bleed to outer div to opt in) */
.content:has(.pg-bleed) {
    padding-top: 0 !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===== Quill rich text editor — CDHA overrides ===== */
.cdha-rte + .cdha-rte,
.cdha-field .ql-toolbar.ql-snow {
    border-color: #cbd5e1;
    border-radius: 4px 4px 0 0;
    background: #f8fafc;
    padding: 4px 6px;
}
.cdha-field .ql-toolbar.ql-snow .ql-formats { margin-right: 6px; }
.cdha-field .ql-container.ql-snow {
    border-color: #cbd5e1;
    border-radius: 0 0 4px 4px;
    font-size: 0.9rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 110px;
}
.cdha-field .ql-container.ql-snow:focus-within {
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8,145,178,0.12);
}
.cdha-field .ql-editor {
    min-height: 100px;
    padding: 8px 10px;
    line-height: 1.55;
}
.cdha-field .ql-editor.ql-blank::before { color: #94a3b8; font-style: normal; }
.cdha-rte-sm.ql-container.ql-snow { min-height: 58px; }
.cdha-rte-sm .ql-editor { min-height: 48px; }
.cdha-field .ql-container.ql-snow.ql-disabled {
    background: #f8fafc;
    border-radius: 4px;
}
.cdha-field .ql-container.ql-snow.ql-disabled .ql-editor { color: #64748b; }

/* ===== Reconnect Modal ===== */
@keyframes rcn-spin {
    to { transform: rotate(360deg); }
}

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.rcn-box {
    background: white;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.rcn-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(29, 78, 216, 0.2);
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: rcn-spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

.rcn-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.rcn-title {
    font-weight: 600;
    font-size: 1rem;
    color: #1e3a5f;
    margin-bottom: 0.35rem;
}

.rcn-sub {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}

.rcn-btn {
    background: #1d4ed8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}

.rcn-btn:hover { background: #1e40af; }

.rcn-show, .rcn-failed, .rcn-rejected { display: none; }
#components-reconnect-modal.components-reconnect-show .rcn-show { display: block; }
#components-reconnect-modal.components-reconnect-failed .rcn-failed { display: block; }
#components-reconnect-modal.components-reconnect-rejected .rcn-rejected { display: block; }

/* Translate error boundary */
.blazor-error-boundary::after {
    content: "Đã xảy ra lỗi." !important;
}

/* ── Compact flatpickr calendar ─────────────────────────────────────── */
.flatpickr-calendar {
    font-size: 12px;
    width: 252px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.flatpickr-months .flatpickr-month {
    height: 32px;
}
.flatpickr-current-month {
    font-size: 13px;
    padding-top: 6px;
}
.flatpickr-current-month .numInputWrapper {
    width: 56px;
}
.flatpickr-weekdays {
    height: 26px;
}
.flatpickr-weekday {
    height: 26px;
    line-height: 26px;
    font-size: 11px;
}
.flatpickr-days .dayContainer {
    min-width: 252px;
    max-width: 252px;
    width: 252px;
}
.flatpickr-day {
    max-width: 34px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
}
.flatpickr-time {
    height: 36px;
}
.flatpickr-time input {
    font-size: 13px;
}

/* "Hôm nay" button inside calendar */
.fp-today-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 4px 8px 6px;
    padding: 4px 0;
    background: #0891b2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.fp-today-btn:hover {
    background: #0e7490;
}

/* ═══ Cài đặt shared (cd-) ════════════════════════════════════════════════ */
.cd-page { display:flex; flex-direction:column; height:calc(100vh - var(--content-offset,2.5rem)); overflow:hidden; background:#f0f4ff; font-size:.82rem; }
.cd-hd { display:flex; align-items:center; gap:.4rem; height:2rem; padding:0 .875rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#4b5563; background:#f0f9ff; border-bottom:1px solid #e0f2fe; flex-shrink:0; }
.cd-hd strong { color:#111827; font-size:.75rem; font-weight:700; }
.cd-toolbar { display:flex; align-items:center; gap:.35rem; min-height:2.2rem; padding:0 .6rem; background:#fff; border-bottom:1px solid #e5e7eb; flex-shrink:0; flex-wrap:wrap; }
.cd-sep { width:1px; height:1.2rem; background:#e5e7eb; margin:0 .1rem; flex-shrink:0; }
.cd-btn { display:inline-flex; align-items:center; gap:.25rem; padding:0 .5rem; height:1.6rem; border:1px solid transparent; border-radius:5px; font-size:.75rem; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; transition:filter .12s; }
.cd-btn:disabled { opacity:.45; cursor:not-allowed; }
.cd-btn:not(:disabled):hover { filter:brightness(.9); }
.cd-btn-primary { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.cd-btn-save { background:#16a34a; color:#fff; border-color:#16a34a; }
.cd-btn-cancel { background:#f3f4f6; color:#374151; border-color:#d1d5db; }
.cd-btn-warn { background:#dc2626; color:#fff; border-color:#dc2626; }
.cd-btn-info { background:#0891b2; color:#fff; border-color:#0891b2; }
.cd-msg-ok  { font-size:.78rem; background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; border-radius:4px; padding:.1rem .55rem; white-space:nowrap; }
.cd-msg-err { font-size:.78rem; background:#fef2f2; color:#dc2626; border:1px solid #fecaca; border-radius:4px; padding:.1rem .55rem; white-space:nowrap; }
.cd-body { flex:1; overflow-y:auto; padding:1.25rem; scrollbar-width:thin; scrollbar-color:#bae6fd transparent; }
.cd-card { background:#fff; border:1px solid #e5e7eb; border-radius:9px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.cd-card-title { padding:.58rem 1rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#4b5563; background:#f0f9ff; border-bottom:1px solid #e0f2fe; }
.cd-card-body { padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.cd-field { display:flex; flex-direction:column; gap:.22rem; }
.cd-lbl { font-size:.77rem; font-weight:500; color:#374151; }
.cd-inp { padding:.38rem .6rem; border:1px solid #d1d5db; border-radius:5px; font-size:.84rem; color:#111827; outline:none; width:100%; box-sizing:border-box; font-family:inherit; background:#fff; transition:border-color .15s,box-shadow .15s; }
.cd-inp:focus { border-color:#7dd3fc; box-shadow:0 0 0 2px rgba(8,145,178,.12); }
.cd-inp:disabled { background:#f9fafb; color:#374151; cursor:default; }
.cd-sel { padding:.38rem .6rem; border:1px solid #d1d5db; border-radius:5px; font-size:.84rem; color:#111827; outline:none; width:100%; box-sizing:border-box; font-family:inherit; background:#fff; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.cd-sel:focus { border-color:#7dd3fc; box-shadow:0 0 0 2px rgba(8,145,178,.12); }
.cd-sel:disabled { background:#f9fafb; color:#374151; cursor:default; }
.cd-chk-lbl { display:flex; align-items:center; gap:.45rem; font-size:.84rem; color:#374151; cursor:pointer; user-select:none; }
.cd-chk-lbl input[type=checkbox] { width:15px; height:15px; accent-color:#0891b2; cursor:pointer; }
.cd-radio-grp { display:flex; gap:1rem; flex-wrap:wrap; }
.cd-radio-lbl { display:flex; align-items:center; gap:.4rem; font-size:.84rem; color:#374151; cursor:pointer; }
.cd-radio-lbl input[type=radio] { accent-color:#0891b2; }
.cd-textarea { padding:.5rem .65rem; border:1px solid #d1d5db; border-radius:5px; font-size:.82rem; color:#111827; outline:none; width:100%; box-sizing:border-box; font-family:inherit; resize:vertical; background:#fff; transition:border-color .15s,box-shadow .15s; }
.cd-textarea:focus { border-color:#7dd3fc; box-shadow:0 0 0 2px rgba(8,145,178,.12); }
.cd-log { background:#0f172a; color:#86efac; font-family:'Consolas',monospace; font-size:.78rem; padding:.65rem .85rem; border-radius:6px; white-space:pre-wrap; word-break:break-all; overflow-y:auto; line-height:1.5; }
.cd-log-err { color:#fca5a5; }
.cd-row-inline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.cd-num-inp { padding:.32rem .5rem; border:1px solid #d1d5db; border-radius:5px; font-size:.84rem; color:#111827; outline:none; font-family:inherit; background:#fff; width:70px; text-align:center; }
.cd-num-inp:focus { border-color:#7dd3fc; box-shadow:0 0 0 2px rgba(8,145,178,.12); }
.cd-empty { display:flex; align-items:center; justify-content:center; padding:2rem; color:#9ca3af; font-size:.88rem; }
.cd-spin { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:cd-rot .7s linear infinite; }
@keyframes cd-rot { to { transform:rotate(360deg); } }
.cd-sql-layout { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.cd-sql-editor-wrap { height:180px; flex-shrink:0; border-bottom:3px solid #e0f2fe; background:#fffef5; }
.cd-sql-editor { width:100%; height:100%; box-sizing:border-box; border:none; padding:.65rem .85rem; font-family:'Consolas',monospace; font-size:.84rem; color:#111827; outline:none; resize:none; background:transparent; }
.cd-sql-result { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cd-sql-info-bar { display:flex; gap:1rem; padding:.3rem .85rem; background:#f8faff; border-bottom:1px solid #e5e7eb; font-size:.76rem; flex-shrink:0; min-height:1.8rem; align-items:center; }
.cd-sql-info-item { padding:.1rem .5rem; background:#eff6ff; border-radius:4px; color:#1d4ed8; font-weight:600; }
.cd-tbl-wrap { flex:1; overflow:auto; scrollbar-width:thin; scrollbar-color:#c7d2fe transparent; }
.cd-tbl { border-collapse:collapse; width:max-content; min-width:100%; font-size:.8rem; }
.cd-tbl thead tr { background:#1e3a8a; color:#fff; position:sticky; top:0; z-index:10; }
.cd-tbl th { padding:.45rem .65rem; font-weight:600; font-size:.74rem; text-align:left; white-space:nowrap; border-right:1px solid rgba(255,255,255,.12); }
.cd-tbl th:last-child { border-right:none; }
.cd-tbl td { padding:.35rem .65rem; border-bottom:1px solid #f0f0f8; color:#111827; vertical-align:middle; white-space:nowrap; }
.cd-tbl tbody tr:hover td { background:#eff6ff !important; }
.cd-tbl-even td { background:#f7f9ff; }
.cd-th-stt { width:42px; text-align:right !important; color:#9ca3af; font-size:.72rem; }
.cd-nk-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cd-nk-tbl-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cd-nk-detail-area { height:180px; flex-shrink:0; border-top:1px solid #e5e7eb; display:flex; overflow:hidden; }
.cd-nk-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid #e5e7eb; }
.cd-nk-panel:last-child { border-right:none; }
.cd-nk-panel-hd { padding:.3rem .75rem; font-size:.72rem; font-weight:700; color:#4b5563; background:#f8faff; border-bottom:1px solid #e5e7eb; flex-shrink:0; }
.cd-nk-panel-body { flex:1; overflow-y:auto; padding:.5rem .75rem; font-family:'Consolas',monospace; font-size:.76rem; color:#111827; white-space:pre-wrap; word-break:break-word; }
.cd-chk-list { border:1px solid #e5e7eb; border-radius:6px; overflow-y:auto; max-height:220px; background:#fff; }
.cd-chk-list-item { display:flex; align-items:center; gap:.4rem; padding:.3rem .65rem; border-bottom:1px solid #f3f4f6; font-size:.8rem; color:#374151; cursor:pointer; user-select:none; }
.cd-chk-list-item:last-child { border-bottom:none; }
.cd-chk-list-item:hover { background:#f0f9ff; }
.cd-chk-list-item input[type=checkbox] { accent-color:#0891b2; width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.cd-file-row { display:flex; gap:.5rem; align-items:center; }
.cd-cards-row { display:flex; gap:1rem; flex-wrap:wrap; }
.nk-row-sel td { background:#bae6fd !important; }
.nk-badge-them { background:#dcfce7; color:#166534; font-size:.72rem; padding:.1rem .4rem; border-radius:4px; font-weight:600; }
.nk-badge-sua  { background:#fef9c3; color:#854d0e; font-size:.72rem; padding:.1rem .4rem; border-radius:4px; font-weight:600; }
.nk-badge-xoa  { background:#fef2f2; color:#dc2626; font-size:.72rem; padding:.1rem .4rem; border-radius:4px; font-weight:600; }