/*
 * Menu labels — show icon + text in left sidebar (desktop only)
 * Added by WPVibe draft edit
 */

/* =====================================================
 * LOGO — logo "Dr Cong Bao" (file gốc nền trắng)
 * Bo góc gọn gàng, mobile nằm sát trái
 * ===================================================== */
.header .logo.aes-img-logo {
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	text-align: center !important;
}
/* Tắt lớp gradient phủ che logo */
.header .logo.aes-img-logo a:before {
	display: none !important;
	content: none !important;
}
.header .logo.aes-img-logo a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: auto !important;
	line-height: normal !important;
	padding: 0 !important;
}
/* Logo ảnh PNG trong suốt: hiện tự nhiên, không nền không khung */
.header .logo.aes-img-logo .aes-brand-logo {
	width: 132px !important;
	height: auto !important;
	max-width: 100% !important;
	display: block !important;
	margin: 0 auto !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* iPad + iPhone: logo nằm sát trái, vừa trong header cao 58px */
@media (max-width: 1023px) {
	.header .logo.aes-img-logo {
		width: auto !important;
		min-width: 0 !important;
		max-width: 180px !important;
		height: 58px !important;
		float: left !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 0 0 0 14px !important;
	}
	.header .logo.aes-img-logo a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: auto !important;
		height: 100% !important;
	}
	.header .logo.aes-img-logo .aes-brand-logo {
		margin: 0 !important;
		width: auto !important;
		height: 42px !important;
		max-height: 42px !important;
		padding: 0 !important;
		background: transparent !important;
	}
}


/* =====================================================
 * CARD-IMAGE FIX cho tablet / iPad
 *
 * Vấn đề: .card-image dùng position:fixed trên desktop.
 * Theme có rule sửa ở max-width:1023px, nhưng iPad
 * landscape (1024–1366px) lọt qua, gây ảnh đè lên chữ.
 *
 * Giải pháp: dùng class .aes-card-image (thêm vào PHP
 * template) + pixel breakpoint 1366px (max iPad Pro).
 * Không dùng hover/pointer query vì unreliable trên
 * iPad có keyboard.
 * ===================================================== */

/* Ẩn hoàn toàn trên mọi màn hình ≤ 1366px */
@media screen and (max-width: 1366px) {
	.card-inner .aes-card-image {
		display: none !important;
	}
	/* Card-wrap chiếm toàn bộ chiều rộng */
	.card-inner .card-container .card-wrap {
		width: 100% !important;
		max-width: 100% !important;
		-webkit-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
	}
}

/* Hiện lại trên desktop thật (≥ 1367px) */
@media screen and (min-width: 1367px) {
	.card-inner .aes-card-image {
		display: block !important;
	}
}

/* =====================================================
 * Section content z-index — text luôn hiển thị trên image
 * ===================================================== */
@media (max-width: 1366px) {
	.card-inner .sec-text .text,
	.card-inner .sec-title,
	.card-inner .sec-icon,
	.card-inner .sec-social,
	.card-inner .sec-contact-info {
		position: relative;
		z-index: 2;
	}

	/* WPBakery inner columns stack dọc */
	.card-inner .vc_row_inner .vc_column_inner {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 16px;
	}

	/* Timeline columns full width */
	.card-inner .col-t-6 {
		width: 100% !important;
		float: none !important;
		margin-bottom: 20px;
	}

	/* Section title bg không overflow */
	.card-inner .sec-title .title-bg {
		font-size: clamp(28px, 5vw, 60px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Ask box home */
	.aes-home-actions {
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 1024px) {

	/* Widen the left sidebar */
	.header {
		width: 150px;
	}

	/* Shift page content to clear the wider sidebar */
	.card-inner {
		padding-left: 150px;
	}
	.lines-grid {
		padding-left: 150px;
	}
	.mfp-wrap.popup-box-inline {
		left: 150px;
	}

	/* Menu items: icon + label side by side */
	.header .top-menu.patrick-icon-menu ul li a {
		margin: 4px 0;
		padding: 6px 10px 6px 18px;
		display: flex;
		align-items: center;
		text-align: left;
	}

	.header .top-menu.patrick-icon-menu ul li a .icon {
		margin: 0 10px 0 0;
		display: inline-block;
		flex: 0 0 auto;
	}

	/* Label: always visible, no tooltip styling */
	.header .top-menu.patrick-icon-menu ul li a span.link {
		display: inline-block !important;
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
		line-height: 1.3 !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		color: #e6e6e6 !important;
		background: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header .top-menu.patrick-icon-menu ul li a span.link:before {
		display: none !important;
	}

	.header .top-menu.patrick-icon-menu ul li:hover a span.link,
	.header .top-menu.patrick-icon-menu ul li.active a span.link {
		color: #ffffff !important;
	}

	.header .top-menu.patrick-icon-menu ul li.active a span.link {
		color: #5ac24e !important;
	}
}

/* Mobile: sticky menu bar always visible (no tap needed) */
@media (max-width: 1023px) {

	/* Show the menu bar permanently under the top bar */
	.header .top-menu.patrick-icon-menu {
		opacity: 1 !important;
		visibility: visible !important;
		background: #202020;
	}

	/* Hamburger button no longer needed */
	.header .menu-btn {
		display: none !important;
	}

	/* Lay items out evenly across the bar */
	.header .top-menu.patrick-icon-menu ul,
	.header .top-menu.patrick-icon-menu ul .menu-main-menu-container {
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: stretch;
	}

	.header .top-menu.patrick-icon-menu ul li {
		flex: 1 1 auto;
		display: block;
	}

	/* Icon on top, label underneath */
	.header .top-menu.patrick-icon-menu ul li a {
		margin: 0;
		padding: 7px 2px 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header .top-menu.patrick-icon-menu ul li a .icon {
		margin: 0;
		width: auto;
		height: 24px;
		line-height: 24px;
		font-size: 20px;
	}

	.header .top-menu.patrick-icon-menu ul li a span.link {
		display: block !important;
		position: static !important;
		margin: 2px 0 0 !important;
		padding: 0 !important;
		height: auto !important;
		line-height: 1.2 !important;
		font-size: 10px !important;
		font-weight: 400 !important;
		color: #e6e6e6 !important;
		background: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		-webkit-transform: none !important;
	}

	.header .top-menu.patrick-icon-menu ul li a span.link:before {
		display: none !important;
	}

	.header .top-menu.patrick-icon-menu ul li.active a .icon,
	.header .top-menu.patrick-icon-menu ul li.active a span.link {
		color: #5ac24e !important;
	}

	/* Push page content down so the always-visible menu bar doesn't cover it */
	.page {
		padding-top: 112px;
	}
}