/* ==========================================================================
Design Tokens & Core Foundation
Strictly aligned with README.md Design System
========================================================================== */
/* Font Definitions */
@font-face {
font-family: 'SVN-Apparat';
src: url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Regular.eot');
src: url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Regular.eot?#iefix') format('embedded-opentype'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Regular.woff2') format('woff2'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Regular.woff') format('woff'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SVN-Apparat';
src: url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Bold.eot');
src: url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Bold.eot?#iefix') format('embedded-opentype'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Bold.woff2') format('woff2'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Bold.woff') format('woff'),
url('https://static.mediacdn.vn/fonts/SVN-Apparat/SVN-Apparat-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../Font/Manrope-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
:root {
/* Layout */
--content-max-width: 1440px;
--header-height: 0px;
/* Desktop */
--desktop-padding: 32px;
--desktop-gutter: 24px;
--desktop-columns: 12;
/* Tablet */
--tablet-padding: 24px;
--tablet-gutter: 20px;
--tablet-columns: 8;
/* Mobile */
--mobile-padding: 16px;
--mobile-gutter: 16px;
--mobile-columns: 4;
/* Current Active Layout Tokens (Desktop default) */
--page-padding: var(--desktop-padding);
--grid-gutter: var(--desktop-gutter);
--grid-columns: var(--desktop-columns);
/* Typography */
--font-heading: "SVN-Apparat", sans-serif;
--font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Animation */
--text-animation-duration: 600ms;
--text-animation-stagger: 40ms;
--text-animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Color Palette */
--color-primary-blue: #005bac;
--color-primary-blue-dark: #004380;
--color-blue-light-bg: #f0f7ff;
--color-dark-main: #111827;
--color-dark-sub: #374151;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-bg-white: #ffffff;
--color-bg-page: #f9fafb;
}
/* Responsive Overrides */
@media (max-width: 1024px) {
:root {
--page-padding: var(--tablet-padding);
--grid-gutter: var(--tablet-gutter);
--grid-columns: var(--tablet-columns);
}
}
@media (max-width: 640px) {
:root {
--page-padding: var(--mobile-padding);
--grid-gutter: var(--mobile-gutter);
--grid-columns: var(--mobile-columns);
}
}
/* Modern CSS Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
/* fallback only — overridden below whenever Lenis is actually running */
-webkit-text-size-adjust: 100%;
}
/* Lenis (js/main.js, initLenisSmoothScroll) adds the "lenis" class to
once it takes over scrolling. Native scroll-behavior: smooth
must be OFF while Lenis is active — the two fight over the same native
scroll position, each trying to ease it independently, which is exactly
the kind of compounding-delay bug already hit once with a hand-rolled
version of this. This is Lenis's own documented recommended CSS. */
html.lenis,
html.lenis body {
height: auto;
}
html.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
html.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
html.lenis.lenis-stopped {
overflow: hidden;
}
body {
font-family: var(--font-body);
color: var(--color-dark-main);
background-color: var(--color-bg-white);
line-height: 1.4;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* ==========================================================================
Layout Containers & Grid
========================================================================== */
.container {
width: 100%;
max-width: var(--content-max-width);
margin-inline: auto;
padding-inline: var(--page-padding);
}
.grid-layout {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
column-gap: var(--grid-gutter);
width: 100%;
}
/* CSS Reset for Headings to prevent browser default faux-bold */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 400;
}
/* ==========================================================================
Typography Classes
========================================================================== */
.heading-1 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 68px;
line-height: 125%;
letter-spacing: -0.02em;
}
.heading-2 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 50px;
line-height: 140%;
letter-spacing: -0.02em;
}
.heading-3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 40px;
line-height: 140%;
letter-spacing: -0.02em;
}
.body-1 {
font-family: var(--font-body);
font-size: 24px;
line-height: 140%;
letter-spacing: 0;
}
.body-2 {
font-family: var(--font-body);
font-size: 18px;
line-height: 140%;
letter-spacing: 0;
}
.body-3 {
font-family: var(--font-body);
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
}
.body-4 {
font-family: var(--font-body);
font-size: 14px;
line-height: 140%;
letter-spacing: 0;
}
.body-5 {
font-family: var(--font-body);
font-size: 12px;
line-height: 140%;
letter-spacing: 0;
}
/* Responsive typography adjustments */
@media (max-width: 1024px) {
.heading-1 {
font-size: 50px;
line-height: 120%;
}
.heading-2 {
font-size: 38px;
}
.heading-3 {
font-size: 30px;
}
}
@media (max-width: 640px) {
.heading-1 {
font-size: 34px;
line-height: 125%;
}
.heading-2 {
font-size: 28px;
}
.heading-3 {
font-size: 24px;
}
.body-1 {
font-size: 18px;
}
.body-2 {
font-size: 15px;
}
}
/* ==========================================================================
Components: Header, Buttons, Badges, Toast & Interactive Elements
Aligned with Figma Design System (Frame 651:7271) & README.md
========================================================================== */
/* --------------------------------------------------------------------------
Site Header / Navigation
Figma Node: 651:7272 (navigration)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Header / Navigation (Matching page/index.html)
-------------------------------------------------------------------------- */
.header {
background-color: #ffffff;
border-bottom: 1px solid #ececec;
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
transition: all 0.3s ease;
}
.header.sticky_header,
.header.scrolled {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.header .header-main {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 18px 32px;
gap: 16px;
box-sizing: border-box;
}
@media (max-width: 1199px) {
.header .header-main {
padding: 14px 24px;
}
}
@media (max-width: 991px) {
.header .header-main {
padding: 12px 20px;
}
}
@media (max-width: 575px) {
.header .header-main {
padding: 10px 16px;
}
}
.header .header-left {
display: flex;
align-items: center;
gap: 32px;
}
@media (max-width: 1310px) {
.header .header-left {
gap: 24px;
}
}
@media (max-width: 1199px) {
.header .header-left {
gap: 18px;
}
}
.header .header-logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
text-decoration: none;
}
.header .header-logo svg {
width: 32px;
height: 32px;
display: block;
transition: transform 0.2s ease;
}
.header .header-logo:hover svg {
transform: scale(1.05);
}
.header .header-nav {
display: flex;
align-items: center;
}
@media (max-width: 991px) {
.header .header-nav {
position: fixed;
top: 0;
left: -100%;
width: 290px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background-color: #ffffff;
z-index: 1002;
padding: 24px 20px;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
flex-direction: column;
align-items: flex-start;
}
.header .header-nav.is-open {
left: 0;
}
}
.header .header-nav-header {
display: none;
}
@media (max-width: 991px) {
.header .header-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.header .header-nav-header .header-nav-title {
font-size: 16px;
color: #111111;
font-weight: 700;
font-family: 'Manrope', sans-serif;
}
.header .header-nav-header .header-nav-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
background: #f5f5f7;
color: #333;
font-size: 20px;
line-height: 1;
cursor: pointer;
border: none;
transition: background-color 0.2s ease;
}
.header .header-nav-header .header-nav-close:hover {
background-color: #e5e5ea;
}
}
.header .header-nav-list {
display: flex;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1310px) {
.header .header-nav-list {
gap: 22px;
}
}
@media (max-width: 1199px) {
.header .header-nav-list {
gap: 16px;
}
}
@media (max-width: 991px) {
.header .header-nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
}
.header .header-nav-item {
position: relative;
}
@media (max-width: 991px) {
.header .header-nav-item {
width: 100%;
border-bottom: 1px solid #f2f2f5;
}
.header .header-nav-item:last-child {
border-bottom: none;
}
}
.header .header-nav-link {
display: block;
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: #111111;
white-space: nowrap;
padding: 6px 0;
text-decoration: none;
transition: color 0.2s ease;
position: relative;
}
@media (max-width: 1199px) {
.header .header-nav-link {
font-size: 13.5px;
}
}
@media (max-width: 991px) {
.header .header-nav-link {
font-size: 15px;
padding: 12px 0;
color: #222222;
}
}
.header .header-nav-link:hover,
.header .header-nav-link.active {
color: #0095d9;
}
.header .header-right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
@media (max-width: 1199px) {
.header .header-right {
gap: 14px;
}
}
@media (max-width: 767px) {
.header .header-right {
gap: 10px;
}
}
@media (max-width: 480px) {
.header .header-right {
gap: 8px;
}
}
.header .header-partner {
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 575px) {
.header .header-partner {
gap: 4px;
}
}
.header .header-partner .header-partner-logo {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
transition: opacity 0.2s ease;
}
.header .header-partner .header-partner-logo:hover {
opacity: 0.85;
}
.header .header-partner .header-partner-logo img {
width: auto;
object-fit: contain;
}
.header .header-lang {
display: inline-flex;
align-items: center;
font-family: 'Manrope', sans-serif;
font-size: 14px;
line-height: 1;
user-select: none;
}
@media (max-width: 480px) {
.header .header-lang {
font-size: 13px;
}
}
.header .header-lang .header-lang-item {
color: #8e8e93;
font-weight: 500;
padding: 2px 2px;
font-family: inherit;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.header .header-lang .header-lang-item.active,
.header .header-lang .header-lang-item:hover {
color: #111111;
font-weight: 700;
}
.header .header-lang .header-lang-divider {
color: #d1d1d6;
margin: 0 4px;
font-size: 13px;
font-weight: 400;
}
@media (max-width: 480px) {
.header .header-lang .header-lang-divider {
margin: 0 2px;
}
}
.header .header-btn-toggle {
display: none;
width: 34px;
height: 34px;
padding: 7px 5px;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-radius: 6px;
cursor: pointer;
background: transparent;
border: none;
margin-left: 2px;
}
@media (max-width: 991px) {
.header .header-btn-toggle {
display: inline-flex;
}
}
.header .header-btn-toggle .header-btn-toggle-bar {
display: block;
width: 20px;
height: 2px;
background-color: #111111;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.header .header-btn-toggle.is-active .header-btn-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.header .header-btn-toggle.is-active .header-btn-toggle-bar:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.header .header-btn-toggle.is-active .header-btn-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.header .header-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.header .header-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
/* --------------------------------------------------------------------------
Toast Notification System
-------------------------------------------------------------------------- */
.toast-notification {
position: fixed;
bottom: 28px;
right: 28px;
background: #111827;
color: #ffffff;
padding: 12px 20px;
border-radius: 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
}
.toast-notification.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.toast-notification svg {
width: 18px;
height: 18px;
color: #10b981;
}
/* --------------------------------------------------------------------------
Scroll-in reveals (js/animations.js), same motion as the home page.
html.js is only set when motion is allowed, so without JS or with
reduced motion everything simply shows.
-------------------------------------------------------------------------- */
.js [data-stagger-text]:not(.rv-lines):not(.is-animated),
.js [data-reveal]:not(.is-animated),
.rv-pending {
opacity: 0;
}
/* Headings: each word sits in a mask; words on the same visual line share
a delay, so the heading rises line by line. Padding/negative margin
keeps Vietnamese diacritics inside the mask. */
.rv-lines .rv-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-block: 0.18em;
margin-block: -0.18em;
}
.rv-lines .rv-wi {
display: inline-block;
transform: translateY(115%);
transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.rv-lines.is-animated .rv-wi {
transform: none;
}
.rv-lines.rv-done .rv-w {
overflow: visible;
}
/* --------------------------------------------------------------------------
"Hồ Sơ Doanh Nghiệp" dropdown — same behaviour/look as the home page nav
(css/styles.css .nav-item*), adapted to this header's tokens.
-------------------------------------------------------------------------- */
.nav-item {
position: relative;
}
.nav-item__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
border-bottom: 1px solid transparent;
padding: 4px 0;
cursor: pointer;
}
.nav-item__toggle.active {
border-bottom-color: #000000;
}
.nav-item__chevron {
flex: none;
transition: transform .3s cubic-bezier(.22, .7, .2, 1);
}
.nav-item.is-open .nav-item__chevron {
transform: rotate(180deg);
}
.nav-item__menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
z-index: 120;
display: flex;
flex-direction: column;
min-width: 220px;
padding: 8px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 20px 30px rgba(0, 0, 0, .12);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .25s cubic-bezier(.22, .7, .2, 1), transform .25s cubic-bezier(.22, .7, .2, 1), visibility .25s;
}
.nav-item.is-open .nav-item__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-item__link {
display: flex;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: #000000;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s ease;
}
.nav-item__link:hover {
background: rgba(0, 0, 0, .05);
}
.nav-item__link[aria-current="page"] {
background: rgba(37, 85, 173, .08);
color: #28BDBF;
}
/* Mobile drawer: the three tabs listed under the section label */
.mobile-nav-group {
display: flex;
flex-direction: column;
}
.mobile-nav-sublink {
padding: 8px 0 8px 14px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: #374151;
text-decoration: none;
}
.mobile-nav-sublink[aria-current="page"] {
color: #28BDBF;
font-weight: 600;
}
/* --------------------------------------------------------------------------
Language switch — SHARED component. This exact block is used on the home
page and every enterprise tab; keep all copies identical.
-------------------------------------------------------------------------- */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
}
.lang-switch__opt {
font: 600 14px/1.32 var(--font-body);
color: rgba(0, 0, 0, 0.4);
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: color 0.2s ease;
}
.lang-switch__opt.is-active {
color: #000000;
cursor: default;
}
.lang-switch__opt:not(.is-active):hover {
color: rgba(0, 0, 0, 0.6);
}
.lang-switch__sep {
width: 1px;
height: 14px;
background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 860px) {
.lang-switch {
display: none;
}
}
/* --------------------------------------------------------------------------
Product Showcase / Box Category Layout 3
-------------------------------------------------------------------------- */
.community__block {
position: relative;
padding-block: 80px;
background: #ffffff;
}
.community__block--products {
position: relative;
width: 100%;
background-color: var(--color-bg-page, #ffffff);
padding-top: 80px;
padding-bottom: 80px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 24px;
border-radius: 56px;
border: 1px solid transparent;
font: 700 14px/1.32 var(--font-body);
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background-color .45s cubic-bezier(.22, .7, .2, 1), color .45s cubic-bezier(.22, .7, .2, 1), border-color .45s cubic-bezier(.22, .7, .2, 1);
}
.btn img {
transition: transform .45s cubic-bezier(.22, .7, .2, 1);
}
.btn:hover img {
transform: translateX(4px);
}
.btn--outline-dark {
border-color: #000000;
color: #000000;
}
.btn--outline-dark:hover {
background: #000000;
color: #ffffff;
}
.btn--outline-dark:hover img {
filter: invert(1);
}
.link-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 0;
font: 700 14px/1.32 var(--font-body);
text-transform: uppercase;
color: #000000;
text-decoration: none;
}
.link-more img {
transition: transform .45s cubic-bezier(.22, .7, .2, 1);
}
.link-more:hover img {
transform: translateX(5px);
}
.chip {
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
padding: 8px 10px;
border-radius: 6px;
font: 700 12px/1.32 var(--font-body);
color: rgba(0, 0, 0, 0.6);
text-transform: uppercase;
white-space: nowrap;
}
.chip--grow {
flex: 1 0 0;
min-width: 0;
justify-content: flex-start;
}
.cc__chips {
display: flex;
gap: 12px;
padding: 16px;
}
.box-category .box-category-link-with-avatar {
position: relative;
}
.box-category[data-layout="3"] {
margin-top: 0;
width: 100%;
}
.box-category[data-layout="3"] .box-category-top {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 48px;
}
.box-category[data-layout="3"] .box-category-top h2,
.box-category[data-layout="3"] .box-category-top .box-category-title-heading {
margin: 0;
text-align: center;
width: 100%;
}
.box-category[data-layout="3"] .box-category-top .box-category-title {
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
color: #000000;
transition: color 0.3s ease;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.5px;
text-decoration: none;
display: inline-block;
}
.box-category[data-layout="3"] .box-category-top .box-category-title:hover {
color: #28BDBF;
}
@media (max-width: 991px) {
.box-category[data-layout="3"] .box-category-top {
margin-bottom: 32px;
}
.box-category[data-layout="3"] .box-category-top .box-category-title {
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.5px;
}
}
.box-category[data-layout="3"] .swiper {
width: 100%;
overflow: hidden;
position: relative;
}
.box-category[data-layout="3"] .box-category-middle.swiper-wrapper {
display: flex;
flex-direction: row;
grid-template-columns: none;
gap: 0;
align-items: stretch;
width: 100%;
box-sizing: border-box;
}
.box-category[data-layout="3"] .box-category-middle:not(.swiper-wrapper) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
@media (max-width: 991px) {
.box-category[data-layout="3"] .box-category-middle:not(.swiper-wrapper) {
grid-template-columns: 1fr;
gap: 32px;
}
}
.box-category[data-layout="3"] .box-category-middle .box-category-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item.swiper-slide {
flex-shrink: 0;
height: auto;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-box {
position: relative;
width: 100%;
background: #eeeeee;
overflow: hidden;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-link-with-avatar {
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .img-resize {
display: block;
position: relative;
height: max-content;
width: 100%;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .img-resize:before {
content: "";
display: block;
padding-bottom: 82.528%;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-avatar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.box-category[data-layout="3"] .box-category-middle .box-category-item:hover .box-category-avatar {
transform: scale(1.05);
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .cc__chips {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
background: #eeeeee;
}
@media (max-width: 768px) {
.box-category[data-layout="3"] .box-category-middle .box-category-item .cc__chips {
padding: 8px !important;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .chip {
padding: 5px !important;
font-size: 7px !important;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .chip--grow {
min-width: 50% !important;
}
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .chip {
background: #ffffff;
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 11px;
font-weight: 600;
color: #444444;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .chip--grow {
text-transform: uppercase;
min-width: 140px;
justify-content: flex-start;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-content {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 2px 4px 2px;
flex: 1 0 auto;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-title-text {
margin: 0;
padding: 0;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-link-title {
display: block;
font-family: var(--font-body, "Manrope", sans-serif);
font-weight: 700;
font-size: 20px;
line-height: 1.35;
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-link-title:hover {
color: #28BDBF;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-category {
display: none !important;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-time {
display: none !important;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .box-category-sapo {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #666666;
margin: 0;
display: block;
}
.box-category[data-layout="3"] .box-category-middle .box-category-item .link-more {
display: none !important;
}
/* Swiper Pagination & Bottom Controls */
.box-category[data-layout="3"] .swiper-pagination {
display: none;
}
.box-category[data-layout="3"] .box-category-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 48px;
padding-top: 12px;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-counter-wrap {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
max-width: 100%;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-counter-fraction {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 16px;
font-weight: 700;
color: #000000;
white-space: nowrap;
letter-spacing: 0.5px;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-progress-track {
position: relative;
flex: 1 1 auto;
height: 2px;
background: #e8e8e8;
overflow: hidden;
border-radius: 2px;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-progress-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #28BDBF;
width: 19%;
transition: width 0.35s ease;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-nav-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.box-category[data-layout="3"] .swiper-button {
position: static;
margin: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.box-category[data-layout="3"] .swiper-button::after {
display: none !important;
}
.box-category[data-layout="3"] .swiper-button svg {
display: block;
width: 10px;
height: 16px;
}
.box-category[data-layout="3"] .swiper-button svg path {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.box-category[data-layout="3"] .swiper-button-prev {
background-color: #f1f3f6;
color: #767676;
}
.box-category[data-layout="3"] .swiper-button-prev:hover:not(.swiper-button-disabled) {
background-color: #28BDBF;
color: #ffffff;
}
.box-category[data-layout="3"] .swiper-button-next {
background-color: #28BDBF;
color: #ffffff;
}
.box-category[data-layout="3"] .swiper-button-next:hover:not(.swiper-button-disabled) {
background-color: #002b55;
}
.box-category[data-layout="3"] .swiper-button.swiper-button-disabled {
opacity: 1;
background-color: #f1f3f6;
color: #c4c8cf;
cursor: default;
pointer-events: none;
}
@media (max-width: 768px) {
.box-category[data-layout="3"] .box-category-bottom {
margin-top: 28px;
}
.box-category[data-layout="3"] .box-category-bottom .swiper-counter-wrap {
flex: 1 1 auto;
max-width: none;
}
}
/* data-layout 4 */
.box-category[data-layout="4"] {
margin-top: 0;
width: 100%;
}
.box-category[data-layout="4"] .box-category-top {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 48px;
}
.box-category[data-layout="4"] .box-category-top h2,
.box-category[data-layout="4"] .box-category-top .box-category-title-heading {
margin: 0;
text-align: center;
width: 100%;
}
.box-category[data-layout="4"] .box-category-top .box-category-title {
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
color: #000000;
transition: color 0.3s ease;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.5px;
text-decoration: none;
display: inline-block;
}
.box-category[data-layout="4"] .box-category-top .box-category-title:hover {
color: #28BDBF;
}
@media (max-width: 991px) {
.box-category[data-layout="4"] .box-category-top {
margin-bottom: 32px;
}
.box-category[data-layout="4"] .box-category-top .box-category-title {
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.5px;
}
}
.box-category[data-layout="4"] .swiper {
width: 100%;
overflow: hidden;
position: relative;
}
.box-category[data-layout="4"] .box-category-middle.swiper-wrapper {
display: flex;
flex-direction: row;
grid-template-columns: none;
gap: 0;
align-items: stretch;
width: 100%;
box-sizing: border-box;
}
.box-category[data-layout="4"] .box-category-middle:not(.swiper-wrapper) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
@media (max-width: 991px) {
.box-category[data-layout="4"] .box-category-middle:not(.swiper-wrapper) {
grid-template-columns: 1fr;
gap: 32px;
}
}
.box-category[data-layout="4"] .box-category-middle .box-category-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item.swiper-slide {
flex-shrink: 0;
height: auto;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-box {
position: relative;
width: 100%;
background: #eeeeee;
overflow: hidden;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-with-avatar {
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .img-resize {
display: block;
position: relative;
height: max-content;
width: 100%;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .img-resize:before {
content: "";
display: block;
padding-bottom: 62.5%;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-avatar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.box-category[data-layout="4"] .box-category-middle .box-category-item:hover .box-category-avatar {
transform: scale(1.05);
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .cc__chips {
display: none;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .chip {
background: #ffffff;
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 11px;
font-weight: 600;
color: #444444;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .chip--grow {
text-transform: uppercase;
min-width: 140px;
justify-content: flex-start;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 2px 4px 2px;
flex: 1 0 auto;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-title-text {
margin: 0;
padding: 0;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-title {
display: block;
font-family: var(--font-body, "Manrope", sans-serif);
font-weight: 700;
font-size: 20px;
line-height: 1.35;
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-title:hover {
color: #28BDBF;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-category {
display: none !important;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-time {
display: none !important;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-sapo {
display: block;
font-family: Manrope;
font-weight: 500;
font-size: 12px;
line-height: 139%;
letter-spacing: -1%;
order: -1;
color: #00000066;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .link-more {
display: none !important;
}
/* Swiper Pagination & Bottom Controls */
.box-category[data-layout="4"] .swiper-pagination {
display: none;
}
.box-category[data-layout="4"] .box-category-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 48px;
padding-top: 12px;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-counter-wrap {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
max-width: 100%;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-counter-fraction {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 16px;
font-weight: 700;
color: #000000;
white-space: nowrap;
letter-spacing: 0.5px;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-progress-track {
position: relative;
flex: 1 1 auto;
height: 2px;
background: #e8e8e8;
overflow: hidden;
border-radius: 2px;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-progress-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #28BDBF;
width: 19%;
transition: width 0.35s ease;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-nav-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.box-category[data-layout="4"] .swiper-button {
position: static;
margin: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.box-category[data-layout="4"] .swiper-button::after {
display: none !important;
}
.box-category[data-layout="4"] .swiper-button svg {
display: block;
width: 10px;
height: 16px;
}
.box-category[data-layout="4"] .swiper-button svg path {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.box-category[data-layout="4"] .swiper-button-prev {
background-color: #f1f3f6;
color: #767676;
}
.box-category[data-layout="4"] .swiper-button-prev:hover:not(.swiper-button-disabled) {
background-color: #28BDBF;
color: #ffffff;
}
.box-category[data-layout="4"] .swiper-button-next {
background-color: #28BDBF;
color: #ffffff;
}
.box-category[data-layout="4"] .swiper-button-next:hover:not(.swiper-button-disabled) {
background-color: #002b55;
}
.box-category[data-layout="4"] .swiper-button.swiper-button-disabled {
opacity: 1;
background-color: #f1f3f6;
color: #c4c8cf;
cursor: default;
pointer-events: none;
}
@media (max-width: 768px) {
.box-category[data-layout="4"] .box-category-bottom {
margin-top: 28px;
}
.box-category[data-layout="4"] .box-category-bottom .swiper-counter-wrap {
flex: 1 1 auto;
max-width: none;
}
}
/* ==========================================================================
Section 01: Hero TH True Milk
Full-width Responsive with Aspect Ratio Lock
Aligned with Figma Frame: 651:7271 & User Requirements
========================================================================== */
.s01-hero {
/* Vùng nhìn thấy dưới header: toàn bộ hero (đặc biệt cột thông tin bên phải) phải nằm gọn trong đây */
--s01-avail-h: calc(100vh - var(--header-height, 77px));
position: relative;
width: 100%;
background-color: var(--color-bg-white);
overflow: hidden;
}
/* Full Width Container for Home Section */
.s01-container {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* Two-Column Hero Split:
Left: Visual column with locked aspect-ratio matching 615/691
Right: Content column responsive, driving row height
*/
.s01-layout {
display: flex;
flex-direction: row;
width: 100%;
min-height: 0;
align-items: stretch;
}
/* --------------------------------------------------------------------------
Left Column: Product Visual & Clean QR Badge
Pure-CSS replacement for what used to be a JS-measured width (see the
removed initHeroRatioSync in js/main.js) — that measured
.s01-layout's rendered width on load and set an inline px width/height
from it, which on some cold reloads read a stale/incorrect width
before the very first layout pass had settled, producing a visibly
too-narrow image column that only fixed itself once something else
(e.g. a window resize) forced a re-measurement.
flex-basis: 43% gives the column a WIDTH that's a definite share of
the row, independent of anything else in it. align-self: flex-start
(not stretch) then means its HEIGHT is free to be derived from that
width via aspect-ratio, instead of being forced to match
.s01-content-col's height first (which is what stretch + aspect-ratio
would otherwise do, and exactly the "image cropped by object-fit:
cover to fill a mismatched box" bug this avoids). When the content
column's text is taller than the image, the row (align-items:
stretch on .s01-layout) grows to match it and the image just sits at
its own correct height at the top, instead of stretching to fill and
cropping.
-------------------------------------------------------------------------- */
.s01-visual-col {
position: relative;
/* min(43%, ...): giữ tỉ lệ 615/691 nhưng không cao hơn vùng nhìn thấy (không crop ảnh) */
width: min(43%, calc(var(--s01-avail-h) * 615 / 691));
flex: 0 0 min(43%, calc(var(--s01-avail-h) * 615 / 691));
height: auto;
aspect-ratio: 615 / 691;
background-color: #e9e9e9;
overflow: hidden;
align-self: flex-start;
}
.s01-image-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.s01-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* --------------------------------------------------------------------------
Hanging Certificate Shield Badge (Figma Node: 651:7276 / Frame 2087330433)
- Width: 120px, Height: 189.75px, Position: left: 32px, top: 0
- Background: #ffffff with border-radius: 0 0 90px 90px
- Header tag: "CHỨNG NHẬN" (Manrope 700 10px #295ebd)
- Subtitle: "doanh nghiệp đạt thương hiệu quốc gia" (Manrope 500 10px 132%)
- Pill Capsule (82px x 76.88px) with rosette ornament & QR code
-------------------------------------------------------------------------- */
.s01-cert-badge {
position: absolute;
top: 0;
left: 32px;
z-index: 10;
width: 120px;
height: 189.75px;
background-color: #ffffff;
border: 0.75px solid #d9d9d9;
border-top: none;
border-radius: 0 0 90px 90px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
user-select: none;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.s01-cert-badge:hover {
transform: translateY(3px);
}
/* Header Text Group (Frame 2087330589: 120px x 68px) */
.s01-cert-header {
width: 100%;
height: 68px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
/* Blue Upper Tag: "CHỨNG NHẬN" (Frame 2087330555) */
.s01-cert-tag {
display: flex;
align-items: center;
justify-content: center;
height: 29px;
padding: 8px 10px 0;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 13.2px;
color: #295ebd;
text-transform: uppercase;
letter-spacing: 0.02em;
text-align: center;
box-sizing: border-box;
}
/* Subtitle: "doanh nghiệp đạt thương hiệu quốc gia" */
.s01-cert-title {
width: 100%;
margin: 0;
padding: 0 8px;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 13.2px;
color: rgba(28, 28, 28, 0.8);
text-align: center;
text-transform: none;
box-sizing: border-box;
}
/* Flower & QR Wrapper: perfectly centered in shield card */
.s01-cert-flower-wrap {
position: relative;
width: 92px;
height: 92px;
margin-top: 14px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Rosette SVG ornament (92px x 92px, centered in wrap) */
.s01-cert-rosette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Transparent QR code centered directly on flower */
.s01-cert-qr-img {
position: relative;
z-index: 2;
width: 66px;
height: 79px;
object-fit: contain;
background: transparent;
mix-blend-mode: darken;
display: block;
}
/* --------------------------------------------------------------------------
Right Column: Brand Profile, Headline, Philosophy, Actions
- Fully responsive, naturally wraps and determines hero height
-------------------------------------------------------------------------- */
.s01-content-col {
flex: 1 1 0;
min-width: 0;
min-height: 0;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding: clamp(20px, 5vh, 56px) 32px;
}
/* Top Block: Honor Badge + Headline + Description */
.s01-top-block {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Honor Badge Pill (Figma Node: 651:7289) */
.s01-honor-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: clamp(10px, 2.4vh, 28px);
transition: transform 0.25s ease;
}
.s01-honor-badge:hover {
transform: translateY(-2px);
}
.s01-rosette-icon {
width: 18px;
height: 24px;
color: #295ebd;
flex-shrink: 0;
opacity: 0;
transform: translateY(12px);
animation: s01FadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
@keyframes s01FadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.s01-honor-text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.32;
color: #295ebd;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
}
/* Main Headline H1 (Node: 651:7293)
Headline size 60px for screens 1440px and below */
.s01-headline {
font-family: var(--font-heading);
font-weight: 400;
font-size: 60px;
line-height: 1.25;
letter-spacing: -0.02em;
color: #000000;
margin-bottom: clamp(10px, 1.6vh, 20px);
max-width: 960px;
width: 100%;
padding-inline: clamp(16px, 2.5vw, 36px);
text-align: center;
}
/* Description / Slogan (Node: 651:7294) */
.s01-description {
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
color: rgba(0, 0, 0, 0.8);
max-width: 580px;
width: 100%;
padding-inline: 16px;
text-align: center;
}
/* Brand Logo (Node: 651:7295) */
.s01-brand-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
margin: clamp(10px, 2.4vh, 28px) 0;
opacity: 0;
transform: translateY(16px);
animation: s01FadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
}
.s01-brand-logo {
height: auto;
width: auto;
object-fit: contain;
display: block;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.s01-brand-logo:hover {
transform: scale(1.03);
}
/* --------------------------------------------------------------------------
Interactive Action Buttons: Download Report & Share
Figma Node: 651:7297 (Frame 2087330549)
-------------------------------------------------------------------------- */
.s01-actions-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.action-buttons-group {
display: inline-flex;
align-items: center;
gap: 32px;
opacity: 0;
transform: translateY(16px);
animation: s01FadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.44s forwards;
}
.btn-action {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
font-size: 14px;
color: #4d4d4d;
background: transparent;
border: none;
cursor: pointer;
border-radius: 6px;
transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.btn-action:hover {
color: #111827;
background-color: rgba(0, 0, 0, 0.04);
transform: translateY(-1px);
}
.btn-action:active {
transform: translateY(0);
}
.btn-action-icon {
display: block;
flex-shrink: 0;
color: currentColor;
transition: transform 0.2s ease;
}
.btn-action-icon.icon-download {
width: 24px;
height: 17px;
}
.btn-action-icon.icon-share {
width: 18px;
height: 20px;
}
.btn-action:hover .btn-action-icon {
transform: scale(1.08);
}
.btn-action-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: currentColor;
letter-spacing: 0;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
Responsive Breakpoints: Large / 2K+ screens
-------------------------------------------------------------------------- */
@media (min-width: 1441px) {
.s01-headline {
font-size: clamp(32px, 7.2vh, 76px);
/* was 100px */
}
}
/* Responsive: 1440px and below */
@media (max-width: 1440px) {
.s01-honor-text {
font-size: 14px;
}
.s01-headline {
font-size: 60px;
line-height: 1.25;
}
.s01-description {
font-size: 16px;
}
.s01-brand-logo {
height: 60px;
max-height: 60px;
width: auto;
}
.btn-action,
.btn-action-label {
font-size: 14px;
}
}
/* Desktop: 2 dòng tiêu đề (đã có
) không được tự ngắt thêm dòng */
@media (min-width: 861px) {
.s01-headline {
max-width: none;
}
}
/* --------------------------------------------------------------------------
Responsive Breakpoints: Tablet & Mobile
-------------------------------------------------------------------------- */
@media (max-width: 860px) {
.s01-layout {
flex-direction: column-reverse;
min-height: auto;
}
.s01-visual-col {
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
aspect-ratio: 615 / 691;
flex: none;
align-self: center;
order: 1;
}
.s01-cert-badge {
left: 20px;
}
.s01-content-col {
width: 100%;
flex: none;
min-height: auto;
padding: 40px 20px 32px 20px;
gap: 28px;
}
.s01-headline {
font-size: clamp(30px, 6vw, 44px);
padding-inline: 0;
}
.s01-description {
font-size: 15px;
padding-inline: 0;
}
.action-buttons-group {
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
}
@media (max-width: 520px) {
.s01-content-col {
padding: 32px 16px 24px 16px;
gap: 24px;
}
.s01-headline {
font-size: 40px;
}
.s01-description {
font-size: 14px;
}
.s01-brand-logo {
height: auto;
}
.action-buttons-group {
flex-direction: column;
width: 100%;
gap: 12px;
}
.btn-action {
width: 100%;
justify-content: center;
background: #f8fafc;
border-radius: 8px;
padding: 8px 12px;
}
.s01-cert-badge {
left: 14px;
transform: scale(0.85);
transform-origin: top left;
}
.s01-cert-badge:hover {
transform: scale(0.85) translateY(2px);
}
}
/* ==========================================================================
Section 02: Thành Tựu Trong Năm 2025
Figma Node: 651:7308
Updated per user rules:
- Background image: assets/s2/background s2.jpg
- Hình ảnh k bo góc (border-radius: 0)
- Title lớn không bị dính nav (sticky top: var(--header-height, 77px), top: 48px)
- Cards inactive chỉ blur (14px), KHÔNG giảm opacity (opacity: 1)
- Cụm lĩnh vực và ảnh active luôn align center (đáy cụm lĩnh vực align đáy ảnh active)
- Text "Cuộn xuống" bỏ icon
- Ảnh active width 350px tại breakpoint 1440
- Ảnh inactive width 310px, luôn bị che đi một phần ở mép trên và mép dưới
========================================================================== */
/* Outer Scroll Track Spacer (provides scroll distance for scrubbing + transition hold) */
.s02-track {
position: relative;
width: 100%;
height: 700vh;
height: 700dvh;
background-color: #28BDBF;
}
/* Pinned Sticky Viewport (Sticks flush to viewport top)
z-index kept low relative to Section 03's own sticky layer below, so
Section 03 slides up and visually covers this one at the handoff instead
of the two sections just swapping abruptly. */
.s02-sticky {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
/* Clips top/bottom inactive cards and background */
background-color: #28BDBF;
color: #ffffff;
box-sizing: border-box;
z-index: 1;
}
/* Background Globe Graphic (assets/s2/background s2.jpg) */
.s02-bg-globe {
position: absolute;
top: 50%;
right: -5%;
transform: translateY(-50%);
width: 100% !important;
height: 100% !important;
width: min(95vw, 1100px);
height: min(95vw, 1100px);
pointer-events: none;
z-index: 1;
-webkit-mask-image: radial-gradient(circle at center, black 65%, transparent 100%);
mask-image: radial-gradient(circle at center, black 65%, transparent 100%);
}
.s02-globe-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* --------------------------------------------------------------------------
Sticky Main Layout Container (Padding 2 bên 32px per user rule)
-------------------------------------------------------------------------- */
.s02-viewport {
position: relative;
width: 100%;
height: 100%;
padding-left: 32px;
padding-right: 32px;
box-sizing: border-box;
overflow: hidden;
z-index: 2;
}
/* --------------------------------------------------------------------------
Cụm 1: Title (Figma Node: 651:7310)
Top-left, plenty of breathing room, does NOT touch the nav
-------------------------------------------------------------------------- */
.s02-cluster-1 {
position: absolute;
top: 48px;
left: 32px;
z-index: 5;
}
/* Plain block (not flex-column): the two lines come from a literal
in the markup now, not two separate elements. This used to be
display:flex; flex-direction:column with each phrase in its own
display:block span — but animations.js (data-stagger-text) rewrites the
title's contents into one per WORD, and
with flex-column those word-spans each became their own stacked flex
item (and, with the old `span{display:block}` rule, each was also
forced onto its own line) — every word landing on its own line instead
of just wrapping normally within the two intended lines. */
.s02-title {
margin: 0;
font-family: "SVN-Apparat", Georgia, serif;
font-size: clamp(34px, 3.6vw, 50px);
font-weight: 400;
line-height: 1.16;
letter-spacing: -0.02em;
color: #ffffff;
}
/* --------------------------------------------------------------------------
Cụm 2: Lĩnh vực container (Figma Node: 651:7311)
Center aligned, and its bottom aligns with the bottom of the active image
Active image height = 236px, centered at 50% -> bottom = 50% + 118px.
Cluster 2 bottom = calc(50% - 118px) from section bottom = 50% + 118px from top!
-------------------------------------------------------------------------- */
.s02-cluster-2 {
position: absolute;
left: 32px;
bottom: calc(50% - 118px);
/* Locks bottom baseline to bottom edge of active image */
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 60px;
/* Figma itemSpacing: 60px */
max-width: 420px;
z-index: 5;
}
.s02-category-label {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
padding-top: 2px;
}
.s02-categories-list {
display: flex;
flex-direction: column;
gap: 8px;
/* Figma gap: 8px */
}
.s02-category-item {
background: none;
border: none;
padding: 0;
margin: 0;
text-align: left;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 6px;
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
white-space: nowrap;
/* Keep each label + (count) on one line — without this
the label text wraps mid-phrase while the count stays stranded on the
first line instead of following it down, like "...hiệu quả tài (03)"
then "nguyên" alone on the next line. */
transition: color 0.3s ease, font-weight 0.3s ease;
}
.s02-category-item:hover {
color: rgba(255, 255, 255, 0.9);
}
.s02-category-item.active {
color: #ffffff;
font-weight: 700;
}
.s02-category-item .cat-count {
font-size: 13px;
opacity: 0.85;
}
/* --------------------------------------------------------------------------
Cụm 3: Vertical 3-Card Carousel Stream (Figma Nodes: 651:7318, 651:7332, 651:7325)
- Active image size: w350 x h236 at breakpoint 1440
- Inactive images size: w310 x h176
- NO rounded corners (border-radius: 0)
- Inactive cards have blur ONLY, NO opacity reduction (opacity: 1)
- Both inactive cards are ALWAYS partially cut off by the top and bottom edge
- Beyond ~1458px the active image keeps growing (24vw, capped at 520px) so
it doesn't stay visually tiny on 2K/wide screens; the container width
below grows in lockstep (image + 22px gap + fixed 266px info column) so
the info text never overflows. Below ~1458px this clamps back to the
original flat 638px, matching the 1440 reference frame exactly.
-------------------------------------------------------------------------- */
.s02-cluster-3 {
position: absolute;
top: 0;
right: 32px;
width: clamp(638px, calc(24vw + 288px), 808px);
height: 100%;
pointer-events: none;
z-index: 4;
perspective: 1200px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
.s02-cards-viewport {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
/* Base card item - strictly bounded dimensions, can NEVER blow up to raw image size */
.s02-card {
position: absolute;
top: 50%;
left: 0;
width: clamp(638px, calc(24vw + 288px), 808px);
max-width: clamp(638px, calc(24vw + 288px), 808px);
box-sizing: border-box;
cursor: pointer;
user-select: none;
pointer-events: none;
opacity: 0;
visibility: hidden;
filter: blur(14px);
z-index: 1;
transform-origin: 50% 50%;
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, filter, opacity;
overflow: visible;
/* Allow WebGL canvas to visually exceed card bounds */
/* Transitions are managed exclusively by GSAP physics engine to avoid CSS fighting */
}
.s02-card-inner {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 22px;
width: 100%;
transform-style: preserve-3d;
}
/* Base image container - ALWAYS explicitly sized, NEVER auto or full size */
.s02-card-image-wrap {
position: relative;
width: 310px;
height: 176px;
max-width: clamp(350px, 24vw, 520px);
max-height: clamp(236px, 16.2vw, 351px);
border-radius: 0;
/* NO rounded corners per user rule */
overflow: visible;
/* Allows curved WebGL mesh to flex beyond bounds without clipping */
background-color: transparent;
box-sizing: border-box;
flex: 0 0 auto;
transform-style: preserve-3d;
}
.s02-card-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
/* NO rounded corners per user rule */
display: block;
box-shadow: 0 16px 36px rgba(0, 20, 60, 0.35);
transition: opacity 0.3s ease;
}
/* WebGL Curved Mesh Canvas */
.s02-card-gl-canvas {
position: absolute;
top: -15%;
left: 0;
width: 100%;
height: 130%;
pointer-events: none;
z-index: 1;
display: block;
filter: drop-shadow(0 16px 28px rgba(0, 20, 60, 0.32));
}
.s02-card-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
width: 266px;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Semantic & fallback classes (used for JS state tagging and noscript fallback) */
.s02-card.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
filter: blur(0px);
z-index: 10;
}
.s02-card.is-active .s02-card-image-wrap {
width: clamp(350px, 24vw, 520px);
height: clamp(236px, 16.2vw, 351px);
}
.s02-card.is-active .s02-card-info {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.s02-card.is-prev,
.s02-card.is-next {
opacity: 1;
visibility: visible;
pointer-events: auto;
filter: blur(14px);
z-index: 3;
}
.s02-card.is-prev .s02-card-image-wrap,
.s02-card.is-next .s02-card-image-wrap {
width: clamp(310px, 21.3vw, 461px);
height: clamp(176px, 12.1vw, 262px);
}
.s02-card.is-passed,
.s02-card.is-future {
opacity: 0;
visibility: hidden;
filter: blur(40px);
pointer-events: none;
z-index: 1;
}
/* TemplateHub & CMS safety guard:
If a card is cloned or lacks explicit active/prev/next state, or if multiple active cards exist,
prevent cards from overlapping. Only the single intended active card can ever be visible. */
.s02-card.is-active~.s02-card.is-active {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 1 !important;
}
.s02-card:not(.is-active):not(.is-prev):not(.is-next) {
opacity: 0;
visibility: hidden;
filter: blur(40px);
pointer-events: none;
z-index: 1;
}
/* Card Text Styling */
.s02-card-metric {
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
font-size: 30px;
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.02em;
color: #ffffff;
text-transform: none;
margin: 0;
}
.s02-card-text {
margin: 0;
}
.s02-card-title {
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
color: #ffffff;
margin: 0 0 4px 0;
}
.s02-card-sub {
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
/* --------------------------------------------------------------------------
Cụm 4: Bottom Bar (Cuộn xuống | 01 /12 | 2025)
- Text "Cuộn xuống" NO ICON per user rule
-------------------------------------------------------------------------- */
.s02-cluster-4 {
position: absolute;
bottom: 24px;
left: 32px;
right: 32px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 6;
}
/* Bottom Left: Cuộn xuống (No icon per user rule) */
.s02-scroll-prompt {
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
transition: color 0.2s ease;
user-select: none;
}
.s02-scroll-prompt:hover {
color: #ffffff;
}
.s02-scroll-text {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
/* Bottom Center: Counter Frame (Figma Node: 651:7345) */
.s02-counter {
display: flex;
align-items: flex-start;
gap: 4px;
line-height: 1;
}
.s02-counter-current {
font-family: "Manrope", sans-serif;
font-size: 32px;
font-weight: 500;
line-height: 1;
color: #ffffff;
display: inline-block;
min-width: 38px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.s02-counter-current.flip {
transform: translateY(-4px);
opacity: 0.5;
}
.s02-counter-total {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
padding-top: 2px;
}
/* Bottom Right: Year 2025 (Figma Node: 651:7344) */
.s02-year {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: rgba(255, 255, 255, 0.6);
}
/* --------------------------------------------------------------------------
Responsive Breakpoints
- Cụm 1 & Cụm 2: flow top, left
- Cụm 3: flow right / center
- Cụm 4: flow bottom
- Padding 2 bên: strictly 32px
-------------------------------------------------------------------------- */
/* Large / 2K+ screens (> 1440px reference frame):
- Title steps up to the site's own H1 type scale (.heading-1 in
tokens.css: 68px / 125% line-height) instead of staying capped at the
H2 size (50px) it was hitting before.
- Card zone (Cụm 3) is pulled left proportionally as the viewport grows
past 1440px, closing the dead gap that opened up between it and the
bottom pagination counter on very wide screens, instead of staying
pinned flush to the right edge.
- Background globe's max size grows too, so it doesn't stay visually
static at 1100px once the screen is well past the 1157px width where
it used to hit that cap. */
@media (min-width: 1441px) {
.s02-title {
font-size: 68px;
line-height: 1.25;
}
.s02-cluster-3 {
right: calc(32px + (100vw - 1440px) * 0.3);
}
.s02-bg-globe {
width: min(95vw, 1500px);
height: min(95vw, 1500px);
}
/* The active image's own height grows past 1440px too (see .s02-card
clamp() rules above, up to 351px), so the fixed -118px (half of the
original flat 236px) that keeps Cụm 2's bottom baseline aligned with
the image's bottom edge needs to track that growth the same way. */
.s02-cluster-2 {
bottom: calc(50% - clamp(118px, 8.1vw, 175.5px));
}
/* Card metric number (e.g. "10.000+ TỶ") steps up to the site's H3 type
scale (.heading-3 in tokens.css: 40px / 140% line-height) instead of
staying at the smaller 30px it used below this breakpoint. */
.s02-card-metric {
font-size: 40px;
line-height: 1.4;
}
}
@media (max-width: 1200px) {
.s02-cluster-3 {
right: 32px;
width: 540px;
}
.s02-card.is-active {
width: 540px;
}
.s02-card.is-active .s02-card-image-wrap {
width: 300px;
height: 202px;
flex: 0 0 300px;
}
.s02-card.is-prev,
.s02-card.is-next {
left: 150px;
}
.s02-cluster-2 {
bottom: calc(50% - 101px);
gap: 36px;
}
}
/* 993–1440px: card zone sized by fitS02() in js/main.js (60px from the
right edge, ≥32px clear of the "Lĩnh vực" list). Fallbacks = 1440 frame. */
@media (min-width: 993px) and (max-width: 1440px) {
.s02-cluster-3 {
right: var(--s02-cr, 83px);
width: var(--s02-cw, 638px);
}
.s02-card,
.s02-card.is-active {
width: var(--s02-cw, 638px);
max-width: var(--s02-cw, 638px);
}
.s02-card.is-prev,
.s02-card.is-next {
left: 0;
}
.s02-card.is-active .s02-card-image-wrap {
flex: 0 0 auto;
}
.s02-card-info {
width: var(--s02-info-w, 266px);
}
.s02-cluster-2 {
bottom: calc(50% - var(--s02-ih, 236px) / 2);
max-width: none;
}
.s02-categories-list {
max-width: var(--s02-list-w, none);
}
/* Inline flow so a wrapped label's (count) trails its last word. */
.s02-categories-list.is-wrapped .s02-category-item {
display: block;
white-space: normal;
}
.s02-categories-list.is-wrapped .s02-category-item .cat-count {
margin-left: 6px;
}
}
@media (max-width: 992px) {
.s02-viewport {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 28px;
padding-bottom: 20px;
padding-left: 32px;
padding-right: 32px;
overflow: hidden;
}
/* Cụm 1 & Cụm 2 flow top, left */
.s02-cluster-1 {
position: static;
}
.s02-title {
font-size: 30px;
}
.s02-cluster-2 {
position: static;
margin-top: 14px;
gap: 20px;
max-width: 100%;
}
.s02-categories-list {
flex-direction: row;
flex-wrap: wrap;
gap: 8px 16px;
}
/* Cụm 3 flow center-right */
.s02-cluster-3 {
position: relative;
top: auto;
right: auto;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0;
}
.s02-cards-viewport {
width: 100%;
height: 340px;
position: relative;
overflow: visible;
}
.s02-card {
left: 0;
width: 100%;
max-width: 100%;
}
.s02-card-inner {
width: 100%;
justify-content: center;
gap: 20px;
}
.s02-card.is-active {
left: 0;
width: 100%;
max-width: 100%;
}
.s02-card.is-active .s02-card-inner {
justify-content: center;
}
.s02-card.is-active .s02-card-image-wrap {
width: 250px;
height: 168px;
flex: 0 0 auto;
}
.s02-card.is-prev,
.s02-card.is-next {
left: 0;
width: 100%;
max-width: 100%;
}
/* Cụm 4 flow bottom */
.s02-cluster-4 {
position: static;
width: 100%;
padding-top: 12px;
}
}
@media (max-width: 768px) {
.s02-viewport {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 24px 20px 20px 20px;
box-sizing: border-box;
overflow: hidden;
}
.s02-bg-globe {
width: 130vw;
height: 130vw;
max-width: 550px;
max-height: 550px;
right: -25vw;
top: 48%;
}
.s02-left-pane {
position: absolute;
top: 24px;
left: 20px;
right: 20px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 0;
width: auto;
height: auto;
pointer-events: auto;
}
.s02-cluster-1 {
position: static;
margin: 0;
padding: 0;
}
.s02-title {
font-family: "Manrope", sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: #ffffff;
margin: 0;
}
.s02-cluster-2 {
position: static;
display: flex !important;
flex-direction: column;
gap: 5px;
margin-top: 14px;
padding: 0;
}
.s02-category-label {
display: block;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2px;
line-height: 1.3;
}
.s02-categories-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.s02-category-item {
background: none;
border: none;
padding: 0;
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: "Manrope", sans-serif;
font-size: 13.5px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
text-align: left;
transition: color 0.2s ease;
}
.s02-category-item.active {
color: #ffffff;
font-weight: 600;
}
.s02-category-item .cat-name,
.s02-category-item .cat-count {
color: inherit;
font-weight: inherit;
}
/* Cụm 3: Stream of cards across full viewport */
.s02-cluster-3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
pointer-events: none;
z-index: 4;
}
.s02-cards-viewport {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
.s02-card {
position: absolute;
top: 50%;
left: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.s02-card.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 10;
}
.s02-card.is-prev,
.s02-card.is-next {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 3;
}
.s02-card.is-passed,
.s02-card.is-future {
opacity: 0;
visibility: hidden;
filter: blur(20px);
pointer-events: none;
z-index: 1;
}
/* TemplateHub mobile safety guard: prevent multiple active cards from overlapping */
.s02-card.is-active~.s02-card.is-active {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 1 !important;
}
.s02-card:not(.is-active):not(.is-prev):not(.is-next) {
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
}
.s02-card-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
width: 100%;
gap: 0;
}
.s02-card.is-active .s02-card-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
/* Text placed above image on mobile */
.s02-card-info {
order: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: auto;
max-width: 260px;
margin: 0 0 12px 0;
gap: 4px;
position: static;
opacity: 1;
visibility: visible;
}
.s02-card.is-active .s02-card-info {
order: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: auto;
max-width: 260px;
margin: 0 0 12px 0;
gap: 4px;
position: static;
opacity: 1;
visibility: visible;
}
/* Hide details on inactive cards so only blurred image shows */
.s02-card:not(.is-active) .s02-card-info {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
top: 0;
left: 0;
}
.s02-card-metric {
font-family: "Manrope", "SVN-Apparat", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: #ffffff;
text-transform: uppercase;
margin: 0 0 4px 0;
text-align: left;
}
.s02-card-text {
margin: 0;
text-align: left;
}
.s02-card-title,
.s02-card-sub {
font-family: "Manrope", sans-serif;
font-size: 13.5px;
font-weight: 400;
line-height: 1.35;
color: #ffffff;
margin: 0;
text-align: left;
}
.s02-card-image-wrap {
order: 2;
position: relative;
width: 240px;
height: 162px;
max-width: calc(100vw - 80px);
max-height: calc((100vw - 80px) * 236 / 350);
margin: 0;
border-radius: 0;
overflow: visible;
flex: 0 0 auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.s02-card.is-active .s02-card-image-wrap {
order: 2;
width: 240px;
height: 162px;
max-width: calc(100vw - 80px);
max-height: calc((100vw - 80px) * 236 / 350);
margin: 0;
flex: 0 0 auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.s02-card-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
display: block;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
/* Cụm 4: Bottom row stacked at bottom-left */
.s02-cluster-4 {
position: absolute;
bottom: 20px;
left: 20px;
right: auto;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 4px;
padding: 0;
z-index: 6;
width: auto;
}
.s02-scroll-prompt {
cursor: pointer;
margin: 0;
padding: 0;
}
.s02-scroll-text {
font-family: "Manrope", sans-serif;
font-size: 13.5px;
font-weight: 400;
line-height: 1.3;
color: rgba(255, 255, 255, 0.85);
}
.s02-counter {
display: flex;
align-items: baseline;
gap: 4px;
line-height: 1;
}
.s02-counter-current {
font-family: "Manrope", sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1;
color: #ffffff;
min-width: auto;
}
.s02-counter-total {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: rgba(255, 255, 255, 0.65);
padding-top: 0;
}
.s02-year {
display: none !important;
}
}
/* ==========================================================================
Section 03: Giải thưởng & Danh hiệu
Figma Node: 651:7348
- Two groups (Danh hiệu cấp quốc gia / Giải thưởng cấp quốc tế), each a
label column + a list of year/title/index rows.
- Hover a row -> row's text pill turns black/white (pure CSS :hover).
- Hover a row -> a floating medal image scale-reveals from the cursor
position and follows it while hovering, then scale-hides back into the
cursor's position on mouseleave (JS: initS03Awards in js/main.js).
========================================================================== */
/* --------------------------------------------------------------------------
Section 02 -> Section 03 handoff: Sticky Stacking & Overlapping Transition
1) PIN (Sticky) — Section 02 pins motionless once all 12 cards have cycled.
2) STACKING (Overlapping) — Section 03 slides up from below and smoothly
covers Section 02 directly like a new sheet of paper overlapping the old.
3) RELEASE — Once Section 03 fully covers Section 02, Section 02 unpins
and washes away underneath, yielding the screen to Section 03.
-------------------------------------------------------------------------- */
.s03-track {
position: relative;
width: 100%;
z-index: 10;
}
.s03 {
position: relative;
z-index: 10;
width: 100%;
min-height: calc(100vh - var(--header-height, 77px));
min-height: calc(100dvh - var(--header-height, 77px));
box-sizing: border-box;
background-color: var(--color-bg-page);
padding-block: clamp(48px, 6vw, 96px);
}
.s03-container {
position: relative;
}
.s03-head {
margin-bottom: 28px;
}
.s03-title {
margin: 0;
font-family: "SVN-Apparat", Georgia, serif;
font-size: clamp(32px, 3.6vw, 50px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
color: #000000;
}
@media(max-width: 490px) {
.s03-title {
display: flex;
flex-wrap: wrap;
}
.enter-1 {
width: 100%;
}
}
.s03-title-count {
color: rgba(0, 0, 0, 0.3);
}
.s03-divider {
width: 100%;
height: 1px;
background-color: #252525;
margin-block: 28px;
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
will-change: transform, opacity;
}
.s03-divider.is-animated {
transform: scaleX(1);
opacity: 1;
}
/* --------------------------------------------------------------------------
Award Group: label column + list
-------------------------------------------------------------------------- */
.s03-group {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
}
.s03-group-label {
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: #28BDBF;
text-transform: uppercase;
letter-spacing: 0.01em;
padding-top: 22px;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.s03-group-label.is-animated {
opacity: 1;
transform: translateY(0);
}
.s03-group-count {
font-weight: 600;
opacity: 0.55;
}
.s03-list {
flex: 0 1 816px;
max-width: 816px;
width: 100%;
min-width: 0;
margin: 0;
margin-left: auto;
list-style: none;
padding: 0;
}
/* The whole row gets the black highlight on hover.
Dividing lines animate left-to-right via ::after.
Content fades in and slides up from top to bottom. */
.s03-item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 217px;
padding-block: 18px;
border-bottom: none;
transition: none !important;
}
/* Line drawing left to right */
.s03-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-border);
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
will-change: transform;
}
.s03-item:last-child::after {
display: none;
}
.s03-item.is-animated::after {
transform: scaleX(1);
opacity: 1;
}
.s03-item:hover::after {
opacity: 0;
transition: none !important;
}
.s03-item-main {
display: flex;
align-items: baseline;
gap: clamp(24px, 3vw, 56px);
flex: 1 1 auto;
min-width: 0;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.s03-item.is-animated .s03-item-main {
opacity: 1;
transform: translateY(0);
}
.s03-item-year {
flex: 0 0 auto;
min-width: 92px;
padding-left: 0;
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--color-text-muted);
transition: none !important;
}
.s03-item-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: var(--color-dark-main);
transition: none !important;
}
.s03-item-index {
flex: 0 0 auto;
min-width: 24px;
text-align: right;
padding-right: 0;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--color-text-muted);
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.s03-item.is-animated .s03-item-index {
opacity: 1;
transform: translateY(0);
}
/* Instant active activation on hover (no delay) */
.s03-item:hover {
background-color: #252525;
border-color: transparent;
transition: none !important;
}
.s03-item:hover .s03-item-year,
.s03-item:hover .s03-item-title,
.s03-item:hover .s03-item-index {
color: #ffffff;
transition: none !important;
}
.s03-item:hover .s03-item-year {
padding-left: 24px;
transition: none !important;
}
.s03-item:hover .s03-item-index {
padding-right: 24px;
transition: none !important;
}
/* --------------------------------------------------------------------------
Floating medal image
JS (initS03Awards in main.js) sets left/top to the live cursor position
relative to .s03, then toggles .is-visible.
-------------------------------------------------------------------------- */
.s03-medal {
display: none !important;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 860px) {
.s03-group {
flex-direction: column;
gap: 14px;
}
.s03-group-label {
flex: none;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
padding-top: 0;
}
.s03-list {
flex: none;
width: 100%;
max-width: 100%;
margin-left: 0;
}
.s03-item {
flex-wrap: wrap;
gap: 16px;
}
.s03-item-main {
gap: 16px;
padding: 14px 12px;
}
.s03-item-year {
min-width: 72px;
font-size: 14px;
}
.s03-item-title {
font-size: 14px;
}
/* Hover-driven cursor-follow doesn't translate to touch input; keep the
layout clean and skip the floating image on small/touch screens. */
.s03-medal {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.s03-divider,
.s03-divider.is-animated,
.s03-group-label,
.s03-group-label.is-animated,
.s03-item::after,
.s03-item.is-animated::after,
.s03-item-main,
.s03-item.is-animated .s03-item-main,
.s03-item-index,
.s03-item.is-animated .s03-item-index {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================================
Section 04: Lãnh đạo doanh nghiệp (Madame Thái Hương) — Figma 967:10392
Full viewport height (minus header). Text shares .container's left edge
with the section above; the DotReveal portrait (js/dot-reveal.js) is
full height and flush to the right edge.
========================================================================== */
.s04 {
--s04-h: max(560px, calc(100svh - var(--header-height, 77px)));
--s04-pw: min(calc(var(--s04-h) * 6039 / 7479), 50vw);
position: relative;
min-height: var(--s04-h);
background: #fff;
overflow: hidden;
}
.s04-inner {
max-width: var(--content-max-width, 1440px);
margin-inline: auto;
padding-inline: var(--page-padding, 32px);
}
/* Width = up to 100px short of the portrait (which sits 60px off the right
edge); the left term mirrors .container's inset, which starts centring
past --content-max-width. */
.s04-text {
min-height: var(--s04-h);
max-width: calc(100vw - var(--s04-pw) - 60px - 100px - max(var(--page-padding, 32px), (100vw - var(--content-max-width, 1440px)) / 2 + var(--page-padding, 32px)));
display: flex;
flex-direction: column;
align-items: flex-start;
padding-block: 100px;
}
.s04-tag {
font: 700 16px/1.4 var(--font-body);
text-transform: uppercase;
color: #28BDBF;
}
.s04-quote {
margin: 32px 0 0;
font-family: var(--font-heading);
font-size: clamp(26px, 2.5vw, 36px);
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.02em;
color: rgba(0, 0, 0, 0.2);
}
@media (min-width: 1441px) {
.s04-quote {
font-size: 40px;
}
}
@media (max-width: 1440px) {
.s04-text {
padding-block: 80px;
}
}
.s04-quote p {
margin: 0;
}
.s04-quote-word {
transition: color 0.12s ease-out;
}
/* margin-bottom keeps the button clear of the author on short screens,
where the section grows past the viewport instead of overlapping. */
.s04-author {
margin-top: 32px;
margin-bottom: 40px;
max-width: 238px;
display: flex;
flex-direction: column;
gap: 12px;
}
.s04-author-name {
margin: 0;
font: 700 16px/1.3 var(--font-body);
color: #3b3b3b;
}
.s04-author-title {
margin: 0;
font: 400 14px/1.387 var(--font-body);
color: rgba(0, 0, 0, 0.6);
}
.s04-btn-outline {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 233px;
padding: 12px 24px;
font: 700 14px/1.32 var(--font-body);
text-transform: uppercase;
color: #000;
background: transparent;
border: 1px solid #000;
border-radius: 56px;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
.s04-btn-outline svg {
transition: transform 0.2s ease;
}
.s04-btn-outline:hover {
background: #000;
color: #fff;
}
.s04-btn-outline:hover svg {
transform: translateX(3px);
}
.s04-portrait {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 45vw;
}
.s04-portrait img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom right;
}
@media (max-width: 768px) {
.s04 {
min-height: 0;
padding-block: 56px 0;
}
.s04-text {
min-height: 0;
max-width: none;
padding-block: 0;
}
.s04-quote,
.s04-author {
margin-top: 24px;
}
.s04-author {
margin-bottom: 0;
}
.s04-btn-outline {
margin: 32px 0 0;
}
.s04-portrait {
position: relative;
right: auto;
height: auto;
width: min(100%, 420px);
margin: 32px auto 0;
}
}
/* ==========================================================================
Section 05: Lĩnh vực nông nghiệp công nghệ cao và sản xuất, chế biến sữa
Figma Node: 651:7460
Horizontal scroll-jack: vertical scroll page-wide, translated into
horizontal motion of a "rail" of frames while the section is pinned —
same pinning technique as Section 02 (tall track + sticky viewport),
just driving translateX instead of swapping card states. See
initS05HorizontalScroll in js/main.js for the scroll-to-position math.
========================================================================== */
/* Outer track: JS sets this element's height to (the rail's total
scrollable width - one viewport width) + one viewport height, i.e. a 1:1
mapping of vertical scroll px to horizontal pan px, giving the rail
exactly the scroll distance it needs to travel fully across (frames can
be wider than 100vw, e.g. the combo frame's locked-ratio image) while
the section stays pinned. */
.s05-track {
position: relative;
width: 100%;
}
@media (max-width: 768px) {
.s05-track {
height: 100% !important;
}
}
@media (max-width: 768px) {
.s05-sticky {
height: 100% !important;
}
}
/* Pinned viewport: sticks below the header for as long as the track has
scroll room left, clipping the rail so only one frame-width shows at a
time. */
.s05-sticky {
position: sticky;
top: var(--header-height, 77px);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height, 77px));
height: calc(100dvh - var(--header-height, 77px));
overflow: hidden;
box-sizing: border-box;
}
/* The horizontally-panning strip. JS sets transform: translateX(...) on
this directly in response to scroll — no transition here, since the
translate needs to track the scrollbar 1:1 (like Section 02's cards),
not ease independently of it. */
.s05-rail {
display: flex;
flex-direction: row;
height: 100%;
will-change: transform;
}
.s05-frame {
flex: 0 0 100vw;
width: 100vw;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
/* --------------------------------------------------------------------------
Section 05 Scene: intro text (Frame 1) + background photo (Image 1) + 5 text cards (Frame 3+).
initS05HorizontalScroll's measure() in js/main.js dynamically auto-calculates
the exact rendered width of Image 1 based on viewport height (ratio 2462/1800),
and sets the distance between Frame 1 and Frame 3 to match that width seamlessly,
completely filling the space with Image 1 so no white background is ever exposed
during scroll.
-------------------------------------------------------------------------- */
.s05-frame--parallax {
flex: 0 0 200vw;
width: 200vw;
position: relative;
overflow: hidden;
align-items: stretch;
justify-content: flex-start;
padding: 0;
background-color: #28BDBF;
}
.s05-layer {
position: absolute;
top: 0;
left: 0;
height: 100%;
box-sizing: border-box;
will-change: transform;
}
/* Locked to the photo's real ratio (2462/1800) — width is auto-computed
from that ratio against the fixed height. Positioned seamlessly between
Frame 1 (text) and Frame 3 (cards) by JS measure() so only Image 1 is
visible in the gap during scrolling. */
.s05-layer--image {
width: auto;
height: 100%;
aspect-ratio: 2462 / 1800;
z-index: 0;
overflow: hidden;
}
/* Resting flush at the scene's left edge — same visual position the old
combo-text panel had. Left padding is computed the same way
.s04-container arrives at its content inset (page padding, or more
once the viewport is wider than the shared content-max-width and the
container starts centering) so this text lines up pixel-for-pixel with
Section 04's left edge instead of just matching it by coincidence at
one viewport width. */
.s05-layer--text {
width: 70vw;
z-index: 1;
/* sits above .s05-layer--image so its opaque background covers the image as it slides across it */
display: flex;
align-items: stretch;
background-color: #28BDBF;
color: #ffffff;
padding-block: 100px;
padding-right: var(--page-padding, 32px);
padding-left: max(var(--page-padding, 32px),
calc((100vw - var(--content-max-width, 1440px)) / 2 + var(--page-padding, 32px)));
}
/* Resting position is set inline by JS (initS05HorizontalScroll,
measure()) as `left` — a small, deliberate overlap (CARD_OVERLAP_PX)
into .s05-layer--image's own ACTUAL right edge, same idea as the text
panel's overlap on the image's left edge, so only a narrow strip is
ever covered rather than a gap opening up between them. The JS entry
shift (translateX) still applies on top of this JS-set `left`, so the
whole group starts further off-screen and catches up ahead of the
rail's own pace, all 5 cards moving together as one block at one
shared speed — not staggered/individual. */
.s05-layer--cards {
display: flex;
flex-direction: row;
height: 100%;
z-index: 1;
/* same reasoning as .s05-layer--text */
}
/* Widened from the old 22vw text-only column to fit the new
title/body + index-number/media-square layout (see .s05-text-bottom
and .s05-card-media below) at a comfortable reading width. */
.s05-card {
flex: 0 0 min(70vw, 920px);
min-width: 480px;
box-sizing: border-box;
background-color: #ffffff;
color: #000000;
padding-block: 80px;
padding-inline: 64px;
transition: background-color 0.3s ease;
}
/* Hover state: card flips to a solid brand-blue fill with white text —
every text element inside gets its own color override below since
each one normally sets its own explicit color rather than inheriting. */
.s05-card:hover {
background-color: #28BDBF;
}
.s05-card:hover .s05-text-heading,
.s05-card:hover .s05-text-body,
.s05-card:hover .s05-rank-item p,
.s05-card:hover .s05-rank-label {
color: #ffffff;
}
.s05-card:hover .s05-text-index {
color: rgba(255, 255, 255, 0.35);
}
.s05-card:hover .s05-rank-item {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
/* Vertical divider between consecutive cards (not before the first) —
border-left instead of a gap on .s05-layer--cards so the cards stay
flush edge-to-edge, matching how they dock against the image before
them. */
.s05-card+.s05-card {
border-left: 1px solid rgba(0, 0, 0, 0.4);
}
/* Two stacked clusters, top and bottom (Figma node 726:10903) — NOT a
left/right column split. Cụm 1 (label + title) sits at the top; cụm 2
(arrow + body copy + scroll prompt) sits at the bottom, as one row of
its own. space-between pins each to its edge regardless of how tall the
frame is.
The column fills .s05-layer--text (which already carries the
page-padding inset), so no extra max-width/centering is applied here. */
.s05-intro-col {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
}
/* Cụm 1: label + 3-line title — align top */
.s05-intro-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.s05-tag {
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
/* Typography (font-family, size, weight, line-height, letter-spacing)
comes from the shared .heading-1 utility class (tokens.css) applied
alongside this one in the HTML — this rule only adds the color, so
there's no duplicate/conflicting type declaration between the two. */
.s05-headline {
margin: 0;
color: #ffffff;
}
/* Cụm 2: arrow (left) + body copy & scroll prompt (right) — align bottom.
The arrow lines up with the top of the paragraph block (flex-start),
not centered/bottom against it, matching the reference. */
.s05-intro-bottom {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: clamp(77px, 12.8vw, 224px);
/* was clamp(48px, 8vw, 140px), scaled up 60% */
}
/* assets/decor-mui-ten.svg — 60x28 native (so 60px width here renders it
at 1:1 scale), opacity already baked into the file (40% white fill), so
no color/opacity override needed here. */
.s05-arrow {
flex: 0 0 auto;
width: 60px;
height: auto;
display: block;
margin-top: 6px;
/* optical alignment with the first line of body text */
}
.s05-intro-right {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
max-width: 540px;
}
.s05-intro-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.s05-intro-text p {
margin: 0;
font-family: var(--font-body);
font-size: 20px;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
}
.s05-scroll-prompt {
font-family: var(--font-body);
font-size: 20px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
}
/* --------------------------------------------------------------------------
Lagging background image (.s05-layer--image)
-------------------------------------------------------------------------- */
.s05-image-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.s05-frame-img {
position: absolute;
top: 0;
/* Rendered wider than the wrap (and shifted left by half the overscan)
so the up-to-160px lag shift JS applies (IMAGE_LAG_MAX_PX in
initS05HorizontalScroll, js/main.js) never exposes an empty edge
inside the overflow: hidden wrap. Keep this in sync if that constant
changes. */
left: -160px;
width: calc(100% + 320px);
height: 100%;
/* width/height attributes on the ![]()
tag (2462x1800, the source
file's real pixel size) reserve the correct box before the image has
loaded, avoiding layout shift — same pattern as other ![]()
tags in
this project. */
object-fit: cover;
display: block;
/* transform is set inline by JS (initS05HorizontalScroll) for the
small counter-parallax shift — no transition here for the same reason
as .s05-rail: it needs to track scroll position exactly, not ease. */
}
/* --------------------------------------------------------------------------
Inner content shared by all 5 cards inside .s05-layer--cards (Tầm nhìn
/ Sứ mệnh / Vị thế thị trường / Làm chủ giá trị chuỗi / Vươn tầm quốc
tế) — each .s05-card is a plain flex child of the group (see
.s05-layer--cards above), not an independent rail frame any more.
-------------------------------------------------------------------------- */
/* Top cluster (heading + body) and bottom cluster (index number + media
square) pin to their respective edges, same space-between pattern as
.s05-intro-col. */
.s05-text-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
height: 100%;
}
.s05-text-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.s05-text-heading {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(32px, 3vw, 50px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
color: #000000;
transition: color 0.3s ease;
}
.s05-text-body {
margin: 0;
max-width: 640px;
font-family: var(--font-body);
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: rgba(0, 0, 0, 0.55);
transition: color 0.3s ease;
}
/* Bottom cluster: the big outline index number sits bottom-left, the
gray placeholder square bottom-right — both bottom-aligned to each
other (align-items: flex-end) since the square is taller than the
number's own line-height. */
.s05-text-bottom {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
width: 100%;
gap: 24px;
}
/* SVN-Apparat (var(--font-heading), same family as Section 06's
year labels) draws "0" with a diamond counter — that's the source of
the number's distinctive look, no extra icon/graphic needed. */
.s05-text-index {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(72px, 7vw, 128px);
font-weight: 400;
line-height: 1;
color: rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums;
transition: color 0.3s ease;
}
/* Icon tile — line-art PNG from assets/s5 (one per card's theme) centered
on a flat #F5F5F5 square. */
.s05-card-media {
flex: 0 0 auto;
width: 44%;
max-width: 340px;
aspect-ratio: 1 / 1;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
/* On hover the tile itself lightens to a translucent white-over-blue
tint (reading as a lighter blue square against the card's now-blue
fill), and the icon — dark line art on transparent PNG — is flipped
to solid white via filter rather than needing separate white-icon
assets: brightness(0) crushes every non-transparent pixel to black,
invert(1) then flips that black to white. */
.s05-card:hover .s05-card-media {
background-color: rgba(255, 255, 255, 0.2);
}
.s05-card:hover .s05-card-media-icon {
filter: brightness(0) invert(1);
}
.s05-card-media-icon {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: filter 0.3s ease;
}
/* "Vị thế thị trường" ranked list — a stack of "Top X / mốc + mô tả"
rows separated by hairline dividers, replacing the shared
title+paragraph body the other 4 cards use. Kept compact (18px, no
extra vertical gap beyond each row's own padding) since this card
still has to fit inside the fixed pinned-viewport height like every
other card in the rail, with no scroll of its own. */
.s05-rank-list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.s05-rank-item {
padding-block: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease;
}
.s05-rank-item:first-child {
padding-top: 0;
}
.s05-rank-item:last-child {
border-bottom: none;
}
.s05-rank-item p {
margin: 0;
font-family: var(--font-body);
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: rgba(0, 0, 0, 0.85);
transition: color 0.3s ease;
}
.s05-rank-label {
color: #000000;
transition: color 0.3s ease;
}
@media (max-width: 1440px) {
.s05-card {
padding: 40px;
}
.s05-text-heading {
font-size: 40px;
}
.s05-card-media {
width: 280px;
max-width: 280px;
}
.s05-headline {
font-size: 40px;
}
.s05-intro-text p,
.s05-scroll-prompt {
font-size: 14px;
}
.s05-text-body,
.s05-rank-item p {
font-size: 14px;
}
}
/* --------------------------------------------------------------------------
Responsive: same horizontal scroll-jack mechanic at every width, just
smaller type/spacing on narrow screens. The intro frame's title is a
flat 68px (per spec) — below 1024px it scales down with a clamp()
instead of staying flat, and cụm 2's arrow+text row stacks vertically
once there isn't enough width for both side by side.
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.s05-headline {
font-size: clamp(30px, 5vw, 40px);
}
}
@media (max-width: 640px) {
.s05-intro-bottom {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
@media (max-width: 768px) {
/* Not enough width (or screen depth) for the layered parallax scene —
drop the absolute positioning and JS motion entirely (its inline
transforms are neutralized below) and fall back to a plain stacked
column: image, then text, then all 5 cards (also stacked, not a
row — no room for that either), all static and full-width, same
simplification the rest of this section already applies on mobile. */
.s05-frame--parallax {
flex: 0 0 100vw;
width: 100vw;
flex-direction: column;
height: auto;
min-height: 100%;
}
.s05-layer {
position: static;
width: 100% !important;
height: auto;
transform: none !important;
}
.s05-layer--image {
height: 220px;
}
.s05-frame-img {
transform: none !important;
/* neutralize the JS-driven lag shift too, not just the layer wrappers */
}
.s05-layer--cards {
flex-direction: column;
}
.s05-layer--text,
.s05-card {
padding-block: 32px;
padding-inline: 20px;
}
.s05-card {
flex: 0 0 auto;
min-width: 0;
width: 100%;
}
/* Cards stack vertically here, so the divider moves from the side
(border-left) to the top edge. */
.s05-card+.s05-card {
border-left: none;
border-top: 1px solid rgba(0, 0, 0, 0.4);
}
.s05-headline {
font-size: clamp(26px, 32px, 36px);
}
.s05-text-heading {
font-size: 28px;
}
.s05-intro-text p {
font-size: 14px;
}
.s05-intro-right {
max-width: 100%;
}
.s05-scroll-prompt {
display: none;
}
.s05-text-body {
font-size: 14px;
}
.s05-text-index {
font-size: 32px;
}
.s05-card-media {
max-width: 120px;
}
}
/* ==========================================================================
Section 06: Lịch sử hình thành (History Timeline)
Figma Node: 732:1950
========================================================================== */
/* Was height: 100vh with the title/timeline/footer spaced out via
justify-content: space-between, letting whatever leftover viewport
height there was stretch the gaps between them. Now auto-height (hugs
its content, no longer forced full-viewport), so that leftover-space
trick has nothing to distribute any more — the title-to-timeline gap
is set explicitly on .s06-title below instead. */
.s06 {
position: relative;
width: 100%;
background-color: #f5f5f7;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
padding-top: 100px;
padding-bottom: 100px;
}
.s06-container {
position: relative;
width: 100%;
max-width: var(--content-max-width, 1440px);
margin-inline: auto;
padding-inline: var(--page-padding, 32px);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Section Title - Figma: SVN-Apparat, 40px, regular
margin-bottom is the title-to-timeline gap, narrowed to 2/3 of its
previous ~120px (space-between-derived, viewport-height-dependent)
value now that it's a fixed number instead — an estimate, since the
old value wasn't a fixed px to measure precisely; flag it if it still
needs tuning. */
.s06-title {
font-family: var(--font-heading);
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.02em;
color: #000000;
margin-top: 0;
margin-bottom: 80px;
margin-left: clamp(0px, calc(381px - var(--page-padding, 32px)), 349px);
}
/* Beyond the shared content-max-width (1440px), fix the title at a flat
50px instead of letting the clamp's vw term keep scaling it. */
@media (min-width: 1441px) {
.s06-title {
font-size: 50px;
}
}
/* Interactive Timeline Wrapper (starts aligned with title at x: 381px on desktop) */
.s06-interactive-wrap {
position: relative;
margin-left: clamp(0px, calc(381px - var(--page-padding, 32px)), 349px);
max-width: 1030px;
width: calc(100% - clamp(0px, calc(381px - var(--page-padding, 32px)), 349px));
margin-bottom: clamp(45px, 7.5vh, 80px);
/* Thu hẹp khoảng trống phần số 1 giữa Title và Timeline lại 20% */
}
/* Fixed Vertical Indicator Line (Vạch màu đen dọc cố định)
Extends from timeline top flush to the bottom edge of the milestone image */
.s06-fixed-indicator {
position: absolute;
top: 0;
left: 0;
width: 1.5px;
height: 420px;
background-color: #000000;
z-index: 10;
pointer-events: none;
}
/* Timeline Viewport: clips left and right, lets ruler pan */
.s06-timeline-viewport {
position: relative;
width: 100%;
height: 120px;
overflow: visible;
user-select: none;
}
/* The sliding timeline rail */
.s06-timeline-track {
display: flex;
position: absolute;
top: 0;
left: 0;
height: 120px;
will-change: transform;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Each Year Segment (Width 350px) */
.s06-year-segment {
position: relative;
flex: 0 0 350px;
width: 350px;
height: 120px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* Cột mốc cao nằm ngay trước mỗi năm (Ref số 2: cao hơn các cột tick khác) */
.s06-year-marker-line {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 120px;
background-color: #d9d9d9;
z-index: 1;
pointer-events: none;
}
/* Top part of segment: Year text - khoảng cách tới tick marks gấp đôi */
.s06-year-header {
height: 56px;
display: flex;
align-items: center;
position: relative;
margin-bottom: 24px;
}
.s06-year-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
padding-left: 20px;
font-family: var(--font-heading);
font-size: clamp(32px, 3vw, 40px);
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.01em;
color: #cccccc;
transition: color 0.35s ease, transform 0.35s ease;
text-align: left;
}
.s06-year-btn:hover {
color: #888888;
}
/* Active Year is Black */
.s06-year-segment.active .s06-year-btn {
color: #000000;
font-weight: 500;
}
/* Bottom part of segment: Ruler Tick Marks (Height 40px) */
.s06-ruler-ticks {
height: 40px;
width: 100%;
display: flex;
align-items: flex-end;
}
.s06-ticks-svg {
width: 100%;
height: 40px;
display: block;
}
/* Content Box (Cụm thông tin tương ứng - CỐ ĐỊNH, không di chuyển ngang) */
.s06-content-panel {
position: relative;
display: grid;
grid-template-areas: "milestone";
min-height: 240px;
padding-left: 24px;
box-sizing: border-box;
margin-top: 60px;
/* Figma: 60px gap from ticks to title */
margin-bottom: clamp(28px, 4.5vh, 60px);
}
.s06-content-inner {
grid-area: milestone;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.s06-content-inner.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.s06-text-group {
margin-bottom: 40px;
/* Figma: 40px gap from desc to image */
}
/* Milestone Title - Header 32px */
.s06-milestone-title {
font-family: var(--font-body);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: #000000;
margin-bottom: 16px;
/* Figma: 16px gap between title and desc */
}
/* Milestone Subtitle / Body - 20px */
.s06-milestone-desc {
font-family: var(--font-body);
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: rgba(0, 0, 0, 0.6);
}
/* Milestone Image - 240px width (3:2 ratio: 240x160), borderless and flat */
.s06-media-wrap {
width: 240px;
height: 160px;
aspect-ratio: 3 / 2;
border-radius: 0;
border: none;
overflow: hidden;
box-shadow: none;
background-color: #e5e5e7;
}
.s06-milestone-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
border: none;
outline: none;
transition: transform 0.4s ease;
}
.s06-media-wrap:hover .s06-milestone-img {
transform: scale(1.04);
}
/* Footer Row: Navigation Controls & Counter
No max-width here (unlike the title/wrap above) — this needs to span
the full container width so justify-content: space-between pushes the
counter all the way out to the section's actual right margin, not just
the 1030px column the timeline itself is constrained to.
align-items: flex-end bottom-aligns the counter against the nav
buttons instead of centering them against each other. */
.s06-footer {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
}
.s06-nav-buttons {
display: flex;
align-items: center;
gap: 12px;
}
/* 40x40px rounded squircle button */
.s06-btn-nav {
width: 40px;
height: 40px;
border-radius: 13px;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #000000;
padding: 0;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.s06-btn-nav svg {
width: 16px;
height: 16px;
stroke: currentColor;
transition: transform 0.2s ease;
}
.s06-btn-nav:hover:not(:disabled) {
background-color: #000000;
color: #ffffff;
transform: translateY(-1px);
}
.s06-btn-nav:active:not(:disabled) {
transform: translateY(0);
}
.s06-btn-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
box-shadow: none;
}
/* Counter: 01 /06 — pinned to the RIGHT edge of the viewport, flush with
the header's "NỘP HỒ SƠ" CTA button (.btn-submit-cta sits in
.header-container, which is full-bleed with a fixed 32px
padding-inline — no max-width). .s06-container, by contrast, caps at
var(--content-max-width) and centers once the viewport exceeds it, so
.s06-footer's own right edge (which right: 0 would otherwise use) sits
further in from the true viewport edge past that breakpoint. The
negative right offset below cancels exactly that extra centering
margin — max(0px, (100vw - content-max-width) / 2) — so the counter
lands at var(--page-padding) from the viewport edge at every width,
same as the nav CTA, instead of drifting inward on wide screens.
position: absolute + bottom: 0 (relative to .s06-footer, a plain flex
row whose height is just the 40px nav buttons) bottom-aligns it
against them without any hand-calculated offset. */
.s06-counter {
position: absolute;
right: calc(-1 * max(0px, (100vw - var(--content-max-width, 1440px)) / 2));
bottom: 0;
display: flex;
align-items: flex-start;
gap: 3px;
font-family: var(--font-body);
user-select: none;
}
.s06-counter-current {
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #000000;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.s06-counter-total {
font-size: 14px;
font-weight: 500;
line-height: 1;
color: rgba(0, 0, 0, 0.4);
padding-top: 1px;
}
/* ==========================================================================
Responsive Adaptations
========================================================================== */
@media (min-width: 1440px) {
.s06-content-panel {
margin-top: 60px;
margin-bottom: 60px;
}
}
@media (max-width: 1024px) {
.s06-title,
.s06-interactive-wrap {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.s06 {
height: auto;
min-height: 100vh;
padding-block: 48px;
}
.s06-title {
margin-bottom: 28px;
}
.s06-year-segment {
flex: 0 0 280px;
width: 280px;
}
.s06-content-panel {
min-height: auto;
margin-top: 24px;
margin-bottom: 36px;
}
.s06-milestone-title {
font-size: 24px;
}
.s06-media-wrap {
width: 140px;
height: 94px;
}
}
/* ==========================================================================
Section 07: Tiềm lực tài chính
Figma inaccessible — built from a spacing-annotated screenshot + final
render, no node id available.
3-phase pinned scroll sequence — see index.html's comment above this
section's markup for the full description, and initS07Stack() in
js/main.js for the scroll-progress math (modeled on
initS04QuoteScroll's pinned-progress + hold-fraction technique):
1) SLIDE — .s07-viewport (position: sticky) locks once it reaches
var(--header-height); pure CSS, no JS.
2) RISE — JS translates .s07-content up from just below the viewport
to centered, over the first RISE_FRACTION of .s07-pin's
scrollable slack.
3) HOLD — the remaining slack is spent with .s07-content parked at
translateY(0) before .s07-pin runs out and the page
releases into whatever follows.
Below S07_PIN_BREAKPOINT (js/main.js) this collapses to a plain
static stack (see the max-width media query at the bottom) — same
"don't trap taller-than-viewport content" reasoning as Section 04's
own mobile fallback.
========================================================================== */
.s07-pin {
position: relative;
width: 100%;
/* Pinned viewport + scroll slack tuned for immediate transition to Section 08 without dead scroll */
height: calc(180vh - var(--header-height, 77px));
}
.s07-viewport {
position: sticky;
top: var(--header-height, 77px);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height, 77px));
height: calc(100dvh - var(--header-height, 77px));
overflow: hidden;
}
.s07-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Transparent on purpose — this box covers the full sticky viewport, but
only .s07-content-inner (the actual 1190px-wide card) is white. That's
what lets the still-pinned background photo stay visible around the
card's edges once it's risen into view, instead of a full opaque sheet
blocking it out entirely. translateY is set by initS07Stack() each
frame; it starts at 100% (just below the viewport) and animates to 0
(centered) then holds — see the top-of-file comment. */
.s07-content {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(100%);
will-change: transform;
}
.s07-content-inner {
width: 100%;
max-width: 1190px;
margin-inline: auto;
box-sizing: border-box;
background-color: #ffffff;
padding-block: 60px;
padding-inline: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.s07-title {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.02em;
color: #000000;
}
.des {
font-family: Manrope;
font-weight: 400;
font-size: 16px;
line-height: 130%;
letter-spacing: 0%;
color: #000000CC;
}
/* Beyond the shared content-max-width (1440px), fix the title at a flat
50px instead of letting the clamp's vw term keep scaling it. */
@media (min-width: 1441px) {
.s07-title {
font-size: 50px;
}
}
/* --------------------------------------------------------------------------
Document cards
-------------------------------------------------------------------------- */
.s07-cards {
display: flex;
flex-direction: row;
gap: 24px;
width: 100%;
}
/* No shared `gap` here — the title/description pair reads as one tighter
text block (8px apart) while the icon-to-title and description-to-link
spacing is looser (20-24px), so each is set explicitly below instead of
one uniform value that would either cram or over-space one of the two
pairings. */
.s07-card {
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f5f5f7;
padding: 24px;
}
.s07-card-icon {
width: 48px;
height: 48px;
margin-bottom: 24px;
border-radius: 12px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.s07-card-icon img {
width: 24px;
height: 24px;
display: block;
}
.s07-card-title {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: #111827;
}
.s07-card-desc {
margin: 0 0 20px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-muted, #6b7280);
}
.s07-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-primary-blue, #005bac);
text-decoration: underline;
text-underline-offset: 2px;
}
.s07-card-link svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1200px) {
.s07-content-inner {
gap: 64px;
padding-inline: 48px;
}
}
/* Below this breakpoint (matches S07_PIN_BREAKPOINT in
initS07Stack(), js/main.js) the stacked cards can run taller than the
viewport, so the pin/rise/hold sequence is dropped in favor of a plain
static stack: background photo at a fixed height, card content
flowing normally right below it, no sticky/transform involved. */
@media (max-width: 900px) {
.s07-pin {
height: auto;
}
.s07-viewport {
position: relative;
top: auto;
height: auto;
overflow: visible;
}
.s07-bg-img {
position: relative;
inset: auto;
height: 56vh;
min-height: 320px;
}
.s07-content {
position: relative;
inset: auto;
transform: none;
padding-block: 32px;
}
.s07-cards {
flex-direction: column;
}
}
@media (max-width: 640px) {
.s07-content-inner {
gap: 40px;
padding-block: 40px;
padding-inline: 20px;
}
.s07-card {
padding: 24px 20px;
}
}
/* ==========================================================================
Section: Đổi mới - Sáng tạo
- Sticky pinned viewport matching s08 behavior
- White card container with text intro & bullets
- Direction-aware wipe image slide showcase
========================================================================== */
.innov-pin {
position: relative;
width: 100%;
height: calc(var(--header-height, 77px) + 200vh);
background-color: #F5F5F7;
}
.innov-viewport {
position: sticky;
top: var(--header-height, 77px);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height, 77px));
height: calc(100dvh - var(--header-height, 77px));
background-color: #F5F5F7;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.innov-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding-inline: clamp(24px, 4vw, 48px);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.innov-title {
margin: 0 0 clamp(20px, 2.5vh, 28px) 0;
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
font-size: clamp(32px, 3.2vw, 48px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
color: #000000;
}
.innov-card-box {
width: 100%;
height: clamp(460px, 58vh, 560px);
display: flex;
flex-direction: row;
background-color: #ffffff;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
.innov-content-col {
flex: 1 1 50%;
padding: clamp(32px, 3.5vw, 48px);
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ffffff;
box-sizing: border-box;
overflow-y: auto;
}
.innov-lead {
margin: 0 0 28px 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: clamp(15px, 1.2vw, 17px);
font-weight: 700;
line-height: 1.6;
color: #1e293b;
}
.innov-bullet-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.innov-bullet-item {
position: relative;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.innov-bullet-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #94a3b8;
}
.innov-bullet-title {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 15px;
font-weight: 700;
color: #1e293b;
line-height: 1.45;
}
.innov-bullet-desc {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 13.5px;
line-height: 1.6;
color: #475569;
}
.innov-visual-col {
flex: 1 1 50%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #0f172a;
}
.innov-img-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
pointer-events: none;
}
.innov-img-slide.no-anim {
transition: none !important;
}
.innov-img-slide.reveal-from-bottom {
clip-path: inset(100% 0 0 0);
}
.innov-img-slide.reveal-from-top {
clip-path: inset(0 0 100% 0);
}
.innov-img-slide.is-active {
clip-path: inset(0 0 0 0);
pointer-events: auto;
}
.innov-img-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.innov-pin {
height: auto;
}
.innov-viewport {
position: relative;
top: 0;
height: auto;
padding-block: 40px;
}
.innov-card-box {
flex-direction: column;
height: auto;
}
.innov-visual-col {
height: auto;
display: flex;
flex-direction: column;
gap: 16px;
background-color: transparent;
}
.innov-img-slide {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
clip-path: none !important;
pointer-events: auto;
z-index: auto !important;
}
}
/* ==========================================================================
Section 08: Chất lượng Sản phẩm & Dịch vụ
Strictly styled according to reference screenshot:
- Full viewport blue background
- Left Column: Sticky Title (exact 3-line break) & Description
- Right Zone: Inset by 32px from top, bottom, and right
* Content Column: 4 cards with accordion (Card 01) & structured lists
* Visual Column: Synchronized image showcase switching on card completion
========================================================================== */
.s08-pin {
position: relative;
width: 100%;
height: calc(var(--header-height, 77px) + 320vh);
background-color: #F5F5F7;
}
.s08-viewport {
position: sticky;
top: var(--header-height, 77px);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height, 77px));
height: calc(100dvh - var(--header-height, 77px));
background-color: #28BDBF;
display: flex;
flex-direction: row;
overflow: hidden;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Left Column: Solid Blue, Stationary Title & Description
-------------------------------------------------------------------------- */
.s08-left-col {
flex: 0 0 34%;
max-width: 34%;
height: 100%;
box-sizing: border-box;
}
.s08-left-inner {
height: 100%;
padding: 40px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.s08-title {
margin: 0;
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
font-size: clamp(34px, 3.5vw, 48px);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.02em;
color: #fff;
}
/* Beyond the shared content-max-width (1440px), fix the title at a flat
50px instead of letting the clamp's vw term keep scaling it. */
@media (min-width: 1441px) {
.s08-title {
font-size: 50px;
}
}
.s08-title-line {
display: block;
white-space: nowrap;
}
.s08-desc {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 13.5px;
line-height: 1.65;
color: #fff;
max-width: 320px;
}
/* --------------------------------------------------------------------------
Right Zone: Floating Card Inset 32px (top, bottom, right)
-------------------------------------------------------------------------- */
.s08-right-zone {
flex: 1 1 66%;
margin: 32px 32px 32px 0;
height: calc(100% - 64px);
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: row;
background-color: #ffffff;
box-shadow: none !important;
box-sizing: border-box;
}
/* Content Viewport (Left sub-column inside right zone) */
.s08-content-viewport {
flex: 1 1 54%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #ffffff;
}
.s08-content-track {
width: 100%;
padding-block: 36px 48px;
padding-inline: 0;
display: flex;
flex-direction: column;
gap: 56px;
box-sizing: border-box;
will-change: transform;
}
.s08-card {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
padding-inline: 36px 32px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.s08-card:last-child {
border-bottom: none;
padding-bottom: 20px;
}
.s08-card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 14px 20px;
background-color: #f1f5f9;
color: #475569;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 20px;
font-weight: 500;
border-radius: 12px;
letter-spacing: 0.02em;
}
.s08-card-heading {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
line-height: 1.35;
color: #0f172a;
letter-spacing: -0.01em;
}
/* Accordion List for Card 01 */
.s08-accordion-list {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.s08-accordion-item {
background-color: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.s08-accordion-item:hover {
background-color: #f1f5f9;
border-color: #e2e8f0;
}
.s08-accordion-item.is-open {
background-color: #ffffff;
border-color: #cbd5e1;
}
.s08-accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 13.5px;
font-weight: 600;
color: #1e293b;
transition: color 0.2s ease;
}
.s08-accordion-item.is-open .s08-accordion-trigger {
color: var(--color-primary-blue, #005bac);
}
.s08-accordion-icon {
font-size: 16px;
font-weight: 500;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
line-height: 1;
user-select: none;
}
.s08-accordion-icon .icon-minus {
display: none;
}
.s08-accordion-item.is-open .s08-accordion-icon .icon-plus {
display: none;
}
.s08-accordion-item.is-open .s08-accordion-icon .icon-minus {
display: inline;
color: var(--color-primary-blue, #005bac);
font-size: 18px;
font-weight: 600;
}
.s08-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
padding: 0 16px;
}
.s08-accordion-item.is-open .s08-accordion-body {
max-height: 200px;
padding-bottom: 14px;
}
.s08-accordion-text {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 12.5px;
line-height: 1.55;
color: #64748b;
margin-bottom: 10px;
}
.s08-doc-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 12.5px;
font-weight: 600;
color: var(--color-primary-blue, #005bac);
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.s08-doc-link:hover {
opacity: 0.85;
transform: translateX(2px);
}
.s08-doc-link svg {
width: 13px;
height: 13px;
}
/* Bullet List for Cards 02, 03, 04 */
.s08-bullet-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.s08-bullet-item {
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
padding-left: 18px;
}
.s08-bullet-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #94a3b8;
}
.s08-bullet-title {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 14px;
font-weight: 700;
color: #1e293b;
line-height: 1.45;
}
.s08-bullet-desc {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 13px;
line-height: 1.6;
color: #475569;
}
.s08-bullet-desc strong {
font-weight: 700;
color: #1e293b;
}
.s08-sub-bullets {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
padding-left: 12px;
}
.s08-sub-bullet-item {
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 12.5px;
line-height: 1.55;
color: #475569;
position: relative;
padding-left: 10px;
}
.s08-sub-bullet-item::before {
content: '•';
position: absolute;
left: 0;
color: #94a3b8;
}
/* --------------------------------------------------------------------------
Visual Column: Image Showcase
-------------------------------------------------------------------------- */
.s08-visual-col {
flex: 1 1 46%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #0f172a;
}
/* Wipe reveal, direction-aware — the image itself never moves ("vị trí
giữ nguyên"); only how much of it is visible changes, and which edge
the reveal is anchored to flips with scroll direction (set by
initS08Cards() in js/main.js via .reveal-from-bottom /
.reveal-from-top):
- Scrolling down (forward): the incoming slide is
.reveal-from-bottom — top-inset shrinks 100% -> 0%, so the visible
sliver stays anchored to the BOTTOM edge and grows upward,
matching "cố định top, kéo mask bottom để ẩn ảnh cũ".
- Scrolling up (backward): the incoming slide is .reveal-from-top —
bottom-inset shrinks 100% -> 0%, so the visible sliver stays
anchored to the TOP edge and grows downward instead — the mirror
image of the forward case.
Only the INCOMING slide's clip-path is ever animated. Every slide
that has been revealed before is simply left at clip-path: inset(0)
(fully visible) forever after — z-index (set inline per element by
JS, a monotonically increasing counter bumped on every activation)
is what keeps only the most-recently-revealed slide actually visible,
by stacking it above all earlier ones. An earlier version also
animated the outgoing slide's clip-path back closed at the same
time, but that slide's own clip-path was left over from whatever
direction it was PREVIOUSLY revealed from — not necessarily matching
the current transition's direction — so the two independent
animations didn't line up frame-for-frame and a gap of the section's
dark background flashed through between them. Never touching the
outgoing slide again sidesteps that entirely. */
.s08-img-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
pointer-events: none;
}
.s08-img-slide.no-anim {
transition: none !important;
}
.s08-img-slide.reveal-from-bottom {
clip-path: inset(100% 0 0 0);
}
.s08-img-slide.reveal-from-top {
clip-path: inset(0 0 100% 0);
}
.s08-img-slide.is-active {
clip-path: inset(0 0 0 0);
pointer-events: auto;
}
.s08-img-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --------------------------------------------------------------------------
Responsive Mobile Fallback (<= 900px)
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.s08-pin {
height: auto;
}
.s08-viewport {
position: relative;
top: 0;
height: auto;
flex-direction: column;
}
.s08-left-col {
flex: none;
max-width: 100%;
width: 100%;
height: auto;
}
.s08-left-inner {
padding: 36px 20px;
gap: 28px;
}
.s08-right-zone {
flex: none;
width: auto;
margin: 0 16px 32px 16px;
height: auto;
flex-direction: column;
}
.s08-content-viewport {
height: auto;
overflow: visible;
}
.s08-content-track {
transform: none !important;
padding-block: 28px;
padding-inline: 0;
gap: 40px;
}
.s08-card {
padding-inline: 20px;
padding-bottom: 36px;
}
.s08-visual-col,
.s08-img-slide {
display: none !important;
}
}
/* ==========================================================================
Section 09: Phát triển & Tác động ESG
Background image (BG ESG.png) pins sticky at the header for the whole
section; the title+cards stack scrolls THROUGH it — rising in from
below, passing through the centered reading position, then continuing
on and exiting off the top — rather than rising once and holding in
place. See initS09Stack() in js/main.js for the translateY math
(100% -> -100%, not 100% -> 0%).
========================================================================== */
.s09-pin {
position: relative;
width: 100%;
/* Roughly double a plain rise-and-hold's slack, since the content now
travels twice the distance (in below, all the way out above)
instead of stopping once centered. */
height: calc(260vh - var(--header-height, 77px));
background-color: #0b1f10;
}
.s09-viewport {
position: sticky;
top: var(--header-height, 77px);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height, 77px));
height: calc(100dvh - var(--header-height, 77px));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Full Viewport Background Image */
.s09-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
}
/* --------------------------------------------------------------------------
Scrolling Content Stack (Width 920px)
-------------------------------------------------------------------------- */
/* align-items: center gives translateY: 0% (the midpoint of the
100% -> -100% sweep in initS09Stack()) a symmetric meaning — the
stack centered in the viewport — for the "pass through" motion to
read cleanly as it enters from below and exits off the top. */
.s09-content {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding-inline: 20px;
box-sizing: border-box;
transform: translateY(100%);
will-change: transform;
}
.s09-content-inner {
width: 100%;
max-width: 920px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
box-sizing: border-box;
}
/* Section Title */
.s09-title {
margin: 0;
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
font-size: clamp(34px, 3.6vw, 46px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.02em;
color: #ffffff;
text-align: center;
}
/* Beyond the shared content-max-width (1440px), fix the title at a flat
50px instead of letting the clamp's vw term keep scaling it. */
@media (min-width: 1441px) {
.s09-title {
font-size: 50px;
}
}
.s09-title span {
display: block;
}
/* --------------------------------------------------------------------------
ESG Cards (Width 920px, 2-column layout matching reference Frame)
Large gap between cards + a translucent, blurred "frosted glass" fill
(background-color at 80% opacity + backdrop-filter: blur) so the
forest background stays faintly visible/blurred through each card
instead of sitting on a flat opaque fill.
-------------------------------------------------------------------------- */
.s09-cards {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
/* A bit of extra travel after the last card before the stack fully
exits off the top of the viewport. */
padding-bottom: 100px;
}
.s09-card {
width: 100%;
background-color: rgba(245, 245, 245, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 0;
padding: 40px 48px;
box-sizing: border-box;
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.s09-card:hover {
background-color: rgba(238, 238, 238, 0.85);
transform: translateY(-2px);
}
/* Left Title Column */
.s09-card-title {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: #111827;
}
/* Right Content Column */
.s09-card-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.s09-card-bullet {
position: relative;
margin: 0;
padding-left: 16px;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 15px;
line-height: 1.6;
color: #27272a;
}
.s09-card-bullet::before {
content: '•';
position: absolute;
left: 0;
top: -1px;
color: #52525b;
font-size: 16px;
}
.s09-card-bullet strong {
font-weight: 700;
color: #09090b;
}
/* --------------------------------------------------------------------------
Responsive Mobile Fallback (<= 768px)
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.s09-pin {
height: auto;
}
.s09-viewport {
position: relative;
top: 0;
height: auto;
min-height: 100vh;
padding-block: 60px;
}
.s09-content {
position: relative;
transform: none !important;
padding-inline: 16px;
}
.s09-cards {
gap: 20px;
}
.s09-card {
grid-template-columns: 1fr;
gap: 14px;
padding: 20px 20px;
}
.s09-title {
font-size: 32px;
}
}
/* ==========================================================================
Section 10: Liên hệ cập nhật thông tin hồ sơ doanh nghiệp (CTA)
Design: Deep Blue Background (#28BDBF), White SVN-Apparat Heading,
Manrope descriptive copy & pill outline action button.
========================================================================== */
.s10-cta {
position: relative;
width: 100%;
/* min-height (not a hard height) so it never clips content if any
breakpoint's title+desc+button stack ends up taller than the
target — but in every normal case it settles at exactly that
target height. */
min-height: 600px;
display: flex;
/* stretch (the default, spelled out for clarity): .s10-container fills
this section's full height so its own flex-start/flex-end children
(the title vs. the description+button column) actually have room
to land at opposite corners — align-items: center here would
collapse that back into a single vertically-centered block. */
align-items: stretch;
background-color: #2566D0;
color: #ffffff;
padding-block: clamp(64px, 8vw, 110px);
overflow: hidden;
box-sizing: border-box;
}
.s10-cta .s10-container {
max-width: 1250px;
margin: 0 auto;
}
/* Beyond 1440px, retain large display scale (title 68px, body 24px) and 800px min-height */
@media (min-width: 1441px) {
.s10-cta {}
.s10-title {
font-size: 68px;
line-height: 1.22;
}
.s10-desc {
font-size: 24px;
}
}
/* Full-bleed, same as .header-container / .footer-container — no
max-width/centering, just a flat 32px inset on both sides, so the
title's left edge lines up with the nav logo and the footer logo
instead of sitting further in due to the shared .container's
1440px-centered max-width. */
/* Title (left) anchors to the top of the row; the description+button
column overrides that back down to the bottom via align-self below —
the two columns intentionally sit at opposite corners rather than
lining up on either edge. */
.s10-container {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(32px, 5vw, 64px);
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-inline: 32px;
box-sizing: border-box;
}
/* Left Column: Heading — wide enough that "để cập nhật thông tin" (the
longest of the 3 forced line breaks below) fits on one line at 68px
instead of wrapping a second time inside its own span. */
.s10-left {
flex: 0 1 645px;
max-width: 645px;
align-self: flex-start;
}
.s10-title {
margin: 0;
font-family: var(--font-heading, "SVN-Apparat", sans-serif);
font-size: 50px;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
color: #ffffff;
text-align: left;
}
.s10-title span {
display: block;
}
/* Right Column: Copy & Pill Button — bottom-anchored (align-self, not
the row's own align-items) while .s10-left stays top-anchored, so the
two columns sit at opposite corners of the row instead of sharing one
edge. max-width is sized so .s10-desc wraps to exactly 3 lines at its
20px size; the button (width: 100% of this column) matches that same
width automatically. */
.s10-right {
flex: 0 0 467px;
width: 100%;
max-width: 467px;
align-self: flex-end;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 42px;
}
@media (max-width: 1440px) {
.s10-right {
max-width: 610px;
}
}
.s10-desc {
margin: 0;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
text-align: left;
}
/* Pill Outline CTA Button */
.s10-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 66px;
padding-inline: 28px;
border-radius: 9999px;
border: 1.5px solid rgba(255, 255, 255, 0.85);
background-color: transparent;
color: #ffffff;
font-family: var(--font-body, "Manrope", sans-serif);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
box-sizing: border-box;
}
.s10-btn:hover {
background-color: rgba(255, 255, 255, 0.16);
border-color: #ffffff;
transform: translateY(-2px);
}
.s10-btn:active {
transform: translateY(0);
background-color: rgba(255, 255, 255, 0.22);
}
.s10-btn-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease;
}
.s10-btn:hover .s10-btn-icon {
transform: translateX(3px);
}
/* --------------------------------------------------------------------------
Responsive Mobile Fallback (<= 768px)
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.s10-cta {
min-height: auto;
padding-block: 48px;
}
.s10-container {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.s10-left {
max-width: 100%;
}
.s10-right {
align-self: stretch;
max-width: 100%;
width: 100%;
align-items: flex-start;
gap: 22px;
}
.s10-desc {
font-size: 16px;
text-align: left;
}
.s10-btn {
height: 64px;
font-size: 14px;
max-width: 100%;
}
.s10-title {
font-size: 28px;
line-height: 1.25;
}
}
/* ==========================================================================
Site Footer — SHARED component, identical to the home page (css/styles.css)
========================================================================== */
.site-footer {
background: #28BDBF;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__inner {
min-height: 118px;
padding: 24px 32px;
display: flex;
align-items: center;
gap: 40px;
font-family: "Google Sans Flex", var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 1.41;
letter-spacing: -.12px;
color: rgba(255, 255, 255, .8);
}
.site-footer__logo {
width: 280px;
height: 46px;
object-fit: cover;
flex: none;
}
.site-footer .unit p {
margin-bottom: 9px;
color: rgba(255, 255, 255, 0.80);
font-family: "Google Sans Flex", var(--font-body);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 141%;
/* 16.92px */
letter-spacing: -0.12px;
}
.site-footer__editor {
margin-left: auto;
white-space: nowrap;
}
.site-footer__addr {
margin-left: 28px;
white-space: nowrap;
}
.site-footer__addr a {
color: inherit;
text-decoration: none;
}
.site-footer__addr a:hover {
text-decoration: underline;
}
@media (max-width: 900px) {
.site-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-block: 32px;
}
.site-footer__editor,
.site-footer__addr {
margin-left: 0;
white-space: normal;
}
}