/**
 * CM (CoMo) public theme — hệ thị giác dựng theo gallica.bnf.fr.
 *
 * Mọi trị số lấy từ phép đo getComputedStyle trên site thật ngày
 * 2026-08-30 (bảng đầy đủ ở docs/CM-FRONTEND-DESIGN.md), không phỏng đoán.
 *
 * Nạp SAU cm-base.css và cố ý đè lên nó. cm-base.css là bộ khung báo chí
 * đã token hoá tốt (lưới, thẻ, thang chữ), nên đè lớp token rồi viết lại
 * phần chrome rẻ hơn và ít vỡ hơn nhiều so với xoá đi làm lại.
 *
 * Chất Gallica gói trong bảy mô-típ, phần này dựng lại đủ cả bảy:
 *   1. nhãn dẫn nhỏ + tiêu đề Fraunces 900 khổng lồ
 *   2. băng đen đảo màu
 *   3. ảnh hero tràn + hộp trắng đè lên mang H1
 *   4. ●●● trước tiêu đề mục phụ
 *   5. lưới liên kết 2 cột, ngăn bằng hairline, có mũi tên →
 *   6. thẻ ảnh với nhãn dưới ảnh
 *   7. góc vuông tuyệt đối, không bo, không đổ bóng
 */

/* ==== 1. Token ========================================================= */
:root {
    /* Bảng màu gần như nhị phân. Vàng chỉ dành cho nút hành động. */
    --cm-ink: #000000;
    --cm-body: #222222;
    --cm-muted: #424242;
    --cm-paper: #ffffff;
    --cm-rule: #000000;
    --cm-rule-soft: #d8d5cf;
    --cm-accent: #FBD600;
    --cm-fill: #eeeeee;

    --cm-display: Fraunces, Georgia, 'Times New Roman', serif;
    --cm-sans: Roboto, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --cm-container: 976px;   /* cột chữ — đo được trên Gallica */
    --cm-wide: 1220px;       /* khối rộng hơn */

    /* Tiêu đề co giãn: Gallica đo 101px ở 1440 và 48px ở 700 → dùng clamp
       chứ không breakpoint cứng. */
    --cm-h-hero: clamp(2.75rem, 7.2vw, 6.5rem);
    --cm-h-sect: clamp(2.25rem, 7vw, 6.3rem);   /* = 101px @1440, đúng số đo */
    --cm-h-band: clamp(2.75rem, 12.8vw, 11.5rem); /* = 184px @1440 */

    /* Đè token của cmb-theme để mọi thứ kế thừa nó đổi theo một lần. */
    --cmb-navy: #000000;
    --cmb-navy-dark: #000000;
    --cmb-on-navy: #ffffff;
    --cmb-chip-bg: #eeeeee;
    --cmb-text: #000000;
    --cmb-text-2: #222222;
    --cmb-muted: #424242;
    --cmb-rule: #d8d5cf;
    --cmb-bg: #ffffff;
    --cmb-surface: #ffffff;
    --cmb-sans: Roboto, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --cmb-serif: Fraunces, Georgia, 'Times New Roman', serif;
    --cmb-content: Roboto, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --cmb-container: 1220px;
}

