/* ==========================================================================
   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
   <html> 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: #2555ad;
}

/* 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: #2555ad;
  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;
}

.products-tin-tuc {
  background: #fff !important;
}

.community__block--products {
  position: relative;
  width: 100%;
  background: #F5F5F7;
  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: #003D79;
}

@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: 767px) {
  .box-category[data-layout="3"] .box-category-middle .box-category-item .cc__chips {
    padding: 8px;
  }

  .box-category[data-layout="3"] .box-category-middle .box-category-item .chip {
    padding: 6px !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;
  max-height: 54px;
  overflow: hidden;
  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: #003D79;
}

.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%;
  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: #003D79;
  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: #003D79;
  color: #ffffff;
}

.box-category[data-layout="3"] .swiper-button-next {
  background-color: #003D79;
  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: #003D79;
}

@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;
  max-height: 81px;
  overflow: hidden;
  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: #003D79;
}

.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: 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 .box-category-sapo {
  display: none;
}

.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%;
  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: #003D79;
  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: #003D79;
  color: #ffffff;
}

.box-category[data-layout="4"] .swiper-button-next {
  background-color: #003D79;
  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, 0px));
  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 {
  color: #003D79;
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 132%;
  /* 18.48px */
  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: 500;
  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: 60px;
  max-height: 60px;
  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ó <br>) không được tự ngắt thêm dòng */
