:root{--gold:#ffd24a;--line:rgba(70,140,255,.55);--panel:rgba(5,16,56,.78);--txt:#eaf2ff;--mut:#9db7e6;--hand:"Segoe Script","Bradley Hand","Comic Sans MS","Noteworthy",cursive;--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--txt);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:var(--sa-t) 0 var(--sa-b);overflow-x:hidden;
background:radial-gradient(1200px 500px at 15% -5%,#0b2a7a55,transparent),radial-gradient(1100px 500px at 90% 0,#7a1b0c44,transparent),linear-gradient(180deg,#030a28,#04123f 60%,#050b2a)}
button,input,select{font:inherit;color:inherit}
.script{font-family:var(--hand);font-style:italic;margin:0;line-height:1.3}
.ico{width:1.6em;height:1.6em;flex:none;color:#8fd0ff}
svg.ico,svg.chev,.gear svg{display:block}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
/* thanh trên */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 20px;max-width:1560px;margin:0 auto;padding:12px clamp(10px,1.5vw,22px)}
.tag{white-space:nowrap;font-size:clamp(.8rem,1.25vw,1.1rem);color:#fff;text-shadow:0 0 10px #5db4ff;transform:rotate(-4deg);justify-self:start}
.clock{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);justify-self:center}
.clock .ico{width:clamp(30px,3.2vw,44px);height:auto;aspect-ratio:1;color:#cfe6ff}
#clk{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 14px #2f8bff;line-height:1}
.cflag{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);flex:none;padding-left:clamp(8px,1.2vw,16px);border-left:1px solid #fff3;box-sizing:content-box}
.cflag img{width:100%;height:100%;display:block;border-radius:50%}
.cinfo{display:flex;flex-direction:column;line-height:1.3}
.cinfo b{font-size:clamp(.9rem,1.3vw,1.1rem)}.cinfo span{font-size:clamp(.78rem,1.1vw,.95rem);color:#cfe0ff}
.cinfo small{font-size:.68rem;color:#7fe0a0;margin-top:1px}.cinfo small.off{color:#ffc27a}
.ctl{position:relative;display:flex;align-items:center;gap:10px;justify-self:end}
.tzsel{position:relative;display:flex;align-items:center;gap:10px;min-width:230px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 0 14px #1f6fff55;cursor:pointer}
.tzsel>span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.tzsel small{color:var(--mut);font-size:.72rem}.tzsel b{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{width:18px;height:18px;color:#bcd3ff;flex:none}
.tzsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.gear{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;touch-action:manipulation}
.gear svg{width:24px;height:24px;color:#dbe9ff}
.pop{position:absolute;z-index:20;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:10px;min-width:250px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#06133f;box-shadow:0 10px 30px #000a}
.pop label{display:flex;align-items:center;gap:10px;cursor:pointer}.pop input{width:18px;height:18px;accent-color:#3fa2ff}
/* thẻ đếm ngược: ảnh nền + số thật đè lên (đơn vị --u = 1px của ảnh gốc) */
main{max-width:1560px;margin:0 auto;padding:0 clamp(10px,1.5vw,22px) 20px}
.cards{display:grid;grid-template-columns:412fr 491fr 486fr;gap:clamp(8px,1.1vw,16px)}
.cd{position:relative;aspect-ratio:var(--w) / 290;container-type:inline-size;background-size:100% 100%;background-position:center;background-repeat:no-repeat;border-radius:clamp(10px,1.2vw,18px);overflow:hidden}
.cd .in{position:absolute;inset:0;--u:calc(100cqw/var(--w))}
.cd .tm{position:absolute;inset:0;--g:#4aa8ff;pointer-events:none}
.cd.r .tm{--g:#ff4a3a}.cd.g .tm{--g:#ffb62e}
.cd .tm b{position:absolute;left:calc(var(--u)*var(--x));top:calc(var(--u)*166);transform:translate(-50%,-50%);font-size:calc(var(--u)*41);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 calc(var(--u)*7) var(--g),0 0 calc(var(--u)*18) var(--g)}
.cd .pt{position:absolute;left:calc(var(--u)*var(--px));top:calc(var(--u)*254);transform:translate(-50%,-50%);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.35}
.cd .pt b{display:block;font-size:calc(var(--u)*15.5);font-weight:600;color:#fff}
.cd .pt i{display:block;font-style:normal;font-size:calc(var(--u)*11.5);color:var(--g)}
.cd .pt{--g:#8fd0ff}.cd.r .pt{--g:#ff9a8a}.cd.g .pt{--g:#ffc766}
.cd .dn{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--u)*166);transform:translateY(-50%);margin:0;text-align:center;font-weight:800;font-size:calc(var(--u)*21);line-height:1.35;color:var(--gold);text-shadow:0 0 calc(var(--u)*12) #ff9d00;animation:pop .6s ease-out}
@keyframes pop{from{transform:translateY(-50%) scale(.85);opacity:0}}
/* giờ thế giới */
.world{margin-top:clamp(10px,1.4vw,18px);padding:clamp(12px,1.4vw,20px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(6,20,70,.82),rgba(3,10,40,.86));box-shadow:0 0 22px #1f6fff44}
.whead{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:12px}
.wtitle{display:flex;align-items:center;gap:12px;margin-right:auto}.wtitle .ico{width:42px;height:42px}
.wtitle h2{margin:0;font-size:1.35rem;letter-spacing:.04em}.wtitle p{margin:0;font-size:.8rem;color:#8fd0ff}
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#031038aa;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 12px;border:0;border-radius:999px;background:none;color:#8fd0ff;font-size:.85rem;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.tab[aria-selected=true]{background:linear-gradient(180deg,#29a8ff,#1572e8);color:#fff;box-shadow:0 0 12px #2f8bff}
.search,.sort{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;border:1px solid var(--line);border-radius:12px;background:#031038aa;position:relative}
.search{flex:1 1 180px;max-width:250px}.search input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:.88rem}
.search input::placeholder{color:#8aa6d8}.search .ico{width:20px;height:20px}
.sort{font-size:.85rem;color:#bcd3ff}.sort select{appearance:none;-webkit-appearance:none;border:0;background:none;outline:0;color:#fff;padding-right:18px;cursor:pointer}.sort select option{color:#000}
.sort .chev{position:absolute;right:10px;pointer-events:none}
.wbody{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,27%,400px);gap:16px;align-items:start}
.grp h3{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-size:1.02rem;color:#cfe6ff}.grp:first-child h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"f n" "t t" "d d" "u u";column-gap:6px;align-items:center;text-align:left;padding:8px 8px 7px;border:1px solid rgba(70,130,255,.45);border-radius:12px;background:linear-gradient(180deg,rgba(14,32,92,.7),rgba(4,12,44,.85));cursor:pointer;touch-action:manipulation;min-width:0}
.tile:hover{border-color:#6fb4ff}
.tile[aria-pressed=true]{border-color:#53b0ff;background:linear-gradient(180deg,#123a9a,#0a1f66);box-shadow:0 0 14px #2f8bff,inset 0 0 10px #50aaff66}
.tile img{grid-area:f;width:24px;height:24px;border-radius:50%;display:block}
.tile .nm{grid-area:n;display:flex;flex-direction:column;min-width:0;line-height:1.2}.tile .nm b{font-size:.76rem;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15}.tile .nm i{font-style:normal;font-size:.66rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tt{grid-area:t;text-align:center;margin-top:4px;font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.tile .dd{grid-area:d;text-align:center;font-size:.68rem;color:#cfe0ff;font-variant-numeric:tabular-nums}
.tile .uu{grid-area:u;text-align:center;font-size:.68rem;color:#6fb4ff}
.empty{padding:30px;text-align:center;color:var(--mut)}
.feat{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(10px,1.4vw,18px);border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.feat>div{display:flex;align-items:center;gap:12px;padding:14px 16px;border-left:1px solid #fff1}.feat>div:first-child{border-left:0}
.feat .ico{width:34px;height:34px}.feat p{margin:0;display:flex;flex-direction:column;line-height:1.3}.feat b{font-size:.82rem}.feat span{font-size:.72rem;color:var(--mut)}
.bye{text-align:center;margin:22px 0 4px;font-size:clamp(1.1rem,2vw,1.6rem);color:#cfe0ff;text-shadow:0 0 10px #1f6fff}
footer{max-width:900px;margin:0 auto;padding:6px 16px 26px;font-size:.76rem;color:#8ea6d4;text-align:center}
.toast{position:fixed;z-index:30;left:50%;bottom:calc(16px + var(--sa-b));transform:translateX(-50%);max-width:min(92vw,560px);padding:10px 16px;border-radius:14px;background:rgba(8,20,60,.96);border:1px solid #53b0ff;box-shadow:0 0 16px #2f8bff;font-size:.85rem;text-align:center;animation:up .25s ease-out}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* máy tính bảng / điện thoại */
@media (max-width:1100px){
 .wbody{grid-template-columns:1fr}.map{position:relative;top:auto;max-width:680px;width:100%;margin:6px auto 0}
 .feat{grid-template-columns:repeat(3,1fr)}.feat>div:nth-child(4){border-left:0}.feat>div{border-top:1px solid #fff1}.feat>div:nth-child(-n+3){border-top:0}
}
@media (max-width:820px){
 .top{grid-template-columns:1fr;justify-items:center;gap:10px}.tag{display:none}.ctl{justify-self:stretch}.tzsel{flex:1;min-width:0}
 .cards{grid-template-columns:1fr}
 .search{max-width:none;flex-basis:100%}.sort{flex:1}.tabs{width:100%}
 .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}.tile .tt{font-size:1.2rem}
 .feat{grid-template-columns:1fr 1fr}.feat>div{border-left:0;border-top:1px solid #fff1}.feat>div:nth-child(-n+2){border-top:0}.feat>div:nth-child(odd){border-right:1px solid #fff1}.feat>div:last-child{grid-column:1/-1;border-right:0}
}
@media (max-width:420px){.clock{flex-wrap:wrap;justify-content:center}.cflag{padding-left:8px}.grid{grid-template-columns:repeat(3,1fr)}.tile{padding:7px 5px}}
@media (min-width:821px) and (max-width:1000px){.cards{grid-template-columns:1fr 1fr}.cards .cd:last-child{grid-column:1/-1;max-width:calc(50% - 6px);margin:0 auto}}
@media (prefers-reduced-motion:reduce){.cd .dn,.toast{animation:none}}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.seo{max-width:900px;margin:0 auto;padding:0 16px 8px;font-size:.74rem;color:#7f97c6;text-align:center}
.tab{min-height:44px}
/* bản đồ SVG thật + nhãn giờ sống */
.map{cursor:pointer;touch-action:manipulation;position:sticky;top:10px;container-type:inline-size;border-radius:16px;border:1px solid rgba(70,130,255,.4);background:radial-gradient(120% 90% at 50% 30%,#0b2a7a 0,#061443 60%,#040c30);box-shadow:inset 0 0 40px #1f6fff33;aspect-ratio:960/424}
.map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map .g{fill:none;stroke:#7fb4ff;stroke-opacity:.12;stroke-width:.6}.map .l{fill:#1d57b8;fill-opacity:.85;stroke:#6fb4ff;stroke-opacity:.55;stroke-width:.8}.map .b{fill:none;stroke:#07245e;stroke-width:.6}
.mk{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:#ffcf4a;box-shadow:0 0 6px #ffb300,0 0 14px #ff9d00;pointer-events:none}
.mk.sel{background:#fff;box-shadow:0 0 8px #4aa8ff,0 0 20px #1f6fff;z-index:3;width:13px;height:13px}
.mt{display:none;position:absolute;z-index:2;padding:.25em .55em;border-radius:8px;background:rgba(6,22,70,.88);border:1px solid rgba(110,170,255,.55);text-align:center;line-height:1.15;white-space:nowrap;pointer-events:none;font-size:clamp(8px,2.5cqw,12px);box-shadow:0 0 8px rgba(30,120,255,.4)}
.mk[data-maj] .mt,.mk.sel .mt{display:block}
.mt i{display:block;font-style:normal;color:#dbe9ff;font-size:.86em}.mt b{display:block;font-variant-numeric:tabular-nums;color:#fff}
.mt.u{bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.mt.d{top:calc(100% + 7px);left:50%;transform:translateX(-50%)}.mt.l{right:calc(100% + 7px);top:50%;transform:translateY(-50%)}
.mk.sel .mt{z-index:4;border-color:#8fd0ff}
/* nhạc */
.ctlbox{display:flex;flex-direction:column;align-items:flex-end;gap:6px;justify-self:end}
.music{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.mbtn,.mmute{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;touch-action:manipulation;font-size:.85rem}
.mbtn[aria-pressed=true]{background:linear-gradient(180deg,#b3261e,#7d120f);border-color:#ff9a8a;box-shadow:0 0 12px #ff3b2f88}
.mmute{padding:0 12px}.music input[type=range]{width:96px;height:44px;accent-color:#ffb62e;cursor:pointer}
.mmsg{flex-basis:100%;max-width:340px;margin-left:auto;font-size:.72rem;color:#ffc27a;text-align:right;line-height:1.3}
.mmsg:empty{display:none}
/* hiệu ứng nhẹ: chỉ trang trí, không chặn thao tác */
.lanterns{position:fixed;z-index:4;top:0;left:0;right:0;height:0;pointer-events:none}
.lanterns i{position:absolute;top:-4px;width:24px;height:30px;border-radius:50%/44%;background:radial-gradient(circle at 50% 40%,#ff8a4a,#d3150f 72%);box-shadow:0 0 14px #ff2a1a;transform-origin:50% -10px;animation:sway 4s ease-in-out infinite}
.lanterns i:first-child{left:14px}.lanterns i:last-child{right:14px;animation-delay:-2s}
.lanterns i::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:10px;background:#ffcf24}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.petals{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.petals span{position:absolute;top:-30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cg fill='%23ffcf24'%3E%3Ccircle cy='-10' r='8'/%3E%3Ccircle cx='9.5' cy='-3' r='8'/%3E%3Ccircle cx='6' cy='8' r='8'/%3E%3Ccircle cx='-6' cy='8' r='8'/%3E%3Ccircle cx='-9.5' cy='-3' r='8'/%3E%3C/g%3E%3Ccircle r='4' fill='%23ff7a00'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7;animation:fall linear infinite}
@keyframes fall{to{transform:translate3d(var(--dx,40px),105vh,0) rotate(360deg)}}
.fx-off .lanterns,.fx-off .petals,.fx-off #fx{display:none}
@media (min-width:1101px){.top{padding-left:56px;padding-right:56px}}
@media (max-width:820px){.lanterns{display:none}.ctlbox{justify-self:stretch;align-items:stretch}.music{justify-content:space-between}.mmsg{text-align:left;margin-left:0;max-width:none}.music input[type=range]{flex:1}}
@media (prefers-reduced-motion:reduce){.lanterns i,.petals{animation:none;display:none}}
@container (max-width:430px){.mk[data-maj]:not([data-core]):not(.sel) .mt{display:none}}


/* ===== XUAN 2027 RED & GOLD VISUAL REFRESH ===== */
:root{--gold:#f6d58a;--line:rgba(255,205,116,.30);--panel:rgba(73,10,22,.72);--txt:#fff3df;--mut:#e4bd9b}
body{background:radial-gradient(ellipse at 50% 0%,#9d2830 0%,#65101d 37%,#26070e 100%);color:#fff2dc}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#ffd98b 1px,transparent 1.5px);background-size:42px 42px;mask-image:linear-gradient(#000,transparent 75%);z-index:0}
.top,main,footer{position:relative;z-index:1}
.tag{color:#ffe5a8;text-shadow:0 0 14px #ffb33c}
.clock #clk{color:#fff1ce;text-shadow:0 0 18px #ffb64a}
.clock .ico,.ico{color:#f6d58a}
.clock .cinfo small{color:#ffcf9a}
.tzsel,.gear,.music,.ctl,.pop{border-color:#dba85d!important}
.tzsel,.gear,.mbtn,.mmute,.search,.sort,.tab,.tile,.pop{background:rgba(61,7,16,.68)!important;color:#fff0d4!important}
.gear,.mbtn,.mmute,.tab,.tile{border-color:#bd8545!important}
.mbtn{background:linear-gradient(135deg,#f6d58a,#c98a38)!important;color:#50101a!important;font-weight:800}
.cards{gap:clamp(12px,2vw,24px)}
.cd{border:1px solid rgba(255,218,151,.65)!important;border-radius:22px!important;overflow:hidden;box-shadow:0 18px 55px #16030888, inset 0 0 35px #ffcf6718!important}
.cd .in{backdrop-filter:blur(1px)}
.cd:after{background:linear-gradient(180deg,#2b071322,#2b071388)!important}
.cd .tm b{color:#fff2cc!important;text-shadow:0 2px 16px #ffb63d!important}
.cd .dn,.cd .pt{color:#ffe5b4!important}
.world{background:linear-gradient(145deg,rgba(91,13,26,.88),rgba(43,7,15,.94))!important;border:1px solid #d6a35b!important;border-radius:22px!important;box-shadow:0 20px 55px #18030766!important}
.whead{border-color:#d6a35b55!important}
.wtitle h2,.grp h3{color:#ffe1a1!important}
.wtitle p,.feat span,footer p{color:#e5c3a4!important}
.tab[aria-selected=true]{background:linear-gradient(135deg,#f6d58a,#c68b3e)!important;color:#50101a!important;border-color:#ffe5a8!important}
.tile{border-radius:14px!important;transition:transform .18s,border-color .18s,background .18s}
.tile:hover,.tile[aria-pressed=true]{border-color:#ffdc91!important;background:#8a1d2b!important;transform:translateY(-2px)}
.map{border-radius:16px;overflow:hidden;background:#350b15!important;border:1px solid #b87942}
.map .l{fill:#9b4a39!important;stroke:#f1c477!important}
.map .g{stroke:#e4b66c55!important}
.feat{background:rgba(67,9,19,.72)!important;border:1px solid #d6a35b55!important;border-radius:18px!important}
.feat>div{border-color:#d6a35b44!important}
.bye{color:#ffe0a0!important;text-shadow:0 0 15px #f2a83e}
footer{max-width:1100px;margin:20px auto 0;padding:18px 22px 32px;text-align:center}
footer p{font-size:12px;line-height:1.7}
.lanterns i{filter:sepia(.4) saturate(1.8) hue-rotate(330deg);opacity:.95}
#fx{z-index:5}
@media(max-width:700px){.top{grid-template-columns:1fr auto;gap:12px}.tag{font-size:.82rem}.clock{grid-column:1/-1;grid-row:2;justify-self:center}.ctlbox{justify-self:end}.cards{grid-template-columns:1fr!important}.world{margin-inline:10px}.whead{gap:10px}.feat{margin-inline:10px}.cd{min-height:180px}}