/*
 * FreshBrand Case Pages — section, media and showcase styles.
 * Shared by the front end (.case-body, set by the theme's project template)
 * and the block editor canvas (.editor-styles-wrapper), so a pattern looks
 * the same in both. Source design: _bmad-output/project-page-redesign/mockup.
 *
 * Tokens: --case-accent comes from the project's "Màu nhấn" (theme sets it on
 * the page); everything else is local to this sheet.
 */

.case-body,
.editor-styles-wrapper {
	--case-accent: #1d2bd6;
	--case-accent-ink: #fff;
	--case-tint: color-mix(in srgb, var(--case-accent) 7%, var(--bg-second-color, #fff));
	/* Follow the theme's tokens so the site's dark mode keeps working. */
	--case-ink: var(--qode-main-color, #0d0d0f);
	--case-ink-2: var(--text-light, #55555c);
	/* Small grey labels: 4.5:1 on white here, lighter on the dark skin below. */
	--case-ink-3: #6b6b73;
	--case-line: var(--bd-color, #e4e4e8);
	--case-paper-2: var(--bg-light, #f4f4f2);
	--case-accent-text: var(--case-accent);
	--case-gutter: 40px;
	--case-maxw: 1600px;
	--case-gap: 24px;
	--case-ease: cubic-bezier(.2, .7, .2, 1);
	counter-reset: case-chapter;
}

body.qodef-skin--dark .case-body {
	--case-ink-3: #9a9aa1;
}

@media (max-width: 760px) {
	.case-body,
	.editor-styles-wrapper {
		--case-gutter: 20px;
		--case-gap: 12px;
	}
}/* ---------- Page rhythm (front end) ---------- */
.case-body > * {
	box-sizing: border-box;
	max-width: var(--case-maxw);
	margin-inline: auto;
	padding-inline: var(--case-gutter);
}

.case-body > .alignfull {
	max-width: none;
}

/* Edge-to-edge media; text bands (reframe, closing) keep their own gutter. */
.case-body > .wp-block-image.alignfull,
.case-body > .case-mosaic,
.case-body > .case-chapnav,
.case-body > .case-showcase {
	padding-inline: 0;
}

/* The theme sets overflow-x:hidden on <body>, which makes it a scroll
   container and silently disables every position:sticky below it (chapter
   nav, collage). `clip` still trims sideways overflow without that. */
html body.fb-case-page {
	overflow-x: clip;
	overflow-y: visible;
}

/* Vietnamese diacritics sit above the cap line: never lead tighter than 1.1 on display type. */
.case-label,
.case-chapter-name {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.4;
	color: var(--case-ink-3);
	margin: 0;
}

p.case-text,
.case-chapter-main p {
	font-size: 18px;
	line-height: 1.65;
	color: var(--case-ink-2);
	max-width: 66ch;
	margin: 0 0 1em;
}

.case-body strong,
.editor-styles-wrapper .case-chapter-main strong {
	color: var(--case-ink);
	font-weight: 600;
}

/* ---------- Mở đầu ---------- */
.case-hero {
	padding-top: 56px;
}

.case-hero .case-title {
	text-transform: none; /* the theme upper-cases every h1 */
	font-size: clamp(72px, 14vw, 220px);
	font-weight: 600;
	letter-spacing: -.055em;
	line-height: .9;
	margin: 0 0 0 -.04em;
}

.case-hero .case-thesis {
	margin: 36px 0 0;
	max-width: 58%;
}

.case-hero .case-thesis p,
.case-hero .case-thesis .wp-block-post-excerpt__excerpt {
	font-size: clamp(24px, 2.6vw, 40px);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 0;
	color: var(--case-ink);
}

.case-hero .case-thesis .wp-block-post-excerpt__more-text {
	display: none;
}

.case-hero .case-hero-media {
	margin: 40px 0 var(--case-gap);
}

.case-hero .case-hero-media img,
.case-hero .case-hero-media video {
	display: block;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 760px) {
	.case-hero .case-thesis {
		max-width: none;
	}
}

/* ---------- Tổng quan ---------- */
.case-overview {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
	padding-block: 120px;
}

.case-overview > .case-label,
.case-overview > .wp-block-group__inner-container > .case-label {
	grid-column: 1 / span 3;
	padding-top: 10px;
}

.case-overview > .case-lead,
.case-overview > .wp-block-group__inner-container > .case-lead {
	grid-column: 4 / span 8;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1.28;
	letter-spacing: -.02em;
	font-weight: 500;
	margin: 0;
	color: var(--case-ink);
}

.case-overview > .case-text,
.case-overview > .wp-block-group__inner-container > .case-text {
	grid-column: 4 / span 6;
	margin-top: 36px;
}

/* ---------- Chương ---------- */
.case-chapter {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
	padding-block: 128px 112px;
	counter-increment: case-chapter;
	scroll-margin-top: 140px;
}

.case-chapter-side {
	grid-column: 1 / span 3;
}

.case-chapter-name {
	color: var(--case-ink);
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
}

.case-chapter-name::before {
	content: counter(case-chapter, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	color: var(--case-accent-text);
	font-variant-numeric: tabular-nums;
}

.case-chapter-q {
	font-size: 14px;
	line-height: 1.5;
	color: var(--case-ink-3);
	margin: 4px 0 0;
	max-width: 22ch;
}

.case-chapter-main {
	grid-column: 4 / span 8;
}

.case-chapter-main .case-chapter-title {
	font-size: clamp(30px, 3.4vw, 52px);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.1;
	max-width: 20ch;
	margin: 0 0 36px;
}

/* ---------- Danh sách gạch dần ---------- */
.case-strike {
	border-top: 1px solid var(--case-line);
	padding-block: 0 48px;
}

.case-strike-intro,
.case-strike-after {
	font-size: 15px;
	line-height: 1.6;
	color: var(--case-ink-2);
	padding: 20px 0;
	margin: 0;
	max-width: 70ch;
}

.case-strike-after {
	border-top: 1px solid var(--case-line);
}

ul.case-strike-list {
	list-style: none;
	margin: 0;
	padding: 0;
}ul.case-strike-list > li {
	font-size: clamp(28px, 3.6vw, 56px);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.15;
	padding: 6px 0;
	border-top: 1px solid var(--case-line);
	margin: 0;
}

.case-body ul.case-strike-list > li {
	background-image: linear-gradient(var(--case-accent), var(--case-accent));
	background-repeat: no-repeat;
	background-position: 0 56%;
	background-size: 0 3px;
	transition: background-size .9s var(--case-ease);
	display: table;
}

.case-body .case-strike.is-in ul.case-strike-list > li {
	background-size: 100% 3px;
}

.case-body .case-strike.is-in ul.case-strike-list > li:nth-child(2) { transition-delay: .12s; }
.case-body .case-strike.is-in ul.case-strike-list > li:nth-child(3) { transition-delay: .24s; }
.case-body .case-strike.is-in ul.case-strike-list > li:nth-child(4) { transition-delay: .36s; }
.case-body .case-strike.is-in ul.case-strike-list > li:nth-child(5) { transition-delay: .48s; }
.case-body .case-strike.is-in ul.case-strike-list > li:nth-child(n+6) { transition-delay: .6s; }

/* ---------- Câu hỏi đặt lại ---------- */
.case-reframe {
	background: var(--case-tint);
	padding: 96px var(--case-gutter);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
}

.case-reframe > *,
.case-reframe > .wp-block-group__inner-container > * {
	grid-column: 4 / span 8;
	margin: 0;
}

.case-reframe > .case-label,
.case-reframe > .wp-block-group__inner-container > .case-label {
	grid-column: 1 / span 3;
	grid-row: 1 / span 4;
}

.case-reframe-tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--case-accent-text);
	margin-bottom: 14px !important;
}

.case-reframe-not {
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--case-ink-3);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	margin-bottom: 48px !important;
}

.case-reframe-but {
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.15;
	letter-spacing: -.035em;
	font-weight: 600;
	color: var(--case-ink);
}

/* ---------- Phép cộng tên ---------- */
.case-equation {
	border-top: 1px solid var(--case-ink);
	padding-top: 28px;
	margin-block: 72px;
}

.case-equation > .case-label,
.case-equation > .wp-block-group__inner-container > .case-label {
	margin-bottom: 24px;
}

.case-eq {
	font-size: clamp(30px, 4.2vw, 64px);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.1;
	color: var(--case-ink-3);
	margin: 0;
}

.case-eq strong {
	color: var(--case-accent-text) !important;
	font-weight: 600;
}

.case-eq-cap {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--case-ink-2);
	max-width: 60ch;
}

/* ---------- Hệ giá trị / Hệ thống ---------- */
.case-values {
	margin-block: 64px;
}

ol.case-values-list,
ol.case-system-list {
	list-style: none;
	counter-reset: case-item;
	display: grid;
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid var(--case-line);
}

ol.case-values-list {
	grid-template-columns: repeat(4, 1fr);
}

ol.case-system-list {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	border-top-color: var(--case-ink);
	margin-block: 72px;
}

/* Placed straight in the page (not inside a group), the list's own
   `padding: 0` would beat the page gutter: inset it by margin instead, so
   its rule spans the text column like the other bands. */
.case-body > ol.case-system-list {
	padding-inline: 0;
	width: calc(100% - 2 * var(--case-gutter));
	max-width: calc(var(--case-maxw) - 2 * var(--case-gutter));
	margin-inline: auto;
}ol.case-values-list > li,
ol.case-system-list > li {
	counter-increment: case-item;
	padding: 20px 20px 0 0;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
}ol.case-system-list > li {
	font-size: 15px;
	letter-spacing: -.01em;
	padding: 16px 12px 0 0;
}ol.case-values-list > li::before,
ol.case-system-list > li::before {
	content: counter(case-item, decimal-leading-zero);
	display: block;
	font-size: 12px;
	color: var(--case-accent-text);
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}ol.case-system-list > li::before {
	margin-bottom: 28px;
	font-size: 11px;
}

@media (max-width: 760px) {
	ol.case-values-list,
	ol.case-system-list {
		grid-template-columns: 1fr 1fr;
		row-gap: 24px;
	}
}

/* ---------- Cặp "X nhưng Y" ---------- */
.case-tensions {
	margin-block: 64px;
}

.case-tensions > .case-label,
.case-tensions > .wp-block-group__inner-container > .case-label {
	margin-bottom: 16px;
}

.case-tension {
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.2;
	margin: 0;
}

.case-tension em {
	font-style: normal;
	font-weight: 400;
	color: var(--case-ink-3);
}

/* ---------- Số liệu tác động ---------- */
.case-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	border-top: 1px solid var(--case-ink);
	margin-block: 72px;
}

.case-fact {
	padding: 24px 24px 0 0;
}

.case-fact-big {
	font-size: clamp(48px, 6vw, 96px);
	font-weight: 600;
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--case-ink);
	margin: 0;
}

.case-fact-big sup {
	font-size: .4em;
	vertical-align: top;
	margin-left: 4px;
	color: var(--case-accent-text);
}

.case-fact-text {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--case-ink-2);
	max-width: 30ch;
}

