/*
 * Task GD-08 (sheet "Giao diện" dòng 19) — footer 4 cột. Mockup đã duyệt:
 * docs/mockup/gd-08/ (nền navy đậm theo mẫu ban đầu).
 *
 * Phản hồi lần 1 (29/09/2026): đổi nền sang màu TRẮNG — đổi lại toàn bộ màu
 * chữ/link/viền cho khớp nền sáng (trước đó tính theo nền tối).
 */
.thp-footer {
	background: #fff;
	color: #333;
	padding: 48px 0 20px;
	margin-top: 0;
	border-top: 1px solid #e3e3e3;
}
.thp-footer__grid {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
	display: grid;
	/* Feedback 08/10/2026: cột Liên hệ rộng hơn để "Email: …", "Website: …" nằm trọn 1 hàng.
	   FB sửa giao diện lần 2 (dòng 2.6 "4 khối cân nhau"): chia lại cho đều hơn — cột bản đồ rộng thêm. */
	grid-template-columns: 1fr 1.25fr .95fr 1.05fr; /* 09/10: tiêu đề 18px — cột 3 đủ chỗ cho "HỖ TRỢ KHÁCH HÀNG" 1 dòng */
	gap: 28px;
}
.thp-footer__about {
	text-align: justify;
}
.thp-footer__contact {
	overflow-wrap: break-word;
}
.thp-footer__col .thp-footer__title {
	color: #233179;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 0 0 16px;
}
.thp-footer__logo {
	max-height: 76px; /* FB lần 2 (dòng 2.2): logo to hơn (trước 56px) */
	margin-bottom: 4px;
}
/* Tên công ty dùng chung kiểu .thp-footer__title (cùng cỡ, cùng dòng với "Liên hệ"). */
.thp-footer__col p {
	margin: 0 0 8px;
}
.thp-footer__col a {
	color: #333;
}
.thp-footer__col a:hover,
.thp-footer__col a:focus {
	color: #e18f00;
}

/*
 * Menu "Hỗ trợ khách hàng" — chép nguyên kiểu danh sách cũ. Màu chữ link
 * phải ghi đè `ul.links li a` gốc (style.css, #878787 — độ ưu tiên cao hơn
 * `.thp-footer__col a` vì nhiều phần tử hơn) bằng 1 selector nhiều class hơn.
 */
.thp-footer .thp-footer-policy .links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.thp-footer .thp-footer-policy .links li {
	margin-bottom: 8px;
}
.thp-footer .thp-footer-policy .links a {
	color: #333;
}
.thp-footer .thp-footer-policy .links a:hover,
.thp-footer .thp-footer-policy .links a:focus {
	color: #e18f00;
}

.thp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.thp-footer__social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #233179;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}
.thp-footer__social a:hover,
.thp-footer__social a:focus {
	background: #e18f00;
	color: #fff;
}
.thp-footer__social .thp-social-icon--zalo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.thp-footer__map {
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	margin-bottom: 14px;
	border: 1px solid #e3e3e3;
}
.thp-footer__map iframe {
	width: 100%;
	height: 200px; /* FB lần 2 (dòng 2.5): bản đồ to hơn (trước 140px) */
	display: block;
}

