@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');
/* Brand decoration only: palace typography, colors and geometry remain in style.css. */
:root{--brand-font:'Charm','Noto Serif',Georgia,serif}
/* Warm neutral paper; every existing star/text color is preserved. */
.chart,.chart-scroll,.palace,.palace.menh,.palace.menh:hover,.chart-center{background-color:#f1ecdf}
.palace:hover{background-color:#f1ecdf}
.edge-tag,.edge-tag.triet{box-shadow:0 0 0 2px #f1ecdf}
.chart-center{isolation:isolate}
.chart-center::before{content:"";position:absolute;inset:0;background:url('assets/thien-ban.svg') center/94% auto no-repeat;opacity:.12;z-index:-1;pointer-events:none}
.chart-center .logo{font-family:var(--brand-font);font-style:normal;font-weight:700}
.chart-center .site{letter-spacing:1px;font-family:var(--serif)}
@media screen{
:root{--paper:#f8f5ed;--ink:#342f26;--muted:#756b59;--line:#ded4bd;--red:#893b30;--gold:#9b743a}
body{background:#f8f5ed;color:#342f26;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E")}
header{max-width:1500px;padding:20px 40px;border-color:#cdbf9b;position:relative;z-index:2}.brand{gap:13px;letter-spacing:0}.brand-name{font:700 29px/1.1 var(--brand-font);color:#673a2b}.brand small{font:500 10px var(--sans);letter-spacing:2.8px;color:#6e6048;margin-top:9px}.seal{background:#893b30;color:#fff6df;border-color:#893b30;outline-color:#f4dcaa;border-radius:3px}nav{align-items:center;gap:26px}nav a{font-size:13px;font-weight:600;color:#534632}nav .active{border:1px solid #aa8b55;border-radius:5px;padding:10px 18px;background:#fffcf2;color:#6b4229}nav .active:hover{background:#f2e5cb}
main{max-width:1500px;padding:0 40px}.masthead{width:100%;margin:0!important;min-height:590px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;margin:0 -40px;padding:50px max(8%,calc((100vw - 1240px)/2)) 70px}.hero-landscape{position:absolute;inset:0;z-index:-3;background:#f3efdf url('assets/landscape.jpg') center 60%/cover no-repeat}.hero-landscape::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fbf7ed75,transparent 75%),linear-gradient(0deg,#f8f5ed,transparent 18%)}.hero-mist{position:absolute;inset:35% -20% -10%;z-index:-2;background:radial-gradient(ellipse at 30% 70%,#fffdf3a6,transparent 65%);animation:mist-drift 20s ease-in-out infinite alternate;pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:620px;text-align:center}.overline{font-size:11px;font-weight:600;letter-spacing:4px;color:#7b5d31}.masthead h1{font:700 clamp(65px,7vw,98px)/1.15 var(--brand-font);letter-spacing:-2px;color:#713d29;margin:20px 0 12px;text-shadow:0 2px #fff8ed}.masthead h1 span{display:block}.hero-rule{display:flex;align-items:center;justify-content:center;gap:16px;color:#a77d3f;margin:16px 0}.hero-rule::before,.hero-rule::after{content:"";height:1px;width:65px;background:#a77d3f80}.hero-subtitle{font:500 16px var(--serif);color:#53482f;letter-spacing:1px;margin:18px 0 28px}.hero-cta{display:flex;justify-content:center;align-items:center;gap:30px;width:max-content;margin:auto;background:#873c30;border:1px solid #6f3026;color:#fff9ed;border-radius:5px;padding:15px 25px;font-size:14px;font-weight:600;box-shadow:0 6px 20px #70401f25;transition:background .2s,box-shadow .2s}.hero-cta:hover{background:#6d2b23;box-shadow:0 8px 24px #70401f45}.hero-cta span{font-size:23px;line-height:1}.hero-secondary{display:block;width:max-content;margin:17px auto 0;font-size:11px;color:#51472f;text-decoration:underline;text-underline-offset:4px}.hero-orbit{position:absolute;right:max(9%,calc((100vw - 1240px)/2));top:50%;width:350px;height:350px;transform:translateY(-50%);display:grid;place-items:center}.hero-orbit img{width:100%;height:100%;opacity:.52;animation:orbit 160s linear infinite}.orbit-seal{position:absolute;background:#f4ecd9e6;outline:1px solid #9b743a;outline-offset:-6px;border:1px solid #9b743a;color:#874732;padding:14px 19px;font:32px/1.15 var(--serif)}.scroll-cue{position:absolute;bottom:17px;left:50%;border:1px solid #a68b5e;border-radius:50%;width:32px;height:40px;display:grid;place-items:center;color:#705533;background:#faf6ec}.floating-leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.floating-leaves i{position:absolute;left:75%;top:-35px;width:11px;height:23px;border-radius:0 90% 0 90%;background:#77815270;animation:leaf-fall 17s linear infinite}.floating-leaves i:nth-child(2){left:92%;animation-delay:-6s;animation-duration:22s}.floating-leaves i:nth-child(3){left:48%;animation-delay:-12s;transform:scale(.7)}.floating-leaves i:nth-child(4){left:12%;animation-delay:-8s;animation-duration:24s}.floating-leaves i:nth-child(5){left:63%;animation-delay:-3s;animation-duration:20s}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:23px 0;border-bottom:1px solid #d7c8a9}.feature-strip>div{display:flex;align-items:center;justify-content:center;gap:14px;border-right:1px solid #d7c8a9}.feature-strip>div:last-child{border:0}.feature-strip span{font:27px var(--serif);color:#93723d}.feature-strip p{font-size:12px;font-weight:500;color:#5d5038;margin:0}.workspace-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:45px 0 22px}.workspace-heading .overline{font-size:9px;letter-spacing:3px}.workspace-heading h2{font:500 31px var(--serif);margin:8px 0 0;color:#653a2c}.workspace-heading>span{font-size:12px;color:#75664e}.workspace{grid-template-columns:290px minmax(0,1fr);gap:24px;margin:0 0 45px;scroll-margin-top:20px}
form{padding:24px;background:#fffdf7;border:1px solid #d6c6a5;border-radius:10px;box-shadow:0 10px 30px #67522e09}.section-heading{gap:12px;margin-bottom:24px}.step-number{font:italic 27px var(--serif);color:#9b743a;border-right:1px solid #ded0b4;padding-right:12px}.section-heading h2{font-size:18px;color:#4b3c2c}form label,form legend{font-size:12px;font-weight:600;color:#4b4131}fieldset{margin:19px 0}.segments{padding:4px;border-radius:6px;border-color:#d8c9ad;background:#f2eddf}.segments span{border-radius:4px;padding:9px 2px;color:#665c4b;font-size:12px}.segments input:checked+span{background:#fffdf8;color:#753d2b;box-shadow:0 1px 5px #6f513426;font-weight:700}input:not([type=radio]):not([type=checkbox]),select{background:#fff;border:1px solid #bbaa8d;border-radius:5px;min-height:45px;padding:10px;color:#29251e;font-size:14px;font-weight:500;color-scheme:light;opacity:1}input::placeholder{color:#7b7468;font-size:12px}#hour{font-size:14px;font-weight:600;background-color:#fff;color:#29251e;cursor:pointer;padding-right:28px}#hour option{background:#fff;color:#29251e;font-weight:500}input:focus,select:focus{border-color:#8b4b32!important;box-shadow:0 0 0 3px #b9945729}form .check,.chart-bottom .check{font-size:11px;font-weight:500;line-height:1.6;color:#493f30}.check input{width:15px;height:15px;accent-color:#884733}.annual-year input{margin-top:7px!important;min-height:40px!important}.hoa-grid{display:flex;flex-direction:column;gap:9px;margin:15px 0 0}.primary{border-radius:5px;min-height:48px;background:#873c30;color:#fff9ed;border:1px solid #6f3026;font-size:14px;font-weight:600;justify-content:space-between;padding:12px 16px;box-shadow:0 4px 12px #70401f18}.primary:hover{background:#6d2b23}.primary span{font-size:23px}.an-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.form-caption{font-size:10px;color:#6f6452;text-align:center;margin:12px 0 0;line-height:1.8}.form-error{color:#a3261d}.form-error:empty{display:none}.divider{border-color:#ded4bd}
.result{min-width:0;background:#fffdf7;border:1px solid #ccb995;border-radius:10px;box-shadow:0 10px 35px #67522e0d;overflow:hidden}.result-toolbar{padding:14px 16px;min-height:64px;margin:0;gap:12px;color:#55442c;font-size:11px;font-weight:600;letter-spacing:.5px}.result-toolbar>div:first-child{min-width:0;overflow-wrap:anywhere}.status-dot{background:#4f7045;width:6px;height:6px}.tools{flex-shrink:0;gap:8px}.tools button{font-size:13px;font-weight:600;letter-spacing:0;min-height:39px;color:#3d3123;background:#fff;border:1px solid #a38a63;border-radius:5px;padding:9px 13px;opacity:1}.tools svg{width:17px;height:17px;stroke-width:2}.tools button:hover{background:#eee3cd;border-color:#785b32}.tools button:disabled{opacity:.65;cursor:wait}.chart-scroll{overscroll-behavior-x:contain;scrollbar-color:#8b8171 #e7e4dd;scrollbar-width:thin}.chart{--paper:#f7f3e9;--ink:#3d372e;--muted:#8b8171;--line:#ddd3bf;--red:#893b30;margin:auto}.chart-bottom{padding:14px 16px;align-items:center;gap:12px;color:#5b513f}.chart-bottom .wood{color:#009900}.chart-bottom .fire{color:#ff0000}.chart-bottom .earth{color:#a96600}.chart-bottom .metal{color:#666}.chart-bottom .water{color:#000}.legend{display:flex;gap:14px}.legend span{white-space:nowrap}.scroll-hint{display:none}
.help-section{border-top:1px solid #d7c8a9;padding:50px 3% 60px;display:grid;grid-template-columns:1fr 1.7fr;gap:60px;scroll-margin-top:25px}.help-title h2{font:500 28px var(--serif);margin:13px 0 25px;color:#653a2c}.help-title .overline{font-size:9px;letter-spacing:3px}.help-title img{opacity:.55}.help-questions details{padding:19px 0;border-bottom:1px solid #dbceb5}.help-questions summary{font:600 14px/1.7 var(--sans);color:#463a29;display:flex;justify-content:space-between;gap:20px}.help-questions summary::after{content:'+';color:#8d6434;font-size:20px;font-weight:400}.help-questions details[open] summary::after{content:'−'}.help-questions p{font-size:13px;line-height:1.9;color:#655a48;margin:14px 28px 0 0}footer{max-width:1500px;margin:auto;border-top:1px solid #cdbf9b;padding:25px 40px;gap:20px;color:#6b604d}footer .footer-brand{font:700 27px var(--brand-font);color:#713d29}.domain-signature{font:500 15px var(--serif);letter-spacing:1px;color:#554731}.domain-signature span{color:#8b4b32}.domain-signature::before,.domain-signature::after{content:'✦';font-size:9px;margin:0 12px;color:#9b743a}#toast{background:#4f3b27;color:#fff8e9;border-radius:6px;box-shadow:0 6px 24px #0003}
.reveal-ready{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}.reveal-ready.is-visible{opacity:1;transform:none}
@media(min-width:1450px){.workspace{grid-template-columns:310px minmax(0,1fr);gap:30px}}
@media(max-width:1100px){main{padding:0 24px}.masthead{margin:0 -24px;padding-left:7%;min-height:540px}.hero-orbit{width:270px;height:270px;right:6%}.workspace{grid-template-columns:260px minmax(0,1fr);gap:18px}form{padding:18px}.tools button{font-size:12px;padding:8px}.scroll-hint{display:block;margin:0;padding:0 16px 10px;color:#6b604d;font-size:11px}.help-section{gap:30px}}
@media(max-width:760px){header{padding:16px 18px}.brand-name{font-size:23px}.brand small{font-size:8px;letter-spacing:1.6px}.seal{font-size:17px;padding:6px 8px}nav{gap:0}nav a:first-child{display:none}nav a:last-child{display:block;font-size:11px;padding:9px 11px}main{padding:0 16px}.masthead{margin:0 -16px;min-height:555px;padding:35px 20px 75px;justify-content:center}.hero-copy{max-width:100%}.masthead h1{font-size:70px}.overline{font-size:10px;letter-spacing:3px}.hero-orbit{right:-110px;top:48%;width:260px;height:260px;opacity:.22;z-index:-1}.orbit-seal{display:none}.hero-landscape{background-position:62% center}.hero-landscape::after{background:linear-gradient(0deg,#f8f5ed,transparent 30%),#fff9ed33}.hero-subtitle{font-size:14px}.feature-strip{padding:17px 0;gap:8px}.feature-strip>div{display:flex;flex-direction:column;gap:6px;text-align:center;padding:0 5px}.feature-strip p{font-size:10px;line-height:1.6}.feature-strip span{font-size:23px}.workspace-heading{padding:30px 0 18px}.workspace-heading h2{font-size:27px}.workspace-heading>span{display:none}.workspace{grid-template-columns:1fr;gap:20px}form{padding:22px}.result{scroll-margin-top:12px}.result-toolbar{padding:12px;flex-wrap:wrap}.tools button{font-size:13px;padding:9px 11px}.chart-scroll{margin:0;padding:8px;justify-content:flex-start}.chart-bottom{padding:13px 12px}.legend{gap:10px;font-size:10px}.chart-bottom .check{font-size:10px}.help-section{grid-template-columns:1fr;gap:8px;padding:32px 4px 40px}.help-title h2{font-size:25px;margin-bottom:15px}.help-title img{display:none}.help-questions summary{font-size:13px}footer{padding:22px 18px;flex-wrap:wrap;gap:10px}footer .footer-brand{font-size:24px}.domain-signature{font-size:12px}.domain-signature::before,.domain-signature::after{display:none}footer>span{font-size:10px;width:100%}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes mist-drift{to{transform:translateX(8%)}}
@keyframes leaf-fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translate(-140px,650px) rotate(260deg);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1;transform:none}}
}
@media print{.masthead,.feature-strip,.workspace-heading,.scroll-hint,.help-section{display:none!important}.chart-center::before{opacity:.06}}
/* Leave room for browser headers and printer margins on one A4 sheet. */
@media print{
 @page{size:A4 portrait;margin:8mm}
 html,body{width:auto;height:auto;overflow:visible}
 main,.workspace,.result{width:100%;margin:0;padding:0}
 .chart{width:190mm;height:254mm;max-width:100%;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,63.5mm);break-inside:avoid;page-break-inside:avoid}
 .chart-scroll{overflow:visible}
}

/* chỉnh: icon cuộn tròn, tên miền cùng màu thương hiệu, dòng liên hệ */
.scroll-cue{width:42px;height:42px;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;line-height:1;padding:0}
.chart-center .site{margin-top:auto;font:700 13px var(--serif);color:#893b30;letter-spacing:1px}
.chart-center .contact{font:11.5px var(--sans);color:#3d372e;margin-top:3px}.chart-center .contact b{font-weight:700;color:#893b30}
.domain-signature,.domain-signature span{color:#893b30}
@media print{.chart-center .site{font-size:10pt}.chart-center .contact{font-size:8.5pt}}

/* icon nút Lập lá số trên header; căn lề nhóm Tứ Hóa */
nav a:last-child{display:inline-flex;align-items:center;gap:8px}
nav .nav-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hoa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:12px 0 0}
.option-grid,.hoa-grid{align-items:center}
.option-grid .check,.hoa-grid .check{display:flex;align-items:center;gap:7px;margin:0;white-space:nowrap}
.annual-year>label{display:block}.annual-year>label>input{width:100%;max-width:none!important}.hoa-grid .check input{width:15px;height:15px;margin:0}
/* lá số gọn hơn trên web; dòng liên hệ rõ hơn */
@media screen{.chart{max-width:880px;font-size:12px}.palace .main,.palace-top .main{font-size:14.5px}.palace h3{font-size:13px}.cols{font-size:12px}.palace-top{font-size:10px}.palace-top .daihan{font-size:12px}.palace-bottom{font-size:10px}.palace-bottom .ts{font-size:12px}.chart-center .info{font-size:12.5px}.chart-center .verdict{font-size:12.5px}
.chart-center .site{font-size:14px}.chart-center .contact{font:600 13px/1.4 var(--sans);color:#3d372e;margin-top:4px}.chart-center .contact b{font-size:14px}}
@media print{.chart-center .contact{font:600 10pt var(--sans)}.chart-center .contact b{font-size:10.5pt}}

/* ===== nét tĩnh tâm: sen, lá bồ đề, vàng nghệ nhạt ===== */
:root{--saffron:#c98a2e}
.hero-rule img{width:40px;height:25px;opacity:.9}
.floating-leaves i{background:url('assets/bodhi.svg') center/contain no-repeat;border-radius:0;width:14px;height:24px}
.domain-signature::before,.domain-signature::after{content:"";display:inline-block;width:16px;height:10px;background:url('assets/lotus.svg') center/contain no-repeat;vertical-align:middle;margin:0 10px;opacity:.85}
.footer-mid{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.footer-quote{margin:0;font:italic 12px/1.6 var(--serif);color:#7b6a4e}
.form-caption em{display:block;margin-top:4px;font:italic 11px var(--serif);color:var(--saffron)}
.feature-strip>div span{color:var(--saffron)}
.workspace-heading .overline,.help-title .overline,.hero-copy .overline{color:var(--saffron)}
.status-dot{background:var(--saffron)}
.chart-center .ls-title{border-top-color:#893b30}
@media(max-width:760px){.domain-signature::before,.domain-signature::after{display:inline-block}.footer-mid{width:100%;order:2}}

.hero-cta{gap:14px}.hero-cta .cta-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}