/* ==========================================================================
   FUGA — khối của trang danh mục: banner danh mục, ô quảng cáo, hàng sản phẩm, slider bài viết
   ========================================================================== */
/* Banner danh mục */
.fg-chero { position: relative; height: 300px; overflow: hidden; color: #fff; background: #222; }
.fg-chero picture, .fg-chero__img { display: block; width: 100%; height: 100%; }
.fg-chero__img { object-fit: cover; }
.fg-chero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .09); }
.fg-chero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 32px; }
.fg-chero__title { font-size: 32px; line-height: 32px; font-weight: 700; letter-spacing: .64px; }
.fg-chero__links { display: flex; flex-wrap: wrap; gap: 16px; }
.fg-chero__link { font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: .5px; text-decoration: underline; text-underline-offset: 4px; border-bottom: 2px solid transparent; }
.fg-chero__link:hover { opacity: .8; }

/* Ô quảng cáo */
.fg-promo { display: flex; flex-direction: column; height: 100%; background: #fff; }
.fg-promo__media { position: relative; aspect-ratio: 1; overflow: hidden; }
.fg-promo__img { width: 100%; height: 100%; object-fit: cover; }
.fg-promo__content { display: flex; flex-direction: column; padding-top: 16px; }
.fg-promo__eyebrow { margin-bottom: 8px; font-size: 12px; line-height: 15.4px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; color: #666; }
.fg-promo__title { margin-bottom: 16px; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: normal; color: #000; }
.fg-promo__links { display: flex; gap: 16px; }
.fg-promo__link { font-size: 14px; line-height: 20px; font-weight: 600; color: #000; text-decoration: underline; }

/* Hàng sản phẩm */
.fg-prow { padding: 56px 0; background: #fff; color: #1c1c1c; }
.fg-prow__title { margin: 0 96px 40px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: normal; }
.fg-prow__list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 5); gap: 32px 4px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: none; }
.fg-prow__list::-webkit-scrollbar { display: none; }

/* Slider bài viết */
.fg-articles { padding: 56px 96px; background: #fff; color: #1c1c1c; overflow: hidden; }
.fg-articles__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.fg-articles__title { font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: normal; }
.fg-articles__controls { display: flex; align-items: center; gap: 8px; }
.fg-circle-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; color: #1c1c1c; transition: opacity .2s; }
.fg-circle-btn[disabled] { opacity: .45; cursor: default; }
.fg-articles__list { display: grid; grid-auto-flow: column; grid-auto-columns: 370px; gap: 8px; margin: 0 -96px; padding: 0 96px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.fg-articles__list::-webkit-scrollbar { display: none; }
.fg-articles__card { display: flex; flex-direction: column; gap: 8px; min-height: 185px; padding: 24px 22px 20px; border: 1px solid #e8e8e8; background: #fff; transition: border-color .2s; }
.fg-articles__card:hover { border-color: #1c1c1c; }
.fg-articles__cat { font-size: 14px; line-height: 18.9px; letter-spacing: .56px; }
.fg-articles__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20.3px; letter-spacing: normal; }
.fg-articles__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; line-height: 16.8px; letter-spacing: .56px; color: rgba(28, 28, 28, .82); }

@media (max-width: 999px) {
	.fg-prow__list { grid-auto-columns: calc((100% - 8px) / 3); }
}
@media (max-width: 768px) {
	.fg-chero { height: 240px; }
	.fg-chero__content { padding: 20px; gap: 16px; }
	.fg-chero__title { font-size: 24px; line-height: 28px; }
	.fg-prow { padding: 40px 0; }
	.fg-prow__title { margin: 0 20px 24px; }
	.fg-prow__list { grid-auto-columns: 46vw; }
	.fg-articles { padding: 40px 20px; }
	.fg-articles__list { margin: 0 -20px; padding: 0 20px; grid-auto-columns: 300px; }
}