.thp-footer__badges {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.thp-footer__badges img {
	height: 36px;
	max-width: 100%;
}

.thp-footer center {
	display: block;
	border-top: 1px solid #e3e3e3;
	margin-top: 32px;
	padding-top: 16px;
	color: #666;
	font-size: 13px;
}

@media (max-width: 991px) { /* 09/10: 901–991px quá chật cho 4 cột (tiêu đề 2 dòng) → 2 cột như máy tính bảng */
	.thp-footer__grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 32px;
	}
}
@media (max-width: 600px) {
	.thp-footer__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * FB sửa giao diện lần 2 (09/10/2026):
 * - "tăng kích thước tiêu đề, cỡ chữ làm như hungphatsteel.com (để nhìn rõ giữa các phần)": mẫu đo được tiêu đề cột
 *   16px đậm in hoa > nội dung 15px. Trước đây tiêu đề 15px còn NHỎ hơn nội dung 16px → rối. Nay tiêu đề 18px, nội dung 15px.
 * - "dãn dòng các thông tin này ra": khối Liên hệ cao dòng 1.9 + cách đoạn 6px; danh sách link cách nhau như mẫu.
 */
.thp-footer .thp-footer__col .thp-footer__title { font-size: 18px; line-height: 1.3; margin-bottom: 18px; }
.thp-footer .thp-footer__about,
.thp-footer .thp-footer__contact,
.thp-footer .thp-footer-policy .links a { font-size: 15px; }
.thp-footer .thp-footer__about { line-height: 1.75; }
.thp-footer .thp-footer__contact { line-height: 1.9; }
.thp-footer .thp-footer__contact p { margin: 0 0 6px; }
.thp-footer .thp-footer__contact p:last-child { margin-bottom: 0; }
.thp-footer .thp-footer-policy .links li { margin-bottom: 10px; line-height: 1.5; }
/* Tiêu đề 18px vừa 1 dòng ở ≥1200px; laptop nhỏ thu cột → thu chữ tiêu đề để 4 tiêu đề vẫn cùng 1 hàng (không thò thụt). */
@media (min-width: 992px) and (max-width: 1199px) { .thp-footer .thp-footer__col .thp-footer__title { font-size: 16px; } }

/* =====================================================================================================
 * FB sửa giao diện lần 2 (13/10/2026): "điều chỉnh lại footer như mẫu ở ảnh bên" — nền xanh rất nhạt, 4 cột
 * ngăn bằng đường kẻ dọc, tiêu đề navy đậm in hoa + gạch đỏ ngắn; cột Liên hệ & Hỗ trợ khách hàng thành
 * danh sách dòng có ô icon + kẻ ngang; mạng xã hội tròn màu thương hiệu; bản đồ bo góc.
 * ===================================================================================================== */
.thp-footer { background: #f3f6fc; border-top: 0; padding: 52px 0 0; }
.thp-footer .thp-footer__grid {
	max-width: 1380px; gap: 0;
	grid-template-columns: .95fr 1.45fr 1.05fr 1.05fr;
}
.thp-footer .thp-footer__col { padding: 0 28px; min-width: 0; }
.thp-footer .thp-footer__col + .thp-footer__col { border-left: 1px solid #dde4f0; }
.thp-footer .thp-footer__col:first-child { padding-left: 0; }
.thp-footer .thp-footer__col:last-child { padding-right: 0; }
/* Phản hồi (19/10/2026, "thêm địa chỉ tổng kho... căn cho phần map bằng 2 khối thông tin đó, lề dưới
   phải bằng nhau, không được thò thụt"): CSS Grid đã tự kéo 4 khối .thp-footer__col cao bằng nhau
   (khối cao nhất quyết định) — đó là lý do khung (DIV) 4 cột vốn luôn cùng mép dưới. Vấn đề là NỘI
   DUNG bên trong không lấp hết khung đó: cột "Liên hệ"/"Hỗ trợ khách hàng" ít dòng hơn (nay đã thêm
   dòng Tổng kho cho đủ 7 dòng khớp 7 mục chính sách) và cột "Kết nối" (icon social + bản đồ + huy
   hiệu) thấp hơn hẳn → chữ/huy hiệu dừng lại giữa chừng, nhìn thò thụt dù khung đã bằng nhau.
   Chuyển cả 3 cột thành flex dọc, danh sách bên trong "space-between" tự giãn khoảng trống ĐỀU vào
   giữa các dòng/phần tử (không giãn từng dòng) để dòng/phần tử cuối cùng luôn chạm đúng mép dưới của
   khung — khớp mép dưới cả 3 cột, kể cả khi admin sửa nội dung làm số dòng lệch lại. */
.thp-footer .thp-footer__col:nth-child(2),
.thp-footer .thp-footer__col:nth-child(3) { display: flex; flex-direction: column; }
.thp-footer .thp-fi { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.thp-footer .thp-footer-policy { flex: 1 1 auto; display: flex; }
.thp-footer .thp-footer-policy .links { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; margin: 0; width: 100%; }
.thp-footer .thp-footer__col:last-child { display: flex; flex-direction: column; justify-content: space-between; }
.thp-footer .thp-footer__col .thp-footer__title {
	color: #1f2a7a; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: .2px;
	text-transform: uppercase; margin: 0 0 26px; position: relative; padding-bottom: 14px;
}
.thp-footer .thp-footer__col .thp-footer__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: #e0242b; border-radius: 2px;
}
.thp-footer .thp-footer__logo-wrap { text-align: center; margin: 0 0 18px; }
.thp-footer .thp-footer__logo { max-height: 96px; margin: 0; }
.thp-footer .thp-footer__about { font-size: 15px; line-height: 1.75; color: #333; }

/* Cột Thông tin liên hệ: từng dòng = ô icon + chữ, kẻ ngang giữa các dòng. */
.thp-footer .thp-fi { list-style: none; margin: 0; padding: 0; line-height: 1.55; }
.thp-footer .thp-fi__row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #dde4f0; font-size: 15px; color: #333; }
.thp-footer .thp-fi__row:first-child { padding-top: 0; }
.thp-footer .thp-fi__row:last-child { border-bottom: 0; }
.thp-footer .thp-fi__ico {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: #e6edf8;
	display: flex; align-items: center; justify-content: center; color: #1f2a7a; font-size: 19px;
}
.thp-footer .thp-fi__ico .fa-mobile { font-size: 24px; }
.thp-footer .thp-fi__txt { min-width: 0; overflow-wrap: break-word; }
.thp-footer .thp-fi__txt p { margin: 0; }
.thp-footer .thp-fi__txt strong { color: #1d1d1f; }
.thp-footer .thp-fi__row--company .thp-fi__txt { color: #1f2a7a; font-weight: 700; text-transform: uppercase; }
.thp-footer .thp-fi__sep { color: #9aa3b5; margin: 0 6px; }

/* Cột Hỗ trợ khách hàng: icon tài liệu + chữ + mũi tên ›, kẻ ngang. */
.thp-footer .thp-footer-policy .links li { margin: 0; border-bottom: 1px solid #dde4f0; line-height: 1.4; }
.thp-footer .thp-footer-policy .links li:last-child { border-bottom: 0; }
.thp-footer .thp-footer-policy .links a {
	display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 15px; color: #333;
}
.thp-footer .thp-footer-policy .links li:first-child a { padding-top: 0; }
.thp-footer .thp-footer-policy .links a::before {
	content: "\f0f6"; font-family: FontAwesome; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
	background: #e6edf8; color: #1f2a7a; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.thp-footer .thp-footer-policy .links a::after { content: "\f105"; font-family: FontAwesome; margin-left: auto; color: #1f2a7a; font-size: 18px; padding-left: 8px; }
.thp-footer .thp-footer-policy .links a:hover,
.thp-footer .thp-footer-policy .links a:focus { color: #e0242b; }

/* Kết nối: icon tròn to, màu thương hiệu. */
.thp-footer .thp-footer__social { gap: 12px; margin-bottom: 22px; }
.thp-footer .thp-footer__social a { width: 46px; height: 46px; font-size: 21px; background: #1f2a7a; color: #fff; }
.thp-footer .thp-footer__social a.thp-social--facebook { background: #3b5998; }
.thp-footer .thp-footer__social a.thp-social--youtube { background: #e62117; }
.thp-footer .thp-footer__social a.thp-social--tiktok { background: #111; }
.thp-footer .thp-footer__social a.thp-social--instagram { background: #d6249f; }
.thp-footer .thp-footer__social a.thp-social--zalo { background: transparent; }
.thp-footer .thp-footer__social a.thp-social--tiktok svg { width: 21px; height: 21px; }
.thp-footer .thp-footer__social a:hover,
.thp-footer .thp-footer__social a:focus { opacity: .85; }
.thp-footer .thp-footer__map { border-radius: 8px; border-color: #dde4f0; }
.thp-footer .thp-footer__badges img { height: 48px; }
.thp-footer center { margin-top: 40px; padding: 16px 0; border-top: 1px solid #dde4f0; background: #eaf0f9; }

@media (min-width: 1400px) { .thp-footer .thp-footer__col .thp-footer__title { font-size: 22px; } }
@media (min-width: 1200px) and (max-width: 1299px) { .thp-footer .thp-footer__col .thp-footer__title { font-size: 18px; } } /* 4 tiêu đề vẫn 1 dòng */
@media (min-width: 992px) and (max-width: 1199px) {
	.thp-footer .thp-footer__col { padding: 0 16px; }
	.thp-footer .thp-footer__col .thp-footer__title { font-size: 16px; }
	.thp-footer .thp-fi__row, .thp-footer .thp-footer-policy .links a { font-size: 14px; gap: 10px; }
	.thp-footer .thp-fi__ico, .thp-footer .thp-footer-policy .links a::before { flex-basis: 34px; width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 991px) {
	.thp-footer .thp-footer__grid { row-gap: 36px; grid-template-columns: 1fr 1fr; }
	.thp-footer .thp-footer__col { padding: 0 20px; }
	.thp-footer .thp-footer__col:nth-child(odd) { padding-left: 0; border-left: 0; }
	.thp-footer .thp-footer__col:nth-child(even) { padding-right: 0; }
}
@media (max-width: 600px) {
	.thp-footer .thp-footer__grid { grid-template-columns: 1fr; }
	.thp-footer .thp-footer__col { padding: 0 !important; border-left: 0 !important; }
	.thp-footer .thp-footer__logo-wrap { text-align: left; }
}

/* Sau go-live 13/10/2026 (khách): "bỏ giúp em cái kẻ nhỏ nhỏ này" — bỏ đường kẻ ngang mảnh giữa các dòng ở cột
   Thông tin liên hệ và cột Hỗ trợ khách hàng (giữ kẻ dọc giữa các cột); giữ khoảng cách dòng như cũ. */
.thp-footer .thp-fi__row,
.thp-footer .thp-footer-policy .links li { border-bottom: 0; }