/* ============================================================ NIGHT-DRIVE HUD — hệ giao diện thay thế, chỉ có hiệu lực khi . Không đụng gì tới CSS gốc. ============================================================ */ html[data-ui-style="hud"]:not([data-theme="light"]) { --ck-bg: #0a0e16; --ck-bg2: #121a2b; --ck-bg3: #17233a; --ck-accent: #00ff9d; --ck-accent-2: #4da3ff; --ck-accent-dark: #00e08a; --ck-primary: #4da3ff; --ck-warn: #ffb020; } /* Nền: nhựa đường ngả xanh + lưới toạ độ mảnh thay cho blob gradient mặc định */ html[data-ui-style="hud"]:not([data-theme="light"]) body::before { background: radial-gradient(1100px 500px at 15% -10%, rgba(0,255,157,.05), transparent 60%), radial-gradient(900px 600px at 92% 6%, rgba(77,163,255,.07), transparent 60%), linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) !important; background-size: auto, auto, 44px 44px, 44px 44px !important; } /* Số liệu = font đồng hồ số. Áp cho mọi chỉ số trong trang. */ html[data-ui-style="hud"]:not([data-theme="light"]) .h-stats b, html[data-ui-style="hud"]:not([data-theme="light"]) .h-price, html[data-ui-style="hud"]:not([data-theme="light"]) .h-dur, html[data-ui-style="hud"]:not([data-theme="light"]) .h-orig, html[data-ui-style="hud"]:not([data-theme="light"]) .cp-value, html[data-ui-style="hud"]:not([data-theme="light"]) .ck-price { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace !important; font-variant-numeric: tabular-nums; letter-spacing: -0.02em !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .h-stats b { background: none !important; -webkit-text-fill-color: #00ff9d !important; color: #00ff9d !important; } /* Eyebrow pill — đổi giọng "TỰ ĐỘNG 24/7" thành nhãn tín hiệu, chữ mono (chấm nhấp nháy giữ nguyên hiệu ứng gốc) */ html[data-ui-style="hud"]:not([data-theme="light"]) .h-pill { font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; border-color: rgba(0,255,157,.3); background: rgba(0,255,157,.05); } /* Nút bấm — bo góc nhỏ hơn, viền rõ hơn, easing nhanh dứt khoát (không nảy) */ html[data-ui-style="hud"]:not([data-theme="light"]) .h-btn, html[data-ui-style="hud"]:not([data-theme="light"]) .btn-primary, html[data-ui-style="hud"]:not([data-theme="light"]) .btn-outline { border-radius: 10px !important; transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s, border-color .15s !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .h-btn-out, html[data-ui-style="hud"]:not([data-theme="light"]) .btn-outline { border-color: rgba(77,163,255,.35) !important; color: #cfe4ff !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .h-btn-out:hover, html[data-ui-style="hud"]:not([data-theme="light"]) .btn-outline:hover { border-color: rgba(77,163,255,.6) !important; color: #4da3ff !important; background: rgba(77,163,255,.06) !important; } /* Card sản phẩm/gói — panel bảng điều khiển: viền cạnh trên đổi màu theo loại */ html[data-ui-style="hud"]:not([data-theme="light"]) .h-card { background: linear-gradient(180deg, #121a2b 0%, #0d1420 100%) !important; border-color: rgba(148,163,184,.08) !important; border-top: 2px solid rgba(0,255,157,.55) !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .h-card[data-type="key"] { border-top-color: rgba(255,176,32,.6) !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .h-avail { font-family: 'JetBrains Mono', monospace; } /* Nav / header — viền dưới mảnh phát sáng nhẹ khi cuộn, thay cho bóng đổ chung chung */ html[data-ui-style="hud"]:not([data-theme="light"]) .ck-header { border-bottom: 1px solid rgba(0,255,157,.12) !important; } /* Dải phân cách section — đổi 2 màu gradient cho khớp bảng màu mới */ html[data-ui-style="hud"]:not([data-theme="light"]) .hstep-fill, html[data-ui-style="hud"]:not([data-theme="light"]) .hrev-title::before { background: linear-gradient(90deg, #00ff9d, #4da3ff) !important; } /* .hstep-big-title em dùng background-clip:text — chỉ đổi background-image, không dùng shorthand "background" vì nó sẽ reset background-clip về border-box và làm chữ biến mất. */ html[data-ui-style="hud"]:not([data-theme="light"]) .hstep-big-title em { background-image: linear-gradient(90deg, #00ff9d, #4da3ff) !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .hstep-fill { box-shadow: 0 0 8px rgba(0,255,157,.7), 0 0 16px rgba(77,163,255,.3) !important; } /* Testimonial — dấu "đã xác thực" kiểu check-in định vị thay vì chỉ có tên */ html[data-ui-style="hud"]:not([data-theme="light"]) .hrev-loc { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; } html[data-ui-style="hud"]:not([data-theme="light"]) .hrev-loc::before { content: '✓ '; color: #00ff9d; } html[data-ui-style="hud"]:not([data-theme="light"]) .hrev-card::before { background: linear-gradient(90deg, transparent, rgba(77,163,255,.6), transparent) !important; } /* Scrollbar — tông asphalt/blue thay vì tông xanh lá mặc định */ html[data-ui-style="hud"]:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: rgba(77,163,255,.4) !important; } /* Thanh tín hiệu vệ tinh (GNSS) cạnh pill hero */ html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8b96a8; letter-spacing: .02em; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i { width: 3px; background: #00ff9d; border-radius: 1px; display: block; animation: hudGnssBar 1.6s ease-in-out infinite; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i:nth-child(1) { height: 30%; animation-delay: 0s; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i:nth-child(2) { height: 60%; animation-delay: .2s; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i:nth-child(3) { height: 85%; animation-delay: .4s; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i:nth-child(4) { height: 100%; animation-delay: .6s; } @keyframes hudGnssBar { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } /* Route line — nền vạch đứt kiểu tuyến đường, điểm định vị phát sáng chạy ở đầu vạch tiến độ */ html[data-ui-style="hud"]:not([data-theme="light"]) .hstep-track { background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px) !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .hstep-fill::after { content: ''; position: absolute; top: 50%; right: -3px; width: 8px; height: 8px; background: #00ff9d; border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 6px 2px rgba(0,255,157,.7); } /* Tôn trọng người dùng tắt hiệu ứng chuyển động của hệ điều hành */ @media (prefers-reduced-motion: reduce) { html[data-ui-style="hud"]:not([data-theme="light"]) .h-pill .dot { animation: none !important; } html[data-ui-style="hud"]:not([data-theme="light"]) #vmGpsLock { display: none !important; } html[data-ui-style="hud"]:not([data-theme="light"]) .vm-gnss-bars i { animation: none !important; opacity: .8; } }