/* Subpages from Figma C8keU9wVvxuTmjr1lHb3E5 ("The Harbor (Copy)"), 1680px master:
   Dịch vụ tiện ích 74:367 / 21:40, Thư viện 30:2385, Tin tức & Sự kiện 30:1241 / 68:418.
   Desktop geometry scales with --pu (1px of the master); type keeps a readable floor. */

/* Inter: the content face of the subpage designs (Figma uses Inter for filters, cards, lists and article
   text; header, footer and display type keep the homepage faces). Self-hosted Google Fonts subsets. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-vietnamese.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	unicode-range:
		U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
		U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
		U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Content sits in a centred frame: the 1680 master scales with the viewport up to the point where its
	   content (64 … 1616, i.e. 1552 px) is 1400 px wide, then stops growing (client, 13-10-2026), so 2K/4K
	   screens get margins instead of oversized type. Backgrounds, rules, header and footer still span the
	   screen. --pu is 1 master pixel; own variable because style.css pins --u to 1px under 768px. */
	--frame: min(100vw, 1515.46px);
	--pu: calc(var(--frame) / 1680);
	--bleed: calc((100vw - var(--frame)) / 2);
	--pg-navy: #01326d;
	--pg-ink: #081336;
	--pg-sky: #4494cf;
	--pg-line: #d4d4d4;
	--pg-card-line: #c3d4e9;
	--pg-gold: #eab077;
	--pg-gutter: calc(64 * var(--pu));
	--pg-text: "Inter", var(--fg-body);
}

