/* Thanh ngày tháng + thời tiết dưới header (chỉ các trang con).
   Pha 1: lời chào fade in giữa thanh, ~3,4s rồi fade out. Pha 2: thông tin ngày (trái) + thời tiết (phải) fade in.
   Font: RINO (--f-head) cho thứ / địa điểm / lời chào; RINO Body (--f-body) cho ngày tháng, âm lịch, nhiệt độ. */
.dw{position:relative;display:flex;align-items:center;min-height:clamp(70px,7.4vw,96px);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.22);color:var(--c,#0ff)}
.dw-hi,.dw-info{transition:opacity .6s ease,visibility 0s linear .6s}
.dw-hi{white-space:pre-line;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 10px;text-align:center;font-family:var(--f-head);font-size:clamp(16px,2.3vw,32px);line-height:1.25;letter-spacing:.02em;opacity:0;visibility:hidden;pointer-events:none}
.dw[data-ph="hi"] .dw-hi{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.dw-info{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px 24px;opacity:0;visibility:hidden}
.dw[data-ph="info"] .dw-info{opacity:1;visibility:visible;transition:opacity .6s ease .6s,visibility 0s linear .6s}
.dw-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .45em;min-width:0}
.dw-wd{font-family:var(--f-head);font-size:clamp(24px,3.5vw,46px);line-height:1.15;white-space:nowrap}
.dw-d{font-family:var(--f-body);font-size:clamp(24px,3.5vw,46px);line-height:1.15;white-space:nowrap}
.dw-sep{align-self:center;width:1px;height:1.3em;margin:0 .55em;background:currentColor;opacity:.55;font-size:clamp(14px,1.7vw,22px)}
.dw-lu{font-family:var(--f-body);font-size:clamp(14px,1.7vw,22px);opacity:.75;white-space:nowrap}
.dw-sep[hidden],.dw-lu[hidden]{display:none}
.dw-lu b{font-weight:700}
/* Chú thích tháng âm: (N) nhuận · (Đ) đủ · (T) thiếu — rê chuột / focus / chạm thì hiện nhãn đầy đủ */
.dw-tag{cursor:help;outline:0}
.dw-tag::before{content:"(" attr(data-s) ")"}
.dw-tag:hover::before,.dw-tag:focus::before,.dw-tag:focus-visible::before{content:"(" attr(data-f) ")"}
.dw-tag:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}
.dw-r{display:flex;align-items:center;gap:.8em;font-size:clamp(14px,1.7vw,22px);opacity:0;transition:opacity .6s ease}
.dw-r.on{opacity:1}
.dw-pl{font-family:var(--f-head);white-space:nowrap}
.dw-wx{display:flex;align-items:center;gap:.35em}
.dw-wx[hidden]{display:none}
.dw-ic{font-size:1.25em;line-height:1}
.dw-t{font-family:var(--f-body);font-size:inherit;color:inherit;background:none;border:0;padding:.25em .15em;margin:0;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.dw-t:hover{color:#fff}}
.dw-t:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
@media (orientation:portrait),(max-width:768px){
 .dw{min-height:92px;padding:12px 0}
 .dw-hi{font-size:clamp(16px,5vw,22px)}
 /* Giống bố cục PC: trái = thứ + ngày (+ âm lịch xuống dòng bên dưới), phải = địa điểm + thời tiết */
 .dw-info{flex-direction:row;justify-content:space-between;align-items:center;gap:6px 10px}
 .dw-l{flex:1 1 auto;justify-content:flex-start;align-items:baseline;gap:0 .35em;text-align:left}
 .dw-wd,.dw-d{font-size:clamp(17px,5vw,25px)}
 .dw-sep{display:none}
 .dw-lu{flex:0 0 100%;text-align:left;font-size:clamp(12px,3.5vw,15px)}
 .dw-r{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;text-align:right;gap:.15em .5em;font-size:clamp(12px,3.6vw,16px)}
}
@media (prefers-reduced-motion:reduce){.dw-hi,.dw-info,.dw-r{transition:none!important}}