/* ==========================================================================
   casper-vi — tùy biến trên Casper 5.9 (MIT)
   1) Khối nổi bật: 1 bài lớn + 5 bài nhỏ
   2) Bo góc ảnh, thẻ, nút, ô nhập — bỏ các góc nhọn
   ========================================================================== */

:root {
    --bf-radius: 16px;
    --bf-radius-sm: 10px;
    --bf-radius-pill: 999px;
    --bf-line: rgba(0, 0, 0, 0.08);
    --bf-surface: #fff;
    --bf-tint: rgba(0, 0, 0, 0.045);
    --bf-text: #15171a;
    --bf-panel: #f4f6fa;
}

html.dark-mode {
    --bf-line: rgba(255, 255, 255, 0.12);
    --bf-surface: #23252a;
    --bf-tint: rgba(255, 255, 255, 0.07);
    --bf-text: rgba(255, 255, 255, .88);
    --bf-panel: rgba(255, 255, 255, .045);
}

/* Chế độ "tự động": theo cài đặt hệ điều hành */
@media (prefers-color-scheme: dark) {
    html.auto-color {
        --bf-line: rgba(255, 255, 255, 0.12);
        --bf-surface: #23252a;
        --bf-tint: rgba(255, 255, 255, 0.07);
        --bf-text: rgba(255, 255, 255, .88);
        --bf-panel: rgba(255, 255, 255, .045);
    }
}

/* ------------------------------------------------ 0. Thu gọn phần đầu trang */

/* Casper đệm 180px khi không có ảnh bìa — quá thưa, kéo nội dung xuống thấp */
body:not(.has-cover) .site-header-content {
    padding-top: 28px;      /* bằng đúng .bf-section margin-top bên dưới */
    padding-bottom: 0;
}

/* Hai bản logo: sáng và tối, mỗi chế độ hiện đúng một bản */
.kb-logo--dark {
    display: none;
}

html.dark-mode .kb-logo--light {
    display: none;
}

html.dark-mode .kb-logo--dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    html.auto-color .kb-logo--light {
        display: none;
    }

    html.auto-color .kb-logo--dark {
        display: inline-block;
    }
}

/* Logo đã có ở thanh trên, không lặp lại trong khối giới thiệu */
body:not(.has-cover) .site-header-content .site-logo {
    display: none;
}

body:not(.has-cover) .site-header-content .site-title {
    font-size: 5.2rem;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

body:not(.has-cover) .site-header-content .site-description {
    margin-top: 10px;
    font-size: 2.1rem;
    line-height: 1.4;
    max-width: 620px;
}

@media (max-width: 700px) {
    body:not(.has-cover) .site-header-content {
        padding-top: 40px;
    }

    body:not(.has-cover) .site-header-content .site-title {
        font-size: 3.4rem;
    }

    body:not(.has-cover) .site-header-content .site-description {
        font-size: 1.7rem;
    }
}

/* ------------------------------------------------ 1. Khối nổi bật */

.bf-section {
    margin-top: 28px;
}

.bf-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-auto-rows: min-content;
    gap: 12px 40px;
    align-content: start;
}

.bf-item {
    color: inherit;
    text-decoration: none;
}

.bf-item:hover {
    color: inherit;
}

/* Bài lớn chiếm trọn cột trái, kéo dài qua 5 hàng của cột phải */
.bf-lead {
    grid-column: 1;
    grid-row: 1 / span 5;
    display: flex;
    flex-direction: column;
}

.bf-lead .bf-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--bf-radius);
    overflow: hidden;
    background: var(--color-lighter-gray);
}

.bf-lead .bf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bf-lead:hover .bf-thumb img {
    transform: scale(1.03);
}

.bf-lead .bf-body {
    padding-top: 18px;
}

.bf-lead .bf-title {
    margin: 8px 0 10px;
    font-size: 2.6rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* 5 bài nhỏ ở cột phải */
.bf-row {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bf-line);
}

.bf-row:last-child {
    border-bottom: 0;
}

.bf-row .bf-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 68px;
    border-radius: var(--bf-radius-sm);
    overflow: hidden;
    background: var(--color-lighter-gray);
}

.bf-row .bf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bf-row .bf-body {
    flex: 1;
    min-width: 0;
}

.bf-row .bf-title {
    margin: 0 0 4px;
    font-size: 1.65rem;
    font-weight: 650;
    line-height: 1.35;
}

.bf-row:hover .bf-title {
    opacity: 0.72;
}

