/* Áp dụng font toàn hệ thống */
body,
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_block,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_footer_content,
.pkp_site_name,
.pkp_page_index,
.pkp_page_article,
.pkp_page_issue {
    font-family: "Times New Roman", Times, serif !important;
}

/* Override toàn bộ heading */
h1, h2, h3, h4, h5, h6 {
    font-family: "Times New Roman", Times, serif !important;
}

/* Override các thành phần đặc biệt */
button,
input,
select,
textarea {
    font-family: "Times New Roman", Times, serif !important;
}

/* =======================================================================
   BANNER / LOGO
   ======================================================================= */

.pkp_site_name .is_img img {
    display: inline-block;
    max-height: 120px;
    width: auto;
}

@media (min-width: 992px) {
    .pkp_site_name .is_img img {
        max-height: 180px;
    }
}

/* =======================================================================
   NAVBAR
   ======================================================================= */

.pkp_navigation_primary_row {
    background: #B40000;
}

#navigationPrimary a {
    color: #ffffff;
    font-size: 0.9rem;
    transition: 0.2s;
}

#navigationPrimary a:hover {
    color: #FFD6D6;
}

.pkp_nav_list ul a:hover {
    background: #8B0000;
}

/* =======================================================================
   SEARCH BUTTON
   ======================================================================= */

.pkp_navigation_search_wrapper a {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    transition: 0.25s;
}

.pkp_navigation_search_wrapper a:hover {
    color: #FFD6D6;
    background: rgba(255,255,255,0.12);
}

.pkp_navigation_search_wrapper a svg {
    fill: #ffffff;
}

.pkp_navigation_search_wrapper a:hover svg {
    fill: #FFD6D6;
}

/* =======================================================================
   LINK & TEXT
   ======================================================================= */

a {
    color: #8B0000;
    font-family: "Times New Roman", serif;
}

a:hover {
    color: #B22222;
}

.obj_article_summary > .title {
    color: #6E1B1B;
}

.pkp_structure_main h2 {
    color: #8B0000;
}

/* =======================================================================
   BLOCK TITLE
   ======================================================================= */

.pkp_block .title {
    width: 100%;
    background: #B40000;
    color: #fff;
    padding: 10px 15px;
    font-weight: bold;
}

/* =======================================================================
   SLIDER
   ======================================================================= */

.ojs-slider {
    width: 100%;
    margin: 20px 0;
}

.ojs-slider img {
    width: 100%;
    display: block;
}

.swiper-pagination-bullet {
    background: #8B0000;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #6E1B1B;
    opacity: 1;
}

/* =======================================================================
   FOOTER (FINAL CLEAN - UPDATED COLOR)
   ======================================================================= */

.pkp_structure_footer_wrapper {
    background: #F2F2F2;                /* xám sáng hơn, sát ảnh */
    color: #1f2a33;
    padding: 12px 0;                   /* tăng nhẹ cho thoáng */
    border-top: 1px solid #e0e0e0;
    border-bottom: 10px solid #C40000; /* đỏ chuẩn, mảnh lại giống ảnh */
}

/* nội dung */
.pkp_footer_content {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    font-family: "Times New Roman", serif;
}

/* cột */
.footer-col {
    width: 48%;
}

/* text */
.pkp_structure_footer_wrapper p {
    margin: 3px 0;
    line-height: 1.5;
}

/* tiêu đề */
.pkp_structure_footer_wrapper strong {
    color: #000;
}

/* link */
.pkp_structure_footer_wrapper a {
    color: #8B0000;
}

.pkp_structure_footer_wrapper a:hover {
    color: #C40000;
    text-decoration: underline;
}

/* responsive */
@media (max-width: 768px) {
    .pkp_footer_content {
        flex-direction: column;
    }

    .footer-col {
        width: 100%;
    }
}

/* =======================================================================
   HIDE PKP BRAND
   ======================================================================= */

.pkp_brand_footer,
.page_about .pkp_brand_footer,
.page_about img[alt="Open Journal Systems"],
.page_about img[src*="ojs_brand"],
.page_about img[src*="pkp"] {
    display: none !important;
}

/* ===================== SLIDER ===================== */

.home-slider {
    width: 100%; /* full chiều ngang */
    margin: 30px 0;
}

.slide-item {
    background: #f5f7fa; /* nền nhẹ */
    padding: 40px;
    border-radius: 12px; /* bo góc */
    text-align: center;
}

