/* --- 5. Sidebar Widget Styles --- */
.sidebar-widget{background:#fff;margin-bottom:25px;border:1px solid #eee;border-radius:4px;overflow:hidden}
.widget-title{background:#f0f0f0;padding:10px 15px;font-size:15px;font-weight:700;text-transform:uppercase;color:#333;border-left:4px solid var(--secondary);display:flex;align-items:center;gap:8px}
.widget-title i{color:var(--secondary)}
.widget-content{padding:15px}
/* Widget: Chủ đề HOT (Tags) */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{background:#ffecd6;color:#d85a00;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;transition:all 0.2s}
.tag-cloud a:hover{background:var(--secondary);color:#fff}
/* --- 2. Header bài viết & Meta Info --- */
.post-header{margin-bottom:20px}
.post-title{font-size:24px;font-weight:700;color:#222;margin-bottom:10px;line-height:1.3}
.post-meta{display:flex;align-items:center;gap:15px;font-size:13px;color:#777;border-bottom:1px solid #eee;padding-bottom:15px}
.post-meta span{display:flex;align-items:center;gap:5px}
.post-meta i{color:#999}
/* --- 3. Search Box Sidebar --- */
.sidebar-search form{display:flex;position:relative}
.sidebar-search input{width:100%;border:1px solid #ddd;padding:8px 35px 8px 10px;border-radius:4px;outline:none}
.sidebar-search button{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--secondary);font-size:16px;cursor:pointer}
/* Box sản phẩm chèn giữa bài viết (Marketing trick) */
.in-post-product{border:2px dashed var(--secondary);padding:15px;border-radius:8px;background:#fffbf5;display:flex;gap:15px;align-items:center;margin:20px 0}
.ipp-thumb img{width:80px;height:80px;object-fit:cover}
.ipp-info h4{font-size:16px;margin-bottom:5px}
.ipp-price{color:#d70018;font-weight:bold;font-size:16px}
.ipp-btn{background:var(--secondary);color:#fff;padding:5px 15px;border-radius:4px;font-size:12px;margin-left:auto;white-space:nowrap}
/* Widget: Tin xem nhiều (Numbered List) */
.most-viewed-list li{display:flex;gap:10px;margin-bottom:15px;align-items:flex-start;border-bottom:1px dashed #eee;padding-bottom:10px}
.most-viewed-list li:last-child{border-bottom:none;margin-bottom:0}
.mv-number{background:#eee;color:#777;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;flex-shrink:0}
.most-viewed-list li:nth-child(1) .mv-number{background:#ff0000;color:#fff}
.most-viewed-list li:nth-child(2) .mv-number{background:#ff6a00;color:#fff}
.most-viewed-list li:nth-child(3) .mv-number{background:#ffce00;color:#fff}
.mv-title a{font-size:13px;color:#333;font-weight:500;line-height:1.4;display:block}
.mv-title a:hover{color:var(--secondary)}
/* --- 1. Khối tin tức khuyến mãi/Sales --- */
.news-sales{margin-bottom:10px}
.news-sales .title-news{font-size:14px;line-height:20px;max-height:60px;display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow-y:hidden;text-overflow:ellipsis;-webkit-line-clamp:3}
.news-sales a .img{margin-bottom:20px}
.news-sales .a-title{border-bottom:1px solid #eee;padding-bottom:10px}
.news-sales:nth-child(1) a{-webkit-line-clamp:unset}
/* Widget: Tin Tuyển Dụng */
.recruitment-widget{border-color:#ffcccc}
.recruitment-widget .widget-title{background:#fff;color:#d70018;border-left:none;border-bottom:1px solid #eee}
.recruitment-widget .widget-title i{color:#d70018}
.recruitment-list li{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f0f0f0}
.recruitment-list li:last-child{border:none;padding-bottom:0}
.recruitment-list a:nth-child(1){line-height:20px;max-height:20px;display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow-y:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;transition:0.1s ease-in-out}
.job-title{color:#d70018;font-weight:700;font-size:14px;margin-bottom:4px;display:block}
.job-info{font-size:12px;color:#666;display:flex;justify-content:space-between}
/* Sticky Sidebar (Trượt theo khi cuộn) */
.sticky-wrapper{position:sticky;top:125px}
/* Responsive */
@media(max-width:991px){.post-title{font-size:20px}.sticky-wrapper{position:static}}


/* =========================================================
   STYLE CHO KHỐI BÀI VIẾT LIÊN QUAN (Related Posts)
   ========================================================= */
.related-posts-section { margin-top: 35px; padding-top: 25px; border-top: 1px solid #eee; }
.related-title { font-size: 20px; font-weight: 700; color: var(--primary); /* Màu đỏ chủ đạo */ margin-bottom: 20px; border-left: 5px solid var(--secondary); /* Điểm nhấn màu cam */ padding-left: 10px; }
.related-post-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 cột trên Desktop */ gap: 20px; }
.related-item { background: #fff; border: 1px solid #eee; border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s; }
.related-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.related-img-link img { width: 100%; height: 120px; /* Chiều cao cố định cho ảnh trên desktop */ object-fit: cover; }
.related-post-title { font-size: 14px; font-weight: 600; line-height: 1.4; padding: 10px 10px 5px; }
.related-post-title a { color: #333; display: block; max-height: 40px; /* Giới hạn 2 dòng */ overflow: hidden; text-overflow: ellipsis; }
.related-post-title a:hover { color: var(--secondary); }
.related-meta { font-size: 12px; color: #999; padding: 0 10px 10px; }
.related-meta i { margin-right: 5px; }

/* Responsive cho Tablet/Mobile */
@media (max-width: 991px) { .related-post-grid { grid-template-columns: repeat(2, 1fr); /* 2 cột trên Tablet */ } }
@media (max-width: 600px) { .related-post-grid { grid-template-columns: 1fr; /* 1 cột trên Mobile */ } }

/* =========================================================
   STYLE CHO KHỐI BÀI VIẾT LIÊN QUAN (Related Posts)
   ========================================================= */
.related-posts-section { margin-top: 35px; padding-top: 25px; border-top: 1px solid #eee; }
.related-title { font-size: 20px; font-weight: 700; color: var(--primary); /* Màu đỏ chủ đạo */ margin-bottom: 20px; border-left: 5px solid var(--secondary); /* Điểm nhấn màu cam */ padding-left: 10px; }
.related-post-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 cột trên Desktop */ gap: 20px; }
.related-item { background: #fff; border: 1px solid #eee; border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s; }
.related-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.related-img-link img { width: 100%; height: 120px; /* Chiều cao cố định cho ảnh trên desktop */ object-fit: cover; }
.related-post-title { font-size: 14px; font-weight: 600; line-height: 1.4; padding: 10px 10px 5px; }
.related-post-title a { color: #333; display: block; max-height: 40px; /* Giới hạn 2 dòng */ overflow: hidden; text-overflow: ellipsis; }
.related-post-title a:hover { color: var(--secondary); }
.related-meta { font-size: 12px; color: #999; padding: 0 10px 10px; }
.related-meta i { margin-right: 5px; }

/* Responsive cho Tablet/Mobile */
@media (max-width: 991px) { .related-post-grid { grid-template-columns: repeat(2, 1fr); /* 2 cột trên Tablet */ } }
@media (max-width: 600px) { .related-post-grid { grid-template-columns: 1fr; /* 1 cột trên Mobile */ } }

/* =========================================================
   STYLE CHO DANH MỤC TIN TỨC (SIDEBAR) - ĐÃ CẬP NHẬT
   ========================================================= */

/* Tăng độ nổi bật cho widget title */
.news-categories-widget .widget-title { background: var(--primary); /* Màu nền đỏ chủ đạo */ color: var(--white); border-left: none; /* Bỏ border left */ }
.news-categories-widget .widget-title i { color: var(--white); /* Icon màu trắng */ }

/* Danh sách chính */
.category-list li { padding: 10px 0; /* Tăng padding */ border-bottom: 1px dashed #eee; }
.category-list li:last-child { border-bottom: none; padding-bottom: 0; }
.category-list a { display: flex; justify-content: space-between; /* Giữ lại để đẩy count sang phải */ align-items: center; font-size: 14px; font-weight: 600; /* Tăng font weight */ color: #333; transition: color 0.2s; }
.category-list a:hover { color: var(--secondary); }

/* Khối Icon và Text (phần cần căn trái) */
.category-list a .category-text-group { display: flex; /* Dùng flex để nhóm icon và text */ align-items: center; }

/* Icon */
.category-list a i { margin-right: 8px; color: var(--primary); /* Đổi màu icon sang màu đỏ chủ đạo */ font-size: 14px; width: 15px; text-align: center; }

/* =========================================================
   STYLE CHO TRANG DANH MỤC TIN TỨC (Category Listing)
   ========================================================= */

/* --- 1. Category Header (Tiêu đề danh mục) --- */
.category-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid var(--primary); }
.category-main-title { font-size: 28px; font-weight: 700; color: #222; margin-bottom: 8px; line-height: 1.2; }
.category-description { font-size: 15px; color: #666; line-height: 1.5; }

/* --- 2. Article List (Danh sách bài viết) --- */
.category-article-list { display: flex; flex-direction: column; gap: 30px; }
.article-item { display: flex; gap: 20px; padding-bottom: 30px; border-bottom: 1px dashed #eee; align-items: flex-start; }
.article-item:last-child { border-bottom: none; padding-bottom: 0; }
.article-thumbnail { flex-shrink: 0; width: 280px; height: 180px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.article-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.article-item:hover .article-thumbnail img { transform: scale(1.05); }
.article-info { flex-grow: 1; }
.article-title { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.article-title a { color: #333; display: block; }
.article-title a:hover { color: var(--primary); }
.article-meta { display: flex; gap: 15px; font-size: 13px; color: #777; margin-bottom: 12px; }
.article-meta i { color: var(--secondary); margin-right: 3px; }
.article-excerpt { font-size: 14px; line-height: 1.6; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   RESPONSIVE CHO TRANG DANH MỤC (Category Responsive)
   ========================================================= */
@media (max-width: 768px) {
.category-main-title { font-size: 24px; }
.article-item { flex-direction: column; gap: 15px; padding-bottom: 20px; }
.article-thumbnail { width: 100%; height: 200px; }
.article-title { font-size: 17px; }
.article-meta { font-size: 12px; margin-bottom: 8px; }
.article-excerpt { -webkit-line-clamp: 2; font-size: 13px; }
}