/*
Theme Name: Hanoi Paint (Valenta Style)
Theme URI: https://hanoipaint.com
Author: Hanoi Paint
Description: Giao diện Hanoi Paint dựng theo phong cách valenta.vn (cùng công ty CP Sản xuất Sơn Hà Nội). Chỉ thay logo, giữ nguyên bố cục/CSS/nội dung gốc.
Version: 1.0
Requires PHP: 7.4
Text Domain: hanoipaint-valenta
*/

/*
 * Banner trang chủ trên mobile: khung ".c-slider-item__img" của valenta.vn dùng
 * kỹ thuật "padding-top: 177.78%" (tỉ lệ dọc) kết hợp object-fit:cover, phù hợp
 * ảnh mobile dọc gốc của họ. Ảnh banner thật của Hanoi Paint (Banner-1-1.jpg) là
 * ảnh ngang tỉ lệ 2:1 (2560x1280) nên bị cover cắt xén nếu giữ khung dọc. Ghi đè
 * đúng "padding-top" theo tỉ lệ ảnh thật (2:1 -> 50%) để hiện đủ toàn bộ banner.
 */
@media (max-width: 767px) {
	.c-slider .c-slider-item__img {
		padding-top: 50% !important;
	}
}

/*
 * Ép nền TRẮNG cho khung ảnh sản phẩm (cả trang danh sách và trang chi tiết),
 * bất kể trang đang ở theme sáng hay tối (c-theme-dark) - vì ảnh sản phẩm PNG
 * nền trong suốt cần nền trắng để hiển thị đúng (không bị lẫn vào nền tối).
 */
.c-product-item__img,
.c-product-image,
.c-product-image__inner {
	background-color: #fff !important;
}

/*
 * 4 tab thương hiệu ở trang chủ (product-pano) dùng ảnh sản phẩm thật đã xóa nền
 * trắng thành trong suốt. Ảnh gốc là hình dọc (không vuông như icon cũ) nên phải
 * đổi "object-fit: fill" (kéo giãn méo ảnh) sang "contain" để giữ đúng tỉ lệ, đồng
 * thời phóng to khung ảnh theo yêu cầu.
 */
.c-product-pano-box__list .c-product-pano-item figure,
.c-product-pano-box__list .c-product-pano-item figure img {
	width: 140px !important;
	height: 140px !important;
}
.c-product-pano-box__list .c-product-pano-item figure img {
	object-fit: contain !important;
}

/*
 * Ảnh nền lớn phía trên (.c-product-pano-box__img) vốn đổi theo hover/active của JS
 * gốc valenta.vn, gắn với 4 LOẠI SƠN (nội thất/ngoại thất/chống thấm/lót kháng kiềm).
 * Vì 4 tab bên dưới giờ đã đổi thành 4 THƯƠNG HIỆU (không còn khớp nội dung ảnh nữa),
 * di chuột qua sẽ hiện ảnh cảnh không liên quan (vd cảnh ngoài trời cho tab "Fema").
 * Khóa cứng luôn hiện ảnh đầu tiên, không đổi theo hover nữa để tránh hiện sai/lỗi.
 */
.c-product-pano-box__img figure {
	opacity: 0 !important;
}
.c-product-pano-box__img figure#product-pano-1 {
	opacity: 1 !important;
}