/* =====================================================================================================
   TRỢ LÝ TÌM NHA KHOA (giai đoạn 1) — tab "Tìm kiếm | Trợ lý" trên hero + khung hội thoại + nút nổi.
   Demo đã duyệt: docs/thiet-ke-tro-ly-ai (ai.css/ai2.css/ai3.css). Tiền tố lớp `tl-` (không trùng). Logic: assets/js/p-tl.js. Markup: partials/tl-hero|tl-dock|tl-defs|tl-mark.ejs.
   Luật giữ: nút phẳng không bóng, bo nhỏ (token --ds-rd-*), thang chữ §13c/§13d (11/12/13/14/15/17), không thanh cuộn (mép mờ), không vạch trái, chuyển động tắt khi prefers-reduced-motion.
   Cờ lớp trên <html>: tl-dk (trang có nút nổi mới), tl-off (trợ lý mới tắt/lỗi → ẩn tab + nút nổi mới, trả trợ lý cũ), tl-old (người dùng chọn trợ lý hỏi đáp cơ bản).
   ===================================================================================================== */
.tl-h, .tl-fb, .tl-panel {
  --tl-ink9: var(--ds-ink-900, #13213c); --tl-ink7: var(--ds-ink-700, #464a67); --tl-ink5: var(--ds-ink-500, #6a6f80); --tl-ink4: var(--ds-ink-400, #9aa0ae);
  --tl-line: var(--ds-line, #e6e9ef); --tl-line2: var(--ds-line-strong, #d3d8e0); --tl-soft: var(--ds-bg, #f6f7f9);
  --tl-blue: var(--ds-blue-500, #548feb); --tl-btn: var(--brand-btn, #3672da); --tl-btnh: var(--brand-btn-h, #2061d7); --tl-link: var(--brand-ink, #2061d7);
  --tl-b50: #f1f4fd; --tl-b100: #e6eefb; --tl-b200: #a6c9ff; --tl-vio: #a78bfa; --tl-mint: #0c9c79; --tl-mint7: #0a7e63; --tl-rose: #e5484d; --tl-orange: var(--orange-ink, #b45309);
  --tl-aur: linear-gradient(90deg, #38bdf8 0%, #548feb 35%, #a78bfa 70%, #f9a8d4 100%);
  --tl-ease: cubic-bezier(.22, .8, .3, 1);
  font-family: var(--ds-font, 'Be Vietnam Pro', system-ui, sans-serif);
}
.tl-h *, .tl-fb *, .tl-panel * { box-sizing: border-box; }
.tl-h button, .tl-fb button, .tl-panel button, .tl-h textarea, .tl-panel textarea { font: inherit; color: inherit; }
.tl-h button, .tl-fb button, .tl-panel button { cursor: pointer; }
html.tl-off .tl-tabs, html.tl-off .tl-pane[data-tl-pane="ai"], html.tl-off .tl-fb, html.tl-off .tl-panel { display: none !important; }
/* trợ lý cũ chỉ ẩn khi nút nổi mới thay thế (tl-dk); tắt/lỗi hoặc chọn "trợ lý cơ bản" → trả lại */
html.tl-dk:not(.tl-off):not(.tl-old) :is(.ast-fab, .ast-panel) { display: none !important; }

/* ---------- 1. HÀNG TAB (khối chữ nhật CHỈ bo hai góc trên, đáy mở liền vào ô) ---------- */
.tl-h { --tl-bw: 2px; --tl-bg: #fff; --tl-c: var(--tl-blue); position: relative; width: min(885px, 100%); margin: 15px auto 0; text-align: left; }
.tl-h[data-mode="ai"] { --tl-bg: #fbfcff; --tl-c: #38bdf8; }
.tl-h .hv-sx--hero { margin: 0; width: 100%; }
.tl-tabs { position: relative; z-index: 3; display: flex; align-items: flex-end; height: 36px; padding-left: 16px; }
.tl-ind { position: absolute; bottom: calc(var(--tl-bw) * -1); height: 36px; left: 16px; width: 80px; border: var(--tl-bw) solid var(--tl-c); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--tl-bg); pointer-events: none; transition: left .38s var(--tl-ease), width .38s var(--tl-ease), border-color .3s, background .3s; }
.tl-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 18px; border: 0; background: transparent; font-size: 14px; font-weight: var(--ds-fw-500, 500); color: var(--tl-ink5); white-space: nowrap; transition: color .2s; }
.tl-tab:hover { color: var(--tl-ink9); }
.tl-tab[aria-selected="true"] { color: var(--tl-ink9); font-weight: var(--ds-fw-600, 600); }
.tl-tab:focus-visible { outline: 2px solid var(--tl-blue); outline-offset: -3px; border-radius: 8px; }
.tl-tabw { position: relative; display: inline-flex; }
.tl-tab-ai { padding-left: 14px; }
.tl-tk { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.tl-tk .tl-mk { width: 22px; height: 22px; }
.tl-tk::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 1.5px solid #7cc8f8; opacity: 0; animation: tlRipple 3.4s ease-out infinite; pointer-events: none; }
.tl-tab-ai[aria-selected="false"] .tl-tk::after { animation-duration: 5s; }
.tl-tab-ai .tl-tx { background: linear-gradient(90deg, #1f8fe0, #7a5cf0 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-tab-ai[aria-selected="false"] .tl-tx { opacity: .8; }
.tl-tab-ai:hover .tl-tx { opacity: 1; }
.tl-tab em { font-style: normal; height: 16px; padding: 0 5px; border-radius: 8px; background: linear-gradient(110deg, #9fdcfb, #cdbcfc, #f7bfdc); color: #4b2fb0; font-size: 11px; font-weight: var(--ds-fw-700, 700); display: inline-flex; align-items: center; line-height: 1; }
.tl-i { display: none; position: absolute; right: -2px; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #fff; color: var(--tl-ink4); font-size: 13px; padding: 0; place-items: center; box-shadow: 0 0 0 1px var(--tl-line); z-index: 3; }
@keyframes tlRipple { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }

/* tooltip diễn giải (rê chuột / chạm ⓘ) */
.tl-tip { position: absolute; left: -8px; top: calc(100% + 14px); width: 330px; padding: 12px 14px; background: var(--tl-ink9); color: #dfe6f5; border-radius: 10px; font-size: 12px; line-height: 1.55; font-weight: var(--ds-fw-400, 400); text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .18s, transform .22s var(--tl-ease), visibility .18s; z-index: 30; }
.tl-tip::before { content: ''; position: absolute; left: 42px; top: -6px; width: 12px; height: 12px; background: var(--tl-ink9); transform: rotate(45deg); border-radius: 2px; }
.tl-tip .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--ds-fw-700, 700); color: #fff; margin-bottom: 4px; }
.tl-tip .t .tl-mk { width: 24px; height: 24px; flex: none; }
.tl-tip .ex { display: block; margin-top: 8px; padding: 6px 8px; border-radius: var(--ds-rd-sm, 4px); background: rgba(255, 255, 255, .08); color: #fff; }
.tl-tip .ex span { color: #9fdcfb; }
.tl-tip .ft { display: block; margin-top: 8px; font-size: 11px; color: #a9b6d3; }
.tl-h[data-mode="search"] .tl-tabw:hover .tl-tip, .tl-tabw:focus-within .tl-tip, .tl-tabw.open .tl-tip { opacity: 1; visibility: visible; transform: none; }

/* ---------- 2. Ô TRỢ LÝ (cùng kích thước ô tìm: 54px, viền 2px nhưng gradient aurora) ---------- */
.tl-pane[hidden] { display: none; }
.tl-box { position: relative; display: flex; align-items: stretch; min-height: 54px; border: var(--tl-bw) solid transparent; border-radius: var(--ds-rd-md, 6px); background: linear-gradient(var(--tl-bg), var(--tl-bg)) padding-box, var(--tl-aur) border-box; box-shadow: 0 6px 22px rgba(84, 143, 235, .14); transition: box-shadow .25s; }
.tl-box:focus-within { box-shadow: 0 0 0 4px rgba(124, 156, 245, .16), 0 6px 22px rgba(84, 143, 235, .14); }
.tl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; }
.tl-lead { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.tl-lead .tl-mk { width: 24px; height: 24px; }
.tl-fld { flex: 1; position: relative; min-width: 0; align-self: center; }
.tl-fld textarea { display: block; width: 100%; height: 30px; max-height: 120px; padding: 4px 0; border: 0; outline: 0; box-shadow: none; resize: none; background: transparent; font-size: 14px; line-height: 22px; color: var(--tl-ink9); border-radius: 0; -ms-overflow-style: none; scrollbar-width: none; }
.tl-fld textarea::-webkit-scrollbar { display: none; }
.tl-fld textarea:focus, .tl-fld textarea:focus-visible { outline: 0; box-shadow: none; }
.tl-ph { position: absolute; left: 0; top: 4px; right: 0; pointer-events: none; font-size: 14px; line-height: 22px; color: var(--tl-ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ph::after { content: ''; display: inline-block; width: 1.5px; height: 15px; background: var(--tl-vio); margin-left: 2px; vertical-align: -3px; animation: tlBlink 1s steps(1) infinite; }
.tl-ph.static::after { display: none; }
.tl-fld.has .tl-ph, .tl-fld textarea:not(:placeholder-shown) ~ .tl-ph { display: none; }
@keyframes tlBlink { 50% { opacity: 0; } }
.tl-send { align-self: center; flex: none; height: 40px; min-width: 40px; padding: 0 16px; border: 0; border-radius: var(--ds-rd-sm, 4px); background: var(--tl-btn); color: #fff; font-size: 14px; font-weight: var(--ds-fw-600, 600); display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-right: 6px; transition: background .2s; }
.tl-send:hover { background: var(--tl-btnh); }
.tl-send i { font-size: 17px; }
.tl-send:disabled { background: #b7c6e6; cursor: default; }
.tl-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.tl-geo, .tl-area { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--ds-rd-sm, 4px); font-size: 12px; font-weight: var(--ds-fw-600, 600); white-space: nowrap; }
.tl-geo { border: 1px solid var(--tl-b200); background: #fff; color: var(--tl-link); }
.tl-geo:hover { background: var(--tl-b50); }
.tl-geo.ok { border-color: #a7dccd; color: var(--tl-mint7); background: #e8f6f1; }
.tl-area { border: 1px solid var(--tl-line); background: var(--tl-soft); color: var(--tl-ink7); }
.tl-area .ph-map-pin { color: var(--tl-rose); font-size: 14px; }
.tl-area .ph-pencil-simple { color: var(--tl-ink4); font-size: 13px; }
.tl-area input { width: 150px; height: 22px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--tl-ink9); padding: 0; }
.tl-sp { flex: 1; }
.tl-anon { font-size: 11px; line-height: 1.4; color: var(--tl-ink5); display: flex; align-items: center; gap: 4px; padding: 6px 4px 0; }
.tl-anon[hidden] { display: none; }
.tl-priv { font-size: 11px; color: var(--tl-ink5); display: inline-flex; align-items: center; gap: 4px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-b200); background: #fff; font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-link); transition: border-color .2s, background .2s; }
.tl-chip:hover { border-color: var(--tl-blue); background: var(--tl-b50); }
.tl-chip i { font-size: 14px; color: var(--tl-vio); }

/* thẻ gợi ý theo nhóm */
.tl-sgh { margin-top: 18px; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); }
.tl-sg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.tl-sgt { --c: #8b6cf0; --d: #6d44d8; --bg: #f1ecff; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: var(--ds-rd-md, 6px); border: 1px solid transparent; background: var(--bg); transition: transform .25s var(--tl-ease), border-color .25s; position: relative; min-width: 0; }
.tl-sgt:hover { transform: translateY(-2px); border-color: var(--c); }
.tl-sgt .tp { display: flex; align-items: center; gap: 7px; }
.tl-sgt .ic { width: 26px; height: 26px; border-radius: var(--ds-rd-sm, 4px); display: grid; place-items: center; background: #fff; color: var(--c); font-size: 16px; flex: none; }
.tl-sgt .k { font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .06em; color: var(--d); }
.tl-sgt .q { font-size: 13px; font-weight: var(--ds-fw-700, 700); line-height: 1.35; color: var(--tl-ink9); }
.tl-sgt small { font-size: 11px; color: var(--tl-ink5); line-height: 1.35; }
.tl-sgt .go { position: absolute; right: 9px; top: 15px; font-size: 13px; color: var(--c); opacity: 0; transform: translateX(-4px); transition: .25s; }
.tl-sgt:hover .go { opacity: 1; transform: none; }
.tl-sgt.rose { --c: #e5484d; --d: #b4233f; --bg: #fdeef0; } .tl-sgt.amber { --c: #e08a0b; --d: #a85f06; --bg: #fff5e0; }
.tl-sgt.mint { --c: #0c9c79; --d: #0a7e63; --bg: #e6f6f0; } .tl-sgt.cyan { --c: #0ea5e9; --d: #0369a1; --bg: #e2f5fe; } .tl-sgt.vio { --c: #8b6cf0; --d: #6d44d8; --bg: #f1ecff; }
.tl-sgr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--tl-line); background: none; text-align: left; font-size: 13px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-sgr:hover { background: var(--tl-soft); }
.tl-sgr .ic { width: 26px; height: 26px; border-radius: var(--ds-rd-sm, 4px); display: grid; place-items: center; font-size: 15px; flex: none; }
.tl-sgr small { display: block; font-size: 11px; font-weight: var(--ds-fw-400, 400); color: var(--tl-ink5); }
.tl-sgr > i:last-child { margin-left: auto; color: var(--tl-ink4); }
.tl-hist { margin-top: 14px; }
.tl-hist h3 { margin: 0 0 8px; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); display: flex; align-items: center; gap: 6px; }
.tl-hist .row { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-hist .row button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-line); background: #fff; font-size: 12px; color: var(--tl-ink7); max-width: 100%; }
.tl-hist .row button i { color: var(--tl-ink4); }
.tl-hist .row button:hover { border-color: var(--tl-blue); }

/* ---------- 3. KHUNG HỘI THOẠI (dùng chung hero + bảng nổi) ---------- */
.tl-chat { display: none; }
.tl-card.is-chat .tl-chat { display: block; }
.tl-card.is-chat .tl-empty { display: none; }
.tl-card.is-chat { background: #fff; border: 1px solid var(--tl-line); border-radius: 10px; padding: 16px 18px; box-shadow: 0 8px 30px rgba(84, 143, 235, .08); }
.tl-card.is-chat .tl-box { margin-top: 2px; }
.tl-hd { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; }
.tl-av { width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--tl-b100); display: grid; place-items: center; position: relative; flex: none; }
.tl-av .tl-mk { width: 20px; height: 20px; }
.tl-hd .ti { flex: 1; min-width: 0; }
.tl-hd .ti b { display: block; font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); line-height: 1.3; }
.tl-hd .ti small { display: block; font-size: 12px; color: var(--tl-ink5); }
.tl-ib { height: 32px; min-width: 32px; padding: 0 9px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-line); background: #fff; color: var(--tl-ink7); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: var(--ds-fw-600, 600); }
.tl-ib:hover { background: var(--tl-soft); }
.tl-ib i { font-size: 15px; }
.tl-msgs { container-type: inline-size; display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 12px; }
.tl-u { align-self: flex-end; max-width: 78%; background: var(--tl-btn); color: #fff; padding: 9px 14px; border-radius: 12px 12px 3px 12px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tl-a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.tl-a > .tl-av { width: 30px; height: 30px; margin-top: 2px; }
.tl-a > .tl-av .tl-mk { width: 18px; height: 18px; }
.tl-bd { min-width: 0; }
.tl-tx2 { font-size: 14px; line-height: 1.65; color: var(--tl-ink7); overflow-wrap: anywhere; }
.tl-tx2 b { color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); }
.tl-tx2 p { margin: 0 0 6px; }
.tl-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.tl-cites .lb { font-size: 11px; color: var(--tl-ink5); font-weight: var(--ds-fw-600, 600); margin-right: 2px; }
.tl-cite { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--tl-soft); border: 1px solid var(--tl-line); font-size: 11px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.tl-cite:hover { border-color: var(--tl-b200); color: var(--tl-link); }
.tl-cite i { font-size: 12px; color: var(--tl-blue); flex: none; }
.tl-cite em { font-style: normal; color: var(--tl-ink5); font-weight: var(--ds-fw-400, 400); }
.tl-disc { margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--tl-ink5); line-height: 1.5; }
.tl-disc i { color: var(--tl-ink4); font-size: 14px; margin-top: 1px; flex: none; }
.tl-fade { animation: tlFin .45s var(--tl-ease) both; }
@keyframes tlFin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tlSpin { to { transform: rotate(360deg); } }
.tl-ent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; color: var(--tl-ink5); }
.tl-ent .lb { font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; }
.tl-ent .e { display: inline-flex; gap: 4px; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #f4f0ff; color: #6d44d8; font-size: 11px; font-weight: var(--ds-fw-600, 600); }
.tl-ent .e.u { background: #fdeef0; color: #b4233f; }

/* đang tìm: 3 bước trung thực + khung chờ */
.tl-think { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.tl-steps { display: grid; gap: 7px; }
.tl-stp { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tl-ink5); font-weight: var(--ds-fw-600, 600); }
.tl-stp i { width: 18px; height: 18px; display: grid; place-items: center; font-size: 14px; color: var(--tl-ink4); }
.tl-stp.done { color: var(--tl-ink7); } .tl-stp.done i { color: var(--tl-mint); }
.tl-stp.now { color: var(--tl-ink9); } .tl-stp.now i { color: var(--tl-vio); animation: tlSpin 1.1s linear infinite; }
.tl-stp small { font-weight: var(--ds-fw-400, 400); font-size: 12px; color: var(--tl-ink5); }
.tl-skr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.tl-skc { height: 96px; border-radius: var(--ds-rd-md, 6px); border: 1px solid var(--tl-line); background: #fff; padding: 10px; display: grid; gap: 8px; align-content: start; }
.tl-sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 50%, #eef1f6 75%); background-size: 200% 100%; animation: tlShimmer 1.4s linear infinite; }
@keyframes tlShimmer { to { background-position: -200% 0; } }

/* khối kết quả */
.tl-rb { margin-top: 16px; }
.tl-rbh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tl-rbh h3 { margin: 0; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); display: inline-flex; align-items: center; gap: 6px; }
.tl-rbh h3 i { font-size: 14px; color: var(--tl-blue); }
.tl-rbh a { margin-left: auto; font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-link); }
.tl-rg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tl-rg.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-rg.g1 { grid-template-columns: minmax(0, 1fr); }
.tl-rg > * { min-width: 0; }
.tl-cd { background: #fff; border: 1px solid var(--tl-line); border-radius: var(--ds-rd-md, 6px); min-width: 0; transition: border-color .25s, transform .25s var(--tl-ease); display: flex; flex-direction: column; overflow: hidden; color: inherit; }
a.tl-cd:hover, .tl-cd:hover { border-color: var(--tl-b200); transform: translateY(-2px); }
.tl-cd .ph { position: relative; aspect-ratio: 16 / 9; background: var(--tl-soft); overflow: hidden; }
.tl-cd .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-cd .tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); font-size: 11px; font-weight: var(--ds-fw-700, 700); background: #fdf6e0; color: #8a6510; }
.tl-cd .tag.sp { background: #f3effe; color: #6d44d8; }
.tl-cd .km { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); background: rgba(19, 33, 60, .78); color: #fff; font-size: 11px; font-weight: var(--ds-fw-600, 600); }
.tl-cd .in { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tl-cd h4 { margin: 0; font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-cd .meta { font-size: 12px; color: var(--tl-ink5); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-cd .meta .tl-st { color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); display: inline-flex; align-items: center; gap: 2px; }
.tl-cd .meta .tl-st i { color: #f5a623; font-size: 13px; }
.tl-cd .meta .open { color: var(--tl-mint7); font-weight: var(--ds-fw-600, 600); display: inline-flex; align-items: center; gap: 3px; }
.tl-cd .price { font-size: 12px; color: var(--tl-ink5); }
.tl-cd .price b { font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-cd .why { font-size: 12px; color: var(--tl-ink5); display: flex; align-items: flex-start; gap: 5px; }
.tl-cd .why i { color: var(--tl-vio); margin-top: 2px; }
.tl-cd .ft { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; }
.tl-cd.cdc, .tl-cd.cpo, .tl-cd.cof { padding: 12px; gap: 8px; }
.tl-cd.cpo { flex-direction: row; align-items: center; gap: 10px; padding: 8px; }
.tl-cd.cpo img { width: 88px; height: 62px; object-fit: cover; border-radius: var(--ds-rd-sm, 4px); display: block; flex: none; }
.tl-cd.cpo h4 { font-size: 14px; }
.tl-cd small { display: block; font-size: 12px; color: var(--tl-ink5); }
.tl-cd .q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.55; color: var(--tl-ink7); padding: 8px 10px; background: var(--tl-soft); border-radius: var(--ds-rd-sm, 4px); margin: 0; }
.tl-cd .cnm { font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); line-height: 1.3; }
.tl-cd .ck { display: inline-flex; align-items: center; align-self: flex-start; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .04em; background: #e8f6f1; color: var(--tl-mint7); }
.tl-cd .ck.fl { background: #ffe9e4; color: #c2410c; } .tl-cd .ck.ev { background: #f3effe; color: #6d44d8; }
.tl-cd .tl-pr b { font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); } .tl-cd .tl-pr s { font-size: 12px; color: var(--tl-ink4); margin-left: 6px; }
.tl-pt { overflow: hidden; display: block; }
.tl-pt table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-pt th { text-align: left; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .06em; color: var(--tl-ink5); background: var(--tl-soft); padding: 8px 12px; }
.tl-pt td { padding: 9px 12px; border-top: 1px solid var(--tl-line); color: var(--tl-ink7); }
.tl-pt td b { color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); }
.tl-pt .r { text-align: right; }
.tl-pt .nt { padding: 8px 12px; font-size: 12px; color: var(--tl-ink5); border-top: 1px solid var(--tl-line); }
.tl-btn { height: 34px; padding: 0 12px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-btn); background: var(--tl-btn); color: #fff; font-size: 13px; font-weight: var(--ds-fw-600, 600); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.tl-btn:hover { background: var(--tl-btnh); border-color: var(--tl-btnh); color: #fff; }
.tl-btn.gh { background: #fff; color: var(--tl-link); border-color: var(--tl-b200); }
.tl-btn.gh:hover { background: var(--tl-b50); }
.tl-btn.red { background: #cf3b41; border-color: #cf3b41; }
.tl-btn.red:hover { background: #b9282f; }
.tl-btn.fl { flex: 1; }
.tl-btn i { font-size: 15px; }

/* khẩn cấp / ghi chú / đồng ý */
.tl-al { border: 1px solid #f4b6c0; background: #fdeef0; border-radius: var(--ds-rd-md, 6px); padding: 14px; }
.tl-al .hd { display: flex; align-items: center; gap: 10px; }
.tl-al .hd i { font-size: 26px; color: var(--tl-rose); flex: none; }
.tl-al .hd b { font-size: 15px; font-weight: var(--ds-fw-700, 700); color: #8f1d33; line-height: 1.35; }
.tl-al .txt { margin-top: 10px; font-size: 14px; color: #5b1a28; line-height: 1.6; }
.tl-al .acts, .tl-nb .acts, .tl-cs .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tl-al .src { margin-top: 10px; font-size: 11px; color: #9a5b66; display: flex; align-items: center; gap: 5px; }
.tl-nb { border: 1px solid var(--tl-line); background: var(--tl-soft); border-radius: var(--ds-rd-md, 6px); padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--tl-ink7); }
.tl-nb > b { color: var(--tl-ink9); }
.tl-nb.warn { background: #fff4e5; border-color: #f5d9a8; }
.tl-qr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-fu { margin-top: 14px; }
.tl-fu .lb { font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); margin-bottom: 2px; }
.tl-fu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px; border: 0; border-top: 1px solid var(--tl-line); background: none; text-align: left; font-size: 13px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-fu button:hover { color: var(--tl-link); }
.tl-fu button > i:last-child { margin-left: auto; color: var(--tl-blue); font-size: 14px; transition: transform .2s; }
.tl-fu button:hover > i:last-child { transform: translateX(3px); }
.tl-fu button.go { color: var(--tl-link); font-weight: var(--ds-fw-700, 700); }
.tl-fu button .l { font-size: 16px; }
.tl-rate { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--tl-ink5); flex-wrap: wrap; }
.tl-rate button { width: 28px; height: 28px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid transparent; background: transparent; color: var(--tl-ink5); display: grid; place-items: center; }
.tl-rate button:hover { background: var(--tl-soft); border-color: var(--tl-line); }
.tl-rate button.on { color: var(--tl-btn); background: var(--tl-b50); }
.tl-rate button i { font-size: 16px; }
.tl-conf { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tl-ink5); }
.tl-conf.hi i { color: var(--tl-mint); } .tl-conf.lo i { color: var(--tl-orange); }
.tl-sep { font-size: 12px; color: var(--tl-ink5); text-align: center; position: relative; margin: 2px 0; }
.tl-sep span { background: #fff; padding: 0 10px; position: relative; z-index: 1; }
.tl-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--tl-line2); }
.tl-cs { margin-top: 12px; border: 1px solid var(--tl-b200); background: #fff; border-radius: var(--ds-rd-md, 6px); padding: 14px; }
.tl-cs h3 { margin: 0; font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); display: flex; align-items: center; gap: 8px; }
.tl-cs h3 i { color: var(--tl-btn); font-size: 20px; }
.tl-cs p { margin: 6px 0 0; font-size: 13px; color: var(--tl-ink7); line-height: 1.55; }
.tl-cs label { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; color: var(--tl-ink9); font-weight: var(--ds-fw-600, 600); cursor: pointer; line-height: 1.5; }
.tl-cs input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tl-btn); flex: none; margin-top: 1px; }
.tl-cs .btn-off { opacity: .55; pointer-events: none; }
.tl-cs .fine { font-size: 11px; color: var(--tl-ink5); margin-top: 8px; }

/* ---------- 4. HERO: giãn thành khung hội thoại ---------- */
html:not(.tl-off) body.home-v2 .ds-hero:has(.tl-h) { height: calc(318px + var(--hv0, 91px)); }
@media (max-width: 1279px) { html:not(.tl-off) body.home-v2 .ds-hero:has(.tl-h) { height: calc(385px + var(--hv0, 91px)); } }
body.home-v2 .ds-hero.tl-chatting { height: auto; min-height: 0; padding-bottom: 28px; }
body.home-v2 .ds-hero.tl-chatting .ds-hero-in { position: relative; top: auto; padding-top: calc(var(--hv0, 91px) + 16px); }
body.home-v2 .ds-hero.tl-chatting :is(.ds-h1, .ds-hero-sub, .ds-trust, .ds-promo, .ds-rings) { display: none; }
body.home-v2 .ds-hero.tl-chatting .tl-h { margin-top: 0; width: min(1000px, 100%); }
body.home-v2 .ds-hero.tl-chatting .tl-tabs { margin-bottom: 0; }
body.home-v2 .ds-hero.tl-ai::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 260px at 8% 0%, rgba(191, 233, 253, .55), transparent 70%), radial-gradient(560px 280px at 94% 8%, rgba(225, 215, 255, .6), transparent 70%), radial-gradient(460px 220px at 50% 100%, rgba(253, 225, 238, .5), transparent 70%); background-size: 120% 120%; animation: tlAur 22s ease-in-out infinite alternate; }
@keyframes tlAur { to { background-position: 100% 60%; transform: translateX(0); } }

/* ---------- 5. NÚT NỔI ---------- */
.tl-fb { position: fixed; right: 22px; bottom: 78px; z-index: 62; display: flex; align-items: center; gap: 12px; flex-direction: row-reverse; }
.tl-fb[hidden], .tl-panel[hidden], .tl-bub[hidden] { display: none; }
.tl-fbb { position: relative; width: 60px; height: 60px; border: 0; background: transparent; padding: 0; flex: none; }
.tl-orb { position: absolute; inset: 0; animation: tlBreathe 4.2s ease-in-out infinite; transition: transform .3s var(--tl-ease); }
@keyframes tlBreathe { 50% { transform: scale(1.045); } }
.tl-orb .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #38bdf8, #548feb, #a78bfa, #f9a8d4, #38bdf8); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation: tlSpin 6s linear infinite; }
.tl-orb .glow { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, #38bdf8, #548feb, #a78bfa, #f9a8d4, #38bdf8); filter: blur(9px); opacity: .42; animation: tlSpin 6s linear infinite; transition: opacity .3s; }
.tl-orb .core { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #fff 0%, #eef6ff 55%, #efe9ff 100%); box-shadow: inset 0 0 0 2px #fff; display: grid; place-items: center; overflow: hidden; }
.tl-orb .core .tl-mk { width: 36px; height: 36px; position: relative; margin: 2px 0 0 -2px; }
.tl-orb .pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #7cc8f8; opacity: 0; animation: tlRipple 3.2s ease-out infinite; }
.tl-orb .pulse.p2 { animation-delay: 1.6s; border-color: #c4a5fb; }
.tl-fbb:hover .tl-orb { transform: scale(1.08); }
.tl-fbb:hover .tl-orb :is(.ring, .glow) { animation-duration: 1.8s; }
.tl-fbb:hover .tl-orb .glow { opacity: .65; }
.tl-fbb:hover .tl-orb .pulse { animation-duration: 1.6s; }
.tl-fbb:focus-visible { outline: 2px solid var(--tl-blue); outline-offset: 4px; border-radius: 50%; }
.tl-fbb.thinking .tl-orb :is(.ring, .glow) { animation-duration: .9s; }
.tl-dot { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ff8a4c; border: 2px solid #fff; display: none; z-index: 3; }
.tl-fbb.unread .tl-dot { display: block; }
.tl-fbb.unread .tl-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #ff8a4c; animation: tlPing 1.6s ease-out infinite; }
@keyframes tlPing { to { transform: scale(2.1); opacity: 0; } }
.tl-bub { position: relative; background: #fff; border: 1px solid var(--tl-line); border-radius: 10px; padding: 9px 30px 9px 12px; box-shadow: 0 8px 24px rgba(19, 33, 60, .12); max-width: 250px; animation: tlBub .5s var(--tl-ease) both; }
.tl-bub::after { content: ''; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; background: #fff; border-right: 1px solid var(--tl-line); border-top: 1px solid var(--tl-line); transform: translateY(-50%) rotate(45deg); }
.tl-bub b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-bub b .tl-mk { width: 22px; height: 22px; }
.tl-bub > span { display: block; font-size: 12px; color: var(--tl-ink5); line-height: 1.45; margin-top: 1px; }
.tl-bub .x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0; background: none; color: var(--tl-ink4); display: grid; place-items: center; border-radius: 4px; }
.tl-bub .x:hover { background: var(--tl-soft); }
@keyframes tlBub { from { opacity: 0; transform: translateX(10px) scale(.96); } to { opacity: 1; transform: none; } }
.tl-fb.open .tl-bub { display: none; }
.tl-fb.open { z-index: 62; }

/* biểu tượng răng-thoại: tia tín hiệu / đang tìm / gật */
.tl-mk { display: inline-block; width: 24px; height: 24px; flex: none; overflow: visible; vertical-align: middle; }
.tl-mk .a1 { animation: tlSig 2.8s ease-in-out infinite; } .tl-mk .a2 { animation: tlSig 2.8s ease-in-out .35s infinite; }
@keyframes tlSig { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.tl-mk .tooth { transform-box: fill-box; transform-origin: 50% 100%; }
.tl-mk .dots3 { opacity: 0; } .tl-mk .dots3 circle { animation: tlDsl 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .tl-mk .dots3 circle:nth-child(2) { animation-delay: .15s; } .tl-mk .dots3 circle:nth-child(3) { animation-delay: .3s; }
@keyframes tlDsl { 0%, 80%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-3.5px); opacity: 1; } }
.tl-mk.s16 .arcs, .tl-mk.s24 .arcs { display: none; }
.tl-fbb.unread .tl-mk .tooth { animation: tlNod 1.3s ease-in-out infinite; }
@keyframes tlNod { 0%, 70%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } }
.tl-fbb.thinking .tl-mk .tooth { opacity: 0; } .tl-fbb.thinking .tl-mk .dots3 { opacity: 1; }

/* ---------- 6. BẢNG NỔI ---------- */
.tl-panel { position: fixed; right: 22px; bottom: 22px; z-index: 64; width: 400px; max-width: calc(100vw - 24px); height: min(640px, calc(100vh - 44px)); background: #fff; border: 1px solid var(--tl-line); border-radius: 14px; box-shadow: 0 18px 60px rgba(19, 33, 60, .22); display: flex; flex-direction: column; overflow: hidden; transform-origin: 90% 100%; animation: tlPop .35s var(--tl-ease) both; }
@keyframes tlPop { from { opacity: 0; transform: scale(.92) translateY(14px); } to { opacity: 1; transform: none; } }
.tl-panel .tl-ph-hd { padding: 12px 14px 10px; border-bottom: 1px solid var(--tl-line); background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%); flex: none; }
.tl-panel .tl-hd { padding: 0; }
.tl-ctxp { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 6px 5px 9px; border-radius: var(--ds-rd-sm, 4px); background: var(--tl-b50); border: 1px solid var(--tl-b100); font-size: 12px; color: var(--tl-ink7); }
.tl-ctxp > i:first-child { color: var(--tl-blue); font-size: 14px; }
.tl-ctxp b { font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-ctxp span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ctxp button { width: 22px; height: 22px; border: 0; background: none; color: var(--tl-ink5); border-radius: 4px; display: grid; place-items: center; }
.tl-ctxp button:hover { background: #fff; }
.tl-ctxp.off { background: var(--tl-soft); border-color: var(--tl-line); }
.tl-scr { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 6px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%); scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.tl-scr::-webkit-scrollbar { display: none; }
.tl-pft { padding: 8px 12px 12px; border-top: 1px solid var(--tl-line); background: #fff; flex: none; }
.tl-pft .tl-box { min-height: 48px; box-shadow: none; --tl-bw: 1.5px; }
.tl-pft .tl-main { padding: 4px 4px 4px 12px; }
.tl-pft .tl-send { height: 36px; min-width: 36px; padding: 0 10px; margin-right: 4px; }
.tl-pft .tl-ctx { margin-top: 8px; }
.tl-hello { font-size: 14px; color: var(--tl-ink7); line-height: 1.6; }
.tl-hello b { color: var(--tl-ink9); }
.tl-panel .tl-a { grid-template-columns: minmax(0, 1fr); }
.tl-panel .tl-a > .tl-av { display: none; }
.tl-panel .tl-u { max-width: 88%; }
.tl-pane-lock { overflow: hidden; }

/* khối kết quả trong khung hẹp (bảng nổi / điện thoại): dải vuốt ngang, không thanh cuộn, mép mờ */
@container (max-width: 560px) {
  .tl-rg { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: -14px; padding-right: 14px; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .tl-rg::-webkit-scrollbar { display: none; }
  .tl-rg > * { flex: 0 0 min(250px, 78%); scroll-snap-align: start; }
  .tl-rg.g1 > * { flex-basis: 100%; }
  .tl-skr { display: flex; overflow: hidden; } .tl-skc { flex: 0 0 60%; }
  .tl-al .acts .tl-btn { flex: 1 1 100%; justify-content: center; white-space: normal; }
}

/* ---------- 7. ĐIỆN THOẠI ≤ 767px (hệ thống mobile thương mại gọn: nút 28–32px, chữ mảnh hơn một bậc) ---------- */
@media (max-width: 767px) {
  .tl-h { width: 100%; margin-top: 12px; }
  .tl-tabs { height: 34px; padding-left: 12px; }
  .tl-ind { height: 34px; left: 12px; border-radius: 8px 8px 0 0; }
  .tl-tab { height: 34px; padding: 0 14px; font-size: 13px; gap: 5px; }
  .tl-tab-ai { padding-left: 10px; }
  .tl-tk, .tl-tk .tl-mk { width: 20px; height: 20px; }
  .tl-tab em { display: none; }
  .tl-i { display: grid; right: -14px; top: -6px; width: 32px; height: 32px; background: transparent; box-shadow: none; font-size: 15px; }
  .tl-tip { left: -118px; width: min(300px, calc(100vw - 28px)); }
  .tl-tip::before { left: 148px; }
  .tl-h .tl-tabw:hover .tl-tip { opacity: 0; visibility: hidden; }
  .tl-h .tl-tabw.open .tl-tip { opacity: 1 !important; visibility: visible !important; transform: none; }
  .tl-box { min-height: 48px; }
  .tl-main { padding: 4px 4px 4px 12px; gap: 8px; }
  .tl-send { height: 34px; min-width: 34px; padding: 0 10px; margin-right: 4px; }
  .tl-send span { display: none; }
  .tl-ctx { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .tl-ctx::-webkit-scrollbar { display: none; }
  .tl-ctx > * { flex: none; }
  .tl-geo, .tl-area, .tl-chip { height: 28px; }
  .tl-priv, .tl-sp { display: none; }
  .tl-sg { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .tl-sg::-webkit-scrollbar { display: none; }
  .tl-sgt { flex: 0 0 188px; scroll-snap-align: start; }
  .tl-sgh { margin-top: 14px; }
  .tl-hist .row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tl-hist .row::-webkit-scrollbar { display: none; }
  .tl-hist .row button { flex: none; }
  .tl-hd .ti small, .tl-hd .tl-ib .dsk { display: none; }
  .tl-hd .ti b { font-size: 14px; }
  .tl-btn { height: 32px; font-size: 13px; }
  .tl-a { grid-template-columns: minmax(0, 1fr); } .tl-a > .tl-av { display: none; }
  .tl-tx2 { font-weight: var(--ds-fw-400, 400); }

  /* hội thoại trong hero: toàn màn hình (hero nâng z-index để phủ đầu trang) */
  body.home-v2 .ds-hero.tl-chatting { z-index: 300; isolation: auto; padding-bottom: 0; }
  body.home-v2 .ds-hero.tl-chatting .ds-hero-in { position: static; padding: 0; }
  body.home-v2 .ds-hero.tl-chatting .tl-h { position: fixed; inset: 0; z-index: 300; width: auto; margin: 0; background: #fff; display: flex; flex-direction: column; }
  body.home-v2 .ds-hero.tl-chatting .tl-tabs { display: none; }
  body.home-v2 .ds-hero.tl-chatting .tl-pane[data-tl-pane="ai"] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tl-card.is-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .tl-card.is-chat .tl-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tl-card.is-chat .tl-hd { padding: 10px 12px; border-bottom: 1px solid var(--tl-line); background: linear-gradient(180deg, #f5f8ff, #fff); }
  .tl-card.is-chat .tl-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 10px; scrollbar-width: none; overscroll-behavior: contain; }
  .tl-card.is-chat .tl-msgs::-webkit-scrollbar { display: none; }
  .tl-card.is-chat .tl-comp { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--tl-line); }
  .tl-card.is-chat .tl-hist { display: none; }
  .tl-skr { display: flex; overflow: hidden; } .tl-skc { flex: 0 0 60%; }

  /* nút nổi + tờ trượt */
  .tl-fb { right: 10px; bottom: calc(var(--m-fab-b, 14px) + 48px); }
  .tl-fbb { width: 48px; height: 48px; }
  .tl-orb .core .tl-mk { width: 30px; height: 30px; }
  .tl-bub { max-width: 190px; padding: 7px 28px 7px 10px; }
  .tl-bub b { font-size: 13px; }
  html.kb-open .tl-fb, html:has(.bk3-stick.is-open) .tl-fb, html:has(dialog[open]) .tl-fb, html:has(.hv-sx.is-open) .tl-fb, html:has(.hv-cat.is-open) .tl-fb { display: none !important; }
  .tl-panel { right: 0; left: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 8px); width: auto; max-width: none; height: auto; border-radius: 16px 16px 0 0; transform-origin: 50% 100%; animation: tlSheet .38s var(--tl-ease) both; z-index: 320; }
  @keyframes tlSheet { from { transform: translateY(100%); } to { transform: none; } }
  .tl-panel::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--tl-line2); margin: 8px auto 0; flex: none; }
  .tl-pft { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.tl-lock { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-ind { transition: none; }
  .tl-tk::after, .tl-orb, .tl-orb :is(.ring, .glow, .pulse), .tl-mk :is(.a1, .a2), .tl-ph::after, body.home-v2 .ds-hero.tl-ai::after, .tl-fade, .tl-panel, .tl-bub { animation: none !important; }
  .tl-stp.now i { animation-duration: 3s; }
}

/* nút Thu gọn: mũi tên trên máy tính, dấu × trên điện thoại (hội thoại toàn màn hình) */
.tl-ib .mb { display: none; }
@media (max-width: 767px) { .tl-ib .dk { display: none; } .tl-ib .mb { display: inline-block; } }

/* chế độ Trợ lý (chưa hội thoại): hero giãn theo nội dung (ô + chip + 5 thẻ gợi ý), bỏ dòng tin cậy; vòng logo + banner nhỏ vẫn nằm đáy hero */
body.home-v2 .ds-hero.tl-ai { height: auto; min-height: 0; padding-bottom: 104px; }
body.home-v2 .ds-hero.tl-ai .ds-hero-in { position: relative; top: auto; padding-top: calc(var(--hv0, 91px) + 36px); }
@media (max-width: 1023px) { body.home-v2 .ds-hero.tl-ai .ds-hero-in { padding-top: calc(var(--hv0, 91px) + 31px); } }
body.home-v2 .ds-hero.tl-ai .ds-trust { display: none; }
body.home-v2 .ds-hero.tl-ai.tl-chat { padding-bottom: 28px; }
.tl-h .tl-tab { font-size: 14px; }
@media (max-width: 767px) { .tl-h .tl-tab { font-size: 13px; } }
html:not(.tl-off) body.home-v2 .ds-hero.tl-ai:has(.tl-h), html:not(.tl-off) body.home-v2 .ds-hero.tl-chatting:has(.tl-h) { height: auto; min-height: 0; }
@media (max-width: 1279px) { html:not(.tl-off) body.home-v2 .ds-hero.tl-ai:has(.tl-h), html:not(.tl-off) body.home-v2 .ds-hero.tl-chatting:has(.tl-h) { height: auto; } }
@media (max-width: 767px) { body.home-v2 .ds-hero.tl-ai { padding-bottom: 14px; } body.home-v2 .ds-hero.tl-ai .ds-hero-in { padding-top: calc(var(--hv0, 57px) + 10px); } }

/* nút mở rộng / thu gọn hội thoại (cạnh nút Gửi, chỉ ở ô hero khi đã có nội dung); vùng bấm 44px */
.tl-xp { position: relative; align-self: center; flex: none; width: 28px; height: 28px; margin-right: 2px; padding: 0; border: 0; border-radius: var(--ds-rd-sm, 4px); background: transparent; color: var(--tl-ink5); display: grid; place-items: center; }
.tl-xp[hidden] { display: none; }
.tl-xp::after { content: ''; position: absolute; inset: -8px; }
.tl-xp i { font-size: 17px; }
.tl-xp:hover { background: var(--tl-b50); color: var(--tl-link); }
/* nút Gửi + nút chính trong khung trợ lý: sáng, tươi (cyan → xanh #548feb), phẳng, chữ ink-900 đậm 600 (trắng trên #548feb chỉ ~3,3:1, không đạt AA; ink-900 ≥ 5:1 trên toàn dải) */
.tl-send, .tl-btn:not(.gh):not(.red) { background: linear-gradient(90deg, #38bdf8, #548feb); border-color: transparent; color: var(--tl-ink9); font-weight: var(--ds-fw-600, 600); box-shadow: none; }
.tl-send:hover, .tl-btn:not(.gh):not(.red):hover { background: linear-gradient(90deg, #5ccaff, #6ea0f2); border-color: transparent; color: var(--tl-ink9); }
.tl-send:disabled { background: #cfe3f7; color: var(--tl-ink5); }

/* chip khe "Mình hiểu": chắc / đoán (dấu ?, nhạt, bấm để sửa) / thiếu (+ gợi ý thêm) */
.tl-ent button.e { border: 0; cursor: pointer; font-family: inherit; }
.tl-ent .e.guess { background: #fff; color: var(--tl-ink5); box-shadow: inset 0 0 0 1px #d9cdfa; font-weight: var(--ds-fw-500, 500); }
.tl-ent .e.guess i { font-size: 12px; color: #8b6cf0; }
.tl-ent .e.guess:hover { background: #f4f0ff; color: #6d44d8; }
.tl-ent .e.add { background: transparent; color: var(--tl-link); box-shadow: inset 0 0 0 1px var(--tl-b200); border-style: dashed; }
.tl-ent .e.add i { font-size: 11px; }
.tl-ent .e.add:hover { background: var(--tl-b50); }
.tl-ent .e.edit { background: #fff; box-shadow: inset 0 0 0 1px var(--tl-blue); padding: 0 8px; }
.tl-ent .e.edit input { width: 120px; height: 20px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--tl-ink9); padding: 0; }

/* tab "Trợ lý": chữ ĐẬM 700, tô gradient aurora (bậc đậm của cyan → xanh → lavender → hồng đào, tương phản ≥ 4,5:1 trên nền trắng) trôi ngang chậm 5s; giảm chuyển động → gradient tĩnh */
.tl-h .tl-tab-ai .tl-tx { font-weight: var(--ds-fw-700, 700); opacity: 1; background: linear-gradient(90deg, #0b7fb8, #2a62c8, #6d44d8, #c02f7e, #6d44d8, #2a62c8, #0b7fb8); background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: tlTxtFlow 6s linear infinite; }
.tl-h .tl-tab-ai[aria-selected="true"] .tl-tx { animation-duration: 8s; }
.tl-h .tl-tab-ai[aria-selected="false"] { color: var(--tl-ink9); }
@keyframes tlTxtFlow { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .tl-h .tl-tab-ai .tl-tx { animation: none; background-position: 40% 0; } }

/* AVATAR trợ lý = mascot chiếc răng bác sĩ, cắt cận mặt trong khung tròn (nền gradient nhạt cyan → lavender); biểu tượng răng-thoại vẫn dùng cho nút nổi / tab / bong bóng */
.tl-av { overflow: hidden; background: linear-gradient(135deg, #d9f1fd, #ece6ff); box-shadow: inset 0 0 0 1px var(--tl-b100); }
.tl-av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.5); transform-origin: 50% 24%; }
.tl-hd .tl-av, .tl-a > .tl-av { width: 32px; height: 32px; }
.tl-a { grid-template-columns: 32px minmax(0, 1fr); }
.tl-panel .tl-a, .tl-a { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
.tl-panel .tl-a > .tl-av { display: grid; width: 28px; height: 28px; }
.tl-panel .tl-a { grid-template-columns: 28px minmax(0, 1fr); }
.tl-a.is-think > .tl-av { animation: tlBob 1.1s ease-in-out infinite; }
@keyframes tlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 767px) { .tl-a { grid-template-columns: 28px minmax(0, 1fr); } .tl-a > .tl-av { display: grid; width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .tl-a.is-think > .tl-av { animation: none; } }
/* nhãn độ tin cậy 3 mức, chữ 11px: cao = xanh lá, vừa = vàng, thấp = xám-đỏ nhạt */
.tl-conf.mid i { color: #b7791f; } .tl-conf.mid { color: #8a5a10; }
.tl-conf.lo { color: #9a4b57; } .tl-conf.lo i { color: #cf3b41; }

/* chip thời gian (ngày cụ thể + buổi) và ô sửa gọn */
.tl-ent .e.time { background: #e8f6f1; color: #0a7e63; }
.tl-ent .e.time.guess { background: #fff; color: var(--tl-ink5); }
.tl-tp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; margin: 4px 0; border: 1px solid var(--tl-b200); border-radius: var(--ds-rd-md, 6px); background: #fff; }
.tl-tp input[type="date"] { height: 28px; border: 1px solid var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); font: inherit; font-size: 12px; padding: 0 6px; color: var(--tl-ink9); }
.tl-tp button { height: 28px; padding: 0 10px; border: 1px solid var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); background: #fff; font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-tp button[aria-pressed="true"] { background: var(--tl-b100); border-color: var(--tl-blue); color: var(--tl-link); }
.tl-tp .go { background: linear-gradient(90deg, #38bdf8, #548feb); border-color: transparent; color: var(--tl-ink9); }
.tl-tp .x { width: 28px; padding: 0; border: 0; color: var(--tl-ink5); }

/* =====================================================================================================
   ĐỢT 2 — TRỢ LÝ DẪN ĐẾN KẾT QUẢ: thẻ "Lịch hẹn đề xuất" / "Đã đặt hẹn" trong chat, khối kết quả theo loại, "Bước tiếp theo".
   Nút phẳng (không bóng, không gradient), màu chính xanh dương --tl-btn, bo 4px, chữ ≥ 11px, không thanh cuộn hiện, không vạch trái.
   ===================================================================================================== */
.tl-bt { height: 36px; padding: 0 14px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-line2); background: #fff; color: var(--tl-ink7); font-size: 13px; font-weight: var(--ds-fw-600, 600); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; box-shadow: none; transition: background .15s, border-color .15s, color .15s; }
.tl-bt i { font-size: 15px; flex: none; }
.tl-bt:hover { background: var(--tl-soft); }
.tl-bt.gh { color: var(--tl-link); border-color: var(--tl-b200); background: #fff; }
.tl-bt.gh:hover { background: var(--tl-b50); border-color: var(--tl-blue); }
.tl-bt.pri, .tl-bt.pri:visited { background: var(--tl-btn); border-color: var(--tl-btn); color: #fff; font-weight: var(--ds-fw-700, 700); }
.tl-bt.pri:hover { background: var(--tl-btnh); border-color: var(--tl-btnh); color: #fff; }
.tl-bt.sm { height: 32px; padding: 0 11px; font-size: 12px; }
.tl-bt.ico { width: 32px; padding: 0; flex: none; }
.tl-bt.ico.on { color: #cf3b41; border-color: #f4b6c0; background: #fdeef0; }
.tl-bt.fl { flex: 1; }
.tl-bt:disabled, .tl-bt[aria-busy="true"] { opacity: .6; cursor: default; }
.tl-bt:focus-visible, .tl-cp:focus-visible, .tl-bk .lk:focus-visible, .tl-bk-gone .lk:focus-visible, .tl-bk-ct input:focus-visible { outline: 2px solid var(--tl-blue); outline-offset: 2px; }
.tl-spin { animation: tlSpin 1s linear infinite; }

.tl-cp { height: 30px; padding: 0 11px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-line2); background: #fff; color: var(--tl-ink7); font-size: 12px; font-weight: var(--ds-fw-600, 600); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: background .15s, border-color .15s; }
.tl-cp i { font-size: 14px; }
.tl-cp:hover { border-color: var(--tl-blue); background: var(--tl-b50); }
.tl-cp[aria-pressed="true"], .tl-cp[aria-checked="true"] { background: var(--tl-b100); border-color: var(--tl-blue); color: var(--tl-link); }
.tl-cp.off { color: var(--tl-ink5); background: #f7f8fb; border-style: dashed; cursor: not-allowed; }
.tl-cp.off:hover { background: #fff; border-color: var(--tl-line2); }

.tl-tg { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); font-size: 11px; font-weight: var(--ds-fw-700, 700); background: #fdf6e0; color: #8a6510; white-space: nowrap; vertical-align: middle; }
.tl-tg.sp { background: #f3effe; color: #6d44d8; }
.tl-tg.mu { background: var(--tl-soft); color: var(--tl-ink5); box-shadow: inset 0 0 0 1px var(--tl-line); font-weight: var(--ds-fw-600, 600); }
.tl-tg.hot { background: #fff1e6; color: var(--tl-orange); }

/* thẻ đặt hẹn */
.tl-bkw { margin-top: 12px; }
.tl-bk { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--tl-b200); border-radius: var(--ds-rd-md, 6px); background: #fff; max-width: 600px; }
.tl-bk-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tl-bk-h .k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); }
.tl-bk-h .k i { font-size: 15px; color: var(--tl-blue); }
.tl-bk-h .md { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--ds-rd-sm, 4px); font-size: 11px; font-weight: var(--ds-fw-700, 700); }
.tl-bk-h .md.direct { background: #e8f6f1; color: var(--tl-mint7); }
.tl-bk-h .md.callcenter { background: var(--tl-b50); color: var(--tl-link); }
.tl-bk-cl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-bk-cl .tl-lg { flex: none; width: 44px; height: 44px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-line); background: var(--tl-soft); display: grid; place-items: center; overflow: hidden; color: #a6c9ff; font-size: 22px; }
.tl-bk-cl .tl-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tl-bk-cl .tl-nm { min-width: 0; }
.tl-bk-cl .n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-bk-cl .n b { font-size: 15px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); line-height: 1.3; }
.tl-bk-cl .n a { color: inherit; text-decoration: none; }
.tl-bk-cl small { display: block; font-size: 12px; color: var(--tl-ink5); line-height: 1.4; margin-top: 1px; }
.tl-bk-when { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ds-rd-sm, 4px); background: var(--tl-b50); }
.tl-bk-when .ic { flex: none; width: 40px; height: 40px; border-radius: var(--ds-rd-sm, 4px); background: #fff; color: var(--tl-blue); display: grid; place-items: center; font-size: 22px; }
.tl-bk-when .d { display: block; font-size: 20px; font-weight: var(--ds-fw-800, 800); color: var(--tl-ink9); line-height: 1.2; }
.tl-bk-when .p { display: block; margin-top: 2px; font-size: 14px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-bk-md { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tl-ink5); }
.tl-bk-wn { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border: 1px solid #f5d9a8; border-radius: var(--ds-rd-sm, 4px); background: #fff4e5; }
.tl-bk-wn > i { font-size: 20px; color: var(--tl-orange); flex: none; margin-top: 1px; }
.tl-bk-wn > div { flex: 1; min-width: 160px; }
.tl-bk-wn b { display: block; font-size: 13px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-bk-wn.is-closed > i { color: #b45309; }
.tl-bk-wn .tl-wn-go { margin-top: 8px; height: 36px; }
.tl-bk-wn span { display: block; font-size: 12px; color: var(--tl-ink7); margin-top: 1px; }
.tl-bk-dl { margin: 0; display: grid; gap: 6px; }
.tl-bk-dl > div { display: flex; gap: 10px; align-items: baseline; }
.tl-bk-dl dt { flex: none; width: 104px; font-size: 12px; color: var(--tl-ink5); }
.tl-bk-dl dd { margin: 0; min-width: 0; font-size: 13px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink9); overflow-wrap: anywhere; }
.tl-bk-dl dd .mu { color: var(--tl-ink5); font-weight: var(--ds-fw-400, 400); }
.tl-bk-dl dd b { font-weight: var(--ds-fw-700, 700); }
.tl-bk-ed { display: grid; gap: 10px; padding: 10px 12px; border: 1px dashed var(--tl-b200); border-radius: var(--ds-rd-sm, 4px); }
.tl-bk-ed .r { display: flex; align-items: center; gap: 10px; }
.tl-bk-ed .l { flex: none; width: 76px; font-size: 12px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink5); }
.tl-bk-ed .cs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tl-bk-ed .ft { display: flex; justify-content: flex-end; }
.tl-bk-ed .tl-bt.sm:not(.gh) { background: var(--tl-btn); border-color: var(--tl-btn); color: #fff; }
.tl-dt { height: 30px; border: 1px solid var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); padding: 0 8px; font: inherit; font-size: 12px; color: var(--tl-ink9); background: #fff; }
.tl-bk-ct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tl-bk-ct label.f { display: grid; gap: 4px; min-width: 0; align-content: start; }
.tl-bk-ct label.f > span { font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-bk-ct label.f em { font-style: normal; font-weight: var(--ds-fw-400, 400); font-size: 11px; color: var(--tl-ink5); margin-left: 4px; white-space: nowrap; }
.tl-bk-ct label.f em i { font-size: 12px; vertical-align: -1px; margin-right: 2px; color: var(--tl-mint7); }
.tl-bk-ct input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); background: #fff; font: inherit; font-size: 14px; color: var(--tl-ink9); box-shadow: none; }
.tl-bk-ct input:focus { border-color: var(--tl-blue); outline: 0; box-shadow: 0 0 0 3px rgba(84, 143, 235, .18); }
.tl-bk-ct input[readonly] { background: var(--tl-soft); color: var(--tl-ink7); }
.tl-bk-ct .bad input { border-color: #cf3b41; }
.tl-bk-ct .er { font-size: 12px; color: #b4233f; line-height: 1.4; }
.tl-bk-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-bk-ch .l { font-size: 12px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink5); margin-right: 4px; }
.tl-bk-nt { margin: 0; display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.5; color: var(--tl-ink5); }
.tl-bk-nt i { font-size: 14px; margin-top: 1px; flex: none; }
.tl-bk-er { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #f4b6c0; border-radius: var(--ds-rd-sm, 4px); background: #fdeef0; }
.tl-bk-er > i { font-size: 20px; color: #cf3b41; flex: none; }
.tl-bk-er b { display: block; font-size: 13px; font-weight: var(--ds-fw-700, 700); color: #8f1d33; }
.tl-bk-er span { display: block; font-size: 12px; line-height: 1.5; color: #5b1a28; margin-top: 1px; }
.tl-bk-ft { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-bk-ft .pri { flex: 1 1 190px; font-size: 14px; }
.tl-bk-ft .tl-bt { height: 38px; }
.tl-bk-ln { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tl-bk .lk, .tl-bk-gone .lk, .tl-cq .lk { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tl-bk-fine { margin: 0; font-size: 11px; line-height: 1.5; color: var(--tl-ink5); }
.tl-bk-gone { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); font-size: 13px; color: var(--tl-ink5); }
.tl-bk-gone i { font-size: 16px; color: var(--tl-ink4); }
.tl-bk-gone span { flex: 1; min-width: 0; }

/* đã đặt hẹn */
.tl-bkr { border-color: #a7dccd; }
.tl-bkr:focus { outline: 0; }
.tl-bkr-top { display: flex; align-items: center; gap: 12px; }
.tl-bkr-top .ck { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e8f6f1; display: grid; place-items: center; }
.tl-bkr-top .ck svg { width: 30px; height: 30px; fill: none; stroke: var(--tl-mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-bkr-top .ck circle { stroke-dasharray: 66; stroke-dashoffset: 66; animation: tlDraw .55s var(--tl-ease) .05s forwards; }
.tl-bkr-top .ck path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: tlDraw .4s var(--tl-ease) .5s forwards; }
@keyframes tlDraw { to { stroke-dashoffset: 0; } }
.tl-bkr-top b { display: block; font-size: 17px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-bkr-top small { display: block; font-size: 12px; color: var(--tl-ink5); }
.tl-bkr-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px dashed var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); background: var(--tl-soft); }
.tl-bkr-code .l { display: block; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); }
.tl-bkr-code .cd { display: block; font-size: 22px; font-weight: var(--ds-fw-800, 800); letter-spacing: .04em; color: var(--tl-ink9); font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.tl-bkr-code .tl-bt.ok { color: var(--tl-mint7); border-color: #a7dccd; background: #e8f6f1; }
.tl-bkr-st { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); line-height: 1.5; }
.tl-bkr-st i { font-size: 17px; color: var(--tl-mint7); flex: none; margin-top: 1px; }
.tl-bkr-st.mu { font-size: 12px; font-weight: var(--ds-fw-400, 400); color: var(--tl-ink5); }
.tl-bkr-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-bkr-cal .l { font-size: 12px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink5); margin-right: 4px; }
.tl-bkr-ac { display: flex; flex-wrap: wrap; gap: 8px; }

/* khối kết quả theo loại */
.tl-cd h4 a { color: inherit; text-decoration: none; }
.tl-cd h4 a:hover { color: var(--tl-link); }
.tl-cd .ph .no { display: grid; place-items: center; height: 100%; color: var(--tl-b200); font-size: 32px; }
.tl-cd .ph.r32 { aspect-ratio: 3 / 2; } .tl-cd .ph.r43 { aspect-ratio: 4 / 3; }
.tl-cd .ex { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tl-ink5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-ca .ft { padding-top: 6px; }
.tl-cv { padding: 12px; gap: 8px; }
.tl-cv .tp { display: flex; gap: 10px; align-items: center; }
.tl-cv .tp .ic { flex: none; width: 36px; height: 36px; border-radius: var(--ds-rd-sm, 4px); background: var(--tl-b50); color: var(--tl-blue); display: grid; place-items: center; font-size: 20px; }
.tl-cv .ft { margin-top: auto; padding-top: 4px; }
.tl-cv .ft .tl-bt { white-space: normal; text-align: left; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.tl-cj .bd { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.tl-cj .who { font-size: 13px; color: var(--tl-ink7); }
.tl-cj .tl-sal { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-cj .tl-sal i { color: var(--tl-mint); font-size: 16px; }
.tl-cj .meta.cj { gap: 4px 12px; }
.tl-cj .meta.cj span { display: inline-flex; align-items: center; gap: 4px; }
.tl-cj .meta.cj i { font-size: 13px; color: var(--tl-ink4); }
.tl-cj .ft, .tl-cl .ft { gap: 6px; }
.tl-cl .ck { background: var(--tl-b50); color: var(--tl-link); }
.tl-cl .meta i { font-size: 13px; }
.tl-cq .who { display: flex; align-items: center; gap: 8px; }
.tl-cq .who img, .tl-cq .who .av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-cq .who .av { background: var(--tl-blue); color: #fff; font-size: 12px; font-weight: var(--ds-fw-700, 700); display: grid; place-items: center; }
.tl-cq .who b { display: block; font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); line-height: 1.25; }
.tl-cq .who small { display: block; font-size: 12px; line-height: 1.25; margin-top: 1px; }
.tl-cq h4 { font-size: 14px; }

/* bước tiếp theo */
.tl-na { margin-top: 16px; padding: 12px; border: 1px solid var(--tl-b100); border-radius: var(--ds-rd-md, 6px); background: var(--tl-b50); }
.tl-na .lb { margin-bottom: 8px; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink5); }
.tl-na .bs { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-na .tl-bt { height: 38px; }
.tl-na .tl-bt.pri { font-size: 14px; }

/* khung hẹp (bảng nổi 400px / điện thoại) */
@container (max-width: 480px) {
  .tl-bk-ct { grid-template-columns: minmax(0, 1fr); }
  .tl-bk-ed .r { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tl-bk-ed .l { width: auto; }
  .tl-bk-dl dt { width: 92px; }
  .tl-bk-ft .tl-bt:not(.pri) { flex: 1 1 calc(50% - 4px); padding: 0 8px; }
  .tl-bkr-ac .tl-bt { flex: 1 1 calc(50% - 4px); padding: 0 8px; }
  .tl-bkr-ac .tl-bt.pri { flex-basis: 100%; }
  .tl-na .tl-bt { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .tl-bk { padding: 12px; }
  .tl-bk-when .d { font-size: 18px; }
  .tl-bk-ct input { font-size: 16px; height: 40px; }
  .tl-bk-ft .tl-bt { height: 40px; }
  .tl-bt { height: 34px; }
  .tl-bt.sm { height: 32px; }
  .tl-cp { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-bkr-top .ck :is(circle, path) { animation: none; stroke-dashoffset: 0; }
  .tl-spin { animation-duration: 3s; }
}
.tl-cq { padding: 12px; gap: 8px; }
.tl-cq .tl-tg { align-self: flex-start; }
@container (max-width: 480px) {
  .tl-bk-ft .tl-bt:not(.pri) { flex: 1 1 auto; padding: 0 10px; }
}
.tl-bt.ico i { color: var(--tl-ink4); }
.tl-bt.ico.on i { color: #cf3b41; }
@container (max-width: 480px) {
  .tl-bk-ft .tl-bt:not(.pri), .tl-bkr-ac .tl-bt { flex: 1 1 auto; min-width: 0; white-space: normal; height: auto; min-height: 38px; line-height: 1.25; padding: 6px 10px; text-align: center; }
  .tl-bkr-ac .tl-bt.sm { min-height: 34px; }
}
/* khớp hợp đồng thật: thẻ bài viết ngang, ô nhập khe trong chat, chú thích khoá */
.tl-cd.tl-ca { flex-direction: row; align-items: stretch; }
.tl-ca .th { flex: none; width: 72px; background: var(--tl-b50); color: var(--tl-b200); display: grid; place-items: center; font-size: 26px; overflow: hidden; }
.tl-ca .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-ca .in { padding: 10px 12px; }
.tl-ca .ft { padding-top: 4px; }
.tl-cl .bd { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tl-bk-md i { font-size: 14px; vertical-align: -2px; margin-right: 4px; color: var(--tl-mint7); }
.tl-bk .tl-lk { font-size: 13px; color: var(--tl-mint7); vertical-align: -2px; margin-left: 4px; }
.tl-cf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--tl-b200); border-radius: var(--ds-rd-md, 6px); background: #fff; max-width: 560px; }
.tl-cf label.f { display: grid; gap: 4px; flex: 1 1 170px; min-width: 0; }
.tl-cf label.f > span { font-size: 12px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink7); }
.tl-cf input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--tl-line2); border-radius: var(--ds-rd-sm, 4px); background: #fff; font: inherit; font-size: 14px; color: var(--tl-ink9); box-shadow: none; }
.tl-cf input:focus { border-color: var(--tl-blue); outline: 0; box-shadow: 0 0 0 3px rgba(84, 143, 235, .18); }
.tl-cf .tl-bt { height: 38px; }
.tl-cf .er { flex: 1 1 100%; font-size: 12px; color: #b4233f; }
.tl-cf .er[hidden] { display: none; }
.tl-dt.tl-sv { width: 170px; }
@media (max-width: 767px) { .tl-cf input { font-size: 16px; height: 40px; } .tl-cf .tl-bt { flex: 1 1 100%; height: 40px; } }
.tl-cp em { font-style: normal; font-size: 11px; font-weight: var(--ds-fw-400, 400); color: var(--tl-ink5); margin-left: 2px; }
.tl-cp.off[aria-checked="true"] { opacity: 1; border-style: solid; }
.tl-cp.off { cursor: pointer; }

/* chữ mẫu chạy trong ô nhập: lớp phủ aria-hidden (ô thật có placeholder tĩnh, ẩn bằng màu trong suốt); nhãn nhóm nhỏ nhạt; con trỏ mảnh */
.tl-fld textarea::placeholder { color: transparent; }
.tl-ph { color: var(--tl-ink5); display: flex; align-items: center; gap: 8px; }
.tl-ph::after { display: none; }
.tl-ph .pf { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); font-size: 11px; line-height: 1; font-weight: var(--ds-fw-700, 700); }
.tl-ph .pf:empty { display: none; }
.tl-ph .pf.k-ex { background: #e6eefb; color: #2061d7; }
.tl-ph .pf.k-how { background: #f1ecff; color: #6d44d8; }
.tl-ph .pf.k-tip { background: #e6f6f0; color: #0a7e63; }
.tl-ph .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ph .cur { flex: none; width: 1.5px; height: 15px; background: var(--tl-vio); margin-left: -6px; animation: tlBlink 1s steps(1) infinite; }
.tl-ph:not(:has(.pf:not(:empty))) .cur { margin-left: 0; }
.tl-ph.static .cur { display: none; }
.tl-fld:focus-within .tl-ph, .tl-fld:focus-within .tl-use { display: none; }
.tl-use { display: none; position: absolute; right: 0; top: 3px; height: 24px; padding: 0 9px; border-radius: var(--ds-rd-sm, 4px); border: 1px solid var(--tl-b200); background: #fff; color: var(--tl-link); font-size: 12px; font-weight: var(--ds-fw-600, 600); cursor: pointer; z-index: 2; }
.tl-use:hover { background: var(--tl-b50); border-color: var(--tl-blue); }
.tl-fld:hover .tl-use.on { display: inline-flex; align-items: center; }
@media (hover: none) { .tl-use { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tl-ph .cur { animation: none; } }
.tl-fld textarea:not(:placeholder-shown) ~ .tl-use { display: none !important; }
.tl-panel:focus { outline: 0; }

/* Nhãn minh bạch cho câu trả lời do tầng AI diễn đạt (r.generated === true): 11px ink-500, icon 12px căn theo dòng đầu */
.tl-ai-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--tl-ink5, #6a6f80); cursor: help; }
.tl-ai-note i { flex: none; margin-top: 2px; font-size: 12px; }
.tl-ai-note span { min-width: 0; }

/* =====================================================================================================
   KHỐI KẾT QUẢ DẠNG HÀNG GỌN (thay thẻ ảnh bìa lớn): tối đa 3 hàng + "Xem thêm"; cột thẳng lề trái, nút cố định vị trí, không ô trống.
   Tiêu đề khối 11/700 hoa ink-500; tên 14/700 một dòng; meta 12 ink-500; chip lý do 11/600; nút 28px phẳng, không bóng.
   ===================================================================================================== */
.tl-rb { margin-top: 14px; }
.tl-rbh { margin-bottom: 8px; }
.tl-rbh h3 .ct { font-weight: var(--ds-fw-600, 600); color: var(--tl-ink5); letter-spacing: .04em; }
.tl-rbn { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--tl-ink7); }
.tl-rbn i { font-size: 14px; color: var(--tl-blue); margin-top: 1px; flex: none; }
.tl-rl { display: grid; gap: 8px; max-width: 720px; }
.tl-rw { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 12px; min-height: 64px; border: 1px solid var(--tl-line); border-radius: var(--ds-rd-md, 6px); background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.tl-rw:hover { border-color: var(--tl-b200); }
.tl-rw .tl-lg { width: 48px; height: 48px; border-radius: var(--ds-rd-md, 6px); border: 1px solid var(--tl-line); background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.tl-rw .tl-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tl-rw .tl-lg.sq img { object-fit: cover; }
.tl-rw .tl-lg.rd { border-radius: 50%; }
.tl-rw .tl-lg.rd img { object-fit: cover; }
.tl-rw .tl-lg.ini { border: 0; font-size: 16px; font-weight: var(--ds-fw-700, 700); line-height: 1; }
.tl-rw .tl-lg.ini i { font-size: 22px; }
.tl-rw .tl-lg.tl-vt { border: 0; font-size: 11px; font-weight: var(--ds-fw-700, 700); text-transform: uppercase; letter-spacing: .02em; text-align: center; line-height: 1.15; }
.tl-rw .tl-lg.tl-kfl { background: #ffe9e4; color: #c2410c; }
.tl-rw .tl-lg.tl-kvc { background: #e8f6f1; color: var(--tl-mint7); }
.tl-rw .tl-lg.tl-kev { background: #f3effe; color: #6d44d8; }
.tl-rw .bd { min-width: 0; display: grid; gap: 3px; align-content: start; }
.tl-rw .r1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-rw .tl-nm { min-width: 0; flex: 0 1 auto; font-size: 14px; font-weight: var(--ds-fw-700, 700); line-height: 1.35; color: var(--tl-ink9); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-rw .tl-nm.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-rw .tl-nm a { color: inherit; text-decoration: none; }
.tl-rw .tl-nm a:hover { color: var(--tl-link); }
.tl-rw .r1 .tl-tg { flex: none; }
.tl-rw .tl-ok { color: var(--tl-mint); font-size: 14px; flex: none; }
.tl-rw .r2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--tl-ink5); overflow: hidden; white-space: nowrap; }
.tl-rw .r2 .pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-rw .r2 .dt { flex: none; color: var(--tl-ink4); }
.tl-rw .r2 .tl-st { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); }
.tl-rw .r2 .tl-st i { color: #f5a623; font-size: 13px; }
.tl-rw .r2 .mu { color: var(--tl-ink5); font-weight: var(--ds-fw-400, 400); }
.tl-rw .r3 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tl-rs { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); background: var(--tl-soft); color: var(--tl-ink7); font-size: 11px; font-weight: var(--ds-fw-600, 600); white-space: nowrap; }
.tl-rs i { font-size: 12px; color: var(--tl-ink5); }
.tl-rs.mu { background: transparent; box-shadow: inset 0 0 0 1px var(--tl-line); color: var(--tl-ink5); }
.tl-rs.sal { background: #e8f6f1; color: var(--tl-mint7); font-weight: var(--ds-fw-700, 700); }
.tl-rs.sal i { color: var(--tl-mint7); }
.tl-best { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--ds-rd-xs, 3px); background: var(--tl-b100); color: var(--tl-link); font-size: 11px; font-weight: var(--ds-fw-700, 700); white-space: nowrap; }
.tl-rw .tl-ac { display: grid; justify-items: end; align-content: start; gap: 6px; min-width: 128px; }
.tl-rw .tl-pr { font-size: 12px; color: var(--tl-ink5); line-height: 1.2; min-height: 16px; }
.tl-rw .tl-pr b { font-size: 13px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-rw .bt { display: flex; gap: 6px; justify-content: flex-end; }
.tl-rw .bt .tl-bt { height: 28px; padding: 0 11px; }
.tl-rw .bt .tl-bt.ico { width: 28px; padding: 0; }
.tl-rw .go { align-self: center; color: var(--tl-ink4); font-size: 14px; }
.tl-rw .tl-ac1 { align-self: center; font-size: 13px; color: var(--tl-ink9); }
.tl-rw .ex { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tl-ink5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-rw .ex.one { -webkit-line-clamp: 1; }
.tl-rw .q1 { font-size: 13px; font-weight: var(--ds-fw-600, 600); color: var(--tl-ink9); line-height: 1.4; }
.tl-rwl.nt { grid-template-columns: minmax(0, 1fr) auto; }
.tl-rwq { grid-template-columns: 20px minmax(0, 1fr); background: var(--tl-soft); }
.tl-rwq > i { color: var(--tl-b200); font-size: 18px; }
.tl-rwl.th { grid-template-columns: 56px minmax(0, 1fr) auto; }
.tl-rwl.th .tl-lg { width: 56px; height: 56px; }
.tl-rwj .tl-ac { min-width: 0; }
.tl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; height: 28px; border: 0; background: none; color: var(--tl-link); font-size: 13px; font-weight: var(--ds-fw-600, 600); text-decoration: none; cursor: pointer; }
.tl-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.tl-more i { font-size: 13px; transition: transform .2s; }
.tl-more:hover i { transform: translateX(3px); }
.tl-more:focus-visible { outline: 2px solid var(--tl-blue); outline-offset: 2px; border-radius: 3px; }
.tl-tb { display: grid; max-width: 720px; border: 1px solid var(--tl-line); border-radius: var(--ds-rd-md, 6px); background: #fff; overflow: hidden; }
.tl-sv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; min-height: 48px; color: inherit; text-decoration: none; }
.tl-sv + .tl-sv { border-top: 1px solid var(--tl-line); }
.tl-sv:hover { background: var(--tl-b50); }
.tl-sv .n { min-width: 0; display: grid; gap: 1px; }
.tl-sv .n b { font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-sv .n small { font-size: 12px; color: var(--tl-ink5); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-sv .p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); white-space: nowrap; }
.tl-sv .p i { color: var(--tl-ink4); font-size: 13px; }
.tl-rb .tl-pt { max-width: 720px; }

/* khung hẹp (bảng nổi 400px / điện thoại): danh sách dọc, giá + nút xuống hàng dưới, thẳng lề với nội dung */
@container (max-width: 480px) {
  .tl-rw { grid-template-columns: 48px minmax(0, 1fr); row-gap: 6px; }
  .tl-rwl.nt { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-rwl.th { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .tl-rwq { grid-template-columns: 20px minmax(0, 1fr); }
  .tl-rw .tl-ac { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; }
  .tl-rwl .go, .tl-rwl .tl-ac1 { grid-column: 3; grid-row: 1; }
  .tl-rw .bt { justify-content: flex-start; }
}
.tl-rw.best { background: var(--tl-b50); border-color: var(--tl-b100); }
.tl-rw.best .r2 .tl-st { color: var(--tl-ink9); }
.tl-rb + .tl-rb { margin-top: 18px; }
.tl-rb .tl-more, .tl-rb a.tl-more { color: var(--tl-link); }
.tl-rw .tl-lg.tl-vt { text-transform: none; letter-spacing: 0; font-size: 11px; }

/* THANG PHÙ HỢP: cột phải của hàng nha khoa (máy tính). "4/5 phù hợp" + thanh các đoạn phẳng màu brand + danh sách ✓/– rút gọn + giá + nút. Mobile: thu thành một dòng bấm mở. */
.tl-rw.hasfit { grid-template-columns: 48px minmax(0, 1fr) 256px; align-items: start; }
.tl-fit { display: grid; gap: 0; align-content: start; min-width: 0; }
.tl-rb .tl-fit-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 1.3; color: var(--tl-ink7); text-align: left; pointer-events: none; cursor: default; }
.tl-fit-h b { font-size: 14px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-fit-bar { display: inline-flex; gap: 2px; flex: 1; max-width: 104px; margin-left: 4px; }
.tl-fit-bar i { flex: 1; height: 4px; border-radius: 1px; background: var(--tl-line2); }
.tl-fit-bar i.on { background: var(--tl-blue); }
.tl-fit-c { display: none; margin-left: auto; font-size: 14px; color: var(--tl-ink5); transition: transform .2s; }
.tl-fit-l { margin: 7px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.tl-fit-l li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--tl-ink7); }
.tl-fit-l li i { flex: none; margin-top: 2px; font-size: 11px; }
.tl-fit-l li.ok i { color: var(--tl-link); }
.tl-fit-l li.no { color: var(--tl-ink5); }
.tl-fit-l li.no i { color: var(--tl-ink4); }
.tl-fit-l .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-fit-ft { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tl-line); }
.tl-fit-ft .tl-pr { font-size: 12px; color: var(--tl-ink5); white-space: nowrap; }
.tl-fit-ft .tl-pr b { font-size: 13px; font-weight: var(--ds-fw-700, 700); color: var(--tl-ink9); }
.tl-fit-ft .bt { display: flex; gap: 6px; }
.tl-fit-ft .bt .tl-bt { height: 28px; padding: 0 11px; }
@container (max-width: 480px) {
  .tl-rw.hasfit { grid-template-columns: 48px minmax(0, 1fr); }
  .tl-rw.hasfit .tl-fit { grid-column: 2; }
  .tl-rb .tl-fit-h { pointer-events: auto; cursor: pointer; min-height: 28px; }
  .tl-fit-c { display: inline-block; }
  .tl-fit.open .tl-fit-c { transform: rotate(180deg); }
  .tl-fit-l { display: none; }
  .tl-fit.open .tl-fit-l { display: grid; }
  .tl-rw.hasfit .tl-fit-ft { grid-column: 2; border-top: 0; padding-top: 0; justify-content: flex-start; gap: 10px; margin-top: 6px; }
  .tl-fit-l { grid-template-columns: minmax(0, 1fr); }
}

/* thang phù hợp v2: nút nằm trong cột phải dưới thang (không còn chân hàng riêng); cột trái có ★ · giá · ưu đãi · +N cơ sở khi có dữ liệu thật */
.tl-fit > .bt { display: flex; gap: 6px; justify-content: flex-end; margin-top: 9px; }
.tl-fit > .bt .tl-bt { height: 28px; padding: 0 11px; }
.tl-fit-l li.na { grid-column: 1 / -1; font-size: 11px; color: var(--tl-ink5); line-height: 1.35; }
.tl-rs.tl-rrt { background: #fff7e6; color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); }
.tl-rs.tl-rrt i { color: #f5a623; }
.tl-rs.tl-rrt .mu { color: var(--tl-ink5); font-weight: var(--ds-fw-400, 400); }
.tl-rs.tl-rpc { background: var(--tl-soft); color: var(--tl-ink5); }
.tl-rs.tl-rpc b { color: var(--tl-ink9); font-weight: var(--ds-fw-700, 700); }
@container (max-width: 480px) { .tl-fit > .bt { justify-content: flex-start; margin-top: 6px; } }