/* ---------- Câu kết nền màu ---------- */
.case-closing {
	background: var(--case-accent);
	color: var(--case-accent-ink);
	padding: 140px var(--case-gutter);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
}

.case-closing > *,
.case-closing > .wp-block-group__inner-container > * {
	grid-column: 4 / span 8;
	margin: 0;
}

.case-closing > .case-label,
.case-closing > .wp-block-group__inner-container > .case-label {
	grid-column: 1 / span 3;
	color: color-mix(in srgb, var(--case-accent-ink) 86%, transparent);
}

.case-closing-quote {
	font-size: clamp(32px, 4.2vw, 68px);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.1;
	color: inherit;
}

.case-closing-quote .case-muted {
	opacity: .55;
}

.case-closing-cite {
	margin-top: 40px !important;
	font-size: 14px;
	opacity: .75;
}

@media (max-width: 760px) {
	.case-overview,
	.case-chapter,
	.case-reframe,
	.case-closing {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.case-overview > *,
.case-overview > .wp-block-group__inner-container > *,
.case-chapter > *,
.case-chapter > .wp-block-group__inner-container > *,
.case-reframe > *,
.case-reframe > .wp-block-group__inner-container > *,
.case-closing > *,
.case-closing > .wp-block-group__inner-container > * {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	.case-chapter {
		padding-block: 80px 64px;
	}

	.case-overview {
		padding-block: 72px;
	}
}

/* ---------- Ảnh ---------- */
.wp-block-image.is-style-case-bleed,
.wp-block-image.is-style-case-narrow,
.wp-block-gallery[class*="is-style-case-"],
.wp-block-video.is-style-case-motion {
	margin-block: 0 var(--case-gap);
}

.wp-block-image.is-style-case-bleed img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}/* A bleed image next to another media block falls back to the page margin
   (class set at render time — plan §4). */
.case-body > .wp-block-image.is-style-case-bleed.is-contained {
	max-width: var(--case-maxw);
	padding-inline: var(--case-gutter);
}

.wp-block-image.is-style-case-narrow {
	max-width: calc(66.66% + 16px);
	margin-inline: auto;
}

.wp-block-image figcaption,
.wp-block-gallery[class*="is-style-case-"] figcaption {
	font-size: 13px;
	line-height: 1.5;
	color: var(--case-ink-3);
	margin-top: 12px;
	text-align: left;
}

.wp-block-gallery.has-nested-images.is-style-case-two,
.wp-block-gallery.has-nested-images.is-style-case-three {
	display: grid;
	gap: var(--case-gap);
}

.wp-block-gallery.has-nested-images.is-style-case-two {
	grid-template-columns: 1fr 1fr;
}

.wp-block-gallery.has-nested-images.is-style-case-three {
	grid-template-columns: repeat(3, 1fr);
	background: var(--case-paper-2);
	padding: 72px;
}

.wp-block-gallery.has-nested-images.is-style-case-two figure.wp-block-image:not(#fbcase),
.wp-block-gallery.has-nested-images.is-style-case-three figure.wp-block-image:not(#fbcase) {
	width: auto;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-style-case-two figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.is-style-case-three figure.wp-block-image img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}

@media (max-width: 760px) {
	.wp-block-gallery.has-nested-images.is-style-case-two {
		grid-template-columns: 1fr;
	}

	.wp-block-gallery.has-nested-images.is-style-case-three {
		padding: 20px 16px;
		gap: 8px;
	}

	.wp-block-image.is-style-case-narrow {
		max-width: none;
	}
}

/* ---------- Video motion ---------- */
.wp-block-video.is-style-case-motion video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #0d0d0f;
}

/* ---------- Trình diễn: Bức tường ---------- */
.case-showcase--wall {
	background: #0d0d0f;
	color: #fff;
	padding: 64px 0 72px;
	margin-block: 72px;
}

.case-showcase--wall > .case-label,
.case-showcase--wall > .wp-block-group__inner-container > .case-label {
	color: rgba(255, 255, 255, .55);
	padding-inline: var(--case-gutter);
	max-width: var(--case-maxw);
	margin-inline: auto;
}

.case-showcase-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	padding: 8px var(--case-gutter) 32px;
	max-width: var(--case-maxw);
	margin-inline: auto;
	box-sizing: border-box;
}

