/* Thành phần Aurora dùng chung. Các task sau thêm section vào cuối tệp. */

/* ===== Ghi đè Bootstrap ===== */
.btn-primary {
  --bs-btn-bg: #1d4ed8; --bs-btn-border-color: #1d4ed8;
  --bs-btn-hover-bg: #1e40af; --bs-btn-hover-border-color: #1e40af;
  --bs-btn-active-bg: #1e3a8a; --bs-btn-active-border-color: #1e3a8a;
  --bs-btn-disabled-bg: #1d4ed8; --bs-btn-disabled-border-color: #1d4ed8;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--lt-ocean); --bs-btn-border-color: var(--lt-ocean);
  --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
}
.text-primary { color: var(--lt-ocean) !important; }
.bg-primary { background: var(--lt-grad-strong) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--lt-grad-strong); }
.pagination { --bs-pagination-active-bg: #1d4ed8; --bs-pagination-active-border-color: #1d4ed8; --bs-pagination-color: var(--lt-ocean); }
.card {
  --bs-card-border-color: var(--lt-line);
  --bs-card-border-radius: var(--lt-r-md);
  --bs-card-inner-border-radius: calc(var(--lt-r-md) - 1px);
  border: 1px solid var(--lt-line);
  box-shadow: var(--lt-shadow);
}
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .25rem rgba(14, 165, 233, .2); }
.dropdown-menu { --bs-dropdown-border-color: var(--lt-line); --bs-dropdown-border-radius: 14px; box-shadow: var(--lt-shadow-blue); }

