/* Khối ảnh có chú thích của khu nội dung công khai (/cam-nang, /huong-dan).
   Nạp qua fragments/layout :: head khi model có `trangNoiDung` = true.

   🔴 Từ 2026-09-05 file này CHỈ còn giữ khối ảnh chú thích do AnhBlockRenderer sinh ra. Vỏ trang
   (thanh trên, chân trang), bố cục và kiểu chữ của bài viết đã chuyển hẳn sang hệ .lp- ở
   landing.css để bề mặt công khai — trang `/`, khu nội dung, các trang tin cậy — dùng CHUNG một
   ngôn ngữ thị giác. Hai bộ kiểu song song là cách chắc chắn để một bên đổi mà bên kia không.
   Thân bài nay là .lp-prose; đừng dựng lại .bmh-bai__than ở đây.

   Màu lấy từ token .lp- (bài viết luôn nằm trong <div class="lp">), không khai màu literal. */

/* ---- Khối ảnh có chú thích (AnhBlockRenderer) ---- */

.bmh-anh {
    margin: 1.5rem 0;
}

/* 🔴 Khung KHÔNG còn là mốc toạ độ % nữa — mốc là .bmh-anh__anh bên trong. Khung chỉ lo chừa lề
   hai bên cho số callout đứng. Đặt lại position:relative ở đây là mọi % lệch đi đúng bằng bề rộng
   lề, và lệch âm thầm: ảnh vẫn đẹp, chỉ có neo trỏ sai chỗ. */
.bmh-anh__khung {
    max-width: 100%;
    padding: 0 1.75rem;
}

.bmh-anh__khung img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    border: 1px solid var(--lp-line, rgba(15, 23, 42, .10));
    display: block;
}

/* ---- Chú thích kiểu CALLOUT: số ở LỀ, đường nối, neo nhỏ tại điểm trỏ ----

   🔴 Đổi 09/09/2026 từ "số đặt thẳng lên điểm trỏ". Người dùng yêu cầu số không che nội dung —
   đầu tiên là chữ, sau đó là cả icon/nút. Đo rồi mới đổi: chấm 18px trên ảnh 1440×900 hiển thị ở
   bề rộng thân bài 728px phủ 35,6 pixel ảnh gốc, trong khi một hàng bảng cao 44px có chữ chiếm
   ~14px chỉ chừa hai dải trống ~15px. Quét cả 168 chấm của khu /huong-dan: 48–55 chấm KHÔNG có
   chỗ trống nào trong bán kính 2,5 lần chấm. Đặt số lên ảnh là bài toán vô nghiệm; đưa ra lề thì
   câu "số không che gì" luôn đúng, không phụ thuộc ảnh.

   🔴 Nội dung thật vẫn nằm ở danh sách .bmh-anh__chu-thich bên dưới (CN-5) — cả ba phần tử dưới
   đây đều aria-hidden. Trên màn rất hẹp, hai số cùng một bên có thể chạm nhau; đó là lý do danh
   sách bên dưới là nguồn chính, đừng "sửa" bằng cách bỏ bớt điểm chú thích. */

/* Lề hai bên để số có chỗ đứng ngoài ảnh. Ảnh nằm trong .bmh-anh__anh — mọi % toạ độ tính theo
   khung ẢNH, không theo khung đã cộng lề. */
/* 🔴 inline-block, KHÔNG block. Thẻ này là mốc của mọi toạ độ %, nên nó phải ôm SÁT tấm ảnh.
   Để `display: block` thì nó rộng bằng cả thân bài (680px) trong khi ảnh điện thoại chỉ 390px ⇒
   neo và đường nối tính theo khối 680px và văng hẳn ra ngoài ảnh — số 2 của ảnh chuông nằm lơ
   lửng giữa khoảng trắng bên phải. Chỉ lộ ở ảnh HẸP hơn thân bài; ảnh 1440 rộng hết khung nên
   trông vẫn đúng, và đó là lý do test cấu trúc HTML không bắt được. Đã lộ thật 09/09/2026 khi
   xem trang thật. */
.bmh-anh__anh {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Neo: vòng RỖNG đúng tại toạ độ — nó chỉ chỗ, không mang thông tin (số nằm ngoài lề).
   🔴 Rỗng chứ không đặc: bản đầu là chấm đặc 7px và khi xem trang thật (09/09/2026) nó nuốt gọn
   một ký tự ở mỗi điểm trỏ — "07/07/2026 19●0", "Chưa đ●c". Vòng rỗng để chữ bên dưới lộ qua giữa,
   vẫn khoanh đúng chỗ. Viền trắng bên ngoài giữ cho nó đọc được trên cả nền tối lẫn nền sáng. */
.bmh-anh__neo {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--court-500, #0E7A5F);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .9);
}

/* Lớp đường nối: một SVG phủ kín khung ảnh, viewBox 0–100 + preserveAspectRatio="none" nên toạ độ
   trong nó CHÍNH LÀ phần trăm của ảnh — đúng ở mọi bề rộng màn hình mà không phải tính lượng giác.
   Cần SVG chứ không phải <span> kẻ ngang vì số bị đẩy tách theo chiều dọc để khỏi chồng nhau, nên
   đường nối là đường CHÉO; góc xoay của một span phụ thuộc tỉ lệ khung hình lúc hiển thị — thứ CSS
   không biết trước. Nửa trong suốt để nó là chỉ dẫn chứ không cắt ảnh thành hai mảnh. */
.bmh-anh__noi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.bmh-anh__noi line {
    stroke: var(--court-500, #0E7A5F);
    stroke-width: 1;
    opacity: .45;
}

.bmh-anh__diem {
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--court-500, #0E7A5F);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Số nằm NGOÀI mép ảnh, trong phần lề mà .bmh-anh__khung đã chừa. */
.bmh-anh__diem--trai { left: -1.5rem; }
.bmh-anh__diem--phai { right: -1.5rem; }

.bmh-anh__mo-ta {
    margin: .5rem 0 .25rem;
    font-weight: 600;
    font-size: .9rem;
}

.bmh-anh__chu-thich {
    margin-top: .25rem;
    padding-left: 1.25rem;
    font-size: .9rem;
}

.bmh-anh__chu-thich li {
    margin-bottom: .25rem;
}