/* public_trong_dong.css — Hoạ tiết trống đồng ở trang công khai (D-352 mức «vừa», D-355; DAC-TA-WEB §5.19, §5.19.1).
   Nạp SAU CSS của trang. Không sửa styles.css / _topbar_compact.html: mọi thứ ở đây là lớp phủ.
   Mọi hoạ tiết là mặt nạ đơn sắc (mask-image) tô bằng token --mz-*; không bóng, không gradient, không chuyển động.
   Chỉ dùng ::before / ::after (trang trí, không có chữ thay thế).
   SVG ở brand/trong-dong là «mặt nạ độ sáng» (nền đen + trắng = hiện, đen = khoét; không có <mask> bên trong, để Safari vẽ nét sắc):
   mọi chỗ dùng PHẢI có mask-mode: luminance (+ -webkit-mask-source-type: luminance), và phần vẽ hoạ tiết nằm trong @supports — trình duyệt không hỗ trợ thì không vẽ gì (vạch mặc định vẫn chạy).
   NGOẠI LỆ — nền măng-sét MB-1..MB-4 (§7) dùng WebP có kênh alpha (mat-trong-*-giua/-tren/-800.webp), mặt nạ alpha thường, KHÔNG luminance:
   Safari thật bỏ qua luminance ở lớp lớn (lớp được ghép riêng) và tô kín cả ô.
   Dải lặp: mỗi ô rộng đúng số nguyên px nhờ round() (biến --vn-r = viewBox rộng/cao của từng SVG), tránh khe 1px giữa hai ô.

   Quốc tang (sáng + tối): mọi rule loại body.theme-quoc-tang => trở lại giao diện hiện tại.
   forced-colors / prefers-contrast: more / print: cả khối nằm trong @media screen loại hai trường hợp đầu => vạch mặc định, không hoạ tiết.

   Cài đặt do máy chủ in (ornament, themes/ornament.py) thành thuộc tính data-vn-* — CSS đọc, không có URL tự do:
     data-vn-band  D1..D10     data-vn-size  s|m|l      data-vn-color  accent|gold
     data-vn-top   thin|thick  data-vn-bottom thin|thick (vắng = không vạch)
     data-vn-off   (khối trang chủ ghi đè «Mặc định»)    data-vn-mb  MB-1..MB-4 (nền măng-sét)
   Chỗ cố định khác (không có cài đặt): mặt trời đặc ngắt đoạn bài tin (§8).
   Chỗ đặt thuộc tính: <html> (vạch ngăn chung, do _public_ornament_head.html), phần tử gốc của từng khối trang chủ (home.html,
   stampSectionDivider), .public-masthead (_public_masthead.html), <footer> (_public_footer.html). */

