/* =========================================================================
   Chau Thanh ESL child theme - specificity and layout corrections
   -------------------------------------------------------------------------
   1. SPECIFICITY
   Elementor's global Kit stylesheet (uploads/elementor/css/post-15.css) is
   enqueued AFTER the child stylesheet and targets `.elementor-kit-15 a`
   (specificity 0,1,1) and `.elementor-kit-15 h1`-`h6` (0,2,0). Those outrank
   the single-class selectors in style.css, so the Kit was repainting the header
   CTA text in its link colour (invisible on the blue button) and the footer
   headings in its heading colour (illegible on the dark footer). These
   declarations pin the colours that must not be inherited.

   2. FOOTER HEIGHT
   The CTA card reproduces the original's `margin-top: -5em`. Because the card is
   a flex item, that negative margin also removed 5em from the flex container's
   computed height, so the dark background stopped short and the copyright bar
   rendered outside it. The compensating padding restores it.

   3. FOOTER CONTACT BLOCK (added 2026-08-10)
   Styles for the contact details placed in the 25% column the original footer
   left effectively empty. Matches the "Thong tin" column's type scale.

   Added 2026-08-09, extended 2026-08-10.
   ====================================================================== */

/* --- Buttons ---------------------------------------------------------- */

.ctesl-btn,
.ctesl-btn:visited {
	color: var(--ctesl-white) !important;
}

.ctesl-btn:hover,
.ctesl-btn:focus {
	color: var(--ctesl-white) !important;
	background-color: var(--ctesl-btn-hover-bg) !important;
	border-color: var(--ctesl-btn-hover-bg) !important;
}

.ctesl-btn--header {
	background-color: var(--ctesl-blue) !important;
}

.ctesl-btn--footer {
	background-color: var(--ctesl-red) !important;
}

/* --- Header ----------------------------------------------------------- */

.ctesl-topbar .ctesl-topbar__text {
	color: var(--ctesl-white) !important;
}

.ctesl-topbar .ctesl-topbar__icon {
	color: var(--ctesl-blue) !important;
}

.ctesl-navbar .ctesl-navbar__sitename {
	color: var(--ctesl-heading) !important;
}

.ctesl-navbar .ctesl-menu a,
.ctesl-navbar .ctesl-menu a:visited {
	color: var(--ctesl-heading) !important;
}

.ctesl-navbar .ctesl-menu a:hover,
.ctesl-navbar .ctesl-menu a:focus,
.ctesl-navbar .ctesl-menu .current-menu-item > a,
.ctesl-navbar .ctesl-menu .current-menu-ancestor > a {
	color: var(--ctesl-blue) !important;
}

.ctesl-navbar .ctesl-menu .sub-menu a,
.ctesl-navbar .ctesl-menu .sub-menu a:visited {
	color: var(--ctesl-heading) !important;
}

.ctesl-navbar .ctesl-menu .sub-menu a:hover,
.ctesl-navbar .ctesl-menu .sub-menu a:focus {
	color: var(--ctesl-white) !important;
	background-color: var(--ctesl-blue) !important;
}

.ctesl-nav-toggle {
	color: var(--ctesl-heading) !important;
}

/* --- Social icons (shared) -------------------------------------------- */

.ctesl-social .ctesl-social__link,
.ctesl-social .ctesl-social__link:visited {
	color: var(--ctesl-white) !important;
	background-color: var(--ctesl-blue) !important;
}

.ctesl-social .ctesl-social__link:hover,
.ctesl-social .ctesl-social__link:focus {
	color: var(--ctesl-white) !important;
	background-color: var(--ctesl-red) !important;
}

/* --- Footer colours --------------------------------------------------- */

.ctesl-footer .ctesl-footer__cta-heading {
	color: var(--ctesl-white) !important;
	margin: 0 !important;
}

.ctesl-footer .ctesl-footer__tagline {
	color: var(--ctesl-white) !important;
}

.ctesl-footer .ctesl-footer__links-heading {
	color: var(--ctesl-line) !important;
	margin: 0 0 1em 0 !important;
}

.ctesl-footer .ctesl-footer__list a,
.ctesl-footer .ctesl-footer__list a:visited {
	color: var(--ctesl-white) !important;
}

.ctesl-footer .ctesl-footer__list a:hover,
.ctesl-footer .ctesl-footer__list a:focus {
	color: var(--ctesl-blue) !important;
}

.ctesl-footer .ctesl-footer__copyright,
.ctesl-footer .ctesl-footer__copyright * {
	color: var(--ctesl-white) !important;
}

.ctesl-footer .ctesl-footer__copyright a:hover,
.ctesl-footer .ctesl-footer__copyright a:focus {
	color: var(--ctesl-line) !important;
}

/* --- Footer contact block --------------------------------------------- */

.ctesl-footer .ctesl-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ctesl-footer .ctesl-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
}

.ctesl-footer .ctesl-footer__contact-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--ctesl-line) !important;
}

.ctesl-footer .ctesl-footer__contact-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ctesl-footer .ctesl-footer__contact-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ctesl-footer .ctesl-footer__contact-label {
	font-family: var(--ctesl-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ctesl-line) !important;
	opacity: 0.75;
}

.ctesl-footer .ctesl-footer__contact-value,
.ctesl-footer a.ctesl-footer__contact-value,
.ctesl-footer a.ctesl-footer__contact-value:visited {
	font-family: var(--ctesl-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ctesl-white) !important;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ctesl-footer a.ctesl-footer__contact-value:hover,
.ctesl-footer a.ctesl-footer__contact-value:focus {
	color: var(--ctesl-blue) !important;
	text-decoration: underline;
}

/* --- Footer height correction ----------------------------------------- */

.ctesl-footer {
	/* Compensates for the CTA card's -5em top margin so the dark background
	   covers the whole footer including the bottom bar. See note 2 above. */
	padding-bottom: 5em;
}

.ctesl-footer .ctesl-footer__bottom {
	padding-bottom: 0;
}

@media (max-width: 1024px) {

	.ctesl-footer .ctesl-footer__contact-value {
		font-size: 13px;
	}
}

@media (max-width: 767px) {

	.ctesl-footer {
		padding-bottom: 5em;
	}

	.ctesl-footer .ctesl-footer__bottom {
		padding-bottom: 0;
	}

	/* The spare column is 25% on desktop and 50% on tablet; on mobile the
	   contact block needs the full width or the address wraps to shreds. */
	.ctesl-footer .ctesl-footer__spare {
		width: 100%;
		padding: 1em;
	}

	.ctesl-footer .ctesl-footer__contact-value {
		font-size: 13px;
	}
}