.case-showcase-count {
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0;
}

.case-showcase-ctl {
	display: flex;
	gap: 8px;
}

.case-showcase-ctl button,
.case-viewer-btn {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
}

.case-showcase-ctl button:hover {
	border-color: #fff;
}

.case-showcase-ctl [data-case-all] {
	background: #fff;
	color: #0d0d0f;
	border-color: #fff;
}

.case-showcase-ctl button:focus-visible,
.case-viewer-btn:focus-visible,
.case-tile:focus-visible {
	outline: 2px solid var(--case-accent);
	outline-offset: 3px;
}

/* A gallery the script rebuilt (wall, collage) is kept in the page but
   hidden; WordPress's own gallery `display` would otherwise win over the
   `hidden` attribute and show every image a second time. */
.case-body .wp-block-gallery[hidden] {
	display: none !important;
}

/* Collage before the script builds it (and without JS, or with fewer than
   five images): a plain cropped grid instead of full-size images stacked.
   Page only (`.case-body`): the editor keeps its own still preview. */
.case-body .wp-block-gallery.has-nested-images.is-style-case-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--case-gap);
}

.case-body .wp-block-gallery.has-nested-images.is-style-case-mosaic figure.wp-block-image:not(#fbcase) {
	width: auto;
	margin: 0;
}