.slide-item h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.slide-item p {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
}

.slide-item a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}
/* ===================== SLIDER End ===================== */

/* =====================================================
   ANNOUNCEMENTS LAYOUT – IMAGE + TEXT
   ===================================================== */
.obj_announcement_summary {
    display: flex;          /* Flex container cho ảnh + text */
    align-items: flex-start;
    gap: 15px;              /* Khoảng cách giữa ảnh và text */
    margin-bottom: 20px;
}

.obj_announcement_summary_image {
    width: 140px;           /* Thumbnail */
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;         /* Ảnh không bị co lại */
}

.obj_announcement_summary_details {
    flex: 1;                /* Chiếm phần còn lại */
}

.obj_announcement_summary h2 {
    font-size: 18px;
    margin: 0 0 5px;
}

.obj_announcement_summary .date {
    font-size: 13px;
    color: #888;
    margin-bottom: 5px;
}

.obj_announcement_summary .summary {
    font-size: 14px;
    line-height: 1.5;
}

.obj_announcement_summary .read_more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

.obj_announcement_summary .read_more:hover {
    text-decoration: underline;
}

/* Clear float nếu còn */
.obj_announcement_summary::after {
    content: "";
    display: block;
    clear: both;
}

/* RESPONSIVE – announcements nhỏ màn hình */
@media (max-width: 768px) {
    .obj_announcement_summary {
        flex-direction: column;
        gap: 10px;
    }

    .obj_announcement_summary_image {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
}

/* ================== SLIDER ================== */
.ojs-slider { width: 100%; margin: 20px 0; }
.ojs-slider .swiper-slide { display: flex; flex-direction: column; align-items: center; }
.ojs-slider img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.slide-item h2 { font-size: 20px; margin: 5px 0; text-align: center; }
.slide-item .summary { font-size: 14px; text-align: center; }

/* ================== OLD ANNOUNCEMENTS GRID ================== */
.old-announcements-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.old-announcements-grid .obj_announcement_summary {
    flex: 0 0 48%;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.obj_announcement_summary_image {
    width: 140px; height: auto; object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.obj_announcement_summary_details { flex: 1; }
.obj_announcement_summary h2 { font-size: 16px; margin: 0 0 5px; }
.obj_announcement_summary .date { font-size: 12px; color: #888; margin-bottom: 5px; }
.obj_announcement_summary .summary { font-size: 14px; line-height: 1.5; }
.obj_announcement_summary .read_more { font-size: 13px; margin-top: 5px; display: inline-block; }

/* Responsive */
@media (max-width: 768px) {
    .old-announcements-grid .obj_announcement_summary { flex: 0 0 100%; }
}

/* =======================================================================
   GLOBAL FONT
   ======================================================================= */
body,
.pkp_structure_page,
.pkp_structure_main,
.pkp_block,
.pkp_navigation_primary_row,
.pkp_footer_content,
button,
input,
select,
textarea {
    font-family: "Times New Roman", Times, serif !important;
}

/* =======================================================================
   ANNOUNCEMENTS – SLIDER
   ======================================================================= */
.ojs-slider, .home-slider {
    width: 100%;
    margin: 30px 0;
    position: relative;
}

.ojs-slider .swiper-wrapper, .home-slider .swiper-wrapper {
    display: flex;
}

.ojs-slider .swiper-slide, .home-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
    background: #f5f7fa;
    border-radius: 10px;
    padding: 20px;
}

.ojs-slider img, .home-slider img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
    border-radius: 6px;
}

/* Slider text */
.ojs-slider h2, .home-slider h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #6E1B1B;
}

.ojs-slider .summary, .home-slider .summary {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

.ojs-slider .date, .home-slider .date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
}

/* Pagination bullets */
.swiper-pagination-bullet {
    background: #8B0000;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #6E1B1B;
    opacity: 1;
}

/* =======================================================================
   ANNOUNCEMENTS – OLD LIST 2 COLUMNS
   ======================================================================= */
.old-announcements {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.old-announcements .obj_announcement_summary {
    display: flex;
    flex-direction: row;
    width: calc(50% - 10px);
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    align-items: flex-start;
}

.obj_announcement_summary_image {
    width: 140px;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 15px;
}

.obj_announcement_summary_details {
    flex: 1;
}

.obj_announcement_summary h2 {
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.obj_announcement_summary .date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.obj_announcement_summary .summary {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
}

.obj_announcement_summary .read_more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

.obj_announcement_summary .read_more:hover {
    text-decoration: underline;
}

/* Clear float nếu còn */
.obj_announcement_summary::after {
    content: "";
    display: block;
    clear: both;
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 992px) {
    .old-announcements .obj_announcement_summary {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .obj_announcement_summary_image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .ojs-slider .swiper-slide, .home-slider .swiper-slide {
        padding: 15px;
    }

    .ojs-slider h2, .home-slider h2 {
        font-size: 1.2rem;
    }

    .obj_announcement_summary .summary {
        font-size: 0.9rem;
    }
}

.obj_announcement_summary_image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

/* ================== Announcement Slider ================== */
.announcement-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0;
}

.announcement-slider .slide {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 1rem;
    position: relative;
}

.announcement-slider .slide-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.announcement-slider .slide-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.announcement-slider .slide-description {
    font-size: 1rem;
    color: #555;
}

/* Optional: scrollbar hide for modern browsers */
.announcement-slider::-webkit-scrollbar {
    display: none;
}

/* ================== Announcement Grid 2 Columns ================== */
.announcement-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.announcement-grid .row {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.announcement-grid .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.announcement-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.announcement-card .card-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.announcement-card .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.announcement-card .card-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.announcement-card .card-date {
    font-size: 0.85rem;
    color: #888;
}

/* ================== Responsive ================== */
@media (max-width: 768px) {
    .announcement-slider .slide {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .announcement-grid .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .announcement-grid .row {
        flex-direction: column;
    }
}

.announcement-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
}
.announcement-slider .slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.announcement-slider img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.announcement-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.announcement-grid .announcement-item {
    background: #fff;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.announcement-grid .announcement-item h4 {
    margin-top: 0;
}

/* ================== ANNOUNCEMENT SLIDER ================== */
.announcement-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0;
}

.announcement-slider .slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.announcement-slider .slide-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.announcement-slider .slide-title a {
    font-size: 1.25rem;
    font-weight: bold;
    color: #6E1B1B;
    text-decoration: none;
}

.announcement-slider .slide-title a:hover {
    color: #B22222;
    text-decoration: underline;
}

.announcement-slider .slide-description {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-top: 0.5rem;
}

.announcement-slider .slide-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0.5rem;
}

/* Optional: hide scrollbar for modern browsers */
.announcement-slider::-webkit-scrollbar {
    display: none;
}

/* ================== ANNOUNCEMENT GRID 2 CỘT ================== */
.announcement-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.announcement-grid .announcement-item {
    flex: 0 0 48%;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.announcement-grid .announcement-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.announcement-grid .card-title a {
    font-size: 1.1rem;
    font-weight: bold;
    color: #6E1B1B;
    text-decoration: none;
}

.announcement-grid .card-title a:hover {
    color: #B22222;
    text-decoration: underline;
}

.announcement-grid .card-description {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #555;
    margin-top: 0.25rem;
}

.announcement-grid .card-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0.25rem;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .announcement-slider .slide {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .announcement-grid .announcement-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsive – mobile */
@media (max-width: 768px) {
    .announcement-slider .slide {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .announcement-grid .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.sapo-container {
    display: flex;          /* Dùng flexbox để căn hàng ngang */
    align-items: flex-start; /* Căn top ảnh với top text */
    gap: 15px;              /* Khoảng cách giữa ảnh và text */
}

.sapo-image {
    width: 200px;           /* Chiều rộng ảnh */
    height: auto;           /* Tỷ lệ tự động */
    object-fit: cover;      /* Giữ hình ảnh vừa khung */
    border-radius: 5px;     /* Bo góc nếu muốn */
    flex-shrink: 0;         /* Không bị co lại */
}

.sapo-text {
    flex: 1;                /* Text chiếm phần còn lại */
}

.home-slider .swiper-slide {
    text-align: center;
}
.home-slider .slide-text {
    padding: 0.5em 1em;
    text-align: left;
}
.read-more {
    display: inline-block;
    margin-top: 0.5em;
    font-weight: bold;
}
.announcement-title a {
    color: inherit;
    text-decoration: none;
}
.announcement-title a:hover {
    text-decoration: underline;
}