/*
 * Thẻ sản phẩm nổi (yêu cầu giao diện 1 + 2 của khách, 09/2026 - khác bản cũ có chủ ý).
 * Áp cho thẻ in bởi ccn_the_san_pham() (lớp .ccn-the): carousel trang chủ, danh mục, tìm kiếm, SP liên quan.
 * Nạp sau global.css + util.carousel.css nên chỉ cần cùng độ ưu tiên để đè.
 */

/* --- Nền xám nhạt cho vùng chứa thẻ --- */
.topview .util-wrapper-holder,
.prview .util-wrapper-holder{background:#f2f4f7;border:0;border-radius:10px;padding:12px 0 !important;}
.topview .util-item,
.prview .util-item{padding:0 6px;}

#content ul.ulpro.hoverpro,
#content ul.ulopro{display:flex;flex-wrap:wrap;gap:12px;background:#f2f4f7;border:0;border-radius:10px;padding:12px;}

/* --- Mũi tên carousel: nút tròn trắng nằm trên mép khung xám (nửa ra ngoài), không đè chữ trong thẻ --- */
.topview,.prview{overflow:visible;}
.topview .util-prev,.topview .util-next,
.prview .util-prev,.prview .util-next{
	z-index:2;width:36px;height:36px;margin-top:-18px;border-radius:50%;
	background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.25);
	font-size:18px;line-height:36px;text-align:center;color:#0a663c;
}
.topview .util-prev,.prview .util-prev{left:-18px;}
.topview .util-next,.prview .util-next{right:-18px;}
.topview .util-prev:hover,.topview .util-next:hover,
.prview .util-prev:hover,.prview .util-next:hover{background:#0a663c;color:#fff;}

/* --- Thẻ --- */
.topview .item.ccn-the,
.prview .item.ccn-the,
#content ul.ulpro li.ccn-the,
#content ul.ulopro li.ccn-the{
	display:block;width:100%;background:#fff;border:1px solid #e6e8ec;border-radius:10px;
	box-shadow:0 1px 4px rgba(16,24,40,.08);
	transition:transform .2s ease, box-shadow .2s ease;
}
#content ul.ulpro li.ccn-the,
#content ul.ulopro li.ccn-the{width:calc((100% - 36px) / 4);}

/* Rê chuột: nổi lên + bóng đậm (thay viền đen của .hoverpro cũ). */
.topview .item.ccn-the:hover,
.prview .item.ccn-the:hover,
#content ul.ulpro li.ccn-the:hover,
#content ul.ulopro li.ccn-the:hover{
	transform:translateY(-3px);border-color:#e6e8ec;
	box-shadow:0 8px 20px rgba(16,24,40,.16);
}

/* Rê vào thẻ thì tên SP cũng đổi màu như khi rê vào chính tên. */
.ccn-the:hover .title a,
#content .ccn-the:hover .title a{color:#f00;} /* #content: đè luật có id của danh sách cũ */

/* --- Nhãn -% ở dòng giá gốc, căn phải --- */
.ccn-the .price .km-gia{
	position:absolute;top:2px;right:0;
	padding:0 6px;border-radius:4px;background:#e30019;
	font:600 13px/18px Roboto, Arial;color:#fff;
}

