/* ============================================================ CarTube — hệ thống thiết kế Bảng màu kem/cam đất · chữ Archivo giãn rộng · khối vật lý ============================================================ */ :root { /* màu */ --cream: #fff1e6; /* nền chính */ --paper: #fff8f2; /* nền thẻ, vùng nổi */ --ink: #1a1918; /* chữ chính, nền tối */ --ink-2: #0e0c0b; /* nền tối sâu hơn */ --ink-line: #33302e; /* kẻ chỉ trên nền tối */ --coral: #e2542f; /* màu thương hiệu */ --coral-lit: #f0653c; /* mặt trên nút */ --coral-dim: #d24a26; /* mặt dưới nút */ --coral-deep: #8f2d0f; /* thân nút, bóng khối */ --terra: #a33716; /* chữ nhấn */ --sand: #ffdcc8; /* mảng nền mềm */ --sand-2: #fbe3d3; --rule: #e8d3c2; /* kẻ chỉ trên nền sáng */ --rule-soft: #f0dccc; --muted: #6b5044; /* chữ phụ */ --muted-2: #8a6a5c; /* nhãn */ --muted-3: #a3907f; /* nhãn mờ */ --green: #1f7a52; /* trạng thái ok */ /* chữ */ --display: 'Archivo', system-ui, sans-serif; --body: 'DM Sans', Helvetica, Arial, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; /* nhịp */ --page: 1280px; --gutter: 32px; --ease: cubic-bezier(.2,.8,.3,1); --ease-press: cubic-bezier(.2,.9,.3,1); } /* ---------- nền tảng ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); overflow-x: hidden; } a { color: var(--terra); text-decoration: none; } a:hover { color: #7d260d; text-decoration: underline; } button { font-family: var(--body); } input, textarea { font-family: var(--body); } input:focus, textarea:focus { outline: none; } ::selection { background: var(--coral); color: var(--cream); } img, svg { display: block; } /* hạt nhiễu phủ toàn trang — đặt một lần trong body */ .grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); } /* ---------- chữ ---------- */ .display { font-family: var(--display); font-variation-settings: 'wdth' 118, 'wght' 820; letter-spacing: -.045em; line-height: .9; margin: 0; } .h1 { font-size: clamp(38px, 5vw, 60px); } .h2 { font-size: clamp(34px, 4.4vw, 56px); } .h3 { font-size: clamp(23px, 2.6vw, 32px); font-variation-settings: 'wdth' 106, 'wght' 780; letter-spacing: -.03em; } .hero-h1 { font-size: clamp(34px, 11vw, 72px); line-height: .84; letter-spacing: -.05em; } /* Tren 900px hero chia HAI COT, cot chu chi rong ~45% man hinh - dung chung mot thang co chu voi ban mot cot thi dong "MÀN HÌNH" tran ra khoi cot. */ @media (min-width: 901px) { .hero-h1 { font-size: clamp(46px, 5vw, 96px); } } .hero-h1 span { display: block; white-space: nowrap; font-variation-settings: 'wdth' 122, 'wght' 850; } .hero-h1 .stroke { color: transparent; -webkit-text-stroke: 2.5px var(--coral); } .hero-h1 span:nth-child(2) { margin-left: .06em; } .hero-h1 span:nth-child(3) { margin-left: .12em; } .label { /* nhãn mono viết hoa — dùng khắp trang */ font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-3); } .label--sm { font-size: 10px; letter-spacing: .14em; } .lead { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; margin: 0; } .carplay-note { display: block; margin-top: 12px; padding: 12px 14px; background: var(--sand-2); border-left: 3px solid var(--coral); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.6; color: var(--muted); } .carplay-note a { white-space: nowrap; font-weight: 700; } .body { font-size: 16px; line-height: 1.68; color: var(--muted); text-wrap: pretty; margin: 0; } .section-head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 40px; } .page-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); } /* ============================================================ NÚT BẤM — khối vật lý có chiều dày Gờ sáng trên + gờ tối dưới (inset) đặt trên thân đặc (0 Npx 0) Rê chuột: nhấc lên, thân dày ra, quầng sáng nở Ấn xuống: lún hết chiều dày, gờ sáng mờ đi ============================================================ */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: none; border-radius: 99px; cursor: pointer; font-weight: 700; transition: transform .13s var(--ease-press), box-shadow .13s var(--ease-press), padding .18s var(--ease-press); } .btn > span { position: relative; z-index: 1; } /* vệt sáng quét ngang mặt nút */ .btn .sheen { position: absolute; top: -40%; left: 0; width: 26%; height: 180%; background: linear-gradient(90deg, rgba(255,241,230,0), rgba(255,241,230,.4), rgba(255,241,230,0)); animation: sheen 5s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes sheen { 0% { transform: translateX(-180%) skewX(-18deg); } 42%, 100% { transform: translateX(620%) skewX(-18deg); } } /* chip tròn chứa mũi tên */ .btn .chip { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- cấp 1: cam --- */ .btn--coral { height: 64px; padding: 0 9px 0 30px; background: linear-gradient(180deg, var(--coral-lit) 0%, var(--coral) 52%, var(--coral-dim) 100%); color: var(--cream); font-size: 16px; box-shadow: inset 0 2px 0 rgba(255,241,230,.45), inset 0 -3px 0 rgba(0,0,0,.16), 0 7px 0 var(--coral-deep), 0 16px 26px rgba(163,55,22,.28); } .btn--coral .chip { background: var(--cream); box-shadow: 0 2px 6px rgba(122,36,12,.28); } .btn--coral:hover { transform: translateY(-3px); padding-left: 36px; box-shadow: inset 0 2px 0 rgba(255,241,230,.55), inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 0 var(--coral-deep), 0 24px 34px rgba(163,55,22,.36), 0 0 0 7px rgba(226,84,47,.16); } .btn--coral:active { transform: translateY(7px); padding-left: 30px; box-shadow: inset 0 2px 0 rgba(255,241,230,.28), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 0 var(--coral-deep), 0 3px 8px rgba(163,55,22,.32); } /* --- cấp 1: đen --- */ .btn--ink { height: 66px; padding: 0 10px 0 32px; background: linear-gradient(180deg, #2a2624 0%, var(--ink) 60%, #0d0c0b 100%); color: var(--cream); font-size: 17px; box-shadow: inset 0 2px 0 rgba(255,241,230,.2), inset 0 -3px 0 rgba(0,0,0,.5), 0 7px 0 #000, 0 16px 28px rgba(0,0,0,.3); } .btn--ink .chip { background: var(--coral); } .btn--ink:hover { transform: translateY(-3px); padding-left: 38px; box-shadow: inset 0 2px 0 rgba(255,241,230,.28), inset 0 -3px 0 rgba(0,0,0,.5), 0 10px 0 #000, 0 24px 36px rgba(0,0,0,.36), 0 0 0 7px rgba(26,25,24,.18); } .btn--ink:active { transform: translateY(7px); padding-left: 32px; box-shadow: inset 0 2px 0 rgba(255,241,230,.14), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 #000, 0 3px 8px rgba(0,0,0,.3); } /* --- nút khối cỡ nhỏ (header, chân trang) --- */ .btn--sm { height: 44px; padding: 0 clamp(16px, 1.8vw, 24px); gap: 10px; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; box-shadow: inset 0 1.5px 0 rgba(255,241,230,.2), inset 0 -2px 0 rgba(0,0,0,.5), 0 5px 0 #000, 0 10px 18px rgba(0,0,0,.22); } .btn--sm:hover { background: var(--coral); transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,241,230,.4), inset 0 -2px 0 rgba(0,0,0,.2), 0 7px 0 var(--coral-deep), 0 14px 22px rgba(163,55,22,.3), 0 0 0 5px rgba(226,84,47,.15); } .btn--sm:active { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255,241,230,.2), 0 0 0 var(--coral-deep), 0 2px 6px rgba(0,0,0,.25); } /* --- nút viền, nút chữ --- */ .btn--ghost { height: 44px; padding: 0 22px; gap: 8px; background: transparent; color: var(--terra); border: 1.5px solid #e2b79f; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; } .btn--ghost:hover { background: var(--sand-2); } .link-arrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; border-bottom: 1.5px solid var(--coral); padding-bottom: 3px; transition: gap .2s var(--ease); } .link-arrow:hover { color: var(--terra); text-decoration: none; } .btn--block { width: 100%; padding: 0; gap: 14px; } .btn--block:hover { gap: 20px; padding-left: 0; } .btn--block:active { gap: 14px; padding-left: 0; } /* Selector ngon ngu toan trang */ .lang-switch { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255, 253, 250, .84); box-shadow: 0 10px 24px rgba(35,24,18,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 30; } .lang-switch--floating { position: fixed; right: 16px; bottom: 16px; } .lang-switch__btn { min-width: 42px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-2); cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .lang-switch__btn:hover { color: var(--ink); background: var(--sand-2); } .lang-switch__btn:focus-visible { outline: 3px solid rgba(240,101,60,.32); outline-offset: 2px; } .lang-switch__btn.is-active { color: var(--cream); background: var(--ink); box-shadow: inset 0 1px 0 rgba(255,241,230,.22), 0 3px 8px rgba(0,0,0,.14); } .lang-switch__mount { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } body > .skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt { display: none !important; } body { top: 0 !important; } font { letter-spacing: inherit; } /* ============================================================ DẢI CHỈ SỐ CHẠY (ticker) Nội dung nhân đôi, khối rộng 200%, dịch -50% là lặp liền mạch ============================================================ */ .ticker { background: var(--ink); overflow: hidden; height: 36px; display: flex; align-items: center; } .ticker__track { display: flex; width: max-content; animation: ticker 34s linear infinite; } .ticker__run { display: flex; align-items: center; flex: 0 0 auto; } .ticker__item { display: flex; align-items: center; gap: 11px; padding: 0 24px; white-space: nowrap; } .ticker__dot { width: 5px; height: 5px; background: var(--coral); transform: rotate(45deg); } .ticker__item span { font-family: var(--mono); font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: #b8afa8; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- HEADER ---------- */ .header { position: sticky; top: 0; z-index: 30; background: rgba(255,241,230,.9); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s ease; } .header.is-scrolled { border-bottom-color: var(--ink); } .header__bar { max-width: var(--page); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 0; } .brand__mark { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; animation: bob 4s ease-in-out infinite; } .brand__mark img { width: 38px; height: 38px; display: block; object-fit: contain; border-radius: 9px; } .brand__name { font-family: var(--display); font-variation-settings: 'wdth' 118, 'wght' 800; font-size: 21px; letter-spacing: -.02em; line-height: 1; } .nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px, 1.6vw, 24px); flex-wrap: nowrap; overflow: hidden; } .nav a { position: relative; padding: 5px 0; font-family: var(--mono); font-size: clamp(10px, 1.05vw, 12px); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; transition: color .18s ease; } .nav a:hover { color: var(--ink); text-decoration: none; } .nav a::after { /* vệt highlight sau chữ */ content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 6px; background: #ffcdb2; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-press); } .nav a.is-active { color: var(--ink); } .nav a.is-active::after { transform: scaleX(1); } /* ---------- HERO ---------- */ .hero { position: relative; overflow: hidden; padding: 70px 0 0; } .hero__blob { position: absolute; top: -140px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: var(--sand); animation: drift 14s ease-in-out infinite; } .hero__ring { position: absolute; top: 120px; right: 180px; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid #e2b79f; animation: drift 18s ease-in-out infinite reverse; } .hero__grid { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 48px; align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 26px; z-index: 2; } .hero__status { display: flex; align-items: center; gap: 11px; } .hero__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 2.4s ease-in-out infinite; font-style: normal; } .hero__status span { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 4px; } /* màn hình xe nghiêng, ngả theo con trỏ (JS ghi transform) */ .tilt { position: relative; z-index: 2; perspective: 1200px; } .tilt__inner { position: relative; transform: rotate(-2.4deg); transition: transform .5s var(--ease); } .screen { position: relative; background: var(--ink); padding: 16px 16px 40px; border-radius: 14px; box-shadow: 0 34px 70px rgba(26,25,24,.3); } .screen__glass { position: relative; width: 100%; aspect-ratio: 1.6; overflow: hidden; border-radius: 5px; background: #050403; } .screen__glass img { width: 100%; height: 100%; object-fit: contain; } .screen__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; } .screen__dots i { width: 26px; height: 4px; border-radius: 99px; background: #3a3634; } .screen__badge { position: absolute; left: -26px; bottom: 44px; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 99px; background: var(--cream); box-shadow: 0 10px 26px rgba(26,25,24,.16); transform: rotate(-4deg); } .screen__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: blink 1.6s ease-in-out infinite; } .screen__badge span { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; } /* ============================================================ CẢNH XE CHẠY — "vừa đi vừa xem" 3 lớp: nhà cao tầng (chậm) · vạch đường (nhanh) · xe + bong bóng ============================================================ */ .road { position: relative; margin-top: 56px; height: 230px; overflow: hidden; background: #151312; } .road__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #211d1b 0%, #151312 62%); } .road__city { position: absolute; left: 0; bottom: 74px; display: flex; width: 200%; opacity: .5; animation: ticker 26s linear infinite; } .road__city > div { width: 50%; display: flex; align-items: flex-end; gap: 26px; flex-shrink: 0; } .road__city b { display: block; background: #2b2724; flex-shrink: 0; } .road__asphalt { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: var(--ink-2); } .road__dashes { position: absolute; left: 0; right: 0; bottom: 36px; height: 4px; background-image: linear-gradient(90deg, #4a443f 0 66px, transparent 66px 132px); background-size: 132px 4px; animation: dashes .9s linear infinite; } @keyframes dashes { to { background-position-x: -132px; } } .road__car { position: absolute; left: 0; bottom: 44px; width: 100%; animation: drive 11s linear infinite; } @keyframes drive { from { transform: translateX(-22vw); } to { transform: translateX(112vw); } } .road__car > div { position: relative; width: 150px; } .road__body { animation: bob 1s ease-in-out infinite; } .road__wind { position: absolute; right: 150px; bottom: 14px; display: flex; align-items: center; gap: 5px; opacity: .85; } .road__wind i { height: 2px; border-radius: 2px; background: #4a443f; display: block; } /* bong bóng nội dung bay theo xe */ .road__chips { position: absolute; left: -6px; bottom: 78px; display: flex; align-items: flex-end; gap: 10px; } .chip-pill { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: float 2.8s ease-in-out infinite; white-space: nowrap; } .chip-pill span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .chip-pill i { width: 16px; height: 16px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .chip-pill i::before { /* tam giác play */ content: ''; width: 0; height: 0; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; margin-left: 2px; } .road__caption { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; } .road__caption span { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #4a443f; } /* ---------- dải số liệu ---------- */ .stats { max-width: var(--page); margin: 0 auto; padding: 26px var(--gutter) 0; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .stat { display: flex; align-items: baseline; gap: 10px; } .stat b { font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 800; font-size: 34px; letter-spacing: -.035em; color: var(--terra); font-variant-numeric: tabular-nums; } .stat span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } /* ---------- TÍNH NĂNG: số khổng lồ dính bên trái ---------- */ .features { max-width: var(--page); margin: 0 auto; padding: 110px var(--gutter) 0; } .features__grid { display: grid; grid-template-columns: minmax(0,.44fr) minmax(0,1fr); gap: 56px; align-items: start; } .features__num { position: sticky; top: 130px; height: 260px; font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: clamp(120px, 15vw, 210px); line-height: .78; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--coral); } .feature { display: flex; flex-direction: column; gap: 14px; padding: 52px 0; border-bottom: 1px solid var(--rule); } .feature__head { display: flex; align-items: center; gap: 14px; } .feature__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--rule-soft); color: var(--muted-3); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; transition: background-color .4s ease, color .4s ease; } .feature.is-active .feature__dot { background: var(--coral); color: var(--cream); } .feature__body { padding-left: 48px; max-width: 560px; font-size: 17px; line-height: 1.68; color: var(--muted); text-wrap: pretty; } /* ---------- DẢI TỐI NGHIÊNG ---------- */ .slab { margin-top: 110px; position: relative; } .slab__bg { transform: skewY(-2.2deg); background: var(--ink); padding: 96px 0; } .slab__in { transform: skewY(2.2deg); max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 34px; } .slab .h2 { color: var(--cream); } .shots__headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 2px 0 -12px; color: var(--cream); } .shots__headline span { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a69a91; } .shots__headline b { font-family: var(--display); font-variation-settings: 'wdth' 118, 'wght' 850; font-size: clamp(28px, 4vw, 48px); line-height: .9; letter-spacing: 0; text-transform: uppercase; color: var(--coral); } .shots { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: 18px; } .shot { position: relative; overflow: hidden; border-radius: 10px; background: #050403; border: 1px solid rgba(255,241,230,.12); box-shadow: 0 22px 44px rgba(0,0,0,.28); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .shot img { width: 100%; height: 100%; object-fit: contain; } .shot:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 30px 54px rgba(0,0,0,.38); } .shot--a { aspect-ratio: 1.6; transform: rotate(-1deg); } .shot--b, .shot--c, .shot--d { flex: 1; min-height: 150px; aspect-ratio: 1.6; } .shot--b { transform: rotate(1.4deg); } .shot--c { transform: rotate(-1.2deg); } .shot--d { transform: rotate(.8deg); } .shots__col { display: flex; flex-direction: column; gap: 18px; } /* ---------- TẤM VÉ GIÁ ---------- */ .pricing { max-width: var(--page); margin: 0 auto; padding: 120px var(--gutter) 0; } .ticket { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1fr); border-radius: 20px; overflow: hidden; background: var(--paper); box-shadow: 0 30px 64px rgba(163,55,22,.18); transform: rotate(-1.4deg); transition: transform .45s var(--ease); } .ticket:hover { transform: rotate(0deg) translateY(-6px); } .ticket__stub { position: relative; background: var(--ink); padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .ticket__notch { position: absolute; right: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); } .ticket__notch--t { top: -13px; } .ticket__notch--b { bottom: -13px; } .ticket__price { display: flex; align-items: baseline; gap: 4px; } .ticket__price b { font-family: var(--display); font-variation-settings: 'wdth' 118, 'wght' 880; font-size: clamp(38px, 11vw, 62px); line-height: .9; letter-spacing: -.05em; color: var(--cream); font-variant-numeric: tabular-nums; } .ticket__price i { font-style: normal; font-family: var(--display); font-variation-settings: 'wdth' 118, 'wght' 880; font-size: 28px; color: var(--coral); } .ticket__face { padding: 48px 40px; display: flex; flex-direction: column; gap: 26px; border-left: 2px dashed #d6bda9; } .ticket__list { display: flex; flex-direction: column; } .ticket__list div { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; color: #3f3b38; } /* ---------- BĂNG ĐÁNH GIÁ ---------- */ .reviews { padding: 120px 0 0; } .reviews__track { display: flex; width: 200%; animation: ticker 46s linear infinite; } .reviews__run { width: 50%; display: flex; gap: 22px; flex-shrink: 0; padding-right: 22px; align-items: center; } .review { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--paper); border-radius: 16px; box-shadow: 0 12px 30px rgba(163,55,22,.09); } .review:nth-child(3n+1) { transform: rotate(-1.4deg); } .review:nth-child(3n+2) { transform: rotate(1.2deg); } .review:nth-child(3n+3) { transform: rotate(-.8deg); } .review__stars { display: flex; gap: 3px; } .review__who { display: flex; align-items: baseline; gap: 10px; } .review__who b { font-size: 15px; } .review__who span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3); } /* ---------- DẢI KÊU GỌI ---------- */ .cta { position: relative; margin-top: 90px; overflow: hidden; } .cta__bg { transform: skewY(2deg); background: var(--coral); padding: 110px 0; } .cta__in { transform: skewY(-2deg); max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; flex-wrap: wrap; } .cta h2 { margin: 0; max-width: 700px; color: var(--cream); font-family: var(--display); font-variation-settings: 'wdth' 120, 'wght' 850; font-size: clamp(38px, 5vw, 64px); line-height: .92; letter-spacing: -.05em; text-wrap: balance; } /* ---------- HÀNG KẺ CHỈ (hướng dẫn, điều khoản, FAQ) ---------- */ .rows { display: flex; flex-direction: column; } .row { display: grid; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); transition: padding-left .3s var(--ease), background-color .3s ease; } .row:hover { padding-left: 16px; background: var(--paper); } .row--guide { grid-template-columns: 92px minmax(0,1fr); } .row--terms { grid-template-columns: 60px minmax(0,1fr); } .row--terms:hover { padding-left: 0; background: none; } .row__num-outline { font-family: var(--display); font-variation-settings: 'wdth' 122, 'wght' 880; font-size: 54px; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.6px #e2b79f; } .row__num { font-family: var(--mono); font-size: 13px; color: #c9a48c; padding-top: 6px; } /* ---------- FAQ ---------- */ .faq { border-bottom: 1px solid var(--rule); } .faq__q { display: grid; grid-template-columns: 48px minmax(0,1fr) 30px; gap: 16px; align-items: center; padding: 24px 0; cursor: pointer; } .faq__q h3 { margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 730; font-size: 20px; letter-spacing: -.02em; text-wrap: pretty; } .faq__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--sand-2); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease-press), background-color .25s ease; } .faq__icon svg { stroke: var(--terra); } .faq.is-open .faq__icon { transform: rotate(180deg); background: var(--coral); } .faq.is-open .faq__icon svg { stroke: var(--cream); } .faq__a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .34s var(--ease), opacity .26s ease; } .faq.is-open .faq__a { max-height: 320px; opacity: 1; } .faq__a > div { /* Dia chi web dai (vi du link GitHub trong cau hoi ve KingInstaller) la mot cum khong co khoang trang - may nho se bi tran neu khong cho ngat. */ overflow-wrap: anywhere; padding: 0 46px 26px 64px; font-size: 16px; line-height: 1.72; color: var(--muted); text-wrap: pretty; } /* ---------- BIỂU MẪU ---------- */ .form { display: flex; flex-direction: column; gap: 22px; padding: 38px; background: var(--paper); border-radius: 20px; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .field { border: none; border-bottom: 2px solid #d6bda9; background: transparent; padding: 0; height: 48px; font-size: 16px; color: var(--ink); transition: border-color .2s ease; } textarea.field { height: auto; padding: 12px 0; resize: vertical; } .field:focus { border-bottom-color: var(--coral); } /* ---------- CHÂN TRANG ---------- */ .footer { position: relative; background: var(--ink); color: #d8d0ca; overflow: hidden; } .footer__top { max-width: var(--page); margin: 0 auto; padding: 64px var(--gutter) 0; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .footer__cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer__col { display: flex; flex-direction: column; gap: 14px; } .footer__col a { font-size: 15px; color: #d8d0ca; transition: color .18s ease, transform .18s ease; display: inline-block; } .footer__col a:hover { color: #ffb894; transform: translateX(4px); text-decoration: none; } .footer__legal { max-width: var(--page); margin: 0 auto; padding: 34px var(--gutter) 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7d756f; } /* chữ khổng lồ luôn vừa khít bề rộng — SVG textLength, không phải font-size vw */ .footer__word { padding: 24px 20px 0; user-select: none; } .footer__word svg { width: 100%; height: auto; } .footer__word text { font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 130px; fill: #282422; } /* ---------- HIỆN DẦN KHI CUỘN ---------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- CHUYỂN ĐỘNG DÙNG CHUNG ---------- */ @keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-.4deg); } 75% { transform: translateY(1px) rotate(.4deg); } } @keyframes blink { 0%,45% { opacity: 1; } 55%,100% { opacity: .25; } } @keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,18px); } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .page-in { animation: pageIn .5s var(--ease) both; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* ---------- MÀN HÌNH HẸP ---------- */ @media (max-width: 900px) { .hero__grid, .features__grid, .shots, .form__row { grid-template-columns: minmax(0,1fr); } .features__num { position: static; height: auto; } .ticket { grid-template-columns: minmax(0,1fr); transform: none; } .ticket__face { border-left: none; border-top: 2px dashed #d6bda9; } .ticket__notch { display: none; } } /* ============================================================ Menu tren dien thoai (<=900px) ------------------------------------------------------------ Truoc day chi co `.nav { display:none }` va KHONG co gi thay the: muon sang trang khac phai keo het trang xuong chan trang de tim link. Gio .nav bien thanh mot bang tha xuong, mo bang nut ba gach. Dung lai DUNG khoi