body{
font-family: Arial, sans-serif;
margin:0;
background:#f5f7f9;
color:#222;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

.header{
background:#fff;
border-bottom:1px solid #e5e7eb;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
}

.logo img{
width:36px;
}

nav a{
margin-right:20px;
text-decoration:none;
color:#555;
font-size:14px;
}

.layout{
display:flex;
gap:40px;
margin-top:30px;
}

.sidebar{
width:250px;
}

.sidebar-top{
background:#ffffff;
padding:20px;
border-radius:10px;
margin-bottom:20px;
text-align:center;
border:1px solid #e5e7eb;
}

.sidebar-top img{
width:60px;
margin-bottom:10px;
}

.sidebar a{
display:block;
padding:10px;
text-decoration:none;
color:#333;
border-radius:6px;
margin-bottom:5px;
}

.sidebar a:hover{
background:#eef2f7;
}

.content{
flex:1;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.card{
background:#fff;
padding:20px;
border-radius:10px;
text-decoration:none;
color:#222;
border:1px solid #e5e7eb;
}

.card:hover{
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.page{
background:#fff;
padding:40px;
border-radius:10px;
margin-top:30px;
}


.hero-doc{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:28px;margin-bottom:24px}
.article-wrap{max-width:980px}
.breadcrumbs{font-size:14px;color:#6b7280;margin-bottom:12px}
.article-wrap h1{font-size:36px;margin:0 0 14px 0}
.article-wrap h2{font-size:24px;margin:34px 0 12px}
.article-wrap p{line-height:1.75;color:#334155}
.note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:18px 0}
.steps{padding-left:18px}
.steps li{margin:0 0 12px 0;line-height:1.7}
.d-image{width:30%;border:1px solid #e5e7eb;border-radius:16px;display:block;margin:18px 0 22px;background:#fff}
.video{width:100%;align-items:center;border:1px solid #e5e7eb;border-radius:16px;display:block;margin:18px 0 22px;background:#fff}
.doc-image{width:100%;border:1px solid #e5e7eb;border-radius:16px;display:block;margin:18px 0 22px;background:#fff}
.grid-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.grid-links a{display:block;text-decoration:none;color:#0f172a;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}
.article-nav{display:flex;justify-content:space-between;gap:12px;margin-top:36px}
.article-nav a{text-decoration:none;color:#334155;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px}
.article-list li{margin-bottom:10px;line-height:1.7}