section {
    width: 100%;
    height: auto;
    float: left;
    background: url(/Content/Display/images/bg-noel.webp) no-repeat;
    background-size: 100%;
    background-position: left bottom;
    background-attachment: fixed;
}
footer{ padding:10px 0px !important}
#adsHome img{width:100%; height:auto; float:left; margin-top:2px}
#product-hot{ margin-top:2px}
#main{
	background:transparent !important
}
/* --------- BASE CHO body-home --------- */
.body-home {
    position: relative;
    overflow-x: hidden;
    /* có thể giữ nền gốc của bạn, đây chỉ là ví dụ */
 }

    /* Cho phép các lớp hiệu ứng nằm trên nhưng không chặn click */
    .body-home .noel-lights,
    .body-home .noel-snow,
    .body-home .noel-bottom-decor {
        pointer-events: none;
    }

/* --------- DÂY ĐÈN NHẤP NHÁY TRÊN ĐẦU --------- */
 .noel-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 50;
    background: transparent;
}

.noel-lights::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    /* lõi bóng đèn màu trắng để nhìn rõ hơn */
    background-color: #fff;

    /* dãy đèn nhiều màu – giảm blur xuống cho sắc nét */
    box-shadow:
        -260px 0 3px rgba(255, 0, 0, 1),
        -220px 0 3px rgba(255, 255, 0, 1),
        -180px 0 3px rgba(0, 255, 0, 1),
        -140px 0 3px rgba(0, 255, 255, 1),
        -100px 0 3px rgba(0, 0, 255, 1),
        -60px 0 3px rgba(255, 0, 255, 1),
        -20px 0 3px rgba(255, 165, 0, 1),
         20px 0 3px rgba(255, 0, 0, 1),
         60px 0 3px rgba(255, 255, 0, 1),
        100px 0 3px rgba(0, 255, 0, 1),
        140px 0 3px rgba(0, 255, 255, 1),
        180px 0 3px rgba(0, 0, 255, 1),
        220px 0 3px rgba(255, 0, 255, 1),
        260px 0 3px rgba(255, 165, 0, 1);

    animation: noel-lights-blink 1.2s infinite alternate;
}

@keyframes noel-lights-blink {
    0% {
        filter: brightness(0.5);
        opacity: 0.7;
    }

    50% {
        filter: brightness(1);
        opacity: 1;
    }

    100% {
        filter: brightness(1.3);
        opacity: 0.85;
    }
}

/* --------- HIỆU ỨNG TUYẾT RƠI --------- */
/* Lớp phủ toàn màn hình */
.noel-snow,
.noel-snow::before,
.noel-snow::after {
    position: fixed; /* phủ toàn trang, hoặc absolute cho riêng body-home */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-size: 250px 250px;
    pointer-events: none;
    z-index: 40;
}

/* tầng tuyết 1 (hạt nhỏ, rơi nhanh hơn) */
.noel-snow {
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9) 50%, transparent 51%), radial-gradient(2px 2px at 80px 120px, rgba(255, 255, 255, 0.9) 50%, transparent 51%), radial-gradient(2px 2px at 150px 90px, rgba(255, 255, 255, 0.9) 50%, transparent 51%);
    animation: snow-fall 12s linear infinite;
}

    /* tầng tuyết 2 (hạt to hơn, rơi chậm hơn) */
    .noel-snow::before {
        content: "";
        background-image: radial-gradient(3px 3px at 50px 80px, rgba(255, 255, 255, 0.9) 50%, transparent 51%), radial-gradient(3px 3px at 130px 10px, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(3px 3px at 200px 150px, rgba(255, 255, 255, 0.9) 50%, transparent 51%);
        animation: snow-fall 18s linear infinite;
        opacity: 0.8;
    }

    /* tầng tuyết 3 (rất mỏng, di chuyển ngang nhẹ) */
    .noel-snow::after {
        content: "";
        background-image: radial-gradient(2px 2px at 40px 160px, rgba(255, 255, 255, 0.7) 50%, transparent 51%), radial-gradient(2px 2px at 120px 60px, rgba(255, 255, 255, 0.7) 50%, transparent 51%), radial-gradient(2px 2px at 210px 110px, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
        animation: snow-fall-side 25s linear infinite;
        opacity: 0.6;
    }

@keyframes snow-fall {
    from {
        transform: translate3d(0, -100px, 0);
    }

    to {
        transform: translate3d(0, 100px, 0);
    }
}

@keyframes snow-fall-side {
    from {
        transform: translate3d(-50px, -100px, 0);
    }

    to {
        transform: translate3d(50px, 100px, 0);
    }
}

/* --------- DECOR DƯỚI CHÂN TRANG (CÂY THÔNG, HỘP QUÀ…) --------- */
.noel-bottom-decor {
    position: fixed; /* luôn dính dưới viewport */
    left: 0;
    bottom: 0;
    width: 100%;
    height:220px;
    z-index: 10000;
    /* nền tuyết ở chân trang */
}

    /* bạn có thể chèn thêm hình PNG trong pseudo elements */
    .noel-bottom-decor::before,
    .noel-bottom-decor::after {
        content: "";
        position: absolute;
        bottom: 0px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* ví dụ: cây thông bên trái */
    .noel-bottom-decor::before {
        left: 0%;
        width: 150px;
        height: 150px;
        /* thay link này bằng hình cây thông Noel của bạn */
        background-image: url(/Content/Display/images/bottom-left.webp);
        z-index: 100;
    }

    /* ví dụ: ông già Noel hoặc hộp quà bên phải */
    .noel-bottom-decor::after {
        left: 10%;
        width: 150px;
        height: 150px;
        z-index: 100;
        /* thay link này bằng hình Noel thật của bạn */
        background-image: url(/Content/Display/images/bottom-right.webp);
    }

/* --------- GIỮ NỘI DUNG KHÔNG BỊ CHE --------- */
.home-wrapper {
    position: relative;
    z-index: 10;
    /* chừa chỗ top cho dây đèn và bottom cho chân tuyết */
    padding-top: 50px;
    padding-bottom: 140px;
}


/* ==============================
   QUẢNG CÁO 2 BÊN KIỂU DMX
============================== */
.tottoplabel {
    position: fixed;
    top: 10px; /* cách trên 1 đoạn để không đè logo + menu */
    z-index: 9999;
    display: block;
}

    .tottoplabel img {
        display: block;
        width: 140px; /* chiều rộng banner – chỉnh theo ảnh của bạn */
        height: auto;
    }

    /* BÊN TRÁI */
    .tottoplabel.label-left {
        left: 0; /* dính sát mép trái màn hình */
    }

    /* BÊN PHẢI */
    .tottoplabel.label-right {
        right: 0; /* dính sát mép phải màn hình */
    }

    /* HIỆU ỨNG HOVER NHẸ CHO ĐẸP */
    .tottoplabel:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease, filter 0.2s ease;
        filter: brightness(1.05);
    }

/* ẨN TRÊN MÀN HÌNH NHỎ (MOBILE/TABLET) */
@media (max-width: 1200px) {
    .tottoplabel {
        display: none;
    }
}