/* styles.css */
.custom-container {
    max-width: 1100px;
    margin: 0 auto;
}

.custom-container {
    margin-top: -25px;
}


body {
    max-width: 1100px;
    /* Chiều rộng tối đa là 1100px */
    margin: 0 auto;
    /* Căn giữa nội dung */
    padding: 0 15px;
    /* Thêm padding cho nội dung */
}

.header {
    background-color: #007bff;
    color: white;
    padding: 20px;
}


/* Footer */
footer {
    background-color: #004085;
    /* Màu xanh dương đậm */
    color: white;
    /* Màu chữ trắng */
    padding: 30px 0;
    /* Tăng chiều cao và padding cho footer */
    text-align: center;
    /* Căn giữa nội dung */
    font-family: 'Roboto', sans-serif;
    /* Phông chữ Roboto */
}

footer p {
    margin: 5px 0;
    /* Khoảng cách giữa các đoạn văn */
    font-weight: normal;
    /* Đảm bảo font chữ bình thường */
}

footer .footer-title {
    font-weight: bold;
    /* Làm đậm cho tiêu đề */
    font-size: 18px;
    /* Kích thước chữ lớn hơn một chút */
}

footer .footer-info {
    font-size: 16px;
    /* Kích thước chữ của thông tin */
}



/* Style cho các card news-card */
.news-card {
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    /* Nền sáng cho các card */
}

/* Tiêu đề của news-card */
.news-card-header {
    background-color: #004085;
    /* Màu nền cho tiêu đề */
    color: white;
    /* Màu chữ trắng */
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    /* Bo góc trên */
}

.news-card-header a { 
    color: white;
}

.news-card-header i {
    margin-right: 10px;
    /* Khoảng cách giữa icon và tiêu đề */
}

/* Style cho các liên kết trong danh sách */
.news-card .card-body p {
    font-size: 16px;
}

/* Style cho ảnh trong news-card */
.news-card img {
    width: 100%;
    /* Đảm bảo ảnh chiếm toàn bộ chiều rộng của card */
    border-radius: 0px;
    /* Bo góc ảnh */
}
/*
.news-card img:hover {
    transform: scale(1.05);
   
    transition: transform 0.3s ease;
}
*/

/* Style cho footer của news-card */
.news-card-footer {
    background-color: #f1f1f1;
    /* Nền nhẹ cho footer */
    padding: 10px;
    font-size: 14px;
    text-align: right;
}



/* Tùy chỉnh cho các khối bên phải */
.sidebar-card {
    margin-bottom: 20px;
}

.sidebar-card .card-header {
    font-weight: bold;
    background-color: #004085;
    /* Màu xanh dương đậm */
    color: white;
}

.sidebar-card .card-body {
    font-size: 16px;
    color: #555;
}

.sidebar-card .card-body a {
    color: #004085;
    text-decoration: none;
}

.sidebar-card .card-body a:hover {
    color: #ffd700;
    /* Màu vàng khi hover */
}

/* Thêm một chút padding cho các khối */
.sidebar-card .card-body {
    padding: 15px;
}

/* Banner quảng cáo */
.banner img {
    width: 100%;
    height: auto;
}

/* Thống kê truy cập */
.statistics p {
    margin: 5px 0;
    font-size: 14px;
}

/* Tùy chỉnh icon trong card-header */
.card-header i {
    margin-right: 10px;
    /* Khoảng cách giữa icon và tiêu đề */
}

/* Khối tin nổi bật */
.featured-article {

    margin-bottom: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* Bo góc của khối */
    background-color: #f9f9f9;
    /* Màu nền nhẹ */
}

/* Tiêu đề chuyên mục như card-header */
.featured-article .category-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #004085;
    /* Màu nền giống card-header */
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    /* Bo góc phía trên */
}

/* Tiêu đề bài viết */
.featured-article .article-title {
    font-size: 16px;
    font-weight: bold;
    color: #004085;
}

.featured-article .article-meta {
    font-size: 14px;
    color: #555;
}

