/* --- perfect-text-slider-assets.css --- */

body {
    /* Đã di chuyển background, display, min-height, font-family ra khỏi body vì nó can thiệp quá nhiều vào theme */
    /* Hãy giữ những quy tắc này bên ngoài nếu muốn nó không ảnh hưởng đến toàn bộ trang. */
    /* Ví dụ: chỉ giữ các thuộc tính liên quan đến slider */
    margin: 0; padding: 0;
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
}
/* Nếu bạn muốn giữ lại giao diện nền đen như trong ví dụ gốc, bạn có thể thêm một div bao ngoài và áp dụng CSS này */

.gallery-stage {
    width: 100%;
    height: 300px;
    display: flex;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
	border-radius: 40px;
}

/* --- CẤU HÌNH SLOT --- */
.slot {
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.slot.side {
    width: 25%; 
    z-index: 1;
    transform: skewX(0deg); /* Thẳng */
}
.slot.side::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.1); z-index: 5; pointer-events: none;
}

.slot.center {
    width: 60%; 
    z-index: 10;
    transform: skewX(-16deg);
    border-left: 15px solid #05171dbd;
    border-right: 15px solid #0b3d4bb0;
/*     box-shadow: 0 0 50px rgba(0, 0, 0, 0.9); */
    margin-left: -5%;
    margin-right: -5%;
}

/* ẢNH */
.slot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2); 
}
.slot.center img {
    transform: skewX(16deg) scale(1.4); /* Nghiêng lại ảnh */
    transform-origin: center;
}

/* --- PHẦN TEXT (MỚI) --- */
.slide-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    z-index: 20;
    width: 80%;
    
    /* Mặc định ẩn hết text (áp dụng cho 2 bên) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Chỉ hiện text ở CENTER */
.slot.center .slide-content {
    opacity: 1;
    visibility: visible;
    
    /* Nghiêng ngược lại text để chữ thẳng thớm */
    transform: skewX(16deg) translateY(0);
    
    /* Delay 1 chút để ảnh trượt xong text mới hiện lên */
    transition-delay: 0.4s;
}

.slide-content h2 {
    margin: 0 0 10px 0;
    font-size: 20px;
    text-transform: none;
    font-weight: 500;
    color: #fff;
}

.slide-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    background: rgba(0,0,0,0.6); /* Nền đen mờ cho dễ đọc */
    padding: 10px 15px;
    display: inline-block; /* Ôm sát nội dung */
    border-radius: 4px;
}


/* --- ANIMATION ẢNH --- */
.anim-next { animation: slideInFromRight 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
@keyframes slideInFromRight {
    from { transform: translateX(20%) scale(1.2) skewX(var(--skew, 0)); opacity: 0.5; }
    to   { transform: translateX(0) scale(1.2) skewX(var(--skew, 0)); opacity: 1; }
}

.anim-prev { animation: slideInFromLeft 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
@keyframes slideInFromLeft {
    from { transform: translateX(-20%) scale(1.2) skewX(var(--skew, 0)); opacity: 0.5; }
    to   { transform: translateX(0) scale(1.2) skewX(var(--skew, 0)); opacity: 1; }
}

.slot.side img { --skew: 0deg; }
.slot.center img { --skew: 10deg; }

/* BUTTONS */
.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 50; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-weight: bold; color: #333; transition: 0.2s;
	opacity: 0;
}
.nav-btn:hover { background: #f2f2f2; transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 40px; }
.next-btn { right: 40px; }
.hidden-swiper { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }