/* Main content area */
       .t-slidebar-main-content {
           flex: 1;
           padding: 20px;
           transition: var(--transition);
       }

       /* Sidebar Styles */
       .t-slidebar-container {
           width: 400px;
           height: 100%;
           max-height: 100%;
           position: relative;
           right: 0!important;
           background-color: var(--t-light-color);
           box-shadow: var(--box-shadow);
           transition: var(--transition);
            overflow-y: auto;
           display: flex;
           flex-direction: column;
           z-index: auto;
           margin-right: 15px;
           margin-top: 4em;
           margin-bottom: 10px;
       }





       .t-slidebar-content {
           padding: 20px;
           transition: var(--transition);
           width: 100%;
       }



       .t-slidebar-icon-view {
           position: absolute;
           top: 70px;
           left: 0;
           right: 0;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 25px;
           opacity: 0;
           pointer-events: none;
           transition: var(--transition);
       }



       .t-slidebar-icon {
           width: 40px;
           height: 40px;
           display: flex;
           justify-content: center;
           align-items: center;
           color: var(--t-secondary-color);
           font-size: 1.5rem;
           cursor: pointer;
           transition: var(--transition);
       }

       .t-slidebar-icon:hover {
           color: var(--t-primary-color);
       }

       /* Search box styles */
       .t-slidebar-search {
           margin-bottom: 30px;
       }

       .t-slidebar-search-form {
           position: relative;
       }

       .t-slidebar-search-input {
           width: 100%;
           padding: 12px 45px 12px 15px;
           border: 1px solid var(--t-grey-dark);
           border-radius: var(--border-radius);
           background-color: var(--t-grey-color);
           font-size: 1rem;
           color: var(--t-text-color);
           transition: var(--transition);
       }

       .t-slidebar-search-input:focus {
           outline: none;
           border-color: var(--t-primary-color);
           box-shadow: 0 0 0 2px rgba(224, 94, 26, 0.2);
       }

       .t-slidebar-search-button {
           position: absolute;
           right: 0;
           top: 0;
           height: 100%;
           width: 45px;
           border: none;
           background: none;
           color: var(--t-primary-color);
           cursor: pointer;
           font-size: 1.2rem;
           display: flex;
           justify-content: center;
           align-items: center;
           transition: var(--transition);
       }

       .t-slidebar-search-button:hover {
           color: var(--t-primary-dark);
       }

       /* Section styles */
       .t-slidebar-section {
           margin-bottom: 30px;
           border-bottom: 1px solid var(--t-grey-dark);
           padding-bottom: 20px;
       }

       .t-slidebar-section:last-child {
           border-bottom: none;
           margin-bottom: 0;
       }

       .t-slidebar-title {
           font-size: 1.2rem;
           font-weight: 600;
           color: var(--t-secondary-color);
           margin-bottom: 15px;
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .t-slidebar-title i {
           color: var(--t-primary-color);
       }

       /* Categories styles */
       .t-slidebar-categories {
           list-style: none;
       }

       .t-slidebar-category-item {
           margin-bottom: 10px;
       }

       .t-slidebar-category-link {
           display: flex;
           align-items: center;
           gap: 10px;
           color: var(--t-text-color);
           text-decoration: none;
           padding: 8px 10px;
           border-radius: var(--border-radius);
           transition: var(--transition);
       }

       .t-slidebar-category-link:hover {
           background-color: var(--t-grey-color);
           color: var(--t-primary-color);
       }

       .t-slidebar-category-link i {
           color: var(--t-primary-color);
           font-size: 0.9rem;
       }

       /* Slider styles */
       .t-slidebar-slider {
           position: relative;
           border-radius: var(--border-radius);
           background-color: var(--t-grey-color);
           overflow: hidden;
       }

       .t-slidebar-slider-container {
           display: flex;
           transition: transform 0.5s ease;
       }

       .t-slidebar-slider-item {
           min-width: 100%;
           padding: 15px;
           box-sizing: border-box;
       }

       .t-slidebar-product-img {
           width: 100%;
           height: 120px;
           object-fit: cover;
           border-radius: var(--border-radius);
           margin-bottom: 10px;
           background-color: var(--t-light-color);
       }

       .t-slidebar-product-title {
           font-size: 1rem;
           font-weight: 600;
           margin-bottom: 8px;
           color: var(--t-secondary-color);
       }

       .t-slidebar-product-price {
           font-size: 1.1rem;
           font-weight: 700;
           color: var(--t-primary-color);
           margin-bottom: 10px;
       }

       .t-slidebar-product-desc {
           font-size: 0.9rem;
           color: var(--t-text-color);
           margin-bottom: 10px;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
       }

       .t-slidebar-news-date {
           font-size: 0.8rem;
           color: var(--t-primary-color);
           margin-bottom: 5px;
       }

       .t-slidebar-news-title {
           font-size: 1rem;
           font-weight: 600;
           margin-bottom: 8px;
           color: var(--t-secondary-color);
       }

       .t-slidebar-news-desc {
           font-size: 0.9rem;
           color: var(--t-text-color);
           margin-bottom: 10px;
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
           overflow: hidden;
       }

       .t-slidebar-slider-controls {
           display: flex;
           justify-content: space-between;
           position: absolute;
           width: 100%;
           top: 50%;
           transform: translateY(-50%);
           padding: 0 10px;
           z-index: 10;
           pointer-events: none;
       }

       .t-slidebar-slider-arrow {
           width: 30px;
           height: 30px;
           background-color: rgba(255, 255, 255, 0.8);
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           color: var(--t-primary-color);
           box-shadow: var(--box-shadow);
           pointer-events: auto;
           transition: var(--transition);
       }

       .t-slidebar-slider-arrow:hover {
           background-color: var(--t-primary-color);
           color: var(--t-light-color);
       }

       .t-slidebar-read-more {
           display: inline-block;
           color: var(--t-primary-color);
           font-size: 0.9rem;
           text-decoration: none;
           font-weight: 500;
           transition: var(--transition);
       }

       .t-slidebar-read-more:hover {
           color: var(--t-primary-dark);
           text-decoration: underline;
       }

       /* Responsive styles */
       @media (max-width: 991px) {
           .t-slidebar-container {
               width: 280px;
           }
       }

       @media (max-width: 921px) {
           body {
               flex-direction: column;
           }

           .t-slidebar-container {
               position: relative;
               width: 100%;
               height: auto;
               max-height: 100%;
               overflow-y: visible;
               margin-top: 10px;

           }



           .t-slidebar-icon-view {
               flex-direction: row;
               justify-content: center;
               top: 0;
           }
       }

       /* --- Bổ sung CSS để đảm bảo header và admin bar nằm trên sidebar cố định --- */

/* Đảm bảo thanh Admin bar của WordPress luôn nằm trên cùng */
#wpadminbar {
    z-index: 10 !important; /* Giá trị rất cao để ưu tiên */
}

