/* BFFMEDIA Bảng giá — chỉ áp trong .bffbg (3 phần tử trang /bang-gia/trang-tri-lop/).
   Không đặt font-family: chữ theo font Flatsome của web (tên gói là thẻ h3 → Oswald).
   Kiểu thẻ gói bám "Gói Make Up" (css/web/customize.css của child theme), chép giá trị sang tiền tố riêng. */

.bffbg {
	--bffbg-cam: #f58220;
	--bffbg-cam-nhat: rgba(245, 130, 32, .12);
	--bffbg-muc: #141416;
	--bffbg-chu: #212121;
	--bffbg-phu: #6e6e6e; /* 5.1:1 trên nền trắng */
	--bffbg-vien: #e8e3dc;
	--bffbg-nen: #f7f5f2;
	margin-bottom: 40px;
	color: var(--bffbg-chu);
}
.bffbg-tieu-de { margin: 0 0 8px; }
.bffbg-mo-ta { max-width: 760px; margin: 0 0 22px; color: var(--bffbg-phu); }
.bffbg-canh-bao { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--bffbg-cam); background: var(--bffbg-cam-nhat); color: var(--bffbg-muc); font-size: 14px; }

/* ---------- Bảng giá: máy tính 3 cột, dưới 1000px trượt ngang ---------- */
.bffbg-bang-gia__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Mẩu <p> / <br> do wpautop để sót giữa các gói không được thành một ô của lưới. */
.bffbg-bang-gia__list > :not(.bffbg-goi) { display: none; }

.bffbg-goi {
	container-type: inline-size;
	display: flex; flex-direction: column; min-width: 0;
	padding: 24px; border: 1px solid var(--bffbg-vien); border-radius: 24px; background: #fff;
}
.bffbg .bffbg-goi__ten {
	margin: 0 0 8px; color: #000; font-size: 28px; font-weight: 400; line-height: 1.2;
	text-transform: none; letter-spacing: normal;
}
.bffbg-goi__mo-ta { margin: 0 0 16px; font-size: 16px; }

.bffbg-goi__gia {
	display: flex; gap: 8px; padding: 12px 0;
	border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* Luôn nằm ngang: câu giải thích của trang nói "giá bên trái / giá bên phải". */
.bffbg-gia { flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--bffbg-nen); }
.bffbg-gia--kem { background: var(--bffbg-cam-nhat); box-shadow: inset 0 0 0 1px var(--bffbg-cam); }
.bffbg-gia span { display: block; margin-bottom: 2px; color: var(--bffbg-phu); font-size: 13px; line-height: 1.3; }
.bffbg-gia--kem span { color: var(--bffbg-muc); }
.bffbg-gia strong { display: block; color: var(--bffbg-muc); font-size: 20px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
/* Thẻ hẹp (3 cột ở 1024px ~320px, trượt ngang ~340px, điện thoại ~310px): thu chữ giá theo bề rộng THẺ, không theo màn hình,
   để 2 ô giá vẫn nằm ngang mà "5.500.000đ" không tràn. */
@container (max-width: 369px) {
	.bffbg-gia { padding: 8px 10px; }
	.bffbg-gia strong { font-size: 17px; }
}

.bffbg-goi__tiet-kiem {
	align-self: flex-start; margin: 12px 0 0; padding: 4px 12px; border-radius: 999px;
	background: var(--bffbg-cam-nhat); color: var(--bffbg-muc); font-size: 14px; font-weight: 700;
}
.bffbg-goi__don-vi { margin: 6px 0 0; color: var(--bffbg-phu); font-size: 14px; }

.bffbg-goi__ds { margin: 16px 0 20px; padding: 0; list-style: none; }
.bffbg .bffbg-goi__ds li { position: relative; margin: 0 0 8px; padding-left: 28px; color: #000; font-size: 14px; line-height: 1.5; }
/* Dấu tích vẽ bằng CSS (không phụ thuộc ảnh Check_fill.png của child theme). */
.bffbg-goi__ds li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--bffbg-cam);
}
.bffbg-goi__ds li::after {
	content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Nút đặt: giữ class "button" (MyJs.js bắt .button.Booking) nhưng trung hoà kiểu nút của Flatsome. */
.bffbg .button.bffbg-goi__nut {
	display: flex; align-items: center; justify-content: center; width: 100%; max-width: none;
	min-height: 44px; margin: auto 0 0; padding: 12px 24px; border: 0; border-radius: 1000px;
	background: var(--bffbg-chu); color: #fff; line-height: 1.2; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.bffbg .button.bffbg-goi__nut span { color: #fff; font-size: 16px; font-weight: 400; }
.bffbg .button.bffbg-goi__nut:hover,
.bffbg .button.bffbg-goi__nut:focus-visible { background: #444; }

@media (max-width: 999px) {
	.bffbg-bang-gia__list {
		display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	}
	.bffbg-bang-gia__list > .bffbg-goi { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
}
@media (max-width: 549px) {
	.bffbg-goi { padding: 20px 18px; }
	.bffbg .bffbg-goi__ten { font-size: 24px; }
}

/* ---------- Lưới ảnh IN / VẼ ---------- */
.bffbg-luoi__anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bffbg-anh { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--bffbg-nen); }
.bffbg-anh.bffbg-an { display: none; }
.bffbg .bffbg-anh__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s ease; }
.bffbg-anh:hover .bffbg-anh__img { transform: scale(1.04); }
.bffbg-anh__so {
	position: absolute; left: 8px; top: 8px; padding: 2px 10px; border-radius: 999px;
	background: rgba(20, 20, 22, .8); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.bffbg .bffbg-xem-them {
	display: block; min-height: 44px; margin: 20px auto 0; padding: 10px 28px;
	border: 1px solid var(--bffbg-muc); border-radius: 999px; background: #fff; color: var(--bffbg-muc);
	font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.bffbg .bffbg-xem-them:hover,
.bffbg .bffbg-xem-them:focus-visible { background: var(--bffbg-muc); color: #fff; }

@media (max-width: 849px) {
	.bffbg-luoi__anh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
	.bffbg-luoi__anh { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.bffbg .bffbg-anh__img { transition: none; }
}

/* v1.0.1 — ảnh trang trí lớp chỉ xem: không menu giữ lâu (iOS), không kéo, không bôi chọn.
   Popup Magnific nằm ở <body> → chỉ khoá khi mở từ 2 lưới (cờ bffbg-khoa do bff-bang-gia.js gắn). */
.bffbg-luoi__anh a,
.bffbg-luoi__anh img,
html.bffbg-khoa .mfp-wrap img,
html.bffbg-khoa .mfp-wrap .mfp-img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}