.article-container {
    background-color: #ffffff; /* Màu nền trắng */
    color: #333333; /* Màu chữ đậm */
    border-radius: 8px; /* Góc bo tròn */
    padding: 30px; /* Khoảng cách từ viền đến nội dung */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng */
    margin: 20px; /* Khoảng cách giữa các khối */
   
    overflow: hidden; /* Ẩn phần nội dung ra khỏi khung */
    position: relative; /* Định vị tương đối */
}
.article-container h1 {
    color: #2c3e50; /* Màu chữ cho tiêu đề */
    border-bottom: 2px solid #e5e5e5; /* Đường viền dưới tiêu đề */
    font-size: 25px; /* Kích thước chữ cho tiêu đề */
}
.article-container img {
    display: block; /* Hiển thị hình ảnh làm block */
    margin: 0 auto; /* Canh giữa hình ảnh */
    max-width: 100%; /* Chiều rộng tối đa của hình ảnh */
    height: auto; /* Chiều cao tự động theo tỉ lệ */
    border-radius: 8px; /* Góc bo tròn cho hình ảnh */
    margin-bottom: 20px; /* Khoảng cách dưới hình ảnh */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Đổ bóng cho hình ảnh */
}
.article-container p {
    line-height: 1.8; /* Độ cao dòng */
    color: #555555; /* Màu chữ */
    margin-bottom: 20px; /* Khoảng cách dưới đoạn văn */
    font-size: 16px; /* Kích thước chữ */
}
.author-name {
    display: flex; /* Hiển thị dạng flexbox */
    justify-content: space-between; /* Canh giữa hai thành phần */
    align-items: center; /* Canh dọc theo trục Y */
    background-color: #f5f5f5; /* Màu nền cho phần tác giả */
    color: #333333; /* Màu chữ */
    padding: 15px 30px; /* Khoảng cách bên trong phần tác giả */
    border-radius: 0 0 8px 8px; /* Góc bo tròn cho phần tác giả */
}
.author-name button {
    padding: 10px 20px; /* Khoảng cách bên trong nút */
    background-color: #2980b9; /* Màu nền của nút */
    color: #ffffff; /* Màu chữ của nút */
    border: none; /* Loại bỏ đường viền */
    border-radius: 4px; /* Góc bo tròn */
    cursor: pointer; /* Con trỏ khi rê chuột vào nút */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển đổi màu nền */
}
.author-name button:hover {
    background-color: #2c3e50; /* Màu nền thay đổi khi rê chuột vào */
}
.article-container a {
    color: #3498db; /* Đặt màu cho link */
    text-decoration: none; /* Loại bỏ gạch chân mặc định */
    transition: color 0.3s ease; /* Hiệu ứng chuyển đổi màu khi hover */
}
.article-container a:hover {
    color: #2980b9; /* Đặt màu cho link khi hover */
}
.view-count {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
.published-at {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
@media (max-width: 360px) {
    .article-container {
        margin: 10px;
        padding: 10px;
        margin-top: 10px;
        position: relative;
    }
    .article-container h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .article-container img {
        margin-bottom: 15px;
    }
    .article-container p {
        font-size: 14px;
        margin-bottom: 15px;
    }
}