/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ===== PAGE HEADER STYLING ===== */
/* CSS cho stack slider trên mobile */

/* Stack container chính */
.khang-stack {
    position: relative;
}

/* MOBILE SLIDER STYLES - Áp dụng cho màn hình <= 768px */
@media (max-width: 768px) {
    .khang-stack {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling trên iOS */
        padding: 0 20px; /* Padding cho container */
        margin: 0 -20px; /* Offset để giữ alignment với container cha */
    }
    
    /* Ẩn scrollbar */
    .khang-stack::-webkit-scrollbar {
        display: none;
    }
    
    .khang-stack {
        -ms-overflow-style: none; /* IE và Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    /* Flex container để items nằm ngang */
    .khang-stack .stack-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 20px; /* Khoảng cách giữa các items */
        min-width: max-content;
    }
    
    /* Mỗi banner item */
    .khang-stack .banner {
        flex: none; /* Không cho phép flex-grow/shrink */
        width: calc(100vw - 40px - 100px); /* Chiều rộng = viewport - padding - 30% cho item kế */
        min-width: 280px; /* Chiều rộng tối thiểu */
        max-width: 350px; /* Chiều rộng tối đa */
    }
}

/* Điều chỉnh cho màn hình rất nhỏ */
@media (max-width: 480px) {
    .khang-stack {
        padding: 0 15px;
        margin: 0 -15px;
    }
    
    .khang-stack .stack-row {
        gap: 15px;
    }
    
    .khang-stack .banner {
        width: calc(100vw - 30px - 80px); /* Điều chỉnh cho màn hình nhỏ */
        min-width: 220px;
        max-width: 250px;
    }
}

/* Điều chỉnh cho màn hình 420px cụ thể như yêu cầu */
@media (max-width: 420px) {
    .khang-stack .banner {
        width: 250px; /* Chính xác 300px như yêu cầu */
    }
}

/* DESKTOP - Giữ nguyên layout gốc */
@media (min-width: 769px) {
    .khang-stack {
        overflow: visible;
    }
    
    .khang-stack .stack-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .khang-stack .banner {
        flex: 1;
        width: auto;
        min-width: auto;
        max-width: none;
    }
}




@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	

}