*{margin:0;padding:0;box-sizing:border-box}

body{
min-height:100vh;
background:#f5f5f5;
font-family:Arial,sans-serif;
color:#333;
}

header{
width:100%;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:1000;
}

nav{
width:100%;
height:80px;
padding:0 35px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo-area{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
}

.logo-icon{
width:45px;
height:45px;
border-radius:50%;
overflow:hidden;
background:#fff;
}

.logo-icon img{
width:100%;
height:100%;
object-fit:cover;
}

.logo-text h2{
font-size:20px;
color:#333;
}

.logo-text p{
font-size:14px;
color:#999;
}

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

.nav-links{
display:flex;
align-items:center;
list-style:none;
gap:28px;
}

.nav-links a{
text-decoration:none;
color:#333;
font-size:18px;
font-weight:600;
}

.nav-links a:hover,
.nav-links a.active{
color:#2563eb;
}

.lang-switch{
display:flex;
align-items:center;
gap:8px;
background:#eff6ff;
padding:8px 10px;
border-radius:999px;
font-size:14px;
font-weight:bold;
white-space:nowrap;
}

.lang-switch a{
text-decoration:none;
color:#64748b;
}

.lang-switch a.active{
color:#2563eb;
}

.menu-btn{
display:none;
width:44px;
height:44px;
border:none;
border-radius:12px;
background:#eff6ff;
cursor:pointer;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
z-index:2200;
}

.menu-btn span{
width:24px;
height:3px;
background:#1e3a8a;
border-radius:999px;
transition:.25s;
}

.menu-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.nav-overlay{
display:none;
position:fixed;
top:70px;
left:0;
right:0;
bottom:0;
background:rgba(15,23,42,.35);
z-index:1500;
}

.nav-overlay.active{display:block}
.no-scroll{overflow:hidden}

footer{
text-align:center;
color:#999;
font-size:14px;
padding:28px;
}

@media(max-width:900px){
nav{
height:70px;
padding:0 16px;
flex-direction:row;
gap:12px;
}

.logo-icon{
width:40px;
height:40px;
}

.logo-text h2{
font-size:18px;
}

.logo-text p{
font-size:12px;
}

.menu-btn{
display:flex;
}

.nav-right{
position:fixed;
top:70px;
right:-100%;
width:min(82vw,330px);
height:calc(100vh - 70px);
background:#fff;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:18px;
padding:22px;
box-shadow:-12px 0 35px rgba(0,0,0,.14);
z-index:2000;
transition:right .28s ease;
overflow-y:auto;
}

.nav-right.active{
right:0;
}

.nav-links{
flex-direction:column;
align-items:stretch;
gap:10px;
}

.nav-links li a{
display:block;
font-size:16px;
padding:14px 12px;
border-radius:12px;
background:#f8fbff;
}

.nav-links li a:hover,
.nav-links li a.active{
background:#eff6ff;
color:#2563eb;
}

.lang-switch{
justify-content:center;
width:100%;
}
}