/* ==========================================================================
   FUGA — Thẻ ảnh có tên (lưới 3 cột / slider)
   ========================================================================== */
.fg-ocards { position: relative; }
.fg-ocards__card { position: relative; flex: none; }
.fg-ocards__media { position: relative; display: block; overflow: hidden; }
.fg-ocards__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .54) 100%); pointer-events: none; }
.fg-ocards__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s var(--fg-ease); }
.fg-ocards__card:hover .fg-ocards__img { transform: scale(1.03); }
.fg-ocards__info { position: absolute; z-index: 2; display: flex; flex-direction: column; color: #fff; pointer-events: none; }
.fg-ocards__name { letter-spacing: normal; text-transform: none; }
.fg-ocards__desc { display: none; letter-spacing: normal; }
.fg-ocards__arrow { position: absolute; z-index: 2; line-height: 0; color: rgba(255, 255, 255, .38); }
.fg-ocards__arrow .fg-icon { width: 21px; height: 12px; }

/* Lưới 3 cột */
.fg-ocards--grid { padding-block: calc(93.75 * var(--u)); }
.fg-ocards--grid .fg-ocards__title { margin-bottom: calc(40.5 * var(--u)); }
.fg-ocards--grid .fg-ocards__track { display: flex; gap: calc(13.5 * var(--u)); }
.fg-ocards--grid .fg-ocards__card { flex: 1 1 0; min-width: 0; }
.fg-ocards--grid .fg-ocards__info { left: calc(22.5 * var(--u)); right: calc(54 * var(--u)); bottom: calc(30 * var(--u)); gap: calc(4.5 * var(--u)); }
.fg-ocards--grid .fg-ocards__name { font-size: 22px; line-height: 25px; font-weight: 600; }
.fg-ocards--grid .fg-ocards__arrow { right: calc(22.5 * var(--u)); bottom: calc(31.5 * var(--u)); }
.fg-ocards--grid .fg-ocards__arrow .fg-icon { width: calc(21 * var(--u)); height: calc(12.25 * var(--u)); }
.fg-ocards--grid .fg-scrollbar { display: none; }

/* Slider */
.fg-ocards--slider { padding-block: calc(102 * var(--u)) calc(38.25 * var(--u)); background: #f6f7f9; }
.fg-ocards--slider .fg-ocards__title { margin-bottom: calc(33 * var(--u)); }
.fg-ocards--slider .fg-ocards__wrap { position: relative; padding-bottom: calc(69 * var(--u)); }
.fg-ocards--slider .fg-ocards__track {
	display: flex; gap: calc(9.75 * var(--u));
	margin-inline: calc(-1 * var(--fg-gutter)); padding-left: var(--fg-gutter);
	overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.fg-ocards--slider .fg-ocards__track::-webkit-scrollbar { display: none; }
.fg-ocards--slider .fg-ocards__card { width: calc(239.625 * var(--u)); }
.fg-ocards--slider .fg-ocards__card:last-child { margin-right: var(--fg-gutter); }
.fg-ocards--slider .fg-ocards__media { border-radius: 6px; }
.fg-ocards--slider .fg-ocards__media::after { height: 27.1%; }
.fg-ocards--slider .fg-ocards__info { left: calc(12 * var(--u)); right: calc(36 * var(--u)); bottom: calc(15.75 * var(--u)); }
.fg-ocards--slider .fg-ocards__name { font-size: calc(18 * var(--u)); line-height: calc(18.75 * var(--u)); font-weight: 700; }
.fg-ocards--slider .fg-ocards__arrow { right: calc(7.5 * var(--u)); bottom: calc(18.75 * var(--u)); }
.fg-ocards--slider .fg-ocards__arrow .fg-icon { width: calc(18.75 * var(--u)); height: calc(10.94 * var(--u)); }
.fg-ocards__nav { position: absolute; left: calc(13px - var(--fg-gutter)); right: calc(12px - var(--fg-gutter)); top: calc(132 * var(--u)); z-index: 3; display: flex; justify-content: space-between; pointer-events: none; }
.fg-ocards__arrowbtn { width: 41px; height: 41px; line-height: 0; opacity: .38; pointer-events: auto; transition: opacity .2s; }
.fg-ocards__arrowbtn:hover { opacity: .7; }
.fg-ocards__arrowbtn[disabled] { opacity: .3; cursor: default; }
.fg-ocards__arrowbtn .fg-icon { width: 41px; height: 41px; }
.fg-ocards--slider .fg-scrollbar { position: absolute; left: -8px; right: -8px; bottom: 6px; }
.fg-ocards--slider .fg-scrollbar__bar { width: 100%; }

/* Điện thoại: cả hai bố cục thành hàng kéo ngang */
@media (max-width: 768px) {
	.fg-ocards--grid { padding-block: 80px; }
	.fg-ocards--slider { padding-block: 0 80px; }
	.fg-ocards .fg-ocards__title { margin-bottom: 20px; text-align: left; }
	.fg-ocards .fg-ocards__wrap { position: relative; padding-bottom: 0; }
	.fg-ocards .fg-ocards__track {
		display: flex; gap: 18px;
		margin-inline: -17px; padding: 0 17px 10px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 17px; scrollbar-width: none;
	}
	.fg-ocards .fg-ocards__track::-webkit-scrollbar { display: none; }
	.fg-ocards .fg-ocards__card, .fg-ocards--grid .fg-ocards__card { flex: none; width: 295px; scroll-snap-align: start; }
	.fg-ocards--slider .fg-ocards__card:last-child { margin-right: 0; }
	.fg-ocards .fg-ocards__info { left: 12px; right: 30px; bottom: 13px; gap: 4px; }
	.fg-ocards .fg-ocards__name { font-size: 14px; line-height: 16px; font-weight: 600; }
	.fg-ocards .fg-ocards__desc { display: block; font-size: 12px; line-height: 17px; }
	.fg-ocards .fg-ocards__arrow { right: 13px; bottom: 15px; }
	.fg-ocards .fg-ocards__arrow .fg-icon { width: 21px; height: 12px; }
	.fg-ocards--slider .fg-ocards__media { border-radius: 0; }
	.fg-ocards__nav { display: none; }
	.fg-ocards .fg-scrollbar { position: static; display: flex; margin-top: 25px; height: 14px; }
	.fg-ocards .fg-scrollbar__bar { width: 220px; height: 2px; }
	.fg-ocards .fg-scrollbar__bar i { background: #9d9d9d; }
	.fg-ocards .fg-scrollbar__hint { display: block; }
}