/* =====================================================================
   layout.css - Toàn bộ CSS trước đây nằm inline trong _Layout.cshtml.
   Gom lại thành file riêng để trình duyệt cache được và _Layout gọn hơn.

   THỨ TỰ QUAN TRỌNG: file này phải được nạp SAU site.min.css. Sáu
   selector dưới đây cũng có trong site.css (#chuong-trinh-km,
   #dataproduct, .btnSearch, .danh-muc-home, .item-product-inlist,
   .search-control) và trước đây khối inline nằm sau thẻ link
   site.min.css nên nó thắng. Đổi thứ tự là vỡ giao diện.

   Nội dung giữ nguyên 100% so với bản inline, chỉ đổi @media (cú pháp
   escape của Razor) thành @media cho đúng CSS thuần.
   ===================================================================== */

/* ---------- Nút mua nhanh / mua sỉ bám phải (chỉ desktop, mobile dùng thanh đáy) ----------
   Xếp chồng phía trên nút liên hệ tròn (.btn-send, bottom:50px). */
        .mua-nhanh,
        .mua-nhanh-1 {
            position: fixed;
            right: 16px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 76px;
            padding: 10px 6px;
            border-radius: 12px;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.25;
            text-decoration: none;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
            transition: transform .15s, box-shadow .15s;
        }

            .mua-nhanh:hover,
            .mua-nhanh-1:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
                text-decoration: none;
            }

        /* Mua nhanh: nút chính, xanh thương hiệu */
        .mua-nhanh {
            bottom: 118px;
            background: #11b22d;
            border: 1px solid #0e9425;
            color: #fff;
        }

            .mua-nhanh:hover {
                color: #fff;
            }

        /* Mua Sỉ: nút phụ, trắng viền cam (màu nhận diện kênh sỉ) */
        .mua-nhanh-1 {
            bottom: 196px;
            background: #fff;
            border: 1px solid #f0b269;
            color: #e07800;
        }

            .mua-nhanh-1:hover {
                color: #e07800;
                background: #fff8f0;
            }

            .mua-nhanh-1 small,
            .mua-nhanh small {
                font-size: 9px;
                font-weight: 400;
                opacity: .85;
            }

/* ---------- Header: menu, ô tìm kiếm ---------- */
                            #menuBeforeSearch {
                                padding: 0;
                                margin: 0;
                                display: inline-block;
                                width: 150px;
                            }

                                #menuBeforeSearch svg {
                                    margin-right: 5px;
                                    opacity: 0.5;
                                }

                                #menuBeforeSearch ul li svg {
                                    position: relative;
                                    top: -3px;
                                }

                                #menuBeforeSearch a {
                                    display: block;
                                    padding: 8px;
                                    background: #fff;
                                    color: #333;
                                    position: relative
                                }

                                #menuBeforeSearch span {
                                    display: block;
                                    padding: 8px;
                                    background: #fff;
                                    color: #333;
                                    cursor: pointer;
                                    position: relative
                                }

                                    #menuBeforeSearch span:hover {
                                        background: #f3f3f3;
                                    }

                                #menuBeforeSearch a:hover {
                                    background: #f3f3f3;
                                }

                                #menuBeforeSearch > li > span {
                                    display: block;
                                    padding: 11px;
                                    background: #fff;
                                    color: #333;
                                    border-radius: 10px 0px 0px 10px;
                                    border-right: 1px solid #f3f3f3;
                                }

                                #menuBeforeSearch li {
                                    list-style: none;
                                    position: relative;
                                    border-bottom: 1px solid #f3f3f3;
                                }

                                    #menuBeforeSearch li:last-child {
                                        border-bottom: 0px solid #f3f3f3;
                                    }

                                #menuBeforeSearch > li {
                                    list-style: none;
                                    display: block;
                                    position: relative;
                                }

                                    #menuBeforeSearch > li > ul {
                                        padding: 0;
                                        margin: 0;
                                        display: none;
                                        position: absolute;
                                        left: 0;
                                        right: 0;
                                        z-index: 999;
                                        top: 80%;
                                    }

                                    #menuBeforeSearch > li:hover > ul {
                                        display: block;
                                    }

                                    #menuBeforeSearch > li > ul li > ul {
                                        padding: 0;
                                        margin: 0;
                                        display: none;
                                        position: absolute;
                                        left: 100%;
                                        width: 200px;
                                        z-index: 999;
                                        top: 0;
                                    }

                                    #menuBeforeSearch > li > ul > li:hover > ul {
                                        display: block;
                                    }

                            #menuBeforeSearch {
                                margin-right: -4px;
                            }

                            .box-s {
                                display: inline-block;
                                width: calc(100% - 150px);
                            }

                            #menuBeforeSearch span svg.bi.bi-caret-right-fill {
                                position: absolute;
                                right: 5px;
                                top: 10px;
                                color: #9c9c9c;
                                width: 10px;
                            }

                            #selectedMenu {
                                position: relative;
                            }

                                #selectedMenu svg.bi.bi-caret-down-fill {
                                    position: absolute;
                                    right: 5px;
                                    top: 13px;
                                    color: #9c9c9c;
                                    width: 12px;
                                }

