/* viewer — gia phả on giấy dó: green ink cards, ochre lines, gốm đỏ for female lines */
.vhead{text-align:center;padding:20px 0 4px}
.vhead h1{margin:0;color:var(--green);font:800 clamp(28px,5vw,44px)/1.2 var(--serif)}
.vhead .meta{color:var(--muted);padding:0 8px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.toolbar .btn{min-width:150px}
.zoom{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.zoom button{min-width:56px;min-height:56px;font-size:26px;border-radius:12px;border:1.5px solid var(--green-bd);background:var(--card-solid);color:var(--green);cursor:pointer}
.zoom button:hover{background:var(--green-l)}
.canvas{overflow:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:rgba(255,253,247,.45);padding:24px 8px 40px}
.tree{display:inline-block;min-width:100%}
.gp{position:relative;margin:0 auto;transform-origin:top left}
.gp .lines{position:absolute;left:0;top:0;overflow:visible}
.gp .lines path{fill:none;stroke:var(--ochre);stroke-width:3;stroke-linejoin:round}
.person{position:absolute;box-sizing:border-box;overflow:hidden;background:var(--card-solid);border:2px solid var(--green2);border-radius:14px;padding:6px 8px;text-align:center;cursor:pointer}
.person:hover,.person:focus-visible{background:#fff}
.person.root{background:var(--ochre-l);border-color:var(--ochre);border-width:3px}
.person.female{border-color:var(--terra);background:#fdf6f2}
.person .gen{display:inline-block;background:var(--green);color:#fff;font-size:13px;border-radius:999px;padding:0 10px}
.person.root .gen{background:var(--ochre-d)}
.person.female .gen{background:var(--terra)}
.person .ptitle{font-size:14px;color:var(--muted);font-weight:700;line-height:1.1;margin-top:2px}
.person .name{font-weight:800;font-size:18px;line-height:1.2;color:var(--ink)}
.person .yrs{color:var(--muted);font-size:14px}
.honors{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:2px}
.honors span{background:var(--ochre-l);border:1px solid var(--ochre);color:var(--ochre-d);border-radius:999px;font-size:12px;padding:0 6px;line-height:1.5}
.person .wives{font-size:13px;margin-top:2px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side{position:absolute;box-sizing:border-box;overflow:auto;background:#fdf6f2;border:1.5px dashed var(--terra);border-radius:10px;padding:4px 6px;font-size:14px}
.side-h{font-size:12px;font-weight:700;color:var(--terra)}
.side-p{cursor:pointer;line-height:1.25;padding:2px 0;border-top:1px solid var(--terra-l)}
.side-p small{color:var(--muted)}
.separate{max-width:900px;margin:18px auto 0;padding:0 12px;text-align:left}
.separate h2{color:var(--terra);font:700 21px/1.3 var(--serif)}
dialog{border:1px solid var(--line2);border-radius:18px;background:var(--paper);max-width:520px;width:calc(100% - 32px);padding:20px;color:var(--ink)}
dialog::backdrop{background:rgba(20,40,30,.5)}
dialog h2{color:var(--green);font-family:var(--serif);margin-top:0}
.qr{display:block;margin:8px auto;width:240px;height:240px}
.codebig{font:700 32px/1.2 monospace;letter-spacing:4px;text-align:center;color:var(--green)}
.empty{padding:60px 16px;text-align:center}
@media print{header.top,.toolbar,.zoom,footer{display:none}.canvas{overflow:visible;border:0;background:#fff}body{background:#fff}body::before{display:none}}

.owner-note{background:var(--ochre-l);border:1px solid var(--ochre);border-radius:14px;padding:4px 16px;margin-top:10px;font-size:17px}

/* giapha.daicat.app portal (public/portal.html) + "Bản in" + owner-QR note */
.portal main{max-width:760px}
.pstep{background:var(--card-solid);border:1.5px solid var(--line2);border-radius:18px;padding:16px 18px;margin:14px 0;font-size:18px;line-height:1.5}
.pstep h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--green);font:800 22px/1.25 var(--serif)}
.pnum{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font:800 22px/1 var(--sans,system-ui)}
.pnote{color:var(--muted);font-size:16px}
.pmsg{font-weight:700;color:var(--green);min-height:1.5em}
.pmsg.bad,.perr{color:#b3261e;font-weight:700}
.perr{min-height:1.4em;margin:4px 0 8px;font-size:16px}
.pcode{width:100%;box-sizing:border-box;min-height:64px;font:800 28px/1 ui-monospace,Menlo,monospace;text-align:center;letter-spacing:4px;border:2px solid #c6cfc0;background:#fffdf7;color:#1f3a2e;border-radius:14px;text-transform:uppercase}
.pcode.bad{border-color:#b3261e;border-width:3px}
.pinfo{background:var(--ochre-l);border-color:var(--ochre)}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.stores .btn{flex:1 1 200px;text-align:center}
.owner-warn{background:#fdecea;border:2px solid #b3261e;border-radius:14px;padding:10px 16px;margin-top:10px;font-size:18px}
.owner-warn b{color:#b3261e}
.printimg{display:block;max-width:100%;height:auto;margin:12px auto;border:2px solid var(--line2);border-radius:8px;background:#fff}
.tabs{display:flex;gap:8px;justify-content:center;margin:10px 0}
.tabs button{min-height:52px;min-width:130px;font-size:18px;font-weight:700;border-radius:999px;border:2px solid var(--green-bd);background:var(--card-solid);color:var(--green);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--green);color:#fff;border-color:var(--green)}