/* Lớp chữ khung ngắm DSLR (vf-hud.js). Không bóng mờ/lọc trên vùng lớn, không trộn màu: chỉ quầng nhỏ quanh chữ, kim và hai ô đỏ. */
.vfh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.vfh > * { position: absolute; left: 0; top: 0; }
/* ô chờ lúc đang nạp: viền rất mờ */
.vfh-ph { box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .06); opacity: 0; }
/* lưới ô lấy nét: viền tối + mép sáng mảnh bên trong, đọc được trên cả nền tối lẫn sáng */
.vfh-af { opacity: 0; will-change: opacity; }
.vfh-af path { fill: none; shape-rendering: crispEdges; }
.vfh-pt path { stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.vfh-pt-in path { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.vfh-act { opacity: 0; will-change: opacity; filter: drop-shadow(0 0 2px rgba(255, 42, 26, .85)); }
.vfh-act path { fill: none; stroke: #ff2a1a; stroke-width: 1; shape-rendering: crispEdges; }
/* thông số trong ô: Roboto Mono kem, giãn chữ rộng, quầng sáng nhỏ (cỡ chữ và lề --pad do vf-hud.js đặt theo ô) */
.vfh-in { opacity: 0; will-change: opacity; color: #EADBB8; font: 500 10.5px/1 "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em; text-shadow: 0 0 6px rgba(234, 219, 184, .45); white-space: nowrap; }
.vfh-in > * { position: absolute; margin: 0; }
.vfh-date { left: var(--pad); top: var(--pad); opacity: .82; }
.vfh-iso { right: calc(var(--pad) - .22em); top: var(--pad); opacity: .6; }
.vfh-iso[hidden] { display: none; }
/* thước đo sáng: vạch mảnh, vạch giữa cao hơn; kim đỏ chạy bằng transform (không dàn trang lại mỗi khung) */
.vfh-ev { left: 50%; bottom: calc(var(--pad) + 2.3em); transform: translateX(-50%); }
.vfh-ticks { position: absolute; left: -1px; top: 0; fill: currentColor; opacity: .7; shape-rendering: crispEdges; }
.vfh-needle { position: absolute; left: 50%; top: -1px; width: 2px; margin-left: -1px; background: #E4573D; box-shadow: 0 0 6px rgba(228, 87, 61, .8); will-change: transform; }
.vfh-read { left: 0; right: 0; bottom: var(--pad); display: flex; justify-content: center; gap: 2.2em; padding-left: .22em; }
.vfh-pct { min-width: 4ch; text-align: center; font-weight: 500; color: #E4573D; text-shadow: 0 0 6px rgba(228, 87, 61, .6); }
.vfh-pct.lock { color: #E9BE6A; text-shadow: 0 0 6px rgba(233, 190, 106, .7); }
/* lúc động cơ còn đang nạp: kim đung đưa chậm, số % đỏ đếm lên */
.vfh.busy .vfh-needle { animation: vfh-swing 1.9s ease-in-out infinite alternate; }
@keyframes vfh-swing { from { transform: translateX(calc(var(--ev) * -.5)); } to { transform: translateX(calc(var(--ev) * .5)); } }
@media (prefers-reduced-motion: reduce) { .vfh.busy .vfh-needle { animation: none; } }
/* lời dẫn save the date (shell.js): cùng kiểu lời kể các mốc, nằm ngay dưới ô ngắm, thẳng mép trái ô (--vf-* do shell.js đặt theo vfRect) */
#caption.cap-vf { left: var(--vf-x); right: auto; top: calc(var(--vf-y) + clamp(16px, 2.6vh, 28px)); bottom: auto; width: var(--vf-w); max-width: none; }