:root {
  --accent: #2f6fb0;
  --accent-hover: #285f97;
  --accent-soft: #e9f1f9;
  --header-blue: #dce7f2;
  --header-ink: #1c3a57;
  --chrome: #eaebed;
  --chrome-ink: #111111;
  --text: #1f2733;
  --text-soft: #4a5563;
  --muted: #8a94a3;
  --app-bg: #eef1f5;
  --border-2: #d5dae1;
  --field-border: #c8cdd6;
  --warn-text: #9a6400;
  --bar-h: 30px;
  --toolbar-h: 52px;
  --trangthai-h: 40px;
  --sheetbar-h: 35px;
  --side-w: 186px;
  --nep-w: 10px;
  --field-h: 26px;
  --rad: 0;
  --hover: rgba(0, 0, 0, .06);
  --press: rgba(0, 0, 0, .13);
  --fs-menu: 14.5px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 13px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; color: var(--text); background: var(--app-bg); -webkit-font-smoothing: antialiased; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input:focus, textarea:focus, select:focus, button:focus, :focus-visible { outline: none; }

#app { height: 100vh; display: flex; flex-direction: column; }
#app > * { flex-shrink: 0; }
#body { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--side-w) 1fr var(--nep-w); grid-template-rows: 1fr auto; }
#sidebar { grid-area: 1 / 1 / 3 / 2; }
#sheet { grid-area: 1 / 2; }
#sheetbar { grid-area: 2 / 2; }
#vien-phai { grid-area: 1 / 3 / 3 / 4; }

#formulabar, #toolbar, #trang-thai, #sheetbar, .panel-toolbar, .panel-bar { display: flex; align-items: center; }
#formulabar, #toolbar, #sheetbar, .panel-toolbar { background: var(--chrome); }
#formulabar, #toolbar, #trang-thai, .panel-toolbar, .panel-bar { border-bottom: 1px solid var(--border-2); }
#sheetbar { border-top: 1px solid var(--border-2); }
#formulabar { height: var(--bar-h); }

#formulabar { gap: 1px; padding: 0 6px; }
.menuitem { padding: 4px 10px; border-radius: var(--rad); color: #000; font-size: var(--fs-menu); user-select: none; white-space: nowrap; background: none; border: none; font-family: inherit; }
.menuitem:hover { background: var(--accent-soft); color: var(--accent); }
.mb-dd { position: relative; }
.tb-lat input, .tb-so { font: inherit; padding: 2px 4px; border: 1px solid var(--border-2); border-radius: var(--rad); background: #fff; }
.tb-lat { position: relative; flex-shrink: 0; }
.tb-lat .ic, .tb-so { cursor: pointer; }
.mb-lich { position: absolute; top: 0; right: 0; height: 100%; width: 320px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.mb-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mb-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: flex; flex-direction: column; min-width: 130px; padding: 4px; background: #fff; border: 1px solid var(--border-2); border-radius: 0 0 var(--rad) var(--rad); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.mb-mi { text-align: left; padding: 5px 10px; border: none; background: none; border-radius: var(--rad); font-size: var(--fs-menu); font-family: inherit; white-space: nowrap; color: #000; }
.mb-mi:hover { background: var(--accent-soft); color: var(--accent); }
#toolbar, .panel-toolbar { gap: 8px; padding: 11px 13px; flex-wrap: wrap; color: var(--chrome-ink); min-height: var(--toolbar-h); }
.btn { border: 1px solid var(--border-2); background: #fff; padding: 6px 12px; border-radius: var(--rad); color: var(--text); font-size: 13px; font-weight: 500; }
.btn:disabled { opacity: .5; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
#toolbar .btn, #formulabar .btn, .panel-toolbar .btn { background: transparent; border-color: transparent; color: var(--chrome-ink); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ic { width: 1.1em; height: 1.1em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }
#toolbar .btn:hover, #formulabar .btn:hover, .panel-toolbar .btn:hover { background: var(--hover); }
#formulabar .btn { padding: 0 6px; }
#trang-thai, .panel-bar { height: var(--trangthai-h); background: #eef0f3; font-size: 12.5px; }
.fb-ref, .fb-val, .fb-search { display: inline-flex; align-items: center; height: var(--field-h); background: #fff; border: 1px solid var(--field-border); border-radius: var(--rad); color: var(--text); }
.fb-val, .fb-search { font: inherit; }
.fb-val::placeholder, .fb-search::placeholder { color: var(--muted); }
.fb-val:focus, .fb-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-namezone { display: flex; align-items: center; width: var(--side-w); flex-shrink: 0; padding-left: 8px; }
.fb-ref { gap: 4px; width: 110px; flex-shrink: 0; padding: 0 8px; font-weight: 600; }
.fb-ref-txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-eq { color: var(--muted); font-weight: 700; margin: 0 10px; }
.fb-val { flex: 1; padding: 0 10px; }
.fb-search { flex-shrink: 0; width: 210px; margin: 0 8px; padding: 0 10px; font-size: 13px; }
#sidebar { background: var(--chrome); border-right: 1px solid var(--border-2); padding: 14px 10px; overflow-y: auto; }
#sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav { background: transparent; color: var(--chrome-ink); border: 0; padding: 8px 12px; text-align: left; font-size: var(--fs-menu); font-weight: 500; border-radius: var(--rad); }
.nav:hover { background: var(--hover); }
.nav.active { background: var(--accent); color: #fff; font-weight: 600; }
.menuitem.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#sheet { background: #fff; overflow: hidden; min-width: 0; min-height: 0; }
#sheetbar { gap: 2px; padding: 3px 8px 4px; overflow-x: auto; min-height: var(--sheetbar-h); }
.sheettab { flex-shrink: 0; border: 1px solid var(--border-2); border-top: none; background: #f7f8fa; color: var(--text-soft); padding: 4px 16px; border-radius: 0 0 var(--rad) var(--rad); font-size: 13px; white-space: nowrap; }
.sheettab:hover { background: #eef2f7; }
.sheettab.active { background: #fff; color: var(--accent); font-weight: 600; border-color: var(--field-border); }
#vien-phai { background: var(--chrome); border-left: 1px solid var(--border-2); }
@media (max-width: 768px) { #body { grid-template-columns: var(--side-w) 1fr; } #vien-phai { display: none; } }
revo-grid {
  --revo-grid-background: #fff;
  --revo-grid-header-bg: var(--header-blue);
  --revo-grid-header-color: var(--header-ink);
  --revo-grid-header-border: #b7c8da;
  --revo-grid-cell-border: transparent;
  --revo-grid-cell-disabled-bg: transparent;
  --revo-grid-focused-bg: var(--accent-soft);
  --revo-grid-row-hover: #f6f8fb;
  --revo-grid-header-height: 34px;
  background: #fff;
}
#sheet > revo-grid, .panel-sheet > revo-grid { height: 100%; }
#app revo-grid[theme=compact] { font-size: inherit; font-family: var(--grid-font, Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); }
revo-grid[theme=compact] revogr-header { border-bottom: 1px solid #d9dfe8; }
revo-grid[theme=compact] revogr-header .rgHeaderCell { background: var(--revo-grid-header-bg); color: var(--revo-grid-header-color); border-right: 1px solid rgba(28, 58, 87, .18); }
revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell { background: var(--accent-soft); }
revogr-focus.focused-cell { box-shadow: none !important; }
revogr-edit { box-shadow: none; }
revogr-edit input { box-sizing: border-box; width: 100%; height: 100%; padding: 0 7px; border: 1px solid #2563eb; outline: none; font: inherit; background: #fff; }
revo-grid[theme=compact] revogr-data .rgCell { line-height: var(--rowh); }
.grid-vlines .rgCell { border-right: 1px solid #d9dfe8; }
.grid-rowlines .rgCell { border-bottom: 1px solid #d9dfe8; }
.zl-autoedit { display: block; width: 100%; height: 100%; }
.zl-dateedit { display: flex; width: 100%; height: 100%; }
.zl-dateedit input[type='text'] { flex: 1; min-width: 0; border-right: 0; }
.zl-dateedit .zl-datepick { width: 22px; padding: 0 2px; border-left: 0; cursor: pointer; }
.zl-dateedit .zl-datepick::-webkit-datetime-edit { display: none; }
.zl-pop { position: fixed; background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 99999; }
.zl-fh { display: block; width: 100%; cursor: pointer; user-select: none; }
.zl-fh.on { color: #b45309; font-weight: 700; }
.zl-fpop { width: 232px; border-radius: 6px; overflow: hidden; font-size: 13px; }
.zl-fpop .fp-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.zl-fpop .fp-body > input { padding: 3px 6px; border: 1px solid var(--field-border); border-radius: 4px; font: inherit; }
.zl-fpop .fp-list { max-height: 200px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 4px; }
.zl-fpop .fp-btns { display: flex; gap: 6px; }
.zl-fpop .fp-btns .btn { flex: 1; padding: 3px 0; }
.zl-autopop { max-height: 340px; overflow-y: auto; }
.zl-pop-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; white-space: nowrap; color: #111; }
.zl-pop-item:hover { background: #f2f5f9; }
.zl-pop-item.on { background: var(--accent-soft); color: var(--accent); }
.zl-ants .selection-border-range::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background-image:
    repeating-linear-gradient(90deg, #15803d 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, #15803d 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, #15803d 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, #15803d 0 6px, transparent 6px 12px);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  animation: zl-ants .6s linear infinite;
}
@keyframes zl-ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
.zl-hit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.zl-nut-dau { color: var(--accent); font-size: 11px; }
.zl-nhap { background: rgba(234, 179, 8, .13); }
.bd { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e8e6e1; cursor: grab; user-select: none; }
.bd-keo { cursor: grabbing; }
.bd-tiles img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; pointer-events: none; }
.bd-lop { position: absolute; inset: 0; pointer-events: none; }
.bd-tool { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; padding: 4px 6px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border-2); border-radius: var(--rad); }
.bd-chon { font: inherit; padding: 2px 4px; border: 1px solid var(--border-2); border-radius: var(--rad); background: #fff; max-width: 260px; }
.bd-tin { position: absolute; right: 6px; bottom: 4px; padding: 1px 6px; font-size: 11px; color: #444; background: rgba(255, 255, 255, .8); }

/* đăng nhập: form nổi giữa màn trên nền chrome, chip tên ở thanh trên */
.auth-phu { position: fixed; inset: 0; background: var(--chrome, #eef1f5); display: flex; align-items: center; justify-content: center; z-index: 999; }
.auth-form { display: flex; flex-direction: column; gap: 10px; width: 320px; padding: 28px; background: #fff; border: 1px solid var(--border-2, #d9dfe8); border-radius: 8px; }
.auth-tieude { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.auth-form input { padding: 9px 12px; border: 1px solid var(--border-2, #d9dfe8); border-radius: var(--rad, 4px); font-size: 14px; }
.auth-nut { padding: 9px 12px; border: 0; border-radius: var(--rad, 4px); background: var(--accent, #2563eb); color: #fff; font-size: 14px; font-weight: 600; }
.btn-chu { background: none; border: 0; color: var(--accent, #2563eb); font-size: 13px; }
.o-mk { position: relative; display: flex; }
.o-mk input { flex: 1; padding-right: 36px; }
.ic-mk { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0; cursor: pointer; color: #6b7280; display: flex; }
.auth-err { color: #c0392b; font-size: 13px; min-height: 17px; text-align: center; }
.auth-dong { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border-2, #d9dfe8); user-select: text; }
.auth-chip { display: inline-flex; gap: 8px; align-items: center; }

.panel { position: fixed; left: var(--side-w); top: calc(var(--bar-h) + var(--toolbar-h) + var(--trangthai-h)); width: 64%; height: 68%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-2); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); z-index: 30; }
.panel-toolbar { cursor: move; }
.panel-to { inset: calc(var(--bar-h) + var(--toolbar-h) + var(--trangthai-h)) 0 0 var(--side-w) !important; width: auto; height: auto; }
.panel-sheet { flex: 1; min-height: 0; overflow: hidden; }
.panel .fb-namezone { width: auto; }