.featured-article .article-content {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.featured-article .article-content img {
    width: 200px;
    height: auto;
    margin-right: 20px;
}

.featured-article .article-content .description {
    font-size: 16px;
    color: #555;
}

/* Style cho danh sách bài viết cùng chuyên mục */





/* Style cho phần slide tin */
.carousel-inner img {
    width: 100%;
    height: 280px;
    /* Chiều cao của ảnh lớn */
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    /* Nền đen mờ cho caption */
    color: white;
    padding: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #004085;
    /* Màu cho các nút điều hướng */
}

@media (max-width: 768px) {
    .carousel-inner img {
        height: auto;
        /* Để ảnh tự co giãn theo kích thước */
    }
}




/* Style cho danh sách tin liên quan */
.related-articles-featured {
    margin-top: 0px;
    padding-top: 10px;
    padding-right: 2px;
}

.related-articles-featured .article-title {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
    color: #004085;
}

.related-articles-featured ul {
    list-style: none;
    padding-left: 0;
}

.related-articles-featured ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.related-articles-featured ul li img {
    margin-right: 10px;
    width: 80px;
    /* Kích thước ảnh bé */
    height: 60px;
    /* Kích thước ảnh bé */
}

.related-articles-featured ul li a {
    color: #004085;
    text-decoration: none;
    font-weight: bold;
}

.related-articles-featured ul li a:hover {
    text-decoration: underline;
}


/*bai viết mới */
.new-articles {
    list-style: none;
    /* Xóa bullet */
    padding: 0;
    margin: 0;
}

.new-articles li {
    display: flex;
    /* Sử dụng flexbox để căn chỉnh ảnh và tiêu đề */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    margin-bottom: 10px;
    /* Khoảng cách giữa các mục */
}

.new-articles li img {
    width: 40px;
    /* Chiều rộng của ảnh nhỏ */
    height: 40px;
    /* Chiều cao của ảnh nhỏ */
    margin-right: 10px;
    /* Khoảng cách giữa ảnh và tiêu đề */
    border-radius: 4px;
    /* Bo góc ảnh */
    object-fit: cover;
    /* Đảm bảo ảnh không bị méo */
}

.new-articles li a {
    color: #004085;
    /* Màu tiêu đề */
    font-weight: bold;
    text-decoration: none;
    /* Xóa gạch chân */
}

.new-articles li a:hover {
    text-decoration: underline;
    /* Hiệu ứng khi hover */
    color: #ffd700;
    /* Đổi màu khi hover */
}


/* Menu chính */
/* Cấu hình menu */
.navbar-custom {
    background-color: #004085;
    /* Nền xanh dương đậm */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Hiệu ứng nổi khối */
}

.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
    /* Màu chữ trắng */
    font-weight: bold;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    /* Hiệu ứng hover */
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .dropdown-toggle:focus {
    background-color: #0056b3;
    /* Màu nền khi hover */
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    /* Hiệu ứng đổ bóng khi hover */
}

/* Menu con */
.dropdown-menu {
    background-color: #004085;
    /* Nền xanh đậm */
    border: none;
    /* Xóa viền mặc định */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
    /* Hiệu ứng nổi khối */
}

.dropdown-menu .dropdown-item {
    color: #ffffff;
    font-weight: bold;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #0056b3;
    /* Nền sáng hơn khi hover */
    color: #ffffff;
}

/* Menu con cấp 2 */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    /* Căn menu con bên phải */
    margin-top: 0;
    /* Xóa khoảng cách */
    margin-left: 0;
    border-radius: 0 4px 4px 0;
    /* Bo góc phía phải */
}

/* Hiển thị menu con khi hover */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
    /* Hiển thị menu con */
}

/* Xử lý trên thiết bị di động */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        float: none;
    }

    .dropdown-submenu .dropdown-menu {
        position: static;
    }
}


/* Menu chính */
.navbar-custom {
    background-color: #004085;
    /* Nền xanh dương đậm */
    border-bottom: 3px solid #003366;
    /* Đường viền phía dưới */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Hiệu ứng nổi khối */
}

.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
    /* Màu chữ trắng */
    font-weight: bold;
    /* Làm đậm chữ */
    padding: 10px 15px;
    /* Khoảng cách */
    margin: 0 5px;
    /* Phân cách giữa các mục */
    border-radius: 4px;
    /* Bo góc */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Hiệu ứng mượt */
}

