/*
 * Khối "Cảm ơn khách hàng" trang chủ (yêu cầu giao diện 3, 09/2026) - parts/cam-on-khach.php.
 * Banner trái cố định, bên phải dải ảnh khách tự chạy, rê chuột thì dừng, ảnh được rê nổi lên.
 */
.ccn-cam-on{display:flex;gap:14px;align-items:stretch;margin:4px 0 16px;padding:12px;background:#f2f4f7;border-radius:10px;}
/* Tỉ lệ như hacom.vn (24/09/2026): banner trái ~24% chiều ngang, ảnh khách dọc 240x340. */
.ccn-cam-on .trai{flex:0 0 24%;}
.ccn-cam-on .trai img{display:block;width:100%;height:340px;object-fit:cover;border-radius:10px;}
.ccn-cam-on .dai{flex:1;min-width:0;overflow:hidden;padding:6px 0;}
.ccn-cam-on .ray{display:flex;width:max-content;margin:0;padding:0;list-style:none;
	animation:ccn-cam-on-chay calc(var(--ccn-so, 8) * 4s) linear infinite;}
.ccn-cam-on .dai:hover .ray{animation-play-state:paused;}
.ccn-cam-on .ray li{flex:0 0 auto;margin:0 7px;list-style:none;}
.ccn-cam-on .ray img{display:block;width:240px;height:328px;object-fit:cover;border-radius:10px;
	box-shadow:0 1px 4px rgba(16,24,40,.12);transition:transform .2s ease, box-shadow .2s ease;}
.ccn-cam-on .ray li:hover img{transform:translateY(-5px);box-shadow:0 8px 18px rgba(16,24,40,.22);}
@keyframes ccn-cam-on-chay{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Người dùng tắt chuyển động: không chạy, cho vuốt ngang. */
@media (prefers-reduced-motion:reduce){
	.ccn-cam-on .ray{animation:none;}
	.ccn-cam-on .dai{overflow-x:auto;}
}
@media (max-width:768px){
	.ccn-cam-on{flex-direction:column;padding:8px;gap:8px;}
	.ccn-cam-on .trai{flex:none;}
	.ccn-cam-on .trai img{width:100%;height:auto;aspect-ratio:400/340;}
	.ccn-cam-on .ray img{width:150px;height:210px;}
}

/*
 * Menu danh mục trái: 16 mục cao ~500px, dài hơn khung 453px nên thò xuống đè khối bên dưới (lỗi có từ bản cũ).
 * Thu padding dòng 5px -> 2px (chữ giữ nguyên) để vừa khung.
 */
#header .hemnu .main-menu .ul li a.root{padding-top:2px;padding-bottom:2px;}
/* Chữ 15px -> 14px, một dòng: "Loa, webcam, máy trợ giảng" cần 221px > 216px nên bị xuống 2 dòng. */
#header .hemnu .main-menu .ul > li > a.root{font-size:14px;white-space:nowrap;}

/* Trang chủ: JS (parts/trang-chu.php) đặt chiều cao menu = khối banner; các dòng chia đều, icon căn giữa dòng. */
#header .hemnu .main-menu .ul.ccn-menu-gian{display:flex;flex-direction:column;}
#header .hemnu .main-menu .ul.ccn-menu-gian > li{flex:1 1 auto;display:flex;}
#header .hemnu .main-menu .ul.ccn-menu-gian > li > a.root{flex:1;display:flex;align-items:center;background-position:5px center !important;}

/*
 * Thanh xanh "Danh mục sản phẩm | 100% chính hãng..." ghim trên cùng khi cuộn.
 * js_function.js (bản cũ) gắn lớp .hfixed nhưng CSS cũ lại viết cho .hfixed1 nên thanh chưa bao giờ ghim được;
 * thanh tab trang chi tiết (fixed top:38px) chừa sẵn chỗ cho nó nên trước đây bị hở.
 */
@media (min-width:769px){
	#header .mnubox{min-height:38px;} /* giữ chỗ khi thanh chuyển sang fixed, trang không bị giật */
	#header .hemnu.hfixed{position:fixed !important;top:0;left:0;right:0;z-index:999 !important;width:100% !important;height:38px;margin:0;background:#0a663c;
		box-shadow:0 2px 8px rgba(0,0,0,.18);}
	#header .hemnu.hfixed .fixcon{width:1650px;margin:0 auto;position:relative;}
	#header .hemnu.hfixed .main-menu > .ul{display:none;height:auto !important;}
	#header .hemnu.hfixed .main-menu:hover > .ul{display:block !important;top:38px !important;}
	#header .hemnu.hfixed .main-menu .ul.ccn-menu-gian{display:none;}
	#header .hemnu.hfixed .main-menu:hover .ul.ccn-menu-gian{display:flex !important;}
	#header .hemnu.hfixed .main-menu .ul.ccn-menu-gian > li{flex:none;}
	#header .hemnu.hfixed .main-menu .ul .sub-menu{min-height:453px !important;}
}
@media (min-width:769px) and (max-width:1366px){
	#header .hemnu.hfixed .fixcon{width:1200px;}
	/* Màn 1200px không đủ chỗ: hotline trên thanh ghim đè lên dòng "Bảo hành nơi sử dụng" -> ẩn (vẫn có nút gọi nổi). */
	#header .hemnu.hfixed #hotline-fixed{display:none !important;}
}