html:has(> body.inner-page) {
	background: #081336;
}
.inner-page {
	background: #fff;
	color: var(--pg-ink);
	font-family: var(--fg-body);
}
.inner-page main {
	position: relative;
	overflow-x: clip;
	font-family: var(--pg-text);
	padding-top: 84px;
}
.inner-page main > :not(template, .svc-stripes) {
	width: var(--frame);
	max-width: 100%;
	margin-inline: auto;
}
/* Horizontal rules run edge to edge although their boxes sit in the frame. */
.news-toolbar,
.article-bar {
	border-image: linear-gradient(#d8dacd 0 0) 1 / 1px 0 / 0 var(--bleed);
}
.library-media {
	border-image: linear-gradient(var(--pg-line) 0 0) 1 / 0 0 1px / 0 var(--bleed);
}
/* Header and footer content align with the 1400 px content column on wide screens. */
@media (min-width: 1464px) {
	.inner-page .fg-footer {
		padding-inline: calc((100vw - 1400px) / 2);
	}
}
.inner-page :where(h1, h2, h3, p, ul, ol) {
	margin: 0;
}
.inner-page :where(ul, ol) {
	padding: 0;
	list-style: none;
}
.inner-page img {
	display: block;
}

/* Header: a white bar in the page flow (Figma "Rectangle 70", 84 px, hairline under it). Its contents sit on
   the 104 px header grid of the design (logo 32/31, 114 × 40; 14 px links; centre line at y ≈ 51.5), not on
   the compact 16 px navigation the homepage adopted. */
.fg-header.fg-header-page {
	top: 0;
	left: 0;
	width: 100%;
	position: fixed;
	height: 84px;
	gap: 32px;
	padding: 0 32px 0;
	background: #fff;
	border-bottom: 1px solid var(--pg-line);
	color: var(--pg-ink);
}
.fg-header-page .fg-logo {
	width: 114px;
	height: 40px;
}
.fg-header-page .fg-logo img {
	height: 119.43%;
	object-fit: fill;
}
.fg-header-page :is(.fg-navigation, .fg-header-actions) {
	gap: 32px;
}
.fg-header.fg-header-page .fg-navigation a {
	font: 400 14px/21px var(--fg-body);
	letter-spacing: 0.02em;
	color: var(--fg-navy);
}
.fg-header.fg-header-page .fg-language {
	padding: 2px 8px;
	font: 600 12px/18px var(--fg-ui);
	letter-spacing: 0.1em;
	color: var(--fg-navy);
}
.fg-header.fg-header-page .fg-phone {
	gap: 12px;
	padding: 6px 12px;
	border: 0.5px solid #05133840;
	border-radius: 2px;
	background: #ffffff40;
	font: 500 14px/21px var(--fg-ui);
	letter-spacing: 0.05em;
	color: var(--fg-navy);
}
.fg-header :is(a, button):focus-visible {
	outline: 2px solid var(--fg-ice);
	outline-offset: 3px;
}
.fg-menu nav a[aria-current="page"] {
	color: var(--fg-ice);
}
.light-page .fg-side-tools a {
	background: #01326d8c;
	backdrop-filter: blur(6px);
}
.inner-page .fg-footer {
	background: #081336;
}
/* Footer geometry of the subpage frames (Figma "Frame 1000003970": padding 32, 64 between the form and the
   info row; columns at x 32 / 547 / 1061; Manrope for the contact lines and the legal text). The homepage
   keeps its own approved footer. */
@media (min-width: 1024px) {
	.inner-page .fg-quick-form {
		margin-bottom: 64px;
	}
	.inner-page .fg-quick-form h2 {
		line-height: 18px;
	}
	/* style.css sizes every `form input` for the old contact form (46 px, 13 px type). */
	.inner-page .fg-quick-form .fg-quick-fields input {
		min-height: 0;
		padding: 8px 8px 8px 0;
		font: 400 14px/21px var(--fg-body);
		letter-spacing: 0.05em;
	}
	.inner-page .fg-quick-form .fg-quick-fields input::placeholder {
		font-size: 14px;
	}
	.inner-page .fg-footer-grid {
		grid-template-columns: 515fr 514fr 587fr;
		gap: 0;
	}
	.inner-page .fg-footer address {
		font: 500 14px/21px var(--fg-ui);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		gap: 0;
	}
	.inner-page .fg-footer address small {
		font: 500 10px/15px var(--fg-ui);
		letter-spacing: 0.1em;
	}
	.inner-page .fg-footer-legal {
		font: 500 8px/12px var(--fg-ui);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
}

/* Shared parts */
.page-title {
	font: 400 max(36px, calc(60 * var(--pu))) / 0.9 var(--fg-serif);
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--pg-navy);
}
.pg-arrow {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: max(48px, calc(79 * var(--pu)));
	height: max(48px, calc(79 * var(--pu)));
	padding: 0;
	border: 0.5px solid #929faf;
	border-radius: 50%;
	background: #0f498e4d;
	backdrop-filter: blur(3px);
	color: #fff;
	transition:
		background-color 0.2s,
		opacity 0.2s;
}
.pg-arrow::before {
	content: "";
	width: 41%;
	height: 36%;
	background: currentColor;
	-webkit-mask: url("../figma/pages/arrow-figma.svg") center / contain no-repeat;
	mask: url("../figma/pages/arrow-figma.svg") center / contain no-repeat;
}
.pg-arrow.is-prev::before {
	transform: scaleX(-1);
}
.pg-arrow:hover:not(:disabled) {
	background: #0f498ea6;
}
.pg-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.pg-arrow:focus-visible,
.svc-dots button:focus-visible,
[data-carousel-track]:focus-visible,
[data-slider-track]:focus-visible {
	outline: 2px solid var(--fg-ice);
	outline-offset: 4px;
}
.doc-button {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 139px;
	height: 36px;
	padding: 0 20px;
	border: 1px solid var(--pg-sky);
	border-radius: 20px;
	font: 700 14px/1 var(--pg-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pg-sky);
	transition:
		background-color 0.2s,
		color 0.2s,
		border-color 0.2s;
}
a.doc-button:hover,
a.doc-button:focus-visible {
	background: var(--pg-navy);
	border-color: var(--pg-navy);
	color: #fff;
	outline: none;
}

/* ---------------------------------------------------------------------------------------------
   Dịch vụ tiện ích
   --------------------------------------------------------------------------------------------- */
.svc {
	color: #fff;
	background: linear-gradient(180deg, #01326d 0%, #588ec8 40.87%, #081438 69.23%);
	padding-bottom: calc(100 * var(--pu));
}
.svc-hero {
	position: relative;
	height: calc(844 * var(--pu));
}
.svc-hero-stripe {
	position: absolute;
	left: calc(-67 * var(--pu));
	top: calc(152 * var(--pu));
	width: calc(281 * var(--pu));
	height: auto;
	opacity: 0.9;
}
.svc-title {
	position: absolute;
	z-index: 4;
	left: var(--pg-gutter);
	top: calc(60 * var(--pu));
	font: 400 calc(60 * var(--pu)) / 0.9 var(--fg-serif);
	letter-spacing: -0.05em;
	text-transform: uppercase;
}
.svc-title span {
	display: block;
	width: fit-content;
	background: linear-gradient(#fff, #85bbfb);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.svc-title span:first-child {
	background: none;
	color: #89ecff;
}
.svc-title span + span {
	margin-left: 1.33em;
}
/* Anchored at its Figma bottom edge (y = 724): type has a 14 px floor, so on smaller desktops the block
   grows upwards, towards the free space under the title, instead of down into the cloud. */
.svc-intro {
	position: absolute;
	z-index: 4;
	left: var(--pg-gutter);
	bottom: calc(204 * var(--pu));
	width: max(300px, calc(383 * var(--pu)));
}
.svc-intro h2 {
	font: 400 max(18px, calc(25 * var(--pu))) / 1.24 var(--fg-serif);
	letter-spacing: 0;
	text-transform: uppercase;
	margin-bottom: calc(14 * var(--pu));
}
.svc-intro p,
.svc-feature-copy p {
	font-size: max(14px, calc(16 * var(--pu)));
	line-height: 1.33;
	letter-spacing: 0.02em;
}
.svc-switch {
	position: absolute;
	left: calc(468 * var(--pu));
	top: calc(8 * var(--pu));
	width: calc(1212 * var(--pu));
	aspect-ratio: 1212 / 660;
}
.svc-switch-art,
.svc-tabs {
	position: absolute;
	inset: 0;
}
.svc-art {
	position: absolute;
	max-width: none;
	height: auto;
	transition: opacity 0.6s var(--ease);
}
.svc-art-inner-on {
	left: 0;
	top: 3.03%;
	width: 68.81%;
}
.svc-art-inner-off {
	left: 0;
	top: 5.91%;
	width: 64.93%;
}
.svc-art-outer-on {
	left: 42.24%;
	top: 0;
	width: 75.08%;
}
.svc-art-outer-off {
	left: 43.89%;
	top: 5.91%;
	width: 64.98%;
}
.svc-switch[data-selected="noi-khu"] :is(.svc-art-inner-off, .svc-art-outer-on),
.svc-switch[data-selected="ngoai-khu"] :is(.svc-art-inner-on, .svc-art-outer-off) {
	opacity: 0;
}
.svc-tab {
	position: absolute;
	top: 5.91%;
	width: 64.95%;
	height: 90.8%;
	/* The parallelogram of the Figma mask (787 × 599), so the two tabs never share a hit area. */
	clip-path: polygon(0 0, 52.65% 0, 100% 100%, 47.35% 100%);
	outline: none;
}
.svc-tab-noi-khu {
	left: 0;
}
.svc-tab-ngoai-khu {
	left: 43.89%;
}
.svc-tab span {
	position: absolute;
	left: 12.2%;
	top: 7.35%;
	font: 400 max(13px, calc(25 * var(--pu))) / 1.24 var(--fg-serif);
	text-transform: uppercase;
	white-space: nowrap;
	color: #ffffff99;
	transition: color 0.3s;
}
.svc-tab:hover span {
	color: #fff;
}
.svc-tab[aria-selected="true"] span {
	color: var(--pg-navy);
}
.svc-tab-ngoai-khu span {
	left: 12.58%;
}
.svc-tab:focus-visible span {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.svc-cloud {
	position: absolute;
	z-index: 2;
	left: calc(-58 * var(--pu) - var(--bleed));
	top: calc(259 * var(--pu));
	width: calc(1750 * var(--pu) + 2 * var(--bleed));
	max-width: none;
	height: calc(641 * var(--pu));
	object-fit: fill;
	pointer-events: none;
}
.svc-tabs {
	z-index: 3;
}
.svc-panel {
	position: relative;
	z-index: 1;
}
.svc-feature {
	display: grid;
	grid-template-columns: calc(473 * var(--pu)) 1fr;
	align-items: start;
	padding: 0 calc(65 * var(--pu)) 0 var(--pg-gutter);
}
.svc-feature-copy {
	padding-top: calc(9 * var(--pu));
}
.svc-heading {
	margin-bottom: calc(34 * var(--pu)) !important;
	font: 400 max(34px, calc(60 * var(--pu))) / 0.9 var(--fg-serif);
	letter-spacing: -0.05em;
	text-transform: uppercase;
	width: fit-content;
	background: linear-gradient(170deg, #f5f5f5 20%, #85bbfb);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.svc-heading span {
	display: block;
	font-size: 0.833em;
	line-height: 1.2;
}
.svc-feature-copy p {
	max-width: max(300px, calc(371 * var(--pu)));
}
.svc-feature-image {
	display: block;
	aspect-ratio: 1078 / 654;
	overflow: hidden;
}
.svc-feature-image img,
.svc-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}
.svc-feature-image:hover img,
.svc-card a:hover img {
	transform: scale(1.03);
}
.svc-carousel {
	margin-top: calc(73 * var(--pu));
}
.svc-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(490 * var(--pu));
	gap: calc(40.5 * var(--pu));
	padding: 0 var(--pg-gutter);
	scroll-padding: 0 var(--pg-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.svc-track::-webkit-scrollbar {
	display: none;
}
.svc-card {
	scroll-snap-align: start;
	min-width: 0;
}
.svc-card a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
}
.svc-card h3 {
	min-height: 2.48em;
	margin: calc(37 * var(--pu)) 0 calc(9 * var(--pu));
	font: 400 max(18px, calc(25 * var(--pu))) / 1.24 var(--fg-serif);
	text-transform: uppercase;
	max-width: 15em;
}
.svc-card p {
	min-height: calc(93 * var(--pu));
	max-width: max(260px, calc(398 * var(--pu)));
	font-size: max(14px, calc(16 * var(--pu)));
	line-height: 1.33;
	letter-spacing: 0.02em;
	color: #c9c9c9;
}
.svc-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(477 * var(--pu));
	margin: calc(25 * var(--pu)) auto 0;
}
.svc-dots {
	display: flex;
	gap: 4px;
}
.svc-dots button {
	width: 20px;
	height: 20px;
	padding: 0;
	display: grid;
	place-items: center;
}
.svc-dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border: 1px solid #4494cf;
	border-radius: 50%;
	transition: background-color 0.2s;
}
.svc-dots button[aria-current="true"]::before {
	background: #4494cf;
}
.svc-stripes {
	position: absolute;
	left: calc(-273 * var(--pu));
	top: calc(1127 * var(--pu));
	width: calc(622 * var(--pu));
	height: auto;
	opacity: 0.5;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------------------------
   Thư viện
   --------------------------------------------------------------------------------------------- */
.library-media {
	position: relative;
	padding: calc(85 * var(--pu)) 0 calc(94 * var(--pu)) var(--pg-gutter);
	border-bottom: 1px solid var(--pg-line);
	z-index: 1;
}
/* The column rule right of the current photo (Figma Vector 72, x = 1330). */
.library-media::after {
	z-index: -1;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(1330 * var(--pu));
	border-left: 1px solid var(--pg-line);
	pointer-events: none;
}
.library-slider {
	position: relative;
	margin-right: calc(-1 * var(--bleed));
	margin-top: calc(40 * var(--pu));
}
.library-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(1212 * var(--pu));
	gap: calc(120 * var(--pu));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.library-track::-webkit-scrollbar {
	display: none;
}
.library-slide {
	scroll-snap-align: start;
	min-width: 0;
}
.library-slide > a {
	display: block;
	aspect-ratio: 1212 / 725;
	border-radius: 3px;
	overflow: hidden;
	background: #eef3f8;
}
.library-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}
.library-slide > a:hover img {
	transform: scale(1.02);
}
.library-caption {
	display: grid;
	grid-template-columns: calc(170 * var(--pu)) minmax(0, calc(513 * var(--pu)));
	margin-top: calc(47 * var(--pu));
	min-height: 3.6em;
	font: 700 max(17px, calc(25 * var(--pu))) / 1.2 var(--fg-serif);
	color: var(--pg-navy);
}
.library-caption span {
}
.library-prev,
.library-next {
	position: absolute;
	z-index: 2;
	top: calc(332 * var(--pu));
	translate: -50% 0;
}
.library-next {
	left: calc(1326 * var(--pu));
}
.library-prev {
	left: 0;
}
.library-prev:disabled {
	visibility: hidden;
}
/* The design shows no counter on desktop; it is announced there and shown on small screens. */
.library-count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	font: 400 max(14px, calc(16 * var(--pu))) / 1.5 var(--fg-ui);
	letter-spacing: 0.1em;
	color: #01326d99;
}

.library-docs {
	position: relative;
	overflow: clip;
	display: grid;
	grid-template-columns: calc(663 * var(--pu)) 1fr;
	min-height: calc(1053 * var(--pu));
	padding: calc(75 * var(--pu)) 0 calc(420 * var(--pu)) var(--pg-gutter);
	isolation: isolate;
}
.library-docs .page-title {
	padding-top: calc(0 * var(--pu));
}
/* Rows of 90 (first 66) including the rule: name line 28 px; the pill is centred 4 px higher. */
.doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: calc(49 * var(--pu)) calc(93 * var(--pu)) calc(12 * var(--pu)) calc(37 * var(--pu));
	border-bottom: 1px solid var(--pg-line);
	transition: border-color 0.2s;
}
.doc-row:first-child {
	padding-top: calc(28 * var(--pu));
	padding-bottom: calc(9 * var(--pu));
}
.doc-row .doc-button {
	margin-top: calc(-8 * var(--pu));
	transition: 0.3s all;
}
.doc-name {
	font: 700 max(16px, calc(22 * var(--pu))) / 1.27 var(--pg-text);
	color: var(--pg-sky);
	transition: color 0.2s;
}
.doc-row:is(:hover, :focus-within):not(.is-pending) {
	border-color: var(--pg-navy);
}
.doc-row:is(:hover, :focus-within):not(.is-pending) .doc-name {
	color: var(--pg-navy);
}
.doc-row:is(:hover, :focus-within) a.doc-button {
	background: var(--pg-navy);
	border-color: var(--pg-navy);
	color: #fff;
}
.doc-row.is-pending .doc-button {
	border-style: dashed;
	opacity: 0.7;
	cursor: default;
}
.doc-row {
	position: relative;
}
.doc-row a {
	position: absolute;
	z-index: 1;
	inset: 0;
}
.doc-row:not(.is-pending):hover .doc-button {
	background: var(--pg-navy);
	border-color: var(--pg-navy);
	color: #fff;
}
.library-note {
	margin-top: calc(27 * var(--pu)) !important;
	padding-right: calc(65 * var(--pu));
	text-align: right;
	font: italic 500 max(14px, calc(18 * var(--pu))) / 1.22 var(--pg-text);
	font-synthesis: style;
	color: var(--pg-sky);
	font-style: italic !important;
}
.library-skyline {
	width: 100% !important;
	margin-top: -56vw;
	/* position: absolute;
	z-index: -1;
	left: 0;
	top: calc(-13 * var(--pu));
	width: 100%;
	height: auto;
	pointer-events: none; */
}

