/* ==========================================
   📟 Điện thoại mini (rất nhỏ) < 360px
   VD: Android đời cũ, máy siêu nhỏ, điện thoại ảo
   → Ít gặp, nhưng nên đảm bảo không vỡ layout
========================================== */
@media (max-width: 359.98px) {
    /* CSS cho điện thoại rất nhỏ */
    .cardFilter[class^="col-"] {
        padding: 0.25rem !important;
    }

    .cardFilter .row, .cardHome .row {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

        .cardFilter .row [class^="col-"], .cardHome .row [class^="col-"] {
            padding: 0.25rem !important;
        }

    .card {
        border: 1px solid #e7eaf3cc !important;
    }

    .cardFilter .card .starts, .cardHome .card .starts {
        text-align: center !important;
    }

        .cardFilter .card .starts .green-lighter {
            font-size: 10px !important;
        }

    .card .card-img-top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        max-height: 8rem !important;
        min-height: 8rem !important;
    }

    .card .AminiMore {
        display: none;
        border: unset;
    }

    .custom-tooltip::after,
    .custom-tooltip::before {
        display: none !important;
    }

    .tooltip-container::after,
    .tooltip-container::before {
        display: none !important;
    }

    .card .giagiam {
        display: none;
    }

    .cardFilter .priceCard .ViewPrice, .cardHome .priceCard .ViewPrice {
        font-size: 15px !important;
        font-weight: 600;
    }

    .cardFilter .khuyenmai {
        padding: 0.3rem !important;
        font-size: 10px !important;
    }
    .u-slick__arrow-classic-inner--left, .u-slick__arrow-classic-inner--right {
        opacity: 1 !important;
    }
    .notiInCard.p-3 {
        padding: 0.25rem !important;
    }

    .notiInCard.d-flex {
        display: flex !important;
        flex-direction: column !important;
    }

    #LoadPostClick .notiInCardHeart.pr-3, #LoadPostClick .notiInCardHeart.pt-3 {
        padding-right: 2rem !important;
        padding-top: 0.25rem !important;
    }

    .notiInCardHeart.pr-3, .notiInCardHeart.pt-3 {
        padding-right: 0.25rem !important;
        padding-top: 0.25rem !important;
    }
    .carRowList .carRowList_body {
        padding: 0.5rem 0.75rem !important
    }

        .carRowList .carRowList_body .carRowList_body_price.py-4 {
            padding-bottom: 0.5rem !important;
            padding-top: 0.5rem !important;
        }

    .carRowList[class^="col-"] {
        margin-bottom: 0.5rem !important;
        padding: 0px 0.5rem !important;
    }

    .border-center-rigth {
        border: unset !important
    }

    #loadFilter .card.carRowList {
        border: 1px solid #ff5722 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }

    .priceCardList--highlight {
        border: 1px solid #ff5722 !important;
    }
    .intro_card.py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .intro_card-text {
        font-size: 40px !important;
    }
    .tab-trending_card {
        display: flex !important;
        justify-content: center !important;
    }
}

