:root { --blue-primary: #1e40af; --gold: #facc15; }
    
    /* Header chính */
    .header-nav { background: var(--blue-primary); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
    .nav-list { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
    .nav-item { position: relative; padding: 18px 12px; }
    .nav-link { color: #fff; text-transform: uppercase; font-weight: 600; font-size: 13px; text-decoration: none; transition: 0.3s; }
    .nav-link:hover { color: var(--gold); }

    /* Menu cấp 2 (Dropdown) */
    .nav-child { 
        position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; 
        display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-top: 3px solid var(--gold);
    }
    .nav-item:hover .nav-child { display: block; animation: fadeIn 0.3s; }
    .nav-child a { color: #333; padding: 12px 20px; display: block; text-decoration: none; font-size: 14px; border-bottom: 1px solid #eee; }
    .nav-child a:hover { background: #f8fafc; color: var(--blue-primary); }

    /* Sidebar Mobile */
    #mobile-sidebar {
        position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
        background: #fff; z-index: 9999; transition: 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    #mobile-sidebar.active { right: 0; }
    #mobile-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; z-index: 9998; backdrop-filter: blur(3px);
    }
    #mobile-overlay.active { display: block; }

    /* Popup Liên hệ */
    #overlay-contact { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; z-index: 10000; }
    #popup-contact { 
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: #fff; width: 90%; max-width: 450px; border-radius: 12px; padding: 25px; display: none; z-index: 10001; 
    }
    .form-control { width: 100%; border: 1px solid #ddd; padding: 10px; border-radius: 6px; margin-bottom: 10px; }
    
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* nhút nhấn cuối trang */
.float-button-up {
  position:fixed;
  right:3%;
  bottom:40px; 
   z-index: 10000;
}

.float-button-up a {
  font-size: 18px;
  color: #d6a023;
  background-color:  #626262;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items:center;
  justify-content:center;
}
.float-button-home {
  position:fixed;
  left:3%;
  bottom:40px;
  z-index: 10000;
}

.float-button-home a {
  font-size: 18px;
  color: #d6a023;
  background-color:  #626262;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items:center;
  justify-content:center;
}


/* tin tức */
    /* Tổng quan khối nội dung */
    .block-content { background: #fff; padding: 20px; border-radius: 8px; }
    .block-title .h3 { 
        font-size: 22px; font-weight: bold; color: #333; 
        border-left: 5px solid #007bff; padding-left: 15px; margin-bottom: 20px;
    }

    /* Style cho tin LỚN đầu tiên */
    .first-post { border-bottom: 2px solid #f4f4f4; margin-bottom: 25px; padding-bottom: 20px; }
    
    /* Hình lớn tràn 100% tỷ lệ 16:9 */
    .first-post .img-large-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9; /* Ép tỷ lệ màn ảnh rộng */
        overflow: hidden;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    .first-post .img-large-wrapper img { 
        width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
    }

    .first-post .title-large { font-size: 24px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
    .first-post .title-large a { color: #222; text-decoration: none; }

    /* Style cho các tin NHỎ (Sub-post) */
    .sub-post { 
        display: flex; 
        align-items: flex-start; 
        margin-bottom: 15px; 
        padding-bottom: 15px; 
        border-bottom: 1px dashed #eee; 
    }
    .sub-post:last-child { border-bottom: none; }

    /* Khung ảnh nhỏ: Cố định kích thước và tỷ lệ 4:3 */
    .sub-post .img-thumb-wrapper {
        flex: 0 0 140px; /* Độ rộng cố định */
        width: 140px;
        aspect-ratio: 4 / 3; /* Tỷ lệ khung hình nhỏ đều nhau */
        overflow: hidden;
        border-radius: 5px;
        margin-right: 15px;
    }
    .sub-post .img-thumb-wrapper img {
        width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
    }

    .sub-post-info { flex: 1; }
    .sub-post .title-small { font-size: 16px; font-weight: 600; margin-bottom: 5px; line-height: 1.4; }
    .sub-post .title-small a { color: #333; text-decoration: none; }

    /* Meta & Hover */
    .meta-post { font-size: 12px; color: #888; }
    .meta-post i { color: #007bff; margin-right: 3px; }
    
    .block-post:hover .img-large-wrapper img, 
    .block-post:hover .img-thumb-wrapper img { transform: scale(1.05); }
    .block-post:hover a { color: #007bff !important; }

    /* Mobile: Hình nhỏ tự giãn 100% nếu màn hình quá bé */
    @media (max-width: 576px) {
        .sub-post { flex-direction: column; }
        .sub-post .img-thumb-wrapper { width: 100%; flex: 0 0 auto; margin-bottom: 10px; aspect-ratio: 16 / 9; }
    }
/* hết tn tức */



/* menu trái */

    .left-sidebar .single-widget {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 25px;
        overflow: hidden;
    }

    .left-sidebar .section-title {
        background: #00a6af; /* Màu xanh đồng bộ với các file trước */
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        padding: 12px 15px;
        margin: 0;
        text-transform: uppercase;
    }

    .nav-widget ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-widget ul li {
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-widget ul li:last-child {
        border-bottom: none;
    }

    .nav-widget ul li a {
        display: block;
        padding: 10px 15px;
        color: #444;
        text-decoration: none;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .nav-widget ul li a:hover {
        background: #f8f9fa;
        color: #00a6af;
        padding-left: 20px; /* Hiệu ứng đẩy sang phải khi hover */
    }

    .nav-widget ul li a::before {
        content: "\f105"; /* Icon mũi tên font-awesome */
        font-family: FontAwesome;
        margin-right: 10px;
        color: #ccc;
    }