/* ========================================================================== chat.css — Widget chatbot báo giá tự động (NT.Chat) -------------------------------------------------------------------------- Widget do js/chat.js tự dựng DOM. File này CHỈ lo phần trình bày. Thứ tự xếp lớp (quan trọng): - Nút chat là hành động chính -> nằm ở góc dưới cùng bên phải. - Cụm nút liên hệ (.nt-floating) được đẩy LÊN TRÊN nút chat thông qua class `nt-has-chat` do chat.js gắn vào . - Trên mobile, cụm .nt-floating bị ẩn và thay bằng .nt-mobile-bar, nên nút chat phải nằm CAO HƠN thanh bar (58px). Nếu mở bằng file:// thì chat.js không dựng widget -> file này vô hại. ========================================================================== */ /* -------------------------------------------------------------------------- 1. KHUNG NGOÀI -------------------------------------------------------------------------- */ .nt-chat { position: fixed; right: 1.15rem; bottom: 1.5rem; z-index: var(--nt-z-chat); display: flex; /* column-reverse: trong DOM FAB đứng trước panel, nhưng ta muốn panel nằm TRÊN FAB -> đảo chiều trục chính. */ flex-direction: column-reverse; align-items: flex-end; gap: 0.75rem; pointer-events: none; /* chỉ con của nó nhận chuột */ } .nt-chat > * { pointer-events: auto; } /* Đẩy cụm nút liên hệ lên, nhường chỗ cho nút chat */ body.nt-has-chat .nt-floating { bottom: calc(1.5rem + 56px + 0.75rem); } /* -------------------------------------------------------------------------- 2. NÚT CHAT (FAB) -------------------------------------------------------------------------- */ .nt-chat__fab { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; height: 56px; padding: 0 1.25rem 0 1.1rem; border: 0; border-radius: var(--nt-radius-pill); background: var(--nt-gradient-brand); color: #fff; font-family: inherit; font-size: var(--nt-fs-sm); font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--nt-shadow-lg), var(--nt-shadow-inset); transition: transform var(--nt-dur-base) var(--nt-ease-spring), box-shadow var(--nt-dur-base) var(--nt-ease); } .nt-chat__fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--nt-shadow-xl), var(--nt-shadow-inset); } .nt-chat__fab:active { transform: translateY(0) scale(0.98); } .nt-chat__fab:focus-visible { outline: 3px solid var(--nt-red-500); outline-offset: 3px; } .nt-chat__fab .nt-icon { width: 24px; height: 24px; flex: none; } /* Vòng sáng lan toả — thu hút mắt nhưng không chói */ .nt-chat__fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--nt-gradient-brand); opacity: 0.55; z-index: -1; animation: ntChatPulse 2.6s var(--nt-ease-out) infinite; } @keyframes ntChatPulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.28); opacity: 0; } 100% { transform: scale(1.28); opacity: 0; } } /* Chấm đỏ báo "đang có trợ lý trực" */ .nt-chat__fab-dot { position: absolute; top: 9px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--nt-red-500); box-shadow: 0 0 0 2px var(--nt-navy-800); } .nt-chat__fab-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nt-red-500); animation: ntChatBlink 1.8s ease-in-out infinite; } @keyframes ntChatBlink { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.9); opacity: 0; } } /* Khi panel mở, nút chat thu về icon và xoay nhẹ */ .nt-chat.is-open .nt-chat__fab { padding: 0; width: 56px; justify-content: center; } .nt-chat.is-open .nt-chat__fab-text, .nt-chat.is-open .nt-chat__fab-dot { display: none; } .nt-chat.is-open .nt-chat__fab::before { animation: none; opacity: 0; } /* -------------------------------------------------------------------------- 3. PANEL -------------------------------------------------------------------------- */ .nt-chat__panel { display: flex; flex-direction: column; width: min(378px, calc(100vw - 2.3rem)); height: min(600px, calc(100vh - 9.5rem)); height: min(600px, calc(100dvh - 9.5rem)); border-radius: var(--nt-radius-xl); background: var(--nt-bg); border: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-xl); overflow: hidden; transform-origin: bottom right; } /* [hidden] của trình duyệt yếu hơn class -> phải chặn tường minh */ .nt-chat__panel[hidden] { display: none; } .nt-chat.is-open .nt-chat__panel { animation: ntChatIn 0.36s var(--nt-ease-spring) both; } @keyframes ntChatIn { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- 3a. Đầu panel ---------- */ .nt-chat__head { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem; background: var(--nt-gradient-hero); color: #fff; overflow: hidden; } /* Lưới toạ độ mờ + quầng sáng đỏ: chiều sâu cho phần đầu */ .nt-chat__head::before { content: ""; position: absolute; inset: 0; background-image: var(--nt-grid-lines), var(--nt-glow-red); background-size: 22px 22px, 100% 100%; opacity: 0.9; pointer-events: none; } .nt-chat__head > * { position: relative; z-index: 1; } .nt-chat__avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: var(--nt-shadow-inset); } .nt-chat__avatar .nt-icon { width: 22px; height: 22px; } .nt-chat__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .nt-chat__who strong { font-size: var(--nt-fs-md); font-weight: 700; } .nt-chat__who em { font-style: normal; font-size: var(--nt-fs-xs); color: rgba(255, 255, 255, 0.72); } .nt-chat__close { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background var(--nt-transition), transform var(--nt-transition); } .nt-chat__close:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); } .nt-chat__close .nt-icon { width: 17px; height: 17px; } /* ---------- 3b. Vùng hội thoại ---------- */ .nt-chat__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.9rem; background: radial-gradient(120% 60% at 100% 0%, rgba(0, 32, 96, 0.05), transparent 60%), var(--nt-bg-soft); scrollbar-width: thin; } .nt-chat__body::-webkit-scrollbar { width: 7px; } .nt-chat__body::-webkit-scrollbar-thumb { background: var(--nt-line); border-radius: 99px; } .nt-chat__msg { display: flex; animation: ntChatMsg 0.34s var(--nt-ease-out) both; } @keyframes ntChatMsg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .nt-chat__msg--bot { justify-content: flex-start; } .nt-chat__msg--user { justify-content: flex-end; } .nt-chat__bubble { max-width: 84%; padding: 0.6rem 0.8rem; border-radius: var(--nt-radius-lg); font-size: var(--nt-fs-base); line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; } .nt-chat__msg--bot .nt-chat__bubble { background: var(--nt-bg); color: var(--nt-ink-700); border: 1px solid var(--nt-line-soft); border-bottom-left-radius: 5px; box-shadow: var(--nt-shadow-sm); } .nt-chat__msg--user .nt-chat__bubble { background: var(--nt-gradient-brand); color: #fff; border-bottom-right-radius: 5px; box-shadow: var(--nt-shadow); } /* Ba chấm "đang nhập" */ .nt-chat__typing .nt-chat__bubble { display: inline-flex; align-items: center; gap: 5px; padding: 0.75rem 0.85rem; } .nt-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--nt-ink-400); animation: ntChatDots 1.15s ease-in-out infinite; } .nt-chat__typing i:nth-child(2) { animation-delay: 0.16s; } .nt-chat__typing i:nth-child(3) { animation-delay: 0.32s; } @keyframes ntChatDots { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } } /* -------------------------------------------------------------------------- 4. THẺ BÁO GIÁ -------------------------------------------------------------------------- */ .nt-chat__msg--bot .nt-chat__quote { width: 100%; max-width: 100%; } .nt-chat__quote { border-radius: var(--nt-radius-lg); background: var(--nt-bg); border: 1px solid var(--nt-line); box-shadow: var(--nt-shadow); overflow: hidden; } .nt-chat__quote-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.8rem; background: var(--nt-sky-50); border-bottom: 1px solid var(--nt-line); color: var(--nt-navy-800); font-size: var(--nt-fs-sm); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .nt-chat__quote-head .nt-icon { width: 17px; height: 17px; color: var(--nt-red-600); } .nt-chat__quote dl { margin: 0; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.42rem; } .nt-chat__quote dl > div { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--nt-fs-sm); } .nt-chat__quote dt { order: 0; flex: none; color: var(--nt-ink-500); white-space: nowrap; } /* Đường chấm nối nhãn với giá trị — kiểu bảng báo giá thật */ .nt-chat__quote dl > div::before { content: ""; order: 1; flex: 1 1 auto; min-width: 12px; align-self: center; border-bottom: 1px dotted var(--nt-line); } .nt-chat__quote dd { order: 2; flex: none; margin: 0; font-weight: 700; color: var(--nt-ink-900); text-align: right; white-space: nowrap; } .nt-chat__quote-total { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.8rem; background: var(--nt-gradient-hero); color: #fff; } .nt-chat__quote-total span { font-size: var(--nt-fs-xs); color: rgba(255, 255, 255, 0.78); } .nt-chat__quote-total strong { font-size: var(--nt-fs-xl); font-weight: 800; color: #fff; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(208, 0, 16, 0.5); } .nt-chat__quote-eta { padding: 0.5rem 0.8rem 0; font-size: var(--nt-fs-xs); color: var(--nt-ink-500); } .nt-chat__quote-eta strong { color: var(--nt-ink-900); } .nt-chat__quote-note { margin: 0.55rem 0.8rem 0; padding: 0.45rem 0.6rem; border-radius: var(--nt-radius-sm); background: var(--nt-red-50); border-left: 3px solid var(--nt-red-600); font-size: var(--nt-fs-xs); line-height: 1.5; color: var(--nt-ink-700); } .nt-chat__quote-cta { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.7rem 0.8rem 0.85rem; } .nt-chat__quote-cta .nt-btn { flex: 1 1 auto; justify-content: center; padding: 0.55rem 0.85rem; font-size: var(--nt-fs-sm); text-align: center; border-radius: var(--nt-radius-pill); } /* -------------------------------------------------------------------------- 5. GỢI Ý NHANH -------------------------------------------------------------------------- */ .nt-chat__quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.9rem; } .nt-chat__quick:not(:empty) { padding-bottom: 0.7rem; } .nt-chat__quick button { padding: 0.38rem 0.7rem; border: 1px solid var(--nt-navy-600); border-radius: var(--nt-radius-pill); background: var(--nt-sky-50); color: var(--nt-navy-800); font-family: inherit; font-size: var(--nt-fs-xs); font-weight: 600; cursor: pointer; transition: background var(--nt-transition), color var(--nt-transition), transform var(--nt-dur-fast) var(--nt-ease-spring); } .nt-chat__quick button:hover { background: var(--nt-navy-800); border-color: var(--nt-navy-800); color: #fff; transform: translateY(-1px); } .nt-chat__quick button:focus-visible { outline: 2px solid var(--nt-red-500); outline-offset: 2px; } /* -------------------------------------------------------------------------- 6. Ô NHẬP + CHÂN PANEL -------------------------------------------------------------------------- */ .nt-chat__form { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border-top: 1px solid var(--nt-line-soft); background: var(--nt-bg); } .nt-chat__input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 0.9rem; border: 1px solid var(--nt-line); border-radius: var(--nt-radius-pill); background: var(--nt-bg-soft); font-family: inherit; font-size: var(--nt-fs-base); color: var(--nt-ink-900); transition: border-color var(--nt-transition), box-shadow var(--nt-transition), background var(--nt-transition); } .nt-chat__input::placeholder { color: var(--nt-ink-400); } .nt-chat__input:focus { outline: none; background: var(--nt-bg); border-color: var(--nt-navy-600); box-shadow: 0 0 0 3px rgba(1, 48, 127, 0.14); } .nt-chat__send { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--nt-gradient-accent); color: #fff; cursor: pointer; box-shadow: var(--nt-shadow-accent); transition: transform var(--nt-dur-fast) var(--nt-ease-spring), filter var(--nt-transition); } .nt-chat__send:hover { transform: scale(1.07); filter: brightness(1.06); } .nt-chat__send:active { transform: scale(0.94); } .nt-chat__send .nt-icon { width: 19px; height: 19px; } .nt-chat__foot { padding: 0 0.9rem 0.75rem; font-size: var(--nt-fs-xs); color: var(--nt-ink-500); text-align: center; } .nt-chat__foot a { font-weight: 700; color: var(--nt-red-600); } .nt-chat__foot a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 7. RESPONSIVE -------------------------------------------------------------------------- */ /* Tablet & mobile: ẩn chữ trên nút chat, thu về hình tròn */ @media (max-width: 768px) { .nt-chat__fab { width: 56px; padding: 0; justify-content: center; } .nt-chat__fab-text { display: none; } .nt-chat__fab-dot { top: 7px; right: 9px; } /* Chừa chỗ cho .nt-mobile-bar (cao 58px) */ .nt-chat { right: 0.9rem; bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 0.85rem); } .nt-chat__panel { width: min(378px, calc(100vw - 1.8rem)); height: min(560px, calc(100dvh - 11rem)); } } /* Điện thoại nhỏ: panel gần như toàn màn hình */ @media (max-width: 420px) { .nt-chat { right: 0.6rem; left: 0.6rem; align-items: stretch; } .nt-chat__fab { align-self: flex-end; } .nt-chat__panel { width: 100%; height: min(520px, calc(100dvh - 10.5rem)); border-radius: var(--nt-radius-lg); } .nt-chat__bubble { max-width: 90%; } } /* -------------------------------------------------------------------------- 8. GIẢM CHUYỂN ĐỘNG -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nt-chat__fab, .nt-chat__send, .nt-chat__close, .nt-chat__quick button { transition: none; } .nt-chat__fab::before, .nt-chat__fab-dot::after, .nt-chat__typing i { animation: none; } .nt-chat.is-open .nt-chat__panel, .nt-chat__msg { animation: none; } } /* -------------------------------------------------------------------------- 9. KHI IN -------------------------------------------------------------------------- */ @media print { .nt-chat { display: none !important; } }