.case-body .wp-block-gallery.has-nested-images.is-style-case-mosaic figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 760px) {
	.case-body .wp-block-gallery.has-nested-images.is-style-case-mosaic {
		grid-template-columns: 1fr 1fr;
	}
}

/* Before the script builds the rows (and without JS): one horizontal strip. */
.wp-block-gallery.has-nested-images.is-style-case-wall {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	padding-inline: var(--case-gutter);
	scrollbar-width: none;
}

.wp-block-gallery.has-nested-images.is-style-case-wall figure.wp-block-image:not(#fbcase) {
	flex: none;
	width: auto;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-style-case-wall figure.wp-block-image img {
	height: clamp(140px, 26vh, 300px);
	width: auto;
}

.case-wall-rows {
	display: grid;
	gap: 12px;
	--case-row-h: clamp(120px, calc((100svh - 400px) / 3), 280px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.case-wall-row {
	overflow: hidden;
	height: var(--case-row-h);
}

.case-wall-track {
	display: flex;
	gap: 12px;
	width: max-content;
	animation: case-wall-l var(--case-dur, 60s) linear infinite;
}

.case-wall-row:nth-child(even) .case-wall-track {
	animation-name: case-wall-r;
}

@keyframes case-wall-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes case-wall-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.case-wall-row:hover .case-wall-track,
.case-wall-row:focus-within .case-wall-track,
.case-showcase.is-paused .case-wall-track,
.case-showcase.is-off .case-wall-track {
	animation-play-state: paused;
}

.case-tile {
	flex: none;
	display: block;
	padding: 0;
	border: 0;
	background: #1a1a1d;
	cursor: zoom-in;
	overflow: hidden;
	height: var(--case-row-h);
}

.case-tile img {
	height: 100%;
	width: auto;
	display: block;
	transition: transform .8s var(--case-ease), opacity .4s;
}

.case-tile:hover img {
	transform: scale(1.04);
}

.case-wall-rows:hover .case-tile img {
	opacity: .55;
}

.case-wall-rows:hover .case-tile:hover img {
	opacity: 1;
}

@media (max-width: 760px) {
	.case-showcase-head {
		flex-direction: column;
		align-items: start;
	}

	.case-wall-rows {
		--case-row-h: 130px;
		gap: 8px;
	}

	.case-wall-track {
		gap: 8px;
	}
}

/* ---------- Trình diễn: Bố cục chuyển động ---------- */
.case-mosaic {
	--case-mg: 24px;
	position: relative;
	height: 260vh;
	margin-block: 48px;
}

.case-mosaic-stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

.case-mosaic-box {
	position: absolute;
	left: calc(var(--case-gutter) - var(--case-mg) / 2);
	right: calc(var(--case-gutter) - var(--case-mg) / 2);
	top: calc(var(--case-mtop, 140px) - var(--case-mg) / 2);
	bottom: calc(96px - var(--case-mg) / 2);
	contain: layout;
}

.case-mosaic .case-tile {
	position: absolute;
	left: calc(var(--x) * 1% + var(--case-mg) / 2);
	top: calc(var(--y) * 1% + var(--case-mg) / 2);
	width: calc(var(--w) * 1% - var(--case-mg));
	height: calc(var(--h) * 1% - var(--case-mg));
	background: var(--case-paper-2);
}

.case-mosaic .case-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-mosaic.is-ready .case-tile:not(:first-child) {
	opacity: 0;
}

.case-mosaic-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	display: flex;
	justify-content: flex-end;
	padding-inline: var(--case-gutter);
	font-size: 14px;
	color: var(--case-ink-2);
	opacity: 0;
	transition: opacity .5s;
}

.case-mosaic.is-done .case-mosaic-cap {
	opacity: 1;
}

/* Mobile: no pin, a rhythmic two-column grid that opens image by image. */
@media (max-width: 760px) {
	.case-mosaic {
		height: auto;
		margin-block: 40px;
	}

	.case-mosaic-stage {
		position: static;
		height: auto;
		overflow: visible;
	}

	.case-mosaic-box {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding-inline: var(--case-gutter);
	}

	.case-mosaic .case-tile {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		aspect-ratio: 1;
		clip-path: inset(100% 0 0 0);
		transition: clip-path 1s var(--case-ease);
	}

	.case-mosaic .case-tile img {
		position: absolute;
		inset: 0;
		transform: scale(1.2);
		transition: transform 1.4s var(--case-ease);
	}

	.case-mosaic .case-tile:first-child,
	.case-mosaic .case-tile:nth-child(7) {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}

	.case-mosaic .case-tile:nth-child(2) {
		aspect-ratio: auto;
		grid-row: span 2;
	}

	.case-mosaic .case-tile.is-in {
		clip-path: inset(0);
	}

	.case-mosaic .case-tile.is-in img {
		transform: none;
	}

	.case-mosaic.is-ready .case-tile:not(:first-child) {
		opacity: 1;
	}

	.case-mosaic-cap {
		position: static;
		opacity: 1;
		margin-top: 16px;
	}
}

/* ---------- Trình xem ảnh ---------- */
.case-viewer {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	background: #0d0d0f;
	color: #fff;
}

.case-viewer::backdrop {
	background: #0d0d0f;
}

.case-viewer figure {
	position: absolute;
	inset: 56px 88px 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
}

.case-viewer img {
	max-width: 100%;
	max-height: calc(100% - 40px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.case-viewer figcaption {
	display: flex;
	gap: 24px;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}

.case-viewer-num {
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .45);
}

.case-viewer-btn {
	position: absolute;
	font-size: 22px;
	width: 56px;
	height: 56px;
	padding: 0;
}

.case-viewer-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.case-viewer-next { right: 20px; top: 50%; transform: translateY(-50%); }
.case-viewer-close { right: 20px; top: 20px; font-size: 16px; width: 44px; height: 44px; }

@media (max-width: 760px) {
	.case-viewer figure { inset: 64px 12px 88px; }
	.case-viewer-prev,
	.case-viewer-next { top: auto; bottom: 16px; transform: none; }
	.case-viewer-prev { left: calc(50% - 64px); }
	.case-viewer-next { right: calc(50% - 64px); }
}/* ---------- Reveal ---------- */
.case-body > .case-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--case-ease), transform .9s var(--case-ease);
}

.case-body > .case-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.case-body > .case-reveal { opacity: 1; transform: none; transition: none; }
.case-body ul.case-strike-list > li { background-size: 100% 3px; transition: none; }
	.case-wall-track { animation: none; }
	.case-wall-row { overflow-x: auto; scrollbar-width: none; }
	.case-wall-rows { -webkit-mask-image: none; mask-image: none; padding-inline: var(--case-gutter); }
	.case-showcase-ctl [data-case-pause] { display: none; }
	.case-mosaic { height: auto; }
	.case-mosaic-stage { position: relative; height: min(100svh, 820px); }
	.case-mosaic.is-ready .case-tile:not(:first-child) { opacity: 1; }
	.case-mosaic-cap { opacity: 1; }
}

