/* detail_product.all.css — trang chi tiết sản phẩm, mốc 768px. */

/* ===== MOBILE (dưới 768px) ===== */
@media (max-width: 767px) {
	figure img{
		max-width: 100%;
	
	}
	article img{
		max-width: 100%;
		height: auto!important;
	}
	section .infoProduct{
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}
	section .infoProduct .imagesProduct{
		display: flex;
		position: relative;
		align-items: center;
		flex-direction: column;

	}
	section .infoProduct .imagesProduct .imagesOther li{
		border: 1px solid #e5e5e5;
		margin: 1px;
		text-align: center;
		display: inline-flex;
		width: auto;
		height: 80px;
		justify-content: center;
		align-items: center;
	}
	section .infoProduct .imagesProduct .imageMain figure{
		text-align:center;
		margin:25px 0;
	}
	section .infoProduct .imagesProduct .imagesOther li img{
		max-height: 78px;
	}
	section .infoProduct .imagesProduct .imageMain{
		order:1;
	}
	section .infoProduct .imagesProduct .imageMain img{
		max-height: 450px;
	}
	section .infoProduct .imagesProduct .imageMain figure img{
		max-width:80%;
	}
	section .infoProduct .imagesProduct .imagesOther{
	
		order:2;
	}
	section .infoProduct .infoAboutProduct .titleProduct{
		font-size: 24pt;
		margin: 15px 0;
		width: 90%;
		font-weight: 600;
		font-family: 'Roboto', sans-serif;
	}
	section .infoProduct .infoAboutProduct .titleProductVi{
		font-weight: 500;
	}
	section .infoProduct .infoAboutProduct .ratingProduct{
		margin: 15px 0;
	}
	section .infoProduct .infoAboutProduct .ratingProduct a{
		color: #1537f9;
	}
	section .infoProduct .infoAboutProduct .ratingProduct i{
		color: #FFC107;
	}
	section .infoProduct .infoAboutProduct .priceProduct{
		margin: 15px 0;
		font-size: 22pt;
		font-weight: 500;
		font-family: 'Roboto', sans-serif;
	}
	section .priceProduct .dl{
		font-size: 70%;
		text-decoration: line-through;
		font-weight: normal;
		color: #ccc;
	}
	section .infoProduct .infoAboutProduct .sizeInfo{
		border-top: 1px solid #e5e5e5;
		padding: 20px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	section .infoProduct .infoAboutProduct .sizeInfo .title{

	}
	section .infoProduct .infoAboutProduct .sizeInfo select{
		width: 100%;
		max-width: 320px;
		margin-left: 15px;
		border: 1px solid #ddd;
		height: 40px;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		background-position: right .45em top 50%;
		background-repeat: no-repeat;
		padding-right: 1.4em;
		background-size: auto 16px;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	section .quantity{
		display: flex;
		align-items: center;
	}
	section .quantity #quantityProduct{
		-webkit-appearance: none;
	  	margin: 0;
	  	-moz-appearance: textfield;
	  	text-align: center;
	  	width: 40px;
	  	padding: 8px .2em 10px;
	  	border-top:1px solid #ddd;
	  	border-bottom:1px solid #ddd;
	  	border-left: none;
	  	border-right: none;
	}
	section .quantity .button{
		background: #f1f1f1;
		width: 28px;
		border: 1px solid #ddd;
		text-align: center;
		padding: 8px .5em 10px;
		cursor: pointer;
		display: inline-block;
	}
	section .quantity .button.plus{
		margin-left: -5px;
	}
	section .quantity .button.minus{
		margin-right: -4px;
	}
	section .quantity .btnAddToCart{
		background: #666;
		color: #fff;
		padding: 10px 20px;
		margin-left: 20px;
		font-weight: 500;
		cursor: pointer;
		width: 200px;
		text-align: center;
		transition: 0.1s all;
	}
	section .quantity .btnAddToCart:hover, section .contentRight .btnAddToCart:hover, section .btnSendComment:hover{
		background: #333133;
	}
	section .infoProduct .infoOther{
		margin:25px 0;
	}
	section .infoProduct .infoOther li{
		border-top: 1px dotted #ccc;
		padding: 8px 0;
	}
	section .infoProduct .infoOther li a{
		color: #1537f9;
	}
	section .detailProduct{
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}
	section .detailProduct .listTabs{
		display: flex;
		justify-content: center;
	}
	section .detailProduct .listTabs a{
		border: 2px solid #333133;
		margin: 20px 5px 5px;
		padding: 6px 20px 3px;
		border-radius: 50px;
		font-weight: 400;
		font-family: 'Roboto', sans-serif;
		cursor: pointer;
		transition: all 0.2s;
	}
	section .detailProduct .listTabs a:hover, section .detailProduct .listTabs a.selected{
		background: #333133;
		color: #fff;
	}
	section table.tpsp{
		padding: 8px;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
	}
	section table.tpsp tr{
		display: none;
	}
	section table.tpsp tr td{
		border-bottom: 1px solid #eee;
		line-height: 20px;
		padding: 8px 0;
	}
	section table.tpsp tr:last-child td{
		border-bottom: none;
	}
	section table.tpsp tr td:first-child{
		width: 120px;
		font-weight: 400;
	}
	section table.tpsp tr td:last-child{
		font-weight: 700;
	
	}
	section .boxIngredient{
		border: solid 1px #eee;
	
	}
	section .boxIngredient .title{
		background: #f7f7f7;
		font-weight: 700;
		border-bottom: solid 1px #eee;
		line-height: 20px;
		text-align: center;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
		padding: 15px 0;
	}
	section .boxIngredient .btnSeeMore{
		text-align: center;
		border: 1px solid #eee;
		margin: 0px 8px 10px 8px;
		padding: 8px 0 10px 0;
		cursor: pointer;
		font-size: 10pt;
	}
	section article{
		position: relative;
		max-height: 500px;
		overflow: hidden;
	
	}
	section article.fullContent{
		max-height: none;
	}
	section .seeMoreContent{
		width: 100%;
		padding-bottom: 20px;
		text-align: center;
		cursor: pointer;
		color: #1537f9;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;
		font-size: 12pt;
	}
	section .seeMoreContent.short{
		background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		position: absolute;
		bottom: -15px;
		left: 0;
		right: 0;
		padding-top: 50px;
	}
	section .contentRelate{
		border: 1px solid #eee;
		margin: 25px auto;
	}
	section .contentRelate .title{
		font-size: 12pt;
		background: #f7f7f7;
		text-align: center;
		padding: 15px 0;
		border-bottom: 1px solid #eee;

	}
	section .listContentRelate{
		padding: 5px;
	}
	section .listContentRelate li{
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 20px;
		margin-top: 20px;
	}
	section .listContentRelate li:last-child{
		border: none;
	}
	section .listContentRelate li figure{
		flex-basis: 150px;
		margin-right: 20px;
		width: 30%;
	}
	section .listContentRelate li .titleContent{
		font-size: 11pt;
		width: 70%;
		font-weight: 500;
		line-height: 20px;
	}
	section .contentRelate .btnSeeMore{
		border: 1px solid #e5e5e5;
		display: block;
		margin: 0 -1px -1px;
		text-align: center;
		padding: 8px 0;
		cursor: pointer;
	}
	section .contentRight .infoProduct .infoAboutProduct .titleProduct{
		font-size: 12pt;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct .titleProductVi{
		font-size: 10pt;
	}
	section .contentRight .infoProduct .infoAboutProduct .ratingProduct{
		font-size: 12px;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct .priceProduct{
		font-size: 13pt;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct{
		width: 200px;
	
	}
	section .contentRight .infoProduct .imagesProduct{
		width: 100px;
		height: auto;
	}
	section .contentRight .btnAddToCart{
		margin-left: 0;
		background: #666;
		color: #fff;
		padding: 10px 20px;
		font-weight: 500;
		cursor: pointer;
		text-align: center;
		margin: 12px;
		display: block;
	}
	section .contentRight .stickyOrder{
	    border: 1px solid #e5e5e5;
	    padding: 10px 0 0;
    
	}
	section .titleGroup{
		font-family: 'Roboto', sans-serif;
		text-align: center;
		font-size: 22pt;
		margin: 40px 0 30px;
		font-weight: 400;
	}
	section .productRelate .group .list_product_h{
		width: auto;
		text-align: center;
	}
	section .productRelate .group .list_product_h h4{
		margin:15px 0;
	}
	section .productRelate .list_product_h .images img{
		width: auto !important;
		display: inline-block;
	}
	section .commentRating{
		display: flex;
		flex-direction: column;
	}
	section .commentRating .boxSendComment{
	
	}
	section .commentRating .listComment{
	
	}
	section .listComment .title{
		font-size: 16pt;
		font-weight: 600;
		margin:0 0 30px;
	}
	section .listComment li{
		display: flex;
		border-bottom: 1px dashed #ccc;
		margin-top: 15px;
	}
	section .listComment li:last-child{
		border-bottom: none;
	}
	section .listComment li .avt{
		margin-right: 20px;
	}
	section .listComment li .avt figure{
		border-radius: 100px;
		overflow: hidden;
		width: 61px;
	}
	section .listComment li figure img{
	
	}
	section .listComment li .detailComment{
		flex-grow:1;
	}
	section .listComment li .detailComment i{
		color: #FFC107;
	}
	section .commentRating .boxSendComment{
		padding: 25px 15px;
		border: 2px solid #333133;
	}
	section .boxSendComment .selectRating{
		display: flex;
		margin: 0px 0 25px;
	}
	section .boxSendComment .selectRating li{
		border-right: 1px solid #e5e5e5;
		margin-right: 10px;
		padding-right: 10px;
		color: #ddd;
		cursor: pointer;
		transition: 0.3s;
	}
	section .boxSendComment .selectRating li:last-child{
		border: none;
	}
	section .boxSendComment .selectRating li:hover, section .boxSendComment .selectRating li.selected{
		color: #FFC107;
	}
	section .boxSendComment .title{
		font-size: 18pt;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;
		margin-bottom: 8px;
	}
	section .boxSendComment .titleLabel{
		font-weight: 500;
		font-family: 'Roboto', sans-serif;
		margin-bottom: 5px;
	}
	section .boxSendComment textarea, section .boxSendComment input{
		box-sizing: border-box;
		border:1px solid #e5e5e5;
		font-size: 10pt;
		border-radius: 0;
		box-shadow: none;
		background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	}
	section .boxSendComment textarea{
		width: 100%;
		height: 100px;
		padding: 10px;
	}
	section .boxSendComment input{
		width: 180px;
		height: 35px;
		text-indent: 10px;
	}
	section .btnSendComment{
		background: #666;
		color: #fff;
		padding: 10px 20px;
		font-weight: 500;
		cursor: pointer;
		text-align: center;
		margin: 12px 0;
		display: block;
		width: 200px;
		transition: 0.1s all;
	}
	section .listPage{
		text-align: center;
		margin:15px auto 30px;
	}
	section .listPage span{
		border: 1px solid #949596;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50px;
		display: inline-block;
		font-weight: bold;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		cursor: pointer;
		transition: 0.3s;
		color: #333;
		margin: 3px;
	}
	section .listPage span:hover, section .listPage span.selected{
		background: #949596;
		color: #fff;
	}
	section .procedure img{
		max-width: 100%;
		height: auto!important;
	}
	section .boxInfoDiscountContent{
		border: 1px solid #ef4679;
	    padding: 10px 15px 0;
	    margin: 15px 0 25px;
	    position: relative;
	}
	section .boxInfoDiscountContent .title{
		background: #ef4679;
		position: absolute;
		color: #fff;
		top: -16px;
		padding: 5px 10px;
		border-radius: 0px;
		left: 15px;
		font-weight:bold;
	}
	section .boxInfoDiscountContent a{
		color:#ef4679;
		text-decoration:underline;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM{
		position:relative;
		top:0;
		background:#676768;
		color:#fff;
		padding-left:90px;
		padding-top:10px;
		padding-bottom:10px;
		margin-bottom:30px;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM p{
		margin:0;
		font-size:10pt;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM p a, section .contentDiscount p a{
		color:#e9477a;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM img{
		position:absolute;
		top:0;
		height: 85px;
		left: 15px;
	}
	section .contentDiscount{
		display: flex;
		background: #f5f6f6;
		align-items: center;
		margin: 0px 0 25px;
	}
	section .contentDiscount .backgroundTitle{
		background: #e9457a;
		border-radius: 0 50px 50px 0;
		color: #fff;
		font-weight: bold;
		max-width: 135px;
		text-align: center;
		padding: 15px 10px 13px;
		text-transform: uppercase;
		width:30%;
	}
	section .contentDiscount p{
		margin:5px 10px;
		font-size:90%;
		width:70%;
	}
}

/* ===== DESKTOP (từ 768px) ===== */
@media (min-width: 768px) {
	figure img{
		max-width: 100%;
	}
	section .infoProduct{
		display: flex;
		justify-content: space-around;
	}
	section .infoProduct .imagesProduct{
		width: 550px;
		display: flex;
		position: relative;
		align-items: flex-start;

	}
	section .infoProduct .imagesProduct .imagesOther{
		width: 100px;
	}
	section .productsSlider{
		position: relative;
		width: 100px;
		max-height: 450px;
		overflow-y: auto;
		scrollbar-width: thin;
	}
	section .infoProduct .imagesProduct .imagesOther li{
		border:1px solid #e5e5e5;
		margin: 10px;
		text-align: center;
	}
	section .infoProduct .imagesProduct .imagesOther li img{
		max-height: 78px;
	}
	section .infoProduct .imagesProduct .imageMain{
		order:2;
		position: relative;
	}
	section .infoProduct .imagesProduct .imageMain img{
		max-height: 450px;
		width: 100%;
	}
	section .infoProduct .imagesProduct .imagesOther{
	
		order:1;
	}
	section .infoProduct .infoAboutProduct{
		width: 600px;
	}
	section .infoProduct .infoAboutProduct .titleProduct{
		font-size: 24pt;
		margin: 15px 0;
		width: 90%;
		font-weight: 600;
		font-family: 'Roboto', sans-serif;
	}
	section .infoProduct .infoAboutProduct .titleProductVi{
		font-weight: 500;
	}
	section .infoProduct .infoAboutProduct .ratingProduct{
		margin: 15px 0;
	}
	section .infoProduct .infoAboutProduct .ratingProduct a{
		color: #1537f9;
	}
	section .infoProduct .infoAboutProduct .ratingProduct i{
		color: #FFC107;
	}
	section .infoProduct .infoAboutProduct .priceProduct{
		margin: 15px 0;
		font-size: 22pt;
		font-weight: 500;
		font-family: 'Roboto', sans-serif;
	}
	section .priceProduct .dl{
		font-size: 70%;
		text-decoration: line-through;
		font-weight: normal;
		color: #ccc;
	}
	section .infoProduct .infoAboutProduct .sizeInfo{
		border-top: 1px solid #e5e5e5;
		padding: 20px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	section .infoProduct .infoAboutProduct .sizeInfo .title{

	}
	section .infoProduct .infoAboutProduct .sizeInfo select{
		width: 325px;
		margin-left: 10px;
		border: 1px solid #ddd;
		height: 40px;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		background-position: right .45em top 50%;
		background-repeat: no-repeat;
		padding-right: 1.4em;
		background-size: auto 16px;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	section .quantity{
		display: flex;
		align-items: center;
	}
	section .quantity #quantityProduct{
		-webkit-appearance: none;
	  	margin: 0;
	  	-moz-appearance: textfield;
	  	text-align: center;
	  	width: 40px;
	  	padding: 8px .2em 10px;
	  	border-top:1px solid #ddd;
	  	border-bottom:1px solid #ddd;
	  	border-left: none;
	  	border-right: none;
	}
	section .quantity .button{
		background: #f1f1f1;
		width: 28px;
		border: 1px solid #ddd;
		text-align: center;
		padding: 8px .5em 10px;
		cursor: pointer;
	}
	section .quantity .button.plus{
		margin-left: -5px;
	}
	section .quantity .button.minus{
		margin-right: -4px;
	}
	section .quantity .btnAddToCart{
		background: #666;
		color: #fff;
		padding: 10px 20px;
		margin-left: 20px;
		font-weight: 500;
		cursor: pointer;
		width: 200px;
		text-align: center;
		transition: 0.1s all;
	}
	section .quantity .btnAddToCart:hover, section .contentRight .btnAddToCart:hover, section .btnSendComment:hover{
		background: #333133;
	}
	section .infoProduct .infoOther{
		margin:25px 0;
	}
	section .infoProduct .infoOther li{
		border-top: 1px dotted #ccc;
		padding: 15px 0;
	}
	section .infoProduct .infoOther li a{
		color: #1537f9;
	}
	section .detailProduct{
	
		display: flex;
		justify-content: space-around;
		margin-top: 35px;
	}
	section .contentLeft{
		width: 800px;
		border-top:1px solid #e5e5e5;
	}
	section .detailProduct .listTabs{
		display: flex;
		justify-content: center;
	}
	section .detailProduct .listTabs a{
		border: 2px solid #333133;
		margin: 20px 5px;
		padding: 8px 20px 5px;
		border-radius: 50px;
		font-weight: 400;
		font-family: 'Roboto', sans-serif;
		cursor: pointer;
		transition: all 0.2s;
	}
	section .detailProduct .listTabs a:hover, section .detailProduct .listTabs a.selected{
		background: #333133;
		color: #fff;
	}
	section .contentRight{
		width: 350px;
	}
	section table.tpsp{
		padding: 8px;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
	}
	section table.tpsp tr{
		display: none;
	}
	section table.tpsp tr td{
		border-bottom: 1px solid #eee;
		line-height: 20px;
		padding: 8px 0;
	}
	section table.tpsp tr:last-child td{
		border-bottom: none;
	}
	section table.tpsp tr td:first-child{
		width: 120px;
		font-weight: 400;
	}
	section table.tpsp tr td:last-child{
		font-weight: 700;
	
	}
	section .boxIngredient{
		border: solid 1px #eee;
		margin-bottom: 25px;
	}
	section .boxIngredient .title{
		background: #f7f7f7;
		font-weight: 700;
		border-bottom: solid 1px #eee;
		line-height: 20px;
		text-align: center;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
		padding: 15px 0;
	}
	section .boxIngredient .btnSeeMore{
		text-align: center;
		border: 1px solid #eee;
		margin: 0px 8px 10px 8px;
		padding: 8px 0 10px 0;
		cursor: pointer;
		font-size: 10pt;
	}
	section article{
		position: relative;
		/*max-height: 800px;*/
		overflow: hidden;
	
	}
	section article.fullContent{
		max-height: none;
	}
	section .seeMoreContent{
		width: 100%;
		padding-bottom: 20px;
		text-align: center;
		cursor: pointer;
		color: #1537f9;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;
		font-size: 12pt;
	}
	section .seeMoreContent.short{
		background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.91) 50%,#fff 55%);
		position: absolute;
		bottom: -15px;
		left: 0;
		right: 0;
		padding-top: 50px;
		display: none;
	}
	section .contentRelate .title{
		margin: 30px 0 0;
		font-size: 12pt;
	}
	section .listContentRelate li{
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 20px;
		margin-top: 20px;
	}
	section .listContentRelate li:last-child{
		border: none;
	}
	section .listContentRelate li figure{
		flex-basis: 150px;
		margin-right: 20px;
	}
	section .listContentRelate li .titleContent{
		font-size: 11pt;
		width: 200px;
		font-weight: 500;
		line-height: 20px;
	}
	section .contentRelate .btnSeeMore{
		border: 1px solid #e5e5e5;
		display: block;
		margin: 0px 0 50px;
		text-align: center;
		padding: 8px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct .titleProduct{
		font-size: 12pt;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct .titleProductVi{
		font-size: 10pt;
	}
	section .contentRight .infoProduct .infoAboutProduct .ratingProduct{
		font-size: 12px;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct .priceProduct{
		font-size: 13pt;
		margin:5px 0;
	}
	section .contentRight .infoProduct .infoAboutProduct{
		width: 200px;
	
	}
	section .contentRight .infoProduct .imagesProduct{
		width: 100px;
		height: auto;
	}
	section .contentRight .btnAddToCart{
		margin-left: 0;
		background: #666;
		color: #fff;
		padding: 10px 20px;
		font-weight: 500;
		cursor: pointer;
		text-align: center;
		margin: 12px;
		display: block;
	}
	section .contentRight .stickyOrder{
	    border: 1px solid #e5e5e5;
	    padding: 10px 0 0;
    
	}
	section .titleGroup{
		font-family: 'Roboto', sans-serif;
		text-align: center;
		font-size: 22pt;
		margin: 40px 0 30px;
		font-weight: 400;
	}
	section .productRelate .group .list_product_h{
		width: auto;
		text-align: center;
	}
	section .productRelate .group .list_product_h h4{
		margin:15px 0;
	}
	section .productRelate .list_product_h .images img{
		width: auto !important;
		display: inline-block;
	}
	section .commentRating{
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}
	section .commentRating .listComment{
		width: 600px;
	}
	section .listComment .title{
		font-size: 16pt;
		font-weight: 600;
		margin:0 0 30px;
	}
	section .listComment li{
		display: flex;
		border-bottom: 1px dashed #ccc;
		margin-top: 15px;
	}
	section .listComment li:last-child{
		border-bottom: none;
	}
	section .listComment li .avt{
		margin-right: 20px;
	}
	section .listComment li .avt figure{
		border-radius: 100px;
		overflow: hidden;
		width: 61px;
	}
	section .listComment li figure img{
	
	}
	section .listComment li .detailComment{
		flex-grow:1;
	}
	section .listComment li .detailComment i{
		color: #FFC107;
	}
	section .commentRating .boxSendComment{
		width: 400px;
		padding: 50px 25px;
		border: 2px solid #333133;
	}
	section .boxSendComment .selectRating{
		display: flex;
		margin: 0px 0 25px;
	}
	section .boxSendComment .selectRating li{
		border-right: 1px solid #e5e5e5;
		margin-right: 10px;
		padding-right: 10px;
		color: #ddd;
		cursor: pointer;
		transition: 0.3s;
	}
	section .boxSendComment .selectRating li:last-child{
		border: none;
	}
	section .boxSendComment .selectRating li:hover, section .boxSendComment .selectRating li.selected{
		color: #FFC107;
	}
	section .boxSendComment .title{
		font-size: 18pt;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;
		margin-bottom: 8px;
	}
	section .boxSendComment .titleLabel{
		font-weight: 500;
		font-family: 'Roboto', sans-serif;
		margin-bottom: 5px;
	}
	section .boxSendComment textarea, section .boxSendComment input{
		box-sizing: border-box;
		border:1px solid #e5e5e5;
		font-size: 10pt;
	}
	section .boxSendComment textarea{
		width: 100%;
		height: 100px;
		padding: 10px;
	}
	section .boxSendComment input{
		width: 190px;
		height: 35px;
		text-indent: 10px;
	}
	section .btnSendComment{
		background: #666;
		color: #fff;
		padding: 10px 20px;
		font-weight: 500;
		cursor: pointer;
		text-align: center;
		margin: 12px 0;
		display: block;
		width: 200px;
		transition: 0.1s all;
	}
	section .listPage{
		text-align: center;
	}
	section .listPage span{
		border: 1px solid #949596;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50px;
		display: inline-block;
		font-weight: bold;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		cursor: pointer;
		transition: 0.3s;
		color: #333;
		margin: 3px;
	}
	section .listPage span:hover, section .listPage span.selected{
		background: #949596;
		color: #fff;
	}
	section .procedure img{
		max-width: 100%;
	}
	section .boxInfoDiscountContent{
		border: 1px solid #ef4679;
	    padding: 10px 15px 0;
	    margin: 15px 0 25px;
	    position: relative;
	}
	section .boxInfoDiscountContent .title{
		background: #ef4679;
		position: absolute;
		color: #fff;
		top: -16px;
		padding: 5px 10px;
		border-radius: 0px;
		left: 15px;
		font-weight:bold;
	}
	section .boxInfoDiscountContent a{
		color:#ef4679;
		text-decoration:underline;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM{
		position:relative;
		top:0;
		background:#676768;
		color:#fff;
		padding-left:90px;
		padding-top:10px;
		padding-bottom:10px;
		margin-bottom:30px;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM p{
		margin:0;
		font-size:10pt;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM p a, section .contentDiscount p a{
		color:#e9477a;
	}
	section .infoProduct .imagesProduct .imageMain .labelKM img{
		position:absolute;
		top:0;
		height: 85px;
		left: 15px;
	}
	section .contentDiscount{
		display: flex;
		background: #f5f6f6;
		align-items: center;
		margin: 0px 0 25px;
	}
	section .contentDiscount .backgroundTitle{
		background: #e9457a;
		border-radius: 0 50px 50px 0;
		color: #fff;
		font-weight: bold;
		max-width: 135px;
		text-align: center;
		padding: 15px 10px;
		text-transform: uppercase;
		width:30%;
	}
	section .contentDiscount p{
		margin:5px 10px;
		font-size:90%;
		width:70%;
	}
}

/* ===== CO GIÃN (768–1279px): các cột flex co theo bề rộng ===== */

@media (min-width: 768px) and (max-width: 1279px){

	section .detailProduct,
	section .infoProduct,
	section .commentRating{
		flex-wrap:wrap;
		gap:24px;
	}

	section .contentLeft{width:auto;flex:1 1 560px;min-width:0}
	section .contentRight{width:auto;flex:1 1 300px;min-width:0}

	section .infoProduct .imagesProduct{width:auto;flex:1 1 320px;min-width:0}
	section .infoProduct .infoAboutProduct{width:auto;flex:1 1 320px;min-width:0}

	section .commentRating .listComment{width:auto;flex:1 1 320px;min-width:0}
	section .commentRating .boxSendComment{width:auto;flex:1 1 300px;min-width:0}

	/* Ô số lượng co theo cột. */
	section .infoProduct .infoAboutProduct .sizeInfo select{
		width:100%;
		max-width:325px;
	}

	/* Tính cả viền vào bề rộng để không lố 2px. */
	section .contentRight .stickyOrder{box-sizing:border-box;max-width:100%}
}

/* ===== KHUNG ĐẶT HÀNG DÍNH + LỀ DƯỚI (lớp ghi đè) ===== */

/* Màn rộng: khung đặt hàng dính khi cuộn, tự dừng ở cuối cột nên không đè phần đánh giá. */
@media (min-width: 768px) {

	section .contentRight .stickyOrder{
		position: sticky;
		/* Chừa chỗ cho header dính phía trên. */
		top: 190px;
	}

}

/* Chừa khoảng cách giữa khung đánh giá và footer. */
section .commentRating{
	margin-bottom: 60px;
}

@media (max-width: 767px) {

	section .commentRating{
		margin-bottom: 32px;
	}

}