/* header (_nav_top.php) */
#header.hd {
	--hd-primary: #157d53;
	--hd-primary-dark: #005f39;
	--hd-ink: #1d2939;
	--hd-muted: #667085;
}
#header.hd .header-body {
	border-bottom: 0;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 4px 20px rgba(16, 24, 40, 0.07);
}

/* ---------- top bar ---------- */
#header.hd .hd-top {
	min-height: 44px;
	border-bottom: 0;
	background: linear-gradient(120deg, #008c45 0%, #005f39 100%);
	color: #fff;
}
.hd-top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px 24px;
	flex-wrap: wrap;
	width: 100%;
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.4;
}
.hd-top-tagline { font-weight: 600; }
.hd-top-tagline i { color: #7ee2a8; margin-right: 4px; }
.hd-top-sub { font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.hd-top-tels {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
}
.hd-top-tels i { margin-right: 2px; }
#header.hd .hd-top-tels a {
	padding: 2px 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background-color 0.15s;
}
#header.hd .hd-top-tels a:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- main bar ---------- */
#header.hd .header-container { min-height: 84px; }
#header.hd .header-logo img {
	width: auto;
	height: 52px;
	max-width: 100%;
}
.hd-actions {
	align-items: center;
	gap: 8px;
	margin-left: 16px;
}
.hd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hd-btn:hover { transform: translateY(-1px); text-decoration: none; }
#header.hd .hd-btn-call {
	padding: 0 20px;
	background: linear-gradient(135deg, #ff9a2e, #f26b00);
	color: #fff;
	box-shadow: 0 6px 16px rgba(242, 107, 0, 0.3);
}
#header.hd .hd-btn-line {
	width: 44px;
	background: #06c755;
	color: #fff;
	font-size: 24px;
	box-shadow: 0 6px 16px rgba(6, 199, 85, 0.25);
}

/* เมนู desktop */
@media (min-width: 992px) {
	/* li ของธีมยืดเต็มความสูงแถว (84px) ทำให้ลิงก์ชิดบน — จัดให้อยู่กึ่งกลางแนวตั้ง
	   (ใช้ align-self แทน display:flex เพื่อให้ dropdown ยังเปิดลงด้านล่างลิงก์) */
	#header.hd .header-nav-main nav > ul > li {
		align-self: center;
		height: auto;
	}
	#header.hd .header-nav-main nav > ul > li > a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 2px;
		padding: 10px 18px !important;
		border-radius: 999px !important;
		background: transparent !important;
		color: var(--hd-ink) !important;
		font-size: 16px;
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
		transition: background-color 0.15s, color 0.15s;
	}
	#header.hd .header-nav-main nav > ul > li > a i { color: var(--hd-primary); font-size: 15px; }
	#header.hd .header-nav-main nav > ul > li:hover > a {
		background: #f2f7f4 !important;
		color: var(--hd-primary) !important;
	}
	#header.hd .header-nav.header-nav-links nav > ul > li > a.active {
		background: rgba(21, 125, 83, 0.1) !important;
		color: var(--hd-primary) !important;
	}
	#header.hd .header-nav-main nav > ul > li > a.dropdown-toggle::after { border-color: var(--hd-muted) transparent transparent; }
	#header.hd .header-nav-main nav > ul > li.dropdown .dropdown-menu {
		padding: 8px;
		border-radius: 14px;
		box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
	}
	#header.hd .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
		padding: 9px 14px;
		border-radius: 10px;
		border-bottom: 0;
		color: var(--hd-ink);
		font-size: 15px;
	}
	#header.hd .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover { background: #f2f7f4; color: var(--hd-primary); }
}

/* ปุ่มเมนูมือถือ */
#header.hd .header-btn-collapse-nav {
	width: 46px;
	height: 46px;
	margin-left: 12px;
	padding: 0;
	border-radius: 14px;
	background: var(--hd-primary);
	color: #fff;
	font-size: 20px;
}

/* ---------- mobile ---------- */
@media (max-width: 991.98px) {
	#header.hd .header-container { min-height: 72px; }
	#header.hd .header-logo img { height: 46px; }
	#header.hd .header-nav-main nav > ul > li > a {
		color: var(--hd-ink) !important;
		font-size: 16px;
		text-transform: none;
	}
	#header.hd .header-nav-main nav > ul > li > a i { width: 20px; margin-right: 8px; color: var(--hd-primary); text-align: center; }
	#header.hd .header-nav-main nav > ul > li > a.active {
		background: rgba(21, 125, 83, 0.1) !important;
		color: var(--hd-primary) !important;
	}
}
@media (max-width: 767.98px) {
	.hd-top-inner { justify-content: center; text-align: center; font-size: 14px; }
	.hd-top-sub { display: none; }
}
@media (max-width: 575.98px) {
	#header.hd .header-logo img { height: auto; width: 220px; }
}