/* ========================================================================== QUANG VINH BAY EXPRESS — style.css Bảng màu: đỏ – cam – vàng đậm (theo logo & banner) ========================================================================== */ /* ---------- 1. Design tokens ---------- */ @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { --red-800: #8E040A; --red-700: #B0060E; --red-600: #CC0A13; --red-500: #E3141B; --red-400: #FF3B2F; --orange-600: #F04A0C; --orange-500: #FF5E0E; --orange-400: #FF7A1A; --amber-400: #FFA41B; --gold-400: #FFC21A; --gold-300: #FFD45C; --ink-900: #1E0B08; --ink-800: #2E1612; --ink-700: #4B3430; --ink-500: #7C6560; --ink-400: #A08B85; --line: #F2E2DA; --line-2: #EAD3C8; --cream: #FFF8F2; --cream-2: #FFF0E4; --peach: #FFE3D1; --dark-950: #120403; --dark-900: #1A0705; --dark-800: #260B08; --zalo: #0068FF; --c-bac: #E3141B; --c-trung: #FF7A1A; --c-nam: #FFB000; --grad-fire: linear-gradient(115deg, #D90F17 0%, #F2330F 35%, #FF6A0E 65%, #FFA41B 88%, #FFC21A 100%); --grad-red: linear-gradient(120deg, #B0060E 0%, #E3141B 45%, #FF4A12 100%); --grad-gold: linear-gradient(120deg, #FF6A0E 0%, #FFA41B 55%, #FFC93A 100%); --grad-text: linear-gradient(100deg, #D90F17 0%, #FF4A12 30%, #FF8A0F 55%, #FFB81A 72%, #FF4A12 88%, #D90F17 100%); --grad-dark: linear-gradient(160deg, #2A0A07 0%, #5C0D0A 50%, #B0060E 100%); --grad-messenger: linear-gradient(45deg, #0A7CFF 0%, #A033FF 60%, #FF5280 90%, #FF7061 100%); --shadow-xs: 0 1px 2px rgba(90, 20, 10, .06); --shadow-sm: 0 6px 18px -6px rgba(120, 25, 10, .14); --shadow-md: 0 20px 44px -18px rgba(130, 25, 10, .26); --shadow-lg: 0 44px 90px -30px rgba(130, 25, 10, .38); --shadow-glow: 0 14px 30px -10px rgba(240, 60, 15, .6); --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-xl: 36px; --container: 1240px; --topbar-h: 40px; --header-h: 78px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--ink-900); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Khối đang trượt vào (hiệu ứng xuất hiện) không làm trang rộng ra trên điện thoại; clip không ảnh hưởng thanh dính (sticky) */ main, .footer { overflow-x: clip; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--red-500); color: #fff; } .no-scroll { overflow: hidden; } [hidden] { display: none !important; } .container { width: min(100% - 32px, var(--container)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--ink-900); color: #fff; font-weight: 700; transition: top .3s; } .skip-link:focus { top: 16px; } .ic { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Preloader (CSS-only, chỉ hiện ở lần truy cập đầu tiên trong phiên) */ body::before, body::after { content: ''; position: fixed; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; } body::before { content: 'QUANG VINH BAY EXPRESS'; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding-top: 210px; font: 800 13px/1 var(--font); letter-spacing: .42em; color: var(--red-500); background: linear-gradient(90deg, #E3141B, #FF7A1A, #FFC21A) 50% calc(50% + 140px) / 0 4px no-repeat, radial-gradient(circle at 50% 45%, #fff 0%, #FFF3EA 55%, #FFE3D1 100%); } body::after { z-index: 10000; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: #fff url(../img/logo-160.webp) center / cover no-repeat; } html.preload body::before, html.preload body::after { opacity: 1; visibility: visible; transition: none; } html.preload body::before { animation: preload-bar .75s var(--ease) .05s forwards, preload-auto .5s ease 4s forwards; } html.preload body::after { animation: preload-pop .7s var(--spring) both, preload-pulse 1.4s ease-out .4s infinite, preload-auto .5s ease 4s forwards; } @keyframes preload-bar { to { background-size: 220px 4px, auto; } } @keyframes preload-pop { from { transform: scale(.4) rotate(-30deg); opacity: 0; } } @keyframes preload-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 18, .45), 0 20px 40px -12px rgba(200, 20, 10, .45); } 100% { box-shadow: 0 0 0 36px rgba(255, 90, 18, 0), 0 20px 40px -12px rgba(200, 20, 10, .45); } } @keyframes preload-auto { to { opacity: 0; visibility: hidden; } } /* ---------- 3. Typography & utilities ---------- */ .section { position: relative; padding: clamp(72px, 9vw, 128px) 0; } .section--cream { background: var(--cream); } .section--tight { padding: clamp(48px, 6vw, 80px) 0; } .section-head { max-width: 760px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red-500); } .eyebrow__mark { display: inline-flex; gap: 3px; } .eyebrow__mark i { width: 5px; height: 14px; border-radius: 2px; background: var(--grad-fire); transform: skewX(-20deg); animation: eyebrow-blink 1.6s ease-in-out infinite; } .eyebrow__mark i:nth-child(2) { animation-delay: .15s; } .eyebrow__mark i:nth-child(3) { animation-delay: .3s; } .eyebrow--light { color: var(--gold-300); } @keyframes eyebrow-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .title { margin-top: 14px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 900; line-height: 1.14; letter-spacing: -.03em; } .title, .hero__title, .page-hero__title, .cta-band h2, .svc__title, .why-card h3, .step h3 { text-wrap: balance; } .lead, .hero__lead, .page-hero__desc, .svc__desc, .why-card p, .step p, .review__text, .acc__a p, .post-card p { text-wrap: pretty; } .title--sm { font-size: clamp(26px, 3.2vw, 40px); } .lead { margin-top: 18px; font-size: clamp(16px, 1.35vw, 18.5px); color: var(--ink-700); line-height: 1.75; } .muted { color: var(--ink-500); } .text-grad { background: var(--grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: .08em; animation: gradient-pan 7s linear infinite; } .text-italic { font-style: italic; } .text-gold { background: linear-gradient(100deg, #FFE08A 0%, #FFC21A 30%, #FFF0B8 50%, #FFC21A 70%, #FFE08A 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: .08em; animation: gradient-pan 6s linear infinite; } @keyframes gradient-pan { to { background-position: 200% 50%; } } /* ---------- 4. Buttons ---------- */ .btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: var(--h); padding: 0 1.6em; border: 0; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s, color .3s; -webkit-tap-highlight-color: transparent; } .btn .ic { font-size: 1.15em; transition: transform .4s var(--ease); } .btn:hover .ic--go { transform: translateX(4px); } .btn--sm { --h: 42px; font-size: 14px; padding: 0 1.2em; } .btn--lg { --h: 58px; font-size: 16px; padding: 0 1.9em; } .btn--block { width: 100%; } .btn--fire { color: #fff; background: var(--grad-fire); background-size: 160% 100%; box-shadow: var(--shadow-glow); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-position .6s var(--ease); } .btn--fire::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-130%) skewX(-20deg); animation: shine 3.6s var(--ease) infinite; } .btn--fire:hover { background-position: 100% 0; box-shadow: 0 20px 40px -12px rgba(240, 60, 15, .75); transform: translateY(-2px); } .btn--ghost { background: #fff; color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-xs); } .btn--ghost:hover { color: var(--red-500); box-shadow: inset 0 0 0 1.5px var(--orange-400), var(--shadow-sm); transform: translateY(-2px); } .btn--white { background: #fff; color: var(--red-500); box-shadow: 0 14px 30px -12px rgba(80, 0, 0, .45); } .btn--white:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(80, 0, 0, .55); } .btn--glass { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--glass:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); } .btn--zalo { color: #fff; background: var(--zalo); box-shadow: 0 14px 30px -12px rgba(0, 104, 255, .6); } .btn--zalo:hover { transform: translateY(-2px); background: #0058DB; } .btn--dark { color: #fff; background: var(--ink-900); } .btn--dark:hover { background: var(--red-600); transform: translateY(-2px); } .zalo-tag { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--zalo); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; } .btn--zalo .zalo-tag { background: #fff; color: var(--zalo); } .ripple { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .7s var(--ease) forwards; pointer-events: none; } .btn--ghost .ripple, .btn--white .ripple { background: rgba(255, 106, 14, .2); } @keyframes ripple { to { transform: scale(1); opacity: 0; } } @keyframes shine { 0% { transform: translateX(-130%) skewX(-20deg); } 55%, 100% { transform: translateX(330%) skewX(-20deg); } } /* ---------- 5. Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: transform .5s var(--ease); } .site-header.is-scrolled { transform: translateY(calc(-1 * var(--topbar-h))); } .header-hidden .site-header.is-scrolled { transform: translateY(calc(-100% - 6px)); } .topbar { position: relative; height: var(--topbar-h); color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 500; background: linear-gradient(90deg, #8E040A 0%, #D50F17 38%, #F2330F 72%, #FF7A1A 100%); overflow: hidden; } .topbar::after { content: ''; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); transform: translateX(-120%) skewX(-20deg); animation: topbar-sweep 7s ease-in-out infinite; pointer-events: none; } @keyframes topbar-sweep { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(420%) skewX(-20deg); } } .topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .topbar__group { display: flex; align-items: center; gap: 22px; min-width: 0; } .topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .3s; } .topbar__item .ic { font-size: 15px; color: var(--gold-300); } a.topbar__item:hover { color: #fff; } .topbar__live { width: 8px; height: 8px; border-radius: 50%; background: #3BEA7E; animation: live 2s infinite; } .topbar__social { display: flex; gap: 6px; } .topbar__social a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); transition: background .3s, transform .3s; font-size: 13px; } .topbar__social a:hover { background: #fff; color: var(--red-500); transform: translateY(-2px); } .topbar__social .zl { font-size: 7.5px; font-weight: 800; } .header { position: relative; height: var(--header-h); transition: background-color .4s, box-shadow .4s, height .4s var(--ease), backdrop-filter .4s; } .site-header.is-scrolled .header { height: 70px; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 10px 30px -14px rgba(110, 20, 8, .28); } .header__inner { height: 100%; display: flex; align-items: center; gap: 24px; width: min(100% - 32px, 1320px); margin-inline: auto; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand__logo { width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px -6px rgba(227, 20, 27, .5); transition: transform .7s var(--spring), width .4s, height .4s; } .site-header.is-scrolled .brand__logo { width: 48px; height: 48px; } .brand:hover .brand__logo { transform: rotate(-14deg) scale(1.06); } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: -.02em; background: var(--grad-red); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; } .brand__sub { margin-top: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .48em; color: var(--orange-500); } .nav { position: relative; display: flex; align-items: center; margin-left: auto; } .nav__list { display: flex; align-items: center; gap: 2px; } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 13px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-900); transition: color .3s; } .nav__link:hover, .nav__link.is-active { color: var(--red-500); } .nav__caret { font-size: 14px; transition: transform .35s var(--ease); } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); } .nav__indicator { position: absolute; bottom: 3px; left: 0; width: 0; height: 3px; border-radius: 3px; background: var(--grad-fire); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; } .nav__dd { position: absolute; top: calc(100% + 14px); left: 50%; width: 680px; padding: 14px; display: grid; grid-template-columns: 1.12fr 1fr; gap: 12px; border-radius: 24px; background: #fff; box-shadow: 0 34px 70px -20px rgba(80, 10, 5, .3), 0 0 0 1px rgba(80, 10, 5, .05); opacity: 0; visibility: hidden; transform: translate(-50%, 12px) scale(.98); transform-origin: top center; transition: opacity .3s, transform .45s var(--ease), visibility 0s linear .3s; } .nav__dd::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .nav__item:hover .nav__dd, .nav__item:focus-within .nav__dd { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; } .dd-col { display: grid; gap: 2px; align-content: start; } .dd-col + .dd-col { gap: 8px; } .dd-label { padding: 6px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); } .dd-intl { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; color: #fff; background: radial-gradient(160px circle at 100% 0%, rgba(255, 140, 30, .45), transparent 60%), linear-gradient(150deg, #1A0705, #5C0D0A 60%, #B0060E); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s; } .dd-intl::after { content: ''; position: absolute; right: -36px; top: -36px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px dashed rgba(255, 210, 120, .45); z-index: -1; animation: spin 22s linear infinite; } .dd-intl:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(120, 10, 5, .6); } .dd-intl__icon { width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; background: var(--grad-gold); transition: transform .6s var(--spring); } .dd-intl:hover .dd-intl__icon { transform: translate(4px, -4px) rotate(-8deg); } .dd-intl b { font-size: 15px; } .dd-intl small { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); } .dd-intl__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--gold-300); } .dd-link { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; transition: background .25s; } .dd-link:hover { background: var(--cream); } .dd-link__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 21px; color: var(--red-500); background: linear-gradient(135deg, #FFF1E7, #FFE0CB); transition: transform .5s var(--spring), background .3s, color .3s; } .dd-link:hover .dd-link__icon { background: var(--grad-fire); color: #fff; transform: rotate(-10deg) scale(1.05); } .dd-link b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-900); } .dd-link small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); } .dd-promo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-radius: 16px; color: #fff; background: var(--grad-fire); overflow: hidden; isolation: isolate; } .dd-promo::after { content: ''; position: absolute; right: -24px; bottom: -24px; width: 96px; height: 96px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .16); z-index: -1; } .dd-promo b { font-size: 15px; } .dd-promo span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .92; } .header__actions { display: flex; align-items: center; gap: 14px; } .hotline { display: flex; align-items: center; gap: 10px; } .hotline__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .hotline__icon .ic { animation: phone-ring 2.6s ease-in-out infinite; } .hotline__icon::before, .hotline__icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange-400); animation: pulse-ring 2.2s ease-out infinite; } .hotline__icon::after { animation-delay: 1.1s; } .hotline__text small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); } .hotline__text b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--red-500); } .burger { display: none; position: relative; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--cream-2); } .burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: var(--ink-900); transition: transform .4s var(--ease), opacity .3s, width .4s var(--ease); } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 23px; right: 19px; } .burger span:nth-child(3) { top: 30px; } .burger:hover span:nth-child(2) { right: 13px; } .progress-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad-fire); transform: scaleX(0); transform-origin: left; pointer-events: none; } /* Header trên nền tối (trang con) */ .has-dark-hero .site-header:not(.is-scrolled) .brand__name { background: none; color: #fff; -webkit-text-fill-color: #fff; } .has-dark-hero .site-header:not(.is-scrolled) .brand__sub { color: var(--gold-300); } .has-dark-hero .site-header:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, .9); } .has-dark-hero .site-header:not(.is-scrolled) .nav__link:hover, .has-dark-hero .site-header:not(.is-scrolled) .nav__link.is-active { color: #fff; } .has-dark-hero .site-header:not(.is-scrolled) .nav__indicator { background: linear-gradient(90deg, #fff, var(--gold-300)); } .has-dark-hero .site-header:not(.is-scrolled) .hotline__text small { color: rgba(255, 255, 255, .75); } .has-dark-hero .site-header:not(.is-scrolled) .hotline__text b { color: #fff; } .has-dark-hero .site-header:not(.is-scrolled) .hotline__icon { background: rgba(255, 255, 255, .18); box-shadow: none; } .has-dark-hero .site-header:not(.is-scrolled) .hotline__icon::before, .has-dark-hero .site-header:not(.is-scrolled) .hotline__icon::after { border-color: rgba(255, 255, 255, .6); } .has-dark-hero .site-header:not(.is-scrolled) .burger { background: rgba(255, 255, 255, .16); } .has-dark-hero .site-header:not(.is-scrolled) .burger span { background: #fff; } .has-dark-hero .site-header:not(.is-scrolled) .header .btn--fire { background: #fff; color: var(--red-500); box-shadow: 0 12px 26px -12px rgba(60, 0, 0, .6); } /* ---------- 6. Mobile navigation ---------- */ .mnav { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; transition: visibility 0s linear .6s; } .mnav.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .mnav__backdrop { position: absolute; inset: 0; background: rgba(22, 5, 3, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s; } .mnav.is-open .mnav__backdrop { opacity: 1; } .mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 90vw); display: flex; flex-direction: column; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(165deg, #9E050C 0%, #E3141B 45%, #FF5A12 100%); overflow-y: auto; transform: translateX(105%); transition: transform .6s var(--ease); } .mnav__panel::before { content: ''; position: absolute; right: -120px; top: 30%; width: 320px; height: 320px; border-radius: 50%; border: 50px solid rgba(255, 255, 255, .06); pointer-events: none; } .mnav.is-open .mnav__panel { transform: none; } .mnav__head { display: flex; align-items: center; justify-content: space-between; } .mnav__head .brand__name { background: none; color: #fff; -webkit-text-fill-color: #fff; } .mnav__head .brand__sub { color: var(--gold-300); } .mnav__close { width: 46px; height: 46px; border: 0; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: rgba(255, 255, 255, .16); transform: rotate(-90deg) scale(.6); opacity: 0; transition: transform .6s var(--spring) .2s, opacity .4s .2s; } .mnav.is-open .mnav__close { transform: none; opacity: 1; } .mnav__links { margin-top: 26px; } .mnav__links > li { opacity: 0; transform: translateX(40px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + .15s); } .mnav.is-open .mnav__links > li { opacity: 1; transform: none; } .mnav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); background: none; color: #fff; font-size: 19px; font-weight: 700; text-align: left; } .mnav__link.is-active { color: var(--gold-300); } .mnav__link .ic { font-size: 18px; opacity: .8; transition: transform .35s var(--ease); } .mnav__link[aria-expanded="true"] .ic { transform: rotate(180deg); } .mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .mnav__sub.is-open { grid-template-rows: 1fr; } .mnav__sub > div { overflow: hidden; } .mnav__sub a { display: flex; align-items: center; gap: 12px; padding: 11px 6px; font-weight: 600; font-size: 15.5px; color: rgba(255, 255, 255, .92); } .mnav__sub a .ic { font-size: 18px; color: var(--gold-300); } .mnav__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; } .mnav__foot .btn { width: 100%; } .mnav__social { display: flex; justify-content: center; gap: 10px; margin-top: 8px; } .mnav__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-size: 17px; } /* ---------- 7. Hero (trang chủ) ---------- */ .hero { position: relative; padding: calc(var(--topbar-h) + var(--header-h) + clamp(24px, 3.4vw, 46px)) 0 clamp(70px, 9vw, 120px); background: radial-gradient(1100px 560px at 85% -10%, #FFE0C7 0%, transparent 62%), radial-gradient(900px 520px at -10% 30%, #FFE7D8 0%, transparent 60%), var(--cream); overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); animation: blob 22s ease-in-out infinite; } .hero__blob--1 { width: 520px; height: 520px; top: -180px; right: -140px; background: #FFB21A; opacity: .5; } .hero__blob--2 { width: 460px; height: 460px; top: 26%; left: -220px; background: #FF4A1C; opacity: .26; animation-delay: -7s; } .hero__blob--3 { width: 640px; height: 640px; bottom: -340px; left: 30%; background: #FF7A1A; opacity: .3; animation-delay: -14s; } .hero__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(227, 20, 27, .17) 1.2px, transparent 1.7px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 46% at 50% 26%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 60% 46% at 50% 26%, #000 30%, transparent 78%); } .hero__swoosh { position: absolute; height: var(--h, 22px); width: var(--w, 40%); border-radius: 999px; background: linear-gradient(90deg, #C80A12, #FF4A12 55%, rgba(255, 140, 20, 0)); transform-origin: left center; transform: rotate(var(--rot, -14deg)); animation: swoosh-in 1.6s var(--ease) both; } .hero__swoosh--r { background: linear-gradient(270deg, #C80A12, #FF4A12 55%, rgba(255, 140, 20, 0)); transform-origin: right center; animation-name: swoosh-in-r; } @keyframes swoosh-in { from { transform: translateX(-70%) rotate(var(--rot, -14deg)); opacity: 0; } } @keyframes swoosh-in-r { from { transform: translateX(70%) rotate(var(--rot, -14deg)); opacity: 0; } } .hero__speed span { position: absolute; left: 0; height: 2px; width: var(--w, 160px); border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 106, 14, .75), transparent); animation: speed var(--t, 3s) linear infinite; animation-delay: var(--d, 0s); opacity: .7; } @keyframes speed { from { transform: translateX(110vw); } to { transform: translateX(-40vw); } } .hero__flight { position: absolute; left: 0; top: 4%; width: 100%; height: 46%; overflow: visible; } .hero__flight .trail { fill: none; stroke: rgba(227, 20, 27, .22); stroke-width: 2; stroke-dasharray: 6 10; animation: dash-flow 1.4s linear infinite; } .hero__flight .plane { fill: var(--red-500); } .hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__badge { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-700); background: rgba(255, 255, 255, .78); border: 1px solid rgba(227, 20, 27, .14); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero__badge b { color: var(--red-500); } .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; animation: live 2s infinite; } .hero__badge-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-400); } @keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } } .hero__title { margin-top: 20px; font-size: clamp(32px, 8.4vw, 88px); font-weight: 900; line-height: 1.06; letter-spacing: -.035em; } .hl { display: block; } .js .hl { opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * .14s + .15s); } .js .is-ready .hl { opacity: 1; transform: none; filter: none; } .hero__title .text-grad { font-style: italic; } .slogan { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 22px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .slogan__item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-700); transition: color .45s; } .slogan__item .ic { font-size: 17px; color: var(--orange-500); transition: color .45s, transform .6s var(--spring); } .slogan__item.is-active { color: #fff; } .slogan__item.is-active .ic { color: #fff; transform: rotate(-12deg) scale(1.15); } .slogan__glider { position: absolute; z-index: 0; top: 0; left: 0; height: 42px; width: 0; border-radius: 999px; background: var(--grad-fire); box-shadow: var(--shadow-glow); transition: transform .7s var(--spring), width .7s var(--spring); } .hero__lead { max-width: 740px; margin-top: 20px; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.75; color: var(--ink-700); } .hero__lead b { color: var(--ink-900); } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; } .hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink-700); } .hero__trust > span { display: inline-flex; align-items: center; gap: 8px; } .hero__trust .ic { color: #fff; font-size: 12px; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--grad-fire); stroke-width: 3.2; } .showcase-wrap { position: relative; width: 100%; max-width: 1120px; margin: clamp(40px, 4.6vw, 60px) auto 0; perspective: 1800px; } .showcase { position: relative; transform-origin: 50% 0%; transform-style: preserve-3d; transform: rotateX(calc(var(--tilt, 0) * 26deg)) scale(calc(1 - var(--tilt, 0) * .08)); } .showcase__glow { position: absolute; inset: 10% 6% -4%; border-radius: 48px; background: var(--grad-fire); filter: blur(70px); opacity: .5; z-index: -1; animation: glow-pulse 6s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: .42; transform: scale(1); } 50% { opacity: .62; transform: scale(1.04); } } .showcase__frame { position: relative; padding: 10px; border-radius: 30px; background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6)); box-shadow: 0 60px 120px -40px rgba(150, 20, 5, .55), inset 0 0 0 1px rgba(255, 255, 255, .8); } .showcase__img { position: relative; border-radius: 22px; overflow: hidden; background: #FFE3D1; } .showcase__img img { width: 100%; height: auto; } .showcase__shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); transform: translateX(-110%); animation: sweep 7s ease-in-out 1.8s infinite; pointer-events: none; } @keyframes sweep { 0% { transform: translateX(-110%); } 35%, 100% { transform: translateX(110%); } } .chip-float { position: absolute; z-index: 3; transform: translateZ(70px); } .chip-float__in { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; text-align: left; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 26px 50px -18px rgba(110, 20, 5, .45), inset 0 0 0 1px rgba(255, 255, 255, .8); animation: bob 6s ease-in-out infinite; } .chip-float__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 22px; color: #fff; background: var(--grad-fire); box-shadow: 0 10px 20px -8px rgba(240, 60, 15, .6); } .chip-float__icon--gold { background: var(--grad-gold); } .chip-float__icon--dark { background: var(--grad-dark); } .chip-float b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; } .chip-float small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-500); } .chip-float--a { top: 13%; right: -4.5%; } .chip-float--b { bottom: 15%; right: -4.5%; } .chip-float--b .chip-float__in { animation-delay: -2s; } .chip-float--c { bottom: -5%; left: 15%; } .chip-float--c .chip-float__in { animation-delay: -4s; } @keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } .spin-badge { position: absolute; z-index: 4; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 24px 50px -18px rgba(140, 20, 5, .5); } .spin-badge__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; } .spin-badge__text text { font-family: var(--font); font-size: 15.5px; font-weight: 800; letter-spacing: 1px; fill: var(--red-500); } .spin-badge img { width: 60%; border-radius: 50%; } .showcase .spin-badge { top: -76px; left: -72px; transform: translateZ(90px); } /* Logo chạy chữ lớn ở góc banner trang chủ */ .spin-badge--hero { width: 212px; height: 212px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 34px 70px -24px rgba(150, 20, 5, .6), 0 0 80px 4px rgba(255, 140, 30, .32); } .spin-badge--hero::before { content: ''; position: absolute; inset: -22px; border-radius: 50%; border: 2px dashed rgba(227, 20, 27, .4); animation: spin 26s linear infinite reverse; } .spin-badge--hero::after { content: ''; position: absolute; top: -26px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--grad-fire); box-shadow: 0 0 0 4px rgba(255, 255, 255, .8); transform-origin: 6px 132px; animation: spin 9s linear infinite; } .spin-badge--hero .spin-badge__text text { font-size: 13.5px; letter-spacing: .4px; } .spin-badge--hero img { width: 63%; } .spin-badge--glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(60, 0, 0, .5); } .spin-badge--glass .spin-badge__text text { fill: #fff; } .spin-badge--glass img { box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); } /* ---------- 8. Page hero (trang con) ---------- */ .page-hero { position: relative; padding: calc(var(--topbar-h) + var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(110px, 12vw, 170px); color: #fff; background: linear-gradient(120deg, #7A0309 0%, #C80A12 36%, #F2330F 68%, #FF8A0F 100%); overflow: hidden; isolation: isolate; } .page-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .page-hero__bg::before { content: ''; position: absolute; inset: -20px; background: url(../img/banner.webp) center / cover no-repeat; opacity: .17; mix-blend-mode: luminosity; filter: blur(2px) saturate(.6); } .page-hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(760px 420px at 82% 0%, rgba(255, 200, 60, .35), transparent 62%), linear-gradient(180deg, rgba(80, 0, 0, .1), rgba(80, 0, 0, .3)); } .page-hero__stripe { position: absolute; z-index: 1; left: -10%; height: var(--h, 14px); width: var(--w, 40%); border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); transform: rotate(-16deg); animation: stripe-slide var(--t, 7s) var(--ease-in-out) infinite; animation-delay: var(--dl, 0s); } @keyframes stripe-slide { 0% { transform: translateX(-60%) rotate(-16deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(260%) rotate(-16deg); opacity: 0; } } .page-hero__float { position: absolute; z-index: 1; left: var(--x); top: var(--y); font-size: var(--s, 30px); color: rgba(255, 255, 255, .2); animation: float-y var(--t, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s); } .page-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; } .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .breadcrumb a { display: inline-flex; align-items: center; gap: 6px; opacity: .85; transition: opacity .3s; } .breadcrumb a:hover { opacity: 1; } .breadcrumb .ic { font-size: 14px; } .breadcrumb > .ic { opacity: .6; } .page-hero__title { margin-top: 22px; max-width: 840px; font-size: clamp(34px, 5.4vw, 66px); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; } .page-hero__desc { margin-top: 18px; max-width: 660px; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .9); } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); } .page-hero__meta span { display: inline-flex; align-items: center; gap: 8px; } .page-hero .spin-badge { position: relative; width: 210px; height: 210px; } .page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; width: 100%; height: clamp(46px, 6vw, 96px); } .page-hero__wave .w-back { fill: rgba(255, 255, 255, .35); animation: wave-move 14s linear infinite; } .page-hero__wave .w-front { fill: var(--wave, #fff); } @keyframes wave-move { to { transform: translateX(-1440px); } } /* ---------- 9. Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; } .stat { position: relative; display: flex; align-items: center; gap: 18px; padding: 32px 28px; transition: background .4s; } .stat:hover { background: var(--cream); } .stat + .stat::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(transparent, var(--line-2), transparent); } .stat__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; flex-shrink: 0; font-size: 27px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); transition: transform .6s var(--spring); } .stat:hover .stat__icon { transform: rotate(-10deg) scale(1.08); } .stat__num { display: block; font-size: clamp(30px, 3vw, 42px); font-weight: 900; line-height: 1; letter-spacing: -.03em; background: var(--grad-red); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; white-space: nowrap; } .stat__label { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink-500); line-height: 1.4; } /* ---------- 10. About + orbit ---------- */ .about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(44px, 6vw, 96px); align-items: center; } .orbit-wrap { position: relative; } .orbit { --size: min(470px, 82vw); --r: calc(var(--size) / 2 - 6px); position: relative; width: var(--size); aspect-ratio: 1; margin: 0 auto; } .orbit__glow { position: absolute; inset: 14%; border-radius: 50%; background: var(--grad-fire); filter: blur(55px); opacity: .38; animation: glow-pulse 6s ease-in-out infinite; } .orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(227, 20, 27, .28); animation: spin 50s linear infinite; } .orbit__ring--2 { inset: 13%; border: 1.5px solid rgba(255, 122, 26, .28); animation-duration: 34s; animation-direction: reverse; } .orbit__ring--3 { inset: -7%; border: 1px solid rgba(227, 20, 27, .1); animation: none; } .orbit__track { position: absolute; inset: 0; animation: spin 32s linear infinite; } .orbit__node { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); } .orbit__node > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-size: 25px; color: var(--red-500); background: #fff; box-shadow: var(--shadow-md); animation: spin 32s linear infinite reverse; } .orbit__node:nth-child(2n) > span { color: #fff; background: var(--grad-fire); } .orbit__logo { position: absolute; inset: 16%; width: 68%; border-radius: 50%; box-shadow: 0 34px 70px -24px rgba(200, 20, 10, .55), 0 0 0 10px rgba(255, 255, 255, .85); animation: float-y 6s ease-in-out infinite; } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes spin { to { transform: rotate(360deg); } } .orbit-badge { position: absolute; left: 0; bottom: 6%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-md); border: 1px solid var(--line); animation: bob 5s ease-in-out infinite; } .orbit-badge__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--grad-fire); } .orbit-badge b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; } .orbit-badge small { color: var(--ink-500); font-size: 12.5px; font-weight: 600; } .orbit-badge--r { left: auto; right: -2%; top: 1%; bottom: auto; animation-delay: -2.5s; } .checklist { display: grid; gap: 12px; margin-top: 26px; } .check { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; } .check:hover { transform: translateX(6px); border-color: rgba(255, 122, 26, .45); box-shadow: var(--shadow-sm); } .check__tick { flex-shrink: 0; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-fire); box-shadow: 0 8px 16px -6px rgba(240, 60, 15, .65); } .check__tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .js .check__tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); transition-delay: calc(var(--d, 0s) + .45s); } .js .is-in .check__tick path, .js .check.is-in .check__tick path { stroke-dashoffset: 0; } .check b { color: var(--ink-900); } .check span { color: var(--ink-700); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ---------- 11. Ticker ---------- */ .ticker { position: relative; z-index: 2; height: clamp(124px, 13vw, 176px); overflow: hidden; margin: -18px 0; pointer-events: none; } .ticker__band { position: absolute; left: -5%; width: 110%; display: flex; overflow: hidden; padding: 15px 0; } .ticker__band--1 { top: 14%; z-index: 2; background: var(--grad-red); transform: rotate(-3deg); box-shadow: 0 24px 40px -22px rgba(170, 10, 10, .7); } .ticker__band--2 { top: 46%; z-index: 1; background: var(--gold-400); transform: rotate(2.2deg); } .ticker__track { display: flex; flex-shrink: 0; align-items: center; width: max-content; animation: marquee 40s linear infinite; } .ticker__band--2 .ticker__track { animation-name: marquee-rev; animation-duration: 48s; } .ticker__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: clamp(17px, 2vw, 25px); font-weight: 900; font-style: italic; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #fff; } .ticker__band--2 .ticker__item { color: var(--ink-900); } .ticker__item .ic { width: .95em; height: .95em; fill: currentColor; stroke: none; opacity: .9; } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ---------- 12. Services bento ---------- */ .bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(250px, auto); gap: 22px; margin-top: 56px; } .svc { position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); overflow: hidden; isolation: isolate; transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s; } .svc:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; } .spot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 26, .14), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; } .spot:hover::before { opacity: 1; } .glow-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--angle), #E3141B, #FF8A00, #FFC21A, #FF5A12, #E3141B); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s; animation: rotate-angle 4s linear infinite; pointer-events: none; } .glow-border:hover::after { opacity: 1; } @keyframes rotate-angle { to { --angle: 360deg; } } .svc__num { position: absolute; top: 22px; right: 26px; font-size: 58px; font-weight: 900; font-style: italic; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(227, 20, 27, .14); transition: transform .5s var(--ease), -webkit-text-stroke-color .5s; } .svc:hover .svc__num { transform: translateY(-4px); -webkit-text-stroke-color: rgba(227, 20, 27, .35); } .svc__icon { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); transition: transform .6s var(--spring); } .svc:hover .svc__icon { transform: rotate(-10deg) scale(1.08); } .svc__title { margin-top: 24px; font-size: 22px; font-weight: 800; } .svc__desc { margin-top: 10px; flex: 1; font-size: 15px; line-height: 1.65; color: var(--ink-500); } .svc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; font-weight: 700; color: var(--red-500); } .svc__link .ic { transition: transform .4s var(--ease); } .svc:hover .svc__link .ic { transform: translateX(6px); } .svc--feature { grid-row: span 2; color: #fff; background: var(--grad-dark); border: 0; } .svc--feature .svc__desc { flex: 0; color: rgba(255, 255, 255, .8); } .svc--feature .svc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .2); } .svc--feature:hover .svc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .45); } .svc--feature .svc__title { font-size: 28px; } .svc--feature .svc__link { color: var(--gold-300); } .svc--feature .svc__icon { background: var(--grad-gold); } .svc__route { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: -1; opacity: .95; } .svc__route path { fill: none; stroke-linecap: round; } .svc__route .r-base { stroke: rgba(255, 255, 255, .1); stroke-width: 10; } .svc__route .r-flow { stroke: rgba(255, 200, 80, .75); stroke-width: 2.5; stroke-dasharray: 4 12; animation: dash-flow 1.3s linear infinite; } .svc__route circle { fill: var(--gold-400); } .svc__route .r-city { fill: #fff; } @keyframes dash-flow { to { stroke-dashoffset: -32; } } .eta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .eta-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .eta-chips b { color: var(--gold-300); } /* Thẻ Chuyển phát quốc tế (trang chủ) */ .svc--intl { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px 48px; padding: clamp(30px, 4vw, 48px); color: #fff; border: 0; background: radial-gradient(560px circle at 80% 50%, rgba(255, 106, 14, .32), transparent 62%), linear-gradient(135deg, #14040A 0%, #2A0A07 45%, #6E0B0A 100%); } .svc--intl::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1.4px 1.4px at 18px 26px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 92px 64px, #FFD45C 50%, transparent 52%), radial-gradient(1.2px 1.2px at 140px 14px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 58px 118px, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 130px 132px, #FFD45C 50%, transparent 52%); background-size: 170px 150px; animation: twinkle 5s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .3; } to { opacity: .85; } } .svc--intl .svc__icon { background: var(--grad-gold); } .svc--intl .svc__title { font-size: clamp(24px, 2.6vw, 32px); } .svc--intl .svc__desc { flex: 0; max-width: 540px; color: rgba(255, 255, 255, .8); } .svc--intl .svc__link { margin-top: 0; color: var(--gold-300); } .svc-intl__tag { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; padding: 6px 12px; border-radius: 999px; vertical-align: middle; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-900); background: var(--gold-400); } .svc-intl__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .svc-intl__tags li { padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); } .svc-intl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; } .svc-intl__globe { width: min(100%, 330px); justify-self: center; animation: float-y 7s ease-in-out infinite; } /* Quả địa cầu */ .globe { display: block; width: 100%; height: auto; overflow: visible; } .globe__halo { fill: none; stroke: rgba(255, 200, 90, .35); stroke-width: 1.4; stroke-dasharray: 3 7; transform-box: fill-box; transform-origin: center; animation: spin 50s linear infinite; } .globe__grid ellipse { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.1; } .globe__orbit { fill: none; stroke: rgba(255, 212, 92, .7); stroke-width: 1.4; stroke-dasharray: 5 7; } .globe__orbit--back { opacity: .4; } .globe__arc { fill: none; stroke: #FFE08A; stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; animation: dash-flow 1.2s linear infinite; } .globe__dots circle { fill: #fff; animation: dot-blink 2.4s ease-in-out infinite; } .globe__dots circle:nth-child(2) { animation-delay: .8s; } .globe__dots circle:nth-child(3) { animation-delay: 1.6s; } @keyframes dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .globe__plane path { fill: #fff; filter: drop-shadow(0 2px 4px rgba(60, 0, 0, .45)); } /* ---------- 13. Why (nền tối) ---------- */ .why { color: #fff; background: var(--dark-900); overflow: hidden; isolation: isolate; } .why__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .why__glow { position: absolute; border-radius: 50%; filter: blur(100px); } .why__glow--1 { width: 620px; height: 620px; top: -220px; left: -160px; background: #E3141B; opacity: .38; animation: blob 24s ease-in-out infinite; } .why__glow--2 { width: 520px; height: 520px; bottom: -220px; right: -120px; background: #FF8A0F; opacity: .26; animation: blob 28s ease-in-out infinite reverse; } .why__lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%); } .why__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 48px; align-items: end; } .why__head .lead { color: rgba(255, 255, 255, .75); margin-top: 0; } .why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .why-card { position: relative; padding: 32px 30px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .4s, background .4s; } .why-card:hover { transform: translateY(-6px); background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); } .why-card.spot::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 110, 30, .22), transparent 45%); } .why-card__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 27px; color: #fff; background: var(--grad-fire); box-shadow: 0 16px 32px -12px rgba(255, 80, 20, .75); transition: transform .6s var(--spring); } .why-card:hover .why-card__icon { transform: rotate(-10deg) scale(1.08); } .why-card__num { position: absolute; top: 24px; right: 26px; font-size: 14px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .3); } .why-card h3 { margin-top: 22px; font-size: 20px; font-weight: 800; } .why-card p { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .7); } .why__marquee { display: flex; margin-top: clamp(56px, 7vw, 96px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .why__marquee .ticker__track { animation-duration: 36s; } .outline-text { display: inline-flex; align-items: center; gap: .4em; padding-right: .4em; font-size: clamp(54px, 9vw, 136px); font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2); } .outline-text { text-transform: uppercase; } .outline-text .ic { width: .42em; height: .42em; color: var(--orange-400); } @keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(50px, -40px) scale(1.08); } 66% { transform: translate(-40px, 30px) scale(.94); } } /* ---------- 14. Coverage map + estimator ---------- */ .coverage__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; } .route-card { position: relative; padding: 22px 18px 18px; border-radius: 34px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate; } .route-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(227, 20, 27, .1) 1.1px, transparent 1.6px); background-size: 22px 22px; } .route-card__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); } .route-card__live { display: inline-flex; align-items: center; gap: 8px; color: #16A34A; letter-spacing: .04em; } .route-map { width: 100%; height: auto; max-height: 700px; margin: 6px auto 0; overflow: visible; } .route-map .seg { fill: none; stroke-width: 6; stroke-linecap: round; transition: opacity .5s, stroke-width .5s; } .route-map .seg--bac { stroke: var(--c-bac); } .route-map .seg--trung { stroke: var(--c-trung); } .route-map .seg--nam { stroke: var(--c-nam); } .route-map .seg--branch { stroke-width: 3.5; } .route-map .flow { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 12; animation: dash-flow 1.1s linear infinite; pointer-events: none; } .route-map .node { transition: opacity .5s; cursor: default; } .route-map .node .dot { fill: #fff; stroke-width: 3.5; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--spring), fill .4s; } .route-map .node--bac .dot { stroke: var(--c-bac); } .route-map .node--trung .dot { stroke: var(--c-trung); } .route-map .node--nam .dot { stroke: var(--c-nam); } .route-map .node--minor .dot { stroke-width: 2.5; } .route-map .node text { font-family: var(--font); font-size: 12.5px; font-weight: 700; fill: var(--ink-700); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; transition: fill .4s; } .route-map .node--hub text { font-size: 14.5px; font-weight: 900; fill: var(--ink-900); } .route-map .node--hub .dot { fill: var(--red-500); stroke: #fff; stroke-width: 3; } .route-map .node--nam.node--hub .dot { fill: var(--c-nam); } .route-map .pulse { fill: none; stroke: var(--red-500); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; } .route-map .pulse--2 { animation-delay: 1.2s; } .route-map .node--nam .pulse { stroke: var(--c-nam); } @keyframes map-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } } .route-map .parcel { fill: var(--gold-400); stroke: #fff; stroke-width: 2; } .route-map .parcel--red { fill: var(--red-500); } .route-map[data-active] .seg:not(.is-on) { opacity: .2; } .route-map[data-active] .node:not(.is-on) { opacity: .32; } .route-map .node.is-target .dot { transform: scale(1.7); fill: var(--gold-400); } .route-map .node.is-target text { fill: var(--red-500); font-weight: 900; } .route-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-700); } .route-legend span { display: inline-flex; align-items: center; gap: 7px; } .route-legend i { width: 22px; height: 6px; border-radius: 6px; background: var(--c); } .estimator { margin-top: 30px; padding: 26px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); } .estimator__row { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 12px; align-items: center; } .estimator__box { position: relative; padding: 13px 18px; border-radius: 18px; background: var(--cream); border: 1.5px solid var(--line); transition: border-color .3s, box-shadow .3s; } .estimator__box:focus-within { border-color: var(--orange-400); box-shadow: 0 0 0 4px rgba(255, 122, 26, .14); } .estimator__box small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); } .estimator__box b { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 17px; } .estimator__box b .ic { color: var(--red-500); } .estimator__box select { width: 100%; margin-top: 2px; padding: 2px 26px 2px 0; border: 0; background: transparent; font-size: 17px; font-weight: 800; color: var(--ink-900); appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; } .estimator__box--select::after { content: ''; position: absolute; right: 18px; bottom: 21px; width: 9px; height: 9px; border-right: 2.5px solid var(--red-500); border-bottom: 2.5px solid var(--red-500); transform: rotate(45deg); pointer-events: none; } .estimator__arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .estimator__result { position: relative; display: flex; align-items: center; gap: 22px; margin-top: 18px; padding: 22px 26px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #2A0A07 0%, #7A0C0A 55%, #C80A12 100%); overflow: hidden; isolation: isolate; } .estimator__result::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .06); z-index: -1; } .estimator__eta { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; } .estimator__days { font-size: clamp(44px, 5vw, 62px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.03em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; } .estimator__unit { font-size: 17px; font-weight: 800; color: var(--gold-300); } .estimator__info b { display: block; font-size: 18px; line-height: 1.35; } .estimator__info p { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .75); } .estimator__result.is-flash .estimator__days { animation: flip-in .7s var(--spring); } @keyframes flip-in { from { transform: perspective(400px) rotateX(-80deg) translateY(10px); opacity: 0; } } .regions { display: grid; gap: 10px; margin-top: 18px; } .region { display: grid; grid-template-columns: auto 100px 1fr 76px; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; text-align: left; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); } .region:hover { transform: translateX(4px); } .region.is-active { border-color: var(--c); box-shadow: 0 10px 24px -14px var(--c); } .region__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); } .region b { font-size: 15px; } .region__bar { height: 8px; border-radius: 8px; background: var(--cream-2); overflow: hidden; } .region__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width 1.4s var(--ease); transition-delay: var(--d, 0s); } .is-in .region__bar i, .region__bar.is-in i { width: var(--w); } .region em { font-style: normal; font-weight: 800; font-size: 14.5px; color: var(--ink-900); text-align: right; white-space: nowrap; } .note { margin-top: 14px; font-size: 13px; color: var(--ink-500); } /* ---------- 15. Process ---------- */ .process__wrap { position: relative; margin-top: 70px; } .process__line { position: absolute; top: 46px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 4px; background: var(--line); } .process__line > i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-fire); transform: scaleX(0); transform-origin: left; transition: transform 2.6s var(--ease-in-out); } .process__wrap.is-in .process__line > i { transform: scaleX(1); } .process__truck { position: absolute; left: 0; bottom: 8px; width: 78px; transform: translateX(-50%); transition: left 2.6s var(--ease-in-out); } .process__wrap.is-in .process__truck { left: 84%; } .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step { text-align: center; padding: 0 8px; } .step__icon { position: relative; z-index: 1; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: var(--ink-400); background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow-sm); transition: background .6s var(--ease), color .6s, border-color .6s, box-shadow .6s, transform .6s var(--spring); transition-delay: var(--d, 0s); } .step__icon::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; border: 2px dashed rgba(255, 122, 26, .38); animation: spin 18s linear infinite; } .process__wrap.is-in .step__icon { color: #fff; background: var(--grad-fire); border-color: transparent; box-shadow: var(--shadow-glow); transform: scale(1.04); } .step__num { position: absolute; top: -6px; right: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--ink-900); border: 3px solid #fff; } .step h3 { margin-top: 28px; font-size: 19px; } .step p { margin-top: 8px; font-size: 15px; color: var(--ink-500); } /* ---------- 16. Partners ---------- */ .logo-marquee { display: flex; overflow: hidden; margin-top: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .logo-marquee__track { display: flex; flex-shrink: 0; width: max-content; padding: 10px 0; animation: marquee 38s linear infinite; } .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; } .partner { flex-shrink: 0; width: 210px; height: 96px; margin-right: 20px; display: grid; place-items: center; padding: 18px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; } .partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: rgba(255, 122, 26, .4); } .partner img { max-height: 50px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; } .partner:hover img { filter: none; opacity: 1; } .partner__name { font-weight: 800; font-size: 16px; color: var(--ink-700); text-align: center; } .partner--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; border-color: var(--line-2); background: var(--cream); color: var(--ink-400); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .partner--placeholder .ic { font-size: 26px; color: var(--orange-400); } /* ---------- 17. Testimonials ---------- */ .reviews { overflow: hidden; } .reviews__grid { display: grid; grid-template-columns: .78fr 1.6fr; gap: clamp(32px, 4vw, 56px); align-items: center; } .reviews__quote-mark { width: 82px; height: 82px; margin-top: 30px; color: var(--peach); } .carousel { position: relative; min-width: 0; } /* Lề trong bằng khoảng cách giữa thẻ (--cg): bóng đổ khi rê chuột không bị cắt, thẻ kế bên không ló ra */ .carousel__track { --cg: 24px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--cg)) / 2); gap: var(--cg); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cg); scrollbar-width: none; padding: 16px var(--cg) 48px; margin: -16px calc(-1 * var(--cg)) -48px; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--cg), #000 calc(100% - var(--cg)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--cg), #000 calc(100% - var(--cg)), transparent); } .carousel__track::-webkit-scrollbar { display: none; } .review { position: relative; display: flex; flex-direction: column; padding: 32px 30px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); scroll-snap-align: start; transition: transform .5s var(--ease), box-shadow .5s; } .review:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .review__top { display: flex; align-items: center; gap: 10px; } .review__stars { display: flex; gap: 3px; color: var(--gold-400); } .review__stars .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; } .review__sample { margin-left: auto; padding: 3px 9px; border-radius: 7px; border: 1px dashed var(--line-2); font-size: 11px; font-weight: 700; color: var(--ink-400); } .review__src { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-700); } .review__fb { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1877F2; } .review__fb .ic { width: 15px; height: 15px; } .review__avatar--img { padding: 0; overflow: hidden; background: var(--cream-2); } .review__avatar--img img { width: 100%; height: 100%; object-fit: cover; } .reviews__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--ink-900); text-decoration: none; } .reviews__more > .ic { width: 18px; height: 18px; color: var(--red-500); transition: transform .3s var(--ease); } .reviews__more:hover { color: var(--red-500); } .reviews__more:hover > .ic, .reviews__more:focus-visible > .ic { transform: translateX(4px); } .review__q { position: absolute; right: 24px; bottom: 92px; width: 64px; height: 64px; color: var(--cream-2); z-index: 0; } .review__text { position: relative; z-index: 1; flex: 1; margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: var(--ink-800); } .review__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line-2); } .review__avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; font-weight: 800; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .review__name { display: block; font-weight: 800; } .review__role { display: block; font-size: 13px; color: var(--ink-500); text-wrap: balance; } .carousel__nav { display: flex; gap: 10px; margin-top: 30px; } .carousel__btn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--ink-900); background: #fff; border: 1.5px solid var(--line-2); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); } .carousel__btn:hover { color: #fff; background: var(--grad-fire); border-color: transparent; transform: scale(1.06); } .carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; } .carousel__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9px; background: var(--line-2); transition: width .45s var(--ease), background .4s; } .carousel__dots button.is-active { width: 30px; background: var(--red-500); } /* ---------- 18. Register + form ---------- */ .register { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); } .register__card { display: grid; grid-template-columns: .82fr 1.18fr; border-radius: 38px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; } .register__aside { position: relative; padding: 48px 42px; color: #fff; background: var(--grad-red); overflow: hidden; isolation: isolate; } .register__aside::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 16px, transparent 16px 52px); animation: stripes 10s linear infinite; } @keyframes stripes { to { transform: translateX(73.5px); } } .register__aside .title { color: #fff; } .register__aside p { margin-top: 14px; color: rgba(255, 255, 255, .88); } .perk-list { display: grid; gap: 14px; margin-top: 28px; } .perk-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; } .perk-list .ic-box { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; background: rgba(255, 255, 255, .18); } .register__contact { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 32px; padding: 18px; border-radius: 22px; background: rgba(40, 0, 0, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .register__contact a { display: flex; align-items: center; gap: 12px; font-weight: 700; } .register__contact .ic-box { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: #fff; color: var(--red-500); } .register__contact small { display: block; font-size: 12px; font-weight: 600; opacity: .8; } .register__aside::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .08); z-index: -1; } .register__brand { position: relative; width: 74px; height: 74px; margin-bottom: 22px; } .register__brand img { width: 100%; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 14px 30px -10px rgba(60, 0, 0, .6); animation: float-y 6s ease-in-out infinite; } .register__brand::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); animation: spin 16s linear infinite; } .register__main { padding: 44px 46px 40px; min-width: 0; } .register__main h3 { font-size: 24px; font-weight: 800; } .register__main > p { margin-top: 6px; color: var(--ink-500); } .lead-form { display: grid; gap: 18px; margin-top: 24px; } .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 18px; background: var(--cream); border: 1px solid var(--line); } .seg label { position: relative; cursor: pointer; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 13px; font-size: 14px; font-weight: 700; color: var(--ink-700); transition: background .3s, color .3s, box-shadow .3s; } .seg span .ic { font-size: 17px; } .seg input:checked + span { color: var(--red-500); background: #fff; box-shadow: var(--shadow-sm); } .seg input:focus-visible + span { outline: 3px solid var(--gold-400); outline-offset: 1px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { position: relative; } .field--full { grid-column: 1 / -1; } .field__icon { position: absolute; left: 17px; top: 19px; z-index: 1; font-size: 19px; color: var(--ink-400); pointer-events: none; transition: color .3s; } .field input, .field select, .field textarea { width: 100%; height: 60px; padding: 24px 16px 6px 48px; border: 1.5px solid var(--line-2); border-radius: 15px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink-900); outline: none; appearance: none; -webkit-appearance: none; transition: border-color .3s, box-shadow .3s, background .3s; } .field textarea { height: auto; min-height: 104px; padding-top: 30px; resize: vertical; line-height: 1.5; } .field select { padding-right: 40px; cursor: pointer; } .field select:invalid { color: transparent; } .field select option { color: var(--ink-900); } .field--select::after { content: ''; position: absolute; right: 19px; top: 25px; width: 8px; height: 8px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500); transform: rotate(45deg); pointer-events: none; transition: transform .3s; } .field--select:focus-within::after { transform: rotate(225deg) translate(-3px, -3px); border-color: var(--orange-500); } .field label { position: absolute; left: 48px; top: 19px; right: 14px; font-size: 15px; font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: top .3s var(--ease), font-size .3s var(--ease), color .3s, font-weight .3s; } .field label em { font-style: normal; color: var(--red-500); } .field:focus-within label, .field.is-filled label { top: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--orange-600); } .field:focus-within .field__icon { color: var(--orange-500); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange-400); box-shadow: 0 0 0 4px rgba(255, 122, 26, .14); } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red-500); box-shadow: 0 0 0 4px rgba(227, 20, 27, .1); background: #FFF8F8; } .field.is-invalid .field__icon, .field.is-invalid label { color: var(--red-500); } .field__err { display: block; max-height: 0; overflow: hidden; padding-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--red-500); transition: max-height .3s, margin .3s; } .field.is-invalid .field__err { max-height: 40px; margin-top: 6px; } .shake { animation: shake .5s var(--ease); } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--ink-700); cursor: pointer; line-height: 1.55; } .consent input { position: absolute; opacity: 0; pointer-events: none; } .consent__box { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; border: 1.5px solid var(--line-2); background: #fff; color: transparent; transition: background .3s, border-color .3s, color .3s, transform .4s var(--spring); } .consent__box .ic { font-size: 14px; stroke-width: 3.4; } .consent input:checked + .consent__box { color: #fff; background: var(--grad-fire); border-color: transparent; transform: scale(1.08); } .consent input:focus-visible + .consent__box { outline: 3px solid var(--gold-400); outline-offset: 2px; } .consent.is-invalid .consent__box { border-color: var(--red-500); box-shadow: 0 0 0 4px rgba(227, 20, 27, .1); } .consent a { color: var(--red-500); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .btn-submit .btn__label, .btn-submit .ic { transition: opacity .3s, transform .6s var(--ease); } .btn__spinner { position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; opacity: 0; animation: spin .8s linear infinite; transition: opacity .3s; } .is-loading .btn-submit { pointer-events: none; } .is-loading .btn-submit .btn__label { opacity: 0; } .is-loading .btn-submit .ic { opacity: 0; transform: translate(60px, -40px) rotate(-20deg); } .is-loading .btn-submit .btn__spinner { opacity: 1; } .form-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-500); } .form-note .ic { color: #16A34A; } .form-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14px; color: #8E040A; background: #FFF1F0; border: 1px solid #FFD2CC; } .form-alert .ic { font-size: 20px; margin-top: 1px; } .form-alert a { font-weight: 800; text-decoration: underline; } .form-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 6px 8px; animation: success-in .7s var(--ease); } @keyframes success-in { from { opacity: 0; transform: translateY(20px) scale(.97); } } .success-check { width: 96px; height: 96px; } .success-check circle { fill: none; stroke: url(#gradFire); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s var(--ease) .1s forwards; transform: rotate(-90deg); transform-origin: center; } .success-check path { fill: none; stroke: var(--red-500); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s var(--ease) .75s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .form-success h3 { margin-top: 18px; font-size: 26px; font-weight: 900; } .form-success p { margin-top: 10px; max-width: 460px; color: var(--ink-700); } .form-success .btn-row { justify-content: center; margin-top: 24px; } .form-success .form-demo { margin-top: 14px; padding: 8px 14px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--cream); font-size: 13px; color: var(--ink-500); } .confetti-canvas { position: fixed; inset: 0; z-index: 3000; pointer-events: none; width: 100%; height: 100%; } /* ---------- 19. FAQ ---------- */ .faq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .faq__aside { position: sticky; top: 110px; } .help-card { position: relative; margin-top: 30px; padding: 26px; border-radius: 26px; color: #fff; background: var(--grad-dark); overflow: hidden; isolation: isolate; } .help-card::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 170px; height: 170px; border-radius: 50%; border: 24px solid rgba(255, 255, 255, .06); z-index: -1; } .help-card h3 { font-size: 20px; } .help-card p { margin-top: 8px; color: rgba(255, 255, 255, .75); font-size: 14.5px; } .help-card .btn-row { margin-top: 18px; } .acc { border-radius: 20px; background: #fff; border: 1.5px solid var(--line); transition: border-color .3s, box-shadow .3s; } .acc + .acc { margin-top: 12px; } .acc.is-open { border-color: rgba(255, 122, 26, .5); box-shadow: var(--shadow-sm); } .acc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; border: 0; background: none; text-align: left; font-size: 16.5px; font-weight: 700; color: var(--ink-900); } .acc__icon { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--cream-2); transition: background .35s, transform .5s var(--ease); } .acc__icon::before, .acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2.5px; border-radius: 2px; background: var(--red-500); transform: translate(-50%, -50%); transition: transform .45s var(--ease), background .3s; } .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .acc.is-open .acc__icon { background: var(--grad-fire); transform: rotate(180deg); } .acc.is-open .acc__icon::before, .acc.is-open .acc__icon::after { background: #fff; } .acc.is-open .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .acc.is-open .acc__a { grid-template-rows: 1fr; } .acc__a > div { overflow: hidden; } .acc__a p { padding: 0 22px 22px; color: var(--ink-700); } .acc__a a { color: var(--red-500); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* ---------- 20. Footer + CTA band ---------- */ .footer { position: relative; color: rgba(255, 255, 255, .7); background: var(--dark-950); } .cta-band { position: relative; padding: 70px 0 128px; color: #fff; background: var(--grad-fire); overflow: hidden; isolation: isolate; } .cta-band__stripes { position: absolute; inset: -40% -10%; z-index: -1; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 18px, transparent 18px 60px); animation: stripes-cta 9s linear infinite; } @keyframes stripes-cta { to { transform: translateX(84.85px); } } .cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; } .cta-band h2 { max-width: 700px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; line-height: 1.15; } .cta-band p { margin-top: 10px; font-size: 17px; color: rgba(255, 255, 255, .9); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } .road { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: linear-gradient(#3A120E, #210806); border-top: 4px solid rgba(255, 255, 255, .2); } .road::before { content: ''; position: absolute; left: 0; top: 50%; width: calc(100% + 80px); height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 210, 90, .95) 0 40px, transparent 40px 80px); transform: translate(0, -50%); animation: lane 1s linear infinite; } @keyframes lane { to { transform: translate(-80px, -50%); } } .road__truck { position: absolute; left: 0; bottom: 34px; width: 210px; animation: drive 17s linear infinite; } @keyframes drive { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } } .truck-svg { width: 100%; height: auto; overflow: visible; } .truck-svg .wheel { transform-box: fill-box; transform-origin: center; animation: spin .55s linear infinite; } .truck-svg .truck-body { animation: truck-bump .32s ease-in-out infinite alternate; } .truck-svg .speed rect { animation: speed-line .6s linear infinite; } .truck-svg .speed rect:nth-child(2) { animation-delay: .2s; } .truck-svg .speed rect:nth-child(3) { animation-delay: .4s; } @keyframes truck-bump { to { transform: translateY(-1.6px); } } @keyframes speed-line { 0% { transform: translateX(10px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(-20px); opacity: 0; } } .footer__main { position: relative; padding: 64px 0 0; overflow: hidden; isolation: isolate; } .footer__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 52px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .footer__cards:empty { display: none; } .fcard { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; border-radius: 20px; color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); transition: transform .45s var(--ease), background .3s, border-color .3s; } .fcard:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 190, 80, .45); } .fcard__icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 23px; color: #fff; background: var(--grad-fire); box-shadow: 0 12px 24px -12px rgba(255, 80, 20, .9); transition: transform .6s var(--spring); } .fcard:hover .fcard__icon { transform: rotate(-10deg) scale(1.06); } .fcard--zalo .fcard__icon { background: var(--zalo); box-shadow: 0 12px 24px -12px rgba(0, 104, 255, .9); } .fcard--zalo .zl { font-size: 12.5px; font-weight: 800; } .fcard--mess .fcard__icon { background: var(--grad-messenger); box-shadow: 0 12px 24px -12px rgba(160, 51, 255, .9); } .fcard--mail .fcard__icon { background: var(--grad-gold); } .fcard__text { display: grid; min-width: 0; } .fcard__text small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .fcard__text b { margin-top: 2px; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fcard__go { margin-left: auto; font-size: 18px; color: rgba(255, 255, 255, .35); transition: transform .4s var(--ease), color .3s; } .fcard:hover .fcard__go { transform: translateX(4px); color: var(--gold-300); } .footer__main::before { content: ''; position: absolute; left: 50%; top: -260px; width: 900px; height: 500px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 20, 27, .35), transparent); z-index: -1; } .footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px 56px; } .footer__brand .brand__logo { width: 62px; height: 62px; } .footer__brand .brand__name { font-size: 23px; background: none; color: #fff; -webkit-text-fill-color: #fff; } .footer__brand .brand__sub { color: var(--gold-300); } .footer__brand p { max-width: 380px; margin-top: 18px; font-size: 14.5px; line-height: 1.75; } .footer__hours { display: flex; align-items: center; gap: 8px; font-size: 14px; } .footer__hours .ic { color: var(--orange-400); } .footer__slogan { display: inline-flex; margin-top: 18px; padding: 8px 14px; border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-300); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); } .social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); transition: background .3s, transform .4s var(--spring), border-color .3s; } .social a:hover { background: var(--grad-fire); border-color: transparent; transform: translateY(-4px) rotate(-8deg); } .social .zl { font-size: 11px; font-weight: 800; } .footer__title { position: relative; margin-bottom: 20px; padding-bottom: 12px; font-size: 16px; font-weight: 800; color: #fff; } .footer__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--grad-fire); } .footer__links a { display: inline-flex; align-items: center; gap: 0; padding: 6px 0; font-size: 14.5px; transition: color .3s, gap .3s; } .footer__links a::before { content: ''; width: 0; height: 2px; border-radius: 2px; background: var(--orange-400); transition: width .3s var(--ease); } .footer__links a:hover { color: #fff; gap: 8px; } .footer__links a:hover::before { width: 12px; } .footer__mega { margin-top: 48px; font-size: clamp(40px, 9.6vw, 150px); font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: .9; text-align: center; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; user-select: none; pointer-events: none; padding-right: .06em; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0 24px; font-size: 13.5px; } .footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; } .footer__legal { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 20px; border-radius: 18px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); } .footer__legal-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 21px; color: #4ADE80; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .25); } .footer__legal-text { display: flex; flex-wrap: wrap; flex: 1; gap: 2px 18px; min-width: 0; } .footer__legal-text b { flex-basis: 100%; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .footer__legal-text strong { color: rgba(255, 255, 255, .92); } .footer__map { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: background .3s, border-color .3s; } .footer__map .ic { color: var(--gold-300); transition: color .3s; } .footer__map:hover { background: var(--grad-fire); border-color: transparent; } .footer__map:hover .ic { color: #fff; } .footer__bottom a:hover { color: #fff; } .footer__heart { color: var(--red-400); } /* ---------- 21. Floating buttons ---------- */ .fab { position: fixed; right: 22px; bottom: 96px; z-index: 800; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .fab__btn { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 25px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); transition: transform .45s var(--spring); } .fab__btn:hover { transform: scale(1.1); } .fab__btn::before, .fab__btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: -1; animation: fab-pulse 2.4s ease-out infinite; } .fab__btn::after { animation-delay: 1.2s; } @keyframes fab-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(1.75); opacity: 0; } } @keyframes pulse-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } } .fab__btn--zalo { background: var(--zalo); } .fab__btn--mess { background: var(--grad-messenger); } .fab__btn--mess::before, .fab__btn--mess::after { background: #8B3DFF; } .fab__btn--call { background: var(--grad-fire); } .fab__btn--call::before, .fab__btn--call::after { background: var(--orange-500); } .fab__btn--call .ic { animation: phone-ring 2.6s ease-in-out infinite; } .fab__zalo { font-size: 15px; font-weight: 800; letter-spacing: -.02em; } .fab__mess { width: 30px; height: 30px; fill: #fff; } .fab__tip { position: absolute; right: calc(100% + 14px); top: 50%; padding: 9px 14px; border-radius: 12px; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--ink-900); background: #fff; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translate(10px, -50%); transition: opacity .3s, transform .4s var(--ease); } .fab__tip::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #fff; transform: rotate(45deg); } .fab__btn:hover .fab__tip { opacity: 1; transform: translate(0, -50%); } @keyframes phone-ring { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-16deg); } 10%, 20%, 30% { transform: rotate(16deg); } 35% { transform: rotate(0); } } .to-top { position: fixed; right: 26px; bottom: 26px; z-index: 800; width: 50px; height: 50px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--red-500); background: #fff; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8); transition: opacity .4s, transform .5s var(--spring), visibility 0s linear .4s, color .3s, background .3s; } .to-top.is-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .to-top:hover { color: #fff; background: var(--red-500); } .to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .to-top__ring circle { fill: none; stroke: var(--orange-400); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } .mbar { display: none; } .has-zalo-widget .fab__btn--zalo { display: none; } .has-zalo-widget .fab { bottom: 170px; } /* ---------- 22. Modal ---------- */ .modal { width: min(780px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 30px; color: inherit; background: #fff; box-shadow: 0 50px 120px -30px rgba(40, 5, 2, .6); overflow: hidden; } .modal[open] { display: flex; flex-direction: column; animation: modal-in .6s var(--spring); } .modal::backdrop { background: rgba(25, 6, 4, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal[open]::backdrop { animation: fade-in .4s ease; } .modal.is-closing { animation: modal-out .32s ease forwards; } .modal.is-closing::backdrop { animation: fade-out .32s ease forwards; } @keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(.94); } } @keyframes modal-out { to { opacity: 0; transform: translateY(24px) scale(.96); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } .modal__head { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 24px 70px 22px 28px; color: #fff; background: var(--grad-fire); overflow: hidden; isolation: isolate; } .modal__head::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 14px, transparent 14px 44px); animation: stripes 10s linear infinite; } .modal__logo { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); animation: float-y 5s ease-in-out infinite; } .modal__head h2 { font-size: 22px; font-weight: 900; } .modal__head p { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .9); } .modal__close { position: absolute; top: 50%; right: 18px; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: rgba(255, 255, 255, .18); transition: transform .5s var(--spring), background .3s; } .modal__close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, .3); } .modal__body { padding: 6px 28px 28px; overflow-y: auto; overscroll-behavior: contain; } /* ---------- 23. Trang Dịch vụ ---------- */ .svc-nav { position: sticky; top: 82px; z-index: 50; display: flex; justify-content: center; margin-top: -32px; padding: 0 16px; transition: top .5s var(--ease); } .header-hidden .svc-nav { top: 12px; } .svc-nav__inner { display: flex; gap: 4px; max-width: 100%; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; } .svc-nav__inner::-webkit-scrollbar { display: none; } .svc-nav a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink-700); transition: background .35s, color .35s, box-shadow .35s; } .svc-nav a .ic { font-size: 17px; } .svc-nav a:hover { color: var(--red-500); } .svc-nav a.is-active { color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .svc-detail { position: relative; padding: clamp(64px, 8vw, 110px) 0; scroll-margin-top: 90px; } .svc-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .svc-detail--rev .svc-visual { order: 2; } .svc-group { padding: clamp(40px, 5vw, 64px) 0 0; text-align: center; } .svc-group .section-head { margin-inline: auto; } /* Khu vực Chuyển phát quốc tế (trang Dịch vụ) */ .intl-sec { position: relative; padding: clamp(72px, 9vw, 120px) 0; color: #fff; background: var(--dark-900); overflow: hidden; isolation: isolate; scroll-margin-top: 90px; } .intl-sec__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .intl-sec .lead { color: rgba(255, 255, 255, .78); } .intl-sec .feature-list .fi { color: var(--gold-300); background: rgba(255, 255, 255, .08); } .intl-sec .feature-list li:hover .fi { color: #fff; background: var(--grad-fire); } .intl-sec .feature-list li > div > span { color: rgba(255, 255, 255, .66); } .intl-sec .svc-intl__tags { margin-top: 22px; } .intl-visual { position: relative; width: min(100%, 470px); margin: 0 auto; } .intl-visual::before { content: ''; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; background: var(--grad-fire); filter: blur(60px); opacity: .4; animation: glow-pulse 6s ease-in-out infinite; } .intl-visual .svc-visual__chip--a { top: 4%; left: -2%; } .intl-visual .svc-visual__chip--b { bottom: 6%; right: -2%; } .intl-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 16px; font-size: 14.5px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .intl-note .ic { margin-top: 2px; font-size: 20px; color: var(--gold-300); } .intl-note a { color: var(--gold-300); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .svc-visual { position: relative; aspect-ratio: 1 / .86; border-radius: 38px; display: grid; place-items: center; color: #fff; background: var(--tone, var(--grad-fire)); box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate; } .svc-visual::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 20px, transparent 20px 64px); animation: stripes-cta 12s linear infinite; } .svc-visual__ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .35); animation: spin 36s linear infinite; } .svc-visual__ring--1 { width: 72%; aspect-ratio: 1; } .svc-visual__ring--2 { width: 98%; aspect-ratio: 1; border-style: solid; border-color: rgba(255, 255, 255, .12); animation-direction: reverse; } .svc-visual__icon { position: relative; width: 40%; aspect-ratio: 1; border-radius: 32%; display: grid; place-items: center; font-size: clamp(60px, 7vw, 104px); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38); box-shadow: 0 34px 70px -24px rgba(70, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: float-y 6s ease-in-out infinite; } .svc-visual__icon .ic { stroke-width: 1.6; } .svc-visual__chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; color: var(--ink-900); background: rgba(255, 255, 255, .92); box-shadow: 0 20px 40px -18px rgba(60, 0, 0, .55); font-size: 13.5px; font-weight: 700; animation: bob 5.5s ease-in-out infinite; } .svc-visual__chip .ic-box { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--grad-fire); } .svc-visual__chip--a { top: 12%; left: 7%; } .svc-visual__chip--b { bottom: 12%; right: 7%; animation-delay: -2.7s; } .feature-list { display: grid; gap: 16px; margin-top: 28px; } .feature-list li { display: flex; gap: 14px; align-items: flex-start; } .feature-list .fi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 20px; color: var(--red-500); background: var(--cream-2); transition: background .35s, color .35s, transform .5s var(--spring); } .feature-list li:hover .fi { color: #fff; background: var(--grad-fire); transform: rotate(-10deg); } .section--cream .feature-list .fi { background: #fff; } .section--cream .feature-list li:hover .fi { background: var(--grad-fire); } .feature-list li > div > b { display: block; font-size: 16px; } .feature-list li > div > span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-500); } .eta-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; } .eta-col { border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; } .eta-col:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .eta-col__head { position: relative; padding: 24px 26px; color: #fff; background: var(--c); overflow: hidden; isolation: isolate; } .eta-col__head::after { content: ''; position: absolute; right: -36px; top: -36px; width: 140px; height: 140px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .14); z-index: -1; } .eta-col__head small { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; } .eta-col__head h3 { margin-top: 4px; font-size: 22px; } .eta-col__days { margin-top: 10px; font-size: 46px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.03em; } .eta-col__days span { font-size: 18px; font-style: normal; margin-left: 6px; } .eta-col__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 24px 26px; } .eta-col__list span { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-700); background: var(--cream); border: 1px solid var(--line); } .pricing { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: clamp(32px, 5vw, 56px); border-radius: 38px; color: #fff; background: linear-gradient(135deg, #1A0705 0%, #4A0C08 55%, #9E0A0E 100%); overflow: hidden; isolation: isolate; } .pricing::before { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 20, .45), transparent); z-index: -1; } .pricing .title { color: #fff; } .pricing .lead { color: rgba(255, 255, 255, .78); } .factor-list { display: grid; gap: 14px; align-content: center; } .factor { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .35s, transform .4s var(--ease); } .factor:hover { background: rgba(255, 255, 255, .12); transform: translateX(6px); } .factor__icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0; font-size: 23px; background: var(--grad-fire); } .factor b { display: block; font-size: 16px; color: #fff; } .factor span { font-size: 14px; color: rgba(255, 255, 255, .7); } .comp-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 32px 36px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); } .comp-banner__num { font-size: clamp(48px, 6vw, 76px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; } .comp-banner h3 { font-size: 22px; } .comp-banner p { margin-top: 6px; color: var(--ink-500); } /* ---------- 24. Trang Giới thiệu ---------- */ .story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; } .tilt-frame { position: relative; perspective: 1400px; } .tilt-frame__inner { position: relative; padding: 10px; border-radius: 30px; background: #fff; box-shadow: var(--shadow-lg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); transform-style: preserve-3d; } .tilt-frame__inner img { border-radius: 22px; width: 100%; } .tilt-frame__glare { position: absolute; inset: 10px; border-radius: 22px; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; mix-blend-mode: soft-light; } .tilt-frame:hover .tilt-frame__glare { opacity: 1; } .tilt-frame__deco { position: absolute; inset: auto -22px -22px auto; width: 60%; height: 60%; border-radius: 30px; background: var(--grad-fire); z-index: -1; transform: rotate(4deg); opacity: .9; } .tilt-frame__deco--dots { inset: -26px auto auto -26px; width: 130px; height: 130px; border-radius: 0; background: radial-gradient(var(--orange-400) 2px, transparent 2.5px) 0 0 / 18px 18px; transform: none; opacity: .6; } .company-card { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px 40px; align-items: center; margin-top: 24px; padding: 32px 40px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate; } .company-card::after { content: ''; position: absolute; right: -70px; bottom: -70px; width: 230px; height: 230px; border-radius: 50%; border: 32px solid var(--cream-2); z-index: -1; } .company-card__brand { display: grid; justify-items: center; gap: 14px; } .company-card__brand img { width: 140px; border-radius: 50%; box-shadow: 0 20px 40px -18px rgba(200, 20, 10, .5), 0 0 0 6px var(--cream); } .company-card__stamp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #15803D; background: #EAF8EF; border: 1px solid #BFE8CC; } .company-card__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 16px 0 0; } .company-card__info > div { min-width: 0; padding-top: 12px; border-top: 1px dashed var(--line-2); } .company-card__wide { grid-column: span 2; } .company-card__info dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); } .company-card__info dd { margin: 4px 0 0; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; } .company-card__info dd a { color: var(--red-500); } .mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; } .mvv-card { position: relative; padding: 36px 32px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s; } .mvv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .mvv-card__icon { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; font-size: 32px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); transition: transform .6s var(--spring); } .mvv-card:hover .mvv-card__icon { transform: rotate(-10deg) scale(1.08); } .mvv-card h3 { margin-top: 24px; font-size: 22px; } .mvv-card p { margin-top: 10px; color: var(--ink-500); } .mvv-card--hl { color: #fff; background: var(--grad-dark); border: 0; } .mvv-card--hl p { color: rgba(255, 255, 255, .8); } .mvv-card--hl .mvv-card__icon { background: var(--grad-gold); } .values { display: grid; gap: 10px; margin-top: 16px; } .values li { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; } .values li i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--cream-2); color: var(--red-500); } .mascot { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 88px); align-items: center; } .mascot__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 500px; margin: 0 auto; width: 100%; } .mascot__stage::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: var(--grad-fire); filter: blur(60px); opacity: .35; animation: glow-pulse 6s ease-in-out infinite; } .mascot__stage .spin-badge { position: relative; width: 84%; height: auto; aspect-ratio: 1; box-shadow: 0 40px 90px -30px rgba(160, 20, 5, .55); } .mascot__stage .spin-badge img { width: 74%; } .mascot__stage .spin-badge__text text { font-size: 11px; letter-spacing: 1.6px; } .mascot__traits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; } .trait { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-weight: 700; transition: transform .4s var(--ease), border-color .3s; } .trait:hover { transform: translateY(-4px); border-color: rgba(255, 122, 26, .5); } .trait .ic-box { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; font-size: 20px; color: #fff; background: var(--grad-fire); } .commit-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 52px; counter-reset: c; } .commit { position: relative; padding: 30px 22px 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); text-align: center; transition: transform .5s var(--ease), box-shadow .5s; } .commit:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .commit__icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: var(--red-500); background: var(--cream-2); transition: background .4s, color .4s, transform .6s var(--spring); } .commit:hover .commit__icon { color: #fff; background: var(--grad-fire); transform: rotate(-12deg) scale(1.06); } .commit h3 { margin-top: 18px; font-size: 17px; } .commit p { margin-top: 6px; font-size: 14px; color: var(--ink-500); } .roadmap { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; } .roadmap::before { content: ''; position: absolute; top: 36px; left: 16.6%; right: 16.6%; height: 3px; background: repeating-linear-gradient(90deg, var(--orange-400) 0 10px, transparent 10px 18px); } .roadmap__item { position: relative; text-align: center; padding: 0 10px; } .roadmap__dot { position: relative; z-index: 1; width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: var(--red-500); background: #fff; border: 3px solid var(--orange-400); box-shadow: var(--shadow-sm); } .roadmap__item.is-current .roadmap__dot { color: #fff; background: var(--grad-fire); border-color: #fff; box-shadow: var(--shadow-glow); } .roadmap__item.is-current .roadmap__dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--orange-400); animation: pulse-ring 2s ease-out infinite; } .roadmap__tag { display: inline-block; margin-top: 18px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red-500); background: var(--cream-2); } .roadmap__item.is-current .roadmap__tag { color: #fff; background: var(--red-500); } .roadmap__item h3 { margin-top: 12px; font-size: 20px; } .roadmap__item p { margin-top: 8px; font-size: 15px; color: var(--ink-500); } /* ---------- 25. Tin tức ---------- */ .news-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-700); transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease); } .chip:hover { border-color: var(--orange-400); color: var(--red-500); transform: translateY(-2px); } .chip.is-active { color: #fff; background: var(--grad-fire); border-color: transparent; box-shadow: var(--shadow-glow); } .search { position: relative; width: min(340px, 100%); } .search .ic { position: absolute; left: 18px; top: 50%; margin-top: -9px; font-size: 18px; color: var(--ink-400); } .search input { width: 100%; height: 48px; padding: 0 18px 0 48px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-size: 15px; outline: none; transition: border-color .3s, box-shadow .3s; } .search input:focus { border-color: var(--orange-400); box-shadow: 0 0 0 4px rgba(255, 122, 26, .14); } .cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; color: #fff; overflow: hidden; isolation: isolate; background: var(--grad-fire); } .cover--red { background: linear-gradient(135deg, #9E050C, #E3141B 50%, #FF5A12); } .cover--orange { background: linear-gradient(135deg, #F2330F, #FF7A1A 55%, #FFB000); } .cover--gold { background: linear-gradient(135deg, #FF7A00, #FFB81A 55%, #FFD45C); } .cover--dark { background: linear-gradient(135deg, #1A0705, #4A0E0A 60%, #B0060E); } .cover::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.3px, transparent 1.8px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); } .cover::after { content: ''; position: absolute; right: -14%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .1); z-index: -1; } .cover__icon { font-size: clamp(56px, 6vw, 84px); filter: drop-shadow(0 18px 24px rgba(60, 0, 0, .35)); transition: transform .7s var(--spring); } .cover__icon .ic { stroke-width: 1.5; } .cover__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .cover__logo { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); } .post-card { display: flex; flex-direction: column; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s; } .post-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .post-card:hover .cover__icon { transform: translateY(-8px) rotate(-8deg) scale(1.08); } .post-card:hover .cover__img { transform: scale(1.07); } .post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; font-weight: 600; color: var(--ink-500); } .post-meta span { display: inline-flex; align-items: center; gap: 6px; } .post-cat { padding: 4px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red-500); background: var(--cream-2); } .post-card h3 { margin-top: 12px; font-size: 19px; line-height: 1.38; transition: color .3s; } .post-card:hover h3 { color: var(--red-500); } .post-card p { margin-top: 10px; flex: 1; font-size: 14.5px; color: var(--ink-500); } .post-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--red-500); } .post-card__more .ic { transition: transform .4s var(--ease); } .post-card:hover .post-card__more .ic { transform: translateX(6px); } .post-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: 36px; border-radius: 32px; box-shadow: var(--shadow-md); } .post-card--featured .cover { aspect-ratio: auto; min-height: 340px; height: 100%; } .post-card--featured .post-card__body { justify-content: center; padding: clamp(28px, 4vw, 52px); } .post-card--featured h3 { font-size: clamp(22px, 2.4vw, 30px); } .post-card--featured .badge-new { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad-fire); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; } .empty-state { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--ink-500); } .empty-state .ic { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--orange-400); } /* Bài viết */ .article-wrap { position: relative; z-index: 3; } .article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 56px); align-items: start; } .article__cover { margin-top: clamp(-110px, -8vw, -60px); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); } .article__cover .cover { aspect-ratio: 16 / 8; } .article__cover .cover__icon { font-size: clamp(70px, 9vw, 120px); } .prose { margin-top: 40px; font-size: 17px; line-height: 1.85; color: var(--ink-800); } .prose h2 { margin: 40px 0 14px; font-size: clamp(22px, 2.4vw, 28px); } .prose p { margin: 0 0 18px; } .prose ul { display: grid; gap: 10px; margin: 0 0 22px; } .prose ul li { position: relative; padding-left: 30px; } .prose ul li::before { content: ''; position: absolute; left: 6px; top: .68em; width: 9px; height: 9px; border-radius: 2px; background: var(--grad-fire); transform: rotate(45deg); } .prose blockquote { margin: 30px 0; padding: 22px 26px; border-radius: 20px; font-weight: 600; font-style: italic; background: var(--cream); border-left: 5px solid var(--orange-400); } .prose table { width: 100%; margin: 8px 0 28px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .prose th { padding: 14px 18px; text-align: left; color: #fff; background: var(--grad-red); } .prose td { padding: 14px 18px; border-top: 1px solid var(--line); } .prose tr:nth-child(even) td { background: var(--cream); } .prose a { color: var(--red-500); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding-top: 26px; border-top: 1px dashed var(--line-2); font-weight: 700; } .share__btn { width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: #fff; transition: transform .4s var(--spring); } .share__btn:hover { transform: translateY(-3px) scale(1.06); } .share__btn--fb { background: #1877F2; } .share__btn--copy { color: var(--ink-900); background: var(--cream-2); } .share__msg { font-size: 13px; color: #16A34A; opacity: 0; transition: opacity .3s; } .share__msg.is-show { opacity: 1; } .article__aside { position: sticky; top: 100px; display: grid; gap: 20px; margin-top: 40px; } .aside-card { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .aside-card h3 { font-size: 18px; } .aside-card--cta { position: relative; color: #fff; background: var(--grad-red); border: 0; overflow: hidden; isolation: isolate; } .aside-card--cta::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .12); z-index: -1; } .aside-card--cta p { margin: 8px 0 18px; color: rgba(255, 255, 255, .88); font-size: 14.5px; } .mini-post { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px dashed var(--line-2); } .mini-post:first-of-type { border-top: 0; } .mini-post .cover { width: 76px; flex-shrink: 0; aspect-ratio: 1; border-radius: 16px; } .mini-post .cover__icon { font-size: 30px; } .mini-post .cover::after { border-width: 10px; } .mini-post .cover__logo { display: none; } .mini-post b { display: block; font-size: 14.5px; line-height: 1.4; transition: color .3s; } .mini-post:hover b { color: var(--red-500); } .mini-post small { color: var(--ink-500); font-size: 12.5px; } /* ---------- 26. Tuyển dụng ---------- */ .perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .perk { padding: 30px 24px; border-radius: 26px; text-align: center; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; } .perk:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .perk__icon { width: 66px; height: 66px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; font-size: 29px; color: var(--red-500); background: var(--cream-2); transition: background .4s, color .4s, transform .6s var(--spring); } .perk:hover .perk__icon { color: #fff; background: var(--grad-fire); transform: rotate(-10deg) scale(1.06); } .perk h3 { margin-top: 18px; font-size: 18px; } .perk p { margin-top: 6px; font-size: 14.5px; color: var(--ink-500); } .jobs { display: grid; gap: 16px; margin-top: 40px; } .job { border-radius: 26px; background: #fff; border: 1.5px solid var(--line); transition: border-color .35s, box-shadow .35s; } .job:hover { border-color: rgba(255, 122, 26, .35); } .job.is-open { border-color: rgba(255, 122, 26, .55); box-shadow: var(--shadow-md); } .job__head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; cursor: pointer; } .job__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 25px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); transition: transform .6s var(--spring); } .job:hover .job__icon { transform: rotate(-10deg); } .job__title { font-size: 18.5px; font-weight: 800; } .job__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); background: var(--cream); } .tag .ic { color: var(--orange-500); } .job__actions { display: flex; align-items: center; gap: 10px; } .job__toggle { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; border: 1.5px solid var(--line-2); background: #fff; transition: transform .45s var(--ease), background .3s; } .job.is-open .job__toggle { transform: rotate(180deg); background: var(--cream-2); } .job__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); } .job.is-open .job__body { grid-template-rows: 1fr; } .job__body > div { overflow: hidden; } .job__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 6px 24px 28px 100px; } .job__cols h4 { margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-500); } .job__cols li { position: relative; margin-bottom: 8px; padding-left: 18px; font-size: 14.5px; color: var(--ink-700); } .job__cols li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-400); } .apply-cta { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: clamp(28px, 4vw, 48px); border-radius: 34px; color: #fff; background: var(--grad-red); box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate; } .apply-cta::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 16px, transparent 16px 52px); animation: stripes 10s linear infinite; } .apply-cta::after { content: ''; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .08); z-index: -1; } .apply-cta .title { color: #fff; } .apply-cta p { max-width: 560px; margin-top: 10px; color: rgba(255, 255, 255, .88); } .apply-cta__brand { position: relative; width: 110px; height: 110px; } .apply-cta__brand img { width: 100%; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .22), 0 18px 36px -14px rgba(60, 0, 0, .6); animation: float-y 6s ease-in-out infinite; } .apply-cta__brand::after { content: ''; position: absolute; inset: -13px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); animation: spin 16s linear infinite; } .apply-cta__actions { display: grid; gap: 10px; } .hire-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; counter-reset: hs; } .hire-step { position: relative; padding: 26px 22px; border-radius: 24px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); counter-increment: hs; transition: background .35s, transform .4s var(--ease); } .hire-step:hover { background: rgba(255, 255, 255, .12); transform: translateY(-6px); } .hire-step::before { content: '0' counter(hs); display: block; font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 190, 80, .7); } .hire-step h3 { margin-top: 14px; font-size: 18px; } .hire-step p { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .7); } /* ---------- 27. Liên hệ ---------- */ .contact-cards { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(-120px, -9vw, -70px); } .contact-card { display: flex; flex-direction: column; align-items: center; padding: 30px 22px 26px; border-radius: 28px; text-align: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); transition: transform .5s var(--ease), box-shadow .5s; } .contact-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .contact-card__icon { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 29px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .contact-card__icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange-400); animation: pulse-ring 2.4s ease-out infinite; } .contact-card__icon--zalo { background: var(--zalo); box-shadow: 0 14px 30px -10px rgba(0, 104, 255, .6); font-size: 16px; font-weight: 800; } .contact-card__icon--zalo::after { border-color: var(--zalo); } .contact-card h3 { margin-top: 18px; font-size: 17px; } .contact-card__value { display: block; margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--red-500); word-break: break-word; } .contact-card small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-500); } .contact-main { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; } .form-card { padding: clamp(26px, 4vw, 44px); border-radius: 34px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); min-width: 0; } .form-card h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; } .form-card > p { margin-top: 8px; color: var(--ink-500); } .map-card { border-radius: 34px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; } .map-card iframe { width: 100%; height: 340px; border: 0; } /* Khung thay thế khi không nhúng được bản đồ (bản xem thử) */ .map-ph { display: grid; place-items: center; align-content: center; gap: 6px; height: 340px; padding: 24px; text-align: center; color: var(--ink-700); background: linear-gradient(rgba(255, 248, 242, .7), rgba(255, 248, 242, .7)), repeating-linear-gradient(0deg, transparent 0 38px, rgba(227, 20, 27, .09) 38px 40px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(227, 20, 27, .09) 38px 40px), var(--cream-2); } .map-ph__pin { width: 62px; height: 62px; margin-bottom: 10px; border-radius: 50% 50% 50% 0; display: grid; place-items: center; background: var(--grad-fire); box-shadow: var(--shadow-glow); transform: rotate(-45deg); animation: pin-bounce 1.8s ease-in-out infinite; } .map-ph__pin .ic { font-size: 26px; color: #fff; transform: rotate(45deg); } .map-ph b { font-size: 16px; color: var(--red-500); } .map-ph small { max-width: 300px; font-size: 13px; color: var(--ink-500); } @keyframes pin-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .map-card__info { display: grid; gap: 16px; padding: 26px 28px 30px; } .info-row { display: flex; gap: 14px; align-items: flex-start; } .info-row .ic-box { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 20px; color: var(--red-500); background: var(--cream-2); } .info-row small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); } .info-row b, .info-row a { display: block; font-weight: 700; color: var(--ink-900); } .info-row a:hover { color: var(--red-500); } /* ---------- 28. Chính sách ---------- */ .policy { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .policy__nav { position: sticky; top: 100px; padding: 14px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .policy__nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 15px; font-size: 14.5px; font-weight: 700; color: var(--ink-700); transition: background .3s, color .3s; } .policy__nav a .ic-box { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; color: var(--red-500); background: var(--cream-2); transition: background .3s, color .3s, transform .5s var(--spring); } .policy__nav a:hover { background: var(--cream); } .policy__nav a.is-active { color: var(--red-500); background: var(--cream); } .policy__nav a.is-active .ic-box { color: #fff; background: var(--grad-fire); transform: rotate(-8deg); } .policy-sec { padding: clamp(26px, 4vw, 40px); border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); scroll-margin-top: 110px; } .policy-sec + .policy-sec { margin-top: 24px; } .policy-sec__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .policy-sec__icon { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; flex-shrink: 0; font-size: 25px; color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .policy-sec__head h2 { font-size: clamp(21px, 2.2vw, 26px); } .policy-sec__head small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-500); } .policy-sec .prose { margin-top: 0; font-size: 16px; } .policy-sec .prose h3 { margin: 24px 0 10px; font-size: 18px; } .callout { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 22px; padding: 18px 20px; border-radius: 18px; font-size: 15px; background: var(--cream); border: 1px solid var(--line); } .callout .ic { margin-top: 3px; font-size: 21px; color: var(--orange-500); } .comp-meter { display: grid; gap: 10px; margin: 6px 0 26px; padding: 24px; border-radius: 22px; color: #fff; background: var(--grad-dark); } .comp-meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .comp-meter__row b { font-size: clamp(34px, 4vw, 48px); font-weight: 900; font-style: italic; line-height: 1; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; } .comp-meter__track { position: relative; height: 14px; border-radius: 14px; background: rgba(255, 255, 255, .12); overflow: hidden; } .comp-meter__track i { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; border-radius: 14px; background: var(--grad-gold); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; } .comp-meter.is-in .comp-meter__track i { transform: scaleX(1); } .comp-meter__track::before { content: ''; position: absolute; left: 0; width: 50%; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 6px, transparent 6px 12px); } .comp-meter__scale { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .7); } .ban-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 22px; } .ban-grid li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; background: #FFF5F4; border: 1px solid #FFE0DC; } .ban-grid .ic { margin-top: 3px; font-size: 18px; color: var(--red-500); } .prose .ban-grid li { padding-left: 14px; } .prose .ban-grid li::before { display: none; } .ban-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; } .steps-mini { display: grid; gap: 12px; margin: 6px 0 22px; counter-reset: sm; } .steps-mini li { display: flex; gap: 14px; align-items: flex-start; counter-increment: sm; } .steps-mini li::before { content: counter(sm); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; font-weight: 800; color: #fff; background: var(--grad-fire); } /* ---------- 29. 404 ---------- */ .notfound { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 160px 20px 90px; text-align: center; background: radial-gradient(900px 500px at 50% 0%, #FFE0C7, transparent 60%), var(--cream); overflow: hidden; isolation: isolate; } .notfound__code { display: flex; align-items: center; justify-content: center; gap: .05em; font-size: clamp(110px, 22vw, 250px); font-weight: 900; font-style: italic; line-height: .95; letter-spacing: -.05em; } .notfound__code span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; } .notfound__box { width: .78em; height: .78em; display: grid; place-items: center; border-radius: 50%; animation: float-y 4s ease-in-out infinite; } .notfound__box img { width: 100%; border-radius: 50%; box-shadow: 0 30px 60px -20px rgba(200, 20, 10, .5); } .notfound h1 { margin-top: 18px; font-size: clamp(24px, 3vw, 34px); } .notfound p { max-width: 520px; margin: 12px auto 0; color: var(--ink-700); } .notfound .btn-row { justify-content: center; } /* ---------- 30. Reveal & misc animations ---------- */ .js [data-reveal] { opacity: 0; transition: opacity 1s var(--ease), translate 1.1s var(--ease), scale 1.1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); } .js [data-reveal=""], .js [data-reveal="up"] { translate: 0 44px; } .js [data-reveal="down"] { translate: 0 -30px; } .js [data-reveal="left"] { translate: -60px 0; } .js [data-reveal="right"] { translate: 60px 0; } .js [data-reveal="zoom"] { scale: .86; } .js [data-reveal="blur"] { translate: 0 24px; filter: blur(14px); } .js [data-reveal].is-in { opacity: 1; translate: none; scale: none; filter: none; } /* Nếu main.js không tải được, nội dung vẫn tự hiện sau vài giây */ .js:not(.js-ok) [data-reveal], .js:not(.js-ok) .hl { animation: failsafe .6s ease 3.5s forwards; } @keyframes failsafe { to { opacity: 1; translate: none; scale: none; transform: none; filter: none; } } .is-paused, .is-paused * { animation-play-state: paused !important; } /* Chuyển trang mượt (trình duyệt hỗ trợ View Transitions) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .28s ease both; } ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } } /* ---------- 31. Responsive ---------- */ @media (max-width: 1360px) { .hotline__text { display: none; } } @media (max-width: 1180px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; max-width: 560px; } .footer__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .commit-list { grid-template-columns: repeat(3, 1fr); } .chip-float--a, .chip-float--b { right: 1%; } .showcase .spin-badge { top: -64px; left: -14px; } .spin-badge--hero { width: 176px; height: 176px; } .spin-badge--hero::after { transform-origin: 6px 114px; } } @media (max-width: 1100px) { .nav, .header .btn--fire { display: none; } .burger { display: block; } .header__actions { margin-left: auto; } .bento { grid-template-columns: 1fr 1fr; } .svc--feature { grid-column: 1 / -1; grid-row: auto; min-height: 420px; } .why__grid { grid-template-columns: 1fr 1fr; } .why__head { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3)::before { display: none; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .about__grid, .coverage__grid, .story, .mascot { grid-template-columns: 1fr; } .reviews__grid { grid-template-columns: 1fr; } .reviews__quote-mark { display: none; } .register__card { grid-template-columns: 1fr; } .faq__grid { grid-template-columns: 1fr; } .faq__aside { position: static; } .article__layout { grid-template-columns: 1fr; } .article__aside { position: static; grid-template-columns: 1fr 1fr; } .contact-cards { grid-template-columns: repeat(2, 1fr); } .contact-main { grid-template-columns: 1fr; } .policy { grid-template-columns: 1fr; } .policy__nav { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .policy__nav a { flex-shrink: 0; } .news-grid { grid-template-columns: repeat(2, 1fr); } .perks { grid-template-columns: repeat(2, 1fr); } .hire-steps { grid-template-columns: repeat(2, 1fr); } .page-hero .spin-badge { width: 160px; height: 160px; } } @media (max-width: 900px) { .svc-detail__grid { grid-template-columns: 1fr; } .intl-sec__grid { grid-template-columns: 1fr; } .company-card { grid-template-columns: 1fr; padding: 28px 24px; } .company-card__info { grid-template-columns: 1fr 1fr; } .intl-visual { width: min(100%, 380px); } .apply-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; } .apply-cta .eyebrow { justify-content: center; } .apply-cta__actions { width: 100%; max-width: 360px; } .svc-detail--rev .svc-visual { order: 0; } .eta-table { grid-template-columns: 1fr; } .pricing { grid-template-columns: 1fr; } .comp-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .mvv { grid-template-columns: 1fr; } .post-card--featured { grid-template-columns: 1fr; } .post-card--featured .cover { min-height: 0; aspect-ratio: 16 / 9; } .job__cols { grid-template-columns: 1fr; padding-left: 24px; gap: 16px; } .roadmap { grid-template-columns: 1fr; gap: 30px; } .roadmap::before { top: 0; bottom: 0; left: 36px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--orange-400) 0 10px, transparent 10px 18px); } .roadmap__item { display: grid; grid-template-columns: 74px 1fr; gap: 0 20px; text-align: left; padding: 0; } .roadmap__dot { grid-row: span 3; margin: 0; } .roadmap__tag { justify-self: start; margin-top: 4px; } } @media (max-width: 767px) { :root { --topbar-h: 0px; --header-h: 68px; } html { scroll-padding-top: 80px; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } .topbar { display: none; } .site-header { padding-top: env(safe-area-inset-top, 0px); transition: transform .5s var(--ease), background-color .4s, box-shadow .4s; } .site-header.is-scrolled { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 10px 30px -14px rgba(110, 20, 8, .28); } .site-header.is-scrolled .header { height: 64px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .mnav__panel { padding-top: calc(18px + env(safe-area-inset-top, 0px)); } .brand__logo { width: 46px; height: 46px; } .site-header.is-scrolled .brand__logo { width: 42px; height: 42px; } .brand__name { font-size: 18px; } .brand__sub { font-size: 9.5px; letter-spacing: .4em; } .hotline { display: none; } .hero__badge { font-size: 13px; } .hero__badge-sep, .hero__badge-extra { display: none; } .slogan { flex-wrap: nowrap; gap: 2px; padding: 5px; max-width: 100%; } .slogan__item { height: 36px; padding: 0 10px; gap: 6px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; } .slogan__item .ic { font-size: 15px; } .slogan__glider { height: 36px; } .ticker__band--2 { top: 50%; } .route-card__title { flex-wrap: wrap; font-size: 11px; letter-spacing: .06em; } .route-map .node text { font-size: 15px; } .route-map .node--hub text { font-size: 17px; } .why-card { padding: 26px 22px; } .why-card__icon { width: 52px; height: 52px; font-size: 23px; border-radius: 16px; } .why-card h3 { margin-top: 16px; font-size: 18.5px; } .hero__cta .btn { width: 100%; } .hero__trust { gap: 8px 16px; font-size: 13px; } .showcase__frame { padding: 6px; border-radius: 20px; } .showcase__img { border-radius: 15px; } .chip-float { transform: none; } .chip-float__in { padding: 7px 12px 7px 7px; gap: 8px; border-radius: 14px; } .chip-float__icon { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; } .chip-float b { font-size: 12.5px; } .chip-float small { font-size: 11px; } .chip-float--a { top: auto; bottom: -26px; left: 2%; right: auto; } .chip-float--b { bottom: -26px; right: 2%; } .chip-float--c { display: none; } .showcase .spin-badge { width: 104px; height: 104px; top: -40px; left: auto; right: -6px; } .spin-badge--hero { box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 20px 40px -18px rgba(150, 20, 5, .6); } .spin-badge--hero::before { inset: -11px; } .spin-badge--hero::after { display: none; } .spin-badge__text text { font-size: 16px; } .spin-badge--hero .spin-badge__text text { font-size: 15px; } .showcase-wrap { margin-top: 56px; margin-bottom: 20px; } .stats { grid-template-columns: 1fr 1fr; border-radius: 26px; } .stat { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 18px; } .stat__icon { width: 48px; height: 48px; font-size: 22px; border-radius: 15px; } .stat + .stat::before { top: 18px; bottom: 18px; } .stat:nth-child(odd)::before { display: none; } .orbit__node { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .orbit__node > span { font-size: 20px; } .orbit-badge { padding: 9px 14px 9px 9px; } .orbit-badge__icon { width: 38px; height: 38px; font-size: 18px; } .orbit-badge b { font-size: 14px; } .bento { grid-template-columns: 1fr; gap: 16px; } .svc--intl { grid-template-columns: 1fr; padding: 28px 24px; } .svc-intl__globe { order: -1; width: min(72%, 250px); } .svc-intl__tag { margin: 10px 0 0; } .svc-intl__actions .btn { width: 100%; } .footer__legal { flex-direction: column; text-align: center; padding: 18px 16px; } .footer__legal-text { justify-content: center; } .footer__cards { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; padding-bottom: 36px; } .fcard { padding: 14px 16px; } .fcard__icon { width: 44px; height: 44px; font-size: 20px; } .svc { padding: 28px 24px 26px; } .why__grid { grid-template-columns: 1fr; } .estimator { padding: 18px; border-radius: 24px; } .estimator__row { grid-template-columns: 1fr; } .estimator__arrow { margin: -4px auto; transform: rotate(90deg); animation: none; width: 38px; height: 38px; } .estimator__result { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } .region { grid-template-columns: auto 1fr auto; } .region__bar { display: none; } .process__wrap { margin-top: 44px; } .process__line { top: 0; bottom: 0; left: 46px; right: auto; width: 4px; height: auto; } .process__line > i { transform: scaleY(0); transform-origin: top; } .process__wrap.is-in .process__line > i { transform: scaleY(1); } .process__truck { display: none; } .steps { grid-template-columns: 1fr; gap: 28px; } .step { display: grid; grid-template-columns: 96px 1fr; gap: 4px 18px; text-align: left; padding: 0; } .step__icon { grid-row: span 2; margin: 0; } .step h3 { margin-top: 18px; } .step p { margin-top: 0; } .carousel__track { --cg: 16px; grid-auto-columns: 88%; } .register__aside { padding: 36px 26px; } .register__main { padding: 30px 20px 28px; } .register__logo { width: 180px; right: -50px; bottom: -50px; } .form-grid { grid-template-columns: 1fr; } .seg span { font-size: 13px; gap: 6px; height: 44px; } .seg span .ic { display: none; } .modal { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; } .modal[open] { animation: sheet-in .55s var(--ease); } .modal.is-closing { animation: sheet-out .3s ease forwards; } .modal__head { padding: 20px 64px 18px 20px; } .modal__logo { width: 46px; height: 46px; } .modal__head h2 { font-size: 19px; } .modal__body { padding: 4px 18px calc(22px + env(safe-area-inset-bottom, 0px)); } .cta-band { padding: 56px 0 120px; } .cta-band__actions .btn { flex: 1 1 100%; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer__grid > div:last-child { grid-column: 1 / -1; } .footer__bottom-inner { justify-content: center; text-align: center; } .fab { display: none; } .to-top { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -14px rgba(80, 10, 5, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 0; border: 0; border-radius: 14px; background: none; font-size: 11px; font-weight: 700; color: var(--ink-700); } .mbar__icon { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #fff; } .mbar__item--call .mbar__icon { background: var(--grad-fire); } .mbar__item--call .ic { animation: phone-ring 2.6s ease-in-out infinite; } .mbar__item--zalo .mbar__icon { background: var(--zalo); font-size: 10.5px; font-weight: 800; } .mbar__item--mess .mbar__icon { background: var(--grad-messenger); } .mbar__item--cta { color: #fff; background: var(--grad-fire); box-shadow: var(--shadow-glow); } .mbar__item--cta .mbar__icon { background: rgba(255, 255, 255, .2); } .has-zalo-widget .mbar { grid-template-columns: repeat(3, 1fr); } .has-zalo-widget .mbar__item--zalo { display: none; } .page-hero__inner { grid-template-columns: 1fr; } .page-hero .spin-badge { display: none; } .contact-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .contact-card { padding: 22px 12px 20px; border-radius: 22px; } .contact-card__icon { width: 56px; height: 56px; font-size: 23px; } .contact-card__value { font-size: 14px; } .news-grid { grid-template-columns: 1fr; } .article__aside { grid-template-columns: 1fr; } .perks { grid-template-columns: 1fr 1fr; gap: 12px; } .perk { padding: 22px 14px; } .hire-steps { grid-template-columns: 1fr; } .job__head { grid-template-columns: auto 1fr; padding: 18px; gap: 14px; } .job__icon { width: 48px; height: 48px; font-size: 21px; border-radius: 15px; } .job__actions { grid-column: 1 / -1; justify-content: space-between; } .job__cols { padding: 0 18px 22px; } .commit-list { grid-template-columns: 1fr 1fr; } .mascot__traits { grid-template-columns: 1fr; } .ban-grid { grid-template-columns: 1fr; } .ticker__band { padding: 11px 0; } } @media (max-width: 380px) { .slogan__item .ic { display: none; } } @media (max-width: 420px) { .hero__badge { padding: 7px 14px 7px 10px; } .stat__num { font-size: 26px; } .commit-list { grid-template-columns: 1fr; } .contact-cards { grid-template-columns: 1fr; } } @keyframes sheet-in { from { transform: translateY(100%); } } @keyframes sheet-out { to { transform: translateY(100%); } } @media (hover: none) { .svc:hover, .why-card:hover, .post-card:hover, .mvv-card:hover, .contact-card:hover { transform: none; } } /* ---------- 32. Giảm chuyển động ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js [data-reveal], .js .hl { opacity: 1; transform: none; filter: none; } .road__truck { left: 8%; } }