/* ---------------------------------------------------------------------------------------------
   Tin tức & Sự kiện
   --------------------------------------------------------------------------------------------- */
.news > .page-title {
	padding: calc(85 * var(--pu)) var(--pg-gutter) 0;
}
.news-toolbar {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	min-height: 56px;
	margin-top: calc(27 * var(--pu));
	padding: 0 calc(82 * var(--pu)) 0 var(--pg-gutter);
	border-block: 1px solid #d8dacd;
}
.news-filter {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: 16px;
	color: #01326d99;
}
/* style.css styles every `form label/input/select` for the old contact form (11 px labels, 46 px fields,
   full width, focus shadow); the filter bar opts out of all of it. */
form.news-filter label {
	margin: 0;
	font-size: 16px;
	line-height: 19px;
	color: inherit;
}
form.news-filter :is(input, select) {
	display: block;
	width: auto;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
}
form.news-filter :is(input, select):focus {
	box-shadow: none;
}
form.news-filter input::placeholder {
	font-size: inherit;
}
.news-sort {
	display: flex;
	align-items: center;
	width: calc(352 * var(--pu));
	white-space: nowrap;
}
.news-filter .news-sort select {
	appearance: none;
	border: 0;
	padding: 0 20px 0 0;
	background: url("../figma/chevron.svg") right 4px center / 8px 4px no-repeat;
	font: 600 16px/19px var(--pg-text);
	color: #0a163b;
	cursor: pointer;
}
.news-sort > span {
	min-width: calc(78 * var(--pu));
	padding-right: 8px;
	font-size: 16px;
}
.news-filter .news-search {
	padding-left: 30px;
	background: url(../../images/icon_search.svg) no-repeat center left / 20px;
}
.news-filter .news-search input {
	width: min(220px, 22vw);
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0;
	background: none;
	font: 400 16px/19px var(--pg-text);
	color: var(--pg-navy);
	transition: border-color 0.2s;
}
.news-search input::placeholder {
	color: #01326d99;
}
.news-search input:focus {
	outline: none;
	border-bottom-color: var(--pg-sky);
}
.news-sort select:focus-visible,
.news-filter .news-search input:focus-visible,
.news-channels a:focus-visible,
.news-pages a:focus-visible,
.news-item h2 a:focus-visible {
	outline: 0;
	outline-offset: 3px;
}
/* Figma: "Tin tức dự án" underline 1072–1250, "Tin thị trường" text box 1349–1598. */
.news-channels {
	display: flex;
	gap: calc(99 * var(--pu));
}
.news-channels a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(178 * var(--pu));
	margin-bottom: -1px;
	padding: 0;
	border-bottom: 1px solid transparent;
	font: 400 max(17px, calc(25 * var(--pu))) / 1.24 var(--fg-serif);
	text-transform: uppercase;
	white-space: nowrap;
	color: #4494cf99;
	transition: color 0.2s;
}
.news-channels a + a {
	justify-content: flex-start;
	width: calc(249 * var(--pu));
}
.news-channels a:hover {
	color: var(--pg-sky);
}
.news-channels a[aria-current="page"] {
	color: var(--pg-navy);
	border-bottom-color: var(--pg-navy);
}