/* Hiệu ứng sáng khi di chuột */
.navbar-custom .navbar-nav .nav-link:hover {
    background-color: #0056b3;
    /* Màu nền khi hover */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    /* Hiệu ứng đổ bóng khi hover */
    color: #ffffff;
    /* Đảm bảo chữ luôn trắng */
    text-decoration: none;
    /* Xóa gạch chân */
}

/* Toggler Icon */
.navbar-toggler {
    border: none;
    /* Xóa viền */
    background-color: #004085;
    /* Nền của nút */
    color: #ffffff;
    /* Màu chữ */
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=UTF8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 30 30"><path stroke="rgba(255, 255, 255, 1)" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
    /* Biểu tượng nút menu */
}

/* Menu thu gọn hiển thị bên phải */
.navbar-collapse {
    justify-content: flex-end;
    /* Đưa menu về bên phải */
}

/* Hiệu ứng di động */
@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        /* Đưa menu xuống dưới */
        right: 0;
        /* Căn phải */
        width: 250px;
        /* Chiều rộng menu di động */
        background-color: #004085;
        /* Nền menu */
        box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.2);
        /* Đổ bóng */
        padding: 10px;
        /* Khoảng cách xung quanh */
        z-index: 1050;
    }

    .navbar-collapse.show {
        animation: slide-in 0.3s ease;
        /* Hiệu ứng trượt khi mở */
    }

    @keyframes slide-in {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }
}



/*tim kiếm + clock */
.nav-extra {
    display: flex;
    /* Sử dụng flexbox để chia đều hai phần */
    justify-content: space-between;
    /* Căn trái và phải */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    padding: 10px 15px;
    /* Khoảng cách xung quanh */
    background-color: #f1f1f1;
    /* Màu nền nhẹ */
    border-bottom: 1px solid #ddd;
    /* Đường kẻ dưới */
}

.nav-extra .left-section {
    display: flex;
    align-items: center;
    /* Căn giữa nội dung */
    gap: 10px;
    /* Khoảng cách giữa các mục */
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #555;
}

.nav-extra .right-section {
    display: flex;
    align-items: center;
}

.search-input {
    padding: 5px 10px;
    /* Khoảng cách trong */
    border: 1px solid #ccc;
    /* Viền */
    border-radius: 4px;
    /* Bo góc */
    font-size: 14px;
    width: 200px;
    /* Chiều rộng hộp tìm kiếm */
}

.search-button {
    padding: 5px 10px;
    background-color: #004085;
    /* Màu nền */
    color: white;
    /* Màu chữ */
    border: none;
    /* Xóa viền */
    border-radius: 4px;
    /* Bo góc */
    margin-left: 5px;
    /* Khoảng cách giữa nút và hộp */
    cursor: pointer;
    font-size: 14px;
}

.search-button:hover {
    background-color: #003366;
    /* Màu nền khi hover */
}




/*bs*/

/* Khi màn hình nhỏ hơn 600px (ví dụ điện thoại) */
@media (max-width: 600px) {
  .nav-extra {
    flex-direction: column;      /* xếp dọc thay vì ngang */
    align-items: stretch;        /* giãn full chiều rộng */
    gap: 10px;                   /* khoảng cách giữa 2 khối */
  }

  .nav-extra .left-section,
  .nav-extra .right-section {
    justify-content: center;     /* căn giữa nội dung trong mỗi phần */
  }

  .search-input {
    width: 100%;                 /* cho ô tìm kiếm full chiều ngang */
    box-sizing: border-box;      /* để padding không vượt khung */
  }

  .right-section form {
    width: 100%;                 /* form chiếm hết chiều ngang */
    display: flex;
  }

  .search-button {
    flex-shrink: 0;              /* giữ nút không bị co lại */
  }
}


/*document*/
/*
.new-documents {
    list-style: none;
    padding: 0;
}

.new-documents li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.new-documents li i {
    margin-right: 10px; 
    font-size: 20px; 
    color: #d9534f; 
}

.new-documents li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.new-documents li a:hover {
    color: #d9534f; 
}
*/

