/* ===================================================== WHAT WE DO (v2) — Coteccons Desktop max-width: 1440px, side-padding 56px Mobile side-padding 16px ===================================================== */ :root { --wwd-blue: #264ABC; --wwd-grey: #E4E2DF; --wwd-side-px: 56px; --wwd-font: 'Lexend Deca', sans-serif; } /* ===================================================== SECTION · HERO ===================================================== */ .wwd-hero { position: relative; background: #fff; padding-top: 48px; } .wwd-hero__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--wwd-side-px); } .wwd-hero__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 48px; } .wwd-hero__title { margin: 0; font-family: var(--wwd-font); font-weight: 600; font-size: 64px; line-height: 1; text-transform: uppercase; color: var(--wwd-blue); } /* Hero image (full bleed) · desktop/mobile asset swap below */ .wwd-hero__image { position: relative; width: 100%; height: 604px; background: url('../../assets/images/v2/what-we-do/hero-banner.png') lightgray 50% top / cover no-repeat; } /* Sticky sub-menu · direct child of so it persists page-wide below header */ .wwd-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(--wwd-grey); border-bottom: 1px solid var(--wwd-grey); transition: box-shadow 0.25s ease; } .wwd-submenu.is-stuck { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .wwd-submenu__inner { display: flex; align-items: stretch; justify-content: space-between; gap: 0; max-width: 1440px; margin: 0 auto; padding: 0 var(--wwd-side-px); } /* Item · blue fill is a separate that slides up on hover/active */ .wwd-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(--wwd-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; } .wwd-submenu__fill { position: absolute; inset: 0; background: var(--wwd-blue); transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; pointer-events: none; } .wwd-submenu__item:hover .wwd-submenu__fill, .wwd-submenu__item.is-active .wwd-submenu__fill { transform: translateY(0); } .wwd-submenu__item:hover, .wwd-submenu__item.is-active { color: #fff; border-right: unset; } .wwd-submenu__item:hover .wwd-submenu__num, .wwd-submenu__item.is-active .wwd-submenu__num, .wwd-submenu__item:hover .wwd-submenu__label, .wwd-submenu__item.is-active .wwd-submenu__label { font-weight: 600; font-variation-settings: 'wght' 600; } .wwd-submenu__main { display: flex; align-items: center; gap: 24px; min-width: 0; } .wwd-submenu__num { flex-shrink: 0; font-variation-settings: 'wght' 400; transition: font-variation-settings 0.35s ease; } .wwd-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 */ .wwd-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; } .wwd-submenu__arrow svg { display: block; width: 100%; height: 100%; } .wwd-submenu__item:hover .wwd-submenu__arrow, .wwd-submenu__item.is-active .wwd-submenu__arrow { opacity: 1; transform: translate(0, 0) scale(1); } .wwd-submenu__sep { flex-shrink: 0; align-self: center; width: 1px; height: 32px; background: var(--wwd-grey); display: none; } /* Mobile sticky pill · hidden on desktop, shown via media query */ .wwd-submenu-pill { display: none; } /* ===================================================== SECTION · COTECCONS INSIDE ===================================================== */ /* ---- Section wrapper ---- */ .wwd-inside { background: #ffffff; } /* ---- Inner content container ---- */ .wwd-inside__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0px 56px 80px; } /* ---- 569px content wrap (desktop) ---- */ .wwd-inside__wrap { --inner-cut: 24px; position: relative; height: 569px; overflow: hidden; 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) ); } .wwd-inside__wrap::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; pointer-events: none; } /* ---- Background images (desktop only) · 4-column grid ---- */ .wwd-inside__bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; pointer-events: none; z-index: 1; } .wwd-inside__bg-cell { position: relative; overflow: hidden; } .wwd-inside__bg-cell:not(:last-child) { border-right: 1px solid #B7BFCD; } .wwd-inside__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transform: translateY(0); } .wwd-inside__bg-img.is-active { opacity: 1; } /* Slide UP: incoming image enters from below (index increases) */ .wwd-inside__bg-img.is-entering { opacity: 1; z-index: 2; animation: wwd-slide-up 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes wwd-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Slide DOWN: outgoing image exits downward (index decreases) */ .wwd-inside__bg-img.is-leaving { opacity: 1; z-index: 2; animation: wwd-slide-down 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes wwd-slide-down { from { transform: translateY(0); } to { transform: translateY(100%); } } /* ---- Desktop title bar ---- */ .wwd-inside__title-bar { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: 152px; padding: 24px 40px 0; z-index: 1; pointer-events: none; text-transform: uppercase; } .wwd-inside__title-word { font-family: var(--wwd-font, 'Lexend Deca', sans-serif); font-weight: 600; font-size: 103px; line-height: 1; color: rgba(255, 255, 255, 0.28); -webkit-text-fill-color: rgba(255, 255, 255, 0.7); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7); user-select: none; } /* ---- Swiper container (desktop: static 4-col, mobile: swiper) ---- */ .wwd-inside__swiper { position: relative; z-index: 2; height: 417px; /* 569 - 152 */ } /* ---- Columns flex row (desktop) ---- */ .wwd-inside__cols { display: flex; height: 100%; } /* ---- Individual column ---- */ .wwd-inside__col { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; cursor: default; background: transparent; transition: background 0.45s ease; } .wwd-inside__col.is-active { background: linear-gradient(to bottom, rgba(38, 74, 188, 0) 20%, #264abc 100%); } .wwd-inside__col:first-child { border-left: 1px solid #b7bfcd; } /* ---- Per-slide image (mobile only, hidden on desktop) ---- */ .wwd-inside__col-media { display: none; } .wwd-inside__col-title-overlay { display: none; } /* ---- Column body (content) ---- */ .wwd-inside__col-body { display: flex; flex-direction: column; } /* ---- Number badge ---- */ .wwd-inside__badge { align-self: flex-start; margin-bottom: 40px; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: #fff; flex-shrink: 0; transition: background 0.45s ease; } .wwd-inside__badge-num { font-family: var(--wwd-font, 'Lexend Deca', sans-serif); font-weight: 600; font-size: 32px; line-height: 1.2; color: #264abc; transition: color 0.45s ease; } /* Badge inverts when its column is active */ .wwd-inside__col.is-active .wwd-inside__badge { background: #16315e; } .wwd-inside__col.is-active .wwd-inside__badge-num { color: #5fd1c1; } /* ---- Description text ---- */ .wwd-inside__desc { margin: 0; font-family: var(--wwd-font, 'Lexend Deca', sans-serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: #fff; } /* ---- Pagination (hidden on desktop) ---- */ .wwd-inside__pagi { display: none; } /* ---- Mobile background · 2-column grid (hidden on desktop & tablet) ---- */ .wwd-inside__bg--mb { display: none; grid-template-columns: repeat(2, 1fr); } /* ===================================================== TABLET (max-width: 1023px) ===================================================== */ @media (max-width: 1023px) { /* HERO */ .wwd-hero { padding-top: 18px; } .wwd-hero__inner { padding: 0 16px; } .wwd-hero__header { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 24px; } .wwd-hero__title { font-size: 48px; line-height: 1.1; } /* Hero image · mobile/tablet asset */ .wwd-hero__image { background-image: url('../../assets/images/v2/what-we-do/hero-banner-mb.png'); } .wwd-submenu { position: sticky; top: var(--mp-nav-h, 56px); border-top: 1px solid var(--wwd-grey); border-bottom: 1px solid #B7BFCD; } .wwd-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. */ .wwd-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; } .wwd-submenu__sep { display: block; align-self: stretch; width: 100%; height: 1px; margin: 16px 0; } .wwd-submenu__arrow { width: 36px; height: 36px; } /* Main .wwd-submenu stays in flow on mobile · sticky behavior moved to .wwd-submenu-pill (position:fixed) to avoid reflow loop. */ .wwd-submenu { position: static; top: auto; box-shadow: none !important; border-bottom: none; } /* Mobile sticky pill · slides in when JS adds .is-visible */ .wwd-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; } .wwd-submenu-pill.is-visible { transform: translateY(0); pointer-events: auto; } .wwd-submenu-pill .wwd-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 */ .wwd-submenu-pill .wwd-submenu__fill { transform: translateY(0); } .wwd-submenu-pill .wwd-submenu__arrow { opacity: 1; transform: none; } .wwd-inside__inner { padding: 40px 32px 60px; } .wwd-inside__title-bar { height: 128px; padding: 32px 32px 0; } .wwd-inside__title-word { font-size: 68px; } .wwd-inside__wrap { height: 500px; } .wwd-inside__swiper { height: 372px; /* 500 - 128 */ } .wwd-inside__col { padding: 24px; } .wwd-inside__badge { margin-bottom: 24px; width: 44px; height: 44px; } .wwd-inside__badge-num { font-size: 24px; } .wwd-inside__desc { font-size: 16px; } } /* ===================================================== MOBILE (max-width: 767px) ===================================================== */ @media (max-width: 767px) { /* Hero image · mobile sizing (asset swapped at 1023px) */ .wwd-hero__image { height: 583px; aspect-ratio: 40 / 53; background-position: 50% top; } /* ---- COTECCONS INSIDE · mobile layout ---- */ /* Section: keep dark background */ .wwd-inside { background: #ffffff; } .wwd-inside__inner { padding: 40px 16px 48px; } /* Wrap: auto height, keep overflow:hidden so clip-path works */ .wwd-inside__wrap { height: auto; overflow: hidden; } /* Hide desktop 4-cell bg; show mobile 2-cell bg */ .wwd-inside__bg { display: none; } .wwd-inside__bg--mb { display: grid; } /* Title bar: visible at the top of the wrap */ .wwd-inside__title-bar { display: block; position: relative; height: auto; padding: 24px; z-index: 2; pointer-events: none; } .wwd-inside__title-word { font-size: 40px; } /* Swiper container → plain static block */ .wwd-inside__swiper { height: auto; overflow: visible; } /* Cols: vertical stack */ .wwd-inside__cols { flex-direction: column; height: auto; } .wwd-inside__bg-cell:not(:last-child) { border-right: none; } /* Each column: horizontal row (badge + desc) */ .wwd-inside__col { flex: none; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 24px; border-right: none; border-bottom: 1px solid rgba(183, 191, 205, 0.4); cursor: pointer; position: relative; } .wwd-inside__col:first-child { border-left: none; border-top: 1px solid rgba(183, 191, 205, 0.4); } .wwd-inside__col:last-child { border-bottom: none; } .wwd-inside__col.is-active { background: linear-gradient(to right, rgba(38, 74, 188, 0.55) 0%, rgba(38, 74, 188, 0) 80%); } /* Hide col-media (old Swiper slide images), title overlay, pagination */ .wwd-inside__col-media, .wwd-inside__col-title-overlay, .wwd-inside__pagi { display: none; } /* Col-body: horizontal row — badge left, desc right */ .wwd-inside__col-body { position: static; display: flex; flex-direction: column; align-items: start; gap: 18px; padding: 0; } /* Badge: smaller size on mobile */ .wwd-inside__badge { width: 32px; height: 32px; flex-shrink: 0; margin-bottom: 0; } .wwd-inside__badge-num { font-size: 20px; font-weight: 500; } .wwd-inside__desc { font-size: 20px; line-height: 1.35; } } /* ===================================================== SECTION 2 · BUILDING FUTURE (origin) · hover-driven Default: image-first + dark gradient. Hover: 4 skyline strips slide up (staggered), gradient fades, logo teal slides up, BUILDING/FUTURE fill rises, tagline teal wipes left→right. All reversible on mouse-leave. ===================================================== */ .wwd-origin { background: #fff; } .wwd-origin__inner { max-width: 1440px; margin: 0 auto; padding: 80px var(--wwd-side-px); } /* ---- Section header · hamburger icon + title (above the box) ---- */ .wwd-origin__header { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; } .wwd-origin__header-icon { flex-shrink: 0; width: auto; height: 44px; object-fit: contain; } .wwd-origin__header-title { margin: 0; font-family: var(--wwd-font); font-weight: 600; font-size: 48px; line-height: 1.15; text-transform: uppercase; color: #264abc; } /* ---- Photo box (hover target) · cut corners top-left + bottom-right ---- */ .wwd-origin__box { position: relative; height: 747px; padding: 40px; overflow: hidden; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); isolation: isolate; } /* ---- Background layers ---- */ .wwd-origin__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .wwd-origin__bg-first { position: absolute; inset: 0; background: url('../../assets/images/v2/what-we-do/image-first.png') center / cover no-repeat; } .wwd-origin__bg-second { position: absolute; inset: 0; display: flex; } .wwd-origin__strip { flex: 1 1 25%; background-position: center; background-size: cover; background-repeat: no-repeat; transform: translateY(101%); /* slow → fast → slow (ease-in-out), staggered podium order via --i */ transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); transition-delay: calc(var(--i) * 0.12s); will-change: transform; } .wwd-origin__strip:nth-child(1) { background-image: url('../../assets/images/v2/what-we-do/image-second-1.png'); } .wwd-origin__strip:nth-child(2) { background-image: url('../../assets/images/v2/what-we-do/image-second-2.png'); } .wwd-origin__strip:nth-child(3) { background-image: url('../../assets/images/v2/what-we-do/image-second-3.png'); } .wwd-origin__strip:nth-child(4) { background-image: url('../../assets/images/v2/what-we-do/image-second-4.png'); } .wwd-origin__bg-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.80) 82.35%); transition: opacity 0.6s ease; } /* Hover · strips rise, gradient clears */ .wwd-origin__box:hover .wwd-origin__strip { transform: translateY(0); } .wwd-origin__box:hover .wwd-origin__bg-fade { opacity: 0; } /* ---- Top row ---- */ .wwd-origin__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } /* ---- Logo C · blue tile + teal fill sliding up ---- */ .wwd-origin__logo { position: relative; flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; background: #264abc; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); } .wwd-origin__logo-fill { position: absolute; inset: 0; z-index: 1; background: #5fd1c1; transform: translateY(100%); transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1); } .wwd-origin__box:hover .wwd-origin__logo-fill { transform: translateY(0); } .wwd-origin__logo img { position: absolute; inset: 0; z-index: 2; margin: auto; width: 60px; height: auto; object-fit: contain; } /* ---- BUILDING / FUTURE · outline + rising fill ---- */ .wwd-origin__bf { position: relative; flex-shrink: 0; width: 349px; height: 107px; font-family: var(--wwd-font); font-weight: 600; text-transform: uppercase; } /* Outline = exact Figma SVG (building white, future #16315e); solid-fill SVG rises bottom→top on hover via clip-path. Colours baked into the SVG files. */ .wwd-origin__bf-word { position: absolute; display: block; } .wwd-origin__bf-word--building { left: 0; top: 1px; width: 343px; height: 49px; } .wwd-origin__bf-word--future { left: 87px; top: 56px; width: 254px; height: 48px; } .wwd-origin__bf-outline, .wwd-origin__bf-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .wwd-origin__bf-fill { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1); } .wwd-origin__box:hover .wwd-origin__bf-fill { clip-path: inset(0 0 0 0); } /* ---- Tagline (bottom) · teal wipes left→right ---- */ .wwd-origin__tagline { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 2; margin: 0; display: flex; flex-direction: column; font-family: var(--wwd-font); font-weight: 600; font-size: 80px; line-height: 1.2; } .wwd-origin__tagline-line { width: fit-content; max-width: 100%; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #5fd1c1 50%, #e4e2df 50%); background-size: 200% 100%; background-position: var(--rest, 80%) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.2s cubic-bezier(0.76, 0, 0.24, 1); } .wwd-origin__tagline-line:nth-child(2) { transition-delay: 0.08s; } .wwd-origin__box:hover .wwd-origin__tagline-line { background-position: 0 0; } /* ---- Mobile tagline · explicit teal segments ("Chún" + "ng") · shown <768 ---- */ .wwd-origin__tagline-mb { display: none; position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; margin: 0; flex-direction: column; font-family: var(--wwd-font); font-weight: 600; font-size: 40px; line-height: 1.1; color: #e4e2df; } .wwd-origin__tagline-mb-line { display: block; transition: color 0.6s cubic-bezier(0.76, 0, 0.24, 1); } .wwd-origin__tagline-mb-line:first-child { white-space: nowrap; } .wwd-origin__tagline-mb .t { color: #5fd1c1; transition: color 0.6s cubic-bezier(0.76, 0, 0.24, 1); } /* tap/hover: whole line turns teal */ .wwd-origin__box:hover .wwd-origin__tagline-mb-line { color: #5fd1c1; } /* ---- Responsive (provisional · desktop is the priority) ---- */ @media (max-width: 1023px) { .wwd-origin__inner { padding: 48px 16px; } .wwd-origin__box { height: 540px; padding: 24px; } .wwd-origin__bf { width: 250px; height: 80px; } .wwd-origin__bf-word--building { width: 250px; height: 35.71px; top: 1px; } .wwd-origin__bf-word--future { width: 185px; height: 34.96px; left: 64px; top: 42px; } .wwd-origin__tagline { left: 24px; right: 24px; bottom: 24px; font-size: 48px; } } @media (max-width: 767px) { /* Section header · mobile scale (icon top-aligned, gap stays 24px) */ .wwd-origin__header { align-items: flex-start; } .wwd-origin__header-icon { height: 30px; } .wwd-origin__header-title { font-size: 32px; line-height: 1.2; } /* Portrait box · mobile photo */ .wwd-origin__box { height: auto; aspect-ratio: 408 / 725; } .wwd-origin__bg-first { background-image: url('../../assets/images/v2/what-we-do/image-first-mb.png'); } /* Hover skyline · only 2 halves on mobile */ .wwd-origin__strip:nth-child(3), .wwd-origin__strip:nth-child(4) { display: none; } .wwd-origin__strip:nth-child(1) { background-image: url('../../assets/images/v2/what-we-do/image-second-1-mb.png'); transition-delay: 0s; } .wwd-origin__strip:nth-child(2) { background-image: url('../../assets/images/v2/what-we-do/image-second-2-mb.png'); transition-delay: 0.12s; } /* BUILDING / FUTURE · mobile scale (~36px) */ .wwd-origin__bf { width: 196px; height: 60px; } .wwd-origin__bf-word--building { width: 196px; height: 28px; top: 0; left: 0; } .wwd-origin__bf-word--future { width: 147px; height: 27.78px; left: 49px; top: 31px; } /* Swap tagline: hide desktop wipe, show mobile 2-line version */ .wwd-origin__tagline { display: none; } .wwd-origin__tagline-mb { display: flex; } } /* ===================================================== ĐỊNH HƯỚNG PHÁT TRIỂN SECTION Card grid copied from home "What We Do" (dhpt- prefix, own copy — not shared with index.html). No service button. ===================================================== */ .dhpt-section { background: #fff; } .dhpt-padding { max-width: 1440px; margin: 0 auto; padding: 40px 56px 56px; } /* AN TOÀN & CHẤT LƯỢNG: clip swiper overflow at section level */ #sec-an-toan-chat-luong { overflow: hidden; background: var(--gray-100); } /* ── Section header ── */ .dhpt-header-wrap { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; } .dhpt-header-row { display: flex; align-items: flex-end; justify-content: space-between; } .dhpt-heading { display: flex; align-items: flex-start; gap: 24px; } .dhpt-heading-icon { width: 26px; height: 48px; flex-shrink: 0; display: block; } .dhpt-heading-title { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 48px; line-height: 1.15; color: #264abc; text-transform: uppercase; margin: 0; } /* Divider line */ .dhpt-divider { height: 1px; background: #e4e2df; width: 100%; } /* ── Section header button (shared with home page wwd-service-btn) ── */ .wwd-service-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: #264abc; color: #fff; font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.5; text-transform: uppercase; text-decoration: none; flex-shrink: 0; transition: background 0.2s ease; } .wwd-service-btn:hover { background: #1B3585; color: #fff; } .wwd-svc-arrow { display: inline-flex; align-items: center; width: 24px; height: 24px; overflow: hidden; position: relative; flex-shrink: 0; } .wwd-svc-a { position: absolute; top: 50%; left: 50%; width: 18px; height: 16px; transform: translate(-50%, -50%) rotate(-45deg); transition: transform 0.3s ease; flex-shrink: 0; } .wwd-svc-a--2 { transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg); } .wwd-service-btn:hover .wwd-svc-a:not(.wwd-svc-a--2) { transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg); } .wwd-service-btn:hover .wwd-svc-a--2 { transform: translate(-50%, -50%) rotate(-45deg); } /* ── Cards grid ── */ .dhpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ── Single card ── */ .dhpt-card { position: relative; overflow: hidden; height: 414px; cursor: pointer; } .dhpt-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* Gradient layers */ .dhpt-card-grad { position: absolute; inset: 0; z-index: 1; transition: opacity 0.5s ease; pointer-events: none; } .dhpt-card-grad--dark { background: linear-gradient(to bottom, rgba(0,0,0,0) 71%, rgba(0,0,0,0.7) 94%); } .dhpt-card-grad--blue { background: linear-gradient(to bottom, rgba(38,74,188,0) 20%, #264abc 100%); opacity: 0; } /* Card content */ .dhpt-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; display: flex; flex-direction: column; z-index: 2; /* no gap — use margin-top on expandable items so hidden items don't reserve space */ } /* Header row: title + action */ .dhpt-card-hrow { display: flex; align-items: center; justify-content: space-between; width: 100%; } .dhpt-card-title { font-family: 'Lexend Deca', sans-serif; font-weight: 500; font-size: 24px; line-height: 1.25; color: #fff; margin: 0; } /* Desktop ↗ arrow icon */ .dhpt-card-circle-arrow { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s ease; } /* Description text (hidden by default, animated in) */ .dhpt-card-desc { font-family: 'Lexend Deca', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #fff; margin-top: 0; margin-bottom: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease; } /* Mobile expand button (hidden on desktop) */ .dhpt-expand-btn { display: none; } /* Mobile detail link (hidden on desktop) */ .dhpt-card-detail { display: none; } /* ── Desktop hover states (≥ 992 px) ── */ @media (min-width: 992px) { .dhpt-card:hover .dhpt-card-grad--dark { opacity: 0; } .dhpt-card:hover .dhpt-card-grad--blue { opacity: 1; } .dhpt-card:hover .dhpt-card-circle-arrow { transform: translate(4px, -4px); } .dhpt-card:hover .dhpt-card-desc { opacity: 1; max-height: 120px; margin-top: 24px; } } /* ── Mobile / Tablet (≤ 991 px) ── */ @media (max-width: 991px) { .dhpt-padding { padding: 48px 16px 0; } .dhpt-header-row { flex-direction: column; align-items: flex-start; gap: 18px; min-height: auto; } .dhpt-heading-icon { height: 32px; } .dhpt-heading-title { font-size: 32px; line-height: 1.2; } .dhpt-header-wrap { margin-bottom: 24px; } .dhpt-grid { grid-template-columns: 1fr; } .dhpt-card { height: 544px; } /* Title size on mobile */ .dhpt-card-title { font-size: 20px; line-height: 1.3; } /* Hide desktop circle arrow */ .dhpt-card-circle-arrow { display: none; } /* Show expand button */ .dhpt-expand-btn { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .dhpt-expand-label { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.5; color: #fff; white-space: nowrap; } /* Plus icon: white square with blue border and + */ .dhpt-expand-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; background: #fff; border: 1px solid #264abc; position: relative; } .dhpt-expand-icon::before, .dhpt-expand-icon::after { content: ''; position: absolute; background: #264abc; } .dhpt-expand-icon::before { width: 1px; height: 12px; } .dhpt-expand-icon::after { width: 12px; height: 1px; } /* Show detail link on mobile */ .dhpt-card-detail { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: 'Lexend Deca', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.7); padding-bottom: 2px; width: fit-content; margin-top: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease; } /* Mobile open state */ .dhpt-card.is-open .dhpt-card-grad--dark { opacity: 0; } .dhpt-card.is-open .dhpt-card-grad--blue { opacity: 1; } .dhpt-card.is-open .dhpt-card-desc { opacity: 1; max-height: 120px; margin-top: 24px; } .dhpt-card.is-open .dhpt-card-detail { opacity: 1; max-height: 48px; margin-top: 24px; } } /* Detail link arrow (mobile) */ .dhpt-detail-arrow { display: inline-flex; align-items: center; width: 24px; height: 24px; overflow: hidden; position: relative; flex-shrink: 0; } .dhpt-da { position: absolute; top: 50%; left: 50%; width: 18px; height: 16px; transform: translate(-50%, -50%) rotate(-45deg); transition: transform 0.3s ease; flex-shrink: 0; } .dhpt-da--2 { transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg); } .dhpt-card-detail:hover .dhpt-da:not(.dhpt-da--2) { transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg); } .dhpt-card-detail:hover .dhpt-da--2 { transform: translate(-50%, -50%) rotate(-45deg); } .atcl-desc { font-family: var(--wwd-font, 'Lexend Deca', sans-serif); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--gray-700); max-width: 564px; } /* ===================================================== SECTION · AN TOÀN & CHẤT LƯỢNG · Marquee Pure CSS infinite scroll — no JS, no jump ===================================================== */ /* Full-bleed wrapper — escapes dhpt-padding, clipped by section */ .atcl-marquee { overflow: hidden; padding-top: 56px; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } /* Track = 2 × original set; animating -50% = exactly one set width → seamless */ .atcl-marquee__track { display: flex; gap: 24px; align-items: flex-start; width: max-content; animation: atcl-marquee-scroll 10s linear infinite; will-change: transform; } @keyframes atcl-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Each card */ .atcl-marquee__item { flex-shrink: 0; width: calc((100vw - 4 * 24px) / 5); } /* Even-position items stagger down */ .atcl-marquee__item--down { margin-top: 56px; } /* Photo */ .atcl-marquee__photo { height: 414px; overflow: hidden; } .atcl-marquee__photo img { width: 100%; height: 100%; object-fit: cover; } /* ── Responsive · Tablet (≤ 1023px) ── */ @media (max-width: 1023px) { .atcl-marquee__item { width: calc((100vw - 24px) / 2.5); } .atcl-marquee__photo { height: 320px; } } /* ── Responsive · Mobile (≤ 767px) ── */ @media (max-width: 767px) { .atcl-marquee { padding-top: 24px; } .atcl-marquee__track { gap: 10px; } .atcl-marquee__item { width: 240px; } .atcl-marquee__photo { height: 261px; } .atcl-marquee__item--down { margin-top: 40px; } } /* ───────────────────────────────────────── THIẾT BỊ · Equipment Cards (equip-) ───────────────────────────────────────── */ /* ── Swiper wrapper ── */ .equip-swiper { margin-top: 40px; overflow: hidden; } /* ── Grid (inside each slide) ── */ .equip-grid { display: flex; gap: 24px; align-items: stretch; } /* ── Card ── */ .equip-card { position: relative; flex: 1 0 0; min-width: 0; height: 489px; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; padding: 40px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%); transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1), clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* fade-in initial state – animated by GSAP ScrollTrigger */ opacity: 0; transform: translateY(32px); } .equip-card.is-active { flex-grow: 2.4444; clip-path: polygon( 20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px ); } /* Image */ .equip-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; pointer-events: none; display: block; opacity: 0; /* hidden by default; mini shows instead */ transition: opacity 0.2s ease; } /* Mini image — visible by default */ .equip-card-img--mini { opacity: 1; } /* Desktop active: fade in full image, fade out mini */ @media (min-width: 992px) { .equip-card.is-active .equip-card-img:not(.equip-card-img--mini) { opacity: 1; } .equip-card.is-active .equip-card-img--mini { opacity: 0; } } /* Content */ .equip-card-content { position: relative; flex-direction: column; gap: 24px; height: 100%; justify-content: space-between; z-index: 2; display: flex; } /* Title row */ .equip-card-hrow { display: flex; align-items: center; gap: 16px; } .equip-card-title { font-family: 'Lexend Deca', sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; color: #fff; margin: 0; } .equip-card-quantity { display: flex; align-items: center; gap: 12px; width: fit-content; padding: 12px; background: #5FD1C1; } .equip-card-quantity .equip-card-bullet { width: 8px; height: 8px; background: #16315E; margin-bottom: 1px; } .equip-card-quantity .equip-card-quantity-text { font-family: 'Lexend Deca', sans-serif; font-size: 14px; font-weight: 600; color: #16315E; text-transform: uppercase; } /* ── Content row (desc + nav) ── */ #sec-thiet-bi .atcl-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .equip-nav { display: flex; gap: 24px; flex-shrink: 0; } .equip-nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--white); transition: background 0.2s ease; flex-shrink: 0; border: 1.5px solid var(--blue-500); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .equip-nav-btn svg path { stroke: var(--blue-500); transition: stroke 0.2s ease; } .equip-nav-btn:not(.swiper-button-disabled):hover { background: var(--blue-500); border-color: var(--blue-500); } .equip-nav-btn.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .equip-nav-btn:not(.swiper-button-disabled):hover svg path, .equip-nav-btn:not(.swiper-button-disabled):hover svg path { stroke: #ffffff; } /* ── Desktop (≥ 992 px) · quantity slides up from bottom ── */ @media (min-width: 992px) { .equip-card-quantity { transform: translateY(50%); opacity: 0; pointer-events: none; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; } .equip-card.is-active .equip-card-quantity { transform: translateY(0); opacity: 1; pointer-events: auto; } } /* ── Tablet / Mobile (< 992 px) ── */ @media (max-width: 991.98px) { .equip-swiper { margin-top: 24px; } /* hide nav arrows on mobile – user swipes instead */ .equip-nav { display: none; } /* card as solo slide child needs block display */ .equip-card { display: block; padding: 24px; } .equip-grid { flex-direction: column; gap: 24px; } .equip-card, .equip-card.is-active { flex: none; width: 100%; height: 402px; cursor: pointer; transition: none; clip-path: none; } .equip-card-title { font-size: 20px; } .equip-card-quantity .equip-card-quantity-text { font-size: 12px; } } /* ============================================================ SECTION · HỆ SINH THÁI COTECCONS (.au-group) (ported from about-us.css — uses --wwd-* variables) ============================================================ */ #sec-he-sinh-thai-coteccons .dhpt-header-row { margin-bottom: 24px; } .au-group { background: #f7f6f5; } .au-group__inner { max-width: 1440px; margin: 0 auto; padding: 80px 56px; } /* --- 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(--wwd-blue); margin: 0; line-height: 1.15; } /* --- Tab navigation --- */ .au-group__tabs-wrap { border-bottom: 1px solid var(--wwd-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(--wwd-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(--wwd-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(--wwd-blue); } .au-group__tab:hover:not(.is-active) { color: var(--wwd-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(--wwd-blue); cursor: pointer; transition: background 0.2s; } .au-group__nav:hover:not(:disabled):not(.swiper-button-disabled) { background: var(--wwd-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__inner { padding: 48px 16px; } .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; } .au-group__tab { padding: 0 0 24px !important; } /* 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 */ .au-group__swiper .swiper-wrapper { transition-timing-function: linear !important; } } @media (max-width: 567px) { .atcl-marquee__item { width: 196px; } }