/* --- Cài đặt chung --- */
@charset "utf-8";
/*/////////////////////////////////////
=======================================
========|| Copyright: hungvq ||====
-- mail:hung@baotienphong.com.vn ---
=======|| Allright : Bao Tien Phong ||=====
|       website: www.tienphong.vn        |
======================================== 
/////////////////////////////////////*/
@font-face {
    font-family: 'Barlow-Medium';
    src: url('../font/Barlow-Medium.eot');
    src: url('../font/Barlow-Medium.eot?#iefix') format('embedded-opentype'), url('../font/Barlow-Medium.woff') format('woff'), url('../font/Barlow-Medium.ttf') format('truetype'), url('..font/Barlow-Medium.svg#webfont') format('svg');
}
@font-face {
    font-family: 'Barlow-ExtraBold';
    src: url('../font/Barlow-ExtraBold.eot');
    src: url('../font/Barlow-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../font/Barlow-ExtraBold.woff') format('woff'), url('../font/Barlow-ExtraBold.ttf') format('truetype'), url('..font/Barlow-ExtraBold.svg#webfont') format('svg');
}
@font-face {
    font-family: 'BarlowCondensed-Medium';
    src: url('../font/BarlowCondensed-Medium.eot');
    src: url('../font/BarlowCondensed-Medium.eot?#iefix') format('embedded-opentype'), url('../font/BarlowCondensed-Medium.woff') format('woff'), url('../font/BarlowCondensed-Medium.ttf') format('truetype'), url('..font/BarlowCondensed-Medium.svg#webfont') format('svg');
}
@font-face {
    font-family: 'Barlow-Black';
    src: url('../font/Barlow-Black.eot');
    src: url('../font/Barlow-Black.eot?#iefix') format('embedded-opentype'), url('../font/Barlow-Black.woff') format('woff'), url('../font/Barlow-Black.ttf') format('truetype'), url('..font/Barlow-Black.svg#webfont') format('svg');
}
.p1 {
    font-family: Barlow-Medium;
}
.p2 {
    font-family: Barlow-ExtraBold;
}
.p3 {
    font-family: BarlowCondensed-Medium;
}
.p4 {
    font-family: Barlow-Black;
}
.f-5 {
    font-size: 5px;
    font-size: 0.5rem;
}

.f-6 {
    font-size: 6px;
    font-size: 0.6rem;
}

.f-7 {
    font-size: 7px;
    font-size: 0.7rem;
}

.f-8 {
    font-size: 8px;
    font-size: 0.8rem;
}

.f-9 {
    font-size: 9px;
    font-size: 0.9rem;
}

.f-10 {
    font-size: 10px;
    font-size: 1rem;
}

.f-12 {
    font-size: 12px;
    font-size: 1.2rem;
}

.f-13 {
    font-size: 13px;
    font-size: 1.3rem;
}

.f-14 {
    font-size: 14px;
    font-size: 1.4rem;
}

.f-15 {
    font-size: 15px;
    font-size: 1.5rem;
}

.f-16 {
    font-size: 16px;
    font-size: 1.6rem;
}

.f-17 {
    font-size: 17px;
    font-size: 1.7rem;
}

.f-18 {
    font-size: 18px;
    font-size: 1.8rem;
}

.f-19 {
    font-size: 19px;
    font-size: 1.9rem;
}

.f-20 {
    font-size: 20px;
    font-size: 2rem;
}

.f-21 {
    font-size: 21px;
    font-size: 2.1rem;
}

.f-22 {
    font-size: 22px;
    font-size: 2.2rem;
}

.f-23 {
    font-size: 23px;
    font-size: 2.3rem;
}

.f-24 {
    font-size: 24px;
    font-size: 2.4rem;
}

.f-25 {
    font-size: 25px;
    font-size: 2.5rem;
}

.f-26 {
    font-size: 26px;
    font-size: 2.6rem;
}

.f-27 {
    font-size: 27px;
    font-size: 2.7rem;
}

.f-28 {
    font-size: 28px;
    font-size: 2.8rem;
}

.f-29 {
    font-size: 29px;
    font-size: 2.9rem;
}

.f-30 {
    font-size: 30px;
    font-size: 3rem;
}

.f-31 {
    font-size: 31px;
    font-size: 3.1rem;
}