/* Đảm bảo header của theme (hoặc các element quan trọng khác) nằm trên sidebar */
/* Các selector phổ biến của Astra cho Header: */
#site-header,
.ast-primary-header,
.main-header-bar,
.ast-mobile-header-wrap { /* Thêm cả selector cho header mobile nếu có */
    position: relative; /* z-index chỉ hoạt động trên các element có position khác static */
    z-index: 10; /* Cao hơn z-index của sidebar (1000) */
}

/* --- Kết thúc bổ sung CSS --- */

/* Giữ nguyên các CSS khác của sidebar bên dưới */

/* CSS để đẩy nội dung chính sang trái khi sidebar mở */
/* Xác định vùng nội dung chính của Astra. Class phổ biến là .site-content, có thể cần kiểm tra lại */
body.custom-sidebar-open .site-content,
body.custom-sidebar-open #primary { /* Thêm #primary để bao quát các trường hợp khác */
    margin-right: 320px; /* Chiều rộng của sidebar khi mở */
    transition: margin-right 0.3s ease; /* Tạo hiệu ứng chuyển động mượt */
}

/* Đảm bảo transition cũng hoạt động khi đóng sidebar */
 body .site-content,
 body #primary {
      transition: margin-right 0.3s ease;
 }


/* Điều chỉnh cho màn hình nhỏ hơn nếu sidebar chuyển sang bố cục khác (ví dụ: xếp dọc) */
/* Sử dụng breakpoint 767px như trong CSS gốc của bạn */
@media (max-width: 767px) {
     body.custom-sidebar-open .site-content,
     body.custom-sidebar-open #primary {
         margin-right: 0; /* Sidebar xếp dọc ở mobile nên không cần đẩy nội dung */
     }
}
/* --- Bổ sung CSS để đảm bảo header và admin bar nằm trên sidebar cố định --- */

/* Đảm bảo thanh Admin bar của WordPress luôn nằm trên cùng */
#wpadminbar {
    z-index: auto!important;
    /* Giá trị rất cao để ưu tiên */
}

/* Đảm bảo header của theme (hoặc các element quan trọng khác) nằm trên sidebar */
/* Các selector phổ biến của Astra cho Header: */
#site-header,
.ast-primary-header,
.main-header-bar,
.ast-mobile-header-wrap {
    /* Thêm cả selector cho header mobile nếu có */
    position: relative;
    /* z-index chỉ hoạt động trên các element có position khác static */
    z-index: 10;
    /* Cao hơn z-index của sidebar (1000) */
}

/* --- Kết thúc bổ sung CSS --- */

/* Giữ nguyên các CSS khác của sidebar bên dưới */

/* CSS để đẩy nội dung chính sang trái khi sidebar mở */
/* Xác định vùng nội dung chính của Astra. Class phổ biến là .site-content, có thể cần kiểm tra lại */
body.custom-sidebar-open .site-content,
body.custom-sidebar-open #primary {
    /* Thêm #primary để bao quát các trường hợp khác */
    margin-right: 1px;
    /* Chiều rộng của sidebar khi mở */
    transition: margin-right 0.3s ease;
    /* Tạo hiệu ứng chuyển động mượt */
}

/* Đảm bảo transition cũng hoạt động khi đóng sidebar */
body .site-content,
body #primary {
    transition: margin-right 0.3s ease;
}


/* Điều chỉnh cho màn hình nhỏ hơn nếu sidebar chuyển sang bố cục khác (ví dụ: xếp dọc) */
/* Sử dụng breakpoint 767px như trong CSS gốc của bạn */
@media (max-width: 767px) {

    body.custom-sidebar-open .site-content,
    body.custom-sidebar-open #primary {
        margin-right: 0;
        /* Sidebar xếp dọc ở mobile nên không cần đẩy nội dung */
    }
}