/**
 * Stylesheet for News & Events Page (Trang Tin Tức & Sự Kiện)
 * Tan Vo Lam WordPress Theme
 * Theme Background: #E6EBEA
 * Top Background Banner: assets/images/bg_new.png (3840x2062)
 */

/* 1. Body & Page Wrapper Override for News Pages */
body.tvl-news-page,
body.blog,
body.archive,
body.category,
body.single,
body.page-template-page-tin-tuc,
body.page-id-14 {
    background-color: #E6EBEA !important;
}

/* 2. Main News Page Outer Wrapper */
.tvl-news-page-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #E6EBEA;
    background-image: url('../images/bg_new.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
    padding-top: 420px;
    padding-bottom: 90px;
    box-sizing: border-box;
}

/* 3. Centered Container (Khối tin tức & chi tiết tin tức nằm chính giữa trang) */
.tvl-news-page-container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: block;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

/* 4. Main Content Card (White Box with Breadcrumb Header) */
.tvl-news-card {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 680px;
}

/* 4.1 Breadcrumb Bar */
.tvl-news-breadcrumb {
    background-color: #40474b;
    background-image: url('../images/section/breadcrumb-bamboo.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 4px 4px 0 0;
}

.tvl-bc-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
}

.tvl-bc-home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    margin-right: 2px;
}

.tvl-news-breadcrumb .tvl-bc-home-link,
.tvl-news-breadcrumb .tvl-bc-home-link:visited,
.tvl-news-card .tvl-news-breadcrumb a,
.tvl-news-card .tvl-news-breadcrumb a:visited {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.tvl-news-breadcrumb .tvl-bc-home-link:hover,
.tvl-news-breadcrumb .tvl-bc-home-link:focus,
.tvl-news-card .tvl-news-breadcrumb a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.tvl-bc-sep {
    color: #718096;
    margin: 0 2px;
}

.tvl-bc-current {
    color: #e5a953;
    font-weight: 600;
}

/* 4.2 Tabs Row */
.tvl-news-tabs {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5e9ec;
    padding: 0 22px;
    gap: 32px;
    position: relative;
    user-select: none;
}

.tvl-n-tab,
.tvl-n-tab:visited {
    display: inline-block;
    padding: 16px 4px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #556575;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.tvl-n-tab:hover {
    color: #1e293b;
}

.tvl-n-tab.is-active,
.tvl-n-tab.is-active:visited {
    color: #2b3945;
    font-weight: 700;
}

.tvl-n-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #3b4b5a;
    border-radius: 1px;
}

/* 4.3 News Items List */
.tvl-news-list-panel {
    display: none;
}

.tvl-news-list-panel.is-active {
    display: block !important;
    animation: tvlNewsFadeIn 0.25s ease-out;
}

@keyframes tvlNewsFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tvl-news-card .tvl-news-list,
.tvl-news-card .tvl-np-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block !important;
}

.tvl-news-row,
.tvl-news-row:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #edf2f5;
    text-decoration: none;
    transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.tvl-news-row:last-child {
    border-bottom: 1px solid #edf2f5;
}

.tvl-news-row:hover {
    background-color: #f8fafc;
    padding-left: 26px;
}

.tvl-news-left {
    display: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding-right: 16px;
}

.tvl-news-cat {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #334155;
    flex-shrink: 0;
}

.tvl-news-pipe {
    color: #334155;
    margin: 0 4px;
    font-weight: 400;
    flex-shrink: 0;
}

.tvl-news-title {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.tvl-news-row:hover .tvl-news-title {
    color: #b7791f;
}

.tvl-news-date {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #748596;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 4.4 Pagination */
.tvl-news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px 30px;
    background: #ffffff;
    user-select: none;
}

.tvl-pagi-btn,
.tvl-pagi-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    background: #CBD5E1;
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.15s ease;
}

.tvl-pagi-btn:hover:not(.is-active) {
    background: #94A3B8;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.tvl-pagi-btn.is-active,
.tvl-pagi-btn.is-active:visited,
.tvl-pagi-btn.current,
.tvl-pagi-btn.current:visited {
    background: #4A5F71;
    color: #ffffff !important;
    cursor: default;
    pointer-events: none;
}

.tvl-pagi-prev,
.tvl-pagi-prev:visited,
.tvl-pagi-next,
.tvl-pagi-next:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #4A5F71 !important;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.15s ease;
}

