/* Core layout */
.news{background:#f9f9f9;padding:30px 0}
.news-inside{padding:0}

/* Main card */
.news-list-card{background:#fff;border:none;border-bottom:1px solid #eee;padding:20px 0;margin-bottom:0;transition:all .3s ease;display:flex;align-items:flex-start;gap:12px;position:relative}
.news-list-card:hover img{transform:scale(1.05)}

.news-image{width:320px;max-width:45%;overflow:hidden;border-radius:4px;flex-shrink:0;position:relative}
.news-image img{height:200px;width:100%;object-fit:cover;display:block;border-radius:4px}

.news-content{padding-left:25px;flex:1;display:flex;flex-direction:column;justify-content:center}
.news-title{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;font-size:20px;font-weight:700;color:#333;padding-bottom:8px;line-height:1.3}
.news-desc{font-family:Inter;font-size:14.5px;color:#666;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.news-date-badge{position:absolute;left:8px;top:8px;background:#dc3545;color:#fff;border-radius:2px;padding:6px 8px;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.12);font-size:13px}

/* Sidebar */
.sidebar {
    font-family: 'Roboto', sans-serif;
    color: #424242;
    box-sizing: border-box;
}

.sidebar .bg-white {
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

.sidebar h5 {
    font-family: Inter;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #dc3545;
}


.sidebar ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px; 
    padding: 10px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f1f1;
    width: 100%;
    max-width: none;
    min-height: 50px;
}

.sidebar ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Image container */
.sidebar ul li > a:first-child {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: block;
    margin: 0; 
}

.sidebar ul li img,
.sidebar ul li .bg-light {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Text content container */
.sidebar ul li div {
    flex: 1;
    min-width: 0;
    width: 100%; 
    padding: 0;
    margin: 0;
}

/* Individual text item (form field) */
.sidebar ul li div a {
    font-family: Inter;
    font-size: 13px;
    line-height: 1.25;
    color: #1e5bb8; 
    font-weight: 600;
    text-decoration: none;
    display: block;
    white-space: normal;
    overflow: visible;
    margin: 0 0 4px 0;
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar ul li {
        max-width: 100%;
        gap: 10px;
    }
    
    .sidebar ul li img,
    .sidebar ul li .bg-light {
        width: 50px;
        height: 50px;
    }
    
    .sidebar ul li > a:first-child {
        width: 50px;
        height: 50px;
    }
}

/* Interaction tweaks */
.news-list-card a,.sidebar ul li a{text-decoration:none}
.news-list-card a:focus,.news-list-card a:active,.sidebar ul li a:focus,.sidebar ul li a:active{outline:none}
.news-content .news-title,.sidebar ul li div a{transition:transform .12s ease,color .12s ease}
.news-content .news-title:active,.sidebar ul li div a:active{transform:scale(1.03)}

/* Spacing to match layout */
.news .container{padding-left:30px;padding-right:30px}
.news .row>.col-lg-8{padding-right:30px}
.news .row>.col-lg-4{padding-left:30px}
/* Ensure sidebar column matches post-sidebar typography/spacing */
.news .row>.col-lg-4{
    color: #424242;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 0 15px 30px 30px;
    box-sizing: border-box;
}
.blog-wrapper.page-wrapper{padding:30px 0}
.news .sidebar .bg-white{padding:0 15px 15px}

/* Responsive */
@media(max-width:991px){.news-image{width:100%;max-width:100%}.news-list-card{flex-direction:column}.news-content{padding-left:0;padding-top:15px;justify-content:flex-start}.news .container{padding-left:16px;padding-right:16px}.news .row>.col-lg-8,.news .row>.col-lg-4{padding:0}}

/* Detailed article/header styling */
.url-detail-title{background:#cfe8ff;padding:16px 0;margin-bottom:16px}
.url-detail-title .container p{margin:0;font-size:16px;color:#424242}
.url-detail-title:after{content:"";display:block;height:6px;background:#c7e3b6;margin-top:8px}

.news-detail{background:transparent;padding-top:28px}
.news-detail .container{padding-left:30px;padding-right:30px}

/* Ensure detail page columns match listing spacing */
.news-detail .row>.col-lg-8{padding-right:30px}
.news-detail .row>.col-lg-4{padding-left:30px}
.news-detail-inside{padding:10px 0}

/* Constrain article content to the form width and prevent media overflow */
.news-detail .news-detail-inside {
    max-width: 740px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.news-detail .news-detail-content img,
.news-detail .news-detail-content iframe,
.news-detail .news-detail-content video,
.news-detail .news-detail-content embed {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 0.6rem 0;
}

.news-detail .news-image {
    max-width: 100%;
    width: 100%;
}

.sidebar ul li{align-items:flex-start}
.sidebar ul li a:first-child{width:auto;height:auto;display:block;flex-shrink:0}
.sidebar ul li img,.sidebar ul li .bg-light{width:60px;height:60px;object-fit:cover;border-radius:4px}
.sidebar ul li div a{font-size:13px;line-height:1.25;color:#000000;display:block;white-space:normal;overflow:visible}

.sidebar .sidebar-title{
    color: #1e5bb8;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    display: block;
    text-decoration: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: normal; /* Thay break-word bằng normal */
    word-wrap: break-word; /* Ngắt từ khi cần */
    max-width: 100%; /* Sử dụng toàn bộ chiều rộng khả dụng */
    width: 100%; /* Chiếm toàn bộ width */
}

.news-detail-inside .news-detail-title,.news-detail-title{font-size:28px;color:#070707;font-weight:700;margin:0 0 12px;padding:6px 0}
.entry-title{font-family: Roboto, sans-serif; font-size:24px; color:#0A0A0A; margin:0 0 12px; font-weight:700}

.posted-on{color:#424242; font-family: Roboto, sans-serif; font-size:14px;}
.news-meta{font-size:13px;color:#6b7280;margin-bottom:14px;display:flex;gap:8px;align-items:center}
.news-detail-content{font-size:16px;line-height:1.8;color:#333}

h5.post-title.is-large{
    color:#0A0A0A;
    font-family: Roboto, sans-serif;
    font-size:16.56px;
    font-weight:700;
    line-height:1.25;
    margin:1.656px 0 10px;
}

p.from_the_blog_excerpt{
    color:#424242;
    font-family: Roboto, sans-serif;
    font-size:14.4px;
    line-height:1.25;
    margin:0 0 10px;
}

.box-text.text-left{
    color:#424242;
    font-family: Roboto, sans-serif;
    font-size:14.4px;
    line-height:1.25;
    padding:10.08px 21.6px 20.16px;
    box-sizing:border-box;
}

.box-text.text-left a {
    color: #3D3D3D;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    margin: 0 0 6px;
    display: block;
    text-decoration: none;
}

.box-text.text-left h5.post-title.is-large{ margin-bottom:6px; }

.sidebar .sidebar-title{
    color: #1e5bb8;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    display: block;
    text-decoration: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: normal; /* Thay break-word bằng normal */
    word-wrap: break-word; /* Ngắt từ khi cần */
    max-width: 100%; /* Sử dụng toàn bộ chiều rộng khả dụng */
    width: 100%; /* Chiếm toàn bộ width */
}

@media (max-width: 768px) {
    .sidebar .sidebar-title,
    .sidebar ul li div a {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* Slightly larger titles in listing for visual balance */
.news-title{font-size:22px}

@media(max-width:768px){.news-detail-inside .news-detail-title{font-size:22px}.news-title{font-size:18px}}

.construction-detail .news-detail-title { color: #252424}
.construction-detail .news-meta {border-left: 3px solid #313030;padding-left: 15px;margin-bottom: 25px;}
.construction-detail .meta-author { color: #313030;font-weight: 600;}