.knipex-video-slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* make swiper & slides fill wrapper */
.knipex-video-slider-wrapper .swiper {
    width: 100%;
    height: 100%;
}
.knipex-video-slider-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

/* inner video container */
.knipex-video-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.knipex-video-el,
.knipex-video-embed {
    width: 100%;
    height: 100%;
    display: block;
}

/* video element styling */
.knipex-video-el {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* iframe embed styling */
.knipex-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* overlay content (title + button + template) */
.knipex-overlay {
    position: absolute;
    left: 15%;
    top: 5%;
    z-index: 10;
    max-width: 50%;
    color: #ffffff;
    pointer-events: none; /* let clicks pass by default; buttons override */
}

.knipex-slide-title {
    font-size: 2rem;
    pointer-events: auto;
}

.knipex-slide-button {
    display: inline-block;
    padding: .6rem 1rem;
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    text-decoration: none;
    pointer-events: auto;
}

/* saved template wrapper if inserted */
.knipex-slide-template {
    margin-top: 1rem;
    pointer-events: auto;
}

/* navigation arrow overrides (swiper default) */
.knipex-swiper-button-prev,
.knipex-swiper-button-next {
    color: #000;
    width: 40px;
    height: 48px;
    background: rgba(0,0,0,0.35);
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 20;
	display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
	align-content: center;
}


.knipex-swiper-button-prev { 
	right: 0px;
	background-color: #cacdce;
	border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}
.icon-prev {
	transform: rotate(180deg);
}
.knipex-swiper-button-next { 
	left: 0px;
	background-color: #cacdce;
	border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* Áp dụng cho lớp bọc con (.icon-prev và .icon-container) */
.knipex-swiper-button-prev .icon-prev,
.knipex-swiper-button-next .icon-container {
    /* Đảm bảo lớp bọc con chiếm đủ không gian và không có padding/margin gây lệch */
    width: 100%;
    height: 100%;

    /* THÊM 2: CĂN GIỮA NỘI DUNG BÊN TRONG LỚP BỌC */
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
}

/* Tùy chọn: Đảm bảo SVG không có khoảng trắng thừa */
.centered-svg {
    display: block;
    margin: 0;
    padding: 0;
}

.knipex-swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/* placeholder */
.knipex-video-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
}