@media (min-width: 861px) {
  .s01-headline {
    white-space: nowrap;
    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 {
    width: 140px;
    height: auto;
    max-height: 70px;
  }

  .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 - Vị Thế Ngành 2025
   Giao diện chuẩn theo thiết kế Figma:
   - Desktop:
       + Left: Tag "TẬP ĐOÀN TH", Title "Thành Tựu Vị Thế Ngành 2025",
               Counter "01 /09" + Text "Cuộn xuống" ở góc dưới bên trái
       + Right: Stream cards cuộn thẳng đứng (Straight vertical column)
       + Active card: rõ nét (blur: 0, opacity: 1), nằm giữa
       + Inactive cards (prev/next): che mờ (blur: 12px, opacity: 0.65), cả ảnh và text đều hiện mờ
   - Mobile (theo screenshot Figma mới):
       + Top-Left: Title "Thành Tựu / Trong Năm 2025"
       + Top-Right: Card trước (prev) thu nhỏ ~50%, nằm sát mép phải, ảnh mờ (blur: 10px), ẩn text
       + Center-Left: Card active hiển thị ảnh to sắc nét, text mô tả nằm ngay dưới ảnh
       + Bottom-Right: Card sau (next) thu nhỏ ~50%, nằm sát mép phải, ảnh mờ (blur: 10px), ẩn text
       + Bottom-Left: Bộ đếm "02 /09" và "Cuộn xuống" xếp chồng lên nhau ở góc dưới bên trái
   ========================================================================== */

/* Outer Scroll Track Spacer (provides scroll distance for scrubbing) */
.s02-track {
  position: relative;
  width: 100%;
  height: 550vh;
  height: 550dvh;
  background-color: #003d79;
}

/* Pinned Sticky Viewport (Full screen viewport height 100vh from top: 0, no white gap above) */
.s02-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #003d79;
  color: #ffffff;
  box-sizing: border-box;
  z-index: 1;
}

/* Background Globe Graphic (Full coverage, matching Figma design) */
.s02-bg-globe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.s02-globe-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* --------------------------------------------------------------------------
   Sticky Main Layout Container
   -------------------------------------------------------------------------- */
.s02-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Left Pane: Title, Tag, Counter, Scroll Prompt
   -------------------------------------------------------------------------- */
.s02-left-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 44%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(40px, 6vh, 72px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  z-index: 5;
  pointer-events: none;
}

.s02-left-top {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.s02-tag {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
  display: block;
}

.s02-title {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.s02-left-bottom {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: clamp(36px, 4vw, 64px);
  pointer-events: auto;
}

/* Counter Frame: 01 /09 */
.s02-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.s02-counter-current {
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  display: inline-block;
  min-width: 42px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.s02-counter-total {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 2px;
}

/* Scroll Prompt: Cuộn xuống */
.s02-scroll-prompt {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.s02-scroll-prompt:hover .s02-scroll-text {
  color: #ffffff;
}

.s02-scroll-text {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Right Pane: Vertical 3-Card Stream (Desktop)
   -------------------------------------------------------------------------- */
.s02-cluster-3 {
  position: absolute;
  top: 0;
  right: clamp(24px, 4vw, 56px);
  width: clamp(520px, 52vw, 760px);
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.s02-cards-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Base card item - Desktop defaults */
.s02-card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  filter: blur(14px);
  z-index: 1;
  will-change: transform, filter, opacity;
}

.s02-card-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  width: 100%;
}

/* Card Image Wrap */
.s02-card-image-wrap {
  position: relative;
  width: clamp(270px, 23vw, 360px);
  height: clamp(170px, 14.5vw, 225px);
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box;
  flex: 0 0 auto;
  box-shadow: 0 14px 32px rgba(0, 15, 50, 0.35);
}

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

/* Card Info Column */
.s02-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  max-width: 360px;
  min-width: 220px;
}

.s02-card-text {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 10, 35, 0.4);
}

/* Card State Classes (Desktop) */
.s02-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0px);
  z-index: 10;
}

.s02-card.is-prev,
.s02-card.is-next {
  opacity: 0.65;
  visibility: visible;
  pointer-events: auto;
  filter: blur(12px);
  z-index: 4;
}

.s02-card.is-passed,
.s02-card.is-future {
  opacity: 0;
  visibility: hidden;
  filter: blur(24px);
  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(24px);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  .s02-title {
    font-size: clamp(48px, 3.6vw, 60px);
  }

  .s02-card-image-wrap {
    width: 370px;
    height: 236px;
  }
}

@media (max-width: 1200px) and (min-width: 993px) {
  .s02-cluster-3 {
    width: 500px;
  }

  .s02-card-image-wrap {
    width: 270px;
    height: 175px;
  }

  .s02-card-info {
    max-width: 210px;
  }

  .s02-card-text {
    font-size: 15px;
  }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE (<= 992px)
   Khớp chuẩn 100% theo bản thiết kế mobile Figma:
   - Top-Left: Tiêu đề
   - Top-Right: Card trước (thu nhỏ ~50%, ảnh mờ, ẩn text, áp mép phải)
   - Center-Left: Card active hiển thị ảnh lớn sắc nét, text mô tả ngay dưới ảnh
   - Bottom-Right: Card sau (thu nhỏ ~50%, ảnh mờ, ẩn text, áp mép phải)
   - Bottom-Left: Bộ đếm 02/09 và "Cuộn xuống" xếp dọc góc trái
   ========================================================================== */
@media (max-width: 992px) {
  .s02-track {
    height: 500vh;
    height: 500dvh;
    background-color: #003d79;
  }

  .s02-sticky {
    top: 0;
    height: 100vh;
    height: 100dvh;
    background-color: #003d79;
  }

  .s02-bg-globe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .s02-globe-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
  }

  .s02-viewport {
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Khung chứa các phần tử bên trái phủ trọn màn hình để định vị độc lập */
  .s02-left-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    pointer-events: none;
    z-index: 5;
  }

  .s02-left-top {
    position: absolute;
    top: clamp(28px, 6.5vh, 48px);
    left: clamp(14px, 4vw, 24px);
    pointer-events: auto;
  }

  /* Ẩn tag phụ "TẬP ĐOÀN TH" trên mobile theo ảnh Figma */
  .s02-tag {
    display: none !important;
  }

  .s02-title {
    font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.22;
    letter-spacing: -0.015em;
  }

  /* Góc dưới bên trái: Bộ đếm "02 /09" và "Cuộn xuống" xếp chồng theo cột dọc */
  .s02-left-bottom {
    position: absolute;
    bottom: clamp(28px, 5vh, 44px);
    left: clamp(14px, 4vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: auto;
  }

  .s02-counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
  }

  .s02-counter-current {
    font-size: clamp(28px, 7vw, 36px);
    font-weight: 700;
    line-height: 1;
    min-width: 0;
  }

  .s02-counter-total {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }

  .s02-scroll-prompt {
    cursor: pointer;
  }

  .s02-scroll-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
  }

  /* Khung chứa các Card trên mobile phủ trọn viewport */
  .s02-cluster-3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
  }

  .s02-cards-viewport {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Thẻ card trên mobile: Căn theo lề trái, transform-origin chuẩn để co giãn đối xứng */
  .s02-card {
    position: absolute;
    top: 50%;
    left: clamp(14px, 4vw, 24px);
    width: clamp(210px, 67vw, 260px);
    max-width: calc(100% - clamp(28px, 8vw, 48px));
    transform-origin: 0 50%;
    pointer-events: none;
  }

  .s02-card-inner {
    position: relative;
    display: block;
    width: 100%;
  }

  .s02-card-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9.6;
    flex: 0 0 auto;
    box-shadow: 0 10px 24px rgba(0, 15, 45, 0.35);
  }

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

  .s02-card-info {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    max-width: clamp(200px, 64vw, 250px);
    margin: 0;
    padding: 0;
    display: none;
  }

  .s02-card-text {
    font-size: clamp(12.5px, 3.6vw, 14.5px);
    line-height: 1.5;
    font-weight: 500;
    color: #ffffff;
    text-align: left;
    text-shadow: 0 2px 8px rgba(0, 10, 30, 0.5);
  }

  /* Card không active (prev/next) trên mobile:
     Chỉ hiện ảnh thumbnail mờ bên góc phải, ẩn hoàn toàn text mô tả */
  .s02-card.is-prev .s02-card-info,
  .s02-card.is-next .s02-card-info,
  .s02-card.is-passed .s02-card-info,
  .s02-card.is-future .s02-card-info {
    display: none !important;
  }

  .s02-card.is-active .s02-card-info {
    display: block !important;
  }

  .s02-card.is-prev,
  .s02-card.is-next {
    opacity: 0.7;
    visibility: visible;
    filter: blur(10px);
    pointer-events: auto;
    z-index: 4;
  }

  .s02-card.is-active {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
    pointer-events: auto;
    z-index: 10;
  }

  .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;
  }
}

