/* Hệ báo lan tỏa — token & layout theo design_handoff/README.md.
   Màu/chữ/khoảng cách là giá trị cuối, không tự đổi. */

:root {
  --bg: #f3f2f2;
  --surface: #f8f4f4;
  --mat: #eae9e9;
  --hover: #eae7e7;
  --text: #201f1d;
  --muted: #605d5d;
  --soft: #7d7979;
  --faint: #9b9797;
  --divider: rgba(32, 31, 29, .16);
  --divider-soft: rgba(32, 31, 29, .12);
  --accent: #b68235;
  --accent-deep: #7d5411;
  --accent-tint: #fff3e4;
  --error: #8f2c1f;
  --word-header: #D9E2F3;
  --word-link: #0563C1;
  --shadow: 0 1px 2px rgba(45, 43, 43, .14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: default; }
a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: #a06f24; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 240ms ease-out; }

#app { height: 100%; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- shared */

/* Logo VPA là wordmark NGANG (1550x396 ~ 3.9:1) — khoá theo chiều cao, rộng tự co.
   Đừng ép vào ô vuông: chữ sẽ bị bóp méo. */
.logo { height: 21px; width: auto; flex: none; display: block; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--divider); border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}
.spinner.lg { width: 20px; height: 20px; border-width: 2px; }

.favicon {
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--divider); border-radius: 4px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--accent-deep); text-transform: uppercase;
}

.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 15px;
  border: 1px solid var(--accent); border-radius: 4px;
  font-size: 13px; font-weight: 500; color: var(--accent-deep);
  transition: background 160ms ease;
}
.btn-accent:hover:not(:disabled) { background: var(--accent-tint); }
.btn-accent:disabled { opacity: .45; }

.btn-hair {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--divider); border-radius: 4px;
  font-size: 12px; color: var(--text);
  transition: background 160ms ease;
}
.btn-hair:hover:not(:disabled) { background: var(--hover); }
.btn-hair:disabled { opacity: .45; }

.btn-x {
  width: 26px; height: 26px; flex: none; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; color: var(--faint);
}
.btn-x:hover { background: var(--hover); color: var(--muted); }

.field {
  width: 100%; min-height: 36px; padding: 0 11px;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 4px;
  font-size: 12.5px;
}
.field:focus { outline: none; border-color: var(--accent); }
textarea.field { padding: 10px 11px; resize: none; font-size: 11.5px; line-height: 1.75; }
.field-label { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; display: block; }

.checkbox { display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; }
.checkbox .box {
  width: 16px; height: 16px; flex: none; border-radius: 3px;
  border: 1px solid rgba(32, 31, 29, .3); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.checkbox.on .box { background: var(--accent); border-color: var(--accent); }
.checkbox .box svg { display: none; }
.checkbox.on .box svg { display: block; }
.checkbox .label { font-size: 12px; }
.checkbox.disabled { opacity: .4; pointer-events: none; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--divider); border-radius: 4px; }
.stepper button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.stepper button:hover:not(:disabled) { background: var(--hover); }
.stepper .val {
  min-width: 46px; text-align: center; font-size: 12px;
  border-left: 1px solid var(--divider); border-right: 1px solid var(--divider);
  line-height: 30px;
}
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.opt-row.dim { opacity: .4; }
.opt-row.dim .opt-label { color: var(--faint); }
.opt-label { font-size: 12px; }

/* ------------------------------------------------------- Word preview */

.paper {
  background: #fff; border: 1px solid var(--divider); border-radius: 2px;
  padding: 11px; box-shadow: var(--shadow); overflow: hidden;
}
.paper .doc-title {
  font-family: "Times New Roman", Times, serif; font-size: 10.5px; font-weight: 700;
  text-align: center; margin-bottom: 6px;
}
.wtable {
  display: grid; grid-template-columns: 1.2fr 3.3fr 6.2fr 2.5fr 13.5fr;
  font-family: "Times New Roman", Times, serif; font-size: 7px; line-height: 1.35;
}
.wtable > div {
  border: .5px solid var(--muted); padding: 2px; overflow: hidden;
  display: flex; align-items: center; word-break: break-word;
}
/* Khung xem trước hẹp hơn trang thật nhiều lần. Trong file Word cột STT 1 cm thừa chỗ
   cho chữ "STT", nhưng ở đây sẽ xuống dòng — nên riêng ô tiêu đề và ô hẹp thì không ngắt. */
