/* ===================================================== ABOUT US (v2) — Coteccons Page max-width: 1440px, desktop side-padding 56px, mobile side-padding 16px. Content column = 1328px. ===================================================== COLOR TOKENS (from Figma) - Blue 500 #264ABC primary brand - Dark Blue #01275E section bg - Dark Blue 2 #16315E - Faded Blue #455A7E muted accent text - Teal 500 #5FD1C1 - Green 500 #86DE8C - Green Dark #51AC70 - Brown 500 #E86042 - Light Brown #F5BA42 - Core Brown #B86054 - Light Blue #4CB3F8 - Grey 500 #E4E2DF - Grey 600 #CFCECB - Grey 900 #605F5E - Grey Text 300 #767676 - Grey Text 700 #242424 ===================================================== */ :root { --au-blue: #264ABC; --au-blue-dark: #01275E; --au-blue-dark2: #16315E; --au-blue-faded: #455A7E; --au-teal: #5FD1C1; --au-green: #86DE8C; --au-green-dark: #51AC70; --au-brown: #E86042; --au-lbrown: #F5BA42; --au-cbrown: #B86054; --au-lblue: #4CB3F8; --au-grey: #E4E2DF; --au-grey-text: #767676; --au-grey-text-dark: #242424; --au-content-max: 1328px; --au-side-px: 56px; --au-side-px-mb: 16px; --au-section-py: 80px; --au-section-py-mb: 48px; --au-font: 'Lexend Deca', sans-serif; } /* Generic helpers ------------------------------------------------ */ .au-section-title-icon { display: inline-flex; width: 24px; height: 64px; flex-shrink: 0; } .au-section-title-icon img { width: 100%; height: 100%; object-fit: contain; } /* ===================================================== SECTION 1 · HERO ===================================================== */ .au-hero { position: relative; background: #fff; padding-top: 48px; } .au-hero__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--au-side-px); } .au-hero__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 62px; } .au-hero__title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 64px; line-height: 1; text-transform: uppercase; color: var(--au-blue); } .au-hero__download { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--au-blue); color: #fff; font-family: var(--au-font); font-weight: 600; font-size: 16px; line-height: 1.5; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; } .au-hero__download:hover { background: #1a3699; color: #fff; } /* Sticky sub-menu · direct child of so it persists page-wide below header */ .au-submenu { position: sticky; top: calc(var(--mp-topbar-h, 78px) + var(--mp-nav-h, 78px)); z-index: 50; background: #fff; border-top: 1px solid var(--au-grey); border-bottom: 1px solid var(--au-grey); transition: box-shadow 0.25s ease; } .au-submenu.is-stuck { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .au-submenu__inner { display: flex; align-items: stretch; justify-content: space-between; gap: 0; max-width: 1440px; margin: 0 auto; padding: 0 var(--au-side-px); } /* Item · blue fill is a separate that slides up on hover/active */ .au-submenu__item { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 16px 24px; background: transparent; color: #000; text-decoration: none; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; transition: color 0.35s ease; overflow: hidden; position: relative; isolation: isolate; border-right: 1px solid #E4E2DF; } .au-submenu__fill { position: absolute; inset: 0; background: var(--au-blue); transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; pointer-events: none; } .au-submenu__item:hover .au-submenu__fill, .au-submenu__item.is-active .au-submenu__fill { transform: translateY(0); } .au-submenu__item:hover, .au-submenu__item.is-active { color: #fff; border-right: unset; } .au-submenu__item:hover .au-submenu__num, .au-submenu__item.is-active .au-submenu__num, .au-submenu__item:hover .au-submenu__label, .au-submenu__item.is-active .au-submenu__label { font-weight: 600; font-variation-settings: 'wght' 600; } .au-submenu__main { display: flex; align-items: center; gap: 24px; min-width: 0; } .au-submenu__num { flex-shrink: 0; font-variation-settings: 'wght' 400; transition: font-variation-settings 0.35s ease; } .au-submenu__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: 'wght' 400; transition: font-variation-settings 0.35s ease; } /* Arrow icon · hidden until hover/active */ .au-submenu__arrow { flex-shrink: 0; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; opacity: 0; transform: translate(-6px, 6px) scale(0.85); transition: opacity 0.35s ease 0.05s, transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.05s; position: absolute; right: 16px; top: 0; bottom: 0; margin: auto; } .au-submenu__arrow svg { display: block; width: 100%; height: 100%; } .au-submenu__item:hover .au-submenu__arrow, .au-submenu__item.is-active .au-submenu__arrow { opacity: 1; transform: translate(0, 0) scale(1); } .au-submenu__sep { flex-shrink: 0; align-self: center; width: 1px; height: 32px; background: var(--au-grey); display: none; } /* Mobile sticky pill · hidden on desktop, shown via media query */ .au-submenu-pill { display: none; } /* Hero image (full bleed) · desktop/mobile asset swap below */ .au-hero__image { position: relative; width: 100%; height: 604px; background: #01275e; } /* ===================================================== SECTION 2 · BUILDING FUTURES ===================================================== */ .au-bf { position: relative; background: var(--au-blue-dark); overflow: hidden; } .au-bf__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 180px var(--au-side-px) 492px; z-index: 2; } .au-bf__header { display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px; } .au-bf__eyebrow { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 32px; line-height: 1.2; color: #fff; text-transform: uppercase; } .au-bf__title { margin: 0; display: flex; flex-direction: column; gap: 24px; font-family: var(--au-font); font-weight: 600; font-size: 80px; line-height: 1.1; color: var(--au-teal); text-transform: none; } .au-bf__title--accent { color: var(--au-teal); } .au-bf__title--muted { color: var(--au-blue-faded); } .au-bf__title-row { display: block; width: 742px; } .au-bf__body { display: flex; gap: 24px; justify-content: flex-end; } .au-bf__paragraph { width: 427px; margin: 0; font-family: var(--au-font); font-weight: 500; font-size: 18px; line-height: 1.35; color: #fff; } /* Decorative N · z-index:-1 sits behind text but above dark-blue bg (parent .au-bf__inner has z-index:2 stacking context) */ .au-bf__deco { position: absolute; right: var(--au-side-px); bottom: 0; width: 877px; height: auto; pointer-events: none; user-select: none; z-index: -1; } /* ===================================================== SECTION 3 · GIÁ TRỊ CỐT LÕI ===================================================== */ .au-values { background: #fff; } .au-values__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); } .au-values__header { display: flex; align-items: flex-end; gap: 24px; } .au-values__icon { display: inline-flex; width: 24px; height: 64px; flex-shrink: 0; } .au-values__icon img { width: 100%; height: 100%; object-fit: contain; } .au-values__title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 48px; line-height: 1.15; color: var(--au-blue); text-transform: uppercase; } .au-values__divider { margin: 24px 0; height: 1px; background: var(--au-grey); } .au-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 48px; } /* Item uses margins (not gap) so num→name and name→desc gaps tune independently */ .au-values__item { display: flex; flex-direction: column; max-width: 427px; } .au-values__num { display: block; width: 82px; height: auto; margin: 0 0 12px; user-select: none; } .au-values__name { margin: 0 0 18px; font-family: var(--au-font); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--au-blue); } .au-values__name--blue { color: var(--au-blue); } .au-values__name--green { color: var(--au-green); } .au-values__name--teal { color: var(--au-teal); } .au-values__name--brown { color: var(--au-brown); } .au-values__name--lbrown { color: var(--au-lbrown); } .au-values__name--cbrown { color: var(--au-cbrown); } .au-values__name--lblue { color: var(--au-lblue); } .au-values__name--dblue { color: var(--au-blue-dark2); } .au-values__name--dgreen { color: var(--au-green-dark); } .au-values__desc { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--au-grey-text); } /* ===================================================== SECTION 4 · THÔNG ĐIỆP TỪ CHỦ TỊCH ===================================================== */ .au-msg { background: #fff; position: relative; } .au-msg:before { content: ""; height: 109px; border-top: 1px solid var(--au-grey); border-bottom: 1px solid var(--au-grey); width: 100%; top: 80px; left: 0; right: 0; position: absolute; z-index: 0; } .au-msg:after { content: ""; height: 109px; border-top: 1px solid var(--au-grey); border-bottom: 1px solid var(--au-grey); width: 100%; bottom: 80px; left: 0; right: 0; position: absolute; z-index: 0; } .au-msg__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); position: relative; } .au-msg__inner:before { content: ""; height: calc(100% - 160px); width: 1px; bottom: 80px; right: 30px; position: absolute; z-index: 0; background: var(--au-grey); } /* Frame · grid container on desktop. Picture spans all 3 rows on the left; right column = heading → body → signature. */ .au-msg__frame { display: grid; grid-template-columns: 427px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "picture heading" "picture body" "picture signature"; position: relative; z-index: 1; } /* Card wrapper · display:contents on desktop so children join parent grid; real flex container on mobile */ .au-msg__card { display: contents; } .au-msg__heading { grid-area: heading; } .au-msg__picture { grid-area: picture; } .au-msg__body { grid-area: body; } .au-msg__signature { grid-area: signature; } .au-msg__picture { position: relative; width: 427px; height: 861px; } .au-msg__picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 2; } .au-msg__picture .au-msg__n-left { position: absolute; left: -30px; bottom: 16px; width: auto; height: 264px; z-index: 1; } .au-msg__picture .au-msg__n-right { position: absolute; left: -30px; bottom: 16px; height: 264px; width: auto; z-index: 2; } .au-msg__heading { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 109px; } .au-msg__icon { display: inline-flex; width: 24px; height: 64px; flex-shrink: 0; } .au-msg__icon img { width: 100%; height: 100%; object-fit: contain; } .au-msg__title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 48px; line-height: 1.15; color: var(--au-blue); text-transform: uppercase; } /* Body · scrolls if text exceeds the fixed 643px row height */ .au-msg__body { padding: 24px 72px; max-height: 643px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--_thumb, var(--au-blue-dark)) var(--au-grey); } .au-msg__body::-webkit-scrollbar { width: 4px; } .au-msg__body::-webkit-scrollbar-track { background: var(--au-grey); border-radius: 40px; } .au-msg__body::-webkit-scrollbar-thumb { background: var(--au-grey-text-dark); border-radius: 40px; } .au-msg__body p { margin: 0 0 24px; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--au-grey-text); } .au-msg__body p:last-child { margin-bottom: 0; } .au-msg__greeting { font-weight: 600 !important; color: #000 !important; } .au-msg__loadmore { display: none; } .au-msg__signature { display: flex; flex-direction: column; gap: 12px; padding: 24px 72px; height: 109px; justify-content: center; align-items: flex-end; } .au-msg__sig-name { margin: 0; font-family: var(--au-font); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--au-grey-text-dark); } .au-msg__sig-role { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--au-grey-text-dark); } /* ===================================================== SECTION 5 · HÀNH TRÌNH CỦA CHÚNG TÔI ===================================================== */ .au-journey { background: #fff; } .au-journey__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); display: flex; flex-direction: column; overflow: hidden; } /* --- Heading --- */ .au-journey__header { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; } .au-journey__heading { display: flex; align-items: flex-start; gap: 24px; } .au-journey__icon { display: inline-flex; width: 24px; height: 64px; flex-shrink: 0; } .au-journey__icon img { width: 100%; height: 100%; object-fit: contain; } .au-journey__title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 48px; line-height: 1.15; color: var(--au-blue); text-transform: uppercase; white-space: nowrap; } .au-journey__divider { border: none; border-top: 1px solid #e4e2df; margin: 0; } /* --- Content header (subtitle + controls) --- */ .au-journey__content-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 80px; } .au-journey__subtitle { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 32px; line-height: 1.2; color: #333; text-transform: uppercase; } .au-journey__controls { display: flex; align-items: center; gap: 40px; } .au-journey__period { font-family: var(--au-font); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--au-blue-dark2); white-space: nowrap; } .au-journey__nav-wrap { display: flex; align-items: center; gap: 24px; } .au-journey__nav { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--au-blue); color: var(--au-blue); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; flex-shrink: 0; } .au-journey__nav:hover:not(:disabled) { background: var(--au-blue); color: #fff; } .au-journey__nav:disabled { opacity: 0.5; cursor: not-allowed; } /* --- Swiper + Grid --- */ .au-journey__swiper { overflow: visible; width: 100%; } .au-journey__swiper .swiper-slide { width: calc(427px * 3 + 24px * 2); } .au-journey__grid { display: flex; gap: 24px; align-items: flex-start; } .au-journey__col { flex: 0 0 427px; max-width: 427px; } .au-journey__col--push { padding-top: 120px; } /* Card wrap · stacked layers: photo + blue + content */ .au-journey__card-wrap { position: relative; height: 502px; overflow: hidden; } .au-journey__card-photo { position: absolute; inset: 0; } .au-journey__card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .au-journey__card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 57.4%, #000 100%); pointer-events: none; } .au-journey__card-header { color: #fff; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .au-journey__card-year { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 40px; line-height: 1.2; } .au-journey__card-desc { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; } /* Blue hover bg · slides up independently */ .au-journey__card-blue { position: absolute; inset: 0; z-index: 2; background: var(--au-blue); transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .au-journey__card-wrap:hover .au-journey__card-blue { transform: translateY(0); } /* Content layer · header anchored bottom, bullets expand on hover pushing it up */ .au-journey__card-content { position: absolute; inset: 0; z-index: 3; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } /* Bullets outer · grid-template-rows 0fr→1fr trick for smooth height animation */ .au-journey__bullets-outer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .au-journey__card-wrap:hover .au-journey__bullets-outer { grid-template-rows: 1fr; } /* Bullets · hidden by default, slide + fade in on hover */ .au-journey__bullets { position: relative; list-style: none; margin: 0; padding: 24px 0 0; display: flex; flex-direction: column; gap: 24px; min-height: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease 0.15s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; } .au-journey__card-wrap:hover .au-journey__bullets { opacity: 1; transform: translateY(0); } .au-journey__bullets::before { content: ''; position: absolute; left: 5px; top: 42px; bottom: -24px; width: 1px; background-image: repeating-linear-gradient( to bottom, #BCC7EA 0, #BCC7EA 5px, transparent 5px, transparent 10px ); } .au-journey__bullet { display: flex; gap: 12px; align-items: flex-start; position: relative; } .au-journey__dot { flex-shrink: 0; width: 12px; height: 12px; background: var(--au-teal); margin-top: 6px; } .au-journey__bullet p { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: #fff; } /* "Xem thêm" button · mobile only */ .au-journey__card-btn { display: none; } /* ===================================================== RESPONSIVE · MOBILE + TABLET (≤1023px) Project convention: Figma's 440px mobile design applies to all viewports below 1024px. ===================================================== */ @media (max-width: 1023px) { /* SECTION 1 · HERO */ .au-hero { padding-top: 18px; } .au-hero__inner { padding: 0 16px; } .au-hero__header { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 24px; } .au-hero__title { font-size: 48px; line-height: 1.1; } .au-hero__download { height: 48px; padding: 16px; gap: 6px; font-size: 16px; justify-content: center; } .au-submenu { position: sticky; top: var(--mp-nav-h, 56px); border-top: 1px solid var(--au-grey); border-bottom: 1px solid #B7BFCD; } .au-submenu__inner { flex-direction: column; padding: 16px 0; gap: 0; max-width: 100%; } /* Override desktop's `flex: 1` in column parent — flex-basis would collapse the item; set explicit `flex: 0 0 48px` + min-height:0. */ .au-submenu__item { flex: 0 0 48px; width: calc(100vw - 32px); height: 48px; min-height: 0; margin: auto; padding: 8px 24px; font-size: 16px; border-right: none; } .au-submenu__sep { display: block; align-self: stretch; width: 100%; height: 1px; margin: 16px 0; } .au-submenu__arrow { width: 36px; height: 36px; } /* Main .au-submenu stays in flow on mobile · sticky behavior moved to .au-submenu-pill (position:fixed) to avoid reflow loop. */ .au-submenu { position: static; top: auto; box-shadow: none !important; border-bottom: none; } /* Mobile sticky pill · slides in when JS adds .is-visible */ .au-submenu-pill { display: block; position: fixed; top: var(--mp-nav-h, 56px); left: 0; right: 0; z-index: 50; padding: 16px; background: #fff; transform: translateY(-110%); transition: transform 0.3s ease; pointer-events: none; } .au-submenu-pill.is-visible { transform: translateY(0); pointer-events: auto; } .au-submenu-pill .au-submenu__item { width: 100%; height: 48px; padding: 8px 24px; font-size: 16px; color: #fff; font-weight: 600; text-decoration: none; } /* Pill always renders in "active" visual state */ .au-submenu-pill .au-submenu__fill { transform: translateY(0); } .au-submenu-pill .au-submenu__arrow { opacity: 1; transform: none; } /* Hero image · mobile asset */ .au-hero__image { height: 583px; background: #01275e; } /* SECTION 2 · BUILDING FUTURES */ .au-bf__inner { padding: 48px 16px 145px; /* extra bottom space reserved for N deco */ } .au-bf__header { gap: 24px; margin-bottom: 56px; } .au-bf__eyebrow { font-size: 24px; font-weight: 700; line-height: 1.25; } .au-bf__title { font-size: 40px; gap: 24px; line-height: 1.1; } .au-bf__body { flex-direction: column; align-items: flex-end; gap: 24px; } .au-bf__paragraph { width: 100%; font-size: 16px; line-height: 1.4; } .au-bf__deco { width: 268px; right: 16px; bottom: 0; } .au-bf__title-row { width: auto; } /* SECTION 3 · GIÁ TRỊ CỐT LÕI */ .au-values__inner { padding: 48px 16px; } .au-values__header { align-items: flex-start; } .au-values__title { font-size: 32px; line-height: 1.2; } .au-values__icon { height: 32px; } .au-values__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 48px; } .au-values__item { max-width: 100%; } .au-values__num { margin-bottom: 8px; } .au-values__name { font-size: 20px; line-height: 1.3; margin-bottom: 12px; } /* SECTION 4 · THÔNG ĐIỆP TỪ CHỦ TỊCH · single-column stack with bordered card */ .au-msg__inner { padding: 48px 16px; } .au-msg__frame { display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; grid-template-areas: none; gap: 24px; border-top: 0; border-left: 0; } .au-msg__card { display: flex; flex-direction: column; } .au-msg__heading { align-items: flex-start; gap: 24px; padding: 0 0 24px; height: auto; border-bottom: 1px solid var(--au-grey); } .au-msg__icon { height: 32px; } .au-msg__title { font-size: 32px; line-height: 1.2; } /* Picture: full-width 308px tall inside the card. The "N" outline stays at bottom-left per the desktop spec. */ .au-msg__picture { width: 100%; height: 308px; } .au-msg__n { display: none; } .au-msg:before, .au-msg__inner:before, .au-msg:after { content: none; } /* Body collapsed via line-clamp on mobile, expands via "Tải thêm" */ .au-msg__body { padding: 12px 12px 0 12px; overflow: hidden; border: 1px solid var(--au-grey); border-bottom: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 17; line-clamp: 17; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0.35) 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0.35) 100%); } /* Animating · block display so max-height transition runs */ .au-msg__body.is-animating { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: hidden; -webkit-mask-image: none; mask-image: none; transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .au-msg__body.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: hidden; max-height: none; -webkit-mask-image: none; mask-image: none; } .au-msg__loadmore { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; cursor: pointer; background: none; border: none; padding: 24px 12px 12px; border-left: 1px solid var(--au-grey); border-right: 1px solid var(--au-grey); } .au-msg__loadmore-content { display: flex; align-items: center; gap: 10px; height: 24px; } .au-msg__loadmore-label { font-family: var(--au-font); font-weight: 500; font-size: 16px; line-height: 1.5; color: #264abc; } .au-msg__loadmore-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #264abc; background: #fff; flex-shrink: 0; } .au-msg__loadmore-vbar { transform-origin: 6px 6px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .au-msg__loadmore[aria-expanded="true"] .au-msg__loadmore-vbar { transform: rotate(90deg); } .au-msg__loadmore-line { display: block; width: 69px; border-top: 1px solid #264abc; } .au-msg__signature { padding: 12px; height: auto; align-items: flex-start; border: 1px solid var(--au-grey); } /* SECTION 5 · JOURNEY */ .au-journey__title { font-size: 32px; white-space: normal; } .au-journey__subtitle { font-size: 24px; } .au-journey__col { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); } .au-journey__swiper .swiper-slide { width: auto; } .au-journey__card-wrap { height: 460px; } .au-journey__card-year { font-size: 36px; } .au-journey__card-photo { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.71%, #000 100%); } } /* ===================================================== RESPONSIVE · SMALL MOBILE (≤767px) Only adjusts Journey; other sections share the ≤1023px rules. ===================================================== */ @media (max-width: 767px) { :root { --au-section-py: var(--au-section-py-mb); --au-side-px: var(--au-side-px-mb); } /* SECTION 5 · JOURNEY */ .au-journey__icon { height: 32px; } .au-journey__inner { padding: 48px 16px 24px; } .au-journey__title { font-size: 32px; } .au-journey__subtitle { font-size: 24px; font-weight: 700; } .au-journey__content-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .au-journey__controls { display: none; } .au-journey__swiper .swiper-slide { width: 302px; } .au-journey__card-wrap { height: 402px; width: 100%; } .au-journey__card-year { font-size: 32px; } .au-journey__card-desc { font-size: 16px; line-height: 1.4; } /* Disable hover-reveal on touch · is-open class drives state instead */ .au-journey__card-wrap:hover .au-journey__card-blue { transform: translateY(100%); } .au-journey__card-wrap:hover .au-journey__bullets-outer { grid-template-rows: 0fr; } .au-journey__card-wrap:hover .au-journey__bullets { opacity: 0; transform: translateY(12px); } /* Softer easing for mobile open/close */ .au-journey__card-wrap { transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .au-journey__card-blue { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .au-journey__bullets-outer { transition: grid-template-rows 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .au-journey__bullets { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* Stagger bullets only when opening · closing stays snappy */ .au-journey__card-wrap.is-open .au-journey__bullets { transition-delay: 0.4s, 0.35s; } /* is-open · "Xem thêm" click; height is measured by JS into --open-height */ .au-journey__card-wrap.is-open { height: var(--open-height, 480px); } .au-journey__card-wrap.is-open .au-journey__card-blue { transform: translateY(0); } .au-journey__card-wrap.is-open .au-journey__bullets-outer { grid-template-rows: 1fr; } .au-journey__card-wrap.is-open .au-journey__bullets { opacity: 1; transform: translateY(0); } .au-journey__card-wrap.is-open .au-journey__card-btn { display: inline-flex; } /* Even cards offset 40px down (staggered layout) */ .au-journey__swiper .swiper-slide:nth-child(even) { padding-top: 40px; } .au-journey__card-btn { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; text-decoration: none; margin-top: 16px; pointer-events: auto; } .au-journey__card-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #264ABC; background: #fff; font-size: 20px; font-weight: 300; line-height: 1; flex-shrink: 0; } } /* ===================================================== SECTION 6 · THÀNH TỰU (Achievements) ===================================================== */ .au-achieve { background: #fff; } .au-achieve__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); } .au-achieve__title { margin: 0 0 24px; font-family: var(--au-font); font-weight: 600; font-size: 32px; line-height: 1.2; color: #333; text-transform: uppercase; } /* 4-column grid on desktop */ .au-achieve__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; } /* Extra cards container · hidden by default; slides open on all breakpoints */ .au-achieve__extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-height: 0; overflow: hidden; margin-top: 0; transition: max-height 0.45s ease, margin-top 0.45s ease; } .au-achieve__extra .au-achieve__card { margin-bottom: 24px; } .au-achieve__extra.is-open { margin-top: 24px; /* match the grid's gap */ } /* ── Card ────────────────────────────────────────────── Cut corners: top-LEFT + bottom-RIGHT (per Figma design) Technique: outer wrapper = blue bg + clip-path (the stroke). inner body = white bg + own clip-path (interior). With margin:1.5px on inner + inner-cut 1px smaller than outer-cut, the diagonal border is ~1.41px — visually consistent with the 1.5px straight-edge border created by the margin. */ .au-achieve__card { --cut: 24px; background: var(--au-blue); clip-path: polygon( var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut) ); } .au-achieve__card-body { --inner-cut: 23px; background: #fff; margin: 1.5px; clip-path: polygon( var(--inner-cut) 0, 100% 0, 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, 0 100%, 0 var(--inner-cut) ); padding: 22.5px; /* 24px Figma – 1.5px border */ display: flex; flex-direction: column; min-height: 354px; /* 357px Figma – 3px total margin */ box-sizing: border-box; } /* Award logo image area */ .au-achieve__card-img { width: 119px; height: 135px; flex-shrink: 0; margin-bottom: 32px; /* Figma: info.y(191) − img.bottom(159) − padding(24) = 32 */ } .au-achieve__card-img img { width: 100%; height: 100%; object-fit: contain; object-position: left top; display: block; } /* Text content area */ .au-achieve__card-info { display: flex; flex-direction: column; flex: 1; gap: 10px; } .au-achieve__card-name { margin: 0; font-family: var(--au-font); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--au-blue); } .au-achieve__card-meta { display: flex; flex-direction: column; flex: 1; gap: 4px; } .au-achieve__card-award { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 16px; line-height: 1.5; color: #000; } .au-achieve__card-year { margin: 0; margin-top: auto; /* pin year to card bottom */ font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: #000; } /* ── "Xem thêm / Rút gọn" CTA ──────────────────────── */ .au-achieve__footer { display: flex; justify-content: center; } .au-achieve__more { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; } .au-achieve__more-top { display: flex; align-items: start; gap: 12px; } .au-achieve__more-label { font-family: var(--au-font); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--au-blue); } .au-achieve__more-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--au-blue); background: #fff; flex-shrink: 0; } /* Vertical bar of the + icon · collapses to turn + into − when expanded */ .au-achieve__more-vbar { transform-origin: 6px 6px; transition: transform 0.3s ease; } .au-achieve__more[data-expanded="true"] .au-achieve__more-vbar { transform: scaleY(0); } .au-achieve__more-line { display: block; width: 69px; height: 1px; background: var(--au-blue); margin-top: 8px; } /* ── SECTION 6 · responsive ≤1023px (tablet) ───────── */ @media (max-width: 1023px) { .au-achieve__inner { padding: 48px 16px; } .au-achieve__title { font-size: 28px; } .au-achieve__grid, .au-achieve__extra { grid-template-columns: repeat(2, 1fr); gap: 16px; } .au-achieve__grid, .au-achieve__extra .au-achieve__card { margin-bottom: 24px; } .au-achieve__extra.is-open { margin-top: 16px; } .au-achieve__card-name { font-size: 18px; } } /* ── SECTION 6 · responsive ≤767px (mobile) ────────── */ @media (max-width: 767px) { .au-achieve__inner { padding: 24px 24px; } .au-achieve__title { font-size: 24px; margin-bottom: 24px; } .au-achieve__grid, .au-achieve__extra { grid-template-columns: 1fr; gap: 24px; } .au-achieve__extra.is-open { margin-top: 16px; } /* Smaller cut on mobile (proportional to card height) */ .au-achieve__card { --cut: 16px; } .au-achieve__card-body { --inner-cut: 15px; } /* Horizontal layout: image left, info right */ .au-achieve__card-body { flex-direction: row; align-items: flex-start; gap: 24px; min-height: unset; padding: 24px; } .au-achieve__card-img { width: 120px; height: 120px; flex-shrink: 0; margin-bottom: 0; } .au-achieve__card-info { flex: 1; min-width: 0; gap: 8px; } .au-achieve__card-meta { flex: 1; } .au-achieve__card-name { font-size: 16px; } .au-achieve__card-award { font-size: 14px; } .au-achieve__card-year { font-size: 14px; margin-top: auto; } } /* ===================================================== SECTION 7 · NGƯỜI COTECCONS ===================================================== */ .au-people { background: #f7f6f5; } .au-people__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); } /* ── Section heading (mirrors .au-values__header) ── */ .au-people__head { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; } .au-people__head-icon { display: inline-flex; width: 24px; height: 64px; flex-shrink: 0; } .au-people__head-icon img { width: 100%; height: 100%; object-fit: contain; } .au-people__head-title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 48px; line-height: 1.15; color: var(--au-blue); text-transform: uppercase; } .au-people__divider { height: 1px; background: var(--au-grey); margin-bottom: 24px; } /* ── Intro: 2-column on desktop ── */ .au-people__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .au-people__intro-title { margin: 0; font-family: var(--au-font); font-weight: 600; font-size: 32px; line-height: 1.25; color: #333; } .au-people__intro-desc { margin: 0; font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: #333; } /* ── YouTube video façade ── */ .au-people__video { position: relative; margin-top: 40px; aspect-ratio: 1328 / 606; overflow: hidden; cursor: pointer; background: #000; display: block; } .au-people__video:focus-visible { outline: 2px solid var(--au-blue); outline-offset: 2px; } .au-people__video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .au-people__video:hover .au-people__video-thumb { transform: scale(1.02); } /* Dark gradient overlay + title bar at the top */ .au-people__video-bar { position: absolute; top: 0; left: 0; right: 0; padding: 20px 24px 48px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.60) 0%, transparent 100%); pointer-events: none; display: flex; justify-content: start; gap: 16px; align-items: center; } .au-people__video-bar-title { font-family: var(--au-font); font-weight: 400; font-size: 16px; line-height: 1.5; color: #fff; display: block; } .au-people__video-bar img { width: 36px; height: 36px; border-radius: 40px; } /* Play button — centred */ .au-people__video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 0.3s ease; } .au-people__video:hover .au-people__video-play { transform: translate(-50%, -50%) scale(1.08); } /* After clicking: iframe fills the box */ .au-people__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Part B: 8 tố chất ── */ .au-people__part-b { margin-top: 80px; } .au-people__tochat-title { margin: 0 0 32px; font-family: var(--au-font); font-weight: 600; font-size: 32px; line-height: 1.2; color: #333; text-transform: uppercase; } .au-people__tochat-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 48px; } .au-people__tochat-item { display: flex; flex-direction: column; } /* Large outline / stroke-only number Cropped to cap-height by overflow:hidden + tight line-height */ .au-people__tochat-num { width: 67px; height: 39px; margin-bottom: 12px; } .au-people__tochat-label { margin: 0; font-family: var(--au-font); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--item-color, #264ABC); } /* ── SECTION 7 · responsive ≤1023px (tablet) ─────── */ @media (max-width: 1023px) { .au-people__head-icon { height: 48px; } .au-people__head-title { font-size: 36px; } .au-people__intro-title { font-size: 24px; } .au-people__part-b { margin-top: 60px; } .au-people__tochat-title { font-size: 28px; } .au-people__tochat-label { font-size: 20px; } } /* ── SECTION 7 · responsive ≤767px (mobile) ──────── */ @media (max-width: 767px) { .au-people__head-icon { height: 32px; } .au-people__head-title { font-size: 28px; } /* Stack intro vertically */ .au-people__intro { grid-template-columns: 1fr; gap: 24px; } .au-people__intro-title { font-size: 20px; font-weight: 700; } .au-people__intro-desc { color: var(--au-grey-text); } .au-people__video { aspect-ratio: 16 / 9; margin-top: 40px; } /* Part B */ .au-people__part-b { margin-top: 40px; } .au-people__tochat-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; } .au-people__tochat-grid { grid-template-columns: 1fr; row-gap: 48px; } .au-people__tochat-num { } .au-people__tochat-label { font-size: 20px; } } /* ============================================================ SECTION 8 · BAN LÃNH ĐẠO (.au-board) ============================================================ */ /* --- Outer section --- */ .au-board { background: #ffffff; } .au-board__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); } /* ------------------------------------------------------------------- Header row: title (left) + tabs (right) On desktop: flex-row, align-items: flex-end, border-bottom 1px. On mobile: flex-column, title on top, tabs row below with border. ------------------------------------------------------------------- */ .au-board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; height: 64px; border-bottom: 1px solid var(--au-grey); } .au-board__title { font-size: 32px; font-weight: 600; color: #333; /* margin: 0 0 20px; */ line-height: 1.2; flex-shrink: 0; } /* Tabs wrapper: handles mobile overflow-scroll */ .au-board__tabs-wrap { min-width: 0; } .au-board__tabs { display: flex; gap: 40px; height: 64px; } .au-board__tab { font-family: var(--au-font), sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #000; background: none; border: none; /* padding: 0 0 20px; */ margin-bottom: -1px; /* overlap parent 1px border */ cursor: pointer; white-space: nowrap; position: relative; transition: color 0.2s; display: flex; } .au-board__tab::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--au-blue); transition: width 0.5s ease; } .au-board__tab:hover::after { width: 50%; } .au-board__tab.is-active::after { width: 100%; } .au-board__tab.is-active { font-weight: 600; color: var(--au-blue); } .au-board__tab:hover:not(.is-active) { color: var(--au-blue); } /* --- Panels --- */ .au-board__panels { margin-top: 24px; } .au-board__panel { display: none; } .au-board__panel.is-active { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 40px; } /* Panel fade animations */ @keyframes auBoardFadeIn { from { opacity: 0.9; } to { opacity: 1; } } @keyframes auBoardFadeOut { from { opacity: 1; } to { opacity: 0.9; } } .au-board__panel.is-fading-in { animation: auBoardFadeIn 0.1s ease forwards; } .au-board__panel.is-fading-out { animation: auBoardFadeOut 0.1s ease forwards; pointer-events: none; } #au-board-panel-hdqt.au-board__panel .au-board__card-pic { background: var(--au-blue-dark); } #au-board-panel-excom.au-board__panel .au-board__card-pic { background: #092FA4; } #au-board-panel-ql.au-board__panel .au-board__card-pic { background: var(--au-teal); } /* --- Member grid (desktop: transparent wrapper – cards flow into panel grid) --- */ .au-board__grid { display: contents; } /* Extra cards container · desktop = transparent (cards flow into panel grid); mobile = slide grid */ .au-board__extra { display: contents; } /* --- Member card --- */ .au-board__card { display: flex; flex-direction: column; } .au-board__card-pic { aspect-ratio: 314 / 414; background: var(--au-blue-dark); overflow: hidden; flex-shrink: 0; position: relative; } .au-board__card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .au-board__card-pic img.avt { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; position: absolute; top: 0; transition: transform 0.4s ease; } .au-board__card:hover .au-board__card-pic img.avt { transform: scale(1.06); } .au-board__card-info { padding-top: 24px; } .au-board__card-name { font-size: 20px; font-weight: 500; color: var(--au-blue); margin: 0 0 24px; line-height: 1.3; } .au-board__card-role { font-size: 16px; font-weight: 400; color: #333; margin: 0; line-height: 1.5; } /* --- Load-more CTA · mobile only (spans all grid columns) --- */ .au-board__footer { display: none; justify-content: center; margin-top: 40px; grid-column: 1 / -1; } .au-board__more { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; } .au-board__more-top { display: flex; align-items: start; gap: 12px; } .au-board__more-label { font-family: var(--au-font), sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--au-blue); } .au-board__more-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--au-blue); background: #fff; flex-shrink: 0; } .au-board__more-vbar { transform-origin: 6px 6px; transition: transform 0.3s ease; } .au-board__more[data-expanded="true"] .au-board__more-vbar { transform: scaleY(0); } .au-board__more-line { display: block; width: 69px; height: 1px; background: var(--au-blue); margin-top: 8px; } /* =========================== Responsive · ≤ 1023px =========================== */ @media (max-width: 1023px) { .au-board__title { font-size: 28px; } .au-board__panel.is-active { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; } .au-board__card-name { font-size: 18px; } } /* =========================== Responsive · ≤ 767px =========================== */ @media (max-width: 767px) { /* Section padding-top: 24px per Figma (override global mobile var) */ .au-board__inner { padding-top: 24px; } /* Header stacks vertically */ .au-board__head { flex-direction: column; align-items: flex-start; border-bottom: none; gap: 0; height: unset; } .au-board__title { font-size: 24px; font-weight: 700; margin-bottom: 24px; } /* Tabs wrap: full-width, scrollable, own bottom border */ .au-board__tabs-wrap { width: 100%; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--au-grey); } .au-board__tabs-wrap::-webkit-scrollbar { display: none; } .au-board__tabs { width: max-content; gap: 40px; height: 48px; } .au-board__tab { font-size: 16px; padding-bottom: 16px; } /* Mobile: revert panel to block, restore independent grids */ .au-board__panel.is-active { display: block; } /* Mobile grid: 2 columns */ .au-board__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; } .au-board__extra { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; /* Restore slide behaviour on mobile */ max-height: 0; overflow: hidden; margin-top: 0; transition: max-height 0.45s ease, margin-top 0.45s ease; } .au-board__extra.is-open { margin-top: 24px; } /* Show footer button on mobile */ .au-board__footer { display: flex; } .au-board__card-pic { aspect-ratio: 196 / 261; } .au-board__card-info { padding-top: 12px; } .au-board__card-name { font-size: 18px; margin-bottom: 12px; } .au-group__tab { padding: 0 0 24px !important; } } /* ============================================================ SECTION 9 · COTECCONS GROUP (.au-group) ============================================================ */ .au-group { background: #f7f6f5; } .au-group__inner { max-width: 1440px; margin: 0 auto; padding: var(--au-section-py) var(--au-side-px); } /* --- Section heading --- */ .au-group__head { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; } .au-group__head-icon { width: 24px; flex-shrink: 0; display: flex; align-items: flex-end; } .au-group__head-icon img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } .au-group__title { font-size: 48px; font-weight: 600; color: var(--au-blue); margin: 0; line-height: 1.15; } /* --- Tab navigation --- */ .au-group__tabs-wrap { border-bottom: 1px solid var(--au-grey); margin-bottom: 56px; overflow-x: auto; scrollbar-width: none; } .au-group__tabs-wrap::-webkit-scrollbar { display: none; } .au-group__tabs { display: flex; gap: 48px; width: max-content; } .au-group__tab { font-family: var(--au-font), sans-serif; font-size: 16px; font-weight: 400; color: #000; background: none; border: none; padding: 0 0 32px; margin-bottom: -1px; cursor: pointer; white-space: nowrap; position: relative; transition: color 0.2s; } .au-group__tab::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--au-blue); transition: width 0.5s ease; } .au-group__tab:hover::after { width: 50%; } .au-group__tab.is-active::after { width: 100%; } .au-group__tab.is-active { font-weight: 600; color: var(--au-blue); } .au-group__tab:hover:not(.is-active) { color: var(--au-blue); } /* --- Panels --- */ .au-group__panel { display: none; } .au-group__panel.is-active { display: block; } /* --- Logo slider --- */ .au-group__slider-outer { display: flex; align-items: center; gap: 8px; } .au-group__swiper { flex: 1; min-width: 0; } .au-group__slide { display: flex !important; align-items: center; justify-content: center; height: 65px; } .au-group__slide img { max-width: 100%; height: 65px; width: auto; object-fit: contain; display: block; } /* Nav buttons (desktop) */ .au-group__nav { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--au-blue); cursor: pointer; transition: background 0.2s; } .au-group__nav:hover:not(:disabled):not(.swiper-button-disabled) { background: var(--au-blue); } .au-group__nav:hover:not(:disabled):not(.swiper-button-disabled) svg path { stroke: #fff; } .au-group__nav:disabled, .au-group__nav.swiper-button-disabled { opacity: 0.4; cursor: default; } /* =========================== Responsive · ≤ 1023px =========================== */ @media (max-width: 1023px) { .au-group__title { font-size: 36px; } .au-group__nav { display: none; } } /* =========================== Responsive · ≤ 767px =========================== */ @media (max-width: 767px) { .au-group__head-icon img { height: 32px; } .au-group__title { font-size: 32px; } .au-group__tabs { gap: 40px; } .au-group__tabs-wrap { margin-bottom: 24px; } /* Fixed-width slides on mobile for slidesPerView: 'auto' */ .au-group__slide { width: 103px; height: 32px; } .au-group__slide img { height: 32px; } /* Marquee: smooth linear transition (matches group-marquee on home page) */ .au-group__swiper .swiper-wrapper { transition-timing-function: linear !important; } }