/* ===== Dark mode cho class Bootstrap cũ còn dùng trong view ===== */
[data-bs-theme="dark"] .bg-white { background-color: #111a2e !important; }
[data-bs-theme="dark"] .bg-light { background-color: #16213a !important; }
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] [style*="color: #2d3748"] { color: var(--lt-ink) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--lt-ink-2) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-light,
[data-bs-theme="dark"] .border-bottom { border-color: var(--lt-line) !important; }
[data-bs-theme="dark"] .card { background-color: #111a2e; }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 1030; padding: 12px 0 8px; view-transition-name: site-header; }
.lt-nav {
  display: flex; align-items: center; gap: .25rem;
  padding: .45rem .6rem .45rem 1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--lt-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--lt-bg) 90%, transparent);
  box-shadow: var(--lt-shadow-blue);
}
.lt-logo { display: inline-flex; align-items: center; gap: .5rem; margin-right: .75rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--lt-ocean); text-decoration: none; }
.lt-logo:hover { color: var(--lt-ocean); }
.lt-logo img { border-radius: 9px; box-shadow: 0 4px 12px rgba(29, 78, 216, .25); }
.lt-logo-word span { background: var(--lt-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lt-nav-links { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.lt-nav-link { display: block; padding: .5rem .8rem; white-space: nowrap; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--lt-ink-2); text-decoration: none; transition: background-color .2s, color .2s; }
.lt-nav-link:hover { background: var(--lt-ocean-50); color: var(--lt-ocean); }
.lt-nav-link.active { background: var(--lt-ocean-100); color: var(--lt-ocean); }
.lt-nav-spacer { flex: 1; }
.lt-icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--lt-line); background: var(--lt-bg); color: var(--lt-ink-2); text-decoration: none; }
.lt-icon-btn:hover { color: var(--lt-ocean); border-color: var(--lt-line-blue); }
.lt-badge { position: absolute; top: -4px; right: -4px; min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--lt-grad-strong); color: #fff; font: 700 .62rem/1.1rem var(--lt-font); text-align: center; }
.lt-account { display: flex; align-items: center; gap: .35rem; margin: 0 0 0 .25rem; padding: 0; list-style: none; }
.lt-avatar { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lt-grad-strong); color: #fff; font-weight: 800; text-decoration: none; }
.lt-avatar:hover { color: #fff; }
.lt-avatar { overflow: hidden; }
.lt-avatar-img { width: 100%; height: 100%; object-fit: cover; }
/* Ảnh đại diện dùng chung (_UserAvatar, JS setAvatar): ảnh thay cho vòng tròn chữ cái, giữ nguyên kích thước. */
.lt-avatar-photo { object-fit: cover; padding: 0; }
.lt-avatar-fill { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lt-author-avatar { overflow: hidden; }
@supports (animation-timeline: scroll()) {
  .lt-nav { animation: lt-nav-shrink linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes lt-nav-shrink { to { padding-block: .25rem; box-shadow: 0 8px 24px rgba(30, 64, 175, .14); } }
}

/* Điện thoại hẹp: header của người đã đăng nhập (giỏ, chuông, công tắc, avatar) phải vừa một hàng. */
@media (max-width: 575.98px) {
  .lt-nav { gap: .15rem; padding-inline: .7rem .45rem; }
  .lt-logo { margin-right: .25rem; font-size: 1.05rem; }
  .lt-account { gap: .2rem; margin-left: .1rem; }
  .lt-icon-btn, .lt-avatar { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 389.98px) { .lt-logo-word { display: none; } }

/* ===== Công tắc sáng/tối (giữ cấu trúc cũ, đổi màu theo token) ===== */
.theme-switch-control { position: relative; display: inline-flex; align-items: center; min-height: 1.65rem; }
.theme-switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.theme-switch-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 3.8rem;
  height: 1.65rem;
  padding: 0 .35rem; color: var(--lt-ocean); background-color: var(--lt-ocean-50);
  border: 1px solid #93c5fd; border-radius: 999px; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.theme-switch-icon { position: relative; z-index: 1; font-size: .65rem; opacity: .45; transition: color .2s ease, opacity .2s ease; }
.theme-switch-icon.is-active { opacity: 1; }
.theme-switch-thumb { position: absolute; top: .14rem; right: .14rem; width: 1.25rem; height: 1.25rem; background-color: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.theme-switch-input:checked + .theme-switch-track { color: #fff; background: var(--lt-grad-strong); border-color: transparent; }
.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(-2.27rem); }
.theme-switch-input:focus-visible + .theme-switch-track { outline: 0; box-shadow: 0 0 0 .25rem rgba(14, 165, 233, .3); }

/* ===== Nút, chip ===== */
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; white-space: nowrap; border: 0; border-radius: 14px; font: 700 .9rem var(--lt-font); text-decoration: none; cursor: pointer; transition: transform .15s var(--lt-ease), box-shadow .2s, background-color .2s; }
.lt-btn:active { transform: scale(.97); }
.lt-btn-grad { position: relative; overflow: hidden; background: var(--lt-grad-strong); color: #fff; box-shadow: 0 8px 22px rgba(14, 165, 233, .3); }
.lt-btn-grad:hover { color: #fff; }
.lt-btn-grad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--lt-ease); }
.lt-btn-grad:hover::after { transform: translateX(120%); }
.lt-btn-soft { background: var(--lt-ocean-50); color: var(--lt-ocean); }
.lt-btn-soft:hover { background: var(--lt-ocean-100); color: var(--lt-ocean); }
.lt-fav-btn.is-favorite, .lt-fav-btn.is-favorite:hover { color: var(--lt-ocean); }
/* Bỏ thích ở trang yêu thích: thẻ mờ dần, thu nhỏ rồi biến mất (product-favorite.js). */
.lt-unfavorite-out { animation: lt-unfavorite-out .35s var(--lt-ease) forwards; pointer-events: none; }
@keyframes lt-unfavorite-out { to { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .lt-unfavorite-out { animation-duration: 1ms; } }
.lt-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--lt-line-blue); background: color-mix(in srgb, var(--lt-bg) 85%, transparent); color: var(--lt-ocean); font: 600 .82rem var(--lt-font); text-decoration: none; cursor: pointer; transition: all .2s; }
.lt-chip:hover, .lt-chip.is-active { background: var(--lt-grad-strong); color: #fff; border-color: transparent; }

/* ===== Vòng điểm AI ===== */
@property --lt-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.lt-ring { --v: 0; --lt-p: 0; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: conic-gradient(var(--lt-sky) calc(var(--lt-p) * 1%), var(--lt-line) 0); animation: lt-ring-fill 1.2s var(--lt-ease) .15s forwards; }
.lt-ring i { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--lt-bg); color: var(--lt-ink); font: 700 .8rem var(--lt-mono); font-style: normal; }
.lt-ring-lg { width: 4.75rem; height: 4.75rem; }
.lt-ring-lg i { width: 3.9rem; height: 3.9rem; font-size: 1.25rem; }
@keyframes lt-ring-fill { to { --lt-p: var(--v); } }

/* ===== Dialog, skeleton ===== */
.lt-dialog { max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--lt-ink); }
.lt-dialog::backdrop { background: rgba(15, 23, 42, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lt-skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--lt-line) 25%, color-mix(in srgb, var(--lt-line) 40%, var(--lt-bg)) 50%, var(--lt-line) 75%); background-size: 200% 100%; animation: lt-shimmer 1.2s linear infinite; }
@keyframes lt-shimmer { to { background-position: -200% 0; } }
@keyframes lt-blink { 50% { opacity: .25; } }

/* ===== Footer ===== */
.lt-footer { margin-top: 4rem; padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--lt-line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lt-ocean) 7%, var(--lt-bg-soft))); color: var(--lt-ink-2); font-size: .92rem; }
.lt-footer h6 { margin-bottom: .75rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-ink-3); }
.lt-footer ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lt-footer a { color: var(--lt-ink-2); text-decoration: none; }
.lt-footer a:hover { color: var(--lt-ocean); }

