/* Mind2u Portfolio 1.3.1 */
.m2u-pf{
	--m2u-text:#eef2fb;
	--m2u-muted:#a3b2cf;
	--m2u-accent:#7db4ff;
	--m2u-card:rgba(255,255,255,.04);
	--m2u-line:rgba(255,255,255,.10);
	--m2u-radius:var(--r,20px);
	--m2u-gap:26px;
	width:100%;
	box-sizing:border-box;
	color:var(--m2u-text);
}
.m2u-pf.m2u-light{
	--m2u-text:#16213a;
	--m2u-muted:#5b6784;
	--m2u-accent:#2b6cf0;
	--m2u-card:#fff;
	--m2u-line:rgba(20,30,60,.10);
}
.m2u-pf *,.m2u-pf *::before,.m2u-pf *::after{box-sizing:border-box}

/* Section heading */
.m2u-pf .m2u-head{text-align:center;margin:0 0 34px}
.m2u-pf .m2u-sec-title{font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.25;color:var(--m2u-text);margin:0 0 10px}
.m2u-pf .m2u-sec-sub{margin:0 auto;max-width:640px;font-size:16px;line-height:1.7;color:var(--m2u-muted)}

/* Grid: 3 columns desktop, 2 columns mobile */
.m2u-pf .m2u-grid{
	display:grid;
	grid-template-columns:repeat(var(--m2u-cols,3),minmax(0,1fr));
	gap:var(--m2u-gap);
}
@media (max-width:767px){
	.m2u-pf{--m2u-gap:14px}
	.m2u-pf .m2u-grid{grid-template-columns:repeat(var(--m2u-mcols,2),minmax(0,1fr))}
	.m2u-pf .m2u-head{margin-bottom:22px}
}

