/* Navbar — responsive & cross-browser (โหลดไฟล์นี้หลัง style.css และไฟล์ breakpoint ทั้งหมด) */
#navbar-main {
	--nv-main: #5e64a8;
	--nv-rgb: 94, 100, 168;
	--nv-accent: #feb713;
	--nv-ink: #1f2133;
	height: auto;
	padding: 0 clamp(.75rem, 2.4vw, 3.5rem);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	box-shadow: 0 1px 0 rgba(var(--nv-rgb), .08), 0 8px 24px -12px rgba(var(--nv-rgb), .35);
}
#navbar-main .nav-padding { gap: .75rem; padding-left: 0; padding-right: 0; }
/* Brand */
#navbar-main .navbar-brand { display: flex; flex: 0 1 auto; align-items: center; gap: clamp(.4rem, .8vw, .7rem); min-width: 0; margin-right: 0; padding: .55rem 0; white-space: normal; color: var(--nv-main); }
#navbar-main #img60y { flex-shrink: 0; width: auto; height: clamp(24px, 2.4vw, 38px); max-height: none; }
#navbar-main #imgAASP { flex-shrink: 0; width: auto; height: clamp(36px, 3.6vw, 56px); max-width: none; max-height: none; }
#navbar-main #divAgencyName { min-width: 0; padding: 0 0 0 clamp(.4rem, .8vw, .7rem); border-left: 2px solid rgba(var(--nv-rgb), .15); font-size: clamp(.95rem, .6rem + .7vw, 1.35rem); font-weight: 600; line-height: 1.2; max-width: 16em; color: var(--nv-main); }
#navbar-main #divUniversityName { margin-top: .1rem; font-size: .68em; font-weight: 300; line-height: 1.25; color: #6b6e80; }
/* Menu */
#navbar-main .navbar-nav { align-items: center; gap: clamp(0rem, .25vw, .3rem); padding: 0; }
#navbar-main .navbar-nav .nav-item { margin: 0; padding: 0; }
#navbar-main .navbar-nav .nav-link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.45rem clamp(.4rem, .65vw, .85rem);
	font-size: clamp(.82rem, .5rem + .42vw, 1rem);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--nv-ink);
	transition: color .2s;
}
#navbar-main .navbar-nav .nav-link::before { content: ""; position: absolute; left: clamp(.4rem, .65vw, .85rem); right: clamp(.4rem, .65vw, .85rem); bottom: .9rem; height: 2px; border-radius: 2px; background: var(--nv-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
#navbar-main .navbar-nav .nav-link:hover, #navbar-main .navbar-nav .nav-link:focus-visible, #navbar-main .navbar-nav .nav-link.dropdown-toggle.show { color: var(--nv-main); }
#navbar-main .navbar-nav .nav-link:hover::before, #navbar-main .navbar-nav .nav-link.show::before { transform: scaleX(1); }
/* Dropdown caret (ไม่พึ่ง Font Awesome) */
#navbar-main .navbar-nav .dropdown-toggle::after {
	content: "" !important;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-left: .45em !important;
	border: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	font-family: inherit;
	vertical-align: middle;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s;
}
#navbar-main .navbar-nav .dropdown-toggle.show::after { transform: translateY(2px) rotate(-135deg); }
/* Dropdown menu */
#navbar-main .dropdown-menu { min-width: 15rem; margin-top: 0; padding: .45rem; border: 0; border-radius: 14px; font-size: .92rem; background: #fff; box-shadow: 0 18px 40px -12px rgba(var(--nv-rgb), .35), 0 2px 6px rgba(0,0,0,.05); }
#navbar-main .dropdown-menu.show li, #navbar-main .dropdown-menu li { padding: 0; }
#navbar-main .dropdown-menu > li:hover { background: transparent; }
#navbar-main .dropdown-menu .dropdown-item, #navbar-main .dropdown-menu.show .dropdown-item { padding: .6rem .85rem; border-radius: 9px; font-weight: 400; color: var(--nv-ink); white-space: normal; transition: background .15s, color .15s, padding .15s; }
#navbar-main .dropdown-menu .dropdown-item:hover, #navbar-main .dropdown-menu.show .dropdown-item:hover, #navbar-main .dropdown-menu .dropdown-item:focus { padding-left: 1.05rem; font-weight: 400; color: var(--nv-main); background: rgba(var(--nv-rgb), .08); }
#navbar-main .dropdown-menu .dropdown-item:active { color: #fff; background: var(--nv-main); }
/* Toggler */
#navbar-main .navbar-toggler { flex-shrink: 0; margin: 0; padding: .45rem .6rem; border: 0; border-radius: 10px; background: rgba(var(--nv-rgb), .08); }
#navbar-main .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(var(--nv-rgb), .25); }
#navbar-main .navbar-toggler-icon { width: 1.35em; height: 1.35em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235e64a8' stroke-linecap='round' stroke-width='2.4' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e"); }
/* Desktop แคบ (1200–1439px) พื้นที่ไม่พอ แสดงเฉพาะโลโก้ */
@media (min-width: 1200px) and (max-width: 1439.98px) {
	#navbar-main #divAgencyName { display: none; }
}
/* Tablet & Mobile (เมนูพับ < 1200px) */
@media (max-width: 1199.98px) {
	#navbar-main .navbar-brand { flex: 1 1 0; }
	#navbar-main .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; margin: 0 calc(-1 * clamp(.75rem, 2.4vw, 3.5rem)); padding: 0 clamp(.75rem, 2.4vw, 3.5rem); border-top: 1px solid rgba(var(--nv-rgb), .1); }
	#navbar-main .navbar-nav { align-items: stretch; gap: .15rem; padding: .75rem 0 1rem; }
	#navbar-main .navbar-nav .nav-link { justify-content: space-between; padding: .75rem 1rem; border-radius: 10px; font-size: 1rem; }
	#navbar-main .navbar-nav .nav-link::before { display: none; }
	#navbar-main .navbar-nav .nav-link:hover, #navbar-main .navbar-nav .nav-link.show { background: rgba(var(--nv-rgb), .07); }
	#navbar-main .dropdown-menu { margin: .15rem 0 .5rem .75rem; padding: .25rem; border-left: 2px solid rgba(var(--nv-rgb), .2); border-radius: 0 10px 10px 0; box-shadow: none; background: rgba(var(--nv-rgb), .03); }
}
@media (max-width: 575.98px) {
	#navbar-main #divAgencyName { font-size: 1rem; }
	#navbar-main #divUniversityName { font-size: .75rem; }
}
@media (max-width: 374.98px) {
	#navbar-main #img60y { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	#navbar-main * { transition: none !important; }
}