/* Đẩy nội dung menu mobile cách lề trái 5px */
.mobile-sidebar .sidebar-menu {
    padding-left: 20px !important;
}
/* Áp dụng cho menu chính */
.menu-item {
    font-family: 'Playfair Display', serif; /* Hoặc Montserrat nếu thích không chân */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1a1a1a; /* Màu đen sâu nhìn sẽ sang hơn màu xám */
}
/* Áp dụng cho menu phụ (Nature, Human...) để tạo sự phân cấp */
.sub-menu-item {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #555;
}
/* Mặc định ẩn trên Mobile */
.header-info-pc {
    display: none;
}

/* Cấu hình cho PC */
@media (min-width: 1025px) {
    .header-info-pc {
        display: block !important;
        position: fixed !important; /* Ghim cố định */
        bottom: 30px !important;    /* Cách đáy màn hình 30px */
        left: 50px !important;      /* Cách lề trái 50px (bạn có thể chỉnh lại để thẳng hàng với menu) */
        font-size: 13px !important;
        color: #333333 !important;  /* Màu chữ đen mờ hoặc xám */
        z-index: 9999 !important;   /* Đảm bảo luôn nằm trên các lớp khác */
        white-space: nowrap;        /* Giữ dòng chữ trên một hàng nếu cần */
    }
}
@media only screen and (max-width: 767px) {
    /* Ép tất cả các thẻ, kể cả các thẻ 'font' do trình dịch tạo ra */
    *, 
    html, 
    body, 
    div, 
    span, 
    p, 
    a, 
    font {
        font-family: 'Roboto', sans-serif !important;
    }

    /* Đặc biệt xử lý thẻ <font> mà Google Translate hay chèn vào */
    font {
        font-family: inherit !important;
        vertical-align: inherit !important;
    }
}
.menu-item-portfolio .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
@media (min-width: 1025px) {
    .Slide-pc {
        /* Không đặt height cố định để khung bao quanh tự giãn theo ảnh */
        height: auto !important; 
        max-height: none !important; 
        overflow: visible !important; 
    }

    .Slide-pc img {
        /* Quan trọng nhất: Chiều rộng 100% và chiều cao tự động theo tỷ lệ gốc */
        width: 100% !important;
        height: auto !important; 
        
        /* Thay cover bằng contain nếu bạn muốn thấy toàn bộ ảnh trong một khung cố định */
        /* Hoặc bỏ hẳn object-fit nếu bạn muốn khung slide cao thấp theo ảnh */
        object-fit: contain !important; 

        /* Giới hạn chiều cao tối đa theo màn hình (ví dụ 90% chiều cao màn hình) 
           để tránh hình dọc quá dài phải cuộn chuột nhiều */
        max-height: 90vh !important; 
    }
}
/* Ẩn các dấu chấm tròn trên slide */
.Slide-mobi .bullets-container, 
.Slide-mobi .slick-dots, 
.Slide-mobi .owl-dots,
.Slide-mobi [class*="bullet"], 
.Slide-mobi [class*="dot"] {
    display: none !important;
}
.Slide-mobi {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; /* Đảm bảo slide luôn nằm trên các thành phần khác */
}
@media (min-width: 992px) {
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        background-color: #fff !important;
        z-index: 9999 !important;
        border-right: 1px solid #e5e5e5;
    }

    #wrapper {
        padding-left: 260px !important;
        width: 100% !important;
    }

    .header-inner {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        align-items: flex-start !important;
        padding: 40px 25px !important;
    }

    .header-nav { order: 2 !important; margin-top: 30px !important; width: 100% !important; }
    .header-html-5 { order: 3 !important; margin-top: auto !important; }

    /* Hiển thị menu cấp 2 khi có class is-open (do click) */
    .nav > li.is-open > .nav-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 100% !important;
        top: 0 !important;
    }
}

/* TỪ 991PX TRỞ XUỐNG (BAO GỒM KHOẢNG 847PX - 985PX) */
/* TRẢ VỀ GIAO DIỆN TABLET/MOBILE MẶC ĐỊNH CỦA FLATSOME */
@media (max-width: 991px) {
    #header {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        border-right: none !important;
    }
    #wrapper {
        padding-left: 0 !important;
    }
    /* Đảm bảo nội dung blog không bị padding quá lớn trên tablet */
    .blog-archive #main .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/* Ẩn tiêu đề của trang lưu trữ (Archive Header) */
