/* Sora (mapped to local Be Vietnam Pro for 100% Vietnamese support) */
/* 400 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-400-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 500 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-500-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 600 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-600-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 700 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-700-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 800 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-800-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../../font/bevietnampro/be-vietnam-pro-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/baloo2/v23/wXK0E3kTposypRydzVT08TS3JnAmtdgozapv.ttf') format('truetype');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/baloo2/v23/wXK0E3kTposypRydzVT08TS3JnAmtdj9yqpv.ttf') format('truetype');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/baloo2/v23/wXK0E3kTposypRydzVT08TS3JnAmtdiayqpv.ttf') format('truetype');
}

html, body {
	overflow-x: hidden !important;
}

:root {
	--tuyendung-zoom: 1;
	--tuyendung-client-width: 1440px;
}

.tuyendung-page-wrapper {
	position: relative;
	width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	letter-spacing: 0px;
	text-align: center;
	overflow: visible;
}

.tuyendung-page-wrapper * {
	--interpolate: calc(var(--max-font-size) * 1px);
}

.tuyendung-full-width {
	width: calc(100vw / var(--tuyendung-zoom)) !important;
	position: relative;
	left: 50% !important;
	right: 50% !important;
	margin-left: calc(-50vw / var(--tuyendung-zoom)) !important;
	margin-right: calc(-50vw / var(--tuyendung-zoom)) !important;
	max-width: none !important;
}

.col4.tuyendung-full-width {
	padding-left: 0 !important;
	align-self: center !important;
	align-items: center !important;
}

.group7 .col8 {
	position: relative !important;
	width: 100% !important;
	max-width: 1440px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}



/* header */

.tuyendung-page-wrapper .header {
	container: header / inline-size;
	position: relative;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
	margin-right: -1px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-family: 'Noto Sans JP';
	background-color: #fff;
	padding-bottom: 8px;
	overflow: hidden;
}

.header-group1 {
	position: absolute; z-index: 2; top: 0; left: 0; 
	width: 256px;
	padding: 11px 50px 12px 50px;
}

.header-graphic1 {
	position: absolute; top: -16px; left: -8px; right: -24px; 
	height: 134px;
	max-width: none;
}

.header-img1 {
	position: relative; z-index: 1;
	width: 137px;
}

.header-row-top {
	container: header-row-top / inline-size;
	margin-left: auto;
	width: 90%;
	max-width: 1243px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	background-color: #0f4d98;
	padding: 11px 50px;
}