@media screen and (not (forced-colors: active)) and (not (prefers-contrast: more)) {

/* ------------------------------------------------------------------ */
/* 1. Từ thuộc tính sang biến                                          */
/* ------------------------------------------------------------------ */
[data-vn-band] {
  --vn-h: 10px;
  --vn-t: 0px; --vn-g1: 0px;
  --vn-b: 0px; --vn-g2: 0px;
  --vn-c: var(--mz-red);
  --vn-lc: var(--mz-red);
  --vn-w: auto;
}
@supports (width: round(1.5px, 1px)) {
  /* Ô lặp rộng số nguyên px: trình duyệt không có round() giữ auto (rộng theo tỉ lệ, có thể lẻ). */
  [data-vn-band] { --vn-w: round(calc(var(--vn-h) * var(--vn-r)), 1px); }
}
[data-vn-band="D10"] { --vn-h: 18px; }
[data-vn-band="D1"]  { --vn-img: url("/static/brand/trong-dong/dai-tong-hop.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 37.8230; }
[data-vn-band="D2"]  { --vn-img: url("/static/brand/trong-dong/dai-vong-tron-tiep-tuyen.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 1.2099; }
[data-vn-band="D3"]  { --vn-img: url("/static/brand/trong-dong/dai-chim-lac.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 2.2283; }
[data-vn-band="D4"]  { --vn-img: url("/static/brand/trong-dong/dai-huou.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 2.6708; }
[data-vn-band="D5"]  { --vn-img: url("/static/brand/trong-dong/dai-nguoi-nha.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 3.3672; }
[data-vn-band="D6"]  { --vn-img: url("/static/brand/trong-dong/dai-hoi-van.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 1.2419; }
[data-vn-band="D7"]  { --vn-img: url("/static/brand/trong-dong/dai-tam-giac.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 0.8731; }
[data-vn-band="D8"]  { --vn-img: url("/static/brand/trong-dong/dai-vong-tron.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 1.5620; }
[data-vn-band="D9"]  { --vn-img: url("/static/brand/trong-dong/dai-vach.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 2.2314; }
[data-vn-band="D10"] { --vn-img: url("/static/brand/trong-dong/dai-vien-kep.svg?v=20261017-hoa-tiet-sua2"); --vn-r: 0.3654; }
[data-vn-band][data-vn-size="s"] { --vn-h: 8px; }
[data-vn-band][data-vn-size="m"] { --vn-h: 10px; }
[data-vn-band][data-vn-size="l"] { --vn-h: 14px; }
[data-vn-band="D10"][data-vn-size="s"] { --vn-h: 14px; }
[data-vn-band="D10"][data-vn-size="m"] { --vn-h: 18px; }
[data-vn-band="D10"][data-vn-size="l"] { --vn-h: 22px; }
[data-vn-band][data-vn-top="thin"]     { --vn-t: 1px; --vn-g1: 3px; }
[data-vn-band][data-vn-top="thick"]    { --vn-t: 3px; --vn-g1: 3px; }
[data-vn-band][data-vn-bottom="thin"]  { --vn-b: 1px; --vn-g2: 3px; }
[data-vn-band][data-vn-bottom="thick"] { --vn-b: 3px; --vn-g2: 3px; }
[data-vn-band][data-vn-color="gold"]   { --vn-c: var(--mz-gold); }
/* D-256: nền tối, kẻ ĐỎ của vạch ngăn mục và vạch dưới măng-sét = vàng đồng tối (--mzd-gold). Chỉ đổi màu vạch (--vn-lc), dải hoạ tiết (--vn-c) giữ nguyên.
   Chân trang (§6) và tiêu đề cột «dải đỏ» đặt lại --vn-lc = band-accent bằng bộ chọn đặc hơn nên không bị đổi; quốc tang: các rule dùng --vn-lc đều không chạy. */
html[data-mz-theme="dark"][data-vn-band],
html[data-mz-theme="dark"] [data-vn-band] { --vn-lc: var(--mzd-gold, #B08D4A); } /* --mzd-gold khai ở body, <html> chưa thấy → dự phòng cùng giá trị */

/* ------------------------------------------------------------------ */
/* 2. Vạch ngăn mục .mz-section-head (§5.7, §5.19.1)                   */
/*    vạch trên (border-top) · 3 · dải (::before, mask) · 3 · vạch dưới (::after) · 14 tới chữ. */
/*    Chỉ chạy khi chính nó hoặc một tổ tiên có data-vn-band, và không nằm trong data-vn-off. */
/* ------------------------------------------------------------------ */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-section-head.mz-section-head:is([data-vn-band], [data-vn-band] *):not(:is([data-vn-off], [data-vn-off] *)) {
  border-top: var(--vn-t) solid var(--vn-lc);
  padding-top: calc(var(--vn-g1) + var(--vn-h) + var(--vn-g2) + var(--vn-b) + 14px);
}
@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) { /* dải */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-section-head.mz-section-head:is([data-vn-band], [data-vn-band] *):not(:is([data-vn-off], [data-vn-off] *))::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: var(--vn-g1);
    height: var(--vn-h);
    background: none;
    background-color: var(--vn-c);
    pointer-events: none;
    -webkit-mask-image: var(--vn-img); mask-image: var(--vn-img);
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: var(--vn-w) var(--vn-h); mask-size: var(--vn-w) var(--vn-h);
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-section-head.mz-section-head:is([data-vn-band], [data-vn-band] *):not(:is([data-vn-off], [data-vn-off] *))::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--vn-g1) + var(--vn-h) + var(--vn-g2));
  height: var(--vn-b);
  background-color: var(--vn-lc);
  pointer-events: none;
}

/* Tiêu đề cột «dải đỏ» (K10): nền đỏ sẫm nên dải và vạch dùng band-accent như chữ kicker của nó, không dùng son. */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-cols__col[data-heading="red"] .mz-cols__head.mz-section-head {
  --vn-c: var(--mz-band-accent);
  --vn-lc: var(--mz-band-accent);
}

@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) { /* mục 3–5 */
  /* ------------------------------------------------------------------ */
  /* 3. Dấu mặt trời trước chữ kicker của tiêu đề mục (cố định, D-352)   */
  /* ------------------------------------------------------------------ */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-section-head .mz-kicker::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-end: 8px;
    margin-block: -4px;
    /* Tâm dấu = tâm chữ hoa: inline-block rỗng có baseline ở mép dưới margin box, nên tâm dấu = vertical-align + margin-bottom + size/2; tâm chữ hoa = 0,711em/2 (Roboto Condensed) → vertical-align = 0,3555em − size/2 − margin-bottom = 0,3555em − 4px ở cả hai cỡ. Chromium cắt vertical-align phân số xuống số nguyên px nên làm tròn ra px nguyên (1px ở 13px, 0 ở 12px); dòng trước là dự phòng cho trình duyệt chưa có round(). */
    vertical-align: 1px;
    vertical-align: round(calc(0.3555em - 4px), 1px);
    background-color: currentColor;
    -webkit-mask-image: url("/static/brand/trong-dong/mat-troi-dac.svg?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-troi-dac.svg?v=20261017-hoa-tiet-sua2");
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px; mask-size: 16px 16px;
    -webkit-mask-position: center; mask-position: center;
  }

  @media (max-width: 768px) {
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .mz-section-head .mz-kicker::before {
      width: 14px;
      height: 14px;
      margin-inline-end: 7px;
      margin-block: -3px;
      vertical-align: 0;
      vertical-align: round(calc(0.3555em - 4px), 1px); /* cùng công thức: 0,3555em − 7px + 3px */
      -webkit-mask-size: 14px 14px; mask-size: 14px 14px;
    }
  }

  /* ------------------------------------------------------------------ */
  /* 4. Đầu trang danh sách: dải chim Lạc (cố định, D-352)               */
  /*    thể loại .dmb-ih · tủ sách .tsb-ih / .tsb-mh · tất cả sách .all-books-page .book-list-page__hero */
  /* ------------------------------------------------------------------ */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero) {
    position: relative;
  }
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    height: 20px;
    pointer-events: none;
    background-color: var(--mz-gold);
    opacity: .80;
    -webkit-mask-image: url("/static/brand/trong-dong/dai-chim-lac.svg?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/dai-chim-lac.svg?v=20261017-hoa-tiet-sua2");
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: auto 20px; mask-size: auto 20px;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero)::after {
    opacity: .65;
  }
  @supports (width: round(1.5px, 1px)) { /* ô chim Lạc rộng số nguyên px (tỉ lệ 2.2283) */
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero)::after {
      -webkit-mask-size: round(calc(20px * 2.2283), 1px) 20px; mask-size: round(calc(20px * 2.2283), 1px) 20px;
    }
    @media (max-width: 768px) {
      html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero)::after {
        -webkit-mask-size: round(calc(14px * 2.2283), 1px) 14px; mask-size: round(calc(14px * 2.2283), 1px) 14px;
      }
    }
  }
  /* Chỗ chừa: dải 20 + khe 8 + ≥ 16 tới dòng kế tiếp (đếm đầu sách / thanh sắp xếp). .tsb-mh đã có đệm 56 phía dưới nên không cần thêm. */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih) { margin-bottom: 44px; }
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .all-books-page .book-list-page__hero { margin-bottom: 4px; }
  @media (max-width: 768px) {
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih, .tsb-mh, .all-books-page .book-list-page__hero)::after {
      top: calc(100% + 6px);
      height: 14px;
      -webkit-mask-size: auto 14px; mask-size: auto 14px;
    }
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) :is(.dmb-ih, .tsb-ih) { margin-bottom: 36px; }
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .all-books-page .book-list-page__hero { margin-bottom: 0; }
  }

  /* ------------------------------------------------------------------ */
  /* 5. Trang lỗi / trống: mặt trời nét trên dòng thông báo (cố định)    */
  /* ------------------------------------------------------------------ */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .pe-page .pe-head::before {
    content: "";
    display: block;
    width: 96px;
    height: 96px;
    margin-block-end: 24px;
    background-color: var(--mz-gold);
    opacity: .70;
    -webkit-mask-image: url("/static/brand/trong-dong/mat-troi-net.svg?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-troi-net.svg?v=20261017-hoa-tiet-sua2");
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 96px 96px; mask-size: 96px 96px;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .pe-page .pe-head::before {
    opacity: .55;
  }
  @media (max-width: 768px) {
    html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .pe-page .pe-head::before {
      width: 72px;
      height: 72px;
      -webkit-mask-size: 72px 72px; mask-size: 72px 72px;
    }
  }
}

/* ------------------------------------------------------------------ */
/* 6. Chân trang: viền hoạ tiết dưới kẻ son 6 px (mặc định D10)        */
/*    ::before = dải; vạch trên / vạch dưới = __inner::before / ::after (::after của <footer> đã dùng làm khoảng chừa). */
/* ------------------------------------------------------------------ */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] {
  --vn-c: var(--mz-band-accent);
  --vn-lc: var(--mz-band-accent);
  position: relative;
}
@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) { /* dải chân trang */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: var(--vn-g1);
    height: var(--vn-h);
    pointer-events: none;
    background-color: var(--vn-c);
    opacity: .70;
    -webkit-mask-image: var(--vn-img); mask-image: var(--vn-img);
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: var(--vn-w) var(--vn-h); mask-size: var(--vn-w) var(--vn-h);
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::before,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  background-color: var(--vn-lc);
  opacity: .70;
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::before {
  top: 0;
  height: var(--vn-t);
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::after {
  top: calc(var(--vn-g1) + var(--vn-h) + var(--vn-g2));
  height: var(--vn-b);
}
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band]::before,
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::before,
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-footer-v2.public-footer-v2[data-vn-band] .public-footer-v2__inner::after {
  opacity: .60;
}

/* ------------------------------------------------------------------ */
/* 7. Măng-sét (chỉ trang chủ): nền MB-1…MB-4 và viền dưới kẻ kép 6 px */
/*    «legacy» = giữ nguyên ảnh nền hiện có (không rule nào ở đây).     */
/* ------------------------------------------------------------------ */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-1"]::before,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-2"]::before,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-3"]::before,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-4"]::before {
  display: block;
  inset: 0;
  height: auto;
  z-index: 0;
  background-image: none;
  background-color: var(--mz-gold);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Nền WebP alpha: mặt nạ alpha thường (KHÔNG luminance, KHÔNG @supports). -giua = dải ngang giữa trống (hàng 38–62 % đường kính, cao 0.24·D); -tren = hàng 25–50 % (cao 0.25·D); -800 = trống đủ 800². */
/* MB-1 trống nét lớn · gold .22 (tối .16) */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-1"]::before {
  opacity: .22;
  -webkit-mask-image: url("/static/brand/trong-dong/mat-trong-net-giua.webp?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-trong-net-giua.webp?v=20261017-hoa-tiet-sua2");
  -webkit-mask-size: max(125vw, 1700px) calc(max(125vw, 1700px) * 0.24); mask-size: max(125vw, 1700px) calc(max(125vw, 1700px) * 0.24);
  -webkit-mask-position: center 50%; mask-position: center 50%;
}
/* MB-2 trống đặc lớn · gold .14 (tối .10) */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-2"]::before {
  opacity: .14;
  -webkit-mask-image: url("/static/brand/trong-dong/mat-trong-dac-giua.webp?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-trong-dac-giua.webp?v=20261017-hoa-tiet-sua2");
  -webkit-mask-size: max(125vw, 1700px) calc(max(125vw, 1700px) * 0.24); mask-size: max(125vw, 1700px) calc(max(125vw, 1700px) * 0.24);
  -webkit-mask-position: center 50%; mask-position: center 50%;
}
/* MB-3 ba trống: trống nét giữa + hai nửa trống đặc ở mép (đường kính tự thu để chồng ≤ 1/4 bán kính) · gold .18 */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-3"]::before {
  --vn-side: max(0px, min(400px, calc((100vw - 1056px) * 1.333)));
  opacity: .18;
  -webkit-mask-image: url("/static/brand/trong-dong/mat-trong-net-giua.webp?v=20261017-hoa-tiet-sua2"), url("/static/brand/trong-dong/mat-trong-dac-800.webp?v=20261017-hoa-tiet-sua2"), url("/static/brand/trong-dong/mat-trong-dac-800.webp?v=20261017-hoa-tiet-sua2");
  mask-image: url("/static/brand/trong-dong/mat-trong-net-giua.webp?v=20261017-hoa-tiet-sua2"), url("/static/brand/trong-dong/mat-trong-dac-800.webp?v=20261017-hoa-tiet-sua2"), url("/static/brand/trong-dong/mat-trong-dac-800.webp?v=20261017-hoa-tiet-sua2");
  -webkit-mask-size: 1056px 253.44px, var(--vn-side) var(--vn-side), var(--vn-side) var(--vn-side);
  mask-size: 1056px 253.44px, var(--vn-side) var(--vn-side), var(--vn-side) var(--vn-side);
  -webkit-mask-position: center 50%, left calc(var(--vn-side) / -2) top 50%, right calc(var(--vn-side) / -2) top 50%;
  mask-position: center 50%, left calc(var(--vn-side) / -2) top 50%, right calc(var(--vn-side) / -2) top 50%;
}
/* MB-4 trống đặc phóng lớn: tâm = đáy măng-sét, chỉ thấy vành ngoài · gold .14 (tối .10) */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-4"]::before {
  opacity: .14;
  -webkit-mask-image: url("/static/brand/trong-dong/mat-trong-dac-tren.webp?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-trong-dac-tren.webp?v=20261017-hoa-tiet-sua2");
  -webkit-mask-size: max(135vw, 1900px) calc(max(135vw, 1900px) * 0.25); mask-size: max(135vw, 1900px) calc(max(135vw, 1900px) * 0.25);
  -webkit-mask-position: center 100%; mask-position: center 100%;
}
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-1"]::before { opacity: .16; }
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-2"]::before { opacity: .10; }
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-4"]::before { opacity: .10; }

@media (max-width: 768px) {
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-1"]::before,
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-2"]::before {
    -webkit-mask-size: 250vw calc(250vw * 0.24); mask-size: 250vw calc(250vw * 0.24);
  }
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-3"]::before {
    -webkit-mask-size: 135vw calc(135vw * 0.24), 0 0, 0 0; mask-size: 135vw calc(135vw * 0.24), 0 0, 0 0;
  }
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-mb="MB-4"]::before {
    -webkit-mask-size: 135vw calc(135vw * 0.25); mask-size: 135vw calc(135vw * 0.25);
    -webkit-mask-position: center 100%; mask-position: center 100%;
  }
}

/* Viền dưới kẻ kép: kẻ kép 6 px luôn giữ, dời lên E = vạch dưới + 3 + dải + 3; nền dừng ở mép trên kẻ kép. */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band] {
  --vn-e: calc(var(--vn-b) + var(--vn-g2) + var(--vn-h) + 3px);
  padding-block-end: calc(30px + var(--vn-e));
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band]::before {
  inset: 0 0 calc(var(--vn-e) + 6px) 0;
  height: auto;
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band]::after {
  inset-block-end: var(--vn-e);
}
@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) { /* dải măng-sét */
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band] .public-masthead__title::after {
    content: "";
    position: absolute;
    inset: auto 0 calc(var(--vn-b) + var(--vn-g2)) 0;
    height: var(--vn-h);
    z-index: 3;
    pointer-events: none;
    background-color: var(--vn-c);
    -webkit-mask-image: var(--vn-img); mask-image: var(--vn-img);
    mask-mode: luminance; -webkit-mask-source-type: luminance;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: var(--vn-w) var(--vn-h); mask-size: var(--vn-w) var(--vn-h);
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}

