/* =========================================================
   Header : แถบติดต่อด้านบน + แถบเมนูหลักแบบ sticky + เมนูมือถือ
   ========================================================= */
:root{
	--mxh-top:40px;
	--mxh-bar:84px;
	--mxh-bar-sm:66px;
	--mxh-blue:#0061e1;
	--mxh-navy:#0a2550;
	--mxh-ink:#14213d;
}
.mxh{
	position:sticky; top:calc(var(--mxh-top) * -1); z-index:1000;
	font-family:"Prompt",sans-serif;
}

/* ---------- แถบบน ---------- */
.mxh-top{height:var(--mxh-top); background:linear-gradient(90deg, var(--mxh-navy) 0%, #0d3a85 60%, var(--mxh-blue) 100%); color:rgba(255,255,255,.85); font-size:13.5px;}
.mxh-top .container{height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.mxh-top-info{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; min-width:0;}
.mxh-top-info li{display:flex; align-items:center; gap:7px; white-space:nowrap;}
.mxh-top-info i{color:#7fd3ff; font-size:12.5px;}
.mxh-top a{color:#FFF; text-decoration:none; font-weight:500;}
.mxh-top a:hover{color:#7fd3ff;}
.mxh-top-label{color:rgba(255,255,255,.7);}
.mxh-sep{color:rgba(255,255,255,.35);}
.mxh-top-right{white-space:nowrap; color:rgba(255,255,255,.8);}
.mxh-top-right i{color:#7fd3ff; margin-right:4px;}

/* ---------- แถบหลัก ---------- */
.mxh-bar{
	height:var(--mxh-bar); background:rgba(255,255,255,.96);
	-webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid rgba(10,37,80,.06);
	transition:height .25s ease, box-shadow .25s ease;
}
.mxh.is-scrolled .mxh-bar{height:var(--mxh-bar-sm); box-shadow:0 8px 30px rgba(10,37,80,.10);}
.mxh-bar .container{height:100%; display:flex; align-items:center; gap:20px;}

.mxh-brand{display:flex; align-items:center; gap:12px; text-decoration:none !important; flex:none; min-width:0;}
.mxh-brand img{height:62px; width:auto; transition:height .25s ease;}
.mxh.is-scrolled .mxh-bar .mxh-brand img{height:46px;}
.mxh-brand-text{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.mxh-brand-text strong{font-size:17px; font-weight:700 !important; color:var(--mxh-blue); letter-spacing:.01em; white-space:nowrap;}
.mxh-brand-text strong em{font-style:normal; color:var(--mxh-navy); font-weight:600;}
.mxh-brand-text small{font-size:12px; color:#5b6b82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.mxh-nav{margin-left:auto;}
.mxh-nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.mxh-nav a{
	position:relative; display:block; padding:10px 14px; border-radius:10px;
	font-size:15.5px; font-weight:500; color:var(--mxh-ink); text-decoration:none !important; white-space:nowrap;
	transition:color .2s ease, background .2s ease;
}
.mxh-nav a::after{
	content:""; position:absolute; left:14px; right:14px; bottom:4px; height:3px; border-radius:3px;
	background:var(--mxh-blue); transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.mxh-nav a:hover{color:var(--mxh-blue); background:rgba(0,97,225,.06);}
.mxh-nav a.is-active{color:var(--mxh-blue);}
.mxh-nav a.is-active::after, .mxh-nav a:hover::after{transform:scaleX(1);}
.mxh-nav a:focus-visible{outline:3px solid rgba(0,97,225,.4); outline-offset:2px;}

.mxh-actions{display:flex; align-items:center; gap:10px; flex:none;}
.mxh-cta{
	display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px;
	background:linear-gradient(135deg,#ff9a1f,#ff6a00); color:#FFF !important; font-size:15px; font-weight:500;
	text-decoration:none !important; box-shadow:0 8px 20px rgba(255,106,0,.28); transition:transform .2s ease, box-shadow .2s ease;
}
.mxh-cta:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,106,0,.36);}
.mxh-cta i{font-size:14px;}

/* ---------- เมนูผู้ดูแล ---------- */
.mxh-admin{position:relative;}
.mxh-admin-btn{
	display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:12px; cursor:pointer;
	font-family:"Prompt",sans-serif; font-size:14px; font-weight:600; color:#c62828; background:#fdecec; border:1px solid #f8d0d0;
	transition:background .2s ease;
}
.mxh-admin-btn:hover, .mxh-admin-btn.is-active, .mxh-admin.is-open .mxh-admin-btn{background:#fbdcdc;}
.mxh-caret{font-size:11px; transition:transform .2s ease;}
.mxh-admin.is-open .mxh-caret{transform:rotate(180deg);}
.mxh-admin-menu{
	position:absolute; right:0; top:calc(100% + 10px); min-width:290px; list-style:none; margin:0; padding:8px;
	background:#FFF; border:1px solid #e3eaf4; border-radius:16px; box-shadow:0 20px 45px rgba(10,37,80,.18);
	opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.mxh-admin.is-open .mxh-admin-menu{opacity:1; visibility:visible; transform:none;}
.mxh-admin-menu a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; font-size:14.5px; color:var(--mxh-ink); text-decoration:none !important;}
.mxh-admin-menu a i{width:18px; text-align:center; color:var(--mxh-blue);}
.mxh-admin-menu a:hover, .mxh-admin-menu a.is-active{background:#f2f6fc; color:var(--mxh-blue);}
.mxh-admin-sep{border-top:1px solid #eef1f5; margin-top:6px; padding-top:6px;}
.mxh-admin-sep a, .mxh-admin-sep a i{color:#c62828 !important;}

/* ---------- ปุ่มเมนูมือถือ ---------- */
.mxh-burger{display:none; width:46px; height:46px; border-radius:12px; border:1px solid #e3eaf4; background:#FFF; cursor:pointer; position:relative;}
.mxh-burger span{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--mxh-navy); transition:transform .25s ease, opacity .2s ease;}
.mxh-burger span:nth-child(1){top:15px;}
.mxh-burger span:nth-child(2){top:22px;}
.mxh-burger span:nth-child(3){top:29px;}

/* ---------- เมนูมือถือ (drawer) ---------- */
.mxh-overlay{position:fixed; inset:0; z-index:9997; background:rgba(10,20,40,.5); opacity:0; transition:opacity .25s ease;}
.mxh-overlay.is-open{opacity:1;}
.mxh-overlay[hidden]{display:none;}
.mxh-drawer{
	position:fixed; top:0; right:0; bottom:0; z-index:9998; width:min(360px, 88vw);
	display:flex; flex-direction:column; background:#FFF; font-family:"Prompt",sans-serif;
	box-shadow:-20px 0 50px rgba(10,37,80,.2); transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
	overflow-y:auto; visibility:hidden;
}
.mxh-drawer.is-open{transform:none; visibility:visible;}
.mxh-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eef1f5;}
.mxh-drawer-head .mxh-brand img{height:44px;}
.mxh-drawer-head .mxh-brand-text strong{font-size:16px;}
.mxh-drawer-head .mxh-brand-text small{font-size:11.5px;}
.mxh-close{width:42px; height:42px; border-radius:12px; border:1px solid #e3eaf4; background:#FFF; font-size:18px; color:var(--mxh-navy); cursor:pointer;}
.mxh-drawer-nav{padding:10px 12px;}
.mxh-drawer-nav a, .mxh-drawer-admin a{display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px; font-size:16px; font-weight:500; color:var(--mxh-ink); text-decoration:none !important;}
.mxh-drawer-nav a > i:first-child{width:22px; text-align:center; color:var(--mxh-blue);}
.mxh-drawer-nav a .mxh-go{margin-left:auto; font-size:12px; color:#a0aec0;}
.mxh-drawer-nav a:hover, .mxh-drawer-nav a.is-active{background:#f2f6fc; color:var(--mxh-blue);}
.mxh-drawer-admin{margin:0 12px; padding:10px 0; border-top:1px dashed #e3eaf4;}
.mxh-drawer-title{font-size:13px; font-weight:600; color:#c62828; padding:4px 14px 6px;}
.mxh-drawer-admin a{font-size:14.5px; padding:10px 14px;}
.mxh-drawer-admin a i{width:22px; text-align:center; color:#c62828;}
.mxh-drawer-contact{margin-top:auto; padding:16px; border-top:1px solid #eef1f5; background:#f7f9fc; display:flex; flex-direction:column; gap:10px;}
.mxh-drawer-contact .mx-btn{width:100%;}
.mxh-drawer-mail{text-align:center; font-size:14px; color:#4a5568; word-break:break-all;}
html.mxh-lock, html.mxh-lock body{overflow:hidden;}

/* ---------- Responsive ---------- */
@media (min-width: 992px) and (max-width: 1199px){
	.mxh-brand-text{display:none;}
}
@media (max-width: 1199px){
	.mxh-brand-text small{display:none;}
	.mxh-hide-lg{display:none;}
	.mxh-nav a{padding:10px 10px; font-size:15px;}
	.mxh-nav a::after{left:10px; right:10px;}
}
@media (max-width: 1100px){
	.mxh-cta span{display:none;}
	.mxh-cta{padding:0; width:46px; height:46px; justify-content:center;}
}
@media (max-width: 991px){
	:root{--mxh-top:36px; --mxh-bar:72px; --mxh-bar-sm:62px;}
	.mxh-nav{display:none;}
	.mxh-burger{display:inline-block;}
	.mxh-actions{margin-left:auto;}
	.mxh-admin{display:none;}
	.mxh-brand img{height:52px;}
	.mxh-brand-text small{display:block; font-size:11.5px;}
	.mxh-hide-md, .mxh-top .mxh-hide-md{display:none;}
}
@media (max-width: 575px){
	.mxh-top{font-size:12.5px;}
	.mxh-top-info{gap:12px;}
	.mxh-hide-sm, .mxh-top-info li.mxh-hide-sm, .mxh-top-label{display:none;}
	.mxh-brand-text small{display:none;}
	.mxh-brand-text strong{font-size:15px;}
	.mxh-brand-text strong em{display:block; font-size:11.5px; color:#5b6b82; font-weight:500;}
	.mxh-cta{display:none;}
}
@media (prefers-reduced-motion: reduce){
	.mxh *, .mxh-drawer, .mxh-overlay{transition:none !important;}
}
@media print{ .mxh-top, .mxh-actions, .mxh-drawer, .mxh-overlay{display:none !important;} .mxh{position:static;} }