/* ĐẶT IN ONLINE — "phiếu đặt in" job-ticket form (homepage)
   Dùng lại token thương hiệu đã khai báo trong index.html:
   --ink --gold --paper --paper-alt --line --text --text-soft --proof-red */

/* Chọn cả tên thẻ để thắng .section{padding:88px 0} khai báo trong <style> của
   index.html — cùng độ ưu tiên thì khối inline nằm sau sẽ đè lên file này. */
section.order-ticket-section {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.ot-grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 900px) { .ot-grid { grid-template-columns: 1fr; } }

/* ---------- Cột trái: mục đích ---------- */
.ot-intro .eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark, #B87F04);
}
.ot-intro h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  color: var(--ink, #14213D);
}
.ot-intro p { color: var(--text-soft, #5B564F); max-width: 46ch; margin: 0 0 18px; }

.ot-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.ot-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #E4DFD3);
}
.ot-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.ot-steps b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dark, #B87F04);
  letter-spacing: 0.08em;
}
.ot-steps span { color: var(--text, #1C1B1A); font-size: 15px; }

.ot-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink, #14213D);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ot-login:hover { color: var(--gold-dark, #B87F04); }

/* ---------- Phiếu đặt in ---------- */
.ot-ticket {
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4DFD3);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 8px 24px -8px rgba(20,33,61,0.18));
}

