/* ============================================
   HISTORY TIMELINE — THEME
   Đồng bộ pixel-chính-xác từ mockup "Mậu Thân 1968 — Desktop"
   ============================================ */

@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/iosevka-charon-400-a.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/iosevka-charon-400-b.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/iosevka-charon-400-c.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/iosevka-charon-500-a.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/iosevka-charon-500-b.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Iosevka Charon Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/iosevka-charon-500-c.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
    --bg-white: #ffffff;
    --bg-panel: #fafafa;
    --red: #c00f0c;
    --red-dark: #8f0b09;
    --black: #000000;
    --text-gray: #c8c8c8;
    --text-gray-dim: #8a8a8a;
    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 1.5rem;
    --sp-lg: 2.5rem;
    --sp-xlg: 3.5rem;
    
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg-white);
    color: #000;
    font-family: "Iosevka Charon Mono", ui-monospace, monospace;
    line-height: 1.5;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
button { font-family: inherit; cursor: pointer; }

.page { position: relative; min-height: 100vh; overflow-x: hidden; }

.map-decor {
    top: -3%;
    right: 4%;
    width: 25vw;
    max-width: 480px;
    min-width: 220px;
    height: auto;
    pointer-events: none;
    position: fixed;
    z-index: -1;

}

/* ============================================
   HEADER (chevron + tên thời kỳ) — luôn hiện, không di chuyển
   ============================================ */

.sidebar-header {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: var(--sp-lg) var(--sp-lg) 0;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;
    padding: 10px 10px;
    border: 0;
    background: transparent;
    display: inline-block;
    align-items: flex-start;
    justify-content: center;
    color: #000;
    flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--red); }


.chevron-icon { display: block; }

.sidebar-title-block {
    display: flex;
    flex-direction: column;
    /*gap: 14px;*/
    background: var(--bg-white);
}
.sidebar-title-block h1 { font-size: 40px; font-weight: 500; line-height: 52px; letter-spacing: 0.5px; }
.period-years { font-size: 20px; line-height: 24px; }

/* ============================================
   DRAWER — trượt ra từ trái, đè lên nội dung
   ============================================ */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 40;
}

body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }

.period-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 340px;
    background: #fff;
    border-right: 1px solid #eee;
    box-shadow: 8px 0 24px rgba(0,0,0,0.08);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 45;
    overflow-y: auto;
}
.period-drawer:not(.closed) { transform: translateX(0); }

.drawer-inner { padding: var(--sp-lg) var(--sp-md); display: flex; flex-direction: column; min-height: 100%; }

.drawer-label {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--text-gray-dim);
    text-transform: uppercase;
    margin-bottom: var(--sp-md);
}

.period-list { display: flex; flex-direction: column; gap: 18px; flex: 1; }

.period-item {
    font-size: 1.2rem;
    color: var(--text-gray-dim);
    cursor: pointer;
    transition: color 0.2s ease;
    width: fit-content;
}

.period-item:hover {
    color: #000; 
}
.period-item.active { color: #9b1b1b; font-weight: 500; }

.admin-link { display: inline-block; margin-top: var(--sp-lg); font-size: 13px; color: var(--text-gray-dim); }
.admin-link:hover { color: var(--red); }

/* ============================================
   TẦNG 2: CAMPAIGN VIEW
   ============================================ */

.campaign-view {
    position: relative;
    z-index: 1;
    padding: 2vw var(--sp-lg) var(--sp-lg);
    display: flex;
    flex-direction: column;
    height: 85vh;
}

.campaign-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--sp-lg);
    min-height: 0;
    overflow: default;
}

