/* ========================================================================= FIN TRAVEL — style.css Bước 2/7. Toàn bộ giao diện, chuyển từ inline style của _nguon/Fin Travel Landing.dc.html sang CSS thật. Nguyên tắc giữ nguyên từ bản thiết kế: - KHÔNG media query. Responsive bằng flex-wrap + grid auto-fit + clamp(). - Mọi màu đi qua biến CSS ở :root, không rải hex trong thân file. - style-hover="…" của bản thiết kế đã thành :hover thật. - Nội dung MẶC ĐỊNH HIỆN. File này không ẩn gì bằng opacity:0. Hiệu ứng hiện dần do bước 3 bật bằng class .js-reveal trên . ========================================================================= */ /* ---------- 1. Token ---------- */ :root { /* Navy */ --navy-900: #0f2456; --navy-700: #17347d; --navy-mid: #cbd6ec; --navy-light: #a9bce4; --navy-muted: #8fa3cd; --navy-badge: #dce5f7; /* Chữ */ --ink-900: #131720; --ink-700: #2b3340; --ink-600: #4a5462; /* Bước 6 — ĐÃ ĐO bằng Chrome thật, công thức WCAG 2.x. Cặp trước/sau: --ink-500 #6b7686 → #626d7e : trên #fff 4,60 → 5,24 · trên #f6f7f9 4,30 → 4,89 --ink-400 #7c8592 → #68717e : trên #fff 3,73 → 4,94 · trên #f6f7f9 3,48 → 4,61 Hai màu cũ trượt ngưỡng 4,5 ở nền #f6f7f9 và #fdfaf4. Màu mới giữ đúng họ xanh-xám của bản thiết kế, chỉ tối đi. */ --ink-500: #626d7e; --ink-400: #68717e; /* Đường kẻ và nền */ --line-200: #e3e6eb; --line-150: #eceff3; --line-100: #eef0f3; --line-input: #d6dae1; --surface-50: #f6f7f9; --surface-25: #fafbfd; --cream-50: #fdfaf4; --cream-line: #f0e4cb; --stripe: #f3f5f8; --ring: #eef0f3; /* Vàng */ --gold-400: #f0c070; /* Bước 6 — cũng đo được là trượt, cùng cách xử lý: --gold-700 #b0812f → #8f6724 : trên #fdfaf4 3,34 → 4,88 (chữ "Hành trình") --gold-800 #8a6415 → #805c10 : trên #f6e6c2 4,35 → 4,92 (nhãn "Phổ biến nhất") */ --gold-700: #8f6724; --gold-800: #805c10; --gold-100: #f6e6c2; --gold-ink: #2b1f04; /* chữ trên nền vàng, và chữ lời khách chính */ --gold-quote: #6b4f11; /* footer của lời khách chính */ /* Teal */ --teal-700: #0b6f63; --teal-300: #5fd3c2; --teal-100: #dff3ef; --teal-50: #f2faf8; --teal-border: #b9e3db; /* Khác */ --zalo: #0068ff; --zalo-hover: #0055d4; /* Bóng đổ */ --sh-calc: 0 26px 60px rgba(6, 16, 44, 0.38); --sh-form: 0 14px 40px rgba(19, 23, 32, 0.07); --sh-card: 0 6px 22px rgba(19, 23, 32, 0.05); --sh-card-hover: 0 18px 44px rgba(19, 23, 32, 0.12); --sh-filter: 0 4px 18px rgba(19, 23, 32, 0.04); --sh-zalo: 0 10px 26px rgba(0, 104, 255, 0.38); --sh-call: 0 10px 26px rgba(15, 36, 86, 0.4); /* Chữ */ --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Khung */ --wrap: 1180px; --pad-x: 24px; /* Chuyển động */ --ease-card: 220ms ease; } /* Mũi tên cho select — bản thiết kế dùng appearance:none và không vẽ mũi tên nào, người dùng không còn dấu hiệu nào cho biết đây là ô chọn được. Thêm mũi tên SVG dùng đúng màu --ink-400 đã có. Ghi trong PROJECT_STATE. Bước 6: đổi %237c8592 → %2368717e cho khớp --ink-400 mới. */ :root { --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2368717e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ---------- 2. Nền tảng ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink-900); background: #fff; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; } a { color: var(--navy-700); text-decoration: none; } a:hover { color: var(--navy-900); } img { max-width: 100%; } /* chỉ là vỏ bọc chọn định dạng (WebP → JPEG dự phòng). display:contents để nó KHÔNG sinh hộp riêng: mọi selector cũ nhắm thẳng vào (.logo img, .hero-bg, .ht-fig img, .cs-bg) giữ nguyên hiệu lực, và vẫn là con trực tiếp của .logo (flex) / .ht-fig / .hero. */ picture { display: contents; } input, select, button, textarea { font-family: inherit; } .wrap { max-width: var(--wrap); margin: 0 auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Hình trang trí: không bắt chuột, không đọc màn hình (aria-hidden ở HTML). */ .deco { position: absolute; pointer-events: none; } /* ---------- 3. Nút dùng chung ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-weight: 600; text-align: center; } .btn-primary { background: var(--navy-700); color: #fff; } .btn-primary:hover { background: var(--navy-900); color: #fff; } .btn-ghost { border: 1.5px solid var(--line-input); background: transparent; color: var(--navy-700); } .btn-ghost:hover { background: var(--surface-50); color: var(--navy-900); } /* ---------- 4. Header (sticky) ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-200); } .header-row { padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 10px; } .logo { display: flex; align-items: center; flex: 0 0 auto; } .logo img { height: 40px; width: auto; display: block; /* Logo là ảnh JPEG nền trắng. multiply hoà nền trắng vào header trắng. Hỏng nếu header đổi sang nền khác trắng — xin logo PNG nền trong suốt. */ mix-blend-mode: multiply; } .nav { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; font-size: 15px; font-weight: 500; color: var(--ink-600); } .nav a { color: inherit; } .nav a:hover { color: var(--navy-900); } .header-hotline { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--navy-700); white-space: nowrap; } .header-cta { flex: 0 0 auto; /* Đo thật ở bước 6: padding 12px + dòng chữ 19px = 43px, thiếu đúng 1px so với mức tối thiểu 44. Dùng min-height thay vì sửa padding để giữ nguyên khoảng đệm ngang của bản thiết kế. */ min-height: 44px; padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; } /* ---------- 5. Hero ---------- */ .hero { position: relative; background: var(--navy-900); overflow: hidden; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; opacity: 0.62; } .hero-veil { position: absolute; inset: 0; background: linear-gradient(102deg, var(--navy-900) 0%, rgba(15, 36, 86, 0.9) 40%, rgba(15, 36, 86, 0.34) 100%); } .hero-row { position: relative; padding: 76px var(--pad-x) 96px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; } .hero-copy { flex: 1 1 420px; min-width: 0; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--navy-badge); padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; } .hero-badge-dash { width: 22px; height: 1.5px; background: var(--gold-400); display: block; flex-shrink: 0; } .hero h1 { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: #fff; } .hero-sub { margin: 24px 0 0; font-size: 19.5px; line-height: 1.55; font-weight: 300; color: var(--navy-mid); max-width: 560px; } .hero-stats { margin: 40px 0 0; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 620px; display: flex; flex-wrap: wrap; gap: 12px 44px; align-items: flex-end; } .stat { flex: 0 0 auto; padding-bottom: 6px; } .stat-lead { padding-bottom: 0; } .stat-num { margin: 0; font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; } .stat-lead .stat-num { font-size: 68px; font-weight: 800; color: var(--gold-400); letter-spacing: -0.04em; line-height: 0.9; } .stat-plus { font-size: 34px; font-weight: 600; } .stat-suffix { font-size: 19px; color: var(--navy-muted); } .stat-label { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--navy-mid); } .stat-lead .stat-label { margin-top: 10px; } /* ---------- 6. Widget tính giá ---------- */ .calc { flex: 1 1 360px; min-width: 0; background: #fff; border-radius: 24px; padding: 28px; box-shadow: var(--sh-calc); } .calc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .calc-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .calc-badge { flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-700); background: var(--teal-100); padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .calc-route { display: flex; gap: 10px; align-items: flex-end; } /* Ô nhập dùng chung cho widget và form */ .field { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .field-label { font-size: 13.5px; font-weight: 600; color: var(--ink-600); } .field-opt { font-weight: 400; color: var(--ink-400); } .calc .field { flex: 1 1 0; gap: 7px; } .calc .field-label { font-size: 12.5px; color: var(--ink-500); } .calc-select { width: 100%; min-width: 0; padding: 14px; padding-right: 38px; font-size: 15.5px; font-weight: 500; border: 1px solid var(--line-200); border-radius: 14px; background-color: var(--surface-50); color: var(--ink-900); appearance: none; -webkit-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; } /* Nút đổi chiều */ .swap { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; line-height: 1; } /* Bước 6 — vùng bấm: đo thật được 42×46, thiếu 2px bề ngang so với mức tối thiểu 44×44. Nới lên 44, không đụng chiều cao 46 của bản thiết kế. */ .swap-hero { width: 44px; height: 46px; border-radius: 14px; border: 1px solid var(--line-200); color: var(--teal-700); font-size: 16px; } .swap-hero:hover { background: var(--teal-100); border-color: var(--teal-border); } .swap-filter { width: 44px; height: 44px; margin-bottom: 3px; border-radius: 999px; border: 1px solid var(--line-input); color: var(--navy-700); font-size: 17px; } .swap-filter:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--gold-ink); } /* Chọn loại xe — radio thật, hiện như 3 nút. Dùng radio để form vẫn gửi được loai_xe khi tắt JS, và để :checked tô trạng thái mà không cần JS. */ .seat-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .seat-group > legend { padding: 0; margin: 0 0 7px; float: none; } .calc-seats { margin-top: 18px; } .calc-seats > legend { font-size: 12.5px; color: var(--ink-500); } .seat-opt { display: block; min-width: 0; } .seat-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .seat-opt > span { display: block; text-align: center; padding: 13px 6px; font-size: 15px; font-weight: 600; border-radius: 14px; border: 1px solid var(--line-200); background: var(--surface-50); color: var(--ink-500); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .calc-seats .seat-opt input:checked + span { background: var(--teal-100); border: 1.5px solid var(--teal-700); color: var(--teal-700); } .seat-opt input:focus-visible + span { outline: 2px solid var(--navy-700); outline-offset: 2px; } /* Khối giá */ .calc-price { margin-top: 22px; background: var(--navy-900); border-radius: 18px; padding: 22px 24px; color: #fff; } .calc-price-caption { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-muted); } .calc-price-value { margin: 8px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--gold-400); } .calc-price-unit { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--navy-mid); } .calc-price-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--navy-light); } .calc-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; } .calc-actions .btn-primary { padding: 17px; border-radius: 16px; font-size: 16.5px; font-weight: 700; } .calc-actions .btn-ghost { padding: 16px 20px; border-radius: 16px; font-size: 16.5px; font-weight: 700; white-space: nowrap; } .calc-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-400); text-align: center; } /* ---------- 7. Khung section dùng chung ---------- */ .sec { padding: 92px var(--pad-x); } .eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); } .eyebrow-gold { color: var(--gold-700); } .eyebrow-onnavy { color: var(--navy-muted); } .sec h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.14; font-weight: 700; letter-spacing: -0.028em; } .sec-lead { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-600); max-width: 640px; } /* Bề rộng khối tiêu đề từng section, theo bản thiết kế */ .sec-gia h2, .sec-visao h2, .sec-quy-trinh h2, .sec-faq h2 { max-width: 640px; } .sec-chinh-sach h2 { max-width: 680px; } /* ---------- 8. Bảng giá ---------- */ .sec-gia { position: relative; padding: 88px var(--pad-x) 96px; background: #fff; overflow: hidden; } .sec-gia .wrap { position: relative; } .deco-ring { top: 120px; left: -180px; width: 460px; height: 460px; border-radius: 999px; border: 1.5px solid var(--ring); } .deco-stripes { bottom: -60px; right: -80px; width: 320px; height: 320px; background: repeating-linear-gradient(135deg, var(--stripe) 0 2px, transparent 2px 11px); } .filter { margin-top: 36px; background: #fff; border: 1px solid var(--line-200); border-radius: 20px; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; box-shadow: var(--sh-filter); } .filter .field { flex: 1 1 240px; } .filter-select { width: 100%; min-width: 0; padding: 14px 16px; padding-right: 40px; font-size: 16px; border: 1px solid var(--line-input); border-radius: 12px; background-color: var(--surface-25); color: var(--ink-900); appearance: none; -webkit-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 16px center; } .filter-count { flex: 0 0 auto; margin: 0 0 3px; padding-left: 4px; font-size: 14px; color: var(--ink-400); } .table-scroll { margin-top: 18px; background: #fff; border: 1px solid var(--line-200); border-radius: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Giữ thật (bước 1 đã chốt) để không mất ngữ nghĩa bảng. Tỉ lệ cột lấy đúng từ grid của bản thiết kế: minmax(150px,2.2fr) repeat(3, minmax(74px,1fr)) → 2.2/5.2 và 1/5.2. min-width 560px nên các cận dưới 150px/74px không bao giờ chạm. */ .price-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; } .price-table thead th:first-child { width: 42.3077%; } .price-table thead th + th { width: 19.2308%; } .price-table thead th { background: var(--surface-50); border-bottom: 1px solid var(--line-200); font-size: 13.5px; font-weight: 700; color: var(--ink-600); letter-spacing: 0.02em; text-align: left; padding: 16px 18px; vertical-align: middle; } .price-table thead th:first-child { padding: 16px 22px; } .price-table thead th:last-child { padding-right: 22px; } .price-table tbody tr { border-top: 1px solid var(--line-100); } .price-table tbody tr:hover { background: var(--surface-25); } .price-table tbody th[scope="row"] { padding: 18px 22px; font-size: 16.5px; font-weight: 600; text-align: left; vertical-align: middle; } .price-table td { padding: 18px; font-size: 16px; color: var(--ink-900); vertical-align: middle; } .price-table td:last-child { padding-right: 22px; } .price-table .num { text-align: right; font-variant-numeric: tabular-nums; } .tag-hot { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-800); background: var(--gold-100); padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .gia-foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; } .note { margin: 0; font-size: 14.5px; color: var(--ink-400); max-width: 560px; } .gia-foot .btn-primary { padding: 15px 26px; border-radius: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; } /* ---------- 9. Vì sao chọn ---------- */ .sec-visao { background: var(--surface-50); } .ly-do-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .ly-do { border-radius: 22px; } .ly-do h3 { margin: 0; line-height: 1.3; font-weight: 700; } .ly-do p { margin: 14px 0 0; font-size: 16px; line-height: 1.62; } .ly-do-num { margin: 0 0 18px; font-family: var(--mono); font-size: 13px; color: var(--ink-400); } /* Thẻ 01 — nổi bật */ .ly-do-01 { background: var(--navy-900); color: #fff; padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; } .ly-do-01 .ly-do-main { flex: 1 1 220px; min-width: 0; } .ly-do-01 .ly-do-num { color: var(--navy-muted); } .ly-do-01 h3 { font-size: 28px; } .ly-do-01 p { margin-top: 16px; font-size: 16.5px; color: var(--navy-mid); } .ly-do-so { flex: 0 1 190px; margin: 0; } .ly-do-so-num { display: block; font-size: 62px; font-weight: 800; color: var(--gold-400); letter-spacing: -0.04em; line-height: 0.9; } .ly-do-so-label { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--navy-mid); } /* Thẻ 02 */ .ly-do-02 { background: var(--navy-700); color: #fff; padding: 34px; } .ly-do-02 .ly-do-num { color: var(--navy-light); } .ly-do-02 h3 { font-size: 22px; } .ly-do-02 p { color: var(--navy-mid); } /* Thẻ 03–06 */ .ly-do-plain { background: #fff; border: 1px solid var(--line-150); padding: 34px; box-shadow: var(--sh-card); transition: transform var(--ease-card), box-shadow var(--ease-card); } .ly-do-plain:hover { transform: translateY(-5px); box-shadow: var(--sh-card-hover); } .ly-do-plain h3 { font-size: 20px; } .ly-do-plain p { color: var(--ink-600); } /* ---------- 10. Trên đường cùng Fin Travel ---------- */ .sec-hanh-trinh { padding: 88px var(--pad-x); background: var(--cream-50); } .ht-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; } .ht-head > div { max-width: 620px; } .ht-lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-500); max-width: 320px; } .ht-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; align-items: start; } .ht-fig { margin: 0; } .ht-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 20px; background: var(--line-200); } /* Bước 6 — nhịp lưới theo bản thiết kế (.dc.html), người vận hành đã duyệt 30/08: ô 1 rộng gấp đôi và cao theo tỉ lệ 16/11; ô 3 và ô 4 lệch xuống 34px. Chỗ thu hẹp về đều nhau nằm trong media query 560px ở cuối file — `span 2` chính là thứ gây tràn ngang khi lưới tụt xuống còn một cột. */ .ht-fig-rong { grid-column: span 2; } .ht-fig-rong img { aspect-ratio: 16 / 11; } .ht-fig-lech { margin-top: 34px; } .ht-fig:nth-child(1) img { object-position: 50% 40%; } .ht-fig:nth-child(2) img { object-position: 50% 62%; } .ht-fig:nth-child(3) img { object-position: 50% 45%; } .ht-fig:nth-child(4) img { object-position: 50% 55%; } .ht-fig figcaption { margin-top: 12px; font-size: 14.5px; color: var(--ink-600); } /* ---------- 11. Quy trình ---------- */ .sec-quy-trinh { background: var(--navy-900); color: #fff; } .buoc-grid { margin: 46px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); } .buoc { padding: 30px 26px; border-right: 1px solid rgba(255, 255, 255, 0.14); } .buoc:first-child { padding-left: 0; } .buoc:last-child { padding-right: 0; border-right: 0; } .buoc-num { margin: 0 0 16px; font-family: var(--mono); font-size: 30px; font-weight: 500; color: var(--teal-300); } .buoc:first-child .buoc-num { color: var(--gold-400); } .buoc h3 { margin: 0; font-size: 19px; font-weight: 700; } .buoc p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--navy-mid); } /* ---------- 12. Chính sách giá ---------- */ .sec-chinh-sach { position: relative; background: #fff; overflow: hidden; } .sec-chinh-sach .wrap { position: relative; } .cs-bg, .cs-veil { position: absolute; top: 0; right: 0; width: 46%; max-width: 520px; height: 100%; pointer-events: none; } .cs-bg { object-fit: cover; opacity: 0.09; } .cs-veil { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%); } .cs-row { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; } .cs-card { border: 1px solid var(--line-200); border-radius: 22px; padding: 32px; min-width: 0; } .cs-card-in { flex: 1 1 280px; background: var(--teal-50); } .cs-card-out { flex: 2 1 420px; background: var(--surface-50); } .cs-card h3 { margin: 0 0 20px; font-size: 20px; font-weight: 700; } .cs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .cs-list li { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.55; color: var(--ink-700); } .cs-mark { flex-shrink: 0; font-weight: 700; } .cs-mark-yes { color: var(--teal-700); } .cs-mark-no { color: var(--ink-400); } /* ---------- 13. Lời khách ---------- */ .sec-loi-khach { padding: 0 var(--pad-x) 96px; background: #fff; } .lk-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; } .lk { margin: 0; border-radius: 22px; padding: 32px; min-width: 0; } .lk p { margin: 0; } .lk footer { font-size: 14.5px; font-weight: 600; } .lk-main { flex: 2 1 420px; background: var(--cream-50); border: 1px solid var(--cream-line); } .lk-main p { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--gold-ink); } .lk-main footer { margin-top: 22px; color: var(--gold-quote); } .lk-sub { flex: 1 1 280px; background: var(--surface-50); } .lk-sub p { font-size: 17px; line-height: 1.6; color: var(--ink-700); } .lk-sub footer { margin-top: 20px; color: var(--ink-500); } /* ---------- 14. FAQ ---------- */ .sec-faq { position: relative; padding: 0 var(--pad-x) 92px; background: #fff; overflow: hidden; } .deco-glow { left: 50%; bottom: 40px; width: 520px; height: 520px; transform: translateX(-70%); background: radial-gradient(circle at center, #f7f2e6 0%, rgba(247, 242, 230, 0) 68%); } .faq-row { position: relative; display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; } .faq-head { flex: 1 1 280px; min-width: 0; } .faq-lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-600); max-width: 380px; } .faq-list { flex: 2 1 440px; min-width: 0; border-top: 1px solid var(--line-200); } .faq-item { border-bottom: 1px solid var(--line-200); } .faq-q { margin: 0; } .faq-btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; text-align: left; background: none; border: 0; padding: 24px 0; cursor: pointer; font-size: 18.5px; font-weight: 600; color: var(--ink-900); line-height: 1.4; } .faq-sign { flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--navy-700); } .faq-a { padding: 0 40px 26px 0; font-size: 17px; line-height: 1.62; color: var(--ink-600); } .faq-a p { margin: 0; } /* ---------- 15. Đặt xe + liên hệ ---------- */ .sec-dat-xe { background: var(--surface-50); } .dx-row { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; } .dx-left { flex: 1 1 360px; min-width: 0; } .dx-left .sec-lead { max-width: 460px; } .lh-card { margin: 36px 0 0; background: #fff; border: 1px solid var(--line-200); border-radius: 20px; overflow: hidden; } .lh-row { padding: 18px 22px; border-bottom: 1px solid var(--line-100); display: flex; gap: 16px; align-items: baseline; } .lh-row:last-child { border-bottom: 0; } .lh-row dt { width: 92px; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-400); } .lh-row dd { margin: 0; min-width: 0; font-size: 17px; overflow-wrap: anywhere; } .lh-hotline { font-weight: 600; } .lh-hotline a { color: var(--ink-900); } .lh-hotline a:hover { color: var(--navy-700); } .mono { font-family: var(--mono); font-size: 15px; color: var(--ink-500); } .mono a { color: inherit; } .mono a:hover { color: var(--navy-700); } /* Form */ .dx-form { flex: 1 1 360px; min-width: 0; background: #fff; border: 1px solid var(--line-150); border-radius: 24px; padding: 34px; box-shadow: var(--sh-form); display: flex; flex-direction: column; gap: 18px; } /* Ô bẫy chống spam — người thật không thấy, không tab tới. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-select, .form-input { width: 100%; min-width: 0; padding: 14px 16px; font-size: 16px; border: 1px solid var(--line-input); border-radius: 12px; background: #fff; color: var(--ink-900); } .form-select { padding-right: 40px; appearance: none; -webkit-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 16px center; } .form-select:focus-visible, .form-input:focus-visible, .calc-select:focus-visible, .filter-select:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 1px; } .form-seats { gap: 10px; } .form-seats .seat-opt > span { padding: 13px 8px; font-size: 15.5px; border-radius: 10px; border: 1px solid var(--line-input); background: #fff; color: var(--ink-600); } .form-seats .seat-opt input:checked + span { background: var(--navy-700); border: 1.5px solid var(--navy-700); color: #fff; } .dx-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; } .btn-submit { margin-top: 6px; width: 100%; padding: 18px; border-radius: 10px; font-size: 17px; font-weight: 700; } .form-status { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--teal-700); } .form-status[data-loi] { color: #a4262c; } /* Bước 5 — ô bị nhan-don.php trả về lỗi. app.js đặt aria-invalid="true", không tự nghĩ ra thuộc tính riêng: trình đọc màn hình đọc được luôn. */ .form-input[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: #a4262c; box-shadow: 0 0 0 1px #a4262c; } .form-seats .seat-opt input[aria-invalid="true"] + span { border-color: #a4262c; } /* Dòng chữ nói rõ ô đó sai cái gì. app.js chèn vào, nối với ô bằng aria-describedby. Viền đỏ một mình không nói được sai cái gì. */ .field-loi { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #a4262c; } /* Nút gửi lúc đang chờ máy chủ trả lời. */ .btn-submit[disabled] { opacity: 0.65; cursor: progress; } .form-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-400); } /* ---------- 16. Nút nổi ---------- */ .floats { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 12px; } .float { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; } .float:hover { color: #fff; } .float-zalo { background: var(--zalo); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; box-shadow: var(--sh-zalo); } .float-zalo:hover { background: var(--zalo-hover); } .float-call { background: var(--navy-700); font-size: 24px; box-shadow: var(--sh-call); } .float-call:hover { background: var(--navy-900); } /* ---------- 17. Footer ---------- */ .site-footer { background: var(--navy-900); color: var(--navy-muted); padding: 46px var(--pad-x); } .footer-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .footer-row p { margin: 0; font-size: 14.5px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14.5px; } .footer-nav a { color: var(--navy-mid); } .footer-nav a:hover { color: #fff; } /* ---------- 18. Bàn phím ---------- */ .btn:focus-visible, .swap:focus-visible, .faq-btn:focus-visible, .nav a:focus-visible, .float:focus-visible, .footer-nav a:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; } .sec-quy-trinh a:focus-visible, .site-footer a:focus-visible, .hero a:focus-visible { outline-color: var(--gold-400); } /* ---------- 19. Hiện dần khi cuộn ---------- CHỈ CÓ TÁC DỤNG KHI JS CHẠY ĐƯỢC. Cả hai điều kiện đều do app.js dựng: - class .js-reveal trên - thuộc tính [data-reveal] trên từng khối Tắt JS thì không có cái nào, nên không ẩn gì — trang hiện đủ chữ. app.js cũng bỏ qua phần tử đã nằm trong khung nhìn lúc tải, để không nháy. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 620ms cubic-bezier(.2, .7, .3, 1), transform 620ms cubic-bezier(.2, .7, .3, 1); } .js-reveal [data-reveal].da-hien { opacity: 1; transform: none; } /* ---------- 20. Hai mốc màn hình hẹp ---------- Bản thiết kế không có media query nào; quy ước "không media query" của bước 2 đến từ đó. Người vận hành gỡ quy ước này ngày 30/08 cho đúng hai mốc dưới đây, mỗi mốc giải một số đo cụ thể. Không dựng thêm hệ breakpoint nào khác. */ /* Mốc 768 — đầu trang trên điện thoại. Đo thật ở bước 6: header sticky cao 147px (204px ở khổ 320) vì nav + hotline + nút CTA quấn thành 3 hàng, tức hơn một phần ba màn hình bị chiếm suốt lúc cuộn. Phương án (b) người vận hành chọn: giấu 4 liên kết menu, giữ logo + hotline + nút "Đặt xe ngay". Bốn liên kết đó đều là neo trong cùng một trang. display:none tự rút phần tử khỏi chuỗi tab — ở đây là điều mong muốn, không còn tiêu điểm nào rơi vào chỗ mắt không thấy. */ @media (max-width: 767.98px) { .nav { display: none; } } /* Mốc 560 — lưới ảnh "Hành trình". Dưới mốc này lưới có lúc chỉ còn một cột, mà `grid-column: span 2` của ô 1 sẽ sinh thêm một cột ngầm và đẩy trang tràn ngang. Cho bốn ô về đều nhau, đúng tỉ lệ 4/5 như ba ô kia, và bỏ luôn phần lệch 34px vì xếp một cột thì lệch chỉ thành khoảng trống thừa. */ @media (max-width: 560px) { .ht-fig-rong { grid-column: auto; } .ht-fig-rong img { aspect-ratio: 4 / 5; } .ht-fig-lech { margin-top: 0; } } /* ---------- 21. Giảm chuyển động ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .ly-do-plain:hover { transform: none; } /* Lưới an toàn: app.js đã không bật .js-reveal khi người dùng đặt giảm chuyển động, nhưng nếu class lọt vào bằng đường nào khác thì cũng không được phép ẩn nội dung. */ .js-reveal [data-reveal] { opacity: 1; transform: none; } } /* Mốc 480 — chữ rớt dòng trên điện thoại. Thêm 01/09/2026. Đo thật bằng Chrome ở 320 / 360 / 390 / 430 px: đếm bằng Range trên TỪNG TỪ rồi gom theo tâm dòng, dung sai nửa line-height. (Gom theo `top` là sai — ký tự ☎ và các hậu tố cỡ nhỏ như "+" hay "/5" nằm cùng dòng nhưng khác `top`, bốn báo động giả đầu tiên đều từ lỗi đó.) Số ca trước khi sửa: 320px = 5 · 360px = 2 · 390px = 2 · 430px = 1. Số ca sau khi sửa: 320px = 0 · 360px = 0 · 390px = 1 · 430px = 0. (a) Thẻ liên hệ — nguyên nhân nặng nhất. `.lh-row dt` khoá cứng 92px, cộng gap 16px và padding 22px hai bên, nên cột giá trị chỉ còn ~238px ở khổ 390. Cùng với `overflow-wrap:anywhere` trên `dd`, email bị cắt GIỮA TỪ thành "fintravelhoian@gmail." / "com". Nhãn "Giờ hoạt động" rớt chữ "động" ở MỌI bề ngang đã đo. Xếp dọc — nhãn trên, giá trị dưới — cột giá trị được trọn 296px: email về một dòng, giờ hoạt động về một dòng, địa chỉ còn 2 dòng không rớt. Đổi `anywhere` -> `break-word`: không cắt giữa từ khi còn chỗ, nhưng vẫn cắt nếu gặp từ dài hơn cả khung, nên không sinh tràn ngang. (b) H1 hero. `clamp(34px, 5vw, 60px)` — ở 360px thì 5vw = 18px, NHỎ HƠN SÀN, nên clamp lấy đúng sàn 34px, vốn là cỡ dành cho màn rộng. "chuyến" rớt lại một mình ở dòng thứ tư. Hạ sàn xuống 26px và cho co theo bề ngang. (c) Nút "Đặt tuyến này" ở 320px. `.calc-actions` là `1fr auto`; nút "☎ Gọi" chiếm phần `auto` nên nút chính bị ép quấn 3 dòng, "này" rớt lại. Dưới 360px cho hai nút xếp một cột. Kiểm thêm: không tràn ngang ở bề ngang nào (scrollWidth == viewport), không có chữ bị cắt. `caption.sr-only` bị cắt là CỐ Ý (chỉ dành cho trình đọc màn hình), không tính là lỗi. ⚠ CÒN 1 ca ở đúng 390px, KHÔNG sửa: dòng "+ Phí vào sân bay ... 10.000–20.000 vnđ" rớt chữ "vnđ". Đã thử `text-wrap: pretty` trên `.cs-list li` — `CSS.supports` trả true nhưng kết quả KHÔNG đổi, vì `li` là flex container nên phần chữ nằm trong hộp ẩn danh, thuộc tính không với tới. Ca này chỉ có ở đúng một bề ngang và nằm trong chữ của khách. */ @media (max-width: 479.98px) { .lh-row { flex-direction: column; align-items: stretch; gap: 4px; } .lh-row dt { width: auto; } .lh-row dd { overflow-wrap: break-word; } .hero h1 { font-size: clamp(26px, 7.6vw, 34px); text-wrap: balance; } } /* Mốc 360 — xem lý do (c) ở khối trên. */ @media (max-width: 359.98px) { .calc-actions { grid-template-columns: minmax(0, 1fr); } }