.news-list {
	position: relative;
	padding: calc(56 * var(--pu)) calc(115 * var(--pu)) 0 calc(114 * var(--pu));
	isolation: isolate;
}
/* Ribbon artwork in the empty cells of rows 2 and 4 (Figma groups 169, 183 and 184). */
.news-list::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-repeat: no-repeat;
	background-size: calc(1377 * var(--pu)) calc(566 * var(--pu));
	pointer-events: none;
}
.news-list[data-rows="2"]::before,
.news-list[data-rows="3"]::before {
	background-image: url("../figma/pages/news-stripes.svg");
	background-position: calc(325 * var(--pu)) calc(696 * var(--pu));
}
.news-list[data-rows="4"]::before {
	background-image:
		url("../figma/pages/news-stripes.svg"), url("../figma/pages/news-stripes.svg"),
		url("../figma/pages/news-stripes.svg");
	background-position:
		calc(325 * var(--pu)) calc(696 * var(--pu)),
		calc(-75 * var(--pu)) calc(1976 * var(--pu)),
		calc(1106 * var(--pu)) calc(1976 * var(--pu));
}
/* Let the decorative ribbons reach the viewport edges once the content frame stops growing.
   Offset their positions by the new left bleed so they stay aligned with the centered frame. */
@media (min-width: 1516px) {
	.news-list::before {
		left: calc(-1 * var(--bleed));
		right: calc(-1 * var(--bleed));
	}
	.news-list[data-rows="2"]::before,
	.news-list[data-rows="3"]::before {
		background-position-x: calc(325 * var(--pu) + var(--bleed));
	}
	.news-list[data-rows="4"]::before {
		background-position-x:
			calc(325 * var(--pu) + var(--bleed)), calc(-75 * var(--pu) + var(--bleed)),
			calc(1106 * var(--pu) + var(--bleed));
	}
}
.news-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: calc(75 * var(--pu));
	row-gap: calc(75 * var(--pu));
}
/* The staggered placement of the design: two cards per row, leaving one cell open. */