.bf-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--bf-radius-pill);
    background: var(--ghost-accent-color);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.bf-meta {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}

.bf-section-title {
    margin: 56px 0 4px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (max-width: 900px) {
    .bf-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bf-lead {
        grid-column: 1;
        grid-row: auto;
        margin-bottom: 14px;
    }

    .bf-row {
        grid-column: 1;
    }

    .bf-lead .bf-title {
        font-size: 2.2rem;
    }
}

/* ------------------------------------------------ 1a. Mục theo chuyên mục */

.bts {
    margin-top: 56px;
}

.bts-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--bf-line);
}

.bts-title {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.bts-title a {
    color: inherit;
    text-decoration: none;
}

.bts-title a:hover {
    color: var(--ghost-accent-color);
}

.bts-viewall {
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    padding: 7px 16px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-pill);
    transition: border-color 0.18s ease, color 0.18s ease;
}

.bts-viewall:hover {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

.bts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 26px;
}

.bc-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bc-thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--bf-radius);
    overflow: hidden;
    background: var(--bf-line);
    margin-bottom: 14px;
}

.bc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.bc:hover .bc-thumb img {
    transform: scale(1.04);
}

.bc-tag {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ghost-accent-color);
}

.bc-title {
    margin: 0 0 8px;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.bc:hover .bc-title {
    opacity: 0.75;
}

.bc-excerpt {
    margin: 0 0 10px;
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--color-secondary-text);
}

.bc-meta {
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-secondary-text);
}

@media (max-width: 1000px) {
    .bts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bts {
        margin-top: 40px;
    }

    .bts-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .bts-title {
        font-size: 2rem;
    }
}

/* ------------------------------------------------ 1b. Nút đổi sáng/tối/tự động */

.kb-scheme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

.kb-scheme-btn .kb-ico {
    display: none;
    line-height: 0;
}

html[data-scheme="light"] .kb-ico-light,
html[data-scheme="dark"] .kb-ico-dark,
html[data-scheme="auto"] .kb-ico-auto {
    display: block;
}

/* Có 2 nút: một cho thanh desktop, một cho thanh mobile — mỗi khổ chỉ hiện 1 */
.kb-scheme-btn--mobile {
    display: none;
}

@media (max-width: 767px) {
    /* Casper ẩn .gh-head-actions trên mobile (chỉ hiện khi mở menu),
       nên nút desktop không bấm được — dùng nút trong .gh-head-brand */
    .kb-scheme-btn--mobile {
        display: flex;
        width: 32px;
        height: 32px;
        margin-right: 4px;
    }

    /* Thanh mobile vốn 3 cột (logo | tìm kiếm | burger), thêm nút thành 4 */
    #gh-head .gh-head-brand {
        grid-template-columns: 1fr auto auto auto;
    }
}

/* ------------------------------------------------ 1c. Header: logo trái, chuyên mục căn giữa */

/* Luôn hiện logo ở thanh trên, kể cả trang chủ */
#gh-head .gh-head-brand {
    display: flex;
    align-items: center;
}

#gh-head .gh-head-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#gh-head .gh-head-logo img {
    max-height: 51px;
    width: auto;
}

/* Menu chuyên mục nằm giữa thanh header */
@media (min-width: 768px) {
    /* Giữ nguyên lưới của Casper (script dồn menu vào "..." cần cột giữa co giãn),
       chỉ căn giữa các mục bên trong cột đó */
    #gh-head .gh-head-inner {
        align-items: center;
    }

    #gh-head .gh-head-actions {
        justify-content: flex-end;
    }

    #gh-head .gh-head-menu {
        justify-content: center;
    }

    #gh-head .gh-head-menu .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 22px;
    }
}

/* ------------------------------------------------ 1d. Chân trang */

.bfoot {
    margin-top: 80px;
    /* CHỈ đặt padding dọc — .outer của Casper lo lề ngang.
       Viết padding gộp sẽ xoá lề ngang và chữ dính sát mép trên mobile. */
    padding-top: 56px;
    padding-bottom: 28px;
    border-top: 1px solid var(--bf-line);
}

.bfoot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 40px;
}

.bfoot-logo {
    /* inline-block kéo theo line-box của cỡ chữ 2.1rem nên logo bị đẩy xa
       dòng mô tả bên dưới — dùng flex + line-height 0 để sát đúng ảnh */
    display: flex;
    align-items: center;
    line-height: 0;
    margin-bottom: 14px;
    font-size: 2.1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: inherit;
    text-decoration: none;
}

