/** @format */

/*
 * Giao diện mobile / tablet (≤1199px) — chỉnh theo góp ý khách (slide "ĐIỀU CHỈNH HOME MOBILE").
 * Nạp sau frontend.css, desktop (≥1200px) không bị ảnh hưởng.
 *
 * Shape uốn lượn: dùng lại ảnh desktop, bản mobile nằm ở assets/images/m/
 *  - ảnh dải mỏng (hero-bot, headline-blue, valueN): cắt bỏ đoạn thẳng giữa,
 *    giữ nguyên độ cong 2 vai → hiển thị width 100%
 *  - khối cần co giãn chiều cao (đối tác, khách hàng, footer, khung dịch vụ):
 *    border-image 9 vùng → góc cong giữ nguyên, phần giữa giãn theo nội dung
 */

/* phần tử chỉ dùng cho mobile */
.tab-ctrl-nav,
.project-prev,
.project-next {
	display: none;
}

@media only screen and (max-width: 1199px) {
	/* ---------- dùng chung ---------- */

	/* banner tiêu đề xanh (Đối tác / Tin tức / Tuyển dụng) */
	.title-banner {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 740 / 160;
		padding-bottom: 1.2%;
	}
	.title-banner::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: url('../images/m/headline-blue.png') center / 100% 100% no-repeat;
	}
	.title-banner img {
		display: none !important;
	}
	.title-banner .text {
		margin: 0;
		padding: 0;
		font-size: 1.6rem;
		line-height: 1;
	}

	/* nút mũi tên tròn dùng cho các slider mobile */
	.tab-ctrl-nav button,
	.project-prev,
	.project-next {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.3rem;
		height: 2.3rem;
		min-height: 0;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		border: 1px solid rgba(59, 216, 242, 0.7);
		background-color: rgba(0, 23, 81, 0.75);
		box-shadow: inset 0 0 0.6rem var(--blue);
		cursor: pointer;
		transition:
			background-color 0.3s ease,
			opacity 0.3s ease;
	}
	.tab-ctrl-nav button:active,
	.project-prev:active,
	.project-next:active {
		background-color: var(--blue);
	}
	.tab-ctrl-nav svg,
	.project-prev svg,
	.project-next svg {
		display: block;
		width: 70%;
		height: 70%;
		fill: none;
		stroke: #fff;
		stroke-width: 2.6;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.tab-ctrl-nav .swiper-button-disabled {
		opacity: 0.35;
		pointer-events: none;
	}

	/* ---------- slide 3: header — logo/icon không đè nội dung khi cuộn ---------- */
	.header-wrapper {
		transition: padding 0.3s ease;
	}
	/* nền đặt ở ::before (không đặt backdrop-filter lên .header vì sẽ làm
	   menu mobile position: fixed bên trong bị kẹt trong header) */
	.header::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			to bottom,
			rgba(0, 6, 33, 0.94),
			rgba(0, 16, 64, 0.88)
		);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 1px 0 rgba(59, 216, 242, 0.35);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	.header.is-scrolled::before {
		opacity: 1;
	}
	.header.is-scrolled .header-wrapper {
		padding: 0.625rem 0;
	}

	/* ---------- slide 3: popup tìm kiếm ---------- */
	.mfp-bg.mfp-ready {
		opacity: 0.92;
		background: #000a24;
	}
	.mfp-content #search-lightbox {
		transform: none;
	}
	#search-lightbox {
		position: relative;
		width: calc(100% - 1.25rem);
		max-width: 30rem;
		margin: 0 auto;
		padding: 2.2rem 1.25rem 1.6rem;
		border-radius: 1.2rem;
		border: 1px solid rgba(59, 216, 242, 0.55);
		background: linear-gradient(135deg, #001751 10%, #0c2f9a 70%, #1b58f4 130%);
		box-shadow:
			inset 0 0 1.5rem rgba(27, 88, 244, 0.9),
			0 0 2rem rgba(27, 88, 244, 0.35);
	}
	#search-lightbox .search-lightbox-title {
		margin-bottom: 1.25rem;
		font-size: 1.15rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #fff;
	}
	#search-lightbox .flex-row {
		border: 1px solid rgba(59, 216, 242, 0.7);
		background: rgba(0, 9, 60, 0.6);
		padding: 0.25rem;
	}
	#search-lightbox input {
		height: 2.6rem;
		padding-left: 1rem;
		font-size: 1rem;
		color: #fff;
		background: transparent;
	}
	#search-lightbox input::placeholder {
		color: rgba(255, 255, 255, 0.6);
	}
	#search-lightbox .button.icon {
		width: 2.6rem;
		height: 2.6rem;
		padding: 0;
		justify-content: center;
		border-radius: 50% !important;
		background-color: var(--blue);
	}
	#search-lightbox .button.icon i {
		color: #fff;
		font-size: 1rem;
	}
	#search-lightbox .search-keywords {
		margin-top: 1.25rem;
		gap: 0.5rem;
	}
	#search-lightbox .search-keywords > a {
		font-size: 0.85rem;
		padding: 0.4rem 0.9rem;
		color: #fff;
		border-color: rgba(59, 216, 242, 0.6);
		background: rgba(0, 9, 60, 0.4);
	}
	#search-lightbox .search-keywords > a:active,
	#search-lightbox .search-keywords > a:hover {
		background-color: var(--blue);
		color: #fff;
	}
	.mfp-content #search-lightbox + .mfp-close,
	#search-lightbox .mfp-close {
		top: 0.4rem;
		right: 0.4rem;
		width: 2.2rem;
		height: 2.2rem;
		line-height: 2.2rem;
		color: #fff;
		opacity: 1;
	}

	/* ---------- slide 2: hero — thanh điều khiển có phần uốn lượn ---------- */
	.hero .swiper-glb {
		padding-bottom: 0;
	}
	.hero .swiper-ctrl {
		height: auto;
		bottom: -1px;
	}
	.hero .swiper-ctrl-bg {
		height: auto;
		aspect-ratio: 740 / 84;
		background: url('../images/m/hero-bot.png') center bottom / 100% 100% no-repeat;
	}
	.hero .swiper-ctrl-bg img {
		display: none;
	}
	.hero .swiper-ctrl-inner {
		top: 58%;
		width: 44%;
		padding: 0;
	}
	.hero .swiper-glb .swiper-button-next,
	.hero .swiper-glb .swiper-button-prev {
		width: 1.5rem;
	}
	.hero .swiper-pagination-bullet {
		width: 0.5rem;
		height: 0.5rem;
	}
	.hero .swiper-pagination-bullet-active {
		width: 1rem;
	}

	/* ---------- slide 3: dịch vụ cốt lõi — bố cục vòng tròn như desktop ----------
	   folder đặt lên vòng đúng vị trí đo từ desktop (theo % ảnh vòng 737×493);
	   chữ của 2 folder phía sau (04, 01) nằm trên vòng, 2 folder phía trước (03, 02)
	   nằm dưới vòng → không đè lên nhau ở mọi độ rộng màn hình */
	.ring {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0.9rem;
		row-gap: 0.4rem;
		max-width: 34rem;
		margin: 0 auto;
		padding: 0.5rem 0 0;
	}
	.ring-list,
	.ring-item,
	.ring-item > div {
		display: contents;
	}
	.ring-bg {
		display: block;
		grid-column: 1 / -1;
		grid-row: 2;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin: 0;
		transform: none;
		z-index: 0;
	}
	.ring-bg > img {
		display: block;
		width: 100%;
	}
	.ring-item img.desktop_display {
		display: block !important;
		grid-column: 1 / -1;
		grid-row: 2;
		align-self: start;
		justify-self: start;
		position: relative;
		top: auto;
		left: auto;
		z-index: 2;
		transform: none;
		cursor: pointer;
		filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.45));
		transition:
			opacity 0.4s ease,
			filter 0.4s ease;
	}
	.ring-item img.mobile_display {
		display: none !important;
	}
	/* margin-top theo % chiều rộng: top(%) × 493 / 737 */
	.ring-item:nth-child(1) img.desktop_display {
		width: 18.6%;
		margin: 0 0 0 64.7%;
	}
	.ring-item:nth-child(2) img.desktop_display {
		width: 43%;
		margin: 30.1% 0 0 55.5%;
	}
	.ring-item:nth-child(3) img.desktop_display {
		width: 36%;
		margin: 32.4% 0 0 0.8%;
	}
	.ring-item:nth-child(4) img.desktop_display {
		width: 13.2%;
		margin: 11.1% 0 0 25.6%;
	}
	/* chưa chạm: tên giải pháp nhỏ theo độ xa của folder như PC (02 > 03 > 01 > 04),
	   chạm vào thì phóng về cỡ đầy đủ; dòng trên co về phía vòng (đáy), dòng dưới co lên */
	.ring-item .content {
		--k: 1;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		cursor: pointer;
		scale: var(--k);
		transform-origin: 0 0;
		transition:
			opacity 0.4s ease,
			scale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ring-item:nth-child(1) .content {
		--k: 0.62;
	}
	.ring-item:nth-child(3) .content {
		--k: 0.82;
	}
	.ring-item:nth-child(4) .content {
		--k: 0.55;
	}
	.ring-item:nth-child(1) .content,
	.ring-item:nth-child(4) .content {
		transform-origin: 0 100%;
	}
	.ring.has-tap .ring-item.is-tap .content {
		--k: 1;
	}
	.ring-item .num {
		font-size: 2.1rem;
	}
	.ring-item .name {
		font-size: 0.7rem;
		letter-spacing: 0.4px;
	}
	.ring-item .desc {
		font-size: 0.54rem;
	}
	.ring-item:nth-child(4) .content {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
	}
	.ring-item:nth-child(1) .content {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}
	.ring-item:nth-child(3) .content {
		grid-column: 1;
		grid-row: 3;
	}
	.ring-item:nth-child(2) .content {
		grid-column: 2;
		grid-row: 3;
	}
	.ring.has-tap .ring-item img.desktop_display,
	.ring.has-tap .ring-item .content {
		opacity: 0.4;
	}
	.ring.has-tap .ring-item.is-tap img.desktop_display,
	.ring.has-tap .ring-item.is-tap .content {
		opacity: 1;
	}
	.ring.has-tap .ring-item.is-tap img.desktop_display {
		filter: brightness(1.25) drop-shadow(0 0 1rem rgba(70, 160, 255, 0.85));
	}

	/* ---------- slide 4: chọn dịch vụ + khung nội dung ---------- */
	/* FB03 slide 1: bỏ thẻ trượt 01/04 — chọn dịch vụ bằng cách chạm vào vòng tròn */
	.tab-ctrl-list {
		display: none;
	}
	.tab-ctrl-list {
		overflow: hidden;
		padding-bottom: 0;
		margin-bottom: 1.25rem;
	}
	.tab-ctrl-list .swiper-container {
		overflow: visible;
	}
	.tab-ctrl-list .swiper-slide {
		width: 14rem;
	}
	.tab-ctrl-list .tab-ctrl-item {
		width: 100%;
		color: #fff;
		transform: scale(0.84);
		transform-origin: center bottom;
		opacity: 0.45;
		transition:
			transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.5s ease;
	}
	.tab-ctrl-list .swiper-slide-active .tab-ctrl-item {
		transform: none;
		opacity: 1;
	}
	.tab-ctrl-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.25rem;
		margin-top: 0.9rem;
	}
	.tab-ctrl-count {
		min-width: 4.5rem;
		text-align: center;
		font-size: 0.9rem;
		font-weight: 700;
		letter-spacing: 1px;
		color: rgba(255, 255, 255, 0.55);
	}
	.tab-ctrl-count .current {
		color: var(--lightblue);
	}

	/* khung nội dung: dùng ảnh khung desktop (ser-bg.png) co giãn — có góc khuyết
	   chứa nút cam, viền sáng như desktop */
	.tab-panel-item {
		background: none;
		box-shadow: none;
		border-radius: 0;
		padding: 1rem 1.25rem 3.6rem;
	}
	.tab-panel-bg {
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		box-sizing: border-box;
		border-style: solid;
		border-width: 0.8rem 10.6rem 2.36rem 0.8rem;
		border-image: url('../images/ser-bg.png') 20 270 60 20 fill / 0.8rem 10.6rem 2.36rem 0.8rem stretch;
	}
	.tab-panel-bg img {
		display: none;
	}
	.tab-panel-item::before,
	.tab-panel-item::after {
		display: block;
		width: 10.4rem;
		height: 2.3rem;
		right: 0.1rem;
		bottom: 0;
		border-radius: 0 0 0.45rem 0;
	}
	.tab-panel-btn {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.tab-panel-btn a {
		position: relative;
		width: 10.4rem;
		height: 2.3rem;
		margin: 0;
		padding: 0.15rem 0.6rem 0 2.1rem;
		justify-content: center;
		font-size: 0.95rem;
		color: #fff;
		background: none;
		border-radius: 0;
	}

	/* ---------- slide 5: giải pháp ngành ---------- */
	.solutions .title-wrapper > img {
		bottom: auto;
		top: 5.6rem;
	}
	.solutions .title-tag-wrapper {
		padding-top: 2.6rem;
	}
	.solutions .title-tags {
		display: grid;
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		align-items: center;
		row-gap: 0.9rem;
		column-gap: 0.6rem;
		position: static;
		width: 100%;
		padding: 0;
	}
	.solutions .title-tag {
		font-size: 0.62rem;
		line-height: 1.25;
	}
	.solutions .title-tags .btn {
		grid-column: 1 / -1;
		justify-self: center;
		margin-top: 0.6rem;
		font-size: 1rem;
	}
	.solutions .title-tags .btn img {
		width: 100%;
		max-width: none;
	}
	.solutions-list {
		margin-top: 1.6rem;
	}
	/* tông màu ảnh theo mã #3bd8f2, bỏ lớp phủ xanh đậm */
	.solutions-img::before {
		background: linear-gradient(to bottom, rgba(59, 216, 242, 0) 45%, rgba(59, 216, 242, 0.55) 75%, rgba(59, 216, 242, 0.9) 100%);
	}
	.solutions-img::after {
		display: none;
	}
	.solutions-item:hover .solutions-content {
		clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
	}
	.solutions .swiper-pagination-bullet,
	.fields .swiper-pagination-bullet,
	.news .swiper-pagination-bullet,
	.partners .swiper-pagination-bullet {
		background-color: var(--lightblue);
	}

	/* ---------- slide 6: đối tác — shape uốn lượn + mũi tên chuyển ---------- */
	.partners {
		padding: 4rem 0;
	}
	.partners-list {
		position: relative;
		margin-top: -1.3rem;
		padding: 2.6rem 0 0.15rem;
		background: none;
	}
	.partners-list::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		box-sizing: border-box;
		border-style: solid;
		border-width: 2.03rem 10.9rem 2.06rem 10.9rem;
		border-image: url('../images/m/headline-white.png') 56 300 57 300 fill / 2.03rem 10.9rem 2.06rem 10.9rem stretch;
	}
	.partners-slider .swiper-container {
		padding-bottom: 0;
	}
	.partners-slider .swiper-slide {
		width: calc(100% / 3);
		margin-bottom: 0;
		padding: 0.6rem 0.6rem 2.6rem;
	}
	.partners-slider .logo {
		max-height: 2.8rem;
	}
	.partners-slider {
		flex-direction: column;
	}
	.partners-slider .swiper-ctrl {
		position: relative;
		bottom: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 15rem;
		height: 1.9rem;
		margin: 0 auto;
	}
	.partners-slider .swiper-button-next,
	.partners-slider .swiper-button-prev {
		display: flex !important;
		position: static;
		width: 1.6rem;
		height: auto;
		margin: 0;
	}
	.partners-slider .swiper-button-next img,
	.partners-slider .swiper-button-prev img {
		width: 100%;
	}

	/* ---------- slide 7: dự án tiêu biểu ---------- */
	.project-wrapper {
		margin: 0;
		width: 100%;
	}
	.project-right {
		display: contents;
	}
	.project-ctrl {
		order: 1;
		margin-bottom: -1.25rem;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.project-ctrl::-webkit-scrollbar {
		display: none;
	}
	.project-imgs {
		order: 2;
		position: relative;
	}
	.project-left {
		order: 3;
		padding: 0.4rem 0 0;
	}
	.project-info {
		order: 4;
	}
	/* tab dự án: mọi tab cùng kích thước, đuôi vát giữ đúng tỉ lệ ảnh */
	.project-btn {
		flex: 0 0 auto;
		min-width: 0;
		width: 6.2rem;
		height: 2.1rem;
		padding-left: 0.9rem;
		padding-right: 0;
		margin-right: 2.85rem;
		font-size: 0.78rem;
	}
	.project-btn::before,
	.project-btn::after {
		width: 2.88rem;
		height: 2.1rem;
	}
	.project-btn:last-of-type {
		margin-right: 3rem;
	}
	.project-prev,
	.project-next {
		display: flex;
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY(-50%);
	}
	.project-prev {
		left: 1rem;
	}
	.project-next {
		right: 1rem;
	}
	.project-content .head {
		width: 100%;
	}

	/* ---------- slide 8: khách hàng ---------- */
	.fields-wrapper {
		padding-bottom: 0;
	}
	.fields-wrapper::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		box-sizing: border-box;
		border-style: solid;
		border-width: 5.8rem 10.85rem 1.63rem 10.85rem;
		border-image: url('../images/m/fields.png') 160 300 45 300 fill / 5.8rem 10.85rem 1.63rem 10.85rem stretch;
	}
	.fields-bg {
		display: none;
	}
	.fields-wrapper > .container {
		padding: 0;
	}
	.fields-heading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2.97rem;
		padding-top: 0.5rem;
		font-size: 1.6rem;
		line-height: 1;
	}
	/* tab cam nằm khít trên phần trắng nhô lên (mép trong 2 vai cong) */
	.fields .title,
	.fields-current {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: auto;
		height: 1.27rem;
		margin: 0 4.96rem;
		padding: 0 0.5rem;
		font-size: 0.72rem;
		border-radius: 0.6rem 0.6rem 0 0;
	}
	.fields .list {
		padding: 1rem 0.625rem 0.6rem;
		row-gap: 0.4rem;
	}
	.fields .logo {
		width: 33.33%;
	}
	.fields .logo img {
		max-width: 5.2rem;
	}
	.fields .swiper-ctrl {
		position: relative;
		bottom: auto;
		width: 15rem;
		height: 1.63rem;
		margin: 0.5rem auto 0;
	}
	.fields .swiper-glb .swiper-button-next,
	.fields .swiper-glb .swiper-button-prev {
		width: 1.6rem;
	}

	/* ---------- slide 9: giá trị cốt lõi — các bậc uốn lượn như desktop ---------- */
	.values-list {
		overflow: hidden;
	}
	.values-item {
		cursor: pointer;
	}
	.values-name {
		height: auto;
		aspect-ratio: 900 / 88;
		margin: 0;
		padding: 0.3rem 0 0;
		font-size: 1.45rem;
		font-weight: 300;
	}
	.values-name > img {
		display: none !important;
	}
	.values-name::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 900 / 132;
		z-index: -1;
		background: url('../images/m/value1.png') center / 100% 100% no-repeat;
		pointer-events: none;
	}
	.values-item:nth-child(2) .values-name::before {
		background-image: url('../images/m/value2.png');
	}
	.values-item:nth-child(3) .values-name::before {
		background-image: url('../images/m/value3.png');
	}
	.values-btn .values-name::before {
		background-image: url('../images/m/value4.png');
	}
	.values-texts {
		z-index: 1;
		height: 3.5rem;
		padding: 1.15rem 0 0;
		gap: 0.9rem;
		font-size: 0.74rem;
		color: transparent;
		white-space: nowrap;
	}
	.values-texts::after {
		top: 0;
		height: 100%;
		transform: none;
	}
	.values-item.is-open .values-name {
		font-weight: 700;
	}
	.values-item.is-open .values-texts {
		color: #fff;
	}
	.values-item.is-open .values-texts::after {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	.values-btn .values-name {
		padding-top: 0.6rem;
	}
	.values-btn .btn {
		font-size: 0.95rem;
		min-width: 8rem;
	}

	/* ---------- slide 10: câu chuyện thương hiệu — mảng xanh cạnh xéo + logo ---------- */
	.story {
		display: flex;
		flex-direction: column;
	}
	.story-content {
		order: 1;
		position: relative;
		padding: 3.5rem 0 7rem;
		opacity: 1;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9rem), 0 100%) !important;
		animation: none !important;
	}
	.story-content-inner {
		text-align: left;
	}
	.story-content .title {
		font-size: 1.8rem;
	}
	.story-content-inner .btn {
		margin: 0;
	}
	.story-bg {
		order: 2;
		position: relative;
		margin-top: -9rem;
	}
	.story-bg img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3.4;
		object-fit: cover;
		object-position: 62% 30%;
	}
	.story-logo {
		/* tâm logo nằm giữa cạnh xéo: ảnh cao 85vw, cạnh xéo cao 9rem */
		width: 26%;
		top: auto;
		bottom: calc(85vw - 4.5rem);
		left: 50%;
		transform: translate(-50%, 50%);
	}

	/* ---------- slide 11: tin tức ---------- */
	.news .title-banner {
		margin-bottom: 1.6rem;
	}
	.news-tab {
		font-size: 0.78rem;
		padding: 0.62rem 1.05rem 0.55rem;
	}

	/* ---------- slide 12: tuyển dụng ---------- */
	.job .title-banner {
		margin-bottom: 2.4rem;
	}
	.job-names {
		gap: 0.5rem;
	}
	.job-names .swiper-container {
		flex: 1 1 auto;
		min-width: 0;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 14%,
			#000 86%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 14%,
			#000 86%,
			transparent 100%
		);
	}
	.job-names .swiper-container::after {
		display: none;
	}
	.job-names-prev,
	.job-names-next {
		flex: 0 0 2rem;
		width: 2rem;
	}
	.job-names .btn {
		font-size: 0.72rem;
		min-width: 0;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* ---------- slide 13: footer — shape uốn lượn ---------- */
	.foot {
		padding: 4.4rem 0 4rem;
		background: none;
		overflow: visible;
	}
	.foot::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		box-sizing: border-box;
		border-style: solid;
		border-width: 2.9rem 15rem 2.5rem 9rem;
		border-image: url('../images/m/footer-bg.png') 116 600 100 360 fill / 2.9rem 15rem 2.5rem 9rem stretch;
	}
	.foot-bg,
	.foot-gradient {
		display: none;
	}
	.foot-wrapper {
		gap: 0;
	}
	.foot-left {
		position: relative;
		padding-bottom: 3.6rem;
	}
	/* đường kẻ uốn lượn đặc trưng ngăn logo với thông tin */
	.foot-left::after {
		content: '';
		position: absolute;
		left: -0.625rem;
		right: -0.625rem;
		bottom: 0.9rem;
		aspect-ratio: 1000 / 84;
		background: url('../images/m/line.png') center / 100% 100% no-repeat;
		pointer-events: none;
	}
	.foot-logo {
		width: 72%;
		margin: 0 auto 1.6rem;
	}
	.foot-iso {
		gap: 1.1rem;
	}
	.foot-iso img {
		width: 3.6rem;
	}
	.foot-right {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.85rem;
	}
	.foot-row {
		display: contents;
	}
	.foot-block {
		box-sizing: border-box;
		width: 100%;
		padding: 0 0.625rem;
		font-size: 0.9rem;
		line-height: 1.4;
	}
	.foot-block img {
		width: 0.95rem;
		margin-top: 0.15rem;
	}
	.foot-block ul li {
		margin-bottom: 0.35rem;
	}
	.foot-block ul li a,
	.foot-block ul li span {
		font-size: 0.9rem;
	}
	.foot-block ul li img {
		width: 0.85rem;
		margin-right: 0.55rem;
	}
	/* thông tin công ty: 1 cột */
	.foot-row:nth-child(1) > .foot-block:first-child {
		order: 1;
		font-weight: 700;
		font-size: 1rem;
	}
	.foot-row:nth-child(2) > .foot-block:first-child {
		order: 2;
	}
	.foot-row:nth-child(3) > .foot-block:first-child {
		order: 3;
	}
	.foot-row:nth-child(4) > .foot-block:first-child {
		order: 4;
	}
	/* liên kết: 3 cột trong khung viền */
	.foot-row:nth-child(-n + 3) > .foot-block:last-child {
		width: 33.33%;
		margin-top: 0.6rem;
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
		border-top: 1px solid rgba(59, 216, 242, 0.45);
		border-bottom: 1px solid rgba(59, 216, 242, 0.45);
		font-size: 0.85rem;
	}
	.foot-row:nth-child(-n + 3) > .foot-block:last-child a {
		font-size: 0.85rem;
	}
	.foot-row:nth-child(1) > .foot-block:last-child {
		order: 10;
	}
	.foot-row:nth-child(2) > .foot-block:last-child {
		order: 11;
	}
	.foot-row:nth-child(3) > .foot-block:last-child {
		order: 12;
	}
	/* mạng xã hội + bản quyền: giữa */
	.foot-row:nth-child(4) > .foot-block:last-child {
		order: 20;
		justify-content: center;
		padding-top: 0.4rem;
	}
	.foot-block .social a {
		width: 2.1rem;
	}
	.foot-row:nth-child(5) > .foot-block {
		order: 30;
		width: auto;
		padding: 0 0.15rem;
		font-size: 0.8rem;
		opacity: 0.8;
	}
}

