/* Khu thắp nhang (đầu trang, theo kiểu trang tiện ích: lịch âm hôm nay + bàn thờ + số liệu) */
.hub{padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,96px);background:radial-gradient(70% 60% at 30% 40%,rgba(255,240,205,.7),transparent 70%),var(--paper)}
.hub-cal{border:1px solid rgba(184,134,47,.28);background:rgba(255,253,248,.8);border-radius:20px;margin-bottom:28px;box-shadow:0 8px 24px rgba(43,36,28,.05);overflow:hidden}
.hub-cal-head{display:flex;align-items:center;gap:16px;width:100%;padding:12px 18px 12px 12px;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--f-body)}
.hc-d{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--card);border:1px solid rgba(184,134,47,.45);font:300 26px/1 var(--f-display);letter-spacing:-.04em;padding-top:8px;overflow:hidden}
.hc-d::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--ember)}
.hc-main{display:grid;gap:2px;flex:1;min-width:0}.hc-main b{font-size:16px;font-weight:600}.hc-main span{font-size:14px;color:var(--ink-soft)}
.hc-next{font-size:13px;font-weight:600;color:#8A6A2A;background:rgba(184,134,47,.12);border-radius:999px;padding:6px 12px;white-space:nowrap}
.hc-car{font-size:14px;color:var(--ink-soft);transition:transform .35s var(--ease)}
.hub-cal-head[aria-expanded="true"] .hc-car{transform:rotate(180deg)}
.hub-cal-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:4px 18px 16px;border-top:1px dashed rgba(184,134,47,.3)}
.hub-cal-more[hidden]{display:none}
.hub-cal-more dl{display:flex;flex-wrap:wrap;gap:10px 28px;margin:12px 0 0}
.hub-cal-more dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.hub-cal-more dd{margin:2px 0 0;font-size:15px;font-weight:500}
.hub-cal-more .w{flex-basis:100%}
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.altar{position:relative;display:grid;justify-items:center;align-content:center;gap:18px;padding:28px 20px 26px;border-radius:28px;background:linear-gradient(180deg,#2A211A,#1B1511);color:#F6EAD2;overflow:hidden;box-shadow:0 30px 60px rgba(43,36,28,.25)}
.altar-glow{position:absolute;left:50%;top:38%;width:420px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(242,190,90,.32),rgba(242,190,90,0) 65%);transition:opacity .8s;opacity:.45;pointer-events:none}
.altar.lit .altar-glow{opacity:1;animation:glowBreath 6s ease-in-out infinite}
.urn{position:relative;width:min(260px,70%);height:auto;overflow:visible}
.urn .stick{transform-box:fill-box;transform-origin:50% 100%;opacity:.35;transition:opacity .6s}
.altar.lit .urn .stick{opacity:1}
.altar.go .urn .stick{animation:stickIn .7s var(--d) var(--ease) both}
@keyframes stickIn{from{transform:translateY(-18px);opacity:0}}
.urn .embers circle{fill:#FF9A3D;opacity:0;transition:opacity .6s;filter:drop-shadow(0 0 5px #FFB45E)}
.altar.lit .urn .embers circle{opacity:1;animation:ember 1.4s ease-in-out infinite}
.urn .embers circle:nth-child(2){animation-delay:.4s!important}.urn .embers circle:nth-child(3){animation-delay:.8s!important}
.urn .smoke path{fill:none;stroke:rgba(246,234,210,.5);stroke-width:2;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;opacity:0}
.altar.lit .urn .smoke path{animation:smoke 3.2s ease-in-out infinite}
.urn .smoke path:nth-child(2){animation-delay:1s!important}.urn .smoke path:nth-child(3){animation-delay:2s!important}
@keyframes ember{50%{opacity:.5}}
@keyframes smoke{0%{stroke-dashoffset:70;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-70;opacity:0;transform:translateY(-14px)}}
.altar-msg{position:absolute;left:0;right:0;top:20px;text-align:center;font:300 18px/1.3 var(--f-display);letter-spacing:-.01em;color:#F4DFA8;opacity:0;pointer-events:none;padding-inline:20px}
.altar-msg.show{animation:msgUp 3.6s ease-out both}
@keyframes msgUp{0%{opacity:0;transform:translateY(16px)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.altar-to{position:relative;display:grid;justify-items:center;gap:8px}
.altar-to>span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,234,210,.65)}
.altar-to .chips{justify-content:center}
.altar-to .chip{color:#F6EAD2;border-color:rgba(246,234,210,.22);border-radius:999px;padding:7px 14px;font-size:13.5px}
.altar-to .chip[aria-pressed="true"]{background:#E3B65A;border-color:#E3B65A;color:#2B1D0E}
.altar-acts{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.altar-acts .btn{border-radius:999px;padding:13px 22px;font-size:15px;min-height:48px}
.hub-light{background:linear-gradient(180deg,#E9BE63,#B8862F);border-color:#C9963A;color:#2B1D0E;font-weight:600;box-shadow:0 8px 24px rgba(232,180,80,.35)}
.hub-light:active{transform:scale(.96)}
.altar-acts .btn.ghost{color:#F6EAD2;border-color:rgba(246,234,210,.3);background:transparent}
.altar-acts .btn.ghost:hover{background:rgba(246,234,210,.08)}
.altar.ring{animation:ring .9s ease-out}
@keyframes ring{0%{box-shadow:0 30px 60px rgba(43,36,28,.25),0 0 0 0 rgba(242,190,90,.5)}100%{box-shadow:0 30px 60px rgba(43,36,28,.25),0 0 0 26px rgba(242,190,90,0)}}
.hub-side{display:grid;gap:16px;align-content:center}
.hub-title{font-size:clamp(34px,4.6vw,58px)}.hub-title span{color:var(--ember)}
.hub-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.hub-stats div{padding:16px 16px 14px;display:grid;gap:4px}.hub-stats div+div{border-left:1px solid var(--line)}
.hub-stats b{font:300 38px/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hub-stats b.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.18);color:var(--ember)}}
.hub-stats span{font-size:13px;color:var(--ink-soft)}
.hub-49{display:grid;gap:8px;border:1px solid rgba(184,134,47,.28);border-radius:18px;padding:14px 16px;background:rgba(184,134,47,.06)}
.h49-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600}.h49-top b{color:var(--ember);font-variant-numeric:tabular-nums}
.h49-bar{height:8px;border-radius:8px;background:rgba(184,134,47,.16);overflow:hidden}
.h49-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#E9BE63,#B8862F);transition:width .8s var(--ease)}
.hub-49 small{font-size:13px;color:var(--ink-soft)}
.hub-note{font-size:12.5px;color:var(--ink-soft);margin:0}
@media (max-width:860px){.hub-grid{grid-template-columns:1fr}.altar{padding-top:76px}.altar-msg{top:18px;font-size:16px}.hc-next{display:none}.hub-stats b{font-size:30px}.hub-stats div{padding:12px}}
/* Thiệp tưởng niệm */
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cm-form{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px}
.cm-l{font-size:13px;font-weight:600;margin-top:6px}.cm-l span{font-weight:400;color:var(--ink-soft)}
.cm-form .chip{border-radius:999px;padding:8px 14px;font-size:14px}
.cm-in{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 14px;font:16px var(--f-body);color:var(--ink)}
.cm-form .btn{justify-self:start;border-radius:999px;padding:12px 24px;margin-top:8px}
.cm-prev{display:grid;gap:12px;justify-items:center}
.cm-prev canvas{width:min(100%,420px);height:auto;border-radius:18px;box-shadow:0 24px 50px rgba(43,36,28,.18);background:#FBF6EC}
.cm-acts{display:flex;gap:10px}.cm-acts .btn{border-radius:999px}
@media (max-width:860px){.cm-grid{grid-template-columns:1fr}}
/* Chân trang nhiều cột */
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding-block:28px 8px}
.foot-cols h4{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:600}
.foot-cols nav{display:grid;gap:8px;align-content:start}
.foot-cols nav a,.foot-cols nav button{color:var(--ink-soft);text-decoration:none;font:14px var(--f-body);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.foot-cols nav a:hover,.foot-cols nav button:hover{color:var(--ink)}
.fc-about p{margin:10px 0 0;max-width:34ch;font-size:14px}
.fc-about .brand b{font-size:20px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}.fc-about{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.altar *,.altar,.hub-stats b{animation:none!important}}