/* ===== Điện thoại: thanh tab dưới ===== */
.lt-tabbar { display: none; }
@media (max-width: 991.98px) {
  .lt-nav-links, .lt-hide-mobile { display: none !important; }
  .lt-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1030;
    display: flex; justify-content: space-around; align-items: center; padding: .45rem .25rem; border-radius: 22px;
    background: color-mix(in srgb, var(--lt-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--lt-line); box-shadow: var(--lt-shadow-blue);
  }
  .lt-tab { display: grid; justify-items: center; gap: 2px; padding: .2rem .4rem; border: 0; background: none; color: var(--lt-ink-3); font-size: .68rem; font-weight: 600; text-decoration: none; }
  .lt-tab i { font-size: 1.05rem; }
  .lt-tab.active { color: var(--lt-ocean); }
  .lt-tab-center { display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: -1.4rem; border: 0; border-radius: 16px; background: var(--lt-grad-strong); color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgba(14, 165, 233, .5); }
  .lt-tab-center i { font-size: 1.15rem; }
  .lt-tab-center.active { outline: 3px solid color-mix(in srgb, var(--lt-ocean) 35%, transparent); outline-offset: 2px; }
  body { padding-bottom: 5.5rem; }
}

/* ===== Thanh tiến trình chuyển trang (chỉ thấy khi trang không được tải sẵn) ===== */
.lt-progress { position: fixed; top: 0; left: 0; z-index: 2000; width: 0; height: 3px; background: var(--lt-grad); box-shadow: 0 0 12px var(--lt-sky); pointer-events: none; }
.lt-progress.is-active { width: 85%; transition: width 8s cubic-bezier(.1, .7, .1, 1); }

