/* Shared Salary Slip Renderer V2 — presentation only; business values come from module contexts/snapshots. */
.salary-slip-render-host{max-width:1120px;margin:0 auto}.salary-structured-slip{overflow:hidden;border:1px solid rgba(148,163,184,.28);border-radius:28px;box-shadow:0 24px 60px rgba(15,23,42,.18);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}.salary-structured-slip--dark{color:#f8fafc;background:linear-gradient(145deg,#151c28,#090e17)}.salary-structured-slip--light{color:#0f172a;background:#fff}.salary-structured-slip__header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px 32px 24px;border-bottom:1px solid rgba(148,163,184,.24)}.salary-structured-slip__eyebrow{display:block;color:#93c5fd;font-family:var(--ui-font-family,system-ui,sans-serif);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.salary-structured-slip__header h1{margin:8px 0 4px;font-family:var(--ui-font-family,system-ui,sans-serif);font-size:clamp(2rem,4vw,3rem);line-height:1}.salary-structured-slip__header p{margin:8px 0 0;color:#93c5fd;font-family:var(--ui-font-family,system-ui,sans-serif);font-size:.95rem}.salary-structured-slip--light .salary-structured-slip__header p,.salary-structured-slip--light .salary-structured-slip__eyebrow{color:#315b9e}.salary-structured-slip__status{flex:0 0 auto;padding:9px 14px;border:1px solid #9a6700;border-radius:999px;color:#ffd166;background:#3a2806;font-family:var(--ui-font-family,system-ui,sans-serif);font-size:.78rem}.salary-structured-slip__columns{display:grid;grid-template-columns:1fr 1fr}.salary-structured-slip--one .salary-structured-slip__columns{grid-template-columns:1fr}.salary-structured-slip__column{min-width:0}.salary-structured-slip__column--left{border-right:1px solid rgba(148,163,184,.24)}.salary-structured-slip--one .salary-structured-slip__column--left{border-right:0}.salary-structured-slip__section{padding:22px 28px}.salary-structured-slip__section+.salary-structured-slip__section{border-top:1px dashed rgba(148,163,184,.3)}.salary-structured-slip__section h2{margin:0 0 14px;padding-bottom:11px;border-bottom:1px dashed rgba(226,232,240,.55);font-size:.88rem;letter-spacing:.04em}.salary-structured-slip__rows{display:grid;gap:2px}.salary-structured-slip__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;padding:8px 0}.salary-structured-slip__row span{min-width:0;color:#e2e8f0}.salary-structured-slip__row strong{text-align:right;white-space:nowrap;color:#fff}.salary-structured-slip--light .salary-structured-slip__row span{color:#475569}.salary-structured-slip--light .salary-structured-slip__row strong{color:#0f172a}.salary-structured-slip__row.is-strong strong{font-size:1.05em}.salary-structured-slip__row.is-total{margin-top:7px;padding-top:13px;border-top:1px dashed rgba(226,232,240,.5);font-weight:800}.salary-structured-slip__row.is-warning strong{color:#fda4af}.salary-structured-slip__list{padding:7px 0}.salary-structured-slip__list>ul{display:grid;gap:5px;margin:2px 0 0;padding:0 0 0 16px;list-style:none;color:#cbd5e1}.salary-structured-slip__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;font-size:.86rem}.salary-structured-slip__list li strong{white-space:nowrap}.salary-structured-slip__grand-total{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 28px 24px;padding:18px 20px;border:1px solid #137d4f;border-radius:18px;background:#0c3b2d;color:#d1fae5;font-family:var(--ui-font-family,system-ui,sans-serif);font-weight:800}.salary-structured-slip__grand-total strong{font-size:1.55rem;color:#fff}.salary-structured-slip__footer{display:flex;justify-content:space-between;gap:18px;padding:14px 28px;border-top:1px solid rgba(148,163,184,.22);color:#93c5fd;font-family:var(--ui-font-family,system-ui,sans-serif);font-size:.78rem}.salary-slip-source-note{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1120px;margin:14px auto 0;padding:16px 20px}.salary-slip-source-note>div{display:grid;gap:3px}.salary-slip-source-note span{font-weight:700}.salary-slip-source-note small{color:var(--ui-color-text-muted,#64748b)}

/* Structured template studio — Kho thông tin | Editor | Preview */
.template-studio{
  --pane-library:280px;
  --pane-editor:520px;
  --pane-preview:480px;
  display:grid;
  grid-template-columns:var(--pane-library) 12px var(--pane-editor) 12px var(--pane-preview);
  align-items:stretch;
  width:100%;
  margin-top:18px;
}
.template-studio__pane{min-width:0}
.template-studio__library,.template-studio__editor{height:100%;overflow:hidden}
.template-studio__library{position:relative;background:#fbfdff}
.template-studio__pane-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px;border-bottom:1px solid var(--ui-border,#d8e2f0)}
.template-studio__pane-header h2{margin:3px 0 4px;font-size:1.15rem}
.template-studio__pane-header p{margin:0;color:var(--ui-text-muted,#64748b);font-size:.82rem;line-height:1.45}
.template-studio__collapse{flex:0 0 auto;width:34px;height:34px;border:1px solid #cbd9ed;border-radius:10px;background:#fff;color:#234f95;font-size:1.35rem;cursor:pointer}
.template-studio__library-content{display:grid;grid-auto-rows:max-content;align-content:start;gap:12px;min-height:0;padding:14px;height:calc(100% - 96px);max-height:calc(100vh - 170px);overflow:auto}
.template-studio__collapsed-label{display:none;position:absolute;inset:70px 0 12px;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;letter-spacing:.08em;color:#315b9e;font-size:.72rem}
.template-studio.is-library-collapsed .template-studio__library-content,.template-studio.is-library-collapsed .template-studio__pane-header>div{display:none}
.template-studio.is-library-collapsed .template-studio__pane-header{justify-content:center;padding:12px 6px}
.template-studio.is-library-collapsed .template-studio__collapse{transform:rotate(180deg)}
.template-studio.is-library-collapsed .template-studio__collapsed-label{display:flex}
.template-studio__splitter{display:flex;align-items:stretch;justify-content:center;padding:0 3px;cursor:col-resize;touch-action:none;user-select:none}
.template-studio__splitter>span{width:6px;min-height:100%;border-radius:999px;background:linear-gradient(180deg,#c9d8ee,#eef4fb 46%,#c9d8ee);box-shadow:inset 0 0 0 1px rgba(91,120,160,.22);transition:background .16s,box-shadow .16s}
.template-studio__splitter:hover>span,.template-studio__splitter:focus>span{background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.16)}
.template-studio__target-group{padding:9px 10px;border:1px solid #cfe0f7;border-radius:10px;background:#edf5ff;color:#52647d;font-size:.78rem}
.template-studio__target-group strong{color:#174d99}
.template-studio__search{display:grid;gap:5px;color:#334155;font-size:.78rem;font-weight:800}
.template-studio__search input{width:100%;min-height:40px;padding:9px 10px;border:1px solid #cbd8ea;border-radius:10px;background:#fff;font:inherit}
.template-v2-library-list{display:grid;gap:9px}
.template-v2-library-group{border:1px solid #dbe5f3;border-radius:12px;background:#fff;overflow:hidden}
.template-v2-library-group summary{display:flex;justify-content:space-between;gap:10px;padding:10px 11px;color:#40546f;font-size:.75rem;font-weight:900;letter-spacing:.035em;cursor:pointer;list-style:none}
.template-v2-library-group summary::-webkit-details-marker{display:none}
.template-v2-library-group summary small{display:grid;place-items:center;min-width:23px;height:23px;border-radius:999px;background:#edf4ff;color:#315b9e}
.template-v2-library-items{display:grid;gap:6px;padding:0 8px 9px}
.template-v2-variable{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;width:100%;gap:7px;padding:8px;border:1px solid #d6e2f3;border-radius:10px;background:#fff;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.template-v2-variable:hover{border-color:#74a5f4;box-shadow:0 7px 18px rgba(37,99,235,.10);transform:translateY(-1px)}
.template-v2-variable.is-dragging{opacity:.55}
.template-v2-variable__text{display:grid;gap:3px;min-width:0}
.template-v2-variable__text strong{overflow:hidden;color:#102445;font-size:.82rem;line-height:1.2;text-overflow:ellipsis}
.template-v2-variable__text code{overflow:hidden;color:#65758b;font-size:.68rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.template-drag-handle{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #cad7ea;border-radius:8px;background:#f8fbff;color:#51709e;font-size:1rem;line-height:1;cursor:grab;user-select:none}
.template-drag-handle:active{cursor:grabbing}
.template-drag-handle:disabled{opacity:.35;cursor:default}
.template-drag-handle--group{width:32px;height:32px;background:#eaf3ff;color:#1e5bb5}
.template-studio__advanced{border:1px solid #dbe5f3;border-radius:12px;background:#fff}
.template-studio__advanced>summary,.template-aux-create>summary{display:flex;justify-content:space-between;gap:8px;padding:11px;color:#203b65;font-size:.8rem;font-weight:900;cursor:pointer}
.template-studio__advanced-body{display:grid;gap:10px;padding:0 10px 10px}
.template-aux-list{display:grid;gap:7px}
.template-aux-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:9px;border:1px solid #e0e8f4;border-radius:9px;background:#f9fbff}
.template-aux-item>div{display:grid;gap:2px;min-width:0}
.template-aux-item code,.template-aux-item small{overflow:hidden;color:#64748b;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}
.template-aux-item form{grid-column:1/-1}
.template-aux-create{border-top:1px dashed #d7e2f0}
.template-aux-form{display:grid;gap:8px;padding:0 4px 6px}
.template-aux-form label{display:grid;gap:4px;color:#40546f;font-size:.73rem;font-weight:800}
.template-aux-form input,.template-aux-form select,.template-aux-form textarea{width:100%;padding:8px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;font:inherit}

.template-studio__editor{display:flex;flex-direction:column}
.template-studio__editor-form{display:grid;gap:14px;padding:0 18px 18px}
.template-studio__meta{padding-top:2px}
.template-v2-mode-switch{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr);gap:12px;align-items:end}
.template-v2-mode-switch label{display:grid;gap:5px}
.template-v2-mode-lock{display:grid;gap:3px;padding:10px 12px;border:1px solid #cfe0f7;border-radius:12px;background:#f5f9ff}
.template-v2-mode-lock span{color:#64748b;font-size:.72rem;font-weight:800}
.template-v2-mode-lock strong{color:#0d438f;font-size:.9rem}
.template-v2-mode-lock small{color:#64748b}
.template-v2-canvas{display:grid;gap:12px;padding:14px;border:1px solid #dbe5f3;border-radius:16px;background:#f8fbff}
.template-v2-canvas-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.template-v2-canvas-toolbar h3{margin:0;font-size:1rem}
.template-v2-canvas-toolbar small{color:#64748b}
.template-v2-actions{display:flex;gap:6px}
.template-v2-actions button,.template-v2-group-controls>button,.template-v2-row-remove,.template-v2-inspector__head button{min-width:30px;padding:6px 8px;border:1px solid #cfdbed;border-radius:8px;background:#fff;color:#315b9e;cursor:pointer}
.template-v2-design-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px;border:1px solid #dbe5f3;border-radius:12px;background:#fff}
.template-v2-design-settings label,.template-v2-inspector__grid label{display:grid;gap:4px;color:#40546f;font-size:.72rem;font-weight:800}
.template-v2-design-settings .is-wide{grid-column:1/-1}
.template-v2-design-settings input,.template-v2-design-settings select,.template-v2-inspector__grid input,.template-v2-inspector__grid select{width:100%;min-width:0;padding:8px 9px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;font:inherit}
.template-v2-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.template-v2-columns.is-one-column{grid-template-columns:1fr}
.template-v2-column{display:grid;align-content:start;gap:8px;min-height:160px;padding:9px;border:1px dashed #afc3e0;border-radius:13px;background:#fff}
.template-v2-column.is-drop-target{border-color:#2563eb;background:#eef5ff}
.template-v2-column>h4{margin:0 0 2px;color:#315b9e;font-size:.72rem;letter-spacing:.045em;text-transform:uppercase}
.template-v2-group{display:grid;gap:8px;padding:9px;border:1px solid #d7e2f0;border-radius:12px;background:#f9fbff;transition:border-color .15s,box-shadow .15s,opacity .15s}
.template-v2-group.is-selected{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.template-v2-group.is-drop-target{border-color:#2563eb;background:#edf5ff}
.template-v2-group.is-dragging{opacity:.5}
.template-v2-group-head{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:7px;align-items:center}
.template-v2-group-head>input{min-width:0;padding:8px 9px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;font-weight:900}
.template-v2-group-controls{display:flex;align-items:center;gap:5px}
.template-v2-group-controls select{max-width:90px;padding:6px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;font-size:.72rem}
.template-inline-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:4px!important;color:#52647d!important;font-size:.68rem!important;font-weight:700!important;white-space:nowrap}
.template-inline-check input{width:auto!important;margin:0}
.template-v2-rows{display:grid;gap:6px}
.template-v2-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px;border:1px solid #e0e8f4;border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s,opacity .15s}
.template-v2-row.is-selected{border-color:#4f8ee8;box-shadow:0 0 0 2px rgba(59,130,246,.10)}
.template-v2-row.is-dragging{opacity:.45}
.template-v2-row.is-drop-before:before{content:"";position:absolute;left:5px;right:5px;top:-5px;height:3px;border-radius:3px;background:#2563eb}
.template-v2-row-summary{display:grid;gap:2px;min-width:0;padding:4px;border:0;background:transparent;text-align:left;cursor:pointer}
.template-v2-row-summary strong{overflow:hidden;color:#12294b;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.template-v2-row-summary code{overflow:hidden;color:#64748b;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}
.template-v2-row-remove{color:#b42318!important}
.template-v2-group-drop{width:100%;padding:9px;border:1px dashed #b7c9e3;border-radius:9px;background:#f8fbff;color:#52709b;font-size:.72rem;cursor:pointer}
.template-v2-empty{display:grid;gap:8px;padding:15px;text-align:center;color:#64748b;font-size:.76rem}
.template-v2-final-group{margin-top:2px;border-style:dashed}
.template-v2-inspector{display:grid;gap:10px;padding:11px;border:1px solid #b8d0f1;border-radius:12px;background:#eef5ff}
.template-v2-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#174d99;font-weight:900;font-size:.82rem}
.template-v2-inspector__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.template-v2-inspector__grid code{display:block;padding:9px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;color:#315b9e}
.template-v2-legacy{margin-top:4px}
.template-v2-hidden{display:none!important}

/* HF97.11B.3 — canonical preview ownership: context/actions scroll normally; only the rendered preview stage is sticky on wide layouts. */
.template-studio__preview{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  height:auto;
  overflow:visible;
  position:relative;
  background:#f8fafc;
  container-type:inline-size;
  container-name:template-preview-pane;
}
.template-device-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 14px;border-bottom:1px solid #dbe5f3;background:#fff}
.template-device-toolbar label{display:grid;gap:4px;color:#40546f;font-size:.72rem;font-weight:800}
.template-device-toolbar label:nth-child(3),.template-device-toolbar>button{grid-column:1/-1}
.template-device-toolbar input,.template-device-toolbar select{width:100%;min-width:0;padding:8px 9px;border:1px solid #cbd8ea;border-radius:8px;background:#fff;font:inherit}
.template-device-custom{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}
.template-device-actions{padding:10px 14px;border-bottom:1px solid #dbe5f3;background:#fbfdff}
.template-device-size{margin-left:auto;padding:6px 8px;border-radius:8px;background:#edf4ff;color:#315b9e;font-size:.7rem;font-weight:900}
.template-device-stage{
  position:sticky;
  top:78px;
  z-index:5;
  display:grid;
  place-items:start center;
  min-height:220px;
  max-height:none;
  padding:12px;
  overflow:hidden!important;
  box-sizing:border-box;
  scrollbar-width:none!important;
  overscroll-behavior:none;
  background:radial-gradient(circle at 50% 0,#e9f1fb,#dfe8f4 65%,#d7e1ed);
}
.template-device-stage::-webkit-scrollbar{display:none!important}
.template-device-shell{
  position:relative;
  flex:0 0 auto;
  min-width:0;
  margin-inline:auto;
  overflow:hidden!important;
  scrollbar-width:none!important;
}
.template-device-canvas{
  position:absolute;
  left:0;
  top:0;
  box-sizing:border-box;
  overflow:hidden!important;
  scrollbar-width:none!important;
  transform-origin:top left;
  border:1px solid #1f2937;
  border-radius:24px;
  background:#eef2f7;
  box-shadow:0 22px 52px rgba(15,23,42,.24);
}
.template-device-canvas::-webkit-scrollbar{display:none!important}
.template-device-canvas>.print-template-preview{
  width:100%;
  min-width:0;
  min-height:100%;
  overflow:hidden;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.template-preview-empty{display:grid;place-items:center;align-content:center;gap:9px;min-height:100%;padding:28px;text-align:center;color:#475569;background:linear-gradient(180deg,#f8fbff,#eef4fb)}
.template-preview-empty__icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #bfd0e8;border-radius:14px;background:#fff;color:#2563eb;font-size:1.45rem;box-shadow:0 8px 20px rgba(37,99,235,.10)}
.template-preview-empty strong{color:#153d78;font-size:.92rem}
.template-preview-empty small{max-width:320px;color:#64748b;font-size:.76rem;line-height:1.45}
.template-device-canvas .salary-slip-render-host{width:100%;max-width:none;padding:10px;box-sizing:border-box;container-type:inline-size}
.template-device-canvas .salary-structured-slip{width:100%;box-sizing:border-box}
.template-device-hint{margin:0;padding:10px 14px;color:#64748b;font-size:.7rem;text-align:center}

/* Phiếu cấu trúc ưu tiên điện thoại dọc; hai cột vẫn được giữ nếu mẫu chọn hai cột. */
.salary-slip-render-host{container-type:inline-size}
@container (max-width:480px){
  .salary-structured-slip{border-radius:18px}
  .salary-structured-slip__header{gap:10px;padding:16px 14px 14px}
  .salary-structured-slip__header h1{font-size:2rem}
  .salary-structured-slip__header p{font-size:.72rem;line-height:1.4}
  .salary-structured-slip__status{padding:7px 9px;font-size:.64rem}
  .salary-structured-slip__section{padding:13px 12px}
  .salary-structured-slip__section h2{margin-bottom:8px;padding-bottom:7px;font-size:.68rem;line-height:1.35}
  .salary-structured-slip__row{gap:7px;padding:5px 0;font-size:.68rem;line-height:1.35}
  .salary-structured-slip__row strong{white-space:normal;overflow-wrap:anywhere}
  .salary-structured-slip__list li{gap:7px;font-size:.64rem}
  .salary-structured-slip__grand-total{gap:8px;margin:0 12px 14px;padding:12px;border-radius:12px;font-size:.68rem}
  .salary-structured-slip__grand-total strong{font-size:1rem}
  .salary-structured-slip__footer{padding:9px 12px;font-size:.58rem;line-height:1.4}
}
@container (max-width:370px){
  .salary-structured-slip__section{padding:11px 9px}
  .salary-structured-slip__row{grid-template-columns:minmax(0,1fr) minmax(58px,.72fr);font-size:.62rem}
  .salary-structured-slip__header h1{font-size:1.75rem}
}

@media (max-width:1180px){
  .template-studio{grid-template-columns:1fr;gap:14px}
  .template-studio__splitter{display:none}
  .template-studio__library-content{height:auto;max-height:420px}
  .template-studio__collapsed-label{display:none!important}
  .template-studio.is-library-collapsed .template-studio__library-content,.template-studio.is-library-collapsed .template-studio__pane-header>div{display:grid}
  .template-studio.is-library-collapsed .template-studio__pane-header{justify-content:space-between;padding:18px}
  .template-studio__collapse{display:none}
  .template-device-stage{max-height:720px}
}
@media (max-width:760px){
  .template-v2-mode-switch,.template-v2-design-settings,.template-v2-columns,.template-v2-inspector__grid,.template-device-toolbar{grid-template-columns:1fr}
  .template-v2-design-settings .is-wide,.template-device-toolbar label:nth-child(3),.template-device-toolbar>button{grid-column:auto}
  .template-v2-group-head{grid-template-columns:auto minmax(0,1fr)}
  .template-v2-group-controls{grid-column:1/-1;justify-content:flex-end}
  .template-device-custom{grid-column:auto}
  .template-device-stage{padding:8px}
}
@media print{
  .salary-structured-slip{box-shadow:none;border-radius:0}
  .salary-slip-render-host{max-width:none}
  .salary-structured-slip__status{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* R3B-G4C1-HF1 — persistence, movable total, wide studio and overflow cleanup. */
.print-template-page .print-template-studio-shell{
  width:calc(100% - 16px)!important;
  max-width:none!important;
  padding-inline:8px;
}
.template-studio{max-width:none;min-width:0}
.template-studio__pane,.template-studio__editor-form,.template-v2-canvas,.template-v2-columns,.template-v2-column,.template-v2-group,.template-v2-row{min-width:0}
.template-studio__editor-form{overflow-x:hidden}
.template-v2-group-controls{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.template-v2-row.is-final{
  margin-top:8px;
  padding:12px 13px;
  border:1px solid #137d4f;
  border-radius:12px;
  background:#0c3b2d;
  color:#d1fae5;
  font-weight:900;
}
.template-v2-row.is-final .template-drag-handle{border-color:#2d8f67;background:#0f4a37;color:#d1fae5}
.template-v2-row.is-final .template-v2-row-summary strong,
.template-v2-row.is-final .template-v2-row-summary code{color:#fff}
.salary-slip-render-host{display:block;width:100%;min-width:0;box-sizing:border-box}
.salary-slip-render-host>.salary-structured-slip{display:block;width:100%;min-width:0;box-sizing:border-box}
.salary-structured-slip__row.is-final{
  margin-top:10px;
  padding:14px 15px;
  border:1px solid #137d4f;
  border-radius:14px;
  background:#0c3b2d;
  color:#d1fae5;
  font-family:var(--ui-font-family,system-ui,sans-serif);
  font-weight:900;
}
.salary-structured-slip__row.is-final span,
.salary-structured-slip__row.is-final strong{color:#fff}
.salary-structured-slip__row.is-final strong{font-size:1.25em}
.gach-salary-slip-page #gach-salary-slip{width:100%;min-width:0;min-height:120px;overflow:visible}
.gach-salary-slip-page #gach-salary-slip>.salary-structured-slip--dark{
  color:#f8fafc!important;
  background:linear-gradient(145deg,#151c28,#090e17)!important;
}
@container (max-width:480px){
  .salary-structured-slip__row.is-final{padding:10px 11px;border-radius:10px}
  .salary-structured-slip__row.is-final strong{font-size:.88rem}
}
@media (max-width:1180px){
  .print-template-page .print-template-studio-shell{width:100%!important;padding-inline:10px}
}

/* R3B-G4C1-HF4 — user-controlled adaptive preview zoom. */
.template-device-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.template-preview-zoom{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid #cbd8ea;
  border-radius:10px;
  background:#fff;
}
.template-preview-zoom>button{
  display:grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:#f3f7fd;
  color:#234f95;
  font:800 .78rem/1 var(--ui-font-family,system-ui,sans-serif);
  cursor:pointer;
}
.template-preview-zoom>button:hover,
.template-preview-zoom>button:focus-visible{
  background:#e4efff;
  outline:none;
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.template-preview-zoom__value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:32px;
  padding:0 6px;
  border-radius:7px;
  background:#f8fbff;
  color:#173f7a;
  font-size:.74rem;
  font-weight:900;
}
.template-preview-zoom__value input{
  width:35px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:right;
  appearance:textfield;
  -moz-appearance:textfield;
}
.template-preview-zoom__value input::-webkit-inner-spin-button,
.template-preview-zoom__value input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.template-preview-zoom .template-preview-zoom__auto{
  min-width:72px;
  padding-inline:10px;
}
.template-preview-zoom .template-preview-zoom__auto.is-active{
  background:#2563eb;
  color:#fff;
}
@media (max-width:1180px){
  .template-device-stage{
    position:static;
    top:auto;
    z-index:auto;
  }
}
@media (max-width:760px){
  .template-preview-zoom{width:100%;justify-content:center}
  .template-device-size{margin-left:0}
}

/* R3B-G4C1-HF5 — compact editor/preview, full-document auto fit and alignment polish. */
.template-studio__editor-form{
  gap:10px;
  padding:0 14px 14px;
}
.template-studio__editor>.ui-section-header--prominent,
.template-studio__preview>.ui-section-header--prominent{
  padding:13px 14px;
  min-height:0;
}
.template-studio__editor>.ui-section-header--prominent h2,
.template-studio__preview>.ui-section-header--prominent h2{
  margin:2px 0 3px;
  font-size:1.08rem;
  line-height:1.18;
}
.template-studio__editor>.ui-section-header--prominent p,
.template-studio__preview>.ui-section-header--prominent p{
  margin:0;
  font-size:.78rem;
  line-height:1.35;
}
.template-studio__meta{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(230px,1.2fr) minmax(125px,.45fr) minmax(125px,.45fr);
  gap:8px;
  padding-top:10px;
  align-items:end;
}
.template-studio__meta>label{min-width:0}
.template-studio__meta .hr-span-2{grid-column:1/3}
.template-studio__meta input[type="text"],
.template-studio__meta input:not([type]){
  min-height:40px;
  padding:8px 10px;
}
.template-studio__meta .hr-check{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:40px;
  padding:8px 10px;
  border:1px solid #d6e1f0;
  border-radius:10px;
  background:#f8fbff;
}
.template-studio__meta .hr-check input[type="checkbox"]{
  width:17px;
  height:17px;
  margin:0;
  flex:0 0 auto;
}
.template-studio__meta .hr-check span{
  font-size:.78rem;
  line-height:1.15;
  white-space:nowrap;
}
.template-v2-mode-switch{
  grid-template-columns:minmax(220px,.82fr) minmax(0,1.18fr);
  gap:8px;
  align-items:stretch;
}
.template-v2-mode-lock{
  align-content:center;
  min-height:58px;
  padding:8px 10px;
  border-radius:10px;
}
.template-v2-mode-lock small{font-size:.68rem;line-height:1.25}
.template-v2-mode-switch>.ui-status-banner{
  display:flex;
  align-items:center;
  min-height:58px;
  margin:0;
  padding:9px 11px;
  font-size:.76rem;
  line-height:1.35;
}

.template-device-toolbar__refresh{
  min-width:112px;
  min-height:38px;
  padding-inline:14px;
  white-space:nowrap;
}
.template-device-custom[hidden]{display:none!important}
.template-device-custom{
  grid-column:1/-1;
  gap:8px;
}
.template-device-actions{
  flex-wrap:nowrap;
  gap:6px;
  padding:7px 10px;
  min-width:0;
}
.template-device-actions .ui-print-preview-toolbar__group{
  display:inline-flex;
  flex:0 0 auto;
  gap:4px;
}
.template-device-actions .button{
  min-height:34px;
  padding:6px 9px;
  white-space:nowrap;
}
.template-preview-zoom{
  flex:0 0 auto;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.template-preview-zoom__value{
  display:inline-grid;
  grid-template-columns:36px auto;
  align-items:center;
  justify-content:center;
  column-gap:1px;
  min-width:64px;
  white-space:nowrap;
  line-height:1;
}
.template-preview-zoom__value input{
  width:36px;
  min-width:36px;
  line-height:1;
}
.template-preview-zoom__value>span:last-child{
  display:inline-block;
  line-height:1;
  white-space:nowrap;
}
.template-device-size{
  min-width:0;
  margin-left:auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.template-device-stage.is-auto-zoom{place-items:start center!important}
.template-device-stage.is-auto-zoom .template-device-shell{margin-inline:auto}
.template-device-stage.is-manual-zoom{max-height:none!important;align-content:start}
.template-device-hint{
  padding:7px 10px;
  font-size:.66rem;
  line-height:1.3;
}

.template-v2-group{
  gap:6px;
  padding:7px;
}
.template-v2-group-head{
  grid-template-columns:34px minmax(92px,1fr) auto;
  gap:6px;
  min-height:36px;
  align-items:center;
}
.template-v2-group-head>input{
  height:36px;
  padding:6px 9px;
  line-height:1.1;
}
.template-drag-handle--group{
  width:34px;
  height:34px;
}
.template-v2-group-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:5px;
  min-width:0;
}
.template-v2-group-controls select{
  width:88px;
  max-width:88px;
  height:36px;
  padding:5px 7px;
  line-height:1;
}
.template-v2-group-controls>button{
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  display:grid;
  place-items:center;
}
.template-v2-group-empty-check{
  height:36px;
  padding:0 3px;
  gap:4px!important;
  line-height:1!important;
}
.template-v2-group-empty-check input{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto;
}
.template-v2-group-empty-check{font-size:.64rem!important}

@media (max-width:1480px){
  .template-studio__meta{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .template-studio__meta .hr-span-2{grid-column:1/-1}
  .template-studio__meta .hr-check{grid-column:auto}
}
@media (max-width:1180px){
  .template-studio__preview>.ui-section-header--prominent{padding:12px}
}
@media (max-width:760px){
  .template-device-toolbar__refresh{width:100%}
  .template-device-actions{flex-wrap:wrap}
  .template-device-size{width:100%;margin-left:0;text-align:center}
  .template-v2-group-head{grid-template-columns:34px minmax(0,1fr)}
  .template-v2-group-controls{grid-column:1/-1;justify-content:flex-end}
}

/* R3B-G4C1-HF6 — balanced metadata, true full-slip preview, compact group controls and reveal-on-add. */
.template-studio__meta{
  grid-template-columns:minmax(170px,.68fr) minmax(300px,1.32fr)!important;
  gap:8px 10px;
  align-items:end;
}
.template-studio__meta>label:nth-child(1){grid-column:1}
.template-studio__meta>label:nth-child(2){grid-column:2}
.template-studio__meta .hr-span-2{grid-column:1/-1!important}
.template-studio__meta .hr-check{
  grid-column:auto;
  min-width:0;
}
.template-studio__meta input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.template-device-toolbar__month .ui-global-month-input{
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

.template-v2-group{
  container-type:inline-size;
}
.template-v2-group-head{
  grid-template-columns:34px minmax(0,1fr);
  gap:6px;
  align-items:center;
}
.template-v2-group-head>input{
  width:100%;
  min-width:0;
  height:36px;
  box-sizing:border-box;
}
.template-v2-group-controls{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(92px,1fr) auto 36px;
  align-items:center;
  gap:6px;
  min-width:0;
  padding-left:40px;
}
.template-v2-group-controls select{
  width:100%;
  max-width:none;
  min-width:0;
}
.template-v2-group-empty-check{
  justify-self:end;
  white-space:nowrap;
}
.template-v2-group-controls>button{
  justify-self:end;
}
@container (min-width:470px){
  .template-v2-group-head{
    grid-template-columns:34px minmax(120px,1fr) minmax(190px,auto);
  }
  .template-v2-group-controls{
    grid-column:auto;
    grid-template-columns:minmax(88px,98px) auto 36px;
    padding-left:0;
  }
}

.template-v2-group.is-newly-added,
.template-v2-row.is-newly-added{
  animation:template-v2-reveal 1.45s ease-out;
}
@keyframes template-v2-reveal{
  0%{box-shadow:0 0 0 4px rgba(37,99,235,.30),0 12px 28px rgba(37,99,235,.18);background:#eaf3ff}
  55%{box-shadow:0 0 0 3px rgba(37,99,235,.16),0 8px 20px rgba(37,99,235,.10)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}

@media (max-width:760px){
  .template-studio__meta{
    grid-template-columns:1fr!important;
  }
  .template-studio__meta>label:nth-child(1),
  .template-studio__meta>label:nth-child(2),
  .template-studio__meta .hr-span-2,
  .template-studio__meta .hr-check{
    grid-column:1!important;
  }
}

/* R3B-G4C1-HF8 — Kho dữ liệu mẫu in dùng chung Module 2/3 */
.template-studio__data-manager {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 12px;
    padding: 12px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 14px;
    background: var(--ui-surface-soft, #f5f8ff);
    color: inherit;
    text-decoration: none;
}

.template-studio__data-manager:hover {
    border-color: var(--ui-primary, #2563eb);
    background: var(--ui-primary-soft, #eaf1ff);
}

.template-studio__data-manager-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ui-primary-soft, #eaf1ff);
    color: var(--ui-primary, #2563eb);
    font-size: 18px;
}

.template-studio__data-manager strong,
.template-studio__data-manager small {
    display: block;
}

.template-studio__data-manager small {
    margin-top: 3px;
    color: var(--ui-text-muted, #64748b);
    line-height: 1.35;
}

.template-data-library-page .ui-shell {
    max-width: 1720px;
}

.template-data-library__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
}

.template-data-library__hero h1 {
    margin: 4px 0 6px;
}

.template-data-library__hero p {
    max-width: 980px;
    margin: 0;
    color: var(--ui-text-muted, #64748b);
}

.template-data-library__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.template-data-library__toolbar .ui-toolbar {
    margin: 0;
}

.template-data-library__search {
    min-width: 260px;
}

.template-data-library__snapshot-note {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 12px;
    background: var(--ui-surface-soft, #f5f8ff);
}

.template-data-library__snapshot-note span {
    color: var(--ui-text-muted, #64748b);
    line-height: 1.4;
}

.template-data-library__tabs {
    margin-top: 14px;
}

.template-data-library__tabs .ui-folder-tab {
    min-width: 220px;
}

.template-data-library__system {
    margin-top: 0;
}

.template-data-library__workspace {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(620px, 1.45fr);
    gap: 14px;
    align-items: start;
}

.template-data-library__list,
.template-data-library__editor,
.template-data-library__system {
    min-width: 0;
}

.template-data-library__variable-list {
    display: grid;
    gap: 8px;
    padding: 12px;
    max-height: min(72vh, 920px);
    overflow: auto;
}

.template-data-library__variable {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    background: var(--ui-surface, #fff);
}

.template-data-library__variable:hover,
.template-data-library__variable.is-selected {
    border-color: var(--ui-primary, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary, #2563eb) 14%, transparent);
}

.template-data-library__variable.is-selected {
    background: var(--ui-primary-soft, #eaf1ff);
}

.template-data-library__variable-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.template-data-library__variable-main code {
    overflow-wrap: anywhere;
}

.template-data-library__variable-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.template-data-library__variable small,
.template-data-library__usage {
    color: var(--ui-text-muted, #64748b);
    line-height: 1.35;
}

.template-data-library__usage {
    font-size: .82rem;
}

.template-data-library__editor {
    position: sticky;
    top: 78px;
}

.template-data-library__form {
    display: grid;
    gap: 14px;
    padding: 14px 16px 18px;
}

.template-data-library__form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-weight: 700;
}

.template-data-library__form label > small {
    color: var(--ui-text-muted, #64748b);
    font-weight: 500;
    line-height: 1.35;
}

.template-data-library__identity-grid,
.template-data-library__purpose-grid,
.template-data-library__minor-grid,
.template-data-library__check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.template-data-library__token-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 12px;
    background: var(--ui-surface, #fff);
}

.template-data-library__token-input:focus-within {
    border-color: var(--ui-primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, #2563eb) 16%, transparent);
}

.template-data-library__token-input input {
    border: 0 !important;
    box-shadow: none !important;
    padding-inline: 0;
    min-width: 0;
}

.template-data-library__formula-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1px dashed var(--ui-border-strong, #9fb7df);
    border-radius: 12px;
    background: var(--ui-surface-soft, #f5f8ff);
}

.template-data-library__formula-tools > span {
    width: 100%;
    color: var(--ui-text-muted, #64748b);
    font-weight: 700;
}

.template-data-library__source-chip {
    display: inline-grid;
    gap: 2px;
    max-width: 220px;
    padding: 7px 9px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 10px;
    background: var(--ui-surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.template-data-library__source-chip:hover {
    border-color: var(--ui-primary, #2563eb);
    background: var(--ui-primary-soft, #eaf1ff);
}

.template-data-library__source-chip code {
    color: var(--ui-text-muted, #64748b);
    font-size: .78rem;
}

.template-data-library__real-check {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ui-border, #cfdcf2);
    border-radius: 14px;
    background: var(--ui-surface-soft, #f5f8ff);
}

.template-data-library__real-check > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.template-data-library__real-check h3,
.template-data-library__real-check p {
    margin: 0;
}

.template-data-library__real-check p {
    color: var(--ui-text-muted, #64748b);
}

.template-data-library__check-result {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--ui-border, #cfdcf2);
    background: var(--ui-surface, #fff);
}

.template-data-library__check-result.is-success {
    border-color: var(--ui-success, #16a34a);
}

.template-data-library__check-result.is-danger {
    border-color: var(--ui-danger, #dc2626);
}

.template-data-library__check-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.template-data-library__check-values span,
.template-data-library__source-values span {
    display: grid;
    gap: 3px;
    padding: 9px;
    border-radius: 10px;
    background: var(--ui-surface-soft, #f5f8ff);
}

.template-data-library__check-values small,
.template-data-library__source-values code {
    color: var(--ui-text-muted, #64748b);
}

.template-data-library__source-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.template-data-library__actions {
    margin: 0;
}

.template-data-library__deactivate {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ui-border, #cfdcf2);
}

.template-data-library__deactivate span {
    color: var(--ui-text-muted, #64748b);
}

[data-data-library-item][hidden] {
    display: none !important;
}

@media (max-width: 1180px) {
    .template-data-library__workspace,
    .template-data-library__toolbar {
        grid-template-columns: 1fr;
    }

    .template-data-library__editor {
        position: static;
    }

    .template-data-library__variable-list {
        max-height: 520px;
    }
}

@media (max-width: 720px) {
    .template-data-library__hero,
    .template-data-library__real-check > header,
    .template-data-library__deactivate {
        align-items: stretch;
        flex-direction: column;
    }

    .template-data-library__identity-grid,
    .template-data-library__purpose-grid,
    .template-data-library__minor-grid,
    .template-data-library__check-grid,
    .template-data-library__check-values {
        grid-template-columns: 1fr;
    }

    .template-data-library__variable-main {
        display: grid;
    }
}
/* R3B-G4C1-HF7 — full-width groups and preview that never creates nested scrollbars. */
.salary-structured-slip__columns{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:auto;
  align-items:stretch;
}
.salary-structured-slip--one .salary-structured-slip__columns{grid-template-columns:minmax(0,1fr)}
.salary-structured-slip__columns>.salary-structured-slip__section{
  min-width:0;
  align-self:stretch;
  box-sizing:border-box;
}
.salary-structured-slip__columns>.salary-structured-slip__section--left{
  border-right:1px solid rgba(148,163,184,.24);
}
.salary-structured-slip__columns>.salary-structured-slip__section--right{
  border-left:0;
}
.salary-structured-slip__columns>.salary-structured-slip__section--full{
  grid-column:1/-1;
  border-right:0;
  border-top:1px dashed rgba(148,163,184,.30);
  border-bottom:1px dashed rgba(148,163,184,.18);
}
.salary-structured-slip--one .salary-structured-slip__columns>.salary-structured-slip__section{
  border-right:0;
}
.salary-structured-slip__section--full .salary-structured-slip__rows{
  width:100%;
}
.salary-structured-slip__section--full .salary-structured-slip__row.is-final{
  grid-template-columns:minmax(0,1fr) auto;
  padding-inline:18px;
}

/* POST-B2 Gach print V2 — left/right groups are independent 50/50 stacks between full-width anchors. */
.salary-structured-slip__lane-pair{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  min-width:0;
}
.salary-structured-slip__lane{
  display:grid;
  align-content:start;
  min-width:0;
}
.salary-structured-slip__lane--left{
  border-right:1px solid rgba(148,163,184,.24);
}
.salary-structured-slip__lane--right{
  min-width:0;
}
.salary-structured-slip__lane>.salary-structured-slip__section{
  min-width:0;
  box-sizing:border-box;
  border-right:0;
}
.salary-structured-slip__lane>.salary-structured-slip__section+.salary-structured-slip__section{
  border-top:1px dashed rgba(148,163,184,.30);
}
.salary-structured-slip--one .salary-structured-slip__lane-pair{
  grid-template-columns:minmax(0,1fr);
}
@media(max-width:760px){
  .salary-structured-slip__lane-pair{
    display:flex;
    flex-direction:column;
  }
  .salary-structured-slip__lane{
    display:contents;
  }
  .salary-structured-slip__lane>.salary-structured-slip__section{
    order:var(--salary-group-order);
  }
}

/* Editor canvas mirrors the production independent stacks. */
.template-v2-lane-pair{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
  min-width:0;
}
.template-v2-lane{
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
}
.template-v2-lane>.template-v2-group{
  min-width:0;
}
.template-v2-layout-grid.is-one-column .template-v2-lane-pair{
  grid-template-columns:minmax(0,1fr);
}
@media(max-width:760px){
  .template-v2-lane-pair{
    grid-template-columns:minmax(0,1fr);
  }
}

.template-v2-layout-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:auto;
  gap:10px;
  align-items:start;
  min-width:0;
}
.template-v2-layout-grid.is-one-column{grid-template-columns:minmax(0,1fr)}
.template-v2-layout-headings{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  color:#315b9e;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.template-v2-layout-headings>span{
  padding:0 4px 2px;
}
.template-v2-layout-grid>.template-v2-group{
  min-width:0;
  align-self:start;
}
.template-v2-layout-grid>.template-v2-group.is-full{
  grid-column:1/-1;
  border-color:#86a9dc;
  background:linear-gradient(180deg,#f8fbff,#f2f7ff);
}
.template-v2-layout-end-drop{
  width:100%;
  min-height:38px;
  padding:8px 12px;
  border:1px dashed #9fb9dd;
  border-radius:11px;
  background:#f7faff;
  color:#315b9e;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
.template-v2-layout-end-drop:hover,
.template-v2-layout-end-drop:focus-visible{
  border-color:#2563eb;
  background:#eaf3ff;
  outline:none;
}
.template-v2-group-controls select{
  min-width:118px;
}
@container (min-width:470px){
  .template-v2-group-controls{
    grid-template-columns:minmax(118px,140px) auto 36px;
  }
}


@media (max-width:760px){
  .template-v2-layout-grid,
  .template-v2-layout-headings{
    grid-template-columns:minmax(0,1fr);
  }
  .template-v2-layout-headings>span:last-child{display:none}
  .template-v2-layout-grid>.template-v2-group{
    grid-column:1!important;
  }
}

/* R3B-G4C1-HF9 — manual zoom keeps the requested working size; stage/canvas overflow is owned by the canonical preview block above. */

/* G4C2-HF2: giữ modifier {bien,N} khi chuyển mẫu Điện thoại cũ sang Structured V2. */
.salary-structured-slip__row.is-wrapped strong{white-space:pre-line;overflow-wrap:anywhere;max-width:min(38rem,55vw)}
@media(max-width:760px){.salary-structured-slip__row.is-wrapped strong{max-width:none}}


/* R4B-P0D-HF52 — value + secondary fact in one readable salary-slip row. */
.salary-structured-slip__value{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;min-width:0;text-align:right}
.salary-structured-slip__value>strong{white-space:nowrap}
.salary-structured-slip__value>small{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px solid rgba(74,222,128,.38);border-radius:999px;color:#86efac;background:rgba(22,101,52,.22);font-family:var(--ui-font-family,system-ui,sans-serif);font-size:.68rem;font-weight:800;line-height:1.15;white-space:nowrap;text-transform:none}
.salary-structured-slip--light .salary-structured-slip__value>small{border-color:#86efac;color:#166534;background:#f0fdf4}
@media(max-width:520px){.salary-structured-slip__value{flex-wrap:wrap;gap:4px 8px}.salary-structured-slip__value>small{margin-left:auto}}


/* R4B-P0D-HF54 — readable salary slip on web for both Phone and Tile payroll. */
.salary-slip-page .salary-structured-slip__section h2 { font-size: .95rem; }
.salary-slip-page .salary-structured-slip__row {
  padding-block: 9px;
  font-size: .96rem;
  line-height: 1.45;
}
.salary-slip-page .salary-structured-slip__list li { font-size: .92rem; line-height: 1.45; }
.salary-slip-page .salary-structured-slip__footer { font-size: .82rem; }
@container (max-width:480px){
  .salary-slip-page .salary-structured-slip__section h2{font-size:.78rem}
  .salary-slip-page .salary-structured-slip__row{font-size:.82rem;line-height:1.4}
  .salary-slip-page .salary-structured-slip__list li{font-size:.76rem}
  .salary-slip-page .salary-structured-slip__grand-total{font-size:.82rem}
  .salary-slip-page .salary-structured-slip__footer{font-size:.68rem}
}

/* POST-B2 Phone salary capture readability — larger, denser typography without changing slip layout. */
.salary-structured-slip-host>.salary-structured-slip{
  font-family:var(--ui-font-family,system-ui,-apple-system,"Segoe UI",sans-serif);
}
.salary-structured-slip-host .salary-structured-slip__section{
  padding-inline:24px;
}
.salary-structured-slip-host .salary-structured-slip__section h2{
  font-size:1rem;
  line-height:1.3;
  letter-spacing:.025em;
}
.salary-structured-slip-host .salary-structured-slip__row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding-block:7px;
  font-size:1.05rem;
  line-height:1.46;
  letter-spacing:-.01em;
}
.salary-structured-slip-host .salary-structured-slip__row>span{
  font-weight:600;
}
.salary-structured-slip-host .salary-structured-slip__row strong,
.salary-structured-slip-host .salary-structured-slip__value>strong{
  font-size:1.03em;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.salary-structured-slip-host .salary-structured-slip__list li{
  gap:12px;
  font-size:1rem;
  line-height:1.46;
}
.salary-structured-slip-host .salary-structured-slip__grand-total{
  font-size:1rem;
}
.salary-structured-slip-host .salary-structured-slip__footer{
  font-size:.86rem;
  line-height:1.45;
}
@container (max-width:480px){
  .salary-structured-slip-host .salary-structured-slip__section{padding-inline:14px}
  .salary-structured-slip-host .salary-structured-slip__section h2{font-size:.95rem}
  .salary-structured-slip-host .salary-structured-slip__row{gap:9px;padding-block:7px;font-size:.96rem;line-height:1.44}
  .salary-structured-slip-host .salary-structured-slip__list li{font-size:.92rem;line-height:1.44}
  .salary-structured-slip-host .salary-structured-slip__grand-total{font-size:.94rem}
  .salary-structured-slip-host .salary-structured-slip__footer{font-size:.76rem}
}

/* R4B-P0D-HF65/HF68 — Template Studio UX: disclosure Global, action dock đáy và kho trường dễ hiểu. */
.print-template-list-strip.ui-disclosure{
  margin:0;
}
.print-template-list-strip>.ui-disclosure__summary{
  min-height:74px;
}
.print-template-list-header .ui-eyebrow{
  margin-bottom:0;
}
.print-template-list-body{
  min-width:0;
}

.template-studio__editor{overflow:visible}
.template-editor-action-dock{
  margin-top:14px;
}
.template-editor-action-dock.is-docked{
  min-height:var(--ui-salary-dock-height,72px);
}
.template-editor-savebar{
  min-height:64px;
  padding:10px 12px;
  border-color:#cddcf1;
  border-radius:13px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.template-editor-action-dock.is-docked .template-editor-savebar{
  box-shadow:0 -14px 34px rgba(16,36,64,.16);
}
.template-editor-savebar__status{
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:2px 8px;
  min-width:0;
}
.template-editor-savebar__status strong{
  overflow:hidden;
  color:#153d78;
  font-size:.82rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.template-editor-savebar__status small{
  grid-column:2;
  overflow:hidden;
  color:#64748b;
  font-size:.7rem;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.template-editor-savebar__dot{
  grid-row:1/3;
  align-self:center;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.12);
}
.template-editor-savebar.is-dirty{
  border-color:#f0bd67;
  background:#fffbeb;
}
.template-editor-savebar.is-dirty .template-editor-savebar__dot{
  background:#d97706;
  box-shadow:0 0 0 4px rgba(217,119,6,.13);
}
.template-editor-savebar.is-dirty .template-editor-savebar__status strong{color:#8a4a05}
.template-editor-savebar__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 0 auto;
}
.template-editor-savebar__actions .button{min-height:36px;white-space:nowrap}

.template-studio__code-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid #d7e3f3;
  border-radius:10px;
  background:#f8fbff;
  color:#40546f;
  font-size:.74rem;
  font-weight:800;
  cursor:pointer;
}
.template-studio__code-toggle input{width:17px;height:17px;margin:0;flex:0 0 auto}
.template-v2-variable__usage{
  justify-self:start;
  padding:2px 6px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.62rem;
  font-weight:800;
  line-height:1.3;
}
.template-v2-variable__usage.is-used{
  background:#e7f8ef;
  color:#137347;
}
.template-v2-variable.is-used{
  border-color:#b8ddca;
  background:#fbfffd;
}
.template-studio:not(.show-technical-codes) .template-v2-variable__text code,
.template-studio:not(.show-technical-codes) .template-v2-row-summary code{display:none}
.template-v2-variable__text{gap:4px}

.template-v2-canvas{
  border-color:#d6e1ef;
  background:#f5f8fc;
}
.template-v2-group{
  border-color:#d4dfed;
  background:#fbfcfe;
  box-shadow:0 2px 7px rgba(15,23,42,.035);
}
.template-v2-row{
  border-color:#e5ebf3;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
}
.template-v2-row-remove{
  display:grid;
  place-items:center;
  width:32px;
  min-width:32px!important;
  height:32px;
  padding:0!important;
}
@media (max-width:760px){
  .template-editor-savebar{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .template-editor-savebar__status strong,
  .template-editor-savebar__status small{white-space:normal}
  .template-editor-savebar__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .template-editor-savebar__actions [data-template-save-button]{grid-column:1/-1}
  .template-editor-savebar__actions .button{width:100%}
}

@media (min-width:1181px) and (max-width:1380px){
  .template-studio{
    grid-template-columns:minmax(0,1.12fr) 10px minmax(380px,.88fr);
    gap:0;
  }
  .template-studio__library{grid-column:1/-1;margin-bottom:14px}
  .template-studio__library-content{height:auto;max-height:320px}
  .template-v2-library-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
  }
  [data-template-splitter="library-editor"]{display:none}
  .template-studio__editor{grid-column:1}
  [data-template-splitter="editor-preview"]{grid-column:2}
  .template-studio__preview{grid-column:3}
  .template-studio__collapse{display:none}
  .template-studio.is-library-collapsed .template-studio__library-content{display:grid}
  .template-studio.is-library-collapsed .template-studio__pane-header>div{display:block}
  .template-studio__collapsed-label{display:none!important}
}

/* R4B-P0D-HF87C-HF3 — Structured Template text rows must never overflow into another column. */
.salary-structured-slip__row.is-text-value .salary-structured-slip__value>strong{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.salary-structured-slip__row.is-money-value .salary-structured-slip__value>strong{
  white-space:nowrap;
}
.salary-structured-slip__row.is-wrapped{
  grid-template-columns:minmax(0,1fr);
  gap:4px;
}
.salary-structured-slip__row.is-wrapped .salary-structured-slip__value{
  width:100%;
  max-width:none;
  justify-content:flex-start;
  text-align:left;
}
.salary-structured-slip__row.is-wrapped .salary-structured-slip__value>strong{
  max-width:100%;
  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

/* HF97.11B.7 — explicit Shared / Personal template contexts and 3-tier studio hierarchy. */
.template-context-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-color:#cfe0f7;
  background:linear-gradient(135deg,#fbfdff,#f4f8ff);
}
.template-context-banner.is-personal{border-color:#f1d39a;background:linear-gradient(135deg,#fffdf8,#fff8ea)}
.template-context-banner__main{display:flex;align-items:flex-start;gap:13px;min-width:0}
.template-context-banner__main>div{display:grid;gap:3px;min-width:0}
.template-context-banner__main h2{margin:0;color:#102445;font-size:1.18rem;line-height:1.2}
.template-context-banner__main p{margin:0;color:#5b6c84;font-size:.78rem;line-height:1.45}
.template-context-banner__facts{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;flex:0 1 auto}
.template-context-banner__facts>span{display:grid;gap:1px;min-width:116px;padding:8px 10px;border:1px solid #d8e4f3;border-radius:10px;background:#fff}
.template-context-banner__facts small{color:#718096;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.template-context-banner__facts strong{color:#17365f;font-size:.8rem}

.template-tier-one{margin-top:0!important}
.template-tier-one .print-template-list-body{display:grid;gap:10px}
.print-template-catalog-toolbar{padding:2px 0 4px}
.print-template-list-scroll{max-height:420px;overflow:auto}

.template-context-workspace{display:block;min-width:0}
.template-context-editor-form{display:block;min-width:0}
.template-tier-two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}
.template-edit-summary,
.template-preview-context-card{min-width:0;margin:0}
.template-edit-summary>.ui-disclosure__summary{min-height:92px}
.template-edit-summary__header>span:first-child{display:grid;gap:3px;min-width:0}
.template-edit-summary__header>span:first-child>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-edit-summary>.ui-disclosure__content{padding:12px 14px 14px}
.template-edit-summary .template-studio__meta{padding:0}
.template-meta-scope-note{display:grid;gap:4px;align-content:center;min-height:44px;padding:8px 10px;border:1px solid #f0d39a;border-radius:10px;background:#fff9ec}
.template-meta-scope-note span{color:#8a5a09;font-size:.68rem;font-weight:800}
.template-meta-scope-note strong{color:#734509;font-size:.82rem}

.template-preview-context-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-color:#d4e1f3;background:#fbfdff}
.template-preview-context-card.is-personal{border-color:#efd49e;background:#fffdf8}
.template-preview-context-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #dbe5f3}
.template-preview-context-card>header>div{display:grid;gap:3px;min-width:0}
.template-preview-context-card h2{margin:0;color:#102445;font-size:1.05rem;line-height:1.2}
.template-preview-context-card p{margin:0;color:#64748b;font-size:.74rem;line-height:1.45}
.template-device-toolbar--context{align-content:start;border:0;background:transparent}
.template-device-toolbar--context .template-device-toolbar__refresh{align-self:end}
.template-preview-owner-lock{display:grid;gap:2px;align-content:center;padding:8px 10px;border:1px solid #d9e4f2;border-radius:10px;background:#fff}
.template-preview-owner-lock span{color:#64748b;font-size:.68rem;font-weight:800}
.template-preview-owner-lock strong{color:#17365f;font-size:.85rem}
.template-preview-owner-lock small{color:#7b8798;font-size:.65rem}

.template-tier-three{margin-top:14px}
.template-designer-header{border-bottom:1px solid #dbe5f3}
.template-tier-three .template-studio__editor>.template-v2-mode-switch{margin:14px 16px 0}
.template-tier-three .template-studio__editor>.template-v2-canvas{margin:12px 16px 0}
.template-tier-three .template-editor-action-dock{margin:14px 16px 16px}
.template-rendered-preview-header{border-bottom:1px solid #dbe5f3;background:#fff}

@media (max-width:1180px){
  .template-context-banner{align-items:stretch;flex-direction:column}
  .template-context-banner__facts{justify-content:flex-start}
  .template-tier-two{grid-template-columns:1fr}
  .template-preview-context-card>header{flex-wrap:wrap}
}
@media (max-width:760px){
  .template-context-banner{padding:13px}
  .template-context-banner__main{flex-direction:column}
  .template-context-banner__facts{display:grid;grid-template-columns:1fr}
  .template-context-banner__facts>span,.template-context-banner__facts .button,.template-context-banner__facts form,.template-context-banner__facts form .button{width:100%}
  .template-preview-context-card>header{display:grid}
  .template-device-toolbar--context{grid-template-columns:1fr}
  .template-device-toolbar--context>*{grid-column:auto!important}
  .print-template-list-scroll{max-height:360px}
}

/* POST-B2 DT print R2 — editor-owned full-width summary group. */
.salary-structured-slip__section--summary{
  grid-column:1/-1;
  padding:24px 28px 26px;
  border-right:0!important;
  background:linear-gradient(180deg,rgba(15,118,110,.055),rgba(15,23,42,0));
}
.salary-structured-slip__section--summary>h2{
  margin-bottom:12px;
  border-bottom:0;
  text-align:center;
  font-family:var(--ui-font-family,system-ui,sans-serif);
  font-size:.86rem;
  letter-spacing:.06em;
}
.salary-structured-slip__summary-hero{
  display:grid;
  max-width:680px;
  margin:0 auto 10px;
}
.salary-structured-slip__summary-hero .salary-structured-slip__row.is-final{
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  gap:5px;
  margin:0;
  padding:15px 18px;
  text-align:center;
}
.salary-structured-slip__summary-hero .salary-structured-slip__row.is-final span{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.salary-structured-slip__summary-hero .salary-structured-slip__value{
  justify-content:center;
  width:100%;
  text-align:center;
}
.salary-structured-slip__summary-hero .salary-structured-slip__row.is-final strong{
  font-size:1.65rem;
}
.salary-structured-slip__summary-support{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
  max-width:820px;
  margin:0 auto;
}
.salary-structured-slip__summary-support>.salary-structured-slip__row,
.salary-structured-slip__summary-support>.salary-structured-slip__list{
  min-width:0;
}
.template-v2-group.is-summary{
  grid-column:1/-1!important;
  border-color:#67a98c;
  background:linear-gradient(180deg,#f3fff9,#f8fffc);
}
.template-v2-group.is-summary .template-v2-group-head{
  border-bottom-color:#b9dfcd;
}
@media(max-width:620px){
  .salary-structured-slip__section--summary{padding:18px 16px 20px}
  .salary-structured-slip__summary-support{grid-template-columns:minmax(0,1fr);column-gap:0}
  .salary-structured-slip__summary-hero .salary-structured-slip__row.is-final strong{font-size:1.3rem}
}

/* POST-B2 structured print H3 — one global card language plus optional semantic equal-height pairs. */
.salary-structured-slip__columns{
  gap:14px;
  padding:14px;
  background:rgba(2,6,23,.10);
}
.salary-structured-slip__lane-pair{
  gap:14px;
}
.salary-structured-slip__lane{
  gap:14px;
}
.salary-structured-slip__lane--left{
  border-right:0;
}
.salary-structured-slip__section:not(.salary-structured-slip__section--summary){
  padding:17px 18px;
  border:1px solid rgba(148,163,184,.20);
  border-radius:14px;
  background:rgba(255,255,255,.022);
  box-shadow:0 1px 0 rgba(255,255,255,.022) inset;
}
.salary-structured-slip--light .salary-structured-slip__section:not(.salary-structured-slip__section--summary){
  background:rgba(248,250,252,.82);
  border-color:rgba(148,163,184,.30);
}
.salary-structured-slip__lane>.salary-structured-slip__section+.salary-structured-slip__section{
  border-top:1px solid rgba(148,163,184,.20);
}
.salary-structured-slip__columns>.salary-structured-slip__section--full:not(.salary-structured-slip__section--summary){
  border-top:1px solid rgba(148,163,184,.20);
  border-bottom:1px solid rgba(148,163,184,.20);
}
.salary-structured-slip__section:not(.salary-structured-slip__section--summary)>h2{
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(226,232,240,.20);
  font-size:.88rem;
  letter-spacing:.045em;
}
.salary-structured-slip--light .salary-structured-slip__section:not(.salary-structured-slip__section--summary)>h2{
  border-bottom-color:rgba(100,116,139,.24);
}
.salary-structured-slip__section:not(.salary-structured-slip__section--summary) .salary-structured-slip__row.is-total{
  margin-top:9px;
  padding-top:11px;
  border-top:1px solid rgba(226,232,240,.28);
}
.salary-structured-slip--light .salary-structured-slip__section:not(.salary-structured-slip__section--summary) .salary-structured-slip__row.is-total{
  border-top-color:rgba(100,116,139,.30);
}
.salary-structured-slip__section:not(.salary-structured-slip__section--summary) .salary-structured-slip__rows{
  gap:3px;
}
.salary-structured-slip__lane-pair--balanced{
  align-items:stretch;
}
.salary-structured-slip__lane-pair--balanced>.salary-structured-slip__lane{
  display:flex;
  flex-direction:column;
  align-content:initial;
}
.salary-structured-slip__lane-pair--balanced>.salary-structured-slip__lane>.salary-structured-slip__section{
  flex:1 1 auto;
  height:100%;
}
.template-v2-lane-pair.is-balanced{
  align-items:stretch;
}
.template-v2-lane-pair.is-balanced>.template-v2-lane{
  display:flex;
  flex-direction:column;
}
.template-v2-lane-pair.is-balanced>.template-v2-lane>.template-v2-group{
  flex:1 1 auto;
  height:100%;
}
.template-v2-group-balance-check{
  white-space:nowrap;
}
.template-v2-group-balance-check input:disabled+*{
  opacity:.55;
}
@media(max-width:760px){
  .salary-structured-slip__columns{
    gap:11px;
    padding:11px;
  }
  .salary-structured-slip__lane-pair,
  .salary-structured-slip__lane{
    gap:11px;
  }
  .salary-structured-slip__section:not(.salary-structured-slip__section--summary){
    padding:15px 13px;
    border-radius:12px;
  }
  .salary-structured-slip__lane-pair--balanced>.salary-structured-slip__lane{
    display:contents;
  }
  .salary-structured-slip__lane-pair--balanced>.salary-structured-slip__lane>.salary-structured-slip__section,
  .template-v2-lane-pair.is-balanced>.template-v2-lane>.template-v2-group{
    height:auto;
    flex:none;
  }
  .template-v2-lane-pair.is-balanced>.template-v2-lane{
    display:grid;
  }
}
@media print{
  .salary-structured-slip__section:not(.salary-structured-slip__section--summary){
    box-shadow:none;
    background:transparent;
    border-color:rgba(15,23,42,.24);
  }
}