html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band] .public-masthead__title::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--vn-b);
  z-index: 3;
  pointer-events: none;
  background-color: var(--vn-lc);
}
@media (max-width: 768px) {
  html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .public-masthead.public-masthead.public-masthead[data-vn-band] {
    padding-block-end: calc(16px + var(--vn-e));
  }
}


/* ------------------------------------------------------------------ */
/* 8. Ngắt đoạn trong bài tin tức: kẻ 48 · mặt trời đặc 10 · kẻ 48     */
/*    Khối «Ngắt đoạn» (news_v2_detail.html: div.news-v2-section-break > span). Kẻ lấy màu --news-v2-divider như vạch cũ; */
/*    quốc tang: rule này không chạy, còn một kẻ 72 px của styles.css (span rỗng không chiếm chỗ). */
/* ------------------------------------------------------------------ */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  margin-block: 32px;   /* trên = dưới, theo nhịp đoạn của bài (p + p = 25, dòng 33); phần tử kế tiếp không có margin-top */
  border: 0;
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break::before,
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break::after {
  content: "";
  flex: 0 0 48px;
  height: 0;
  border-top: 1px solid var(--news-v2-divider);
}
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break__sun {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}
@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) { /* SVG mặt nạ độ sáng: thiếu luminance thì không vẽ */
html body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break__sun {
  background-color: var(--mz-gold);
  -webkit-mask-image: url("/static/brand/trong-dong/mat-troi-dac.svg?v=20261017-hoa-tiet-sua2"); mask-image: url("/static/brand/trong-dong/mat-troi-dac.svg?v=20261017-hoa-tiet-sua2");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 10px 10px; mask-size: 10px 10px;
  -webkit-mask-position: center; mask-position: center;
  mask-mode: luminance; -webkit-mask-source-type: luminance;
}
}
html[data-mz-theme="dark"] body:not(.theme-quoc-tang):not(.theme-quoc-tang) .news-v2-section-break__sun {
  opacity: .80;
}
}
