/* app-chung.css — TỆP SINH TỰ ĐỘNG từ CSS app (scripts/dong-bo-app-web.mjs), không sửa tay. van-tay:a05c5a61ff975777 */
/*
 * core/nen-nghi-thuc.css — LỚP NỀN HOA VĂN cho màn nghi thức (2026-08-23).
 *
 * Chủ dự án duyệt 2026-08-23: mỗi bộ môn một nền dựng từ hoa văn/hình vẽ cổ
 * của chính môn đó, ẩn hiện chậm phía sau chữ.
 *
 * HAI RÀNG BUỘC CHỦ DỰ ÁN NHẤN MẠNH — vi phạm là hỏng cả màn:
 *   1. HOA VĂN KHÔNG ĐƯỢC CHE CHỮ. Nó nằm dưới (z-index thấp), độ mờ thấp, và
 *      vùng giữa màn được làm dịu bằng một lớp gradient MỀM (`.ovn-veil`).
 *   2. TUYỆT ĐỐI KHÔNG tô mảng màu sau chữ. Chữ nghi thức chỉ nổi nhờ BÓNG CHỮ
 *      (text-shadow). Mảng nền sau chữ chủ dự án đánh giá "rất thô và xấu".
 *
 * Dùng chung cho cả 6 app moment-based; hình vẽ do core/nen-nghi-thuc.js dựng.
 * Đặt ở core (nạp toàn cục qua index.html + sw.js) thay vì chép vào 6 file
 * style.css — chép 6 bản là 6 bản sẽ trôi dạt khỏi nhau.
 */

/* Lớp hoa văn — nằm DƯỚI mọi nội dung nghi thức. Overlay của từng môn đã tự
   khai nền gradient riêng; lớp này chỉ phủ hoa văn lên trên nền đó. */
.ovn-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
.ovn-bg .ovn-o { position: absolute; pointer-events: none; }
.ovn-bg .ovn-o svg { width: 100%; height: 100%; display: block; }

/* Lớp làm dịu vùng giữa — gradient MỀM, KHÔNG phải hộp màu sau chữ. */
.ovn-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* Nội dung nghi thức phải nằm trên lớp nền. Các overlay đều dùng lớp thân
   `.<tiền tố>-body`; nâng z-index ở đây để không phải sửa 6 file. */
.trt-body, .kdr-body, .lnr-body, .kmr-body, .mhr-body, .bbr-body { position: relative; z-index: 2; }
.trt-top, .kdr-top, .lnr-top, .kmr-top, .mhr-top, .bbr-top { position: relative; z-index: 2; }

/* CHỮ nổi bằng BÓNG, không bằng mảng nền — xem ràng buộc số 2 ở đầu file. */
.trt-rite p, .kdr-rite p, .lnr-rite p, .kmr-rite p, .mhr-rite p, .bbr-rite p,
.trt-hint, .kdr-hint, .lnr-hint, .kmr-hint, .mhr-hint, .bbr-hint {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .92), 0 0 30px rgba(0, 0, 0, .72);
}

/* ── Chuyển động: chậm, ẩn hiện. Tên có tiền tố `ovn-` để không đụng
      keyframes sẵn có của từng module. ── */