/* ---------- Thông tin dự án (fb-case/info) ---------- */
.case-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	column-gap: 24px;
	row-gap: 20px;
	margin: 56px 0 0;
	padding: 22px 0;
	border-top: 1px solid var(--case-ink);
	border-bottom: 1px solid var(--case-line);
}

.case-info-item {
	margin: 0;
}

.case-info dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--case-ink-3);
	margin: 0 0 8px;
}

.case-info dd {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	color: var(--case-ink);
}

/* Links to the project lists: underlined, so they read as links among
   plain values. */
.case-info dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--case-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .3s, text-decoration-color .3s;
}

.case-info dd a:hover,
.case-info dd a:focus-visible {
	color: var(--case-accent-text);
	text-decoration-color: currentColor;
}

.case-info dd a:focus-visible {
	outline: 2px solid var(--case-accent-text);
	outline-offset: 2px;
}

/* ---------- Credits dự án (fb-case/credits) ---------- */
.case-credits {
	display: grid;
	/* Equal columns: the first starts on the left text edge, the last ends on
	   the right one, the middle one sits centred. */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: var(--case-gap);
	row-gap: 40px;
	border-top: 1px solid var(--case-ink);
	padding-top: 28px;
	margin-block: 120px;
}

/* The rule spans the text column, not the screen. */
.case-body > .case-credits {
	padding-inline: 0;
	width: calc(100% - 2 * var(--case-gutter));
	max-width: calc(var(--case-maxw) - 2 * var(--case-gutter));
	margin-inline: auto;
}