/* --- Icon giỏ: xanh CCN, đã trong giỏ thì đỏ (JS đổi class .love <-> .love.ac) --- */
.ccn-the .love,
.ccn-the .love:hover,
.ccn-the .ac{
	right:0;bottom:0;width:32px;height:32px;border-radius:50%;
	background:#e7f3ec !important;text-align:center;
}
.ccn-the .love::before{content:"\f07a";font:normal 17px/32px FontAwesome;color:#0a663c;}
.ccn-the .love:hover{background:#0a663c !important;}
.ccn-the .love:hover::before{color:#fff;}
.ccn-the .love.ac{background:#fde8ea !important;}
.ccn-the .love.ac::before{color:#e30019;}
.ccn-the .love.ac:hover{background:#e30019 !important;}
.ccn-the .love.ac:hover::before{color:#fff;}

@media (max-width:640px){
	/* Màn hẹp: khung sát mép màn hình nên thu mũi tên vào trong. */
	.topview .util-prev,.prview .util-prev{left:2px;}
	.topview .util-next,.prview .util-next{right:2px;}
	#content ul.ulpro.hoverpro,
	#content ul.ulopro{gap:8px;padding:8px;}
	#content ul.ulpro li.ccn-the,
	#content ul.ulopro li.ccn-the{width:calc((100% - 8px) / 2);}
}

/*
 * Yêu cầu 24/09/2026 (kiểu hacom.vn):
 * - Trang chủ: hàng danh mục con dưới tiêu đề mỗi khối - máy tính giữ 5 nút như cũ, điện thoại vuốt ngang đủ danh mục con.
 * - Điện thoại: thẻ sản phẩm gọn lại (ảnh thấp hơn, bỏ dòng sao đánh giá, chữ nhỏ hơn) để nhìn được nhiều hơn.
 */
@media (min-width:641px){
	#home-section3 .box-pro-home .title-box-pro-home .list-sub a:nth-child(n+6){display:none;}
}
@media (max-width:640px){
	#home-section3 .box-pro-home .title-box-pro-home{padding:14px 0 6px;}
	#home-section3 .box-pro-home .title-box-pro-home .list-sub{display:flex !important;gap:8px;width:100%;margin:10px 0 0;padding:0 0 4px;
		overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
	#home-section3 .box-pro-home .title-box-pro-home .list-sub::-webkit-scrollbar{display:none;}
	#home-section3 .box-pro-home .title-box-pro-home .list-sub a{flex:none;margin:0;padding:6px 14px;border:1px solid #dfe3e8;border-radius:16px;background:#f6f7f9;
		font:500 13px/18px Roboto, Arial;color:#222;text-transform:uppercase;}

	.ccn-the.item,
	#content ul.ulpro li.ccn-the,
	#content ul.ulopro li.ccn-the{padding:10px 8px 10px;}
	.ccn-the .thumb{padding:0 0 8px;}
	.ccn-the .thumb img{max-width:88%;max-height:112px;width:auto;}
	.ccn-the .rate{display:none;}
	.ccn-the .title,
	#content .ccn-the .title{height:36px;font-size:13px;line-height:18px;}
	.ccn-the .title a,
	#content .ccn-the .title a{font-size:13px;line-height:18px;}
	.ccn-the .code,
	#content .ccn-the .code{padding:4px 0 2px;font-size:12px;line-height:16px;}
	.ccn-the .price .pridi,
	.ccn-the .price .pridinon,
	#content .ccn-the .price .pridi,
	#content .ccn-the .price .pridinon{font-size:12px;line-height:18px;}
	.ccn-the .price .prinu,
	.ccn-the .price .prinu em,
	#content .ccn-the .price .prinu,
	#content .ccn-the .price .prinu em{font-size:16px;line-height:20px;}
	.ccn-the .price .pritx,
	#content .ccn-the .price .pritx{font-size:13px;line-height:20px;}
	.ccn-the .price .kho,
	#content .ccn-the .price .kho{padding-top:2px;font-size:12px;line-height:18px;}
	.ccn-the .price .km-gia{font-size:11px;line-height:16px;padding:0 4px;}
	.ccn-the .love,.ccn-the .love:hover,.ccn-the .ac{width:28px;height:28px;}
	.ccn-the .love::before{font-size:15px;line-height:28px;}
}
@media (max-width:640px){
	/* Khung carousel trang chủ dôi 6px (lề .util-item) làm trang cuộn ngang được -> cắt. */
	#home-section3{overflow-x:hidden;}
}
@media (max-width:640px){
	.prview .util-prev,.prview .util-next{width:30px;height:30px;margin-top:-15px;font-size:15px;line-height:30px;opacity:.92;}
}