/* ============================================================
   Trang chủ — Header + Section 1 (Hero) + Section 5 (Sản phẩm)
   Nguồn: Figma "TÂN Á Đại Thành" › Trang Chu (4122:2)
   Khung gốc 1920px · vùng nội dung 1542px
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #fff;
	font-family: 'Wix Madefor Display', 'Segoe UI', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a,
a:hover {
	text-decoration: none;
}

/* ============================================================
   HEADER
   Figma: Group 4781 (4122:663) — thanh pill kính mờ, y=31, cao 81px
   ============================================================ */
.dnm-header {
	position: fixed;
	top: clamp(16px, calc(2.667px + 1.111vw), 24px);
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0 9.84375vw;
	/* 189/1920, đồng bộ với .dnm-products */
}

/* Header co giãn mượt theo vw từ 1920px xuống 1200px (mốc bật hamburger) thay vì
   nhảy khựng giữa 2 kích thước cố định — để 1920 và ~1400 trông tỉ lệ như nhau. */
.dnm-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: clamp(68px, calc(46.33px + 1.806vw), 81px);
	max-width: 1542px;
	margin: 0 auto;
	padding: 0 clamp(20px, calc(-13.33px + 2.778vw), 40px) 0 clamp(20px, calc(-18.33px + 3.194vw), 43px);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 5px 45px 12px rgba(51, 51, 51, 0.2);
}

.dnm-header__logo {
	position: relative;
	z-index: 1;
	display: block;
	line-height: 0;
	flex: none;
}

.dnm-header__logo img {
	display: block;
	height: clamp(30px, calc(16.667px + 1.1111vw), 38px);
	width: auto;
}

.dnm-header__actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(20px, 2.15vw, 36px);
	flex: 1;
	min-width: 0;
	margin-left: clamp(32px, calc(5.33px + 2.222vw), 48px);
	margin-right: clamp(50px, calc(-33.33px + 6.944vw), 100px);
}

.dnm-header__nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(22px, 1.75vw, 32px);
	margin: 0;
	white-space: nowrap;
}

.dnm-header__nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
}

.dnm-header__nav-item > a {
	font-weight: 700;
	font-size: clamp(12px, calc(8.667px + 0.2778vw), 14px);
	line-height: 27px;
	text-transform: uppercase;
	text-decoration: none;
	color: #1854b5;
}

.dnm-header__nav-item > a.is-active {
	color: #01a0e2;
}

/* Menu cấp 2 — nút mở (chevron) bên cạnh mục cha có menu con */
.dnm-header__nav-toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: #1854b5;
	cursor: pointer;
	transition: transform 0.2s ease, color 0.2s ease;
}

.dnm-header__nav-toggle svg {
	display: block;
	width: 10px;
	height: 7px;
}

.dnm-header__nav-item.is-open .dnm-header__nav-toggle {
	transform: rotate(180deg);
	color: #01a0e2;
}

/* Menu cấp 2 — bảng thả xuống */
.dnm-header__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	min-width: 220px;
	margin: 14px 0 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(24, 84, 181, 0.18);
}

.dnm-header__submenu li {
	margin: 0;
}

.dnm-header__submenu a {
	display: block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: #1d1d1d;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dnm-header__submenu a:hover {
	background: #f2f7ff;
	color: #1854b5;
}

.dnm-header__nav-item.has-children.is-open .dnm-header__submenu {
	display: flex;
}

@media (hover: hover) {
	.dnm-header__nav-item.has-children:hover .dnm-header__submenu {
		display: flex;
	}

	.dnm-header__nav-item.has-children:hover .dnm-header__nav-toggle {
		transform: rotate(180deg);
		color: #01a0e2;
	}
}

.dnm-header__nav-item.has-children:focus-within .dnm-header__submenu {
	display: flex;
}

.dnm-header__tools {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(12px, calc(2.667px + 0.5556vw), 18px);
	flex: none;
}

.dnm-header__lang {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(12px, calc(8.667px + 0.2778vw), 14px);
	letter-spacing: 0.28px;
	text-transform: uppercase;
	color: #000;
}

.dnm-header__lang-option {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(12px, calc(8.667px + 0.2778vw), 14px);
	letter-spacing: 0.28px;
	text-transform: uppercase;
	color: #000;
	line-height: 27px;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-header__lang-option.is-active {
	color: #01a0e2;
}

.dnm-header__lang-separator {
	color: #000;
	line-height: 27px;
}

.dnm-header__search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(34px, calc(19.33px + 0.7639vw), 40px);
	height: clamp(34px, calc(19.33px + 0.7639vw), 40px);
	margin: -12px;
	margin-left: clamp(20px, calc(0px + 1.667vw), 30px);
	border: 0;
	padding: 0;
	background: none;
	color: #1854b5;
	cursor: pointer;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-header__search svg {
	display: block;
	width: clamp(15px, calc(11.667px + 0.1667vw), 17px);
	height: clamp(15px, calc(11.667px + 0.1667vw), 17px);
}

.dnm-header__wave {
	position: absolute;
	top: 0;
	right: -8px;
	height: 100%;
	width: auto;
	max-width: none;
	pointer-events: none;
	z-index: 0;
}

.dnm-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: -14px;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.dnm-header__burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: #1854b5;
	border-radius: 1px;
}

/* ============================================================
   SECTION 1 — Hero / Banner
   Figma: Group 4817 (4122:19) + nền Rectangle (4122:16)
   Nền + toàn bộ text cố định — chỉ ảnh bên phải (4122:36) chạy slider/fade.
   ============================================================ */
.dnm-hero-wrap {
	position: relative;
}

.dnm-hero {
	position: relative;
	padding: 159px 9.84375vw 110px;
	background: url(../demo-images/hero-bg.webp) top center no-repeat, #fff;
	background-size: contain;
}

.dnm-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 130px;
	max-width: 1542px;
	margin: 0 auto;
}

.dnm-hero__content {
	flex: 0 0 643px;
	max-width: 643px;
}

.dnm-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.24px;
	color: #1854b5;
}

.dnm-hero__title {
	margin: 0 0 40px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 1.92px;
	color: #1854b5;
}

.dnm-hero__cta {
	display: inline-flex;
	width: fit-content;
	flex: none;
	align-items: center;
	gap: 10px;
	height: 49px;
	margin-bottom: 64px;
	padding: 0 24px 0 28px;
	border-radius: 38px;
	background-image: linear-gradient(122.5deg, #1854b5 20.36%, #09cfff 93.3%);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.54px;
	position: relative;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
	will-change: transform;
}

.dnm-hero__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 17px;
	transition: transform 0.28s ease;
}

.dnm-hero__cta-icon svg {
	display: block;
	width: 19.05px;
	height: 16.39px;
	transform: rotate(-90deg);
}

.dnm-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 90px;
	row-gap: 38px;
	margin: 0;
}

.dnm-hero__stat dt {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.02;
	color: #01a0e2;
}

.dnm-hero__stat dd {
	margin: 6px 0 0;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.2px;
	color: #000;
}

.dnm-hero__media {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	align-self: flex-end;
}

.dnm-hero__swiper {
	width: 100%;
	height: 100%;
	aspect-ratio: 744 / 844;
}

.dnm-hero__swiper .swiper-slide picture,
.dnm-hero__swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-hero__swiper .swiper-slide img {
	object-fit: contain;
	object-position: bottom;
	pointer-events: none;
}