@keyframes ovn-anhien { 0%, 100% { opacity: 0; } 18%, 72% { opacity: 1; } }
@keyframes ovn-tho    { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
@keyframes ovn-nhap   { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
@keyframes ovn-lay    { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes ovn-roi {
  0%   { transform: translate(0, -10%) rotate(0); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { transform: translate(26px, 115%) rotate(240deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ovn-bg * { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ĐỌC ĐƯỢC CHỮ TRONG NGHI THỨC — "Cách B", chủ dự án chốt 2026-08-27
   ═══════════════════════════════════════════════════════════════════════════
   Anh chụp màn Kinh Dịch: "chữ và nền đang bị lẫn vào nhau. nút CTA cũng vậy".
   Ba nguyên nhân chồng lên nhau, sửa cả ba:

     1. HOA VĂN NỞ HẾT CỠ NGAY SAU CHỮ. Nhịp `ovn-tho` đi từ mờ 28% lên ĐẶC
        100% mỗi 26 giây — đúng lúc nở hết thì các hạt tròn nằm thẳng sau chữ.
        Ảnh anh chụp bắt trúng khoảnh khắc ấy. Nay ghìm đỉnh xuống: hoa văn VẪN
        THỞ (đó là cái hồn của màn), chỉ không nở tới mức nuốt chữ.

     2. VÙNG LÀM DỊU HẸP HƠN CỘT CHỮ — 46% bề ngang, nên hai đầu mỗi dòng thò
        ra ngoài, nằm thẳng lên hoa văn. Đã nới ở nen-nghi-thuc.js.

     3. BÓNG CHỮ CŨ TOÀN QUẦNG TOẢ RỘNG (12px và 30px) — quầng rộng trên nền
        tối chỉ làm mờ thêm chứ không tách được chữ. Nay thêm MỘT LỚP SÁT CHÂN
        CHỮ (3px) để cắt dứt khoát khỏi nền, giữ một quầng rộng cho chiều sâu.

   VẪN GIỮ RÀNG BUỘC SỐ 2 ở đầu file: KHÔNG tô mảng màu sau chữ. Ba việc trên
   đều là chỉnh nền cho lặng đi và chỉnh chữ cho chắc lại — không có cái hộp nào.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Ghìm đỉnh nhịp thở. Ghi đè keyframes cùng tên đã khai ở trên. */
@keyframes ovn-tho { 0%, 100% { opacity: .22; } 50% { opacity: .58; } }

/* 3. Chữ chắc hơn một bậc — cỡ, nét, và bóng đổi kiểu. */
.trt-rite p, .kdr-rite p, .lnr-rite p, .kmr-rite p, .mhr-rite p, .bbr-rite p {
  font-size: 17.5px;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: .008em;
}
.trt-rite p, .kdr-rite p, .lnr-rite p, .kmr-rite p, .mhr-rite p, .bbr-rite p,
.trt-hint, .kdr-hint, .lnr-hint, .kmr-hint, .mhr-hint, .bbr-hint {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .98), 0 2px 16px rgba(0, 0, 0, .9);
}

/* ── NÚT NGHI THỨC: nền ĐẶC, chữ tối ───────────────────────────────────────
   Nút cũ là một lớp màu mờ 10-12% với viền mảnh — trên nền tối nó nhạt hơn cả
   chữ xung quanh, trong khi bấm nó là việc DUY NHẤT khách cần làm ở màn này.

   Màu lấy từ `--nt-mau` do chính môn cấp lúc vẽ nền (xem veNenNghiThuc()).
   KHÔNG viết cứng vàng ở đây: Kinh Dịch vàng, Mai Hoa hồng đất, Lục Nhâm xanh
   nước — viết cứng một màu là sáu môn hoá một. */
.kdr-btn, .mhr-btn, .lnr-btn, .kmr-btn, .trt-btn, .bbr-btn {
  background: var(--nt-mau, #e6c25c) !important;
  border-color: var(--nt-mau, #e6c25c) !important;
  /* Chữ tối trên nền sáng — mọi màu `--nt-mau` đều là sắc nhạt (xem bảng MAU
     trong nen-nghi-thuc.js), nên một màu chữ tối dùng chung là đủ tương phản. */
  color: #17110a !important;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.kdr-btn:hover, .mhr-btn:hover, .lnr-btn:hover, .kmr-btn:hover,
.trt-btn:hover, .bbr-btn:hover { filter: brightness(1.08); }

/* Đường phụ "Nghi thức là gì?" sáng lên một bậc cho cân với chữ mới. */
.kdr-link, .mhr-link, .lnr-link, .kmr-link, .trt-link, .bbr-link { opacity: .92; }

/* ── ĐIỆN THOẠI ────────────────────────────────────────────────────────────
   Màn nghi thức phủ kín màn hình, nên trên máy hẹp chữ dễ chạm sát mép và
   dòng bị vỡ vụn. Nới lề hai bên, hạ cỡ chữ nửa bậc (17.5px giữ nguyên thì
   mỗi dòng còn quá ít chữ), và cho nút ăn trọn bề ngang — ngón tay không phải
   nhắm. */
@media (max-width: 480px) {
  .trt-rite, .kdr-rite, .lnr-rite, .kmr-rite, .mhr-rite, .bbr-rite {
    padding-inline: 6px;
  }
  .trt-rite p, .kdr-rite p, .lnr-rite p, .kmr-rite p, .mhr-rite p, .bbr-rite p {
    font-size: 16.5px;
    line-height: 1.7;
  }
  .kdr-btn, .mhr-btn, .lnr-btn, .kmr-btn, .trt-btn, .bbr-btn {
    display: block;
    width: 100%;
    max-width: 20rem;
    padding-block: .85rem;
  }
}

/* (13/10/2026, anh duyệt "làm đi em") BẢN MIỄN PHÍ CẮT GIỮA CÂU — CHUNG CHO 10 MÔN (Tarot, Bói bài, Bát Tự, Kinh Dịch, Mai Hoa,
   Lục Nhâm, Kỳ Môn, Thần Số, Chiêm Tinh, Phong Thủy). Cùng kiểu anh chốt cho Tử Vi ("chốt mờ như vậy", 12/10): câu trang trí theo
   môn chảy tiếp sau chữ cuối (data-tiep, hiện bằng ::after nên Chép bài không chép nó), lớp mờ nhiều tầng: rõ → nhòe dần → tan vào
   màu giấy. Khối dựng ở core/cat-mo.js. Màu nền tan vào lấy --ov-cat-nen (mặc định --surface-1, nền thẻ bài của các môn). */
.ov-cat-khoi { position: relative; padding-bottom: 16px; }
.ov-cat-khoi p:last-of-type { margin-bottom: 0; }
.ov-cat-tiep { user-select: none; -webkit-user-select: none; filter: blur(4px); opacity: .55; }
.ov-cat-tiep::after { content: attr(data-tiep); }
.ov-cat-mo-lop { position: absolute; left: 0; right: 0; top: 2.4em; bottom: 0; pointer-events: none; }
.ov-cat-mo-lop i { position: absolute; inset: 0; }
.ov-cat-mo-lop i:nth-child(1) { -webkit-backdrop-filter: blur(0.6px); backdrop-filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 22%, transparent 34%); mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 22%, transparent 34%); }
.ov-cat-mo-lop i:nth-child(2) { -webkit-backdrop-filter: blur(1.4px); backdrop-filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 24%, #000 36%, transparent 48%); mask-image: linear-gradient(to bottom, transparent 12%, #000 24%, #000 36%, transparent 48%); }
.ov-cat-mo-lop i:nth-child(3) { -webkit-backdrop-filter: blur(2.8px); backdrop-filter: blur(2.8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 38%, #000 52%, transparent 64%); mask-image: linear-gradient(to bottom, transparent 26%, #000 38%, #000 52%, transparent 64%); }
.ov-cat-mo-lop i:nth-child(4) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 54%, #000 100%); mask-image: linear-gradient(to bottom, transparent 40%, #000 54%, #000 100%); }
.ov-cat-mo-lop i:nth-child(5) {
  background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--ov-cat-nen, var(--surface-1)) 55%, transparent) 58%, var(--ov-cat-nen, var(--surface-1)) 88%); }
/* Trình duyệt có lớp mờ nền: câu trang trí bớt mờ tự thân để lớp nhiều tầng làm việc (giống Tử Vi). */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ov-cat-tiep { filter: blur(1.2px); opacity: .8; }
}
@media print { .ov-cat-mo-lop, .ov-cat-tiep { display: none; } }
/* (12/10/2026, anh chốt "mờ như vậy") BẢN MIỄN PHÍ CẮT GIỮA CHỪNG. Máy chủ gửi phần đầu bài; đoạn dở chảy tiếp bằng một câu
   trang trí cố định (.tuvi-cat-gia, không phải chữ của bài), rồi lớp mờ nhiều tầng .tuvi-cat-mo-lop phủ lên: rõ → nhòe dần
   → tan vào màu giấy. Khối mời mua phủ lên phần cuối, không còn khoảng trắng. Màu lấy từ token theo nền. */
.luan-than .tuvi-cat-khoi { position: relative; padding-bottom: 96px; }
.luan-than .tuvi-cat-khoi p { margin-bottom: 0; }
.luan-than .tuvi-cat-gia { user-select: none; }
.luan-than .tuvi-cat-mo-lop { position: absolute; left: 0; right: 0; top: 2.4em; bottom: 0; pointer-events: none; }
.luan-than .tuvi-cat-mo-lop i { position: absolute; inset: 0; }
.luan-than .tuvi-cat-mo-lop i:nth-child(1) { -webkit-backdrop-filter: blur(0.6px); backdrop-filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 22%, transparent 34%); mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 22%, transparent 34%); }
.luan-than .tuvi-cat-mo-lop i:nth-child(2) { -webkit-backdrop-filter: blur(1.4px); backdrop-filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 24%, #000 36%, transparent 48%); mask-image: linear-gradient(to bottom, transparent 12%, #000 24%, #000 36%, transparent 48%); }
.luan-than .tuvi-cat-mo-lop i:nth-child(3) { -webkit-backdrop-filter: blur(2.8px); backdrop-filter: blur(2.8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 38%, #000 52%, transparent 64%); mask-image: linear-gradient(to bottom, transparent 26%, #000 38%, #000 52%, transparent 64%); }
.luan-than .tuvi-cat-mo-lop i:nth-child(4) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 54%, #000 100%); mask-image: linear-gradient(to bottom, transparent 40%, #000 54%, #000 100%); }
.luan-than .tuvi-cat-mo-lop i:nth-child(5) {
  background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--ov-cat-nen, var(--surface-1)) 55%, transparent) 58%, var(--ov-cat-nen, var(--surface-1)) 88%); }
/* Trình duyệt có lớp mờ nền: câu trang trí bỏ lớp mờ tự thân (máy chủ gắn sẵn cho chỗ không nạp CSS này) để lớp nhiều tầng làm việc. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .luan-than .tuvi-cat-gia { filter: blur(1.2px) !important; opacity: .8 !important; }
}
@media print { .luan-than .tuvi-cat-mo-lop, .luan-than .tuvi-cat-gia { display: none; } }
/* Ấn Bản luận 1Vong (modules/ban-luan/dau-an.js + style.css), màu theo nền web, dùng trong khung .bl-web */
.bl-web{--bl-an:#D9B36B;--bl-vang:#C9A25E;--bl-son:#E37F68}
:root[data-theme="light"] .bl-web{--bl-an:#9E772B;--bl-vang:#82601F;--bl-son:#9B2C24}
.bl-an { display: block; width: 100%; height: auto; overflow: visible; }
.bl-an .but { fill: var(--bl-an); }
.bl-an .truc { fill: none; stroke: none; }
.bl-an .vach { stroke: var(--bl-an); stroke-width: .5; opacity: .45; }
.bl-an .hat { fill: var(--bl-an); opacity: 0; }
.bl-an .soi { fill: none; stroke: var(--bl-an); stroke-width: .45; opacity: .6; }
.bl-an .loi, .bl-an .dac { fill: var(--bl-an); }
.bl-an .mo { opacity: .5; }
.bl-an circle.ve { fill: none; stroke: var(--bl-an); stroke-width: .9; }
.bl-an .q0 { stop-color: var(--bl-an); stop-opacity: .55; }
.bl-an .q1 { stop-color: var(--bl-an); stop-opacity: 0; }
.bl-an .nhan { font: 500 4.3px var(--v1-font-read, sans-serif); fill: var(--v1-muted); }
.bl-an .cung { fill: none; stroke: var(--bl-an); stroke-width: 1.1; stroke-linecap: round; }
.bl-an .cung.cho { opacity: .16; }
.bl-an .cung.dang { opacity: .9; stroke-dasharray: .18 .05; animation: bl-chay 2.4s linear infinite; }
.bl-an.chay .hat { animation: bl-hat 1.9s cubic-bezier(.4, 0, .2, 1) var(--tre, 0s) both; }
.bl-an.chay .ve { stroke-dasharray: 1; animation: bl-ve 2.3s cubic-bezier(.45, 0, .25, 1) 1.2s both; }
.bl-an.chay .sao { transform-box: fill-box; transform-origin: center; animation: bl-sao 1.1s cubic-bezier(.2, .7, .2, 1) var(--tre, 0s) both; }
.bl-an.chay .soi { stroke-dasharray: 1; animation: bl-ve 1.7s ease-in-out 5.3s both; }
.bl-an.chay .quang { animation: bl-tho 6s ease-in-out 8s infinite; }
.bl2-bia .bl-an.chay .ve { animation-delay: .3s; animation-duration: 1.7s; }
.bl2-bia .bl-an.chay .soi { animation-delay: 3.4s; animation-duration: 1.3s; }
.bl2-hien { animation: bl-hien 1s ease-out var(--tre, 0s) both; }
@keyframes bl-hat { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 30% { opacity: .95; } 80% { opacity: .85; } 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes bl-ve { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bl-sao { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes bl-tho { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bl-hien { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bl-chay { from { stroke-dashoffset: .46; } to { stroke-dashoffset: 0; } }