/* Dermagen Center Carousel */
.dcc{position:relative}
.dcc--bleed{width:100vw;margin-left:calc(50% - 50vw)}
.dcc__stage{position:relative}   /* ครอบเฉพาะรูป+arrow → arrow กึ่งกลางเทียบการ์ด (ไม่รวม dots) */
.dcc__swiper{overflow:hidden;position:relative}
/* Swiper layout ขั้นต่ำ — ฝังเองกันกรณี Elementor ไม่โหลด Swiper CSS (ไม่งั้นสไลด์ stack แนวตั้ง) */
.dcc__swiper>.swiper-wrapper{display:flex;box-sizing:content-box;position:relative}
.dcc__swiper .swiper-slide{flex-shrink:0}

/* center-mode: ใบข้างจาง+เล็ก, ใบกลาง(active) เต็ม
   (ความกว้างการ์ดคุมด้วย Slides Per View ในบิลเดอร์ — Swiper set ให้เอง) */
/* scale ต้องอยู่ที่ inner (ไม่ใช่ .swiper-slide) — Swiper v4 ใส่ transform:translate ให้ slide เอง = ทับ scale */
.dcc__slide{
	opacity:var(--dcc-op,.4);
	transition:opacity .45s ease;
	position:relative;
}
.dcc__slide.swiper-slide-active{opacity:1}
.dcc__inner{
	display:block;height:100%;position:relative;
	transform:scale(var(--dcc-scale,.8));
	transition:transform .45s ease;
	border-radius:20px;overflow:hidden;
	box-shadow:0 34px 64px -32px rgba(0,0,0,.6);
}
.dcc__slide.swiper-slide-active .dcc__inner{transform:scale(1)}
.dcc__inner picture{display:block;height:100%}
.dcc__inner img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.dcc__link{display:block;height:100%}
/* banner mode — อัตราส่วนรูปธรรมชาติ (ไม่บังคับ 16/10) เหมาะ Hero desktop/mobile คนละสัดส่วน */
.dcc--natural .dcc__inner img{aspect-ratio:auto;height:auto}
.dcc--natural .dcc__slide{border-radius:0;opacity:1}   /* ไม่ dim = ไม่มี popup ตอน init */
.dcc--natural .dcc__inner{border-radius:0;box-shadow:none;transform:none;transition:none}

.dcc__cap{
	position:absolute;left:0;right:0;bottom:0;
	padding:2.4rem 1.4rem 1.1rem;
	color:#fff;font-weight:600;font-size:.95rem;text-align:center;
	background:linear-gradient(to top,rgba(20,4,12,.9),transparent);
}

/* arrows */
.dcc__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:5;
	width:44px!important;height:44px!important;min-width:44px;padding:0!important;box-sizing:border-box;flex:0 0 auto;aspect-ratio:1/1;
	border-radius:50%;border:none;cursor:pointer;
	background:#fff;color:var(--dcc-accent,#C41C60);font-size:1.35rem;line-height:0;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 12px 24px -10px rgba(0,0,0,.55);transition:transform .2s;
}
.dcc__nav:hover{transform:translateY(-50%) scale(1.08)}
/* arrow อยู่ในโซนเว้นขอบ (side_pad) → นอกการ์ด */
.dcc__prev{left:clamp(4px,1.5vw,26px)}
.dcc__next{right:clamp(4px,1.5vw,26px)}

/* dots — สีขาว อยู่ล่างการ์ด (override Swiper ที่บังคับ absolute ทับรูป) */
.dcc__dots.swiper-pagination{
	position:static;bottom:auto;left:auto;width:auto;
	margin-top:1.6rem;display:flex;justify-content:center;gap:.5rem;
}
.dcc__dots .swiper-pagination-bullet{
	width:9px;height:9px;background:var(--dcc-dot,#fff);opacity:.45;border-radius:50%;
	transition:width .25s, opacity .25s;
}
.dcc__dots .swiper-pagination-bullet-active{width:26px;border-radius:6px;opacity:1}

@media (max-width:560px){
	.dcc__nav{width:36px!important;height:36px!important;min-width:36px;font-size:1.1rem}
}
/* mobile peek คุมด้วยค่า Slides Per View (mobile) ในบิลเดอร์ */