/* Hoài Niệm MU - phong cách mainsite VNG (nền art tối, khung vàng, tiêu đề serif) */
:root{
  --gold:#e8c27a; --gold2:#b8893f; --gold3:#7a5a26;
  --ink:#0a0a0b; --panel:rgba(12,10,14,.72); --line:rgba(232,194,122,.35);
  --text:#e9e3d6; --muted:#a69d8c; --red:#c8402c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{font-family:"Be Vietnam Pro",sans-serif;color:var(--text);background:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
b,.gold{color:var(--gold)}
code,kbd{font-family:Consolas,monospace}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#5b4520;border-radius:10px}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;height:78px;
  background:linear-gradient(180deg,rgba(5,4,6,.95),rgba(5,4,6,.75));
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
#nav::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.navs{list-style:none;display:flex;align-items:center;justify-content:center;height:100%;gap:6px}
.navs a{display:block;padding:8px 16px;font-family:"Playfair Display",serif;font-weight:700;font-size:15px;
  letter-spacing:.5px;color:#d9cfbb;transition:.2s}
.navs a:hover,.navs a.active{color:var(--gold);text-shadow:0 0 12px rgba(232,194,122,.6)}
.logo-nav{margin:0 26px;align-self:flex-start}
.logo-nav img{width:96px;margin-top:4px;filter:drop-shadow(0 6px 14px #000)}
.nav-cta{background:linear-gradient(180deg,#f0c873,#a8761f);color:#1b1206!important;border-radius:3px;
  box-shadow:inset 0 0 0 1px #ffe3a3,0 0 18px rgba(232,194,122,.35);text-shadow:none!important}
.burger{display:none;position:absolute;left:14px;top:16px;font-size:28px;background:none;border:0;color:var(--gold);cursor:pointer}

/* Float right (giống VNG) */
#float-right{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:8px}
#float-right a{position:relative;width:52px;height:52px;display:grid;place-items:center;font-size:20px;font-weight:800;color:var(--gold);
  background:radial-gradient(circle,#2a1f10,#0b0907);border:1px solid var(--gold2);border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.6),0 4px 14px #000;transition:.2s}
#float-right a span{position:absolute;right:62px;white-space:nowrap;font-size:12px;font-weight:600;background:#000c;padding:3px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:.2s}
#float-right a:hover{filter:brightness(1.3)}#float-right a:hover span{opacity:1}

/* FRAMES */
.frame{position:relative;min-height:100vh;padding:120px 24px 90px;display:flex;align-items:center;justify-content:center;
  background:var(--bg) center/cover no-repeat;isolation:isolate}
.frame::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.55) 35%,rgba(10,10,11,.6) 70%,rgba(10,10,11,.95) 100%)}
.frame+.frame::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,80%);height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.content{width:min(1180px,100%);text-align:center}
.reveal{opacity:0;transform:translateY(80px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

.title{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(28px,4vw,50px);letter-spacing:1px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;gap:18px}
.title span{background:linear-gradient(180deg,#fff3d1 10%,#e8c27a 50%,#8d6526 95%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(232,170,80,.35))}
.title::before,.title::after{content:"";width:90px;height:14px;background:
  linear-gradient(90deg,transparent,var(--gold2)) center/100% 1px no-repeat;
  -webkit-mask:linear-gradient(#000,#000);position:relative}
.title::before{transform:scaleX(1)}.title::after{transform:scaleX(-1)}
.lead{max-width:760px;margin:0 auto 34px;color:#cfc6b4;font-size:16px}
.sub{font-family:"Playfair Display",serif;color:var(--gold);font-size:26px;margin:60px 0 6px}
.muted{color:var(--muted);font-size:14px}

/* Panel khung vàng góc */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);padding:26px 24px;text-align:left;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.panel::before,.panel::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold);pointer-events:none}
.panel::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.panel::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.panel h3{font-family:"Playfair Display",serif;color:var(--gold);font-size:20px;margin-bottom:10px}

/* Buttons */
.btn{display:inline-block;padding:11px 26px;font-weight:800;font-size:15px;cursor:pointer;color:#1b1206;border:0;
  background:linear-gradient(180deg,#f7d891,#c9953a 55%,#8d6223);box-shadow:inset 0 0 0 1px #ffe8b0,0 4px 14px rgba(0,0,0,.6);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);transition:.2s;font-family:inherit}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:linear-gradient(180deg,#3b2c16,#1a130a);color:var(--gold)}
.btn-big{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:300px;height:92px;padding:0 40px;
  background:linear-gradient(180deg,#ffe29b,#d29a36 50%,#7f541b);color:#1d1305;
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,22px 100%,0 50%);
  box-shadow:0 0 30px rgba(232,170,80,.5);transition:.2s}
.btn-big b{color:#1d1305;font-family:"Playfair Display",serif;font-size:30px;font-weight:900;letter-spacing:2px;line-height:1.1}
.btn-big small{font-weight:700;font-size:13px}
.btn-big:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn-big.center{margin:10px auto 0}

/* HERO */
.hero{min-height:100vh;padding-top:90px}
.hero::before{background:radial-gradient(ellipse at 50% 40%,rgba(10,10,11,.2),rgba(10,10,11,.75) 70%),linear-gradient(180deg,rgba(10,10,11,.5),transparent 30%,transparent 70%,var(--ink))}
.hero-inner{text-align:center;width:min(1100px,100%)}
.hero-logo{width:min(250px,48vw);filter:drop-shadow(0 10px 30px #000) drop-shadow(0 0 40px rgba(255,170,60,.25));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.kicker{font-family:"Playfair Display",serif;color:var(--gold);letter-spacing:6px;text-transform:uppercase;font-size:14px;margin-top:6px}
.slogan{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1.2;margin:8px 0 26px;text-shadow:0 3px 10px #000}
.schedule{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 22px}
.schedule li{display:flex;align-items:center;gap:12px;padding:8px 20px;background:rgba(0,0,0,.6);border:1px solid var(--gold2);box-shadow:0 4px 18px rgba(0,0,0,.6)}
.schedule span{padding:2px 10px;font:800 12px "Be Vietnam Pro",sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#1d1305;background:var(--gold)}
.schedule li:last-child span{color:#fff;background:var(--red)}
.schedule b{font-family:"Playfair Display",serif;font-size:19px;letter-spacing:.5px}
.app_info{display:inline-flex;align-items:center;gap:26px;padding:22px 36px;
  background:linear-gradient(180deg,rgba(20,14,8,.85),rgba(8,6,4,.85));border:1px solid var(--gold3);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.6),inset 0 0 0 5px var(--gold3),0 10px 40px #000}
.action-btn{display:flex;gap:12px}
.act{width:92px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:13px;
  background:radial-gradient(circle at 50% 35%,#3a2a14,#0f0b06 70%);border:1px solid var(--gold2);border-radius:50%;color:var(--gold);transition:.2s}
.act i{font-style:normal;font-size:26px}
.act span{line-height:1.2;text-align:center}
.act:hover{filter:brightness(1.3);transform:translateY(-2px)}
.stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.stats li{min-width:170px;padding:12px 18px;background:rgba(0,0,0,.55);border:1px solid var(--line);border-top:2px solid var(--gold)}
.stats b{display:block;font-family:"Playfair Display",serif;font-size:18px}
.stats span{font-size:13px;color:var(--muted)}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:22px;animation:float 2s infinite}

/* DOWNLOAD */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.dl-grid.one{grid-template-columns:minmax(0,640px);justify-content:center}
.dl-card{text-align:center;padding:36px 34px}
.dl-ico{width:74px;height:74px;margin:0 auto 14px;display:grid;place-items:center;font-family:"Playfair Display",serif;font-weight:900;font-size:20px;color:#1d1305;
  background:linear-gradient(180deg,#ffe29b,#a8761f);transform:rotate(45deg);border-radius:6px}
.dl-ico{font-size:0}.dl-ico::after{content:"ZIP";font-size:20px;transform:rotate(-45deg)}
.dl-card p{color:#cfc6b4;margin-bottom:12px}
.meta{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);margin-bottom:14px}
.sha{display:block;word-break:break-all;font-size:12.5px;padding:10px 12px;margin-bottom:18px;background:#000;border:1px dashed var(--gold3);color:#cbbd9b}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* GIFT */
.ribbon{display:inline-block;margin-bottom:26px;padding:12px 60px;font-family:"Playfair Display",serif;font-weight:900;font-size:22px;color:#fff;
  background:linear-gradient(90deg,transparent,#8f1f12 15%,#c8402c 50%,#8f1f12 85%,transparent);text-shadow:0 2px 0 #000}
.ribbon b{color:#ffe08a;font-size:30px}
.ribbon small{display:block;font-family:"Be Vietnam Pro";font-size:14px;font-weight:600;color:#ffd9c8}
.code-box{display:inline-flex;align-items:center;gap:14px;margin-bottom:34px;padding:10px 12px 10px 28px;background:#000a;border:1px solid var(--gold)}
.code-box code{font-size:32px;font-weight:800;letter-spacing:6px;color:var(--gold)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}
.steps li{counter-increment:s;padding:24px 20px 20px;background:var(--panel);border:1px solid var(--line);text-align:center}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;
  background:linear-gradient(180deg,#ffe29b,#a8761f);color:#1d1305;font-weight:900;font-family:"Playfair Display",serif;font-size:20px}
.steps b{display:block;margin-bottom:4px}.steps span{color:#cfc6b4;font-size:14px}
.steps code,.big-steps code{color:var(--gold);background:#000;padding:1px 6px}
.note{display:inline-block;padding:12px 20px;background:rgba(200,64,44,.15);border-left:3px solid var(--red);font-size:14px}

/* EVENTS */
.ev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ev.wide{grid-column:1/-1}
.prize{font-family:"Playfair Display",serif;font-size:34px;font-weight:900;color:#ffd77a;margin:-4px 0 6px}
.tops{list-style:none;margin-top:10px}
.tops li{padding:8px 0;border-top:1px dashed rgba(232,194,122,.2);font-size:15px}
.tops i{display:inline-block;min-width:62px;margin-right:10px;padding:1px 8px;font-style:normal;font-weight:800;font-size:12px;text-align:center;color:#1d1305;background:var(--gold)}
.tops li:nth-child(2) i{background:#cfd3d8}.tops li:nth-child(3) i{background:#c98a52}

/* CHARACTERS */
.char-stage{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:560px}
.char-img{width:100%;max-height:640px;object-fit:contain;filter:drop-shadow(0 20px 40px #000);transition:opacity .4s,transform .6s}
.char-img.swap{opacity:0;transform:translateX(-40px)}
.char-info{text-align:left;padding:0 40px}
.char-name{font-family:"Playfair Display",serif;font-size:clamp(34px,4.5vw,64px);font-weight:900;color:var(--gold);text-shadow:0 4px 0 #000,0 0 30px rgba(232,170,80,.4);line-height:1.1}
.line{display:block;width:240px;height:2px;margin:16px 0;background:linear-gradient(90deg,var(--gold),transparent)}
.char-desc{font-size:17px;color:#ddd3c0;max-width:460px}
.char-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.char-tabs button{padding:8px 14px;font:700 13px "Be Vietnam Pro";color:var(--muted);background:#000a;border:1px solid var(--line);cursor:pointer;transition:.2s}
.char-tabs button.on,.char-tabs button:hover{color:#1d1305;background:var(--gold);border-color:var(--gold)}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;font-size:36px;line-height:1;cursor:pointer;color:var(--gold);
  background:radial-gradient(circle,#2a1f10,#0b0907);border:1px solid var(--gold2);border-radius:50%}
.nav-arrow.prev{left:-10px}.nav-arrow.next{right:-10px}
.nav-arrow:hover{filter:brightness(1.4)}

/* STEPS */
.big-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.big-steps li{padding-top:40px;text-align:center}
.big-steps em{position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(45deg);width:52px;height:52px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ffe29b,#a8761f);font-style:normal}
.big-steps em{font-size:0}
.big-steps li:nth-child(1) em::after{content:"1"}.big-steps li:nth-child(2) em::after{content:"2"}
.big-steps li:nth-child(3) em::after{content:"3"}.big-steps li:nth-child(4) em::after{content:"4"}
.big-steps em::after{transform:rotate(-45deg);font:900 22px "Playfair Display",serif;color:#1d1305}
.big-steps b{display:block;font-family:"Playfair Display",serif;font-size:19px;margin-bottom:8px}
.big-steps span{font-size:14px;color:#cfc6b4}

/* PAYMENT */
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:24px}
.pay em{display:block;font:900 46px "Playfair Display",serif;font-style:normal;color:transparent;-webkit-text-stroke:1px var(--gold);line-height:1;margin-bottom:6px}
.pay p,.warn-grid p{font-size:15px;color:#cfc6b4}
.warn-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.warn{border-color:rgba(200,64,44,.6);background:rgba(60,10,6,.6)}
.warn h3{color:#ff8a6e}

/* INFO */
.info-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:start}
.tbl{width:100%;border-collapse:collapse;padding:0;display:table}
.tbl th,.tbl td{padding:14px 20px;border-bottom:1px solid rgba(232,194,122,.15);text-align:left;font-size:15px}
.tbl th{color:var(--muted);font-weight:600;width:40%}
.tbl td{color:var(--gold);font-weight:700}
.keys h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.kv{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:14px}
.kv kbd{display:inline-block;min-width:44px;margin-right:8px;padding:1px 7px;text-align:center;font-weight:700;font-size:12.5px;color:var(--gold);background:#000;border:1px solid var(--gold3);border-bottom-width:3px;border-radius:3px}

/* CẨM NANG */
.manual-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:920px;margin:30px auto 0;text-align:left}
.manual-links a{display:grid;grid-template-columns:48px 1fr 24px;align-items:center;min-height:72px;padding:10px 18px;background:rgba(8,6,5,.78);border:1px solid var(--line);transition:.2s}
.manual-links a:hover,.manual-links a:focus-visible{border-color:var(--gold);background:rgba(47,33,15,.88);transform:translateY(-2px);outline:none}
.manual-links small{font:800 14px "Playfair Display",serif;color:var(--gold2);letter-spacing:1px}
.manual-links span{font-family:"Playfair Display",serif;font-size:17px;font-weight:700;color:#eee2ca}
.manual-links em{font-style:normal;color:var(--gold);font-size:22px;text-align:right}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.faq details{padding:0}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:700;color:var(--gold);list-style:none}
.faq summary::after{content:"+";float:right;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 22px 18px;color:#cfc6b4;font-size:15px}
.faq code{color:var(--gold)}

/* COMMUNITY */
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.comm{display:flex;flex-direction:column;gap:4px;transition:.2s}
.comm b{font-family:"Playfair Display",serif;font-size:20px}
.comm span{color:#cfc6b4;font-size:14px}
.comm em{font-style:normal;color:var(--gold);font-weight:700;margin-top:8px}
.comm:hover{transform:translateY(-3px);border-color:var(--gold)}

footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;padding:40px 24px;background:#050405;border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--muted)}
footer img{width:60px}
footer small{flex-basis:100%;font-size:12px;opacity:.7}

/* MOBILE */
@media (max-width:900px){
  #float-right{display:none}
  .app_info{flex-direction:column;padding:20px}
  .btn-big{min-width:260px}
  .dl-grid,.ev-grid,.steps,.big-steps,.pay-grid,.warn-grid,.info-grid,.faq,.comm-grid,.kv{grid-template-columns:1fr}
  .big-steps{gap:40px}
  .char-stage{grid-template-columns:1fr;min-height:0}
  .char-img{max-height:380px}.char-info{text-align:center;padding:0 10px}.line{margin:12px auto}.char-desc{margin:auto}
  .nav-arrow{top:190px}
  .manual-links{grid-template-columns:1fr}
  .manual-links a{min-height:64px;padding:8px 14px}
  .title::before,.title::after{width:30px}
}

/* fix: logo nav chỉ hiện khi đã cuộn, hero logo vừa màn hình */
.logo-nav{transition:opacity .3s,transform .3s}
body:not(.scrolled) .logo-nav{opacity:0;pointer-events:none;transform:translateY(-20px)}
.logo-nav img{width:70px}
#nav{height:72px}
.navs a{text-transform:uppercase;font-size:14px;letter-spacing:1px}
.hero-logo{width:auto;height:min(38vh,340px);margin-top:10px}
.hero .slogan{margin:4px 0 18px}
.hero::before{background:radial-gradient(ellipse at 50% 35%,rgba(10,10,11,.55),rgba(10,10,11,.15) 35%,rgba(10,10,11,.7) 75%),linear-gradient(180deg,rgba(10,10,11,.6),transparent 30%,transparent 70%,var(--ink))}
#float-right a{font-family:Arial,sans-serif}
@media (max-width:900px){.hero-logo{height:30vh}}
.char-img{-webkit-mask:linear-gradient(180deg,#000 75%,transparent);mask:linear-gradient(180deg,#000 75%,transparent);filter:drop-shadow(0 0 30px rgba(232,170,80,.15))}
.char-info{background:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.6),transparent 70%);padding:30px 40px}
.sha{font-size:13.5px;color:#e6d6ae}
.chars .title{margin-top:20px}

/* Menu chính 9 mục: thu gọn ở màn vừa, chuyển sang ☰ khi không đủ chỗ */
.navs a{white-space:nowrap}
@media (max-width:1440px){
  .navs{gap:2px}
  .navs a{padding:8px 11px;font-size:13px;letter-spacing:.5px}
  .logo-nav{margin:0 12px}
}
@media (max-width:1200px){
  .burger{display:block}
  .navs{position:fixed;top:72px;left:0;right:0;flex-direction:column;height:auto;gap:0;background:#050405f2;padding:10px 0;transform:translateY(-130%);transition:.3s;border-bottom:1px solid var(--line)}
  body.menu-open .navs{transform:none}
  .navs a{padding:10px 16px;font-size:14px;letter-spacing:1px}
  .logo-nav{position:fixed;top:4px;left:50%;margin:0}
  .logo-nav,body:not(.scrolled) .logo-nav{opacity:1;pointer-events:auto;transform:translateX(-50%)}
  .logo-nav img{width:48px;margin:0}
}
@media (max-width:600px){
  .schedule li{flex-direction:column;gap:4px;padding:8px 16px}
  .schedule b{font-size:17px}
}