/* Thư viện thiệp giấy /thiep-giay — tự chứa, sáng/tối theo prefers-color-scheme */
#gy{--bg:#fbf6f0;--panel:#fff;--ink:#2a211c;--mute:#6a5c52;--line:#e3d6c8;--acc:#9a3b2e;--acc2:#7d2e23;--accink:#fff;--stage:#d9d2c8;
 background:var(--bg);color:var(--ink);font:15px/1.5 'Be Vietnam Pro',system-ui,-apple-system,sans-serif;padding:28px 0 56px}
@media (prefers-color-scheme:dark){#gy{--bg:#1d1916;--panel:#27221f;--ink:#f1e9df;--mute:#bdb0a3;--line:#43392f;--acc:#e08a76;--acc2:#f0a493;--accink:#2a1510;--stage:#12100e}}
#gy *{box-sizing:border-box}
#gy .gy-w{max-width:1200px;margin:0 auto;padding:0 16px}
#gy h1{font:700 clamp(26px,5vw,40px)/1.15 'Playfair Display',Georgia,serif;margin:0 0 8px;color:var(--ink)}
#gy h1 em{font-style:italic;color:var(--acc)}
#gy .gy-lead{margin:0 0 18px;color:var(--mute);max-width:60ch}
#gy button,#gy input,#gy select{font:inherit;color:var(--ink)}
#gy input,#gy select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 12px;min-height:44px;width:100%;min-width:0}
#gy button{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 14px;min-height:44px;cursor:pointer}
#gy button:hover{border-color:var(--acc)}
#gy button:focus-visible,#gy input:focus-visible,#gy select:focus-visible,#gy .gy-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#gy button.pri,#gy button.on{background:var(--acc);border-color:var(--acc);color:var(--accink);font-weight:600}
#gy button:disabled{opacity:.55;cursor:default}
.gy-prof{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.gy-prof label{display:grid;gap:3px;font-size:13px;color:var(--mute)}
.gy-prof .gy-pt{grid-column:1/-1;font-weight:600;color:var(--ink);font-size:15px}
.gy-prof .gy-st{grid-column:1/-1;font-size:13px;color:var(--mute);min-height:18px}
.gy-bar{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:12px}
@media (min-width:700px){.gy-bar{grid-template-columns:minmax(220px,340px) 1fr}}
.gy-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.gy-chips button{flex:none;white-space:nowrap;min-height:44px!important;border-radius:20px!important}
.gy-count{font-size:13px;color:var(--mute);margin:4px 0 12px}
.gy-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.gy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.gy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.gy-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gy-card{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:left;color:var(--ink);min-width:0}
#gy .gy-card{min-height:0;padding:10px;align-items:stretch}
.gy-th{height:190px;display:flex;align-items:center;justify-content:center;background:var(--stage);border-radius:8px;overflow:hidden;padding:8px}
.gy-th svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.gy-th.ld::after{content:"";width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:gyr 1s linear infinite}
@keyframes gyr{to{transform:rotate(360deg)}}
.gy-card b{font-size:13.5px;line-height:1.3;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gy-card small{font-size:12px;color:var(--mute);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gy-empty{padding:40px 0;text-align:center;color:var(--mute)}
.gy-note{margin-top:22px;font-size:13px;color:var(--mute)}
.gy-note a{color:var(--acc)}
/* xem to */
.gy-ov{position:fixed;inset:0;z-index:9999;background:var(--bg);color:var(--ink);display:none;flex-direction:column;font:14px/1.45 'Be Vietnam Pro',system-ui,sans-serif;--bg:#fbf6f0;--panel:#fff;--ink:#2a211c;--mute:#6a5c52;--line:#e3d6c8;--acc:#9a3b2e;--accink:#fff;--stage:#d9d2c8}
@media (prefers-color-scheme:dark){.gy-ov{--bg:#1d1916;--panel:#27221f;--ink:#f1e9df;--mute:#bdb0a3;--line:#43392f;--acc:#e08a76;--accink:#2a1510;--stage:#12100e}}
.gy-ov.open{display:flex}
.gy-ov *{box-sizing:border-box}
.gy-ov button,.gy-ov select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 12px;min-height:44px;cursor:pointer}
.gy-ov select{max-width:100%}
.gy-ov button:hover{border-color:var(--acc)}
.gy-ov button:focus-visible,.gy-ov select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gy-ov button.pri,.gy-ov button.on{background:var(--acc);border-color:var(--acc);color:var(--accink);font-weight:600}
.gy-ov button:disabled{opacity:.55;cursor:default}
.gy-oh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.gy-oh .t{font-weight:600;flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gy-oh .t small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.gy-seg{display:inline-flex}.gy-seg button{border-radius:0;margin-left:-1px}.gy-seg button:first-child{border-radius:10px 0 0 10px;margin:0}.gy-seg button:last-child{border-radius:0 10px 10px 0}
.gy-body{flex:1;display:flex;min-height:0}
.gy-stage{flex:1;overflow:auto;background:var(--stage);position:relative;display:flex;padding:20px;-webkit-overflow-scrolling:touch}
.gy-card2{margin:auto;flex:none;background:#fff;line-height:0;box-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 40px rgba(0,0,0,.3)}
.gy-card2 svg{display:block}
.gy-zb{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.gy-zb span{min-width:46px;text-align:center;color:var(--mute);font-variant-numeric:tabular-nums}
.gy-side{width:290px;flex:none;background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.gy-side h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--mute)}
.gy-side label{display:grid;gap:3px;font-size:12.5px;color:var(--mute)}
.gy-side .chk{display:flex;gap:8px;align-items:center}
.gy-side .chk input{width:auto;min-height:0}
.gy-side .f{display:grid;gap:8px}
.gy-info{font-size:12.5px;color:var(--mute)}.gy-info b{color:var(--ink);font-weight:600}
.gy-warn{margin:0;padding-left:16px;font-size:12px;color:#b4531f}
@media (prefers-color-scheme:dark){.gy-warn{color:#f0a070}}
.gy-lock{font-size:13px;color:var(--ink);background:var(--bg);border:1px dashed var(--acc);border-radius:10px;padding:10px}
.gy-lock a{color:var(--acc);font-weight:600}
.gy-nav{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line)}
.gy-nav .c{color:var(--mute);font-size:13px}
@media (max-width:820px){
 .gy-body{flex-direction:column}
 .gy-side{width:auto;border-left:0;border-top:1px solid var(--line);max-height:34vh;flex:none}
 .gy-stage{padding:10px;min-height:0}
 .gy-zb{top:8px;bottom:auto;right:8px}
 .gy-oh .t{flex:1 1 100%;order:-1}
}
#gy-print-root{display:none}