.dnm-hero__pagination {
	/* Swiper's own .swiper-pagination-bullets rule (2 classes) outranks single-class
	   selectors and forces left:0/width:100% — fight bottom with !important, and
	   center the bullets with flex instead of fighting left/transform too. */
	bottom: -34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dnm-hero__pagination .swiper-pagination-bullet {
	margin: 0 !important;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #01a0e2;
	opacity: 1;
	transition: width 0.3s ease, background 0.3s ease;
}

.dnm-hero__pagination .swiper-pagination-bullet-active {
	width: 28px;
	background: #1854b5;
}

/* --------------------------------------------------------
   Responsive — Header + Hero
   Header chuyển sang menu hamburger sớm hơn các section khác (1680px
   thay vì 1200px): nav đầy đủ 7 mục rộng ~768px không co lại được
   (nowrap), nên ở các độ rộng laptop phổ biến (1280–1536px) nó sẽ đè
   lên khối ngôn ngữ/tìm kiếm nếu vẫn cố hiện — cần đổi sang hamburger
   sớm để không vỡ layout.
   -------------------------------------------------------- */
@media (max-width: 1680px) {
	.dnm-header__nav-item > a {
		padding: 6px 0;
	}
}

@media (max-width: 1200px) {
	.dnm-header__actions {
		flex: none;
		margin-left: auto;
	}

	.dnm-header__nav {
		position: absolute;
		top: calc(100% + 12px);
		right: 0;
		display: none;
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
		min-width: 220px;
		padding: 18px 20px;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 18px 45px rgba(24, 84, 181, 0.18);
	}

	.dnm-header__nav.is-open {
		display: flex;
	}

	.dnm-header__nav-item {
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
	}

	.dnm-header__nav-item > a {
		font-size: 14px;
	}

	/* Cấp 2 trên mobile: mở như accordion ngay dưới mục cha, không phải bảng thả nổi */
	.dnm-header__submenu {
		position: static;
		align-items: flex-end;
		width: 100%;
		margin: 6px 0 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.dnm-header__submenu a {
		padding: 6px 0;
		text-align: right;
	}

	.dnm-header__nav-item.has-children:hover .dnm-header__submenu {
		display: none;
	}

	.dnm-header__burger {
		display: flex;
	}

	.dnm-hero {
		padding-top: 130px;
	}

	.dnm-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 56px;
	}

	.dnm-hero__content,
	.dnm-hero__media {
		flex: none;
		max-width: 100%;
		width: 100%;
	}

	.dnm-hero__media {
		max-width: 480px;
	}

	.dnm-hero__title {
		font-size: 40px;
	}
}

@media (max-width: 640px) {
	.dnm-header {
		padding: 0 16px;
	}

	.dnm-header__inner {
		padding: 0 14px;
	}

	.dnm-header__logo img {
		height: 28px;
	}

	.dnm-header__tools {
		gap: 12px;
	}

	.dnm-hero {
		padding-top: 116px;
		padding-bottom: 70px;
	}

	.dnm-hero__title {
		font-size: 32px;
	}

	.dnm-hero__eyebrow {
		font-size: 18px;
	}

	.dnm-hero__cta {
		margin-bottom: 40px;
	}

	.dnm-hero__stats {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.dnm-hero__stat dt {
		font-size: 36px;
	}

}

/* ============================================================
   SECTION 2 — Dấu ấn thương hiệu (timeline chọn năm)
   Figma: nội dung trái = Group 4814 (4122:74)
          stage phải (path + 3 mốc) đo quy về % trong 1 "stage" ảo
          bbox 1187×796 = hợp của path + accents + 3 mốc + 3 nhãn năm
   ============================================================ */
.dnm-milestones {
	position: relative;
	padding: 110px 9.84375vw 70px;
	background: #fff;
}

/* Nền glow vẫn tràn hết section; nội dung bên trong dùng container chung. */
.dnm-milestones__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dnm-milestones__path,
.dnm-milestones__accents {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

.dnm-milestones__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(280px, 536px) 1fr;
	align-items: center;
	gap: clamp(40px, 6vw, 110px);
	max-width: 1542px;
	margin: 0 auto;
}

.dnm-milestones__content {
	max-width: 536px;
	padding-top: 8px;
}

.dnm-milestones__heading {
	margin: 0 0 39px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.44px;
	color: #1854b5;
}

.dnm-milestones__year {
	margin: 0 0 34px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.02;
	color: #1854b5;
}

.dnm-milestones__desc {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 29px;
	letter-spacing: 0.18px;
	color: #000;
	text-align: justify;
	min-height: 175px;
}

.dnm-milestones__stage {
	position: relative;
	min-width: 0;
	min-height: 460px;
	aspect-ratio: 1187 / 796;



}

/* .dnm-milestones__track là mặt phẳng toạ độ % mà 3 "chỗ đứng" .dnm-milestone--
   slot-sm/md/lg bên dưới dùng làm gốc — tách riêng khỏi .dnm-milestones__stage
   để có thể thêm khung/hiệu ứng cho "sân khấu" sau này (vd. mờ dần ở rìa) mà
   không đụng vào toạ độ các mốc. */
.dnm-milestones__track {
	position: absolute;
	inset: 0;
}

/* Mũi tên điều hướng băng chuyền — cùng kiểu với .dnm-projects__prev/next,
   đặt ở góc dưới-phải sân khấu. */
.dnm-milestones__nav {
	position: absolute;
	right: 0px;
	bottom: 0;
	z-index: 5;
	display: flex;
	gap: 12px;
}

.dnm-milestones__prev,
.dnm-milestones__next {
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-milestones__prev:hover,
.dnm-milestones__next:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
}

.dnm-milestones__prev svg,
.dnm-milestones__next svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-milestones__prev {
	color: #01a0e2;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-milestones__next {
	color: #1854b5;
}

/* Mốc năm — mỗi nút luôn ở 1 trong 3 "chỗ đứng" cố định (.dnm-milestone--
   slot-sm/md/lg bên dưới), toạ độ đo trực tiếp trên Figma (stage ảo bbox
   1187×796, hợp của glow + 3 mốc + 3 nhãn năm). layout() trong <script> chỉ
   chuyển đổi CLASS slot giữa các nút — không set toạ độ trực tiếp — nên
   chuyển động mượt nhờ transition bên dưới mà vẫn khớp pixel với thiết kế. */
.dnm-milestone {
	position: absolute;
	display: block;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	transition: left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		top 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.3s ease, z-index 0s;
	/* Mốc chưa lọt vào 3 hạng đầu (chưa có class slot) — ẩn hẳn, đúng yêu cầu
	   "slider chỉ hiển thị 3 item"; có bấm lên hạng đầu mới hiện ra. */
	left: 20%;
	top: 20%;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dnm-milestone__pin,
.dnm-milestone__label {
	pointer-events: none;
}

.dnm-milestone--slot-sm,
.dnm-milestone--slot-md,
.dnm-milestone--slot-lg {
	opacity: 1;
	/* Khung ngoài của 3 mốc chồng lấn nhau theo đúng bố cục Figma — tắt
	   hit-test ở khung ngoài, chỉ bật lại đúng vùng ảnh pin + nhãn năm để
	   mốc đứng sau không bị mốc đứng trước "che" mất click. */
	pointer-events: none;
}

.dnm-milestone--slot-sm .dnm-milestone__pin,
.dnm-milestone--slot-sm .dnm-milestone__label,
.dnm-milestone--slot-md .dnm-milestone__pin,
.dnm-milestone--slot-md .dnm-milestone__label,
.dnm-milestone--slot-lg .dnm-milestone__pin,
.dnm-milestone--slot-lg .dnm-milestone__label {
	pointer-events: auto;
}

.dnm-milestone__pin {
	position: absolute;
	display: block;
	transition: filter 0.25s ease;
}

.dnm-milestone__pin picture,
.dnm-milestone__pin img {
	display: block;
	width: 100%;
	height: 75%;
}

.dnm-milestone__pin img {
	/* Ảnh mốc (timeline-pin-*.png) là artwork dựng sẵn — hình pin bo tròn +
	   đuôi ghim + bóng đổ đã nằm sẵn trong ảnh — dùng contain để giữ nguyên
	   hình dạng, không crop/kéo méo thành hình tròn. */
	object-fit: contain;
	pointer-events: none;
	transition: transform 0.3s ease;
}

.dnm-milestone.is-active .dnm-milestone__pin {
	filter: drop-shadow(0 10px 22px rgba(1, 160, 226, 0.45));
}

/* Hiệu ứng hover — KHÔNG có trong Figma, thêm vào cho ảnh "sống" hơn. */
@media (hover: hover) {
	.dnm-milestone:hover .dnm-milestone__pin img {
		transform: scale(1.08);
	}
}

.dnm-milestone__label {
	position: absolute;
	display: block;
	margin: 0;
	font-weight: 700;
	line-height: 0.8;
	color: #1854b5;
	white-space: nowrap;
	-webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.85) 100%);
}

/* Chỗ đứng nhỏ nhất — lùi xa nhất, góc trên-phải của stage. */
.dnm-milestone--slot-sm {
	left: 49.21%;
	top: -14%;
	width: 36.90%;
	height: 36.68%;
	z-index: 1;
}

.dnm-milestone--slot-sm .dnm-milestone__pin {
	left: 0%;
	top: 0%;
	width: 76.94%;
	height: 100%;
}

.dnm-milestone--slot-sm .dnm-milestone__label {
	left: 59.36%;
	top: 48.63%;
	font-size: 48px;
	letter-spacing: 1.44px;
}

/* Chỗ đứng trung — giữa. */
.dnm-milestone--slot-md {
	left: 24.51%;
	top: -5.08%;
	width: 38.50%;
	height: 60.36%;
	z-index: 2;
}

.dnm-milestone--slot-md .dnm-milestone__pin {
	left: 0%;
	top: 0%;
	width: 82.79%;
	height: 100%;
}

.dnm-milestone--slot-md .dnm-milestone__label {
	left: 63.02%;
	top: 38.09%;
	font-size: 64px;
	letter-spacing: 1.92px;
}

/* Chỗ đứng lớn nhất — active, đứng trước, dưới-trái của stage. */
.dnm-milestone--slot-lg {
	left: 3%;
	top: 22.93%;
	width: 44.66%;
	height: 64.07%;
	z-index: 3
}

.dnm-milestone--slot-lg .dnm-milestone__pin img {
	scale: 1.5;
}

.dnm-milestone--slot-lg .dnm-milestone__pin {
	left: -6%;
	top: 6%;
	width: 64.68%;
	height: 100%;
}

.dnm-milestone--slot-lg .dnm-milestone__label {
    left: 57.89%;
    top: 41.86%;
    font-size: 85px;
    letter-spacing: 2.88px;;
}

/* --------------------------------------------------------
   Responsive — Dấu ấn thương hiệu
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	.dnm-milestones {
		padding-left: 40px;
		padding-right: 40px;
	}

	.dnm-milestones__inner {
		grid-template-columns: 1fr;
		gap: 64px;
	}

	.dnm-milestones__content {
		max-width: 100%;
	}

	.dnm-milestones__stage {
		width: 100%;
		min-height: 380px;
	}
}

@media (max-width: 640px) {
	.dnm-milestones {
		padding: 64px 20px 80px;
	}

	.dnm-milestones__inner {
		gap: 48px;
	}

	.dnm-milestones__heading,
	.dnm-milestones__year {
		font-size: 36px;
	}

	.dnm-milestones__stage {
		min-height: 260px;
	}

	.dnm-milestone--slot-sm .dnm-milestone__label {
		font-size: 28px;
	}

	.dnm-milestone--slot-md .dnm-milestone__label {
		font-size: 36px;
	}

	.dnm-milestone--slot-lg .dnm-milestone__label {
		font-size: 52px;
	}

	.dnm-milestones__prev,
	.dnm-milestones__next {
		width: 36px;
		height: 36px;
	}
}

/* --------------------------------------------------------
   1. Khung section + dải nền gradient
   Nền lấy từ Rectangle 534 (4112:73): 1920×1450, y 1553→3003.
   Nội dung section nằm ở offset 515 của dải đó, nên ::before
   được đẩy lên -415px để cắt đúng đoạn gradient.
   -------------------------------------------------------- */
.dnm-products {
	position: relative;
	padding: 100px 189px 103px;
	/*overflow: hidden;*/
	isolation: isolate;
}

.dnm-products::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -415px;
	left: 0;
	width: 100%;
	height: 1450px;
	pointer-events: none;
	background-image: url(../demo-images/bg_sp.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.dnm-products::after {
	content: "";
	position: absolute;
	z-index: -2;
	top: -86%;
	right: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	background-image: url(../demo-images/bg_nam.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.dnm-products__inner {
	max-width: 1542px;
	margin: 0 auto;
}

/* --------------------------------------------------------
   2. Lưới 4 cột
   1542 = 4×365 + 3×27.333
   -------------------------------------------------------- */
.dnm-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 27.333px;
	row-gap: 26px;
}

/* --------------------------------------------------------
   3. Card chung
   -------------------------------------------------------- */
.dnm-product-card {
	position: relative;
	aspect-ratio: 365 / 343;
	border-radius: 31px;
	overflow: hidden;
	text-decoration: none;
	display: block;
}

.dnm-product-card--plain {
	background: #fff;
}

/* Gradient toả — copy nguyên gradient của Figma để giữ đúng hướng và tâm */
.dnm-product-card--glow-cyan {
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 365 343' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-23.705 -0.8922 -3.562 -13.695 355.08 141.76)'><stop stop-color='rgb(157,232,255)' offset='0'/><stop stop-color='rgb(201,242,255)' offset='0.33333'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
	background-size: 100% 100%;
}

.dnm-product-card--cokhi {
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 365 343' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-29.26 25.18 -19.425 -12.389 292.6 -20.818)'><stop stop-color='rgb(157,232,255)' offset='0'/><stop stop-color='rgb(201,242,255)' offset='0.33333'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
}

.dnm-product-card--glow-violet {
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 365 343' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-31.442 14.374 -10.372 -16.849 417.57 42.627)'><stop stop-color='rgb(145,166,255)' offset='0'/><stop stop-color='rgb(209,218,255)' offset='0.37255'/><stop stop-color='rgb(255,255,255)' offset='0.92359'/></radialGradient></defs></svg>");
	background-size: 100% 100%;
}

/* --------------------------------------------------------
   4. Ô tiêu đề
   -------------------------------------------------------- */
.dnm-product-card--intro {
	background: #0348d3;
}

/* Ảnh nền lệch khung có chủ ý: Figma đặt ảnh tràn phải và tụt xuống 13.9%,
   chừa dải xanh #0348d3 ở đỉnh card. Giữ nguyên tỉ lệ gốc của Figma. */
.dnm-product-card__backdrop {
	position: absolute;
    left: 0;
    bottom: 0;
    width: 171.23%;
    height: 102.43%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;;
}

.dnm-products__heading {
	position: absolute;
	top: 14px;
	left: 27px;
	right: 27px;
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	color: #fff;
}

.dnm-products__heading span {
	display: block;
}

.dnm-products__heading span+span {
	margin-top: 7px;
}

/* --------------------------------------------------------
   5. Tiêu đề + ảnh + mũi tên trong card
   -------------------------------------------------------- */
.dnm-product-card__title {
	position: absolute;
	top: 37px;
	left: 29px;
	right: 24px;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 22px;
	color: #1854b5;
}

.dnm-product-card__title span {
	display: block;
}

.dnm-product-card__title span+span {
	margin-top: 7px;
}

/* Vị trí ảnh khác nhau từng card → khai báo bằng biến, xem mục 6 */
.dnm-product-card__media {
	position: absolute;
	left: var(--media-x);
	top: var(--media-y);
	width: var(--media-w);
	height: var(--media-h);
	object-fit: contain;
	pointer-events: none;
}

.dnm-product-card__arrow {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	color: #1854b5;
}

.dnm-product-card__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------
   6. Toạ độ ảnh từng card (đo trực tiếp trên Figma, quy ra %)
   -------------------------------------------------------- */
.dnm-product-card--ximang {
	--media-x: 6.630%;
	--media-y: 37.493%;
	--media-w: 86.959%;
	--media-h: 49.038%;
}

.dnm-product-card--da {
	--media-x: 6.493%;
	--media-y: 37.493%;
	--media-w: 86.959%;
	--media-h: 49.038%;
}

.dnm-product-card--gach {
	--media-x: 4.932%;
	--media-y: 37.493%;
	--media-w: 86.959%;
	--media-h: 49.038%;
}

.dnm-product-card--betong {
	--media-x: 3.562%;
	--media-y: 37.026%;
	--media-w: 82.548%;
	--media-h: 50.554%;
}

.dnm-product-card--cokhi {
	--media-x: 6.630%;
	--media-y: 37.026%;
	--media-w: 79.836%;
	--media-h: 50.262%;
}

.dnm-product-card--dien {
	--media-x: 4.027%;
	--media-y: 37.026%;
	--media-w: 82.548%;
	--media-h: 50.262%;
}

.dnm-product-card--vinfast {
	--media-x: 4.932%;
	--media-y: 37.609%;
	--media-w: 81.178%;
	--media-h: 49.417%;
}

/* --------------------------------------------------------
   7. Nút "Xem thêm sản phẩm, dịch vụ"
   -------------------------------------------------------- */
.dnm-products__more {
	position: relative;
	display: flex;
	align-items: center;
	width: 368px;
	height: 50px;
	margin-top: 70px;
	padding: 0 22px;
	border-radius: 38px;
	background: #1854b5;
	color: #fff;
	text-decoration: none;
}

.dnm-products__more-label {
	font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.36px;
	white-space: nowrap;
}

.dnm-products__more-icon {
	position: absolute;
	right: 18px;
	/* căn theo ảnh render thật của Figma, không theo inset thô */
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 21px;
	transform: translateY(-50%);
}

.dnm-products__more-icon svg {
	display: block;
	width: 19.05px;
	height: 16.39px;
	transform: rotate(-90deg);
}

/* --------------------------------------------------------
   8. Hover — KHÔNG có trong Figma, thêm vào cho thẻ bấm được.
   Xoá cả block này nếu muốn bám design 100%.
   -------------------------------------------------------- */
@media (hover: hover) {

	.dnm-product-card[href],
	.dnm-products__more,
	.dnm-product-card__arrow {
		transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
	}

	/* Vòng tròn viền (path đầu) chuyển trong suốt để không đè lên nền đặc bên dưới */
	.dnm-product-card__arrow svg path:first-child {
		transition: stroke-opacity 0.25s ease;
	}

	.dnm-product-card[href]:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 36px rgba(24, 84, 181, 0.18);
	}

	/* Mũi tên: viền rỗng → tròn đặc xanh + mũi tên trắng */
	.dnm-product-card[href]:hover .dnm-product-card__arrow {
		background: #1854b5;
		color: #fff;
	}

	.dnm-product-card[href]:hover .dnm-product-card__arrow svg path:first-child {
		stroke-opacity: 0;
	}

	.dnm-products__more:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px rgba(24, 84, 181, 0.3);
	}
}

/* --------------------------------------------------------
   9. Responsive
   -------------------------------------------------------- */
@media (max-width: 1920px) {
	.dnm-products {
		padding-left: 9.84375vw;
		/* 189/1920 */
		padding-right: 9.84375vw;
	}
}

@media (max-width: 1200px) {
	.dnm-products {
		padding: 80px 40px;
	}

	.dnm-products__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 24px;
	}

	/* card hẹp lại, giữ tiêu đề đúng 2 dòng như Figma */
	.dnm-products__heading {
		font-size: 40px;
		line-height: 42px;
	}

	.dnm-products__more {
		margin-top: 48px;
	}
}