.tvl-pagi-prev:hover {
    color: #1e293b !important;
    transform: translateX(-2px);
}

.tvl-pagi-next:hover {
    color: #1e293b !important;
    transform: translateX(2px);
}

.tvl-pagi-prev.tvl-pagi-disabled,
.tvl-pagi-next.tvl-pagi-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.tvl-pagi-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #94A3B8;
    user-select: none;
}

.tvl-news-card.is-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 5. Hide duplicate inline sidebar so main News Card stays centered in page */
.tvl-news-sidebar {
    display: none !important;
}

/* 6. Active Menu Item Highlight on Header */
body.tvl-news-page .tvl-menu-list li.current-menu-item > a,
body.tvl-news-page .tvl-menu-list li.active > a,
body.blog .tvl-menu-list li.current-menu-item > a,
body.archive .tvl-menu-list li.current-menu-item > a,
body.category .tvl-menu-list li.current-menu-item > a,
body.page-template-page-tin-tuc .tvl-menu-list li.current-menu-item > a {
    color: #2D0404;
    background: transparent;
}

body.tvl-news-page .tvl-menu-list li.current-menu-item > a::after,
body.tvl-news-page .tvl-menu-list li.active > a::after,
body.blog .tvl-menu-list li.current-menu-item > a::after,
body.archive .tvl-menu-list li.current-menu-item > a::after,
body.category .tvl-menu-list li.current-menu-item > a::after,
body.page-template-page-tin-tuc .tvl-menu-list li.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 10px;
    right: 10px;
    height: 3px;
    background: #5a1c12;
    border-radius: 2px;
}

/* 7. Responsive Styles */
@media screen and (max-width: 1440px) {
    .tvl-news-page-wrapper {
        background-size: 1700px auto;
        padding-top: 380px;
    }
}

@media screen and (max-width: 1200px) {
    .tvl-news-page-wrapper {
        background-size: 1500px auto;
        padding-top: 340px;
    }
}

@media screen and (max-width: 1024px) {
    /* Hide sticky nav completely on mobile/tablet news pages matching clean mockup */
    body.tvl-news-page #tvl-sticky-nav,
    body.blog #tvl-sticky-nav,
    body.archive #tvl-sticky-nav,
    body.category #tvl-sticky-nav,
    body.page-template-page-tin-tuc #tvl-sticky-nav,
    body.page-id-14 #tvl-sticky-nav,
    body.single #tvl-sticky-nav {
        display: none !important;
    }
    .tvl-news-page-wrapper {
        background-size: 1100px auto;
        padding-top: 260px;
    }
}