.f-32 {
    font-size: 32px;
    font-size: 3.2rem;
}

.f-33 {
    font-size: 33px;
    font-size: 3.3rem;
}

.f-34 {
    font-size: 34px;
    font-size: 3.4rem;
}

.f-35 {
    font-size: 35px;
    font-size: 3.5rem;
}

.f-36 {
    font-size: 36px;
    font-size: 3.6rem;
}

.f-37 {
    font-size: 37px;
    font-size: 3.7rem;
}

.f-38 {
    font-size: 38px;
    font-size: 3.8rem;
}

.f-39 {
    font-size: 39px;
    font-size: 3.9rem;
}

.f-40 {
    font-size: 40px;
    font-size: 4rem;
}

.f-58 {
    font-size: 58px;
    font-size: 5.8rem;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #fdfaf5;
    color: #333;
    margin: 0;
}
/*.bg {
    background: rgb(253, 206, 112);
    background: rgb(255, 251, 175);
    background-repeat: no-repeat;
  
    background: url("images/bg-trong.png") fixed, linear-gradient( 90deg, rgb(253, 206, 112) 0%, rgba(254, 222, 135, 1) 40%, rgba(255, 242, 162, 1) 45%, rgba(255, 251, 175, 1) 50%, rgba(255, 242, 162, 1) 55%, rgba(254, 222, 135, 1) 60%, rgb(253, 206, 112) 100% );
}*/
.bg {
    /* LỚP 1: Ảnh PNG trong suốt */
    background-image: url("images/bg-trong.png"),
    /* Dấu phẩy để ngăn cách các lớp nền */
    /* LỚP 2: Nền Gradient */
    linear-gradient(90deg, rgb(253, 206, 112) 0%, rgba(254, 222, 135, 1) 40%, rgba(255, 242, 162, 1) 45%, rgba(255, 251, 175, 1) 50%, rgba(255, 242, 162, 1) 55%, rgba(254, 222, 135, 1) 60%, rgb(253, 206, 112) 100% );
    /* --- Thuộc tính cho LỚP 1 (Ảnh PNG) --- */
    background-repeat: no-repeat, /* Không lặp lại ảnh PNG */
    repeat; /* Gradient có thể lặp lại (mặc định) */
    background-size: revert, /* Phóng to/thu nhỏ ảnh để lấp đầy toàn bộ phần tử */
    auto; /* Gradient có kích thước tự động (mặc định) */
    background-position: center center, /* Căn giữa ảnh PNG */
    0 0; /* Vị trí mặc định cho gradient */
    background-attachment: fixed, /* Giữ ảnh PNG cố định khi cuộn */
    fixed; /* Giữ gradient cố định khi cuộn */
}
.container {
    max-width: 1200px;
    margin: 0 auto;

    
    /*padding: 40px 20px;*/
}

.main-title {
    text-align: center;
    color: #d98d25;
    margin-bottom: 40px;
    font-weight: 700;
}

/* --- Lưới hiển thị các cán bộ (quan trọng) --- */
.officials-grid {
    display: grid;
    padding:0 10px;
    /* Tạo 5 cột bằng nhau trên một hàng */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* Khoảng cách giữa các thẻ */
}

/* --- Thẻ thông tin cá nhân (Card) --- */
.official-card {
    /*background-color: #fff;*/
    /*border-radius: 12px;*/
    text-align: center;
    /*padding: 20px;*/
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);*/
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    /* --- Hiệu ứng Hover (quan trọng) --- */
    .official-card:hover {
        transform: translateY(-8px); /* Nâng thẻ lên một chút */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* Đổ bóng đậm hơn */
    }

    .official-card img {
        width: 100%;
        /*height: 150px;*/
        /*border-radius: 50%; 
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid #f0f0f0;*/
      
    }
    /* --- Thay thế các quy tắc cũ cho h3 và p bằng đoạn này --- */
    /* --- Thay thế các quy tắc cũ cho h3 và p bằng đoạn này --- */

    /* Kiểu chữ cho TÊN NHÂN VẬT (BÙI THỊ MINH HOÀI) */
    .official-card h3 {
        /* Font chữ đậm, mạnh mẽ cho tên */
        font-family: 'Oswald', sans-serif;
        font-weight: 700; /* Phải khớp với weight đã import */
        color: #ed1b24; /* Màu đỏ đậm */
        font-size: 1.2em; /* Tăng kích thước để nổi bật */
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        line-height: 1.4;
    }

        /* Thêm đường kẻ ngang PHÍA TRÊN tên */
        .official-card h3::after {
            content: ''; /* Bắt buộc phải có để pseudo-element hiển thị */
            display: block; /* Để nó chiếm một dòng riêng */
            width: 100px; /* Độ rộng của đường kẻ */
            height: 2px; /* Độ dày của đường kẻ */
            background-color: #ccc; /* Màu của đường kẻ */
            margin: 12px auto; /* Căn giữa và tạo khoảng cách trên dưới */
        }

    /* Kiểu chữ cho CHỨC VỤ */
    .official-card p {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #2f2b2a; /* Màu đen */
        font-size: 0.8em; /* Kích thước nhỏ hơn tên */
        line-height: 1.5;
        text-transform: uppercase;
        margin: 0;
        /*min-height: 2.4em;  Giữ chiều cao đồng đều nếu chức vụ chỉ có 1 dòng */
    }