@media (max-width: 640px) {
	.dnm-products {
		padding: 56px 20px;
	}

	.dnm-products__grid {
		grid-template-columns: 1fr;
	}

	.dnm-products__heading {
		font-size: 40px;
		line-height: 42px;
	}

	.dnm-products__more {
		width: 100%;
		max-width: 368px;
		margin-top: 36px;
	}
}

/* ============================================================
   SECTION 3 — Quy mô mạng lưới kinh doanh
   Figma: thẻ trái = Group 4829 (4122:144) · bản đồ = Group 4827 (4122:498)
   Ảnh nền tràn viền (full-bleed) nên toạ độ quy % trên "stage" ảo
   1920×982, không dùng khung .dnm-*__inner max-width như các section khác.
   ============================================================ */
.dnm-network {
	background: #fff;
}

.dnm-network__stage {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 1920 / 982;
	overflow: hidden;
}

.dnm-network__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 76.07%;
}

.dnm-network__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dnm-network__fade {
	position: absolute;
	left: 0;
	top: 47.56%;
	width: 100%;
	height: 47.86%;
	pointer-events: none;
}

/* --------------------------------------------------------
   Thẻ trái "Mạng lưới kinh doanh"
   -------------------------------------------------------- */
.dnm-network__card {
	position: absolute;
	left: 9.9%;
	top: 39.61%;
	width: 28.28%;
	height: 51.43%;
	z-index: 2;
}