/* Thanh canh màu CMYK — dấu hiệu nhà in, không phải trang trí */
.ot-reg { display: flex; height: 4px; }
.ot-reg i { flex: 1; }
.ot-reg i:nth-child(1) { background: #00AEEF; }
.ot-reg i:nth-child(2) { background: #EC008C; }
.ot-reg i:nth-child(3) { background: #FFF200; }
.ot-reg i:nth-child(4) { background: var(--ink, #14213D); }

.ot-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px dashed var(--line, #E4DFD3);
  background: var(--paper-alt, #F3F0E9);
}
.ot-head strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink, #14213D);
}
.ot-head code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-soft, #5B564F);
}

.ot-body { padding: 20px; display: grid; gap: 14px; }

.ot-row { display: grid; gap: 14px; }
.ot-row--2 { grid-template-columns: 1fr 1fr; }
.ot-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.ot-row--equal { align-items: stretch; }
.ot-row--equal .ot-field { grid-template-rows: auto 1fr; }
@media (max-width: 720px) { .ot-row--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ot-row--2, .ot-row--3 { grid-template-columns: 1fr; } }

.ot-field { display: grid; gap: 6px; min-width: 0; }
.ot-field > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-soft, #5B564F);
}
.ot-field > label .req { color: var(--proof-red, #C0392B); }

.ot-field input[type="text"],
.ot-field input[type="tel"],
.ot-field input[type="number"],
.ot-field select,
.ot-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text, #1C1B1A);
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4DFD3);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ot-field textarea { resize: vertical; min-height: 104px; height: 100%; }
.ot-field select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B564F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

.ot-field :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--gold, #E3A008);
  box-shadow: 0 0 0 3px rgba(227,160,8,0.18);
}
.ot-field.is-invalid :is(input, select) { border-color: var(--proof-red, #C0392B); }

.ot-hint { font-size: 12px; color: var(--text-soft, #5B564F); }

/* Chip gia công */
.ot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-chip {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line, #E4DFD3);
  background: var(--white, #fff);
  color: var(--text-soft, #5B564F);
  transition: all .15s ease;
}
.ot-chip:hover { border-color: var(--ink, #14213D); color: var(--ink, #14213D); }
.ot-chip[aria-pressed="true"] {
  background: var(--ink, #14213D);
  border-color: var(--ink, #14213D);
  color: #fff;
}
.ot-chip:focus-visible { outline: 2px solid var(--gold, #E3A008); outline-offset: 2px; }

/* File */
.ot-file { position: relative; height: 100%; min-height: 104px; }
.ot-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ot-file-face {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 6px; height: 100%; min-height: 104px;
  border: 1px dashed var(--line, #E4DFD3);
  border-radius: var(--radius-sm, 6px);
  padding: 12px;
  font-size: 14px;
  color: var(--text-soft, #5B564F);
  background: var(--paper, #FAF8F4);
}
.ot-file:hover .ot-file-face { border-color: var(--ink, #14213D); }
.ot-file input:focus-visible + .ot-file-face { border-color: var(--gold, #E3A008); }
.ot-file-name { color: var(--text, #1C1B1A); font-weight: 500; word-break: break-word; }
.ot-file-hint { font-size: 12px; line-height: 1.4; }
.ot-file-face b { font-weight: 600; color: var(--ink, #14213D); font-size: 13px; }

/* Khối tạm tính — con dấu ước lượng */
.ot-estimate {
  border-top: 1px dashed var(--line, #E4DFD3);
  margin-top: 4px;
  padding-top: 16px;
  display: grid;
  gap: 4px;
}
.ot-estimate-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ot-estimate-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-soft, #5B564F);
}
.ot-estimate-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--gold-dark, #B87F04);
}
@media (max-width: 420px) { .ot-estimate-label em { display: block; } }
.ot-estimate-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--ink, #14213D);
  letter-spacing: -0.02em;
}
.ot-estimate-note { display: none; }
.ot-estimate-label em { display: none; }
.ot-estimate[data-state="empty"] .ot-estimate-value { color: var(--text-soft, #5B564F); font-size: 18px; font-weight: 500; }
.ot-estimate[data-state="custom"] .ot-estimate-value { color: var(--gold-dark, #B87F04); font-size: 18px; }

.ot-submit {
  margin-top: 4px;
  width: 100%;
  font: inherit;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--ink, #14213D);
  border: 0;
  border-radius: var(--radius-md, 10px);
  padding: 14px 20px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ot-submit:hover { background: var(--ink-dark, #0B1526); }
.ot-submit:focus-visible { outline: 2px solid var(--gold, #E3A008); outline-offset: 3px; }
.ot-submit[disabled] { opacity: .6; cursor: progress; }

.ot-status { font-size: 14px; margin: 0; min-height: 1.2em; }
.ot-status[data-tone="error"] { color: var(--proof-red, #C0392B); }
.ot-status[data-tone="ok"] { color: #1E7A4B; }

@media (prefers-reduced-motion: reduce) {
  .ot-chip, .ot-submit, .ot-field :is(input, select, textarea) { transition: none; }
}

/* ---------- Luno: dẫn hướng ở cuối cột trái ---------- */
.ot-luno { margin: 20px 0 0; }
.ot-luno img {
  display: block;
  width: 100%;
  max-width: 530px;
  height: auto;
  border-radius: var(--radius-md, 10px);
}
@media (max-width: 900px) { .ot-luno { display: none; } }

/* ---------- Sau khi gửi: chuyển tiếp sang Zalo ---------- */
.ot-done {
  border-top: 1px dashed var(--line, #E4DFD3);
  padding-top: 14px;
}

.ot-action {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--ink, #14213D);
  background: var(--white, #fff);
  color: var(--ink, #14213D);
  transition: background .15s ease, color .15s ease;
}
.ot-action:hover { background: var(--ink, #14213D); color: #fff; }
.ot-action:focus-visible { outline: 2px solid var(--gold, #E3A008); outline-offset: 2px; }
.ot-action--zalo { border-color: #0068FF; color: #0068FF; }
.ot-action--zalo:hover { background: #0068FF; color: #fff; }

/* Nút Zalo: copy phiếu và mở chat trong một thao tác */
.ot-action--zalo { width: 100%; justify-content: center; }
.ot-action--zalo svg { flex: none; }
.ot-action[data-copied="true"] {
  border-color: #1E7A4B; background: #1E7A4B; color: #fff;
}

/* ============================================================
   LỚP PHỦ — kiểm tra đơn & xác nhận đã nhận đơn
   Nằm ngay trên trang chủ, không điều hướng sang trang khác.
   ============================================================ */

.ot-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 21, 38, 0.55);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  animation: ot-fade .18s ease;
}
.ot-overlay[hidden] { display: none; }
@keyframes ot-fade { from { opacity: 0 } to { opacity: 1 } }

.ot-sheet-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line, #E4DFD3);
  background: var(--white, #fff); color: var(--text-soft, #5B564F);
}
.ot-sheet-close:hover { border-color: var(--ink, #14213D); color: var(--ink, #14213D); }
.ot-sheet-close:focus-visible { outline: 2px solid var(--gold, #E3A008); outline-offset: 2px; }

/* ---------- Phiếu kiểm tra đơn ---------- */
.ot-sheet {
  position: relative;
  width: min(920px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(11, 21, 38, .5);
  animation: ot-rise .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes ot-rise { from { transform: translateY(12px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (max-width: 820px) { .ot-sheet { grid-template-columns: 1fr; } }

.ot-sheet-aside {
  position: relative;
  padding: 0 22px 22px;
  background: var(--paper-alt, #F3F0E9);
  border-right: 1px dashed var(--line, #E4DFD3);
}
.ot-sheet-aside .ot-reg { margin: 0 -22px 20px; }
.ot-sheet-aside h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; letter-spacing: -0.01em; color: var(--ink, #14213D); margin: 0;
}
.ot-sheet-sub { margin: 4px 0 16px; font-size: 13px; color: var(--text-soft, #5B564F); }

.ot-summary { margin: 0; display: grid; gap: 10px; }
.ot-summary div {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line, #E4DFD3);
}
.ot-summary dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft, #5B564F); padding-top: 2px;
}
.ot-summary dd { margin: 0; font-size: 14px; color: var(--text, #1C1B1A); word-break: break-word; }

.ot-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line, #E4DFD3);
}
.ot-total span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft, #5B564F);
}
.ot-total strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: var(--ink, #14213D); letter-spacing: -0.02em;
}
.ot-total-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-soft, #5B564F); }
.ot-total--extra { margin-top: 6px; font-size: 12px; }
.ot-total--grand { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #ddd); }

.ot-sheet-main { padding: 24px 22px 22px; display: grid; gap: 18px; align-content: start; }
.ot-sheet-block { display: grid; gap: 12px; }
.ot-sheet-block h4 {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dark, #B87F04);
}
.ot-opt { font-weight: 400; color: var(--text-soft, #5B564F); font-size: 11px; }

.ot-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .ot-choices { grid-template-columns: 1fr; } }
.ot-choice {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--line, #E4DFD3);
  border-radius: var(--radius-sm, 6px); background: var(--white, #fff);
  transition: border-color .15s ease, background .15s ease;
}
.ot-choice input { margin-top: 3px; accent-color: var(--ink, #14213D); flex: none; }
.ot-choice b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink, #14213D); }
.ot-choice em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-soft, #5B564F); margin-top: 1px; }
.ot-choice:hover { border-color: var(--ink, #14213D); }
.ot-choice:has(input:checked) { border-color: var(--ink, #14213D); background: var(--paper, #FAF8F4); }

.ot-sheet-actions {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px;
}
@media (max-width: 520px) { .ot-sheet-actions { flex-direction: column-reverse; align-items: stretch; } }
.ot-btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 13px 16px; border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line, #E4DFD3); background: var(--white, #fff);
  color: var(--text-soft, #5B564F); white-space: nowrap;
}
.ot-btn-back:hover { border-color: var(--ink, #14213D); color: var(--ink, #14213D); }
.ot-btn-back:focus-visible { outline: 2px solid var(--gold, #E3A008); outline-offset: 2px; }
.ot-btn-confirm { flex: 1; margin-top: 0; }

/* ---------- Đã nhận đơn ---------- */
.ot-done-sheet {
  position: relative;
  width: min(460px, 100%);
  margin: auto;
  padding: 28px 26px 26px;
  text-align: center;
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px -20px rgba(11, 21, 38, .5);
  animation: ot-rise .22s cubic-bezier(.22,.61,.36,1);
}
.ot-done-luno { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 14px; }
.ot-done-code {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--paper-alt, #F3F0E9);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em; color: var(--ink, #14213D);
}
.ot-done-sheet h3 {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink, #14213D);
}
.ot-done-text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-soft, #5B564F); }
.ot-done-sheet .ot-done-actions { display: grid; gap: 10px; }
.ot-done-cta { display: block; text-decoration: none; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ot-overlay, .ot-sheet, .ot-done-sheet { animation: none; }
}

/* Nhãn "Chỉ từ" trên thẻ sản phẩm có bậc giá theo số lượng */
.prod-price .prod-from {
  display: block;
  font-style: normal;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dark, #B87F04);
  margin-bottom: 1px;
}

/* ---------- Khối "Giao hàng & hoá đơn" trong phiếu kiểm tra đơn ---------- */
.ot-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .ot-facts { grid-template-columns: 1fr; } }
.ot-fact {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--radius-sm, 6px);
  background: var(--paper, #FAF8F4); border: 1px solid var(--line, #E4DFD3);
}
.ot-fact svg { width: 18px; height: 18px; flex: none; color: var(--gold-dark, #B87F04); margin-top: 1px; }
.ot-fact b { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft, #5B564F); }
.ot-fact span { display: block; font-size: 14px; font-weight: 600; color: var(--ink, #14213D); margin: 1px 0 2px; }
.ot-fact em { display: block; font-style: normal; font-size: 11px; line-height: 1.4; color: var(--text-soft, #5B564F); }

/* ============================================================
   LỚP PHỦ — hoàn thiện hồ sơ đơn (gửi file + đặt cọc)
   ============================================================ */
.ot-finish {
  position: relative;
  width: min(940px, 100%);
  margin: auto;
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(11, 21, 38, .5);
  animation: ot-rise .22s cubic-bezier(.22,.61,.36,1);
}

.ot-finish-head { padding: 0 22px 14px; background: var(--paper-alt, #F3F0E9); }
.ot-finish-head .ot-reg { margin: 0 -22px 18px; }
.ot-finish-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ot-finish-head h3 {
  margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; letter-spacing: -0.01em; color: var(--ink, #14213D);
}
.ot-finish-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft, #5B564F); }
.ot-finish-head code {
  flex: none; padding: 5px 12px; border-radius: 999px; background: var(--white, #fff);
  border: 1px solid var(--line, #E4DFD3);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink, #14213D);
}

.ot-steps-bar { list-style: none; display: flex; gap: 8px; margin: 16px 0 0; padding: 0; flex-wrap: wrap; }
.ot-steps-bar li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-soft, #5B564F);
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--white, #fff); border: 1px solid var(--line, #E4DFD3);
}
.ot-steps-bar span {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  background: var(--paper-alt, #F3F0E9); color: var(--text-soft, #5B564F);
}
.ot-steps-bar .is-done { border-color: var(--ink, #14213D); color: var(--ink, #14213D); }
.ot-steps-bar .is-done span { background: var(--ink, #14213D); color: #fff; }
.ot-steps-bar .is-current { border-color: var(--gold, #E3A008); background: #fff; color: var(--ink, #14213D); font-weight: 600; }
.ot-steps-bar .is-current span { background: var(--gold, #E3A008); color: var(--ink-dark, #0B1526); }

.ot-finish-body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  gap: 0;
}
@media (max-width: 860px) { .ot-finish-body { grid-template-columns: 1fr; } }
.ot-finish-main { padding: 20px 22px; display: grid; gap: 12px; align-content: start; }
.ot-finish-side {
  padding: 20px 22px; display: grid; gap: 16px; align-content: start;
  background: var(--paper, #FAF8F4); border-left: 1px dashed var(--line, #E4DFD3);
}
@media (max-width: 860px) { .ot-finish-side { border-left: 0; border-top: 1px dashed var(--line, #E4DFD3); } }
.ot-finish-side h4 {
  margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark, #B87F04);
}
.ot-finish-side h4 em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--text-soft, #5B564F); font-size: 10.5px;
}

/* Vùng thả file */
.ot-drop {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: 30px 20px; text-align: center;
  border: 2px dashed var(--line, #E4DFD3); border-radius: var(--radius-md, 10px);
  background: var(--paper, #FAF8F4);
  transition: border-color .15s ease, background .15s ease;
}
.ot-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ot-drop svg { width: 30px; height: 30px; color: var(--gold-dark, #B87F04); }
.ot-drop b { font-size: 15px; color: var(--ink, #14213D); }
.ot-drop span { font-size: 12px; color: var(--text-soft, #5B564F); }
.ot-drop:hover, .ot-drop.is-over { border-color: var(--gold, #E3A008); background: #fff; }

.ot-filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ot-filelist li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line, #E4DFD3); background: var(--white, #fff);
  font-size: 13px; color: var(--text, #1C1B1A);
}
.ot-filelist .ot-file-state { margin-left: auto; font-size: 11.5px; color: var(--text-soft, #5B564F); flex: none; }
.ot-filelist li[data-state="done"] .ot-file-state { color: #1E7A4B; }
.ot-filelist li[data-state="error"] .ot-file-state { color: var(--proof-red, #C0392B); }
.ot-finish-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-soft, #5B564F); }

/* Đặt cọc */
.ot-deposit { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line, #E4DFD3); }
.ot-deposit-amount {
  margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: var(--ink, #14213D); letter-spacing: -0.02em;
}
.ot-bank { display: flex; gap: 12px; align-items: center; }
.ot-bank img { width: 96px; height: 96px; border-radius: var(--radius-sm, 6px); background: #fff; border: 1px solid var(--line, #E4DFD3); object-fit: contain; }
.ot-bank b { display: block; font-size: 13.5px; color: var(--ink, #14213D); }
.ot-bank span {
  display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px; letter-spacing: .04em; color: var(--ink, #14213D); margin: 2px 0;
}
.ot-bank em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-soft, #5B564F); }
.ot-deposit-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-soft, #5B564F); }

.ot-finish-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-top: 1px solid var(--line, #E4DFD3); background: var(--white, #fff);
}
@media (max-width: 520px) { .ot-finish-foot { flex-direction: column-reverse; align-items: stretch; } }

/* ---------- Loại tem (chỉ hiện với nhóm tem nhãn) ---------- */
.ot-subtype[hidden] { display: none; }
.ot-subtype > label .ot-opt { margin-left: 4px; }

/* ---------- Flash Print — in gấp trong ngày (+30%) ----------
   Là lựa chọn tốn thêm tiền, nên thiết kế phải trung tính khi tắt: không mời
   gọi, không màu nóng. Chỉ khi khách chủ động bật mới chuyển sang sắc vàng. */
.ot-flash { display: block; cursor: pointer; }
.ot-flash input { position: absolute; opacity: 0; width: 0; height: 0; }
.ot-flash-face {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line, #E4DFD3);
  border-radius: var(--radius-sm, 6px);
  background: var(--paper-alt, #F3F0E9);
  transition: border-color .15s ease, background .15s ease;
}
.ot-flash:hover .ot-flash-face { border-color: var(--ink, #14213D); }
.ot-flash-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4DFD3);
  color: var(--text-soft, #5B564F);
}
.ot-flash-mark svg { width: 16px; height: 16px; }
.ot-flash-text { display: grid; gap: 2px; min-width: 0; }
.ot-flash-text b {
  font-size: 13px; font-weight: 600; color: var(--ink, #14213D); line-height: 1.35;
}
.ot-flash-text em {
  font-style: normal; font-size: 11.5px; line-height: 1.45;
  color: var(--text-soft, #5B564F);
}
.ot-flash-switch {
  position: relative; flex: none;
  width: 38px; height: 22px; border-radius: 999px;
  background: #D9D3C6; transition: background .15s ease;
}
.ot-flash-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.ot-flash input:checked ~ .ot-flash-face {
  border-color: var(--gold, #E3A008);
  background: rgba(227, 160, 8, .10);
}
.ot-flash input:checked ~ .ot-flash-face .ot-flash-mark {
  background: var(--gold, #E3A008);
  border-color: var(--gold, #E3A008);
  color: #fff;
}
.ot-flash input:checked ~ .ot-flash-face .ot-flash-switch { background: var(--gold, #E3A008); }
.ot-flash input:checked ~ .ot-flash-face .ot-flash-switch::after { transform: translateX(16px); }
.ot-flash input:focus-visible ~ .ot-flash-face {
  outline: 2px solid var(--gold, #E3A008); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ot-flash-face, .ot-flash-switch, .ot-flash-switch::after { transition: none; }
}

/* ---------- In quảng cáo khổ lớn: ô đơn vị đo + m² tự tính ----------
   Chỉ hiện với nhóm hàng tính theo m². Chất liệu nhường chỗ cho ô Đơn vị,
   vì đơn vị là thứ khách buộc phải chọn còn chất liệu thì xưởng tư vấn được. */
.ot-row--3.is-bigformat { grid-template-columns: .82fr .92fr .62fr .84fr; }
.ot-unit[hidden] { display: none; }
.ot-unit select { padding-left: 10px; padding-right: 26px; }
.ot-unit-tag[hidden] { display: none; }
.ot-unit-tag {
  font-style: normal; font-weight: 500; color: var(--text-soft, #5B564F);
}
.ot-area-hint[hidden] { display: none; }
.ot-area-hint {
  margin: -6px 0 0;
  padding: 8px 11px;
  border-left: 2px solid var(--gold, #E3A008);
  background: var(--paper-alt, #F3F0E9);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  font-size: 12px; line-height: 1.5;
  color: var(--text-soft, #5B564F);
}
.ot-area-hint b {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px; color: var(--ink, #14213D);
}
.ot-area-hint em { font-style: normal; }
@media (max-width: 720px) {
  .ot-row--3, .ot-row--3.is-bigformat { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tạm tính: có giá rồi thì bỏ ghi chú ----------
   Khách chỉ cần con số. Ghi chú bậc giá là thông tin nội bộ, chỉ giữ lại khi
   CHƯA ra được giá (cần báo giá riêng / thiếu thông tin) — lúc đó nó là lời
   giải thích chứ không phải nhiễu. */
.ot-estimate[data-state="match"] .ot-estimate-note { display: none; }

/* ---------- Phí giao hàng ---------- */
.ot-ship-note[hidden] { display: none; }
.ot-ship-note {
  margin: -4px 0 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-soft, #5B564F);
}
.ot-total--grand { border-top: 1px solid var(--line, #E4DFD3); padding-top: 10px; }
.ot-order-code {
  margin: -4px 0 10px;
  font-size: 12px; color: var(--text-soft, #5B564F);
}
.ot-order-code code {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink, #14213D);
  background: var(--paper-alt, #F3F0E9);
  padding: 2px 7px; border-radius: 4px;
}

/* ---------- Ô đồng ý trước khi chốt đơn ----------
   Đây là mốc khách chốt giá. Nút xác nhận để mờ cho tới khi khách tự tick —
   không cho bấm nhầm một thứ có giá trị pháp lý. */
.ot-agree {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line, #E4DFD3);
  border-radius: var(--radius-sm, 6px);
  background: var(--paper-alt, #F3F0E9);
  cursor: pointer;
}
.ot-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.ot-agree-box {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line, #E4DFD3);
  border-radius: 4px;
  background: var(--white, #fff);
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ot-agree-box svg { width: 12px; height: 12px; }
.ot-agree-text { font-size: 13px; line-height: 1.45; color: var(--text, #1C1B1A); }
.ot-agree input:checked ~ .ot-agree-box {
  background: var(--ink, #14213D);
  border-color: var(--ink, #14213D);
  color: #fff;
}
.ot-agree input:focus-visible ~ .ot-agree-box {
  outline: 2px solid var(--gold, #E3A008); outline-offset: 2px;
}
.ot-agree:hover .ot-agree-box { border-color: var(--ink, #14213D); }

.ot-btn-confirm:disabled,
.ot-submit:disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(1);
}
@media (prefers-reduced-motion: reduce) { .ot-agree-box { transition: none; } }

/* ---------- Chân lớp hoàn thiện hồ sơ: đồng ý rồi mới chốt được đơn ---------- */
.ot-finish-foot { display: grid; gap: 12px; }
.ot-agree--finish { margin: 0; }
.ot-finish-foot-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ot-finish-foot-actions .ot-submit { min-width: 220px; }
.ot-order-code--main {
  margin-top: -6px;
  font-size: 13px;
  color: var(--ink, #14213D);
  font-weight: 600;
}
.ot-order-code--main[hidden] { display: none; }
.ot-order-code--main code {
  font-size: 13.5px;
  background: rgba(227, 160, 8, .14);
  color: var(--gold-dark, #B87F04);
}
@media (max-width: 560px) {
  .ot-finish-foot-actions { flex-direction: column-reverse; align-items: stretch; }
  .ot-finish-foot-actions .ot-submit { min-width: 0; }
}

/* ====================================================================
   LỚP THANH TOÁN ĐẶT CỌC
   Một việc duy nhất trên màn hình: quét mã. Mã đơn và số tiền đặt trên
   cùng để khách đối chiếu, QR đủ lớn để quét từ điện thoại thứ hai, đồng
   hồ đếm ngược cho biết mã sẽ tự huỷ.
   ==================================================================== */
.ot-overlay--pay { align-items: center; }

.ot-pay {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 26px 24px;
  border-radius: 16px;
  background: var(--white, #fff);
  box-shadow: 0 28px 70px rgba(11, 21, 38, .35);
  text-align: center;
}
.ot-pay-eyebrow {
  margin: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dark, #B87F04);
}
.ot-pay-code {
  margin: 6px 0 2px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink, #14213D);
}
.ot-pay-amount {
  margin: 0 0 16px;
  font-size: 30px; font-weight: 700; line-height: 1.1;
  color: var(--ink, #14213D);
}

.ot-pay-qr {
  position: relative;
  display: inline-block;
  padding: 12px;
  border: 1px solid var(--line, #E4DFD3);
  border-radius: 14px;
  background: #fff;
}
.ot-pay-qr img { display: block; width: 260px; height: 260px; }
.ot-pay-qr[data-expired="true"] img { opacity: .12; }
.ot-pay-expired {
  position: absolute; inset: 12px;
  display: grid; place-content: center; gap: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
}
.ot-pay-expired[hidden] { display: none; }
.ot-pay-expired b { font-size: 14px; color: var(--proof-red, #C0392B); }
.ot-pay-refresh {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ink, #14213D);
  background: var(--ink, #14213D); color: #fff;
}

.ot-pay-timer { display: grid; gap: 6px; margin: 14px 0 16px; }
.ot-pay-timer[hidden] { display: none; }
.ot-pay-timer-bar {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--paper-alt, #F3F0E9);
}
.ot-pay-timer-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--gold, #E3A008);
  transition: width 1s linear;
}
.ot-pay-timer-text { font-size: 12px; color: var(--text-soft, #5B564F); }
.ot-pay-timer-text b {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  color: var(--ink, #14213D);
}

.ot-pay-bank {
  display: grid; gap: 7px;
  margin: 0 0 16px; padding: 13px 15px;
  border-radius: 10px;
  background: var(--paper-alt, #F3F0E9);
  text-align: left;
}
.ot-pay-bank > div { display: flex; justify-content: space-between; gap: 12px; }
.ot-pay-bank dt { font-size: 12px; color: var(--text-soft, #5B564F); }
.ot-pay-bank dd {
  margin: 0; font-size: 12.5px; font-weight: 600; text-align: right;
  color: var(--ink, #14213D);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  word-break: break-all;
}
.ot-pay-note {
  margin: 10px 0 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-soft, #5B564F);
}
.ot-pay .ot-pay-done { width: 100%; }

/* Trạng thái đã ghi nhận cọc */
.ot-pay-check {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 6px auto 16px;
  border-radius: 50%;
  background: rgba(34, 139, 84, .12);
  color: #228B54;
}
.ot-pay-check svg { width: 30px; height: 30px; }
.ot-pay-done-title {
  margin: 0 0 8px; font-size: 20px; color: var(--ink, #14213D);
}
.ot-pay-done-code { margin: 0 0 6px; font-size: 13px; color: var(--text-soft, #5B564F); }
.ot-pay-done-code code {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-weight: 700; color: var(--ink, #14213D);
}
.ot-pay-done-text {
  margin: 0 0 20px; font-size: 13.5px; line-height: 1.55;
  color: var(--text, #1C1B1A);
}

/* Nút mở mã QR lớn từ khối đặt cọc */
.ot-pay-open {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 10px 0 0; padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ink, #14213D);
  border-radius: 8px;
  background: var(--white, #fff);
  color: var(--ink, #14213D);
  transition: background .15s ease, color .15s ease;
}
.ot-pay-open[hidden] { display: none; }
.ot-pay-open svg { width: 16px; height: 16px; }
.ot-pay-open:hover { background: var(--ink, #14213D); color: #fff; }

@media (max-width: 420px) {
  .ot-pay { padding: 24px 18px 20px; }
  .ot-pay-qr img { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-pay-timer-bar i, .ot-pay-open { transition: none; }
}

/* Lớp thanh toán luôn nằm trên lớp hoàn thiện hồ sơ — khách vừa xác nhận là
   thấy mã QR ngay, không phải đóng bớt lớp nào. */
.ot-overlay--pay { z-index: 1200; }

/* Trạng thái chờ đối soát — cố ý KHÔNG dùng màu xanh "hoàn tất".
   Khách mới báo là đã chuyển, xưởng chưa đối chiếu sao kê; hiện dấu tích xanh
   ở đây là mời khách chụp màn hình làm bằng chứng đã cọc. */
.ot-pay-check--pending { background: rgba(227, 160, 8, .14); color: var(--gold-dark, #B87F04); }
.ot-pay-pending {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 18px; padding: 9px 12px;
  border: 1px dashed var(--gold, #E3A008);
  border-radius: 8px;
  background: rgba(227, 160, 8, .07);
  font-size: 12px; color: var(--text, #1C1B1A);
}
.ot-pay-pending svg { width: 15px; height: 15px; flex: none; color: var(--gold-dark, #B87F04); }


/* ---------- Copy đơn gửi xưởng ---------- */
/* Nút copy thay cho link Zalo: dán được vào bất kỳ khung chat nào, không phụ
   thuộc máy có cài Zalo hay không. */
.ot-action--copy {
  width: 100%;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid var(--line, #E4DFD3);
  background: var(--surface-2, #F3F0E9);
  color: var(--ink, #14213D);
  font-weight: 600;
}
.ot-action--copy:hover { background: #EDE9E0; }
.ot-action--copy[data-copied="true"] {
  border-color: #1F9254;
  background: rgba(31, 146, 84, .08);
  color: #1F9254;
}
.ot-action--copy[data-copied="true"] span::after { content: " — đã copy"; }

/* Ghi chú sau khi gửi yêu cầu: nói rõ đây CHƯA phải xác nhận đơn chính thức. */
.ot-confirm-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(227, 160, 8, .35);
  background: rgba(227, 160, 8, .08);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink, #14213D);
}

/* Ghi chú khi mã QR chưa gắn được số tiền (đơn còn chờ báo giá). */
.ot-pay-qrnote {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #6B6558);
  text-align: center;
}