/* Ảnh điểm chạm tách lớp dùng chung (tách khỏi mau.css 22/10/2026): Thí nghiệm Màu trang chủ (#216) + công cụ Bàn chọn bộ màu.
   Màu là NỘI DUNG gán qua biến --m-* (lõi mau-loi.js tính). hv2_mau.py ghép tệp này trước mau.css; cong-cu/dung.py chép sang assets/cong-cu/. */
.tnm-tp { --tnm-cong: var(--n-cong, cubic-bezier(.16, 1, .3, 1)); --tnm-vua: var(--n-vua, 240ms); }
.tnm-tp { margin: 0; min-width: 0; }
.tnm-tp[hidden] { display: none; }
.tnm-tp figcaption { margin-top: var(--space-3); font-size: 13px; line-height: 20px; color: var(--text-secondary); transition: color var(--n-cham, 480ms) var(--tnm-cong); }

/* tô màu (biến do JS gán) */
.tnm-tp .f-chu { fill: var(--m-chu); } .tnm-tp .f-dh { fill: var(--m-dh); } .tnm-tp .f-nhan { fill: var(--m-nhan); }
.tnm-tp .f-giay { fill: var(--m-giay); } .tnm-tp .f-nen { fill: var(--m-nen); } .tnm-tp .f-n1 { fill: var(--m-n1); }
.tnm-tp .f-n2 { fill: var(--m-n2); } .tnm-tp .f-n3 { fill: var(--m-n3); } .tnm-tp .f-chuc { fill: var(--m-chuc); } .tnm-tp .f-kinh { fill: var(--m-kinh); }
.tnm-tp .f-phu2 { fill: var(--m-phu2); } .tnm-tp .f-tren-chu { fill: var(--m-tren-chu); } .tnm-tp .f-tren-dh { fill: var(--m-tren-dh); } .tnm-tp .f-tren-nhan { fill: var(--m-tren-nhan); }
.tnm-tp .f-may { fill: var(--color-charcoal); } .tnm-tp .s-n2 { stroke: var(--m-n2); stroke-width: 1; }
.tnm-tp .s-chu { stop-color: var(--m-chu); } .tnm-tp .s-dh { stop-color: var(--m-dh); }
.tnm-tp .o-6 { opacity: .6; } .tnm-tp .o-4 { opacity: .4; }
.tnm-tp [class*="f-"] { transition: fill var(--tnm-vua) var(--tnm-cong); }
.tnm-tp .tnm-ts { font-family: var(--font-heading); font-weight: 600; }
.tnm-tp .tnm-cc { font-family: var(--font-heading); font-weight: 600; }
.tnm-tp .tnm-mk { transition: rx var(--tnm-vua) var(--tnm-cong), fill var(--tnm-vua) var(--tnm-cong); }

/* ---------- ảnh dựng 3D nhiều lớp (tach-lop.py) ----------
   nền (đã cân trắng) → ba lớp màu (mask) → nội dung uốn theo ô xanh lá (matrix3d, cắt bằng mặt nạ xla.png cho khít viền bo)
   → sáng tối nhân lên trên. Cả ảnh NHÂN lên sân nên nền ảnh tan vào sân.
   Ô khung tỉ lệ CỐ ĐỊNH theo loại (danh thiếp, mặt tiền 3:2 · điện thoại, vật 3:4): đổi ngành không thò thụt.
   Ảnh nằm vừa trong ô, đáy thẳng hàng; JS đặt bề ngang, bề cao (không dùng container query vì nó tạo ngữ cảnh xếp lớp, phép nhân mất nền). */
.tnm-khung { position: relative; }
.tnm-tp--the .tnm-khung, .tnm-tp--mat .tnm-khung { aspect-ratio: 3 / 2; }
.tnm-tp--dt .tnm-khung, .tnm-tp--vat .tnm-khung { aspect-ratio: 3 / 4; }
.tnm-anh { position: absolute; left: 50%; bottom: 0; translate: -50% 0; overflow: hidden; isolation: isolate; mix-blend-mode: multiply;
  transition: filter var(--n-cham, 480ms) var(--tnm-cong); }
.tnm-anh--sang { display: none; z-index: 2; mix-blend-mode: normal; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.tnm-san[data-canh="dem"] .tnm-anh--sang { display: block; }
.tnm-anh > img, .tnm-anh > i, .tnm-anh > .l-oc { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tnm-anh .l-mau, .tnm-anh .l-oc { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.tnm-anh .l-mau { transition: background-color var(--tnm-vua) var(--tnm-cong); }
.tnm-anh .l-mau[data-z="chu"] { background: var(--m-chu); }
.tnm-anh .l-mau[data-z="dh"] { background: var(--m-dh); }
.tnm-anh .l-mau[data-z="nhan"] { background: var(--m-nhan); }
.tnm-anh .l-o { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tnm-anh .l-o svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.tnm-anh .l-bong { mix-blend-mode: multiply; pointer-events: none; }