.header-row-left {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.header-social-icons1 {
	position: relative;
	width: 24px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.header-bg {
	position: absolute; top: 0; left: 0; 
	width: 24px; height: 24px;
}

.header-img2 {
	position: absolute; top: 4px; left: 4px; 
	width: 15px;
}

.header-circle-white {
	position: relative;
	width: 24px; height: 24px;
	flex-shrink: 0;
}

.header-tik-tok {
	position: absolute; top: 3px; left: 50%; 
	translate: -50% 0;
	width: 18px;
	aspect-ratio: 1 / 1;
}

.header-circle-white-right {
	position: relative;
	width: 24px; height: 24px;
	flex-shrink: 0;
}

.header-img3 {
	position: absolute; top: 2px; left: 50%; 
	translate: -50% 0;
	width: 20px;
}

.header-line {
	margin-left: 1px;
	width: 0; height: 26px;
	flex-shrink: 0;
	border-left: 1px solid #fff;
}

.header-row1 {
	display: flex;
	align-items: center;
	gap: 16px;
}



/* row-a */

.row-a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.row-text1 {
	text-align: left;
}
/* end row-a*/


.header-frame-right {
	margin-left: 1px;
	width: 38px;
	flex-shrink: 0;
	background-color: #fff;
	padding: 5px 8px;
	border-radius: 4px;
}

.header-group2 {
	position: relative;
	height: 16px;
	background-color: #d60a2e;
}

.header-graphic2 {
	position: absolute; top: 3px; left: 50%; 
	translate: -50% 0;
	width: 9px; height: 9px;
}

.header-row-bottom {
	container: header-row-bottom / inline-size;
	margin-left: auto; margin-right: 42px;
	width: 90%;
	max-width: 1129px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.header-btn-left {
	display: flex;
	color: var(--_1);
	text-align: left;
	padding: 7px 15px;
	border: 1px solid #0f4d98;
	border-radius: 4px;
}

.header-menu-list {
	margin-left: 27px; margin-top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-grow: 1;
	color: #333;
	font-size: 14.5px;
	font-weight: 400;
}

.header-icon {
	width: 24px;
	flex-shrink: 0;
}

.header-text {
	text-align: left;
}

.header-row2 {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.header-text-tuyen-dung {
	color: #0f4d98;
	font-weight: 500;
	text-align: left;
}

.header-btn-hot {
	margin-top: 5px;
	width: 32px;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 9.79px;
	font-family: 'Sora';
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0px;
	text-align: center;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat, linear-gradient(#fff, #fff) top left / auto auto no-repeat;
	padding: 3px 3px 1px 3px;
	border-radius: 8px;
}

.header-btn-right {
	display: flex;
	color: #fff;
	text-align: left;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat;
	padding: 8px 16px;
	border-radius: 50px;
}
/* end header*/


.social-icons {
	width: 24px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.text-a {
	color: #333 !important;
	font-family: 'Sora', sans-serif !important;
	font-size: 15.5px !important;
	font-weight: 400 !important;
	line-height: 25px !important;
	text-align: justify !important;
}



/* column */

.column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 19px;
	font-weight: 400;
}

.column-col {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.column-title {
	color: #0f4d98;
	--min-font-size: 33; --max-font-size: 60; font-size: var(--interpolate);
	font-family: 'Baloo 2', sans-serif !important;
	line-height: 1.4;
}

.column-text {
	color: #333;
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-family: 'Noto Sans JP';
	line-height: 1.6;
}

.column-svg {
	position: relative;
	width: 24px; height: 24px;
	flex-shrink: 0;
}

.column-clip-path {
	position: absolute; top: 0; left: 0; right: 0; 
	width: 100%;
}
/* end column*/




/* row-b */

.row-b {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	font-weight: 600;
}

.row-text2 {
	flex-grow: 1;
	color: #333;
	font-size: 20px;
	text-align: left;
}

.row-btn-hot {
	width: 72px;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-style: normal;
	letter-spacing: 0px;
	text-align: center;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat, linear-gradient(#fff, #fff) top left / auto auto no-repeat;
	padding: 4px 8px 2px 8px;
	border-radius: 50px;
}
/* end row-b*/




/* row-c */

.row-c {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.row-text-muc-luong {
	width: 77%;
	flex-grow: 1;
	color: #787878;
	text-align: left;
}
/* end row-c*/


.text-b {
	width: 123%;
	flex-grow: 1;
	color: #f00;
	font-size: 20px;
	font-weight: 600;
	text-align: right;
}



/* row-d */

.row-d {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.row-text-so-luong-tuyen {
	flex-grow: 1;
	color: #787878;
	text-align: left;
}

.row-text4 {
	color: #333;
	text-align: right;
}
/* end row-d*/




/* row-e */

.row-e {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.row-text5 {
	width: 100%;
	flex-grow: 1;
	color: #787878;
	text-align: left;
}

.row-text6 {
	width: 100%;
	flex-grow: 1;
	color: #333;
	text-align: right;
}
/* end row-e*/


.text-c {
	flex-grow: 1;
	font-weight: 400;
	text-align: left;
}

.input-nhap {
	color: #333333;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.36px;
	text-align: left;
	padding: 11px 15px;
	border: 1px solid var(--esuhai-grey-2);
	border-radius: 8px !important;
}

.input-nhap::placeholder {
	color: var(--esuhai-grey-1);
	opacity: 1;
}



/* row-i */

.row-i {
	display: flex;
	align-items: center;
	gap: 16px;
}

.row-text9 {
	text-align: left;
}
/* end row-i*/


.background {
	width: 4px; height: 6px;
	flex-shrink: 0;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat, linear-gradient(#333, #333) top left / auto auto no-repeat;
}

.graphic1 {
	position: absolute; 
	z-index: 999; 
	top: 50%; 
	right: -90px; 
	translate: 0 -50%;
	rotate: -90deg;
	transform-origin: 50% 50%;
	width: 321px; height: 139px;
	pointer-events: none;
}

.gemini-generated1 {
	position: absolute;
	z-index: 0;
	bottom: -380px;
	left: -580px;
	width: 1500px !important;
	height: auto !important;
	max-width: none !important;
	pointer-events: none;
}

/* Điều chỉnh vị trí theo từng loại độ phân giải màn hình */
/* Màn hình 2K trở lên (2560px) */
@media screen and (min-width: 1921px) {
	.gemini-generated1 {
		width: 1800px !important;
		left: -750px !important;
		bottom: -450px !important;
	}
}

/* Màn hình Full HD (1600px - 1920px) */
@media screen and (min-width: 1600px) and (max-width: 1920px) {
	.gemini-generated1 {
		width: 1500px !important;
		left: -580px !important;
		bottom: -380px !important;
	}
}

/* Màn hình Laptop trung bình (1367px - 1599px) */
@media screen and (min-width: 1367px) and (max-width: 1599px) {
	.gemini-generated1 {
		width: 1200px !important;
		left: -500px !important;
		bottom: -330px !important;
	}
}

/* Màn hình Laptop nhỏ / HD (1366px trở xuống) */
@media screen and (max-width: 1366px) {
	.gemini-generated1 {
		width: 1000px !important;
		left: -420px !important;
		bottom: -300px !important;
	}
}

.header1 .row-left .row-carbon-phone {
	width: 20px; height: 20px;
	aspect-ratio: unset;
}

.header1 .row1 .row-carbon-phone {
	width: 20px; height: 20px;
	aspect-ratio: unset;
}

.header1 .header-ion-home {
	aspect-ratio: 1 / 1;
}

.header1 .header-icon1 {
	height: 24px;
}

.img1 {
	margin-right: -1px;
	max-width: none;
	flex-shrink: 0;
	height: auto;
	max-height: 580px;
	width: 100%;
}

.col1 {
	margin-left: 1px; margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 43px;
	font-family: 'Sora';
}

.bien-giac-mo {
	margin-left: 1px;
	align-self: center;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Baloo 2', sans-serif !important;
	font-size: 60px !important;
	font-weight: 800 !important;
	line-height: 84px !important;
	letter-spacing: 0px !important;
	text-align: center !important;
}

.group1 {
	position: relative;
	min-height: 496px;
	flex-shrink: 0;
	line-height: 1.6;
	text-align: justify;
}



/* group */

.group {
	position: absolute; top: 46px; 
	pointer-events: none;
}

.group-graphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: fill !important;
}
/* end group*/




/* card */

.card {
	position: absolute;
	background-color: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: flex;
	flex-direction: column;
	z-index: 10 !important;
	filter: drop-shadow(0px 9.36px 12.49px rgba(0, 0, 0, 0.16)) !important;
	border:none !important;
	transition: transform 0.3s ease, filter 0.3s ease, z-index 0.3s ease !important;
	cursor: pointer;
}

.card:hover {
	transform: scale(1.08) !important;
	filter: drop-shadow(0px 16px 28px rgba(0, 0, 0, 0.25)) !important;
	z-index: 15 !important;
}

.card-bg {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	object-fit: fill;
	clip-path: inset(2px) !important;
	border: none;
}

.card1 .card-bg {
	left: -9.5px;
	top: -12.2px;
	width: 476px;
	height: 191.5px;
}

.card2 .card-bg {
	left: -10px;
	top: -12.5px;
	width: 475px;
	height: 191px;
}

.card3 .card-bg {
	left: -10px;
	top: -7px;
	width: 475px;
	height: 190px;
}

.card4 .card-bg {
	left: -9.5px;
	top: -11.7px;
	width: 475px;
	height: 188.5px;
}

.card-subtitle {
	font-family: 'Sora', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 29px !important;
}
/* Card Subtitles Base Styling (Gradient Blue to Green) */
.card-subtitle,
.card-subtitle2 {
	font-size: 18px !important;
	font-family: 'Sora', sans-serif !important;
	font-weight: 700 !important;
	line-height: 29px !important;
	background: linear-gradient(to bottom, #0F4D98 0%, #199F5A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Card Subtitles Highlighted Text (Gradient Yellow to Pink, 24px) */
.card-subtitle .sub-text,
.card-subtitle .sub-text2,
.card-subtitle2 .sub-text,
.card-subtitle2 .sub-text2 {
	font-size: 24px !important;
	font-family: 'Sora', sans-serif !important;
	font-weight: 700 !important;
	line-height: 29px !important;
	background: linear-gradient(90deg, #F2B500 0%, #D50578 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.group2 {
	left: calc((1440px - 100vw / var(--tuyendung-zoom)) / 2) !important;
	width: calc((100vw / var(--tuyendung-zoom) - 1440px) / 2 + 585px) !important;
	max-width: none !important;
	height: 343px;
}

.group2 .group-graphic {
	height: 343px;
}

.group3 {
	right: calc((1440px - 100vw / var(--tuyendung-zoom)) / 2) !important;
	width: calc((100vw / var(--tuyendung-zoom) - 1440px) / 2 + 608px) !important;
	max-width: none !important;
	height: 355px;
}

.group3 .group-graphic {
	height: 355px;
	max-width: none;
}

.group4 {
	position: absolute;
	top: 0px;
	left: 360px;
	width: 720px;
	height: 496px;
	pointer-events: none;
}

.gemini-generated2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 720px !important;
	height: 427px !important;
	object-fit: cover !important;
}

.graphic2 {
	position: absolute;
	top: 298px !important;
	left: 194px !important;
	width: 343px !important;
	height: 198px !important;
	max-width: none !important;
}

.card-subtitle2 {
	font-family: 'Sora', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 29px !important;
}

.card1 {
	top: 266px;
	left: 85px;
	width: 457px;
	height: 167px;
	padding: 27px 58px 26px 58px !important;
	transform-origin: 50% 50%;
}

.card2 {
	top: 266px;
	right: 66px;
	width: 455px;
	height: 166px;
	padding: 27px 57px 28px 58px !important;
	gap: 6px;
}

.card3 {
	top: 69px;
	right: 25px;
	width: 455px;
	height: 176px;
	padding: 29px 57px 21px 57px !important;
	gap: 2px;
}

.card4 {
	top: 78px;
	left: 37px;
	width: 456px;
	height: 165px;
	padding: 26px 58px 25px 58px !important;
	gap: 6px;
}



.col2 {
	container: col2 / inline-size;
	margin-top: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	color: #fff;
	font-family: 'Sora', sans-serif !important;
	font-weight: 400;
	background: linear-gradient(180deg, rgba(15, 77, 152, 1) 0%, rgba(28, 123, 75, 1) 100%) top left / auto auto no-repeat;
	padding: 55px 24px 195px 24px;
	position: relative;
	z-index: 6;
	overflow: visible;
}

.col-top1 {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 850px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 19px;
}

.col3 {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.text-tro-thanh {
	margin: 0 7px;
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	line-height: 1.6;
	font-family: 'Sora', sans-serif !important;
}

.text2 {
	font-family: 'Sora', sans-serif !important;
}

.svg {
	position: relative;
	width: 24px; height: 24px;
	flex-shrink: 0;
}

.svg-clip-path {
	position: absolute; top: 0; left: 0; right: 0; 
	width: 100%;
}

.row-bottom {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: flex-start;
	gap: 34px;
}



/* frame-a */

.frame-a {
	position: relative;
	width: 328px; height: 204px;
	flex-shrink: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 4px solid #fff;
	border-radius: 11.74px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.frame-a:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.frame-rect {
	position: absolute; top: 87px; left: 153px; 
	width: 21px; height: 22px;
	background-color: #fff;
}

.frame-img1 {
	position: absolute; top: 75px; left: 127px; 
	width: 67px;
	transition: transform 0.3s ease;
}

.frame-a:hover .frame-img1 {
	transform: scale(1.12);
}
/* end frame-a*/


.frame1 {
	background-image: url(../assets/frame/frame1.png);
}

.frame2 {
	background-image: url(../assets/frame/frame2.png);
}

.frame3 {
	background-image: url(../assets/frame/frame3.png);
}

.gemini-generated3 {
	position: relative; z-index: 4;
	margin-top: -35px;
	flex-shrink: 0;
}

.col4 {
	position: relative;
	margin: 104px auto 0 auto;
	width: 90%;
	max-width: 982px;
	display: flex;
	flex-direction: column;
}

.graphic3 {
	position: absolute; 
	top: 55%; 
	right: -40px;
	transform: translateY(-50%);
	height: 100%;
	max-height: 650px;
	width: auto;
	z-index: 0;
	pointer-events: none;
}

.col5 {
	position: relative; z-index: 1;
	margin-top: -4px;
	display: flex;
	flex-direction: column;
	gap: 47px;
	width: 100%;
	max-width: 982px;
}

.col-top2 {
	margin-left: 127px; margin-right: 127px;
}

.col6 {
	container: col6 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 32px;
	font-size: 16px;
	font-family: 'Sora';
}

.row-top {
	display: flex;
	align-items: stretch;
	gap: 32px;
	justify-content: center;
}



/* frame-b */

.frame-b {
	container: frame-b / inline-size;
	width: 100%;
	min-height: 376px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
	background-color: #fff;
	padding: 22px;
	border: 2px solid #dedede;
	border-radius: 16px;
}

.frame-col1 {
	container: frame-col1 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 400;
	line-height: 1.6;
}

.frame-row-bottom1 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
	margin-top: auto;
}

.frame-frame-left1 {
	min-height: 46px;
	flex-grow: 1;
	text-align: left;
}

.frame-xem-chi-tiet1 {
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) top left / auto auto no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.frame-btn-ung-tuyen-ngay1 {
	min-height: 46px;
	justify-content: center;
	flex-grow: 1;
	text-align: center;
	background-image: linear-gradient(90deg, #f2b500 0%, #d50578 100%), linear-gradient(#0f4d98, #0f4d98);
}
/* end frame-b*/




/* frame-c */

.frame-c {
	container: frame-c / inline-size;
	box-shadow: 0px 8px 16px 0px rgba(51, 135, 96, 0.25);
	width: 100%;
	min-height: 376px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
	color: #fff;
	background: linear-gradient(180deg, rgba(15, 77, 152, 0.9) 3%, rgba(28, 123, 75, 0.9) 100%) top left / auto auto no-repeat;
	padding: 22px;
	border: 2px solid #dedede;
	border-radius: 16px;
}

.frame-col2 {
	container: frame-col1 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 1.6;
}



/* row-f */

.row-f {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.row-text7 {
	width: 100%;
	flex-grow: 1;
	font-weight: 600;
	text-align: right;
}
/* end row-f*/


.frame-row1 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.frame-text-muc-luong {
	width: 78%;
	flex-grow: 1;
	font-weight: 400;
	text-align: left;
}

.frame-row2 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.frame-text3 {
	font-weight: 600;
	text-align: right;
}

.frame-row-bottom2 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.frame-frame-left2 {
	min-height: 46px;
	flex-grow: 1;
	text-align: left;
}

.frame-xem-chi-tiet2 {
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) top left / auto auto no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.frame-btn-ung-tuyen-ngay2 {
	min-height: 46px;
	justify-content: center;
	flex-grow: 1;
	text-align: center;
	background-image: linear-gradient(90deg, #f2b500 0%, #d50578 100%), linear-gradient(#0f4d98, #0f4d98);
}
/* end frame-c*/


.frame4 .row5 .row-text5 {
	width: 70%;
}

.frame4 .row5 .row-text6 {
	width: 130%;
}

.frame5 .row8 .row-text2 {
	color: unset;
}

.frame5 .row8 .row-btn-hot {
	color: unset;
}

.frame5 .frame-text1 {
	width: 122%;
	color: #fff600;
}

.frame5 .row9 .row-text-phuc-loi {
	width: 71%;
}

.frame5 .row9 .row-text7 {
	width: 129%;
}

.frame5 .row10 .row-text-phuc-loi {
	width: 100%;
}

.frame5 .row11 .row-text-phuc-loi {
	width: 100%;
}

.row23 {
	display: flex;
	align-items: stretch;
	gap: 32px;
	padding-right: 2px;
	justify-content: center;
}



/* frame-d */

.frame-d {
	container: frame-d / inline-size;
	width: 100%;
	min-height: 344px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	flex-grow: 1;
	background-color: #fff;
	padding: 0 22px;
	border: 2px solid #dedede;
	border-radius: 16px;
}

.frame-col3 {
	container: frame-col1 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 400;
	line-height: 1.6;
}

.frame-row-bottom3 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
}

.frame-frame-left3 {
	min-height: 46px;
	flex-grow: 1;
	text-align: left;
}

.frame-xem-chi-tiet3 {
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) top left / auto auto no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.frame-btn-ung-tuyen-ngay3 {
	min-height: 46px;
	justify-content: center;
	flex-grow: 1;
	text-align: center;
	background-image: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%), linear-gradient(#0f4d98, #0f4d98);
}
/* end frame-d*/




/* frame-e */

.frame-e {
	container: frame-e / inline-size;
	width: 100%;
	min-height: 344px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	flex-grow: 1;
	text-align: left;
	background-color: #fff;
	padding: 0 22px;
	border: 2px solid #dedede;
	border-radius: 16px;
}

.frame-col4 {
	container: frame-col1 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 400;
	line-height: 1.6;
}

.frame-text-top {
	color: #333;
	font-size: 20px;
	font-weight: 600;
}

.frame-row-bottom4 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
}

.frame-frame-left4 {
	min-height: 46px;
	flex-grow: 1;
	text-align: left;
}

.frame-xem-chi-tiet4 {
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) top left / auto auto no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.frame-btn-ung-tuyen-ngay4 {
	min-height: 46px;
	justify-content: center;
	flex-grow: 1;
	text-align: center;
	background-image: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%), linear-gradient(#0f4d98, #0f4d98);
}
/* end frame-e*/


.frame6 .row15 .row-text5 {
	width: 70%;
}

.frame6 .row15 .row-text6 {
	width: 130%;
}

.frame7 .row20 .row-text5 {
	width: 70%;
}

.frame7 .row20 .row-text6 {
	width: 130%;
}

.btn-bottom {
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	display: flex;
	align-self: center;
	color: #fff;
	text-align: left;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) top left / auto auto no-repeat, linear-gradient(#0f4d98, #0f4d98) top left / auto auto no-repeat;
	padding: 11px 33px 11px 32px;
	border-radius: 16px;
}

.group5 {
	position: relative;
	margin: 12px -458px 0 -362px;
	height: 707px;
	flex-shrink: 0;
}

.rect {
	position: absolute; top: 472px; left: 256px; 
	rotate: -5deg;
	transform-origin: 50% 50%;
	width: calc(100% - 256px); height: 158px;
	max-width: 1651px;
	background: linear-gradient(180deg, #0f4d98 100%, #199f5a 208%) top left / auto auto no-repeat, linear-gradient(#0f4d98, #0f4d98) top left / auto auto no-repeat;
}

.group6 {
	position: absolute; top: 0; left: 0; 
	width: calc(100% - 0px); height: 668px;
	max-width: 2260px;
}



/* row-g */

.row-g {
	position: absolute;
	rotate: -5deg;
	transform-origin: 50% 50%;
	height: 219px;
	display: flex;
	align-items: flex-start;
	gap: 31px;
}

.row-img1 {
	position: absolute; top: 0; left: 0; 
	width: 425px;
}

.row-img2 {
	position: absolute; top: 0; left: 456px; 
	width: 425px;
}

.row-img3 {
	position: absolute; top: 0; left: 912px; 
	width: 425px;
}

.row-img4 {
	position: absolute; top: 0; left: 1368px; 
	width: 425px;
}
/* end row-g*/


.row24 {
	top: 85px; left: 218px; 
	width: calc(100% - 218px);
	max-width: 1793px;
}

.row25 {
	top: 349px; left: 5px; 
	width: calc(100% - 5px);
	max-width: 2249px;
}

.col7 {
	container: col7 / inline-size;
	margin: 60px auto 0 auto;
	width: 90%;
	max-width: 1037px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: center;
}

.col-top3 {
	margin-left: 155px; margin-right: 155px;
}

.row26 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-family: 'Sora', sans-serif;
	line-height: 1.4;
	max-width: 1037px;
	margin: 0 auto;
}

.frame8 {
	position: relative;
	width: 564px;
	height: 373px;
	flex-shrink: 0;
	color: #fff;
	text-align: left;
	background: url(../assets/frame.png) center / cover no-repeat;
	border-radius: 8px;
	overflow: hidden;
}

.card5 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 183px;
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 54%, rgba(255, 255, 255, 0) 100%) !important;
	padding: 59px 24px 11px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-end;
	align-items: flex-start;
}

.card-btn-tin-nong {
	box-shadow: 0px 3.34px 3.34px 0px rgba(0, 0, 0, 0.25);
	display: flex;
	justify-content: center;
	align-self: start;
	font-size: 10px;
	text-align: center;
	background-color: #ff0000 !important;
	padding: 3px 7px 3px 6px;
	border-radius: 3px;
	color: #ffffff !important;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 500;
	border: none !important;
	outline: none !important;
}

.card-text3 {
	text-shadow: 0px 3.34px 3.34px rgba(0, 0, 0, 0.25);
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	font-family: 'Baloo 2', sans-serif;
	margin: 0;
}

.col-right {
	width: 457px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
}

/* frame-f */

.frame-f {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 457px;
	height: 114px;
	flex-shrink: 0;
}

.frame-img2 {
	width: 159px;
	height: 114px;
	object-fit: cover;
	flex-shrink: 0;
	border-radius: 8px;
}

.frame-col5 {
	width: 282px;
	height: 114px;
	padding: 4px 0 22px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex-shrink: 0;
	text-align: left;
}

.frame-text4 {
	color: #333333;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frame-text5 {
	color: #989898;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}
/* end frame-f*/


.group7 {
	position: relative;
	margin-right: -3px; margin-top: 140px;
	min-height: 836px;
	flex-shrink: 0;
	background: url('../assets/graphic4.svg?ver=2') no-repeat center / 100% 100% !important;
}

.col8 {
	position: relative; 
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding: 161px 289px 66px 289px;
}

.img2 {
	position: absolute; z-index: 1; bottom: 0px; left: 50%; 
	translate: -50% 0;
	margin-left: -221px;
	width: calc(100% - 32px);
	max-width: 359px;
}

.col-top4 {
	position: relative; z-index: 3;
	width: 100%;
	max-width: 862px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: center;
	font-family: 'Sora';
}

.subtitle-cam-on-da-quan {
	color: var(--_1);
	--min-font-size: 23; --max-font-size: 40; font-size: var(--interpolate);
	font-weight: 600;
	line-height: 1.4;
}

.text-vui-long-nhap {
	color: #fff;
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-weight: 400;
	line-height: 1.6;
}

.col-bottom {
	position: relative; z-index: 2;
	margin-left: 419px;
	width: 100%;
	max-width: 395px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	align-self: start;
	letter-spacing: 0.36px;
}

.col9 {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	font-family: 'Sora';
}



/* input-group */

.tuyendung-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

.tuyendung-input-label {
	color: #ffffff !important;
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0px !important; /* Xóa margin-bottom mặc định của thẻ p do Bootstrap */
}
/* end input-group*/


.tuyendung-input-group-bottom {
	display: flex;
	flex-direction: column;
	gap: 6px;
	letter-spacing: 0px;
	text-align: left;
}

.input-group-bottom-text {
	color: #ffffff !important;
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-weight: 600;
	line-height: 1.6;
}

.btn-ung-tuyen-ngay {
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) !important;
	width: 203px;
	height: 57px;
	border-radius: 50px;
	border: none !important;
	outline: none !important;
	cursor: pointer;
}

.graphic5 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	transform-origin: center center;
	right: -148px;
	width: 537px;
	height: 240px;
	z-index: 0;
	pointer-events: none;
}

.tuyendung-page-wrapper .footer {
	container: footer / inline-size;
	margin-top: 94px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	font-family: 'Noto Sans JP';
}

.footer-row {
	display: flex;
	align-items: flex-start;
	gap: 33px;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	background-color: #fff;
	padding-left: 46px;
	padding-right: 33px;
	border-radius: 16px;
}

.footer-col-left {
	margin-top: 28px;
	width: 405px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	font-size: 18px;
	text-align: left;
}

.footer-graphic {
	margin-left: -4px; margin-top: -4px;
	width: 205px; height: 117px;
	flex-shrink: 0;
	align-self: start;
}

.footer-text {
	color: #0f4d98;
	font-family: var(--font-family-font-1);
	font-weight: 600;
	letter-spacing: 2px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	color: var(--_8);
	letter-spacing: 0px;
}



/* row-h */

.row-h {
	display: flex;
	gap: 8px;
}

.row-mdi-location {
	flex-shrink: 0;
}

.row-text8 {
	flex-grow: 1;
	text-align: left;
}
/* end row-h*/


.row27 {
	align-items: flex-start;
	align-self: stretch;
}

.row27 .row-mdi-location {
	width: 32px; height: 32px;
}

.row28 {
	align-items: flex-start;
	align-self: stretch;
}

.row28 .row-mdi-location {
	width: 32px; height: 32px;
}

.row29 {
	width: 100%;
	max-width: 363px;
	align-items: center;
}

.row29 .row-mdi-location {
	width: 24px; height: 24px;
}

.row30 {
	width: 100%;
	max-width: 363px;
	align-items: center;
	color: var(--_14);
}

.row30 .row-mdi-location {
	width: 24px; height: 24px;
}

.card-list {
	margin-left: 29px;
	width: 246px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex-shrink: 0;
	text-align: left;
	background-color: #eefff4;
	padding: 106px 24px 123px 24px;
}

.card-list-subtitle {
	align-self: stretch;
	color: #199f5a;
}

.row34 {
	width: 72px;
	justify-content: space-between;
	gap: unset;
}

.row35 {
	width: 72px;
	justify-content: space-between;
	gap: unset;
}

.card-right {
	width: 329px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	text-align: left;
	background-color: #eef6ff;
	padding: 106px 28px 61px 35px;
}

.card-right-col-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.card-right-subtitle {
	align-self: stretch;
	color: #0f4d98;
}

.row38 {
	width: 153px;
	justify-content: space-between;
	gap: unset;
}

.card-right-row {
	margin-right: -40px;
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.card-right-text {
	flex-grow: 1;
	text-align: left;
}

.row40 {
	width: 152px;
	justify-content: space-between;
	gap: unset;
}

.card-right-col-bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-right-img1 {
	flex-shrink: 0;
}

.card-right-row-bottom {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding-right: 12px;
}

.card-right-social-icons {
	flex-grow: 1;
	aspect-ratio: 1 / 1;
}

.card-right-social-icons1 {
	position: relative;
	flex-grow: 1;
	aspect-ratio: 1 / 1;
}

.card-right-bg2 {
	position: absolute; top: 0; left: 0; 
	width: 35px; height: 35px;
}

.card-right-img2 {
	position: absolute; top: 6px; left: 6px; 
	width: 22px;
}

.card-right-circle-white {
	position: relative;
	width: 35px; height: 35px;
	flex-shrink: 0;
}

.card-right-tik-tok {
	position: absolute; top: 4px; left: 50%; 
	translate: -50% 0;
	width: 26px;
	aspect-ratio: 1 / 1;
}

.card-right-circle-white-right {
	position: relative;
	width: 35px; height: 35px;
	flex-shrink: 0;
}

.card-right-img3 {
	position: absolute; top: 3px; left: 50%; 
	translate: -50% 0;
	width: 28px;
}

.footer-copyright {
	align-self: stretch;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 2px;
	background-color: #0f4d98;
	padding: 10px 24px 14px 24px;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	.header-row-top {
		padding-inline: var(--margin-md);
	}
	.header-menu-list {
		margin-inline: 0;
	}
	.gemini-generated1 {
		margin-inline: 0;
		width: 1000px !important;
		left: -420px !important;
		bottom: -300px !important;
	}
	.card1 {
		padding-inline: var(--margin-sm);
	}
	.col2 {
		padding-inline: var(--margin-sm);
	}
	.text-tro-thanh {
		margin-inline: 0;
	}
	.col4 {
		padding-inline: 0;
		margin-inline: 0;
	}
	.graphic3 {
		margin-inline: 0;
	}
	.col-top2 {
		margin-inline: 0;
	}
	.frame-b {
		padding-inline: var(--margin-sm);
	}
	.frame-c {
		padding-inline: var(--margin-sm);
	}
	.frame-d {
		padding-inline: var(--margin-sm);
	}
	.frame-e {
		padding-inline: var(--margin-sm);
	}
	.group5 {
		margin-inline: 0;
	}
	.col-top3 {
		margin-inline: 0;
	}
	.card5 {
		padding-inline: var(--margin-sm);
	}
	.card-text3 {
		margin-inline: 0;
	}
	.group7 {
		min-height: auto !important;
		height: auto !important;
		padding: 60px 0 80px 0 !important;
		background: linear-gradient(180deg, #0F4D98 0%, #199F5A 100%) !important;
		overflow: hidden;
	}
	.group7 .col8 {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		padding: 0 var(--margin-md) !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px !important;
	}
	.group7 .graphic4 {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 100vw !important;
		height: 100% !important;
		object-fit: cover !important;
		z-index: -1 !important;
		pointer-events: none !important;
	}
	.group7 .graphic5 {
		display: none !important;
	}
	.group7 .img2 {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		translate: none !important;
		margin: 0 auto !important;
		width: 80% !important;
		max-width: 280px !important;
		order: 1 !important;
	}
	.group7 .col-top4 {
		order: 0 !important;
		text-align: center;
	}
	.group7 .col-bottom {
		margin: 0 auto !important;
		width: 100% !important;
		max-width: 450px !important;
		order: 2 !important;
	}
	.footer-row {
		padding-inline: var(--margin-sm);
	}
	.card-right {
		padding-inline: var(--margin-sm);
	}
	.footer-copyright {
		padding-inline: var(--margin-sm);
	}
}

@media screen and (max-width: 576px) {
	.header-row-top {
		padding-inline: var(--margin-sm);
	}
	.col8 {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@container header (width < 684px) {
	.header-row-top {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header1 > * {
		margin-left: 0; margin-right: 0;
	}
	.header-row-top > * {
		margin-left: unset !important; margin-top: unset !important;
		text-align: center;
	}
}

@container header-row-top (width < 325px) {
	.header-row1 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header-row1 > * {
		text-align: center;
	}
}

@container header (width < 1170px) {
	.header-row-bottom {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header-row-bottom > * {
		margin-left: unset !important; margin-top: unset !important;
		text-align: center;
	}
	.header-row-bottom > .header-menu-list {
		width: 100%;
	}
}

@container header-row-bottom (width < 790px) {
	.header-menu-list {
		margin-left: 0;
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header-menu-list > * {
		text-align: center;
	}
}

@container frame-col1 (width < 380px) {
	.row-b {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.row-b > * {
		text-align: center;
	}
	.row-b > .row-text2 {
		width: 100%;
	}
}

@container frame-col1 (width < 380px) {
	.row-c {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.row-c > * {
		text-align: center;
	}
	.row-c > .row-text-muc-luong {
		width: 100%;
	}
	.row-c > .row-text3 {
		width: 100%;
	}
}

@container frame-col1 (width < 380px) {
	.row-e {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.row-e > * {
		text-align: center;
	}
	.row-e > .row-text5 {
		width: 100%;
	}
	.row-e > .row-text6 {
		width: 100%;
	}
}

@container col2 (width < 1052px) {
	.row-bottom {
		flex-direction: column;
		align-items: center;
		gap: 26px;
	}
	.row-bottom > .frame1 {
		width: 100%;
		max-width: 328px;
	}
	.row-bottom > .frame2 {
		width: 100%;
		max-width: 328px;
	}
	.row-bottom > .frame3 {
		width: 100%;
		max-width: 328px;
	}
}

@container col6 (width < 981px) {
	.row-top {
		flex-direction: column;
		align-items: center;
		gap: 50px;
	}
	.row-top > * {
		text-align: center;
	}
	.row-top > .frame4 {
		width: 100%;
	}
	.row-top > .frame5 {
		width: 100%;
	}
}

@container frame-b (width < 421px) {
	.frame-row-bottom1 {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.frame-row-bottom1 > * {
		text-align: center;
	}
	.frame-row-bottom1 > .frame-frame-left1 {
		width: 100%;
	}
	.frame-row-bottom1 > .frame-btn-ung-tuyen-ngay1 {
		width: 100%;
	}
}

@container frame-col1 (width < 427px) {
	.row-f {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.row-f > * {
		text-align: center;
	}
	.row-f > .row-text-phuc-loi {
		width: 100%;
	}
	.row-f > .row-text7 {
		width: 100%;
	}
}

@container frame-col1 (width < 427px) {
	.frame-row1 {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.frame-row1 > * {
		text-align: center;
	}
	.frame-row1 > .frame-text-muc-luong {
		width: 100%;
	}
	.frame-row1 > .frame-text1 {
		width: 100%;
	}
}

@container frame-c (width < 423px) {
	.frame-row-bottom2 {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.frame-row-bottom2 > * {
		text-align: center;
	}
	.frame-row-bottom2 > .frame-frame-left2 {
		width: 100%;
	}
	.frame-row-bottom2 > .frame-btn-ung-tuyen-ngay2 {
		width: 100%;
	}
}

@container col6 (width < 981px) {
	.row23 {
		flex-direction: column;
		align-items: center;
		gap: 44px;
	}
	.row23 > * {
		text-align: center;
	}
	.row23 > .frame6 {
		width: 100%;
	}
	.row23 > .frame7 {
		width: 100%;
	}
}

@container frame-d (width < 421px) {
	.frame-row-bottom3 {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.frame-row-bottom3 > * {
		text-align: center;
	}
	.frame-row-bottom3 > .frame-frame-left3 {
		width: 100%;
	}
	.frame-row-bottom3 > .frame-btn-ung-tuyen-ngay3 {
		width: 100%;
	}
}

@container frame-e (width < 421px) {
	.frame-row-bottom4 {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.frame-row-bottom4 > * {
		text-align: center;
	}
	.frame-row-bottom4 > .frame-frame-left4 {
		width: 100%;
	}
	.frame-row-bottom4 > .frame-btn-ung-tuyen-ngay4 {
		width: 100%;
	}
}

@container col7 (width < 1035px) {
	.row26 {
		flex-direction: column;
		align-items: center;
		gap: 50px;
	}
	.col7 > * {
		margin-left: 0; margin-right: 0;
	}
	.row26 > * {
		margin-top: unset !important;
		text-align: center;
	}
	.row26 > .frame8 {
		width: 100%;
	}
	.row26 > .col-right {
		width: 100%;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}
	.frame-f {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important; /* Stack vertically! */
		align-items: stretch !important;
		gap: 12px !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		padding: 0 0 16px 0 !important;
		border-bottom: 1px solid #eeeeee !important; /* Separation line */
	}
	.frame-f:last-child {
		border-bottom: none !important;
	}
	.frame-img2 {
		width: 100% !important; /* Full width image */
		height: auto !important;
		aspect-ratio: 16 / 9 !important; /* 16:9 ratio */
		object-fit: cover !important;
		border-radius: 8px !important;
		flex-shrink: 0 !important;
	}
	.frame-col5 {
		width: 100% !important;
		height: auto !important;
		padding: 4px 8px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 6px !important;
		box-sizing: border-box !important;
	}
	.frame-text4 {
		font-size: 15px !important;
		line-height: 1.4 !important;
		font-weight: 700 !important;
		margin: 0 !important;
		color: #222222 !important;
		white-space: normal !important; /* Force word wrapping */
		word-break: break-word !important; /* Force word wrapping */
		overflow: visible !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
	}
	.frame-text5 {
		font-size: 13px !important;
		color: #8c8c8c !important;
		margin: 0 !important;
	}
}

@container col-right (width < 456px) {
	.frame-f {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		height: auto !important;
	}
	.frame-f > * {
		margin-top: unset !important;
		text-align: center;
	}
	.frame-f > .frame-col5 {
		width: 100%;
		height: auto !important;
		padding: 0 !important;
	}
}

@container footer (width < 1153px) {
	.footer-row {
		flex-direction: column;
		align-items: center;
		gap: 100px;
		padding: 24px 12px;
	}
	.footer-row > * {
		margin-left: unset !important; margin-top: unset !important;
		text-align: center;
	}
	.footer-row .footer-graphic {
		align-self: center;
	}
	.footer-row > .footer-col-left {
		width: 100%;
		max-width: 405px;
	}
	.footer-row .card-list-subtitle {
		align-self: center;
	}
	.footer-row > .card-list {
		align-items: center;
	}
	.footer-row > .card-right {
		width: 100%;
		max-width: 329px;
	}
}




/* Recruitment styling overrides for visual fidelity & card alignment */
.row-text-muc-luong, .row-text-so-luong-tuyen, .row-text5, .text-c, .frame-text-muc-luong {
	width: auto !important;
	flex-shrink: 0 !important;
	text-align: left !important;
	color: #787878 !important;
}
.text-b, .row-text4, .row-text6, .row-text7, .frame-text1, .frame-text3 {
	width: auto !important;
	flex-grow: 1 !important;
	text-align: right !important;
}

/* Default white state for all recruitment cards */
.frame-b {
	position: relative !important;
	background: transparent !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04) !important;
	color: #333333 !important;
	padding: 24px !important;
	transition: all 0.3s ease;
	z-index: 1 !important;
}

/* Card gradient border and background using single pseudo-element */
.frame-b::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	border-radius: 16px !important;
	border: 1.5px solid transparent !important;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0F4D98 0%, #199F5A 100%) border-box !important;
	z-index: -1 !important;
	pointer-events: none !important;
	transition: all 0.3s ease;
}

/* Ensure default text colors inside all cards */
.frame-b .row-text2 {
	color: #333333 !important;
	font-size: 24px !important;
	font-family: 'Baloo 2', sans-serif !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
.frame-b .row-text-muc-luong, .frame-b .row-text-so-luong-tuyen, .frame-b .row-text5, .frame-b .text-c {
	color: #787878 !important;
}
.frame-b .row-text4, .frame-b .row-text6, .frame-b .row-text7 {
	color: #333333 !important;
}
.frame-b .text-b {
	color: #0F4D98 !important; /* Default JPC Blue salary text */
	font-weight: 700 !important;
}

/* Fix HOT and Xem them button border bugs */
.row-btn-hot, .btn-bottom {
	border: none !important;
	outline: none !important;
}
.row-btn-hot {
	box-shadow: none !important;
}

/* Default state for buttons inside all cards */
.frame-frame-left1.card-white, .frame-btn-ung-tuyen-ngay1 {
	min-height: 46px !important;
	height: 46px !important;
	border-radius: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	font-family: 'Sora', sans-serif !important;
	text-align: center !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Default Xem chi tiet buttons - styled as a clean text link with JPC gradient border */
.frame-frame-left1.card-white {
	position: relative !important;
	background: transparent !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	border: none !important;
	z-index: 1 !important;
}

/* Xem chi tiet gradient border and background */
.frame-frame-left1.card-white::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	border-radius: 16px !important;
	border: 1.5px solid transparent !important;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0F4D98 0%, #199F5A 100%) border-box !important;
	z-index: -1 !important;
	pointer-events: none !important;
	transition: all 0.3s ease;
}

.frame-xem-chi-tiet1 {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	transition: all 0.3s ease;
}

/* Default Ung tuyen ngay buttons - JPC blue-green gradient background with white text */
.frame-btn-ung-tuyen-ngay1 {
	background: linear-gradient(90deg, #0F4D98 0%, #199F5A 100%) !important;
	color: #ffffff !important;
	box-shadow: 0px 4px 10px rgba(15, 77, 152, 0.15) !important;
}

/* ==================================================== */
/* Hovered state for all recruitment cards */
.frame-b:hover {
	box-shadow: 0px 12px 24px rgba(28, 123, 75, 0.2) !important;
	transform: translateY(-4px);
}

/* Change pseudo-element background on hover */
.frame-b:hover::before {
	border-color: transparent !important;
	background: linear-gradient(180deg, rgba(15, 77, 152, 0.95) 0%, rgba(28, 123, 75, 0.95) 100%) border-box !important;
}

/* Hovered text colors for title, labels, and values */
.frame-b:hover .row-text2 {
	color: #ffffff !important;
}
.frame-b:hover .row-text-muc-luong, .frame-b:hover .row-text-so-luong-tuyen, .frame-b:hover .row-text5, .frame-b:hover .text-c {
	color: #ffffff !important;
}
.frame-b:hover .row-text4, .frame-b:hover .row-text6, .frame-b:hover .row-text7 {
	color: #ffffff !important;
}
.frame-b:hover .text-b {
	color: #fff600 !important; /* Yellow salary when hovered */
}

/* Hovered state for buttons inside all cards */
.frame-b:hover .frame-frame-left1.card-white {
	/* Background is already transparent */
}

.frame-b:hover .frame-frame-left1.card-white::before {
	background: #ffffff !important; /* Turn button background to solid white on card hover */
	border-color: transparent !important;
}

.frame-b:hover .frame-xem-chi-tiet1 {
	background: none !important;
	-webkit-background-clip: initial !important;
	background: linear-gradient(180deg, #0f4d98 0%, #199f5a 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.frame-b:hover .frame-btn-ung-tuyen-ngay1 {
	background: linear-gradient(90deg, #f2b500 0%, #d50578 100%) !important;
	color: #ffffff !important;
	box-shadow: 0px 6px 15px rgba(213, 5, 120, 0.4) !important;
	filter: brightness(1.05);
}

/* Speed and spacing overrides for recruitment marquee gallery */
.learningenvironment_home .learningenvironment_img {
	--marquee-duration: 35s !important;
	overflow: hidden !important;
	padding-bottom: 100px !important;
}

/* ==================================================== */
/* Mobile Responsive Styling (under 768px) */
@media only screen and (max-width: 767px) {
	.tuyendung-page-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.tuyendung-full-width {
		width: 100vw !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		left: 50% !important;
		right: 50% !important;
	}

	/* Title "Biến ước mơ thành hiện thực" */
	.bien-giac-mo {
		font-size: 28px !important;
		line-height: 38px !important;
		margin-bottom: 20px !important;
		margin-top: 20px !important;
	}

	/* Main section 1 containing 4 cards */
	.col1 {
		margin-top: 10px !important;
		gap: 15px !important;
	}

	.group1 {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		min-height: auto !important;
		height: auto !important;
		padding: 0 !important;
	}

	/* Hide desktop background SVGs & form illustration on mobile */
	.group2, .group3, .graphic1, .graphic3, .gemini-generated1, .graphic5, .img2 {
		display: none !important;
	}

	/* Show building image responsive at the top of cards */
	.tuyendung-page-wrapper .group4 {
		position: relative !important;
		display: block !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		margin: 10px 0 20px 0 !important;
		pointer-events: none !important;
	}

	.tuyendung-page-wrapper .gemini-generated2 {
		position: relative !important;
		width: 100% !important;
		max-width: 320px !important;
		height: auto !important;
		object-fit: contain !important;
		display: block !important;
		margin: 0 auto !important;
	}

	.tuyendung-page-wrapper .graphic2 {
		display: none !important;
	}

	/* Card style override for mobile */
	.tuyendung-page-wrapper .card {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		height: auto !important;
		padding: 20px !important;
		margin: 0 !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
		border: 1px solid #eef2f5 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		box-sizing: border-box !important;
		transform: none !important;
	}

	.tuyendung-page-wrapper .card:hover {
		transform: none !important;
	}

	/* Unique color border accent for the cards on mobile */
	.tuyendung-page-wrapper .card1 {
		border-top: 5px solid #199F5A !important;
	}
	.tuyendung-page-wrapper .card2 {
		border-top: 5px solid #D50578 !important;
	}
	.tuyendung-page-wrapper .card3 {
		border-top: 5px solid #F2B500 !important;
	}
	.tuyendung-page-wrapper .card4 {
		border-top: 5px solid #0F4D98 !important;
	}

	/* Title override for 4 cards to match borders */
	.tuyendung-page-wrapper .card1 h2, .tuyendung-page-wrapper .card1 h2 * {
		color: #199F5A !important;
		background: none !important;
		-webkit-text-fill-color: #199F5A !important;
	}
	.tuyendung-page-wrapper .card2 h2, .tuyendung-page-wrapper .card2 h2 * {
		color: #D50578 !important;
		background: none !important;
		-webkit-text-fill-color: #D50578 !important;
	}
	.tuyendung-page-wrapper .card3 h2, .tuyendung-page-wrapper .card3 h2 * {
		color: #D99B00 !important;
		background: none !important;
		-webkit-text-fill-color: #D99B00 !important;
	}
	.tuyendung-page-wrapper .card4 h2, .tuyendung-page-wrapper .card4 h2 * {
		color: #0F4D98 !important;
		background: none !important;
		-webkit-text-fill-color: #0F4D98 !important;
	}

	/* Hide slanted background images inside cards */
	.tuyendung-page-wrapper .card-bg {
		display: none !important;
	}

	/* Card subtitles */
	.card-subtitle, .card-subtitle2 {
		font-size: 18px !important;
		line-height: 26px !important;
		margin-bottom: 8px !important;
	}

	/* Description text in cards */
	.tuyendung-page-wrapper .text-a {
		font-size: 14.5px !important;
		line-height: 22px !important;
		margin: 0 !important;
		text-align: justify !important;
	}

	/* Videos Section (.col2) */
	.col2 {
		margin-top: 40px !important;
		padding: 40px 15px 40px 15px !important;
		gap: 30px !important;
	}

	/* Text "Trở thành sinh viên JPC..." */
	.text-tro-thanh {
		font-size: 14px !important;
		line-height: 22px !important;
		margin: 0 !important;
	}

	.row-bottom {
		width: 100% !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 20px !important;
	}

	/* Responsive video frames */
	.frame-a {
		width: 100% !important;
		max-width: 340px !important;
		height: auto !important;
		aspect-ratio: 16 / 10 !important;
		flex-shrink: 0 !important;
	}

	.frame-rect {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 21px !important;
		height: 22px !important;
	}

	.frame-img1 {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 50px !important;
	}

	.frame-a:hover .frame-img1 {
		transform: translate(-50%, -50%) scale(1.12) !important;
	}

	/* Section 3: full width gemini-generated3 image */
	.gemini-generated3 {
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		margin: 20px 0 !important;
		transform: none !important;
	}

	/* Section 4: jobs and list */
	.col4 {
		margin-top: 40px !important;
		width: 100% !important;
	}

	.col5 {
		gap: 30px !important;
	}

	.col-top2 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.col-top2 .head-content {
		margin-bottom: 20px !important;
	}

	/* Jobs items column list wrapper */
	.col6 {
		gap: 20px !important;
	}

	.row-top {
		flex-direction: column !important;
		align-items: center !important;
		gap: 20px !important;
		width: 100% !important;
	}

	/* Job card (.frame-b) Mobile layout: Clean 2-column Grid dashboard */
	.tuyendung-page-wrapper .frame-b {
		width: 100% !important;
		max-width: 450px !important;
		min-height: auto !important;
		padding: 20px !important;
		background: #ffffff !important;
		border: 1px solid #eef2f5 !important;
		border-radius: 16px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		text-align: left !important;
	}

	.tuyendung-page-wrapper .frame-col1 {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 14px 12px !important;
		width: 100% !important;
	}

	/* Job title row spans full width */
	.tuyendung-page-wrapper .row-b {
		grid-column: 1 / span 2 !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-bottom: 1px solid #f0f0f0 !important;
		padding-bottom: 10px !important;
		margin-bottom: 4px !important;
		width: 100% !important;
	}

	/* Each info item is a vertical column inside its grid cell */
	.tuyendung-page-wrapper .row-c,
	.tuyendung-page-wrapper .row-d,
	.tuyendung-page-wrapper .row-e,
	.tuyendung-page-wrapper .row-i {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 4px !important;
		width: 100% !important;
		text-align: left !important;
	}

	/* Quyền lợi row spans full width */
	.tuyendung-page-wrapper .row-e.row5 {
		grid-column: 1 / span 2 !important;
	}

	.tuyendung-page-wrapper .row-text2 {
		font-size: 16.5px !important;
		line-height: 22px !important;
		font-weight: 700 !important;
		color: #0f4d98 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	.tuyendung-page-wrapper .row-btn-hot {
		margin: 0 !important;
		padding: 4px 8px !important;
		font-size: 11px !important;
	}

	/* Labels */
	.tuyendung-page-wrapper .row-text-muc-luong,
	.tuyendung-page-wrapper .row-text-so-luong-tuyen,
	.tuyendung-page-wrapper .row-text5 {
		font-size: 10.5px !important;
		color: #888888 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		margin: 0 !important;
		font-weight: 600 !important;
		text-align: left !important;
	}

	/* Values */
	.tuyendung-page-wrapper .text-b,
	.tuyendung-page-wrapper .row-text4,
	.tuyendung-page-wrapper .row-text6,
	.tuyendung-page-wrapper .row-text7,
	.tuyendung-page-wrapper .text-c {
		font-size: 13.5px !important;
		color: #333333 !important;
		font-weight: 500 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	/* Specific values styling */
	.tuyendung-page-wrapper .text-b {
		color: #199F5A !important;
		font-weight: 700 !important;
		font-size: 14.5px !important;
	}

	.tuyendung-page-wrapper .row-text6 {
		line-height: 18px !important;
	}

	/* Card bottom buttons (Xem chi tiet, Ung tuyen) layout on mobile */
	.tuyendung-page-wrapper .frame-row-bottom1 {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
		margin-top: 5px !important;
	}

	.tuyendung-page-wrapper .frame-frame-left1,
	.tuyendung-page-wrapper .frame-btn-ung-tuyen-ngay1 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		height: 44px !important;
		border-radius: 8px !important;
		margin: 0 !important;
	}

	/* Form Section (.group7) */
	.group7 {
		padding: 40px 15px !important;
	}

	.group7 .col-bottom {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* News Section (.row26) Mobile Layout fixes */
	.tuyendung-page-wrapper .row26 {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
		width: 100% !important;
		padding: 0 15px !important;
		box-sizing: border-box !important;
	}

	.tuyendung-page-wrapper .frame8 {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.tuyendung-page-wrapper .card5 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		height: auto !important;
	}

	.col-right {
		width: 100% !important;
		max-width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}

	.frame-f {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important; /* Stack vertically! */
		align-items: stretch !important;
		gap: 12px !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		padding: 0 0 16px 0 !important;
		border-bottom: 1px solid #eeeeee !important; /* Separation line */
	}

	.frame-f:last-child {
		border-bottom: none !important;
	}

	.frame-img2 {
		width: 100% !important; /* Full width image */
		height: auto !important;
		aspect-ratio: 16 / 9 !important; /* 16:9 ratio */
		object-fit: cover !important;
		border-radius: 8px !important;
		flex-shrink: 0 !important;
	}

	.frame-col5 {
		width: 100% !important;
		height: auto !important;
		padding: 4px 8px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 6px !important;
		box-sizing: border-box !important;
	}

	.frame-text4 {
		font-size: 15px !important;
		line-height: 1.4 !important;
		font-weight: 700 !important;
		margin: 0 !important;
		color: #222222 !important;
		white-space: normal !important; /* Force word wrapping */
		word-break: break-word !important; /* Force word wrapping */
		overflow: visible !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
	}

	.frame-text5 {
		font-size: 13px !important;
		color: #8c8c8c !important;
		margin: 0 !important;
	}
}