.dnm-network__card-decor {
	position: absolute;
	left: -5.63%;
	top: 19.09%;
	width: 114.4%;
	height: 90.34%;
	pointer-events: none;
}

.dnm-network__card-box {
	position: relative;
	z-index: 1;
	height: 100%;
	padding: 32px 40px 32px 31px;
	border-radius: 31px;
	background: #fff;
	box-shadow: 0 -18px 48.9px 8px rgba(24, 84, 181, 0.19);
}

.dnm-network__card-eyebrow {
	margin: 0 0 7px;
	font-size: 24px;
	font-weight: 400;
	color: #01a0e2;
}

.dnm-network__card-heading {
	margin: 0 0 42px;
	font-size: 48px;
	font-weight: 700;
	line-height: 0.99;
	color: #1854b5;
}

.dnm-network__card-desc {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	color: #000;
	text-align: justify;
}

/* --------------------------------------------------------
   Bản đồ + điểm mốc
   -------------------------------------------------------- */
.dnm-network__map {
	position: absolute;
	left: 42.44%;
	top: 49.21%;
	width: 47.55%;
	height: 50.82%;
	z-index: 1;
}

.dnm-network__map-img,
.dnm-network__map-svg {
	position: absolute;
	left: 12.93%;
	top: 0;
	width: 87.08%;
	height: 100%;
	display: block;
}

