/*
 * Phản hồi lần 1 (29/09/2026), ghi chú chung "TRANG CHỦ" (sheet "Giao diện"):
 * 1/ nền section: chỗ nào đang không có nền riêng (hiện màu nền trang
 *    #f3f3f3, hơi xám cạnh các khối đã có nền trắng) → thêm nền trắng cho
 *    đồng bộ. Khối nền navy (Dự án nổi bật, Chứng chỉ, Nhận báo giá) được
 *    khách chấp nhận giữ màu, không đổi.
 * 2/ tiêu đề mỗi section: viết hoa + cùng cỡ chữ (24px) + căn giữa + đúng
 *    tên đã note — trước đó mỗi khối một kiểu (kế thừa từ nhiều đợt code
 *    khác nhau: 18–30px, có khối trái có khối giữa, có khối hoa có khối
 *    thường). Chỉ đổi hiển thị ở đây, không đổi cấu trúc HTML/class dùng
 *    chung với nơi khác (vd .home-title còn dùng cho H1 "Về Mạnh Hưng Phát",
 *    nên sửa theo đúng ngữ cảnh ".bloghome .home-title", không sửa thẳng
 *    ".home-title").
 */

/* Nền trắng cho 3 khối đang "hở" (Sản phẩm nổi bật, Khách hàng và đối tác,
   Mọi người cũng tìm kiếm) — các khối còn lại đã có nền riêng (trắng hoặc navy). */
.portfolio,
.thp-partner,
.tag-home {
	background: #fff;
}

/* "Báo chí" và "Mọi người cũng tìm kiếm" dùng margin (không phải padding) để
   tạo khoảng cách với khối liền kề — margin nằm NGOÀI vùng tô nền nên vẫn lộ
   màu nền trang #f3f3f3 thành 3 sọc xám dù bản thân section đã trắng. Đổi
   margin dọc về 0, khoảng cách giữ nguyên nhờ padding sẵn có bên trong mỗi
   section (48px và 30px). */
.custom-press-section {
	margin-top: 0;
	margin-bottom: 0;
}
.tag-home {
	margin-top: 0;
	margin-bottom: 0;
}

/* "Về Mạnh Hưng Phát" (giữ nguyên phần còn lại) — chỉ căn đều 2 lề đoạn giới thiệu. */
.home-about .trigger {
	text-align: justify;
}

/* "Sản phẩm nổi bật" là dải tab (có thể có thêm tab danh mục khác do admin
   bật ở Sản phẩm → Danh mục), không phải tiêu đề tĩnh — căn giữa cả dải và
   tăng cỡ chữ cho gần với các tiêu đề khác thay vì để nguyên cỡ nhỏ (15px)
   như mặc định theme gốc. */
#filter {
	text-align: center;
}
#options {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	float: none !important;
}
#options::before,
#options::after {
	display: none; /* clearfix cũ (style.css) không cần nữa khi #options không còn float con */
}
#options li {
	float: none !important;
}
#options li a {
	font-size: 18px;
}

/* "Tin tức mới nhất" — home-title dùng chung với H1 "Về Mạnh Hưng Phát" nên
   chỉ ghi đè trong phạm vi .bloghome. */
.bloghome .home-title {
	text-align: center;
	color: #233179;
	font-size: 24px;
	padding-left: 0;
}

/* "Báo chí nói gì về ..." — tiêu đề riêng .custom-press-title, cỡ 30px và
   không viết hoa trước đó. */
.custom-press-title {
	text-transform: uppercase;
	font-size: 24px !important;
	color: #233179 !important;
}

/* "Mọi người cũng tìm kiếm" — trước đó căn trái, không viết hoa. */
.tag-home h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	color: #233179;
}

/* =====================================================================
 * Phản hồi lần 3 (04/10/2026) — ô I2 "Chưa điều chỉnh đúng theo note G2":
 * tên các section viết hoa + CÙNG kích thước + căn giữa + cùng màu, nền
 * chỉ trắng hoặc 1 màu xanh. Mọi tiêu đề section trang chủ mang class
 * .thp-hh (front-page.php) — 1 kiểu duy nhất, ghi đè các kiểu cũ của từng
 * khối (24px/30px, gạch chân có/không, vạch vàng bên trái, nhãn phụ...).
 * ===================================================================== */
:root { --thp-navy: #233179; }

section .thp-hh,
section h2.thp-hh {
	display: block !important;
	float: none !important;
	width: 100%;
	margin: 0 0 36px !important;
	padding: 0 0 16px !important;
	border: 0 !important;
	background: none !important;
	position: relative;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 30px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: var(--thp-navy) !important;
}
section .thp-hh::before { display: none !important; }
section .thp-hh::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 4px;
	margin-left: -40px;
	background: var(--thp-navy) !important;
	border: 0 !important;
}
/* Gạch chân riêng của từng khối (đã thay bằng ::after chung) */
.thp-projects__bar,
.thp-partner__bar,
.thp-quote__bar { display: none !important; }