/* ==========================================================================
   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, 0px));
  min-height: calc(100dvh - var(--header-height, 0px));
  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;
  }

  .s03-title .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;
}

.s03-group-label img {
  display: none;
}

/* --------------------------------------------------------------------------
   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: var(--color-primary-blue);
  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-main img {
  display: none;
}

.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 (removed per user request) */
.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-index {
    display: none;
  }

  .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)
   Giao diện chuẩn theo thiết kế:
   - Trái: Ảnh chân dung Madame Thái Hương tràn đáy, căn trái, nhìn sang phải.
   - Phải: Tag LÃNH ĐẠO DOANH NGHIỆP + 3 bước nội dung:
     + Bước 1 (Ảnh 1): Trích dẫn 1 (nửa đầu đen, nửa sau xám) + Tác giả
     + Bước 2 (Ảnh 2): Trích dẫn 2 (toàn bộ màu xám) + Tác giả
     + Bước 3 (Ảnh 3): Tiêu đề giải thưởng + Danh sách 16 giải thưởng
   ========================================================================== */

.s04-track {
  position: relative;
  width: 100%;
  height: 250vh;
  height: 250dvh;
  background: #ffffff;
}

.s04-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.s04-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-padding, 32px);
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* Portrait column: Madame Thái Hương is anchored to the bottom-left */
.s04-portrait {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 48vw;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.s04-portrait img {
  height: 95%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
  transform-origin: center bottom;
}

/* Right Content column */
.s04-content {
  width: 52%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s04-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #004b91;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.s04-steps-wrap {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-areas: "step";
  min-height: 380px;
}

.s04-step {
  grid-area: step;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  will-change: opacity, transform;
  pointer-events: none;
}

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

/* Quote styles */
.s04-quote {
  margin: 0;
  padding: 0;
  font-family: var(--font-body), sans-serif;
  font-size: clamp(20px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.015em;
}

.s04-quote-p {
  margin: 0;
  color: #000;
  font-family: SVN-Apparat;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 41.6px */
  letter-spacing: -0.64px;
}

.s04-text-black {
  color: #000000;
}

.s04-text-grey {
  color: #000000;
}


/* Author block */
.s04-author {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s04-author-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #222222;
  line-height: 1.3;
}

.s04-author-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.4;
}

/* Awards block (Step 3) */
.s04-awards-title {
  margin: 0 0 16px 0;
  color: #000;
  font-family: SVN-Apparat;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 41.6px */
  letter-spacing: -0.64px;
}

.s04-awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s04-awards-list li {
  color: #3B3B3B;
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}

/* Responsive adjustments */
/* Responsive adjustments */
@media (max-width: 992px) {
  .s04-track {
    height: 250vh;
    height: 250dvh;
  }

  .s04-sticky {
    align-items: flex-start;
  }

  .s04-container {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .s04-portrait {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: min(80vw, 320px);
    height: 200px;
    margin: 0 auto 16px;
    align-items: center;
    justify-content: center;
  }

  .s04-portrait img {
    object-position: center bottom;
  }

  .s04-steps-wrap {
    min-height: 100%;
  }

  .s04-content {
    width: 100%;
    max-width: none;
    padding-block: 0;
  }

  .s04-tag {
    margin-bottom: 14px;
    font-size: 13px;
  }

  .s04-quote {
    font-size: clamp(16px, 3.8vw, 21px);
    line-height: 1.38;
  }

  .s04-author {
    margin-top: 16px;
  }
}

/* Mobile Responsive Flow: no scroll-jacking, natural document flow */
@media (max-width: 768px) {
  .s04-track {
    height: auto !important;
    min-height: 0 !important;
    background: #ffffff !important;
  }

  .s04-sticky {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
  }

  .s04-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 36px var(--page-padding, 20px) 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .s04-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .s04-tag {
    font-size: 13px !important;
    margin-bottom: 20px !important;
    color: #004b91 !important;
    font-weight: 700 !important;
  }

  .s04-steps-wrap {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    min-height: 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .s04-step {
    position: relative !important;
    grid-area: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    display: block !important;
  }

  /* Step 0: Quote 1 */
  .s04-step[data-step="0"] {
    margin-bottom: 24px !important;
  }

  .s04-step[data-step="0"] .s04-author {
    display: none !important;
  }

  /* Step 1: Quote 2 + Author */
  .s04-step[data-step="1"] {
    margin-bottom: 40px !important;
  }

  .s04-step[data-step="1"] .s04-author {
    display: flex !important;
    margin-top: 24px !important;
  }

  /* Quote typography on mobile */
  .s04-quote {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 132% !important;
  }

  .s04-quote-p {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 132% !important;
    letter-spacing: -0.4px !important;
  }

  .s04-text-black {
    color: #000000 !important;
    font-weight: 500 !important;
  }

  .s04-text-grey {
    color: #000000 !important;
    font-weight: 500 !important;
  }

  /* Author block on mobile */
  .s04-author-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 4px 0 !important;
  }

  .s04-author-title {
    font-size: 13px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Step 2: Awards */
  .s04-step[data-step="2"] {
    margin-bottom: 24px !important;
  }

  .s04-awards-title {
    font-size: clamp(22px, 5.5vw, 26px) !important;
    font-weight: 500 !important;
    margin: 0 0 20px 0 !important;
    color: #000000 !important;
    line-height: 125% !important;
  }

  .s04-awards-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .s04-awards-list li {
    font-size: 13.5px !important;
    line-height: 140% !important;
    color: #3B3B3B !important;
  }

  /* Portrait at bottom */
  .s04-portrait {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    pointer-events: auto !important;
  }

  .s04-portrait img {
    width: min(85vw, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* ==========================================================================
   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.
   Theme color: #003D79
   ========================================================================== */

/* Outer track: JS sets this element's height to (the rail's total
   scrollable width - one viewport width) + one viewport height */
.s05-track {
  position: relative;
  width: 100%;
}

/* Pinned viewport */
.s05-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

/* Horizontally panning strip */
.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 + background photo + 3 cards
   -------------------------------------------------------------------------- */
.s05-frame--parallax {
  flex: 0 0 200vw;
  width: 200vw;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background-color: #003D79;
}

.s05-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
  will-change: transform;
}

/* Image Layer */
.s05-layer--image {
  width: auto;
  height: 100%;
  aspect-ratio: 2462 / 1800;
  z-index: 0;
  overflow: hidden;
}

.s05-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.s05-frame-img {
  position: absolute;
  top: 0;
  width: calc(100% + 320px);
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Intro Text Layer (#003D79)
   -------------------------------------------------------------------------- */
.s05-layer--text {
  width: clamp(580px, 48vw, 50vw);
  z-index: 1;
  display: flex;
  align-items: stretch;
  background-color: #003D79;
  color: #ffffff;
  padding-block: clamp(36px, 4.5vw, 64px);
  padding-right: clamp(28px, 3.5vw, 56px);
  padding-left: max(var(--page-padding, 32px),
      calc((100vw - var(--content-max-width, 1440px)) / 2 + var(--page-padding, 32px)));
  box-sizing: border-box;
}

.s05-intro-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.s05-intro-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
}

.s05-tag {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  display: block;
}

.s05-headline {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 50px);
  color: #FFF;
  font-family: SVN-Apparat;
  font-style: normal;
  font-weight: 500;
  line-height: 116%;
  /* 58px */
  letter-spacing: -1px;
}

.s05-intro-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s05-intro-text p {
  margin: 0;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(12.5px, 0.95vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.s05-intro-text .s05-quote-source {
  font-size: clamp(11.5px, 0.85vw, 13px);
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.s05-intro-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
}

.s05-arrow-wrap {
  display: flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

.s05-arrow-wrap:hover {
  transform: translateX(6px);
}

.s05-arrow-wrap svg {
  width: 44px;
  height: 20px;
  display: block;
}

.s05-scroll-prompt {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   Cards Layer: 3 cards
   -------------------------------------------------------------------------- */
.s05-layer--cards {
  display: flex;
  flex-direction: row;
  height: 100%;
  z-index: 1;
}

.s05-card {
  flex: 0 0 clamp(440px, 34vw, 540px);
  width: clamp(440px, 34vw, 540px);
  min-width: 400px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #111827;
  padding-block: clamp(36px, 4vw, 40px);
  padding-inline: clamp(32px, 3.5vw, 48px);
  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  transition: box-shadow 0.3s ease;
}

.s05-card:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 61, 121, 0.06), 0 8px 30px rgba(0, 0, 0, 0.04);
}

.s05-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.s05-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.s05-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background-color: #f1f3f6;
  color: #4b5563;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 20px;
  line-height: 1;
}

.s05-card-title {
  margin: 0 0 18px 0;
  font-family: var(--font-heading, "SVN-Apparat", sans-serif);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.s05-card-body {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.65;
  color: #4b5563;
}

.s05-card-body p {
  margin: 0;
}

.s05-card-body p+p {
  margin-top: 14px;
}

.s05-card-body--no-title {
  margin-top: 4px;
}

/* Core Values List (Card 2) */
.s05-core-values {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.s05-core-value-item {
  position: relative;
  padding: 16px 0 16px 16px;
  border-bottom: 1px solid #eef0f3;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(13.5px, 1.05vw, 15px);
  font-weight: 500;
  color: #374151;
  line-height: 1.5;
}

.s05-core-value-item:first-child {
  padding-top: 4px;
}

.s05-core-value-item:last-child {
  border-bottom: none;
}

.s05-core-value-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #6b7280;
}

.s05-core-value-item:first-child::before {
  top: 11px;
}

.s05-card-bottom {
  margin-top: 36px;
  padding-top: 16px;
  width: 100%;
}

.s05-card-logo {
  width: 135px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Responsive: Mobile (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .s05-headline {
    font-size: clamp(26px, 3.5vw, 34px);
  }
}

@media (max-width: 768px) {
  .s05-track {
    height: 100% !important;
  }

  .s05-sticky {
    height: 100% !important;
  }

  .s05-frame--parallax {
    flex: 0 0 100vw;
    width: 100vw;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    background-color: #003D79;
  }

  .s05-layer {
    position: static;
    width: 100% !important;
    height: auto;
    transform: none !important;
  }

  .s05-layer--image {
    height: 220px;
  }

  .s05-frame-img {
    transform: none !important;
  }

  .s05-layer--text {
    width: 100%;
    padding: 32px 16px 40px;
    background-color: #003D79;
  }

  .s05-tag {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .s05-headline {
    font-size: 32px;
    line-height: 1.3;
  }

  .s05-intro-text p {
    font-size: 14px;
    line-height: 1.6;
  }

  .s05-intro-footer {
    padding-top: 20px;
    display: none;
  }

  .s05-layer--cards {
    flex-direction: column;
    width: 100%;
  }

  .s05-card {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    padding: 28px 16px 36px;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    height: auto;
  }

  .s05-card-title {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .s05-card-body {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .s05-core-value-item {
    font-size: 14px;
    padding: 14px 0 14px 16px;
  }

  .s05-core-value-item::before {
    top: 21px;
  }

  .s05-core-value-item:first-child::before {
    top: 11px;
  }

  .s05-card-bottom {
    margin-top: 24px;
  }

  .s05-card-logo {
    width: 110px;
  }
}

/* ==========================================================================
   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;
  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 {
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 1;
  transform: translateY(0);
}

.s06-content-inner.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

.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: 180vh;
}

.s07-viewport {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  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: 80px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.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;
}

/* 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: 32px 28px;
}

.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 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: 320vh;
  background-color: #003D79;
}

.s08-viewport {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-primary-blue, #005bac);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;
  background: #F5F5F7;
}

/* --------------------------------------------------------------------------
   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;
  color: #000;
  font-family: SVN-Apparat;
  font-style: normal;
  font-weight: 500;
  line-height: 116%;
  /* 58px */
  letter-spacing: -1px;
  font-size: clamp(34px, 3.5vw, 48px);
}

/* 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: rgba(255, 255, 255, 0.85);
  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;
}

.des {
  color: rgba(0, 0, 0, 0.60);
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 142%;
}

.bold-up {
  display: block;
  color: rgba(0, 0, 0, 0.60);
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 142%;
  padding: 12px 0;
}

/* 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-reverse;
  }

  .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 {
    height: 320px;
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   Section 08b: Tiên phong - Chất lượng Sản phẩm - Dịch vụ & Chứng chỉ Quốc tế
   Strictly matched with reference:
   - Deep blue background (#003d79)
   - Section header with uppercase tag, H2 title, and desktop indicator arrow
   - Upper Card: Cow hero image + 2-column description with rounded badges (01, 02)
   - Lower Card: 14 certification logos grid (7 cols on desktop, 2 cols on mobile)
   ========================================================================== */

.s08b {
  position: relative;
  width: 100%;
  background-color: #003d79;
  color: #ffffff;
  padding: 56px 0 72px;
  box-sizing: border-box;
}

.s08b-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Header */
.s08b-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.s08b-header-left {
  display: flex;
  flex-direction: column;
}

.s08b-tag {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
  display: block;
}

.s08b-title {
  margin: 0;
  font-family: var(--font-heading, "SVN-Apparat", sans-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.s08b-arrow {
  display: flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.9;
  padding-bottom: 8px;
  transition: transform 0.3s ease;
}

.s08b-arrow:hover {
  transform: translateX(6px);
}

.s08b-arrow svg {
  width: 44px;
  height: 20px;
  display: block;
}

/* Base Card Styling */
.s08b-card {
  background-color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* Upper Card: Quality Card */
.s08b-card-quality {
  overflow: hidden;
  margin-bottom: 20px;
}

.s08b-media {
  width: 100%;
  overflow: hidden;
  background-color: #e5e7eb;
}

.s08b-media-img {
  width: 100%;
  height: clamp(240px, 28vw, 380px);
  object-fit: cover;
  object-position: center;
  display: block;
}

.s08b-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  padding: 32px 36px 36px;
  box-sizing: border-box;
}

.s08b-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s08b-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background-color: #f1f3f6;
  color: #4b5563;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1;
}

.s08b-col-text {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
  margin: 0;
}

.s08b-col-text p {
  margin: 0;
}

.s08b-col-text p+p {
  margin-top: 14px;
}

/* Lower Card: Certifications */
.s08b-card-certs {
  padding: 32px 36px 36px;
}

.s08b-certs-title {
  margin: 0 0 24px;
  font-family: var(--font-heading, "SVN-Apparat", sans-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
}

.s08b-certs-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}

.s08b-cert-item {
  background-color: #f6f8fa;
  border-radius: 10px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.s08b-cert-item:hover {
  background-color: #edf1f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.s08b-cert-img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .s08b-certs-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

/* Mobile Responsive (< 768px) */
@media (max-width: 768px) {
  .s08b {
    padding: 36px 0 48px;
  }

  .s08b-container {
    padding: 0 16px;
  }

  .s08b-header {
    margin-bottom: 20px;
  }

  .s08b-arrow {
    display: none;
  }

  .s08b-tag {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .s08b-title {
    font-size: 24px;
    line-height: 1.3;
  }

  .s08b-card {
    border-radius: 0px;
  }

  .s08b-card-quality {
    margin-bottom: 16px;
  }

  .s08b-media-img {
    height: 180px;
  }

  .s08b-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px 24px;
  }

  .s08b-badge {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .s08b-col-text {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .s08b-card-certs {
    padding: 20px 16px 24px;
  }

  .s08b-certs-title {
    font-size: 19px;
    margin-bottom: 18px;
    line-height: 1.35;
  }

  .s08b-certs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .s08b-cert-item {
    height: 68px;
    border-radius: 8px;
    padding: 8px 10px;
  }

  .s08b-cert-img {
    max-height: 42px;
  }
}

/* ==========================================================================
   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%;
  height: auto;
  background: linear-gradient(180deg, #E0EDFD 0%, #FFF 100%);
  padding: 72px 0 80px;
  box-sizing: border-box;
}

.s09-viewport {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  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)
   -------------------------------------------------------------------------- */
.s09-content {
  position: relative;
  inset: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  box-sizing: border-box;
  transform: none !important;
  width: 100%;
}

.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-size: clamp(34px, 3.6vw, 50px);
  color: #003D79;
  text-align: center;
  font-family: SVN-Apparat;
  font-style: normal;
  font-weight: 500;
  line-height: 114%;
  /* 57px */
  letter-spacing: -1px;
}

/* 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)
   -------------------------------------------------------------------------- */
.s09-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding-bottom: 0;
}

.s09-card {
  width: 100%;
  background: #FFF;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
  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 {
  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;
    padding-block: 48px 60px;
  }

  .s09-viewport {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    padding-block: 0;
  }

  .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 (#2555ad), 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: #2555AD;
  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;
  }
}