.dnm-network__map-svg path,
.dnm-network__map-svg g {
	transition: fill 0.3s ease, filter 0.3s ease;
}

/* Các tỉnh không có chi nhánh: xanh nhạt (#C7D7EC theo Figma "Bản đồ" 4188:2) — đường viền tỉnh là khe trắng nằm sẵn trong hình */
.dnm-network__map-svg path.dnm-province {
	fill: #c7d7ec;
	fill-opacity: 1;
	stroke: none;
}

/* Các tỉnh có chi nhánh: màu xanh thương hiệu.
   Tỉnh gồm nhiều mảnh (An Giang: đất liền + đảo Phú Quốc) được gom trong <g class="dnm-province--has-branch"> */
.dnm-network__map-svg path.dnm-province--has-branch,
.dnm-network__map-svg g.dnm-province--has-branch path {
	fill: #1854b5;
	fill-opacity: 1;
	cursor: pointer;
}

/* Khi hover hoặc click vào tỉnh có chi nhánh: sáng rực lên */
.dnm-network__map-svg path.dnm-province--has-branch:hover,
.dnm-network__map-svg path.dnm-province--has-branch.is-active,
.dnm-network__map-svg g.dnm-province--has-branch:hover path,
.dnm-network__map-svg g.dnm-province--has-branch.is-active path {
	fill: #01a0e2;
	fill-opacity: 1;
}

.dnm-network__map-svg path.dnm-province--has-branch:hover,
.dnm-network__map-svg path.dnm-province--has-branch.is-active,
.dnm-network__map-svg g.dnm-province--has-branch:hover,
.dnm-network__map-svg g.dnm-province--has-branch.is-active {
	filter: drop-shadow(0 0 8px rgba(1, 160, 226, 0.85));
}

.dnm-network__map-svg .dnm-archipelago__island {
	fill: #1854b5;
	fill-opacity: 0.65;
	stroke: #ffffff;
	stroke-width: 2;
}

.dnm-network__map-svg .dnm-archipelago__label {
	fill: #1854b5;
	stroke: #ffffff;
	stroke-width: 4;
	paint-order: stroke;
	font-size: 18px;
	font-weight: 700;
	pointer-events: none;
}

/* Hiệu ứng pin nhảy nhấp nhô lặp lại liên tục */
@keyframes dnm-pin-jump {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

.dnm-network__pin {
	/* Chỉ còn là điểm neo dữ liệu (title/description/vị trí popup) cho JS đọc
	   khi bấm vào tỉnh tô xanh trên bản đồ — không hiển thị ghim nữa vì có
	   nhiều chi nhánh, các ghim chồng lấn nhau che hết bản đồ. Không xoá khỏi
	   HTML vì JS (demo-home.js) vẫn lấy data-* từ đây để hiện popup. */
	display: none;
}

.dnm-network__pin--nghe-an {
	left: 27.88%;
	top: 6.94%;
}

.dnm-network__pin--an-giang {
	left: 28.48%;
	top: 65.21%;
	animation-delay: 0.5s;
}

.dnm-network__pin picture,
.dnm-network__pin img {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-network__pin img {
	object-fit: contain;
	pointer-events: none;
}

.dnm-network__popup {
	position: absolute;
	left: 0;
	top: 20.4%;
	width: 28.87%;
	min-height: 22.84%;
	height: auto;
	z-index: 4;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 17px;
	background: #fff;
	box-shadow: 0 10px 54.5px 15px rgba(24, 84, 181, 0.19);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.dnm-network__popup.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.dnm-network__popup-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color 0.2s ease, background 0.2s ease;
}

.dnm-network__popup-close:hover {
	color: #1854b5;
	background: rgba(24, 84, 181, 0.08);
}

.dnm-network__popup-badge {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #1854b5;
	color: #1854b5;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dnm-network__popup-body {
	min-width: 0;
}

.dnm-network__popup-title {
	margin: 0 0 6px;
	padding-bottom: 6px;
	font-size: 19px;
	font-weight: 700;
	color: #1854b5;
	border-bottom: 1px solid rgba(24, 84, 181, 0.25);
}

.dnm-network__popup-line {
	margin: 2px 0 0;
	font-size: 12px;
	color: #000;
}

/* --------------------------------------------------------
   Responsive — Mạng lưới kinh doanh
   Giữ nguyên "stage" co giãn theo tỉ lệ, chỉ giảm cỡ chữ cho dễ đọc.
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	
	.dnm-network__card-box {
		padding: 20px 22px;
	}
	.dnm-network__popup-title{
		    font-size: 16px;
	}
.dnm-network__popup-badge{
	    width: 25px;
    height: 25px;
	font-size: 12px;
}
	.dnm-network__card-eyebrow {
		font-size: 16px;
	}

	.dnm-network__card-heading {
		margin-bottom: 16px;
		font-size: 28px;
	}

	.dnm-network__card-desc {
		font-size: 12px;
		line-height: 1.5;
	}

	.dnm-network__popup {
		gap: 8px;
		padding: 8px 10px;
		border-radius: 10px;
	}

	.dnm-network__popup-badge {
		width: 22px;
		height: 22px;
		font-size: 12px;
		border-width: 1.5px;
	}

	.dnm-network__popup-title {
		margin-bottom: 2px;
		padding-bottom: 2px;
		font-size: 13px;
	}

	.dnm-network__popup-line {
		font-size: 11px;
	}
}

@media (max-width: 640px) {

	/* Bỏ cách dàn theo % trên 1 "stage" cao cố định (hay bị dư khoảng trắng
	   khi nội dung ngắn hơn khung) — chuyển sang xếp chồng theo dòng chảy
	   tự nhiên, thẻ + bản đồ tự co theo đúng nội dung của nó. */
	.dnm-network__stage {
		aspect-ratio: auto;
		min-height: 0;
		padding-bottom: 32px;
		overflow: visible;
	}

	.dnm-network__bg {
		position: relative;
		height: 220px;
	}

	.dnm-network__fade {
		display: none;
	}

	.dnm-network__card {
		position: relative;
		inset: auto;
		left: auto;
		top: auto;
		width: 92%;
		height: auto;
		margin: -56px auto 24px;
	}

	.dnm-network__card-decor {
		display: none;
	}

	.dnm-network__card-box {
		padding: 20px 18px;
	}

	.dnm-network__card-heading {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.dnm-network__card-desc {
		font-size: 12px;
		line-height: 1.5;
	}

	.dnm-network__map {
		position: relative;
		inset: auto;
		left: auto;
		top: auto;
		width: 92%;
		height: auto;
		aspect-ratio: 913 / 499;
		margin: 0 auto;
	}

	/* Popup co theo % của bản đồ sẽ quá hẹp để đọc — cho rộng theo nội dung */
	.dnm-network__popup {
		width: auto;
		max-width: 65%;
	}
}

/* ============================================================
   SECTION 4 — Dự án (slider)
   3 dự án hiển thị trong cùng container width với các section còn lại.
   ============================================================ */
.dnm-projects {
	padding: 100px 9.84375vw 0;
	overflow: hidden;
	background: #fff;
}

.dnm-projects__inner {
	max-width: 1542px;
	margin: 0 auto;
}

.dnm-projects__heading {
	margin: 0 0 48px;
	font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 0.99;
	color: #1854b5;
	text-align: center;
}

.dnm-projects__swiper {
	width: 100%;
	max-width: 1542px;
	margin: 0 auto;
	padding-bottom: 8px;
	max-width: 1542px;
	overflow: visible;
}

.dnm-project-slide {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1400 / 581;
	width: calc(100% - clamp(120px, 16vw, 220px));
	max-width: 1400px;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.dnm-project-slide__info {
	flex: 0 0 33.71%;
	/* 472/1400 */
	display: flex;
	flex-direction: column;
	padding: 50px;
	border-radius: 25px 0 0 25px;
	background: #e9f2ff;
}

.dnm-project-slide__info h3 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: 0.96px;
	color: #1854b5;
}

.dnm-project-slide__info p {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: 0.72px;
	color: #1854b5;
	font-weight: 400;
}

.dnm-project-slide__info p strong {
	font-weight: 700;
}

.dnm-project-slide__cta {
	display: inline-flex;
	width: fit-content;
	flex: none;
	align-items: center;
	gap: 10px;
	height: 49px;
	margin-top: auto;
	padding: 0 24px 0 28px;
	border-radius: 38px;
	background-image: linear-gradient(122.5deg, #1854b5 20.36%, #09cfff 93.3%);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.54px;
	position: relative;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
	will-change: transform;
}

.dnm-project-slide__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 17px;
	transition: transform 0.28s ease;
}

.dnm-project-slide__cta-icon svg {
	display: block;
	width: 19.05px;
	height: 16.39px;
	transform: rotate(-90deg);
}

.dnm-project-slide__photo {
	position: relative;
	flex: 1;
	overflow: hidden;
	border-radius: 0 25px 25px 0;
}

.dnm-project-slide__photo picture,
.dnm-project-slide__photo img {
	display: block;
}

.dnm-project-slide__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	transition: transform 0.5s ease;
}

/* Hiệu ứng hover — KHÔNG có trong Figma, thêm vào cho ảnh "sống" hơn. */
@media (hover: hover) {
	.dnm-project-slide__photo:hover img {
		transform: scale(1.06);
	}
}

.dnm-projects__nav-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
	padding-top: 0;
	padding-bottom: 100px;
}