/* ===== Toast ===== */
/* Popup kết quả thành công: thanh thời gian chạy lùi 3 giây (Views/Shared/_ResultPopup). */
/* Popup thành công: vòng tròn quanh dấu ✓ vơi dần trong 3 giây rồi tự đóng. */
.lt-result-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; }
.lt-result-icon > * { grid-area: 1 / 1; }
.lt-result-ring { width: 64px; height: 64px; transform: rotate(-90deg); fill: none; stroke-width: 3.5; }
.lt-result-ring circle { stroke: rgba(25, 135, 84, .15); }
.lt-result-ring .lt-result-ring-run { stroke: #198754; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.lt-result-ring.is-running .lt-result-ring-run { animation: lt-result-ring 3s linear forwards; }
@keyframes lt-result-ring { to { stroke-dashoffset: 100; } }
@keyframes lt-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ===== Widget chat AI ===== */
.lt-chat-toggle { position: fixed; right: 30px; bottom: 30px; z-index: 1050; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; background: var(--lt-grad-strong); color: #fff; font-size: 1.5rem; box-shadow: 0 12px 30px rgba(14, 165, 233, .45); cursor: pointer; transition: transform .2s; }
.lt-chat-toggle:hover { transform: scale(1.08); }
.lt-chat-greet { position: absolute; top: 50%; right: calc(100% + 14px); padding: .55rem .9rem; border-radius: 14px 14px 4px 14px; background: var(--lt-bg); color: var(--lt-ink); font-size: .875rem; font-weight: 600; width: max-content; max-width: min(260px, calc(100vw - 110px)); line-height: 1.35; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); pointer-events: none; animation: lt-chat-greet 5s ease forwards; }
.lt-chat-greet.is-right { right: auto; left: calc(100% + 14px); border-radius: 14px 14px 14px 4px; }
@keyframes lt-chat-greet { 0% { opacity: 0; transform: translateY(-50%) scale(.9); } 6%, 90% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .lt-chat-greet { animation: none; transform: translateY(-50%); } }
.lt-chat { position: fixed; right: 30px; bottom: 100px; z-index: 1060; display: flex; flex-direction: column; width: min(370px, calc(100vw - 24px)); height: min(540px, calc(100vh - 140px)); overflow: hidden; border-radius: 22px; border: 1px solid var(--lt-line-blue); background: color-mix(in srgb, var(--lt-bg) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 70px rgba(15, 23, 42, .28); }
.lt-chat-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: var(--lt-grad-strong); color: #fff; }
.lt-chat-head small { opacity: .8; }
.lt-chat-avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: rgba(255, 255, 255, .2); }
.lt-chat-close { margin-left: auto; border: 0; background: none; color: #fff; font-size: 1.1rem; }
.lt-chat-back { border: 0; background: none; color: #fff; font-size: 1.1rem; }
/* Cả hai bong bóng ghim góc phải dưới: tin nhắn mua bán dưới cùng, trợ lý AI ngay trên. */
/* Khung chat (z 1060) nằm trên mọi bong bóng (z 1050) để không bị icon còn lại đè lên. */
body:has(.lt-mp-chat-toggle) #chatbot-toggle-btn { bottom: 100px; }
.lt-chat-body { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; overflow-y: auto; }
.lt-msg { max-width: 85%; padding: .6rem .8rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; box-shadow: var(--lt-shadow); }
.lt-msg-ai { align-self: flex-start; border: 1px solid var(--lt-line); border-bottom-left-radius: 4px; background: var(--lt-bg); color: var(--lt-ink); }
.lt-msg-user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--lt-grad-strong); color: #fff; }
.lt-msg-ai p { margin-bottom: .5rem; }
.lt-msg-ai p:last-child { margin-bottom: 0; }
.lt-msg-ai ul { margin-bottom: .5rem; padding-left: 1.25rem; }
.lt-chat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.lt-typing { display: flex; gap: .25rem; }
.lt-typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--lt-sky); animation: lt-blink 1s infinite; }
.lt-typing span:nth-child(2) { animation-delay: .2s; }
.lt-typing span:nth-child(3) { animation-delay: .4s; }
.lt-chat-notice { align-self: center; padding: .25rem .7rem; border-radius: 999px; background: var(--lt-ocean-50); color: var(--lt-ink-2); font-size: .75rem; }
.lt-chat-foot { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--lt-line); }
.lt-chat-foot .form-control { border-radius: 999px; }
.lt-chat-foot .lt-btn { flex: none; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; }
@media (max-width: 991.98px) {
  .lt-chat-toggle { bottom: 7.5rem; right: 16px; }
  .lt-chat { right: 12px; bottom: 7.5rem; }
  body:has(.lt-mp-chat-toggle) #chatbot-toggle-btn { bottom: calc(7.5rem + 70px); }
}
/* Panel tin nhắn mua bán dùng chung khung .lt-chat; nội dung tự cao theo #mp-chat-body */
#mp-chat-body { overflow: hidden; }