/* ---------- Layout chung, sản phẩm, mobile ---------- */
        div#accChuyenKhoan {
            background: #f3f3f3;
            margin-top: 10px;
        }

        h2#flush-headingOne {
            padding: 0px 10px;
        }

        #dieu-khoan a {
            color: #236eca
        }

        .sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9
        }

        .box-product-option {
            background: #f3f3f3;
            padding: 10px 20px;
            margin-bottom: 10px;
        }

            .box-product-option ul {
                padding: 0;
                margin: 0;
            }

                .box-product-option ul li {
                    padding: 0;
                    margin-right: 10px;
                    display: inline-block;
                    list-style: none;
                    white-space: nowrap;
                }

                    .box-product-option ul li span {
                        display: block;
                        padding: 5px 20px;
                        background: #fff;
                        border-radius: 10px;
                        white-space: nowrap;
                        margin-bottom: 10px;
                    }

                        .box-product-option ul li span.active {
                            background: #fd4f47;
                            color: #fff
                        }

                        .box-product-option ul li span:hover {
                            background: #fd4f47;
                            color: #fff;
                            cursor: pointer
                        }

        select#ddlSort {
            padding: 5px 20px;
            border: none;
            border-radius: 10px;
            position: relative;
            top: 0px;
            font-size: 14px;
        }

            select#ddlSort * {
                border-radius: 15px;
                padding: 10px;
            }

        #loading {
            display: none !important;
            background-color: transparent !important;
            position: absolute !important;
            z-index: 999;
            top: -5px;
        }

            #loading.active {
                display: block !important;
            }

        .selectFilter {
            padding: 0;
            margin: 0;
        }

            .selectFilter li {
                display: inline-block;
                position: relative;
                padding: 10px 10px;
                border: 1px solid #f3f3f3;
                margin: 3px;
            }

                .selectFilter li span {
                    display: inline-block;
                    position: absolute;
                    padding: 10px;
                    right: 0;
                    top: 10px;
                }

        #selectFilter {
            padding: 0;
            position: relative;
            margin: 0;
        }

            #selectFilter li {
                list-style: none;
                display: inline-block;
                position: relative;
                padding: 5px 11px;
                background: #fff6da;
                border-radius: 10px;
                padding-right: 35px;
                margin-right: 10px;
                margin-bottom: 5px;
            }

                #selectFilter li span {
                    display: block;
                    position: absolute;
                    width: 23px;
                    height: 23px;
                    text-align: center;
                    padding: 3px;
                    color: #ec8383;
                    border: 1px solid #dec780;
                    border-radius: 50%;
                    top: 4px;
                    right: 2px;
                    font-size: .8em;
                    background: #fff;
                    cursor: pointer;
                }

        .title-category {
            font-size: 17px;
            padding: 10px 10px;
        }

        .danh-muc-categories ul li a {
            display: block;
            padding: 10px 20px;
            font-size: 13px;
        }

        .danh-muc-tac-gia {
            padding: 0;
            margin: 0;
        }

            .danh-muc-tac-gia li {
                list-style: none
            }

                .danh-muc-tac-gia li > span {
                    padding: 10px;
                    cursor: pointer;
                    display: block;
                }

                .danh-muc-tac-gia li.nav-item.active {
                    background: #fff6da;
                }

        .danh-muc-categories li.nav-item.active {
            background: #fff6da;
        }

        .danh-muc-categories {
            padding: 0;
            margin: 0;
            margin-bottom: 10px;
        }

            .danh-muc-categories > ul {
                padding-left: 0px;
            }

                .danh-muc-categories > ul ul {
                    padding-left: 20px;
                }

            .danh-muc-categories li {
                list-style: none
            }

                .danh-muc-categories li > span {
                    padding: 10px;
                    cursor: pointer;
                    display: block;
                    font-size: 13px;
                    position: relative;
                }

                .danh-muc-categories li:hover {
                    background: #fff6da;
                }

                .danh-muc-categories li > span small {
                    opacity: 0.4;
                    display: inline-block;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }

        .item-product-inlist h6 {
            font-size: 14px;
            padding: 10px;
            height: 45px;
            margin: 0;
        }

        .price {
            padding: 10px 9px;
            background: #fafbfd;
        }

            .price b {
                color: #ff6a00;
                font-size: 20px;
            }

        .info-book {
            padding: 0;
            margin: 0;
        }

            .info-book li {
                padding: 12px 0px;
                width: 50%;
                display: inline-block;
            }

        .title-product {
            font-size: 24px;
            padding: 10px 0px;
        }

        .details-book tr:nth-child(2n) {
            background: #f3f3f3;
        }

        .details-book td {
            border: none;
        }

        .details-book tr {
            border: none;
        }

        #btnCloseSuperbox {
            display: none;
            text-align: center;
            padding: 5px;
            background: #ffeaea;
            color: red;
        }

        #btnCloseCategorySuperBox {
            display: none;
            text-align: center;
            padding: 5px;
            background: #ffeaea;
            color: red;
        }

        .price-item {
            font-weight: bold;
            display: inline-block;
            color: #fd4f47;
            font-size: 24px;
        }

        .product-item-info {
            display: block
        }

        .item-product-inlist .button-inlist {
            padding: 0;
            margin: 0;
            text-align: center;
        }

        .to-favorite {
            background: #f3f3f3;
        }

        .to-cart {
            background: #d6e6fd
        }

        .to-buy {
            background: #ffcce4;
        }

        /* Tab danh mục ở trang chủ: dải chip bo tròn, cuộn ngang khi tràn.
           Ẩn thanh cuộn (vẫn vuốt được) và bám snap cho gọn trên mobile. */
        #homeTab {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            margin: 0;
            padding: 2px 0 12px;
            background: transparent;
            border: none;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }

            #homeTab::-webkit-scrollbar {
                display: none; /* Chrome/Safari */
            }

            #homeTab .nav-item {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }

            #homeTab .nav-link {
                white-space: nowrap;
                padding: 8px 16px;
                border: 1px solid #e6e8eb;
                border-radius: 999px;
                background: #fff;
                color: #4a4f57;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.2;
                transition: background .2s, color .2s, border-color .2s;
            }

                #homeTab .nav-link:hover {
                    border-color: #11b22d;
                    color: #11b22d;
                }

                #homeTab .nav-link.active {
                    border-color: #11b22d;
                    background: #11b22d;
                    color: #fff;
                    box-shadow: 0 2px 8px rgba(17,178,45,.35);
                }

                #homeTab .nav-link:hover {
                    color: #495057;
                    background-color: #fff;
                    border-color: #dee2e6 #dee2e6 #fff;
                    border: none;
                    background: #f54c32;
                    color: #fff;
                    border-radius: 0px;
                    border: none
                }

        /* Lưới sản phẩm trong từng tab trang chủ (tab do admin cấu hình nên
           không còn id cố định, style bám theo class .home-product-grid).
           #dataProductHome vẫn giữ vì các trang Đã xem / Yêu thích / So sánh dùng chung id này. */
        #dataProductHome .col,
        .home-product-grid .col {
            padding: 3px;
        }

        #dataproduct .col-md-3 {
            padding: 5px;
        }

        button.btn.btn-success {
            border-radius: 20px;
        }

        #listCareer {
            padding: 0;
        }

            #listCareer li {
                padding: 10px 15px;
                list-style: none;
                display: inline-block;
                width: 200px;
            }

        #listService {
            padding: 0;
        }

        .form-group {
            padding: 10px;
        }

        .form-group {
            padding: 10px;
        }

            .form-group label {
                display: inline-block;
                padding: 3px 0px;
            }

        .form-control {
            border-radius: 10px;
            border-color: #f3f3f3;
        }

        #listService li {
            padding: 5px;
            list-style: none;
            display: inline-block;
        }

        #logoLoading {
            display: none;
            position: fixed;
            z-index: 999;
            color: #fff;
            text-align: center;
            padding: 5px;
            background: #008848;
            left: 0;
            right: 0;
        }

        ul.menu-member-box {
            padding: 0;
            margin: 0;
        }

        .menu-member-box li {
            display: inline-block;
            list-style: none;
        }

            .menu-member-box li a {
                display: block;
                padding: 5px 15px;
            }

                .menu-member-box li a.active {
                    background: #59daf5;
                    color: #fff;
                }

        @media only screen and (max-width: 700px) {
            #dataProductHome .col-md-3,
            .home-product-grid .col-md-3 {
                width: 50%;
                padding: 3px;
            }

            #logoLoading.show {
                display: block;
            }

            #dataProductHome .col,
            .home-product-grid .col {
                padding: 1px;
            }

            #dataproduct .col-md-3 {
                padding: 1px;
            }

            .info-book li {
                padding: 8px 0;
                width: 100%;
                display: inline-block;
                vertical-align: top;
            }

            .item-product-inlist .button-inlist {
                display: flex;
            }

            .item-product-inlist button.btn {
                border-radius: 0px;
            }

            #categorySuperBox {
                position: fixed;
                top: 0;
                bottom: 0;
                left: -100%;
                right: 100%;
                transition: .3s all;
                background: #fff;
                z-index: 999;
                overflow: scroll;
            }

                #categorySuperBox.active {
                    left: 0;
                    right: 0;
                }

            #filterSuperBox {
                position: fixed;
                top: 0;
                bottom: 0;
                left: -100%;
                right: 100%;
                transition: .3s all;
                background: #fff;
                z-index: 999;
                overflow: scroll;
            }

                #filterSuperBox.active {
                    left: 0;
                    right: 0;
                }

            #btnCloseSuperbox {
                display: block;
            }

            #btnCloseCategorySuperBox {
                display: block;
            }

            .menu-product {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
            }

                .menu-product > ul {
                    padding: 0;
                    margin: 0;
                    position: relative;
                    display: flex;
                    background: #fff;
                }

                    .menu-product > ul > li {
                        display: inline-block;
                        list-style: none;
                        flex: 1 1 0;
                        min-width: 0;
                    }

                        .menu-product > ul > li > a {
                            display: block;
                            padding: 10px 3px;
                            text-align: center;
                            font-size: 12px;
                        }

                    .menu-product > ul ul {
                        padding: 0;
                        margin: 0;
                        position: absolute;
                        bottom: 100px;
                        left: 0;
                        right: 0;
                    }

                        .menu-product > ul ul > li {
                            display: block;
                            list-style: none;
                        }

                            .menu-product > ul ul > li > a {
                                display: block;
                                padding: 3px;
                                text-align: left;
                                font-size: 12px;
                            }
        }

        .btnSearch {
            position: absolute;
            right: 6px;
            background: #fff;
            border: #fff;
            top: 8px;
            padding: 8px;
        }

        .search-control {
            width: 100%;
            padding: 10px;
            display: block;
            background: #fff;
            margin-top: 6px;
            border: 1px solid #fff;
            border-radius: 0px 8px 8px 0px;
        }

        article img {
            max-width: 100%;
            height: auto !important;
        }

        .colfoot li {
            list-style: none;
            padding: 5px;
        }

        #chuong-trinh-km {
            min-height: 15px;
        }

        div#dataProductHome,
        .home-product-grid {
            margin-top: 15px;
        }

        .danh-muc-home ul li a {
            padding: 14px 15px;
            font-size: 12px;
        }

        .price-item {
            font-size: 18px;
        }

            .price-item small {
                font-size: 70%;
            }