.dnm-projects__nav {
	display: flex;
	gap: 16px;
}

.dnm-projects__prev,
.dnm-projects__next {
	width: 56px;
	height: 56px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-projects__prev:hover,
.dnm-projects__next:hover {
	transform: scale(1.08);
}

.dnm-projects__prev.swiper-button-disabled,
.dnm-projects__next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.dnm-projects__prev svg,
.dnm-projects__next svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-projects__prev {
	color: #01a0e2;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-projects__next {
	color: #1854b5;
}

/* --------------------------------------------------------
   Responsive — Dự án
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	.dnm-projects {
		padding: 72px 40px 0;
	}

	.dnm-projects__heading {
		margin-bottom: 32px;
		font-size: 36px;
	}

	.dnm-project-slide {
		max-width: 100%;
	}

	.dnm-project-slide__info {
		padding: 24px 20px;
	}

	.dnm-project-slide__info h3 {
		font-size: 18px;
	}

	.dnm-project-slide__info p {
		font-size: 13px;
		line-height: 1.4;
	}

	.dnm-project-slide__cta {
		height: 38px;
		padding: 0 16px 0 20px;
		font-size: 13px;
	}

	.dnm-projects__nav-wrap {
		padding-bottom: 72px;
	}
}

@media (max-width: 640px) {
	.dnm-projects {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dnm-project-slide {
		flex-direction: column;
		width: 100%;
		aspect-ratio: auto;
	}

	.dnm-project-slide__info {
		flex: none;
		padding: 20px;
		border-radius: 25px 25px 0 0;
	}

	.dnm-project-slide__photo {
		aspect-ratio: 543/339;
		border-radius: 0 0 25px 25px;
	}

	.dnm-project-slide__cta {
		margin-top: 20px;
	}

	.dnm-projects__nav-wrap {
		padding-bottom: 56px;
	}
}

/* ============================================================
   SECTION — Các thương hiệu của HUD Kiên Giang + Đối tác chiến lược
   Figma: Group 4821 (4122:272)
   ============================================================ */
.dnm-brands-partners {
	padding: 100px 9.84375vw 0;
	background: #fff;
}

.dnm-brands-partners__inner {
	max-width: 1542px;
	margin: 0 auto;
}

/* --------------------------------------------------------
   Các thương hiệu — slider bấm nhảy 1 item
   -------------------------------------------------------- */
.dnm-brands {
	margin-bottom: 89px;
}

.dnm-brands__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 89px;
}

.dnm-brands__heading {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 0.99;
	color: #1854b5;
}

/* line-height 0.99 gần như không có khoảng cách dòng — đủ cho 1 dòng, nhưng
   tiêu đề này xuống 2 dòng nên dấu tiếng Việt (ớ, ầ, ệ…) của dòng dưới đè
   lên dòng trên. Figma cũng dùng 0.99 nhưng chèn thêm margin-bottom 7px
   riêng giữa 2 dòng — tách heading thành 2 span để làm đúng như vậy, thay
   vì tăng line-height chung (sẽ lệch với các heading 1 dòng khác cùng class). */
.dnm-brands__heading span {
	display: block;
}

.dnm-brands__heading span:first-child {
	margin-bottom: 7px;
}

.dnm-brands__controls {
	display: flex;
	align-items: center;
	gap: 40px;
}

.dnm-brands__pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	position: static;
	width: auto;
}

.dnm-brands__pagination .swiper-pagination-bullet {
	margin: 0 !important;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #01a0e2;
	opacity: 1;
	transition: width 0.3s ease, background 0.3s ease;
}

.dnm-brands__pagination .swiper-pagination-bullet-active {
	width: 28px;
	background: #1854b5;
}

.dnm-brands__nav {
	display: flex;
	gap: 16px;
}

.dnm-brands__prev,
.dnm-brands__next {
	width: 56px;
	height: 56px;
	flex: none;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-brands__prev:hover,
.dnm-brands__next:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
}

.dnm-brands__prev svg,
.dnm-brands__next svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-brands__prev {
	color: #01a0e2;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-brands__next {
	color: #1854b5;
}

.dnm-brands__swiper {
	width: 100%;
}

.dnm-brands__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
}