.bfoot-logo img {
    max-height: 51px;
    width: auto;
}

.bfoot-desc {
    margin: 0 0 14px;
    max-width: 34ch;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--color-secondary-text);
}

.bfoot-h {
    margin: 0 0 14px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.bfoot-list,
.bfoot-list .nav {
    list-style: none;
    margin: 0;
    /* helper {{navigation}} của Ghost tự chèn padding trái, làm link thụt
       lệch so với tiêu đề cột — ép về 0 cho thẳng hàng */
    padding-left: 0;
    padding-right: 0;
    text-indent: 0;
}

.bfoot-list li {
    margin-bottom: 9px;
}

.bfoot-list a {
    font-size: 1.5rem;
    color: inherit;
    text-decoration: none;
}

.bfoot-list a:hover {
    color: var(--ghost-accent-color);
}

.bfoot-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--bf-radius-pill);
    background: var(--ghost-accent-color);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration: none;
}

.bfoot-btn:hover {
    opacity: 0.88;
    color: #fff;
}

.bfoot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--bf-line);
    font-size: 1.35rem;
    color: var(--color-secondary-text);
}

.bfoot-bottom a {
    color: inherit;
    text-decoration: none;
}

.bfoot-bottom a:hover {
    color: var(--ghost-accent-color);
}

@media (max-width: 900px) {
    .bfoot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 24px;
    }

    .bfoot-about {
        grid-column: 1 / -1;
    }
}

/* Mobile: giữ 2 cột cho danh sách liên kết thay vì xếp dọc hết —
   xếp một cột làm footer dài lê thê, phải cuộn rất lâu mới hết */
@media (max-width: 560px) {
    .bfoot {
        margin-top: 56px;
        padding-top: 40px;
    }

    .bfoot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 20px;
    }

    .bfoot-about {
        margin-bottom: 4px;
    }

    .bfoot-desc {
        max-width: none;
    }

    .bfoot-sub {
        grid-column: 1 / -1;
    }

    .bfoot-h {
        margin-bottom: 10px;
    }

    .bfoot-list li {
        margin-bottom: 7px;
    }

    .bfoot-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 30px;
    }
}

/* ------------------------------------------------ 1e. Trang đọc bài */

.bpost-feature {
    margin: 0 0 36px;
}

/* Casper đặt .article padding-top max(8vmin,40px) ≈ 56px; giảm một nửa */
.post-template .article,
.page-template .article {
    padding-top: max(4vmin, 20px);
}

.post-template .site-content,
.page-template .site-content {
    padding-top: 0;
}

.bpost-wrap {
    margin-top: 0;
}

.bpost-feature img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--bf-radius);
}

.bpost-feature figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 1.3rem;
    color: var(--color-secondary-text);
}

/* Ba cột: mục lục | nội dung | cột phải */
.bpost-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 280px;
    gap: 48px;
    align-items: start;
}

/* Không có mục lục thì bỏ cột trái, giữ cột phải */
.bpost-layout:has(.bpost-toc[hidden]) {
    grid-template-columns: minmax(0, 1fr) 280px;
}

.bpost-toc-inner {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.bpost-toc-h {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.bpost-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--bf-line);
}

.bpost-toc-item a {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--color-secondary-text);
    text-decoration: none;
}

.bpost-toc-item.lv-h3 a {
    padding-left: 26px;
    font-size: 1.32rem;
}

.bpost-toc-item a:hover {
    color: var(--ghost-accent-color);
}

.bpost-toc-item a.is-active {
    color: var(--ghost-accent-color);
    border-left-color: var(--ghost-accent-color);
    font-weight: 600;
}

.bpost-header {
    margin-bottom: 34px;
}

.bpost-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.bpost-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--bf-radius-pill);
    border: 1px solid var(--bf-line);
    font-size: 1.25rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.bpost-tag:hover {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

.bpost-tag--featured {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

.bpost-title {
    margin: 0 0 16px;
    font-size: 4.2rem;
    font-weight: 780;
    line-height: 1.13;
    letter-spacing: -0.028em;
}

.bpost-excerpt {
    margin: 0 0 22px;
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}

.bpost-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--bf-line);
    font-size: 1.4rem;
    color: var(--color-secondary-text);
}

.bpost-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--bf-radius-pill);
    overflow: hidden;
    flex: 0 0 40px;
}