@media (max-width: 760px) {
	.case-credits {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}
}

.case-credits h3 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--case-ink-3);
	margin: 0 0 16px;
}

.case-credits ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.case-credits li {
	font-size: 15px;
	line-height: 1.5;
	padding: 6px 0;
	margin: 0;
	border-bottom: 1px solid var(--case-line);
	color: var(--case-ink);
}

/* Services lead to their service pages: the whole row is the link. */
.case-credits li > a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	color: inherit;
	text-decoration: none;
}

.case-credits li > a::after {
	content: "→";
	color: var(--case-ink-3);
	transition: transform .3s var(--case-ease), color .3s;
}

.case-credits li > a:hover,
.case-credits li > a:focus-visible {
	color: var(--case-accent-text);
}

.case-credits li > a:focus-visible {
	outline: 2px solid var(--case-accent-text);
	outline-offset: 3px;
}

.case-credits li > a:hover::after,
.case-credits li > a:focus-visible::after {
	color: var(--case-accent-text);
	transform: translateX(4px);
}

/* Every row is one line of the same type, so rows of the three columns
   share their baselines. Project facts: label left, value right. */
.case-credits .case-facts-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.case-credits li small {
	font-size: inherit;
	color: var(--case-ink-3);
	flex: none;
}

.case-credits .case-facts-list li > span {
	text-align: right;
}

.case-credits .case-people b {
	font-weight: 600;
}

.case-credits .case-people span {
	color: var(--case-ink-2);
}

.case-block-empty {
	font-size: 13px;
	color: var(--case-ink-3);
	border: 1px dashed var(--case-line);
	padding: 12px 16px;
	margin: 0;
}

/* =====================================================================
   Page frame (block-built project page, templates/single-case.php)
   ===================================================================== */
.case-body {
	display: block;
	padding-bottom: 0;
	color: var(--case-ink);
	overflow-x: clip;
}

