﻿/* Di sản Đồng Nai — dùng chung cho LHUVNTW/DiSanDongNai, DanhSach, BaiViet. Viết tay, mọi class có tiền tố ds-. */
.ds-scope {
    --ds-ink: #2b1d14;
    --ds-text: #4a3a2e;
    --ds-muted: #7a6a5c;
    --ds-clay: #9a3b1f;
    --ds-clay-dark: #6e2913;
    --ds-gold: #c8962e;
    --ds-cream: #faf5ec;
    --ds-sand: #f1e7d6;
    --ds-line: #e4d6bf;
    font-family: "Source Sans 3", system-ui, sans-serif;
    color: var(--ds-text);
    background: #fff;
    overflow-x: clip;
    font-size: 1rem;
    line-height: 1.65;
}
.ds-scope h1, .ds-scope h2, .ds-scope h3 { font-family: "Lora", Georgia, serif; color: var(--ds-ink); }

/* Hero */
.ds-hero {
    position: relative;
    color: #fff;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(200,150,46,.35), transparent 55%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, #3b1f12 0%, #6e2913 55%, #9a3b1f 100%);
}
.ds-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 40px;
    background: var(--ds-cream);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 85%, 0 0);
}
.ds-hero-inner { position: relative; z-index: 1; padding-top: 4.5rem; padding-bottom: 6rem; max-width: 60rem; }
.ds-eyebrow { margin: 0 0 .75rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f3d48b; }
.ds-scope .ds-hero-title { margin: 0; font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.1; font-weight: 700; color: #fff; }
.ds-hero-lead { margin: 1.25rem 0 0; max-width: 42rem; font-size: 1.15rem; color: rgba(255,255,255,.9); }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ds-btn {
    display: inline-flex; align-items: center; padding: .7rem 1.4rem; border-radius: 999px;
    background: var(--ds-gold); color: #2b1d14; font-weight: 700; text-decoration: none; transition: background .2s;
}
.ds-btn:hover { background: #e0ae45; color: #2b1d14; text-decoration: none; }
.ds-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.ds-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Loại hình */
.ds-types { background: var(--ds-cream); padding: 1rem 0 3rem; }
.ds-type-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ds-type-list li {
    display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start;
    padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--ds-line); border-radius: 14px;
}
.ds-type-ico { grid-row: span 2; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--ds-sand); fill: none; stroke: var(--ds-clay); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-type-list b { color: var(--ds-ink); line-height: 1.3; }
.ds-type-list span { font-size: .9rem; color: var(--ds-muted); line-height: 1.4; }

/* Khối chung */
.ds-section { padding: 4rem 0; }
.ds-section-alt { background: var(--ds-cream); }
.ds-kicker { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-clay); }
.ds-scope .ds-h2 { margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.4rem); line-height: 1.2; font-weight: 700; }
.ds-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.ds-link { font-weight: 700; color: var(--ds-clay); text-decoration: none; }
.ds-link::after { content: " →"; }
.ds-link:hover { color: var(--ds-clay-dark); text-decoration: underline; }

/* Giới thiệu */
.ds-intro { display: grid; gap: 2rem; }
.ds-intro-head { border-top: 3px solid var(--ds-gold); padding-top: 1rem; }
.ds-intro-body .lhu-prose { color: var(--ds-text); }
.ds-intro-body .lhu-prose img { max-width: 100%; height: auto; border-radius: 12px; }
@media (min-width: 992px) {
    .ds-intro { grid-template-columns: 18rem 1fr; gap: 4rem; }
}