.bpost-avatar img,
.bpost-avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bpost-byline-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.bpost-author {
    font-weight: 650;
    color: var(--color-darker-gray);
}

html.dark-mode .bpost-author {
    color: rgba(255, 255, 255, 0.9);
}

.bpost-dot {
    opacity: 0.5;
}

/* Nội dung nằm trong cột hẹp hơn: ghi đè biến của gh-canvas để cột phụ về 0,
   nhờ vậy chữ thẳng hàng với tiêu đề mà ảnh wide/full vẫn hoạt động */
.bpost-main .gh-canvas {
    --content-width: 100%;
    --container-width: 100%;
    --gap: 0px;
    padding: 0;
}

/* Cột phải */
.bside-inner {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bside-block {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--bf-line);
}

.bside-block:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bside-about {
    margin: 0 0 14px;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--color-secondary-text);
}

.bside-social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 14px 6px 0;
    font-size: 1.35rem;
    color: var(--color-secondary-text);
    text-decoration: none;
}

.bside-social svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.bside-social:hover {
    color: var(--ghost-accent-color);
}

.bside-h {
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.bside-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bside-list li {
    margin-bottom: 15px;
}

.bside-list a {
    display: block;
    font-size: 1.5rem;
    font-weight: 620;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

.bside-list a:hover {
    color: var(--ghost-accent-color);
}

.bside-list time {
    display: block;
    margin-top: 3px;
    font-size: 1.25rem;
    color: var(--color-secondary-text);
}

.bside-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bside-chip {
    padding: 5px 13px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-pill);
    font-size: 1.28rem;
    color: inherit;
    text-decoration: none;
}

.bside-chip:hover {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

/* ------------------------------------------- Chia sẻ + thảo luận cuối bài */

/* Hộp chia sẻ, dựng theo Bloom: nền nhạt, bo 16px, nhãn rồi tới hàng nút tròn */
.bshare {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--bf-panel);
}

.bshare-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--bf-text);
    letter-spacing: -0.01em;
}

.bshare-list {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Casper đặt "li + li { margin-top: 8px }" và đệm trái cho mọi li, làm ba nút
   sau tụt xuống 8px so với nút đầu. Phải đặt lại ngay trên li. */
.bshare-list li {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.bshare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--bf-line);
    border-radius: 50%;
    background: var(--bf-surface);
    color: var(--bf-text);
    cursor: pointer;
}

.bshare-btn:hover {
    color: #fff;
    background: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

.bshare-btn .icon {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* Biểu tượng liên kết vẽ bằng nét, không tô nền */
.bshare-copy .icon {
    fill: none;
    stroke: currentColor;
}

.bshare-done {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ghost-accent-color);
}

.bshare-done[hidden] {
    display: none;
}

/* Khối thảo luận thành viên, đóng khung cho tách hẳn khỏi thân bài */
.bcomments {
    margin-top: 40px;
}

.bcomments-h {
    margin: 0 0 18px;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--bf-text);
    letter-spacing: -0.02em;
}

.bcomments-box {
    padding: 24px 26px;
    border: 1px solid var(--bf-line);
    border-radius: 16px;
    background: var(--bf-panel);
}

@media (max-width: 600px) {
    .bshare {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px;
    }

    .bcomments-box {
        padding: 18px 16px;
    }
}

.bpost-more {
    margin-top: 72px;
}

/* Màn vừa: bỏ cột phải trước, giữ mục lục */
@media (max-width: 1250px) {
    .bpost-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 40px;
    }

    .bpost-layout:has(.bpost-toc[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 760px;
    }

    .bside {
        display: none;
    }
}

