/* Đối chiếu iLovePDF — nhóm convert (09/11/2026). Chỉ agent nhóm convert sửa tệp này.
   Đo ở 1440×900: thanh bên 380px (440px từ 1600px), nội dung lùi 24px, thẻ tùy chọn 331px. */

/* ---- Khung làm việc chung: PDF sang JPG, JPG sang PDF, Office sang PDF, HTML ---- */
@media (min-width: 701px) {
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .workspace-top,
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-document-name { display: none; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .file-area { padding: 24px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-uploader-actions { top: 60px; right: 24px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-files { padding-top: 48px; gap: 8px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-file-card { width: 198px; height: 244px; padding: 31px 0 0; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-file-card h3 { position: absolute; bottom: 2px; left: 1px; right: 1px; height: 26px; padding: 4px; margin: 0; line-height: 18px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf],[data-tool=html]) .options-panel { padding: 0 24px 24px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf],[data-tool=html]) .options-panel > h1 { padding: 14px 24px; line-height: 26px; margin-left: -24px; margin-right: -24px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-summary:not(.invalid) { display: none; }
}
@media (min-width: 701px) and (max-width: 1599px) {
  .pdf-live .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf],[data-tool=html]) { grid-template-columns: minmax(0, 1fr) 380px; }
  .pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf],[data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf],[data-tool=html]) .process-button { min-height: 64px; font-size: 22px; padding: 8px 12px; }
}

/* Thẻ tệp Word/PowerPoint/Excel: trang trắng nhỏ với biểu tượng ở giữa (không phóng to biểu tượng). */
.pdf-workspace:is([data-tool=word_pdf],[data-tool=powerpoint_pdf],[data-tool=excel_pdf]) .pdf-file-card .pdf-thumb-rotate img.pdf-source-glyph {
  width: 127px; height: 180px; padding: 61px 43px; box-sizing: border-box; object-fit: contain;
  background: #fff; box-shadow: 0 0 5px 2px #0000000a;
}

/* Nội dung thanh bên lùi 24px như tham chiếu (thẻ rộng 331px ở 1440px). */
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg],[data-tool=jpg_pdf]) .options-content { padding: 16px 24px; }

