.list-product-select {
			height: 75vh;
			overflow-y: scroll;
		}
		.list-product-select .p-item {
			border-bottom: 1px solid #e1e1e1;
			padding: 25px 20px;
			position: relative;
		}

.list-product-select .info{
	max-width: 90%;
    word-wrap: break-word;
}
		/* .list-product-select .p-item .info {
			padding: 0 170px 0 0;
			margin-left: 140px;
			font-size: 14px;
		} */


		.list-product-select .p-item .p-img {
			float: left;
			width: 130px;
			padding: 0 !important;
		}

		/* .popup-main_filter {
			padding: 10px;
			background: #fff;
			border-right: 1px solid #e1e1e1;
		} */

		
		
		.popup-main_content {
			background-color: #fff;
		}

		/* .modal-content {
			width: 1100px;
			max-width: 100vw;
			background-color: #fff;
			position: absolute;
			left: 50%;
			top: 25px;
			transform: translateX(-50%);
			overflow: hidden;
			max-height: calc(100vh - 70px);
		} */

	/* 	form .input-search {
			line-height: 36px;
			width: 100%;
			border-radius: 2px;
			outline: none;
			padding: 0 10px;
			border: none;
			height: 36px;
		} */

	/* 	form .btn-search {
			position: absolute;
			right: 0;
			top: 0;
			color: #ec1b23;
			font-size: 19px;
			padding: 6px 10px 2px 10px;
		} */

		.modal-header {
			background-color: #243a76;
			padding: 8px 10px;
		}

		.modal-header h4 {
			color: #fff;
			font-weight: bold;
			/* font-size: 16px; */
			float: left; 
			/* padding: 6px 0; */
		}


		.modal-header .close-popup {
			position: absolute;
			right: 0;
			top: 0;
			color: #fff;
			font-size: 26.4px;
			padding: 12px 10px;
			cursor: pointer;
		}

		/* .modal-header form {
			float: right;
			width: 655px;
			margin-top: 5px;
			margin-right: 80px;
			position: relative;
		} */


		.list-product-select::-webkit-scrollbar {
			width: 6px;
			background-color: #F5F5F5;
		}

		.list-product-select::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 3px rgb(0 0 0 / 30%);
			background-color: #233976;
		}


		.p-item .btn-buy {
			position: absolute;
			right: 19px;
			top: 25px;
			display: inline-block;
			width: 72px;
			background: #2d3877;
			color: #fff;
			border-radius: 3px;
			cursor: pointer;
			padding: 5px 20px;
			opacity: 1;
			font-size: 24px;
			text-align: center;
		}


		.canh-bao-het-hang {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			top: 55px;
			right: 0;
			white-space: nowrap;
			background: #222;
			color: #fff;
			padding: 8px 12px !important;
			border-radius: 5px;
			font-size: 14px;
			text-align: left;
		}

		.canh-bao-het-hang:before {
			content: "";
			position: absolute;
			top: -16px;
			right: 27px;
			border-width: 8px;
			border-style: solid;
			border-color: transparent transparent #222;
		}

		.canh-bao-het-hang, .canh-bao-het-hang:before {
			-webkit-transform: translateY(40%);
			transform: translateY(40%);
			-moz-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			-webkit-transition: all .2s ease-out;
			transition: all .2s ease-out;
		}


		.sp-het-hang:hover .canh-bao-het-hang,
		.sp-het-hang:hover .canh-bao-het-hang:before {
			opacity: 1;
			visibility: visible;
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}

		.list-product-select .p-item .btn-buy, .show-popup_select span-last.open-selection {
			position: absolute;
			right: 10px;
			top: 17px;
			display: inline-block;
			width: 50px;
			height: 40px;
			line-height: 30px;
			background: #243a76;
			color: #fff;
			border-radius: 3px;
			font-size: 24px;
			text-align: center;
			padding: 5px;
		}
		.list-product-select .p-item .btn-buy.sp-het-hang {
			background: #ec1b23;
		}

		

		.canh-bao-het-hang, .canh-bao-het-hang:before {
			-webkit-transform: translateY(40%);
			transform: translateY(40%);
			-moz-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			-webkit-transition: all .2s ease-out;
			transition: all .2s ease-out;
		}

		.hiden
		{    
			visibility: hidden;
		}

 .btn-select-device {
    padding: 5px 10px;
    color: #fff;
    border-radius: 3px;
    background: #122C51;
    font-size: 12px;
    font-weight: bold;
}



@media (min-width: 768px){

	.col-md-2 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
	}
}
.product-selected .number {
    width: 100px;
    border-radius: 20px;
    border: 1px solid #dcdcdc;
    text-align: center;
    background: #ececec;
}
/* img{
	max-width: 100%;
} */

.product-selected .btn.btn-reselect {
    background: #FF9F00;
}

.product-selected .btn.btn-delete {
    background: #E02020;
}

