body {
            background-color: #0a0f1f;
            color: #e0e0e0;
            font-family: 'Roboto', sans-serif;
        }
        .page-header {
            background: linear-gradient(rgba(10, 15, 31, 0.8), rgba(10, 15, 31, 0.8));
            background-size: cover;
            padding: 6rem 0;
            border-bottom: 3px solid #0ea5e9;
        }
        .page-title {
            font-family: 'Orbitron', sans-serif;
            color: #fff;
            text-shadow: 0 0 15px rgba(14, 165, 233, 0.8);
        }
        .search-form .form-control {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid #334155;
            color: #fff;
        }
        .search-form .form-control::placeholder { color: #94a3b8; }
        .search-form .btn { background-color: #0ea5e9; border-color: #0ea5e9; }

        .news-card {
            background-color: #1e293b;
            border: 0;
            border-radius: 0.5rem;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .news-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
        }
        .news-card-img { height: 200px; object-fit: cover; }
        .news-card .card-body { border-top: 3px solid #38bdf8; }
        .news-card .card-title { color: #f0f9ff; font-weight: 500; }
        .news-card .card-text { color: #cbd5e1; }
        .news-card .btn-custom { background-color: transparent; border: 1px solid #38bdf8; color: #38bdf8; }
        .news-card .btn-custom:hover { background-color: #38bdf8; color: #fff; }

        /* --- CSS CHO SIDEBAR CỐ ĐỊNH VÀ DANH SÁCH TIN MỚI --- */

/* Lớp chính để giữ sidebar cố định */
.sidebar-sticky {
    position: -webkit-sticky; /* Dành cho Safari */
    position: sticky;
    top: 20px; /* Khoảng cách từ sidebar tới đỉnh màn hình khi cuộn */
}

/* Định dạng cho danh sách tin trong sidebar */
.widget-popular-posts ul {
    list-style: none;
    padding: 0;
}

.widget-popular-posts li {
    display: flex; /* Dùng flexbox để ảnh và chữ nằm cạnh nhau */
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-bottom: 15px;
}

/* Ảnh thumbnail trong sidebar */
.widget-popular-posts .post-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover; /* Đảm bảo ảnh không bị méo */
    border-radius: 5px;
    margin-right: 15px;
    flex-shrink: 0; /* Ngăn ảnh bị co lại */
}

/* Tiêu đề tin trong sidebar */
.widget-popular-posts .post-title {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    line-height: 1.4;
}

.widget-popular-posts .post-title:hover {
    color: #38bdf8; /* Đổi màu khi hover */
}

/* Lượt xem trong sidebar */
.widget-popular-posts .post-meta {
    display: block;
    font-size: 0.8em;
    color: #94a3b8;
    margin-top: 4px;
}

/* --- CSS CHO SLIDER TIN NỔI BẬT --- */

.featured-carousel .carousel-item {
  height: 650px; /* Chiều cao của slider, bạn có thể thay đổi */
  background-color: #1e293b; /* Màu nền dự phòng */
  background-size: cover;
  background-position: center center;
}

/* Lớp phủ mờ để chữ nổi bật hơn trên ảnh */
.featured-carousel .carousel-caption {
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: linear-gradient(to top, rgba(10, 15, 31, 0.9) 0%, rgba(10, 15, 31, 0) 100%);
}

.featured-carousel .carousel-caption h5 {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.featured-carousel .carousel-caption a {
    color: #fff;
    text-decoration: none;
}
.featured-carousel .carousel-caption a:hover {
    color: #e0e0e0;
}

.featured-carousel .carousel-caption p {
  font-size: 1.1rem;
}

/* ============================================= */
/* === CSS THIẾT KẾ LẠI CHO THANH TÌM KIẾM V2 === */
/* ============================================= */

.search-container-v2 {
    background-color: #1e293b;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #334155;
    margin-bottom: 2.5rem; /* Tăng khoảng cách với nội dung bên dưới */
}

/* Nhóm chứa ô tìm kiếm chính và nút bấm */
.search-container-v2 .main-search-group {
    display: flex;
    width: 100%;
    border: 1px solid #4a5a70;
    border-radius: 0.375rem;
}

.search-container-v2 .main-search-group input[type="text"] {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}
.search-container-v2 .main-search-group input[type="text"]:focus {
    outline: none;
    box-shadow: none;
}
.search-container-v2 .main-search-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Nhóm chứa bộ lọc ngày */
.search-container-v2 .date-filter-group {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
    align-items: center;
    gap: 1rem; /* Khoảng cách giữa các mục */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.search-container-v2 .date-filter-group .filter-item {
    display: flex;
    align-items: center;
}

.search-container-v2 .date-filter-group label {
    margin-right: 0.5rem;
    color: #94a3b8;
    white-space: nowrap;
}

.search-container-v2 .date-filter-group input[type="date"] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #4a5a70;
    border-radius: 0.25rem;
    color: #e0e0e0;
    padding: 0.3rem 0.5rem;
}
.search-container-v2 .date-filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* --- CSS CHO NÚT CUỘN LÊN ĐẦU TRANG --- */

#scrollToTopBtn {
  display: none; /* Ẩn nút theo mặc định */
  position: fixed; /* Giữ nút cố định khi cuộn trang */
  bottom: 20px; /* Cách đáy 20px */
  right: 30px; /* Cách lề phải 30px */
  z-index: 99; /* Đảm bảo nút luôn nổi lên trên cùng */
  
  border: none;
  outline: none;
  background-color: #0ea5e9; /* Dùng màu xanh chủ đạo của bạn */
  color: white;
  cursor: pointer;
  
  /* Tạo hình tròn */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  /* Căn giữa icon */
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: opacity 0.4s, background-color 0.3s;
}

#scrollToTopBtn:hover {
  background-color: #38bdf8; /* Màu sáng hơn khi di chuột vào */
}
.main-content-scrollable {
  height: 85vh; 
  overflow-y: auto;
  padding-right: 15px;
  position: relative; /* <--- THÊM DÒNG NÀY VÀO */
}
/* --- CSS CHO KHU VỰC BÌNH LUẬN --- */
.comment-section {
    background-color: #1e293b;
    padding: 2rem;
    border-radius: 0.5rem;
}

.comment-form textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #334155;
    color: #fff;
}
.comment-form textarea:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #38bdf8;
    box-shadow: none;
    color: #fff;
}

.comment-list {
    margin-top: 2rem;
}

.comment-item {
    display: flex;
    gap: 15px;
    padding: 1.5rem 0;
    border-top: 1px solid #334155;
}
.comment-item:first-child {
    border-top: none;
    padding-top: 0;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover; /* Đảm bảo ảnh không bị méo */
    flex-shrink: 0;
}

.comment-content .comment-author {
    font-weight: bold;
    color: #f0f9ff;
}

.comment-content .comment-date {
    font-size: 0.8em;
    color: #94a3b8;
    margin-left: 10px;
}

.comment-content .comment-text {
    margin-top: 5px;
    color: #cbd5e1;
    line-height: 1.6;
    white-space: pre-wrap; /* Giữ lại các dấu xuống dòng */
}