/* ==========================================
   📱 Điện thoại phổ biến (nhỏ) ≥360px và <576px
   VD: iPhone SE, iPhone 6/7/8, Android tầm thấp
   → Chiếm phần lớn người dùng mobile phổ thông
========================================== */
@media (min-width: 360px) and (max-width: 575.98px) {
    .cardFilter[class^="col-"] {
        padding: 0.25rem !important;
    }

    .cardFilter .row, .cardHome .row {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

        .cardFilter .row [class^="col-"], .cardHome .row [class^="col-"] {
            padding: 0.25rem !important;
        }

    .card {
        border: 1px solid #e7eaf3cc !important;
    }

    .cardFilter .card .starts, .cardHome .card .starts {
        text-align: center !important;
    }

    .card .card-img-top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        max-height: 8rem !important;
        min-height: 8rem !important;
    }

    .card .AminiMore {
        display: none;
        border: unset;
    }

    .custom-tooltip::after,
    .custom-tooltip::before {
        display: none !important;
    }

    .tooltip-container::after,
    .tooltip-container::before {
        display: none !important;
    }
    
    /* .card .giagiam {
        display: none;
    }*/
    .cardFilter .priceCard .ViewPrice, .cardHome .priceCard .ViewPrice {
        font-size: 15px !important;
        font-weight: 600;
    }

    .cardFilter .khuyenmai, #loadTrending .khuyenmai {
        padding: 0.3rem !important;
    }
    .notiInCard.p-3 {
        padding: 0.25rem !important;
    }
    .notiInCard.d-flex {
        display: flex !important;
        flex-direction: column !important;
    }
    #LoadPostClick .notiInCardHeart.pr-3, #LoadPostClick .notiInCardHeart.pt-3 {
        padding-right: 2rem !important;
        padding-top: 0.25rem !important;
    }
    .notiInCardHeart.pr-3, .notiInCardHeart.pt-3 {
        padding-right: 0.25rem !important;
        padding-top: 0.25rem !important;
    }
    #basicsAccordion1 button.p-3 {
        padding: 0.3rem !important;
    }
    .navbar-brand.u-header__navbar-brand-default {
        display: flex !important;
        justify-content: center !important;
    }
    .slogan-small {
        left: 7rem !important;
    }
    .u-slick__arrow-classic-inner--left, .u-slick__arrow-classic-inner--right {
        opacity: 1 !important;
    }
    .CardListThongTin.m-4 {
        margin: 0rem !important;
    }
    .CardListThongTin_diachi.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    .CardListThongTin .tienich.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    .CardListThongTin_diachi .d-flex.flex-wrap.flex-xl-nowrap {
        flex-direction: row !important;
        -ms-flex-wrap: unset !important;
        flex-wrap: unset !important;
    }
    .carRowList .carRowList_body {
        padding: 0.5rem 0.75rem !important
    }
        .carRowList .carRowList_body .carRowList_body_price.py-4 {
            padding-bottom: 0.5rem !important;
            padding-top: 0.5rem !important;
        }
    .carRowList[class^="col-"] {
        margin-bottom: 0.5rem !important;
        padding: 0px 0.5rem !important;
    }
    .border-center-rigth{
        border: unset !important
    }
    #loadFilter .card.carRowList {
        border: 1px solid #ff5722 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }
    .priceCardList--highlight {
        border: 1px solid #ff5722 !important;
    }
    .intro_card.py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .intro_card-text {
        font-size: 40px !important;
    }
    .tab-trending_card {
        display: flex !important;
        justify-content: center !important;
    }
}

/* ==========================================
   📱 Điện thoại lớn ≥576px và <768px
   VD: iPhone Plus/Pro Max, Android màn to
   → Phổ biến với các máy hiện đại, cao cấp
========================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* CSS cho điện thoại lớn */
    .slogan-small {
        left: 180px !important;
    }
    .flaticon-user {
        color: #006ce4
    }
}

/* ==========================================
   💊 Máy tính bảng (tablet) ≥768px và <992px
   VD: iPad, Samsung Tab, Kindle Fire
   → Thiết bị trung gian giữa điện thoại và laptop
========================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* CSS cho tablet */
    .custom-tooltip::after,
    .custom-tooltip::before {
        display: none !important;
    }

    .tooltip-container::after,
    .tooltip-container::before {
        display: none !important;
    }
    .flaticon-user {
        color: #006ce4
    }
}

/* ==========================================
   💻 Laptop nhỏ (notebook) ≥992px và <1200px
   VD: MacBook Air, laptop học sinh – sinh viên
   → Thường là breakpoint cho layout 2 cột
========================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* CSS cho laptop nhỏ */
    .flaticon-user {
        color: #006ce4
    }
}

/* ==========================================
   🖥️ Desktop chuẩn ≥1200px và <1400px
   VD: Desktop văn phòng, màn hình 1080p
   → Breakpoint phổ biến cho layout rộng
========================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* CSS cho desktop thông thường */
    
}

/* ==========================================
   🖥️⚡ Desktop lớn ≥1400px và <1600px
   VD: Màn hình 2K, ultrawide nhỏ
   → Thường dùng cho người thiết kế, chơi game
========================================== */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    /* CSS cho desktop lớn */
    #content .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
        #content .container-fluid .row {
            margin-left: -12px !important;
            margin-right: -12px !important;
        }
            #content .container-fluid .row [class^="col-"] {
                padding: 0.25rem !important;
            }
}

/* ==========================================
   🖥️🔲 Màn hình siêu lớn ≥1600px
   VD: Màn hình 4K, ultrawide lớn, đa màn hình
   → Ít gặp nhưng cần scale tốt, không quá trống
========================================== */
@media (min-width: 1600px) {
    /* CSS cho màn hình siêu lớn */
    #content .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

        #content .container-fluid .row {
            margin-left: -5px !important;
            margin-right: -5px !important;
        }

            #content .container-fluid .row [class^="col-"] {
                padding: 0.6rem !important
            }
}