/* =========================================================================
   USOLAB — footer.css

   Dung grid-template-areas de mot bo HTML doi duoc thu tu theo man hinh:
   - Desktop: mang xa hoi + ban quyen nam duoi cot thong tin.
   - Mobile:  mang xa hoi ngay duoi thong tin, ban quyen xuong cuoi cung.
   ====================================================================== */

.us-footer {
	--us-footer-text: #1a1a1a;
	--us-footer-soft: #444;

	padding: 116px 0 112px;
	background: var(--us-footer-bg, #e8e8e8);
	color: var(--us-footer-text);
	font-size: 16px;
	line-height: 1.5;
}

.us-footer .us-container {
	max-width: calc(1460px + 2 * var(--us-gutter));
}

.us-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 412fr) minmax(0, 254fr) minmax(0, 255fr) minmax(0, 419fr);
	grid-template-areas:
		"brand  .     .     .    "
		"info   menu1 menu2 about"
		"social menu1 menu2 about"
		"copy   menu1 menu2 about";
	align-items: start;
	column-gap: 40px;
}

.us-footer__brand  { grid-area: brand; }
.us-footer__info   { grid-area: info; }
.us-footer__social { grid-area: social; }
.us-footer__menu--1 { grid-area: menu1; }
.us-footer__menu--2 { grid-area: menu2; }
.us-footer__about  { grid-area: about; }
.us-footer__copy   { grid-area: copy; }

/* ----- Logo ----- */
.us-footer__brand {
	margin-bottom: 20px;
}

.us-logo--footer {
	align-items: flex-start;
}

.us-logo--footer .us-logo__img {
	width: 200px;
	max-height: none;
	height: auto;
}

/* ----- Tieu de cot ----- */
.us-footer__title {
	margin: 0 0 26px;
	color: var(--us-footer-text);
	font-family: var(--us-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

/* ----- Thong tin lien he ----- */
.us-footer__contact {
	max-width: 360px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.us-footer__contact li + li {
	margin-top: 14px;
}

.us-footer__contact strong {
	color: var(--us-footer-text);
	font-weight: 600;
}

.us-footer a {
	color: var(--us-footer-soft);
	text-decoration: none;
	transition: color .2s ease;
}

.us-footer a:hover,
.us-footer a:focus-visible {
	color: var(--us-accent);
}

/* ----- Mang xa hoi ----- */
.us-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.us-footer__social a {
	display: inline-flex;
	color: var(--us-footer-text);
}

.us-footer__social svg {
	display: block;
	width: 36px;
	height: 36px;
}

/* ----- Menu ----- */
.us-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.us-footer__links li + li {
	margin-top: 14px;
}

/* ----- Gioi thieu ----- */
.us-footer__text {
	color: var(--us-footer-soft);
}

.us-footer__text p {
	margin: 0;
}

.us-footer__text p + p {
	margin-top: 12px;
}

/* ----- Ban quyen ----- */
.us-footer__copy {
	margin: 28px 0 0;
	color: var(--us-footer-soft);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Tablet: 3 cot, "About Us" xuong hang rieng
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.us-footer {
		padding: 72px 0 64px;
	}

	.us-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"brand  brand brand"
			"info   menu1 menu2"
			"social menu1 menu2"
			"about  about about"
			"copy   copy  copy";
		column-gap: 32px;
	}

	.us-footer__about {
		margin-top: 48px;
	}

	.us-footer__copy {
		margin-top: 40px;
	}
}

/* -------------------------------------------------------------------------
   Mobile: thong tin — mang xa hoi — 2 menu canh nhau — gioi thieu — ban quyen
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.us-footer {
		padding: 24px 0 28px;
	}

	.us-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"brand  brand"
			"info   info"
			"social social"
			"menu1  menu2"
			"about  about"
			"copy   copy";
		column-gap: 16px;
	}

	.us-footer__brand {
		margin-bottom: 18px;
	}

	.us-footer__title {
		margin-bottom: 22px;
		font-size: 17px;
	}

	.us-footer__contact {
		max-width: none;
	}

	.us-footer__social {
		margin-top: 40px;
	}

	.us-footer__menu {
		margin-top: 40px;
	}

	.us-footer__links li + li {
		margin-top: 13px;
	}

	.us-footer__about {
		margin-top: 56px;
	}

	.us-footer__copy {
		margin-top: 48px;
		font-size: 15px;
		text-align: center;
	}
}