/* ==== 2. Nền chung ===================================================== */
body.cm-theme {
    background: var(--cm-paper);
    color: var(--cm-body);
    font-family: var(--cm-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.cm-theme h1,
body.cm-theme h2,
body.cm-theme h3,
body.cm-theme h4 {
    font-family: var(--cm-display);
    font-weight: 900;
    color: var(--cm-ink);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
    letter-spacing: -0.005em;
}

/* Góc vuông tuyệt đối — đây là nửa cái chất của Gallica. */
body.cm-theme .cmb-card,
body.cm-theme .cmb-card img,
body.cm-theme img,
body.cm-theme input,
body.cm-theme button,
body.cm-theme .btn,
body.cm-theme .cmb-chip { border-radius: 0 !important; }

body.cm-theme .cmb-card,
body.cm-theme .surface { box-shadow: none; }

body.cm-theme a { color: inherit; text-decoration: none; }
body.cm-theme a:hover { color: var(--cm-ink); text-decoration: underline; text-underline-offset: 3px; }

.cm-wrap { max-width: var(--cm-container); margin-inline: auto; padding-inline: 24px; }
.cm-wrap-wide { max-width: var(--cm-wide); margin-inline: auto; padding-inline: 24px; }

/* ==== 3. Nhãn dẫn + tiêu đề khổng lồ (mô-típ 1) ======================== */
body.cm-theme .cm-eyebrow {
    font-family: var(--cm-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--cm-ink);
    text-align: center;
    margin: 0 0 .15em;
}
body.cm-theme .cm-sect-title {
    font-size: var(--cm-h-sect);
    line-height: .92;
    text-align: center;
    margin: 0 0 .5em;
}
.cm-sect { padding: 74px 0 64px; }

/* ●●● trước tiêu đề mục phụ (mô-típ 4) */
.cm-dots-head {
    display: flex;
    align-items: baseline;
    gap: 22px;
    border-top: 2px solid var(--cm-rule);
    padding-top: 28px;
    margin-top: 56px;
}
.cm-dots-head::before {
    content: '';
    flex: 0 0 auto;
    width: 76px; height: 15px;
    background:
        radial-gradient(circle 7.5px at 7.5px 7.5px, var(--cm-ink) 99%, transparent 100%) 0 0/30px 15px repeat-x;
}
body.cm-theme .cm-dots-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1; margin: 0; }

/* ==== 4. Header (mô-típ: khối logo đen + dòng giới thiệu + công cụ) ==== */
.cm-header {
    background: var(--cm-paper);
    border-bottom: 0;
}
.cm-header-in {
    max-width: var(--cm-wide);
    margin-inline: auto;
    padding: 0 24px;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 34px;
}
.cm-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
/* Logo là MỘT khối đen duy nhất, chữ "como" viết thường. Bản trước có
   thêm chữ ký "CoMo" đứng cạnh, tức là cùng một cái tên viết theo hai kiểu
   nằm sát nhau — bỏ đi, giữ một cách viết thống nhất. */
.cm-brand-mark {
    background: var(--cm-ink);
    color: #fff;
    font-family: var(--cm-display);
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    padding: 6px 16px 10px;
    letter-spacing: -.01em;
}
.cm-brand:hover { text-decoration: none; }

/* ---- Lịch mini ở header ---------------------------------------------
   Trải ngang giữa logo và cụm công cụ: ngày dương lớn, rồi Mặt Trời, rồi
   Mặt Trăng, ngăn nhau bằng hairline. Ở màn hình hẹp thì thu về chỉ còn
   cột ngày, và dưới 900px thì ẩn hẳn (hamburger lo phần còn lại). */
.cm-cal {
    flex: 1 1 auto;
    display: flex; align-items: stretch;
    gap: 0;
    border-left: 1px solid var(--cm-rule-soft);
    border-right: 1px solid var(--cm-rule-soft);
    margin-inline: 8px;
    position: relative;
}
.cm-cal-col { display: flex; align-items: center; gap: 12px; padding: 8px 20px; }
.cm-cal-col + .cm-cal-col { border-left: 1px solid var(--cm-rule-soft); }
.cm-cal-daynum {
    font-family: var(--cm-display); font-weight: 900; font-size: 46px; line-height: .84;
    color: var(--cm-ink); letter-spacing: -.03em;
}
.cm-cal-month { font-family: var(--cm-display); font-weight: 700; font-size: 15px; line-height: 1.1; color: var(--cm-ink); }
.cm-cal-sub { font-size: 11.5px; line-height: 1.35; color: var(--cm-muted); }
.cm-cal-lunar { font-style: italic; }
.cm-cal-icon { flex: 0 0 auto; color: var(--cm-ink); display: block; }
.cm-cal-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--cm-muted); margin-bottom: 3px;
}
.cm-cal-times { display: flex; gap: 14px; font-size: 12.5px; color: var(--cm-body); white-space: nowrap; }
.cm-cal-times strong { font-variant-numeric: tabular-nums; color: var(--cm-ink); font-weight: 700; }
.cm-cal-place {
    position: absolute; right: 8px; bottom: 2px;
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted);
}
@media (max-width: 1180px) { .cm-cal-moon { display: none; } }
@media (max-width: 1000px) { .cm-cal-sun { display: none; } }
.cm-header-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; margin-left: auto; }
.cm-icon-btn {
    background: none; border: 0; padding: 4px;
    font-size: 26px; line-height: 1; color: var(--cm-ink); cursor: pointer;
}
.cm-burger { width: 34px; height: 22px; position: relative; }
.cm-burger span,
.cm-burger::before,
.cm-burger::after {
    content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--cm-ink);
}
.cm-burger::before { top: 0; }
.cm-burger span { top: 9.5px; }
.cm-burger::after { bottom: 0; }
.cm-lang {
    border: 2px solid var(--cm-ink);
    font-size: 13px; font-weight: 500;
    padding: 6px 8px;
    background: var(--cm-paper); color: var(--cm-ink);
    cursor: pointer;
}

