:root {
  color-scheme: light dark;
  --bg: #e9edf0;
  --page: #e6e6e6;
  --surface: #ffffff;
  --surface-2: #eef1f3;
  --text: #15202b;
  --muted: #475461;
  --border: #d7dde2;
  --border-strong: #8a97a3;
  --primary: #0f766e;
  --primary-hover: #0b5f58;
  --on-primary: #ffffff;
  --primary-soft: #e3f3f1;
  /* Màu riêng cho phần lấy từ HapiTrack. */
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --on-danger: #ffffff;
  --note-orange: #c25e00;
  --hapi: #ffa600;
  --hapi-hover: #e69500;
  --on-hapi: #2b1c00;
  --warn-bg: #fdf3e1;
  --warn-text: #744710;
  --warn-border: #e5c48d;
  --ok: #17693c;
  --gap-bg: #fff1e3;
  --gap-border: #f29235;
  --gap-text: #7a3b06;
  --radius: 8px;
  --shadow: 0 1px 2px rgb(16 24 32 / 6%);
  --box-border: #e2e6ea;
  --box-shadow: 0 1px 2px rgb(16 24 32 / 6%), 0 3px 8px rgb(16 24 32 / 7%);
  --ease: 160ms ease-out;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1418;
    --page: #0f1418;
    --surface: #171e24;
    --surface-2: #212a31;
    --text: #e8edf1;
    --muted: #a3b0ba;
    --border: #2d3841;
    --border-strong: #71808c;
    --primary: #2bb5a9;
    --primary-hover: #49c7bc;
    --on-primary: #06201d;
    --primary-soft: #17302e;
    --note-orange: #ffb347;
    --danger: #f87171;
    --danger-soft: #3a1515;
    --on-danger: #2a0505;
    --warn-bg: #33270f;
    --warn-text: #f1d39c;
    --warn-border: #6b5222;
    --ok: #79d39f;
    --gap-bg: #3a2410;
    --gap-border: #f29235;
    --gap-text: #ffd2a6;
    --shadow: none;
    --box-border: #34404a;
    --box-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 3px 8px rgb(0 0 0 / 30%);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100dvh; background: var(--page); color: var(--text); }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0; }