/* Thẻ bài viết */
.ds-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ds-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-cards > li { min-width: 0; }
.ds-card {
    height: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--ds-line); border-radius: 16px; transition: box-shadow .2s, transform .2s;
}
.ds-card:hover { box-shadow: 0 14px 30px -14px rgba(59,31,18,.35); transform: translateY(-2px); }
.ds-card .NImg { overflow: hidden; }
.ds-card .NImg a { display: block; padding-top: 62%; background-size: cover; background-position: center; transition: transform .4s; }
.ds-card:hover .NImg a { transform: scale(1.04); }
.ds-card-body { padding: 1.1rem 1.25rem 1.4rem; }
.ds-card .NTitle { font-family: "Lora", Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.ds-card .NTitle a { color: var(--ds-ink); text-decoration: none; }
.ds-card .NTitle a:hover { color: var(--ds-clay); }
.ds-card .NTime { margin-top: .25rem; font-size: .85rem; color: var(--ds-muted); }
.ds-card .NIntro { margin-top: .5rem; color: var(--ds-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Bài đầu tiên nổi bật (landing) */
@media (min-width: 992px) {
    .ds-cards-feature > li:first-child { grid-column: span 2; grid-row: span 2; }
    .ds-cards-feature > li:first-child .NImg a { padding-top: 58%; }
    .ds-cards-feature > li:first-child .NTitle { font-size: 1.6rem; }
    .ds-cards-feature > li:first-child .NIntro { -webkit-line-clamp: 5; font-size: 1.05rem; }
}

/* Đầu trang con (DanhSach, BaiViet) */
.ds-band { background: linear-gradient(135deg, #3b1f12 0%, #6e2913 60%, #9a3b1f 100%); color: #fff; padding: 2.5rem 0; }
.ds-band .pc-crumb, .ds-band .pc-crumb a { color: rgba(255,255,255,.85); }
.ds-band .pc-sep { color: #f3d48b; }
.ds-scope .ds-band h1 { margin: .5rem 0 0; color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; }
.ds-band-lead { margin: .75rem 0 0; max-width: 46rem; color: rgba(255,255,255,.88); font-size: 1.1rem; }

/* Xem thêm */
.ds-more:not(:empty) { margin-top: 2rem; text-align: center; }
.ds-more a { display: inline-block; padding: .65rem 1.4rem; border-radius: 999px; border: 2px solid var(--ds-clay); color: var(--ds-clay); font-weight: 700; text-decoration: none; }
.ds-more a:hover { background: var(--ds-clay); color: #fff; }

/* Trang đọc */
.ds-read { display: grid; gap: 3rem; padding-top: 2rem; padding-bottom: 4rem; }
@media (min-width: 992px) { .ds-read { grid-template-columns: minmax(0, 1fr) 20rem; } }
.ds-crumb { margin-bottom: 1.25rem; }
.ds-detail .NTitle { margin: 0; font-family: "Lora", Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.2; font-weight: 700; color: var(--ds-ink); }
.ds-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ds-line); font-size: .9rem; color: var(--ds-muted); }
.ds-detail .NIntro { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ds-gold); background: var(--ds-cream); font-size: 1.1rem; font-weight: 600; color: var(--ds-ink); }
.ds-detail .NContent img { max-width: 100%; height: auto; border-radius: 10px; }
.ds-detail .NSource { margin-top: 1.5rem; text-align: right; font-weight: 600; color: var(--ds-ink); }
.ds-detail .NKey { margin-top: 1rem; font-size: .9rem; color: var(--ds-muted); }
.ds-side-h { margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 3px solid var(--ds-gold); font-size: 1.35rem; }
.ds-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ds-side li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.ds-side .NImg a { display: block; padding-top: 70%; border-radius: 8px; background-size: cover; background-position: center; }
.ds-side .NTitle { font-weight: 600; line-height: 1.35; }
.ds-side .NTitle a { color: var(--ds-ink); text-decoration: none; }
.ds-side .NTitle a:hover { color: var(--ds-clay); }
.ds-side li.Selected { display: none; }
.ds-side-card { margin-top: 2rem; padding: 1.25rem; border-radius: 14px; background: var(--ds-cream); border: 1px solid var(--ds-line); }
.ds-side-card p { margin: 0 0 .75rem; }
@media (min-width: 992px) { .ds-aside { position: sticky; top: 6rem; align-self: start; } }