/* ---------- mobile (≤767px) ---------- */
@media only screen and (max-width: 767px) {
	.title-banner .text {
		font-size: 1.45rem;
	}
	.foot-block {
		font-size: 0.88rem;
	}
}

/* ---------- mobile (≤767px) — chỉnh lại bố cục lần 2 ---------- */
@media only screen and (max-width: 767px) {
	/* dịch vụ: bớt khoảng trống sau hero */
	.services.section-gap {
		padding-top: 3.5rem;
	}

	/* khối "GLOBAL TECH / LOCAL SOUL": 200vw cũ để trống gần 1 màn hình */
	.mount {
		height: 118vw;
	}
	.mount-title {
		top: 2.5rem;
	}
	.mount-line {
		font-size: 2.6rem;
		line-height: 1.15;
	}
	.mount-img {
		top: 0;
		bottom: 0;
		transform: none;
	}
	.mount-img img {
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 75% 100%;
	}

	/* nhãn ngành: thẻ viền cam 1 dòng, xếp giữa (thay lưới 4 cột lệch) */
	.solutions .title-tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 0.4rem;
	}
	.solutions .title-tag {
		padding: 0.42rem 0.75rem 0.36rem;
		border: 1px solid var(--orange);
		border-radius: 99px;
		background-color: rgba(0, 9, 60, 0.45);
		font-size: 0.7rem;
		line-height: 1;
		white-space: nowrap;
		text-align: center;
	}
	.solutions .title-tag br {
		display: none;
	}
	/* nút "Xem thêm" luôn xuống dòng riêng, ở giữa */
	.solutions .title-tags::after {
		content: '';
		order: 1;
		flex-basis: 100%;
	}
	.solutions .title-tags .btn {
		order: 2;
		margin: 0.4rem auto 0;
	}

	/* đối tác: bỏ hiệu ứng vòng cung desktop (JS gán transform inline) → logo thẳng hàng */
	.partners-slider .swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 5.4rem;
		padding: 0 0.6rem;
	}
	.partners-slider .logo {
		width: 90%;
		max-height: 3rem;
		transform: none !important;
	}
	/* mũi tên + chấm nằm gọn trong phần lõm tối ở đáy khung trắng */
	.partners-slider .swiper-ctrl {
		gap: 0.5rem;
		width: 13.6rem;
	}
	.partners-slider .swiper-button-next img,
	.partners-slider .swiper-button-prev img {
		filter: brightness(0) invert(1);
	}
	.partners-slider .swiper-pagination {
		gap: 0.3rem;
	}
	.partners .partners-slider .swiper-pagination-bullet {
		width: 0.45rem;
		height: 0.45rem;
		background-color: #b9c8f5;
		opacity: 1;
	}
	.partners .partners-slider .swiper-pagination-bullet-active {
		width: 0.95rem;
		background-color: var(--blue);
	}

	/* dự án: 3 tab vừa khít bề ngang, đuôi vát giữ tỉ lệ ảnh (3.07 / 2.24) */
	.project-btn {
		width: calc((100% - 3 * 2.47rem) / 3);
		height: 1.8rem;
		padding-left: 0.5rem;
		margin-right: 2.47rem;
		font-size: 0.7rem;
		border-top-left-radius: 0.5rem;
	}
	.project-btn:last-of-type {
		margin-right: 2.47rem;
	}
	.project-btn::before,
	.project-btn::after {
		width: 2.47rem;
		height: 1.8rem;
	}

	/* liên hệ: bớt khoảng trống trên tiêu đề */
	.contact {
		padding: 3.5rem 0 4rem;
	}
}

