:root {
  color-scheme: only light;
  --paper: #fcfbf8; --card: #fff; --ink: #161514; --ink-2: #55514b; --muted: #7d776e;
  --line: #ebe6de; --line-2: #cfc8bc; --red: #d3141c; --red-press: #b00f16; --red-soft: #fdeceb;
  --ok: #17704a; --ok-soft: #e7f4ed; --warn: #9a5a00; --warn-soft: #fdf2df; --info-soft: #eef3fb; --info: #2b4f86;
  --radius: 14px; --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; }
.site { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
button, input, select { font: inherit; color: inherit; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand-mark { display: block; width: 40px; height: 40px; object-fit: contain; }
.brand-word { display: grid; line-height: 1; }
.brand-word strong { color: var(--red); font-size: 17px; font-weight: 800; letter-spacing: .16em; }
.brand-word em { margin-top: 3px; color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .24em; }
.brand-sm .brand-mark { width: 30px; height: 30px; }
.brand-sm .brand-word strong { font-size: 14px; }
.brand-sm .brand-word em { font-size: 8.5px; }

.intro { padding: 6px 0 14px; text-align: center; }
.intro h1 { font-size: clamp(16px, 5.2vw, 26px); line-height: 1.2; margin: 6px 0 4px; font-weight: 800; white-space: nowrap; }
.intro h1 span { white-space: nowrap; }
.intro .tag { margin: 0 0 12px; font-size: 16px; color: var(--red); font-weight: 600; }
.pts { list-style: none; margin: 0; padding: 0 0 0 6px; display: block; text-align: left; font-size: 16px; line-height: 1.6; }
.pts li { font-style: italic; }
.pts li::before { content: "*"; font-style: normal; font-weight: 700; margin-right: 8px; }
.lnk { border: 0; background: none; padding: 0; color: var(--red); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: inherit; }

/* Hộp thoại ví dụ */
.vd { position: fixed; inset: 0; z-index: 30; background: rgba(20,18,16,.55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.vd-box { background: var(--paper); border-radius: 16px; width: 100%; max-width: 940px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.vd-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.vd-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 10px; color: var(--ink-2); }
.vd-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: grid; gap: 16px; }
.vd figure { margin: 0; }
.vd figcaption { font-weight: 700; text-align: center; margin-bottom: 6px; }
.vd-fr { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.vd-fr .a4 { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vd-f { padding: 10px 14px; border-top: 1px solid var(--line); }
.vd-f .btn { width: 100%; }
body.vd-open { overflow: hidden; }
@media (min-width: 760px) { .vd-body { grid-template-columns: 1fr 1fr; } }

/* Tờ giấy ở đầu trang */
.paper { margin: 4px 0 6px; }
.cap { text-align: center; font-size: 15px; color: var(--ink-2); padding: 10px 4px 2px; min-height: 57px; box-sizing: border-box; } /* cao cố định 2 dòng: đổi chữ không làm form nhảy */
.cap .w { display: none; }
.wait { color: var(--muted); margin: 0 0 12px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px; margin: 14px 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; line-height: 1.2; }
.card h2 .num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; font-size: 17px; display: grid; place-items: center; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.row2 .chips { flex-wrap: nowrap; }

.fld { display: block; margin: 0 0 12px; border-radius: 12px; transition: background .3s, box-shadow .3s; }
.fld .lb { display: block; font-weight: 600; margin-bottom: 4px; font-size: 16px; }
.fld .lb em { color: var(--red); font-style: normal; }
.fld .lb small { color: var(--muted); font-weight: 400; font-size: 14px; }
.fld input, .fld select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff !important; background-color: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); font-size: 16px; box-shadow: none; }
.fld input { -webkit-appearance: none; appearance: none; }
.fld input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset !important; }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.fld input::placeholder { color: #c4bfb7; -webkit-text-fill-color: #c4bfb7; opacity: 1; font-style: italic; font-weight: 400; }
.hint { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.live { display: block; font-size: 14px; color: var(--info); margin-top: 4px; word-break: break-word; }
.live:empty { display: none; }
.live .bad { color: var(--warn); }
.flash { background: var(--warn-soft); box-shadow: 0 0 0 6px var(--warn-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .chip-sel { min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 600; cursor: pointer; font-size: 15px; }
.chip.on, .chip-sel.on { background: var(--red); border-color: var(--red); color: #fff; }
.chip-sel { appearance: none; -webkit-appearance: none; padding-right: 18px; }
/* Nút quan hệ: 2 hàng gọn — 4 trên, 3 dưới */
.fld[data-f$=".qh"] > .chips { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.fld[data-f$=".qh"] > .chips > * { grid-column: span 3; width: 100%; min-width: 0; padding: 7px 2px; text-align: center; text-align-last: center; white-space: nowrap; }

.sub { border-left: 3px solid var(--line-2); padding-left: 12px; margin: -4px 0 16px; }
.more { border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.more summary { cursor: pointer; font-weight: 600; }
.more summary small { color: var(--muted); font-weight: 400; }
.more[open] summary { margin-bottom: 14px; }

.rel { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 14px; background: #fff; }
.rel-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 17px; }
.x { border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 6px; white-space: nowrap; }
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 14px; }
.mini { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 14px; cursor: pointer; }
.elig { font-size: 15px; border-radius: 10px; padding: 0; }
.elig.ok { background: var(--ok-soft); color: var(--ok); padding: 10px 12px; }
.elig.warn { background: var(--warn-soft); color: var(--warn); padding: 10px 12px; }
.elig.info { background: var(--info-soft); color: var(--info); padding: 10px 12px; }

.btn { border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.big { width: 100%; min-height: 58px; font-size: 18px; }
.btn.add { background: #fff; border: 2px dashed var(--red); color: var(--red); }
.btn.red { background: var(--red); color: #fff; }
.btn.red:active { background: var(--red-press); }
.btn.ghost { background: #fff; border: 1px solid var(--line-2); }
.btn.small { font-size: 15px; padding: 9px 14px; font-weight: 600; }
.btn.danger { color: var(--muted); margin-top: 14px; }

.miss { background: var(--warn-soft); color: #5b3a00; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.miss ul { margin: 6px 0 0; padding: 0; list-style: none; }
.miss li button { border: 0; background: none; color: var(--warn); text-decoration: underline; padding: 4px 0; cursor: pointer; text-align: left; font-size: 16px; }
.okbox { background: var(--ok-soft); color: var(--ok); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #f3f0eb; padding: 5px; border-radius: 14px; margin-bottom: 10px; }
.tab { border: 0; background: none; border-radius: 10px; padding: 11px 6px; font-weight: 700; cursor: pointer; font-size: 16px; }
.tab.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.frame { position: relative; overflow: hidden; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.frame .a4 { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.dl > .btn { min-height: 52px; padding: 10px 4px; font-size: 15px; white-space: nowrap; line-height: 1.25; text-align: center; }
.dl > #dl-all { grid-column: 1 / -1; min-height: 58px; font-size: 18px; }
.tip { background: var(--info-soft); border-radius: 12px; padding: 12px 14px; font-size: 15px; margin-top: 14px; }
.tip ol { margin: 6px 0 0; padding-left: 20px; }
.faq { margin: 18px 0 6px; }
.faq-all { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.faq-all summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-all summary::-webkit-details-marker { display: none; }
.faq-all summary::after { content: "▾"; color: var(--muted); font-size: 18px; }
.faq-all[open] summary::after { content: "▴"; }
.faq-all summary h2 { margin: 0; font-size: 16px; }
.faq-all h3 { margin: 14px 0 4px; font-size: 15px; }
.faq-all p { margin: 0; font-size: 14px; color: var(--ink-2); }
.faq-all .src { margin-top: 12px; font-size: 12px; color: var(--muted); }
.ung-ho { background: #fff8e6; border: 1px solid #f1dfb0; border-radius: 18px; padding: 16px 14px; margin: 22px 0 8px; }
.ung-ho h2 { margin: 0 0 4px; font-size: 19px; }
.ung-ho p { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc a { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.25; }
.svc a span { font-size: 20px; flex: none; }
.svc a:hover { border-color: var(--red); }
.foot { background: #071525; color: #cfc8bd; text-align: center; padding: 22px 16px 26px; margin-top: 24px; font-size: 14px; }
.foot .hold { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; letter-spacing: .08em; font-size: 15px; }
.foot .hold img { width: 38px; height: 38px; object-fit: contain; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 12px 0 10px; }
.foot nav a { color: #fff; text-decoration: none; font-weight: 600; }
.foot small { display: block; max-width: 520px; margin: 0 auto 8px; color: #9b948a; }
.foot p { margin: 0; font-weight: 700; letter-spacing: .04em; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #222; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; z-index: 20; max-width: calc(100% - 32px); text-align: center; }

/* ---------- Tờ giấy A4 ---------- */
.a4 { width: 210mm; min-height: 297mm; padding: 12mm 14mm 10mm 17mm; background: #fff; color: #000; font-family: "Tinos", "Times New Roman", "Noto Serif JP", serif; font-size: 11.5pt; line-height: 1.38; }
.a4.exp { min-height: 0; }
.d.ja { font-family: "Tinos", "Times New Roman", "Noto Serif JP", "Hiragino Mincho ProN", serif; font-size: 10.5pt; }
.d p { margin: 0 0 1.2mm; }
.d sup { font-size: 7pt; }
.d .hd { display: flex; justify-content: space-between; gap: 6mm; margin-bottom: 3mm; }
.d .hl { width: 44%; text-align: center; font-size: 10.5pt; }
.d .hl .u { display: inline-block; border-bottom: 1px solid #000; padding-bottom: 1mm; }
.d .hl .so { margin-top: 3mm; }
.d .sp { display: inline-block; width: 22mm; }
.d .hr { width: 56%; text-align: center; display: flex; flex-direction: column; }
.d .hr b { font-size: 11.5pt; }
.d.vi .hr .u2 { display: inline-block; align-self: center; border-bottom: 1px solid #000; padding-bottom: 1mm; }
.d .hr .dt { margin-top: 4mm; }
.d h3 { text-align: center; font-size: 13pt; margin: 1mm 0 3mm; }
.d .two { display: flex; }
.d .two > span:first-child { width: 62%; }
.d .two > span:last-child { white-space: nowrap; }
.d .ctr { text-align: center; margin: 2mm 0; }
.d .ctr .xn { margin-left: 18mm; }
.d .idrow { display: flex; align-items: center; gap: 4mm; padding-left: 2mm; }
.d .bx { display: inline-flex; border: 1px solid #000; }
.d .bx i { font-style: normal; width: 6.2mm; height: 5.8mm; display: inline-grid; place-items: center; border-left: 1px solid #000; font-size: 11pt; }
.d .bx i:first-child { border-left: 0; }
.d .dots { display: inline-block; border-bottom: 1px dotted #000; height: 1em; vertical-align: baseline; }
.d .t { width: 100%; border-collapse: collapse; margin: 1mm 0 3mm; table-layout: fixed; }
.d .t th, .d .t td { border: 1px solid #000; padding: 1.1mm 1mm; text-align: center; vertical-align: middle; font-size: 9.5pt; line-height: 1.3; word-wrap: break-word; }
.d .t th { font-weight: 700; }
.d .t tbody td { height: 10.5mm; }
.d .t tr.e td { border-top-style: dotted; border-bottom-style: dotted; }
.d .t td.ad { font-size: 9pt; }
.d .t .c1 { width: 5%; } .d .t .c2 { width: 25%; } .d .t .c3 { width: 14%; } .d .t .c4 { width: 7%; } .d .t .c5 { width: 13%; } .d .t .c6 { width: 10%; }
.d .t td:nth-child(2) { white-space: nowrap; font-size: 9pt; letter-spacing: -0.1px; }
.d .t td:nth-child(3) { white-space: nowrap; }
.d.ja .t th, .d.ja .t td { font-size: 9pt; }
.d .iii { margin-top: 2mm; }
.d .iii i { font-weight: 400; }
.d .hl2 { padding-left: 10mm; }
.d .sig { width: 55%; margin-left: auto; text-align: center; }
.d .sp2 { height: 15mm; }
.d .note { margin-top: 2mm; font-size: 9pt; line-height: 1.35; }

/* Hộp ẩn dùng để xuất PDF */
.export { position: fixed; left: -10000px; top: 0; }

/* Chọn mẫu */
.mau { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.mau button { border: 1.5px solid var(--line-2); background: #fff; border-radius: 12px; padding: 9px 6px; font-weight: 700; font-size: 15px; cursor: pointer; line-height: 1.25; }
.mau button small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.mau button.on { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.mau button.on small { color: var(--red); }
.mau-note { font-size: 14px; color: var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }

/* Mẫu gọn */
.d.gon .qh { text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 4mm; }
.d.gon .qh b, .d.gon .qh span { font-size: 12.5pt; }
.d.gon .qh .u2, .d.gon .qh span { display: inline-block; border-bottom: 1px solid #000; padding-bottom: 1mm; font-weight: 700; }
.d.gon { font-size: 12.5pt; line-height: 1.5; }
.d.gon h3 { font-size: 16pt; margin: 11mm 0 8mm; }
.d.gon .info p { margin-bottom: 3.4mm; }
.d.gon > p { margin: 4mm 0 2.5mm; }
.d.gon .t { margin: 2mm 0 5mm; }
.d.gon .t th, .d.gon .t td { font-size: 10.5pt; padding: 1.5mm 1.2mm; }
.d.gon .t td.ad, .d.gon .t td:nth-child(2) { font-size: 10pt; }
.d.gon .t tbody td { height: 12mm; }
.d.gon .t .g1 { width: 6%; } .d.gon .t .g2 { width: 30%; } .d.gon .t .g3 { width: 11%; } .d.gon .t .g4 { width: 18%; }
/* tên dài thì xuống dòng trong ô, ngày sinh luôn 1 dòng */
.d.gon .t td:nth-child(2) { white-space: normal; }
.d.gon .t td:nth-child(4) { white-space: nowrap; }
.d.gon .dt2 { text-align: right; margin-top: 5mm; padding-right: 6mm; }
.d.gon .sig2 { display: flex; justify-content: space-between; margin-top: 3mm; text-align: center; }
.d.gon .sig2 > div { width: 46%; display: flex; flex-direction: column; align-items: center; }
.d.gon .sig2 i { font-size: 10.5pt; }
.d.gon .sig2 .sp2 { height: 20mm; }
.d.gon .tr { margin-top: 4mm; font-size: 10pt; }
.d.ja.gon { font-size: 11.5pt; }
.d.ja.gon .t td.ad { font-size: 9.5pt; }

/* Dòng đang điền trên giấy */
.d .k.hot, .d tr.hot td { background: #ffe97a; box-shadow: 0 0 0 1.5mm #ffe97a; border-radius: 1mm; transition: background .2s; }
.d tr.hot td { box-shadow: none; border-radius: 0; }
.d .k { transition: background .4s; }

/* Dải giấy nhỏ dính mép trên – điện thoại */
html.peek-on { scroll-padding-top: 150px; } /* trình duyệt tự chừa chỗ dưới dải giấy khi cuộn ô vào, thay cho scrollBy */
.peek { position: fixed; left: 0; right: 0; top: 0; z-index: 15; background: #fff; border-bottom: 1px solid var(--line-2); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.peek-in { height: 128px; overflow: hidden; position: relative; }
.peek-in .a4 { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.peek-go { position: absolute; right: 8px; bottom: 6px; border: 0; background: rgba(22,21,20,.82); color: #fff; font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }

/* Máy tính: form trái, giấy phải dính theo */
@media (min-width: 960px) {
  .site { max-width: 1180px; }
  .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
  .paper { order: 2; position: sticky; top: 12px; margin-top: 14px; }
  .form { order: 1; }
  .cap .m { display: none; } .cap .w { display: inline; }
  .peek { display: none !important; }
}

/* In trực tiếp: chỉ in tờ giấy */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  body.printing .site, body.printing .toast, body.printing .foot { display: none !important; }
  body.printing .export, body.printmode .export { position: static; }
}
body.printmode .site, body.printmode .toast, body.printmode .foot { display: none; }
body.printmode { background: #fff; }
body.printmode .export { position: static; }
.fld .chip-sel { width: auto; min-height: 40px; border-radius: 999px; padding: 7px 16px; font-size: 15px; border-width: 1.5px; }