/* ===== Thanh lệnh ⌘K ===== */
.lt-palette[open] { width: min(640px, calc(100vw - 24px)); margin: 12vh auto 0; animation: lt-pop .22s var(--lt-ease); }
@keyframes lt-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.lt-palette-panel { overflow: hidden; border-radius: 22px; border: 1px solid var(--lt-line-blue); background: color-mix(in srgb, var(--lt-bg) 94%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 90px rgba(15, 23, 42, .35); }
.lt-palette-search { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink-3); }
.lt-palette-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--lt-ink); font: 500 1.05rem var(--lt-font); }
.lt-palette-search kbd { padding: .15rem .4rem; border-radius: 6px; border: 1px solid var(--lt-line); background: var(--lt-bg-soft); color: var(--lt-ink-3); font: 600 .7rem var(--lt-mono); }
.lt-palette-list { max-height: min(60vh, 460px); padding: .5rem; overflow-y: auto; }
.lt-palette-group { padding: .6rem .75rem .25rem; color: var(--lt-ink-3); font: 600 .68rem var(--lt-mono); letter-spacing: .1em; text-transform: uppercase; }
.lt-palette-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: 12px; background: none; color: var(--lt-ink); font: 500 .92rem var(--lt-font); text-align: left; text-decoration: none; cursor: pointer; }
.lt-palette-row > i { width: 1.25rem; text-align: center; color: var(--lt-ocean); }
.lt-palette-row img { flex: none; width: 44px; height: 32px; border-radius: 8px; object-fit: contain; background: var(--lt-ocean-50); }
.lt-palette-row.is-selected, .lt-palette-row:hover { background: var(--lt-ocean-50); outline: 1px solid var(--lt-line-blue); color: var(--lt-ink); }
.lt-palette-name { display: grid; min-width: 0; }
.lt-palette-name small { color: var(--lt-ink-3); font-size: .72rem; }
.lt-palette-price { margin-left: auto; color: var(--lt-ocean); font-weight: 700; white-space: nowrap; }
.lt-palette-ai { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--lt-grad-strong); color: #fff; }
.lt-palette-empty { padding: .6rem .75rem; color: var(--lt-ink-3); font-size: .88rem; }
.lt-palette-skeleton { height: 2.6rem; margin: .35rem .75rem; }
.lt-palette-foot { display: flex; gap: 1rem; padding: .6rem 1.2rem; border-top: 1px solid var(--lt-line); color: var(--lt-ink-3); font-size: .7rem; }

/* ===== Thẻ sản phẩm ===== */
.lt-pcard { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; height: 100%; padding: .75rem; border-radius: 22px; border: 1px solid var(--lt-line); background: var(--lt-bg); transition: transform .35s var(--lt-ease), box-shadow .35s; }
.lt-pcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(14, 165, 233, .14), transparent 60%); }
.lt-pcard:hover { transform: translateY(-6px); box-shadow: var(--lt-shadow-blue); }
.lt-pcard:hover::before { opacity: 1; }
.lt-pcard-media-wrap { position: relative; }
.lt-pcard-media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, var(--lt-ocean-50), color-mix(in srgb, var(--lt-sky) 18%, var(--lt-bg))); color: var(--lt-ocean); font-size: 3rem; }
.lt-pcard-media img { width: 100%; height: 100%; padding: .75rem; object-fit: contain; transition: transform .5s var(--lt-ease); }
.lt-pcard:hover .lt-pcard-media img { transform: scale(1.05); }
.lt-pcard-tag { position: absolute; left: .6rem; top: .6rem; padding: .2rem .55rem; border-radius: 999px; background: #fff; color: #dc2626; font: 800 .72rem var(--lt-font); }
.lt-pcard-compare { position: absolute; right: .6rem; top: .6rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid #bfdbfe; background: rgba(255, 255, 255, .92); color: #1d4ed8; font: 700 .72rem var(--lt-font); cursor: pointer; }
.lt-pcard-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-top: .75rem; }
.lt-pcard-info { min-width: 0; }
.lt-pcard-brand { color: var(--lt-ink-3); font-size: .75rem; }
.lt-pcard-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--lt-ink); font-weight: 700; text-decoration: none; }
.lt-pcard-name:hover { color: var(--lt-ocean); }
.lt-pcard-spec { margin-top: .2rem; color: var(--lt-ink-2); font-size: .72rem; }
.lt-pcard-price { margin-top: auto; padding-top: .6rem; color: var(--lt-ocean); font-weight: 800; font-size: 1.1rem; }
.lt-pcard-price s { margin-left: .4rem; color: var(--lt-ink-3); font-size: .78rem; font-weight: 500; }
.lt-pcard-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.lt-pcard-actions form { display: flex; }