/* ---------- Header lockup "FRESHBR AND <client>" ---------- */
body.fb-case-page .qodef-header-logo-link,
body.fb-case-page .qodef-mobile-header-logo-link {
	width: auto;
	max-width: none;
	aspect-ratio: auto;
	display: inline-flex;
	/* Logo spacing: symbol-to-letters gap is ~15% of the symbol. */
	gap: 6px;
}

/* The theme lifts the old Lottie text 6px (`.brand-text { top: -6px }`);
   the lockup's cap band sits on the symbol's centre line instead, as in the
   logo file. */
body.fb-case-page .brand-text.case-brand-text {
	top: 0;
}

.case-brand-text {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
}

.case-lock {
	display: flex;
	align-items: center;
	column-gap: .28em;
	/* Logo proportions: cap height = 45% of the 35px symbol (Inter caps are
	   .727em), so 21.6px; the wordmark halves below are sized to that cap. */
	font-size: 21.6px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	line-height: 1.15;
	white-space: nowrap;
	min-width: 0;
}

/* The logo's own outlines (see FBCase_Page::wordmark): viewBox is 7.3 units
   tall for a 6.38-unit cap, so .832em puts its cap on the text's cap, and
   the .42 units under the baseline become the -.048em shift. */
/* Sizes set outright, with an ID in the selector: the old theme sizes every
   SVG in the logo link (`#qodef-page-header .qodef-header-logo-link
   .qodef-source--svg-path svg { width: 50px; height: auto }`). Widths come
   from the viewBoxes (37.57 and 17.09 by 7.3). */
:is(#qodef-page-header, #qodef-page-mobile-header, #fb-case-intro) .case-lock .case-iw svg.case-wordmark {
	display: inline-block;
	height: .832em;
	vertical-align: -.048em;
	fill: currentColor;
	overflow: visible;
	max-width: none;
	position: static;
}