/* --- Responsive cho các thiết bị khác nhau --- */
@media (max-width: 1200px) {
    .officials-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cột trên tablet */
    }
}

@media (max-width: 768px) {
    .officials-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên điện thoại lớn */
    }
}

@media (max-width: 480px) {
    .officials-grid {
        grid-template-columns: repeat(2, 1fr); /* 1 cột trên điện thoại nhỏ */
    }

    .official-card img {
        width: 98%;
        /*height: 120px;*/
    }
}


/* --- CSS cho Modal (giữ nguyên từ phiên bản trước) --- */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .modal.visible {
        visibility: visible;
        opacity: 1;
    }

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1010;
}

    .close-button svg {
        width: 32px;
        height: 32px;
        stroke: #fff;
        transition: transform 0.3s ease, stroke 0.3s ease;
    }

    .close-button:hover svg {
        transform: rotate(90deg);
        stroke: #ffc107;
    }

.modal-content {
    position: relative;
    width: 1000px;
    max-width: 95vw;
    height: 90vh;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal.visible .modal-content {
    transform: scale(1);
}

.image-scroller {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .image-scroller::-webkit-scrollbar {
        display: none;
    }

#modal-infographic-img {
    width: 100%;
    height: auto;
    display: block;
}
/* --- Kiểu dáng cho Nút Lên Đầu Trang (Scroll to Top) --- */
#scrollToTopBtn {
    position: fixed; /* Giữ nút cố định trên màn hình */
    bottom: 30px;
    right: 30px;
    z-index: 999; /* Đảm bảo nút luôn nổi trên cùng */
    width: 50px;
    height: 50px;
    background-color: #e67e22; /* Màu cam đẹp mắt */
    border: none;
    border-radius: 50%; /* Bo tròn thành hình tròn */
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Căn giữa icon bên trong nút */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Trạng thái ẩn mặc định */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Hiệu ứng trượt lên khi xuất hiện */
    /* Hiệu ứng chuyển động mượt mà */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

    #scrollToTopBtn.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); /* Trở về vị trí ban đầu */
    }

    #scrollToTopBtn:hover {
        background-color: #d35400; /* Màu cam đậm hơn khi di chuột vào */
    }

    #scrollToTopBtn svg {
        width: 22px;
        height: 22px;
        stroke: white; /* Màu của mũi tên */
    }
    /*begin header*/
/* ========== THAY THẾ TOÀN BỘ CSS HEADER CŨ BẰNG ĐOẠN NÀY ========== */

/* --- Header Section (New Style) --- */
.main-header {
    position: relative; /* Bắt buộc để định vị lá cờ */
    /*background: linear-gradient(to bottom, #fef5e1, #fbe9d0); Nền màu vàng gradient như mẫu */
    padding: 30px 20px;
    padding-top: 50px; /* Padding top cho phần chữ như yêu cầu */
    border-radius: 12px;
    margin-bottom: 10px; /* Khoảng cách với lưới nhân vật bên dưới */
    overflow: hidden; /* Đảm bảo cờ không tràn ra ngoài nếu có lỗi */
}

/* Container rỗng, không cần style đặc biệt */
.header-content {
    /* Trống */
}

