html{
scroll-behavior:smooth;
}

body{

margin:0;
font-family:Arial;
background:#0a0a0a;
color:white;

}

.navbar{

position:sticky;

top:0;

z-index:1000;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

background:#111;

backdrop-filter:blur(10px);

}

.navbar a{
position:relative;
transition:0.3s;
color:white;
margin:0 10px;
text-decoration:none;

}

.navbar a:hover{
color:#ffae00;
text-shadow:0 0 10px #ffae00;
}

.navbar a::after{
content:"";
position:absolute;
width:0;
height:2px;
background:#ffae00;
left:0;
bottom:-4px;
transition:0.3s;
}

.navbar a:hover::after{
width:100%;
}

.hero{
  height:100vh;
  background: none;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  animation:heroMove 40s infinite ease-in-out;
}

.hero-video video{
  opacity:0.4;
}

.hero-overlay{
background:rgba(0,0,0,0.6);
padding:40px;
border-radius:12px;

max-width:600px;
width:90%;
margin:auto;
}

.hero h1{

font-size:70px;
color:#ffae00;

text-shadow:
0 0 10px #ffae00,
0 0 20px #ffae00,
0 0 40px #ffae00;

}

.hero p{

font-size:22px;

margin-top:10px;

}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin-top:16px;
}

button{

padding:12px 20px;
margin:10px;
border:none;
border-radius:8px;

}

.buy-btn, .chart{
display:flex;
align-items:center;
justify-content:center;

width:190px;
height:48px;
padding:0 22px;

font-size:14px;
line-height:48px;

background:#ffae00;
color:black;
border-radius:10px;
font-weight:bold;
text-decoration:none;

box-shadow:0 0 20px rgba(255,174,0,0.7);
transition:0.3s;
}

.buy-btn:hover, .chart:hover{
transform:scale(1.1);
box-shadow:0 0 35px rgba(255,174,0,1);
}

.hero-buttons a{
white-space:nowrap;
}

section{

padding:100px 10%;

}