/* ===== Mảnh dùng chung cho các trang ===== */
.lt-page-head { margin: 1.5rem 0 1.25rem; }
.lt-page-head h1 { margin: .35rem 0 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.lt-page-head p { margin: .4rem 0 0; color: var(--lt-ink-2); }
.lt-empty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; border-radius: var(--lt-r-lg); border: 1px dashed var(--lt-line-blue); background: var(--lt-surface); text-align: center; }
.lt-empty > i { font-size: 2.5rem; color: var(--lt-ocean); opacity: .6; }
.lt-empty h5 { margin: .25rem 0 0; font-weight: 800; }
.lt-empty p { margin: 0 0 .5rem; color: var(--lt-ink-2); }
.lt-pagination { --bs-pagination-border-radius: 12px; --bs-pagination-border-color: var(--lt-line); --bs-pagination-bg: var(--lt-bg); gap: .3rem; }
.lt-pagination .page-link { min-width: 2.4rem; border-radius: 12px !important; text-align: center; cursor: pointer; }
.lt-link-btn { border: 0; background: none; color: var(--lt-ocean); font-size: .85rem; font-weight: 600; text-decoration: none; }
.lt-link-btn:hover { text-decoration: underline; }
.lt-search-field { position: relative; }
.lt-search-field > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--lt-ink-3); pointer-events: none; }
.lt-search-field .form-control { padding-left: 2.4rem; border-radius: 999px; }
/* Nút robot không đè lên bottom sheet/offcanvas đang mở. */
body:has(.offcanvas.show, .offcanvas-lg.show) .lt-chat-toggle { display: none; }
.lt-crumbs .breadcrumb { margin: 1rem 0 1.25rem; font-size: .85rem; --bs-breadcrumb-divider-color: var(--lt-ink-3); }
.lt-crumbs .breadcrumb a { text-decoration: none; }
.lt-panel { padding: 1.25rem 1.4rem; border-radius: var(--lt-r-lg); border: 1px solid var(--lt-line); background: var(--lt-surface); box-shadow: var(--lt-shadow); }
.lt-panel + .lt-panel { margin-top: 1rem; }
.lt-panel-title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 800; }
.lt-btn-dark { background: #0f172a; color: #fff; }
.lt-btn-dark:hover { background: #1e293b; color: #fff; }
[data-bs-theme="dark"] .lt-btn-dark { background: #1e293b; box-shadow: inset 0 0 0 1px var(--lt-line-blue); }

/* ===== Dock so sánh nổi ===== */
.lt-compare-dock { position: fixed; left: 50%; bottom: 1.25rem; z-index: 1040; display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem 1rem; border-radius: 999px; border: 1px solid var(--lt-line-blue); background: color-mix(in srgb, var(--lt-bg) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--lt-shadow-blue); transform: translateX(-50%); animation: lt-toast-in .3s var(--lt-ease); white-space: nowrap; }
.lt-compare-dock[hidden] { display: none; }
.lt-compare-dock > i { color: var(--lt-ocean); }
.lt-compare-dock .lt-btn { padding: .5rem .9rem; }
@media (max-width: 991.98px) {
  .lt-compare-dock { bottom: 6.25rem; font-size: .85rem; }
  .lt-compare-dock > span { display: none; }
}

/* ===== Thành phần Bootstrap còn mã màu #0d6efd cứng trong bản build ===== */
.form-check-input:checked { background-color: #1d4ed8; border-color: #1d4ed8; }
.form-check-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 .25rem rgba(14, 165, 233, .2); }
.list-group { --bs-list-group-active-bg: #1d4ed8; --bs-list-group-active-border-color: #1d4ed8; }
.dropdown-menu { --bs-dropdown-link-active-bg: #1d4ed8; }
.progress, .progress-stacked { --bs-progress-bar-bg: #1d4ed8; }
.nav-pills { --bs-nav-pills-link-active-bg: #1d4ed8; }

/* Menu và modal thông báo (_LoginPartial). */
.lt-noti-menu { width: min(350px, calc(100vw - 2rem)); max-height: 450px; overflow-y: auto; }
.lt-noti-menu .dropdown-item { border-bottom: 1px solid var(--lt-line); }
.lt-noti-time { font-size: .75rem; }
.lt-noti-alert { border-left: 4px solid #f59e0b; }
.lt-noti-cover { max-height: 300px; object-fit: cover; }

/* ===== Hợp với bạn % (hồ sơ nhu cầu) ===== */
.lt-ring.is-fit { background: conic-gradient(var(--lt-fit) calc(var(--lt-p) * 1%), var(--lt-line) 0); }
.lt-ring.is-fit i { color: var(--lt-fit); }
.lt-need-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 16rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--lt-line-blue); background: var(--lt-bg); color: var(--lt-ocean); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lt-need-chip span { overflow: hidden; text-overflow: ellipsis; }
.lt-need-chip.has-profile { border-color: var(--lt-fit); color: var(--lt-fit); background: var(--lt-fit-soft); }
@media (max-width: 1299.98px) { .lt-need-chip span, .lt-need-chip .fa-pen { display: none; } }
/* Dải 992–1299px: menu + chip nhu cầu + nút tài khoản vừa một hàng, không tràn ngang. */
@media (min-width: 992px) and (max-width: 1299.98px) { .lt-nav-link { padding: .5rem .45rem; font-size: .86rem; } }

/* ===== Radar 8 nhu cầu + khối "Hợp với bạn" (dùng ở chi tiết và so sánh) ===== */
.lt-radar { margin: 0; }
.lt-radar svg { display: block; max-width: 360px; margin: 0 auto; overflow: visible; }
.lt-radar-grid { fill: none; stroke: var(--lt-line); stroke-width: 1; }
.lt-radar-axis { stroke: var(--lt-line); stroke-width: 1; }
.lt-radar-missing { stroke: var(--lt-ink-3); stroke-width: 1; }
.lt-radar-label { fill: var(--lt-ink-2); font: 600 10px var(--lt-font); }
.lt-radar-value { fill: var(--lt-ink); font: 700 10px var(--lt-mono); }
.lt-radar-shape { stroke-width: 2; fill-opacity: .18; }
.lt-radar-shape.s0, .lt-radar-dot.s0, .lt-radar-swatch.s0 { stroke: var(--lt-ocean); fill: var(--lt-ocean); background: var(--lt-ocean); }
.lt-radar-shape.s1, .lt-radar-swatch.s1 { stroke: var(--lt-fit); fill: var(--lt-fit); background: var(--lt-fit); }
.lt-radar-shape.s2, .lt-radar-swatch.s2 { stroke: #b45309; fill: #b45309; background: #b45309; }
.lt-radar-shape.s3, .lt-radar-swatch.s3 { stroke: #7c3aed; fill: #7c3aed; background: #7c3aed; }
.lt-radar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-top: .5rem; font-size: .85rem; }
.lt-radar-swatch { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.lt-radar-note { margin: .5rem 0 0; text-align: center; color: var(--lt-ink-2); font-size: .9rem; }
.lt-need-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.lt-fit-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.lt-fit-uses, .lt-fit-checks { margin: 0 0 1rem; padding: 0; list-style: none; }
.lt-fit-uses li { display: grid; grid-template-columns: 11rem 1fr 3rem; gap: .6rem; align-items: center; padding: .25rem 0; font-size: .9rem; }
.lt-fit-bar { display: block; height: .5rem; border-radius: 999px; background: var(--lt-line); overflow: hidden; }
.lt-fit-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lt-fit); }
.lt-fit-checks li { position: relative; padding: .2rem 0 .2rem .1rem; font-size: .88rem; color: var(--lt-ink-2); }
.lt-fit-checks li.is-met { color: var(--lt-fit); }
.lt-fit-checks li.is-miss { color: var(--lt-bad); }
.lt-fit-invite { display: grid; justify-items: start; gap: .25rem; padding: 1rem; border-radius: var(--lt-r-md); background: var(--lt-fit-soft); }
.lt-fit-invite > i { color: var(--lt-fit); font-size: 1.4rem; }
@media (max-width: 991.98px) { .lt-need-grid { grid-template-columns: 1fr; } .lt-fit-uses li { grid-template-columns: 1fr 5rem 3rem; } }