*{box-sizing:border-box} :root{--bg:#090611;--bg2:#11091a;--panel:rgba(20,11,27,.88);--gold:#f4c458;--gold2:#ffe29a;--purple:#8d4ccc;--pink:#e778ba;--text:#fff8e9;--muted:#c6b8c5;--line:rgba(244,196,88,.22);--shadow:0 28px 90px rgba(0,0,0,.42)}
html{scroll-behavior:smooth} body{margin:0;color:var(--text);background:radial-gradient(circle at 20% 15%,rgba(101,45,151,.19),transparent 28%),linear-gradient(180deg,#08050e,#12091a 46%,#07050b);font-family:"Segoe UI",Arial,Tahoma,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none} button,input{font:inherit}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:.3s}.site-header.scrolled{background:rgba(8,5,13,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-wrap{width:min(1240px,calc(100% - 40px));min-height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-dragon{width:45px;height:45px;display:grid;place-items:center;border:1px solid rgba(244,196,88,.62);border-radius:50%;color:var(--gold);font-family:serif;font-size:22px;box-shadow:inset 0 0 18px rgba(244,196,88,.12),0 0 24px rgba(244,196,88,.08)}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:.08em}.brand small{margin-top:3px;color:var(--gold);font-size:8px;letter-spacing:.22em}.main-nav{display:flex;align-items:center;gap:26px}.main-nav a{color:#e6dce6;font-size:13px;font-weight:700;transition:.2s}.main-nav a:hover{color:var(--gold2)}.main-nav .nav-cta{padding:10px 17px;border:1px solid rgba(244,196,88,.45);background:rgba(244,196,88,.08)}.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:0;background:transparent}.menu-toggle span{display:block;height:2px;margin:5px 0;background:var(--gold)}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:#0a0711}.hero-art{position:absolute;inset:0;z-index:-4}.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,3,9,.98) 0%,rgba(6,3,11,.84) 37%,rgba(7,4,13,.22) 67%,rgba(8,5,14,.12)),linear-gradient(180deg,rgba(7,4,12,.2),rgba(7,4,12,.18) 65%,#090611 100%)}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 28%}.hero-glow{position:absolute;inset:0;z-index:-3;box-shadow:inset 0 0 180px 35px rgba(0,0,0,.62)}.hero-content{width:min(1240px,calc(100% - 40px));margin:108px auto 60px}.eyebrow{margin:0 0 14px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase}.hero h1,.section h2,.final-cta h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:800;line-height:.96}.hero h1{max-width:720px;font-size:clamp(58px,7.6vw,110px);text-shadow:0 12px 42px rgba(0,0,0,.82)}.hero h1 span,.section h2 span{color:var(--gold2)}.hero-copy{max-width:630px;margin:26px 0 0;color:#e1d6e1;font-size:17px;line-height:1.82;text-shadow:0 2px 15px rgba(0,0,0,.82)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{min-height:50px;padding:0 24px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;letter-spacing:.02em;transition:.2s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-gold{color:#241505;background:linear-gradient(135deg,#ffe49b,#c88726);box-shadow:0 15px 34px rgba(202,132,28,.24)}.btn-dark{border-color:rgba(255,255,255,.18);background:rgba(10,6,14,.7);backdrop-filter:blur(8px)}.btn-discord{border-color:rgba(173,137,255,.36);background:rgba(95,59,153,.34);backdrop-filter:blur(8px)}.server-strip{width:min(850px,100%);margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(90deg,rgba(10,6,13,.88),rgba(39,18,46,.7));border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:var(--shadow)}.server-strip>div{min-height:78px;padding:17px 21px;display:flex;flex-direction:column;justify-content:center}.server-strip>div+div{border-left:1px solid var(--line)}.server-strip small{color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.server-strip strong{margin-top:7px;font-size:13px}.status{color:#d8f6cc}.status i{width:8px;height:8px;display:inline-block;margin-right:6px;border-radius:50%;background:#83d669;box-shadow:0 0 12px #83d669}.scroll-down{position:absolute;left:50%;bottom:22px;width:28px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:20px;transform:translateX(-50%)}.scroll-down span{width:4px;height:8px;position:absolute;left:50%;top:9px;border-radius:6px;background:var(--gold);transform:translateX(-50%);animation:scroll 1.7s infinite}@keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
.section{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:105px 0}.section-heading{max-width:780px;margin-bottom:48px}.section-heading.compact{margin-bottom:36px}.section h2,.final-cta h2{font-size:clamp(42px,5vw,68px)}.section-lead{max-width:680px;margin:24px 0 0;color:var(--muted);font-size:16px;line-height:1.8}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lore-card{min-height:285px;position:relative;padding:32px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,rgba(46,22,56,.8),rgba(13,8,18,.94));transition:.25s}.lore-card:hover{transform:translateY(-5px);border-color:rgba(244,196,88,.46)}.lore-card::after{content:"";position:absolute;width:170px;height:170px;right:-65px;bottom:-65px;border:1px solid rgba(244,196,88,.15);border-radius:50%}.lore-card.featured{transform:translateY(-18px);background:linear-gradient(150deg,rgba(114,58,132,.58),rgba(20,10,26,.96));box-shadow:0 26px 70px rgba(0,0,0,.25)}.lore-card.featured:hover{transform:translateY(-23px)}.card-number{color:var(--gold);font-size:17px}.lore-card h3{margin:64px 0 14px;font-family:Georgia,"Times New Roman",serif;font-size:27px}.lore-card p,.feature-copy p,.story-copy p,.final-copy p,.news-body p{color:var(--muted);line-height:1.8}
.feature-stage{position:relative;background:radial-gradient(circle at 80% 20%,rgba(94,41,142,.27),transparent 34%),linear-gradient(180deg,rgba(16,8,23,.96),rgba(8,5,12,.98));border-block:1px solid rgba(244,196,88,.1)}.feature-stage-inner{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}.feature-copy{position:sticky;top:120px}.feature-copy p:last-child{max-width:440px;margin-top:24px}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.feature-card{min-height:150px;padding:24px;display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);background:rgba(20,11,27,.7);transition:.25s}.feature-card:hover{transform:translateY(-4px);border-color:rgba(244,196,88,.5);background:rgba(37,17,47,.85)}.feature-card>span{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid rgba(244,196,88,.42);border-radius:50%;color:var(--gold2);font-family:serif;font-size:20px}.feature-card h3{margin:2px 0 8px;font-size:20px}.feature-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.coming-soon{display:inline-block;margin-left:7px;padding:3px 7px;vertical-align:2px;border:1px solid rgba(244,196,88,.35);border-radius:999px;color:var(--gold2);background:rgba(244,196,88,.08);font-family:Arial,sans-serif;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.86fr);gap:72px;align-items:center}.story-art{position:relative;max-width:530px;justify-self:center}.story-art::before{content:"";position:absolute;inset:6% -5% -4% 6%;z-index:-1;border:1px solid rgba(244,196,88,.32);background:linear-gradient(145deg,rgba(114,48,126,.24),rgba(213,96,154,.08))}.story-art img{display:block;width:100%;height:auto;max-height:760px;object-fit:contain;box-shadow:0 28px 80px rgba(0,0,0,.38)}.story-copy p{margin:25px 0 0;font-size:16px}.story-points{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.story-points span{padding:9px 12px;border:1px solid var(--line);color:#eaddeb;background:rgba(46,23,55,.55);font-size:12px}.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--gold2);font-weight:800}.text-link b{font-size:22px;transition:.2s}.text-link:hover b{transform:translateX(4px)}
.join{padding-top:80px}.join-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.7fr);gap:55px;align-items:end}.steps{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:55px 1fr auto;gap:18px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}.step>span{color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:32px}.step h3{margin:0 0 7px;font-size:21px}.step p{margin:0;color:var(--muted);line-height:1.6}.step a{padding:10px 15px;border:1px solid rgba(244,196,88,.28);color:var(--gold2);font-weight:700}.join-art{height:500px;overflow:hidden;border:1px solid var(--line);background:rgba(25,12,32,.62)}.join-art img{width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:saturate(.92) contrast(.98)}
.news-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.news-main{overflow:hidden;border:1px solid var(--line);background:rgba(20,11,27,.82)}.news-image{min-height:320px;background:linear-gradient(180deg,transparent,rgba(12,6,16,.62)),url("assets/kim-long-hero.jpeg") center 28%/cover}.news-body{padding:28px}.news-body>span{color:var(--gold);font-size:11px;font-weight:800;text-transform:uppercase}.news-body h3{margin:12px 0;font-family:Georgia,"Times New Roman",serif;font-size:29px}.news-body time,.news-list time{color:#8d7e91;font-size:10px;letter-spacing:.1em}.news-list{display:grid;gap:14px}.news-list article{min-height:145px;padding:23px;border:1px solid var(--line);background:rgba(20,11,27,.67)}.news-list h3{margin:17px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:22px}
.final-cta{width:min(1180px,calc(100% - 40px));min-height:480px;margin:15px auto 95px;position:relative;overflow:hidden;display:flex;align-items:center;border:1px solid rgba(244,196,88,.3);background:#160b1c;box-shadow:var(--shadow)}.final-art{position:absolute;inset:0}.final-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,7,17,.98) 0%,rgba(15,8,20,.86) 46%,rgba(15,8,20,.18) 76%),linear-gradient(180deg,transparent,rgba(9,5,12,.42))}.final-art img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.final-copy{position:relative;z-index:2;width:min(580px,58%);padding:58px}.final-copy p{margin-bottom:0}
footer{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:35px 0 52px;display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:24px;align-items:end;border-top:1px solid var(--line);color:#8c7f8f;font-size:12px}.footer-brand strong,.footer-brand span{display:block}.footer-brand strong{color:#e7dce6;letter-spacing:.08em}.footer-brand span{margin-top:5px;color:var(--gold);font-size:8px;letter-spacing:.2em}.footer-links{display:flex;justify-content:flex-end;gap:18px}.toast{position:fixed;left:50%;bottom:28px;z-index:90;max-width:calc(100% - 32px);padding:13px 18px;opacity:0;pointer-events:none;color:#211505;background:var(--gold2);box-shadow:var(--shadow);transform:translate(-50%,20px);transition:.25s;font-size:13px;font-weight:800}.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){.menu-toggle{display:block}.main-nav{position:fixed;top:78px;left:20px;right:20px;padding:22px;display:none;flex-direction:column;align-items:stretch;gap:17px;background:rgba(9,5,14,.98);border:1px solid var(--line)}.main-nav.open{display:flex}.hero-art img{object-position:62% 25%}.hero-art::after{background:linear-gradient(90deg,rgba(5,3,9,.98),rgba(6,3,11,.7)),linear-gradient(180deg,transparent,#090611)}.intro-grid,.feature-stage-inner,.story,.join-layout,.news-grid{grid-template-columns:1fr}.lore-card.featured,.lore-card.featured:hover{transform:none}.feature-copy{position:static}.story-art{max-width:480px}.story-copy{max-width:700px}.join-art{height:430px;max-width:430px;width:100%;justify-self:center}.final-copy{width:min(680px,78%)}footer{grid-template-columns:1fr;align-items:start}.footer-links{justify-content:flex-start}}
@media(max-width:660px){.nav-wrap,.hero-content,.section,.final-cta,footer{width:min(100% - 28px,1180px)}.brand strong{font-size:13px}.brand small{font-size:7px}.brand-dragon{width:40px;height:40px}.hero{min-height:900px;align-items:flex-start}.hero-content{margin-top:120px}.hero-art img{object-position:67% 25%}.hero-art::after{background:linear-gradient(180deg,rgba(5,3,9,.52) 0%,rgba(5,3,9,.78) 47%,#090611 87%)}.hero h1{font-size:clamp(48px,17vw,75px)}.hero-copy{font-size:15px}.hero-actions{display:grid}.btn{width:100%}.server-strip{grid-template-columns:1fr}.server-strip>div+div{border-left:0;border-top:1px solid var(--line)}.section{padding:76px 0}.section h2,.final-cta h2{font-size:40px}.intro-grid,.feature-grid{grid-template-columns:1fr}.lore-card{min-height:250px;padding:25px}.lore-card h3{margin-top:42px}.story{gap:45px}.story-art{width:92%}.step{grid-template-columns:42px 1fr}.step a{grid-column:2;justify-self:start}.join-art{height:380px}.news-image{min-height:220px}.final-cta{min-height:520px;align-items:flex-end}.final-art::after{background:linear-gradient(180deg,rgba(10,5,13,.12),rgba(10,5,13,.88) 55%,rgba(10,5,13,.98))}.final-art img{object-position:center 25%}.final-copy{width:100%;padding:30px 24px}.final-copy .hero-actions{display:flex}.final-copy .btn{width:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-down span{animation:none}}

/* Hoa anh đào + hạt sáng Kim Long */
.fx-particles{position:fixed;inset:0;z-index:45;overflow:hidden;pointer-events:none;contain:strict}
.fx-particle{position:absolute;top:-42px;left:0;will-change:transform,opacity;animation:fx-fall var(--fall-duration) linear forwards;filter:drop-shadow(0 2px 3px rgba(41,12,35,.22))}
.fx-petal{width:var(--size);height:calc(var(--size)*.72);border-radius:72% 28% 68% 32% / 62% 38% 62% 38%;background:linear-gradient(135deg,rgba(255,245,250,.95),rgba(249,175,211,.92) 52%,rgba(214,98,163,.85));box-shadow:inset 1px 1px 2px rgba(255,255,255,.7)}
.fx-gold{width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle,#fff8c8 0 18%,#ffd66b 36%,rgba(246,177,42,.72) 58%,rgba(246,177,42,0) 76%);box-shadow:0 0 9px rgba(255,209,91,.9),0 0 18px rgba(255,184,55,.45);animation-name:fx-fall,fx-twinkle;animation-duration:var(--fall-duration),1.6s;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite}
@keyframes fx-fall{0%{opacity:0;transform:translate3d(var(--start-x),-5vh,0) rotate(0deg)}8%{opacity:var(--opacity)}88%{opacity:var(--opacity)}100%{opacity:0;transform:translate3d(calc(var(--start-x) + var(--drift)),108vh,0) rotate(var(--spin))}}
@keyframes fx-twinkle{0%,100%{filter:brightness(.82) drop-shadow(0 0 3px rgba(255,195,62,.4))}50%{filter:brightness(1.35) drop-shadow(0 0 9px rgba(255,222,126,.95))}}
@media(max-width:660px){.fx-particles{z-index:44}.fx-petal{filter:none}}
@media(prefers-reduced-motion:reduce){.fx-particles{display:none}}


/* Nhận diện Kim Long: logo chính, favicon và hiệu ứng ánh kim */
.brand-dragon{position:relative;overflow:hidden;padding:2px;background:#090611}
.brand-dragon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand-dragon::after,.hero-logo::after{content:"";position:absolute;inset:-42%;background:linear-gradient(115deg,transparent 42%,rgba(255,244,180,.14) 47%,rgba(255,255,255,.78) 50%,rgba(255,220,90,.18) 53%,transparent 58%);transform:translateX(-115%) rotate(8deg);animation:kimlong-shine 5.6s ease-in-out infinite;pointer-events:none}
.hero-logo{position:relative;width:148px;height:148px;margin:0 0 22px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,224,138,.48);background:#090611;box-shadow:0 0 0 5px rgba(244,196,88,.05),0 18px 55px rgba(0,0,0,.38),0 0 34px rgba(244,196,88,.16)}
.hero-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(1.04) contrast(1.03)}
@keyframes kimlong-shine{0%,70%{transform:translateX(-115%) rotate(8deg)}100%{transform:translateX(115%) rotate(8deg)}}
@media(max-width:660px){.hero-logo{width:112px;height:112px;margin-bottom:18px}.brand-dragon{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.brand-dragon::after,.hero-logo::after{animation:none}}


/* Tin tức máy chủ: danh sách bài viết có trang chi tiết riêng */
.news-main,.news-item{display:block;color:inherit;text-decoration:none;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.news-main:hover,.news-item:hover{transform:translateY(-4px);border-color:rgba(244,196,88,.5);box-shadow:0 22px 55px rgba(0,0,0,.25)}
.news-main:focus-visible,.news-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.news-meta{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.news-meta b,.news-item>span{color:var(--gold);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.news-item{min-height:145px;padding:23px;border:1px solid var(--line);background:rgba(20,11,27,.67)}
.news-item h3{margin:12px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:22px;line-height:1.1}
.news-item p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.6}
.news-item time{color:#8d7e91;font-size:10px;letter-spacing:.1em}

/* Trang chi tiết tin tức */
.news-page{min-height:100vh;padding-top:78px;background:radial-gradient(circle at 70% 0,rgba(121,50,119,.16),transparent 35%),#090611}
.news-article{width:min(900px,calc(100% - 40px));margin:0 auto;padding:72px 0 100px}
.news-back{display:inline-flex;margin-bottom:30px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.news-article-head{padding-bottom:30px;border-bottom:1px solid var(--line)}
.news-article-head .eyebrow{margin-bottom:14px}
.news-article-head h1{max-width:820px;font-size:clamp(42px,6vw,72px);line-height:.98}
.news-article-head time{display:block;margin-top:20px;color:#948598;font-size:11px;letter-spacing:.12em}
.news-cover{margin:36px 0;border:1px solid var(--line);background:#120a18;box-shadow:var(--shadow)}
.news-cover img{display:block;width:100%;max-height:560px;object-fit:cover}
.news-content{font-size:16px;line-height:1.9;color:#c7bac8}
.news-content h2{margin:45px 0 15px;color:#fff6eb;font-size:32px}
.news-content p{margin:0 0 22px}
.news-content ul{margin:0 0 24px;padding-left:22px}
.news-content li{margin:8px 0}
.news-note{margin:30px 0;padding:22px 24px;border-left:3px solid var(--gold);background:rgba(244,196,88,.07);color:#eadde8}
.news-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:32px 0}
.news-gallery img{width:100%;height:280px;object-fit:cover;border:1px solid var(--line)}
.news-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
@media(max-width:660px){.news-meta{align-items:flex-start;flex-direction:column}.news-article{width:min(100% - 28px,900px);padding-top:48px}.news-gallery{grid-template-columns:1fr}.news-gallery img{height:220px}.news-content{font-size:15px}}

/* News V2 - dữ liệu lấy từ news/news.json */
.news-footer-link{margin-top:24px;text-align:right}.news-footer-link a{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.news-loading{display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center}.news-load-error{margin:22px 0 0;color:#ffc1c1;text-align:center}.news-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;min-height:0}.news-badge{display:inline-flex;padding:4px 8px;border:1px solid rgba(244,196,88,.3);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.news-badge.pin{color:#ffe59c;background:rgba(244,196,88,.1)}.news-badge.hot{color:#ffd7d7;border-color:rgba(255,91,91,.38);background:rgba(255,65,65,.12)}.news-category{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border:1px solid rgba(244,196,88,.28);color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.news-category.event{color:#c6ffc9;border-color:rgba(99,220,112,.35)}.news-category.maintenance{color:#ffd1a8;border-color:rgba(255,151,65,.4)}.news-category.update{color:#c7dcff;border-color:rgba(100,150,255,.4)}.news-category.guide{color:#e2c9ff;border-color:rgba(180,115,255,.4)}.news-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.all-news-page{width:min(1000px,calc(100% - 40px));margin:0 auto;padding:75px 0 100px}.all-news-head{margin-bottom:40px}.all-news-head h1{margin:12px 0 15px;font-size:clamp(46px,7vw,78px)}.all-news-head>p:last-child{color:var(--muted)}.all-news-list{display:grid;gap:18px}.all-news-card{display:grid;grid-template-columns:280px 1fr;overflow:hidden;border:1px solid var(--line);background:rgba(20,11,27,.72);color:inherit;text-decoration:none;transition:.25s}.all-news-card:hover{transform:translateY(-4px);border-color:rgba(244,196,88,.5);box-shadow:0 22px 55px rgba(0,0,0,.25)}.all-news-card>img{width:100%;height:100%;min-height:225px;object-fit:cover}.all-news-card-body{padding:25px}.all-news-card h2{margin:12px 0;font-size:30px}.all-news-card p{margin:0 0 18px;color:var(--muted);line-height:1.7}.all-news-card small{color:#958599}@media(max-width:720px){.all-news-card{grid-template-columns:1fr}.all-news-card>img{height:210px;min-height:0}.all-news-page{width:min(100% - 28px,1000px);padding-top:50px}.news-footer-link{text-align:left}}


/* ===== Kim Long Background Music Toggle ===== */
.kl-music-toggle{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9998;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(222,177,86,.65);
  border-radius:999px;
  background:rgba(22,14,8,.92);
  color:#d9c29a;
  box-shadow:0 10px 28px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
  cursor:pointer;
  font:700 13px/1 Arial,sans-serif;
  transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.kl-music-toggle:hover{
  transform:translateY(-2px);
  border-color:#e9bd66;
  color:#f5d993;
}
.kl-music-toggle.is-on{
  color:#f5d993;
  border-color:#d7a84a;
  background:rgba(45,29,12,.95);
}
.kl-music-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:15px;
}
.kl-music-toggle.is-on .kl-music-icon{
  animation:klMusicPulse 1.4s ease-in-out infinite;
}
@keyframes klMusicPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(229,181,86,0)}
  50%{transform:scale(1.08);box-shadow:0 0 12px rgba(229,181,86,.42)}
}
@media(max-width:640px){
  .kl-music-toggle{
    right:12px;
    bottom:12px;
    padding:9px 11px;
  }
  .kl-music-text{display:none}
}
@media(prefers-reduced-motion:reduce){
  .kl-music-toggle,
  .kl-music-toggle.is-on .kl-music-icon{
    transition:none;
    animation:none;
  }
}


/* ===== TS Kim Long: prominent Map entry ===== */
.main-nav .nav-map {
  color: #ffd67d;
  font-weight: 800;
  text-shadow: 0 0 18px rgba(235, 174, 69, .32);
}
.main-nav .nav-map:hover {
  color: #fff1ba;
}

.btn-map {
  position: relative;
  overflow: hidden;
  color: #1a0d05 !important;
  background:
    linear-gradient(180deg, #ffe19a 0%, #dca94b 52%, #aa6f22 100%);
  border-color: rgba(255, 225, 154, .92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 222, 142, .25) inset,
    0 10px 32px rgba(194, 124, 25, .34),
    0 0 28px rgba(225, 168, 70, .18);
  font-weight: 900;
  letter-spacing: .02em;
}
.btn-map::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -30%;
  width: 24%;
  height: 190%;
  transform: rotate(22deg);
  background: rgba(255,255,255,.34);
  transition: left .5s ease;
}
.btn-map:hover::after {
  left: 115%;
}

.map-home {
  padding-top: 34px;
  padding-bottom: 28px;
}
.map-home-card {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(225, 174, 82, .46);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 50%, rgba(218, 160, 66, .20), transparent 18rem),
    linear-gradient(135deg, rgba(34, 20, 12, .97), rgba(14, 9, 9, .97));
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 0 60px rgba(217, 157, 61, .045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.map-home-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 211, 125, .78);
  box-shadow:
    0 28px 80px rgba(0,0,0,.36),
    0 0 40px rgba(190, 121, 30, .10);
}
.map-home-icon {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 1px solid rgba(239, 194, 102, .54);
  border-radius: 50%;
  color: #f4cf81;
  background:
    radial-gradient(circle, rgba(233, 178, 76, .18), rgba(10, 7, 6, .78) 70%);
  font: 700 54px/1 Georgia, serif;
  box-shadow: 0 0 38px rgba(211, 146, 45, .12);
}
.map-home-copy .eyebrow {
  margin-bottom: 8px;
}
.map-home-copy h2 {
  margin: 0 0 12px;
  color: #f1cf88;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 4vw, 44px);
  line-height: 1.08;
}
.map-home-copy > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: rgba(238, 223, 202, .76);
  line-height: 1.75;
}
.map-home-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: #ffd67d;
  font-weight: 800;
  letter-spacing: .02em;
}
.map-home-link b {
  transition: transform .2s ease;
}
.map-home-card:hover .map-home-link b {
  transform: translateX(5px);
}

@media (max-width: 720px) {
  .map-home {
    padding-top: 20px;
    padding-bottom: 18px;
  }
  .map-home-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 17px;
  }
  .map-home-icon {
    width: 66px;
    height: 66px;
    font-size: 34px;
  }
  .map-home-copy h2 {
    font-size: 27px;
  }
  .map-home-copy > p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.6;
  }
  .map-home-link {
    margin-top: 13px;
    font-size: 14px;
  }
}

@media (max-width: 470px) {
  .map-home-card {
    grid-template-columns: 1fr;
  }
  .map-home-icon {
    display: none;
  }
}


/* ===== TS Kim Long: Server Time + Tokyo Weather + Daily Visits ===== */
.kl-live-widget {
  position: fixed;
  z-index: 850;
  right: 16px;
  top: 50%;
  width: 178px;
  padding: 12px 13px 11px;
  transform: translateY(-50%);
  border: 1px solid rgba(230, 183, 91, .42);
  border-radius: 12px;
  background: rgba(17, 11, 8, .86);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ead9bd;
  pointer-events: auto;
}
.kl-live-time-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kl-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dcaa49;
  box-shadow: 0 0 10px rgba(220, 170, 73, .7);
}
.kl-live-label {
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 800;
  color: rgba(239, 205, 140, .84);
}
.kl-live-clock {
  display: block;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: #f3cf83;
}
.kl-live-date {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(231, 217, 194, .63);
}
.kl-weather-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(223, 176, 87, .17);
}
.kl-weather-icon {
  width: 30px;
  text-align: center;
  font-size: 24px;
  line-height: 1;
}
.kl-weather-row b {
  display: block;
  color: #f6dfad;
  font-size: 14px;
}
.kl-weather-row small {
  display: block;
  max-width: 104px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 217, 192, .66);
  font-size: 10px;
}
.kl-weather-credit {
  display: block;
  margin-top: 8px;
  font-size: 8px;
  color: rgba(224, 207, 179, .38);
}
.kl-weather-credit:hover {
  color: rgba(244, 214, 154, .78);
}
.today-visits {
  margin-top: 4px !important;
  color: rgba(235, 218, 191, .7) !important;
  font-size: 12px;
}
.today-visits strong {
  color: #f0ca7c;
  font-variant-numeric: tabular-nums;
}

/* Live weather effect. It never captures mouse/touch input. */
.kl-weather-layer {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
}
.kl-weather-layer.is-active { opacity: 1; }

.kl-rain-drop {
  position: absolute;
  top: -12vh;
  width: 1px;
  height: var(--drop-h, 42px);
  background: linear-gradient(to bottom, transparent, rgba(185, 213, 236, .46));
  transform: rotate(9deg);
  animation: klRainFall var(--fall-d, .9s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}
@keyframes klRainFall {
  to { transform: translate3d(-75px, 120vh, 0) rotate(9deg); }
}

.kl-snow-flake {
  position: absolute;
  top: -8vh;
  color: rgba(238, 245, 250, .65);
  font-size: var(--flake-s, 12px);
  animation: klSnowFall var(--snow-d, 7s) linear infinite;
  animation-delay: var(--snow-delay, 0s);
}
@keyframes klSnowFall {
  0% { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  50% { transform: translate3d(35px, 52vh, 0) rotate(180deg); }
  100% { transform: translate3d(-20px, 112vh, 0) rotate(360deg); }
}

@media (max-width: 900px) {
  .kl-live-widget {
    top: auto;
    right: 9px;
    bottom: 72px;
    width: 152px;
    transform: none;
    padding: 9px 10px;
  }
  .kl-live-clock { font-size: 19px; }
  .kl-weather-credit { display: none; }
}

@media (max-width: 480px) {
  .kl-live-widget {
    right: 7px;
    bottom: 66px;
    width: 138px;
    padding: 8px 9px;
    border-radius: 10px;
  }
  .kl-live-clock { font-size: 18px; }
  .kl-live-date { font-size: 9px; }
  .kl-weather-row { margin-top: 7px; padding-top: 7px; }
  .kl-weather-icon { width: 24px; font-size: 20px; }
  .kl-weather-row b { font-size: 12px; }
  .kl-weather-row small { max-width: 85px; font-size: 9px; }
}


/* ===== Facebook button ===== */
.btn-facebook{
  border-color:rgba(91,145,255,.42);
  background:rgba(45,86,170,.38);
  color:#eef5ff;
  backdrop-filter:blur(8px);
}
.btn-facebook:hover{
  border-color:rgba(120,168,255,.72);
  background:rgba(54,101,194,.5);
}


/* ===== TS Kim Long Live Tokyo Weather v2 ===== */
.kl-weather-sun{
  --kl-sun-glow: .34;
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  transition:filter .8s ease, box-shadow .8s ease;
}
.kl-weather-sun::before{
  content:"";
  position:absolute;
  inset:-28%;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,242,166,calc(var(--kl-sun-glow) * .9)) 0 20%,
    rgba(255,195,65,calc(var(--kl-sun-glow) * .55)) 34%,
    rgba(255,162,31,calc(var(--kl-sun-glow) * .2)) 54%,
    transparent 72%);
  filter:blur(7px);
  animation:klSunPulse 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes klSunPulse{
  0%,100%{transform:scale(.96);opacity:.78}
  50%{transform:scale(1.08);opacity:1}
}

.kl-logo-cloud{
  position:absolute;
  z-index:4;
  display:none;
  width:46%;
  height:23%;
  min-width:20px;
  min-height:9px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(250,250,253,.94),rgba(190,198,211,.87));
  box-shadow:
    -9px -5px 0 -2px rgba(241,244,249,.93),
    8px -7px 0 -3px rgba(225,231,240,.93),
    14px 0 0 -6px rgba(196,204,216,.85),
    0 4px 10px rgba(0,0,0,.16);
  opacity:.88;
  pointer-events:none;
}
.kl-logo-cloud-a{left:-22%;top:30%}
.kl-logo-cloud-b{right:-24%;top:53%;transform:scale(.78);opacity:.72}

body.kl-weather-partly .kl-logo-cloud-a,
body.kl-weather-cloudy .kl-logo-cloud-a,
body.kl-weather-cloudy .kl-logo-cloud-b,
body.kl-weather-rain .kl-logo-cloud-a,
body.kl-weather-rain .kl-logo-cloud-b,
body.kl-weather-snow .kl-logo-cloud-a,
body.kl-weather-snow .kl-logo-cloud-b{display:block}

body.kl-weather-partly .kl-logo-cloud-a{
  animation:klLogoCloudAcross 9s ease-in-out infinite alternate;
}
body.kl-weather-cloudy .kl-logo-cloud-a,
body.kl-weather-rain .kl-logo-cloud-a,
body.kl-weather-snow .kl-logo-cloud-a{
  animation:klLogoCloudAcross 6.8s ease-in-out infinite alternate;
}
body.kl-weather-cloudy .kl-logo-cloud-b,
body.kl-weather-rain .kl-logo-cloud-b,
body.kl-weather-snow .kl-logo-cloud-b{
  animation:klLogoCloudAcrossReverse 8.2s ease-in-out infinite alternate;
}
@keyframes klLogoCloudAcross{
  from{transform:translateX(-10%) scale(.95)}
  to{transform:translateX(82%) scale(1.04)}
}
@keyframes klLogoCloudAcrossReverse{
  from{transform:translateX(10%) scale(.76)}
  to{transform:translateX(-76%) scale(.82)}
}
body.kl-weather-clear .kl-weather-sun{--kl-sun-glow:.48}
body.kl-weather-partly .kl-weather-sun{--kl-sun-glow:.32}
body.kl-weather-cloudy .kl-weather-sun{--kl-sun-glow:.15;filter:brightness(.9)}
body.kl-weather-rain .kl-weather-sun{--kl-sun-glow:.10;filter:brightness(.82) saturate(.9)}
body.kl-weather-snow .kl-weather-sun{--kl-sun-glow:.16;filter:brightness(.92) saturate(.82)}

/* Full-page cloud field */
.kl-screen-cloud{
  position:absolute;
  top:var(--cloud-y,12vh);
  left:-34vw;
  width:var(--cloud-w,260px);
  height:calc(var(--cloud-w,260px) * .27);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(252,252,255,.36),rgba(183,193,207,.18));
  box-shadow:
    calc(var(--cloud-w,260px) * -.18) calc(var(--cloud-w,260px) * -.05) 0 calc(var(--cloud-w,260px) * -.06) rgba(242,246,250,.29),
    calc(var(--cloud-w,260px) * .14) calc(var(--cloud-w,260px) * -.08) 0 calc(var(--cloud-w,260px) * -.08) rgba(225,232,240,.27),
    0 12px 35px rgba(0,0,0,.12);
  filter:blur(.2px);
  opacity:var(--cloud-o,.34);
  animation:klCloudTravel var(--cloud-d,34s) linear infinite;
  animation-delay:var(--cloud-delay,0s);
  will-change:transform;
}
.kl-screen-cloud.reverse{
  left:auto;
  right:-34vw;
  animation-name:klCloudTravelReverse;
}
@keyframes klCloudTravel{
  to{transform:translateX(145vw)}
}
@keyframes klCloudTravelReverse{
  to{transform:translateX(-145vw)}
}

/* Soft mist layer for overcast/rain */
.kl-weather-layer.is-cloudy{
  background:linear-gradient(180deg,rgba(190,202,217,.025),rgba(88,100,116,.035));
}

/* Rain splash dots add depth without blocking interaction */
.kl-rain-speck{
  position:absolute;
  top:-5vh;
  width:2px;
  height:7px;
  border-radius:50%;
  background:rgba(205,225,242,.36);
  animation:klRainSpeck var(--speck-d,1.4s) linear infinite;
  animation-delay:var(--speck-delay,0s);
}
@keyframes klRainSpeck{
  to{transform:translate3d(-35px,110vh,0);opacity:.08}
}

@media(max-width:660px){
  .kl-screen-cloud{
    width:var(--cloud-w-mobile,180px);
    height:calc(var(--cloud-w-mobile,180px) * .27);
    opacity:calc(var(--cloud-o,.34) * .86);
  }
  .brand-dragon .kl-logo-cloud{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .kl-weather-sun::before,
  .kl-logo-cloud,
  .kl-screen-cloud{animation:none !important}
}


/* ===== TS Kim Long Weather V4: full asset pack ===== */

/* Remove old diagonal logo sweep. */
.brand-dragon::after,.hero-logo::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* Sun halo only. */
.kl-weather-sun::before{
  inset:-34%;
  filter:blur(11px);
  background:radial-gradient(circle,
    rgba(255,241,153,calc(var(--kl-sun-glow)*.78)) 0 22%,
    rgba(255,193,63,calc(var(--kl-sun-glow)*.44)) 35%,
    rgba(241,145,26,calc(var(--kl-sun-glow)*.16)) 51%,
    transparent 72%);
}

/* Logo cloud assets. */
.kl-logo-cloud{
  width:78%;height:52%;
  min-width:0;min-height:0;
  border-radius:0;
  background:url("assets/weather/cloud-day-1.webp?v=4") center/contain no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.14));
  opacity:.68;
}
.kl-logo-cloud-a{left:-42%;top:17%}
.kl-logo-cloud-b{
  right:-46%;top:44%;
  transform:scale(.68);
  opacity:.48;
  background-image:url("assets/weather/cloud-day-2.webp?v=4");
}
body.kl-weather-rain .kl-logo-cloud,
body.kl-weather-snow .kl-logo-cloud,
body.kl-weather-cloudy .kl-logo-cloud{
  background-image:url("assets/weather/cloud-dark-1.webp?v=4");
}
body.kl-weather-rain .kl-logo-cloud-b,
body.kl-weather-snow .kl-logo-cloud-b,
body.kl-weather-cloudy .kl-logo-cloud-b{
  background-image:url("assets/weather/cloud-dark-2.webp?v=4");
}

/* Screen cloud assets. */
.kl-screen-cloud{
  height:auto;
  aspect-ratio:2.55/1;
  border-radius:0;
  background:url("assets/weather/cloud-day-1.webp?v=4") center/contain no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.10));
}
.kl-screen-cloud.alt{background-image:url("assets/weather/cloud-day-2.webp?v=4")}
.kl-screen-cloud.dark{background-image:url("assets/weather/cloud-dark-1.webp?v=4")}
.kl-screen-cloud.dark.alt{background-image:url("assets/weather/cloud-dark-2.webp?v=4")}

/* Fog overlay */
.kl-fog-band{
  position:absolute;
  left:-20vw;
  width:140vw;
  height:34vh;
  min-height:180px;
  background:url("assets/weather/fog-1.webp?v=4") center/cover repeat-x;
  opacity:var(--fog-o,.28);
  animation:klFogDrift var(--fog-d,42s) linear infinite alternate;
  filter:blur(.6px);
}
.kl-fog-band.alt{
  background-image:url("assets/weather/fog-2.webp?v=4");
  animation-direction:alternate-reverse;
}
@keyframes klFogDrift{
  from{transform:translateX(-3vw)}
  to{transform:translateX(8vw)}
}

/* Lightning flash + bolt */
.kl-lightning-bolt{
  position:absolute;
  width:min(18vw,210px);
  aspect-ratio:240/420;
  top:3vh;
  left:var(--bolt-x,72vw);
  background:url("assets/weather/lightning.webp?v=4") center/contain no-repeat;
  opacity:0;
  filter:drop-shadow(0 0 18px rgba(255,244,181,.92));
  animation:klLightning 8.5s infinite;
  animation-delay:var(--bolt-delay,0s);
}
@keyframes klLightning{
  0%,87%,90%,100%{opacity:0}
  88%{opacity:.96}
  88.7%{opacity:.12}
  89.2%{opacity:.78}
}

.kl-weather-layer.is-storm::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(232,241,255,.22);
  opacity:0;
  animation:klStormFlash 8.5s infinite;
}
@keyframes klStormFlash{
  0%,87%,90%,100%{opacity:0}
  88%{opacity:.18}
  88.6%{opacity:.03}
  89.2%{opacity:.10}
}

/* Optional tiled precipitation textures for depth. */
.kl-precip-texture{
  position:absolute;
  inset:-10%;
  opacity:var(--precip-o,.18);
  background-size:420px 420px;
  animation:klPrecipMove var(--precip-d,1.2s) linear infinite;
}
.kl-precip-texture.rain-light{background-image:url("assets/weather/rain-light.webp?v=4")}
.kl-precip-texture.rain-heavy{background-image:url("assets/weather/rain-heavy.webp?v=4")}
.kl-precip-texture.snow-light{background-image:url("assets/weather/snow-light.webp?v=4");animation-duration:7s}
.kl-precip-texture.snow-heavy{background-image:url("assets/weather/snow-heavy.webp?v=4");animation-duration:5.4s}
@keyframes klPrecipMove{
  to{transform:translate3d(-70px,120px,0)}
}

@media(max-width:660px){
  .kl-screen-cloud{filter:drop-shadow(0 6px 14px rgba(0,0,0,.08))}
  .kl-logo-cloud{opacity:.60}
  .kl-fog-band{height:28vh}
  .kl-lightning-bolt{width:min(24vw,150px)}
}