/* Global Quicksand typeface, preserving approved dimensions and layout. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700;800&display=swap');
.site-header,.site-header *,.site-header *::before,.site-header *::after,.site-footer,.site-footer *,.site-footer *::before,.site-footer *::after{font-family:"Quicksand",sans-serif!important}

: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}
}

/* v1.1: fixed visual proportions, responsive without viewport-scaled typography */
.site-header{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1.55fr);align-items:center;column-gap:28px;min-height:126px;padding:10px clamp(16px,2vw,38px);background:#f7f7f5;color:#292929}
.site-brand{display:flex;flex-direction:column;justify-content:center;min-width:0;color:inherit;text-decoration:none}
.site-brand strong{font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(23px,2.1vw,37px);font-weight:800;letter-spacing:.01em;line-height:1.12;white-space:normal}
.site-brand span{font-size:clamp(11px,.85vw,15px);font-weight:500;line-height:1.35;color:#777;max-width:390px;margin-top:6px}
.site-emblem{display:block;width:108px;height:108px;justify-self:center;background:transparent;border:0;border-radius:0;box-shadow:none;text-decoration:none}
.site-emblem img{display:block;width:100%;height:100%;object-fit:contain}
.site-nav{display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:clamp(12px,1.6vw,30px);min-width:0}
.site-nav a{font-size:clamp(12px,1.05vw,19px);font-weight:600;color:#292929;white-space:nowrap;text-decoration:none;line-height:1.3}
.site-nav a:hover,.site-nav a:focus-visible{text-decoration:underline}
.site-footer{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);align-items:center;column-gap:30px;min-height:104px;padding:15px clamp(22px,12vw,250px);background:#191a1a;color:#aaa;font-size:clamp(13px,1.05vw,19px);font-weight:650}
.site-footer-left,.site-footer-right{display:flex;flex-direction:column;gap:4px;line-height:1.35}
.site-footer-left a{color:inherit;text-decoration:none}.site-footer-right{text-align:right}
.site-footer-center{justify-self:center}
.site-zalo{display:grid;place-items:center;width:60px;height:60px;background:#fff;color:#1674ee;border-radius:18px;font-size:21px;font-weight:800;letter-spacing:-.04em;text-decoration:none;border-bottom:4px solid #1674ee}
@media(max-width:1450px){.site-header{grid-template-columns:minmax(0,1fr) 90px;row-gap:8px;min-height:0}.site-emblem{grid-column:2;grid-row:1;width:88px;height:88px}.site-nav{grid-column:1/-1;justify-content:center;gap:clamp(14px,3vw,38px);padding:7px 0 9px}.site-nav a{font-size:15px}.site-brand strong{font-size:30px}.site-brand span{font-size:13px}.site-footer{padding:16px clamp(22px,7vw,100px)}}
@media(max-width:650px){.site-header{grid-template-columns:minmax(0,1fr) 62px;gap:8px;padding:12px}.site-brand strong{font-size:clamp(20px,5vw,26px)}.site-brand span{font-size:10px;margin-top:4px}.site-emblem{width:60px;height:60px}.site-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 0 4px;text-align:center}.site-nav a{font-size:11px;white-space:normal}.site-footer{grid-template-columns:minmax(0,1fr) 55px;gap:10px;padding:15px 12px;font-size:12px}.site-footer-center{grid-column:2;grid-row:1/3}.site-footer-right{text-align:left}.site-zalo{width:52px;height:52px;border-radius:15px;font-size:18px}}
@media print{.site-header,.site-footer{display:none!important}}

/* Desktop header/footer calibrated for actual CSS pixels, not downscaled screenshot pixels. */
@media(min-width:1200px){
 .site-header{height:116px;min-height:116px;padding:8px max(24px,calc((100vw - 1450px)/2));grid-template-columns:minmax(280px,390px) 110px minmax(0,1fr);column-gap:30px;display:grid;align-items:center;overflow:visible;background:#fff}
 .site-brand{width:auto}.site-brand strong{font-size:clamp(30px,2.3vw,40px);line-height:1.08;white-space:nowrap;letter-spacing:0;font-weight:800}
 .site-brand span{font-size:clamp(12px,.92vw,15px);line-height:1.22;max-width:300px;margin-top:5px;white-space:normal}
 .site-emblem{width:108px;height:108px;grid-column:2;grid-row:1}
 .site-nav{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;gap:clamp(15px,1.8vw,34px);padding:0;flex-wrap:nowrap}
 .site-nav a{font-size:clamp(15px,1.1vw,19px);white-space:nowrap;font-weight:600}
 .site-footer{min-height:90px;padding:12px max(24px,calc((100vw - 1450px)/2));grid-template-columns:1fr 90px 1fr;column-gap:30px;font-size:clamp(16px,1.12vw,20px);line-height:1.3}
 .site-footer-left,.site-footer-right{gap:4px}
 .site-zalo{width:60px;height:60px;border-radius:18px;font-size:21px;border-bottom:4px solid #1674ee}
}
@media(min-width:900px) and (max-width:1199px){
 .site-header{min-height:105px;padding:10px 24px;grid-template-columns:minmax(0,1fr) 90px;row-gap:8px}
 .site-brand strong{font-size:30px}.site-brand span{font-size:12px}.site-emblem{grid-column:2;grid-row:1;width:88px;height:88px}
 .site-nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:26px;padding:6px 0}.site-nav a{font-size:15px}
 .site-footer{min-height:84px;padding:12px 30px;font-size:16px}.site-zalo{width:54px;height:54px;font-size:19px}
}

/* Center the original two-column workspace independently of header/footer. */
@media screen and (min-width:821px){main.bao{width:min(100%,1500px);max-width:1500px;margin-left:auto;margin-right:auto;grid-template-columns:clamp(320px,28vw,460px) minmax(0,1fr);gap:2px;padding:0;box-sizing:border-box}}

/* v1.1 screenshot typography: lighter weights and slimmer desktop chrome */
@media screen and (min-width:1200px){
 .site-header{height:92px;min-height:92px;grid-template-columns:minmax(260px,365px) 86px minmax(0,1fr);column-gap:24px;padding-top:4px;padding-bottom:4px}
 .site-brand strong{font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(27px,2vw,34px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
 .site-brand span{font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(10px,.78vw,13px);font-weight:400;letter-spacing:0;line-height:1.15;margin-top:4px}
 .site-emblem{width:84px;height:84px}
 .site-nav{gap:clamp(16px,1.6vw,28px)}
 .site-nav a{font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(13px,.95vw,17px);font-weight:500;letter-spacing:0}
 .site-footer{min-height:70px;padding-top:8px;padding-bottom:8px;font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(14px,.98vw,17px);font-weight:500}
 .site-zalo{width:48px;height:48px;border-radius:15px;font-size:17px}
}
@media screen and (min-width:900px) and (max-width:1199px){
 .site-header{min-height:88px}.site-brand strong{font-family:Arial,sans-serif;font-size:27px;font-weight:700}.site-nav a{font-family:Arial,sans-serif;font-weight:500}
 .site-footer{min-height:70px;font-family:Arial,sans-serif;font-size:14px;font-weight:500}
}

/* Screenshot reference: 1205px viewport, 350px sidebar, 780px chart, 82px header, 65px footer. */
@media screen and (min-width:1100px){
 body{background:#e7edf1}
 .site-header{height:82px;min-height:82px;padding:0 max(26px,calc((100vw - 1155px)/2));display:grid;grid-template-columns:400px 82px minmax(0,1fr);column-gap:20px;background:#f8f8f5}
 .site-brand strong{font-family:Arial,"Helvetica Neue",sans-serif;font-size:32px;line-height:1.04;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
 .site-brand span{font-family:Arial,"Helvetica Neue",sans-serif;font-size:12px;line-height:1.2;font-weight:400;max-width:285px;margin-top:4px}
 .site-emblem{grid-column:2;grid-row:1;width:78px;height:78px;justify-self:center}
 .site-nav{grid-column:3;grid-row:1;justify-content:space-between;gap:clamp(10px,1.3vw,23px);padding:0}
 .site-nav a{font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(13px,1.25vw,18px);font-weight:500}
 main.bao{width:min(100% - 52px,1155px);max-width:1155px;margin:0 auto;padding:0;grid-template-columns:325px minmax(0,1fr);gap:6px;align-items:start}
 .site-footer{min-height:65px;padding:7px max(30px,calc((100vw - 1145px)/2));grid-template-columns:1fr 65px 1fr;gap:16px;font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(16px,1.5vw,20px);font-weight:500}
 .site-zalo{width:45px;height:45px;font-size:16px;border-radius:14px}
}

/* Clip the original square logo image to a clean circular emblem. */
.site-emblem{border-radius:50%!important;overflow:hidden!important;aspect-ratio:1/1;flex-shrink:0}
.site-emblem img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;clip-path:circle(50% at 50% 50%)}

/* Header typography refinement: preserve the approved layout and round logo. */
@media screen and (min-width:1100px){
 .site-header{height:82px;min-height:82px;box-sizing:border-box}
 .site-brand{overflow:visible}
 .site-brand strong{font-family:"Trebuchet MS","Arial",sans-serif;font-weight:700;letter-spacing:-.025em}
 .site-brand span{font-family:"Trebuchet MS","Arial",sans-serif;font-size:11px;line-height:1.2;letter-spacing:-.035em;font-weight:400;white-space:nowrap;max-width:none;width:max-content;margin-top:4px}
 .site-nav a{font-family:"Trebuchet MS","Arial",sans-serif;font-weight:600;letter-spacing:-.025em}
}

/* Footer v1.1: 70px desktop bar, refined Vietnamese-friendly typography. */
@media screen and (min-width:1100px){
 .site-footer{height:70px;min-height:70px;box-sizing:border-box;padding-top:8px;padding-bottom:8px;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:17px;font-weight:500;letter-spacing:.005em;line-height:1.25}
 .site-footer-left,.site-footer-right{gap:3px}
 .site-footer-left a{font:inherit;letter-spacing:inherit}
 .site-zalo{width:46px;height:46px;font-family:"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:700}
}

/* Keep the full brand tagline on exactly one line at desktop widths. */
@media screen and (min-width:1100px){
 .site-brand span{display:block!important;white-space:nowrap!important;overflow:visible!important;max-width:none!important;width:max-content!important;font-size:clamp(9px,.78vw,12px)!important;letter-spacing:-.035em!important}
 .site-brand{overflow:visible!important}
}

/* Approved footer adjustment: desktop height 60px, keep layout and font. */
@media screen and (min-width:1100px){.site-footer{height:60px;min-height:60px;box-sizing:border-box;padding-top:5px;padding-bottom:5px}}

/* Compact chrome: fit header to logo and footer to content, no extra vertical padding. */
@media screen and (min-width:1100px){
 .site-header{height:80px!important;min-height:80px!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important}
 .site-emblem{width:78px!important;height:78px!important}
 .site-footer{height:52px!important;min-height:52px!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important;align-items:center!important}
 .site-footer-left,.site-footer-right{gap:0!important;line-height:1.16!important}
 .site-zalo{width:42px!important;height:42px!important}
}

/* Version caption sits in the space above the footer, independent of footer height. */
.app-version-note{box-sizing:border-box;width:100%;padding:5px 16px 6px;text-align:left;font-family:"Quicksand",sans-serif;font-size:12px;font-weight:600;line-height:1.35;color:#6d777b;background:#e6ebef}

@media screen and (min-width:1100px){.app-version-note{padding-left:30px}}

/* v1.1 mobile header refinement: compact bar, legible four-link navigation. */
@media screen and (max-width:650px){
 .site-header{min-height:0;height:auto;padding:7px 12px 5px;row-gap:3px;column-gap:8px;grid-template-columns:minmax(0,1fr) 48px}
 .site-brand strong{font-size:clamp(19px,5vw,23px);line-height:1.12}
 .site-brand span{font-size:9px;line-height:1.2;margin-top:2px}
 .site-emblem{width:46px;height:46px;justify-self:end}
 .site-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px 0 2px;align-items:center}
 .site-nav a{font-size:clamp(12px,3.3vw,14px);font-weight:700;line-height:1.25;white-space:normal;padding:5px 1px;text-align:center}
}

/* Compact mobile footer without altering the approved desktop 52px footer. */
@media screen and (max-width:650px){
 .site-footer{height:auto!important;min-height:58px!important;padding:7px 12px!important;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);column-gap:7px;row-gap:0;align-items:center;font-size:clamp(9px,2.6vw,11px);line-height:1.2}
 .site-footer-left{grid-column:1;grid-row:1;gap:2px!important;line-height:1.2!important;min-width:0}
 .site-footer-center{grid-column:2;grid-row:1;justify-self:center}
 .site-footer-right{grid-column:3;grid-row:1;text-align:right;gap:2px!important;line-height:1.2!important;min-width:0}
 .site-zalo{width:40px!important;height:40px!important;border-radius:11px;font-size:14px}
}

/* Mobile: reduce outer and inner whitespace while preserving readable tap targets. */
@media screen and (max-width:650px){
 .site-header{padding:3px 5px 2px!important;row-gap:0!important;column-gap:4px!important;grid-template-columns:minmax(0,1fr) 44px!important}
 .site-emblem{width:43px!important;height:43px!important}
 .site-brand span{margin-top:1px!important}
 .site-nav{gap:1px!important;padding:0!important}
 .site-nav a{padding:5px 0!important;line-height:1.18!important}
 .site-footer{min-height:0!important;height:auto!important;padding:3px 5px!important;column-gap:3px!important;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important}
 .site-footer-left,.site-footer-right{gap:0!important;line-height:1.12!important}
 .site-zalo{width:38px!important;height:38px!important}
}

/* Mobile header matching supplied reference: orange three-line toggle, brand, round logo. */
.mobile-menu-toggle{display:none}
@media screen and (max-width:650px){
 .site-header{position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr) 72px!important;align-items:center;column-gap:7px!important;row-gap:0!important;padding:6px 9px!important;background:#f7f7f5}
 .mobile-menu-toggle{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;width:48px;height:58px;padding:0;border:0;background:transparent;cursor:pointer}
 .mobile-menu-toggle span{display:block;height:4px;width:46px;border-radius:5px;background:#ff9b3c;transition:transform .2s,opacity .2s,width .2s}
 .mobile-menu-toggle span:nth-child(3){width:25px}
 .mobile-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(11px) rotate(45deg)}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){width:46px;transform:translateY(-11px) rotate(-45deg)}
 .site-brand{grid-column:2;grid-row:1;min-width:0}
 .site-brand strong{font-size:clamp(16px,4.6vw,23px)!important;line-height:1.1!important;letter-spacing:-.035em;white-space:nowrap}
 .site-brand span{font-size:clamp(8px,2.25vw,11px)!important;line-height:1.2!important;margin-top:4px!important;color:#888;white-space:normal}
 .site-emblem{grid-column:3!important;grid-row:1!important;width:70px!important;height:70px!important;justify-self:end}
 .site-nav{display:none!important;position:absolute;top:100%;left:7px;right:7px;z-index:1000;grid-column:auto!important;grid-row:auto!important;background:#fff;border:1px solid #e2e2e2;border-radius:10px;box-shadow:0 10px 22px #0002;padding:5px!important;gap:0!important}
 .site-nav.mobile-open{display:flex!important;flex-direction:column;align-items:stretch}
 .site-nav a{font-size:15px!important;font-weight:700;padding:12px 14px!important;text-align:left!important;white-space:nowrap!important;line-height:1.3!important;border-bottom:1px solid #eee}
 .site-nav a:last-child{border-bottom:0}
}

/* Mobile header: height hugs the round logo, no extra vertical whitespace. */
@media screen and (max-width:650px){
 .site-header{height:72px!important;min-height:72px!important;max-height:72px!important;padding:1px 7px!important;align-items:center!important;row-gap:0!important}
 .site-emblem{width:70px!important;height:70px!important;align-self:center!important}
 .mobile-menu-toggle{height:70px!important}
}

/* Mobile compact header: reduce actual logo and menu height together. */
@media screen and (max-width:650px){
 .site-header{height:58px!important;min-height:58px!important;max-height:58px!important;padding:0 5px!important;grid-template-columns:42px minmax(0,1fr) 56px!important;column-gap:5px!important;overflow:visible!important}
 .site-emblem{width:56px!important;height:56px!important}
 .site-emblem img{width:100%!important;height:100%!important;object-fit:contain}
 .mobile-menu-toggle{height:56px!important;width:42px!important;gap:6px!important}
 .mobile-menu-toggle span{width:40px!important;height:3px!important}
 .mobile-menu-toggle span:nth-child(3){width:23px!important}
 .mobile-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(9px) rotate(45deg)}
 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){width:40px!important;transform:translateY(-9px) rotate(-45deg)}
 .site-brand strong{font-size:clamp(15px,4.4vw,21px)!important}
 .site-brand span{font-size:clamp(7px,2vw,10px)!important;margin-top:2px!important;line-height:1.12!important}
}

/* Desktop viewport fit: reserve space for header, chart actions and footer.
   Keep the original SVG proportions and export/print dimensions unchanged. */
@media screen and (min-width:1100px) and (pointer:fine){
 #chartWrap,#chartWrap.zoomed{
  width:min(100%,clamp(420px,calc((100dvh - 125px)*.72),min(100%,860px)))!important;
  max-width:100%!important;
  margin-inline:auto!important;
 }
}

/* Touch devices: restore native long-press image actions without blocking vertical scroll. */
@media screen and (any-pointer:coarse){
 #chart>.chart-save-image{
  pointer-events:auto!important;
  -webkit-touch-callout:default!important;
  -webkit-user-select:auto!important;
  user-select:auto!important;
  -webkit-user-drag:auto!important;
  touch-action:pan-y pinch-zoom!important;
 }
 #chartWrap,#chart{touch-action:pan-y pinch-zoom!important}
}

/* Chart zoom control: anchored to chart upper-right, not the left form. */
@media screen{
 #chartWrap{position:relative!important}
 #chartWrap>.chart-tools{position:absolute!important;top:4px;right:4px;z-index:20;display:flex;align-items:center;margin:0!important}
 #chartWrap>.chart-tools #magnifierToggle{width:38px;height:38px;padding:3px;border:1px solid #cdd9d5;border-radius:8px;background:#ffffffed;box-shadow:0 2px 7px #0002;cursor:pointer}
}
/* FHD/laptop: fit chart AND action bar, notes, disclosure and footer into viewport. */
@media screen and (min-width:1100px) and (pointer:fine){
 #chartWrap,#chartWrap.zoomed{
  width:min(100%,max(360px,calc((100dvh - 245px)*.72)))!important;
  margin-inline:auto!important;
 }
}
@media screen and (max-width:1099px){
 #chartWrap>.chart-tools{top:4px;right:4px}
}
@media print{#chartWrap>.chart-tools{display:none!important}}

/* Desktop/laptop: footer remains fully visible at any screen resolution.
   Reserve its footprint so content never sits underneath it. */
@media screen and (min-width:1100px) and (pointer:fine){
 body{padding-bottom:var(--desktop-footer-height,65px)!important}
 .site-footer{
  position:fixed!important;left:0;right:0;bottom:0;z-index:90;
  box-sizing:border-box!important;
  min-height:var(--desktop-footer-height,65px)!important;
 }
 #chartWrap,#chartWrap.zoomed{
  width:min(100%,max(0px,calc((100dvh - 260px)*.72)))!important;
  margin-inline:auto!important;
 }
}
@media print{body{padding-bottom:0!important}.site-footer{position:static!important}}

/* Magnifier sits OUTSIDE the chart border, on its upper-right side. */
@media screen{
 #chartWrap{overflow:visible!important}
 #chartWrap>.chart-tools{
  top:0!important;left:calc(100% + 8px)!important;right:auto!important;
  width:38px!important;height:38px!important;z-index:25!important;
 }
 #chartWrap>.chart-tools #magnifierToggle{margin:0!important}
 #transitTable[hidden]{display:none!important}
}
@media screen and (max-width:820px){
 #chartWrap>.chart-tools{left:auto!important;right:0!important;top:-44px!important}
}
@media print{#chartWrap>.chart-tools{display:none!important}}

/* Reclaim unused gap above the fixed footer for a larger readable chart. */
@media screen and (min-width:1100px) and (pointer:fine){
 #chartWrap,#chartWrap.zoomed{
  width:min(100%,max(0px,calc((100dvh - 212px)*.72)))!important;
 }
 #result .nutHang{margin-top:5px!important;margin-bottom:1px!important}
 #result .tt{margin:1px 0 1px!important;line-height:1.2!important}
 .app-version-note{padding-top:1px!important;padding-bottom:1px!important}
}

/* Compact footer: preserve all content while freeing vertical viewport space. */
@media screen and (min-width:1100px) and (pointer:fine){
 :root{--desktop-footer-height:36px}
 .site-footer{
  height:36px!important;min-height:36px!important;
  padding:1px max(20px,calc((100vw - 1145px)/2))!important;
  line-height:1.05!important;font-size:12px!important;
  gap:6px!important;align-items:center!important;
 }
 .site-footer-left,.site-footer-right{line-height:1.05!important;gap:0!important}
 .site-footer .site-zalo{width:30px!important;height:30px!important;border-radius:8px!important;font-size:11px!important}
 #chartWrap,#chartWrap.zoomed{
  width:min(100%,max(0px,calc((100dvh - 183px)*.72)))!important;
 }
}

/* Ultra-slim footer: no vertical space beyond the Zalo icon. */
@media screen and (min-width:1100px) and (pointer:fine){
 :root{--desktop-footer-height:30px}
 .site-footer{height:30px!important;min-height:30px!important;padding-top:0!important;padding-bottom:0!important;line-height:1!important}
 .site-footer .site-zalo{width:30px!important;height:30px!important;margin:0!important;line-height:1!important}
 .site-footer-left,.site-footer-right{line-height:1!important}
 #chartWrap,#chartWrap.zoomed{width:min(100%,max(0px,calc((100dvh - 177px)*.72)))!important}
}

/* Requested footer height: 38px. */
@media screen and (min-width:1100px) and (pointer:fine){
 :root{--desktop-footer-height:38px}
 .site-footer{height:38px!important;min-height:38px!important;padding-top:0!important;padding-bottom:0!important}
 .site-footer .site-zalo{width:38px!important;height:38px!important;margin:0!important}
 #chartWrap,#chartWrap.zoomed{width:min(100%,max(0px,calc((100dvh - 185px)*.72)))!important}
}

/* Version note belongs directly below dynamic-star controls, in left sidebar. */
@media screen{
 .sidebar>.app-version-note{width:100%;padding:4px 8px!important;margin:2px 0 0!important;background:transparent!important;text-align:left;font-size:clamp(10px,.8vw,12px)!important;line-height:1.3!important;box-sizing:border-box}
}

/* Footer: requested 40px, with the Zalo icon flush to both edges. */
@media screen and (min-width:1100px) and (pointer:fine){
 :root{--desktop-footer-height:40px}
 .site-footer{height:40px!important;min-height:40px!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
 .site-footer .site-zalo{width:40px!important;height:40px!important;margin:0!important;box-sizing:border-box!important}
 #chartWrap,#chartWrap.zoomed{width:min(100%,max(0px,calc((100dvh - 187px)*.72)))!important}
}

/* Action buttons follow the rendered chart width at every viewport size. */
@media screen{
 #result .nutHang{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  margin-left:auto!important;
  margin-right:auto!important;
 }
 #result .nutHang>.nut{min-width:0!important;width:100%!important;box-sizing:border-box!important}
}
@media screen and (min-width:821px){
 #result .nutHang{width:min(100%,var(--chart-action-width,100%))!important}
}

/* Two-line version caption below dynamic-star settings. */
.sidebar>.app-version-note .version-line{display:block!important;margin-top:2px}

/* Footer rebuild: readable typography and a 46px flush icon. */
@media screen and (min-width:1100px) and (pointer:fine){
 :root{--desktop-footer-height:46px}
 .site-footer{height:46px!important;min-height:46px!important;padding:0 max(20px,calc((100vw - 1145px)/2))!important;display:grid!important;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)!important;align-items:center!important;font-size:14px!important;line-height:1.15!important}
 .site-footer-left,.site-footer-right{gap:0!important;line-height:1.15!important}
 .site-footer .site-zalo{width:46px!important;height:46px!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
 #chartWrap,#chartWrap.zoomed{width:min(100%,max(0px,calc((100dvh - 193px)*.72)))!important}
}

/* Display supplied Zalo logo as image, not CSS text or a synthetic badge. */
.site-footer .site-zalo{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
.site-footer .site-zalo img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;border-radius:0!important}

/* FINAL footer reset: neutralize older badge styling and keep a true compact grid. */
@media screen and (min-width:821px){
 :root{--desktop-footer-height:46px}
 body{padding-bottom:46px!important}
 .site-footer{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:90!important;height:46px!important;min-height:46px!important;max-height:46px!important;box-sizing:border-box!important;padding:0 max(16px,calc((100vw - 1145px)/2))!important;display:grid!important;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;overflow:hidden!important;font-size:13px!important;line-height:1.1!important}
 .site-footer-left,.site-footer-right{display:flex!important;flex-direction:column!important;gap:0!important;line-height:1.1!important;min-width:0!important}
 .site-footer-center{grid-column:2!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:46px!important;margin:0!important;padding:0!important}
 .site-footer .site-zalo{display:block!important;flex:none!important;box-sizing:border-box!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;border-bottom:0!important;box-shadow:none!important;background:transparent!important;color:transparent!important;font-size:0!important;line-height:0!important;overflow:hidden!important}
 .site-footer .site-zalo img{display:block!important;width:46px!important;height:46px!important;object-fit:contain!important;border:0!important;box-shadow:none!important}
}

/* Birth-hour stepper: one clean layout, independent of year-control rules. */
#birthForm .birth-time-row{display:grid!important;grid-template-columns:minmax(0,1fr) 88px!important;gap:8px!important;align-items:end!important}
#birthForm .birth-time-row>div{min-width:0!important;width:auto!important;display:block!important}
#birthForm .birth-time-row>div>label{display:block!important;height:auto!important;min-height:0!important;margin:0 0 5px!important;line-height:18px!important;white-space:nowrap!important}
#birthForm .birth-time-row .birth-hour-control{display:grid!important;grid-template-columns:32px minmax(0,1fr) 32px!important;grid-template-rows:42px!important;gap:5px!important;width:100%!important;min-width:0!important;height:42px!important;align-items:stretch!important;box-sizing:border-box!important}
#birthForm .birth-time-row .birth-hour-control>button{display:flex!important;align-items:center!important;justify-content:center!important;width:32px!important;min-width:0!important;height:42px!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border:1px solid #d8c998!important;border-radius:8px!important;background:white!important;color:#20533f!important;font-size:17px!important;cursor:pointer!important;touch-action:manipulation!important}
#birthForm .birth-time-row .birth-hour-control>select#h{display:block!important;grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;height:42px!important;margin:0!important;padding:3px 2px!important;box-sizing:border-box!important;font-size:12px!important;appearance:none!important;-webkit-appearance:none!important;background:#fff!important;text-align:center!important;overflow:hidden!important}
#birthForm .birth-time-row #tz{display:block!important;width:100%!important;height:42px!important;box-sizing:border-box!important;margin:0!important}
@media(max-width:390px){#birthForm .birth-time-row{grid-template-columns:minmax(0,1fr) 72px!important;gap:5px!important}#birthForm .birth-time-row .birth-hour-control{grid-template-columns:28px minmax(0,1fr) 28px!important;gap:3px!important}#birthForm .birth-time-row .birth-hour-control>button{width:28px!important}}

/* Preview: TVPP brand mark in the empty chart state. Preserve irregular brush edges. */
#empty .empty-icon{display:flex;align-items:center;justify-content:center;opacity:1;font-size:0;line-height:1}
#empty .empty-icon img{display:block;width:120px;height:120px;max-width:34vw;object-fit:contain;border:0;border-radius:0;clip-path:none;box-shadow:none;background:transparent}
#empty h2{font-weight:700;line-height:1.3}
@media(max-width:600px){#empty .empty-icon img{width:104px;height:104px}}

/* Five principles shown in the initial chart panel. */
#empty .empty-principles-title{font-size:15px;font-weight:700;color:#294537;line-height:1.5;margin:22px auto 12px;max-width:640px}
#empty .empty-principles{list-style:none;counter-reset:principles;margin:0 auto;padding:0;max-width:660px;text-align:left}
#empty .empty-principles li{counter-increment:principles;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;border-top:1px solid #c9d5cc;padding:15px 3px;font-size:15px;line-height:1.55;color:#37463e}
#empty .empty-principles li::before{content:counter(principles,decimal-leading-zero);font-size:13px;font-weight:700;color:#a79670;padding-top:2px}
#empty .empty-principles li:last-child{border-bottom:1px solid #c9d5cc}
@media(max-width:600px){#empty .empty-principles-title{font-size:13px}#empty .empty-principles li{grid-template-columns:30px minmax(0,1fr);gap:8px;font-size:14px;padding:12px 2px}}

/* Reset information action: secondary to chart creation. */
#birthForm .reset-info{display:flex;width:100%;margin-top:8px;padding:10px 14px;background:transparent;border:1px solid #aabcb5;color:#526b61;font-size:14px;font-weight:650;border-radius:10px}
#birthForm .reset-info:hover{background:#eef4f0;border-color:#718e80}
#birthForm .reset-info:focus-visible{outline:2px solid #718e80;outline-offset:2px}

/* Closing philosophy beneath the five principles in the empty chart panel. */
#empty .empty-river-message{max-width:660px;margin:28px auto 0;text-align:left;color:#37463e}
#empty .empty-river-message h3{font-size:19px;line-height:1.45;margin:0 0 16px;color:#294537;font-weight:750}
#empty .empty-river-message p{font-size:15px;line-height:1.75;margin:0 0 15px}
#empty .empty-river-message .river-emphasis{font-weight:800;color:#294537;text-align:center;margin:22px 0 0;letter-spacing:.15px}
@media(max-width:600px){#empty .empty-river-message{margin-top:22px}#empty .empty-river-message h3{font-size:17px}#empty .empty-river-message p{font-size:14px;line-height:1.7}}

/* Full-width and justified reading layout for the five principles panel. */
#empty .empty-principles-title,#empty .empty-principles,#empty .empty-river-message{max-width:none;width:100%;box-sizing:border-box}
#empty .empty-river-message p:not(.river-emphasis){text-align:justify;text-justify:inter-word}
#empty .empty-river-message h3{text-align:left}
@media(max-width:600px){#empty .empty-river-message p:not(.river-emphasis){text-align:justify}}

/* Bat Nha artwork: large faint background behind all initial text, not a foreground logo. */
#empty.bat-nha-watermark{position:relative;isolation:isolate}
#empty.bat-nha-watermark::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:url("assets/bat-nha.png");background-repeat:no-repeat;background-position:center center;background-size:min(95%,1050px) auto;filter:grayscale(1) brightness(.68);opacity:.34}
#empty.bat-nha-watermark .empty-principles-title{margin-top:0}
@media(max-width:600px){#empty.bat-nha-watermark::before{background-size:135% auto;opacity:.28}}