:root{
    --primary:#165DBA;
    --primary-dark:#0F4790;
    --dark:#0F243D;
    --text:#222831;
    --text-light:#555;
    --light-bg:#f7f9fc;
    --white:#ffffff;
    --border:#dee2e6;
}

/* Blog Hero Banner */
.blog-hero{
    position:relative;
    min-height:240px;
    display:flex;
    align-items:center;
    color:#ffffff;
}
.blog-hero-bg{
    position:absolute;
    inset:0;
    background:url("../images/banner.jpg") center/cover no-repeat;
    z-index:-1;
}
.blog-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.58);
}
.blog-hero-inner{
    padding:30px 20px;
}
.blog-hero-inner h1{
    font-size:42px;
    margin-bottom:10px;
}
.bread-crumb{
    font-size:13px;
    opacity:0.85;
    margin-bottom:12px;
}
.bread-crumb a{
    color:#fff;
}
.blog-subtitle{
    max-width:480px;
    font-size:14px;
    opacity:0.85;
    line-height:1.6;
}

/* Blog Main Layout */
.blog-main{
    padding:50px 0;
    background:#fff;
}
.blog-layout-row{
    display:grid;
    grid-template-columns:calc(100% - 340px) 310px;
    gap:30px;
}
.blog-top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}
.all-articles-label{
    font-weight:600;
    font-size:15px;
}
.result-count{
    font-size:13px;
    color:var(--text-light);
}

/* Article Card Grid */
.article-card-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-bottom:36px;
}
.blog-card{
    border:1px solid var(--border);
    border-radius:4px;
    overflow:hidden;
}
.blog-card-img-wrap{
    position:relative;
}
.blog-date-badge{
    position:absolute;
    top:12px;
    left:12px;
    background-color:var(--primary);
    color:#fff;
    width:54px;
    height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    z-index:2;
}
.blog-date-badge span{
    font-size:16px;
    line-height:1;
}
.blog-date-badge small{
    font-size:11px;
}
.blog-card-img-wrap img{
    width:100%;
    height:200px;
    object-fit:cover;
}
.blog-card-body{
    padding:18px;
}
.blog-card-body h3{
    font-size:16px;
    line-height:1.4;
    margin-bottom:10px;
}
.blog-card-body h3 a{
    color:var(--text);
    text-decoration:none;
}
.blog-card-body p{
    font-size:13px;
    color:var(--text-light);
    line-height:1.5;
    margin-bottom:14px;
}
.blog-card-meta{
    display:flex;
    gap:16px;
    font-size:12px;
    color:var(--text-light);
}
.blog-card-meta i{
    margin-right:4px;
}

/* Pagination */
.pagination-block{
    display:flex;
    gap:6px;
    align-items:center;
}
.page-btn{
    
     display: flex;
    justify-content: center;
    align-items: center;


    min-width:34px;
    height:34px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:3px;
    cursor:pointer;
}
.page-btn.active{
    background-color:var(--primary);
    color:#fff;
    border-color:var(--primary);
}
.page-dots{
    padding:0 6px;
}

/* Sidebar */
.sidebar-widget{
    background-color:var(--light-bg);
    padding:22px;
    border-radius:4px;
    margin-bottom:24px;
}
.sidebar-widget h4{
    font-size:15px;
    margin-bottom:14px;
}
.search-form-wrap{
    display:flex;
}
.blog-search-input{
    flex-grow:1;
    height:38px;
    border:1px solid var(--border);
    padding:0 12px;
    border-radius:3px 0 0 3px;
}
.search-submit-btn{
    height:38px;
    background-color:var(--primary);
    color:#fff;
    border:none;
    padding:0 14px;
    border-radius:0 3px 3px 0;
    cursor:pointer;
}
.category-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.category-list li a{
    display:flex;
    justify-content:space-between;
    color:var(--text);
    font-size:14px;
}

/* Subscribe Widget */
.subscribe-widget{
    background-color:var(--dark);
    color:#ffffff;
}
.subscribe-widget p{
    font-size:13px;
    opacity:0.85;
    margin-bottom:16px;
    line-height:1.5;
}
.subscribe-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.subscribe-email{
    height:40px;
    padding:0 12px;
    border:none;
    border-radius:3px;
}
.btn-subscribe{
    height:40px;
    background-color:var(--primary);
    color:#fff;
    border:none;
    border-radius:3px;
    font-weight:600;
    cursor:pointer;
}

/* Responsive */
@media(max-width:1100px){
    .blog-layout-row{
        grid-template-columns:1fr;
    }
    .article-card-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:768px){
    .blog-hero-inner h1{
        font-size:30px;
    }
    .article-card-grid{
        grid-template-columns:1fr;
    }
    .blog-top-bar{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}




/* Related Articles */
.related-articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-article-item {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
}

.related-article-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.related-article-link {
    display: flex;
    gap: 12px;
    text-decoration: none;
    align-items: flex-start;
}

.related-article-image {
    width: 75px;
    height: 60px;
    flex: 0 0 75px;
    overflow: hidden;
}

.related-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-article-content {
    flex: 1;
    min-width: 0;
}

.related-article-content h5 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
}

.related-article-link:hover h5 {
    color: #007bff;
}

.related-article-date {
    font-size: 12px;
    color: #999;
}