.wtable .th {
  background: var(--word-header); font-weight: 700; justify-content: center;
  text-align: center; font-size: 6px; letter-spacing: -.02em; white-space: nowrap;
}
.wtable .c-stt { justify-content: center; white-space: nowrap; }
.wtable .c-link { white-space: nowrap; }
.wtable .c-site, .wtable .c-link { justify-content: center; text-align: center; color: var(--word-link); text-decoration: underline; }
.wtable .c-img { justify-content: center; padding: 3px; }
.wtable .imgbox {
  width: 100%; background: var(--hover); border: .5px solid #d7d3d3;
  height: 38px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
}
.wtable .imgbox.full { height: 58px; }
.wtable .imgbox img { width: 100%; object-fit: cover; object-position: top; }
.wtable .err { color: var(--error); font-size: 5.5px; }
.paper-note { font-size: 10.5px; color: var(--soft); line-height: 1.5; margin-top: 9px; }

/* ================================================================ DESKTOP */

.topbar {
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 0 22px; flex: none;
  border-bottom: 1px solid var(--divider);
}
.topbar .vrule { width: 1px; height: 18px; background: var(--divider); flex: none; }
.topbar .subtitle { font-size: 12px; color: var(--soft); }
.topbar .spacer { flex: 1; }
.topbar .engine { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }

.body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 326px minmax(0, 1fr) 404px;
}
.col { min-height: 0; display: flex; flex-direction: column; }
.col.c1, .col.c2 { border-right: 1px solid var(--divider); }
.col-scroll { flex: 1; min-height: 0; overflow: auto; }

