/* Shared enhancements for Taxi Điện Long Xuyên (Tailwind CDN pages). Centralizes accessibility, motion-safety and focus styles so every page stays consistent. Loaded after Tailwind in every HTML . */ /* ===== Slideshow ảnh fade (Hero + "Vì sao chọn") ===== */ /* Các ảnh chồng lên nhau, chuyển bằng opacity. Ảnh đầu giữ chỗ (position relative), các ảnh sau xếp tuyệt đối phía trên. Class .is-active điều khiển bằng JS. */ .img-slideshow { position: relative; overflow: hidden; } .img-slideshow .slide { transition: opacity 1s ease-in-out; } .img-slideshow .slide:not(:first-child) { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .img-slideshow .slide:first-child { opacity: 1; } .img-slideshow .slide.is-active { opacity: 1; z-index: 1; } .img-slideshow .slide:not(.is-active) { opacity: 0; } /* Chấm điều hướng */ .slideshow-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .slideshow-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: background .25s, width .25s; } .slideshow-dots button.is-active { background: #fff; width: 22px; border-radius: 6px; } /* Tôn trọng người tắt chuyển động: chỉ hiện ảnh đầu, không fade/auto. */ @media (prefers-reduced-motion: reduce) { .img-slideshow .slide { transition: none; } } /* Visually-hidden but screen-reader accessible (skip links, labels). */ .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-to-content link appears only when focused via keyboard. */ .skip-link { position: fixed; top: -64px; left: 16px; z-index: 1000; padding: 10px 18px; border-radius: 0 0 12px 12px; background: #00652e; color: #fff; font-weight: 700; transition: top 0.18s ease; } .skip-link:focus { top: 0; outline: 3px solid #fcab28; outline-offset: 2px; } /* Consistent, visible keyboard focus across links, buttons and form fields. Mouse users keep the clean look via :focus-visible. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #00652e; outline-offset: 2px; border-radius: 4px; } /* Reduced-motion: disable hover lifts, scroll reveals and image zooms for users who request less motion (vestibular safety). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .card-hover:hover { transform: none !important; } } /* Prevent layout shift: media without explicit ratio still reserves space. */ img { max-width: 100%; height: auto; } /* Logo thương hiệu trong header/footer: ép chiều cao cố định (thắng rule img chung ở trên vì khai báo sau + dùng !important), giữ tỉ lệ tự động theo width. */ .brand-logo { height: 34px !important; width: auto !important; max-width: none; flex: none; } @media (max-width: 640px) { .brand-logo { height: 30px !important; } } .brand-logo--sm { height: 32px !important; width: auto !important; max-width: none; flex: none; } /* Chữ thương hiệu cạnh logo: KHÔNG xuống dòng + cỡ chữ vừa phải (chống vỡ header). */ .brand-logo + span, .brand-logo + span > span { white-space: nowrap; } .brand-logo + span { margin-right: 4px; } /* Dòng tên chính: nhỏ gọn (tên thương hiệu dài). */ .brand-logo + span > span:first-child { font-size: 13px !important; line-height: 1.1 !important; } /* Ẩn tagline "GreenTaxi Tourism" Ở HEADER (tên thương hiệu đã dài). Vẫn giữ trong HTML cho SEO/schema; footer (.brand-logo--sm) không bị ảnh hưởng. */ .brand-logo + span > span:last-child { display: none !important; } /* Căn dòng tên chính giữa theo chiều cao logo khi đứng 1 mình. */ .brand-logo + span { justify-content: center; } @media (min-width: 768px) { .brand-logo + span > span:first-child { font-size: 15px !important; } } /* Trên màn rất nhỏ, ẩn cụm chữ để chỉ còn logo cho gọn (logo đã có nhận diện). */ @media (max-width: 380px) { .brand-logo + span { display: none; } } /* Ensure tap targets in floating bars never collide on very small screens. */ @media (max-width: 360px) { .floating-mobile-bar a { font-size: 13px; } } /* RESPONSIVE FIX: thanh CTA cố định ở đáy (mobile) không được che nội dung cuối. Chừa khoảng trống dưới bằng đúng chiều cao thanh, chỉ trên mobile. */ @media (max-width: 767px) { body { padding-bottom: 76px; } } /* RESPONSIVE FIX: bảng dài tự cuộn ngang trên màn nhỏ thay vì tràn vỡ layout. */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 640px) { table { display: table; overflow-x: visible; } } /* Giữ ô không bị bóp quá hẹp gây xuống dòng xấu trên mobile. */ @media (max-width: 639px) { th, td { white-space: nowrap; } } /* ============================================================ VISUAL POLISH LAYER (light theme) Centralized so all 10 pages stay consistent. Brand tokens: --brand #00652e, --brand-strong #00813d, --accent #fcab28. ============================================================ */ :root { --brand: #00652e; --brand-strong: #00813d; --accent: #fcab28; --ring: rgba(0, 101, 46, 0.18); --field-border: #becabc; } /* --- Form fields: clear resting border + soft focus ring --- Tailwind's forms plugin styles inputs; we add a cohesive focus ring and hover affordance that match the brand. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-color: var(--field-border); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--brand-strong); } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); outline: none; } /* Invalid phone / required field feedback (set via JS aria-invalid). */ [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.15) !important; } ::placeholder { color: #8a958a; opacity: 1; } /* --- Buttons & links: unified press + pointer feedback --- Anything that navigates or submits should feel tappable. */ a[href], button, [role="button"], summary { cursor: pointer; } a[href^="tel:"], a[href^="mailto:"], a[href^="sms:"] { cursor: pointer; } /* Subtle, on-brand press feedback for primary/secondary buttons that already animate scale via Tailwind's active: utilities — adds a gentle settle so taps feel responsive (<=120ms). */ .shadow-button { transition: box-shadow 0.2s ease, transform 0.12s ease; } .shadow-button:hover { box-shadow: 0 6px 20px 0 rgba(0, 101, 46, 0.32); } /* --- Cards: consistent elevation scale + hover intent --- Tour/news cards become visibly interactive on hover. */ .card-hover { cursor: default; } .card-hover.group, article.group { cursor: pointer; } /* Image zoom inside cards stays clipped & smooth. */ .group img { will-change: transform; } /* --- Sticky header: refine shadow on scroll feel --- */ header.sticky { transition: box-shadow 0.2s ease, background-color 0.2s ease; } /* --- Tables: zebra + comfortable rhythm for readability --- */ table tbody tr { transition: background-color 0.15s ease; } table thead th { font-weight: 700; } /* --- Section rhythm: keep vertical scroll anchored under sticky header so in-page #booking / #tours jumps don't hide behind the navbar. --- */ :target { scroll-margin-top: 96px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* --- Selection color on-brand --- */ ::selection { background: var(--accent); color: #3a2a00; } /* --- Floating action buttons: smoother, non-janky hover --- */ .shadow-card { transition: box-shadow 0.2s ease, transform 0.18s ease; } /* ============================================================ HIỆU ỨNG CTA — phủ TỰ ĐỘNG toàn site theo class nền có sẵn, phân vai: • Nút Gọi/Hotline (tel:) -> GLOW vàng nhịp nhanh, thu hút hành động gọi. • Nút chính (.shadow-button = nền primary) -> SHIMMER quét sáng + phóng to nhẹ khi hover. Không cần gắn class tay từng nút. Tự tắt khi prefers-reduced-motion. ============================================================ */ /* --- GLOW: áp cho mọi nút gọi điện (link tel:) + class .cta-glow thủ công --- */ @keyframes cta-glow-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0,101,46,.22); } 50% { box-shadow: 0 0 20px 3px rgba(252,171,40,.65), 0 0 0 4px rgba(252,171,40,.22); } } .cta-glow, a[href^="tel:"].bg-secondary-container, a[href^="tel:"].shadow-card, .cta-banner a[href^="tel:"] { animation: cta-glow-pulse 1.5s ease-in-out infinite; } .cta-glow:hover, a[href^="tel:"].bg-secondary-container:hover, a[href^="tel:"].shadow-card:hover, .cta-banner a[href^="tel:"]:hover { animation-play-state: paused; } /* --- SHIMMER: áp cho mọi nút chính (.shadow-button + nút header ĐẶT XE) + .cta-shimmer --- */ .cta-shimmer, .shadow-button, a.bg-primary.hover\:shadow-button { position: relative; overflow: hidden; } .cta-shimmer::after, .shadow-button::after, a.bg-primary.hover\:shadow-button::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); transform: skewX(-18deg); transition: left 0.4s ease; pointer-events: none; } .cta-shimmer:hover::after, .shadow-button:hover::after, a.bg-primary.hover\:shadow-button:hover::after { left: 150%; } /* Phóng to nhẹ khi hover cho nút chính (rõ ràng nhưng không giật). */ .shadow-button { transition: box-shadow 0.2s ease, transform 0.15s ease; } .shadow-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(0,101,46,.34); } /* --- BOUNCE: nút gọi nổi (FAB) nảy nhanh hơn để nhắc gọi --- */ @keyframes cta-bounce-soft { 0%, 78%, 100% { transform: translateY(0); } 85% { transform: translateY(-6px); } 91% { transform: translateY(0); } 96% { transform: translateY(-3px); } } .cta-bounce { animation: cta-bounce-soft 3s ease-in-out infinite; } .cta-bounce:hover { animation-play-state: paused; } /* Tôn trọng người dùng yêu cầu giảm chuyển động: tắt mọi hiệu ứng CTA. */ @media (prefers-reduced-motion: reduce) { .cta-glow, .cta-bounce, a[href^="tel:"].bg-secondary-container, a[href^="tel:"].shadow-card, .cta-banner a[href^="tel:"] { animation: none !important; } .cta-shimmer::after, .shadow-button::after { display: none !important; } .shadow-button:hover { transform: none !important; } } /* --- Carousel bài viết trang chủ: ẩn thanh cuộn, giữ vuốt mượt --- */ .post-carousel { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge cũ */ scroll-padding-left: 0; } .post-carousel::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .post-carousel:focus-visible { outline: 3px solid #00652e; outline-offset: 4px; border-radius: 12px; } /* Chấm điều hướng */ .post-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: #becabc; cursor: pointer; transition: background .2s, width .2s; } .post-dot[aria-selected="true"] { background: #00652e; width: 22px; } /* --- Shared hero decorations (used on index, dich-vu, gioi-thieu) --- Centralized so secondary pages can reuse the same glass + gradient treatment without redefining per page. */ .bg-gradient-soft { background: linear-gradient(180deg, rgba(251, 249, 248, 0) 0%, rgba(240, 237, 237, 0.62) 100%); } .glass-panel { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(190, 202, 188, 0.42); backdrop-filter: blur(14px); }