/* Dùng chung cho trang giới thiệu (portal) và trang nhà đầu tư (/dau-tu): màu thương hiệu, cụm nút nổi góc dưới,
   form liên hệ, khung trợ lý AI (site.js). Màu nền / chữ lấy từ biến của trang (--bg, --panel, --ink, --muted, --line, --accent). */
:root { --brand2: #e8590c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand2: #ff8a3d; } }
:root[data-theme="dark"] { --brand2: #ff8a3d; }

.xs-dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--body, "IBM Plex Sans", system-ui, sans-serif); }
.xs-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .45); font-size: 18px; line-height: 1; transition: transform .15s, opacity .2s; }
.xs-round:hover { transform: translateY(-2px); border-color: var(--accent); }
.xs-round svg { width: 20px; height: 20px; }
.xs-top { opacity: 0; pointer-events: none; transform: translateY(8px); }
.xs-top.on { opacity: 1; pointer-events: auto; transform: none; }
.xs-ask { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 99px; border: 0; cursor: pointer; color: #fff; font: 600 14.5px var(--body, "IBM Plex Sans", system-ui, sans-serif);
  background: linear-gradient(100deg, var(--accent), var(--brand2)); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.xs-ask img { width: 34px; height: 34px; border-radius: 50%; background: #fff; object-fit: cover; }
.xs-ask:hover { filter: brightness(1.06); }
.xs-row { display: flex; gap: 10px; }

/* Khung trợ lý */
.xs-chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 310; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5); font-family: var(--body, "IBM Plex Sans", system-ui, sans-serif); }
.xs-chat header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(100deg, var(--accent), var(--brand2)); }
.xs-chat header img { width: 38px; height: 38px; border-radius: 50%; background: #fff; object-fit: cover; }
.xs-chat header b { display: block; font-size: 15px; }
.xs-chat header small { opacity: .85; font-size: 12px; }
.xs-chat header button { margin-left: auto; border: 0; background: rgba(255, 255, 255, .18); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.xs-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.xs-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.xs-msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.xs-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink, #fff); border-bottom-right-radius: 4px; }
.xs-msg.wait { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.xs-msg.wait img { width: 30px; height: 30px; }
.xs-msg a { color: inherit; font-weight: 600; }
.xs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--bg); }
.xs-chips button { border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--panel); color: var(--accent); border-radius: 99px; padding: 5px 11px; font-weight: 500; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.xs-chat form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--panel); }
.xs-chat textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px; padding: 9px 12px; font-weight: 400; font-size: 14px; font-family: inherit; max-height: 110px; }
.xs-chat form button { border: 0; border-radius: 12px; padding: 0 14px; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; cursor: pointer; font-family: inherit; }
.xs-chat form button:disabled { opacity: .5; cursor: default; }
.xs-foot { padding: 0 12px 8px; font-size: 11.5px; color: var(--muted); background: var(--panel); text-align: center; }
.xs-foot button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

/* Form liên hệ (hộp thoại hoặc gắn thẳng vào trang) */
.xs-modal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 16px; background: rgba(10, 14, 20, .55); backdrop-filter: blur(3px); }
.xs-box { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5); position: relative; font-family: var(--body, "IBM Plex Sans", system-ui, sans-serif); }
.xs-box > .xs-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: 18px; }
.xs-contact h3 { margin: 0 0 4px; font: 700 21px var(--display, "Familjen Grotesk", sans-serif); }
.xs-contact > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.xs-contact form { display: grid; gap: 12px; }
.xs-contact .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xs-contact label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.xs-contact input, .xs-contact textarea, .xs-contact select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-weight: 400; font-size: 15px; font-family: inherit; }
.xs-contact textarea { min-height: 100px; resize: vertical; }
.xs-contact input:focus, .xs-contact textarea:focus, .xs-contact select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
.xs-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.xs-kinds label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; cursor: pointer; color: var(--ink); font-weight: 500; }
.xs-kinds input { width: auto; accent-color: var(--accent); }
.xs-kinds label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.xs-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xs-send { border: 0; border-radius: 10px; padding: 12px 20px; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer; }
.xs-send:disabled { opacity: .6; }
.xs-note { margin: 0; font-size: 13.5px; }
.xs-note.bad { color: var(--bad, #c0392b); }
.xs-done { text-align: center; padding: 10px 0; }
.xs-done img { width: 120px; }
.xs-done h3 { margin: 6px 0; }
.xs-done p { color: var(--muted); margin: 0; }
@media (max-width: 560px) { .xs-contact .two { grid-template-columns: 1fr; } .xs-ask span { display: none; } .xs-ask { padding: 6px; } }
@media print { .xs-dock, .xs-chat, .xs-modal { display: none !important; } }

/* Chỉ một icon hỗ trợ ở góc dưới; nhãn mở khi hover/focus. */
.pt-theme { width:38px; height:38px; flex:none; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); cursor:pointer; }
.pt-theme svg { width:19px; height:19px; }
.pt-theme:hover { border-color:var(--accent); }
.xs-ask { height:56px; min-width:56px; padding:7px; gap:0; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); background:var(--panel); color:var(--ink); animation:xs-glow 3s ease-in-out infinite; }
.xs-ask img { width:40px; height:40px; }
.xs-ask span { display:block; overflow:hidden; max-width:0; opacity:0; white-space:nowrap; transition:max-width .25s, opacity .2s, margin .25s; }
.xs-ask:hover span, .xs-ask:focus-visible span { max-width:160px; margin:0 12px 0 8px; opacity:1; }
.xs-ask:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@keyframes xs-glow { 0%,100% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 6%,transparent),0 8px 22px -10px var(--accent); } 50% { box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 12%,transparent),0 0 26px -6px var(--accent); } }
.xs-chat { bottom:84px; height:min(620px,calc(100dvh - 104px)); }
.xs-support-tabs { display:flex; border-bottom:1px solid var(--line); background:var(--panel); }
.xs-support-tabs button { flex:1; padding:13px 8px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font:600 13px var(--body); cursor:pointer; }
.xs-support-tabs button[aria-selected=true] { border-bottom-color:var(--accent); color:var(--ink); }
.xs-conversation { display:flex; flex-direction:column; min-height:0; flex:1; }
.xs-conversation[hidden], .xs-human[hidden] { display:none; }
.xs-human { overflow-y:auto; padding:18px; flex:1; min-height:0; }
.xs-chat .xs-human form { display:grid; padding:0; border:0; gap:12px; }
.xs-chat .xs-human textarea { flex:none; min-height:100px; }
.xs-chat .xs-human form button { padding:12px; }
@media (prefers-reduced-motion:reduce) { .xs-ask { animation:none; } .xs-ask span, .pt-industry-menu svg { transition:none; } }

.xs-up { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 24px -12px rgba(0,0,0,.4); }
.xs-up[hidden] { display:none; }
.xs-up svg { width:20px; height:20px; }