code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font-size: 14px; }
.sr-only, .icon-sprite { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 40; padding: 8px 12px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
main:focus { outline: none; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 32px; height: 32px; stroke-width: 1.4; }

/* Khung trang */
.app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 20px; height: 100dvh; padding: 20px 12px; border-right: 1px solid var(--border); background: var(--surface); }
.brand { padding: 0 8px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.brand span { color: var(--primary); }
nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 500; text-align: left; }
.nav-item:hover { background: var(--surface-2); color: var(--text); filter: none; }
.nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.conn-status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 0 8px; color: var(--muted); font-size: 14px; }
.conn-status::before { content: ""; width: 8px; height: 8px; flex: none; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.conn-status[data-state="on"] { color: var(--ok); }
.conn-status[data-state="on"]::before { border-color: var(--ok); background: var(--ok); }
main { min-width: 0; padding: 28px 32px 72px; }
/* Trang Xuất file gói trong một màn hình: xem trước và file đã xuất cao theo màn hình, không phải lăn chuột. */
main:has(> [data-view="export"]:not([hidden])) { padding-top: 14px; padding-bottom: 14px; }
.view { display: grid; gap: 16px; max-width: 1240px; margin: 0 auto; }
.view[hidden] { display: none; }
.view-head { display: grid; gap: 4px; }
.view-head p { color: var(--muted); }

/* Khối và trường */
.card { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card.narrow { max-width: 480px; }
fieldset.card { min-inline-size: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-size: 16px; font-weight: 650; }
legend + * { clear: both; }
.stack { display: grid; gap: 16px; min-width: 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field label, .adjust-row label { color: var(--text); font-size: 14px; font-weight: 550; }
.req { color: var(--muted); font-size: 13px; font-weight: 400; }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; transition: border-color var(--ease); }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--primary); }
.hint { color: var(--muted); font-size: 14px; }
.hint:empty { display: none; }
.gap-alert { margin-top: 10px; padding: 12px 14px; border: 2px solid var(--gap-border); border-left-width: 6px; border-radius: 6px; background: var(--gap-bg); color: var(--gap-text); font-size: 14px; }
.gap-alert .gap-title { margin: 0 0 6px; font-weight: 700; }
.gap-alert ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.gap-alert li strong { display: block; }
.gap-alert .gap-answer { justify-self: start; margin-top: 4px; }
.gap-alert li { display: grid; gap: 2px; }
.gap-reply { display: grid; gap: 6px; margin-top: 6px; }
.gap-reply label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.gap-reply textarea { color: var(--text); }
.gap-talk { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: var(--surface); color: var(--text); list-style: none; }
.gap-talk li { display: block; }
.gap-alert .gap-talk strong { display: inline; margin-right: 6px; }
.gap-talk li[data-who="ai"] strong { color: var(--gap-text); }
.gap-alert .gap-foot { margin: 8px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.callout { padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: 6px; background: var(--warn-bg); color: var(--warn-text); font-size: 14px; }
.empty { color: var(--muted); }

/* Nút */
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
button:hover { background: var(--primary-hover); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
button.secondary:hover { background: var(--surface-2); }
button.small { min-height: 32px; padding: 4px 10px; font-size: 14px; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.actions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spinner { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
button[aria-busy="true"] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Xuất file: cột đơn và ghi chú, cột xem trước và chỉnh ảnh, cột file đã xuất */
.export-layout { display: grid; grid-template-columns: minmax(330px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.view[data-view="export"] { max-width: 1720px; }
.export-layout > form { gap: 16px; }
.export-layout > aside { grid-template-columns: minmax(0, 1fr); }
.order-card { gap: 12px; padding: 14px 16px; }
.order-pick { flex-wrap: wrap; gap: 6px 10px; }
.order-pick label { font-weight: 650; }
/* Thanh tiêu đề xanh của 3 khung, bo đủ 4 góc như nút bấm, cùng chiều cao 40px. */
.card-bar { display: flex; align-items: center; min-height: 46px; margin: 0; padding: 6px 12px; border-radius: 6px; background: var(--primary-soft); font-size: 15px; font-weight: 650; }
.hapi-button { border-color: var(--hapi); background: var(--hapi); color: var(--on-hapi); }
.hapi-button:hover { background: var(--hapi-hover); }
.order-pick input { flex: 1 1 190px; width: auto; min-height: 32px; padding: 3px 10px; background: var(--surface); font-variant-numeric: tabular-nums; }
.source-line { color: var(--muted); font-size: 14px; }
.source-line strong { color: var(--text); font-weight: 600; }
.source-line .badge { margin-left: 4px; }
.market-box { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; }
.market-preview { display: grid; gap: 4px; margin: 0; }
.market-preview .result-empty { aspect-ratio: 1; padding: 8px; font-size: 13px; }
.market-preview figcaption { color: var(--muted); font-size: 13px; text-align: center; }
.market-info { color: var(--muted); font-size: 14px; }
/* Thông tin đơn lấy từ HapiTrack: tên mục nhạt, giá trị đậm, ảnh preview sàn vuông. */
.market-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 13.5px; }
.market-list dt { color: var(--muted); }
.market-list dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.market-image { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--box-border); border-radius: 6px; background: var(--surface-2); }
.market-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#or-hapi-state[data-state="on"], #or-hapi-state[data-state="ready"] { background: var(--primary-soft); color: var(--primary); }
#or-hapi-state[data-state="error"] { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.manual-fields { display: grid; gap: 10px; min-inline-size: 0; margin: 0; padding: 10px 12px 12px; border: 1px dashed var(--border-strong); border-radius: 6px; }
.manual-fields legend { float: none; width: auto; margin: 0; padding: 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.field-grid.three { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.field-grid.three > :first-child { grid-column: 1 / -1; }
.manual-fields input, .manual-fields select { min-height: 36px; padding: 6px 8px; }
.source-tag { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 400; }
.note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.export-layout .gap-alert { margin-top: 0; }
.image-box { aspect-ratio: 4500 / 5100; width: min(100%, calc(var(--stage-h) * 4500 / 5100)); margin-inline: auto; }
.upload-box { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.upload-box button { width: 100%; }
.field[hidden], .stack[hidden], button[hidden] { display: none; }
/* Nhắc đơn đã có file: chữ cam, không khung, sát lên phần thông tin file. */
/* Khung Chú ý: nền ấm chuyển nhẹ, đầu khung có biểu tượng tròn, hai bước có số tròn, tên nút in như nhãn nút. */
.version-note { display: grid; gap: 6px; padding: 10px 14px; border: 1px solid var(--warn-border); border-radius: 12px; background: linear-gradient(180deg, var(--warn-bg), color-mix(in srgb, var(--warn-bg) 35%, var(--surface))); color: var(--text); font-size: 13.5px; line-height: 1.5; box-shadow: 0 1px 2px rgb(16 24 32 / 5%); }
.version-note .note-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--warn-border); }
.version-note .note-head strong { color: var(--note-orange); font-size: 15px; }
.note-sub { color: var(--muted); font-size: 13px; font-weight: 500; }
.note-badge { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--note-orange); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--note-orange) 18%, transparent); }
.note-badge .icon { width: 16px; height: 16px; }
.note-hi { color: var(--text); font-style: italic; }
.note-lead { color: var(--text); font-weight: 600; }
.note-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.note-steps li { position: relative; padding-left: 30px; counter-increment: step; }
.note-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--note-orange); color: #fff; font-size: 12px; font-weight: 700; }
.ui-chip { display: inline-block; padding: 0 6px; border: 1px solid var(--warn-border); border-radius: 6px; background: var(--surface); color: var(--note-orange); font-weight: 600; white-space: nowrap; }
.version-note[hidden] { display: none; }
.submit-bar button { width: 100%; }
.export-layout { --stage-h: max(300px, calc(100dvh - 416px)); }
.export-layout > .card { gap: 10px; padding: 14px 16px; }
.preview-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, calc(var(--stage-h) * 4500 / 5100)); margin-inline: auto; aspect-ratio: 4500 / 5100; overflow: hidden; border-radius: 6px; }
.stage-warning { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 6px 10px; font-size: 14px; }
.stage-warning[hidden] { display: none; }
.shortcut-help summary { color: var(--muted); font-size: 14px; cursor: pointer; }
.shortcut-help[hidden] { display: none; }
.preview-stage .result-empty { height: 100%; align-content: center; }
.result-empty[hidden] { display: none; }
#or-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4500 / 5100; border-radius: 6px; background: #000; touch-action: none; cursor: grab; }
#or-canvas[hidden] { display: none; }
#or-canvas.dragging { cursor: grabbing; }
#or-canvas[data-hover=""] { cursor: default; }
#or-canvas[data-hover="photo"] { cursor: move; }
#or-canvas[data-hover="rotate"] { cursor: alias; }
#or-canvas[data-hover="scale"] { cursor: nwse-resize; }
#or-canvas.brushing, #or-canvas[data-hover="brush"] { cursor: none; }
.brush-cursor { position: absolute; top: 0; left: 0; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 70%); pointer-events: none; }
.brush-cursor[hidden] { display: none; }
.selected-info { margin: 0; padding: 6px 10px; border-radius: 6px; background: var(--primary-soft); color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.selected-info[hidden] { display: none; }
.result-empty { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--muted); text-align: center; }
.submit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Ô chọn ảnh từng khoang dưới xem trước */
.slot-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot-picks[hidden] { display: none; }
.slot-pick { display: grid; gap: 2px; padding: 4px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.slot-pick.selected { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.slot-pick select { min-height: 32px; padding: 4px 6px; font-size: 14px; }
/* Bảng chỉnh khoang đang chọn: ảnh, sáng và cọ và làm đầy, màu */
.slot-panel { display: grid; padding-top: 4px; }
.adjust-row { display: grid; grid-template-columns: 100px minmax(0, 1.18fr) minmax(0, 1fr); grid-template-areas: "slot tools colors"; gap: 8px 10px; align-items: start; }
.adjust-row[hidden] { display: none; }
.adjust-slot { grid-area: slot; display: grid; align-content: start; gap: 8px; align-self: stretch; }
.adjust-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adjust-title strong { display: inline; font-size: 14px; font-weight: 650; }
.adjust-title small { display: block; color: var(--muted); font-size: 13px; }
/* Nút luôn đứng yên bên phải: mở hướng dẫn phím tắt chỉ dài xuống ở cột trái, không đẩy nút vào chỗ con trỏ. */
.panel-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
/* Hướng dẫn mở thành bảng nổi to, che kín vùng chỉnh phía trên, mỗi ý một dòng. */
.help-pop { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; z-index: 5; max-height: 60vh; overflow: auto; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--primary) 0%, #7fd6cc 45%, var(--hapi) 100%) border-box; box-shadow: 0 2px 4px rgb(16 24 32 / 6%), 0 12px 32px rgb(16 24 32 / 18%); animation: help-in 160ms ease-out; }
.help-head { position: sticky; top: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--box-border); background: var(--primary-soft); }
.help-head strong { color: var(--primary); font-size: 14px; font-weight: 700; }
.help-head span { color: var(--muted); font-size: 13px; }
.help-pop dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; padding: 4px 14px 8px; font-size: 14px; line-height: 1.5; }
.help-pop dt, .help-pop dd { padding: 7px 0; border-bottom: 1px dashed var(--box-border); }
.help-pop dt:last-of-type, .help-pop dd:last-of-type { border-bottom: 0; }
.help-pop dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--primary); vertical-align: 1px; }
.help-pop dt { padding-right: 12px; color: var(--primary); font-weight: 650; white-space: nowrap; }
.help-pop dd { margin: 0; color: var(--text); }
@keyframes help-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .help-pop { animation: none; } }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.panel-foot .shortcut-help summary { line-height: 30px; }
.rotate-buttons[hidden] { display: none; }
.rotate-buttons { display: flex; gap: 6px; flex: none; }
.rotate-buttons button { min-height: 30px; padding: 4px 8px; font-size: 13px; font-weight: 500; }
.adjust-photo { display: grid; justify-items: center; gap: 6px; text-align: center; }
.adjust-photo canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); }
.adjust-photo strong { font-size: 14px; font-weight: 600; }
.photo-change { display: grid; gap: 2px; width: 100%; color: var(--muted); font-size: 13px; }
.photo-change select { min-height: 30px; padding: 2px 4px; font-size: 14px; }
.adjust-tools { grid-area: tools; display: grid; gap: 8px; align-self: stretch; align-content: space-between; min-width: 0; }
.field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.field-head .field-title { white-space: nowrap; }
/* Tên mục Xóa mềm và ô độ mềm % nằm sát nhau trên một dòng. */
.brush-field .field-head { justify-content: flex-start; flex-wrap: nowrap; }
.adjust-field { display: grid; gap: 4px; min-width: 0; }
.field-title { color: var(--text); font-size: 14px; font-weight: 600; }
.adjust-value { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.adjust-row input[type="range"] { width: 100%; min-height: 20px; padding: 0; border: 0; accent-color: var(--primary); }
.adjust-row input, .adjust-row select { font-variant-numeric: tabular-nums; }
/* Cọ xóa: thanh cỡ cọ co lại trước, hẹp quá thì xuống dòng chứ không tràn khung. */
.brush-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.brush-line input[type="range"] { flex: 1 1 60px; min-width: 60px; }
.brush-line button { flex: none; min-height: 28px; padding: 2px 7px; font-size: 13px; }
.brush-line .icon-button { width: 30px; min-height: 30px; padding: 0; }
.brush-line .icon-button .icon { width: 17px; height: 17px; }
.brush-line button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.brush-soft { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.brush-soft input { width: 40px; min-height: 26px; padding: 2px 4px; text-align: right; }
.brush-info { color: var(--muted); font-size: 13px; }
.fill-line { display: flex; gap: 6px; }
.fill-line select { flex: 1; min-width: 0; min-height: 30px; padding: 4px 6px; font-size: 14px; }
.fill-line button { flex: none; min-height: 30px; padding: 4px 10px; font-size: 14px; }
.fill-line button[hidden] { display: none; }
.fill-status { color: var(--muted); font-size: 13px; }
.fill-status.warn { color: var(--warn-text); }
.color-field { grid-area: colors; align-self: stretch; gap: 8px; }
/* Sáng, xóa mềm viền, màu: mỗi vùng một khung viền mờ cho dễ tách. */
/* Bốn khung: khoang, sáng, xóa mềm viền, màu. Viền xám nhẹ, nổi khối nhẹ. */
.adjust-slot, .light-field, .brush-field, .color-field { padding: 6px 10px 8px; border: 1px solid var(--box-border); border-radius: 8px; background: var(--surface); box-shadow: var(--box-shadow); }
.adjust-slot, .color-field { padding-inline: 8px; }
/* Nhãn màu một dòng riêng, thanh gạt và ô số chung dòng dưới, để nhãn không bị cắt khi khung hẹp. */
.color-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "label label" "range number"; gap: 2px 6px; align-items: center; }
.color-row label { grid-area: label; overflow: hidden; font-size: 13px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.color-row input[type="number"] { grid-area: number; min-height: 24px; padding: 2px 6px; font-size: 14px; text-align: right; }
.adjust-row .color-row input[type="range"] { grid-area: range; width: 100%; height: 6px; min-height: 0; margin: 4px 0; padding: 0; border: 0; border-radius: 3px; -webkit-appearance: none; appearance: none; }
.color-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid var(--text); border-radius: 50%; background: var(--surface); }
.color-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--text); border-radius: 50%; background: var(--surface); }
.track-cyan-red { background: linear-gradient(90deg, #00e5ff, #9a9a9a, #ff2a2a); }
.track-magenta-green { background: linear-gradient(90deg, #ff2aff, #9a9a9a, #2aff2a); }
.track-yellow-blue { background: linear-gradient(90deg, #ffff2a, #9a9a9a, #2a2aff); }
.order-result { display: grid; gap: 10px; }
.order-result img { display: block; width: min(100%, calc(var(--stage-h) * 4500 / 5100)); margin-inline: auto; height: auto; aspect-ratio: 45 / 51; border-radius: 6px; background: repeating-conic-gradient(#d9dee2 0% 25%, #f4f6f8 0% 50%) 50% / 20px 20px; object-fit: contain; }
/* Nền ô cờ cho ảnh Done: file đã tắt nền thì nhìn ra ngay phần trong suốt. */
.result-paths { display: grid; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.result-paths p { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0; overflow-wrap: anywhere; }
.result-paths strong { font-weight: 700; }
.result-detail { margin: 0; color: var(--muted); font-size: 13px; }

/* Thả ảnh, thư viện, luật */
.drop-zone { display: grid; justify-items: center; gap: 6px; padding: 20px; border: 1.5px dashed var(--border-strong); border-radius: 6px; background: var(--bg); text-align: center; cursor: pointer; transition: border-color var(--ease), background-color var(--ease); }
.drop-zone span { color: var(--muted); font-size: 14px; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--primary); background: var(--primary-soft); }
.reference-list { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); }
.reference-list:empty { display: none; }
.reference-card { display: grid; gap: 6px; flex: 0 0 120px; min-width: 0; font-size: 14px; cursor: pointer; }
.reference-card label { display: grid; gap: 6px; cursor: pointer; }
.reference-card img { width: 120px; height: 120px; border-radius: 6px; background: var(--surface-2); object-fit: cover; }
.reference-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-card button { min-height: 32px; padding: 4px 8px; font-size: 14px; font-weight: 500; }
.rule-list { display: grid; gap: 12px; }
.rule-list:empty { display: none; }
.rule-list h3 { margin-top: 8px; font-size: 14px; }
.rule-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.rule-card textarea { min-height: 70px; }
.rule-card p { color: var(--muted); font-size: 14px; }
.rule-card.off { color: var(--muted); }
.rule-card .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rule-card .row select, .rule-card .row input { width: auto; flex: 1 1 160px; }

/* Đơn thử */
.columns { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.order-list { display: grid; gap: 8px; }
.order-item { display: grid; justify-items: start; gap: 2px; width: 100%; border-color: var(--border); background: var(--surface); color: var(--text); text-align: left; }
.order-item:hover { background: var(--surface-2); }
.order-item.selected { border-color: var(--primary); background: var(--primary-soft); }
.order-item span, .order-item small { max-width: 100%; overflow-wrap: anywhere; }
.order-item small { color: var(--muted); font-weight: 400; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.badge { padding: 3px 9px; border-radius: 100px; background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.detail h3 { margin-bottom: 0; }
.ai-draft { margin: 12px 0; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.ai-review { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: 6px; background: var(--warn-bg); color: var(--warn-text); }
.preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.preview-card { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.preview-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.preview-card .content { display: grid; gap: 8px; padding: 12px; }
.preview-card p { color: var(--muted); font-size: 14px; }
.preview-card p.preflight-pass { color: var(--ok); }
.preview-card p.preflight-review { color: var(--warn-text); }
.preview-card button { width: 100%; }

/* Thông báo */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: min(460px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 14px; box-shadow: 0 6px 20px rgb(0 0 0 / 22%); overflow-wrap: anywhere; }
.toast:empty { display: none; }

@media (max-width: 1240px) {
  .export-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adjust-row { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "slot tools" "slot colors"; }
  .export-layout > form { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .export-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  html { scroll-padding-top: 112px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; z-index: 20; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; height: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { padding: 0; }
  nav { order: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .nav-item { justify-content: center; flex-direction: column; gap: 2px; min-height: 48px; padding: 4px 2px; font-size: 13px; text-align: center; }
  .conn-status { margin: 0 0 0 auto; padding: 0; }
  main { padding: 20px 16px 72px; }
  .columns, .actions-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .card { padding: 16px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  input, select, textarea { font-size: 16px; }
  .adjust-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "slot" "tools" "colors"; }
  .adjust-photo { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; }
  .adjust-photo canvas { width: 64px; height: 64px; }
  .photo-change { width: auto; }
  .market-box, .field-grid.three { grid-template-columns: minmax(0, 1fr); }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 1.6s !important; }
}

.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); font-size: 14px; font-weight: 550; }
.check-row[hidden] { display: none; }
.check-row .hint { font-weight: 400; }

/* Ô thông tin đơn có khóa: đang khóa thì nền xám, con trỏ báo không sửa được. */
.locked-input { position: relative; display: flex; }
.locked-input input { padding-right: 40px; }
.locked-input.is-locked input { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.lock-toggle { position: absolute; top: 50%; right: 4px; min-height: 30px; width: 30px; padding: 0; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); }
.lock-toggle:hover { background: var(--surface-2); color: var(--text); }
.locked-input.is-locked .lock-toggle { color: var(--danger); }
/* Cảnh báo đỏ trước khi sửa thông tin đơn. */
.warn-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 2px solid var(--danger); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 30%); }
.warn-dialog::backdrop { background: rgb(16 24 32 / 45%); }
.warn-dialog form { display: grid; gap: 12px; padding: 0 0 16px; }
.warn-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--danger-soft); color: var(--danger); border-radius: 10px 10px 0 0; }
.warn-head h3 { font-size: 16px; color: var(--danger); }
.warn-head .icon { width: 22px; height: 22px; }
.warn-dialog p { padding: 0 16px; font-size: 14px; }
.warn-dialog .actions { justify-content: flex-end; padding: 0 16px; }
.export-warn-list { display: grid; gap: 4px; margin: 0; padding: 0 16px 0 34px; font-size: 14px; }
button.danger { background: var(--danger); color: var(--on-danger); }
button.danger:hover { background: var(--danger); filter: brightness(.9); }

/* Khung Note Fix: nút AI đọc ghi chú trên dòng tiêu đề, kết quả và ý AI chưa hiểu nằm luôn trong khung. */
.note-lock textarea { height: 85px; min-height: 0; padding: 6px 40px 38px 10px; resize: none; }
/* Nút AI đọc ghi chú bám góc dưới phải của khung ghi chú. */
.note-read { position: absolute; right: 8px; bottom: 8px; }
.note-lock .lock-toggle { top: 6px; transform: none; }
.note-lock.is-locked textarea { background: var(--surface-2); color: var(--text); cursor: default; }
.order-card .gap-alert { margin-top: 0; }
/* Ô số nhỏ trong bảng chỉnh: bỏ mũi tên tăng giảm để đủ chỗ cho "100", "-100" (vẫn gõ số và dùng phím mũi tên được). */
.brush-soft input, .color-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-inline: 4px; }
.brush-soft input::-webkit-inner-spin-button, .brush-soft input::-webkit-outer-spin-button,
.color-row input[type="number"]::-webkit-inner-spin-button, .color-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Khung chat hỏi đáp với AI: tin AI bên trái, tin anh chị bên phải, cuộn để xem lịch sử. */
.note-chat { display: grid; overflow: hidden; border: 1px solid var(--box-border); border-radius: 12px; background: var(--surface); box-shadow: var(--box-shadow); }
.note-chat[hidden] { display: none; }
/* Còn ý AI chưa hiểu: ô Note Fix ẩn đi, khung chat trùm vào đúng chỗ đó và nổi lên để người dùng trả lời cho xong. */
.note-stage { display: grid; gap: 10px; }
.note-stage.chatting .note-field, .note-stage.chatting #or-note-result { display: none; }
.note-stage.chatting .note-chat { border: 2px solid var(--note-orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--note-orange) 14%, transparent), 0 12px 28px rgb(16 24 32 / 14%); animation: chat-cover 220ms cubic-bezier(.2, .8, .2, 1) both; }
.chat-brief { display: grid; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--box-border); background: var(--warn-bg); font-size: 13px; line-height: 1.4; }
.chat-brief[hidden] { display: none; }
.chat-brief-lead { color: var(--warn-text); font-weight: 600; }
.chat-brief-note { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.chat-brief-note span { font-weight: 600; }
.chat-brief-note q { color: var(--text); }
@keyframes chat-cover { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .note-stage.chatting .note-chat { animation: none; } }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--box-border); background: var(--primary-soft); color: var(--primary); }
.chat-head h3 { flex: 1; font-size: 14px; }
.chat-count { padding: 2px 8px; border-radius: 999px; background: var(--gap-bg); color: var(--gap-text); font-size: 13px; font-weight: 600; }
.chat-count.done { background: var(--surface); color: var(--ok); }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 260px; margin: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--bg); scroll-behavior: smooth; }
.chat-msg { display: grid; gap: 2px; max-width: 86%; }
.chat-msg.ai { align-self: flex-start; }
.chat-msg.cs { align-self: flex-end; justify-items: end; }
.chat-who { color: var(--muted); font-size: 12px; font-weight: 600; }
.chat-bubble { display: grid; gap: 4px; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg.ai .chat-bubble { border: 1px solid var(--box-border); border-top-left-radius: 4px; background: var(--surface); color: var(--text); }
.chat-msg.cs .chat-bubble { border-top-right-radius: 4px; background: var(--primary); color: var(--on-primary); }
.chat-bubble ul { margin: 0; padding-left: 18px; font-weight: 600; }
.chat-gaps { display: grid; gap: 8px; margin: 2px 0 0; padding-left: 20px; list-style: decimal; }
.chat-gaps li { display: grid; gap: 2px; }
.chat-gaps strong { font-weight: 600; }
.chat-why { color: var(--muted); font-size: 13px; }
.chat-ask { color: var(--note-orange); font-weight: 600; }
.chat-settled { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.chat-bubble .chat-settled { font-weight: 400; }
.chat-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.chat-tag.done { color: var(--ok); }
.chat-tag.unsupported, .chat-tag.manual { color: var(--note-orange); }
.chat-fresh { display: flex; width: fit-content; min-height: 28px; align-self: flex-start; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.chat-fresh:hover { border-color: var(--ok); color: var(--ok); }
.chat-msg time { color: var(--muted); font-size: 12px; }
.chat-msg.pending .chat-bubble { color: var(--muted); font-style: italic; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-top: 1px solid var(--box-border); background: var(--surface); }
.chat-compose[hidden] { display: none; }
.chat-compose textarea { flex: 1; min-height: 38px; max-height: 120px; padding: 8px 10px; border-radius: 6px; resize: none; line-height: 1.4; overflow-y: hidden; }
.chat-send { flex: none; width: 38px; min-height: 38px; padding: 0; border-radius: 6px; }
.chat-send .icon { width: 17px; height: 17px; }

/* Thanh Xem trước: tiêu đề, ô tích duyệt và nút Xuất File PNG cùng một dòng. */
.preview-bar, .result-bar { flex-wrap: wrap; gap: 4px 8px; font-size: 15px; }
.preview-bar h3, .result-bar h3 { margin: 0; font-size: 15px; font-weight: 650; }
.approve-check { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.approve-check input { width: 16px; min-height: 16px; }
.preview-bar #or-submit { min-height: 30px; padding: 4px 8px; gap: 6px; font-size: 13.5px; }
.preview-bar #or-submit .submit-icon { width: 15px; height: 15px; }
/* Đang xuất thì vòng xoay thay chỗ biểu tượng. */
#or-submit[aria-busy="true"] .submit-icon { display: none; }
/* Thanh File Hoàn Thiện: dòng trạng thái mờ, xong thì chữ xanh kèm nút Xem chi tiết. */
.result-bar #or-upload { min-height: 30px; padding: 4px 10px; gap: 6px; }
.result-bar #or-upload .icon { width: 15px; height: 15px; }
.bar-sub { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 500; opacity: .7; }
.bar-sub .spinner.is-on { display: block; width: 12px; height: 12px; border-width: 2px; }
.bar-sub.done { color: var(--ok); opacity: 1; font-weight: 600; }
.bar-link { display: inline-flex; align-items: center; min-height: 26px; margin-left: 6px; padding: 2px 10px; border-radius: 6px; background: var(--primary); color: var(--on-primary); font-size: 13px; text-decoration: none; }
.bar-link:hover { background: var(--primary-hover); }
.approve-check[hidden] { display: none; }
.approve-check[hidden] + #or-submit { margin-left: auto; }
.result-bar #or-overwrite-field { margin-left: 0; }
.bar-sub[hidden] { display: none; }
/* Trạng thái đẩy ẩn thì ô tích và nút vẫn dồn sang phải. */
.result-bar #or-overwrite-field, .result-bar #or-upload { margin-left: 0; }
.result-bar h3 { margin-right: auto; }

/* Khung người phát triển dưới cột File Done. */
.result-col { gap: 16px; }
/* Ba khối của trang Xuất file: khối 1 Info order, khối 2 Chỉnh sửa và Preview, khối 3 Done và up file.
   Ba khối cùng lề trong và khoảng cách để ảnh khối 2 và khối 3 cùng mép trên, cùng cỡ; cả ba kéo cao bằng nhau cho mép dưới thẳng hàng. */
.result-col > .card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.export-layout > #order-render-form { align-self: stretch; }
#order-render-form > .order-card { height: 100%; align-content: start; }
.result-col .version-note { margin-top: auto; }
/* Khung File Preview và File Done cao bằng nhau, mép dưới thẳng hàng; nội dung vẫn dồn lên trên. */
.export-layout > .preview-card-main, .export-layout > .result-col { align-self: stretch; }
.export-layout > .preview-card-main, .result-col > .card { align-content: start; }
.dev-card { padding: 10px 14px; }
.dev-row { display: flex; align-items: center; gap: 12px; }
.dev-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #7fd6cc); color: var(--on-primary); font-size: 14px; font-weight: 700; }
.dev-info { flex: 1; min-width: 0; }
.dev-info { display: grid; gap: 1px; }
.dev-info h3 { font-size: 14px; }
.dev-role { color: var(--muted); font-size: 13px; }
.dev-role strong { color: var(--text); font-weight: 600; }
.dev-version { color: var(--muted); font-size: 12px; font-weight: 500; }
.telegram-button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 6px; background: #229ed9; font-size: 14px; color: #fff; font-weight: 600; text-decoration: none; transition: background-color var(--ease); }
.telegram-button:hover { background: #1c8bc0; }
.telegram-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.telegram-button[aria-disabled] { opacity: .5; cursor: not-allowed; }
.telegram-button .icon { width: 17px; height: 17px; }

/* Giới thiệu hệ thống ở cuối thanh bên trái: logo và tên, hai dòng thông tin, nút Telegram. */
.about { display: grid; gap: 10px; margin-top: auto; padding: 12px; border: 1px solid var(--box-border); border-radius: 12px; background: var(--surface); box-shadow: var(--box-shadow); }
.about-head { display: flex; align-items: center; gap: 10px; }
.about-logo { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #7fd6cc); color: var(--on-primary); font-size: 14px; font-weight: 750; }
.about-brand { display: grid; min-width: 0; line-height: 1.25; }
.about-brand strong { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.about-brand strong span { color: var(--primary); }
.about-brand > span { color: var(--muted); font-size: 12.5px; }
.about-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--box-border); font-size: 13px; }
.about-meta dt { color: var(--muted); }
.about-meta dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.about-ver { padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; }
.about .telegram-button { width: 100%; padding: 6px 8px; gap: 6px; font-size: 13.5px; white-space: nowrap; }
.sidebar .about + .conn-status { margin-top: 0; }
@media (max-width: 860px) { .about { display: none; } }

/* Danh sách gợi ý của ô Order ID và SKU: thẳng dưới ô, rộng bằng ô, mở mượt từ trên xuống. */
.combo { position: relative; flex: 1 1 190px; min-width: 0; }
.order-pick .combo input { width: 100%; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 280px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--box-border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgb(16 24 32 / 16%); opacity: 0; transform: translateY(-6px) scaleY(.96); transform-origin: top center; transition: opacity 160ms ease-out, transform 180ms cubic-bezier(.2, .8, .2, 1); }
.combo-list.open { opacity: 1; transform: none; }
.combo-list[hidden] { display: none; }
.combo-list li { display: grid; gap: 1px; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background-color 120ms ease-out, padding-left 160ms ease-out; }
.combo-list li + li { margin-top: 2px; }
/* Từng dòng hiện nối nhau từ trên xuống khi danh sách mở. */
.combo-list.open li { animation: combo-item 220ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes combo-item { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.combo-list li:hover { padding-left: 16px; }
.combo-list li.current .combo-main { color: var(--primary); }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--primary-soft); }
.combo-main { color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.combo-list .combo-sub { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .combo-list { transition: none; transform: none; } .combo-list.open li { animation: none; } .combo-list li:hover { padding-left: 12px; } }

/* Cảnh báo hở khung trên xem trước đã bỏ. */
.stage-warning { display: none !important; }
/* Chưa chọn ảnh: bảng chỉnh mờ, khóa, có lời nhắc ở giữa. */
.slot-panel { position: relative; }
.slot-panel.is-idle .adjust-row { opacity: .3; filter: grayscale(.7) blur(1.5px); pointer-events: none; }
/* Ảnh đang dùng là nút bấm mở bảng đổi ảnh. */
.thumb-button { position: relative; display: block; width: 100%; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; overflow: hidden; }
.thumb-button:hover { border-color: var(--primary); background: none; }
.thumb-button canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.thumb-tag { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgb(0 0 0 / 65%); color: #fff; font-size: 12px; font-weight: 600; }
.change-photo { width: 100%; min-height: 30px; padding: 3px 6px; gap: 4px; font-size: 13px; }
.change-photo .icon { width: 14px; height: 14px; }
/* Bảng đổi ảnh: lưới ảnh nhỏ có số, nổi lên trên bảng chỉnh. */
.photo-picker { position: absolute; left: 16px; right: 16px; bottom: 54px; z-index: 6; display: grid; gap: 8px; padding: 12px; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--primary), #7fd6cc) border-box; box-shadow: 0 12px 32px rgb(16 24 32 / 22%); opacity: 0; transform: translateY(8px); transition: opacity 160ms ease-out, transform 180ms cubic-bezier(.2, .8, .2, 1); }
.photo-picker.open { opacity: 1; transform: none; }
.photo-picker[hidden] { display: none; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-head h4 { margin: 0; color: var(--primary); font-size: 14px; }
.picker-hint { color: var(--muted); font-size: 13px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.picker-photo { display: grid; justify-items: center; gap: 2px; min-height: 0; padding: 6px; border: 2px solid var(--box-border); border-radius: 10px; background: var(--surface); color: var(--text); transition: border-color 120ms ease-out, transform 120ms ease-out; }
.picker-photo:hover { border-color: var(--primary); background: var(--surface); transform: translateY(-2px); }
.picker-photo.current { border-color: var(--primary); background: var(--primary-soft); }
.picker-photo canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); }
.picker-photo strong { font-size: 14px; }
.picker-photo small { color: var(--muted); font-size: 12px; }
.picker-photo.current small { color: var(--primary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .photo-picker { transition: none; transform: none; } .picker-photo:hover { transform: none; } }
.preview-card-main { position: relative; }

/* Nút Đổi ảnh một dòng, ô Cho trùng ảnh ngay dưới. */
.change-photo { white-space: nowrap; }
.dup-check { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dup-check input { width: 14px; min-height: 14px; }
/* Thông báo nhỏ khi có ảnh trùng nhiều vị trí. */
.dup-notice { position: absolute; left: 16px; right: 16px; bottom: 54px; z-index: 7; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--warn-border); border-left: 4px solid var(--note-orange); border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 14px; font-weight: 600; box-shadow: 0 10px 28px rgb(16 24 32 / 18%); opacity: 0; transform: translateY(8px); transition: opacity 160ms ease-out, transform 180ms cubic-bezier(.2, .8, .2, 1); }
.dup-notice.open { opacity: 1; transform: none; }
.dup-notice[hidden] { display: none; }
.dup-notice .icon { flex: none; width: 18px; height: 18px; color: var(--note-orange); }
.dup-notice span { flex: 1; }
.dup-notice button { flex: none; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .dup-notice { transition: none; transform: none; } }
.change-photo { padding-inline: 4px; font-size: 12.5px; }
.change-photo .icon { width: 13px; height: 13px; }
.adjust-photo { min-width: 0; }
.adjust-photo > * { min-width: 0; max-width: 100%; }
.dup-check { white-space: normal; text-align: left; line-height: 1.2; }
.adjust-photo .thumb-button { max-width: 76px; justify-self: center; }
/* Góc ảnh nhỏ có dấu đổi ảnh để người mới biết bấm vào ảnh là đổi. */
.thumb-swap { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 4px rgb(0 0 0 / 30%); }
.thumb-swap .icon { width: 12px; height: 12px; }
/* Ba nút dưới ảnh nhỏ cùng cỡ. Đổi trùng là nút bật tắt: bật thì sáng, tắt thì tối mờ. */
.photo-action { width: 100%; min-height: 30px; padding: 4px 6px; border: 1px solid var(--box-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.photo-action:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.photo-action.toggle { position: relative; background: var(--surface-2); color: var(--muted); opacity: .6; transition: background-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out, box-shadow 160ms ease-out; }
.photo-action.toggle[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); opacity: 1; box-shadow: 0 0 0 3px var(--primary-soft); }
.photo-action.toggle[aria-pressed="true"]:hover { background: var(--primary); color: var(--on-primary); }
@media (prefers-reduced-motion: reduce) { .photo-action.toggle { transition: none; } }

/* Lớp phủ khi chưa chọn ảnh: che hết bảng chỉnh, giữa là thẻ hướng dẫn có biểu tượng bàn tay. */
.panel-idle { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(2px); }
.slot-panel.is-idle .panel-idle { display: grid; }
.idle-card { display: grid; justify-items: center; gap: 8px; max-width: 360px; padding: 18px 22px; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--primary), #7fd6cc 60%, var(--hapi)) border-box; box-shadow: 0 14px 36px rgb(16 24 32 / 18%); text-align: center; animation: idle-in 220ms cubic-bezier(.2, .8, .2, 1); }
.idle-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); animation: idle-pulse 1.8s ease-in-out infinite; }
.idle-icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.idle-card strong { color: var(--text); font-size: 16px; }
.idle-card p { color: var(--muted); font-size: 14px; line-height: 1.45; }
.idle-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.idle-steps li { padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 600; }
@keyframes idle-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes idle-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(15 118 110 / 30%); } 50% { box-shadow: 0 0 0 10px rgb(15 118 110 / 0%); } }
@media (prefers-reduced-motion: reduce) { .idle-card, .idle-icon { animation: none; } }
.slot-panel:has(> .empty) .panel-idle { display: none; }
/* Nút Gợi ý dưới Đặt lại: có biểu tượng lấp lánh, viền màu chính để nổi hơn ba nút kia. */
.suggest-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-color: var(--primary); color: var(--primary); }
.suggest-action .icon { width: 14px; height: 14px; }
/* Bảng nổi Gợi ý bố cục: nằm giữa hình Preview, hình phía sau mờ đi. */
.preview-card-main .suggest-overlay { position: absolute; inset: 0; z-index: 8; display: block; border-radius: inherit; background: color-mix(in srgb, var(--surface) 45%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity 160ms ease-out; }
.preview-card-main .suggest-overlay[hidden] { display: none; }
.preview-card-main .suggest-overlay.open { opacity: 1; }
.preview-card-main .suggest-overlay .suggest-card { position: absolute; left: 50%; top: clamp(12px, var(--suggest-mid, 50%), calc(100% - 12px)); width: min(calc(100% - 24px), 400px); max-height: calc(100% - 24px); transform: translate(-50%, -50%); animation: suggest-in 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes suggest-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } }
.suggest-card { display: grid; justify-items: center; gap: 8px; overflow-y: auto; padding: 18px 20px; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--primary), #7fd6cc 60%, var(--hapi)) border-box; box-shadow: 0 16px 40px rgb(16 24 32 / 22%); text-align: center; animation: idle-in 220ms cubic-bezier(.2, .8, .2, 1); }
.suggest-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.suggest-icon .icon { width: 24px; height: 24px; }
.suggest-card strong { font-size: 20px; }
.suggest-text { display: grid; gap: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.suggest-text b { color: var(--text); }
.suggest-model { justify-self: start; margin-top: 4px; color: var(--text); font-size: 14px; font-weight: 600; }
.suggest-card select { width: 100%; }
.suggest-status { min-height: 1.3em; color: var(--muted); font-size: 13px; }
.suggest-status:empty { display: none; }
.suggest-status.error { color: var(--danger); }
.suggest-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.suggest-actions button { display: inline-flex; align-items: center; gap: 6px; }
.suggest-actions .icon { width: 16px; height: 16px; }
.suggest-actions .is-busy .icon { animation: suggest-spin 900ms linear infinite; }
@keyframes suggest-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-card-main .suggest-overlay { transition: none; } .suggest-card { animation: none; } .suggest-actions .is-busy .icon { animation: none; } }

/* Ba khối nổi khối hơn: bóng nhiều lớp. Trỏ chuột vào thì nhấc nhẹ lên, một vệt sáng xanh rồi cam chạy quanh viền đúng một vòng,
   và viền gần con trỏ sáng lên theo kiểu spotlight. Chỉ dùng màu chính (xanh) và màu HapiTrack (cam).
   Viền vẽ bằng các lớp nền của chính khối (lớp trong cùng là màu nền khối, các lớp ngoài lộ ra ở phần viền 2px). */
@property --sweep { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --sweep-a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --spot-a { syntax: '<number>'; inherits: false; initial-value: 0; }
.block-3d {
  position: relative;
  border: 2px solid transparent;
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0), color-mix(in srgb, var(--primary) calc(var(--spot-a) * 7%), transparent), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0), color-mix(in srgb, var(--hapi) calc(var(--spot-a) * 100%), transparent), color-mix(in srgb, var(--primary) calc(var(--spot-a) * 85%), transparent) 45%, transparent 75%) border-box,
    linear-gradient(var(--border), var(--border)) border-box;
  box-shadow: 0 1px 2px rgb(16 24 32 / 8%), 0 6px 14px -4px rgb(16 24 32 / 14%), 0 18px 36px -14px rgb(16 24 32 / 22%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease-out, --spot-a 220ms ease-out;
}
.block-3d:hover { --spot-a: 1; transform: translateY(-2px); box-shadow: 0 2px 4px rgb(16 24 32 / 8%), 0 10px 22px -6px rgb(16 24 32 / 18%), 0 28px 48px -18px color-mix(in srgb, var(--primary) 35%, transparent); animation: block-sweep 1.4s cubic-bezier(.45, 0, .25, 1) 1; }
/* Vệt sáng chạy quanh là một vòng riêng dày 4px phủ lên viền 2px (lấn ra ngoài 2px), để vệt dày hơn viền thường. */
.block-3d::after {
  content: ''; position: absolute; inset: -2px; z-index: 1; padding: 4px; border-radius: calc(var(--radius) + 2px); pointer-events: none;
  background: conic-gradient(from var(--sweep), transparent 0deg 250deg, color-mix(in srgb, var(--primary) calc(var(--sweep-a) * 100%), transparent) 300deg, color-mix(in srgb, var(--hapi) calc(var(--sweep-a) * 100%), transparent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@keyframes block-sweep { 0% { --sweep: 0deg; --sweep-a: 0; } 12% { --sweep-a: 1; } 85% { --sweep-a: 1; } 100% { --sweep: 360deg; --sweep-a: 0; } }
@media (prefers-reduced-motion: reduce) { .block-3d, .block-3d:hover { transform: none; transition: none; animation: none; } }

/* Popup trạng thái xuất file giữa màn hình. Xanh khi đang xuất và xuất xong, đỏ khi lỗi. */
.status-dialog { width: min(420px, calc(100vw - 32px)); padding: 28px 28px 24px; border: 2px solid transparent; border-radius: 18px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--primary), var(--hapi)) border-box; color: var(--text); text-align: center; box-shadow: 0 24px 60px rgb(16 24 32 / 30%); }
.status-dialog[open] { display: grid; justify-items: center; gap: 10px; animation: idle-in 220ms cubic-bezier(.2, .8, .2, 1); }
.status-dialog::backdrop { background: rgb(16 24 32 / 45%); backdrop-filter: blur(3px); }
.status-dialog h3 { font-size: 20px; }
.status-dialog p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.status-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.status-icon > * { display: none; grid-area: 1 / 1; }
.status-icon .icon { width: 32px; height: 32px; stroke-width: 2.2; }
.status-spin { width: 34px; height: 34px; border: 4px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); border-right-color: var(--hapi); border-radius: 50%; animation: suggest-spin 900ms linear infinite; }
.status-dialog[data-state="busy"] .status-spin, .status-dialog[data-state="done"] .status-ok, .status-dialog[data-state="error"] .status-bad, .status-dialog[data-state="ask-bg"] .status-ask { display: block; }
.status-dialog[data-state="ask-bg"] .status-icon { background: color-mix(in srgb, var(--hapi) 18%, transparent); color: var(--note-orange); }
.status-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.status-choices[hidden] { display: none; }
.status-dialog[data-state="error"] { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(var(--danger), var(--danger)) border-box; }
.status-dialog[data-state="error"] .status-icon { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.status-bar { width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--hapi)); transform-origin: left; }
.status-bar.run { animation: status-countdown 3s linear forwards; }
@keyframes status-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.status-dialog button { min-width: 120px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .status-dialog[open] { animation: none; } .status-spin { animation-duration: 3s; } }

/* Lịch sử xuất của đơn: nút trên thanh File Done và hộp danh sách các lần xuất */
.bar-history { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.bar-history .icon { width: 14px; height: 14px; }
.bar-history:hover { border-color: var(--primary); }
.history-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 30%); }
.history-dialog::backdrop { background: rgb(16 24 32 / 45%); }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.history-head h3 { margin: 0; font-size: 16px; }
.history-sub { margin: 0; padding: 8px 16px 0; color: var(--muted); font-size: 13px; }
.history-list { display: grid; gap: 10px; margin: 0; padding: 12px 16px 16px; list-style: none; overflow: auto; max-height: calc(100vh - 190px); }
.history-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.history-item.current { border-color: var(--primary); }
.history-thumb { display: grid; place-items: center; width: 96px; height: 108px; border-radius: 6px; background: repeating-conic-gradient(#d9dee3 0 25%, #fff 0 50%) 0 0 / 12px 12px; color: var(--muted); font-size: 11px; text-align: center; overflow: hidden; cursor: zoom-in; }
.history-thumb img { width: 100%; height: 100%; object-fit: contain; }
.history-item.open { grid-template-columns: 1fr; }
.history-item.open .history-thumb { width: 100%; height: auto; aspect-ratio: 45 / 51; cursor: zoom-out; }
.history-info { display: grid; gap: 4px; align-content: start; min-width: 0; font-size: 13px; }
.history-info strong { font-size: 14px; }
.history-info .muted { color: var(--muted); overflow-wrap: anywhere; }
.history-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.history-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; }
.history-tag.on { background: var(--primary-soft); color: var(--primary); }
.history-tag.warn { background: #fdecd9; color: #a4510a; }
.history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.history-actions button { min-height: 30px; padding: 4px 10px; font-size: 13px; }

/* Tài khoản: đăng nhập, đổi mật khẩu, quản lý nhân viên. */
.form-error { margin: 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--danger, #b42318) 10%, transparent); color: var(--danger, #b42318); font-size: 14px; }
.form-error[hidden], .form-warn[hidden], .user-secret[hidden], #login-code-field[hidden], .account-area[hidden], .admin-area[hidden], #login-form[hidden] { display: none; }
.form-warn { margin: 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--note-orange) 12%, transparent); color: var(--text); font-size: 14px; }
.hint, .hint-inline { color: var(--muted); font-size: 13px; font-weight: 400; }
.hint { margin: 4px 0 0; }
.account-area { display: grid; gap: 16px; align-items: start; }
.me-line { margin: 0; font-weight: 600; }
.password-form { display: grid; gap: 12px; }
.password-form h3, .admin-area h3 { margin: 0; font-size: 16px; }
.admin-area { display: grid; gap: 14px; }
.user-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.user-secret { margin: 0; padding: 10px 12px; border: 1px solid var(--ok); border-radius: 6px; background: color-mix(in srgb, var(--ok) 8%, transparent); font-size: 14px; overflow-wrap: anywhere; }
.user-secret code { font-size: 15px; font-weight: 700; user-select: all; }
.table-wrap { overflow-x: auto; }
.user-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.user-table th, .user-table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.user-table th { color: var(--muted); font-weight: 600; }
.user-actions { display: flex; gap: 6px; justify-content: flex-end; }
.access-log { display: grid; gap: 4px; max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.access-log .is-bad { color: var(--danger, #b42318); }
.nav-item[hidden] { display: none; }
@media (max-width: 720px) { .user-add { grid-template-columns: 1fr; } }

/* Khoá đơn: người khác đang sửa, hoặc mình để quá lâu nên đã nhả. */
.lock-note { margin: 0; padding: 8px 12px; border: 1px solid var(--note-orange); border-radius: 6px; background: color-mix(in srgb, var(--note-orange) 10%, transparent); color: var(--text); font-size: 14px; line-height: 1.5; }
.lock-note[hidden] { display: none; }
.lock-note button { margin-left: 4px; }