@media (max-width: 900px) {
    .bpost-layout,
    .bpost-layout:has(.bpost-toc[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 760px;
    }

    .bpost-toc {
        margin-bottom: 30px;
    }

    .bpost-toc-inner {
        position: static;
        max-height: none;
        padding: 16px 18px;
        border: 1px solid var(--bf-line);
        border-radius: var(--bf-radius-sm);
    }

    .bpost-title {
        font-size: 3rem;
    }

    .bpost-excerpt {
        font-size: 1.6rem;
    }

    .bpost-feature img {
        max-height: 320px;
    }
}

/* ------------------------------------------------ 1f. Trang chuyên mục / tác giả */

.barchive {
    padding: 56px 0 8px;
    text-align: center;
}

.barchive-avatar {
    width: 84px;
    height: 84px;
    border-radius: var(--bf-radius-pill);
    object-fit: cover;
    margin: 0 auto 18px;
}

.barchive-kicker {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.barchive-title {
    margin: 0 0 12px;
    font-size: 4rem;
    font-weight: 780;
    letter-spacing: -0.028em;
    line-height: 1.12;
}

.barchive-desc {
    margin: 0 auto 10px;
    max-width: 62ch;
    font-size: 1.75rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}

.barchive-count {
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-secondary-text);
}

.bts--archive {
    margin-top: 34px;
}

/* Trang tĩnh: nội dung một cột, căn giữa */
.bpost-layout--page {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

@media (max-width: 700px) {
    .barchive {
        padding: 36px 0 4px;
    }

    .barchive-title {
        font-size: 2.8rem;
    }

    .barchive-desc {
        font-size: 1.6rem;
    }
}

/* ------------------------------------------------ 1g. Nút chuyển ngôn ngữ */

/* Nằm trên header nên phải gọn: một nút nhỏ có mã ngôn ngữ, bấm ra danh sách. */
.blang {
    position: relative;
    display: flex;
    align-items: center;
}

.blang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-pill);
    background: none;
    color: var(--color-secondary-text);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
}

.blang-btn:hover {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

.blang-globe {
    width: 15px;
    height: 15px;
}

.blang-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 148px;
    padding: 6px;
    border: 1px solid var(--bf-line);
    border-radius: 12px;
    background: var(--bf-surface, #fff);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}

.blang-drop[hidden] {
    display: none;
}

.blang-item {
    padding: 7px 11px;
    border-radius: 8px;
    color: var(--bf-text);
    font-size: 1.35rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.blang-item:hover {
    color: var(--ghost-accent-color);
    background: var(--bf-tint, rgba(0, 0, 0, .04));
}

.blang-item.is-current {
    color: #fff;
    background: var(--ghost-accent-color);
}

/* Header chật, màn hẹp thì chỉ giữ quả địa cầu. Trên di động nút nằm sát mép
   TRÁI nên danh sách phải mở sang phải, neo bên phải sẽ lòi ra ngoài màn hình. */
@media (max-width: 600px) {
    .blang-code { display: none; }
    .blang-btn { padding: 0 8px; }

    .blang-drop {
        right: auto;
        left: 0;
    }
}

/* ------------------------------------------------ 2. Bo góc, bỏ góc nhọn */

/* Ảnh thẻ bài viết ở feed */
.post-card-image-link,
.post-card-image {
    border-radius: var(--bf-radius);
}

.post-card-image-link {
    overflow: hidden;
}

/* Thẻ bài viết dạng lưới có nền */
.post-card.keep-ratio .post-card-image-link {
    border-radius: var(--bf-radius);
}

/* Ảnh bìa bài viết + ảnh trong nội dung */
.article-image,
.article-image img,
.gh-canvas .kg-image,
.gh-canvas .kg-card img,
.gh-canvas img {
    border-radius: var(--bf-radius);
}

.kg-width-full img,
.kg-width-full .kg-image {
    border-radius: 0;
}

/* Ảnh bìa trang chủ */
.site-header-cover {
    border-radius: 0;
}

/* Nút, ô nhập, nhãn */
.gh-head-button,
.post-card-featured,
.post-card-primary-tag,
button,
.button,
input[type="button"],
input[type="submit"],
.subscribe-form-input,
.subscribe-form-button,
.gh-head-btn {
    border-radius: var(--bf-radius-pill);
}

.gh-portal-signup-form input,
.footer-cta-button,
.subscribe-form .form-group,
.error-message,
.gh-content blockquote,
.kg-callout-card,
.kg-toggle-card {
    border-radius: var(--bf-radius-sm);
}

/* Khối mã, bảng, ảnh tác giả */
.gh-content pre,
.gh-content table,
.kg-embed-card iframe,
.kg-video-card,
.kg-audio-card {
    border-radius: var(--bf-radius-sm);
    overflow: hidden;
}

/* Bảng trong bài: Casper để đệm 6px, quá chật khi bảng mang số liệu.
   Nền tiêu đề dùng biến tự đảo màu nên chạy được cả nền tối. */
.bpost-content table {
    width: 100%;
    margin: 32px 0;
    border: 1px solid var(--bf-line);
    font-size: 1.6rem;
    line-height: 1.5;
}

/* Casper nhắm ".gh-content table:not(.gist table) th" — độ ưu tiên (0,3,1),
   cao hơn ".bpost-content th". Phải viết cùng dạng thì luật này mới thắng. */
.bpost-content table:not(.gist table) th,
.bpost-content table:not(.gist table) td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--bf-line);
    text-align: left;
    vertical-align: top;
}

.bpost-content table:not(.gist table) th {
    background: var(--bf-panel);
    font-weight: 600;
    color: var(--bf-text);
}

.bpost-content table:not(.gist table) tbody tr:last-child td {
    border-bottom: 0;
}

/* Cột đầu là tên khoản mục, cho rộng hơn để đỡ ngắt dòng vụn */
.bpost-content table:not(.gist table) td:first-child {
    width: 42%;
}

@media (max-width: 600px) {
    .bpost-content table {
        font-size: 1.4rem;
    }

    .bpost-content table:not(.gist table) th,
    .bpost-content table:not(.gist table) td {
        padding: 9px 10px;
    }

    .bpost-content table:not(.gist table) td:first-child {
        width: 38%;
    }
}

.author-profile-image,
.static-avatar,
.avatar-wrapper {
    border-radius: var(--bf-radius-pill);
}

/* Ảnh trong khối bài viết gần đây ở cuối bài */
.read-more-card .post-card-image-link {
    border-radius: var(--bf-radius);
}

/* ------------------------------------------------ 1h. Khối xem nhiều trong tuần */

.btop-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
    .btop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .btop-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------ 1i. Liên kết mạng xã hội */

.bsocial {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.bsocial-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius-pill);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--color-secondary-text);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.bsocial-item svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.bsocial-item:hover {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

/* Trong cột phải trang bài, chỗ hẹp nên chỉ hiện icon */
.bside .bsocial-item {
    padding: 8px;
    width: 34px;
    height: 34px;
    justify-content: center;
}

.bside .bsocial-item span {
    display: none;
}

/* ------------------------------------------------ 1j. Khối mã: bôi đen + nút chép */

/* Casper đặt ::selection nền sáng #daf2fd, khối mã lại chữ sáng trên nền đen
   → bôi đen là mất chữ. Ghi đè riêng cho vùng mã. */
.gh-content pre::selection,
.gh-content pre ::selection,
.gh-content pre code::selection {
    background: var(--ghost-accent-color);
    color: #fff;
    text-shadow: none;
}

.kb-code {
    position: relative;
}

.kb-code > pre {
    margin: 0;
}

.kb-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--bf-radius-pill);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.kb-code:hover .kb-copy,
.kb-copy:focus-visible {
    opacity: 1;
}