.col-head { display: flex; align-items: baseline; gap: 9px; padding: 16px 20px 12px; flex: none; }
.col-head .n { font-size: 10.5px; color: var(--accent); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.col-head .label { font-size: 12.5px; font-weight: 500; }
.col-head .right { margin-left: auto; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px; }

.pad { padding: 0 20px; }

.link-row {
  display: flex; align-items: center; gap: 9px; min-height: 42px;
  padding: 0 20px; border-top: 1px solid var(--divider-soft);
}
.link-row .stt { width: 14px; flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.link-row .meta { min-width: 0; flex: 1; }
.link-row .host { font-size: 11.5px; font-weight: 500; max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .path { font-size: 10px; color: var(--faint); max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opts { flex: none; border-top: 1px solid var(--divider); padding: 14px 20px 16px; }
.btn-start { width: 100%; min-height: 44px; font-size: 13.5px; margin-top: 10px; }
.start-hint { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

.progress { height: 2px; background: var(--divider-soft); flex: none; }
.progress > div { height: 100%; background: var(--accent); transition: width 200ms ease; }

.empty {
  min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--faint); font-size: 12.5px; text-align: center; padding: 20px;
}

.res-row {
  display: grid; grid-template-columns: 22px 138px minmax(0, 1fr) 188px 30px;
  gap: 14px; align-items: center; padding: 11px 20px;
  border-bottom: 1px solid var(--divider-soft);
}
.res-row .stt { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.res-row .site { display: flex; align-items: center; gap: 8px; min-width: 0; }
.res-row .site-name { font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-row .src { font-size: 10px; }
.title-input {
  width: 100%; background: transparent; border: 1px solid transparent; border-radius: 4px;
  font-size: 12.5px; padding: 5px 7px;
}
.title-input:hover { border-color: var(--divider); }
.title-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.thumb {
  width: 188px; height: 96px; border: 5px solid var(--mat); outline: 1px solid var(--divider);
  background: #fff; overflow: hidden; filter: sepia(.22) saturate(.82) contrast(1.05);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.err-box {
  border: 1px dashed var(--error); border-radius: 3px; padding: 7px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.err-box .why { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--error); }
.err-box .note { font-size: 9.5px; color: var(--muted); line-height: 1.4; }
.btn-retry { min-height: 24px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 3px;
  font-size: 10.5px; color: var(--accent-deep); align-self: flex-start; }
.btn-retry:hover { background: var(--accent-tint); }

.logdrawer { flex: none; border-top: 1px solid var(--divider); }
.logdrawer .bar { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 22px; }
.logdrawer .bar .k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.logdrawer .bar .n { font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
.logdrawer .bar .toggle { margin-left: auto; font-size: 11px; color: var(--accent-deep); }
.logbody { height: 150px; overflow: auto; background: var(--surface); padding: 9px 22px 12px; }
.logline { display: flex; gap: 10px; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.7; animation: fadeUp 200ms ease-out; }
.logline .t { color: var(--faint); flex: none; }
.logline .m { color: var(--muted); word-break: break-word; }
.logline.ok .m, .logline.sys .m { color: var(--accent-deep); }
.logline.error .m { color: var(--error); }

.metarow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; border-top: 1px solid var(--divider); font-size: 11.5px; color: var(--muted);
}
.metarow .v { font-variant-numeric: tabular-nums; }

.filecard {
  border: 1px solid var(--accent); border-radius: 4px; padding: 13px;
  display: flex; gap: 11px; align-items: flex-start; animation: fadeUp 240ms ease-out;
}
.filecard .name { font-size: 12.5px; font-weight: 500; }
.filecard .meta { font-size: 10.5px; color: var(--soft); font-variant-numeric: tabular-nums; margin-top: 3px; }
.filecard .acts { display: flex; gap: 8px; margin-top: 10px; }

.mobile { display: none; }

/* ================================================================= MOBILE */

@media (max-width: 767px) {
  .desktop { display: none; }
  .mobile { display: flex; flex-direction: column; height: 100%; }

  .m-header { flex: none; padding: 20px 20px 0; }
  .m-header .row { display: flex; align-items: center; gap: 11px; }
  .m-header .logo { height: 19px; }
  .m-header .engine { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
  .m-header .count { margin-left: auto; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
  .m-header .hair { height: 1px; background: var(--divider); margin-top: 14px; }

  .m-steps { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--divider); }
  .m-steps button {
    min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-bottom: 2px solid transparent; color: var(--faint);
  }
  .m-steps button .n { font-size: 9.5px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
  .m-steps button .l { font-size: 11px; font-weight: 500; }
  .m-steps button.on { border-bottom-color: var(--accent); color: var(--text); }

  .m-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 20px; }

  .m-action { flex: none; border-top: 1px solid var(--divider); padding: 12px 20px 24px; }
  .m-action .btn-accent { width: 100%; min-height: 50px; font-size: 14.5px; }
  .m-action .hint { text-align: center; font-size: 11.5px; opacity: .7; margin-top: 7px; font-variant-numeric: tabular-nums; }

  .m-link-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--divider-soft); }
  .m-link-row .favicon { width: 22px; height: 22px; }
  .m-link-row .host { font-size: 12.5px; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-link-row .path { font-size: 10.5px; color: var(--faint); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-link-row .btn-x { width: 44px; height: 44px; margin-left: auto; }

  .m-btn { min-height: 44px; }
  .m-optbox { border: 1px solid var(--divider); border-radius: 4px; margin-top: 14px; }
  .m-optbox .head { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 12px; width: 100%; }
  .m-optbox .head .sum { margin-left: auto; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
  .m-optbox .in { padding: 0 12px 12px; border-top: 1px solid var(--divider-soft); }
  .m-optbox .checkbox { min-height: 48px; align-items: flex-start; padding-top: 12px; }
  .m-optbox .checkbox .box { width: 18px; height: 18px; }
  .m-optbox .sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
  .m-optbox .stepper button { width: 38px; height: 36px; }
  .m-optbox .stepper .val { line-height: 36px; }

  .m-big { font-size: 40px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
  .m-big-sub { font-size: 18px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .m-status { font-size: 11.5px; font-weight: 500; color: var(--accent-deep); }
  .m-status-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
  .m-progress { height: 3px; border-radius: 2px; background: var(--divider-soft); margin: 14px 0; }
  .m-progress > div { height: 100%; border-radius: 2px; background: var(--accent); transition: width 200ms ease; }
  .m-now { border: 1px solid var(--divider); border-radius: 4px; background: var(--surface); padding: 11px;
    display: flex; align-items: center; gap: 10px; }
  .m-logbody { height: 238px; overflow: auto; background: var(--surface); border: 1px solid var(--divider);
    border-radius: 4px; padding: 9px 11px; margin-top: 14px; }

  .m-card { border: 1px solid var(--divider); border-radius: 4px; padding: 13px; display: flex; flex-direction: column; gap: 11px;
    margin-bottom: 12px; animation: fadeUp 240ms ease-out; }
  .m-card .top { display: flex; align-items: center; gap: 9px; }
  .m-card .top .stt { font-size: 11.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
  .m-card .top .site-name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-card .top .edit { margin-left: auto; min-width: 44px; min-height: 44px; font-size: 11.5px; font-weight: 500; color: var(--accent-deep); }
  .m-card .title { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
  .m-card .shot { border: 6px solid var(--mat); outline: 1px solid var(--divider); filter: sepia(.22) saturate(.82) contrast(1.05); }
  .m-card .shot img { width: 100%; display: block; }
  .m-card .shotmeta { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
  .m-card .elabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 4px; display: block; }
  .m-card .efield { border-color: var(--accent); background: #fff; }

  .wtable { font-size: 6px; }
  .metarow { min-height: 44px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .body { grid-template-columns: 300px minmax(0, 1fr); }
  .col.c3 { grid-column: 1 / -1; border-top: 1px solid var(--divider); max-height: 46vh; }
  .col.c2 { border-right: none; }
}

/* ------------------------------------------------- khổ giấy / hướng / lề */

.paperbox { margin-top: 14px; border-top: 1px solid var(--divider); padding-top: 12px; }
.paperbox .row { display: flex; align-items: center; gap: 9px; min-height: 36px; }
.paperbox .k { font-size: 10.5px; color: var(--muted); flex: none; width: 60px; }
.paperbox .sel { width: auto; min-width: 78px; padding: 0 7px; height: 30px; min-height: 30px; font-size: 12px; }

.segwrap { display: inline-flex; border: 1px solid var(--divider); border-radius: 4px; overflow: hidden; margin-left: auto; }
.seg { min-height: 30px; padding: 0 12px; font-size: 12px; color: var(--muted); }
.seg + .seg { border-left: 1px solid var(--divider); }
.seg:hover:not(.on) { background: var(--hover); }
.seg.on { background: var(--accent-tint); color: var(--accent-deep); font-weight: 500; }

.paperbox .mgrow { gap: 7px; margin-top: 6px; }
.mgcell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mgcell span { font-size: 9.5px; color: var(--faint); }
.field.mg { min-height: 30px; height: 30px; padding: 0 6px; font-size: 12px;
  font-variant-numeric: tabular-nums; text-align: center; }
.field.mg::-webkit-outer-spin-button, .field.mg::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field.mg { -moz-appearance: textfield; }

.paper { transition: width 200ms ease; }

@media (max-width: 767px) {
  .paperbox .row { min-height: 48px; flex-wrap: wrap; }
  .paperbox .k { width: 100%; }
  .segwrap { margin-left: 0; }
  .seg { min-height: 44px; padding: 0 18px; font-size: 13px; }
  .paperbox .sel { height: 44px; min-height: 44px; font-size: 13px; }
  .field.mg { min-height: 44px; height: 44px; font-size: 13px; }
}