/* =============================================================================
   SMO CARD — TRANG KIẾN THỨC
   -----------------------------------------------------------------------------
   Nạp SAU home-v2.css, dùng lại bảng màu / nút / khối CTA của trang chủ.
   ========================================================================== */
#page-blog, #page-blog-post {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-deep: #8F621C;
    --c-gold-wash: #FDF7EF;
    --c-ink: #101830;
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
    --g-metal-soft: linear-gradient(135deg, #F7E9C6 0%, #E0BC6A 50%, #C08A2E 100%);
}

/* =============================================================================
   HERO
   ========================================================================== */
.blog-hero, .post__head {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.4rem + 3.5vw, 4.5rem) clamp(3rem, 1.8rem + 3.5vw, 5rem);
    background-color: #F6E9D2;
    background-image:
        radial-gradient(rgba(140, 104, 48, .10) 1px, transparent 1px),
        radial-gradient(40rem 26rem at 76% 6%, rgba(240, 202, 128, .8), transparent 62%),
        radial-gradient(30rem 24rem at 6% 96%, rgba(122, 148, 200, .28), transparent 66%),
        linear-gradient(164deg, #FDF4E4 0%, #F7E7CC 48%, #F1DCBE 100%);
    background-size: 24px 24px, auto, auto, auto;
}
.blog-hero { text-align: center; }
.blog-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.blog-hero__deco::before {
    content: "";
    position: absolute;
    top: -5rem; right: -8rem;
    width: 30rem; height: 22rem;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(90deg,
        rgba(184, 128, 40, .22) 0 2px, transparent 2px 16px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}
.blog-hero__inner { position: relative; z-index: 1; }
.blog-hero .hero-warm__badge { margin-inline: auto; }
.blog-hero h1 {
    max-width: 20ch;
    margin: 0 auto var(--s-4);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
}
.blog-hero__lede {
    max-width: 56ch;
    margin: 0 auto;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

/* =============================================================================
   Chú thích ngày / tác giả
   ========================================================================== */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    font-size: var(--fs-label);
    color: var(--c-text-muted);
}
.blog-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: var(--s-3);
    padding: 4px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: #E0BC6A;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* =============================================================================
   Bài mới nhất
   ========================================================================== */
.blog-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(var(--s-6), 4vw, var(--s-12));
    align-items: center;
    margin-bottom: var(--s-12);
    padding: var(--s-5);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    background: var(--c-paper);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.blog-lead:hover { transform: translateY(-3px); box-shadow: 0 2px 5px rgba(16,24,48,.06), 0 18px 34px rgba(16,24,48,.12); }
.blog-lead__media { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--c-smoke); }
.blog-lead__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.blog-lead__title {
    display: block;
    margin-bottom: var(--s-3);
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: -0.01em;
}
.blog-lead__excerpt {
    display: block;
    margin-bottom: var(--s-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

/* Không có ảnh thì vẽ một mảng chuyển sắc thay vì để ô trắng. */
.blog-lead__placeholder, .blogcard__placeholder {
    display: block;
    aspect-ratio: 16/9;
    background:
        radial-gradient(120% 140% at 78% 8%, rgba(255,255,255,.28), transparent 62%),
        linear-gradient(146deg, #1B2A4A, #101830 62%, #B88028);
}

/* =============================================================================
   Lưới bài viết
   ========================================================================== */
.bloggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.blogcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    background: var(--c-paper);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.blogcard:hover { transform: translateY(-3px); box-shadow: 0 2px 5px rgba(16,24,48,.06), 0 16px 30px rgba(16,24,48,.12); }
.blogcard__media { display: block; background: var(--c-smoke); }
.blogcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.blogcard__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.blogcard__title { font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.35; }
.blogcard__excerpt { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.blogcard .blog-meta { margin-top: auto; padding-top: var(--s-2); }

/* =============================================================================
   Trạng thái rỗng
   ========================================================================== */
.blog-empty {
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--s-12) var(--s-8);
    text-align: center;
    border: 1px dashed var(--c-smoke-deep);
    border-radius: var(--r-lg);
    background: var(--c-smoke);
}
.blog-empty__icon {
    display: grid; place-items: center;
    width: 58px; height: 58px;
    margin: 0 auto var(--s-5);
    border-radius: 16px;
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: #E0BC6A;
}
.blog-empty h2 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.blog-empty p { margin: 0 auto var(--s-6); max-width: 46ch; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.blog-empty__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* =============================================================================
   Trang bài viết
   ========================================================================== */
.post__headinner { position: relative; z-index: 1; max-width: 46rem; }
.post__crumb { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-label); color: var(--c-text-muted); }
.post__crumb a { color: var(--c-text-muted); }
.post__crumb a:hover { color: var(--c-gold); }
.post__head h1 {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--c-ink);
}
.post__meta { margin: 0; }

.post__wrap { max-width: 46rem; padding-block: var(--s-12); }
.post__cover { display: block; width: 100%; height: auto; margin-bottom: var(--s-8); border-radius: var(--r-lg); }
.post__summary {
    margin: 0 0 var(--s-8);
    padding-left: var(--s-5);
    border-left: 3px solid var(--c-gold);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

/* Nội dung do quản trị viên soạn — nêu kiểu cho các thẻ HTML thường gặp, vì
   không kiểm soát được markup họ dán vào. */
.post__body { font-size: var(--fs-body); line-height: var(--lh-body); }
.post__body > * + * { margin-top: var(--s-5); }
.post__body h2 { margin-top: var(--s-10); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.post__body h3 { margin-top: var(--s-8); font-size: var(--fs-body-lg); }
.post__body ul, .post__body ol { padding-left: var(--s-6); }
.post__body li + li { margin-top: var(--s-2); }
.post__body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.post__body a { color: var(--c-indigo); }
.post__body blockquote {
    margin-inline: 0;
    padding-left: var(--s-5);
    border-left: 3px solid var(--c-smoke-deep);
    color: var(--c-text-muted);
}
.post__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.post__body th, .post__body td { padding: var(--s-2) var(--s-3); border: 1px solid var(--c-smoke-deep); text-align: left; }
.post__body pre { overflow-x: auto; padding: var(--s-4); border-radius: var(--r-md); background: var(--c-smoke); font-size: var(--fs-sm); }

.post__foot { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--c-smoke-deep); }

/* =============================================================================
   Màn hẹp
   ========================================================================== */
@media (max-width: 1000px) {
    .bloggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-lead { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .bloggrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-lead, .blogcard { transition: none; }
    .blog-lead:hover, .blogcard:hover { transform: none; }
}