/* ========================================
    CSS CHO CLIENTS SLIDER (BẢN TRƯỢT 1-1)
    ======================================== */

.feedback-section {
	text-align: center;
	margin: 60px auto;
	padding: 0 20px;
    
    /* Mobile-first: Đặt max-width cho 1 card + nút bấm */
    max-width: 500px; 
}

.feedback-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}

/* 1. KHUNG CỬA SỔ (Window)
    - Đặt chiều rộng cố định để chỉ thấy 3 card
    - Ẩn mọi thứ tràn ra ngoài
    - (300px * 3 card) + (20px * 2 gap) = 940px
*/
.feedback-window {
    width: 300px; /* (300 * 1) */
    overflow: hidden;
    margin: 0 15px;
}
/* 2. THANH TRƯỢT (Track)
    - Chứa TẤT CẢ các card trên một hàng
    - Sẽ di chuyển bằng CSS Transform
*/
.feedback-track {
    display: flex;
    gap: 20px;
    /* transition sẽ được JS xử lý */
}

/* 3. CARD
    - Đặt kích thước cố định, KHÔNG CO GIÃN
*/
.feedback-card {
	background: #C6C6C64D;
	padding: 20px;
	border-radius: 12px;
    flex-shrink: 0; 
    width: 300px; 
    
	text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

	align-items: start;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.feedback-info {
	width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}
.feedback-info img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.feedback-info div {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 4. NÚT BẤM - Nút bấm nằm 2 bên, không cuộn */
.prev, .next {
	background: #092c4c;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
    flex-shrink: 0; /* Không co nút */
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: opacity 0.2s;
}

.prev:hover, .next:hover {
    opacity: 0.8;
}

/* TABLET (Hiển thị 3 card) */
@media (min-width: 768px) {
    .feedback-section {
        /* Đủ rộng cho 3 card + nút */
        max-width: 1100px; 
    }
    .feedback-window {
        /* (300 * 3) + (20 * 2) = 940px */
        width: 940px; 
    }
}

/* DESKTOP (Hiển thị 4 card) */
@media (min-width: 1300px) {
    .feedback-section {
        /* Đủ rộng cho 4 card + nút */
        max-width: 1420px; 
    }
    .feedback-window {
        /* (300 * 4) + (20 * 3) = 1260px */
        width: 1260px; 
    }
}