/**
 * 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;
    /* Chữ ĐOẠN VĂN (thân bài, trang, mục từ). Mặc định trùng chữ giao diện,
       nhưng tách biến riêng để Cài đặt > Font đổi được hai thứ độc lập. */
    --cm-text: var(--cm-sans);

    --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;
}
/* Phải kèm body.cm-theme: quy tắc chung `body.cm-theme a:hover` có độ ưu
   tiên (0,2,2), cao hơn `.cm-brand:hover` (0,2,0), nên bản trước vẫn bị
   gạch chân dù đã ghi text-decoration: none ở đây. */
body.cm-theme .cm-brand:hover,
body.cm-theme .cm-brand:hover .cm-brand-text { text-decoration: none; }

/* ---- Quét 7 màu trên logo khi rê chuột -------------------------------
   Bảy màu phổ khả kiến lần lượt quét ngang khối logo: vào thì trượt từ
   TRÁI sang PHẢI, rút chuột ra thì cũng trượt tiếp từ trái sang phải để
   biến mất ở mép phải — nên hai chiều dùng hai gốc biến hình khác nhau:
   vào lấy gốc trái (nở ra từ mép trái), ra lấy gốc phải (co về mép phải).
   transform-origin không được đưa vào transition nên nó đổi tức thì đúng
   lúc trạng thái đổi, không cần JS.

   Chỉ dùng transform: scaleX — chạy trên luồng hợp thành của trình duyệt,
   không kích hoạt layout lần nào, nên mượt cả khi trang đang cuộn.

   Bảy màu đều đủ tối để chữ TRẮNG trên nó vẫn đọc được (tỉ lệ tương phản
   thấp nhất 4.82:1, ở màu vàng). Đừng thay bằng màu tươi hơn nếu không đo
   lại — vàng #FBD600 của bảng màu CoMo chỉ đạt 1.6:1, chữ sẽ biến mất.

   Thứ tự lớp: lớp sau đè lên lớp trước. Khi vào, màu 1 quét trước rồi màu 2
   phủ lên… đến màu 7. Khi ra, đảo độ trễ nên màu 7 rút trước, lộ dần màu 6,
   5… tức là cuốn ngược lại đúng thứ tự đã trải ra. */
