.site-header .header-inner,
.site-header:not(.dynamic-header),
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
body:not([class*=elementor-page-]) .site-main,
.page-header .entry-title {
max-width: 1920px !important;
font-family: "Noto Sans", sans-serif !important;
}
@media (max-width: 1440px) {
.site-header .header-inner,
.site-header:not(.dynamic-header),
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
body:not([class*=elementor-page-]) .site-main,
.page-header .entry-title {
max-width: 1440px !important;
}
}
@media (max-width: 1024px) {
.site-header .header-inner,
.site-header:not(.dynamic-header),
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
body:not([class*=elementor-page-]) .site-main,
.page-header .entry-title {
max-width: 1024px !important;
/* overflow-x: hidden; */
}
}
@media (max-width: 768px) {
.site-header .header-inner,
.site-header:not(.dynamic-header),
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
body:not([class*=elementor-page-]) .site-main,
.page-header .entry-title {
max-width: 768px !important;
padding-left: 0 !important;
padding-right: 0 !important;
/* overflow-x: hidden; */
}
}
button:focus {
outline: none !important;
}
.text-default-gradient {
background: #0E1525;
background: linear-gradient(to right, #0E1525 0%, #EF3F23 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-button-clip-path .elementor-button {
border-radius: 10px;
clip-path: polygon(0 0,
100% 0,
100% calc(100% - 24px),
calc(100% - 24px) 100%,
0 100%)
}
.main-button-clip-path-mobile .elementor-button {
border-radius: 5px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.banner-title {
color: var(--neutral-neutral-0, #FFF);
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 150%;
text-transform: uppercase;
}
.banner-description {
color: var(--neutral-neutral-300, #DBDCDE);
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.5px;
align-self: stretch;
}
/* Vision Top Section (Tầm nhìn) */
.vision-top-section {
text-align: center;
padding: 40px 240px 0 !important;
}
.vision-image-wrapper {
position: relative;
}
.vision-gradient-bg {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.226px;
width: 100vw;
height: 207px;
background: linear-gradient(180deg, rgba(252, 217, 211, 0.00) 0%, #FCD9D3 87.02%);
z-index: 1;
pointer-events: none;
}
.vision-image-svg {
position: absolute;
left: 50%;
bottom: 0;
width: 100vw;
height: auto;
transform: translateX(-50%);
z-index: 2;
display: flex;
justify-content: center;
align-items: flex-end;
opacity: 0.8;
pointer-events: none;
}
.vision-image-svg img {
width: 100vw;
height: auto;
display: block;
max-width: none;
min-width: 100vw;
filter: brightness(0) invert(1);
}
.vision-main-image {
width: 1200px;
height: 675px;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.vision-title-wrapper {
margin-top: 0;
margin-bottom: 32px !important;
}
.vision-badge {
display: flex;
align-items: center;
justify-content: center;
background: #BF321C;
color: #fff;
font-family: Noto Sans;
font-weight: 500;
font-size: 20px;
line-height: 150%;
letter-spacing: -0.2px;
vertical-align: middle;
width: 149px;
height: 46px;
margin: 0 auto;
margin-bottom: 8px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
gap: 10px;
border-radius: 10px;
}
/* Vision Mission Section */
.mission-cards {
display: flex;
justify-content: center;
gap: 24px;
margin: 0 auto;
}
.mission-card {
display: flex;
padding: 24px 28px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
border: 1px solid #EFEFEF;
background: #fff;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
}
.mission-card:hover {
border-color: #EF3F23;
box-shadow: 0px 12px 32px rgba(239, 63, 35, 0.15);
transform: translateY(-2px);
}
.mission-card-title {
display: flex;
flex-direction: column;
min-height: 60px;
/* Đảm bảo chiều cao tối thiểu cho title section */
justify-content: flex-start;
flex: 1 0 auto;
}
.mission-card-title-text {
color: #EF3F23;
/* H4/Bold */
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.5px;
margin-bottom: 12px;
}
.mission-card-title .desc {
color: #4F5460;
/* Body Large/Medium */
font-family: "Noto Sans", sans-serif !important;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 24px */
letter-spacing: -0.032px;
margin-bottom: 0px;
flex: 1;
/* Cho phép description mở rộng để lấp đầy không gian còn lại */
}
.mission-card-img {
height: 229.5px;
align-self: stretch;
aspect-ratio: 408.00/229.50;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
}
.mission-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mission-link {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: #EF3F23;
/* Body/16/Bold */
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 26px;
/* 162.5% */
}
.mission-link svg {
display: inline-block;
vertical-align: middle;
}
.mission-link:hover {
color: #962916;
}
/* Strategy Section */
/* Hiệu ứng scroll reveal */
.vision-top-section,
.mission-top-section {
opacity: 0;
transform: translateY(50px);
transition: all 1s ease-out;
}
.vision-top-section.revealed,
.mission-top-section.revealed {
opacity: 1;
transform: translateY(0);
}
.vision-title-wrapper,
.mission-title-wrapper {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out 0.2s;
position: relative;
margin-bottom: 60px;
}
.vision-after {
position: absolute;
top: -65%;
right: -5%;
height: 100%;
}
.vision-top-section.revealed .vision-title-wrapper,
.mission-top-section.revealed .mission-title-wrapper {
opacity: 1;
transform: translateY(0);
}
.vision-image-wrapper,
.mission-cards {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out 0.4s;
position: relative;
}
.vision-top-section.revealed .vision-image-wrapper,
.mission-top-section.revealed .mission-cards {
opacity: 1;
transform: translateY(0);
}
/* Section Card Figma Style */
.strategy-background {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: #F9F9F9;
position: absolute;
left: 50%;
bottom: 0;
width: 100vw;
height: auto;
transform: translateX(-50%);
z-index: -22;
}
.strategy-title {
text-align: center;
/* H2/SemiBold/UPPERCASE */
font-family: "Noto Sans";
font-size: 38px;
margin-bottom: 56px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 60px */
letter-spacing: -1px;
text-transform: uppercase;
background: linear-gradient(93deg, var(--text-heading-primary, #0E1525) 41.61%, var(--orange-orange-500, #EF3F23) 75.95%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* animation */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.strategy-title.revealed {
opacity: 1;
transform: translateY(0);
}
.strategy-card {
width: 426px;
/* min-height: 538px; */
height: fit-content;
background: #fff;
border-radius: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0;
overflow: hidden;
/* animation */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.strategy-card.revealed {
opacity: 1;
transform: translateY(0);
}
.strategy-line {
margin: auto;
opacity: 0;
transition: opacity 0.8s ease;
}
.strategy-line.revealed {
opacity: 1;
}
.strategy-line.line-1 {
padding-top: 80px;
margin: auto;
}
.strategy-card.card-1 {
margin-top: 200px;
}
.strategy-card.card-2 {
margin: 100px 0;
}
.strategy-card.card-3 {
margin-top: 0;
}
.strategy-card-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 68px;
padding: 0 16px;
background: #fff;
border-bottom: 1px solid #F8F9FA;
}
.strategy-card-title {
color: #0E1525;
/* H4/SemiBold */
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 36px */
letter-spacing: -0.5px;
}
.strategy-card-time {
color: #93969D;
text-align: right;
/* H4/Bold */
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 36px */
letter-spacing: -0.5px;
}
.strategy-card-divider {
width: 100%;
height: 1px;
background: #EF3F23;
margin: 0;
}
.strategy-card-content {
display: flex;
padding: 24px 16px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
/* Body XLarge/Regular */
font-family: "Noto Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 27px */
letter-spacing: -0.2px;
text-align: left;
position: relative;
}
.strategy-card-circle {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.strategy-card-circle svg {
width: 100%;
height: 100%;
}
.strategy-card-bottom {
background: #EFEFEF;
border-right: 4px solid var(--orange-orange-500, #EF3F23);
border-left: 4px solid var(--orange-orange-500, #EF3F23);
color: var(--text-heading-secondary, #2B313F);
/* Body XLarge/SemiBold */
font-family: "Noto Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%;
padding: 16px;
gap: 8px;
/* 27px */
text-align: left;
}
.strategy-cards {
display: flex;
justify-content: center;
/* gap: 32px; */
margin: 0 auto;
}
/* Company History Section */
.company-history {
text-align: center;
position: relative;
/* Gộp background màu */
background: var(--orange-orange-500, #EF3F23);
margin-bottom: 32px;
}
.company-history-wrapper {
width: 100%;
padding: 50px 0;
position: relative;
box-sizing: border-box;
/* Gộp background màu */
background: linear-gradient(92deg, #A62D1A 0%, #EF3F23 70%);
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0;
}
.company-history-wrapper::after {
content: '';
position: absolute;
inset: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/wp-content/uploads/2025/06/world-connect.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
opacity: 0.2;
z-index: 1;
/* Đảm bảo nằm trên nền màu, nhưng dưới nội dung */
pointer-events: none;
}
.company-history-title {
color: var(--Flowkit-White, #FFF);
text-align: center;
/* H3/Bold */
font-family: "Noto Sans";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 48px */
letter-spacing: -1px;
margin-bottom: 24px;
}
.company-history-content {
display: flex;
flex-direction: column;
align-items: center;
}
.company-history-content-item {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(239, 63, 35, 0.10);
padding: 12px 28px 12px 20px;
cursor: pointer;
transition: box-shadow 0.2s;
position: relative;
/* Cắt góc dưới bên phải */
clip-path: polygon(0 0,
100% 0,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
0 100%);
}
.company-history-content-item-title {
color: var(--orange-orange-500, #EF3F23);
/* Body XLarge/Bold */
font-family: "Noto Sans";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 27px */
}
.badge-text {
text-transform: uppercase;
}
.br1 {
display: block;
}
/* Responsive */
@media (max-width: 1440px) {
.banner-title {
font-size: 40px;
}
.banner-description {
font-size: 20px;
}
.vision-top-section {
padding: 32px 120px 0 !important;
}
.mission-card {
padding: 20px 24px;
gap: 24px;
}
.mission-card-title {
min-height: 60px;
}
.mission-card-title-text {
font-size: 20px;
min-height: 8px;
}
.mission-card-title .desc {
font-size: 14px;
}
.mission-card-img {
height: 189px;
aspect-ratio: 16/9;
}
.strategy-card-title,
.strategy-card-time {
font-size: 20px;
}
.strategy-card-content,
.strategy-card-bottom {
font-size: 16px;
}
.company-history-wrapper {
padding: 32px 0;
}
.company-history-title {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.vision-top-section {
padding: 24px 24px 0 !important;
}
.banner-title {
font-size: 32px;
}
.banner-description {
font-size: 20px;
letter-spacing: -0.8px;
}
.vision-title-wrapper,
.mission-title-wrapper,
.strategy-title {
margin-bottom: 32px;
}
.vision-title-wrapper {
margin-bottom: 24px !important;
}
.vision-main-image {
width: 100%;
height: 549px;
}
.mission-cards {
gap: 16px;
}
.mission-card-title-text {
font-size: 20px;
}
.mission-card-title .desc {
font-size: 14px;
}
.mission-card-img {
height: 150px;
aspect-ratio: 266.67/150.00;
}
.vision-after {
right: 0;
top: -60%;
}
.company-history-wrapper {
padding: 24px 0;
}
.company-history-title {
font-size: 20px;
margin-bottom: 12px;
}
.company-history-content-item-title {
font-size: 14px;
}
.company-history-content-item {
padding: 8px 16px;
}
}
@media (max-width: 768px) {
.vision-main-image {
width: 100%;
height: 220px;
}
.br2 {
display: block;
}
}
@media (max-width: 768px) {
.banner-title {
font-size: 24px;
}
.banner-description {
font-size: 14px;
}
.top-banner-section {
padding: 40px 0 !important;
background-size: cover !important;
}
.mission-top-section,
.vision-top-section {
margin: 40px 0;
}
.vision-top-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
.vision-title-wrapper .title-section-gradient,
.mission-title-wrapper .title-section-gradient {
font-size: 18px !important;
}
.vision-title-wrapper,
.mission-title-wrapper {
margin-bottom: 24px;
}
.vision-badge {
display: flex;
width: 120px;
height: 40px;
padding: 4px 10px;
align-items: center;
gap: 6px;
font-size: 14px;
}
.vision-badge svg {
width: 14px;
height: 14px;
}
.badge-text {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
gap: 6px;
}
.vision-main-title,
.vision-main-title {
font-size: 20px;
line-height: 150%;
letter-spacing: -0.2px;
}
.mission-cards {
/* flex-direction: column; */
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
gap: 16px;
max-width: 100%;
}
.mission-card {
padding: 16px 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(239, 63, 35, 0.08);
margin: 0;
width: 100%;
max-width: 100%;
gap: 20px;
}
.mission-card:hover {
transform: translateY(0);
}
.vision-after {
display: none;
}
.mission-card-title-text {
font-size: 18px;
}
.mission-card-img {
width: 100%;
height: auto;
min-height: 160px;
max-height: 200px;
}
.mission-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
}
.mission-link {
font-size: 14px;
padding: 0;
}
/* strategy section */
.strategy-title {
font-size: 24px;
background: linear-gradient(129deg, var(--text-heading-primary, #0E1525) 37.7%, var(--orange-orange-500, #EF3F23) 82.1%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.strategy-cards {
flex-direction: column;
}
.strategy-card-title,
.strategy-card-time {
font-size: 16px;
}
.strategy-card-content,
.strategy-card-bottom {
font-size: 14px;
}
.strategy-card {
width: 100%;
}
.strategy-card.card-1,
.strategy-card.card-2 {
margin: 0;
}
.strategy-line.line-1 {
padding-top: 0;
}
.strategy-line.line-1 svg {
transform: scale(-1, -1);
}
.strategy-line.line-2 svg {
transform: scale(-1, 1);
margin-left: 100px;
}
/* company history section */
.company-history-wrapper {
padding: 24px 0;
}
.company-history-title {
font-size: 14px;
margin-bottom: 16px;
}
.company-history-content-item {
padding: 8px 16px;
}
.company-history-content-item-title {
font-size: 12px;
}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------- */
/* DX Solution Section */
/* -------------------------------------------------------------------------------------------------------------------------------------------------- */
.title-section-gradient {
text-align: center;
font-family: "Noto Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 60px */
letter-spacing: -1px;
text-transform: uppercase;
background: linear-gradient(129deg, var(--text-heading-primary, #0E1525) 37.7%, var(--orange-orange-500, #EF3F23) 82.1%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.did-you-know-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.did-you-know-section .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 128px;
align-self: stretch;
}
.did-you-know-section .description {
width: 720px;
align-self: stretch;
color: var(--neutral-neutral-600, #626771);
text-align: justify;
/* H4/Regular */
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 36px */
letter-spacing: -0.5px;
}
.did-you-know-section .divider {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 20px;
height: 144px;
border: none;
margin: 0;
}
.did-you-know-section .divider-line {
width: 6px;
height: 100%;
background-color: #DBDCDE;
}
.did-you-know-section .divider-triangle {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 16px;
background-color: #DBDCDE;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.did-you-know-section .stats {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.did-you-know-section .percentage {
color: var(--orange-orange-500, #EF3F23);
text-align: center;
font-family: "Noto Sans";
font-size: 80px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 120px */
letter-spacing: -2px;
}
.did-you-know-section .label {
color: var(--orange-orange-500, #EF3F23);
/* H4/Bold */
font-family: "Noto Sans";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 36px */
letter-spacing: -0.5px;
}
@media (max-width: 1440px) {
.title-section-gradient {
font-size: 32px;
}
.did-you-know-section .description {
font-size: 20px;
}
.did-you-know-section .percentage {
font-size: 60px;
}
.did-you-know-section .label {
font-size: 20px;
}
.did-you-know-section .content-wrapper {
gap: 80px;
}
.did-you-know-section .divider {
height: 100px;
}
}
@media (max-width: 1024px) {
.title-section-gradient {
font-size: 24px;
}
.did-you-know-section .divider {
height: 100px;
}
.did-you-know-section .description {
width: 550px;
font-size: 16px;
}
.did-you-know-section .percentage {
font-size: 48px;
}
.did-you-know-section .label {
font-size: 18px;
}
.did-you-know-section .content-wrapper {
gap: 70px;
}
}
@media (max-width: 768px) {
.dx-banner-desc {
font-size: 12px;
}
.did-you-know-section {
margin: 32px 0px;
}
.title-section-gradient {
font-size: 20px !important;
line-height: 150% !important;
/* 30px */
letter-spacing: -0.2px !important;
}
.did-you-know-section .content-wrapper {
flex-direction: column;
flex-flow: column-reverse;
gap: 0;
}
.did-you-know-section .description {
width: 100%;
font-size: 16px;
line-height: 24px;
}
.did-you-know-section .divider {
display: none;
}
.did-you-know-section .stats {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.did-you-know-section .percentage {
font-size: 64px;
line-height: 150%;
}
.did-you-know-section .label {
font-size: 20px;
line-height: 150%;
}
}
/* Solution Expert Section */
.solution-expert-section {
position: relative;
}
.solution-expert-bg {
position: absolute;
right: -120px;
bottom: -120px;
width: 743px;
height: 743px;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 188, 177, 0.3) 25%, rgba(252, 217, 211, 0) 100%);
z-index: 0;
pointer-events: none;
}
.solution-expert-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 100px;
align-self: stretch;
}
.solution-expert-left {
width: 583px;
align-self: stretch;
}
.solution-expert-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.solution-expert-right .title-section-gradient {
text-align: left;
}
.solution-expert-right {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.solution-expert-badge {
display: flex;
align-items: center;
background: #BF321C;
color: #fff;
font-family: "Noto Sans", sans-serif;
font-weight: 500;
font-size: 20px;
border-radius: 6px;
height: 46px;
padding: 8px 12px;
gap: 10px;
width: fit-content;
margin-bottom: 8px;
}
.solution-expert-badge .icon-mark {
width: 16px;
height: 16px;
background: url('/wp-content/uploads/2024/06/mark-icon.svg') no-repeat center/contain;
display: inline-block;
}
.solution-expert-badge .icon-arrow {
width: 12px;
height: 12px;
background: url('/wp-content/uploads/2024/06/arrow-right.svg') no-repeat center/contain;
display: inline-block;
}
.solution-expert-desc {
font-size: 20px;
color: #626A71;
font-family: "Noto Sans", sans-serif;
line-height: 28px;
margin-bottom: 24px;
}
.solution-expert-reasons {
display: flex;
flex-direction: column;
}
.reason-box {
display: flex;
padding: 32px 40px;
align-items: center;
gap: 32px;
align-self: stretch;
border-bottom: 1px solid var(--neutral-neutral-300, #DBDCDE);
}
.reason-box:last-child {
border-bottom: none;
}
.reason-number {
font-size: 48px;
font-weight: 700;
color: #EF3F23;
min-width: 53px;
font-family: "Noto Sans", sans-serif;
}
.reason-text {
font-size: 20px;
color: #0E1525;
font-family: "Noto Sans", sans-serif;
line-height: 28px;
}
@media (max-width: 1440px) {
.solution-expert-bg {
display: none;
}
.solution-expert-left {
width: 488px;
}
.reason-box {
padding: 24px 32px;
gap: 24px;
}
.reason-number {
font-size: 40px;
}
.reason-text {
font-size: 16px;
}
.solution-expert-badge {
font-size: 16px;
padding: 6px 10px;
border-radius: 10px;
gap: 8px;
}
.solution-expert-badge svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 1024px) {
.solution-expert-container {
gap: 48px;
}
.solution-expert-left {
width: 400px;
}
.solution-expert-right {
gap: 16px;
}
.reason-box {
padding: 16px 24px;
gap: 8px;
}
.reason-number {
font-size: 32px;
margin-right: 16px;
}
.reason-text {
font-size: 14px;
letter-spacing: -0.1px;
line-height: 150%;
}
}
@media (max-width: 767px) {
.solution-expert-section {
padding: 40px 0;
}
.solution-expert-bg {
display: none;
}
.solution-expert-container {
flex-direction: column;
flex-flow: column-reverse;
gap: 24px;
padding: 0 12px;
}
.solution-expert-left {
width: 100%;
height: 180px;
}
.solution-expert-right {
gap: 16px;
}
.solution-expert-desc,
.reason-text {
font-size: 12px;
line-height: 150%;
letter-spacing: -0.1px;
}
.reason-box {
padding: 16px 12px;
gap: 16px;
}
.reason-number {
font-size: 28px;
min-width: 32px;
margin-right: 12px;
}
.solution-expert-badge {
font-size: 14px;
padding: 4px 10px;
height: 32px;
gap: 6px;
margin-bottom: 0;
}
.solution-expert-badge svg {
width: 12px;
height: 12px;
}
}
/* Solution Service Section */
.solution-service-section {
position: relative;
background: linear-gradient(0deg, var(--orange-orange-50, #FFF6F5) 0%, var(--orange-orange-50, #FFF6F5) 100%), var(--neutral-neutral-0, #FFF) !important;
}
.solution-service-bg-ellipse {
position: absolute;
left: 0;
top: 0;
width: 423px;
height: 423px;
background: radial-gradient(50% 50% at 50% 50%, rgba(239, 63, 35, 0.2) 25%, rgba(239, 63, 35, 0.1) 100%);
z-index: 0;
pointer-events: none;
}
.solution-service-container {
position: relative;
z-index: 1;
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
}
.solution-service-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.solution-service-badge {
display: flex;
align-items: center;
background: #BF321C;
color: #fff;
font-family: "Noto Sans", sans-serif;
font-weight: 500;
font-size: 20px;
border-radius: 10px;
height: 46px;
padding: 8px 12px;
gap: 10px;
width: fit-content;
margin-bottom: 8px;
}
.solution-service-desc {
font-size: 20px;
color: #626A71;
font-family: "Noto Sans", sans-serif;
line-height: 28px;
text-align: center;
max-width: 900px;
}
.solution-service-list {
display: flex;
flex-direction: row;
gap: 36px;
width: 100%;
justify-content: center;
}
.service-box {
flex: 1 1 0;
min-width: 0;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(239, 63, 35, 0.08);
padding: 32px;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0;
position: relative;
gap: 56px;
}
.service-box:hover {
box-shadow: 0 8px 32px rgba(239, 63, 35, 0.15);
background: var(--orange-orange-500, #EF3F23);
}
.service-box:hover .service-title,
.service-box:hover .service-desc,
.service-box:hover .service-arrow svg path,
.service-box:hover .service-icon svg path {
color: #fff;
fill: #fff;
}
.service-ellipse {
position: absolute;
top: 0;
right: 0;
}
.service-box>*:not(.service-ellipse) {
position: relative;
z-index: 1;
}
.service-icon {
width: 80px;
height: 80px;
}
.service-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.service-title {
color: var(--neutral-neutral-950, #0E1525);
text-align: left;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 150%;
display: flex;
align-items: center;
justify-content: space-between;
}
.service-desc {
color: var(--neutral-neutral-800, #323846);
text-align: left;
/* Body Large/Medium */
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 24px */
letter-spacing: -0.032px;
}
.service-arrow {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1440px) {
.solution-service-list {
gap: 20px;
}
.service-box {
padding: 20px;
gap: 40px;
}
.service-ellipse svg {
width: 150px;
height: 150px;
}
.service-icon svg {
width: 60px;
height: 60px;
}
.service-content {
gap: 8px;
}
.service-title {
font-size: 24px;
}
.service-desc {
font-size: 14px;
}
}
@media (max-width: 1024px) {
.solution-service-list {
gap: 12px;
}
.service-box {
padding: 16px;
gap: 32px;
}
.service-icon svg {
width: 40px;
height: 40px;
}
.service-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.service-title {
font-size: 20px;
}
.service-desc {
font-size: 12px;
}
}
@media (max-width: 767px) {
.solution-service-section {
padding: 40px 20px;
}
.solution-service-container {
padding: 0;
gap: 20px;
}
.service-content {
gap: 0;
}
.solution-service-title {
gap: 8px;
}
.solution-service-main-title {
font-size: 20px !important;
letter-spacing: -0.2px !important;
}
.solution-service-list {
flex-direction: column;
gap: 20px;
overflow-x: unset;
padding: 0;
}
.service-box {
min-width: 0;
max-width: 100%;
width: 100%;
padding: 20px;
gap: 0;
}
.service-ellipse {
width: 100px;
height: 100px;
}
.service-ellipse svg {
width: 100px;
height: 100px;
}
.service-title {
font-size: 20px !important;
margin-bottom: 8px;
}
.service-title .service-arrow {
width: 16px;
height: 16px;
}
.service-desc {
font-size: 12px;
}
.service-icon {
width: 48px;
height: 48px;
margin-bottom: 24px;
}
.service-icon svg {
width: 100%;
height: 100%;
}
}
/* Solution Packages Section */
.dx-packages-section {
display: flex;
align-items: flex-start;
gap: 56px;
}
.dx-packages-header {
display: flex;
min-width: 460px;
flex-direction: column;
align-items: flex-start;
gap: 56px;
position: sticky;
top: 0;
z-index: 10;
}
.dx-packages-header p {
color: var(--neutral-neutral-600, #626771);
text-align: left;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 30px */
letter-spacing: -0.2px;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 0 !important;
}
.dx-packages-cta-mobile {
display: none;
}
.dx-packages-cta-desktop {
display: block;
}
.dx-packages-cta-box {
display: flex;
padding: 36px 32px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
align-self: stretch;
background: var(--orange-orange-500, #EF3F23);
box-shadow: 0px 4px 62px 0px rgba(0, 0, 0, 0.20);
}
.dx-packages-cta-box-content {
display: flex;
flex-direction: column;
justify-content: center;
color: #FFF;
/* H4/SemiBold */
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 36px */
letter-spacing: -0.5px;
}
.dx-packages-cta-btn {
display: inline-block;
margin-top: 12px;
background: linear-gradient(90deg, #EF3F23 0%, #FCD9D3 100%);
color: #fff;
border-radius: 8px;
padding: 10px 24px;
font-weight: 700;
text-decoration: none;
}
.dx-packages-list-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
flex: 1 0 0;
}
.dx-package-box {
display: flex;
flex-direction: column;
/* align-items: flex-start; */
gap: 20px;
/* flex: 1 0 0; */
}
.dx-package-image img {
width: 447px;
align-self: stretch;
height: 100%;
}
.dx-package-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
}
.dx-package-industry {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.industry-tag {
width: fit-content;
display: flex;
padding: 4px 6px;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--orange-orange-50, #FFF6F5);
backdrop-filter: blur(2px);
color: var(--orange-orange-400, #F2654F);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 21px */
letter-spacing: -0.1px;
}
.dx-package-title {
color: var(--Grayscale-900, #111827);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
align-self: stretch;
}
.dx-package-desc {
overflow: hidden;
color: var(--Color-Subtext, #6C757D);
text-align: justify;
text-overflow: ellipsis;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 28px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
}
.dx-package-link-svg {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 151px;
height: 57px;
text-decoration: none;
cursor: pointer;
background: none;
border: none;
padding: 0;
text-decoration: none !important;
}
.dx-package-link-svg svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
transition: fill 0.2s, stroke 0.2s;
}
.dx-package-link-svg span {
position: relative;
z-index: 2;
color: #EF3F23;
font-size: 18px;
font-weight: 700;
width: 100%;
text-align: center;
text-decoration: none;
}
.dx-package-link-svg:hover span {
color: #fff;
}
.dx-package-link-svg:hover svg path {
fill: #EF3F23;
stroke: #EF3F23;
transition: fill 0.2s, stroke 0.2s;
}
@media (max-width: 1440px) {
.dx-packages-section {
gap: 48px;
}
.dx-packages-header {
min-width: 387px;
gap: 48px;
}
.dx-package-box {
gap: 16px;
}
.dx-packages-cta-box {
padding: 30px 24px;
gap: 16px;
}
.dx-packages-cta-box-content {
font-size: 20px;
}
.company-history-content-item-title {
font-size: 14px;
}
.dx-package-content {
gap: 8px;
}
.dx-package-title {
font-size: 20px;
}
.dx-package-desc {
font-size: 16px;
letter-spacing: -0.032px;
line-height: 150%;
}
.dx-package-link-svg {
width: 150px;
height: 56px;
}
}
@media (max-width: 1024px) {
.dx-packages-list-wrapper {
gap: 20px;
}
.dx-package-title {
font-size: 18px;
}
.dx-package-desc,
.dx-package-link-svg span {
font-size: 14px;
}
.dx-package-link-svg {
width: 120px;
height: 40px;
}
.dx-packages-header {
min-width: 300px;
gap: 32px;
}
.dx-packages-header p,
.dx-packages-cta-box-content {
font-size: 16px;
}
}
@media (max-width: 767px) {
.dx-packages-section {
padding: 0;
flex-direction: column;
max-width: 100%;
gap: 24px;
overflow: hidden;
}
.dx-packages-header {
gap: 12px;
align-self: stretch;
}
.dx-packages-header h2 {
font-size: 20px !important;
line-height: 150% !important;
letter-spacing: -0.2px !important;
margin: 0 !important;
}
.dx-packages-header p {
font-size: 16px;
letter-spacing: -0.032px;
align-self: stretch;
width: 100%;
}
.dx-packages-cta-mobile {
display: block;
position: relative;
width: 100%;
}
.dx-packages-cta-desktop {
display: none;
}
.dx-packages-list {
padding: 0 0 24px 0;
}
.dx-packages-list-wrapper {
display: flex !important;
flex-direction: row;
overflow-x: auto;
gap: 16px;
padding: 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100vw;
}
.dx-packages-list::-webkit-scrollbar {
display: block;
}
.dx-package-box {
display: flex;
min-width: 85vw;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.dx-package-image {
width: 100%;
}
.dx-package-image img {
width: 100%;
height: auto;
display: block;
}
.dx-package-content {
gap: 8px;
}
.dx-package-industry {
font-size: 12px;
letter-spacing: -0.1px;
}
.dx-package-title {
font-size: 18px;
line-height: 150%;
}
.dx-package-desc {
font-size: 14px;
letter-spacing: -0.1px;
}
.dx-package-link-svg {
width: 105px;
height: 40px;
}
.dx-package-link-svg span {
font-size: 12px;
}
.dx-packages-cta-mobile .dx-packages-cta-box {
gap: 16px;
display: flex;
align-items: center;
width: 100%;
padding: 24px;
}
.dx-packages-cta-mobile .dx-packages-cta-box-content {
font-size: 14px;
text-align: center;
width: 100%;
height: 100%;
}
.dx-packages-cta-mobile .dx-packages-cta-box::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/wp-content/uploads/2025/06/world-connect.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
opacity: 0.2;
z-index: 1;
/* Đảm bảo nằm trên nền màu, nhưng dưới nội dung */
pointer-events: none;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Solution Testimonial Section */
/* ----------------------------------------------------------------------------------------- */
/* Testimonial Section */
.solution-testimonial {
background: #fff;
}
.testimonial-wrapper {
display: flex;
gap: 56px;
}
.testimonial-image {
width: 460px;
position: relative;
}
.testimonial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-info {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
background: #fff;
padding: 18px 20px;
border-radius: 4px;
}
.testimonial-info h4 {
color: var(--text-heading-primary, #0E1525);
/* H4/SemiBold */
font-size: 24px !important;
font-style: normal;
font-weight: 600 !important;
line-height: 150% !important;
/* 36px */
letter-spacing: -0.5px !important;
align-self: stretch;
margin: 0 !important;
}
.testimonial-info p {
color: var(--text-placeholder, #93969D);
/* Body Large/SemiBold */
font-size: 16px !important;
font-style: normal;
font-weight: 600 !important;
line-height: 150% !important;
/* 24px */
letter-spacing: -0.032px !important;
align-self: stretch;
margin: 0 !important;
}
.testimonial-name {
font-size: 24px;
font-weight: 600;
color: #0E1525;
margin-bottom: 4px;
}
.testimonial-position {
font-size: 16px;
color: #939BAF;
}
.testimonial-content {
display: flex;
padding: 44px 48px;
flex-direction: column;
align-items: flex-start;
gap: 50px;
flex: 1 0 0;
background: #FFF;
box-shadow: 0px 8px 54px 0px rgba(0, 0, 0, 0.08);
}
.testimonial-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.testimonial-slider {
display: flex;
gap: 16px;
}
.testimonial-slider button {
width: 44px;
height: 46px;
border: 1px solid #EF321C;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-slider button svg {
width: 24px;
height: 24px;
color: #EF321C;
}
.problem-solution-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.problem-solution {
display: flex;
gap: 12px;
}
.problem-item {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.problem-solution .icon {
width: 16px;
height: 16px;
background: #EF321C;
flex-shrink: 0;
margin-top: 8px;
}
.problem-content {
display: flex;
}
.problem-content .highlight {
color: #EF3F23;
font-weight: 700;
}
.problem-content p {
color: var(--text-body, #4F5460);
/* H4/Bold */
font-size: 24px !important;
font-style: normal;
font-weight: 500 !important;
line-height: 150% !important;
/* 36px */
letter-spacing: -0.5px !important;
margin-bottom: 0 !important;
}
.testimonial-footer {
display: flex;
padding: 32px 24px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
background: var(--orange-orange-500, #EF3F23);
position: relative;
}
.testimonial-footer p {
color: var(--text-heading-inverted, #FFF);
/* H4/Bold */
font-size: 24px !important;
font-style: normal;
font-weight: 700 !important;
line-height: 150% !important;
/* 36px */
letter-spacing: -0.5px !important;
margin: 0 !important;
}
.testimonial-footer .tick-circle {
position: absolute;
bottom: -12%;
right: -28px;
opacity: 0.3;
}
.slider-btn-mobile {
display: none;
}
button:hover,
button:focus {
background: transparent;
}
@media (max-width: 1440px) {
.testimonial-container {
padding: 0 120px;
}
.testimonial-wrapper {
gap: 48px;
}
.testimonial-image {
width: 387px;
}
.testimonial-content {
padding: 28px 32px;
gap: 32px;
}
.testimonial-header {
align-items: center;
}
.testimonial-header .title-section-gradient {
text-align: left;
letter-spacing: -1px;
}
.testimonial-slider button {
width: 32px;
height: 32px;
padding: 8px;
}
.testimonial-slider button svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 1024px) {
.testimonial-wrapper {
gap: 32px;
}
.testimonial-image {
width: 317px;
}
.testimonial-content {
padding: 16px 24px;
gap: 24px;
}
.testimonial-slider button {
width: 32px;
height: 32px;
padding: 8px;
}
.testimonial-slider button svg {
width: 12px;
height: 12px;
}
.problem-content p,
.testimonial-footer p,
.testimonial-info h4 {
font-size: 20px !important;
}
.testimonial-info p {
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.testimonial-wrapper {
flex-direction: column;
flex-flow: column-reverse;
max-width: 100%;
padding: 0;
gap: 24px;
}
.testimonial-header {
justify-content: center;
}
.testimonial-image {
width: 100%;
height: 400px;
}
.testimonial-content {
gap: 16px;
padding: 0;
width: 100%;
box-shadow: none;
}
.testimonial-info {
padding: 12px;
}
.testimonial-info h4 {
font-size: 18px !important;
}
.testimonial-info p {
font-size: 14px !important;
}
.testimonial-slider {
display: none;
}
.slider-btn-mobile {
display: block;
position: absolute;
padding: 12px !important;
}
.slider-btn-mobile.prev {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.slider-btn-mobile.next {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.problem-solution {
gap: 8px;
}
.problem-solution .icon {
width: 10px;
height: 10px;
margin-top: 4px;
}
.problem-content p {
font-size: 14px !important;
}
.testimonial-footer {
padding: 12px;
}
.testimonial-footer p {
font-size: 14px !important;
}
.testimonial-footer .tick-circle {
bottom: -10px;
right: -15px;
}
.testimonial-footer .tick-circle svg {
width: 50px;
height: 50px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Introduce Team Section */
/* ----------------------------------------------------------------------------------------- */
.introduce-team {
position: relative;
padding-top: 100px;
}
.introduce-team-background-circle {
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
.introduce-boss {
width: 100%;
background: #fff;
padding: 60px 0;
}
.introduce-boss-list {
display: flex;
gap: 50px;
justify-content: center;
}
.boss-card {
min-height: 550px;
display: flex;
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 28px;
flex: 1 0 0;
align-self: stretch;
border: 0.75px solid var(--orange-orange-100, #FCD9D3);
background: var(--orange-orange-50, #FFF6F5);
position: relative;
flex-shrink: 0;
}
.boss-detail {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
background: #fff;
color: #222;
border: 0.75px solid var(--orange-orange-100, #FCD9D3);
background: var(--orange-orange-500, #EF3F23);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
padding: 24px;
gap: 16px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
display: flex;
flex-direction: column;
justify-content: center;
}
.boss-card:hover .boss-detail,
.boss-card:focus-within .boss-detail {
opacity: 1;
pointer-events: auto;
}
.boss-detail-wrapper {
display: flex;
align-items: center;
flex-direction: column;
gap: 12px;
}
.boss-detail-image {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
}
.boss-detail-info {
text-align: center;
}
.boss-detail-avatar {
width: 100px;
height: 100px;
object-fit: cover;
}
.boss-detail-name {
color: #fff;
font-size: 16px;
font-weight: 700;
}
.boss-detail-title {
color: #fff;
font-size: 14px;
}
.boss-detail-image .boss-linkedin {
width: 32px;
height: 32px;
}
.boss-detail-image .boss-linkedin img {
width: 32px;
height: 32px;
}
.boss-detail-list {
padding: 16px;
margin: 0;
list-style: none;
background: #fff;
height: 322px;
}
.boss-detail li {
color: #222;
font-size: 14px;
margin-bottom: 6px;
position: relative;
padding-left: 24px;
}
.boss-detail li:before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
background: #EF3F23;
border-radius: 50%;
}
.boss-detail-sub-line {
color: var(--icon-icons-quinary, #93969D);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.1px;
}
.boss-card-corner {
position: absolute;
}
.boss-card-corner.top {
top: 20px;
left: 20px;
}
.boss-card-corner.bottom {
bottom: 20px;
right: 20px;
}
.boss-bg-circles {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
}
.boss-avatar-wrapper {
margin-top: 60px;
position: relative;
width: 200px;
height: 200px;
}
.boss-avatar {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
background: #fff;
z-index: 1;
}
.boss-linkedin {
position: absolute;
right: 0;
bottom: 0;
width: 48px;
height: 48px;
z-index: 2;
}
.boss-linkedin img {
width: 48px;
height: 48px;
}
.boss-info {
gap: 24px;
text-align: center;
z-index: 1;
}
.boss-name {
color: #EF321C;
font-size: 20px;
font-weight: 700;
line-height: 150%;
letter-spacing: -0.2px;
}
.boss-title {
color: var(--text-placeholder, #93969D);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 26px;
}
.introduce-team-members {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
margin: 0 auto;
position: relative;
}
.member-slider-controls {
display: none;
width: 100%;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 16px;
}
.member-slider-dots {
display: flex;
gap: 8px;
}
.member-slider-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #E0E0E0;
display: inline-block;
transition: background 0.2s;
}
.member-slider-dots .dot.active {
background: #EF3F23;
}
.introduce-team-members-list {
max-width: 1440px;
display: flex;
gap: 16px;
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
transition: 0.3s ease-in-out;
}
.introduce-team-members-list::-webkit-scrollbar {
display: none;
}
.member-card {
width: 224px;
height: 224px;
flex-shrink: 0;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.member-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
.member-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #0E1525 100%);
opacity: 0.6;
z-index: 1;
}
.member-info {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 2;
color: #fff;
text-align: left;
}
.member-role {
font-size: 14px;
font-weight: 400;
}
.member-name {
font-size: 20px;
font-weight: 600;
}
.team-slider-btn {
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.team-slider-btn svg {
display: block;
}
.team-slider-btn:active {
background: #f5f5f5;
}
@media (max-width: 1440px) {
.introduce-boss {
padding: 48px 0;
}
.introduce-boss-list {
gap: 32px;
}
.boss-detail {
padding: 16px;
}
.boss-detail-name {
font-size: 12px;
}
.boss-detail-title {
font-size: 10px;
}
.boss-detail li {
font-size: 12px;
letter-spacing: -0.1px;
margin-bottom: 6px;
}
.boss-detail-sub-line {
font-size: 10px;
}
}
@media (max-width: 1024px) {
.boss-card {
height: 500px;
}
.boss-detail {
gap: 8px;
justify-content: flex-start;
}
.introduce-boss {
padding: 32px 0;
}
.boss-detail-image {
width: 80px;
height: 80px;
}
.boss-detail-avatar {
width: 80px;
height: 80px;
}
.boss-detail-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
flex: 1 0 0;
align-self: stretch;
height: fit-content;
padding: 12px 16px 12px 12px;
}
.boss-detail li {
margin-bottom: 0;
}
.introduce-team-members {
flex-direction: column;
}
.introduce-team-members .news-nav.desktop {
display: none;
}
.member-slider-controls {
display: flex;
}
}
@media (max-width: 768px) {
.introduce-team {
padding-top: 0;
}
.introduce-team-background-circle {
display: none;
}
.introduce-boss-list {
max-width: 100%;
overflow-x: auto;
gap: 16px;
padding: 0;
justify-content: flex-start;
}
.introduce-boss {
padding: 24px 0;
}
.boss-card {
width: 80vw;
min-width: 260px;
max-width: 320px;
}
.boss-bg-circles {
width: 100%;
}
.boss-detail {
padding: 12px;
gap: 8px;
}
.boss-bg-circles svg {
width: 100%;
height: 100%;
}
.boss-detail-image {
width: 80px;
height: 80px;
}
.boss-detail-avatar {
width: 80px;
height: 80px;
}
.boss-detail-name {
font-size: 14px;
}
.boss-detail-title {
font-size: 12px;
}
.boss-detail-list {
padding: 8px;
height: 368px;
}
.boss-detail li {
color: #222;
font-size: 12px;
margin-bottom: 0px;
}
.boss-detail-sub-line {
font-size: 10px;
}
.team-slider-btn {
width: 20px;
}
.member-card {
width: 200px;
}
.introduce-team-members {
flex-direction: column;
gap: 0;
}
.introduce-team-members-list {
width: 100%;
overflow-x: auto;
justify-content: flex-start;
}
.team-slider-btn.desktop {
display: none;
}
.team-slider-btn {
width: 40px;
height: 40px;
}
.team-slider-btn.prev,
.team-slider-btn.next {
position: static;
margin: 0 8px;
}
.member-slider-controls {
display: flex;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Description Section */
/* ----------------------------------------------------------------------------------------- */
.faq-section {
display: flex;
flex-direction: column;
gap: 30px;
}
.faq-container {
display: flex;
gap: 30px;
}
.faq-sidebar {
background: white;
border-radius: 8px;
height: fit-content;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.08);
}
.faq-sidebar-item {
padding: 20px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid var(--neutral-neutral-200, #EFEFEF);
font-size: 20px;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
}
.faq-sidebar-item:hover {
color: #EF3F23;
background-color: #fff2f0;
border-left-color: #EF3F23;
border-left-width: 2px;
}
.faq-sidebar-item.active {
background-color: #fff2f0;
border-left-color: #EF3F23;
color: #EF3F23;
font-weight: 600;
}
.faq-content {
flex: 1;
}
.faq-questions-wrapper {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}
.faq-question-item {
width: 100%;
border: 1px solid var(--Grayscale-300, #DEE2E6);
}
.faq-question-header {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
font-weight: 500;
}
.faq-question-header:hover {
background-color: #f8f9fa;
}
.faq-question-header.active {
color: #EF3F23;
}
.faq-question-text {
flex: 1;
margin-right: 15px;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.faq-question-arrow {
font-size: 12px;
transition: transform 0.3s ease;
color: #666;
}
.faq-question-header.active .faq-question-arrow {
transform: rotate(180deg);
color: #EF3F23;
}
.faq-question-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-question-answer.show {
max-height: 200px;
}
.faq-question-answer-content {
padding: 20px;
color: #666;
line-height: 1.6;
font-weight: 500;
}
@media (max-width: 1440px) {
.faq-sidebar {
width: 387px;
}
.faq-sidebar-item {
padding: 16px 20px;
font-size: 18px;
}
.faq-questions-wrapper {
width: fit-content;
gap: 24px;
}
.faq-question-answer-content,
.faq-question-header {
padding: 16px;
}
}
@media (max-width: 1024px) {
.faq-sidebar {
width: 317px;
}
.faq-sidebar-item {
padding: 12px 16px;
font-size: 14px;
}
.faq-questions-wrapper {
gap: 16px;
}
.faq-question-answer-content,
.faq-question-header {
padding: 12px;
}
.faq-question-text {
font-size: 16px;
}
.faq-question-answer-content {
font-size: 14px;
}
}
@media (max-width: 768px) {
.faq-section {
padding: 50px 0;
gap: 16px;
max-width: 100%;
}
.faq-container {
gap: 16px;
flex-direction: column;
}
.faq-questions-wrapper {
width: 100%;
gap: 16px;
}
.faq-sidebar-item {
padding: 16px 12px;
font-size: 16px;
}
.faq-question-header {
padding: 12px;
min-height: 74px;
}
.faq-question-text {
font-size: 16px;
}
.faq-question-arrow {
font-size: 10px;
}
.faq-question-answer-content {
padding: 12px;
font-size: 14px;
}
.faq-sidebar {
width: 100%;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Contract Section */
/* ----------------------------------------------------------------------------------------- */
.contract-section {
position: relative;
}
.contract-section-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.contract-line img {
width: 100%;
object-fit: cover;
}
.contract-cards {
display: flex;
height: 296px;
gap: 24px;
}
.contract-card {
position: relative;
background: #F8F8F8;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border: 0.75px solid var(--neutral-neutral-100, #F7F7F7);
}
.contract-bg-circles {
position: absolute;
bottom: -8px;
left: 0;
}
.contract-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contract-card-title {
border-bottom: 1px solid #EF3F23;
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: flex-start;
gap: 8px;
align-self: stretch;
color: var(--text-heading-primary, #0E1525);
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.contract-card-content {
display: flex;
padding: 24px 16px;
flex-direction: column;
align-items: center;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
.contract-card-content p {
font-size: 16px;
font-weight: 500;
line-height: 150%;
color: #93969F;
margin: 0;
}
.contract-section-bg-bottom {
position: absolute;
left: 0;
bottom: 0px;
width: 100vw;
height: 216px;
background: var(--Primary-Base-Color, #EF3F23);
z-index: -1;
}
@media (max-width: 1024px) {
.contract-cards {
height: 236px;
}
.contract-card-title {
font-size: 14px;
padding: 8px 12px;
}
.contract-card-content {
padding: 20px 12px;
gap: 12px;
}
.contract-card-content p {
font-size: 12px;
}
.contract-section-bg-bottom {
height: 140px;
}
}
@media (max-width: 768px) {
.contract-section {
max-width: 100%;
}
.contract-section-wrapper {
gap: 16px;
padding: 24px 0;
}
.contract-section-title {
font-size: 20px;
}
.contract-section-content.desktop,
.contract-section-bg-bottom {
display: none;
}
.contract-line {
display: none;
}
.contract-cards {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 24px;
height: fit-content;
}
.contract-card {
width: 100%;
min-height: 200px;
height: auto;
}
.contract-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contract-card-title {
font-size: 16px;
padding: 8px 16px;
}
.contract-card-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.contract-card-content p {
font-size: 14px;
}
.contract-bg-circles {
width: 100%;
height: 100%;
bottom: 0;
}
.contract-bg-circles svg {
height: 100%;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Work Process Section */
/* ----------------------------------------------------------------------------------------- */
.work_process-section {
background: #fff;
}
.work_process-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.work_process-cards {
display: flex;
gap: 24px;
scrollbar-width: none;
}
.work_process-cards::-webkit-scrollbar {
display: none;
}
.work_process-card {
position: relative;
min-width: 225px;
height: 191px;
padding: 14px;
display: flex;
flex-direction: column;
aspect-ratio: 225/191;
}
.work_process-card-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 10px;
width: 173px;
height: 162px;
flex-shrink: 0;
flex-shrink: 0;
background: var(--Grayscale-100, #F8F9FA);
box-shadow: 0px 0px 10.773px 0px rgba(0, 0, 0, 0.20);
z-index: 1;
position: relative;
}
.work_process-card-icon-bg {
position: absolute;
top: 4px;
left: 4px;
}
.work_process-card-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.work_process-card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.work_process-card-title {
color: #111827;
font-size: 18px;
font-weight: 500;
font-weight: 600;
line-height: 150%;
}
.work_process-card-step {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
color: #F8F9FA;
font-size: 24px;
font-weight: 600;
z-index: 1;
}
.work_process-card-step-text {
font-size: 12px;
font-weight: 500;
letter-spacing: -0.1px;
}
.work_process-card-step-number {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
}
.work_process-card-arrow {
position: absolute;
top: 0;
right: -36px;
width: 100.548px;
height: 191.521px;
flex-shrink: 0;
}
.work_process-card svg {
fill: var(--Primary-Shades-80, #EF5138);
}
.work_process-card-arrow svg.step-1 {
opacity: 0.5;
}
.work_process-card-arrow svg.step-2 {
opacity: 0.6;
}
.work_process-card-arrow svg.step-3 {
opacity: 0.7;
}
.work_process-card-arrow svg.step-4 {
opacity: 0.8;
}
.work_process-card-arrow svg.step-5 {
opacity: 0.9;
}
.work_process-card-arrow svg.step-6 {
opacity: 1;
}
@media (max-width: 1440px) {
.work_process-cards {
justify-content: space-between;
gap: 16px;
}
.work_process-content {
width: 100%;
}
.work_process-card {
min-width: 175px;
height: 148px;
aspect-ratio: 46/41;
padding: 12px 0;
}
.work_process-card-content {
width: 130px;
}
.work_process-card-arrow {
width: 72px;
height: 148px;
right: 4px;
}
.work_process-card-arrow svg {
height: 148px;
}
.work_process-card-icon {
width: 32px;
height: 32px;
}
.work_process-card-title {
font-size: 16px;
}
.work_process-card-step {
right: 4px;
}
}
@media (max-width: 1024px) {
.work_process-cards {
justify-content: center;
gap: 20px;
}
.work_process-card {
min-width: 116px;
height: 116px;
}
.work_process-card-content {
width: 116px;
height: 116px;
}
.work_process-card-arrow {
width: 56px;
height: 120px;
right: 8px;
}
.work_process-card-arrow svg {
height: 120px;
}
.work_process-card-icon {
width: 24px;
height: 24px;
}
.work_process-card-title {
font-size: 14px;
}
.work_process-card-step {
right: -16px;
}
.work_process-card-step-text {
font-size: 8px;
}
.work_process-card-step-number {
font-size: 16px;
}
.work_process-card-icon-bg svg {
width: 40px;
height: 40px;
}
}
@media (max-width: 768px) {
.work_process-section {
padding: 24px 0;
background: #F9F9F9;
}
.work_process-wrapper {
gap: 24px;
}
.work_process-content {
display: flex;
justify-content: center;
}
.work_process-cards {
flex-direction: column;
align-items: center;
width: fit-content;
}
.work_process-card {
width: 250px;
height: 160px;
}
.work_process-card-content {
width: 194px;
height: 128px;
flex-shrink: 0;
}
.work_process-card-step-text {
font-size: 14px;
}
.work_process-card-step {
right: 30px;
}
.work_process-card-arrow {
width: 112px;
height: 160px;
flex-shrink: 0;
right: -16px;
}
.work_process-card-arrow svg {
width: 112px;
height: 160px;
flex-shrink: 0;
}
.work_process-card {
min-width: 200px;
}
.work_process-card-icon {
width: 40px;
height: 40px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Concept Solution Section */
/* ----------------------------------------------------------------------------------------- */
.section-container {
padding: 100px 240px;
background: #fff;
max-width: 1920px;
margin: 0 auto;
}
.solution-content {
display: flex;
gap: 56px;
}
.left-section {
position: relative;
width: 705px;
height: 485px;
}
.image-container {
position: absolute;
left: 119px;
width: 485px;
height: 485px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature-card {
position: absolute;
background: #fff;
padding: 17px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.feature-card:hover {
background-color: #EF3F23;
}
.feature-card:hover .icon-wrapper svg path {
fill: white;
}
.feature-card:hover .feature-card-text {
color: white;
}
.feature-card.security {
top: 129px;
left: 0;
width: 215px;
}
.feature-card.deployment {
bottom: 30px;
right: 0;
width: 160px;
}
.icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.icon-wrapper svg path {
transition: fill 0.2s ease;
}
.feature-card-text {
color: #000;
text-align: center;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 22.466px */
letter-spacing: -0.107px;
transition: color 0.2s ease;
}
.feature-card h3 {
font-size: 16px;
color: #000;
margin: 0;
text-align: center;
}
.right-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 40px;
}
.description {
color: #4F5460;
font-size: 18px;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
margin-top: 24px;
}
.features {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
color: #4F545F;
font-size: 16px;
}
.feature-item-text {
color: var(--text-body, #4F5460);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
}
.feature-item .check-icon {
width: 28px;
height: 28px;
margin-top: 2px;
background: url('data:image/svg+xml,') no-repeat center;
}
.right-section .content-wrapper .company-history-content-item {
background-color: #EF3F23;
margin-top: 40px;
}
.right-section .content-wrapper .company-history-content-item-title {
color: #fff;
}
.concept-solution-section {
padding-bottom: 0 !important;
}
/* ----------------------------------------------------------------------------------------- */
/* Benefit Section */
/* ----------------------------------------------------------------------------------------- */
.benefit-section {
position: relative;
}
.benefit-divider-wrapper {
margin-top: 56px;
position: relative;
z-index: 1;
}
.benefit-title .highlight {
color: #EF3F23;
}
.benefit-divider {
position: relative;
text-align: center;
margin-bottom: -20px;
z-index: 1;
}
.divider-dot {
width: 16px;
height: 16px;
background: #EF3F23;
border-radius: 50%;
box-shadow: 0 0 0 4px #FFE7E2;
}
.divider-line {
width: 320px;
height: 2px;
background: #F2C1B7;
margin: 0 12px;
}
.benefit-options {
display: flex;
gap: 40px;
justify-content: center;
align-items: stretch;
}
.benefit-option {
background: #fff;
border: 1px solid #EFEFEF;
border-radius: 12px;
box-shadow: 0 6px 40px rgba(0, 0, 0, 0.04);
padding: 32px;
width: 100%;
}
.benefit-option-title {
color: var(--neutral-neutral-950, #0E1525);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1px;
text-align: center;
margin-bottom: 24px;
}
.benefit-option-title .highlight {
color: #EF3F23;
}
.benefit-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.benefit-list li {
display: flex;
gap: 10px;
}
.benefit-item {
color: #000;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
}
.check-icon {
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
width: 40px;
height: 40px;
margin-top: -8px;
aspect-ratio: 1/1;
}
.benefit-separate {
margin-top: 12px;
color: var(--text-heading-secondary, #2B313F);
}
.benefit-bg {
width: 100vw;
height: 300px;
/* hoặc chiều cao bạn muốn */
background: linear-gradient(180deg, #FCD9D3 0%, #fff 100%);
position: absolute;
left: 0;
bottom: 0;
z-index: 0;
}
@media (max-width: 1440px) {
.banner-title-gen-ai {
font-size: 36px;
line-height: 150%;
}
.section-container {
padding: 80px 120px;
}
.left-section {
width: 590px;
height: 400px;
}
.image-container {
width: 400px;
height: 400px;
left: 50%;
transform: translateX(-50%) !important;
}
.icon-wrapper svg {
width: 52px;
height: 52px;
}
.feature-card-text {
font-size: 12px;
}
.feature-card {
padding: 10px;
}
.feature-card.security {
top: 76px;
width: 175px;
}
.feature-card.deployment {
width: 140px;
}
.description {
margin-top: 16px;
}
.features {
margin-top: 12px;
}
.feature-list {
gap: 0;
}
.feature-item-text {
font-size: 16px;
}
.right-section .content-wrapper .company-history-content-item {
margin-top: 24px;
}
.benefit-divider-wrapper {
margin-top: 48px;
}
.benefit-option {
padding: 24px;
}
.benefit-option-title {
font-size: 24px;
}
.benefit-list {
gap: 12px;
}
.benefit-item {
font-size: 16px;
}
.check-icon {
width: 32px;
height: 32px;
margin-top: -2px;
}
.benefit-divider {
margin-bottom: -28px;
}
.benefit-divider svg {
width: 620px;
}
.benefit-bg {
height: 200px;
}
}
@media screen and (max-width: 1024px) {
.banner-title-gen-ai {
font-size: 32px;
}
.section-container {
padding: 60px 24px;
}
.left-section {
width: 482px;
height: 324px;
}
.image-container {
width: 324px;
height: 324px;
left: 50%;
transform: translateX(-50%) !important;
}
.icon-wrapper svg {
width: 40px;
height: 40px;
}
.feature-card-text {
font-size: 10px;
}
.feature-card {
padding: 12px 6px;
}
.feature-card.security {
top: 76px;
width: 146px;
}
.feature-card.deployment {
width: 124px;
}
.description {
margin-top: 12px;
font-size: 16px;
}
.features {
margin-top: 8px;
}
.feature-list {
gap: 0;
}
.feature-item-text {
font-size: 16px;
}
.right-section .content-wrapper .company-history-content-item {
margin-top: 16px;
}
.benefit-divider-wrapper {
margin-top: 32px;
}
.benefit-option {
padding: 16px;
}
.benefit-option-title {
font-size: 20px;
margin-bottom: 16px;
}
.benefit-list {
gap: 8px;
}
.benefit-item {
font-size: 16px;
}
.benefit-separate {
font-size: 14px;
}
.check-icon {
width: 24px;
height: 24px;
margin-top: 0;
}
.benefit-divider {
margin-bottom: -32px;
}
.benefit-divider svg {
width: 520px;
}
}
@media (max-width: 768px) {
.banner-title-gen-ai {
font-size: 14px;
letter-spacing: -0.3px;
}
.banner-title-gen-ai.vi {
font-size: 20px;
letter-spacing: -0.2px;
}
.banner-title-gen-ai.vi br {
display: none;
}
.concept-solution-section .title-section-gradient {
width: fit-content;
}
.section-container {
padding: 24px 0;
}
.solution-content {
flex-direction: column;
flex-flow: column-reverse;
gap: 24px;
}
.left-section {
width: 100%;
height: 292px;
}
.image-container {
width: 100%;
height: 100%;
text-align: center;
}
.image-container img {
width: 292px;
height: 292px;
flex-shrink: 0;
}
.icon-wrapper svg {
width: 32px;
height: 32px;
}
.feature-card-text {
font-size: 10px;
}
.feature-card {
padding: 12px 6px;
}
.feature-card.security {
top: 60px;
width: 140px;
}
.feature-card.deployment {
width: 104px;
right: 16px;
}
.description {
font-size: 14px;
margin-top: 16px;
}
.feature-item-text {
font-size: 14px;
}
.feature-item {
gap: 4px;
}
.feature-item .check-icon {
width: 20px;
height: 20px;
}
.right-section .content-wrapper .company-history-content-item {
margin-top: 16px;
}
}
@media (max-width: 768px) {
.section-container {
padding: 24px;
}
.benefit-divider {
display: none;
}
.benefit-divider-wrapper {
margin-top: 16px;
}
.benefit-options {
gap: 16px;
overflow-x: auto;
width: 100%;
justify-content: flex-start;
}
.benefit-option {
padding: 16px;
min-width: 240px;
max-width: 300px;
flex-shrink: 0;
}
.benefit-option-title {
font-size: 20px;
}
.benefit-list {
gap: 12px;
}
.benefit-item {
font-size: 14px;
}
.benefit-list .check-icon {
width: 24px;
height: 24px;
margin-top: 0;
}
.benefit-bg {
height: 200px;
}
}
@media (max-width: 390px) {
.banner-title-gen-ai {
font-size: 13px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Solution Packages Section */
/* ----------------------------------------------------------------------------------------- */
.solution-packages-section {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0 !important;
}
.solution-packages-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 40px;
letter-spacing: -0.5px;
color: #222;
}
.solution-packages-list {
display: flex;
gap: 22px;
justify-content: center;
align-items: stretch;
margin-top: 56px;
}
.solution-package-box {
position: relative;
display: flex;
height: 538px;
padding: 32px;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
border: 1px solid var(--neutral-neutral-300, #DBDCDE);
background: var(--neutral-neutral-0, #FFF);
}
.solution-package-box:hover {
background: radial-gradient(circle at 100% 100%, #fff 0%, #EF3F23 30%);
}
.solution-package-box:hover .package-bg-circle {
display: none;
}
.solution-package-box:hover .package-title,
.solution-package-box:hover .package-desc,
.solution-package-box:hover .package-label,
.solution-package-box:hover .package-desc-package-title,
.solution-package-box:hover .package-desc-package-desc,
.solution-package-box:hover .check-icon-package svg path {
color: #fff;
fill: #fff;
}
.solution-package-box:hover .package-desc li::before {
background-color: #fff;
}
.package-label {
color: var(--text-body, #4F5460);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.032px;
text-align: left;
gap: 23px;
align-self: stretch;
padding-bottom: 24px;
border-bottom: 1px solid var(--neutral-neutral-400, #C3C5C9);
}
.package-title {
color: var(--neutral-neutral-950, #0E1525);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1px;
margin-top: 24px;
margin-bottom: 18px;
}
.package-desc {
color: var(--text-placeholder, #93969D);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.1px;
list-style: inside;
}
.package-desc li {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
position: relative;
}
.package-desc li::before {
content: '';
display: inline-block;
background: #93969D;
width: 4px;
height: 4px;
border-radius: 50%;
margin-top: 7px;
flex-shrink: 0;
}
.package-desc .check-icon {
width: 20px;
height: 20px;
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
margin-right: 8px;
vertical-align: middle;
}
.package-bg-circle {
position: absolute;
right: -2px;
bottom: -8px;
z-index: 0;
}
.package-desc-package-item {
display: flex;
gap: 10px;
margin-top: 24px;
}
.check-icon-package {
margin-top: 4px;
}
.package-desc-package-title {
color: var(--neutral-neutral-950, #0E1525);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.032px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
cursor: pointer;
}
.package-desc-package-desc {
color: var(--text-body, #4F5460);
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.1px;
}
@media (max-width: 1440px) {
.solution-packages-list {
margin-top: 48px;
gap: 16px;
}
.solution-package-box {
height: 480px;
padding: 24px;
}
.package-label {
font-size: 14px;
padding-bottom: 20px;
}
.package-desc-package-item {
margin-top: 12px;
}
.package-title.japanese {
font-size: 22px;
margin-bottom: 14px;
margin-top: 16px;
}
.package-desc-package-title {
font-size: 14px;
}
.package-desc-package-desc {
font-size: 12px;
}
}
@media (max-width: 1024px) {
.solution-packages-list {
margin-top: 32px;
}
.solution-package-box {
height: 400px;
padding: 16px;
}
.package-label {
font-size: 12px;
padding-bottom: 16px;
}
.package-desc-package-item {
gap: 8px;
}
.package-title.japanese {
font-size: 18px;
}
.package-bg-circle svg {
width: 200px;
height: 100%;
}
}
@media (max-width:768px) {
.solution-packages-section .solution-expert-badge {
margin-bottom: 16px;
}
.package-label {
font-size: 14px;
padding-bottom: 16px;
}
.package-title {
font-size: 24px;
margin-top: 16px;
margin-bottom: 8px;
}
.package-desc {
font-size: 12px;
}
.package-desc-package-title {
font-size: 14px;
}
.package-desc-package-desc {
font-size: 12px;
padding-left: 0.5em;
}
/* Start of Selection */
.solution-packages-list {
margin-top: 24px;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
justify-content: flex-start;
}
.solution-package-box {
padding: 16px;
min-width: 300px;
min-height: 400px;
height: auto;
flex-shrink: 0;
}
.package-bg-circle svg {
width: 200px;
height: 100%;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Benefit Enterprise Section */
/* ----------------------------------------------------------------------------------------- */
.benefit-enterprise-section {
text-align: center;
padding-top: 0;
}
.benefit-enterprise-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 36px;
color: #222;
letter-spacing: -0.5px;
}
.benefit-enterprise-title .highlight {
color: #F04126;
}
.benefit-enterprise-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-top: 56px;
}
.benefit-enterprise-item {
width: 460px;
height: 160px;
background: #fff;
border: 1px solid #DBDCDE;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
display: flex;
align-items: flex-start;
transition: box-shadow 0.2s;
padding: 24px;
gap: 24px;
border: 1px solid var(--border-border-secondary, #DBDCDE);
}
.benefit-row {
display: flex;
gap: 32px;
justify-content: center;
}
.benefit-row-bottom {
width: 66%;
/* hoặc 60% tùy ý, để 2 box dưới nằm giữa 3 box trên */
margin: 0 auto;
justify-content: space-between;
}
.benefit-enterprise-item:hover {
box-shadow: 0 6px 32px rgba(240, 65, 38, 0.10);
border-color: #F04126;
}
.benefit-enterprise-icon {
width: 64px;
height: 64px;
padding: 16.31px 16px 15.69px 16px;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
background: var(--orange-orange-50, #FFF6F5);
}
.benefit-enterprise-item-title {
color: var(--text-heading-secondary, #2B313F);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -0.5px;
align-self: stretch;
text-align: left;
}
.benefit-enterprise-item.vi {
height: 150px;
}
.benefit-enterprise-item.vi .benefit-enterprise-item-title {
font-size: 20px;
}
.benefit-enterprise-item-desc {
overflow: hidden;
color: var(--text-body, #4F5460);
text-overflow: ellipsis;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
text-align: left;
}
@media (max-width: 1440px) {
.benefit-enterprise-list {
margin-top: 48px;
gap: 16px;
}
.benefit-row {
gap: 16px;
}
.benefit-enterprise-list .benefit-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.benefit-enterprise-list .benefit-row-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 70%;
}
.benefit-enterprise-item {
width: 100%;
height: 144px;
padding: 24px;
gap: 24px;
}
.benefit-enterprise-icon {
width: 48px;
height: 48px;
padding: 8px;
}
.benefit-enterprise-item-title {
font-size: 20px;
}
.benefit-enterprise-item.vi {
padding: 24px 20px;
gap: 18px;
height: 132px;
}
.benefit-enterprise-item.vi .benefit-enterprise-item-title {
font-size: 18px;
}
.benefit-enterprise-item-desc {
font-size: 16px;
}
}
@media (max-width: 1024px) {
.benefit-enterprise-list {
margin-top: 32px;
}
.benefit-enterprise-list .benefit-row-bottom {
width: 100%;
}
.benefit-enterprise-item {
width: 100%;
height: 120px;
padding: 16px;
gap: 16px;
}
.benefit-enterprise-icon {
width: 32px;
height: 32px;
padding: 6px;
}
.benefit-enterprise-icon svg {
width: 20px;
height: 20px;
}
.benefit-enterprise-item-title {
font-size: 16px;
}
.benefit-enterprise-item.vi {
height: 120px;
padding: 16px;
gap: 16px;
}
.benefit-enterprise-item.vi .benefit-enterprise-item-title {
font-size: 16px;
}
.benefit-enterprise-item-desc {
font-size: 14px;
}
}
@media (max-width: 768px) {
.benefit-enterprise-list {
margin-top: 24px;
}
.benefit-enterprise-item {
min-width: unset;
width: 100%;
padding: 16px;
height: fit-content;
gap: 12px;
}
.benefit-enterprise-list .benefit-row,
.benefit-enterprise-list .benefit-row-bottom {
gap: 14px;
display: grid;
grid-template-columns: repeat(1, 1fr);
width: 100%;
}
.benefit-enterprise-icon {
width: 36px;
height: 36px;
padding: 9.174px 9px 8.826px 9px;
}
.benefit-enterprise-icon svg {
width: 18px;
height: 18px;
}
.benefit-enterprise-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.benefit-enterprise-item-title {
font-size: 16px;
}
.benefit-enterprise-item.vi {
padding: 16px;
height: fit-content;
gap: 12px;
}
.benefit-enterprise-item-desc {
font-size: 16px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Roadmap Section */
/* ----------------------------------------------------------------------------------------- */
.roadmap-section {
position: relative;
overflow: visible;
padding-top: 0 !important;
}
.roadmap-bg-after {
position: absolute;
left: -5%;
bottom: -5%;
}
.roadmap-container {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 48px;
position: relative;
}
.roadmap-left {
flex: 1 1 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: sticky;
top: 0;
z-index: 10;
}
.roadmap-left .title-section-gradient {
text-align: left;
margin-bottom: 56px;
}
.roadmap-mascot-wrapper {
position: relative;
display: inline-block;
width: 580px;
height: 580px;
}
.roadmap-mascot,
.roadmap-mascot-after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.roadmap-mascot-after {
background: rgba(239, 63, 35, 0.04);
border-radius: 50%;
z-index: 1;
}
.roadmap-mascot-after img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
.roadmap-mascot-after img:nth-child(2) {
animation: mascot-bounce 1.6s ease-in-out infinite;
animation-delay: 0.3s;
}
.roadmap-mascot-after img:nth-child(3) {
animation: mascot-bounce 1.6s ease-in-out infinite;
animation-delay: 0.6s;
}
.roadmap-mascot {
z-index: 2;
animation: mascot-bounce 1.6s ease-in-out infinite;
}
@keyframes mascot-bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-10px);
}
40% {
transform: translateY(0);
}
60% {
transform: translateY(-5px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.roadmap-mascot img,
.roadmap-mascot-after img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1/1;
object-fit: contain;
}
.roadmap-right {
flex: 1 1 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.roadmap-steps {
width: 100%;
display: flex;
flex-direction: column;
visibility: visible !important;
opacity: 1 !important;
}
.roadmap-step {
display: flex;
gap: 16px;
width: 100%;
opacity: 1 !important;
position: relative;
}
.roadmap-step-group {
position: absolute;
top: -15%;
left: -6%;
}
.roadmap-step-group img {
width: 100%;
height: 100%;
}
.roadmap-step-icon {
display: flex;
flex-direction: column;
align-items: center;
}
.roadmap-step-icon-wrapper {
padding: 20px;
background-color: #FFF6F5;
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-step-icon svg {
width: 40px;
height: 40px;
border-radius: 2px;
}
.roadmap-step-line {
width: 2px;
height: 100px;
background-color: #EF3F23;
}
.roadmap-step-content {
display: flex;
padding-bottom: 40px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
flex: 1 0 0;
align-self: stretch;
}
.roadmap-step-label {
color: var(--neutral-neutral-500, #93969D);
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.5px;
align-self: stretch;
}
.roadmap-step-title {
color: var(--text-heading-secondary, #2B313F);
font-family: "Noto Sans";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -1px;
align-self: stretch;
}
.roadmap-mascot-circle.mobile {
display: none;
}
.roadmap-mascot-circle {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 12px;
}
.roadmap-mascot-circle svg {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.roadmap-mascot-circle-text {
color: var(--text-heading-secondary, #2B313F);
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -1px;
flex: 1 0 0;
}
@media (max-width: 1440px) {
.roadmap-container {
gap: 20px;
}
.roadmap-left .title-section-gradient {
margin-bottom: 48px;
}
.roadmap-mascot-wrapper {
width: 435px;
height: 435px;
aspect-ratio: 1/1;
}
.roadmap-step-label {
font-size: 20px;
}
.roadmap-step-title {
font-size: 24px;
}
.roadmap-bg-after {
width: 400px;
}
.roadmap-step-line {
height: 68px;
}
.roadmap-step-group {
left: -5%;
}
.roadmap-mascot-circle svg {
width: 72px;
height: 72px;
}
.roadmap-mascot-circle-text {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.roadmap-step-icon-wrapper {
padding: 12px;
}
.roadmap-step-icon svg {
width: 30px;
height: 30px;
}
.roadmap-step-line {
height: 52px;
}
.roadmap-step-group {
height: 552px;
left: -4%;
}
.roadmap-mascot-circle {
gap: 16px;
}
.roadmap-mascot-circle svg {
width: 64px;
height: 64px;
}
.roadmap-mascot-circle-text {
font-size: 20px;
}
}
@media (max-width: 768px) {
.roadmap-container {
flex-direction: column;
}
.roadmap-left {
position: relative;
}
.roadmap-mascot-wrapper {
width: 342px;
height: 342px;
}
.roadmap-step-group {
height: 415px;
width: 93vw;
left: -3%;
right: 0;
}
.roadmap-step-content {
padding-bottom: 24px;
}
.roadmap-step-label {
font-size: 16px;
}
.roadmap-step-title {
font-size: 16px;
}
.roadmap-mascot-circle.desktop {
display: none;
}
.roadmap-mascot-circle.mobile {
display: flex;
gap: 12px;
margin-top: 8px;
}
.roadmap-mascot-circle svg {
width: 44px;
height: 44px;
}
.roadmap-mascot-circle-text {
font-size: 16px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Feedback Section */
/* ----------------------------------------------------------------------------------------- */
.feedback-section {
background: linear-gradient(90deg, var(--orange-orange-500, #EF3F23) 0%, var(--orange-orange-700, #8F2615) 100%);
display: flex;
max-width: 1920px;
padding: 0px 240px;
align-items: center;
gap: 32px;
}
.feedback-container {
border-radius: 12px;
overflow: hidden;
position: relative;
}
.feedback-content {
display: flex;
align-items: center;
position: relative;
gap: 32px;
}
.feedback-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 40px;
flex: 1 0 0;
align-self: stretch;
}
.feedback-left-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
align-self: stretch;
}
.feedback-title {
color: white;
font-family: "Noto Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -1px;
text-transform: uppercase;
background: linear-gradient(89deg, var(--text-heading-inverted, #FFF) 68.52%, var(--orange-orange-200, #F9B2A7) 98.2%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.feedback-benefits {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.feedback-benefit-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.feedback-problem-content p {
color: var(--neutral-neutral-100, #F7F7F7);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
margin-bottom: 0;
}
.feedback-problem-content p strong {
font-weight: 700;
}
.benefit-icon {
background-color: #fff;
margin-top: 6px;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.feedback-card {
display: flex;
padding: 28px 32px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
background: rgba(255, 255, 255, 0.40);
box-shadow: 0px 4px 74px 0px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(6.550000190734863px);
}
.feedback-card.mobile {
display: none;
}
.feedback-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.feedback-item-infor {
display: flex;
align-items: center;
gap: 12px;
}
.feedback-avatar {
width: 56px;
height: 56px;
aspect-ratio: 1/1;
border-radius: 56px;
background-color: purple;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-info {
flex: 1;
}
.feedback-name {
color: var(--neutral-neutral-0, #FFF);
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -0.2px;
}
.feedback-position {
color: var(--neutral-neutral-50, #F9F9F9);
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.032px;
}
.feedback-nav {
display: flex;
gap: 8px;
}
.feedback-nav-btn-mobile {
display: none;
}
.feedback-nav-btn {
display: flex;
padding: 11px 10px;
justify-content: center;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
border: 1px solid var(--neutral-neutral-0, #FFF);
}
.feedback-nav-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.feedback-divider {
width: 100%;
height: 1px;
background: var(--neutral-neutral-400, #C3C5C9);
}
.feedback-quote {
color: var(--neutral-neutral-0, #FFF);
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.5px;
transition: all 0.3s ease;
}
.feedback-right {
height: 800px;
flex: 1 0 0;
flex-shrink: 0;
position: relative;
}
.feedback-image-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 704px;
height: 704px;
flex-shrink: 0;
border-radius: 704px;
background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 87.5%);
}
.feedback-image {
width: 703px;
height: 700px;
flex-shrink: 0;
aspect-ratio: 703/700;
position: relative;
}
.feedback-image img {
width: 202.579%;
height: 135.616%;
object-fit: cover;
object-position: center;
}
/* Bottom Section - Dark Background */
.contact-us-section {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url('/wp-content/uploads/2025/06/contact-us.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 40px;
text-align: center;
position: relative;
}
.feedback-cta {
position: relative;
z-index: 1;
}
.cta-title {
color: #FFF;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: -1px;
}
.cta-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
background: #E53E3E;
color: white;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #C53030;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
}
@media (max-width: 1440px) {
.feedback-section {
padding: 0px 120px;
}
.feedback-content {
gap: 20px;
}
.feedback-left {
gap: 32px;
}
.feedback-left-top {
gap: 20px;
}
.feedback-title {
font-size: 32px;
}
.feedback-problem-content p {
font-size: 16px;
}
.feedback-name {
font-size: 16px;
}
.feedback-position {
font-size: 14px;
}
.feedback-quote {
font-size: 20px;
}
.feedback-card.desktop {
padding: 24px;
}
.feedback-nav-btn {
padding: 8px;
}
.feedback-right {
height: 640px;
}
.feedback-image-bg {
width: 100%;
height: 100%;
background: radial-gradient(51% 43% at 50% 51%, #FFF 0%, rgba(255, 255, 255, 0.00) 89.5%);
}
.feedback-image {
width: 100%;
height: 100%;
}
.feedback-image img {
width: 100%;
height: 118%;
}
}
@media (max-width: 1024px) {
.feedback-section {
padding: 0px 24px;
}
.feedback-content {
gap: 12px;
}
.feedback-left {
gap: 24px;
}
.feedback-left-top {
gap: 12px;
}
.feedback-title {
font-size: 24px;
}
.feedback-problem-content p {
font-size: 16px;
}
.feedback-name {
font-size: 14px;
}
.feedback-position {
font-size: 12px;
}
.feedback-quote {
font-size: 18px;
}
.feedback-card.desktop {
padding: 16px;
}
.feedback-nav-btn {
padding: 6px;
}
.feedback-nav-btn svg {
width: 20px;
height: 20px;
}
.feedback-right {
height: 520px;
}
.feedback-image img {
width: 100%;
height: 120%;
}
}
@media (max-width: 768px) {
.feedback-section {
padding: 0;
margin-bottom: 0;
}
.feedback-container {
padding: 24px;
}
.feedback-content {
flex-direction: column;
gap: 40px;
overflow: hidden;
}
.feedback-right {
width: 100%;
min-height: 400px;
}
.feedback-image-bg {
width: 425.069px;
height: 422.954px;
z-index: 0;
background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 87.5%);
}
.feedback-image {
width: 425.069px;
height: 422.954px;
flex-shrink: 0;
aspect-ratio: 425.07/422.95;
}
.feedback-image img {
width: 202.579%;
height: 135.616%;
object-fit: cover;
}
.benefit-icon {
width: 12px;
height: 12px;
}
.feedback-title {
font-size: 20px;
}
.feedback-problem-content p {
font-size: 14px;
}
.feedback-name {
font-size: 14px;
}
.feedback-position {
font-size: 10px;
}
.feedback-quote {
font-size: 12px;
}
.feedback-card.desktop {
display: none;
}
.feedback-card.mobile {
display: block;
position: absolute;
bottom: 0;
padding: 16px;
}
.feedback-nav-btn-mobile {
position: absolute;
display: flex;
padding: 11px 10px;
justify-content: center;
align-items: center;
padding: 8px;
z-index: 2;
border-color: #fff;
}
.feedback-nav-btn-mobile.prev {
top: 40%;
left: 0;
transform: translateY(-50%);
}
.feedback-nav-btn-mobile.next {
top: 40%;
right: 0;
transform: translateY(-50%);
}
}
/* ----------------------------------------------------------------------------------------- */
/* User Interview Section */
/* ----------------------------------------------------------------------------------------- */
.user-banner {
border-bottom: 1px solid var(--orange-orange-500, #EF3F23);
background: url("/wp-content/uploads/2025/06/user-interview-banner.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-banner {
color: var(--neutral-neutral-950, #0E1525);
}
.user-interview-detail-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
background: var(--orange-orange-50, #FFF6F5);
}
.user-interview-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
margin-bottom: 32px;
}
.user-interview-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px;
transition: all 0.3s ease;
}
.user-interview-item:hover {
transform: translateY(-10px);
}
.user-interview-thumb {
position: relative;
display: flex;
height: 255px;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-self: stretch;
}
.user-interview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-interview-tag {
display: flex;
padding: 4px 8px;
align-items: center;
gap: 8px;
position: absolute;
left: 16px;
top: 16px;
border-radius: 6px;
background: var(--neutral-neutral-700, #4F5460);
backdrop-filter: blur(7.349999904632568px);
color: var(--neutral-neutral-0, #FFF);
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 24px */
letter-spacing: -0.032px;
}
.user-interview-content {
display: flex;
padding: 32px 16px 16px 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
background: #FFF;
}
.user-interview-content .group-tag {
display: flex;
gap: 6px;
}
.user-interview-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
align-self: stretch;
overflow: hidden;
color: var(--neutral-neutral-950, #0E1525);
text-overflow: ellipsis;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -0.2px;
}
.user-interview-company * {
color: var(--neutral-neutral-700, #4F5460) !important;
font-size: 14px !important;
font-style: normal;
font-weight: 500;
line-height: 150% !important;
letter-spacing: -0.1px;
margin: 0;
}
/* Ẩn các link, video và các element không mong muốn trong user-interview-company */
.user-interview-company a,
.user-interview-company iframe,
.user-interview-company video,
.user-interview-company embed,
.user-interview-company object,
.user-interview-company .wp-block-embed,
.user-interview-company .wp-block-video,
.user-interview-company .wp-block-embed-youtube,
.user-interview-company .wp-block-embed-vimeo {
display: none !important;
}
/* Đảm bảo chỉ hiển thị text thuần túy */
.user-interview-company {
text-decoration: none !important;
}
.user-interview-company p {
margin: 0 !important;
padding: 0 !important;
}
.user-interview-company {
align-self: stretch;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: var(--neutral-neutral-700, #4F5460) !important;
font-size: 14px !important;
font-style: normal;
font-weight: 500;
line-height: 150% !important;
letter-spacing: -0.1px;
margin: 0;
}
.user-interview-link {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
border-radius: 6px;
color: var(--orange-orange-500, #EF3F23);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.032px;
text-decoration: none !important;
}
.user-interview-pagination {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 60px;
margin-top: 16px;
}
.user-interview-pagination .member-slider-dots {
display: flex;
gap: 20px
}
@media (max-width: 1440px) {
.user-interview-list {
gap: 32px;
}
.user-interview-thumb {
height: 212px;
}
}
@media (max-width: 1024px) {
.user-interview-list {
gap: 24px;
}
.user-interview-thumb {
height: 175px;
}
.user-interview-content {
padding: 20px 8px 12px 8px;
gap: 12px;
}
.user-interview-title {
font-size: 16px;
}
.user-interview-company * {
font-size: 12px !important;
}
.user-interview-link {
font-size: 16px;
gap: 2px;
}
.user-interview-link svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 768px) {
.text-banner {
font-size: 20px;
}
.user-interview-list {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 24px;
}
.user-interview-thumb {
height: 205px;
}
.user-interview-content {
gap: 8px;
}
.user-interview-title {
font-size: 16px
}
.user-interview-company {
font-size: 12px;
}
.user-interview-link {
font-size: 14px;
gap: 4px;
}
.user-interview-link svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 400px) {
.user-interview-thumb {
height: 195px;
}
}
/* ----------------------------------------------------------------------------------------- */
/* User Interview Detail Section */
/* ----------------------------------------------------------------------------------------- */
.main-title {
text-align: center;
font-size: 2rem;
font-weight: bold;
margin: 0;
padding: 32px 0 12px 0;
letter-spacing: 1px;
border-bottom: 3px solid #f7f7f7;
}
.section-content {
padding: 32px 40px 0 40px;
}
.subtitle {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 8px;
}
.meta {
color: #888;
font-size: 0.98rem;
margin-bottom: 16px;
}
.summary-list {
margin-bottom: 16px;
padding-left: 18px;
}
.summary-list li {
margin-bottom: 4px;
}
.before-after-wrap {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.before-after {
flex: 1;
background: #fff4f0;
border-radius: 6px;
padding: 12px 16px;
}
.before-after-title {
font-weight: bold;
margin-bottom: 8px;
}
.before-after.before {
background: #f7f7f7;
border-left: 4px solid #222;
}
.before-after.after {
border-left: 4px solid #EF3F23;
}
.answer-block {
margin-bottom: 18px;
}
.answer-label {
font-weight: bold;
margin-bottom: 4px;
}
.answer-img {
width: 100%;
max-width: 700px;
border-radius: 8px;
margin: 18px 0;
display: block;
}
.related-title {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
margin: 48px 0 18px 0;
letter-spacing: 1px;
}
.related-list {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.related-item {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
width: 250px;
margin-bottom: 24px;
overflow: hidden;
}
.related-thumb {
position: relative;
}
.related-thumb img {
width: 100%;
height: 140px;
object-fit: cover;
}
.related-tag {
position: absolute;
top: 8px;
left: 8px;
background: #222;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
}
.related-content {
padding: 14px;
}
.related-title2 {
font-weight: bold;
font-size: 15px;
margin-bottom: 6px;
}
.related-company {
font-size: 13px;
color: #888;
margin-bottom: 10px;
}
.related-link {
color: #ef3f23;
font-weight: 500;
text-decoration: none;
}
.back-link {
display: inline-block;
margin-top: 32px;
color: #ef3f23;
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}
.divider {
border: none;
border-top: 1px dashed #bbb;
margin: 24px 0 18px 0;
}
@media (max-width: 768px) {
.container {
padding: 0;
}
.section-content {
padding: 24px 8px 0 8px;
}
.before-after-wrap {
flex-direction: column;
gap: 0;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Events Section */
/* ----------------------------------------------------------------------------------------- */
/* --- WEBINAR INCOMING CARD --- */
.events-incoming-bg-after {
position: absolute;
top: 0;
left: 15%;
object-fit: cover;
transform: rotate(269deg);
/* Thêm thuộc tính transform để xoay ảnh */
}
.events-incoming-title {
margin-bottom: 56px;
}
.webinar-incoming-card {
background-size: cover;
background-position: center;
position: relative;
height: 675px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.webinar-incoming-date {
position: absolute;
top: 56px;
left: 64px;
background: #EF3F23;
color: #fff;
padding: 6px 16px;
border-radius: 4px;
font-size: 20px;
font-weight: 500;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
}
.webinar-incoming-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.8) 100%);
z-index: 1;
}
.webinar-incoming-content {
position: relative;
z-index: 2;
padding: 56px 54px;
color: #fff;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.webinar-incoming-tag {
border-radius: 6px;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(2px);
display: flex;
padding: 4px 8px;
align-items: center;
gap: 10px;
}
.webinar-incoming-title {
overflow: hidden;
color: var(--neutral-neutral-0, #FFF);
text-overflow: ellipsis;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-transform: uppercase;
}
.webinar-incoming-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
overflow: hidden;
color: var(--neutral-neutral-300, #DBDCDE);
text-overflow: ellipsis;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.2px;
}
.webinar-incoming-btn {
color: #EF3F23;
background: #fff;
font-weight: 700;
text-decoration: none !important;
font-size: 20px;
transition: background 0.2s, color 0.2s;
display: flex;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
}
.webinar-incoming-btn:hover {
background: #EF3F23;
color: #fff;
}
.webinar-incoming-btn svg path {
transition: fill 0.2s;
}
.webinar-incoming-btn:hover svg path {
fill: #fff;
}
.events-item {
gap: 12px;
padding: 24px 20px 20px 20px;
}
.events-item .user-interview-tag {
position: relative;
top: 0;
left: 0;
border-radius: 6px;
background: var(--neutral-neutral-200, #EFEFEF);
backdrop-filter: blur(7.349999904632568px);
color: var(--neutral-neutral-700, #4F5460);
font-size: 14px;
}
.events-item .tag-webinar-language {
background-color: #EF3F23;
color: #fff;
}
.events-item .user-interview-company {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
text-overflow: ellipsis;
overflow: hidden;
}
.events-replay-search {
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 32px 0 rgba(0, 0, 0, 0.07);
padding: 30px;
margin: 56px 0;
}
.events-search-form {
width: 100%;
}
.events-search-row {
display: flex;
gap: 40px;
align-items: center;
}
.events-search-col {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.events-search-line {
width: 1px;
align-self: stretch;
background: #DBDCDE;
}
.events-search-btn-col {
width: 120px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
margin-left: 20px;
}
.events-search-form label {
color: var(--text-body, #4F5460);
font-size: 16px;
font-style: normal;
font-weight: 500;
}
.events-search-select-wrap {
background: #fafbfc;
border-radius: 4px;
border: 1px solid #f2f2f2;
position: relative;
overflow: hidden;
}
.events-search-select-wrap select {
width: 100%;
padding: 14px 16px;
border: none;
background: #F9F9F9;
font-size: 18px;
color: #93969D;
appearance: none;
-webkit-appearance: none;
outline: none;
font-family: inherit;
cursor: pointer;
}
.events-search-select-wrap select:focus {
background: #f5f5f5;
outline: 2px solid #EF3F23;
}
.events-search-select-wrap select option:checked {
color: #EF3F23;
}
.events-search-select-wrap::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 10px;
height: 10px;
pointer-events: none;
border-right: 2px solid #888;
border-bottom: 2px solid #888;
transform: translateY(-60%) rotate(45deg);
}
.events-search-btn {
background: #EF3F23;
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
box-shadow: 0 2px 8px rgba(239, 63, 35, 0.08);
}
.events-search-btn:hover {
background: #d32c0f;
}
.subscribe-input input {
width: 500px;
height: 100%;
padding: 12px 16px;
margin-bottom: 24px;
outline: none;
border: none;
}
.subscribe-btn {
padding: 10px 32px 10px 24px;
}
@media (max-width: 1440px) {
.events-incoming-title {
margin-bottom: 48px;
}
.webinar-incoming-card {
height: 600px;
}
.webinar-incoming-content {
padding: 36px 48px;
gap: 16px;
}
.webinar-incoming-date {
top: 36px;
left: 48px;
}
.webinar-incoming-title {
font-size: 24px;
}
.webinar-incoming-desc {
font-size: 18px;
}
.webinar-incoming-date {
font-size: 18px;
padding: 4px 12px;
}
.webinar-incoming-btn {
font-size: 18px;
padding: 12px 16px;
}
.events-replay-search {
margin: 48px 0;
}
.events-search-select-wrap select {
padding: 12px 16px;
}
}
@media (max-width: 1024px) {
.events-incoming-title {
margin-bottom: 32px;
}
.webinar-incoming-card {
height: 549px;
}
.webinar-incoming-content {
padding: 32px;
gap: 16px;
}
.webinar-incoming-date {
top: 32px;
left: 32px;
}
.events-replay-search {
margin: 32px 0;
}
.subscribe-input input {
width: 400px;
padding: 8px 12px;
margin-bottom: 12px;
}
}
@media (max-width: 768px) {
.events-incoming-section {
padding-left: 0;
padding-right: 0;
}
.events-incoming-title {
margin-bottom: 24px;
}
.webinar-incoming-overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.events-incoming-bg-after {
display: none;
}
.webinar-incoming-card {
height: 220px;
}
.webinar-incoming-content {
padding: 16px 24px;
gap: 8px;
}
.webinar-incoming-tag {
padding: 4px 8px;
font-size: 12px;
}
.webinar-incoming-title {
font-size: 16px;
}
.webinar-incoming-desc {
font-size: 13px;
}
.webinar-incoming-date {
top: 16px;
left: 24px;
font-size: 12px;
padding: 4px 8px;
gap: 8px;
}
.webinar-incoming-btn {
padding: 8px 12px;
gap: 4px;
font-size: 14px;
height: 40px;
}
.events-replay-search {
padding: 24px 16px;
margin: 24px 0;
}
.events-search-row {
flex-direction: column;
gap: 16px;
}
.events-search-btn-col {
width: 100%;
align-items: flex-start;
}
.events-search-btn {
font-size: 16px;
padding: 8px 28px;
}
.events-search-select-wrap select {
padding: 12px 16px;
}
.subscribe-input input {
width: 100%;
height: 100%;
padding: 12px 16px;
margin-bottom: 12px;
font-size: 12px;
}
.subscribe-btn {
padding: 8px 24px 8px 20px;
}
}
/* user-interview-single */
.user-interview-single-container {
width: 100%;
gap: 56px;
align-self: stretch;
padding-top: 60px;
}
.user-interview-single-container h1 {
align-self: stretch;
color: var(--text-heading-primary, #0E1525);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 48px */
letter-spacing: -1px;
margin: 0;
}
.user-interview-single-container .date-time-single {
color: var(--text-body, #4F5460);
font-family: "Noto Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 27px */
letter-spacing: -0.2px;
}
@media (max-width: 1440px) {
.user-interview-single-container {
padding-top: 48px;
}
}
@media (max-width: 1024px) {
.user-interview-single-container {
padding-top: 32px;
}
}
@media (max-width: 768px) {
.user-interview-single-container {
padding-top: 24px;
}
.user-interview-detail-section {
margin: 40px 0;
gap: 24px;
}
.user-interview-detail-section .title-section-gradient {
font-size: 24px !important;
}
.user-interview-single-container {
padding: 24px 16px;
gap: 24px;
}
.user-interview-single-container h1 {
font-size: 20px;
}
.user-interview-single-container .date-time-single {
font-size: 16px;
}
.events-subscribe-title {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.4;
max-width: 270px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Sustainable Section */
/* ----------------------------------------------------------------------------------------- */
.video-section {
width: 100%;
height: 810px;
position: relative;
overflow: hidden;
}
.video-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.video-background {
position: relative;
display: flex;
height: 675px;
align-items: flex-end;
gap: 10px;
align-self: stretch;
aspect-ratio: 16/9;
}
.bg-image {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
}
lite-youtube::before {
display: none !important;
}
lite-youtube.lyt-activated .gradient-overlay,
lite-youtube.lyt-activated .video-content {
display: none;
}
.gradient-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.90) 92.1%);
z-index: 0;
}
.video-content {
position: absolute;
bottom: 32px;
left: 68px;
z-index: 3;
width: 100%;
}
.video-title {
color: var(--neutral-neutral-950, #0E1525);
font-size: 42px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -2px;
text-transform: uppercase;
border-bottom: 1px solid var(--neutral-neutral-800, #323846);
width: fit-content;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
cursor: pointer;
transition: transform 0.3s ease;
}
.play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
}
/* Responsive Design */
@media (max-width: 1440px) {
.video-section {
height: 635px;
}
.video-title {
font-size: 32px;
}
}
@media (max-width: 1024px) {
.video-background {
height: 576px;
}
.video-section {
padding-left: 0;
padding-right: 0;
}
.video-title {
font-size: 20px;
}
.video-description {
font-size: 16px;
}
.video-content {
bottom: 25px;
left: 5%;
}
}
@media (max-width: 768px) {
.video-section {
height: 220px;
padding-left: 0;
padding-right: 0;
}
.play-button svg {
width: 40px;
height: 40px;
}
.video-content {
bottom: 16px;
left: 24px;
}
.video-title {
font-size: 14px;
letter-spacing: 0;
}
.video-description {
font-size: 14px;
}
.arrow-down {
display: none;
}
}
/* ----------------------------------------------------------------------------------------- */
/* Customer Section */
/* ----------------------------------------------------------------------------------------- */
.customer-happiness-section {
width: 100%;
background: #fff;
}
.customer-happiness-container {
display: flex;
gap: 32px;
align-items: flex-start;
}
#employee-section {
background: var(--orange-orange-50, #FFF6F5);
}
/* Left Column - Image */
.customer-image-column {
display: flex;
flex-direction: column;
flex: 1 0 0;
align-self: stretch;
}
.customer-image-column.left,
.customer-content-column.right {
height: 704px;
align-items: center;
}
.customer-content-column.right {
justify-content: center;
align-items: flex-start;
}
.customer-main-image {
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
box-shadow: 0 4px 35px rgba(0, 0, 0, 0.16);
}
.main-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
/* Right Column - Content */
.customer-content-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 56px;
}
/* Title Section */
.customer-title-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.customer-title {
font-size: 48px;
font-weight: 700;
background: linear-gradient(135deg, #0E1525 0%, #EF3F23 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin: 0;
max-width: 591px;
}
.customer-description {
color: var(--neutral-neutral-600, #626771);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.2px;
}
.customer-description .highlight {
color: #EF3F23;
}
/* Quote Section */
.customer-quote-section {
display: flex;
padding: 16px 24px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
background: var(--orange-orange-500, #EF3F23);
}
.quote-content {
display: flex;
align-items: center;
gap: 149px;
width: 100%;
position: relative;
}
.quote-text {
color: var(--text-heading-inverted, #FFF);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.quote-mark {
width: 45px;
height: 43px;
position: absolute;
right: 0;
bottom: -24px;
}
/* Customer Images Section */
.customer-images-section {
display: flex;
align-items: center;
gap: 16px;
}
.customer-images-grid {
display: flex;
/* gap: 16px; */
flex: 1;
}
.customer-image-item {
width: 140px;
height: 140px;
border-radius: 0;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.customer-image-item.featured {
transform: scale(1.17);
/* 140/120 = 1.17 */
box-shadow: 0px 3.824px 8.393px 0px rgba(0, 0, 0, 0.40);
z-index: 2;
position: relative;
margin: 0 10px;
}
.customer-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navigation Controls */
.customer-navigation {
display: flex;
flex-direction: column;
gap: 16px;
}
.nav-button {
padding: 11px 10px;
border: 1px solid #EF3F23;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-button:hover {
background: #EF3F23 !important;
}
.nav-button:hover svg path {
stroke: white;
}
.main-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.customer-images-section {
display: flex;
align-items: center;
gap: 16px;
}
.customer-images-grid {
display: flex;
gap: 16px;
align-items: center;
flex: 1 0 0;
}
.customer-image-item:hover {
transform: scale(1.05);
}
.customer-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navigation Controls */
.customer-navigation {
display: flex;
gap: 8px;
}
.nav-button {
width: 48px;
height: 48px;
border: 1px solid #EF3F23;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-button:hover {
background: #EF3F23;
}
.nav-button:hover svg path {
stroke: white;
fill: white;
}
/* News Section Styles */
.customer-news {
width: 100%;
margin-top: 100px;
}
.news-container {
max-width: 1440px;
margin: 0 auto;
position: relative;
}
.news-carousel {
display: flex;
gap: 24px;
overflow: hidden;
max-width: calc(3 * (100% / 3) + 2 * 24px);
/* Giới hạn chỉ hiển thị 3 bài viết + 2 gap */
margin: 0 auto;
}
.news-article {
flex: 0 0 calc((100% - 48px) / 3);
/* Mỗi bài viết chiếm 1/3 width trừ đi 2 gap */
height: 230px;
position: relative;
border-radius: 0;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
min-width: 0;
/* Cho phép flex item co lại */
}
.news-article:hover {
transform: translateY(-5px);
}
.article-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article-bg {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 37.5%, rgba(10, 15, 26, 0.70) 67.04%, rgba(14, 21, 37, 0.90) 80.91%, var(--neutral-neutral-950, #0E1525) 94.32%);
}
.article-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
z-index: 2;
transition: bottom 0.3s ease;
}
.article-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
overflow: hidden;
color: var(--neutral-neutral-0, #FFF);
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.1px;
}
.article-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
overflow: hidden;
color: var(--neutral-neutral-0, #FFF);
text-overflow: ellipsis;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
letter-spacing: -0.2px;
}
.article-button {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #FCFCFD;
background: transparent;
color: #fff;
text-decoration: none !important;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
width: 100%;
justify-content: space-between;
height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
}
.news-article:hover .article-button {
color: #fff;
height: 48px;
padding: 12px 20px;
opacity: 1;
margin-top: 16px;
}
.article-button:hover {
background: #EF3F23;
border-color: #EF3F23;
}
.article-button span {
flex: 1;
text-align: center;
}
/* News Navigation */
.news-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}
.news-nav.prev {
left: -55px;
}
.news-nav.next {
right: -55px;
}
.news-nav:hover {
opacity: 0.8;
}
.customer-mobile-section {
display: none
}
.customer-title-section.desktop,
.customer-quote-section.desktop,
.news-nav.desktop {
display: flex;
}
.customer-navigation.desktop {
display: flex;
}
.nav-button.mobile {
display: none;
}
#customer-section {
padding-top: 60px !important;
}
.sustainable-nav-tabs {
display: flex;
justify-content: space-between;
gap: 80px;
padding-top: 40px !important;
padding-bottom: 0 !important;
position: sticky;
top: 0;
z-index: 100;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.nav-tab {
color: #6B6B6B;
font-weight: 500;
cursor: pointer;
padding-bottom: 8px;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: 18px;
}
.nav-tab.active {
color: #EF3F23;
border-bottom: 2px solid #EF3F23;
}
.customer-box {
display: flex;
gap: 32px;
width: 100%;
}
@media (max-width: 1440px) {
#customer-section {
padding-top: 40px !important;
}
.sustainable-nav-tabs {
padding-top: 32px !important;
}
.customer-quote-section {
padding: 12px 20px;
}
.quote-text {
font-size: 16px;
}
.customer-title {
font-size: 42px;
}
.customer-happiness-container {
gap: 20px;
}
.customer-image-column.left {
display: flex;
height: 540px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
aspect-ratio: 1/1;
}
.customer-content-column.right {
height: 540px;
}
.customer-content-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 48px;
flex: 1 0 0;
align-self: stretch;
}
.customer-description {
font-size: 18px;
}
.customer-images-grid {
gap: 12px;
}
.customer-image-item {
width: 120px;
height: 120px;
}
/* .customer-image-item.featured {
width: 140px;
height: 140px;
} */
.customer-news {
margin-top: 80px;
}
.article-description {
font-size: 18px;
}
.customer-box {
gap: 20px;
}
}
@media (max-width: 1024px) {
#customer-section {
padding-top: 32px !important;
}
.sustainable-nav-tabs {
padding-top: 24px !important;
}
.nav-tab {
font-size: 16px;
}
.customer-happiness-container {
gap: 12px;
}
.customer-image-column.left,
.customer-content-column.right {
height: 460px;
}
.customer-content-column {
gap: 32px;
}
.customer-description {
font-size: 16px;
}
.customer-image-item {
width: 100px;
height: 100px;
}
/* .customer-image-item.featured {
width: 120px;
height: 120px;
} */
.nav-button {
width: 32px;
height: 32px;
padding: 4px;
}
.customer-news {
margin-top: 60px;
}
.news-article {
height: 156px;
}
.news-carousel {
overflow-x: scroll;
gap: 12px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.news-carousel::-webkit-scrollbar {
display: none;
}
.news-article:hover .article-button {
height: 32px;
padding: 12px;
margin-top: 4px;
font-size: 14px;
}
.news-nav.prev {
left: -24px;
padding: 0;
}
.news-nav.next {
right: -24px;
padding: 0;
}
.news-nav svg {
width: 20px;
height: 20px;
}
.customer-box {
gap: 12px;
}
}
@media (max-width: 768px) {
#customer-section {
padding-top: 24px !important;
}
.customer-happiness-section {
margin: auto;
padding: 24px 24px 48px;
}
.customer-happiness-section .title-section-gradient {
margin: auto;
}
.nav-tab {
font-size: 12px;
}
.sustainable-nav-tabs {
top: 0;
max-width: 100%;
display: flex;
overflow-x: auto;
scrollbar-width: none;
justify-content: flex-start;
gap: 20px;
}
.nav-tab {
min-width: fit-content;
}
.customer-mobile-section {
display: flex;
flex-direction: column;
}
.customer-title-section.desktop,
.customer-quote-section.desktop {
display: none;
}
.customer-happiness-container {
flex-direction: column;
}
.customer-title {
font-size: 24px;
}
.customer-quote-section {
padding: 12px 16px;
}
.quote-mark {
width: 36px;
height: 36px;
}
.quote-mark svg {
width: 36px;
height: 36px;
}
.quote-text {
font-size: 14px;
}
.customer-image-column.left,
.customer-content-column.right {
height: 256px;
position: relative;
}
.customer-content-column {
gap: 8px;
}
.customer-images-section {
width: 100%;
}
.customer-images-grid {
justify-content: space-between;
gap: 8px;
}
.customer-description {
font-size: 14px;
}
.customer-image-item {
width: 82px;
height: 82px;
}
/* .customer-image-item.featured {
width: 90px;
height: 90px;
} */
.customer-navigation.desktop,
.news-nav.desktop {
display: none;
}
.nav-button.mobile {
display: block;
position: absolute;
background: #fff;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
}
.nav-button.mobile svg {
width: 20px;
height: 20px;
}
.nav-button.prev.mobile {
left: 16px;
}
.nav-button.next.mobile {
right: 16px;
}
.news-carousel {
overflow: scroll;
gap: 12px;
}
.news-article {
width: 342px;
height: 170px;
flex: none;
}
.news-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 12px;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.news-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #D1D5DB;
cursor: pointer;
transition: all 0.3s ease;
border: none;
padding: 0;
}
.news-dot:hover {
background-color: #9CA3AF;
transform: scale(1.2);
}
.news-dot.active {
background-color: #EF3F23;
transform: scale(1.3);
}
.customer-news {
margin-top: 24px;
}
.customer-box {
flex-direction: column-reverse;
gap: 12px;
}
.sustainable-desc-banner {
padding: 0 12px;
}
.sustainable-desc-banner.japanese {
padding: 0 52px;
}
}
@media (max-width: 390px) {
.sustainable-desc-banner.japanese {
padding: 0 36px;
}
}