/* BFFMEDIA — nút "Tải ảnh" có watermark (v1.5.0, đổi kiểu ở v1.5.1). Nạp ở bài viết + trang album
   (album không nạp bff-blog.css). Chỉ class .bff-, 2 sắc cam của gói, font kế thừa theme. */

/* Kèm .bff-article-copy để thắng rule link/nút của thân bài.
   v1.5.1: chỉ còn MỘT kiểu nút — icon tròn đè góc trên phải trong ảnh, dùng chung cho bài viết lẫn album
   (anh chốt 23/09: nút chữ dưới ảnh chiếm chỗ quá). Là <button> chứ không phải <a>: <a> bị lightbox
   Flatsome gom (xem bff-tai-anh.js). */
.bff-tai-anh,
.bff-article-copy .bff-tai-anh {
	position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; padding: 0;
	/* Ảnh nhỏ (bài cũ có ảnh chèn tay chỉ 90px) thì icon 38px chiếm hơn 40% bề ngang, che mất ảnh.
	   % ở đây tính theo Ô bọc ngoài — tức đúng bề ngang ảnh — nên KHÔNG cần container query:
	   container-type tạo size containment làm figure co lại, đã thử và hỏng bố cục. */
	display: flex; align-items: center; justify-content: center;
	/* v1.5.5 (anh chốt 27/09): 38px đặc cam che ảnh album trên điện thoại (cột ~195px) → trần 30px, 15% bề ngang ảnh. */
	width: clamp(24px, 15%, 30px); height: auto; aspect-ratio: 1;
	border: 0; border-radius: 50%; -webkit-appearance: none; appearance: none; cursor: pointer;
	/* Nền tối trong suốt cho ảnh lộ qua; rê chuột mới hiện cam thương hiệu. */
	background: rgba(0, 0, 0, .35); color: #fff !important; font-family: inherit; line-height: 0;
	text-decoration: none !important; transition: background .2s;
}
.bff-tai-anh:hover, .bff-tai-anh:focus-visible,
.bff-article-copy .bff-tai-anh:hover, .bff-article-copy .bff-tai-anh:focus-visible {
	background: #f58220; color: #fff !important; text-decoration: none !important;
}
.bff-tai-anh svg { width: 47%; height: 47%; flex: none; }

/* Ô đặt icon. Album: chính ô lưới .grid-item — định vị tuyệt đối nên ô không đổi chiều cao, Masonry
   không phải xếp lại. Bài viết: <figure>/.wp-caption sẵn có, khung rộng đúng bằng ảnh và chú thích nằm
   dưới nên góc trên phải figure chính là góc trên phải ảnh.
   Icon hiện sẵn, không chờ rê chuột: điện thoại không có hover. */
.bff-tai-anh-o,
.bff-article-copy .bff-tai-anh-oa { position: relative; }
/* Ảnh trần không có figure mới phải bọc <span>; span chép class căn lề của ảnh để không lệch bố cục. */
.bff-article-copy .bff-tai-anh-oa--boc { display: inline-block; max-width: 100%; line-height: 0; }
.bff-article-copy .bff-tai-anh-oa--boc.aligncenter { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.bff-article-copy .bff-tai-anh-oa--boc.alignleft { float: left; }
.bff-article-copy .bff-tai-anh-oa--boc.alignright { float: right; }