/**
 * Khối "Muốn nhìn chuyện này từ một góc khác?" (tarot_flow_crosslinks trong functions.php): tiêu đề + thẻ chứa 3 câu,
 * mỗi câu một link trong chữ, ngăn bằng đường gạch đứt (16/10/2026, dạng mục Đọc thêm).
 */
.flow-crosslinks {
    width: 100%;
    max-width: 900px;
    margin: 2.2rem auto 0;
    text-align: left;
}
.flow-crosslinks .flow-crosslinks-title {
    margin: 0 0 1rem;
    text-align: center;
    font-family: inherit;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--theme-text-primary, var(--theme-text-body));
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: currentColor;
}
.flow-crosslinks-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 1.5rem;
    border-radius: 18px;
    border: 1px solid var(--theme-surface-3, var(--theme-border));
    background: var(--theme-surface-1);
}
.flow-crosslinks-list li {
    margin: 0;
    padding: 0.95rem 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--theme-text-body);
}
.flow-crosslinks-list li + li { border-top: 1px dashed var(--theme-border); }
.flow-crosslinks-list a {
    font-weight: 700;
    color: var(--theme-gold-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.flow-crosslinks-list a:hover,
.flow-crosslinks-list a:focus-visible { text-decoration-thickness: 2px; }
@media (max-width: 720px) {
    .flow-crosslinks { margin-top: 1.6rem; }
    .flow-crosslinks-list { padding: 0.2rem 1rem; border-radius: 14px; }
    .flow-crosslinks-list li { padding: 0.85rem 0; font-size: 0.95rem; }
}

/* Link sang bài từng lá: mũi tên vẽ bằng CSS để không lẫn vào anchor text. */
#dlPostLink::after, .dl-past-link::after, .flow-sheet-link::after { content: " →"; }

/* Khối nằm cuối trang (trước chân trang), cùng chiều rộng và lề với các mục khác: 32px trên màn rộng, 16px trên điện thoại. */
.flow-crosslinks-bottom {
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px 3.5rem;
}
.flow-crosslinks-bottom .flow-crosslinks { margin-top: 1rem; }
@media (max-width: 768px) {
    .flow-crosslinks-bottom { padding: 0 16px 2.5rem; }
}
