/**
 * LK CMS public theme -- rebuilt to match luatkhoa.net.
 *
 * Every value here was measured off the live site with getComputedStyle
 * rather than eyeballed, so the type scale and palette are the real ones
 * (see docs/FRONTEND-DESIGN.md).
 *
 * Loaded AFTER public.css and deliberately overrides it: public.css is UG's
 * personal-blog styling, and LK is a news site with a completely different
 * layout. Keeping it as a separate file means the UG styles that still do
 * useful work (post body typography, media figures, footnotes) stay intact
 * instead of being deleted and reinvented.
 */

/* ---- Tokens ---------------------------------------------------------- */
:root {
    --lk-navy: #031D6D;
    --lk-navy-dark: #021553;
    --lk-on-navy: #ffffff;
    --lk-chip-bg: #F0F6FF;
    --lk-text: #111111;
    --lk-text-2: #3d4046;
    --lk-muted: #808080;
    --lk-rule: #e2e4e8;
    /* Spec 2026-08-27C muc 5: light grey canvas, white surfaces on top --
       not the all-white page LK had before. */
    --lk-bg: #f6f7f9;
    --lk-surface: #ffffff;

    --lk-sans: Inter, Helvetica, Arial, sans-serif;
    --lk-serif: Bitter, Georgia, 'Times New Roman', serif;
    /* đợt F muc 4: thân bài đọc bằng Crimson Pro (vietnamese subset đủ 4
       kiểu); title vẫn Bitter; mọi UI khác Inter. */
    --lk-content: 'Crimson Pro', Georgia, 'Times New Roman', serif;

    --lk-container: 1160px; /* đợt F muc 6: thu gọn từ 1280 */
    --lk-sidebar: 320px; /* đợt G: nhỏ lại cho body rộng (site thật ~2:1) */
    --lk-gap: 30px;
}

/* ---- Base ------------------------------------------------------------ */
body.lk-theme {
    background: var(--lk-bg);
    color: var(--lk-text);
    font-family: var(--lk-sans);
    font-size: 14px;
    line-height: 1.6;
}
body.lk-theme h1, body.lk-theme h2, body.lk-theme h3,
body.lk-theme h4, body.lk-theme h5, body.lk-theme h6 {
    font-family: var(--lk-serif);
    font-weight: 700;
    color: var(--lk-text);
    line-height: 1.25;
}
body.lk-theme a { color: inherit; text-decoration: none; }
body.lk-theme a:hover { color: var(--lk-navy); }