/* width/height 100% + object-fit thay vì max-width/max-height "auto" — với
   max-height, % của <img> phân giải theo chiều cao <picture>, mà <picture>
   lại không có chiều cao riêng (chỉ auto theo nội dung) nên trình duyệt bỏ
   qua ràng buộc đó: logo hình vuông (brand-vlxd) render đúng kích thước gốc
   360×360, tràn quá khung 132px cao rồi bị Swiper cắt mất phần dư — đây là
   nguyên nhân ảnh "bị cắt xấu". width/height 100% luôn phân giải đúng theo
   khung .dnm-brands__logo (132px, không phụ thuộc <picture>), object-fit:
   contain co logo vừa khít khung, không bao giờ tràn/cắt và mọi logo cùng
   chung 1 khung nên nhìn đều nhau như thiết kế. */
.dnm-brands__logo picture,
.dnm-brands__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------
   Đối tác chiến lược — băng chạy liên tục
   -------------------------------------------------------- */
.dnm-partners {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 202px;
	padding: 24px 40px 24px 45px;
	border-radius: 32px;
	background: #e9f2ff;
	overflow: hidden;
}

.dnm-partners__label {
	position: relative;
	z-index: 2;
	flex: none;
	margin: 0 24px 0 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 0.99;
	color: #1854b5;
	white-space: nowrap;
}

.dnm-partners__fade {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 340px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right, #e9f2ff 23%, rgba(233, 242, 255, 0) 100%);
}

.dnm-partners__viewport {
	position: relative;
	z-index: 0;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.dnm-partners__track {
	display: flex;
	gap: 24px;
	width: max-content;
	animation: dnm-marquee 22s linear infinite;
}

.dnm-partners:hover .dnm-partners__track {
	animation-play-state: paused;
}

@keyframes dnm-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dnm-partners__track {
		animation: none;
	}
}

.dnm-partners__logo {
	width: 178px;
	height: 111px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #fff;
}

.dnm-partners__logo picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.dnm-partners__logo img {
	display: block;
	max-width: 75%;
	max-height: 68%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

/* --------------------------------------------------------
   Responsive — Thương hiệu + Đối tác
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	.dnm-brands-partners {
		padding-left: 40px;
		padding-right: 40px;
	}

	.dnm-brands {
		margin-bottom: 56px;
	}

	.dnm-brands__head {
		margin-bottom: 40px;
	}

	.dnm-brands__heading {
		font-size: 32px;
	}

	.dnm-brands__logo {
		height: 90px;
	}

	.dnm-partners {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px;
	}

	.dnm-partners__label {
		margin: 0;
		font-size: 28px;
	}

	.dnm-partners__fade {
		display: none;
	}

	.dnm-partners__viewport {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.dnm-brands-partners {
		padding: 64px 20px 72px;
	}

	.dnm-brands__head {
		gap: 16px;
	}

	.dnm-brands__heading {
		font-size: 24px;
	}

	.dnm-brands__controls {
		gap: 20px;
	}

	.dnm-brands__prev,
	.dnm-brands__next {
		width: 40px;
		height: 40px;
	}

	.dnm-brands__logo {
		height: 64px;
	}

	.dnm-partners__logo {
		width: 130px;
		height: 82px;
	}
}

/* ============================================================
   SECTION — Tin tức - Sự kiện
   Figma: Group 4822 (4122:37) — 1 tin nổi bật + 2 tin nhỏ
   ============================================================ */
.dnm-news {
	/* Gutter trái/phải đặt ở section ngoài (giống .dnm-header/.dnm-products) —
	   .dnm-news__inner chỉ lo max-width + canh giữa. Đặt gutter ở CẢ HAI (như
	   bản trước) làm max-width:1542px bị trừ thêm 2×9.84vw do box-sizing:
	   border-box, hụt mất ~380px content thật, khiến ảnh/cột bị bóp sai tỉ lệ. */
	padding: 100px 9.84375vw;
	background: #fff;
}

.dnm-news__inner {
	max-width: 1542px;
	margin: 0 auto;
}

.dnm-news__head {
	margin-bottom: 67px;
}

.dnm-news__heading {
	margin: 0;
	font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 0.99;
	color: #1854b5;
}

/* Cột trái (tin nổi bật) : cột phải (danh sách 2 tin nhỏ) = 917 : 589px đo
   trên Figma (không phải 1fr 1fr — cột trái rộng hơn hẳn), gap giữ 36px. */
.dnm-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 60%) minmax(0, 40%);
	gap: 36px;
	align-items: start;
}

.dnm-news__link {
	margin-top: auto;
	padding-top: 20px;
	display: inline-flex;
	width: fit-content;
	flex: none;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	color: #1854b5;
	text-decoration: none;
	white-space: nowrap;
}

.dnm-news__link svg {
	flex: none;
	width: 33px;
	height: 33px;
}

/* Ảnh tin — 1 kiểu crop responsive chung cho cả tin nổi bật lẫn tin nhỏ,
   thay cho cách đo % riêng từng ảnh theo Figma trước đây (position:
   absolute với toạ độ đo tay, không responsive, mỗi ảnh mới lại phải đo
   lại). object-fit: cover tự canh giữa + lấp đầy khung theo mọi tỉ lệ màn. */
.dnm-news__media {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
	aspect-ratio: 613 / 381;
	/* .dnm-news__featured/.dnm-news__item là flex row với align-items mặc
	   định = stretch — nếu không tắt stretch riêng cho khung ảnh, chiều cao
	   bị kéo giãn theo cột chữ thay vì giữ đúng aspect-ratio (ảnh phồng to
	   bất thường). Cột chữ (.dnm-news__body) vẫn stretch bình thường để
	   "Xem chi tiết" ghim đúng đáy ảnh. */
	align-self: flex-start;
}

.dnm-news__media--sm {
	aspect-ratio: 335 / 208;
}

.dnm-news__media picture,
.dnm-news__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.dnm-news__media img {
	transition: transform 0.5s ease;
}

/* Hiệu ứng hover — KHÔNG có trong Figma, thêm vào cho ảnh "sống" hơn. */
@media (hover: hover) {
	.dnm-news__media:hover img {
		transform: scale(1.06);
	}
}

.dnm-news__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Tin nổi bật */
.dnm-news__featured {
	display: flex;
	gap: 19px;
}

.dnm-news__featured .dnm-news__media {
	flex: 0 0 66.8%;
}

.dnm-news__tag {
	margin-top: 8px;
	font-size: 14px;
	letter-spacing: 0.7px;
	color: #637074;
}

.dnm-news__title {
	margin: 16px 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.37;
	color: #000;
}

.dnm-news__title--sm {
	margin-top: 10px;
}

.dnm-news__meta {
	margin: 16px 0 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 14px;
	letter-spacing: 0.7px;
	color: #637074;
	white-space: nowrap;
}

.dnm-news__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #637074;
}

/* Danh sách tin nhỏ */
.dnm-news__list {
	display: flex;
	flex-direction: column;
	gap: 31px;
}

.dnm-news__item {
	display: flex;
	gap: 22px;
}

.dnm-news__item .dnm-news__media {
	flex: 0 0 47%;
}

.dnm-news__item-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}

.dnm-news__date {
	font-size: 14px;
	letter-spacing: 0.7px;
	color: #637074;
	white-space: nowrap;
}

