/* Excel Product Grid — giao diện ngoài website */
.epg{
	--epg-cols:4;--epg-cols-t:3;--epg-cols-m:2;
	--epg-gap:16px;--epg-radius:10px;--epg-ratio:1/1;--epg-fit:cover;--epg-lines:2;--epg-dlines:3;
	--epg-shadow:0 2px 10px rgba(0,0,0,.06);
	--epg-bg:#f5f5f5;--epg-card:#fff;--epg-border:#ececec;--epg-text:#222;
	--epg-price:#ee4d2d;--epg-old:#9a9a9a;--epg-btn:#ee4d2d;--epg-btn-text:#fff;
	--epg-badge:#ffd424;--epg-badge-text:#ee4d2d;
	background:var(--epg-bg);
	padding:var(--epg-gap);
	border-radius:calc(var(--epg-radius) + 4px);
	box-sizing:border-box;
	font-family:inherit;
	line-height:1.4;
	margin:0 0 1.5em;
}
.epg *,.epg *::before,.epg *::after{box-sizing:border-box}

/* Lưới: ảnh và chữ tự co theo bề rộng mỗi cột */
.epg-grid{
	display:grid;
	grid-template-columns:repeat(var(--epg-cols),minmax(0,1fr));
	gap:var(--epg-gap);
}
@media (max-width:1024px){.epg-grid{grid-template-columns:repeat(var(--epg-cols-t),minmax(0,1fr))}}
@media (max-width:600px){
	.epg{padding:calc(var(--epg-gap) * .6)}
	.epg-grid{grid-template-columns:repeat(var(--epg-cols-m),minmax(0,1fr));gap:calc(var(--epg-gap) * .6)}
}

.epg-card{
	container-type:inline-size;
	display:flex;flex-direction:column;
	background:var(--epg-card);
	border:1px solid var(--epg-border);
	border-radius:var(--epg-radius);
	box-shadow:var(--epg-shadow);
	overflow:hidden;
	color:var(--epg-text);
	text-decoration:none !important;
	transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
a.epg-card:hover{transform:translateY(-2px);border-color:var(--epg-price);box-shadow:0 6px 18px rgba(0,0,0,.10)}
a.epg-card:focus-visible{outline:3px solid var(--epg-btn);outline-offset:2px}

.epg-media{position:relative;display:block;aspect-ratio:var(--epg-ratio);background:color-mix(in srgb,var(--epg-card) 92%,var(--epg-text));overflow:hidden}
.epg-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--epg-fit);display:block;margin:0;max-width:none;border-radius:0;box-shadow:none}
.epg-noimg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(0,0,0,.03) 10px 20px)}

.epg-off{
	position:absolute;top:8px;right:8px;
	background:var(--epg-badge);color:var(--epg-badge-text);
	font-weight:700;font-size:12px;line-height:1;
	padding:5px 7px;border-radius:calc(var(--epg-radius) * .6);
}

.epg-body{display:flex;flex-direction:column;gap:6px;padding:10px;flex:1}
.epg-name{
	font-size:14px;line-height:1.35;
	display:-webkit-box;-webkit-line-clamp:var(--epg-lines);-webkit-box-orient:vertical;overflow:hidden;
	min-height:calc(1.35em * var(--epg-lines));
	word-break:break-word;
}
.epg-prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:auto}
.epg-price{color:var(--epg-price);font-weight:700;font-size:16px}
.epg-old{color:var(--epg-old);font-size:12px}
.epg-btn{
	display:block;text-align:center;
	background:var(--epg-btn);color:var(--epg-btn-text);
	font-weight:600;font-size:13px;
	padding:8px 6px;border-radius:calc(var(--epg-radius) * .7);
	transition:filter .15s;
}
a.epg-card:hover .epg-btn{filter:brightness(1.08)}

/* Chữ, khoảng đệm co giãn theo bề rộng thẻ (trình duyệt hỗ trợ container query) */
@supports (container-type:inline-size){
	.epg-body{padding:clamp(6px,5cqi,14px);gap:clamp(4px,2.5cqi,8px)}
	.epg-name{font-size:clamp(12px,6.4cqi,16px)}
	.epg-price{font-size:clamp(13px,8.5cqi,22px)}
	.epg-old{font-size:clamp(11px,5.4cqi,14px)}
	.epg-btn{font-size:clamp(11px,5.6cqi,15px);padding:clamp(5px,3.6cqi,10px) 6px}
	.epg-off{font-size:clamp(10px,5cqi,14px);top:clamp(4px,3cqi,10px);right:clamp(4px,3cqi,10px)}
}

/* Phân trang */
.epg-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:calc(var(--epg-gap) + 4px)}
.epg-pg{
	min-width:36px;height:36px;padding:0 10px;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--epg-card);color:var(--epg-text);
	border:1px solid var(--epg-border);border-radius:calc(var(--epg-radius) * .7);
	text-decoration:none !important;font-size:14px;
}
a.epg-pg:hover{border-color:var(--epg-btn);color:var(--epg-btn)}
.epg-pg.is-current{background:var(--epg-btn);border-color:var(--epg-btn);color:var(--epg-btn-text);font-weight:600}
.epg-dots{border-color:transparent;background:transparent}

.epg-notice{padding:12px 14px;border-left:4px solid #d63638;background:#fff4f4;color:#8a1f1f;font-size:14px;margin:0 0 1em}
.epg-sample-note{margin:0 0 10px;font-size:12px;color:var(--epg-old)}

@media (prefers-reduced-motion:reduce){.epg-card,.epg-btn{transition:none}a.epg-card:hover{transform:none}}

/* Ảnh đang được lấy từ link */
.epg-noimg.is-loading{background:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.08) 37%,rgba(0,0,0,.04) 63%);background-size:400% 100%;animation:epg-sh 1.4s ease infinite}
@keyframes epg-sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.epg-noimg.is-loading{animation:none}}

/* Tên đầy đủ (Số dòng tên = 0) */
.epg-name-full .epg-name{display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0}

/* Đoạn mô tả */
.epg-desc{
	display:-webkit-box;-webkit-line-clamp:var(--epg-dlines);-webkit-box-orient:vertical;overflow:hidden;
	font-size:12.5px;line-height:1.45;
	color:color-mix(in srgb,var(--epg-text) 62%,var(--epg-card));
	word-break:break-word;
}
.epg-desc-full .epg-desc{display:block;-webkit-line-clamp:unset;overflow:visible}
.epg-no-desc .epg-desc{display:none}
.epg-desc.is-loading{height:2.9em;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.08) 37%,rgba(0,0,0,.04) 63%);background-size:400% 100%;animation:epg-sh 1.4s ease infinite}
@supports (container-type:inline-size){.epg-desc{font-size:clamp(11px,5.4cqi,14px)}}
@media (prefers-reduced-motion:reduce){.epg-desc.is-loading{animation:none}}