/* =========================================================
   SHELL – KHÓA KHUNG MOBILE
   ========================================================= */

.home-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
}


/* =========================================================
   HOME PAGE – BASE
   ========================================================= */

.home-page {
    background-color: var(--color-bg-primary);
    min-height: 100vh;
	overflow-x: hidden;
}

/* =========================================================
   CONTENT WRAPPER (KHÓA KHUNG MOBILE)
   ========================================================= */

.home-content {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 80px; /* chừa chỗ bottom-bar */
    overflow-x: hidden;
}

/* =========================================================
   SECTION RULE (GLOBAL)
   ========================================================= */

.home-section {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* khoảng cách giữa các section */
.home-section + .home-section {
    margin-top: 8px;
}

/* section dạng card */
.home-section--card {
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}

/* =========================================================
   ASSET SLIDER – CORE
   ========================================================= */

/* vỏ slider */
.home-asset-slider {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;         
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: block;             
}

/* track chứa ảnh */
.home-asset-slider .asset-track {
    display: flex;
    width: 100%;
	align-items: flex-start;
}

/* từng ảnh */
.home-asset-slider img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
    scroll-snap-align: start;
    border-radius: 8px;
}

/* =========================================================
   MAIN SLIDER
   ========================================================= */

.home-main-slider {
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}

/* =========================================================
   SECOND SLIDER
   ========================================================= */

.home-second-slider {
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}

/* =========================================================
   BODY BANNER (2 ảnh ngang)
   ========================================================= */

.home-body-banner {
    display: flex;
    gap: 8px;
}

.home-banner-item {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-bg-secondary);
}

.home-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

/* =========================================================
   PRODUCT GRID (SALE + RANDOM)
   ========================================================= */

.home-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px;
    box-sizing: border-box;
}

/* =========================================================
   PRODUCT CAROUSEL
   ========================================================= */

.home-product-grid.is-carousel {
    display: block;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.home-product-grid.is-carousel .carousel-track {
    display: flex;
    gap: 12px;
}

.home-product-grid.is-carousel .product-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
}

/* =========================================================
   SALE / RANDOM BLOCK
   ========================================================= */

.home-sale-products,
.home-random-products {
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}

/* =========================================================
   ZALO BUTTON
   ========================================================= */
.contact-zalo-float {
    position: fixed;
    right: 4px;
    bottom: 72px; /* 👈 cao hơn bottom-bar */

    width: 96px;
    height: 96px;

    z-index: 200;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border-radius: 50%;
}

.contact-zalo-float img {
    width: 72px;
    height: 72px;
    display: block;
}