.archive-page-header {
    display: none !important;
}

/* Nếu dòng chữ đó vẫn còn, hãy thử đoạn này */
.page-title-inner .archive-title {
    display: none !important;
}
/* Ẩn toàn bộ comment */
#comments {
    display: none !important;
}
.entry-meta {
    display: none !important;
}
/* Ẩn toàn bộ vùng chân trang */
#footer, .footer-wrapper {
    display: none !important;
}

/* Đảm bảo nền của vùng nội dung chính luôn là màu trắng */
#main {
    background-color: #fff !important;
    min-height: 100vh; /* Giúp nội dung luôn cao bằng màn hình */
}
.nav-dropdown::before,
.nav-dropdown::after {
    content: none !important;
    display: none !important;
}
.nav > li > a,
.nav-dropdown > li > a {
    font-size: 16px !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}
@media (min-width: 992px) {
    /* 1. XÓA BỎ HOÀN TOÀN DẤU MŨI TÊN (UP ARROW) */
    /* Flatsome tạo dấu này bằng border của pseudo-element :before */
    .nav-dropdown:before,
    .nav-dropdown:after,
    .nav-dropdown-has-arrow .nav-dropdown:before,
    .nav-dropdown-has-arrow .nav-dropdown:after {
        display: none !important;
        content: none !important;
        border: none !important;
        visibility: hidden !important;
    }

    /* 2. ĐỒNG NHẤT FONT SIZE VÀ KIỂU CHỮ MENU CẤP 2 VỚI CẤP 1 */
    .nav-dropdown > li > a {
        /* Ép kích thước chữ nhỏ lại bằng menu chính */
        font-size: 15px !important; 
        
        /* Đồng nhất độ đậm/nhạt (400 là bình thường, 700 là đậm) */
        font-weight: 400 !important; 
        
        /* Giữ kiểu chữ (viết hoa/viết thường) giống menu chính */
        text-transform: none !important; 
        
        /* Loại bỏ các khoảng cách thừa của theme */
        padding: 5px 0 !important;
        line-height: 1.5 !important;
        background-color: transparent !important;
    }

    /* 3. CĂN CHỈNH VỊ TRÍ ĐỂ KHÔNG BỊ LỆCH DÒNG */
    .header-nav .nav-dropdown {
        top: 0 !important; /* Đặt menu con bắt đầu từ ngang hàng với menu cha */
        left: 100% !important;
        margin-top: -5px !important; /* Tinh chỉnh lên xuống một chút cho vừa mắt */
        padding-left: 40px !important; /* Khoảng cách chiều ngang giữa menu 1 và 2 */
    }
}
@media (min-width: 992px) {
    /* 1. XÓA BỎ HOÀN TOÀN SHADOW VÀ NỀN (KỂ CẢ KHI HOVER/CLICK) */
    .header-nav .nav-dropdown,
    .header-nav li.is-open > .nav-dropdown,
    .header-nav .nav-dropdown:hover,
    .nav-dropdown-has-shadow,
    .nav-dropdown-default {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* 2. XÓA BỎ MŨI TÊN (HÌNH TAM GIÁC MÀU XÁM TRONG HÌNH) */
    .nav-dropdown:before, 
    .nav-dropdown:after,
    .nav-dropdown-has-arrow .nav-dropdown:before {
        display: none !important;
        content: none !important;
    }

    /* 3. ĐỒNG NHẤT FONT VÀ KÍCH THƯỚC MENU CẤP 2 VỚI CẤP 1 */
    .nav-dropdown > li > a {
        /* Lấy font và kiểu chữ từ menu chính */
        font-family: inherit !important; 
        font-weight: inherit !important;
        text-transform: inherit !important;
        
        /* Chỉnh kích thước chữ - Bạn có thể thay 14px cho bằng menu chính của bạn */
        font-size: 15px !important; 
        color: #000 !important;
        
        padding: 8px 0 !important; /* Khoảng cách giữa các dòng menu con */
        background-color: transparent !important;
        transition: none !important;
    }

    /* Hiệu ứng khi hover vào chữ của menu con */
    .nav-dropdown > li > a:hover {
        color: #666 !important; /* Hoặc màu bạn muốn khi rê chuột vào */
        background-color: transparent !important;
    }

    /* 4. CĂN CHỈNH VỊ TRÍ CHO ĐẸP */
    .header-nav .nav-dropdown {
        left: 100% !important;
        top: 0 !important;
        padding-top: 0 !important;
        padding-left: 20px !important; /* Tạo khoảng cách chữ menu con so với menu cha */
        margin: 0 !important;
    }

    /* Xóa đường kẻ mờ giữa các mục trong Flatsome */
    .nav-dropdown > li {
        border: none !important;
    }
}
@media (min-width: 992px) {
     /* 1. XÓA BỎ HOÀN TOÀN ĐỔ BÓNG (SHADOW) */
    .nav-dropdown, 
    .nav-dropdown-has-shadow, 
    .header-nav .nav-dropdown,
    .nav-dropdown-default {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        background-color: transparent !important; /* Xóa nền trắng để tiệp vào background */
        border: none !important;
    }

    /* 2. XÓA BỎ MŨI TÊN (ICON > UP) */
    /* Flatsome dùng pseudo-element :before để tạo hình tam giác này */
    .nav-dropdown:before, 
    .nav-dropdown:after,
    .nav-dropdown-has-arrow .nav-dropdown:before,
    .nav-dropdown-has-arrow .nav-dropdown:after {
        display: none !important;
        content: none !important;
        border: none !important;
    }

    /* Xóa thêm icon mũi tên nếu nó là dạng font icon */
    .header-nav li.menu-item-has-children > a i,
    .header-nav li.menu-item-has-children > a:after {
        display: none !important;
        content: none !important;
    }

    /* 3. ĐỊNH DẠNG LẠI CHỮ MENU CON */
    .nav-dropdown > li {
        border: none !important; /* Xóa gạch ngang giữa các mục */
    }

    .nav-dropdown > li > a {
        background-color: transparent !important;
        padding: 5px 0 !important;
        color: #000 !important; /* Bạn có thể chỉnh lại màu chữ tại đây */
    }

    /* Căn chỉnh vị trí menu con cho chuẩn với menu dọc */
    .header-nav .nav-dropdown {
        left: 100% !important;
        top: 0 !important;
        margin-top: -5px !important; /* Chỉnh lên xuống để thẳng hàng với menu cha */
        padding-top: 0 !important;
    }
     /* 1. Xóa khung trắng, đổ bóng và viền của menu con */
    .nav-dropdown {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 2. Xóa các đường gạch ngang giữa các mục con (Nature, Human...) */
    .nav-dropdown > li {
        border: none !important;
    }

    /* 3. Xóa mũi tên nhỏ trỏ lên (màu xám trong hình) */
    .nav-dropdown::before {
        display: none !important;
    }

    /* 4. Đảm bảo khi hover hoặc click vào mục con không hiện nền hay viền */
    .nav-dropdown > li > a {
        background-color: transparent !important;
        border: none !important;
        padding: 5px 0 !important; /* Chỉnh lại khoảng cách dòng cho đẹp */
    }

    /* 5. Xóa khung bao quanh (outline) khi click hoặc focus */
    .header-nav > li > a, 
    .nav-dropdown > li > a {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Nếu có gạch chân mặc định của theme khi hover */
    .nav-dropdown > li > a:hover {
        text-decoration: none !important;
    }
    /* 1. Cố định Header sang bên trái màn hình */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px; /* Độ rộng của menu */
        height: 100vh;
        background-color: #f5f5f5 !important; /* Màu nền xám nhạt như hình */
        border: none !important;
        box-shadow: none !important;
        z-index: 999;
    }

    /* 2. Đẩy nội dung chính sang bên phải để không bị menu đè lên */
    #main {
        margin-left: 100px; 
        padding-top: 0 !important;
    }

    /* 3. Chuyển menu từ nằm ngang thành nằm dọc */
    .header-main .flex-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
        padding: 40px 20px; /* Khoảng cách lề */
    }

    /* 4. Chỉnh chữ menu thành màu đen, bỏ nền, bỏ hiệu ứng */
    .header-nav {
        margin-top: 30px;
    }

    .header-nav > li {
        display: block !important;
        width: 100%;
        text-align: left;
    }

    .header-nav > li > a {
        color: #000 !important; /* Chữ đen */
        text-transform: none !important; /* Không viết hoa toàn bộ nếu muốn */
        font-weight: 400;
        padding: 8px 0 !important;
        background-color: transparent !important; /* Bỏ màu nền */
    }

    /* 5. Ẩn các thành phần không cần thiết như thanh tìm kiếm hay nút số điện thoại */
    .header-nav .search-form, .header-button {
        display: none !important;
    }

    /* 6. Chỉnh Logo */
    .logo {
        max-width: 150px;
        margin-bottom: 20px;
    }
     /* 1. Bỏ dấu gạch ngang ở dưới menu (nếu nó là border hoặc divider) */
    .header-main {
        border-bottom: none !important;
    }
    
    /* Ẩn các phần tử divider (đường kẻ) nếu có trong header */
    #header .divider, 
    #header hr {
        display: none !important;
    }

    /* 2. Bỏ dấu mũi tên (icon > hoặc v) ở các menu có cấp 2 */
    .header-nav li.menu-item-has-children > a i.icon-angle-down,
    .header-nav li.menu-item-has-children > a i.icon-angle-right,
    .header-nav li.menu-item-has-children > a:after {
        display: none !important;
    }

    /* Đảm bảo chữ không bị chừa khoảng trống của icon cũ */
    .header-nav > li > a {
        padding-right: 0 !important;
    }
}

