/* blog.css */
.blog-page { background:var(--bg); }
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.article-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s,border-color .2s; }
.article-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.09); border-color:var(--blue); }
.article-cover { aspect-ratio:16/9; overflow:hidden; background:var(--blue-light); }
.article-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.article-card:hover .article-cover img { transform:scale(1.04); }
.article-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.article-cover-placeholder i { font-size:36px; opacity:.35; color:var(--navy); }
.article-cover-placeholder.cat-electro { background:#FFF3E0; }
.article-cover-placeholder.cat-network  { background:#E3F0FF; }
.article-cover-placeholder.cat-cctv     { background:#F3E8FF; }
.article-cover-placeholder.cat-it       { background:#E6F9F1; }
.article-cover-placeholder.cat-general  { background:#F0F0F0; }
.article-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.article-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.article-date { font-size:12px; color:var(--text-muted); }
.article-body h3 { font-family:'Exo 2',sans-serif; font-weight:600; font-size:16px; line-height:1.35; color:var(--text-dark); margin-bottom:8px; }
.article-excerpt { font-size:13px; color:var(--text-muted); line-height:1.65; flex:1; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.article-read-more { font-size:13px; color:var(--blue); font-weight:500; display:flex; align-items:center; gap:4px; margin-top:auto; }
.article-read-more i { font-size:14px; }
.article-time { margin-left:auto; font-size:12px; color:var(--text-muted); font-weight:400; }

.pagination { display:flex; gap:8px; justify-content:center; margin-top:40px; }
.page-btn { min-width:38px; height:38px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--white); color:var(--text-dark); font-size:14px; text-decoration:none; display:flex; align-items:center; justify-content:center; transition:border-color .2s,background .2s,color .2s; }
.page-btn:hover { border-color:var(--blue); color:var(--blue); }
.page-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }

.article-page-hero { background:var(--navy); padding:52px 40px 56px; position:relative; }
.article-page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--blue) 35%,var(--amber) 65%,transparent); }
.article-page-hero-inner { max-width:760px; margin:0 auto; position:relative; }
.article-page-hero h1 { font-family:'Exo 2',sans-serif; font-weight:700; font-size:clamp(22px,3.5vw,34px); color:#fff; line-height:1.25; margin-top:12px; }
.article-page-excerpt { font-size:15px; color:#9EC4DC; line-height:1.7; margin-top:14px; max-width:600px; }
.article-page-cover { max-width:760px; margin:32px auto 0; padding:0 40px; }
.article-page-cover img { width:100%; border-radius:var(--radius); display:block; }
.article-content-wrap { max-width:760px; margin:0 auto; padding:40px 40px 60px; }
.article-content { font-size:15px; line-height:1.8; color:#2A3A47; }
.article-content h2 { font-family:'Exo 2',sans-serif; font-size:20px; font-weight:600; color:var(--text-dark); margin:32px 0 12px; }
.article-content h3 { font-family:'Exo 2',sans-serif; font-size:17px; font-weight:600; color:var(--text-dark); margin:24px 0 10px; }
.article-content p  { margin-bottom:16px; }
.article-content ul, .article-content ol { margin:0 0 16px 20px; }
.article-content li { margin-bottom:6px; }
.article-content strong { color:var(--text-dark); }
.article-content a  { color:var(--blue); text-decoration:underline; }
.article-content blockquote { border-left:3px solid var(--blue); padding:12px 20px; margin:20px 0; background:var(--blue-light); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text-muted); font-style:italic; }
.article-content code { background:#F0F4F8; padding:2px 6px; border-radius:4px; font-size:13px; font-family:'Courier New',monospace; }
.article-content pre { background:#1A2733; color:#C8E0F0; padding:16px 20px; border-radius:var(--radius-sm); overflow-x:auto; margin-bottom:16px; }
.article-content pre code { background:none; padding:0; color:inherit; }
.article-footer { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--border); margin-top:40px; }
.related-articles { background:var(--bg); padding:48px 40px; }
#blog-preview { background:var(--white); }
#gallery-preview { background:var(--bg); }