/* Card */
.m2u-pf .m2u-card{
	margin:0;
	padding:0 0 18px;
	background:var(--m2u-card);
	border:1px solid var(--m2u-line);
	border-radius:var(--m2u-radius);
	overflow:hidden;
	transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.m2u-pf .m2u-card:hover{
	transform:translateY(-30px);
	box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* Image 1:1 */
.m2u-pf .m2u-media{
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	background:#0c1426;
	cursor:pointer;
	text-decoration:none;
	outline-offset:-3px;
}
.m2u-pf .m2u-media img{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	object-position:center top;
	margin:0;
	border-radius:0;
	transform:scale(1);
	transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.m2u-pf .m2u-card:hover .m2u-media img{transform:none}

/* Light sweep */
.m2u-pf .m2u-shine{
	position:absolute;
	top:-10%;
	bottom:-10%;
	left:-70%;
	width:45%;
	pointer-events:none;
	background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 70%,transparent 100%);
	transform:skewX(-22deg);
	opacity:0;
}
.m2u-pf .m2u-card:hover .m2u-shine{
	animation:m2uShine .95s ease-out 1;
}
@keyframes m2uShine{
	0%{left:-70%;opacity:0}
	15%{opacity:1}
	100%{left:130%;opacity:1}
}

/* Zoom badge */
.m2u-pf .m2u-zoom{
	position:absolute;
	right:12px;
	bottom:12px;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	color:#fff;
	background:rgba(10,18,36,.62);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	border:1px solid rgba(255,255,255,.25);
	opacity:0;
	transform:translateY(8px) scale(.85);
	transition:opacity .3s,transform .3s;
}
.m2u-pf .m2u-card:hover .m2u-zoom,
.m2u-pf .m2u-media:focus-visible .m2u-zoom{opacity:1;transform:none}
@media (hover:none){
	.m2u-pf .m2u-zoom{opacity:.9;transform:none;width:34px;height:34px;right:8px;bottom:8px}
}

/* m2u-noeffects: ไม่มีซูมภาพ/แสงวิ่ง/ไอคอนแว่นขยาย (คลิกแล้วเปิดเว็บไซต์ตรงๆ) */
.m2u-pf .m2u-shine,.m2u-pf .m2u-zoom{display:none!important}
.m2u-pf .m2u-card{border-color:rgba(20,30,60,.14);box-shadow:none}
.m2u-pf:not(.m2u-light) .m2u-card{border-color:rgba(255,255,255,.14)}

/* Text */
.m2u-pf .m2u-title{
	margin:16px 16px 6px;
	padding:0;
	font-size:20px;
	font-weight:700;
	line-height:1.35;
	letter-spacing:0;
	text-transform:none;
	color:var(--m2u-text);
	text-align:center;
}
.m2u-pf .m2u-desc{
	margin:0 16px;
	padding:0;
	font-size:15px;
	line-height:1.6;
	color:var(--m2u-muted);
	text-align:center;
}
@media (max-width:767px){
	.m2u-pf .m2u-card{padding-bottom:14px}
	.m2u-pf .m2u-title{font-size:16px;margin:12px 10px 4px}
	.m2u-pf .m2u-desc{font-size:13px;margin:0 10px}
}

/* ---------------------------------------------------------- Slider (v1.3.0)
   เดสก์ท็อป: แถวเดียว จับลาก/ปัดซ้ายขวา เลื่อนอัตโนมัติทุก 3 วินาที
   มือถือ: 1 กรอบเต็มจอ ปัดแล้วสแน็บยึดด้านบนทีละกรอบ (portfolio.js) */
.m2u-pf .m2u-sl{position:relative}
.m2u-pf .m2u-sl-track{
	position:relative;
	display:flex;
	gap:14px;
	align-items:stretch;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	scroll-padding-inline:50px;
	padding:42px 50px 40px;
	scrollbar-width:none;
	-ms-overflow-style:none;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	cursor:grab;
}
.m2u-pf .m2u-sl-track::-webkit-scrollbar{display:none}
.m2u-pf .m2u-sl-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.m2u-pf .m2u-sl-track>.m2u-card{
	flex:0 0 300px;
	width:300px;
	min-height:400px;
	display:flex;
	flex-direction:column;
	padding-bottom:22px;
	scroll-snap-align:start;
}
/* เดสก์ท็อป 4 คอลัมน์พอดี เว้นซ้าย/ขวา 50px สำหรับปุ่มเลื่อน */
@supports(width:1cqw){
	.m2u-pf .m2u-sl{container-type:inline-size;--cols:4;--m2u-cw:calc((100cqw - 100px - (var(--cols) - 1)*14px)/var(--cols));--m2u-ch:max(calc(var(--m2u-cw) + 100px),420px)}
	.m2u-pf .m2u-sl-track>.m2u-card{flex-basis:var(--m2u-cw);width:var(--m2u-cw);min-height:var(--m2u-ch)}
}
@media (max-width:1279px){.m2u-pf .m2u-sl{--cols:3}}
@media (max-width:899px){.m2u-pf .m2u-sl{--cols:2}}
.m2u-pf .m2u-sl-track img{-webkit-user-drag:none;user-select:none}
.m2u-pf .m2u-sl-track .m2u-media{flex:none}
.m2u-pf .m2u-sl-nav{position:absolute;inset:0;z-index:3;pointer-events:none}
.m2u-pf .m2u-sl-nav button{
	position:absolute;
	top:50%;
	margin-top:-18px;
	pointer-events:auto;
	width:36px;
	height:36px;
	padding:0;
	display:grid;
	place-items:center;
	border-radius:50%;
	border:0;
	background:rgba(10,31,77,.07);
	color:#10213f;
	cursor:pointer;
	transition:opacity .3s,transform .25s,background .25s,color .25s;
}
.m2u-pf .m2u-sl-prev{left:7px}
.m2u-pf .m2u-sl-next{right:7px}
.m2u-pf:not(.m2u-light) .m2u-sl-nav button{background:rgba(255,255,255,.12);color:#fff}
@media (hover:hover){.m2u-pf .m2u-sl-nav button:hover:not(:disabled){background:#2b6cf0;color:#fff;transform:scale(1.06)}}
.m2u-pf .m2u-sl-nav button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m2u-pf .m2u-sl-nav button:disabled{opacity:.3;cursor:default}
.m2u-pf .m2u-sl-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m2u-pf .m2u-sl.is-static .m2u-sl-nav{display:none}
.m2u-pf .m2u-sl.is-static .m2u-sl-track{cursor:auto;justify-content:center}
@media (max-width:767px){
	.m2u-pf .m2u-sl{touch-action:pan-y;container-type:normal}
	.m2u-pf .m2u-sl-track{display:flow-root;overflow:visible;scroll-snap-type:none;padding:0;cursor:auto}
	.m2u-pf .m2u-sl-track>.m2u-card{
		width:auto;
		flex:none;
		margin:20px;
		padding-bottom:0;
		min-height:max(calc(100vh - var(--m2u-hh,76px) - 40px),440px);
		min-height:max(calc(100svh - var(--m2u-hh,76px) - 40px),440px);
	}
	.m2u-pf .m2u-sl-track>.m2u-card:hover{transform:none;box-shadow:none}
	.m2u-pf .m2u-sl-track .m2u-media{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
	.m2u-pf .m2u-sl-track .m2u-title{font-size:22px;margin:18px 22px 6px}
	.m2u-pf .m2u-sl-track .m2u-desc{font-size:15px;margin:0 22px 26px}
	.m2u-pf .m2u-sl-nav{position:fixed;inset:auto;right:8px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:8px;z-index:60}
	.m2u-pf .m2u-sl-nav.on{display:flex}
	.m2u-pf .m2u-sl-nav button{position:static;margin:0;width:36px;height:36px;background:rgba(255,255,255,.92)!important;color:#10213f!important;box-shadow:0 4px 14px rgba(15,40,100,.25)}
	.m2u-pf .m2u-sl-nav button:disabled{opacity:.3}
	.m2u-pf .m2u-sl-nav svg{width:18px;height:18px;transform:rotate(90deg)}
}

/* ---------------------------------------------------------- Lightbox */
.m2u-lb{
	position:fixed;
	inset:0;
	z-index:999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(5,9,20,.88);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	opacity:0;
	visibility:hidden;
	transition:opacity .3s,visibility .3s;
	font-family:inherit;
}
.m2u-lb.is-open{opacity:1;visibility:visible}
.m2u-lb *{box-sizing:border-box}
.m2u-lb-box{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	max-width:min(1100px,100%);
	max-height:100%;
	transform:scale(.92) translateY(14px);
	transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.m2u-lb.is-open .m2u-lb-box{transform:none}
.m2u-lb-imgwrap{
	position:relative;
	display:block;
	width:min(80vw,calc(100vh - 250px),560px);
	aspect-ratio:1/1;
	overflow:hidden;
	border-radius:12px;
	box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
	background:#0c1426;
}
.m2u-lb-img{
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	margin:0;
	object-fit:cover;
	object-position:center top;
}
.m2u-lb-imgwrap.is-wide{
	width:fit-content;
	max-width:min(600px,92vw);
	aspect-ratio:auto;
}
.m2u-lb-imgwrap.is-wide .m2u-lb-img{
	width:auto;
	height:auto;
	max-width:min(600px,92vw);
	max-height:calc(100vh - 250px);
	object-fit:contain;
}
.m2u-lb-cap{text-align:center;color:#eef2fb;padding:16px 8px 0;max-width:720px}
.m2u-lb .m2u-lb-cap .m2u-lb-title{margin:0 0 4px;padding:0;font-size:22px;font-weight:700;line-height:1.3;color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.m2u-lb .m2u-lb-cap .m2u-lb-desc{margin:0 0 14px;font-size:15px;line-height:1.6;color:#b4c1dc!important}
.m2u-lb-visit{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:11px 24px;
	border-radius:999px;
	background:linear-gradient(135deg,#4f8dff,#7db4ff);
	color:#08101f;
	font-weight:700;
	font-size:15px;
	text-decoration:none;
	box-shadow:0 8px 22px -8px rgba(79,141,255,.8);
	transition:transform .25s,box-shadow .25s;
}
.m2u-lb-visit:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(79,141,255,.95);color:#08101f}
.m2u-lb-btn{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	padding:0;
	border:1px solid rgba(255,255,255,.22);
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	transition:background .25s,transform .25s;
}
.m2u-lb-btn:hover{background:rgba(255,255,255,.2)}
.m2u-lb-close{top:16px;right:16px}
.m2u-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.m2u-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.m2u-lb-prev:hover,.m2u-lb-next:hover{transform:translateY(-50%) scale(1.08)}
.m2u-lb-count{position:absolute;top:26px;left:24px;color:#9fb0cf;font-size:14px}
@media (max-width:767px){
	.m2u-lb{padding:12px}
	.m2u-lb-imgwrap{width:min(84vw,calc(100vh - 270px),420px)}
	.m2u-lb .m2u-lb-cap .m2u-lb-title{font-size:18px}
	.m2u-lb-prev,.m2u-lb-next{top:auto;bottom:14px;transform:none}
	.m2u-lb-prev{left:14px}
	.m2u-lb-next{right:14px}
	.m2u-lb-prev:hover,.m2u-lb-next:hover{transform:scale(1.08)}
}
body.m2u-lb-lock{overflow:hidden}

@media (prefers-reduced-motion:reduce){
	.m2u-pf .m2u-card,.m2u-pf .m2u-media img,.m2u-lb,.m2u-lb-box{transition:none}
	.m2u-pf .m2u-card:hover .m2u-shine{animation:none}
}