/* Ẩn Header dọc trên Mobile để dùng Menu mặc định của Flatsome */
@media (max-width: 991px) {
    #header { position: relative; width: 100%; height: auto; }
    #main { margin-left: 0; }
}
/* Chỉ áp dụng cho máy tính (màn hình rộng) */
@media (min-width: 992px) {
    
    /* 1. GHIM CỐ ĐỊNH HEADER VÀO MÉP TRÁI MÀN HÌNH */
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 380px !important; /* Độ rộng của menu */
        height: 100vh !important; /* Cao bằng cả màn hình */
        background-color: #fff !important; /* Nền trắng */
        z-index: 99999 !important; /* Luôn nằm trên cùng các phần tử khác */
        border-right: 1px solid #e5e5e5 !important;
        overflow-y: auto !important; /* Cho phép cuộn nếu menu quá dài */
    }

    /* 2. ĐẨY TOÀN BỘ NỘI DUNG TRANG SANG PHẢI (Quan trọng nhất để không bị đè) */
    #wrapper {
        padding-left: 260px !important; /* Phải bằng đúng width của header ở trên */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. VÔ HIỆU HÓA CÁC CLASS STICKY CỦA THEME (Để tránh menu nhảy khi scroll) */
    .stuck, .header-main, .header-wrapper {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        box-shadow: none !important;
    }

    /* 4. SẮP XẾP LOGO VÀ CHỮ THEO CHIỀU DỌC */
    .header-inner {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        height: auto !important;
        padding: 40px 25px !important;
    }

    /* Chỉnh lề cho danh sách Menu */
    .header-nav {
        margin-top: 30px !important;
        width: 100% !important;
    }

    .header-nav > li {
        display: block !important; /* Mỗi mục menu 1 dòng */
        width: 100% !important;
    }

    .header-nav > li > a {
        padding: 12px 0 !important;
        color: #000 !important; /* Chữ đen */
        font-weight: 500 !important;
        background: transparent !important;
    }

    /* Ẩn các thanh nền thừa của Flatsome */
    .header-bg-fill, .header-bg-container {
        display: none !important;
    }
}