/* Section nền xanh: chữ tiêu đề + gạch chân trắng */
.home-about .thp-hh,
.thp-projects .thp-hh,
.thp-showcase:not(.thp-showcase--light) .thp-hh,
.thp-testimonial .thp-hh,
.thp-quote .thp-hh { color: #fff !important; }
.thp-projects .thp-hh::after,
.thp-showcase:not(.thp-showcase--light) .thp-hh::after,
.thp-testimonial .thp-hh::after,
.thp-quote .thp-hh::after { background: #fff !important; }

/* Nền: chỉ trắng hoặc 1 màu xanh (#233179). Trước đó 3 màu tối khác nhau:
   Về MHP #242533 (xám đen), Dự án #233179, Chứng chỉ/Báo giá #0f1830. */
.home-about,
.thp-projects,
.thp-showcase:not(.thp-showcase--light),
.thp-testimonial,
.thp-quote { background: var(--thp-navy) !important; }
.portfolio,
.thp-partner,
.thp-showcase--light,
.bloghome,
.custom-press-section,
.tag-home { background: #fff !important; }

/* Sản phẩm nổi bật: tiêu đề chung ở trên, dải tab (Tất cả / Thép tấm / ...) nhỏ hơn tiêu đề */
.portfolio #options li h3,
.portfolio #options li .thp-tab-h { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.portfolio #options li a { font-size: 15px; }

/* Ô I4 (prnt DtMNc): "Về Mạnh Hưng Phát" — căn đều lề trên/dưới phần ảnh.
   Trước: trên 50px, dưới 0 (style.css .about-figure{padding-bottom:0}). */
.home-about .about-figure { padding-top: 50px; padding-bottom: 50px; }
@media (min-width: 992px) {
	.home-about .row { display: flex; align-items: center; }
	.home-about .row::before, .home-about .row::after { display: none; }
}
@media (max-width: 991px) {
	.home-about .about-figure { padding-top: 0; }
}

/* "Tin tức" — bỏ vạch vàng/khoảng lệch trái của .home-title cũ */
.bloghome .row > .thp-hh { padding-left: 0 !important; }

/* Ô I14: "Khách hàng nói gì" như web cũ (style.css .testimonial: ảnh tròn
   160px + khung lời nhận xét + mũi tên), đổi nền vàng web cũ → xanh chung,
   khung nhận xét xanh nhạt hơn để tách khỏi nền. */
.thp-testimonial { padding: 60px 0 110px !important; background-image: none !important; }
.thp-testimonial .context { background-color: rgba(255, 255, 255, .12); }
.thp-testimonial .context::before { border-color: transparent rgba(255, 255, 255, .12) transparent transparent; }
.thp-testimonial .carousel-control { background: none; opacity: .8; width: 60px; }
.thp-testimonial .carousel-control .fa { position: absolute; top: 50%; margin-top: -10px; font-size: 20px; }
.thp-testimonial .carousel-indicators { bottom: -60px; }
.thp-testimonial .ava img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
	section .thp-hh, section h2.thp-hh { font-size: 22px !important; margin-bottom: 26px !important; }
}

/* Phản hồi lần 3 (ô I3): banner to như hungphatsteel.com — đo mẫu ở 7 độ rộng: tỉ lệ 2,4:1 nhưng TỐI ĐA 600px
   (1920/1860/1440 → 600; 1366 → 569; 1024 → 427; 768 → 320; 390 → 163). Bản trước chỉ đo ở 1440 rồi để tỉ lệ
   không giới hạn → màn rộng 1860px banner cao ~775px, to hơn mẫu. Ảnh phủ kín + căn giữa. */
#carousel-home .carousel-inner > .item { height: min(calc(100vw / 2.4), 600px); aspect-ratio: auto; max-height: none; }
#carousel-home .carousel-inner > .item > img { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }

/* Phản hồi lần 4 (K4, prnt t2b_FzkbbLX9): đoạn giới thiệu "Về Mạnh Hưng Phát" chữ trắng (trước #ccc của theme). */
.home-about p, .home-about .trigger { color: #fff !important; }

/* FB lần 2 (13/10/2026): "Khách hàng nói gì" — 3 cột như mẫu, ảnh tròn to hơn (150px), tự trượt 2s (JS ở front-page.php). */
.thp-testimonial { padding: 60px 0 70px !important; }
.thp-tm__viewport { overflow: hidden; }
.thp-tm__track { display: flex; will-change: transform; }
.thp-tm__item { flex: 0 0 33.3333%; max-width: 33.3333%; margin: 0; padding: 0 15px; box-sizing: border-box; }
.thp-tm__card { text-align: left; padding: 10px 14px 6px; color: #fff; height: 100%; }
.thp-tm__ava {
	width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden;
	border: 5px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); background: #fff;
}
.thp-tm__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thp-tm__quote { margin: 0 0 18px; padding: 0; border: 0; font-size: 16px; line-height: 1.7; color: #fff; font-family: inherit; }
.thp-tm__who { font-size: 21px; line-height: 1.35; color: #fff; }
@media (max-width: 991px) { .thp-tm__item { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 767px) {
	.thp-tm__item { flex-basis: 100%; max-width: 100%; }
	.thp-tm__ava { width: 130px; height: 130px; }
	.thp-tm__card { text-align: center; }
}

/* Sau go-live 13/10/2026 (khách): "Khách hàng nói gì" — lời nhận xét căn đều 2 bên, tên khách căn giữa (mọi cỡ màn hình). */
.thp-tm__quote { text-align: justify; }
.thp-tm__who { display: block; text-align: center; }
@media (max-width: 767px) { .thp-tm__card { text-align: left; } }

/* 15/10/2026 (khách): tên khách nằm ngay dưới ảnh, trước lời nhận xét. */
.thp-tm__ava { margin-bottom: 20px; }
.thp-tm__who { margin: 0 0 14px; }
.thp-tm__quote { margin: 0; }