/* Lá cờ ở góc trên bên trái (quan trọng) */
.header-flag {
    position: absolute;
    top: 0;
    left: 0;
}

    .header-flag img {
        width: 200px; /* Điều chỉnh kích thước cờ cho phù hợp */
        height: auto;
        opacity: 0.9;
    }

/* Khối tiêu đề (quan trọng) */
.header-title {
    position: relative; /* Cần thiết để định vị đường kẻ đỏ */
    text-align: center; /* CĂN GIỮA toàn bộ text */
    padding-bottom: 10px; /* Tạo không gian cho đường kẻ */
    color: #ed1b24; /* Màu đỏ cho chữ (thay vì #e53935) */
}

    .header-title span {
        display: block;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.5;
    }

.title-line-1 {
    font-size: 2rem;
}

.title-line-2 {
    font-size: 3rem;
}

/* Đường kẻ đỏ ở giữa (quan trọng) */
.header-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Đặt điểm bắt đầu ở giữa */
    transform: translateX(-50%); /* Kéo về bên trái 50% chiều rộng của chính nó để căn giữa hoàn hảo */
    width: 200px;
    height: 2px;
    background-color: #b91c1c;
}

/* Xóa bỏ tiêu đề cũ (nếu có) */
.container .main-title {
    display: none;
}

/* --- Responsive cho Header mới --- */
@media (max-width: 768px) {
    .main-header {
        padding-top: 80px; /* Tăng padding top trên mobile để chữ không đè lên cờ */
        padding-left: 15px;
        padding-right: 15px;
    }

    .header-flag img {
        width: 150px; /* Giảm kích thước cờ trên mobile */
    }

    .title-line-1 {
        font-size: 1.3rem;
    }

    .title-line-2 {
        font-size: 1.7rem;
    }

    .header-title::after {
        width: 150px; /* Giảm độ rộng đường kẻ */
    }
}
    /*begin footer*/
/* ========== BẮT ĐẦU CSS CHO FOOTER ========== */

.main-footer {
    background-color: #a91d21; /* Màu nền đỏ */
    position: relative; /* Bắt buộc để định vị các phần tử con */
    width: 100%;
   /* Khoảng cách với nội dung bên trên */
    min-height: 50px; /* Đặt chiều cao tối thiểu cho footer. BẠN CÓ THỂ THAY ĐỔI SỐ NÀY */
    /* Xóa bỏ tất cả các hiệu ứng không cần thiết */
    padding: 0;
    border: none;
    box-shadow: none;
    margin-top:40px;
}

/* Container rỗng bên trong footer */
.footer-content {
    /* Không cần style gì ở đây */
}

/* Cột trái chứa lá cờ (luôn ở góc trái) */
.footer-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; /* Chiều cao bằng 100% của footer */
}

    .footer-left img {
        height: 100%; /* Ép ảnh cờ cao bằng chiều cao của container (.footer-left) */
        width: auto; /* Chiều rộng tự động theo tỷ lệ */
        display: block; /* Loại bỏ khoảng trắng thừa bên dưới ảnh */
    }

/* Cột giữa chứa logo (luôn ở chính giữa) */
.footer-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Kỹ thuật căn giữa hoàn hảo */
}

    .footer-center img {
        height: 30px; /* Đặt chiều cao cố định cho logo. BẠN CÓ THỂ THAY ĐỔI SỐ NÀY */
        width: auto;
        display: block;
        opacity: 0.9;
        transition: opacity 0.2s ease;
    }

    .footer-center a:hover img {
        opacity: 1;
    }

/* Cột phải không còn cần thiết nữa, ẩn đi */
.footer-right {
    display: none;
}

/* ========== KẾT THÚC CSS CHO FOOTER ========== */
/* --- Dán đoạn mã này vào cuối tệp style.css --- */

/* Biểu tượng loading (spinner) */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3); /* Vòng tròn mờ */
    border-top-color: #ffffff; /* Phần xoay có màu trắng */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Hiệu ứng xoay */
    z-index: 10; /* Luôn nổi trên ảnh */
    display: none; /* Mặc định ẩn đi */
}

/* Định nghĩa hiệu ứng xoay */
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Class để hiển thị spinner */
.modal-content.loading .loading-spinner {
    display: block;
}

/* Ẩn ảnh đi khi spinner đang hiển thị */
.modal-content.loading .image-scroller {
    visibility: hidden;
}