/* 1. Đồng nhất khoảng cách lề trái cho tất cả các mục menu (Sửa lỗi "Works" bị lệch) */
.header-nav > li > a {
    padding-left: 0 !important;   /* Ép sát lề trái */
    padding-right: 0 !important;  /* Bỏ khoảng trống bên phải */
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important; /* Luôn canh trái */
    text-align: left !important;
}

/* 1. Xóa bỏ khoảng cách (margin/gap) mặc định giữa các mục li */
    .header-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* Xóa khoảng hở flex */
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-nav > li {
        margin: 0 !important; /* Xóa margin của từng mục */
        padding: 0 !important; /* Xóa padding của từng mục */
        height: auto !important;
        display: block !important;
    }

    /* 2. Căn chỉnh chữ và tạo khoảng cách đều nhau */
    .header-nav > li > a {
        /* BẠN CHỈNH SỐ 20px NÀY ĐỂ TĂNG/GIẢM KHOẢNG CÁCH GIỮA CÁC CHỮ */
        padding-top: 2px !important; 
        padding-bottom: 20px !important;
        
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        
        display: block !important;
        line-height: 1 !important; /* Giúp căn giữa chữ chuẩn hơn */
        height: auto !important;
        min-height: 0 !important;
    }

    /* 3. Đảm bảo mục "Works" (có cấp 2) không chiếm thêm diện tích thừa */
    .header-nav li.menu-item-has-children {
        position: relative;
    }
    
    .header-nav li.menu-item-has-children > a {
        display: flex !important;
        align-items: center;
    }