.new-documents {
    list-style-type: none;
    padding: 0;
}

.new-documents li {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    /* Tạo vạch nét đứt */
}

.new-documents li:last-child {
    border-bottom: none;
    /* Loại bỏ vạch nét đứt cho phần tử cuối cùng */
}

.new-documents i {
    margin-right: 10px;
}

.new-documents li i {
    margin-right: 10px; 
    font-size: 20px; 
    color: #d9534f; 
}

.new-documents li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.new-documents li a:hover {
    color: #d9534f; 
}


/* website list */

.website-list {
    list-style-type: none;
    padding: 0;
}

.website-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd; /* Tạo đường kẻ ngăn cách */
}

.website-list li a {
    text-decoration: none;
    color: #333; /* Màu chữ */
    font-size: 16px;
    display: flex;
    align-items: center;
}

.website-list li a i {
    margin-right: 10px; /* Khoảng cách giữa biểu tượng và văn bản */
    font-size: 18px; /* Kích thước biểu tượng */
    color: #007BFF; /* Màu biểu tượng */
}

.website-list li a:hover {
    color: #0056b3; /* Màu chữ khi hover */
}

.website-list li a:hover i {
    color: #0056b3; /* Màu biểu tượng khi hover */
}

/* bài viết cùng chuyên mục */
.related-articles {
    font-family: Arial, sans-serif;
    margin: 20px 0;
	 border-top: 1px solid #ddd;
	 padding: 20px 20px 0px 20px;
}

.article-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.related-articles ul {
    list-style-type: none;
    padding: 0;
}

.related-articles li {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc; /* Vạch nét đứt */
}

.related-articles li:last-child {
    border-bottom: none; /* Loại bỏ vạch nét đứt cho phần tử cuối cùng */
}

.related-articles i {
    margin-right: 10px;
    color: #007BFF; /* Màu biểu tượng */
}

.related-articles a {
    text-decoration: none;
    color: #333;
}

.related-articles .date {
    font-size: 12px;
    color: #888;
    margin-left: 10px;
}

.related-articles li a:hover {
    color: #0056b3; /* Màu khi hover */
}

.related-articles li a:hover i {
    color: #0056b3; /* Màu biểu tượng khi hover */
}



.card-body {
    font-family: Arial, sans-serif;
    margin-bottom: 5px;
	padding: 10px 10px 0 10px;
}

.news-card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.date {
    font-size: 14px;
    color: #888;
}

.views-author {
    font-size: 12px; /* Giảm cỡ chữ cho lượt xem và tác giả */
    color: #555;
    display: flex;
    align-items: center;
    gap: 20px; /* Khoảng cách giữa các phần */
}

.views-author span {
    display: flex;
    align-items: center;
}

.views-author i {
    margin-right: 5px; /* Khoảng cách giữa icon và văn bản */
}

.news-card-body {
    font-size: 16px;
    line-height: 1.6;
	text-align: justify;
}