/* =====================================================================
   Thẻ sản phẩm trong danh sách - thiết kế lại
   ---------------------------------------------------------------------
   - Nút thích tách khỏi hàng nút, nổi ở góc trên ảnh.
   - Còn 2 nút hành động: Thêm vào giỏ + Mua ngay, chia đôi đều nhau.
   - Tên sản phẩm cắt 2 dòng thay vì ép height cố định (tên dài bị cụt).
   - Giá xếp 2 dòng: giá sỉ nổi bật, giá lẻ phụ ở dưới.

   Đặt cuối layout.css để đè bản cũ trong site.css (nạp trước). Các rule
   dùng selector con .item-product-inlist ... nên thắng cả rule trong
   @media của phần trên nhờ độ ưu tiên cao hơn.
   ===================================================================== */

.item-product-inlist {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 8px 10px;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    transition: box-shadow .2s, border-color .2s;
}

    .item-product-inlist:hover {
        border-color: #dfe3e8;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }

    .item-product-inlist .product-item-info {
        display: block;
        flex: 1 1 auto;
        color: inherit;
        text-decoration: none;
    }

    .item-product-inlist .media-box {
        border-radius: 8px;
        background: #f6f7f9;
    }

    .item-product-inlist h6 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: auto;
        min-height: 35px;
        margin: 8px 0 4px;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        color: #2b2b2b;
    }