/* Thanh danh mục: hairline, chữ nhỏ — Gallica giấu menu sau hamburger,
   nhưng một site bài viết thì cần lối đi trực tiếp tới chuyên mục. */
.cm-nav { border-top: 2px solid var(--cm-rule); border-bottom: 1px solid var(--cm-rule); }
.cm-nav-in {
    max-width: var(--cm-wide); margin-inline: auto; padding: 0 24px;
    display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none;
}
.cm-nav-in::-webkit-scrollbar { display: none; }
.cm-nav-in a {
    flex: 0 0 auto;
    padding: 13px 0;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--cm-ink); white-space: nowrap;
}
.cm-nav-in a:hover { text-decoration: none; box-shadow: inset 0 -3px 0 var(--cm-ink); }

/* ==== 5. Ô tìm kiếm lớn ở trang chủ ==================================== */
.cm-search { max-width: var(--cm-container); margin: 0 auto; padding: 0 24px; }
.cm-search-form { display: flex; border: 2px solid var(--cm-ink); }
.cm-search-form input {
    flex: 1 1 auto; border: 0; padding: 16px 20px;
    font-family: var(--cm-sans); font-size: 15px; color: var(--cm-ink); background: var(--cm-paper);
}
.cm-search-form input:focus { outline: 2px solid var(--cm-accent); outline-offset: -2px; }
.cm-search-form button {
    flex: 0 0 auto; border: 0; background: var(--cm-ink); color: #fff;
    padding: 0 26px; font-size: 20px; cursor: pointer;
}
.cm-search-more { display: block; text-align: right; margin-top: 14px; font-size: 15px; font-weight: 500; }
.cm-search-more::after { content: ' ›'; font-weight: 700; }