.campaign-card {
    display: flex;
    align-items: flex-start;
    max-width: 1400px;
    width: 100%;
    gap: 0;
    animation: campaignFadeIn 0.85s ease;

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

/* ---- Ảnh + mảng trang trí collage phía sau ---- */
.campaign-media {
    position: relative;
    /* width: 42%; */
    max-width: 700px;
    flex-shrink: 0;
    aspect-ratio: 733 / 453;
    animation: campaignFadeIn 0.85s ease;

}


/* Dải đỏ chéo, nhô giữa-trái, đè lên mảng xám */
.campaign-media::after {
    content: "";
    position: absolute;
    left: -78px;
    top: 82px;
    width: 190px;
    height: 46px;
    background: #a4302c;
    opacity: 0.8;
    transform: rotate(-11deg);
    z-index: 9;
    display: none;
}

.campaign-card-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mảng đỏ duotone phủ 40% bên phải tấm ảnh */
.campaign-media-tint {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32%;
    background: #c00f0c;
    mix-blend-mode: multiply;
    opacity: 0.92;
    pointer-events: none;
}

/* ---- Khối tiêu đề đen, 2 lớp lệch nhau ---- */
.campaign-title-group {
    position: relative;
    z-index: 4;
}

.campaign-title-accent {
    position: absolute;
    left: -100px;
    top: -35px;
    width: 190px;
    height: 42px;
    background: #000;
    z-index: 1;
}

.campaign-title-badge {
    position: relative;
    z-index: 2;
    background: #000;
    padding: 18px 32px;
    white-space: wrap;
}

.campaign-title-badge h2 {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 500;
    line-height: 1.25;
    color: #fff; }

.campaign-copy {
    flex: 1;
    /*min-width: 280px;*/
    display: flex;
    flex-direction: column;
    /*gap: var(--sp-lg);*/
}

.campaign-excerpt {
    font-size: 1.25rem;
    line-height: auto;
    text-align: justify;
    color: #000;
    padding: 6%;
}

.detail-btn {
    align-self: flex-end;
    height: 50px;
    padding: 0 64px;
    border: 0;
    background: #000;
    color: #f5f5f5;
    font-size: 20px;
    font-weight: 400;
    transition: background 0.2s ease;
}

.detail-btn:hover { background: var(--red); }

/* ---- Tab chiến dịch ---- */
.campaign-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 64px;
    flex-wrap: wrap;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.campaign-tabs-select {
    display: none;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
}

.campaign-tab {
    position: relative;
    height: 56px;
    padding: 18px 22px 0;
    border: 0;
    background: transparent;
    color: var(--text-gray);
    font-size: px;
    line-height: 26px;
}

.campaign-tab:hover {
    color: #fff;
    background: #ba1616;
    padding: 18px 22px 0;
}
.campaign-tab.active { color: #000; }
.campaign-tab.active:hover { color: #ffffff; }


.campaign-tab.active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    margin-left: -12px;
    width: 24px;
    height: 8px;
    background-color: #ba1616;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDI0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC4yNCAxLjE0Mjg1VjMuNDI4NTdINy4yTDAgMi4yODU3MVYxLjE0Mjg1SDE4LjI0WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE4LjI0IDIuMjg1NzFMMTguMjQgMy40Mjg1Nkw3LjY3OTk5IDMuNDI4NTZMNy42Nzk5OSAyLjI4NTcxTDE4LjI0IDIuMjg1NzFaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTYuNzQ5OCAwLjU3MTQxMkwxNi43NDk4IDIuODU3MTNMOS4wMzI3IDIuODU3MTJMOS4wMzI3IDAuNTcxNDExTDE2Ljc0OTggMC41NzE0MTJaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTQuMjQ5NSAyLjQzNjFMMTQuMjQ5NSA0LjQyMTQ1TDEyLjYzMDQgNC40MjE0NUwxMi42MzA0IDIuNDM2MUwxNC4yNDk1IDIuNDM2MVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMC4zIi8+CjxwYXRoIGQ9Ik0xLjkyMDAxIDkuOTkxMThlLTA4TDEuOTIwMDEgMi4yODU3MUwwLjk2MDAwNyAyLjI4NTcxTDAuOTYwMDA3IDBMMS45MjAwMSA5Ljk5MTE4ZS0wOFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMS41MiAyLjkyMzk3QzExLjIzMjMgNC43NjQ3MSAxMC45MTUzIDYuMDc5NDQgMTAuNDUxNyA3LjA4OTI2QzkuOTYyMTMgOC4xNTU1IDEwLjQ2NDIgNy40NTg1NCA5LjgzMzQxIDcuOTk5OTlMNy45MTE2NSA2Ljg1NzEzQzguNDI0ODUgNi40MTY2MiA4LjQ4ODMxIDUuNjMzMjQgOC43MTM1MSA1LjE0Mjg1QzguOTY0NiA0LjU5NTk2IDkuMDE1NjggNC4wMjUzMSA5LjI4NzU1IDIuMjg1NzFMMTEuNTIgMi45MjM5N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNS42OTY0IDIuMzgwN0MxNi40MDExIDMuODU5NDUgMTYuMjc1NiAzLjQzMzI2IDE2LjQzMyA0LjM1MTM4QzE2LjU5NTMgNS4yOTgzNSAxNi40OTg2IDYuMDMxNzMgMTYuMzM0MSA2LjgxNzE4TDE1LjI1NzQgNi4zMjk5QzE1LjQwNTggNS42MjA5OSAxNS40NjA4IDUuMTA5NDcgMTUuMzQ5MiA0LjQ1NzlDMTUuMjMyNSAzLjc3NzQ5IDE0Ljk0MTMgMy44MTc5MSAxNC4yNTY0IDIuMzgwN0wxNS42OTY0IDIuMzgwN1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNy4yOCAxLjE0Mjg3QzIwLjQ4MzggMS44NTM4NSAyMS41MjAyIDEuMjcxOTUgMjQgMi4zMTI1N0wyMy4yNjgzIDUuNzE0MjlDMjAuNjk5NSA0LjYzNjMxIDIwLjM1MSAzLjU1NjkxIDE3LjM3OTEgMi44OTc0MkwxNy4yOCAxLjE0Mjg3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDI0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC4yNCAxLjE0Mjg1VjMuNDI4NTdINy4yTDAgMi4yODU3MVYxLjE0Mjg1SDE4LjI0WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE4LjI0IDIuMjg1NzFMMTguMjQgMy40Mjg1Nkw3LjY3OTk5IDMuNDI4NTZMNy42Nzk5OSAyLjI4NTcxTDE4LjI0IDIuMjg1NzFaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTYuNzQ5OCAwLjU3MTQxMkwxNi43NDk4IDIuODU3MTNMOS4wMzI3IDIuODU3MTJMOS4wMzI3IDAuNTcxNDExTDE2Ljc0OTggMC41NzE0MTJaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTQuMjQ5NSAyLjQzNjFMMTQuMjQ5NSA0LjQyMTQ1TDEyLjYzMDQgNC40MjE0NUwxMi42MzA0IDIuNDM2MUwxNC4yNDk1IDIuNDM2MVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMC4zIi8+CjxwYXRoIGQ9Ik0xLjkyMDAxIDkuOTkxMThlLTA4TDEuOTIwMDEgMi4yODU3MUwwLjk2MDAwNyAyLjI4NTcxTDAuOTYwMDA3IDBMMS45MjAwMSA5Ljk5MTE4ZS0wOFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMS41MiAyLjkyMzk3QzExLjIzMjMgNC43NjQ3MSAxMC45MTUzIDYuMDc5NDQgMTAuNDUxNyA3LjA4OTI2QzkuOTYyMTMgOC4xNTU1IDEwLjQ2NDIgNy40NTg1NCA5LjgzMzQxIDcuOTk5OTlMNy45MTE2NSA2Ljg1NzEzQzguNDI0ODUgNi40MTY2MiA4LjQ4ODMxIDUuNjMzMjQgOC43MTM1MSA1LjE0Mjg1QzguOTY0NiA0LjU5NTk2IDkuMDE1NjggNC4wMjUzMSA5LjI4NzU1IDIuMjg1NzFMMTEuNTIgMi45MjM5N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNS42OTY0IDIuMzgwN0MxNi40MDExIDMuODU5NDUgMTYuMjc1NiAzLjQzMzI2IDE2LjQzMyA0LjM1MTM4QzE2LjU5NTMgNS4yOTgzNSAxNi40OTg2IDYuMDMxNzMgMTYuMzM0MSA2LjgxNzE4TDE1LjI1NzQgNi4zMjk5QzE1LjQwNTggNS42MjA5OSAxNS40NjA4IDUuMTA5NDcgMTUuMzQ5MiA0LjQ1NzlDMTUuMjMyNSAzLjc3NzQ5IDE0Ljk0MTMgMy44MTc5MSAxNC4yNTY0IDIuMzgwN0wxNS42OTY0IDIuMzgwN1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNy4yOCAxLjE0Mjg3QzIwLjQ4MzggMS44NTM4NSAyMS41MjAyIDEuMjcxOTUgMjQgMi4zMTI1N0wyMy4yNjgzIDUuNzE0MjlDMjAuNjk5NSA0LjYzNjMxIDIwLjM1MSAzLjU1NjkxIDE3LjM3OTEgMi44OTc0MkwxNy4yOCAxLjE0Mjg3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ============================================
   DETAIL SHELL (campaign-detail.html)
   ============================================ */

.detail-shell { min-height: 100vh; }

.detail-banner,
.detail-body {
    position: relative;
    z-index: 1;
}

.detail-banner {
    position: relative;
    height: 130px;
    width: 40%;
    background: linear-gradient(110deg, var(--red), #7a1a1e 70%, transparent);
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-lg);
    gap: var(--sp-md);
    overflow: hidden;
}

.detail-banner h1 {
    font-weight: 500;
    font-size: 32px;
    color: white;
    z-index: 1;
    line-height: 1.25;
}

.back-btn {
    width: 54px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: white; flex-shrink: 0;
    transition: all 0.2s ease;
}
.back-btn:hover { color: #ff1b1b;
}

.detail-body {
    display: flex;
    /*max-width: 1200px;*/
    margin: 0 left;
    padding: var(--sp-lg);
    gap: var(--sp-xlg);
    align-items: flex-start;
    z-index: 5;
}
.article-list {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: var(--sp-lg);
    max-height: calc(100vh - var(--sp-lg) * 2);
    overflow-y: auto;
}

.article-list-select {
    display: none;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
}

.article-item {
    padding: 12px 14px;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-gray-dim);
    cursor: pointer; border-left: 2px solid transparent; transition: all 0.2s ease;
}
.article-item:hover { color: #000; }
.article-item.active { background: var(--black); color: #ffffff; font-weight: 500; }

.article-content {
    flex: 1;
    min-width: 0;
    max-width: 90vh;
}
.article-content h2 { font-weight: 500; font-size: 28px; margin-bottom: var(--sp-md); }
.article-body img { max-width: 100%; display: block; margin: var(--sp-sm) 0; }
.article-body p { margin-bottom: var(--sp-sm); font-size: 16px; color: #222; }

/* Ảnh chèn trong bài luôn bọc trong <a> để bấm mở tab mới xem ảnh gốc */
.article-image-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.article-image-link img { transition: opacity 0.2s ease; }
/* Ảnh thu nhỏ còn 50% chiều rộng khung nội dung */
.article-image-link.img-half { width: 50%; }
@media (max-width: 640px) { .article-image-link.img-half { width: 100%; } }
.article-image-link:hover img { opacity: 0.85; }

/* Đường kẻ ngang chia section trong nội dung bài */
.article-divider,
.article-body hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: var(--sp-lg) 0;
}

/* ---- Khối trích dẫn (Quote) — dùng chung cho editor admin & trang đọc ---- */
.article-quote {
    margin: var(--sp-md) 0;
    padding: 0 20% 0 3%;
    border-left: 4px solid #d64a4a;
}

.article-quote .quote-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.5;
    color: inherit;
    margin: 0 0 var(--sp-sm) 0;
}

.article-quote .quote-author {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    color: var(--text-gray-dim);
}

/* ============================================
   TIMELINE DỌC (campaign-detail)
   ============================================ */

/* Thanh chọn bài trên mobile: dropdown + nút icon timeline (ẩn ở desktop) */
.article-mobile-bar { display: none; gap: 8px; align-items: stretch; }
.article-mobile-bar .article-list-select { flex: 1; width: auto; min-width: 0; }

.timeline-toggle {
    flex-shrink: 0;
    width: 46px;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.timeline-toggle:hover { color: var(--red); border-color: var(--red); }

/* Cột timeline bên phải articleContent — chỉ hiện khi campaign có mốc, chỉ ở desktop */
.timeline-panel {
    display: none;
    width: clamp(260px, 22vw, 400px);
    flex-shrink: 0;
    position: sticky;
    top: var(--sp-lg);
    max-height: calc(100vh - var(--sp-lg) * 2);
    /* overflow-y: auto; */
    scrollbar-width: thin;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .detail-body.has-timeline .timeline-panel { display: block; }
    .detail-body.has-timeline .article-list { width: 20%; }
}

.timeline {
    position: relative;
    padding: var(--sp-sm) 0;
}

/* Mỗi mốc: ảnh tròn bên trái, tiêu đề + năm bên phải */
.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    transition: opacity 0.3s ease;
}
.timeline-item:last-child { margin-bottom: 8px; }

/* Đường thẳng mảnh nối các mốc (chừa khe hở với ảnh tròn phía trên/dưới) */
.timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 32px;
    top: 72px;
    width: 2px;
    height: 16px;
    background-color: #d64a4a;
}

.tl-circle {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ccc;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.tl-circle-empty { background: #d9d9d9; }

.tl-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.tl-title { font-size: 15px; font-weight: 500; line-height: 1.3; transition: color 0.3s ease; }
.tl-date { font-size: 14px; transition: color 0.3s ease; }

/* Mốc có liên kết article: bấm được */
.timeline-item.linked { cursor: pointer; }
.timeline-item.linked:hover .tl-circle { filter: grayscale(0.4); }

/* Khi đang có mốc active, các mốc còn lại mờ đi */
.timeline.has-active .timeline-item:not(.active) { opacity: 0.5; }

/* Mốc tương ứng article đang đọc — nổi bật */
.timeline-item.active .tl-circle { transform: scale(1); filter: grayscale(0); box-shadow: 0 0 0 3px var(--red); }
.timeline-item.active .tl-title,
.timeline-item.active .tl-date { color: var(--red); }

/* ---- Modal sheet (mobile/iPad) ---- */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}
.sheet.open { visibility: visible; transition-delay: 0s; }

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sheet.open .sheet-backdrop { opacity: 1; }

.sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sheet.open .sheet-panel { transform: translateY(0); }

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.sheet-title { font-size: 18px; font-weight: 500; }
.sheet-close { display: flex; padding: 4px; border: 0; background: none; color: #000; cursor: pointer; }
.sheet-close:hover { color: var(--red); }

.sheet-body { overflow-y: auto; padding: var(--sp-sm) var(--sp-md) var(--sp-lg); }

/* ---- Card "Chiến dịch tiếp theo" ---- */
.next-campaign-card {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
    padding: var(--sp-sm);
    border: 1px solid #eee;
    background: var(--bg-panel);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.next-campaign-card:hover { border-color: var(--red); background: #f5f0ef; }

.next-campaign-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(1);
    background: #ddd;
}

.next-campaign-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-campaign-label {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-gray-dim);
}

.next-campaign-title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.next-campaign-arrow {
    color: var(--red);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.next-campaign-card:hover .next-campaign-arrow { transform: translateX(4px); }

/* ============================================
   SHARED
   ============================================ */

.loading-mini { color: var(--text-gray-dim); font-size: 0.85rem; padding: var(--sp-sm) 0; }

/* ---- Back to top ---- */
.back-to-top {
    position: fixed;
    right: var(--sp-md);
    bottom: var(--sp-md);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #222;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 30;
}
 
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--red); }