.news-card-body strong {
    font-weight: bold;
    color: #333;
	
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.article-content img {
	width: auto !important;  /* Loại bỏ kích thước chiều rộng đã gán */
    height: auto !important; /* Loại bỏ kích thước chiều cao đã gán */
    max-width: 100%; /* Co dãn theo kích thước của container */
    /*height: auto;    /* Giữ tỷ lệ khung hình */
    /*max-width: 550px; /* Giới hạn kích thước tối đa là 550px */
    display: block;  /* Đảm bảo hình ảnh không bị inline */
    margin: 0 auto;  /* Tùy chọn: Căn giữa hình ảnh */
}


.news-card-footer span {
    font-weight: bold;
}


/* van ban */
.doc-card-body {
    font-family: Arial, sans-serif;
    padding: 10px 10px 0 10px;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    padding: 8px;
    font-size: 14px;
    width: 300px;
    margin-right: 10px;
}

.search-bar button {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
}

.document-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.document-table th, .document-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.document-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.document-table a {
    text-decoration: none;
    color: #007BFF;
}

.document-table a:hover {
    text-decoration: underline;
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination button {
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
}

.pagination span {
    margin: 0 10px;
    font-size: 14px;
}


/*doc detail */
.card-body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.document-info {
    margin-bottom: 30px;
}

.document-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.document-icon {
    font-size: 40px;
    margin-right: 20px;
    color: #d9534f; /* Màu đỏ cho icon PDF */
}

.document-details {
    font-size: 16px;
}

.document-details h5 {
    font-size: 20px;
    margin-bottom: 10px;
}

.document-details p {
    font-size: 16px;
    margin: 5px 0;
}

.document-description {
    margin-bottom: 20px;
}

.file-viewer {
    margin-bottom: 30px;
}

.file-preview {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.file-preview embed {
    border: 1px solid #ddd;
}

.related-doc {
    margin-top: 40px;
}

.doc-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.related-doc ul {
    list-style-type: none;
    padding: 0;
}

.related-doc li {
    margin-bottom: 10px;
}

.related-doc i {
    margin-right: 10px;
    color: #007BFF;
}

.related-doc a {
    color: #007BFF;
    text-decoration: none;
}

.related-doc a:hover {
    text-decoration: underline;
}

.related-doc .date {
    font-size: 14px;
    color: #888;
}


.related-doc .card-body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.document-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.document-info-table th {
    background-color: #f4f4f4;
    padding: 10px;
    text-align: left;
    font-size: 18px;
    border-bottom: 2px solid #ddd;
}

.document-info-table td {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
}

.document-info-table .label {
    font-weight: bold;
}

.document-icon {
    font-size: 24px;
    color: #d9534f; /* Màu đỏ cho icon PDF */
    margin-right: 10px;
}




/*other documents */
.other_documents {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
}

.other_documents th,
.other_documents td {
    padding: 8px;
    border: 1px solid #ddd;
}

.other_documents th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.other_documents tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.other_documents tbody tr:hover {
    background-color: #f1f1f1;
}



/*list video */
.list_video {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.video_item {
    flex: 1 1 calc(33.333% - 16px); /* Mỗi video chiếm 1/3 chiều ngang */
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    transition: transform 0.2s ease-in-out;
    text-align: center;
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.video_info {
    padding: 8px;
}

.video_title {
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0;
    color: #333;
}

.video_views {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.video_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    margin: 0 4px;
    padding: 8px 12px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: background-color 0.2s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .active {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}



/*video detail */
.video_detail {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.video_title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
    text-align: center;
}

.video_meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.video_meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.video_meta i {
    color: #007bff;
}

.video_player iframe {
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/*album detail */
.album_detail {
    max-width: 900px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.album_title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
}

.album_meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    color: #666;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.album_meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.album_meta i {
    color: #007bff;
}

.album_photos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.photo_item {
    flex: 1 1 calc(33.333% - 16px);
    text-align: center;
    cursor: pointer;
}

.photo_item img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.photo_item .caption {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.lightbox_content {
    position: relative;
    text-align: center;
    color: #fff;
}

.lightbox_img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
}

.lightbox_caption {
    margin-top: 16px;
    font-size: 16px;
}

.lightbox_close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.lightbox_prev, .lightbox_next {
    position: absolute;
    top: 50%;
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
}

.lightbox_prev {
    left: 20px;
}

.lightbox_next {
    right: 20px;
}



/*list album */
.list_album {
    max-width: 900px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.search_box {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.search_input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search_button {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search_button:hover {
    background-color: #0056b3;
}

.separator {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 16px 0;
}

.album_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.album_item {
    flex: 1 1 calc(33.333% - 16px);
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.album_item:hover {
    transform: translateY(-5px);
}

.album_cover {
    width: 100%;
    height: auto;
    display: block;
}

.album_info {
    padding: 12px;
    color: #333;
}

.album_name {
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.album_views {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}


/*contact detail */

.contact_detail {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #333;
}

.contact_title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 24px;
}

.contact_info {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.contact_info p {
    margin: 12px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact_info a {
    color: #007bff;
    text-decoration: none;
}

.contact_info a:hover {
    text-decoration: underline;
}

.contact_info i {
    color: #007bff;
    font-size: 18px;
}

.contact_map iframe {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}