@media screen and (max-width: 768px) {
    .tvl-news-page-wrapper {
        background-size: 800px auto;
        background-position: center top 45px;
        padding-top: 215px;
        padding-bottom: 50px;
    }
    .tvl-news-page-container {
        padding: 0 10px;
    }

    /* Breadcrumb on Mobile: only show Home Icon + Tin tức & Sự kiện */
    .tvl-news-breadcrumb {
        min-height: 44px;
        padding: 0 16px;
        border-radius: 4px 4px 0 0;
    }
    .tvl-news-breadcrumb .tvl-bc-home-link,
    .tvl-news-breadcrumb .tvl-bc-sep {
        display: none !important;
    }
    .tvl-bc-inner {
        font-size: 14px;
    }
    .tvl-bc-current {
        color: #e5a953 !important;
        font-weight: 600;
        text-decoration: none !important;
    }
    .tvl-bc-home-icon {
        color: #cbd5e1;
        margin-right: 4px;
    }

    /* Tabs on Mobile: Sleek horizontal scroll, hidden scrollbar, clean underline */
    .tvl-news-tabs {
        gap: 20px;
        padding: 0 16px;
        border-bottom: 1px solid #edf2f7;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tvl-news-tabs::-webkit-scrollbar {
        display: none;
    }
    .tvl-n-tab {
        padding: 13px 0 11px;
        font-size: 14px;
        color: #64748b;
        font-weight: 500;
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
    }
    .tvl-n-tab.is-active {
        color: #1e293b !important;
        font-weight: 700 !important;
        border-bottom: 3px solid #3b4b66 !important;
    }
    .tvl-n-tab.is-active::after {
        display: none;
    }

    /* News Row on Mobile: single row with pipe and ellipsis */
    .tvl-news-row {
        padding: 12px 16px;
        border-bottom: 1px solid #edf2f7;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tvl-news-row:hover {
        padding-left: 16px;
        background: transparent;
    }
    .tvl-news-left {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        flex: 1;
        min-width: 0;
        margin-right: 12px;
    }
    .tvl-news-cat {
        font-size: 13.5px;
        font-weight: 600;
        color: #334155;
        flex-shrink: 0;
    }
    .tvl-news-pipe {
        display: inline !important;
        color: #94a3b8;
        margin: 0 6px;
        flex-shrink: 0;
    }
    .tvl-news-title {
        font-size: 13.5px;
        font-weight: 500;
        color: #334155;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    .tvl-news-date {
        font-size: 12.5px;
        color: #64748b;
        font-weight: 500;
        flex-shrink: 0;
        text-align: right;
    }

    /* Pagination on Mobile matching mockup: « 1 2 3 4 » */
    .tvl-news-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px 16px 28px;
    }
    .tvl-pagi-num-extra {
        display: none !important;
    }
    .tvl-pagi-btn {
        width: 34px;
        height: 34px;
        background: #cbd5e1 !important;
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 600;
        border-radius: 2px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tvl-pagi-btn.is-active,
    .tvl-pagi-btn.current {
        background: #404e67 !important;
        font-weight: 700;
    }
    .tvl-pagi-prev,
    .tvl-pagi-next {
        font-size: 20px;
        font-weight: 700;
        color: #404e67 !important;
        padding: 0 4px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .tvl-news-page-wrapper {
        background-size: 780px auto;
        background-position: center top 48px;
        padding-top: 215px;
    }
    .tvl-news-page-container {
        padding: 0 8px;
    }
    .tvl-news-row {
        padding: 11px 14px;
    }
    .tvl-news-cat,
    .tvl-news-title {
        font-size: 13px;
    }
    .tvl-news-date {
        font-size: 12px;
    }
    .tvl-pagi-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* 8. Single Post Details Styling */
.tvl-single-card {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.tvl-single-article {
    padding: 36px 40px 48px;
    background: #ffffff;
}

.tvl-single-header {
    margin-bottom: 22px;
}

.tvl-single-title {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
    line-height: 1.38;
    letter-spacing: -0.01em;
}

.tvl-single-date {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #6b7280;
    font-weight: 400;
}

.tvl-single-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin-top: 16px;
    margin-bottom: 22px;
    width: 100%;
}

.tvl-single-content {
    font-family: 'Inter', sans-serif;
    color: #374151;
    font-size: 15px;
    line-height: 1.75;
}

.tvl-single-content p {
    margin: 0 0 16px;
    color: #374151;
}

.tvl-single-content a {
    color: #1f2937;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.tvl-single-content a:hover {
    color: #b7791f;
}

.tvl-single-content img,
.tvl-single-content .tvl-post-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 22px auto;
    border-radius: 2px;
}

.tvl-single-content ul {
    margin: 16px 0 20px 24px;
    padding: 0;
    list-style-type: disc;
}

.tvl-single-content ul li {
    margin-bottom: 8px;
    color: #374151;
    line-height: 1.7;
}

.tvl-single-content ul ul {
    margin: 8px 0 10px 22px;
    list-style-type: disc;
}

.tvl-single-content ul ul li {
    margin-bottom: 6px;
}

@media screen and (max-width: 768px) {
    .tvl-single-article {
        padding: 24px 20px 32px;
    }
    .tvl-single-title {
        font-size: 21px;
        line-height: 1.35;
    }
    .tvl-single-content {
        font-size: 14px;
        line-height: 1.7;
    }
}