.cards{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.card{

background:#1b1b1b;
padding:20px;
border-radius:10px;

}

footer{

text-align:center;
padding:30px;
background:#111;

}

.story{

padding:120px 10%;
background:#0e0e0e;

}

.story-container{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
flex-wrap:wrap;
}

.story-text{

max-width:500px;

}

.story-text h2{

font-size:40px;
color:#ffae00;
margin-bottom:20px;

}

.story-text p{

line-height:1.6;
margin-bottom:15px;
font-size:18px;

}

.story-image img{

width:400px;
border-radius:12px;
box-shadow:0 0 30px rgba(255,174,0,0.4);

}

.tokenomics{

padding:120px 10%;
background:#080808;
text-align:center;

}

.section-title{

font-size:42px;
color:#ffae00;
margin-bottom:60px;

}

.tokenomics-grid{

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

}

.token-card{

background:#151515;

padding:30px;

border-radius:12px;

width:260px;

transition:0.4s;

box-shadow:0 0 20px rgba(255,174,0,0.1);

}

.token-card:hover{

transform:translateY(-15px) scale(1.05);

box-shadow:0 0 40px rgba(255,174,0,0.8);

}

.token-card h3{

color:#ffae00;
margin-bottom:10px;

}

.token-card p{

font-size:16px;
line-height:1.6;

}

.roadmap{

padding:120px 10%;
background:#0e0e0e;
text-align:center;

}

.roadmap-grid{

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

}

.roadmap-card{

background:#151515;

padding:30px;

border-radius:12px;

width:260px;

transition:0.3s;

box-shadow:0 0 20px rgba(255,174,0,0.1);

}

.roadmap-card:hover{

transform:translateY(-10px);

box-shadow:0 0 35px rgba(255,174,0,0.6);

}

.roadmap-card h3{
color:#ffae00;
margin-bottom:10px;
}

.phase-icon{
font-size:28px;
margin-right:8px;
}

.roadmap-card p{

font-size:16px;
line-height:1.6;

}

.buy-section{

padding:120px 10%;
background:#080808;
text-align:center;

}

.buy-grid{

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

}

.buy-card{

background:#151515;

padding:30px;

border-radius:12px;

width:260px;

transition:0.3s;

box-shadow:0 0 20px rgba(255,174,0,0.1);

}

.buy-card:hover{

transform:translateY(-10px);

box-shadow:0 0 35px rgba(255,174,0,0.6);

}

.buy-card h3{

color:#ffae00;
margin-bottom:10px;

}

.buy-card p{

font-size:16px;
line-height:1.6;

}

.social{

padding:120px 10%;
background:#0e0e0e;
text-align:center;

}

.social p{

margin-bottom:40px;
font-size:18px;

}

.social-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.social-btn{
width:180px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;
text-decoration:none;
color:white;
font-weight:bold;
transition:0.3s;

box-shadow:0 0 10px rgba(255,255,255,0.2);
}

.social-btn:hover{

transform:scale(1.1);
box-shadow:0 0 20px rgba(255,174,0,0.8);

}

.twitter{

background:#1da1f2;

}

.telegram{

background:#0088cc;

}

.chart{

background:#ffae00;
color:black;

}

.pump{

background:#ff5a00;

}

.social-btn:hover{

transform:scale(1.1);

}

.chart-section{

padding:120px 10%;
background:#080808;
text-align:center;

}

.chart-box{

margin-top:40px;

background:#151515;

padding:20px;

border-radius:12px;

box-shadow:0 0 30px rgba(255,174,0,0.2);

}

.chart-link{

display:inline-block;

margin-top:20px;

padding:12px 24px;

background:#ffae00;

color:black;

text-decoration:none;

border-radius:8px;

font-weight:bold;

}

@keyframes heroMove{

0%{
background-position:center;
}

50%{
background-position:top;
}

100%{
background-position:center;
}

}

.reveal{

opacity:0;

transform:translateY(60px);

transition:all 1s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.price-box{

margin-top:20px;

color:white;

font-size:18px;

}

.price-box span{

color:#ffae00;

font-weight:bold;

}

.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:bold;
font-size:18px;
color:#ffae00;
cursor:pointer;
}

.logo img{
width:100px;
height:100px;
border-radius:50%;
object-fit:cover;

animation: logoFloat 3s ease-in-out infinite,
           logoGlow 2s ease-in-out infinite;

transition:0.3s;
}

.logo img{
border:2px solid rgba(255,174,0,0.6);
background:#000;
}

.logo span{
font-size:20px;
font-weight:bold;
color:#ffae00;
text-shadow:0 0 10px #ffae00;
}

.connect-wallet{
background:#ffae00;
color:black;
font-weight:bold;
border-radius:10px;
box-shadow:0 0 15px rgba(255,174,0,0.6);
}

.connect-wallet:hover{
transform:scale(1.08);
box-shadow:0 0 30px rgba(255,174,0,1);
}

.navbar{
background:rgba(0,0,0,0.8);
backdrop-filter:blur(12px);
}

@keyframes logoFloat {
0% { transform: translateY(0px); }
50% { transform: translateY(-4px); }
100% { transform: translateY(0px); }
}

@keyframes logoGlow {
0% { box-shadow: 0 0 10px #ffae00; }
50% { box-shadow: 0 0 25px #ffae00; }
100% { box-shadow: 0 0 10px #ffae00; }
}

#copy-btn{
display:inline-block;

padding:6px 14px;
border:none;
border-radius:8px;

background:#ffae00 !important; /* 🔥 dòng quan trọng */
color:black !important;
font-weight:bold;
font-size:13px;

cursor:pointer;
transition:0.3s;

box-shadow:0 0 10px rgba(255,174,0,0.6);
}

#copy-btn:hover{
transform:scale(1.08);
box-shadow:0 0 20px rgba(255,174,0,1);
}

#copy-btn:active{
transform:scale(0.95);
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.25;
}

.hero-overlay {
  position: relative;
  z-index: 2;
}

.hero-video-section {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  padding: 0 10px;
}

.hero-video-section video {
  width: 100%;
  height: 100%;
}

.hero {
  margin-top: -120px;
}

@media (min-width: 768px) {
  .hero-video-section {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .hero-video-section video {
    object-fit: contain;
  }
}

@media (min-width: 769px) {
  .hero-video-section video {
    object-fit: cover;
  }
}

.hero-video-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

.hero-video-section {
  position: relative;
}

@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .logo {
    display: flex;
    align-items: center;
  }

  .logo span {
    display: none;
  }

  nav {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  nav a {
    font-size: 13px;
  }

  .cta-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  .btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  .connect-wallet {
    font-size: 12px;
    padding: 6px 10px;
    margin-top: 8px;
  }

  .nav-right {
    margin-top: 8px;
  }

  .icon-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 174, 0, 0.6);
  }

  .nav-right {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .icon-btn,
  .connect-wallet {
    font-size: 11px;
    padding: 6px 10px;
  }

}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  background: linear-gradient(135deg, #f5a623, #ffb300);
  color: #000;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(255, 179, 0, 0.5);
  transition: 0.3s;
}

.icon-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 25px rgba(255, 179, 0, 0.9);
}

@media (max-width: 768px) {

  .hero-overlay {
    padding: 20px;
  }

  .hero-overlay h1 {
    font-size: 36px;
  }

  .price-box p {
    font-size: 14px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .buy-btn,
  .chart {
    width: 100%;
    text-align: center;
  }

}