/* ========================================================================== Saigontourist – Xe Du Lịch | Custom styles Bổ sung cho Tailwind: font, animation, chi tiết không biểu đạt được bằng utility ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap'); :root { --brand-500: #0072bc; --brand-700: #004a7c; --brand-900: #002744; --accent-500: #f5a623; --header-h: 68px; /* chiều cao navbar ở mobile (topbar bị ẩn) */ } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Bù chiều cao header cố định khi nhảy tới anchor */ section[id] { scroll-margin-top: calc(var(--header-h) + 12px); } @media (min-width: 768px) { :root { --header-h: 108px; } } /* --- Skip link ----------------------------------------------------------- */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: #fff; color: var(--brand-700); padding: .75rem 1.25rem; border-radius: .75rem; font-weight: 600; box-shadow: 0 10px 30px rgb(0 0 0 / .2); transition: top .2s ease; } .skip-link:focus { top: 1rem; } /* --- Hero ---------------------------------------------------------------- */ .hero-overlay { background: linear-gradient(100deg, rgb(0 39 68 / .92) 0%, rgb(0 39 68 / .72) 45%, rgb(0 39 68 / .28) 100%), linear-gradient(to top, rgb(0 39 68 / .75) 0%, transparent 45%); } /* --- Gạch chân trang trí cho tiêu đề mục ---------------------------------- */ .eyebrow::before { content: ''; display: inline-block; width: 1.75rem; height: 2px; margin-right: .625rem; vertical-align: middle; background: currentColor; border-radius: 999px; } /* --- Reveal khi cuộn ------------------------------------------------------ Progressive enhancement: chỉ ẩn khi có class .js-anim (do main.js thêm). Không có JS / IntersectionObserver không chạy -> nội dung vẫn hiển thị bình thường. */ .reveal { transition: opacity .6s ease, transform .6s ease; } html.js-anim .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); } /* --- FAQ (details/summary) ------------------------------------------------ */ .faq summary { list-style: none; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq details[open] .faq__icon { transform: rotate(45deg); } .faq__icon { transition: transform .2s ease; } /* --- Ẩn spinner input number --------------------------------------------- */ input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --- Honeypot chống bot: ẩn khỏi mắt người dùng nhưng bot vẫn thấy trong DOM --- */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* --- Tôn trọng prefers-reduced-motion ------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-anim .reveal:not(.is-visible) { opacity: 1; transform: none; } .reveal { transition: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }