:root{--xr:#1f4d3a;--xr6:#2e7d67;--vang:#c9a227;--vien:#dde5e0;--nhat:#5a6560}*{box-sizing:border-box}body{margin:0;background:#e6ebef;font-family:"Segoe UI",system-ui,Arial,sans-serif;color:#243028;font-size:15px;line-height:1.5}.dinh{background:linear-gradient(135deg,#1f4d3a,#2e7d67);color:white;padding:14px 22px;display:flex;align-items:center;gap:14px}.logo{width:52px;height:52px;border-radius:50%;background:#fff9e6;color:var(--xr);font:40px/52px Georgia;text-align:center;flex:none}.dinh h1{margin:0;font-size:19px;line-height:1.25}.dinh small{display:block;font-size:12.5px;font-weight:400;opacity:.9;margin-top:5px}.version{margin-left:auto;font-size:10px;letter-spacing:1.5px;border:1px solid #ffffff42;padding:5px 9px;border-radius:4px}.bao{max-width:1380px;margin:16px auto;padding:0 12px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}.the{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:16px 18px;box-shadow:0 2px 10px #1f4d3a0f}.the h2{margin:0 0 10px;font-size:16px;color:var(--xr)}label,legend{display:block;font-size:13px;color:var(--nhat);margin:9px 0 3px;font-weight:600}fieldset{padding:0;margin:0;border:0;min-width:0}legend{padding:0;width:100%;padding-top:9px;margin-top:0}input[type=text],input[type=number],select{width:100%;min-width:0;padding:8px 10px;border:1px solid #cbd5cf;border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:#243028}input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #b28c20;outline-offset:2px}.hang{display:flex;gap:8px}.hang>*{flex:1;width:0}.chon{display:flex;gap:6px}.chon label{flex:1;margin:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid #cbd5cf;border-radius:8px;cursor:pointer;font-weight:600;color:#243028}.chon input{position:absolute;opacity:0;width:1px;height:1px}.chon label:has(input:checked){background:#eef6f1;border-color:var(--xr6);color:var(--xr)}.chon label:has(input:focus-visible){outline:2px solid var(--vang);outline-offset:2px}.check{display:flex;align-items:center;gap:6px;font-weight:400;margin-top:6px}.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:10px;border:0;font-size:15.5px;font-weight:700;cursor:pointer;font-family:inherit}.nut:disabled{opacity:.6;cursor:wait}.n1{background:#657d80;color:#fff;width:100%;margin-top:14px}.n1:hover{filter:brightness(1.04)}.n2{background:#fff;border:1px solid var(--vien);color:var(--xr);font-size:13px;padding:8px 12px}.n2:hover{background:#eef6f1}.loi{background:#fff4f4;border:1px solid #e3a9a9;color:#a3111f;border-radius:8px;padding:9px 12px;margin-top:10px;font-size:14px}.ghi{font-size:12px;color:var(--nhat);margin:8px 0 0;line-height:1.5}.year-box{margin-top:16px;border:1px solid #d9b25c;border-radius:9px;background:#fffaf0;padding:10px 12px}.year-box label{margin:0 0 7px;color:var(--xr);font-weight:700}.year-control{display:flex;gap:6px}.year-control input{text-align:center;font-size:19px;font-weight:700;color:var(--xr);appearance:textfield}.year-control input::-webkit-inner-spin-button{appearance:none}.year-control button{width:42px;flex:none;border:1px solid #dfd2ab;border-radius:7px;background:#fff;color:var(--xr);font-size:24px;cursor:pointer}.settings{margin-top:12px;font-size:12px}.settings summary,.notes summary{cursor:pointer;color:var(--xr);font-weight:600;padding:5px 0}.la{text-align:center;min-width:0}.tt{font-size:13px;color:var(--nhat);margin:4px 0 10px}.nutHang{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.trong{color:var(--nhat);text-align:center;padding:76px 14px;font-size:14px}.trong h2{font-size:19px;margin-top:14px}.empty-icon{font:64px/1 Georgia;color:#537761;opacity:.65}.empty-tag{display:inline-block;margin-top:10px;padding:6px 12px;border:1px solid #dce6df;border-radius:20px;font-size:11px;color:#64766b}.moi{margin-top:14px;background:#fff7e6;border:1px solid #d9b25c;border-radius:10px;padding:12px 14px;font-size:13px;text-align:left}.chan{text-align:center;color:var(--nhat);font-size:12px;padding:8px 14px 20px}.chan span{font-size:11px}.chan a,.notes a{color:var(--xr)}#chartWrap{overflow:visible;border:1px solid #d5ddd5;border-radius:4px;background:#fffdf8}#chart svg{display:block;width:100%;height:auto}#chartWrap.zoomed #chart svg{width:1200px;max-width:none}.legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:11px;margin:12px 0 0;color:var(--nhat)}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:9px;height:9px;border-radius:2px}.minor{background:#b45b31}.major{background:#2e7d67}.annual-key{color:#944b20}.notes{text-align:left;margin-top:12px;font-size:12px;color:var(--nhat)}#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--xr);color:#fff;padding:10px 18px;border-radius:9px;font-size:14px;z-index:9;max-width:90vw}[hidden]{display:none!important}body.busy #result{opacity:.55}body.stale #chartWrap{opacity:.4}@media(max-width:820px){.bao{grid-template-columns:1fr;max-width:740px}.version{display:none}.dinh{padding:14px 16px}.trong{padding:45px 10px}.dinh h1{font-size:18px}.the{padding:16px}.hang input,.hang select{font-size:16px}.la{padding:10px}#chart{min-width:0;width:100%}#chartWrap.zoomed #chart{min-width:1200px}.tt{font-size:12px}}@media print{@page{size:A4 portrait;margin:8mm}.dinh,form,.chan,#toast,.nutHang,.moi,.notes,.legend,.ghi,.tt,#empty{display:none!important}body{background:#fff}.bao{display:block;max-width:none;margin:0;padding:0}.the{border:0;box-shadow:none;padding:0}#chartWrap{overflow:visible;border:0}#chart{min-width:0!important}#chart svg,#chartWrap.zoomed #chart svg{width:100%!important;max-height:275mm}body.stale #chartWrap{opacity:1}}
.layers{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:12px;background:#f7f9f5;border-radius:8px;padding:8px}.layers legend{float:left;width:auto;font-size:12px;padding:0;margin:0}.layers label{margin:0;display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}.monthly-key{color:#51469b}.month-marker{background:#6556b0}.transit-table{width:100%;border-collapse:collapse;font-size:12px}.transit-table th,.transit-table td{padding:8px 7px;border-bottom:1px solid #e1e7df;text-align:left;vertical-align:top}.transit-table th{background:#f1f5ee;white-space:nowrap}.transit-table td{line-height:1.7}.transit-table small{color:#737e70}.transit-table span{display:block}@media print{.layers{display:none!important}}
.decadal-key{color:#237849}#transitTable{overflow-x:auto}.transit-table{min-width:530px}

.palace-hit{cursor:default}.palace-hit:focus-visible{outline:none;stroke:#245ca5;stroke-width:3}
@media print{@page{size:200mm 300mm;margin:0}html,body{width:200mm;margin:0;padding:0}#chartWrap,#chart{width:200mm!important}#chart svg,#chartWrap.zoomed #chart svg{width:200mm!important;height:300mm!important;max-height:none!important}.palace-rays,.palace-hit{display:none!important}.la{padding:0!important}}

/* Chart uses the available content width. */
#chartWrap{margin-inline:auto;width:100%;max-width:none}
.layers{gap:8px 16px;margin-bottom:6px;padding:6px 8px}
.layers legend{float:none;width:100%;text-align:center;line-height:1.4}
.layers label{white-space:nowrap;font-size:12px}
.annual-options{background:transparent;padding-top:0}
.annual-options legend{display:none}
.nutHang{margin-bottom:5px}.tt{margin:3px 0 6px}
.chan{line-height:1.8}.leap-note{text-align:center}
@media screen and (min-width:821px){
 .bao{grid-template-columns:clamp(320px,28vw,460px) minmax(0,1fr);gap:12px}
 .la{padding:8px}
 #chartWrap:not(.zoomed){max-width:none}
 .dinh{padding:8px 22px}.logo{width:40px;height:40px;font-size:32px;line-height:40px}
 .nut.n2{padding:5px 10px}
}
#chartWrap.zoomed{max-width:100%;width:100%}
@media print{#chartWrap{max-width:none!important}.leap-note{display:none!important}}

#chart svg{cursor:default}.palace-dialog{padding:42px 8px 8px;border:1px solid #c5cec9;border-radius:12px;background:#fffafa;width:96vw;max-width:1500px;height:94dvh;max-height:94dvh;overflow:hidden;box-shadow:0 16px 70px #0005}.palace-dialog::backdrop{background:#17241cd0}.palace-detail{width:100%;height:100%;overflow:auto;overscroll-behavior:contain}.palace-detail svg{display:block;width:1800px;max-width:none;height:2500px;cursor:default}.palace-close{position:absolute;right:8px;top:4px;border:0;background:transparent;color:#243028;font-size:30px;line-height:30px;width:36px;height:32px;cursor:pointer}@media print{.palace-dialog{display:none!important}}

#chartWrap + .nutHang{margin-top:12px;margin-bottom:6px}

#chart{position:relative}#chart>.chart-save-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;-webkit-touch-callout:default;user-select:auto}#chartWrap.zoomed #chart>.chart-save-image{width:1200px;max-width:none}@media print{#chart>.chart-save-image{display:none!important}}

/* Keep export actions in their requested order on narrow phones. */
#result .nutHang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:440px;margin-left:auto;margin-right:auto}#result .nutHang .nut{min-width:0;white-space:nowrap;padding:10px 4px;font-size:12px}

.birth-time-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.birth-time-row label{min-height:0;display:block;margin-top:6px}.birth-time-row input,.birth-time-row select{height:42px;padding-left:6px;padding-right:6px}.fortune-time{border-top:1px solid var(--vien);padding-top:8px}.fortune-time summary{font-size:13px}.fortune-time summary span{display:block;font-size:12px;font-weight:400;color:var(--nhat);margin-left:15px}.new-chart{width:100%;margin-top:8px}

.year-control select{flex:1;width:0}.year-arrows{display:flex;flex-direction:column;gap:3px;flex:none}.year-control .year-arrows button{min-height:32px;width:44px;font-size:15px;line-height:1;padding:6px}.year-control .year-arrows button:hover{background:#eef6f1}

#birthForm .form-title{text-align:center}.birth-time-row{grid-template-columns:minmax(0,1fr) 80px;align-items:end}.birth-time-row>div{min-width:0}.birth-time-row label{white-space:nowrap}#calculate{font-size:14px;padding-left:6px;padding-right:6px;white-space:nowrap}

@media screen{.bao{width:100%;max-width:none;margin:0;padding:4px;gap:8px}.the{min-width:0}.la{position:static}#chartWrap{width:100%;max-width:none}.birth-time-row{margin-top:0}#result .nutHang{width:100%;max-width:none}#result .nutHang .nut{font-size:clamp(12px,1.1vw,16px)}.trong{padding:28px 12px}}
@media screen and (max-width:820px){.bao{grid-template-columns:minmax(0,1fr);padding:0}.la{padding:3px}.the{border-radius:8px}}

.chart-tools{display:flex;justify-content:flex-end;margin:4px 0 6px}#magnifierToggle{width:44px;height:40px;padding:4px;font-size:22px;border:1px solid #cbd5cf}#magnifierToggle[aria-pressed=true]{background:#dbeee1;border-color:#1f4d3a;box-shadow:0 0 0 2px #1f4d3a24}#chart.magnifier-active,#chart.magnifier-active svg,#chart.magnifier-active .palace-hit{cursor:crosshair}.chart-magnifier{position:fixed;z-index:1000;pointer-events:none;overflow:hidden;box-sizing:content-box;border:2px solid #1f4d3a;border-radius:10px;background:#fffafa;box-shadow:0 8px 30px #0005}.chart-magnifier img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}@media print{.chart-tools,.chart-magnifier{display:none!important}}

.chart-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:6px;row-gap:0;align-items:center;margin:0 0 2px}.chart-controls>.layers{grid-column:1;margin:0;padding:3px 6px}.chart-controls>.annual-options{grid-row:2;padding-bottom:2px}.chart-controls>.chart-tools{grid-column:2;grid-row:1 / 3;margin:0;align-self:center}.chart-controls .layers legend{padding-top:0}.chart-controls .annual-options label{white-space:normal;text-align:left}@media print{.chart-controls{display:none!important}}

.fortune-time .year-control{align-items:center;width:100%;max-width:none;gap:6px}.fortune-time .year-control select{height:40px;padding:6px;text-align:center;font-size:15px}.fortune-time .year-control>button{height:40px;width:38px;padding:0;font-size:17px}.return-today{display:block;margin:6px 0 2px auto;border:1px solid #cbd5cf;border-radius:6px;background:#f4f8f5;color:var(--xr);font:inherit;font-size:12px;padding:4px 9px;cursor:pointer}.return-today:hover{background:#e5f0e9}.return-today:disabled{opacity:.6;cursor:wait}

.month-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:6px}.month-control select{width:100%;min-width:0;height:40px;padding:6px;font-size:14px}.month-control .return-today{margin:0;height:40px;padding:0 8px;white-space:nowrap;font-size:12px}.fortune-time>label{margin:6px 0 3px}.fortune-time>.ghi{margin-top:6px}.fortune-time summary{padding-bottom:3px}

/* One page scroll; no independent scroll surface over the chart. */
@media screen {
 .sidebar{min-width:0;display:grid;gap:8px}
 .sidebar .chart-controls{display:block;margin:0;background:#fff;border:1px solid var(--vien);border-radius:12px;padding:12px 18px}
 .sidebar .layers{display:flex;justify-content:flex-start;gap:10px 14px;background:transparent;padding:0;margin:0}
 .sidebar .layers legend{text-align:left;font-size:15px;font-weight:700;color:var(--xr);margin-bottom:8px}
 .sidebar .annual-options{margin-top:12px;display:grid;gap:8px}
 .sidebar .annual-options label{font-size:12px;white-space:normal;text-align:left;line-height:1.5}
 .sidebar .layers input{flex:none;margin:0;width:16px;height:16px}
 .la{padding:0;border-radius:0;overflow:visible}
 #result{position:relative;padding-top:44px}
 #result>.chart-tools{position:absolute;right:0;top:0;margin:0;height:44px;align-items:center}
 #magnifierToggle{border-radius:6px;margin:0 2px}
 #chartWrap,#chartWrap.zoomed{overflow:visible;width:min(100%,calc((100svh - 56px)*.72));width:min(100%,calc((100dvh - 56px)*.72));max-width:100%;margin:0 auto;border:0;border-radius:0;touch-action:pan-y pinch-zoom}
 #chart,#chartWrap.zoomed #chart{min-width:0;width:100%;touch-action:pan-y pinch-zoom}
 #chart svg,#chartWrap.zoomed #chart svg{width:100%;height:auto;max-width:100%;aspect-ratio:18/25;touch-action:pan-y pinch-zoom}
 #chart>.chart-save-image,#chartWrap.zoomed #chart>.chart-save-image{width:100%;height:100%;object-fit:contain;touch-action:pan-y pinch-zoom}
 .chart-magnifier{touch-action:pan-y pinch-zoom}
}
@media screen and (max-width:820px){
 .sidebar{gap:4px}.sidebar .chart-controls{padding:10px 16px;border-radius:8px}
 #result{padding-top:42px}#result>.chart-tools{height:42px}
 #chartWrap,#chartWrap.zoomed{width:min(100%,calc((100svh - 48px)*.72));width:min(100%,calc((100dvh - 48px)*.72))}
}
@media print{.sidebar{display:none!important}#result{padding:0!important}}

/* The magnifier belongs at the controls/chart junction, not above the chart. */
@media screen {
 .bao{gap:2px;padding:0}
 .sidebar .chart-controls{position:relative}
 .sidebar .chart-controls>.chart-tools{position:absolute;right:6px;top:3px;margin:0;height:40px;display:flex;align-items:center}
 .sidebar .layers legend{padding-right:46px;min-height:28px}
 #result{padding-top:0}
 .la{border:0;background:transparent;box-shadow:none}
 #chartWrap,#chartWrap.zoomed{margin:0;width:min(100%,calc((100svh - 4px)*.72));width:min(100%,calc((100dvh - 4px)*.72))}
}

/* Mobile browser chrome must not resize the chart during a swipe. */
@media screen and (any-pointer:coarse){
 #chartWrap,#chartWrap.zoomed{width:min(100%,calc((100vh - 4px)*.72));width:min(100%,calc((100svh - 4px)*.72));overflow:visible;overscroll-behavior:auto}
 #chartWrap,#chart,#chart svg,#chart>.chart-save-image{touch-action:auto}
 #chart svg{-webkit-user-select:none;user-select:none}
 #chart>.chart-save-image{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:default}
}
/* Let a swipe hit the page, never an SVG palace or a native image gesture. */
@media screen and (any-pointer:coarse){
 #chartWrap,#chart{overflow:visible;touch-action:pan-y pinch-zoom;overscroll-behavior:auto}
 #chart svg,#chart svg *,#chart>.chart-save-image{pointer-events:none!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}
}