.shopping-cart-page .price, .block-build-config .price {
    color: #E1291E;
}

.product-selected .number input {
    width: 50px;
    border: none;
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    outline: none;
    text-align: center;
    background: #fff;
    padding: 3px 0 1px 0;
}

 .price {
    color: #E1291E;
}

.btn-rebuild {
    background: linear-gradient(
90deg
, rgba(224,32,32,1) 0%, rgba(255,202,0,1) 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    cursor: pointer;
}


 .item-drive {
    padding: 0 8px;
    border-bottom: 1px solid #e1e1e1;
}

.product-selected .btn {
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
    width: 77px;
    border-radius: 3px;
    display: block;
}


.list-product-select .p-item .p-img img {
    max-width: 95%;
    position: relative;
}

.p-item img {
    float: left;
    width: 100px;
    margin-right: 4px;
}

	.product-selected .number .fa {
    font-size: 11px;
    padding: 5px 3px;
    cursor: pointer;
}
	input#product {
    width: 79%;
    height: 35px;
}

.gr-filter.brand li {
	display: inline-block;
	margin-left: 10px;
	}

span.btn-search{
	/* float: right; */
	margin-left: 5px;
	padding: 12px;
}

.imgbanner img {
    max-width: 100%;
}
.fa-bolt {
     color: #ffc107;
}
@media only screen and (min-width: 1070px) {
	.tit{
		float: left;
		width: 25%;
		/* overflow-x: scroll; */
	}
	.popup-main_content.product {
	float: right;
	width: 70%;
	}

	.popup-main_filter.tit li {
    display: block;
    padding: 5px;
}
}

@media only screen and (max-width: 760px) {

.fa-check-circle {
    position: relative;
    right: 60px;
}
p.price.price.font-weight-bold {
	display: none;
}
.fa-bolt {
    position: relative;
     right: 60px;
     color: #006ef7;
}
	.tit{
		
		overflow-x: scroll;
	}
	.pd10 {
		padding: 10px;
	}
	.gr-filter{
		display: none;
	}

	.list-product-select .p-item .btn-buy, .show-popup_select span-last.open-selection {
	    /* position: relative; */
	    right: 10px;
	    top: 130px;
	    display: inline-block;
	    width: 50px;
	    height: 40px;
	    line-height: 30px;
	    background: #243a76;
	    color: #fff;
	    border-radius: 3px;
	    font-size: 24px;
	    text-align: center;
	    padding: 5px;
	}
.col-md-2.remove {
    position: relative;
    top: -90px;
    left: 200px;
    height: 10px;
    width: 10px;
}
.product-selected.row {
    height: 200px;
}
.product-selected .number {
    left: 50px;
    
}
.col-md-2.col-4.quantity {
    position: relative;
    left: 70px;
    top: -10px;
}
span.total.price.font-weight-bold {
    left: 25%;
    position: relative;
}

.col-md-2.col-3.pdx5 {
    position: relative;
    /* left: -100px;
    top: 40px; */
    width: 70px;
}
p.name.font-weight-bold {
    height: 70px;
    width: 160px;
    position: relative;
    overflow: hidden;
    left: 34px;
}
img.bp-product-image {
    width: 100px;
    height: 75px;
    cursor: pointer;
   
}

span.btn-search {
    position: relative;
    top: -35px;
    left: 245px;
}
div#form {
    height: 34px;
}

}

.fa-check-circle:before {
 
    color: #359c50;
}