/* ---------- Nút thích nổi ở góc ảnh ---------- */
.btn-fav-float {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #9aa0a6;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
    cursor: pointer;
    transition: color .2s, transform .12s;
}

    .btn-fav-float:hover,
    .btn-fav-float:focus {
        color: #fd4f47;
    }

    .btn-fav-float:active {
        transform: scale(.88);
    }

/* ---------- Giá: sỉ nổi bật, lẻ phụ ---------- */
.item-product-inlist .price-item {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
}

    .item-product-inlist .price-item .si {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #fd4f47;
    }

    .item-product-inlist .price-item .le {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: #8a8f98;
    }

    .item-product-inlist .price-item small {
        font-size: 11px;
        font-weight: 400;
        color: #9aa0a6;
    }

    /* dấu "/" ngăn cách chỉ hợp khi 2 giá nằm cùng hàng */
    .item-product-inlist .price-item .slag {
        display: none;
    }

/* ---------- 2 nút hành động ---------- */
.item-product-inlist .button-inlist {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    text-align: center;
}

    .item-product-inlist .button-inlist .btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        border: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }

        .item-product-inlist .button-inlist .btn:active {
            transform: translateY(1px);
        }

    .item-product-inlist .to-cart {
        background: #eef4ff;
        color: #1b5fbf;
    }

    .item-product-inlist .to-buy {
        background: #11b22d;
        color: #fff;
    }