.kb-copy:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.kb-copy.is-done {
    opacity: 1;
    color: #0b1020;
    background: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
}

/* Màn cảm ứng không có hover nên luôn hiện nút */
@media (hover: none) {
    .kb-copy {
        opacity: 1;
    }
}

/* ------------------------------------------------ 1k. Nới rộng vùng đọc

   Đo ở khổ 1440px: Bloom cho 74 ký tự mỗi dòng, bản này chỉ 55 — đọc mệt hơn
   và phải cuộn nhiều hơn. Khoảng dễ đọc là 45–75 ký tự/dòng.
   Ba việc dưới đây kéo con số lên khoảng 69.                                */

/* 1. Casper đặt thân bài 2rem (20px). Hạ về 18px cho vừa mắt hơn. */
.bpost-content > p,
.bpost-content > ul,
.bpost-content > ol,
.bpost-content > blockquote {
    font-size: 1.8rem;
    line-height: 1.62em;
}

/* 2. Thu hai cột biên để nhường bề rộng cho cột nội dung.
      Khung tổng vẫn 1200px, chỉ chia lại. */
.bpost-layout {
    grid-template-columns: 200px minmax(0, 1fr) 240px;
    gap: 40px;
}

@media (max-width: 1250px) {
    .bpost-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 36px;
    }
}

/* 3. Ảnh bìa thấp bớt để chữ lên cao hơn gần một màn hình */
.bpost-feature img {
    max-height: 480px;
}

@media (max-width: 900px) {
    .bpost-feature img {
        max-height: 300px;
    }
}

/* Khối 1k ở trên nằm SAU các media query cũ nên đã ghi đè chúng.
   Phải lặp lại quy tắc gộp một cột ở đây, nếu không mobile giữ 2 cột
   và cột chữ bị bóp còn vài từ mỗi dòng. */
