.mark-workspace .file-area {
  padding: 22px;
}
.mark-filesbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-height: 50px;
  margin-bottom: 12px;
}
.mark-filesbar > .pdf-uploader-actions {
  position: relative;
  inset: auto;
  margin: 0 8px;
}
.mark-filesbar select,
.mark-sign nav select {
  max-width: 250px;
  border: 1px solid #d4d4df;
  background: white;
  border-radius: 4px;
  padding: 6px;
  font: inherit;
}
.mark-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.mark-tile {
  width: 170px;
  height: 222px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d7d7e0;
  border-radius: 8px;
}
.mark-tile img {
  max-width: 142px;
  height: 183px;
  object-fit: contain;
  box-shadow: 0 1px 5px #0002;
}
.mark-tile small {
  padding-top: 8px;
}
.mark-options,
.sign-options {
  padding: 18px 24px;
}
.mark-options label,
.sign-options label,
.mark-dialog label {
  display: block;
  font-size: 15px;
  margin: 12px 0 6px;
}
.mark-options select,
.mark-options input:not([type='checkbox']),
.sign-options select,
.mark-dialog label input:not([type='checkbox']):not([type='radio']),
.mark-dialog input[name='range'] {
  display: block;
  width: 100%;
  border: 1px solid #b8b8c5;
  border-radius: 5px;
  background: white;
  padding: 9px;
  font: inherit;
  margin-top: 6px;
}
.mark-options input[type='color'] {
  height: 38px;
}
.mark-pair,
.mark-layers,
.mark-tabs,
.mark-formats,
.mark-format-detail {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mark-pair > *,
.mark-layers > *,
.mark-tabs > * {
  flex: 1;
  min-width: 0;
}
.mark-tabs button,
.mark-layers button,
.mark-formats button,
.mark-format-detail button,
.sig-field-tool,
.sig-samples button,
.sig-who button {
  padding: 10px;
  border: 1px solid #d6d6df;
  background: #f5f5fa;
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}
.mark-tabs .on,
.mark-layers .on,
.mark-formats .on,
.sig-samples .on {
  border-color: #e5322d;
  color: #d92b25;
}
.mark-formats label {
  margin: 0;
  font-size: 12px;
}
.mark-formats select {
  min-width: 80px;
}
.mark-format-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mark-options .mark-check,
.mark-dialog .mark-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mark-check input {
  accent-color: #e5322d;
}
.wm-anchor {
  width: 90px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
}
.wm-anchor button {
  height: 26px;
  border: 1px solid #b0b0bb;
  border-radius: 2px;
  background: white;
}
.wm-anchor button.on {
  background: #e5322d;
}
.wm-logo,
.mark-compose img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}
.mark-error {
  color: #ae2824;
}
.mark-zoom img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.mark-dialog {
  width: min(610px, 94vw);
  max-height: 88vh;
  overflow: auto;
  color: #33333b;
}
.mark-dialog h2 {
  text-align: center;
}
.mark-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.mark-dialog footer button {
  padding: 10px 20px;
  border-radius: 6px;
}
.mark-dialog [hidden] {
  display: none !important;
}
.mark-compose {
  margin: 12px 0;
}
.mark-compose canvas {
  width: 100%;
  height: auto;
  touch-action: none;
  border: 1px solid #cacad3;
  background: white;
}
.sig-samples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sig-samples button {
  font-size: 24px;
  overflow: hidden;
}
.mark-colors {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.mark-colors button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid white;
}
.mark-colors .on {
  outline: 1px solid #333;
}
.sig-who {
  display: flex;
  gap: 10px;
}
.sig-who button {
  flex: 1;
  min-height: 88px;
}
.sig-who small {
  display: block;
  margin-top: 6px;
}
.mark-sign {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) clamp(320px, 28vw, 440px);
  height: calc(100dvh - 60px);
  min-height: 350px;
  background: #f5f5fa;
}
.mark-sign nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  overflow: hidden;
  border-right: 1px solid #d4d4de;
}
.mark-sign nav strong {
  font-size: 14px;
}
.mark-sign nav select {
  max-width: 100%;
  margin: 8px 0;
}
.sig-thumbs {
  width: 100%;
  overflow: auto;
  flex: 1;
}
.sig-thumbs button {
  display: block;
  width: 100%;
  padding: 6px;
  background: transparent;
}
.sig-thumbs img {
  width: 75%;
  height: 94px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  box-shadow: 0 1px 4px #0002;
}
.sig-thumbs .on {
  background: #e5e5ef;
}
.sig-center {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sig-center .mark-filesbar {
  margin: 0;
  min-height: 48px;
}
.sig-page-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 10px 16px;
}
.sig-sheet {
  position: relative;
  min-height: 60px;
  margin: auto;
  background: white;
  box-shadow: 0 2px 8px #0002;
}
.sig-sheet > img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sig-field {
  position: absolute;
  touch-action: none;
  cursor: move;
  outline: 1px dashed #5581a9;
}
.sig-field.selected {
  outline: 2px solid #4084b9;
}
.sig-field > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.sig-field-actions {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  display: flex;
  background: white;
  border: 1px solid #ccc;
  z-index: 2;
}
.sig-field-actions button {
  padding: 2px 6px;
  font-size: 15px;
}
.sig-resize {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  background: #4084b9;
  cursor: nwse-resize;
}
.sig-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
}
.sig-view button,
.mark-filesbar > button,
.mark-link {
  background: #fff;
  border: 1px solid #d5d5df;
  padding: 5px 9px;
  border-radius: 5px;
}
.sig-view input {
  width: 47px;
}
.mark-sign .options-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: white;
  border-left: 1px solid #d5d5df;
  padding: 0;
}
.mark-sign .options-panel h1 {
  text-align: center;
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding: 16px;
  font-size: 22px;
}
.sign-options {
  overflow: auto;
  flex: 1;
}
.sign-options h3 {
  font-size: 15px;
  margin: 18px 0 8px;
}
.sig-field-tool {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  margin: 4px 0;
  cursor: grab;
}
.mark-sign .process-button {
  margin: 12px 20px;
  padding: 16px;
  font-size: 21px;
}
.mark-sign .pdf-message {
  margin: 3px 12px;
}
.mark-link {
  margin: 4px 4px 4px 0;
}
.sig-field-tool small {
  color: #777;
}
.mark-workspace .pdf-message {
  margin: 4px 20px;
}
.mark-dialog .secondary {
  background: #fff;
}
.mark-options button:focus-visible,
.sign-options button:focus-visible,
.sig-field:focus-visible {
  outline: 2px solid #246ea5;
}
@media (max-width: 760px) {
  .mark-sign {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(235px, 1fr) auto;
    height: auto;
    min-height: calc(100vh - 56px);
  }
  .mark-sign nav {
    display: flex;
    flex-direction: row;
    border: 0;
    padding: 3px 8px;
    grid-row: 1;
    min-height: 34px;
  }
  .mark-sign nav strong,
  .sig-thumbs {
    display: none;
  }
  .mark-sign {
    grid-template-rows: 40px minmax(340px, 60vh) auto;
  }
  .mark-sign .options-panel {
    max-height: 50vh;
  }
  .mark-sign .sig-view {
    gap: 4px;
  }
  .mark-gallery {
    gap: 5px;
  }
  .mark-tile {
    width: 130px;
    height: 174px;
  }
  .mark-tile img {
    height: 146px;
    max-width: 115px;
  }
  .mark-filesbar select {
    max-width: 145px;
  }
}