.news-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(565 * var(--pu));
	padding: calc(30 * var(--pu)) calc(26 * var(--pu)) calc(30 * var(--pu)) calc(26 * var(--pu));
	border: 1px solid var(--pg-card-line);
	border-radius: 3px;
	background: linear-gradient(#f8fcff73, #f0f6f973 40%, #e5f4ff73);
	backdrop-filter: blur(5px);
	color: var(--pg-navy);
	transition:
		border-color 0.3s,
		box-shadow 0.3s,
		background-color 0.3s;
}
.news-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(23 * var(--pu));
}
.news-item time {
	display: flex;
}
.news-item time span {
	min-width: 35px;
	height: 24px;
	padding: 0 6px;
	/* Figma: 0.5 px #4494cf. One device pixel at half strength looks the same on standard screens. */
	border: 1px solid #4494cf8c;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}
.news-item time span + span {
	margin-left: -1px;
}
.news-item time span:last-child {
	min-width: 51px;
}
.news-type {
	font-size: 16px;
	line-height: 19px;
	font-weight: 600;
}
.news-item img {
	width: 100%;
	aspect-ratio: 380 / 260;
	height: auto;
	object-fit: cover;
	border-radius: 3px;
	margin: 0 calc(-2 * var(--pu)) calc(24 * var(--pu)) calc(2 * var(--pu));
}
.news-item h2 {
	min-height: 3.6em;
	max-width: calc(349 * var(--pu));
	margin: 0 0 calc(11 * var(--pu)) -1px;
	font: 700 max(17px, calc(20 * var(--pu))) / 1.2 var(--pg-text);
	letter-spacing: 0;
}
.news-item h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.news-item p {
	max-width: calc(365 * var(--pu));
	margin-left: -1px;
	font-size: max(14px, calc(16 * var(--pu)));
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-item.is-text {
	justify-content: flex-start;
	text-align: center;
}
.news-item.is-text h2 {
	max-width: none;
	min-height: 0;
	margin: calc(94 * var(--pu)) calc(33 * var(--pu)) calc(26 * var(--pu));
}
.news-item.is-text p {
	max-width: none;
	margin-inline: calc(36 * var(--pu));
	-webkit-line-clamp: 6;
}
/* Hover (Figma 68:418): warm sand fill, gold edge and ribbons, and a corner arrow for linked cards. */
.news-item:hover {
	border-color: var(--pg-gold);
	background: linear-gradient(#fff, #f4c89d 50%, #fff);
	box-shadow: 0 4px 23px #eab07726;
}
.news-item::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: calc(48 * var(--pu));
	bottom: 0;
	width: calc(334 * var(--pu));
	height: calc(228 * var(--pu));
	background: url("../figma/pages/news-hover-stripes.svg") center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.news-item:hover::after {
	opacity: 1;
}
.news-item.is-link h2 a::before {
	content: "";
	position: absolute;
	right: calc(22 * var(--pu));
	bottom: calc(14 * var(--pu));
	width: 22px;
	height: 22px;
	background: var(--pg-gold);
	-webkit-mask: url("../figma/arrow-up-right.svg") center / contain no-repeat;
	mask: url("../figma/arrow-up-right.svg") center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.3s;
}
.news-item.is-link:hover h2 a::before {
	opacity: 1;
}
.news-empty {
	display: grid;
	justify-items: center;
	gap: 20px;
	padding: 80px 24px 40px;
	text-align: center;
	font-size: 18px;
	color: var(--pg-navy);
}

.news-pages {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: calc(28 * var(--pu));
	padding: calc(59 * var(--pu)) calc(115 * var(--pu)) 0 0;
}
.news-pages ol {
	display: flex;
	gap: calc(11 * var(--pu));
}
.news-pages ol a {
	display: grid;
	place-items: center;
	width: 49px;
	height: 49px;
	border: 1px solid #dce6f3;
	border-radius: 3px;
	font: 600 18px/1 var(--pg-text);
	color: var(--pg-navy);
	transition:
		background-color 0.2s,
		border-color 0.2s;
}
.news-pages ol a:hover {
	border-color: var(--pg-sky);
}
.news-pages ol a[aria-current="page"] {
	background: #f0f6f9;
	color: #01326d4d;
	pointer-events: none;
}
.news-page-arrow {
	width: 56px;
	height: 17px;
	background: var(--pg-navy);
	-webkit-mask: url("../figma/pages/arrow-long.svg") center / contain no-repeat;
	mask: url("../figma/pages/arrow-long.svg") center / contain no-repeat;
}
.news-page-arrow.is-prev {
	transform: scaleX(-1);
}
/* The design keeps both arrows navy; at the first or last page the arrow is simply inert. */
span.news-page-arrow {
	cursor: default;
}
.news {
	padding-bottom: calc(75 * var(--pu));
}

/* ---------------------------------------------------------------------------------------------
   Chi tiết tin tức (Figma 30:1993)
   --------------------------------------------------------------------------------------------- */
.article > .page-title {
	padding: calc(85 * var(--pu)) var(--pg-gutter) 0;
}
.article-bar {
	display: flex;
	align-items: center;
	height: calc(64 * var(--pu));
	min-height: 48px;
	margin-top: calc(14 * var(--pu));
	padding-left: calc(1393 * var(--pu));
	border-block: 1px solid #d8dacd;
}
.article-bar a {
	font: 400 max(17px, calc(25 * var(--pu))) / 1.24 var(--fg-serif);
	text-transform: uppercase;
	color: #01326d99;
	transition: color 0.2s;
}
.article-bar a:hover {
	color: var(--pg-navy);
}
.article-layout {
	position: relative;
	display: grid;
	grid-template-columns: calc(109 * var(--pu)) calc(486 * var(--pu)) 1fr;
	isolation: isolate;
}
/* Soft light behind the headline (Figma "Ellipse 4"). */
.article-layout::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(1265 * var(--pu));
	top: calc(-10 * var(--pu));
	width: calc(775 * var(--pu));
	aspect-ratio: 1;
	background: radial-gradient(closest-side, #e4f3ff, #fff0);
	pointer-events: none;
}
.article-back {
	position: relative;
	align-self: start;
	justify-self: start;
	margin-left: calc(49 * var(--pu));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--pu));
	margin-top: calc(490 * var(--pu));
	color: #bababa;
	transition: color 0.2s;
}
.article-back span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 400 max(17px, calc(25 * var(--pu))) / 1.2 var(--fg-serif);
	text-transform: uppercase;
	white-space: nowrap;
}
.article-back img {
	width: max(18px, calc(24 * var(--pu)));
	height: auto;
}
.article-back:hover {
	color: var(--pg-navy);
}
.article-related {
	border-inline: 1px solid #b3c8e0;
	background: #ccdcf059;
}
.related-item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: calc(59 * var(--pu)) calc(55 * var(--pu)) calc(68 * var(--pu)) calc(49 * var(--pu));
	border-block: 1px solid transparent;
	margin-top: -1px;
	color: var(--pg-navy);
	isolation: isolate;
	transition:
		background-color 0.3s,
		border-color 0.3s;
	border-top: 1px solid #b3c8e0;
}
.related-item:first-child {
	margin-top: 0;
	border-top: 0;
}
/* The three cards of the design are 629 / 636 / 627 px tall with slightly different insets (Figma 30:1993). */
.related-item:nth-child(3n + 2) {
	padding-top: calc(69 * var(--pu));
	padding-bottom: calc(60 * var(--pu));
}
.related-item:nth-child(3n + 2) .related-photo {
	margin-top: calc(39 * var(--pu));
}
.related-item:nth-child(3n + 3) {
	padding-top: calc(58 * var(--pu));
	padding-bottom: calc(67 * var(--pu));
}
.related-item::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url("../figma/pages/detail-ribbons.svg") calc(-229 * var(--pu)) 0 / calc(852 * var(--pu)) auto no-repeat;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.related-item h2 {
	min-height: 3.6em;
	max-width: calc(372 * var(--pu));
	margin-bottom: calc(13 * var(--pu));
	font: 700 max(17px, calc(20 * var(--pu))) / 1.2 var(--pg-text);
	letter-spacing: 0;
}
.related-item h2 a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}
.related-item h2 a:focus-visible {
	outline: none;
}
.related-item:focus-within {
	outline: 2px solid var(--pg-sky);
	outline-offset: -4px;
}
.related-item p {
	min-height: 4.75em;
	max-width: calc(357 * var(--pu));
	font-size: max(14px, calc(16 * var(--pu)));
	line-height: 1.19;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.related-photo {
	position: relative;
	width: calc(380 * var(--pu));
	max-width: 100%;
	margin-top: calc(33 * var(--pu));
	border-radius: 3px;
	overflow: hidden;
}
.related-photo img {
	width: 100%;
	aspect-ratio: 380 / 260;
	height: auto;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.4s;
}
/* The 12% sky wash over the greyscale photo (Figma "Rectangle 132"). */
.related-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #4494cf1f;
	transition: opacity 0.4s;
}
.related-more {
	align-self: flex-end;
	display: flex;
	align-items: center;
	gap: calc(6 * var(--pu));
	margin-top: calc(25 * var(--pu));
	margin-right: calc(1 * var(--pu));
	font: 400 18px/22px var(--fg-serif);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.related-more::after {
	content: "";
	width: 27px;
	height: 10px;
	background: url("../figma/pages/arrow-more.svg") center / contain no-repeat;
	transition: transform 0.3s var(--ease);
}
.related-item:hover,
.related-item:focus-within {
	background: #fff;
	border-color: #b3c8e0;
}
.related-item:is(:hover, :focus-within)::before {
	opacity: 1;
}
.related-item:is(:hover, :focus-within) .related-photo img {
	filter: none;
}
.related-item:is(:hover, :focus-within) .related-photo::after {
	opacity: 0;
}
.related-item:hover .related-more::after {
	transform: translateX(4px);
}
.article-main {
	min-width: 0;
	padding: calc(94 * var(--pu)) 0 calc(125 * var(--pu)) calc(132 * var(--pu));
	color: var(--pg-navy);
}
.article-main h1 {
	max-width: calc(804 * var(--pu));
	font: 400 max(30px, calc(55 * var(--pu))) / 1 var(--fg-serif);
	letter-spacing: -0.02em;
}
.post-meta {
	display: grid;
	grid-template-columns: calc(439 * var(--pu)) auto;
	align-items: center;
	margin-top: calc(32 * var(--pu)) !important;
	font: 500 max(15px, calc(18 * var(--pu))) / 22px var(--pg-text);
}
.post-meta :is(time, span) {
	display: flex;
	align-items: center;
	white-space: pre;
}
.post-meta time img {
	width: 18px;
	height: 19px;
	margin-right: 9px;
}
.post-meta span img {
	width: 21px;
	height: 21px;
	margin-right: 6px;
}
.article-image {
	width: 100%;
	aspect-ratio: 953 / 506;
	height: auto;
	margin-top: calc(62 * var(--pu));
	border-radius: 3px;
	object-fit: cover;
}
.post-body {
	max-width: calc(754 * var(--pu));
	margin-top: calc(69 * var(--pu));
	font: 400 max(16px, calc(18 * var(--pu))) / 1.22 var(--pg-text);
	color: #727579;
	text-align: justify;
	hyphens: auto;
}
.post-body > * + * {
	margin-top: calc(38 * var(--pu)) !important;
}
.post-body h2 {
	font: 700 max(18px, calc(22 * var(--pu))) / 1.2 var(--pg-text);
	letter-spacing: 0;
	text-align: left;
	color: #727579;
}
.article-missing {
	padding-block: 80px 120px;
}
.article-missing h1 {
	font: 400 32px/1.2 var(--fg-serif);
	color: var(--pg-navy);
}

/* ---------------------------------------------------------------------------------------------
   Tablets and phones: the 1680 composition gives way to stacked, touch-sized layouts.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1240px) {
	.fg-header.fg-header-page {
		gap: 20px;
		padding-inline: 24px;
	}
	.fg-header-page .fg-navigation {
		gap: 20px;
	}
	.fg-header-page .fg-header-actions {
		gap: 16px;
	}
}
@media (max-width: 767px) {
	.fg-header.fg-header-page {
		height: 68px;
		padding: 0 20px;
	}
}
@media (max-width: 1023px) {
	:root {
		--pg-gutter: 24px;
	}
	.svc {
		padding-bottom: 64px;
	}
	.svc-hero {
		height: auto;
		padding: 40px var(--pg-gutter) 0;
	}
	.svc-hero-stripe {
		left: -40px;
		top: 90px;
		width: 120px;
	}
	.svc-title,
	.svc-intro {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
	}
	.svc-title {
		font-size: clamp(40px, 9vw, 60px);
	}
	.svc-switch {
		position: relative;
		left: auto;
		top: auto;
		width: calc(100% + 2 * var(--pg-gutter));
		margin: 24px calc(-1 * var(--pg-gutter)) 0;
	}
	.svc-intro {
		width: auto;
		max-width: 520px;
		margin-top: 8px;
	}
	.svc-cloud {
		top: auto;
		bottom: -12%;
		left: -10%;
		width: 120%;
		height: auto;
	}
	.svc-feature {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 48px var(--pg-gutter) 0;
	}
	.svc-heading {
		margin-bottom: 16px !important;
	}
	.svc-carousel {
		margin-top: 48px;
	}
	.svc-track {
		grid-auto-columns: min(78%, 420px);
		gap: 16px;
	}
	.svc-card h3 {
		margin: 20px 0 8px;
	}
	.svc-carousel-controls {
		justify-content: center;
		gap: 32px;
		width: auto;
		margin-top: 32px;
	}
	.svc-card h3 {
		min-height: 0;
	}
	.svc-stripes {
		display: none;
	}

	.library-media {
		padding: 48px 0 40px var(--pg-gutter);
	}
	.library-media::after {
		display: none;
	}
	.library-slider {
		margin-top: 28px;
	}
	.library-track {
		grid-auto-columns: calc(100% - 64px);
		gap: 16px;
		padding-right: var(--pg-gutter);
	}
	.library-caption {
		grid-template-columns: 1fr;
		gap: 6px;
		margin-top: 20px;
		padding-right: 24px;
	}
	.library-prev,
	.library-next {
		top: calc((100vw - var(--pg-gutter) - 64px) * 725 / 1212 / 2);
	}
	.library-prev {
		left: 32px;
		translate: -50% -50%;
	}
	.library-next {
		left: auto;
		right: 32px;
		translate: 50% -50%;
	}
	.library-count {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
		margin-top: 16px !important;
		padding-right: var(--pg-gutter);
		text-align: right;
	}
	.library-docs {
		grid-template-columns: 1fr;
		gap: 24px;
		min-height: 0;
		padding: 48px 0 52vw;
	}
	.library-docs .page-title {
		padding-left: var(--pg-gutter);
	}
	.doc-row,
	.doc-row:first-child {
		min-height: 72px;
		padding: 14px var(--pg-gutter);
	}
	.library-note {
		padding-inline: var(--pg-gutter);
	}
	.library-skyline {
		top: auto;
		bottom: 0;
	}

	.news > .page-title {
		padding: 48px var(--pg-gutter) 0;
	}
	.news-toolbar {
		flex-direction: column-reverse;
		gap: 0;
		margin-top: 24px;
		padding: 0;
	}
	.news-channels {
		gap: 0;
		border-bottom: 1px solid #d8dacd;
	}
	.news-channels a {
		flex: 1;
		justify-content: flex-start;
		min-height: 45px;
		font-size: 16px;
		padding-left: 24px;
	}
	.news-filter {
		justify-content: space-between;
		gap: 16px;
		min-height: 52px;
		padding: 0 var(--pg-gutter);
	}
	.news-filter .news-search input {
		width: min(180px, 36vw);
	}
	.news-sort {
		width: auto;
		gap: 6px;
	}
	.news-sort > span {
		min-width: 0;
	}
	.news-item h2,
	.news-item p {
		max-width: none;
	}
	.news-item h2 {
		min-height: 0;
	}
	.news-list {
		padding: 32px var(--pg-gutter) 0;
	}
	.news-list::before {
		display: none;
	}
	.news-items {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
		gap: 20px;
	}
	.news-items .news-item {
		grid-column: auto;
		grid-row: auto;
		min-height: 0;
		padding: 20px;
	}
	.news-item-top,
	.news-item img {
		margin-bottom: 16px;
	}
	.news-item h2 {
		margin-bottom: 8px;
	}
	.news-item.is-text h2 {
		margin: 32px 8px 16px;
	}
	.news-item.is-text p {
		margin: 0 8px 24px;
	}
	.news-pages {
		justify-content: center;
		gap: 12px;
		padding: 40px var(--pg-gutter) 0;
	}
	.news-pages ol {
		gap: 8px;
	}
	.news-pages ol a {
		width: 44px;
		height: 44px;
	}
	.news-page-arrow {
		width: 40px;
	}
	.news {
		padding-bottom: 56px;
	}
}
@media (max-width: 1023px) {
	.article > .page-title {
		padding: 48px var(--pg-gutter) 0;
	}
	.article-bar {
		margin-top: 20px;
		padding-left: var(--pg-gutter);
	}
	.article-layout {
		grid-template-columns: 1fr;
	}
	.article-layout::before,
	.article-back {
		display: none;
	}
	.article-main {
		order: -1;
		padding: 32px var(--pg-gutter) 48px;
	}
	.article-main h1,
	.post-body {
		max-width: none;
	}
	.post-meta {
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 24px;
		margin-top: 20px !important;
	}
	.article-image {
		margin-top: 24px;
	}
	.post-body {
		margin-top: 28px;
		text-align: left;
	}
	.post-body > * + * {
		margin-top: 18px !important;
	}
	.article-related {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
		border-inline: 0;
		border-top: 1px solid #b3c8e0;
	}
	.related-item,
	.related-item:first-child,
	.related-item:nth-child(3n + 2),
	.related-item:nth-child(3n + 3) {
		margin: 0;
		padding: 28px var(--pg-gutter) 32px;
	}
	.related-item h2 {
		min-height: 0;
		max-width: none;
		margin-bottom: 8px;
	}
	.related-item p {
		min-height: 0;
		max-width: none;
	}
	.related-photo {
		width: 100%;
		margin-top: 18px;
	}
	.related-more {
		margin-top: 16px;
	}
}
@media (max-width: 599px) {
	.svc-tab span {
		left: 8%;
		font-size: 12px;
		white-space: normal;
		max-width: 8em;
	}
	.svc-track {
		grid-auto-columns: 82%;
	}
	.news-filter {
		flex-wrap: wrap;
		padding-block: 8px;
	}

	.svc-title {
		display: flex;
		line-height: 1.5;
		justify-content: flex-start;
		font-size: 10vw;
		margin-bottom: 20px;
	}
	.svc-title span + span {
		margin-left: 10px;
	}
}
/* Beyond the frame the skyline photo would end in a hard edge; let it fade into the page instead. */
@media (min-width: 2000px) {
	.library-skyline {
		/* -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); */
		margin-top: -35vw;
	}
}
@media (min-resolution: 2dppx) {
	.news-item time span {
		border: 0.5px solid #4494cf;
	}
}
@media (prefers-reduced-motion: reduce) {
	.svc-art,
	.svc-feature-image img,
	.svc-card img,
	.library-slide img {
		transition: none;
	}
	.svc-track,
	.library-track {
		scroll-behavior: auto;
	}
}

.library-media,
.library-docs {
	position: relative;
	z-index: 2;
}