/* Roboto — tự phục vụ từ node_modules (không Google Fonts), có bộ ký tự tiếng Việt */
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 400; src: url(vendor/fonts/roboto-vietnamese-400-normal.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 500; src: url(vendor/fonts/roboto-vietnamese-500-normal.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 700; src: url(vendor/fonts/roboto-vietnamese-700-normal.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 400; src: url(vendor/fonts/roboto-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 500; src: url(vendor/fonts/roboto-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 700; src: url(vendor/fonts/roboto-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: .925rem;
    --bs-body-color: #1f2937;
    --bs-border-radius: .5rem;
    --app-bg: #f5f7fb;
}
body { background: var(--app-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h4, .h5, .navbar-brand { font-weight: 500; letter-spacing: -.01em; }
.small-mono, .num { font-variant-numeric: tabular-nums; }
.btn { font-weight: 500; }
.form-control, .form-select { border-color: #dde3ec; }
.table { --bs-table-color: #1f2937; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; }

.topbar { position: sticky; top: 0; z-index: 10; }
.company-select { max-width: 360px; min-width: 200px; }
.layout { display: flex; min-height: calc(100vh - 56px); }
.sidenav { width: 220px; flex-shrink: 0; background: #fff; border-right: 1px solid #e3e7ee; padding: 12px 0; }
.sidenav a { display: block; padding: 8px 18px; color: #344054; text-decoration: none; font-size: .92rem; }
.sidenav a:hover { background: #f0f4ff; }
.sidenav a.active { background: #e7efff; color: #0d6efd; font-weight: 600; border-right: 3px solid #0d6efd; }
.sidenav a i { width: 22px; display: inline-block; }
.nav-section { padding: 14px 18px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; }
.page { flex-grow: 1; padding: 20px; min-width: 0; }
body:not(.is-admin) .admin-only { display: none !important; }
body.role-viewer .need-editor { display: none !important; }

@media (max-width: 860px) {
    .layout { flex-direction: column; }
    .sidenav { width: auto; display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid #e3e7ee; }
    .sidenav a { white-space: nowrap; padding: 10px 12px; }
    .sidenav a.active { border-right: 0; border-bottom: 3px solid #0d6efd; }
    .nav-section { display: none; }
    .page { padding: 12px; }
}

.kpi { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #e3e7ee; height: 100%; }
.kpi .label { font-size: .8rem; color: #667085; }
.kpi .value { font-size: 1.35rem; font-weight: 700; }
.panel { background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.panel h2 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-sm td, .table-sm th { vertical-align: middle; }
.table thead th { background: #f8fafc; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tbl-scroll { overflow-x: auto; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f5f8ff; }
tr.muted td { color: #98a2b3; }
.bar-track { background: #eef2f7; border-radius: 4px; height: 8px; min-width: 60px; }
.bar { height: 8px; border-radius: 4px; background: #0d6efd; width: 0; }
.bar.out { background: #f79009; }
.small-mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }

.app-dialog { border: 0; border-radius: 12px; padding: 0; width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.app-dialog.narrow { width: min(520px, calc(100vw - 24px)); }
.app-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e3e7ee; position: sticky; top: 0; background: #fff; z-index: 1; }
.dlg-head h3 { font-size: 1.05rem; margin: 0; }
.dlg-content { padding: 16px 18px; }
.dlg-foot { padding: 12px 18px; border-top: 1px solid #e3e7ee; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; }

.dropzone { border: 2px dashed #b2c3e8; border-radius: 12px; padding: 36px 16px; text-align: center; background: #fbfcff; cursor: pointer; }
.dropzone.over { background: #e7efff; border-color: #0d6efd; }
.captcha-img { background: #fff; border: 1px solid #d0d5dd; border-radius: 6px; height: 56px; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast-msg { background: #1d2939; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 420px; }
.toast-msg.err { background: #b42318; }
.toast-msg.ok { background: #067647; }

/* Chọn kỳ dạng lịch */
.period-picker { position: relative; }
.period-btn { min-width: 150px; text-align: left; display: flex; align-items: center; gap: 6px; }
.period-btn .bi-chevron-down { margin-left: auto; }
.period-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050; width: 292px; background: #fff; color: #1f2937;
    border-radius: 12px; box-shadow: 0 12px 40px rgba(16, 24, 40, .22); padding: 12px; }
.period-pop .seg { display: flex; background: #f1f4f9; border-radius: 8px; padding: 3px; margin-bottom: 10px; }
.period-pop .seg button { flex: 1; border: 0; background: transparent; padding: 5px 0; border-radius: 6px; font-weight: 500; color: #475467; }
.period-pop .seg button.on { background: #fff; color: #0d6efd; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.period-pop .yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.period-pop .yr button { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 8px; }
.period-pop .yr button:hover:not(:disabled) { background: #f1f4f9; }
.period-pop .yr button:disabled { opacity: .3; }
.period-pop .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.period-pop .grid.q { grid-template-columns: repeat(2, 1fr); }
.period-pop .cell { border: 1px solid transparent; background: #fff; border-radius: 8px; padding: 9px 0; font-weight: 500; color: #1f2937; }
.period-pop .grid.q .cell { padding: 14px 0; }
.period-pop .cell:hover:not(:disabled) { background: #eef4ff; }
.period-pop .cell.now { border-color: #b2c3e8; }
.period-pop .cell.on { background: #0d6efd; color: #fff; }
.period-pop .cell:disabled { color: #c0c6d0; }
.period-pop .cell small { display: block; font-size: .68rem; font-weight: 400; opacity: .75; }
.period-pop .foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: .8rem; }
.period-pop .foot button { border: 0; background: transparent; color: #0d6efd; padding: 2px 4px; }

.check-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f5; }
.check-item:last-child { border-bottom: 0; }
.check-item .bi { font-size: 1.1rem; margin-top: 1px; }
.copy-btn { border: 0; background: transparent; color: #98a2b3; padding: 0 0 0 6px; }
.copy-btn:hover { color: #0d6efd; }
.deadline { font-weight: 600; }

.print-title { display: none; }
@media print {
    .no-print, .sidenav, .topbar, .btn, .filters { display: none !important; }
    body { background: #fff; }
    .page { padding: 0; }
    .panel { border: 0; padding: 0; }
    .print-title { display: block; }
    .table { font-size: 10px; }
}