:is(#qodef-page-header, #qodef-page-mobile-header, #fb-case-intro) .case-lock .case-iw svg.case-wordmark--freshbr { width: 4.282em; }
:is(#qodef-page-header, #qodef-page-mobile-header, #fb-case-intro) .case-lock .case-iw svg.case-wordmark--and { width: 1.948em; }

.case-iw {
	display: block;
	flex: none;
	overflow: hidden;
	padding: .14em 0 .06em;
	margin: -.14em 0 -.06em;
}

.case-iw > span {
	display: block;
}

/* As the official logo files: on white the Blue version ("FRESHBR AND" in
   logo blue; the client name black, so FreshBrand and the client read as
   two names), on black the White version (all letters white; the symbol
   keeps its blue gradient). */
.case-brand-text .case-iw-fb { color: var(--primary, #0000ff); }
.case-brand-text .case-iw-brand { color: var(--qode-main-color, #0d0d0f); flex: 0 1 auto; min-width: 0; }
.case-brand-text .case-iw-brand > span { overflow: hidden; text-overflow: ellipsis; }

/* Black backgrounds: the dark skin, and the sticky and mobile headers
   (black in both skins). */
body.qodef-skin--dark .case-brand-text .case-iw,
#qodef-page-header .qodef-header-sticky .case-brand-text .case-iw,
#qodef-page-mobile-header .case-brand-text .case-iw {
	color: #fff;
}

/* The symbol keeps the logo's 35px; the client name gives way first. */
body.fb-case-page .brand-symbol {
	flex: none;
}

.case-brand-text,
.case-brand-text .case-lock {
	min-width: 0;
}

/* The theme caps the mobile logo at --logo-width (190px) with an ID rule;
   the lockup may use the bar up to the menu button instead. */
body.fb-case-page #qodef-page-mobile-header .qodef-mobile-header-logo-link {
	max-width: calc(100vw - 2 * var(--unit-space-res, 14px) - 56px);
	min-width: 0;
}

html.case-intro-on .case-brand-text .case-lock {
	opacity: 0;
}

/* Later views of a project (intro already seen in this tab): the lockup stays
   put and only splits. It starts as the joined wordmark (AND pushed back
   against FRESHBR, client name below its mask), then AND steps out to its
   gap and the name rises. Transforms only: no layout shift. The class is set
   in <head> before first paint, so the joined state is what paints first. */
@keyframes case-split-and {
	from { transform: translateX(-.28em); }
	to { transform: none; }
}

@keyframes case-split-brand {
	from { transform: translateY(110%); }
	to { transform: none; }
}

html.case-split-on .case-brand-text .case-iw-fb + .case-iw-fb {
	animation: case-split-and .7s cubic-bezier(.65, 0, .35, 1) .45s both;
}

html.case-split-on .case-brand-text .case-iw-brand > span {
	animation: case-split-brand .75s cubic-bezier(.2, .7, .2, 1) .85s both;
}

@media (prefers-reduced-motion: reduce) {
	html.case-split-on .case-brand-text .case-iw-fb + .case-iw-fb,
	html.case-split-on .case-brand-text .case-iw-brand > span {
		animation: none;
	}
}

/* ---------- Intro ---------- */
.fb-case-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	display: none;
}

html.case-intro-on .fb-case-intro {
	display: block;
}

.fb-case-intro-bg {
	position: absolute;
	inset: 0;
	background: var(--case-accent, #0000ff);
}

.fb-case-intro .case-lock {
	position: absolute;
	left: var(--case-gutter, 40px);
	right: var(--case-gutter, 40px);
	top: 50%;
	transform: translateY(-50%);
	flex-wrap: wrap;
	row-gap: .1em;
	font-size: clamp(44px, 11vw, 190px);
	color: var(--case-accent-ink, #fff);
}

.fb-case-intro .case-iw {
	color: var(--case-accent-ink, #fff);
	transform-origin: 0 0;
}

html.case-intro-on .fb-case-intro .case-iw > span {
	transform: translateY(115%);
}

/* ---------- Chapter navigation ---------- */
.case-chapnav {
	position: sticky;
	top: var(--case-stick-top, 0px);
	z-index: 20;
	background: color-mix(in srgb, var(--bg-second-color, #fff) 94%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--case-line);
	border-bottom: 1px solid var(--case-line);
	transition: opacity .3s, transform .3s, visibility 0s;
}

/* Past the story (credits reached): out of the way, and out of the tab order. */
.case-chapnav.is-done {
	opacity: 0;
	transform: translateY(-100%);
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s, transform .3s, visibility 0s .3s;
}

.case-chapnav-inner {
	max-width: var(--case-maxw);
	margin: 0 auto;
	padding: 0 var(--case-gutter);
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
}

.case-chapnav a {
	flex: none;
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 16px 0;
	margin-right: 36px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--case-ink-3);
	text-decoration: none;
	position: relative;
	transition: color .3s;
}

.case-chapnav a span {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.case-chapnav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--case-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--case-ease);
}

.case-chapnav a.is-current {
	color: var(--case-ink);
}

.case-chapnav a.is-current::after {
	transform: scaleX(1);
}

/* ---------- Hero video (fb-porfolio own-page video, driven by case.js) ---------- */
.case-hero .case-hero-media {
	position: relative;
}

.case-hero .case-hero-media .fbpw-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.case-hero .case-hero-media .fbpw-video.is-playing {
	opacity: 1;
}

/* ---------- Next project ---------- */
.case-next {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0d0d0f;
	color: #fff;
	text-decoration: none;
	margin-top: 0;
}

/* A card inside the page margins, not edge to edge. */
.case-body > .case-next {
	padding-inline: 0;
	width: calc(100% - 2 * var(--case-gutter));
	max-width: calc(var(--case-maxw) - 2 * var(--case-gutter));
	margin: 0 auto 120px;
}

.case-next:hover,
.case-next:focus {
	color: #fff;
}

.case-next::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.case-next-media {
	display: block;
	position: relative;
	aspect-ratio: 2560 / 1580;
}

.case-next-media img,
.case-next-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .72;
	transition: transform 1.2s var(--case-ease), opacity .6s;
}

.case-next:hover .case-next-media img,
.case-next:hover .case-next-media video {
	transform: scale(1.03);
}

.case-next-txt {
	position: absolute;
	z-index: 1;
	left: var(--case-gutter);
	right: var(--case-gutter);
	bottom: 40px;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
}

.case-next-lbl {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .8;
}

.case-next-ttl {
	display: block;
	font-size: clamp(44px, 8vw, 128px);
	font-weight: 600;
	letter-spacing: -.05em;
	line-height: 1;
	margin-top: 10px;
}

.case-next-arrow {
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 300;
	transition: transform .5s var(--case-ease);
}

.case-next:hover .case-next-arrow {
	transform: translateX(10px);
}

@media (max-width: 760px) {
	.case-body > .case-next { margin-bottom: 64px; }
	.case-next-txt { bottom: 20px; }
	.case-next-ttl { font-size: 36px; }
}

/* Logged-in: the admin bar sits above everything. */
body.admin-bar .case-chapnav { top: calc(var(--case-stick-top, 0px) + 32px); }
@media (max-width: 782px) { body.admin-bar .case-chapnav { top: calc(var(--case-stick-top, 0px) + 46px); } }