@media (max-width: 900px) {
    .bpost-layout,
    .bpost-layout:has(.bpost-toc[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 760px;
    }
}

/* ------------------------------------------------ 1l. Nới khung + rõ mục lục

   Đo ở 1440px so với Bloom:
     khung chứa   1200 (mình) / 1425 (Bloom)
     ảnh trong bài 680 (mình) / 1264 (Bloom)  ← chênh nhiều nhất
     mục lục      14px xám #979797 (mình) / 16px đen (Bloom)
   Ba khối dưới đây thu hẹp khoảng cách đó.                                 */

/* 1. Khung chứa rộng thêm 160px */
.inner {
    max-width: 1360px;
}

/* 2. Cột chữ vẫn giữ ~76 ký tự/dòng (đừng để rộng quá 75 là khó đọc),
      phần dư nhường cho cột phải và cho ảnh tràn ra hai bên */
.bpost-layout {
    grid-template-columns: 220px minmax(0, 700px) 300px;
    gap: 40px;
    justify-content: center;
}

/* 3. Ảnh và sơ đồ trong bài tràn rộng hơn cột chữ */
.bpost-content .kg-width-wide,
.bpost-content figure {
    width: calc(100% + 200px);
    max-width: none;
    margin-left: -100px;
}

.bpost-content figure img {
    width: 100%;
    height: auto;
}

.bpost-feature img {
    max-height: 520px;
}

/* 4. Mục lục: chữ to hơn và đậm màu hơn cho dễ đọc */
.bpost-toc-h {
    font-size: 1.35rem;
    color: var(--color-darker-gray);
}

.bpost-toc-item a {
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 7px 0 7px 16px;
    color: var(--color-darker-gray);
}

.bpost-toc-item.lv-h3 a {
    font-size: 1.5rem;
    padding-left: 28px;
}

html.dark-mode .bpost-toc-h,
html.dark-mode .bpost-toc-item a {
    color: rgba(255, 255, 255, 0.82);
}

/* Màn hẹp: trả ảnh về đúng bề ngang cột, bỏ tràn hai bên */
@media (max-width: 1250px) {
    .bpost-layout {
        grid-template-columns: 200px minmax(0, 700px);
        gap: 36px;
    }
}

@media (max-width: 900px) {
    .bpost-layout,
    .bpost-layout:has(.bpost-toc[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 760px;
    }

    .bpost-content .kg-width-wide,
    .bpost-content figure {
        width: 100%;
        margin-left: 0;
    }
}

/* ------------------------------------------------ 1m. Font chữ và nhịp chữ

   Trước đây theme không tải font nào, chỉ dùng chuỗi font hệ thống
   (-apple-system, Segoe UI, Roboto…) nên mỗi máy hiện một kiểu chữ khác nhau.
   Casper đọc hai biến dưới ở 16 chỗ nhưng không tự định nghĩa, nên khai báo
   ở đây là phủ toàn site.                                                   */

:root {
    --kb-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Noto Sans JP đứng sau Inter: chữ Latin vẫn là Inter, chỉ ký tự Nhật
       mới rơi xuống Noto — trình duyệt tự chọn theo từng ký tự */
    --gh-font-body: Inter, "Noto Sans JP", var(--kb-sys);
    --gh-font-heading: "Be Vietnam Pro", Inter, "Noto Sans JP", var(--kb-sys);
}

body {
    font-family: var(--gh-font-body);
}

h1, h2, h3, h4, h5, h6,
.bpost-title, .bts-title, .bf-lead .bf-title, .bf-row .bf-title,
.bc-title, .barchive-title, .bside-list a, .bfoot-logo,
.gh-head-logo, .site-title {
    font-family: var(--gh-font-heading);
}

/* Tiêu đề bài đang đậm 780 — nặng và bí. Bloom dùng 600. */
.bpost-title {
    font-weight: 650;
    letter-spacing: -0.03em;
}

.barchive-title,
.bts-title,
.bf-lead .bf-title {
    font-weight: 650;
}

/* Nhịp quanh h2 đang lệch: trên 56px, dưới chỉ 15px nên tiêu đề dính
   vào đoạn ngay dưới nó. Cân lại cho thoáng đều hai phía. */
.bpost-content h2 {
    margin-top: 40px;
    margin-bottom: 6px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.bpost-content h3 {
    margin-top: 30px;
    margin-bottom: 4px;
    font-weight: 650;
}

/* Siết nhẹ giãn chữ thân bài cho gọn, mức nhẹ hơn Bloom
   vì dấu tiếng Việt cần chỗ thở */
.bpost-content > p,
.bpost-content > ul,
.bpost-content > ol {
    letter-spacing: -0.015em;
}

/* Chữ Nhật cùng cỡ px nhìn dày hơn chữ Latin — nới giãn dòng cho dễ đọc */
:lang(ja) .bpost-content > p,
:lang(ja) .bpost-content > ul,
:lang(ja) .bpost-content > ol,
:lang(ja) .bpost-content > li {
    line-height: 1.85;
    letter-spacing: 0.01em;
}

:lang(ja) .bpost-title,
:lang(ja) .bts-title,
:lang(ja) .bc-title {
    letter-spacing: 0;
    line-height: 1.4;
}

/* Casper có quy tắc `.gh-content > [id]:not(:first-child){margin:2em 0 0}` —
   Ghost tự gắn id cho mọi tiêu đề nên quy tắc này khớp, và nó mạnh hơn
   `.bpost-content h2` nên mọi chỉnh margin ở trên đều bị nuốt.
   Phải dùng bộ chọn ít nhất ngang cơ. Nguyên tắc chữ nghĩa: tiêu đề cần
   nhiều khoảng trống PHÍA TRÊN và ít phía dưới, để nó dính vào đoạn nó dẫn. */
.bpost-content > h2[id],
.bpost-content > h2[id]:not(:first-child) {
    margin: 46px 0 0;
}

.bpost-content > h3[id],
.bpost-content > h3[id]:not(:first-child) {
    margin: 34px 0 0;
}

/* Đoạn ngay sau tiêu đề bám sát tiêu đề, thay vì cách đều như hai đoạn thường */
.bpost-content > h2[id] + *,
.bpost-content > h3[id] + * {
    margin-top: 12px;
}

/* ------------------------------------------------ 1n. Tóm tắt rõ hơn + ghi công trong ảnh */

/* Dòng tóm tắt dưới tiêu đề đang dùng #979797 — tương phản ~2,9:1 trên nền trắng,
   dưới cả ngưỡng tối thiểu 3:1. Bloom để màu đen đặc. Đổi sang tông đậm hẳn. */
.bpost-excerpt {
    color: #454b57;
}

html.dark-mode .bpost-excerpt {
    color: rgba(255, 255, 255, 0.72);
}

/* Ghi công ảnh bìa: đặt vào trong ảnh, góc dưới bên phải, như Bloom.
   Chỉ áp cho ảnh bìa — chú thích của sơ đồ trong bài vẫn nằm dưới ảnh
   vì đó là lời giải thích, không phải dòng ghi công. */
.bpost-feature .inner {
    position: relative;
}

.bpost-feature figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    margin: 0;
    padding: 6px 12px;
    max-width: min(70%, 420px);
    border-radius: var(--bf-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #15171a;
    font-size: 1.25rem;
    line-height: 1.45;
    text-align: left;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

@media (max-width: 700px) {
    .bpost-feature figcaption {
        right: 10px;
        bottom: 10px;
        padding: 5px 10px;
        font-size: 1.15rem;
        max-width: calc(100% - 20px);
    }
}

/* ------------------------------------------------ 1o. Khối giới thiệu ở cột phải

   Trước: chữ mô tả và icon social đều #979797 (tương phản ~2,9:1 — quá mờ),
   nút chỉ có viền mảnh nên gần như chìm. Bloom dùng nút tròn NỀN ĐẶC,
   icon màu đậm. Ở đây thêm khung bao quanh cả khối theo yêu cầu.          */

.bside-block:first-child {
    padding: 18px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius);
    background: #f6f8fb;
}

html.dark-mode .bside-block:first-child {
    background: rgba(255, 255, 255, 0.045);
}

.bside-about {
    margin-bottom: 14px;
    font-size: 1.5rem;
    line-height: 1.55;
    color: #454b57;
}

html.dark-mode .bside-about {
    color: rgba(255, 255, 255, 0.78);
}

/* Nút social: nền đặc thay cho viền mảnh, icon đậm màu */
.bside .bsocial-item {
    width: 36px;
    height: 36px;
    border: 0;
    background: #e7ebf2;
    color: #2b313b;
}

.bside .bsocial-item:hover {
    background: var(--ghost-accent-color);
    color: #fff;
}

html.dark-mode .bside .bsocial-item {
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .bside .bsocial-item:hover {
    background: var(--ghost-accent-color);
    color: #fff;
}