@media only screen and (max-width: 600px) {
    .item-product-inlist {
        padding: 6px 6px 8px;
        border-radius: 10px;
    }

        .item-product-inlist h6 {
            min-height: 32px;
            margin: 6px 0 3px;
            font-size: 12px;
        }

        .item-product-inlist .price-item .si {
            font-size: 14px;
        }

        .item-product-inlist .price-item .le {
            font-size: 11px;
        }

        .item-product-inlist .button-inlist {
            margin-top: 8px;
            gap: 4px;
        }

            .item-product-inlist .button-inlist .btn {
                gap: 3px;
                padding: 7px 2px;
                font-size: 11px;
            }

                .item-product-inlist .button-inlist .btn svg {
                    width: 13px;
                    height: 13px;
                }

    .btn-fav-float {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
}

/* Biến thể "bỏ khỏi yêu thích" ở trang /favourite */
.btn-fav-float.is-remove {
    color: #e53935;
}

    .btn-fav-float.is-remove:hover,
    .btn-fav-float.is-remove:focus {
        color: #b71c1c;
    }

/* Khi admin tắt hiện giá sỉ, span .si không render -> .le thành giá duy nhất:
   cho nó cỡ/màu của giá chính và ẩn nhãn "Lẻ" (không còn gì để phân biệt) */
.item-product-inlist .price-item .le:first-child {
    font-size: 15px;
    font-weight: 700;
    color: #fd4f47;
}

    .item-product-inlist .price-item .le:first-child small {
        display: none;
    }