.doitac {
    /* background-color: blue; */
    background: #a199de !important;
}


	    .phone-mobile{display: none;} 
    .giuseart-nav {
        position: fixed;
        right: 13px;
        background: #fff;
        border-radius: 5px;
        width: auto;
        z-index: 150;
        bottom: 50px;
        padding: 10px 0;
        border: 1px solid #f2f2f2;
    }
    .giuseart-nav ul {list-style: none;padding: 0;margin: 0;}
    .giuseart-nav ul li {list-style: none!important;}
    .giuseart-nav ul>li a {
        border:none;
        padding: 3px;
        display: block;
        border-radius: 5px;
        text-align: center;
        font-size: 10px;
        line-height: 15px;
        color: #515151;
        font-weight: 700;
        max-width: 72.19px;
        max-height: 54px;
        text-decoration: none;
    }
    .giuseart-nav ul>li .chat_animation{display:none}
    .giuseart-nav ul>li a i.ticon-heart {
        background: url(https://qvc.vn/media/banner/icon-map.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }
    .giuseart-nav ul>li a i.ticon-zalo-circle2 {
        background: url(https://qvc.vn/zalo.svg) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.giuseart-nav li .button {
        background: transparent;
    }.giuseart-nav ul>li a i.ticon-angle-up {
        background: url(https://qvc.vn/media/banner/xem-them.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.giuseart-nav ul>li a i {
        width: 33px;
        height: 33px;
        display: block;
        margin: auto;
    }.giuseart-nav ul li .button .btn_phone_txt {
        position: relative; top:35px;
        font-size: 10px;
        font-weight: bold;
        text-transform: none;
    }
    .giuseart-nav ul li .button .phone_animation i {
        display: inline-block;
        width: 27px;
        font-size: 26px;
        margin-top: 12px;
    }.giuseart-nav ul>li a.chat_animation svg {
        margin: -13px 0 -20px;
    }
    .giuseart-nav ul>li a i.ticon-messenger {
        background: url(https://qvc.vn/media/banner/icon-messenger.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.giuseart-nav ul li .button .phone_animation i {
        display: inline-block;
        width: 27px;
        font-size: 26px;
        margin-top: 12px;
    }
    .giuseart-nav ul>li a i.ticon-chat-sms {
        background: url(https://qvc.vn/media/banner/icon-sms-1.jpg) no-repeat;
        background-size: contain;
        width: 38px;
        height: 36px;
        display: block;
    }
    .giuseart-nav ul>li a i.icon-phone-w {
        background: url(https://qvc.vn/media/banner/icon-phone-w.png) no-repeat;
        background-size: contain;}
    .giuseart-nav ul li .button .btn_phone_txt {
        position: relative;
    }

    @media only screen and (max-width: 600px) {

        .giuseart-nav li .chat_animation{display:block !Important}
         .giuseart-nav .ticon-angle-up{display:none !important;}
        .giuseart-nav li .button .phone_animation {
            box-shadow: none;
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translate(-50%,0);
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: #6cb917;
            line-height: 15px;
            border: 2px solid white;
        }
        .giuseart-nav ul>li a{padding:0; margin:0 auto}
        .giuseart-nav {
            background: white;
            width: 98%;
  			max-width: 98% !important;
  			border-radius:0;
            color: #fff;
            height: 60px;
            line-height: 50px;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            padding: 5px;
            margin: 0;
            box-shadow: 0 4px 10px 0 #000;
        }
        .giuseart-nav li {
            float: left;
            width: 20%;
            list-style: none;
            height: 50px;
        }
        .phone-mobile{display:block !important}
    }
	

/* ---- CSS Làm Gọn Khu Vực Chọn Cấu Hình ---- */

.build-options-grid {
    display: grid;
    
    /* Đây là dòng quan trọng nhất:
      Nó sẽ tự động chia các nút thành nhiều cột. 
      Mỗi cột có độ rộng tối thiểu 150px và sẽ tự co giãn để lấp đầy không gian.
    */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    /* Khoảng cách giữa các nút */
    gap: 10px; 
}

/* Tinh chỉnh lại các nút một chút cho đẹp hơn */
.build-options-grid .btn {
    width: 100%; /* Đảm bảo nút chiếm hết độ rộng của cột grid */
    padding: 8px;
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.build-options-grid .btn:hover {
    transform: translateY(-2px);
}
/* ---- CSS Nâng Cấp Giao Diện Build PC ---- */

/* Brand filter in modal */
.popup-main_filter .gr-filter.brand ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.popup-main_filter .gr-filter.brand ul li a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: all 0.2s ease;
}
.popup-main_filter .gr-filter.brand ul li a:hover {
    background: #e8f4fd;
    color: #243a76;
    padding-left: 20px;
}
.popup-main_filter .gr-filter.brand ul li a.active {
    background: #243a76;
    color: #fff;
}
.popup-main_filter .gr-filter.brand ul li a.clear-filter {
    background: #dc3545;
    color: #fff;
    font-weight: bold;
}
.popup-main_filter .gr-filter.brand ul li a.clear-filter:hover {
    background: #c82333;
    color: #fff;
}

/* Config stock status dots */
.config-stock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.config-stock-dot.dot-success { background: #28a745; }
.config-stock-dot.dot-warning { background: #ffc107; }
.config-stock-dot.dot-danger { background: #dc3545; }


/* 3. Hiệu ứng khi di chuột vào nút */
.build-options-grid .btn:hover {
    transform: translateY(-2px); /* Nút hơi nhích lên trên */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
}

/* 4. Làm nổi bật nút đang được chọn (nút màu đỏ) */
.build-options-grid .btn.btn-danger {
    font-weight: bold;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc3545; /* Tạo viền kép để nổi bật */
    position: relative; /* Cần cho việc thêm icon (nếu muốn) */
}

/* Tùy chọn: Thêm icon check cho nút được chọn */
.build-options-grid .btn.btn-danger::before {
    content: '\f00c'; /* Mã icon check của Font Awesome */
    font-family: FontAwesome;
    margin-right: 8px;
    font-weight: normal;
}

/* 5. Tinh chỉnh lại card chứa các nút cho đẹp hơn */
.build-profiles-selection .card {
    border: none; /* Bỏ viền mặc định của card */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); /* Thêm bóng mờ cho card */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.build-profiles-selection .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}