/* ---- Thẻ chế độ dạng radio (OCR / Trang sang JPG): tiêu đề cạnh nút, mô tả dưới toàn chiều rộng ---- */
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-options { gap: 16px; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center;
  padding: 16px; margin: 0; border: 1px solid #d6d6df; border-radius: 8px; background: #fff; color: #47474f; cursor: pointer;
  transition: border-color .15s ease-out;
}
.pdf-workspace[data-tool=pdf_jpg] .pdf-radio-option + .pdf-radio-option { margin-top: 16px; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option:hover,
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option:has(input:checked) { border-color: #707078; background: #fff; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option > span { display: contents; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid #707078; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer;
}
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option input:checked { border-color: #33333b; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option input:checked::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #33333b; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option input:focus-visible { outline: 2px solid #417cb6; outline-offset: 2px; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option strong { grid-column: 2; font-size: 16px; font-weight: 500; line-height: 22px; color: #47474f; }
.pdf-workspace:is([data-tool=word],[data-tool=powerpoint],[data-tool=excel],[data-tool=pdf_jpg]) .pdf-radio-option small { grid-column: 2; display: block; margin: 2px 0 0; font-size: 14px; line-height: 20px; color: #47474f; }
.pdf-workspace[data-tool=pdf_jpg] .pdf-radio-option small b { font-weight: 500; }

/* ---- Nút lựa chọn dạng thẻ (chất lượng ảnh, hướng trang, lề, bố cục Excel) ---- */
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices { margin: 0 0 16px; }
.pdf-workspace[data-tool=pdf_jpg] .pdf-radio-option + .jpg-choices,
.pdf-workspace[data-tool=pdf_jpg] .jpg-choices { margin-top: 16px; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices legend,
.pdf-workspace[data-tool=jpg_pdf] .jpg-paper,
.pdf-workspace[data-tool=excel] .pdf-option-heading { font-size: 15px; font-weight: 500; line-height: 18px; color: #33333b; margin: 0 0 16px; padding: 0; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices > div { gap: 8px; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices label > span {
  height: 74px; gap: 4px; padding: 8px 12px; border: 1px solid #d6d6df; border-radius: 8px; background: #fff; box-shadow: none; color: #85858e;
  transition: border-color .15s ease-out, background .15s ease-out;
}
.pdf-workspace[data-tool=pdf_jpg] .jpg-choices label > span { height: 52px; gap: 0; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices label:hover > span { border-color: #707078; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices input:checked + span { border-color: #707078; background: #f5f5fa; color: #33333b; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices b { font-size: 14px; font-weight: 400; line-height: 16px; color: #47474f; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices input:checked + span b { font-weight: 500; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices small { font-size: 12px; line-height: 14px; color: #47474f; }
.pdf-workspace:is([data-tool=pdf_jpg],[data-tool=jpg_pdf]) .jpg-choices svg { width: 32px; height: 32px; flex: none; }

/* JPG sang PDF: chọn khổ giấy và ô nối ảnh. */
.pdf-workspace[data-tool=jpg_pdf] .jpg-paper { display: grid; gap: 12px; margin-bottom: 16px; }
.pdf-workspace[data-tool=jpg_pdf] .jpg-paper select {
  height: 36px; padding: 0 36px 0 12px; border: 1px solid #707078; border-radius: 4px; font-size: 14px; font-weight: 400; color: #47474f;
  appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2333333b'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer;
}
.pdf-workspace:is([data-tool=jpg_pdf],[data-tool=html]) :is(.jpg-merge, .html-check) input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border: 1px solid #707078; border-radius: 3px; background: #fff; cursor: pointer; display: grid; place-items: center;
}
.pdf-workspace:is([data-tool=jpg_pdf],[data-tool=html]) :is(.jpg-merge, .html-check) input[type=checkbox]:checked::after {
  content: ''; width: 11px; height: 6px; margin-top: -3px; border: solid #33333b; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.pdf-workspace:is([data-tool=jpg_pdf],[data-tool=html]) :is(.jpg-merge, .html-check) input[type=checkbox]:focus-visible { outline: 2px solid #417cb6; outline-offset: 2px; }
.pdf-workspace[data-tool=jpg_pdf] .jpg-merge { gap: 12px; font-size: 14px; line-height: 22px; color: #47474f; margin-top: 4px; }

/* PDF sang Excel: bố cục một/nhiều trang tính. */
.pdf-workspace[data-tool=excel] .pdf-option-heading { margin-top: 16px; }
.pdf-workspace[data-tool=excel] .pdf-layout-help { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 2px; vertical-align: 1px; border: 1.3px solid #33333b; border-radius: 50%; font-size: 10px; font-weight: 600; line-height: 1; color: #33333b; box-sizing: border-box; cursor: help; }
.pdf-workspace[data-tool=excel] .pdf-mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf-workspace[data-tool=excel] .pdf-mode-buttons button {
  min-height: 34px; height: 34px; padding: 0 12px; font-size: 14px; font-weight: 400; color: #47474f; background: #fff;
  border: 1px solid #d6d6df !important; border-radius: 8px; box-shadow: none; transition: border-color .15s ease-out;
}
.pdf-workspace[data-tool=excel] .pdf-mode-buttons button:hover { border-color: #707078 !important; }
.pdf-workspace[data-tool=excel] .pdf-mode-buttons button.selected { border-color: #707078 !important; background: #f5f5fa; font-weight: 500; color: #47474f; }

/* ---- HTML sang PDF ---- */
.pdf-uploader:has([data-html=add]) .upload-button { margin-top: 30px; }
.pdf-workspace[data-tool=html] .options-content { padding: 16px; }
.pdf-workspace[data-tool=html] .html-options > label:not(.html-check),
.pdf-workspace[data-tool=html] .html-choices legend,
.pdf-workspace[data-tool=html] .html-checks legend { font-size: 15px; font-weight: 500; line-height: 18px; color: #33333b; margin: 0 0 12px; }
.pdf-workspace[data-tool=html] .html-options > label:not(.html-check) { display: block; margin: 12px 0 18px; }
.pdf-workspace[data-tool=html] .html-options select {
  height: 44px; margin-top: 12px; padding: 0 36px 0 12px; border: 1px solid #707078; border-radius: 2px; font-size: 16px; font-weight: 400; color: #47474f;
  appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2333333b'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer;
}
.html-url-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.html-url-field .html-globe { position: absolute; left: 12px; color: #85858e; pointer-events: none; }
.pdf-workspace[data-tool=html] .html-url-row { display: flex; gap: 0; margin-top: 12px; }
.pdf-workspace[data-tool=html] .html-url-row input[name=url] {
  margin: 0; height: 44px; padding: 0 12px 0 36px; border: 1px solid #707078; border-right: 0; border-radius: 2px 0 0 2px; font-size: 16px; font-weight: 400; color: #47474f;
}
.pdf-workspace[data-tool=html] .html-url-row button {
  width: 41px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0 2px 2px 0; background: #e5322d; color: #fff; cursor: pointer; transition: background .15s;
}
.pdf-workspace[data-tool=html] .html-url-row button:hover { background: #bd060a; }
.pdf-workspace[data-tool=html] .html-options hr { margin: 0 -16px 12px; border-top-color: #e3e3ea; }
.pdf-workspace[data-tool=html] .rotate-reset { font-size: 14px; color: #47474f; padding: 0; }
.pdf-workspace[data-tool=html] .html-check { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 16px; font-weight: 400; color: #47474f; }
.html-info {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: -6px; border: 1.5px solid #e5322d; border-radius: 50%; color: #e5322d;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; position: relative; align-self: flex-start; box-sizing: border-box;
}
.html-info:hover::after, .html-info:focus-visible::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: -12px; width: 230px; padding: 8px 10px; border-radius: 4px;
  background: #47474f; color: #fff; font-size: 13px; font-weight: 400; line-height: 18px; white-space: normal; z-index: 9; text-align: left;
}
.pdf-workspace[data-tool=html] .html-choices { gap: 8px; margin: 18px 0; }
.pdf-workspace[data-tool=html] .html-choices button {
  height: 88px; gap: 8px; border: 2px solid transparent; border-radius: 8px; background: #f5f5fa; box-shadow: 0 2px 3px #0002; color: #85858e; font-size: 16px; transition: border-color .15s;
}
.pdf-workspace[data-tool=html] .html-choices button:hover { border-color: #e3e3ea; }
.pdf-workspace[data-tool=html] .html-choices button[aria-pressed=true] { border-color: #e5322d; color: #e5322d; background: #fff; }
.pdf-workspace[data-tool=html] .html-choices button svg { width: 32px; height: 32px; }
.pdf-workspace[data-tool=html] .html-checks { margin-bottom: 96px; }
.pdf-workspace[data-tool=html] .html-actions { position: sticky; bottom: 0; margin: 0 -24px -24px; padding: 24px; background: linear-gradient(#fff0, #fff 24px); }
.pdf-workspace[data-tool=html] .html-actions [data-html=preview] { display: none; }
.pdf-workspace[data-tool=html] .html-actions .process-button { width: 100%; }
.pdf-workspace[data-tool=html] .html-area { padding: 60px 24px 24px; }
.pdf-workspace[data-tool=html] .html-paper { background: #ededed; box-shadow: none; }

/* Hộp thoại "Thêm HTML" */
dialog.html-dialog { width: min(800px, calc(100vw - 32px)); max-width: none; margin: 24px auto auto; padding: 0; border: 0; border-radius: 8px; text-align: left; overflow: visible; }
dialog.html-dialog > h2 { margin: 0; padding: 26px 64px 20px; font-size: 28px; font-weight: 600; line-height: 36px; text-align: center; color: #33333b; }
dialog.html-dialog .pdf-dialog-close { top: 18px; right: 18px; font-size: 32px; color: #161616; }
dialog.html-dialog .html-add-form { margin: 0; }
dialog.html-dialog .html-url-tabs { margin: 32px 64px 0; border-bottom: 1px solid #d6d6df; display: flex; }
dialog.html-dialog .html-url-tab { margin-bottom: -1px; padding: 13px 24px; font-size: 16px; font-weight: 500; color: #161616; border: 1px solid #d6d6df; border-top: 3px solid #e5322d; border-bottom-color: #fff; background: #fff; }
dialog.html-dialog .html-add-form label { display: block; margin: 32px 89px 0; font-size: 16px; font-weight: 500; color: #33333b; text-align: left; }
dialog.html-dialog .html-url-field { margin-top: 10px; }
dialog.html-dialog .html-url-field input[name=url] { margin: 0; height: 44px; padding: 0 12px 0 36px; border: 1px solid #c2c2cc; border-radius: 2px; font-size: 16px; font-weight: 400; color: #33333b; background: #fff; }
dialog.html-dialog .html-url-field input[name=url]:focus { outline: 0; border-color: #707078; }
dialog.html-dialog .html-url-field input[name=url][aria-invalid=true] { border-color: #e5322d; color: #e5322d; background: #f5f5fa; }
dialog.html-dialog .html-add-form [role=alert] { margin: 18px 89px 0; color: #47474f; font-size: 16px; line-height: 24px; text-align: center; }
dialog.html-dialog .html-add-form footer { margin-top: 64px; padding: 24px; border-top: 1px solid #e3e3ea; display: flex; justify-content: flex-end; }
dialog.html-dialog .html-add-form footer button { min-width: 72px; height: 42px; padding: 0 20px; border-radius: 6px; font-size: 16px; font-weight: 600; }
dialog.html-dialog > .mark-error { display: none; }
@media (max-width: 700px) {
  dialog.html-dialog > h2 { font-size: 22px; padding: 20px 48px 12px; }
  dialog.html-dialog .html-url-tabs { margin: 16px 16px 0; }
  dialog.html-dialog .html-add-form label, dialog.html-dialog .html-add-form [role=alert] { margin-left: 16px; margin-right: 16px; }
  dialog.html-dialog .html-add-form footer { margin-top: 32px; }
  .pdf-workspace[data-tool=html] .html-actions { margin: 0; padding: 12px 0; }
}