/* ---------- mobile (≤767px) — góp ý ảnh chụp lần 3 ---------- */
@media only screen and (max-width: 767px) {
	/* khách hàng: tên ngành dài (Chính phủ & Doanh nghiệp nhà nước) giữ 1 dòng */
	.fields .title,
	.fields-current {
		font-size: 0.6rem;
		letter-spacing: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* giá trị cốt lõi: dải cam chạy xuống dưới vai của bậc kế tiếp (như desktop),
	   chữ nằm giữa phần cam lộ ra, không chạm bậc dưới */
	.values-texts {
		height: 3.3rem;
		padding: 1.55rem 0 0;
		font-size: 0.72rem;
	}
	.values-texts::after {
		height: calc(100% + 1.25rem);
	}
	/* chữ phải gọn trong phần nhô lên của shape (Accountability: 386/900 bề ngang) */
	.values-name {
		font-size: 1.15rem;
		letter-spacing: 0.5px;
	}

	/* footer: nền gradient mượt (bỏ ảnh border-image bị vệt cắt dọc),
	   mép trên/dưới uốn lượn đặc trưng bằng mask SVG */
	.foot {
		padding: 4.6rem 0 4.2rem;
	}
	.foot::before {
		border: 0;
		border-image: none;
		background:
			radial-gradient(120% 60% at 0% 0%, rgba(59, 216, 242, 0.18), transparent 60%),
			linear-gradient(165deg, #1b58f4 0%, #0f3bc4 38%, #06207e 72%, #020c45 100%);
		-webkit-mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V12Q0 0 12 0H168C190 0 196 48 226 48Z'/%3E%3C/svg%3E") 0 0 / 100% 3rem no-repeat,
			linear-gradient(#000, #000) 0 2.98rem / 100% calc(100% - 5.94rem) no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V36Q390 48 378 48H222C200 48 194 0 164 0Z'/%3E%3C/svg%3E") 0 100% / 100% 3rem no-repeat;
		mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V12Q0 0 12 0H168C190 0 196 48 226 48Z'/%3E%3C/svg%3E") 0 0 / 100% 3rem no-repeat,
			linear-gradient(#000, #000) 0 2.98rem / 100% calc(100% - 5.94rem) no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V36Q390 48 378 48H222C200 48 194 0 164 0Z'/%3E%3C/svg%3E") 0 100% / 100% 3rem no-repeat;
	}
	/* phần nền phía sau 2 chỗ lõm: viền sáng mảnh chạy theo đường cong */
	.foot::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 3rem;
		z-index: -1;
		pointer-events: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath d='M168 0.5C190 0.5 196 47.5 226 47.5H390' fill='none' stroke='%233bd8f2' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	}
	.foot-block {
		color: rgba(255, 255, 255, 0.92);
	}
	.foot-row:nth-child(5) > .foot-block {
		padding-bottom: 0.4rem;
	}
}

/* giải pháp ngành: line sát tiêu đề như các section khác (Dịch vụ, Vì sao chọn) */
@media only screen and (max-width: 767px) {
	.solutions .title-wrapper > img {
		top: 4.15rem;
	}
	.solutions .title-tag-wrapper {
		padding-top: 1.4rem;
	}
}

/* khách hàng: mũi tên + chấm nằm giữa phần lõm tối (lõm cao 34/45 phần đáy shape,
   bắt đầu thấp hơn mép trên thanh điều khiển) → không chạm phần trắng */
@media only screen and (max-width: 767px) {
	.fields .swiper-ctrl {
		width: 13.6rem;
		transform: translateY(0.22rem);
	}
	.fields .swiper-pagination {
		gap: 0.3rem;
	}
	.fields .swiper-pagination-bullet {
		width: 0.42rem;
		height: 0.42rem;
		background-color: #b9c8f5;
		opacity: 1;
	}
	.fields .swiper-pagination-bullet-active {
		width: 0.95rem;
		background-color: var(--lightblue);
	}
	.fields .swiper-glb .swiper-button-next,
	.fields .swiper-glb .swiper-button-prev {
		width: 1.3rem;
	}
	.fields .swiper-button-next img,
	.fields .swiper-button-prev img {
		filter: brightness(0) invert(1);
	}
}

/* đối tác: dùng chung 1 shape liền khối với "Khách hàng" (tiêu đề xanh nối thẳng
   vào khung trắng, đáy có phần lõm chứa điều khiển) thay cho 2 mảnh rời */
@media only screen and (max-width: 767px) {
	.partners {
		padding: 3rem 0;
	}
	.partners-inner,
	.partners > .title-banner,
	.partners > .partners-list {
		position: relative;
	}
	.partners::before {
		content: '';
		position: absolute;
		top: 3rem;
		bottom: 3rem;
		left: 0;
		right: 0;
		z-index: 0;
		box-sizing: border-box;
		border-style: solid;
		border-width: 5.8rem 10.85rem 1.63rem 10.85rem;
		border-image: url('../images/m/fields.png') 160 300 45 300 fill / 5.8rem 10.85rem 1.63rem 10.85rem stretch;
		pointer-events: none;
	}
	.partners .title-banner {
		z-index: 1;
		aspect-ratio: auto;
		height: 2.97rem;
		padding: 0.5rem 0 0;
	}
	.partners .title-banner::before {
		display: none;
	}
	.partners .title-banner .text {
		font-size: 1.6rem;
	}
	.partners-list {
		z-index: 1;
		margin-top: 0;
		padding: 2.6rem 0 0;
	}
	.partners-list::before {
		display: none;
	}
	.partners-slider .swiper-slide {
		height: 4.6rem;
	}
	.partners-slider .swiper-ctrl {
		height: 1.63rem;
		margin-top: 0.4rem;
		transform: translateY(0.22rem);
	}
}

/* đối tác: tiêu đề nhỏ lại, tâm chữ nằm giữa dải xanh chạy ngang
   (vùng xanh quanh chữ: đỉnh phần nhô 0 → mép phần trắng 117 / 160px = 4.24rem, tâm 2.12rem) */
@media only screen and (max-width: 767px) {
	.partners .title-banner {
		display: block;
		height: 2.97rem;
		padding: 0;
	}
	.partners .title-banner .text {
		margin: 0;
		padding-top: calc(2.12rem - 0.6rem);
		font-size: 1.2rem;
		line-height: 1;
		text-align: center;
	}
}

/* tin tức + tuyển dụng: tiêu đề nhỏ lại (bằng Đối tác), tâm chữ giữa vùng xanh
   quanh chữ — phần xanh giữa shape 0 → 115 / 160px; banner rộng 100vw = 25.64rem
   → cao 5.54rem, tâm 1.99rem */
@media only screen and (max-width: 767px) {
	.news .title-banner,
	.job .title-banner {
		align-items: flex-start;
		padding: 0;
	}
	.news .title-banner .text,
	.job .title-banner .text {
		padding-top: calc(1.99rem - 0.6rem);
		font-size: 1.2rem;
		line-height: 1;
	}
}

/* ---------- FB03 slide 8–9: khung trắng Đối tác / Khách hàng trên mobile ----------
   border-image 9 mảnh để lộ đường kẻ ở chỗ nối (máy khách thấy vệt dọc/ngang cắt qua logo).
   Ghép lại bằng 6 mảnh ảnh (giữ nguyên góc bo) đè lên nhau 1px + nền trắng liền ở giữa → không còn khe. */
@media only screen and (max-width: 1199px) {
	.partners-list::before,
	.partners::before,
	.fields-wrapper::before {
		border: 0 !important;
		border-image: none !important;
		background-repeat: no-repeat;
	}
	/* dải trắng (Đối tác, tablet): mép trên 2.03rem, mép dưới 2.06rem, góc 10.9rem */
	.partners-list::before {
		background-image: url('../images/fx/band-white-tl.png'), url('../images/fx/band-white-tr.png'), url('../images/fx/band-white-tm.png?v=2'),
			url('../images/fx/band-white-bl.png'), url('../images/fx/band-white-br.png'), url('../images/fx/band-white-bm.png?v=2'), linear-gradient(#fff, #fff);
		background-position: left top, right top, center top, left bottom, right bottom, center bottom, left 0 top calc(2.03rem - 1px);
		background-size: 10.9rem 2.03rem, 10.9rem 2.03rem, calc(100% - 21.8rem + 2px) 2.03rem, 10.9rem 2.06rem, 10.9rem 2.06rem, calc(100% - 21.8rem + 2px) 2.06rem,
			100% calc(100% - 4.09rem + 2px);
	}
	/* khung có tiêu đề xanh (Khách hàng, Đối tác điện thoại): mép trên 5.8rem, mép dưới 1.63rem, góc 10.85rem */
	.partners::before,
	.fields-wrapper::before {
		background-image: url('../images/fx/band-fields-tl.png'), url('../images/fx/band-fields-tr.png'), url('../images/fx/band-fields-tm.png?v=2'),
			url('../images/fx/band-fields-bl.png'), url('../images/fx/band-fields-br.png'), url('../images/fx/band-fields-bm.png?v=2'), linear-gradient(#fff, #fff);
		background-position: left top, right top, center top, left bottom, right bottom, center bottom, left 0 top calc(5.8rem - 1px);
		background-size: 10.85rem 5.8rem, 10.85rem 5.8rem, calc(100% - 21.7rem + 2px) 5.8rem, 10.85rem 1.63rem, 10.85rem 1.63rem, calc(100% - 21.7rem + 2px) 1.63rem,
			100% calc(100% - 7.43rem + 2px);
	}
	/* mảnh giữa chỉ rộng 8px: ảnh rộng bị thu nhỏ ~10 lần theo ngang thì Chrome (mipmap) làm nhoè luôn
	   theo dọc → vệt mờ ở mép trên/dưới dải trắng (khách báo 29/10) */

	/* tab cam giống PC: nằm khít mép trên phần trắng (hàng 117→148 của mảnh góc 160px = 4.24rem → 5.37rem),
	   2 đầu loe theo vai cong — mặt nạ cắt từ chính 2 mảnh góc */
	.fields .title,
	.fields-current {
		width: 100%;
		height: 1.124rem;
		margin: 1.272rem 0 0;
		padding: 0.05rem 0 0;
		border-radius: 0;
		background-color: var(--orange);
		-webkit-mask:
			url('../images/fx/fields-tab-m-tl.png') left top / 10.85rem 100% no-repeat,
			url('../images/fx/fields-tab-m-tr.png') right top / 10.85rem 100% no-repeat,
			linear-gradient(#000, #000) center top / calc(100% - 21.7rem + 2px) 100% no-repeat;
		mask:
			url('../images/fx/fields-tab-m-tl.png') left top / 10.85rem 100% no-repeat,
			url('../images/fx/fields-tab-m-tr.png') right top / 10.85rem 100% no-repeat,
			linear-gradient(#000, #000) center top / calc(100% - 21.7rem + 2px) 100% no-repeat;
	}
	/* logo cách tab cam và mép dưới phần trắng bằng nhau (~0.75rem) */
	.fields .swiper-slide .list {
		margin-top: -0.25rem;
		padding-bottom: 0.25rem;
	}

	/* khung chi tiết dịch vụ: bỏ min-height 26.5rem của desktop → thu gọn mục không còn khoảng trống */
	.tab-panel-item {
		min-height: 0;
	}

	/* FB03 slide 9: logo khách hàng 1 hàng */
	.fields .list {
		flex-wrap: nowrap;
		row-gap: 0;
	}
	.fields .logo {
		/* FB04: ô logo rộng theo --w (logo chữ dài được ô rộng hơn) */
		flex: var(--w, 7.5) 1 0;
		min-width: 0;
		width: auto;
		padding: 0 0.35rem;
	}
	.fields .logo img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 1199px) {
	/* FB03 slide 12: chữ trong dải cam xếp 3 hàng, canh giữa */
	.values-texts {
		flex-direction: column;
		gap: 0.3rem;
		height: auto;
		padding: 1.2rem 0 0.9rem;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
	.values-texts::after {
		top: 0;
		height: 100%;
		transform: none;
	}
	/* bậc đang đóng chỉ chừa đúng phần đáy của shape (132 − 88 = 44/900 bề ngang)
	   → bậc dưới nối liền bậc trên như PC, không hở khoảng tối */
	.values-item .values-texts {
		max-height: 0;
		padding: 0 0 4.89%;
		overflow: hidden;
		transition:
			max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			color 0.3s linear;
	}
	.values-item.is-open .values-texts {
		max-height: 10rem;
		padding: 1.2rem 0 0.9rem;
	}
	/* giống PC: bậc đang mở có đường viền sáng chạy dọc mép trên dải cam (value-lineN của PC,
	   cắt cùng chỗ với ảnh nền m/valueN: bỏ 400px hai mép + 210px đoạn thẳng giữa), mở từ giữa ra */
	.values-item .values-name::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1;
		width: 100%;
		aspect-ratio: 900 / 48;
		background: url('../images/m/value-line1.png') center top / 100% 100% no-repeat;
		clip-path: inset(0 50%);
		transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		pointer-events: none;
	}
	.values-item:nth-child(2) .values-name::after {
		background-image: url('../images/m/value-line2.png');
	}
	.values-item:nth-child(3) .values-name::after {
		background-image: url('../images/m/value-line3.png');
	}
	.values-btn .values-name::after {
		content: none;
	}
	.values-item.is-open .values-name::after {
		clip-path: inset(0 0);
	}
	/* FB03 slide 16: đường ranh mảng xanh / ảnh núi cắt ngang (PC vẫn cắt xéo) */
	.story-content {
		clip-path: none !important;
		padding-bottom: 4.5rem;
	}
	.story-bg {
		margin-top: 0;
	}
	.story-logo {
		bottom: 85vw;
	}
}

/* 30/10: logo Khách hàng nằm giữa phần trắng (giữa tab cam và phần lõm điều khiển), chừa lề 2 bên;
   logo Đối tác nâng lên giữa dải trắng */
@media only screen and (max-width: 767px) {
	.fields .swiper-slide {
		display: flex;
		align-items: center;
	}
	.fields .swiper-slide .list {
		width: 100%;
		padding-left: 0.8rem;
		padding-right: 0.8rem;
		transform: translateY(0.45rem);
	}
	.partners-slider .swiper-container {
		margin-top: -0.6rem;
		margin-bottom: 0.6rem;
	}
}