/* ==========================================================================
   KENCO – SIDEBAR DÙNG CHUNG (tiền tố ks-): danh mục sản phẩm, liên hệ, bài viết mới
   Cột phải trượt theo khi cuộn trang (kenco-sidebar.js). Không phụ thuộc module khác.
   ========================================================================== */
.ks-sidebar, .ks-sidebar *, .ks-sidebar *::before, .ks-sidebar *::after,
.ks-box, .ks-box *, .ks-box *::before, .ks-box *::after { box-sizing: border-box; }

.ks-sidebar, .ks-box {
	--ks-blue: #005bac; --ks-blue-d: #004b93; --ks-navy: #0b3a6b; --ks-orange: #f26522; --ks-border: #e2e8f0;
	font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.ks-sidebar { min-width: 0; }
.ks-sidebar-inner { display: flex; flex-direction: column; gap: 20px; will-change: transform; }

/* Khi JS đang điều khiển: bỏ sticky mặc định */
.ks-sidebar.is-gliding .ks-sidebar-inner { transform: translate3d(0, 0, 0); }

/* Dự phòng không JS / giảm chuyển động: dính theo màn hình */
@media (min-width: 1025px) {
	.ks-sidebar[data-ks-glide]:not(.is-gliding) .ks-sidebar-inner { position: sticky; top: 96px; }
}

/* ---------- Hộp chung ---------- */
.ks-box { position: relative; padding: 24px; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); animation: ks-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.ks-box:nth-child(2) { animation-delay: .08s; }
.ks-box:nth-child(3) { animation-delay: .16s; }
@keyframes ks-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ks-title {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 0 0 12px;
	font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: .5px; text-transform: uppercase;
}
.ks-name { display: flex; align-items: center; gap: 8px; }
.ks-name::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--ks-orange); }
.ks-chip { padding: 2px 8px; border-radius: 10px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.ks-ico { flex: 0 0 auto; width: 16px; height: 16px; }

/* ---------- Danh mục sản phẩm ---------- */
.ks-cats, .ks-recent { background: #fff; border: 1px solid var(--ks-border); border-top: 4px solid var(--ks-blue-d); }
.ks-cats .ks-title, .ks-recent .ks-title { color: #0f172a; border-bottom: 1px solid var(--ks-border); }
.ks-cat-list, .ks-recent-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ks-cat-list li, .ks-recent-list li { margin: 0; padding: 0; list-style: none; }
.ks-cat-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px;
	background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 10px;
	font-size: 13px; font-weight: 700; color: #334155; text-decoration: none; text-transform: uppercase;
	transition: background-color .25s, color .25s, border-color .25s, padding-left .25s, box-shadow .25s;
}
.ks-cat-item .ks-ico { width: 12px; height: 12px; color: #94a3b8; transition: transform .25s, color .25s; }
.ks-cat-item:hover { background: var(--ks-blue-d); border-color: var(--ks-blue-d); color: #fff; padding-left: 18px; box-shadow: 0 6px 14px rgba(0, 75, 147, .18); }
.ks-cat-item:hover .ks-ico { color: #fb923c; transform: translateX(4px); }
.ks-cat-item:focus-visible { outline: 3px solid var(--ks-orange); outline-offset: 2px; }

/* ---------- Thông tin liên hệ ---------- */
.ks-contact {
	overflow: hidden; color: #fff;
	background: radial-gradient(120% 70% at 100% 0%, rgba(242, 101, 34, .22) 0%, rgba(242, 101, 34, 0) 55%), linear-gradient(165deg, #0a4f98 0%, #0b3a6b 100%);
	box-shadow: 0 22px 40px -18px rgba(0, 59, 117, .6);
}
.ks-contact::before { /* vệt sáng chạy qua hộp */
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent); transform: skewX(-18deg);
	animation: ks-sheen 6s ease-in-out 1.2s infinite;
}
@keyframes ks-sheen { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.ks-contact-title { justify-content: flex-start; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .18); margin-bottom: 14px; }
.ks-contact-title .ks-ico { width: 20px; height: 20px; }
.ks-live { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.ks-dot { position: relative; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; }
.ks-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80; animation: ks-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ks-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

.ks-people { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ks-person {
	margin: 0; padding: 14px; list-style: none; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
	backdrop-filter: blur(2px); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s, border-color .3s, box-shadow .3s;
}
.ks-person:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .3); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55); }
.ks-person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ks-avatar {
	display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(135deg, #ff8a4c, var(--ks-orange)); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 6px 14px -4px rgba(242, 101, 34, .7);
}
.ks-person-id { min-width: 0; }
.ks-person-id strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; color: #fff; }
.ks-time { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.ks-time .ks-ico { width: 12px; height: 12px; }

.ks-actions { display: flex; gap: 8px; }
.ks-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 14px;
	border-radius: 10px; font-size: 13.5px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ks-btn:hover { transform: translateY(-2px); }
.ks-btn:active { transform: scale(.97); }
.ks-btn:focus-visible, .ks-mail:focus-visible, .ks-web:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ks-btn-tel { flex: 1 1 auto; background: #fff; color: var(--ks-blue-d); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); }
.ks-btn-tel:hover { background: #fff7f1; color: #c2410c; }
.ks-btn-tel .ks-ico { animation: ks-ring 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ks-ring { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-16deg); } 72% { transform: rotate(14deg); } 78% { transform: rotate(-10deg); } 84% { transform: rotate(8deg); } 90% { transform: rotate(0); } }
.ks-btn-zalo { flex: 0 0 auto; background: #0068ff; color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 104, 255, .8); }
.ks-btn-zalo:hover { background: #0b57d0; color: #fff; }
.ks-btn-zalo .ks-ico { width: 15px; height: 15px; }

.ks-mail {
	display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px;
	font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .92); text-decoration: none; overflow-wrap: anywhere;
	transition: background-color .2s, color .2s;
}
.ks-mail:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ks-mail .ks-ico { width: 14px; height: 14px; opacity: .85; }

.ks-web {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 12px; border: 1px dashed rgba(255, 255, 255, .38); border-radius: 10px;
	font-size: 13px; font-weight: 800; letter-spacing: .3px; color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s;
}
.ks-web:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- Bài viết mới ---------- */
.ks-recent-list { gap: 4px; }
.ks-recent-list a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background-color .2s, transform .2s; }
.ks-recent-list a:hover { background: #f1f5f9; transform: translateX(3px); }
.ks-recent-list span { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #0f172a; }
.ks-recent-list a:hover span { color: var(--ks-blue); }
.ks-recent-list time { display: block; margin-top: 3px; font-size: 12px; color: #64748b; }

@media (max-width: 1024px) {
	.ks-sidebar[data-ks-glide] .ks-sidebar-inner { position: static; transform: none !important; }
}
@media (max-width: 849px) { .ks-box { padding: 18px; } }
@media (prefers-reduced-motion: reduce) {
	.ks-box, .ks-contact::before, .ks-dot::after, .ks-btn-tel .ks-ico { animation: none; }
	.ks-person, .ks-btn, .ks-cat-item, .ks-cat-item .ks-ico, .ks-recent-list a, .ks-mail, .ks-web { transition: none; }
	.ks-person:hover, .ks-btn:hover { transform: none; }
}