/* ==== 6. Băng nổi bật: ảnh + panel chữ ================================ */
.cm-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: 56px; }
.cm-feature-img { min-height: 420px; background: var(--cm-fill) center/cover no-repeat; }
.cm-feature-body {
    background: #FAF6EC;
    padding: clamp(32px, 5vw, 68px);
    display: flex; flex-direction: column; justify-content: center;
}
.cm-feature-body .cm-eyebrow { text-align: left; }
body.cm-theme .cm-feature-body h2 { font-size: clamp(2rem, 3.6vw, 3.35rem); line-height: .98; margin: 0 0 .5em; }
.cm-feature-body p { font-size: 15px; line-height: 1.6; margin: 0 0 1.6em; color: var(--cm-body); }
.cm-btn {
    align-self: flex-start;
    display: inline-block;
    background: var(--cm-ink); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 13px 22px;
}
.cm-btn:hover { text-decoration: none; background: var(--cm-muted); color: #fff; }

/* ==== 7. Băng đen đảo màu (mô-típ 2) ================================== */
.cm-band { background: var(--cm-ink); color: #fff; padding: 56px 0 64px; margin-top: 84px; }
body.cm-theme .cm-band h2 {
    color: #fff;
    font-size: var(--cm-h-band);
    line-height: .86;
    text-align: center;
    margin: 0 0 34px;
    letter-spacing: -.03em;
}
body.cm-theme .cm-band a { color: #fff; }
.cm-rail {
    max-width: var(--cm-wide); margin-inline: auto; padding: 0 24px;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
    gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.cm-rail::-webkit-scrollbar { height: 6px; }
.cm-rail::-webkit-scrollbar-thumb { background: #fff; }
.cm-rail::-webkit-scrollbar-track { background: #333; }
.cm-rail-item { scroll-snap-align: start; }
.cm-rail-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
body.cm-theme .cm-rail-item h3 { color: #fff; font-family: var(--cm-sans); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 14px 0 8px; }
.cm-rail-item p { font-size: 13.5px; line-height: 1.5; color: #d4d4d4; margin: 0 0 14px; }
.cm-more {
    display: inline-block; border: 2px solid currentColor;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 14px;
}
.cm-more:hover { text-decoration: none; background: #fff; color: #000 !important; }
.cm-band-foot { text-align: center; margin-top: 38px; font-size: 15px; font-weight: 500; }
.cm-band-foot a::after { content: ' ›'; font-weight: 700; }

/* ==== 8. Lưới liên kết 2 cột (mô-típ 5) =============================== */
.cm-index {
    max-width: var(--cm-container); margin-inline: auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px;
}
body.cm-theme .cm-index a {
    display: flex; align-items: baseline; gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--cm-rule-soft);
    font-family: var(--cm-display); font-weight: 700; font-size: 20px; color: var(--cm-ink);
}
.cm-index a::before { content: '→'; font-family: var(--cm-sans); font-weight: 400; flex: 0 0 auto; }
.cm-index a:hover { text-decoration: none; background: var(--cm-fill); }
.cm-index a span { margin-left: auto; font-family: var(--cm-sans); font-size: 12px; font-weight: 400; color: var(--cm-muted); }

/* ==== 9. Thẻ ảnh có nhãn dưới ảnh (mô-típ 6) ========================== */
.cm-tiles {
    max-width: var(--cm-container); margin-inline: auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 30px;
}
.cm-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid var(--cm-rule-soft); }
.cm-tile-label { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--cm-ink); line-height: 1.3; }
.cm-tile-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--cm-muted); }
.cm-tile:hover .cm-tile-label { text-decoration: underline; text-underline-offset: 3px; }

/* ==== 10. Ảnh hero tràn + hộp trắng đè (mô-típ 3) ===================== */
.cm-hero { position: relative; }
.cm-hero-img {
    height: clamp(220px, 30vw, 430px);
    background: var(--cm-fill) center/cover no-repeat;
}
.cm-hero-box {
    max-width: var(--cm-container);
    margin: -74px auto 0;
    position: relative;
    background: var(--cm-paper);
    padding: 34px 34px 4px 0;
}
body.cm-theme .cm-hero-box h1 {
    font-size: var(--cm-h-hero);
    line-height: .92;
    margin: 0;
    padding-left: 24px;
}
.cm-hero-lede {
    max-width: var(--cm-container); margin: 30px auto 0; padding: 0 24px;
    font-size: 18px; line-height: 1.62; color: var(--cm-body);
}
@media (max-width: 700px) {
    .cm-hero-box { margin-top: -38px; padding: 20px 16px 0 0; }
}

/* ==== 11. Trang bài ==================================================== */
body.cm-theme .cmb-post-title,
body.cm-theme .post-title,
body.cm-theme article h1 {
    font-family: var(--cm-display); font-weight: 900;
    font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: .98; letter-spacing: -.015em;
}
body.cm-theme .post-content,
body.cm-theme .cmb-post-body {
    font-family: var(--cm-sans);
    font-size: 17.5px;
    line-height: 1.72;
    color: var(--cm-body);
}
body.cm-theme .post-content h2,
body.cm-theme .cmb-post-body h2 {
    font-family: var(--cm-display); font-weight: 900;
    font-size: 1.72em; line-height: 1.08; margin: 1.9em 0 .5em;
}
body.cm-theme .post-content blockquote,
body.cm-theme .cmb-post-body blockquote {
    border-left: 0;
    border-top: 2px solid var(--cm-rule);
    border-bottom: 2px solid var(--cm-rule);
    margin: 2em 0; padding: 1.1em 0;
    font-family: var(--cm-display); font-weight: 400; font-style: italic;
    font-size: 1.32em; line-height: 1.32; color: var(--cm-ink);
}
body.cm-theme .post-content figure img,
body.cm-theme .cmb-post-body img { border: 1px solid var(--cm-rule-soft); }
body.cm-theme figcaption { font-size: 13px; color: var(--cm-muted); font-style: italic; }

/* Chip chuyên mục: chữ nhỏ in hoa, không nền màu */
body.cm-theme .cmb-chip,
body.cm-theme .cmb-card-cat,
.cm-kicker {
    background: none !important;
    color: var(--cm-ink) !important;
    font-family: var(--cm-sans);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 0 !important;
}

/* Thẻ bài dùng lại của cmb-theme: bỏ bo góc, đổi chữ tiêu đề sang Roboto đậm
   (Gallica dùng sans cho tiêu đề thẻ, chỉ tiêu đề mục mới là serif). */
body.cm-theme .cmb-card h3,
body.cm-theme .cmb-card-title {
    font-family: var(--cm-sans) !important;
    font-weight: 700;
    letter-spacing: -.005em;
}
body.cm-theme .cmb-card img { filter: grayscale(1) contrast(1.04); }
body.cm-theme .cmb-card:hover img { filter: none; }

/* ==== 12. Chân trang ================================================== */
.cm-footer { border-top: 2px solid var(--cm-rule); margin-top: 96px; padding: 56px 0 40px; background: var(--cm-paper); }
.cm-footer-in { max-width: var(--cm-wide); margin-inline: auto; padding: 0 24px; }
.cm-footer-links {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0 26px; font-size: 16px;
}
.cm-footer-links a { color: var(--cm-ink); padding: 6px 0; font-size: 16px; }
.cm-footer-links .cm-sep { width: 1px; align-self: stretch; background: var(--cm-rule-soft); }
.cm-footer-social { display: flex; justify-content: center; gap: 22px; margin-top: 26px; font-size: 19px; }
.cm-footer-note { text-align: center; margin-top: 30px; font-size: 12.5px; color: var(--cm-muted); }

/* ==== 13. Ngăn đôi màn hình nhỏ ======================================= */
@media (max-width: 900px) {
    .cm-feature { grid-template-columns: 1fr; }
    .cm-feature-img { min-height: 240px; }
    .cm-index { grid-template-columns: 1fr; }
    .cm-cal { display: none; }
    .cm-header-in { min-height: 76px; gap: 16px; }
    .cm-brand-mark { font-size: 26px; padding: 5px 12px 8px; }
    .cm-sect { padding: 52px 0 44px; }
}
@media (max-width: 560px) {
    .cm-footer-links { gap: 0 16px; font-size: 14px; }
    .cm-footer-links .cm-sep { display: none; }
}

/* ==== 14. Chế độ tối ================================================== */
/* Gallica chỉ có một chế độ sáng. CM vẫn giữ chế độ tối của CMS, nên đảo
   đúng bốn token là cả hệ thống theo — không phải viết lại bảng màu. */
html[data-theme='dark'] {
    --cm-ink: #ffffff;
    --cm-body: #e6e4df;
    --cm-muted: #a6a29a;
    --cm-paper: #0b0b0b;
    --cm-rule: #ffffff;
    --cm-rule-soft: #3a3833;
    --cm-fill: #1c1b19;
    --cmb-text: #ffffff;
    --cmb-text-2: #e6e4df;
    --cmb-muted: #a6a29a;
    --cmb-bg: #0b0b0b;
    --cmb-surface: #0b0b0b;
    --cmb-rule: #3a3833;
    --cmb-navy: #ffffff;
    --cmb-on-navy: #000000;
}
html[data-theme='dark'] .cm-band { background: #ffffff; }
html[data-theme='dark'] body.cm-theme .cm-band h2,
html[data-theme='dark'] body.cm-theme .cm-band a,
html[data-theme='dark'] body.cm-theme .cm-rail-item h3 { color: #000; }
html[data-theme='dark'] .cm-rail-item p { color: #3a3a3a; }
html[data-theme='dark'] .cm-feature-body { background: #171613; }
html[data-theme='dark'] .cm-brand-mark { background: #fff; color: #000; }
html[data-theme='dark'] .cm-btn { background: #fff; color: #000; }
html[data-theme='dark'] .cm-search-form button { background: #fff; color: #000; }

/* ==== 15. Đầu trang lưu trữ (chuyên mục / tag / tác giả / tìm kiếm) ====
   Dùng lại markup cmb-archive nhưng đổi sang nhịp Gallica: nhãn dẫn nhỏ
   in nghiêng, rồi tiêu đề Fraunces 900 khổng lồ căn giữa, gạch ngang dưới. */
body.cm-theme .cmb-archive-head {
    text-align: center;
    border-bottom: 2px solid var(--cm-rule);
    padding: 40px 0 26px;
    margin-bottom: 40px;
}
body.cm-theme .cmb-archive-kicker {
    font-family: var(--cm-display);
    font-style: italic; font-weight: 400;
    font-size: 1.125rem; text-transform: none; letter-spacing: 0;
    color: var(--cm-ink);
    margin-bottom: .1em;
}
body.cm-theme .cmb-archive-title-row { justify-content: center; flex-wrap: wrap; gap: 10px 18px; }
body.cm-theme .cmb-archive-title {
    font-family: var(--cm-display); font-weight: 900;
    font-size: clamp(2.25rem, 6vw, 5.2rem); line-height: .94;
    letter-spacing: -.02em;
}
body.cm-theme .cmb-archive-count {
    font-family: var(--cm-sans); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--cm-muted);
    align-self: flex-end; padding-bottom: .5em;
}
body.cm-theme .cmb-archive-desc {
    max-width: 620px; margin: 18px auto 0;
    font-size: 16.5px; line-height: 1.6; color: var(--cm-body);
}

/* Ảnh trong danh sách: đơn sắc như bản in, trả màu khi rê chuột. */
body.cm-theme .cmb-archive img,
body.cm-theme .cmb-list img { filter: grayscale(1) contrast(1.04); transition: filter .2s; }
body.cm-theme .cmb-archive a:hover img,
body.cm-theme .cmb-list a:hover img { filter: none; }

/* ==== 16. Từ điển ===================================================== */
/* Liên kết từ điển tự động: gạch chân chấm, không đổi màu chữ. Cả bài có
   thể có chục liên kết như vậy — tô màu hết thì thân bài thành rừng xanh,
   đọc không nổi. */
body.cm-theme a.cm-dict {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: help;
}
body.cm-theme a.cm-dict:hover { text-decoration: underline solid; background: var(--cm-fill); }

/* Thẻ tooltip */
.cm-tip {
    position: absolute; z-index: 120;
    width: 330px; max-width: calc(100vw - 32px);
    background: var(--cm-paper);
    border: 2px solid var(--cm-rule);
    box-shadow: 6px 6px 0 rgba(0,0,0,.10);
    padding: 0; opacity: 0; transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
}
.cm-tip.on { opacity: 1; transform: none; }
.cm-tip img { width: 100%; height: 116px; object-fit: cover; display: block; border-bottom: 1px solid var(--cm-rule-soft); filter: grayscale(1) contrast(1.05); }
.cm-tip-body { padding: 13px 15px 15px; }
.cm-tip-title { font-family: var(--cm-display); font-weight: 900; font-size: 19px; line-height: 1.12; color: var(--cm-ink); margin: 0 0 6px; }
.cm-tip-short { font-size: 13.5px; line-height: 1.5; color: var(--cm-body); margin: 0; }
.cm-tip-foot { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-muted); }
@media (prefers-reduced-motion: reduce) { .cm-tip { transition: none; } }

/* Chỉ mục A–Z */
.cm-az { display: flex; flex-direction: column; gap: 30px; }
.cm-az-block { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; border-top: 1px solid var(--cm-rule-soft); padding-top: 16px; }
.cm-az-letter { font-family: var(--cm-display); font-weight: 900; font-size: 42px; line-height: .9; color: var(--cm-ink); }
.cm-az-list { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 8px; }
.cm-az-list a { font-size: 16px; color: var(--cm-ink); }
.cm-az-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Đầu một mục từ */
.cm-entry-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
    margin-top: 22px; padding-bottom: 14px;
    border-bottom: 1px solid var(--cm-rule-soft);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--cm-muted);
}
.cm-entry-meta a.cm-entry-crumb { color: var(--cm-ink); }
.cm-entry-updated { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
.cm-entry-aliases { margin: 16px 0 0; font-family: var(--cm-display); font-style: italic; font-size: 17px; color: var(--cm-body); }
.cm-entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--cm-rule); }
.cm-entry-tags > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cm-muted); }
.cm-entry-tags a { font-size: 14px; color: var(--cm-ink); border-bottom: 1px solid var(--cm-rule-soft); }
@media (max-width: 560px) {
    .cm-az-block { grid-template-columns: 44px 1fr; gap: 12px; }
    .cm-az-letter { font-size: 30px; }
    .cm-entry-updated { margin-left: 0; }
}

/* ==== 17. Trang chủ theo bố cục NOCTRA ================================
   Mượn cách SẮP XẾP của NOCTRA (Maria Knyazeva) — thanh tiện ích mảnh,
   hero serif nghiêng khổng lồ có chữ nhỏ kèm hai bên, băng ảnh tràn, đoạn
   dẫn căn giữa, hàng bốn ô có viền, các hàng nhãn|nội dung. Giữ nguyên
   bảng màu và bộ chữ của CoMo: giấy trắng, mực đen, góc vuông. */

.cm-utility { border-bottom: 1px solid var(--cm-rule-soft); background: var(--cm-paper); }
.cm-utility-in {
    max-width: var(--cm-wide); margin-inline: auto; padding: 7px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cm-muted);
}
.cm-utility-in a { color: var(--cm-ink); }
.cm-utility-mid { text-align: center; }
@media (max-width: 900px) { .cm-utility-mid { display: none; } }
@media (max-width: 560px) { .cm-utility-in { font-size: 9.5px; letter-spacing: .1em; } }

/* Hero */
.cm-hero-noctra { padding: 74px 0 56px; }
body.cm-theme .cm-hero-display {
    font-family: var(--cm-display); font-weight: 900;
    font-size: clamp(2.6rem, 8.2vw, 7.4rem); line-height: .9;
    text-align: center; margin: 0; color: var(--cm-ink); letter-spacing: -.025em;
}
.cm-hero-display span { display: block; }
.cm-hero-display em { display: block; font-style: italic; }
.cm-hero-flank {
    max-width: var(--cm-wide); margin: 34px auto 0; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px;
}
.cm-hero-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cm-body); max-width: 380px; }
.cm-hero-note-r {
    justify-self: end; text-align: right;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    font-size: 11px; color: var(--cm-muted);
}
.cm-hero-cta { text-align: center; margin: 34px 0 0; }

/* Băng ảnh tràn chiều rộng */
.cm-band-img {
    display: block; position: relative;
    height: clamp(230px, 34vw, 480px);
    background: var(--cm-fill) center/cover no-repeat;
    border-top: 2px solid var(--cm-rule); border-bottom: 2px solid var(--cm-rule);
}
.cm-band-img:hover { text-decoration: none; }
.cm-band-img-cap {
    position: absolute; left: 0; bottom: 0;
    background: var(--cm-paper); padding: 18px 26px 16px 24px;
    max-width: min(640px, 86%);
    display: block; border-top: 2px solid var(--cm-rule); border-right: 2px solid var(--cm-rule);
}
.cm-band-img-title {
    display: block; margin-top: 6px;
    font-family: var(--cm-display); font-weight: 900;
    font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.05; color: var(--cm-ink);
}

/* Đoạn dẫn căn giữa, in hoa giãn ký tự */
.cm-lede-wrap { padding: 62px 24px 54px; }
.cm-lede {
    max-width: 880px; margin: 0 auto; text-align: center;
    font-size: clamp(13px, 1.35vw, 15px); line-height: 2;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
    color: var(--cm-body);
}

/* Hàng bốn ô có viền */
.cm-quad-wrap { max-width: var(--cm-wide); margin-inline: auto; padding: 0 24px 20px; }
.cm-quad { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--cm-rule); }
.cm-quad-cell {
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px 22px 28px; color: var(--cm-ink);
}
.cm-quad-cell + .cm-quad-cell { border-left: 1px solid var(--cm-rule-soft); }
.cm-quad-cell:hover { background: var(--cm-fill); text-decoration: none; }
.cm-quad-title { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cm-quad-text { font-size: 13px; line-height: 1.55; color: var(--cm-body); }
@media (max-width: 900px) { .cm-quad { grid-template-columns: repeat(2, 1fr); }
    .cm-quad-cell:nth-child(3) { border-left: 0; }
    .cm-quad-cell:nth-child(n+3) { border-top: 1px solid var(--cm-rule-soft); } }
@media (max-width: 520px) { .cm-quad { grid-template-columns: 1fr; }
    .cm-quad-cell + .cm-quad-cell { border-left: 0; border-top: 1px solid var(--cm-rule-soft); } }

/* Hàng nhãn | nội dung */
.cm-defs { display: flex; flex-direction: column; border-top: 2px solid var(--cm-rule); }
.cm-def { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--cm-rule-soft); }
.cm-def-label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-ink); }
.cm-def-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--cm-body); max-width: 640px; }
.cm-def-links { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14.5px; }
.cm-def-links a { color: var(--cm-ink); border-bottom: 1px solid var(--cm-rule-soft); }
.cm-def-links span { color: var(--cm-muted); }
@media (max-width: 700px) {
    .cm-def { grid-template-columns: 1fr; gap: 8px; }
    .cm-hero-flank { grid-template-columns: 1fr; }
    .cm-hero-note-r { justify-self: start; text-align: left; }
}

/* ==== 18. Nguồn bài viết ============================================== */
.cm-source { margin-top: 46px; }
.cm-source-rule { border: 0; border-top: 2px solid var(--cm-rule); margin: 0 0 18px; }
body.cm-theme .cm-source-head {
    font-family: var(--cm-sans); font-weight: 700;
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cm-muted); margin: 0 0 8px;
}
.cm-source-body { margin: 0; font-size: 15.5px; color: var(--cm-body); }
.cm-source-body a { color: var(--cm-ink); border-bottom: 1px solid var(--cm-rule-soft); }