/* --------------------------------------------------------
   Responsive — Tin tức
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	.dnm-news__heading {
		font-size: 32px;
	}

	.dnm-news__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.dnm-news__title {
		font-size: 16px;
	}
}

@media (max-width: 640px) {
	.dnm-news {
		padding: 64px 20px 72px;
	}

	.dnm-news__head {
		margin-bottom: 32px;
	}

	.dnm-news__featured,
	.dnm-news__item {
		flex-direction: column;
	}

	.dnm-news__featured .dnm-news__media,
	.dnm-news__item .dnm-news__media {
		flex: none;
	}

	.dnm-news__link {
		padding-top: 16px;
	}
}

/* ============================================================
   FOOTER
   Figma: nền = Rectangle 931 (4122:153), #01a0e2
   ============================================================ */
.dnm-footer {
	background: #01a0e2;
	color: #fff;
	padding: 100px 9.84375vw 40px;
	margin-top: 70px;
}

.dnm-footer__inner {
	position: relative;
	max-width: 1542px;
	margin: 0 auto;
}

.dnm-footer__heading {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
}

.dnm-footer__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.3fr 1.45fr 1fr;
	gap: 40px;
	padding-bottom: 64px;
}

.dnm-footer__grid>* {
	min-width: 0;
}

/* Cột 1 — logo + đăng ký nhận tin */
.dnm-footer__logo {
	display: block;
	height: 75px;
	width: auto;
	max-width: 100%;
	margin-bottom: 32px;
}

.dnm-footer__member {
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 34px;
	font-weight: 400;
}

.dnm-footer__member a {
	color: #fff;
}

.dnm-footer__member a:hover {
	color: #94E0FF;
}

.dnm-footer__member strong {
	display: block;
	font-weight: 700;
}

.dnm-footer__form {
	display: flex;
	align-items: center;
	max-width: 362px;
	padding: 4px 4px 4px 20px;
	border-radius: 30px;
	background: #6cc9ef;
}

.dnm-footer__input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.28px;
	color: #000;
	outline: none;
}

.dnm-footer__input::placeholder {
	color: rgba(0, 0, 0, 0.65);
}

.dnm-footer__submit {
	flex: none;
	padding: 12px 24px;
	border: 0;
	border-radius: 30px;
	background: #1854b5;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

/* Cột 2 — đơn vị thành viên */
.dnm-footer__members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dnm-footer__members a:hover {
	color: #94E0FF;
}

.dnm-footer__members li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 16px;
	line-height: 1.36;
}

.dnm-footer__members strong {
	font-weight: 700;
}

.dnm-footer__members a,
.dnm-footer__contact a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* Cột 3 — liên hệ + mạng xã hội */
.dnm-footer__contact {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dnm-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.25;
}

.dnm-footer__contact svg {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 3px;
}

.dnm-footer__heading--social {
	margin-bottom: 16px;
}

.dnm-footer__social {
	display: block;
	height: 37px;
	width: auto;
	margin-bottom: 24px;
}

.dnm-footer__compliance {
	display: block;
	height: 56px;
	width: auto;
}

/* Nút lên đầu trang */
.dnm-footer__totop {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.dnm-footer__totop:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
}

.dnm-hero__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0) 76%);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
	pointer-events: none;
}

.dnm-project-slide__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0) 76%);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
	pointer-events: none;
}

.dnm-hero__cta span {
	position: relative;
	z-index: 1;
}

.dnm-project-slide__cta span {
	position: relative;
	z-index: 1;
}

.dnm-hero__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(24, 84, 181, 0.22);
	filter: saturate(1.08);
}

.dnm-project-slide__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(24, 84, 181, 0.22);
	filter: saturate(1.08);
}

.dnm-hero__cta:hover::before {
	transform: translateX(120%);
}

.dnm-project-slide__cta:hover::before {
	transform: translateX(120%);
}

.dnm-hero__cta:hover .dnm-hero__cta-icon {
	transform: translateX(4px);
}

.dnm-project-slide__cta:hover .dnm-project-slide__cta-icon {
	transform: translateX(4px);
}

.dnm-hero__cta:focus-visible {
	outline: 3px solid rgba(1, 160, 226, 0.38);
	outline-offset: 4px;
}

.dnm-project-slide__cta:focus-visible {
	outline: 3px solid rgba(1, 160, 226, 0.38);
	outline-offset: 4px;
}

.dnm-header__search:focus-visible {
	outline: 3px solid rgba(1, 160, 226, 0.38);
	outline-offset: 4px;
}

.dnm-projects__prev:focus-visible {
	outline: 3px solid rgba(1, 160, 226, 0.38);
	outline-offset: 4px;
}

.dnm-projects__next:focus-visible {
	outline: 3px solid rgba(1, 160, 226, 0.38);
	outline-offset: 4px;
}

.dnm-header__search:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
}

.dnm-header__lang-option:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
}

.dnm-projects__swiper .swiper-slide-active {
	transform: scale(1);
	opacity: 1;
}

@media (max-width: 1200px) {
	.dnm-project-slide {
		width: calc(100% - clamp(96px, 14vw, 160px));
	}
}

@media (max-width: 640px) {
	.dnm-projects__swiper {
		overflow: hidden;
	}

	.dnm-projects__swiper .swiper-slide:not(.swiper-slide-active) {
		transform: scale(0.94);
		opacity: 0.78;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dnm-hero__cta,
	.dnm-project-slide__cta,
	.dnm-hero__cta::before,
	.dnm-project-slide__cta::before,
	.dnm-hero__cta-icon,
	.dnm-project-slide__cta-icon,
	.dnm-project-slide {
		transition: none;
	}
}

.dnm-footer__totop img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Dòng cuối */
.dnm-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.dnm-footer__bottom p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------
   Responsive — Footer
   -------------------------------------------------------- */
@media (max-width: 1200px) {
	.dnm-footer {
		padding: 72px 40px 32px;
	}

	.dnm-footer__grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}

	.dnm-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.dnm-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dnm-footer__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.dnm-footer__logo {
		height: 48px;
	}

	.dnm-footer__form {
		max-width: 100%;
		flex-wrap: wrap;
		border-radius: 20px;
		padding: 14px 16px;
	}

	.dnm-footer__input {
		flex: 1 1 100%;
		padding: 8px 0;
	}

	.dnm-footer__submit {
		width: 100%;
		margin-top: 8px;
	}

	.dnm-footer__totop {
		position: static;
		margin-bottom: 24px;
	}
}

/* ============================================================
   Search Popup
   ============================================================ */
.dnm-search-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: #000000c7;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dnm-search-popup.is-active {
	opacity: 1;
	visibility: visible;
}

.dnm-search-popup__close {
	position: absolute;
	top: 30px;
	right: 40px;
	width: 100px;
	height: 100px;
	border: 0;
	background: none;
	color: #1854b5;
	cursor: pointer;
	padding: 10px;
	transition: transform 0.2s ease;
}

.dnm-search-popup__close:hover {
	transform: scale(1.1);
}

.dnm-search-popup__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dnm-search-popup__inner {
	width: 100%;
	max-width: 600px;
	padding: 0 20px;
}

.dnm-search-form__field {
	display: flex;
	align-items: center;
	background: #e2effe;
	border-radius: 41px;
	height: 60px;
	padding: 0 24px;
	border: 1.5px solid #1854b5;
}

.dnm-search-form__submit {
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	color: #1854b5;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dnm-search-form__submit svg {
	width: 24px;
	height: 24px;
}

.dnm-search-form__input {
	flex: 1;
	border: 0;
	background: none;
	padding: 0 16px;
	font-family: inherit;
	font-size: 18px;
	color: #000;
	outline: none;
}