.cm-brand-mark { position: relative; overflow: hidden; isolation: isolate; }
.cm-brand-swipe { position: absolute; inset: 0; z-index: 0; }
.cm-brand-flow { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0; }
.cm-brand-text { position: relative; z-index: 2; }
.cm-brand-swipe i {
    position: absolute;
    inset: 0;
    display: block;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.cm-brand-swipe i:nth-child(1) { background: #B3202E; }
.cm-brand-swipe i:nth-child(2) { background: #B54A12; }
.cm-brand-swipe i:nth-child(3) { background: #8A6F00; }
.cm-brand-swipe i:nth-child(4) { background: #1E7A3C; }
.cm-brand-swipe i:nth-child(5) { background: #12649B; }
.cm-brand-swipe i:nth-child(6) { background: #2B3A8F; }
.cm-brand-swipe i:nth-child(7) { background: #6B2D8C; }

/* ---- Lớp hoà màu trôi mãi -------------------------------------------
   Quét xong bảy màu thì logo không đứng nguyên màu tím nữa: một dải hoà
   màu hiện ra và trôi chậm từ trái sang phải, không có điểm dừng.

   Không dùng linear-gradient nữa mà xếp bảy ĐỐM màu bầu dục chồng mép lên
   nhau, mỗi đốm một cỡ, một độ cao khác nhau — kiểu lưới màu loang, không
   thấy đường kẻ nào.

   Mẹo để vòng lặp không thấy mối nối: dải con <b> rộng 800% (tám lần bề
   ngang khối logo) và chứa ĐÚNG HAI chu kỳ đốm giống hệt nhau, nên dịch
   ngang một đoạn 50% là vừa tròn một chu kỳ — khung hình cuối trùng khít
   khung hình đầu, animation nhảy về đầu mà mắt không bắt được.

   Chu kỳ dài 4 lần bề ngang khối logo, nên mỗi lúc chỉ thấy chừng hai đốm:
   màu vào ra từ từ chứ không phải cả bảy màu bày ra cùng lúc.

   Đốm TÍM đặt ngay khung hình đầu tiên, và nền lót cũng màu tím: lúc lớp
   này hiện ra thì nó vẫn đang tím, nối liền màu tím đặc mà bảy lớp quét
   vừa để lại — không còn cú nhảy màu.

   Dịch bằng transform chứ không bằng background-position: transform chạy
   trên luồng hợp thành, còn background-position bắt vẽ lại từng khung.

   Chạy animation CHỈ khi đang rê chuột (khai báo nằm trong khối :hover),
   để lúc bình thường trình duyệt không phải hợp thành gì cả. */
.cm-brand-flow b {
    background-color: #6B2D8C;
    background-image:
        radial-gradient(ellipse 9.5% 240% at 5.62% 46%, #6B2D8C 0%, #6B2D8C 16%, #6B2D8C00 100%),
        radial-gradient(ellipse 8.0% 210% at 16.88% 22%, #B3202E 0%, #B3202E 16%, #B3202E00 100%),
        radial-gradient(ellipse 11.0% 230% at 21.88% 78%, #B54A12 0%, #B54A12 16%, #B54A1200 100%),
        radial-gradient(ellipse 8.5% 200% at 26.88% 38%, #8A6F00 0%, #8A6F00 16%, #8A6F0000 100%),
        radial-gradient(ellipse 10.5% 250% at 32.50% 86%, #1E7A3C 0%, #1E7A3C 16%, #1E7A3C00 100%),
        radial-gradient(ellipse 9.0% 220% at 38.12% 28%, #12649B 0%, #12649B 16%, #12649B00 100%),
        radial-gradient(ellipse 10.0% 235% at 44.38% 68%, #2B3A8F 0%, #2B3A8F 16%, #2B3A8F00 100%),
        radial-gradient(ellipse 9.5% 240% at 55.62% 46%, #6B2D8C 0%, #6B2D8C 16%, #6B2D8C00 100%),
        radial-gradient(ellipse 8.0% 210% at 66.88% 22%, #B3202E 0%, #B3202E 16%, #B3202E00 100%),
        radial-gradient(ellipse 11.0% 230% at 71.88% 78%, #B54A12 0%, #B54A12 16%, #B54A1200 100%),
        radial-gradient(ellipse 8.5% 200% at 76.88% 38%, #8A6F00 0%, #8A6F00 16%, #8A6F0000 100%),
        radial-gradient(ellipse 10.5% 250% at 82.50% 86%, #1E7A3C 0%, #1E7A3C 16%, #1E7A3C00 100%),
        radial-gradient(ellipse 9.0% 220% at 88.12% 28%, #12649B 0%, #12649B 16%, #12649B00 100%),
        radial-gradient(ellipse 10.0% 235% at 94.38% 68%, #2B3A8F 0%, #2B3A8F 16%, #2B3A8F00 100%);
}
html[data-theme='dark'] .cm-brand-flow b {
    background-color: #DCA8F0;
    background-image:
        radial-gradient(ellipse 9.5% 240% at 5.62% 46%, #DCA8F0 0%, #DCA8F0 16%, #DCA8F000 100%),
        radial-gradient(ellipse 8.0% 210% at 16.88% 22%, #FF9A9F 0%, #FF9A9F 16%, #FF9A9F00 100%),
        radial-gradient(ellipse 11.0% 230% at 21.88% 78%, #FFBE7A 0%, #FFBE7A 16%, #FFBE7A00 100%),
        radial-gradient(ellipse 8.5% 200% at 26.88% 38%, #F7DE5E 0%, #F7DE5E 16%, #F7DE5E00 100%),
        radial-gradient(ellipse 10.5% 250% at 32.50% 86%, #8FE0A6 0%, #8FE0A6 16%, #8FE0A600 100%),
        radial-gradient(ellipse 9.0% 220% at 38.12% 28%, #8CCBF2 0%, #8CCBF2 16%, #8CCBF200 100%),
        radial-gradient(ellipse 10.0% 235% at 44.38% 68%, #AEB6F5 0%, #AEB6F5 16%, #AEB6F500 100%),
        radial-gradient(ellipse 9.5% 240% at 55.62% 46%, #DCA8F0 0%, #DCA8F0 16%, #DCA8F000 100%),
        radial-gradient(ellipse 8.0% 210% at 66.88% 22%, #FF9A9F 0%, #FF9A9F 16%, #FF9A9F00 100%),
        radial-gradient(ellipse 11.0% 230% at 71.88% 78%, #FFBE7A 0%, #FFBE7A 16%, #FFBE7A00 100%),
        radial-gradient(ellipse 8.5% 200% at 76.88% 38%, #F7DE5E 0%, #F7DE5E 16%, #F7DE5E00 100%),
        radial-gradient(ellipse 10.5% 250% at 82.50% 86%, #8FE0A6 0%, #8FE0A6 16%, #8FE0A600 100%),
        radial-gradient(ellipse 9.0% 220% at 88.12% 28%, #8CCBF2 0%, #8CCBF2 16%, #8CCBF200 100%),
        radial-gradient(ellipse 10.0% 235% at 94.38% 68%, #AEB6F5 0%, #AEB6F5 16%, #AEB6F500 100%);
}
.cm-brand-flow b {
    display: block;
    width: 800%;
    height: 100%;
    transform: translate3d(-50%, 0, 0);
}
@keyframes cm-brand-drift {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Chỉ bật ở thiết bị có chuột thật: trên cảm ứng trạng thái :hover dính
   lại sau khi chạm, logo sẽ đứng nguyên màu tím. */
@media (hover: hover) {
    .cm-brand:hover .cm-brand-swipe i { transform: scaleX(1); transform-origin: left; }

    /* Chớm hiện từ 300ms, tức là TRƯỚC khi lớp thứ bảy chạm mép phải
       (228ms trễ + 220ms chạy = 448ms), rồi hoà dần trong 700ms. Bản trước
       đợi hẳn tới 450ms mới bắt đầu nên có một quãng tím đứng im rồi mới
       đổi — thành ra giật. Chồng lấn được là nhờ lớp này khởi đầu cũng màu
       tím, đè lên màu tím thì không thấy gì khác thường. */
    .cm-brand:hover .cm-brand-flow { opacity: 1; transition: opacity .7s ease .3s; }
    .cm-brand:hover .cm-brand-flow b { animation: cm-brand-drift 6s linear infinite; }

    /* Rút chuột ra: tắt nhanh và KHÔNG trễ, để phần cuốn ngược bảy màu
       diễn ra y như cũ. */
    .cm-brand-flow { transition: opacity .14s ease; }

    /* Độ trễ vào: xuôi 1→7. Độ trễ ra: ngược 7→1. */
    .cm-brand:hover .cm-brand-swipe i:nth-child(1) { transition-delay: 0ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(2) { transition-delay: 38ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(3) { transition-delay: 76ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(4) { transition-delay: 114ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(5) { transition-delay: 152ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(6) { transition-delay: 190ms; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(7) { transition-delay: 228ms; }

    .cm-brand-swipe i:nth-child(1) { transition-delay: 228ms; }
    .cm-brand-swipe i:nth-child(2) { transition-delay: 190ms; }
    .cm-brand-swipe i:nth-child(3) { transition-delay: 152ms; }
    .cm-brand-swipe i:nth-child(4) { transition-delay: 114ms; }
    .cm-brand-swipe i:nth-child(5) { transition-delay: 76ms; }
    .cm-brand-swipe i:nth-child(6) { transition-delay: 38ms; }
    .cm-brand-swipe i:nth-child(7) { transition-delay: 0ms; }
}

/* Chế độ tối: khối logo đảo thành giấy TRẮNG chữ ĐEN, nên bảy màu cũng
   phải đảo theo — dùng bản sáng của cùng dải phổ, tương phản với chữ đen
   thấp nhất 10.37:1.

   Cách làm đầu tiên là giữ nguyên bảy màu tối rồi lật chữ sang trắng bằng
   `transition: color 0s 250ms`. Bỏ vì độ trễ đó không phân biệt được
   nguyên nhân đổi màu: người dùng bấm chuyển sáng/tối thì chữ logo cũng
   đứng yên 250ms, tức là trắng-trên-trắng, chớp mất chữ. Đổi bảng màu thì
   không phải đụng tới màu chữ lần nào. */
html[data-theme='dark'] .cm-brand-swipe i:nth-child(1) { background: #FF9A9F; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(2) { background: #FFBE7A; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(3) { background: #F7DE5E; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(4) { background: #8FE0A6; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(5) { background: #8CCBF2; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(6) { background: #AEB6F5; }
html[data-theme='dark'] .cm-brand-swipe i:nth-child(7) { background: #DCA8F0; }

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành: vẫn đổi màu để
   thấy rõ đang trỏ vào đâu, nhưng bỏ hẳn phần trượt và độ trễ. */
@media (prefers-reduced-motion: reduce) {
    .cm-brand-swipe i { transition: none; transition-delay: 0s !important; }
    .cm-brand:hover .cm-brand-swipe i:nth-child(-n+6) { transform: scaleX(0); }
    /* Vẫn cho thấy dải hoà màu, nhưng đứng yên và hiện ngay. */
    .cm-brand-flow { transition: none; }
    .cm-brand:hover .cm-brand-flow { opacity: 1; transition: none; }
    .cm-brand:hover .cm-brand-flow b { animation: 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-family: var(--cm-text); 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 {
    font-family: var(--cm-text);
    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-text);
    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); }

/* Dòng ghi công font tải lên, ngay dưới dòng bản quyền. */
.cm-footer-note.cm-footer-credit { margin-top: 6px; font-size: 11.5px; }
.cm-footer-note.cm-footer-credit a { color: inherit; }