.lk-container {
    max-width: var(--lk-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---- Header ---------------------------------------------------------- */
.lk-topbar {
    background: var(--lk-navy);
    color: #fff;
}
.lk-topbar .lk-container {
    display: flex; align-items: center; gap: 20px;
    height: 62px;
}
.lk-brand {
    font-family: var(--lk-serif);
    font-size: 26px; font-weight: 700; color: #fff; line-height: 1.05;
    letter-spacing: .01em;
}
.lk-brand span { display: block; font-size: 12px; font-weight: 400; opacity: .85; letter-spacing: .12em; }
.lk-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lk-topbar-actions a { color: rgba(255,255,255,.9); font-size: 13px; }
.lk-topbar-actions a:hover { color: #fff; }
.lk-btn-donate {
    background: #f5a623; color: #111 !important; font-weight: 600;
    padding: 7px 14px; border-radius: 4px; font-size: 13px;
}

.lk-topbar-link { font-size: 13px; }

/* Hamburger: hidden until the menu bar stops fitting (see the media query). */
.lk-burger {
    display: none; flex-direction: column; gap: 4px; justify-content: center;
    width: 34px; height: 34px; padding: 0 6px; margin-left: -6px;
    background: none; border: 0; cursor: pointer;
}
.lk-burger span { display: block; height: 2px; background: #fff; border-radius: 4px; }

/* Menu bar */
.lk-nav { background: var(--lk-surface); border-bottom: 1px solid var(--lk-rule); }
.lk-nav .lk-container { display: flex; align-items: center; gap: 26px; height: 52px; }
.lk-nav-list { display: flex; align-items: center; gap: 26px; min-width: 0; }
.lk-nav a {
    font-size: 14px; font-weight: 600; color: var(--lk-text);
    white-space: nowrap; padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.lk-nav a:hover, .lk-nav a.active { color: var(--lk-navy); border-bottom-color: var(--lk-navy); }
.lk-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lk-nav-icon {
    background: none; border: 0; cursor: pointer; padding: 4px;
    color: var(--lk-text); font-size: 17px; line-height: 1;
}

/* ---- Category chip --------------------------------------------------- */
.lk-chip {
    display: inline-block;
    background: var(--lk-chip-bg); color: var(--lk-navy);
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 999px; /* đợt H: pill tròn */
}

/* ---- Post cards ------------------------------------------------------ */
.lk-card-title {
    font-family: var(--lk-serif); font-weight: 700;
    font-size: 16px; line-height: 1.4; margin: 8px 0 6px;
}
.lk-card-title a:hover { color: var(--lk-navy); }
.lk-meta { color: var(--lk-muted); font-size: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lk-meta a { color: var(--lk-muted); }
.lk-meta a:hover { color: var(--lk-navy); }
.lk-excerpt { color: var(--lk-text-2); font-size: 13.5px; line-height: 1.65; margin-top: 8px; }

.lk-thumb { display: block; position: relative; overflow: hidden; background: #f2f2f2; }
.lk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-thumb-16x9 { aspect-ratio: 16 / 9; }
.lk-thumb .lk-chip { position: absolute; left: 10px; bottom: 10px; }

/* ---- Homepage grid --------------------------------------------------- */
.lk-home {
    display: grid;
    /* Hero 3 cột đúng tỉ lệ site thật (đợt G): 25% / 50% / 25%. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--lk-gap);
    padding: 28px 0 50px;
    align-items: start;
}
.lk-home-lead .lk-card-title { font-size: 30px; line-height: 1.22; margin: 14px 0 10px; }
.lk-home-lead .lk-excerpt { font-size: 15px; }
.lk-home-side-list { display: flex; flex-direction: column; gap: 24px; }

/* ---- Homepage section blocks ----------------------------------------- */
.lk-block { padding-bottom: 40px; }
.lk-block-head {
    display: flex; align-items: baseline; gap: 14px;
    padding-bottom: 10px; margin-bottom: 20px;
    border-bottom: 2px solid var(--lk-navy);
}
.lk-block-head h2 {
    margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: .6px;
}
.lk-block-more { margin-left: auto; font-size: 13px; color: var(--lk-navy); white-space: nowrap; }
.lk-block-more:hover { text-decoration: underline; }

/* feature: one large story beside a stack of compact rows */
.lk-block-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.lk-block-feature-side { display: flex; flex-direction: column; }
.lk-block-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lk-block-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }

/* compact row: 200x114 thumb left, headline right, no excerpt */
.lk-card-compact { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.lk-card-compact .lk-card-title { font-size: 16px; line-height: 1.38; margin: 0 0 6px; }
.lk-card-compact .lk-thumb-16x9 { align-self: start; }

/* Sidebar */
.lk-sidebar-heading {
    font-family: var(--lk-serif); font-size: 19px; font-weight: 700;
    padding-bottom: 10px; margin: 0 0 16px;
    border-bottom: 2px solid var(--lk-navy);
}
.lk-side-item { display: flex; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--lk-rule); }
.lk-side-item:last-child { border-bottom: 0; }
.lk-side-item .lk-thumb { flex: 0 0 88px; aspect-ratio: 1 / 1; border-radius: 4px; }
.lk-side-item .lk-card-title { font-size: 14px; margin: 0 0 6px; }

/* ---- Article --------------------------------------------------------- */
.lk-article-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lk-sidebar);
    gap: 36px;
    padding: 28px 0 60px;
    align-items: start;
}
.lk-article-wrap.lk-no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }
.lk-article-title { font-size: 42px; line-height: 1.15; margin: 12px 0 14px; } /* luatkhoa.net: 42/48 */
.lk-article-sapo { font-size: 18.5px; line-height: 1.65; color: var(--lk-text-2); margin-bottom: 18px; }
.lk-article-meta {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--lk-rule);
    color: var(--lk-muted); font-size: 13px;
}
.lk-article-meta strong { color: var(--lk-text); font-weight: 600; }

/* ---- Archive pages (category / tag / author / search / date) ---------- */
.lk-archive {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lk-sidebar);
    gap: 46px;
    padding: 28px 0 60px;
    align-items: start;
}
.lk-archive-head {
    padding-bottom: 18px; margin-bottom: 24px;
    border-bottom: 2px solid var(--lk-navy);
}
.lk-archive-kicker {
    font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--lk-muted); margin-bottom: 6px;
}
.lk-archive-title { font-size: 32px; margin: 0; }
.lk-archive-desc { margin: 10px 0 0; color: var(--lk-text-2); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.lk-archive-empty { color: var(--lk-muted); padding: 30px 0; }

/* List rows: image left, text right. Falls back to a text-only row when the
   post has no thumbnail, which is common for older imported articles. */
.lk-list { display: flex; flex-direction: column; }
.lk-list-item {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px;
    padding: 22px 0; border-bottom: 1px solid var(--lk-rule);
}
.lk-list-item:first-child { padding-top: 0; }
.lk-list-item:last-child { border-bottom: 0; }
.lk-list-item > .lk-card-body:only-child { grid-column: 1 / -1; }
.lk-list-item .lk-card-title { font-size: 20px; line-height: 1.32; margin: 8px 0 8px; }
.lk-list-item .lk-chip { text-transform: uppercase; }
.lk-list-item .lk-excerpt { margin-top: 10px; }

/* ---- Tag directory --------------------------------------------------- */
.lk-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lk-tag-pill {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 6px 13px; border: 1px solid var(--lk-rule); border-radius: 999px;
    background: var(--lk-surface); font-size: 13.5px;
}
.lk-tag-pill:hover { border-color: var(--lk-navy); color: var(--lk-navy); background: var(--lk-chip-bg); }
.lk-tag-pill span { color: var(--lk-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lk-tag-alphabet {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 12px 0; margin-bottom: 20px;
    border-top: 1px solid var(--lk-rule); border-bottom: 1px solid var(--lk-rule);
    position: sticky; top: 0; background: var(--lk-bg); z-index: 2;
}
.lk-tag-alphabet a {
    min-width: 28px; padding: 4px; text-align: center;
    font-weight: 600; font-size: 13px; color: var(--lk-navy);
}
.lk-tag-alphabet a:hover { background: var(--lk-chip-bg); }
.lk-tag-letter {
    font-size: 20px; margin: 0 0 12px;
    /* Anchor targets sit under the sticky alphabet bar without this. */
    scroll-margin-top: 60px;
}
.lk-tag-group { scroll-margin-top: 60px; }

/* ---- Date archive index ---------------------------------------------- */
.lk-archive-year { margin-bottom: 26px; }
.lk-month-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
body.lk-theme .archive-month-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 11px; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    background: var(--lk-surface); color: var(--lk-text); border: 1px solid var(--lk-rule); border-radius: 4px;
}
body.lk-theme .archive-month-toggle:hover { border-color: var(--lk-navy); color: var(--lk-navy); }
body.lk-theme .archive-month-count { margin-left: auto; color: var(--lk-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
body.lk-theme .archive-month-chevron { transition: transform .15s; }
body.lk-theme .archive-month-toggle[aria-expanded="true"] .archive-month-chevron { transform: rotate(90deg); }
body.lk-theme .archive-month-posts { grid-column: 1 / -1; padding: 8px 0 4px 12px; }

/* ---- Pager ----------------------------------------------------------- */
.lk-pager {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lk-rule);
    font-size: 14px;
}
.lk-pager a, .lk-pager-current {
    display: inline-block; min-width: 36px; padding: 7px 10px;
    text-align: center; border: 1px solid var(--lk-rule); border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.lk-pager a:hover { border-color: var(--lk-navy); color: var(--lk-navy); }
.lk-pager-current { background: var(--lk-navy); border-color: var(--lk-navy); color: #fff; font-weight: 600; }
.lk-pager-gap { color: var(--lk-muted); padding: 0 2px; }

/* ---- Search form ----------------------------------------------------- */
.lk-search-form { display: flex; gap: 8px; max-width: 520px; margin-top: 4px; }
.lk-search-form input {
    flex: 1; padding: 10px 12px; font: inherit; font-size: 15px;
    border: 1px solid var(--lk-rule); border-radius: 4px; background: var(--lk-surface); color: var(--lk-text);
}
.lk-search-form input:focus { outline: 2px solid var(--lk-navy); outline-offset: -1px; border-color: var(--lk-navy); }
.lk-search-form button {
    padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer;
    background: var(--lk-navy); color: #fff; border: 0; border-radius: 4px;
}

/* ---- Author header --------------------------------------------------- */
.lk-author-head {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: start;
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: 2px solid var(--lk-navy);
}
.lk-author-avatar { position: relative; }
.lk-author-avatar img, .lk-author-avatar .avatar {
    width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block;
}
.lk-author-handle { margin: 6px 0 0; color: var(--lk-muted); font-size: 13px; }
.lk-author-role {
    display: inline-block; margin-left: 6px; padding: 2px 7px;
    background: var(--lk-chip-bg); color: var(--lk-navy);
    border-radius: 4px; font-size: 11px; letter-spacing: .4px;
}
.lk-author-bio { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--lk-text-2); max-width: 62ch; }
.lk-author-site { margin: 6px 0 0; font-size: 13.5px; }
.lk-author-site a { color: var(--lk-navy); text-decoration: underline; }
.lk-author-edit-btn, .lk-author-edit-actions button {
    margin-top: 12px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
    background: var(--lk-surface); color: var(--lk-text); border: 1px solid var(--lk-rule); border-radius: 4px;
}
.lk-author-edit-btn:hover { border-color: var(--lk-navy); color: var(--lk-navy); }
.lk-author-edit-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.lk-author-edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--lk-muted); }
.lk-author-edit-form input {
    padding: 8px 10px; font: inherit; font-size: 14px; color: var(--lk-text);
    border: 1px solid var(--lk-rule); border-radius: 4px; background: #fff;
}
.lk-author-edit-actions { display: flex; gap: 8px; }
.lk-author-edit-actions .lk-btn-primary { background: var(--lk-navy); color: #fff; border-color: var(--lk-navy); font-weight: 600; }
.lk-author-error { color: #b3261e; font-size: 13px; }
.lk-author-photos { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 24px; padding-bottom: 4px; }
.lk-author-photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 4px; cursor: zoom-in; flex: 0 0 auto; }

/* ---- Comments -------------------------------------------------------- */
.lk-comments {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--lk-muted); font-size: 12px; line-height: 1;
}
.lk-comments svg { display: block; opacity: .75; }
.lk-comments b { font-weight: 600; font-variant-numeric: tabular-nums; }
a.lk-comments:hover { color: var(--lk-navy); }

.lk-comments-block { margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--lk-navy); }
.lk-comments-heading { font-size: 18px; margin: 0 0 16px; }
.lk-comment { padding: 12px 0; border-bottom: 1px solid var(--lk-rule); }
.lk-comment:last-child { border-bottom: 0; }
.lk-comment-reply { margin-left: 34px; padding-left: 14px; border-left: 2px solid var(--lk-rule); }
.lk-comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.lk-comment-author { font-weight: 600; font-size: 14px; }
a.lk-comment-author { color: var(--lk-navy); }
.lk-comment-head time { color: var(--lk-muted); font-size: 12px; }
.lk-comment-body { font-size: 14.5px; line-height: 1.65; color: var(--lk-text-2); }

/* ---- Footer ---------------------------------------------------------- */
/* Footer trắng một dải, đúng site thật (đợt H). */
.lk-footer {
    background: var(--lk-surface);
    border-top: 1px solid var(--lk-rule);
    margin-top: 48px;
}
.lk-footer-inner {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    padding-block: 26px 14px;
}
.lk-footer-logo img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.lk-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lk-footer-links a { font-size: 13.5px; font-weight: 500; color: var(--lk-text-2); }
.lk-footer-links a:hover { color: var(--lk-navy); }
.lk-footer-social { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lk-footer-social a { color: var(--lk-muted); display: block; line-height: 0; }
.lk-footer-social a:hover { color: var(--lk-navy); }
.lk-footer-copy { padding-bottom: 22px; font-size: 12.5px; color: var(--lk-muted); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
    .lk-home { grid-template-columns: minmax(0, 1fr) var(--lk-sidebar); }
    .lk-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
    /* The narrow left rail folds into the main column before the sidebar
       goes, because the sidebar carries "Tin mới nhất" which readers use. */
    .lk-home-rail { display: none; }
}
@media (max-width: 860px) {
    .lk-home, .lk-article-wrap, .lk-archive { grid-template-columns: minmax(0, 1fr); }
    /* Spec muc 2: on mobile the big pinned story (column 2) leads, then the
       left column's two stories, then the Thời sự column. */
    .lk-home-lead { order: 1; }
    .lk-home-rail { order: 2; }
    .lk-home-sidebar { order: 3; }
    .lk-block-feature, .lk-block-rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .lk-block-head h2 { font-size: 17px; }
    /* Thumbnail above the text once the row gets too narrow to read beside it. */
    .lk-list-item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* ...except the compact row, whose small thumb still fits alongside. */
    .lk-card-compact { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
    .lk-list-item .lk-card-title { font-size: 18px; }
    .lk-archive-title { font-size: 25px; }
    .lk-author-head { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
    .lk-author-avatar img, .lk-author-avatar .avatar { width: 68px; height: 68px; }

    /* Nine sections don't fit on a phone. Rather than a sideways-scrolling
       strip (which hides items with no affordance that they exist), the menu
       collapses behind the hamburger and opens as a full-width list. */
    .lk-burger { display: flex; }
    .lk-topbar .lk-container { height: 56px; gap: 12px; }
    .lk-brand { font-size: 21px; }
    .lk-brand span { display: none; }
    .lk-topbar-link { display: none; }
    /* Row 1 keeps the search icon; the opened menu takes a full row beneath
       it, so nothing has to be positioned absolutely. */
    .lk-nav .lk-container { height: auto; min-height: 44px; flex-wrap: wrap; }
    .lk-nav-list {
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        flex: 0 0 100%; order: 2; padding: 4px 0 8px;
    }
    body.lk-nav-open .lk-nav-list { display: flex; }
    .lk-nav-list a {
        padding: 12px 2px; border-bottom: 1px solid var(--lk-rule);
        border-left: 2px solid transparent;
    }
    .lk-nav-list a:last-child { border-bottom: 0; }
    .lk-nav-list a.active { border-bottom-color: var(--lk-rule); border-left-color: var(--lk-navy); padding-left: 10px; }
    .lk-home-rail { display: block; }
    .lk-article-title { font-size: 30px; }
    .lk-footer-cols { grid-template-columns: 1fr; gap: 22px; }
}

/* Admin-configured sidebar widgets ("Chủ đề nổi bật" and friends), restyled
   to sit under the news sidebar rather than in UG's blog chrome. */
.lk-sidebar-widgets { margin-top: 30px; }
.lk-sidebar-widgets h3,
.lk-sidebar-widgets .featured-topic-heading {
    font-family: var(--lk-serif); font-size: 19px; font-weight: 700;
    padding-bottom: 10px; margin: 0 0 14px;
    border-bottom: 2px solid var(--lk-navy);
}
.lk-sidebar-widgets .featured-topic-block { margin-bottom: 28px; }

/* Article body: the reading column. Larger and looser than card text --
   this is where people spend their time, so it gets the comfortable
   measure rather than the dense listing metrics above. */
body.lk-theme .post-content {
    font-family: var(--lk-content);
    /* Đối chiếu luatkhoa.net desktop (đo 2026-08-27 @1440): p 22px/33px. */
    font-size: 22px;
    line-height: 1.5;
    color: var(--lk-text);
}
body.lk-theme .post-content p { margin: 0 0 1.25em; }
body.lk-theme .post-content h2,
body.lk-theme .post-content h3 { font-family: var(--lk-serif); margin: 1.6em 0 .6em; }
body.lk-theme .post-content h2 { font-size: 27px; } /* luatkhoa.net: 27 */
body.lk-theme .post-content h3 { font-size: 25px; } /* luatkhoa.net: 25 */
body.lk-theme .post-content a {
    color: var(--lk-navy); text-decoration: underline; text-underline-offset: 2px;
    /* Đợt Y: underline mỏng + nhạt cho dễ đọc. */
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--lk-navy) 40%, transparent);
}
body.lk-theme .post-content a:hover { text-decoration-color: var(--lk-navy); }
body.lk-theme .post-content blockquote {
    margin: 1.5em 0; padding: 2px 0 2px 18px;
    border-left: 3px solid var(--lk-navy);
    color: var(--lk-text-2); font-style: italic;
}
body.lk-theme .post-content figure { margin: 1.6em 0; }
body.lk-theme .post-content figcaption {
    /* Đợt Y: chú thích ảnh căn giữa + to thêm xíu (12.5 -> 14). */
    margin-top: 8px; font-size: 14px; font-family: var(--lk-sans);
    color: var(--lk-muted); line-height: 1.6; text-align: center;
}

/* Text alignment carried over from WordPress (2280 elements relied on it). */
body.lk-theme .post-content [style*="text-align:center"],
body.lk-theme .post-content .has-text-align-center { text-align: center; }

/* Live-search dropdown (spec §8) -- public /search page. */
.lk-livesearch-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--lk-rule); border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    max-height: 340px; overflow-y: auto;
}
.lk-livesearch-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.lk-livesearch-item:hover { background: var(--lk-chip-bg); }
.lk-livesearch-title { font-size: 14px; line-height: 1.4; font-weight: 600; }
.lk-livesearch-meta { font-size: 12px; color: var(--lk-muted); }
.lk-livesearch-empty { padding: 10px 12px; font-size: 13px; color: var(--lk-muted); }
/* The dropdown anchors to the input's parent -- the form. */
.lk-search-form { position: relative; }

/* ---- Embeds & gallery (spec §18) -------------------------------------- */
body.lk-theme .post-video-embed-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
body.lk-theme .post-video-embed-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
body.lk-theme .post-video video { width: 100%; max-height: 70vh; background: #000; }
body.lk-theme .post-audio-card {
    background: #f6f6f6; border: 1px solid var(--lk-rule); border-radius: 4px;
    padding: 14px 16px;
}
body.lk-theme .post-audio-title { font-weight: 700; font-family: var(--lk-serif); margin-bottom: 8px; font-size: 15px; }
body.lk-theme .post-audio-card audio { width: 100%; }

/* JNews-style gallery: black stage + caption + counter + thumbnail strip */
body.lk-theme .lk-gallery { background: #111; padding: 14px; border-radius: 4px; }
body.lk-theme .lk-gallery-stage { position: relative; text-align: center; }
body.lk-theme .lk-gallery-main {
    max-width: 100%; max-height: 72vh; margin-inline: auto; display: block;
    object-fit: contain;
}
body.lk-theme .lk-gallery-count {
    position: absolute; left: 4px; bottom: 6px;
    color: #ddd; font-size: 12px; font-style: italic;
    font-variant-numeric: tabular-nums;
}
body.lk-theme .lk-gallery-caption {
    color: #ccc; font-size: 13px; text-align: center; padding: 8px 60px 0;
    min-height: 1.2em;
}
body.lk-theme .lk-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 54px; border: 0; cursor: pointer;
    background: rgba(0,0,0,.45); color: #fff; font-size: 26px; line-height: 1;
}
body.lk-theme .lk-gallery-nav:hover { background: rgba(0,0,0,.7); }
body.lk-theme .lk-gallery-prev { left: 0; }
body.lk-theme .lk-gallery-next { right: 0; }
body.lk-theme .lk-gallery-thumbs {
    display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px;
}
body.lk-theme .lk-gallery-thumb {
    flex: 0 0 auto; width: 86px; height: 62px; padding: 0; cursor: pointer;
    border: 2px solid transparent; background: none;
}
body.lk-theme .lk-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .7; }
body.lk-theme .lk-gallery-thumb:hover img { opacity: 1; }
body.lk-theme .lk-gallery-thumb.active { border-color: #fff; }
body.lk-theme .lk-gallery-thumb.active img { opacity: 1; }

/* Footer: real 4-column layout + blurb (2026-08-27) */
.lk-footer-cols-4 { grid-template-columns: 1.1fr 1fr 1.3fr 1.1fr; }
.lk-footer-blurb { font-size: 13.5px; line-height: 1.7; margin: 0 0 14px; opacity: .85; }
@media (max-width: 860px) { .lk-footer-cols-4 { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .lk-footer-cols-4 { grid-template-columns: 1fr; } }

/* Sticky menu bar -- the original keeps the white nav pinned while reading. */
.lk-nav { position: sticky; top: 0; z-index: 50; }

/* One-time notices (post-login password nudge) */
.lk-notice {
    background: #fff8dc; border-bottom: 1px solid #f1e1a6;
    padding: 10px 20px; text-align: center; font-size: 13.5px;
}
.lk-notice a { color: var(--lk-navy); text-decoration: underline; }

/* Hamburger menu's action tail (mobile only -- see lk-header.php) */
.lk-nav-list-actions { display: none; }
@media (max-width: 860px) {
    .lk-nav-list-actions {
        display: none; flex-direction: column; flex: 0 0 100%; order: 3;
        border-top: 2px solid var(--lk-navy); padding: 4px 0 8px;
    }
    body.lk-nav-open .lk-nav-list-actions { display: flex; }
    .lk-nav-list-actions a {
        padding: 12px 2px; border-bottom: 1px solid var(--lk-rule);
        font-weight: 600; color: var(--lk-navy);
    }
    .lk-nav-list-actions a:last-child { border-bottom: 0; }
}

/* Hover effects (spec §18 "hiệu ứng") -- JNews-style gentle zoom + title tint */
.lk-thumb img { transition: transform .35s ease, opacity .3s ease; }
.lk-card:hover .lk-thumb img { transform: scale(1.04); }
.lk-card-title a { transition: color .15s ease; }
@media (prefers-reduced-motion: reduce) {
    .lk-thumb img { transition: none; }
    .lk-card:hover .lk-thumb img { transform: none; }
}

/* ---- Báo tháng (spec 2026-08-27B muc 9) ------------------------------- */
.lk-bt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.lk-bt-grid-index { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 50px; }
.lk-bt-card { display: block; }
.lk-bt-card img {
    width: 100%; aspect-ratio: 683 / 1024; object-fit: cover;
    border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.lk-bt-card h3 { font-size: 15px; margin: 10px 0 4px; line-height: 1.35; }
.lk-bt-card p { font-size: 13px; color: var(--lk-muted); margin: 0; line-height: 1.45; }

.lk-bt-single { padding: 30px 0 60px; }
.lk-bt-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 34px; }
.lk-bt-cover { width: 100%; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.lk-bt-month { font-size: 32px; margin: 6px 0 4px; }
.lk-bt-title { font-family: var(--lk-serif); font-size: 24px; font-weight: 700; margin: 0 0 10px; color: var(--lk-navy); }
.lk-bt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lk-bt-btn {
    display: inline-block; padding: 10px 18px; font-weight: 600; font-size: 14px;
    background: var(--lk-navy); color: #fff; border-radius: 4px;
}
.lk-bt-btn:hover { background: var(--lk-navy-dark); color: #fff; }
.lk-bt-btn-ghost { background: var(--lk-surface); color: var(--lk-navy); border: 1px solid var(--lk-navy); }
.lk-bt-btn-ghost:hover { background: var(--lk-chip-bg); }
.lk-bt-intro { max-width: 720px; }
.lk-bt-signature { margin-top: 20px; }
.lk-bt-others { margin-top: 46px; }

@media (max-width: 860px) {
    .lk-bt-grid, .lk-bt-grid-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .lk-bt-hero { grid-template-columns: minmax(0, 1fr); }
    .lk-bt-cover { max-width: 240px; }
    .lk-bt-month { font-size: 24px; }
    .lk-bt-title { font-size: 19px; }
}

/* ---- Video popup (spec 2026-08-27B muc 10) ---------------------------- */
.lk-video-item { cursor: pointer; }
.lk-video-popup {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.82);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* display:flex above would override the UA's [hidden]{display:none} --
   without this line the popup covered the whole page by default. */
.lk-video-popup[hidden] { display: none; }
.lk-video-popup-box { width: min(960px, 96vw); }
.lk-video-popup-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.lk-video-popup-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lk-video-popup-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: 0; color: #fff; font-size: 38px; line-height: 1; cursor: pointer;
}
.lk-video-popup-link { display: inline-block; margin-top: 10px; color: #fff; font-size: 13.5px; text-decoration: underline; }
.lk-video-popup-link:hover { color: #f5a623; }

/* ---- Spec 2026-08-27C ------------------------------------------------- */
/* muc 3: the article sidebar follows the scroll so a long read never has a
   dead empty column beside it. */
/* đợt F muc 1: two-direction sticky -- the sidebar scrolls WITH the body;
   once its end is reached it pins, and scrolling back up walks it back.
   lk-smart-sticky.js drives `top` by scroll delta; no internal scrollbar. */
.lk-article-wrap > aside.lk-home-sidebar {
    position: sticky;
    top: 20px; /* JS overrides per-frame when taller than the viewport */
}


/* ---- Dark mode (spec 2026-08-27C muc 6) ------------------------------- */
/* html[data-lk-mode="dark"] is set before first paint by the inline script
   in lk-header.php: explicit choice from localStorage first, otherwise the
   OS preference (and it live-follows OS changes until the reader chooses). */
html[data-lk-mode="dark"] {
    --lk-navy: #8fb0ff;
    --lk-navy-dark: #a9c2ff;
    --lk-on-navy: #0e1116;
    --lk-chip-bg: #1c2b4d;
    --lk-text: #e8eaee;
    --lk-text-2: #b9bec7;
    --lk-muted: #8d939d;
    --lk-rule: #2b2f36;
    --lk-bg: #14161a;
    --lk-surface: #1d2026;
}
/* The brand bars keep the real navy in both modes -- they're already dark. */
/* Topbar giữ navy thật ở dark; footer theo surface (đợt H: footer trắng/tối). */
html[data-lk-mode="dark"] .lk-topbar { background: #031D6D; }
html[data-lk-mode="dark"] .lk-thumb { background: #22262d; }
html[data-lk-mode="dark"] .lk-bt-card img { box-shadow: 0 2px 10px rgba(0,0,0,.5); }
html[data-lk-mode="dark"] img { opacity: .92; }

/* Buttons that sit ON navy use the paired token so dark stays readable. */
.lk-bt-btn { color: var(--lk-on-navy); }
.lk-bt-btn:hover { color: var(--lk-on-navy); }
.lk-pager-current { color: var(--lk-on-navy); }
.lk-search-form button { color: var(--lk-on-navy); }

/* Toggle button in the top bar. */
.lk-mode-toggle {
    background: none; border: 0; cursor: pointer; padding: 4px;
    font-size: 16px; line-height: 1; color: rgba(255,255,255,.9);
}
.lk-mode-toggle:hover { color: #fff; }

/* Comment form (spec 2026-08-27C muc 7) */
.lk-comment-form { margin-top: 22px; }
.lk-comment-gate {
    padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px;
    background: var(--lk-chip-bg); border-left: 3px solid var(--lk-navy);
    border-radius: 4px; color: var(--lk-text-2);
}
.lk-comment-gate a { color: var(--lk-navy); text-decoration: underline; }
.lk-comment-toolbar { display: flex; gap: 4px; margin-bottom: -1px; }
.lk-comment-toolbar button {
    min-width: 32px; padding: 6px 8px; font: inherit; font-size: 13px; cursor: pointer;
    background: var(--lk-surface); color: var(--lk-text);
    border: 1px solid var(--lk-rule); border-bottom: 0; border-radius: 4px 3px 0 0;
}
.lk-comment-toolbar button:hover { color: var(--lk-navy); }
.lk-comment-input {
    min-height: 90px; padding: 12px; font-size: 14.5px; line-height: 1.6;
    background: var(--lk-surface); color: var(--lk-text);
    border: 1px solid var(--lk-rule); border-radius: 0 4px 4px 4px;
}
.lk-comment-input:focus { outline: 2px solid var(--lk-navy); outline-offset: -1px; }
.lk-comment-input:empty::before { content: attr(data-placeholder); color: var(--lk-muted); }
.lk-comment-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lk-comment-error { color: #c0392b; font-size: 13px; }
.lk-comment-send {
    margin-left: auto; padding: 9px 18px; font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; background: var(--lk-navy); color: var(--lk-on-navy);
    border: 0; border-radius: 4px;
}
.lk-comment-send:disabled { opacity: .55; cursor: not-allowed; }

/* Login popup (spec 2026-08-27C muc 9) */
.lk-login-popup {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lk-login-popup[hidden] { display: none; }
.lk-login-popup-box {
    position: relative; width: min(400px, 94vw);
    background: var(--lk-surface); color: var(--lk-text);
    border-radius: 6px; padding: 26px 24px;
    max-height: 90vh; overflow-y: auto;
}
.lk-login-popup-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
    color: var(--lk-muted);
}
.lk-login-popup-title { margin: 0 0 16px; font-size: 20px; }
.lk-login-form .field { margin-bottom: 12px; }
.lk-login-form label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--lk-text-2); }
.lk-login-form input {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 14.5px;
    background: var(--lk-bg); color: var(--lk-text);
    border: 1px solid var(--lk-rule); border-radius: 4px;
}
.lk-login-form .btn {
    display: block; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
    background: var(--lk-navy); color: var(--lk-on-navy); border: 0; border-radius: 4px;
}
.lk-login-form .btn-secondary { background: var(--lk-surface); color: var(--lk-navy); border: 1px solid var(--lk-navy); }
.lk-login-divider {
    display: flex; align-items: center; gap: 10px; margin: 16px 0;
    color: var(--lk-muted); font-size: 12px;
}
.lk-login-divider::before, .lk-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--lk-rule); }
.lk-google-btn { display: flex; justify-content: center; min-height: 44px; }
.lk-login-pass-toggle { text-align: center; margin: 14px 0 0; font-size: 13px; }
.lk-login-pass-toggle a { color: var(--lk-muted); text-decoration: underline; }
.lk-login-pass-form { margin-top: 12px; }

/* ---- Post tags row (spec 2026-08-28 muc 4+6) -------------------------- */
.lk-post-tags { position: relative; margin-top: 28px; }
.lk-post-tags-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Collapsed: exactly one row, with a fade on the right and the "…" button. */
.lk-post-tags.is-collapsed .lk-post-tags-row {
    max-height: 34px; overflow: hidden; padding-right: 70px;
}
.lk-post-tags.is-collapsed::after {
    content: ''; position: absolute; top: 0; right: 34px; width: 90px; height: 34px;
    background: linear-gradient(to right, transparent, var(--lk-bg));
    pointer-events: none;
}
.lk-post-tags-more {
    position: absolute; top: 0; right: 0; width: 30px; height: 32px;
    font: inherit; font-weight: 700; letter-spacing: 1px; cursor: pointer;
    background: var(--lk-surface); color: var(--lk-muted);
    border: 1px solid var(--lk-rule); border-radius: 4px;
}
.lk-post-tags-more:hover { color: var(--lk-navy); border-color: var(--lk-navy); }
/* Featured topics jump the queue and get the highlight (muc 6). */
.lk-tag-pill-featured {
    background: var(--lk-chip-bg); border-color: var(--lk-navy);
    color: var(--lk-navy); font-weight: 600;
}

/* ---- Homepage: latest split + grid6 (spec 2026-08-28 muc 9+10) -------- */
.lk-latest-split { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.lk-latest-side-head { margin-top: 0; }
.lk-latest-side .lk-side-item .lk-thumb { flex: 0 0 74px; }
.lk-block-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.lk-block-grid6 .lk-card-title { font-size: 13.5px; line-height: 1.35; }
.lk-block-grid6 .lk-excerpt { display: none; }
/* Bao-thang home strip now holds six covers (muc 7). */
.lk-bt-grid-home { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.lk-bt-grid-home h3 { font-size: 13px; }
.lk-bt-grid-home p { display: none; }
@media (max-width: 1100px) {
    .lk-block-grid6, .lk-bt-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .lk-latest-split { grid-template-columns: minmax(0, 1fr); }
    .lk-block-grid6, .lk-bt-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Header đợt E (spec 2026-08-28 muc 3) ----------------------------- */
.lk-brand-full { height: 40px; width: auto; display: block; }

.lk-link-goi { font-weight: 700; letter-spacing: .4px; }

/* Account dropdown (topbar + sticky). */
.lk-account { position: relative; }
.lk-account-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
    font: inherit; font-size: 13px; color: rgba(255,255,255,.92);
}
.lk-account-btn:hover { color: #fff; }
.lk-account-avatar { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.2); }
.lk-account-avatar img, .lk-account-avatar .lk-account-avatar-img,
.lk-account-avatar .author-avatar { width: 28px !important; height: 28px !important; border-radius: 50%; object-fit: cover; display: block; font-size: 14px; line-height: 28px; text-align: center; }
.lk-account-caret { font-size: 10px; opacity: .7; }
.lk-account-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200;
    min-width: 210px; padding: 6px 0;
    background: var(--lk-surface); color: var(--lk-text);
    border: 1px solid var(--lk-rule); border-radius: 6px;
    box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
.lk-account-menu a { display: block; padding: 9px 16px; font-size: 13.5px; color: var(--lk-text); }
.lk-account-menu a:hover { background: var(--lk-chip-bg); color: var(--lk-navy); }
.lk-account-menu a:last-child { border-top: 1px solid var(--lk-rule); color: var(--lk-muted); }

/* Sticky bar: one 55px navy bar, slides in after the header scrolls out. */
/* Sticky bar nền TRẮNG như site thật (đợt F muc 5) -- chỉ logo icon navy. */
.lk-sticky {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    background: var(--lk-surface);
    border-bottom: 1px solid var(--lk-rule);
    transform: translateY(-100%);
    transition: transform .22s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.lk-sticky.is-visible { transform: translateY(0); }
.lk-sticky .lk-container { display: flex; align-items: center; gap: 20px; height: 55px; }
.lk-sticky-logo img { width: 34px; height: 34px; display: block; border-radius: 6px; }
.lk-sticky-menu { display: flex; align-items: center; gap: 20px; min-width: 0; overflow: hidden; }
.lk-sticky-menu a {
    font-size: 13.5px; font-weight: 600; color: var(--lk-text);
    white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
}
.lk-sticky-menu a:hover, .lk-sticky-menu a.active { color: var(--lk-navy); border-bottom-color: var(--lk-navy); }
.lk-sticky-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lk-sticky-right .lk-nav-icon { color: var(--lk-text); }
.lk-sticky-right .lk-topbar-link { color: var(--lk-text); font-size: 13px; }
.lk-sticky-right .lk-topbar-link:hover { color: var(--lk-navy); }
.lk-sticky-right .lk-mode-toggle { color: var(--lk-text); }
.lk-sticky-right .lk-mode-toggle:hover { color: var(--lk-navy); }
.lk-sticky-right .lk-account-btn { color: var(--lk-text); }
.lk-sticky-right .lk-account-btn:hover { color: var(--lk-navy); }
@media (max-width: 860px) {
    .lk-sticky { display: none; }
    .lk-brand-full { height: 30px; }
}

/* ---- Comment form polish (đợt E muc 2) -------------------------------- */
.lk-comment-form { margin-top: 26px; }
.lk-comments-block .lk-comment-form { background: var(--lk-surface); border: 1px solid var(--lk-rule); border-radius: 6px; padding: 14px; }
.lk-comment-toolbar { gap: 2px; margin-bottom: 0; }
.lk-comment-toolbar button {
    min-width: 34px; height: 32px; padding: 0 9px;
    border: 0; border-radius: 4px; background: transparent; color: var(--lk-muted);
    font-size: 13.5px;
}
.lk-comment-toolbar button:hover { background: var(--lk-chip-bg); color: var(--lk-navy); }
.lk-comment-input {
    margin-top: 8px; border-radius: 4px; border: 1px solid var(--lk-rule);
    background: var(--lk-bg);
}
.lk-comment-gate { border-radius: 4px; margin-bottom: 12px; }
.lk-comment-send { border-radius: 4px; }

/* app.css declares html,body{height:100%;overflow-x:hidden} (UG app-shell),
   which silently turns BODY into the scroll container -- window.scrollY
   stays 0 and scroll listeners on window never fire. Public LK pages scroll
   the window like a normal site. */
body.lk-theme { height: auto; min-height: 100%; }

/* Widget badges row (đợt F muc 2). */
.featured-topic-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }

/* public.css's ".post-single .post-title" outranks the generic lk-theme h1
   rule -- pin the article title back to Bitter explicitly (đợt F muc 4). */
body.lk-theme .post-single .post-title.lk-article-title {
    font-family: var(--lk-serif);
    /* Đối chiếu luatkhoa.net @1440: 42/48 -- phải thắng public.css's
       var(--heading-font-size, 34px) bằng cùng specificity + đứng sau. */
    font-size: 42px;
    line-height: 1.15;
}
@media (max-width: 640px) {
    body.lk-theme .post-single .post-title.lk-article-title { font-size: 30px; }
}
/* h3 trong bài bị .post-single h3 (public.css) đè -- ghim lại 25px. */
body.lk-theme .post-single .post-content h3 { font-size: 25px; }
body.lk-theme .post-single .post-content h2 { font-size: 27px; }


/* ---- Đợt H: chuẩn hoá ------------------------------------------------- */
/* Fade-in nhẹ toàn trang sau khi load -- một hiệu ứng duy nhất, không
   zoom/parallax gì thêm. Tôn trọng prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    body.lk-theme { animation: lk-fade-in .35s ease-out; }
    @keyframes lk-fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Không zoom ảnh khi hover -- ghi đè mọi scale còn sót từ public.css. */
body.lk-theme a:hover img, body.lk-theme .lk-thumb:hover img { transform: none; }

/* Nút icon bookmark (đợt H muc 1). */
.post-save-btn { font-size: 16px; line-height: 1; text-decoration: none; }
.post-save-btn .fa-bookmark { pointer-events: none; }

/* Spacing đồng nhất: mọi section homepage cách nhau 44px, block head 20px. */
.lk-block { padding-bottom: 44px; }
.lk-home { padding: 26px 0 44px; }
.lk-article-wrap { padding: 26px 0 56px; }
.lk-archive { padding: 26px 0 56px; }

/* Footnote refs [1][2][3] (đợt I muc 3): như text thường -- cùng cỡ, cùng
   màu, không gạch chân; chỉ đổi con trỏ + màu nhẹ khi hover. */
body.lk-theme .post-content a[href^="#fn-"] {
    font-size: inherit; color: inherit; text-decoration: none;
    cursor: pointer;
}
body.lk-theme .post-content a[href^="#fn-"]:hover { color: var(--lk-navy); }

/* ---- Horizontal scroll strips (đợt I muc 2) --------------------------- */
.lk-hscroll {
    display: flex !important; flex-wrap: nowrap; gap: 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.lk-hscroll-item { scroll-snap-align: start; flex: 0 0 auto; }
/* 6 item mỗi khung (Nội dung đặc biệt) / 4 mỗi khung (Video nổi bật). */
.lk-hscroll-6 > .lk-hscroll-item { width: calc((100% - 5 * 18px) / 6); }
.lk-hscroll-4 > .lk-hscroll-item { width: calc((100% - 3 * 18px) / 4); }
@media (max-width: 1100px) {
    .lk-hscroll-6 > .lk-hscroll-item { width: calc((100% - 2 * 18px) / 3); }
    .lk-hscroll-4 > .lk-hscroll-item { width: calc((100% - 1 * 18px) / 2); }
}
@media (max-width: 860px) {
    .lk-hscroll-6 > .lk-hscroll-item, .lk-hscroll-4 > .lk-hscroll-item { width: calc((100% - 18px) / 2); }
}

/* ---- Đợt J mục 1: footer bài viết (Đọc thêm / Chú thích / Chủ đề) ------ */

/* Ba heading của khu footer bài dùng chung một cỡ "heading 4": nhỏ hơn h3
   nội dung (20px), vẫn Bitter đậm, để người đọc thấy đây là phần phụ chứ
   không phải một mục mới của bài. "Đọc thêm" do import để lại dạng h2/h3 --
   chọn nó bằng :has() kề card preview thay vì đổi hàng nghìn bài. */
body.lk-theme .post-content :is(h2, h3, h4):has(+ a.link-embed),
body.lk-theme .post-footnotes > summary h4,
body.lk-theme .lk-post-tags-heading {
    font-family: var(--lk-serif); font-size: 18px; font-weight: 700; line-height: 1.3;
}
body.lk-theme .post-content :is(h2, h3, h4):has(+ a.link-embed) { margin: 1.4em 0 .9em; }

/* Card preview: chữ dùng Inter, không gạch chân (đè .post-content a);
   title được ưu tiên hiện trọn (2-3 dòng), sapo mới là phần bị cắt. */
body.lk-theme .post-content .link-embed,
body.lk-theme .post-content .link-embed :is(div, span) {
    text-decoration: none; font-family: var(--lk-sans);
}
body.lk-theme .link-embed-title {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 16px; line-height: 1.4; color: var(--lk-text);
}
body.lk-theme .link-embed-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--lk-text-2);
}
/* Thumbnail chỉ bo hai góc TRÁI; cạnh phải (giáp phần chữ) thẳng. */
body.lk-theme .link-embed-thumb,
body.lk-theme .link-embed-thumb img {
    border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
}

/* Giữa cards và "Chú thích" chỉ MỘT vạch: <hr> cuối content bị ẩn khi đứng
   ngay trước khối footnotes, vì .post-footnotes đã tự kẻ border-top. */
body.lk-theme .post-content hr:has(+ details.post-footnotes) { display: none; }

/* "Chú thích": mũi tên chuyển ra SAU chữ (rotate khi mở giữ nguyên). */
body.lk-theme .post-footnotes > summary::before { content: none; }
body.lk-theme .post-footnotes > summary::after {
    content: '\25B8'; display: inline-block; transition: transform .15s ease;
    color: var(--lk-muted); font-size: 15px;
}
body.lk-theme .post-footnotes[open] > summary::after { transform: rotate(90deg); }

/* Nội dung cite: cùng cỡ với body bài viết (Crimson Pro 20px kế thừa). */
body.lk-theme .post-footnotes-list { font-size: 22px; line-height: 1.6; }

/* Khu "Chủ đề": vạch ngăn + heading 4 ngay trên hàng tag badges. */
.lk-post-sep { border: none; border-top: 1px solid var(--lk-rule); margin: 28px 0 0; }
.lk-post-tags-heading { margin: 22px 0 0; color: var(--lk-text); }
.lk-post-tags-heading + .lk-post-tags { margin-top: 14px; }

/* Đợt J mục 2: notice đặt-mật-khẩu chuyển thành thẻ float ở góc dưới phải,
   có nút X. Nền vàng nhạt cố định (highlight, giữ nguyên ở dark mode). */
.lk-notice-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 300;
    max-width: 340px; text-align: left;
    border: 1px solid #f1e1a6; border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    padding: 14px 38px 14px 16px; font-size: 14px; line-height: 1.55;
    color: #3d3417;
}
.lk-notice-close {
    position: absolute; top: 6px; right: 8px; border: none; background: none;
    font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .55;
    padding: 2px 4px;
}
.lk-notice-close:hover { opacity: 1; }
@media (max-width: 560px) { .lk-notice-float { left: 16px; right: 16px; max-width: none; } }

/* ---- Đợt K (fix): byline tác giả trong bài -- chưa từng có CSS riêng nên
   avatar hiển thị nguyên cỡ thumb 150px làm vỡ hàng meta. */
.lk-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-byline-avatar { display: block; flex-shrink: 0; line-height: 0; }
.lk-byline-avatar-img {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    display: block; background: var(--lk-rule);
}
/* Không có avatar: AvatarService trả <div> rỗng -- ẩn cả link bọc ngoài,
   đừng chừa lại một vòng tròn xám vô nghĩa. */
.lk-byline-avatar:has(> div.lk-byline-avatar-img) { display: none; }
body.lk-theme .lk-byline-name {
    font-weight: 600; color: var(--lk-text); font-size: 13.5px;
    text-decoration: none;
}
body.lk-theme .lk-byline-name:hover {
    color: var(--lk-navy); text-decoration: underline; text-underline-offset: 3px;
}
.lk-byline-sep, .lk-byline-and { color: var(--lk-muted); }
body.lk-theme .lk-byline-cat { color: var(--lk-navy); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }

/* ---- Đợt O mục 1: hàng title archive = title trái + tổng số bài phải. */
.lk-archive-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lk-archive-count { color: var(--lk-muted); font-size: 14px; white-space: nowrap; font-family: var(--lk-sans); }
body.lk-theme mark { background: #ffe89a; color: inherit; padding: 0 2px; border-radius: 2px; }
html[data-lk-mode="dark"] body.lk-theme mark { background: #7a6410; }

/* Đợt O mục 2: ô tìm kiếm bung tại chỗ từ icon 🔍 trên nav. */
.lk-nav-search { position: relative; display: inline-flex; align-items: center; }
.lk-nav-search-box { position: relative; margin-left: 8px; }
.lk-nav-search-box input {
    width: 220px; padding: 6px 10px; font-size: 14px; font-family: var(--lk-sans);
    border: 1px solid var(--lk-rule); border-radius: 4px;
    background: var(--lk-surface); color: var(--lk-text);
}
.lk-nav-search-results {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 400;
    width: 320px; max-height: 380px; overflow-y: auto;
    background: var(--lk-surface); border: 1px solid var(--lk-rule); border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
.lk-nav-search-results a {
    display: block; padding: 9px 12px; border-bottom: 1px solid var(--lk-rule);
    text-decoration: none; color: var(--lk-text);
}
.lk-nav-search-results a:last-child { border-bottom: 0; }
.lk-nav-search-results a:hover { background: var(--lk-bg); }
.lk-nav-search-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.lk-nav-search-meta { display: block; font-size: 11.5px; color: var(--lk-muted); margin-top: 2px; }
.lk-nav-search-none { padding: 12px; font-size: 13px; color: var(--lk-muted); }
@media (max-width: 560px) { .lk-nav-search-box input { width: 150px; } .lk-nav-search-results { width: 260px; } }

/* ---- Đợt P mục 3c: popup tìm kiếm giữa màn hình -- overlay TRẮNG mờ
   (khác các modal nền đen), input giữa, kết quả có thumbnail vuông 1:1. */
.lk-search-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(255, 255, 255, .82);
    /* Đợt Q: blur đậm hơn cho đẹp. */
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: flex; justify-content: center; align-items: flex-start;
    padding: 14vh 20px 40px;
}
html[data-lk-mode="dark"] .lk-search-overlay { background: rgba(20, 24, 34, .9); }
.lk-search-overlay-box { width: 100%; max-width: 620px; }
.lk-search-overlay-box > input {
    width: 100%; padding: 14px 18px; font-size: 19px; font-family: var(--lk-sans);
    border: 2px solid var(--lk-navy); border-radius: 8px;
    background: var(--lk-surface); color: var(--lk-text);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
}
.lk-search-overlay-box > input:focus { outline: none; }
.lk-search-overlay-results {
    margin-top: 10px; background: var(--lk-surface);
    border: 1px solid var(--lk-rule); border-radius: 8px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
    /* Đợt Q: danh sách dài tự cuộn trong khung. */
    max-height: 62vh; overflow-y: auto;
}
.lk-search-overlay-results a {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--lk-rule);
    text-decoration: none; color: var(--lk-text);
}
.lk-search-overlay-results a:last-child { border-bottom: 0; }
.lk-search-overlay-results a:hover { background: var(--lk-bg); }
.lk-search-overlay-thumb {
    width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover;
    border-radius: 4px; background: var(--lk-rule); display: block;
}
.lk-search-overlay-text { min-width: 0; }
.lk-search-overlay-title { display: block; font-family: var(--lk-sans); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.lk-search-overlay-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--lk-sans); font-size: 12.5px; color: var(--lk-muted); margin-top: 3px; line-height: 1.45;
}

/* Đợt Q: ↑/↓ chọn item + row "Chủ đề" khi keyword trùng tag. */
.lk-search-overlay-results a.is-active { background: var(--lk-chip-bg, #eef0f6); }
.lk-search-overlay-kicker {
    display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--lk-muted); margin-bottom: 2px;
}
.lk-search-overlay-thumb-tag {
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; border-radius: 50%; background: var(--lk-chip-bg, #eef0f6);
}
.lk-search-overlay-tag .lk-search-overlay-title { color: var(--lk-navy); font-size: 15.5px; }

/* Đợt Q: badge bo tròn HẲN -- vét nốt badge còn vuông (role trên trang tác giả, nút "…" hàng tag). */
.lk-author-role { border-radius: 999px; }
.lk-post-tags-more { border-radius: 999px; }

/* Đợt Q: embed iframe (form monday/google, data-viz…) từ block link có URL
   thuộc whitelist -- xem BlockRenderer::linkOrIframe. */
.post-iframe-embed { margin: 1.5em 0; }
.post-iframe-embed iframe {
    width: 100%; border: 1px solid var(--lk-rule); border-radius: 6px;
    background: var(--lk-surface); display: block;
}

/* Đợt S: mobile -- icon tìm kiếm chuyển lên topbar navy; hàng .lk-nav-right
   (trên navbar trắng) ẩn đi để không còn một hàng trống chỉ chứa mỗi 🔍. */
.lk-topbar-search { display: none; color: #fff; text-decoration: none; font-size: 17px; }
@media (max-width: 860px) {
    .lk-topbar-search { display: inline-flex; align-items: center; }
    .lk-nav .lk-nav-right { display: none; }
}


/* ==== Đợt Y ==== */

/* Card "Đọc thêm" (link-embed) theo dark mode -- nền/viền trước đây dùng
   token --color-* nên kẹt màu sáng khi đổi giao diện tối. */
html[data-lk-mode="dark"] .post-content .link-embed {
    background: var(--lk-surface); border-color: var(--lk-rule);
}
html[data-lk-mode="dark"] .post-content .link-embed-url { color: var(--lk-muted); }

/* Sidebar widgets: giãn cách giữa các widget + title bài dùng Inter bold.
   Cấu trúc thật: aside.lk-home-sidebar chứa .lk-sidebar-widgets (các
   sidebar-block) RỒI các cặp .lk-sidebar-heading + .lk-side-item ngang
   hàng -- mỗi .lk-sidebar-heading là mở đầu một widget mới. */
.lk-sidebar-widgets .sidebar-block { margin-bottom: 40px; }
.lk-sidebar-widgets > * + * { margin-top: 40px; }
.lk-home-sidebar > .lk-sidebar-heading { margin-top: 40px; }
.lk-home-sidebar .lk-card-title,
.lk-home-sidebar .lk-card-title a,
.lk-sidebar-widgets .lk-card-title,
.lk-sidebar-widgets .lk-card-title a {
    font-family: var(--lk-sans); font-weight: 700;
}


/* Đợt Z: mini window hover tên tác giả ở bài viết. */
.lk-author-card {
    position: absolute; z-index: 90; width: 300px;
    background: var(--lk-surface, #fff); color: var(--lk-text);
    border: 1px solid var(--lk-rule, #e3e4e8); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    padding: 14px 16px; font-family: var(--lk-sans); font-size: 13.5px;
}
.lk-author-card-head { display: flex; align-items: center; gap: 10px; }
.lk-author-card-avatar,
.lk-author-card-head img, .lk-author-card-head .author-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.lk-author-card-names { min-width: 0; }
.lk-author-card-name {
    display: block; font-weight: 700; font-size: 15px; color: var(--lk-text);
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-author-card-name:hover { color: var(--lk-navy); }
.lk-author-card-count { color: var(--lk-muted); font-size: 12.5px; }
.lk-author-card-bio {
    margin: 10px 0 0; color: var(--lk-text-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lk-author-card-link {
    display: inline-block; margin-top: 10px; font-size: 12.5px;
    color: var(--lk-navy); text-decoration: none; font-weight: 600;
}
.lk-author-card-link:hover { text-decoration: underline; }
@media (hover: none) { .lk-author-card { display: none; } }