/* Ẩn hoàn toàn icon mũi tên và khoảng trống của nó */
.header-nav li.menu-item-has-children > a i,
.header-nav li.menu-item-has-children > a:after {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Xóa bỏ các đường kẻ border-top trong Header (Dựa trên class .top-divider trong hình) */
#header .top-divider, 
#header .header-main {
    border-top: none !important;
    border-bottom: none !important;
}

/* Xóa bỏ đường kẻ ngang mảnh xuất hiện ở phía dưới menu */
#header .container::before,
#header .container::after {
    display: none !important;
}

/* Nếu đường kẻ đó là một Widget Divider hoặc HR */
#header hr, #header .is-divider {
    display: none !important;
}

/* TRẢ LẠI GIAO DIỆN CŨ CHO MOBILE (Để không bị lỗi trên điện thoại) */
@media (max-width: 991px) {
    #header { position: relative !important; width: 100% !important; height: auto !important; }
    #wrapper { padding-left: 0 !important; }
}
/*Nổi menu*/
@media (min-width: 992px) {
    /* 1. Quan trọng: Cho phép các thành phần con hiển thị tràn ra ngoài Header */
    #header, .header-main, .header-inner {
        overflow: visible !important;
    }

    /* 2. Đẩy menu cấp 2 (dropdown) sang bên phải của Sidebar */
    .header-nav .nav-dropdown {
        left: 100% !important;      /* Đẩy sang phải hoàn toàn */
        top: 0 !important;           /* Căn lề trên bằng với menu cha */
        position: absolute !important;
        min-width: 250px !important; /* Độ rộng của menu cấp 2 */
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1) !important; /* Tạo bóng đổ cho nổi bật */
        background-color: #fff !important;
        visibility: hidden;
        opacity: 0;
        display: block !important;    /* Giữ block để tránh lỗi script */
        transition: all .2s;         /* Hiệu ứng hiện ra mượt mà */
    }

    /* 3. Hiển thị menu cấp 2 khi hover chuột vào menu cha */
    .header-nav > li:hover > .nav-dropdown {
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: 1px !important; /* Tạo khoảng hở nhỏ với sidebar */
    }

    /* 4. Ẩn các mũi tên hướng lên mặc định của Flatsome (vì giờ nó bay ngang) */
    .nav-dropdown::before {
        display: none !important;
    }

    /* 5. Chỉnh lại menu cấp 3 (nếu có) cũng bay sang phải tiếp */
    .nav-dropdown .nav-dropdown {
        left: 100% !important;
        top: 0 !important;
    }
}
/*menu cấp 2*/
@media (min-width: 992px) {
    /* 1. Vô hiệu hóa hiệu ứng hover mặc định */
    .header-nav > li:hover > .nav-dropdown {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* 2. Hiển thị menu khi click (thông qua class 'is-open' sẽ thêm bằng JS ở Bước 2) */
    .header-nav > li.is-open > .nav-dropdown {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* 3. Xóa bỏ hoàn toàn Border, Shadow (đổ bóng) và Background của menu cấp 2 */
    .nav-dropdown {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important; /* Hoặc để màu nền tùy ý */
        padding: 0 !important;
        left: 100% !important; /* Đẩy sang phải sidebar */
        top: 10px !important;   /* Căn chỉnh cao thấp so với menu cha */
    }

    /* Chỉnh chữ menu cấp 2 nếu cần */
    .nav-dropdown > li > a {
        padding: 8px 20px !important;
        text-transform: none !important;
        font-weight: 400 !important;
    }
    
    /* Xóa mũi tên nhỏ trỏ lên của Flatsome */
    .nav-dropdown::before {
        display: none !important;
    }
}
/* Vô hiệu hóa lệnh .8em để chữ to lại bình thường */
.header-nav .nav > li > a {
    font-size: 1em !important; /* 1em tương đương 100%, hoặc bạn có thể điền 16px */
}

/* Đảm bảo menu cấp 2 cũng nhận cùng kích thước */
.nav-dropdown > li > a {
    font-size: 1em !important; 
}
/*blog lay out*/
/* 1. Ẩn toàn bộ các thành phần thừa của Flatsome */
.blog-archive .post-category, 
.blog-archive .is-divider, 
.blog-archive .entry-summary,
.blog-archive .post-meta,
.blog-archive .archive-page-header {
    display: none !important;
}

/* 2. Căn trái toàn bộ chữ và xóa padding thừa */
.blog-archive .box-text {
    text-align: left !important;
    padding: 10px 0 40px 0 !important; /* 10px cách ảnh, 40px cách bài tiếp theo */
}

/* 3. Chỉnh Tiêu đề (Chữ "Halo") */
.blog-archive .post-title {
    font-size: 14px !important; /* Cỡ chữ nhỏ tối giản */
    font-weight: normal !important; /* Chữ mảnh, không đậm */
    color: #555 !important; /* Màu xám đậm */
    margin: 0 !important;
    line-height: 1.4;
    text-transform: none !important;
}

/* 4. Chỉnh Năm (Chữ "2017") */
.post-year {
    font-size: 13px !important;
    color: #999 !important; /* Màu xám nhạt hơn */
    margin: 2px 0 0 0 !important; /* Cách tiêu đề 2px */
    display: block;
}

/* 5. Loại bỏ hiệu ứng hover làm mờ ảnh nếu muốn ảnh rõ nét */
.blog-archive .box-image:hover img {
    opacity: 1 !important;
    transform: none !important;
}


/* Ẩn thanh điều hướng bài viết trước/sau */
.post-navigation, 
.next-prev-nav {
    display: none !important;
}
.post-date.badge {
    display: none !important;
}

/**/
/* Áp dụng cho màn hình máy tính */
@media (min-width: 992px) {

    /* 1. PHÁ BỎ KHUNG HẸP 1056px - LÀM BLOG TRÀN RỘNG SANG PHẢI */
    #main, .blog-archive, .archive .container, .blog-single .container {
        max-width: 100% !important;
        width: 100% !important;
    }


    /* Ép các hàng (row) bên trong giãn hết cỡ */
    .blog-archive .row, .blog-single .row {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. ĐƯA CHỮ (WORKS, TIÊU ĐỀ) XUỐNG DƯỚI ẢNH VÀ CĂN TRÁI */
    /* Buộc box chứa bài viết xếp theo chiều dọc: Ảnh trên - Chữ dưới */
    .post-item .box {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Căn toàn bộ nội dung con về bên trái */
    }

    /* Đảm bảo ảnh chiếm hết chiều ngang */
    .post-item .box-image {
        width: 100% !important;
        padding: 0 !important;
    }

    .post-item .box-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* Vùng chứa chữ: Bỏ padding mặc định và căn trái */
    .post-item .box-text {
        padding: 15px 0 60px 0 !important; /* 15px dưới ảnh, 60px dưới mỗi bài viết */
        text-align: left !important;
        width: 100% !important;
    }

    .post-item .box-text-inner {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. ĐỊNH DẠNG CHỮ "WORKS" VÀ "TIÊU ĐỀ" */
    /* Chữ WORKS (Category) */
    .post-item .post-category {
        display: block !important;
        text-align: left !important;
        font-size: 11px !important;
        margin-bottom: 5px !important;
        opacity: 0.8;
    }

    /* Chữ Lying under a tree (Title) */
    .post-item .post-title {
        text-align: left !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Năm xuất bản (Nếu có) */
    .post-year {
        text-align: left !important;
        display: block !important;
        margin-top: 5px !important;
    }

    /* 4. XÓA CÁC CHI TIẾT THỪA CỦA THEME */
    .is-divider, .archive-page-header, .post-meta {
        display: none !important;
    }
}