.mark-filesbar > .pdf-uploader-actions {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 44px;
  height: 44px;
  margin: 0;
  z-index: 5;
}
.mark-filesbar .add-file {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  min-width: 42px;
  margin: 0;
  padding: 0;
  font-size: 28px;
}
.mark-filesbar .pdf-count-badge {
  top: -5px;
  left: -6px;
  width: 21px;
  height: 21px;
  font-size: 11px;
}
.mark-filesbar .pdf-source-menu {
  position: absolute;
  left: 3px;
  top: 42px;
  padding-top: 6px;
  display: none;
  margin: 0;
}
.mark-filesbar .pdf-uploader-actions:hover .pdf-source-menu,
.mark-filesbar .pdf-uploader-actions:focus-within .pdf-source-menu {
  display: flex;
}
.sig-center .mark-filesbar > .pdf-uploader-actions {
  right: 14px;
}
.mark-sign .sig-center {
  min-height: 0;
}
.mark-tile {
  width: 194px;
  height: 244px;
}
.mark-tile img {
  height: 191px;
  max-width: 159px;
}
.mark-workspace .mark-filesbar {
  padding-right: 50px;
}
.mark-tile[aria-busy='true'] img:not([src]) {
  visibility: hidden;
}
@media (max-width: 760px) {
  .mark-tile {
    width: 130px;
    height: 174px;
  }
  .mark-tile img {
    height: 146px;
    max-width: 115px;
  }
}
.mark-sign .process-button {
  width: calc(100% - 40px);
  flex: none;
}
.mark-sign .sig-center,
.mark-sign .options-panel,
.mark-sign nav {
  min-width: 0;
}
.mark-sign .sig-view {
  flex: none;
}
.number-modes,.number-layout{display:flex;gap:12px;align-items:flex-start}.number-modes label{flex:1;display:flex;align-items:center;gap:6px;margin:6px 0}.number-modes input{width:auto;accent-color:#e5322d}.number-layout>div,.number-layout>label{flex:1;min-width:0}.number-layout .wm-anchor{max-width:110px}.number-layout .wm-anchor button{min-height:22px}.mark-options input[type=range]{accent-color:#e5322d}
.number-file-note{text-align:center;color:#595963;font-size:14px}
.mark-gallery.number-facing{display:grid;grid-template-columns:repeat(2,minmax(0,170px));justify-content:center}.number-facing .mark-tile{width:100%}.number-facing.number-cover .mark-tile:first-child{grid-column:2}.mark-tile img:not([src]){visibility:hidden}
.mark-options .number-modes label{display:flex;align-items:center;margin:8px 0;gap:7px}.mark-options .number-modes input[type=radio]{flex:0 0 16px;width:16px;height:16px;margin:0;padding:0}

/* Đối chiếu iLovePDF 09/11/2026 — đánh số trang & dấu bản quyền */
.mark-workspace .options-panel{width:440px;flex:0 0 440px}
@media (max-width:1440px){.mark-workspace .options-panel{width:380px;flex-basis:380px}}
.mark-workspace .options-panel h1{font-size:24px;font-weight:600;color:#161616}
.mark-workspace .mark-options{padding:18px 24px}
.mark-workspace .mark-options>label:not(.mark-check),.mark-workspace .number-layout label,.mark-workspace .number-layout>div>label,.mark-workspace .mark-options>p{font-size:15px;font-weight:500;color:#161616;margin:20px 0 8px}
.mark-workspace .mark-options>label:first-child{margin-top:4px}
/* Thanh tệp: thẻ trắng có select + thùng rác */
.mark-workspace .mark-filesbar{margin:40px 0 50px}
.mark-workspace .mark-filesbar>label{display:flex;align-items:center;gap:0;background:#fff;border-radius:8px 0 0 8px;box-shadow:0 0 8px #00000014;padding:10px 0 10px 18px;font-size:0;margin:0}
.mark-workspace .mark-filesbar>label select{font-size:15px;color:#47474f;border:1px solid #47474f;border-radius:4px;padding:6px 10px;min-width:133px;margin:0}
.mark-workspace .mark-filesbar>button[data-mark=remove]{height:56px;width:44px;margin-left:-10px;background:#fff;border:0;border-radius:0 8px 8px 0;box-shadow:4px 0 8px -4px #00000014;color:#161616;display:grid;place-items:center;cursor:pointer;position:relative}
.mark-workspace .mark-filesbar>button[data-mark=remove]::before{content:'';position:absolute;left:0;top:14px;bottom:14px;border-left:1px solid #dcdce4}
.mark-workspace .mark-filesbar>button[data-mark=remove]:hover{color:#e5322d}
.mark-workspace .mark-filesbar>.pdf-uploader-actions{position:absolute;right:0;top:-18px;margin:0}
/* Trang thu nhỏ như iLovePDF: thẻ trắng, không nhãn số, đổ bóng nhẹ */
.mark-workspace .mark-gallery{gap:26px;padding:0 4px}
.mark-workspace .mark-tile{width:200px;height:246px;border:1px solid transparent;border-radius:8px;box-shadow:0 0 8px #00000014;background:#fdfdfd;transition:border-color .15s}
.mark-workspace .mark-tile:hover{border-color:#9999a2}
.mark-workspace .mark-tile img{max-width:130px;height:186px;box-shadow:0 0 5px 2px #0000000a}
.mark-workspace[data-tool=numbers] .mark-tile small{display:none}
/* Chế độ trang: thẻ biểu tượng */
.mark-workspace .number-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mark-workspace .mark-options .number-modes label.number-mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:74px;margin:0;border:1px solid #dcdce4;border-radius:8px;background:#fff;color:#707078;font-size:15px;font-weight:400;cursor:pointer;transition:border-color .15s,background .15s}
.mark-workspace .number-mode input{position:absolute;opacity:0;pointer-events:none}
.mark-workspace .number-mode:hover{border-color:#9999a2}
.mark-workspace .number-mode:has(input:checked){background:#f5f5fa;border-color:#47474f;color:#161616;font-weight:500}
.mark-workspace .number-mode:has(input:focus-visible){outline:2px solid #4c9ffe;outline-offset:2px}
/* Vị trí: trang thu nhỏ có đường kẻ đứt, chấm đỏ */
.mark-workspace[data-tool=numbers] .number-layout{gap:52px}
.mark-workspace[data-tool=numbers] .number-layout>div{flex:0 0 70px}
.mark-workspace .wm-anchor{width:70px;height:76px;gap:0;border:1px solid #c2c2cc;background:#fff}
.mark-workspace .wm-anchor button{height:auto;min-height:0;border:0;border-radius:0;border-right:1px dashed #c2c2cc;border-bottom:1px dashed #c2c2cc;background:#fff;position:relative;cursor:pointer;padding:0}
.mark-workspace .wm-anchor button:nth-child(3n){border-right:0}
.mark-workspace .wm-anchor button:nth-child(n+7){border-bottom:0}
.mark-workspace .wm-anchor button:hover{background:#fdecec}
.mark-workspace .wm-anchor button.on{background:#fbd6d5}
.mark-workspace .wm-anchor button.on::after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;background:#e5322d}
/* Ô nhập dạng nhóm: nhãn bên trái, số canh phải */
.mark-workspace .mark-options label:has(>input[type=number]){display:inline-flex;align-items:center;border:1px solid #47474f;border-radius:4px;background:#fff;margin:0;font-size:15px;font-weight:500;padding-left:8px;height:38px;overflow:hidden}
.mark-workspace .mark-options label>input[type=number]{width:72px;border:0;border-left:1px solid #c2c2cc;border-radius:0;margin:0 0 0 8px;height:100%;text-align:right;padding:0 6px}
.mark-workspace .mark-pair{display:flex;gap:16px;justify-content:flex-start}
.mark-workspace .mark-pair>*{flex:0 0 auto}
.mark-workspace .mark-pair label>input[type=number]{width:56px}
/* Select phẳng */
.mark-workspace .mark-options select{border:1px solid #47474f;border-radius:4px;height:36px;padding:0 12px;color:#47474f;font-size:15px}
/* Thanh định dạng chữ */
.mark-workspace .mark-formats{background:#f5f5fa;border-radius:6px;padding:6px 14px;gap:14px}
.mark-workspace .mark-formats label{font-size:0;margin:0}
.mark-workspace .mark-formats select{height:26px;min-width:56px;width:auto;font-size:12px;padding:0 4px;margin:0;border-color:#161616;color:#161616}
.mark-workspace .mark-formats button{background:transparent;border:0;padding:4px 6px;font-size:16px;color:#161616;border-radius:4px}
.mark-workspace .mark-formats button:hover{background:#e6e6ee}
.mark-workspace .mark-formats .on{background:#e1e1ea;color:#161616}
.pdf-live .selection-shell.mark-workspace{grid-template-columns:minmax(0,1fr) 440px}
@media (max-width:1440px){.pdf-live .selection-shell.mark-workspace{grid-template-columns:minmax(0,1fr) 380px}}
.mark-workspace .options-panel{width:auto;flex:none}
.mark-workspace .mark-options .number-modes label.number-mode:has(input:checked){background:#f5f5fa;border-color:#47474f;color:#161616;font-weight:500}
.mark-workspace .mark-options .mark-formats select{width:auto;display:inline-block}
.mark-workspace .mark-options select{font-size:14px;padding:0 8px}
.mark-workspace .process-button{display:flex;align-items:center;justify-content:center;gap:16px}
.mark-workspace .mark-formats>label{flex:none}.mark-workspace .mark-formats [data-style=italic] i{font-family:Georgia,serif;font-style:italic}
.mark-workspace .mark-tile small{display:none}
/* Tab văn bản / ảnh như iLovePDF: biểu tượng + gạch chân đỏ, tràn sát mép panel */
.mark-workspace .mark-options .mark-tabs{margin:-18px -24px 8px;gap:0;border-bottom:1px solid #e3e3ea}
.mark-workspace .mark-options .mark-tabs button{display:flex;flex-direction:column;align-items:center;gap:8px;height:86px;justify-content:center;border:0;border-radius:0;background:transparent;color:#85858e;font-size:15px;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .15s}
.mark-workspace .mark-options .mark-tabs button:hover{color:#161616}
.mark-workspace .mark-options .mark-tabs .on{color:#161616;font-weight:600;border-bottom-color:#e5322d}
/* Vị trí + ghép mảnh cùng hàng */
.mark-workspace .wm-position{display:flex;align-items:flex-start;gap:16px}
.mark-workspace .wm-position .mark-check{margin:4px 0 0!important;font-weight:400!important;font-size:15px;display:flex;align-items:center;gap:10px}
.mark-workspace .wm-position .mark-check input{width:22px;height:22px;margin:0}
.mark-workspace .wm-anchor.tiled button.on::after,.mark-workspace .wm-position:has(input[name=tile]:checked) .wm-anchor{opacity:.45}
/* Độ trong suốt + xoay */
.mark-workspace[data-tool=watermark] .mark-pair:has(select){gap:32px}
.mark-workspace[data-tool=watermark] .mark-pair:has(select)>label{flex:1;margin:12px 0 0}
/* Lớp: thẻ biểu tượng */
.mark-workspace .mark-options .mark-layers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mark-workspace .mark-options .mark-layers button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:90px;padding:8px;border:1px solid #dcdce4;border-radius:8px;background:#fff;color:#707078;font-size:14px;line-height:16px;transition:border-color .15s,background .15s}
.mark-workspace .mark-options .mark-layers button:hover{border-color:#9999a2}
.mark-workspace .mark-options .mark-layers .on{background:#f5f5fa;border-color:#47474f;color:#161616;font-weight:500}
.mark-workspace .options-content{padding-bottom:110px}