/* ==========================================================================
   LaDo-AI - Giao dien tro ly ao ho tro cong tac xay dung Dang
   Tac gia: Nguyen Anh Trung
   ========================================================================== */

/* ---------- Bien mau ---------- */
.ldtl-app {
	--ldtl-primary: #c8102e;
	--ldtl-accent: #d4a017;

	--ldtl-bg: #f4f6fb;
	--ldtl-bg-2: #ffffff;
	--ldtl-panel: rgba(255, 255, 255, .82);
	--ldtl-panel-solid: #ffffff;
	--ldtl-border: rgba(18, 28, 48, .10);
	--ldtl-border-2: rgba(18, 28, 48, .16);
	--ldtl-text: #16203a;
	--ldtl-text-2: #5b6780;
	--ldtl-text-3: #8a94a8;
	--ldtl-bubble-ai: rgba(255, 255, 255, .92);
	--ldtl-bubble-user: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	--ldtl-shadow: 0 10px 34px rgba(18, 28, 48, .09);
	--ldtl-shadow-lg: 0 24px 60px rgba(18, 28, 48, .16);
	--ldtl-radius: 18px;
	--ldtl-ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	--ldtl-fm: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
	--ldtl-sidebar-w: 286px;

	font-family: var(--ldtl-ff);
	color: var(--ldtl-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ldtl-app[data-theme="dark"] {
	--ldtl-bg: #0c1020;
	--ldtl-bg-2: #121829;
	--ldtl-panel: rgba(20, 27, 46, .78);
	--ldtl-panel-solid: #141b2e;
	--ldtl-border: rgba(255, 255, 255, .09);
	--ldtl-border-2: rgba(255, 255, 255, .16);
	--ldtl-text: #e8edf8;
	--ldtl-text-2: #9fabc4;
	--ldtl-text-3: #71809b;
	--ldtl-bubble-ai: rgba(28, 37, 60, .86);
	--ldtl-shadow: 0 10px 34px rgba(0, 0, 0, .38);
	--ldtl-shadow-lg: 0 24px 60px rgba(0, 0, 0, .52);
}

/* ---------- Trang toan man hinh ---------- */
body.lado-tro-ly-fullscreen {
	overflow: hidden !important;
}

body.lado-tro-ly-fullscreen #wpadminbar {
	z-index: 2147483000;
}

/* ---------- Khung ung dung ---------- */
.ldtl-app {
	position: relative;
	display: flex;
	box-sizing: border-box;
	background: var(--ldtl-bg);
	overflow: hidden;
	isolation: isolate;
}

.ldtl-app * {
	box-sizing: border-box;
}

.ldtl-app.is-fullscreen {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 99990;
}

body.admin-bar .ldtl-app.is-fullscreen {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}

.ldtl-app.is-embedded {
	height: 78vh;
	min-height: 520px;
	border: 1px solid var(--ldtl-border);
	border-radius: 22px;
	box-shadow: var(--ldtl-shadow-lg);
	margin: 24px 0;
}

/* ---------- Nen chuyen dong ---------- */
.ldtl-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ldtl-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .30;
	will-change: transform;
}

.ldtl-app[data-theme="dark"] .ldtl-blob {
	opacity: .34;
}

.ldtl-blob-1 {
	width: 46vw;
	height: 46vw;
	min-width: 340px;
	min-height: 340px;
	left: -12vw;
	top: -14vw;
	background: var(--ldtl-primary);
	animation: ldtlDrift1 26s ease-in-out infinite;
}

.ldtl-blob-2 {
	width: 40vw;
	height: 40vw;
	min-width: 300px;
	min-height: 300px;
	right: -10vw;
	top: 18vh;
	background: var(--ldtl-accent);
	animation: ldtlDrift2 32s ease-in-out infinite;
}

.ldtl-blob-3 {
	width: 34vw;
	height: 34vw;
	min-width: 260px;
	min-height: 260px;
	left: 34vw;
	bottom: -18vw;
	background: #2f6df6;
	opacity: .18;
	animation: ldtlDrift3 38s ease-in-out infinite;
}

.ldtl-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(120, 132, 160, .10) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(120, 132, 160, .10) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
	animation: ldtlGridShift 40s linear infinite;
}

@keyframes ldtlDrift1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(8vw, 6vh) scale(1.14); }
}

@keyframes ldtlDrift2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-7vw, 9vh) scale(.88); }
}

@keyframes ldtlDrift3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-6vw, -8vh) scale(1.2); }
}

@keyframes ldtlGridShift {
	to { background-position: 46px 46px; }
}

/* ---------- Bang dieu huong ---------- */
.ldtl-sidebar {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--ldtl-sidebar-w);
	width: var(--ldtl-sidebar-w);
	height: 100%;
	padding: 16px 14px;
	gap: 14px;
	background: var(--ldtl-panel);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	border-right: 1px solid var(--ldtl-border);
	transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-side-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ldtl-side-mark {
	display: block;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(200, 16, 46, .28);
}

.ldtl-side-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ldtl-side-title {
	display: flex;
	flex-direction: column;
	line-height: 1.24;
	min-width: 0;
}

.ldtl-side-title strong {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.2px;
}

.ldtl-side-title small {
	font-size: 10.5px;
	color: var(--ldtl-text-3);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.ldtl-side-close {
	display: none;
	margin-left: auto;
}

.ldtl-new-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--ldtl-primary), #a00d25);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(200, 16, 46, .30);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ldtl-new-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(200, 16, 46, .40);
	filter: brightness(1.06);
}

.ldtl-new-btn:active {
	transform: translateY(0) scale(.98);
}

.ldtl-side-section {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ldtl-side-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--ldtl-text-3);
	padding: 0 4px;
}

.ldtl-conv-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	scrollbar-width: thin;
}

.ldtl-conv-list li {
	margin: 0 0 4px;
	padding: 0;
}

.ldtl-conv-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	color: var(--ldtl-text-2);
	font-family: inherit;
	font-size: 12.6px;
	text-align: left;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.ldtl-conv-item:hover {
	background: rgba(127, 140, 170, .12);
	color: var(--ldtl-text);
}

.ldtl-conv-item.is-active {
	background: var(--ldtl-primary-soft, rgba(200, 16, 46, .10));
	border-color: rgba(200, 16, 46, .28);
	color: var(--ldtl-text);
	font-weight: 600;
}

.ldtl-conv-item .ldtl-conv-txt {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-conv-del {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--ldtl-text-3);
	cursor: pointer;
	padding: 2px;
	border-radius: 6px;
	opacity: 0;
	transition: opacity .16s ease, color .16s ease;
}

.ldtl-conv-item:hover .ldtl-conv-del {
	opacity: 1;
}

.ldtl-conv-del:hover {
	color: var(--ldtl-primary);
}

.ldtl-side-empty {
	font-size: 12px;
	color: var(--ldtl-text-3);
	margin: 4px 6px;
	font-style: italic;
}

.ldtl-side-foot {
	border-top: 1px solid var(--ldtl-border);
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ldtl-side-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 11.4px;
	line-height: 1.5;
	color: var(--ldtl-text-2);
	background: var(--ldtl-accent-soft, rgba(212, 160, 23, .12));
	border: 1px solid rgba(212, 160, 23, .26);
	border-radius: 11px;
	padding: 9px 10px;
}

.ldtl-side-note svg {
	flex: 0 0 auto;
	color: var(--ldtl-accent);
	margin-top: 1px;
}

.ldtl-credit {
	margin: 0;
	font-size: 10.6px;
	line-height: 1.55;
	color: var(--ldtl-text-3);
}

/* ---------- Khu vuc chinh ---------- */
.ldtl-main {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ldtl-inner {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Thanh tren ---------- */
.ldtl-topbar {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	background: var(--ldtl-panel);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border-bottom: 1px solid var(--ldtl-border);
	flex: 0 0 auto;
}

.ldtl-menu-btn {
	display: none;
}

.ldtl-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	flex: 1 1 auto;
}

.ldtl-brand-avatar {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	overflow: visible;
}

.ldtl-brand-avatar svg,
.ldtl-brand-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.ldtl-pulse-dot {
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #24c07a;
	border: 2px solid var(--ldtl-panel-solid);
	animation: ldtlPulse 2.4s ease-in-out infinite;
}

@keyframes ldtlPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(36, 192, 122, .6); }
	60% { box-shadow: 0 0 0 8px rgba(36, 192, 122, 0); }
}

.ldtl-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.28;
	min-width: 0;
}

.ldtl-brand-text strong {
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: -.2px;
}

.ldtl-brand-text small {
	font-size: 11.4px;
	color: var(--ldtl-text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-top-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* ---------- Nut ---------- */
.ldtl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--ldtl-border);
	border-radius: 11px;
	background: transparent;
	color: var(--ldtl-text-2);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}

.ldtl-icon-btn:hover {
	background: rgba(127, 140, 170, .14);
	color: var(--ldtl-text);
	transform: translateY(-1px);
}

.ldtl-icon-btn:active {
	transform: scale(.94);
}

.ldtl-ic-moon { display: none; }
.ldtl-app[data-theme="dark"] .ldtl-ic-sun { display: none; }
.ldtl-app[data-theme="dark"] .ldtl-ic-moon { display: block; }

.ldtl-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 13px;
	border: 1px solid var(--ldtl-border-2);
	border-radius: 11px;
	background: transparent;
	color: var(--ldtl-text-2);
	font-family: inherit;
	font-size: 12.6px;
	font-weight: 600;
	cursor: pointer;
	transition: all .18s ease;
}

.ldtl-chip-btn:hover {
	border-color: var(--ldtl-accent);
	color: var(--ldtl-text);
}

.ldtl-chip-btn.is-on {
	background: linear-gradient(135deg, rgba(47, 109, 246, .16), rgba(47, 109, 246, .06));
	border-color: rgba(47, 109, 246, .55);
	color: #2f6df6;
	box-shadow: 0 0 0 3px rgba(47, 109, 246, .12);
}

.ldtl-app[data-theme="dark"] .ldtl-chip-btn.is-on {
	color: #7ea8ff;
}

.ldtl-chip-btn.is-on svg {
	animation: ldtlSpinSlow 7s linear infinite;
}

@keyframes ldtlSpinSlow {
	to { transform: rotate(360deg); }
}

/* ---------- Vung tin nhan ---------- */
.ldtl-stream {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 26px 0 12px;
	scroll-behavior: smooth;
	outline: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(140, 152, 178, .45) transparent;
}

.ldtl-stream::-webkit-scrollbar { width: 9px; }
.ldtl-stream::-webkit-scrollbar-track { background: transparent; }
.ldtl-stream::-webkit-scrollbar-thumb {
	background: rgba(140, 152, 178, .38);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.ldtl-stream::-webkit-scrollbar-thumb:hover { background: rgba(140, 152, 178, .6); background-clip: content-box; }

/* ---------- Man hinh chao ---------- */
.ldtl-hero {
	text-align: center;
	padding: 22px 0 34px;
	animation: ldtlFadeUp .7s cubic-bezier(.22, 1, .36, 1) both;
}

.ldtl-hero.is-hidden { display: none; }

.ldtl-hero-orb {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto 20px;
}

.ldtl-orb-core {
	position: absolute;
	inset: 16px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(200, 16, 46, .30);
	animation: ldtlFloat 5s ease-in-out infinite;
	display: block;
}

.ldtl-orb-core svg,
.ldtl-orb-core img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

.ldtl-orb-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.6px solid transparent;
	border-top-color: var(--ldtl-primary);
	border-right-color: var(--ldtl-accent);
	animation: ldtlSpin 4.2s linear infinite;
}

.ldtl-orb-ring-2 {
	inset: 8px;
	border-top-color: var(--ldtl-accent);
	border-right-color: transparent;
	border-left-color: var(--ldtl-primary);
	animation: ldtlSpin 6.4s linear infinite reverse;
	opacity: .7;
}

@keyframes ldtlSpin { to { transform: rotate(360deg); } }

@keyframes ldtlFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

.ldtl-hero-title {
	margin: 0 0 10px;
	font-size: clamp(23px, 3.6vw, 32px);
	font-weight: 800;
	letter-spacing: -.6px;
	line-height: 1.22;
	background: linear-gradient(120deg, var(--ldtl-primary), var(--ldtl-accent), var(--ldtl-primary));
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: ldtlShine 7s linear infinite;
}

@keyframes ldtlShine {
	to { background-position: 220% center; }
}

.ldtl-hero-text {
	margin: 0 auto 26px;
	max-width: 620px;
	font-size: 14.6px;
	line-height: 1.72;
	color: var(--ldtl-text-2);
}

.ldtl-suggestions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-width: 720px;
	margin: 0 auto;
}

.ldtl-sugg {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 13px 14px;
	border: 1px solid var(--ldtl-border);
	border-radius: 14px;
	background: var(--ldtl-panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--ldtl-text-2);
	font-family: inherit;
	font-size: 12.8px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .2s ease, color .2s ease;
	animation: ldtlFadeUp .6s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: var(--d, 0s);
}

.ldtl-sugg svg {
	flex: 0 0 auto;
	color: var(--ldtl-accent);
	margin-top: 1px;
	transition: transform .3s ease;
}

.ldtl-sugg:hover {
	transform: translateY(-3px);
	border-color: rgba(200, 16, 46, .40);
	box-shadow: var(--ldtl-shadow);
	color: var(--ldtl-text);
}

.ldtl-sugg:hover svg {
	transform: rotate(18deg) scale(1.16);
}

.ldtl-sugg:active { transform: translateY(-1px) scale(.99); }

@keyframes ldtlFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tin nhan ---------- */
.ldtl-messages {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: 18px;
}

.ldtl-msg {
	display: flex;
	gap: 12px;
	animation: ldtlMsgIn .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ldtlMsgIn {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.ldtl-msg-user { flex-direction: row-reverse; }

.ldtl-msg-avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(18, 28, 48, .14);
}

.ldtl-msg-avatar svg,
.ldtl-msg-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

.ldtl-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #6b7ba0, #46536f);
	color: #fff;
}

.ldtl-avatar-live {
	position: relative;
	animation: ldtlBreath 2.2s ease-in-out infinite;
	overflow: visible;
}

.ldtl-avatar-live::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--ldtl-primary);
	opacity: .5;
	animation: ldtlRipple 1.9s ease-out infinite;
}

@keyframes ldtlBreath {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.07); }
}

@keyframes ldtlRipple {
	0% { transform: scale(.9); opacity: .65; }
	100% { transform: scale(1.5); opacity: 0; }
}

.ldtl-msg-body {
	min-width: 0;
	max-width: calc(100% - 48px);
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ldtl-msg-user .ldtl-msg-body { align-items: flex-end; }

.ldtl-msg-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 11.4px;
	color: var(--ldtl-text-3);
	padding: 0 3px;
}

.ldtl-msg-who {
	font-weight: 700;
	color: var(--ldtl-text-2);
}

.ldtl-bubble {
	padding: 13px 17px;
	border-radius: var(--ldtl-radius);
	font-size: 14.6px;
	line-height: 1.78;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ldtl-bubble-user {
	background: var(--ldtl-bubble-user);
	color: #fff;
	border-bottom-right-radius: 6px;
	box-shadow: 0 6px 20px rgba(200, 16, 46, .26);
	white-space: pre-wrap;
}

.ldtl-bubble-ai {
	background: var(--ldtl-bubble-ai);
	border: 1px solid var(--ldtl-border);
	border-bottom-left-radius: 6px;
	box-shadow: var(--ldtl-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.ldtl-bubble-ai.is-error {
	background: rgba(200, 16, 46, .07);
	border-color: rgba(200, 16, 46, .32);
	color: var(--ldtl-primary);
	font-weight: 600;
}

/* ---------- Noi dung Markdown ---------- */
.ldtl-bubble-ai > *:first-child { margin-top: 0; }
.ldtl-bubble-ai > *:last-child { margin-bottom: 0; }

.ldtl-bubble-ai p { margin: 0 0 11px; }

.ldtl-bubble-ai h1,
.ldtl-bubble-ai h2,
.ldtl-bubble-ai h3,
.ldtl-bubble-ai h4 {
	margin: 20px 0 10px;
	line-height: 1.34;
	font-weight: 800;
	color: var(--ldtl-text);
}

.ldtl-bubble-ai h1 { font-size: 19.5px; text-align: center; text-transform: uppercase; letter-spacing: .2px; }
.ldtl-bubble-ai h2 { font-size: 17px; padding-left: 11px; border-left: 3px solid var(--ldtl-primary); }
.ldtl-bubble-ai h3 { font-size: 15.4px; color: var(--ldtl-primary); }
.ldtl-bubble-ai h4 { font-size: 14.4px; font-style: italic; }

.ldtl-bubble-ai ul,
.ldtl-bubble-ai ol { margin: 0 0 12px; padding-left: 22px; }
.ldtl-bubble-ai li { margin-bottom: 5px; }
.ldtl-bubble-ai li::marker { color: var(--ldtl-primary); font-weight: 700; }

.ldtl-bubble-ai blockquote {
	margin: 12px 0;
	padding: 9px 15px;
	border-left: 3px solid var(--ldtl-accent);
	background: var(--ldtl-accent-soft, rgba(212, 160, 23, .10));
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: var(--ldtl-text-2);
}

.ldtl-bubble-ai code {
	font-family: var(--ldtl-fm);
	font-size: .875em;
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(127, 140, 170, .16);
	color: var(--ldtl-primary);
}

.ldtl-bubble-ai pre {
	margin: 12px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: #10182b;
	color: #e2e8f5;
	overflow-x: auto;
	font-size: 12.8px;
	line-height: 1.62;
}

.ldtl-bubble-ai pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

.ldtl-bubble-ai table {
	width: 100%;
	margin: 13px 0;
	border-collapse: collapse;
	font-size: 13.2px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--ldtl-border);
}

.ldtl-bubble-ai th,
.ldtl-bubble-ai td {
	padding: 9px 11px;
	border: 1px solid var(--ldtl-border);
	text-align: left;
	vertical-align: top;
}

.ldtl-bubble-ai th {
	background: var(--ldtl-primary-soft, rgba(200, 16, 46, .10));
	font-weight: 700;
	white-space: nowrap;
}

.ldtl-bubble-ai tbody tr:nth-child(even) { background: rgba(127, 140, 170, .06); }

.ldtl-bubble-ai a {
	color: var(--ldtl-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.ldtl-bubble-ai hr {
	border: 0;
	border-top: 1px solid var(--ldtl-border-2);
	margin: 16px 0;
}

.ldtl-bubble-ai strong { font-weight: 700; color: var(--ldtl-text); }

/* Con tro danh may */
.ldtl-caret {
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: var(--ldtl-primary);
	animation: ldtlBlink .9s step-end infinite;
}

@keyframes ldtlBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ---------- Khoi suy nghi (reasoning) ---------- */
.ldtl-think {
	border: 1px dashed rgba(212, 160, 23, .5);
	border-radius: 13px;
	background: var(--ldtl-accent-soft, rgba(212, 160, 23, .08));
	overflow: hidden;
	animation: ldtlFadeUp .45s ease both;
}

.ldtl-think-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 13px;
	border: 0;
	background: transparent;
	color: #9a7509;
	font-family: inherit;
	font-size: 12.4px;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
}

.ldtl-app[data-theme="dark"] .ldtl-think-toggle { color: var(--ldtl-accent); }

.ldtl-think-toggle svg:first-child { animation: ldtlBrain 3.4s ease-in-out infinite; }

@keyframes ldtlBrain {
	0%, 100% { transform: scale(1); opacity: .85; }
	50% { transform: scale(1.14); opacity: 1; }
}

.ldtl-think-caret {
	margin-left: auto;
	transition: transform .26s ease;
}

.ldtl-think.is-open .ldtl-think-caret { transform: rotate(180deg); }

.ldtl-think-body {
	display: none;
	padding: 0 14px 12px;
	font-size: 12.9px;
	line-height: 1.72;
	color: var(--ldtl-text-2);
	white-space: pre-wrap;
	max-height: 340px;
	overflow-y: auto;
	border-top: 1px dashed rgba(212, 160, 23, .35);
	padding-top: 11px;
}

.ldtl-think.is-open .ldtl-think-body { display: block; animation: ldtlFadeUp .3s ease both; }

/* ---------- The suy nghi dang cho ---------- */
.ldtl-thinking-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 19px;
	border: 1px solid var(--ldtl-border);
	border-radius: var(--ldtl-radius);
	background: var(--ldtl-bubble-ai);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--ldtl-shadow);
	position: relative;
	overflow: hidden;
	min-width: 300px;
}

.ldtl-thinking-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: ldtlSweep 2.1s ease-in-out infinite;
	pointer-events: none;
}

.ldtl-app[data-theme="dark"] .ldtl-thinking-card::before {
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%);
}

@keyframes ldtlSweep {
	to { transform: translateX(100%); }
}

.ldtl-thinking-orb {
	position: relative;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
}

.ldtl-t-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--ldtl-primary);
	border-left-color: var(--ldtl-accent);
	animation: ldtlSpin 1.15s linear infinite;
}

.ldtl-t-ring-2 {
	inset: 7px;
	border-top-color: var(--ldtl-accent);
	border-left-color: transparent;
	border-bottom-color: var(--ldtl-primary);
	animation: ldtlSpin 1.7s linear infinite reverse;
}

.ldtl-t-core {
	position: absolute;
	inset: 15px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ldtl-accent), var(--ldtl-primary));
	animation: ldtlCore 1.5s ease-in-out infinite;
}

@keyframes ldtlCore {
	0%, 100% { transform: scale(.72); opacity: .75; }
	50% { transform: scale(1.15); opacity: 1; }
}

.ldtl-thinking-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 8px;
}

.ldtl-thinking-line {
	font-size: 13.4px;
	font-weight: 600;
	background: linear-gradient(90deg, var(--ldtl-text-2) 0%, var(--ldtl-primary) 45%, var(--ldtl-text-2) 90%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: ldtlShine 2.6s linear infinite;
	transition: opacity .25s ease;
}

.ldtl-thinking-line.is-swap { opacity: 0; }

.ldtl-dots { display: inline-flex; gap: 3px; align-items: center; }

.ldtl-dots i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ldtl-primary);
	animation: ldtlDot 1.25s ease-in-out infinite;
}

.ldtl-dots i:nth-child(2) { animation-delay: .16s; }
.ldtl-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes ldtlDot {
	0%, 100% { transform: translateY(0); opacity: .35; }
	50% { transform: translateY(-5px); opacity: 1; }
}

.ldtl-wave {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
	width: 100%;
	margin-top: 2px;
	opacity: .8;
}

.ldtl-wave i {
	flex: 1 1 auto;
	max-width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ldtl-accent), var(--ldtl-primary));
	animation: ldtlWave 1.15s ease-in-out infinite;
}

.ldtl-wave i:nth-child(1) { animation-delay: 0s; }
.ldtl-wave i:nth-child(2) { animation-delay: .07s; }
.ldtl-wave i:nth-child(3) { animation-delay: .14s; }
.ldtl-wave i:nth-child(4) { animation-delay: .21s; }
.ldtl-wave i:nth-child(5) { animation-delay: .28s; }
.ldtl-wave i:nth-child(6) { animation-delay: .35s; }
.ldtl-wave i:nth-child(7) { animation-delay: .42s; }
.ldtl-wave i:nth-child(8) { animation-delay: .49s; }
.ldtl-wave i:nth-child(9) { animation-delay: .56s; }
.ldtl-wave i:nth-child(10) { animation-delay: .63s; }
.ldtl-wave i:nth-child(11) { animation-delay: .70s; }
.ldtl-wave i:nth-child(12) { animation-delay: .77s; }

@keyframes ldtlWave {
	0%, 100% { height: 20%; }
	50% { height: 100%; }
}

.ldtl-thinking-timer {
	flex: 0 0 auto;
	font-size: 11.6px;
	font-weight: 700;
	color: var(--ldtl-text-3);
	font-variant-numeric: tabular-nums;
}

/* ---------- Nguon tra cuu ---------- */
.ldtl-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 3px;
	animation: ldtlFadeUp .4s ease both;
}

.ldtl-src-label {
	width: 100%;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--ldtl-text-3);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 2px;
}

.ldtl-src {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 250px;
	padding: 5px 10px;
	border: 1px solid var(--ldtl-border-2);
	border-radius: 20px;
	background: var(--ldtl-panel);
	color: var(--ldtl-text-2);
	font-size: 11.6px;
	text-decoration: none;
	transition: all .18s ease;
}

.ldtl-src span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-src:hover {
	border-color: var(--ldtl-primary);
	color: var(--ldtl-primary);
	transform: translateY(-1px);
}

/* ---------- Thao tac tren tin nhan ---------- */
.ldtl-msg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 1px 3px;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity .22s ease, transform .22s ease;
}

.ldtl-msg-ai:hover .ldtl-msg-actions,
.ldtl-msg-ai:focus-within .ldtl-msg-actions,
.ldtl-msg-actions.is-shown { opacity: 1; transform: translateY(0); }

.ldtl-act {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid var(--ldtl-border);
	border-radius: 9px;
	background: transparent;
	color: var(--ldtl-text-3);
	font-family: inherit;
	font-size: 11.6px;
	font-weight: 600;
	cursor: pointer;
	transition: all .18s ease;
}

.ldtl-act:hover {
	border-color: var(--ldtl-primary);
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft, rgba(200, 16, 46, .07));
	transform: translateY(-1px);
}

.ldtl-act.is-busy { opacity: .6; pointer-events: none; }
.ldtl-act.is-done { color: #15a05f; border-color: rgba(21, 160, 95, .5); }

.ldtl-act-stat {
	font-size: 10.8px;
	color: var(--ldtl-text-3);
	margin-left: 3px;
	font-variant-numeric: tabular-nums;
}

.ldtl-file-card {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 11px 14px;
	border: 1px solid rgba(21, 160, 95, .35);
	border-radius: 13px;
	background: rgba(21, 160, 95, .08);
	animation: ldtlFadeUp .4s ease both;
}

.ldtl-file-card svg { color: #15a05f; flex: 0 0 auto; }

.ldtl-file-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.4;
}

.ldtl-file-info strong {
	font-size: 12.8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-file-info small { font-size: 11px; color: var(--ldtl-text-3); }

.ldtl-file-dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	border-radius: 9px;
	background: #15a05f;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .18s ease, transform .18s ease;
}

.ldtl-file-dl:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

/* ---------- Nut xuong cuoi ---------- */
.ldtl-jump {
	position: absolute;
	right: 24px;
	bottom: 132px;
	z-index: 5;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ldtl-border-2);
	border-radius: 50%;
	background: var(--ldtl-panel-solid);
	color: var(--ldtl-text-2);
	cursor: pointer;
	box-shadow: var(--ldtl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .26s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-jump.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.ldtl-jump:hover { color: var(--ldtl-primary); border-color: var(--ldtl-primary); }

/* ---------- Khung nhap ---------- */
.ldtl-composer {
	position: relative;
	z-index: 4;
	flex: 0 0 auto;
	padding: 12px 0 16px;
	background: linear-gradient(to top, var(--ldtl-bg) 55%, transparent);
}

.ldtl-input-shell {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 9px;
	padding: 9px 9px 9px 16px;
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 22px;
	background: var(--ldtl-panel-solid);
	box-shadow: var(--ldtl-shadow);
	transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.ldtl-input-shell.is-focus {
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 4px var(--ldtl-primary-soft, rgba(200, 16, 46, .12)), var(--ldtl-shadow);
}

.ldtl-shell-glow {
	position: absolute;
	inset: -1.5px;
	border-radius: 22px;
	padding: 1.5px;
	background: linear-gradient(120deg, var(--ldtl-primary), var(--ldtl-accent), var(--ldtl-primary));
	background-size: 220% auto;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	animation: ldtlShine 4s linear infinite;
}

.ldtl-input-shell.is-busy .ldtl-shell-glow { opacity: 1; }

.ldtl-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	resize: none;
	font-family: inherit;
	font-size: 14.6px;
	line-height: 1.62;
	color: var(--ldtl-text);
	max-height: 190px;
	min-height: 38px;
	padding: 7px 0;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Cau nhac khong xuong dong, thieu cho thi cat bang dau ba cham */
.ldtl-input::placeholder {
	color: var(--ldtl-text-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 1;
}

.ldtl-input-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding-bottom: 1px;
}

.ldtl-counter {
	font-size: 11px;
	color: var(--ldtl-text-3);
	font-variant-numeric: tabular-nums;
	min-width: 26px;
	text-align: right;
	transition: color .2s ease;
}

.ldtl-counter.is-warn { color: var(--ldtl-accent); font-weight: 700; }

.ldtl-send {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 5px 16px rgba(200, 16, 46, .34);
	transition: transform .2s cubic-bezier(.22, 1, .36, 1), filter .2s ease, opacity .2s ease;
	overflow: hidden;
}

.ldtl-send:hover { transform: scale(1.08) rotate(8deg); filter: brightness(1.08); }
.ldtl-send:active { transform: scale(.94); }
.ldtl-send:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }

.ldtl-send .ldtl-ic-send { transition: transform .2s ease; }
.ldtl-send.is-busy .ldtl-ic-send { opacity: 0; }

.ldtl-send-spin {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	opacity: 0;
	animation: ldtlSpin .8s linear infinite;
}

.ldtl-send.is-busy .ldtl-send-spin { opacity: 1; }

.ldtl-hint {
	margin: 9px 4px 0;
	font-size: 11.2px;
	color: var(--ldtl-text-3);
	text-align: center;
	line-height: 1.55;
}

.ldtl-hint-sep { margin: 0 5px; opacity: .55; }

.ldtl-locked {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
	padding: 15px 18px;
	border: 1px dashed var(--ldtl-border-2);
	border-radius: 16px;
	background: var(--ldtl-panel);
	color: var(--ldtl-text-2);
	font-size: 13.4px;
}

.ldtl-login-link {
	padding: 6px 15px;
	border-radius: 9px;
	background: var(--ldtl-primary);
	color: #fff;
	font-weight: 700;
	font-size: 12.6px;
	text-decoration: none;
}

/* ---------- Thong bao noi ---------- */
.ldtl-toast-wrap {
	position: absolute;
	z-index: 20;
	left: 50%;
	bottom: 122px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	pointer-events: none;
}

.ldtl-toast {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 17px;
	border-radius: 12px;
	background: rgba(22, 32, 58, .94);
	color: #fff;
	font-size: 12.8px;
	font-weight: 600;
	box-shadow: var(--ldtl-shadow-lg);
	animation: ldtlToastIn .38s cubic-bezier(.22, 1, .36, 1) both;
	max-width: 90vw;
}

.ldtl-toast.is-out { animation: ldtlToastOut .3s ease forwards; }
.ldtl-toast.is-ok { background: rgba(21, 160, 95, .96); }
.ldtl-toast.is-err { background: rgba(200, 16, 46, .96); }

@keyframes ldtlToastIn {
	from { opacity: 0; transform: translateY(14px) scale(.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ldtlToastOut {
	to { opacity: 0; transform: translateY(-8px) scale(.96); }
}

/* ---------- Man che ---------- */
.ldtl-backdrop {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(10, 16, 32, .48);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.ldtl-app.is-side-open .ldtl-backdrop { opacity: 1; visibility: visible; }

/* ---------- Man hinh nho ---------- */
@media (max-width: 1024px) {
	.ldtl-app { --ldtl-sidebar-w: 268px; }

	.ldtl-sidebar {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		transform: translateX(-102%);
		box-shadow: var(--ldtl-shadow-lg);
		background: var(--ldtl-panel-solid);
	}

	.ldtl-app.is-side-open .ldtl-sidebar { transform: translateX(0); }

	.ldtl-menu-btn { display: inline-flex; }
	.ldtl-side-close { display: inline-flex; }
}

@media (max-width: 720px) {
	.ldtl-inner { padding: 0 13px; }

	.ldtl-topbar { padding: 9px 12px; gap: 9px; }
	.ldtl-brand-avatar,
	.ldtl-brand-avatar svg,
	.ldtl-brand-avatar img { width: 34px; height: 34px; flex-basis: 34px; }
	.ldtl-brand-text strong { font-size: 14.4px; }
	.ldtl-brand-text small { display: none; }

	.ldtl-chip-btn span { display: none; }
	.ldtl-chip-btn { padding: 0 11px; }

	.ldtl-stream { padding-top: 18px; }

	.ldtl-hero { padding: 12px 0 24px; }
	.ldtl-hero-orb { width: 76px; height: 76px; }
	.ldtl-hero-text { font-size: 13.8px; margin-bottom: 20px; }
	.ldtl-suggestions { grid-template-columns: 1fr; gap: 8px; }
	.ldtl-sugg { padding: 11px 12px; font-size: 12.4px; }

	.ldtl-msg { gap: 9px; }
	.ldtl-msg-avatar { flex-basis: 30px; width: 30px; height: 30px; }
	.ldtl-msg-body { max-width: calc(100% - 39px); }
	.ldtl-bubble { font-size: 14.2px; padding: 11px 14px; }
	.ldtl-bubble-ai table { font-size: 12.2px; display: block; overflow-x: auto; }

	.ldtl-msg-actions { opacity: 1; transform: none; }
	.ldtl-act span { display: none; }
	.ldtl-act { padding: 6px 9px; }
	.ldtl-act-word span { display: inline; }

	.ldtl-thinking-card { min-width: 0; padding: 12px 14px; gap: 11px; }
	.ldtl-thinking-line { font-size: 12.6px; }
	.ldtl-thinking-timer { display: none; }

	.ldtl-composer { padding: 8px 0 12px; }
	.ldtl-input-shell { padding: 7px 7px 7px 14px; border-radius: 19px; }
	.ldtl-send { width: 38px; height: 38px; flex-basis: 38px; }
	.ldtl-counter { display: none; }
	.ldtl-hint { font-size: 10.4px; }
	.ldtl-hint-sep, .ldtl-hint .ldtl-hint-long { display: none; }

	.ldtl-jump { right: 14px; bottom: 118px; }
	.ldtl-toast-wrap { bottom: 108px; }
}

@media (max-width: 380px) {
	.ldtl-file-card { flex-wrap: wrap; }
}

/* ---------- Uu tien giam chuyen dong ---------- */
@media (prefers-reduced-motion: reduce) {
	.ldtl-app *,
	.ldtl-app *::before,
	.ldtl-app *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- In an ---------- */
@media print {
	.ldtl-sidebar, .ldtl-topbar, .ldtl-composer, .ldtl-jump, .ldtl-aurora, .ldtl-msg-actions { display: none !important; }
	.ldtl-app.is-fullscreen { position: static; height: auto; }
	.ldtl-stream { overflow: visible; }
}

/* ==================================================================
   BO SUNG v1.1: thanh ben thu gon, hop thoai, tep dinh kem, khoi Agent
   ================================================================== */

/* ------------------------------------------------------------------
   1. Thanh ben thu gon duoc
   ------------------------------------------------------------------ */

.ldtl-sidebar {
	transition: margin-left .32s cubic-bezier(.22, 1, .36, 1),
		opacity .24s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-app.is-side-shut .ldtl-sidebar {
	margin-left: calc(var(--ldtl-sidebar-w) * -1);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-14px);
}

.ldtl-side-close {
	margin-left: auto;
	flex: 0 0 auto;
}

/* Nut mo lai thanh ben */
.ldtl-side-open {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 26;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 62px;
	margin-top: -31px;
	padding: 0;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border: 0;
	border-radius: 0 12px 12px 0;
	box-shadow: var(--ldtl-shadow);
	transition: width .2s ease, transform .2s ease;
}

.ldtl-app.is-side-shut .ldtl-side-open { display: flex; }
.ldtl-side-open:hover { width: 32px; }
.ldtl-side-open svg { transform: rotate(180deg); }

.ldtl-side-icon-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 11px;
}

/* ------------------------------------------------------------------
   2. Khoi tai khoan o cuoi thanh ben
   ------------------------------------------------------------------ */

.ldtl-account { margin-bottom: 10px; }

.ldtl-acc-guest {
	display: flex;
	gap: 7px;
}

.ldtl-acc-btn {
	flex: 1;
	padding: 9px 8px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: var(--ldtl-bg-2);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 11px;
	transition: all .18s ease;
}

.ldtl-acc-btn:hover {
	color: var(--ldtl-primary);
	border-color: var(--ldtl-primary);
	transform: translateY(-1px);
}

.ldtl-acc-btn.is-main {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-color: transparent;
}

.ldtl-acc-btn.is-main:hover { color: #fff; filter: brightness(1.08); }

.ldtl-acc-card {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 9px 10px;
	background: var(--ldtl-bg-2);
	border: 1px solid var(--ldtl-border);
	border-radius: 13px;
}

.ldtl-acc-av {
	display: flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 50%;
}

.ldtl-acc-av img { width: 100%; height: 100%; object-fit: cover; }
.ldtl-acc-av svg { width: 18px; height: 18px; }

.ldtl-acc-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.ldtl-acc-info strong {
	overflow: hidden;
	font-size: 12.8px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-acc-info small {
	overflow: hidden;
	font-size: 11px;
	color: var(--ldtl-text-3);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-acc-out {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 8px;
	transition: all .18s ease;
}

.ldtl-acc-out:hover { color: var(--ldtl-primary); background: var(--ldtl-primary-soft); }

/* ------------------------------------------------------------------
   3. Hop thoai (popup)
   ------------------------------------------------------------------ */

.ldtl-modal-wrap {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ldtl-modal-wrap[hidden] { display: none; }

.ldtl-modal-veil {
	position: absolute;
	inset: 0;
	background: rgba(9, 14, 28, .58);
	opacity: 0;
	backdrop-filter: blur(4px);
	transition: opacity .24s ease;
}

.ldtl-modal-wrap.is-open .ldtl-modal-veil { opacity: 1; }

.ldtl-modal {
	position: relative;
	width: 100%;
	max-width: 452px;
	max-height: 90vh;
	overflow: hidden auto;
	background: var(--ldtl-panel-solid);
	border: 1px solid var(--ldtl-border);
	border-radius: 22px;
	box-shadow: var(--ldtl-shadow-lg);
	opacity: 0;
	transform: translateY(18px) scale(.965);
	transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-modal-wrap.is-open .ldtl-modal {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Vien sang chay quanh hop thoai */
.ldtl-modal::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	content: "";
	background: linear-gradient(90deg, var(--ldtl-primary), var(--ldtl-accent), var(--ldtl-primary));
	background-size: 200% 100%;
	animation: ldtlShine 3.4s linear infinite;
}

.ldtl-modal-x {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 9px;
	transition: all .18s ease;
}

.ldtl-modal-x:hover {
	color: var(--ldtl-text);
	background: var(--ldtl-bg);
	transform: rotate(90deg);
}

.ldtl-modal-body { padding: 30px 28px 26px; }

/* --- Dang thong bao --- */
.ldtl-md-note { text-align: center; }

.ldtl-md-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 14px;
	color: #fff;
	border-radius: 50%;
	animation: ldtlPop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}

.ldtl-md-note.is-ok .ldtl-md-icon { background: linear-gradient(135deg, #1f9d55, #16794080); }
.ldtl-md-note.is-warn .ldtl-md-icon { background: linear-gradient(135deg, var(--ldtl-accent), #b8860b); }
.ldtl-md-note.is-err .ldtl-md-icon { background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24); }
.ldtl-md-note.is-ask .ldtl-md-icon { background: linear-gradient(135deg, #2563eb, #1e40af); }

.ldtl-md-title {
	margin: 0 0 8px;
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ldtl-text);
}

.ldtl-md-text {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ldtl-text-2);
}

.ldtl-md-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.ldtl-btn {
	padding: 11px 22px;
	font: inherit;
	font-size: 13.6px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 12px;
	transition: all .18s ease;
}

.ldtl-btn-main {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	box-shadow: 0 6px 18px rgba(200, 16, 46, .28);
}

.ldtl-btn-main:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ldtl-btn-main:disabled { cursor: default; opacity: .6; transform: none; }

.ldtl-btn-ghost {
	color: var(--ldtl-text-2);
	background: var(--ldtl-bg);
	border-color: var(--ldtl-border-2);
}

.ldtl-btn-ghost:hover { color: var(--ldtl-text); border-color: var(--ldtl-text-3); }

/* --- Dang bieu mau --- */
.ldtl-md-form { text-align: center; }

.ldtl-md-crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 17px;
	box-shadow: 0 8px 22px rgba(200, 16, 46, .26);
	animation: ldtlPop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}

.ldtl-md-sub {
	margin: 0 0 16px;
	font-size: 13.2px;
	line-height: 1.6;
	color: var(--ldtl-text-2);
}

.ldtl-md-note-sm {
	padding: 9px 12px;
	margin: 0 0 15px;
	font-size: 12.2px;
	line-height: 1.55;
	color: var(--ldtl-text-2);
	text-align: left;
	background: var(--ldtl-bg);
	border-left: 3px solid var(--ldtl-accent);
	border-radius: 0 9px 9px 0;
}

.ldtl-md-err {
	padding: 10px 13px;
	margin-bottom: 14px;
	font-size: 12.8px;
	line-height: 1.5;
	color: #fff;
	text-align: left;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-radius: 11px;
}

.ldtl-md-err[hidden] { display: none; }
.ldtl-md-err.is-shake { animation: ldtlShake .42s ease; }

.ldtl-fld {
	display: block;
	margin-bottom: 13px;
	text-align: left;
}

.ldtl-fld-lb {
	display: block;
	margin-bottom: 5px;
	font-size: 12.2px;
	font-weight: 600;
	color: var(--ldtl-text-2);
}

.ldtl-fld-in {
	position: relative;
	display: block;
}

.ldtl-fld-ic {
	position: absolute;
	top: 50%;
	left: 12px;
	display: flex;
	align-items: center;
	margin-top: -9px;
	color: var(--ldtl-text-3);
	pointer-events: none;
}

.ldtl-fld-ic svg { width: 18px; height: 18px; }

.ldtl-fld input {
	width: 100%;
	padding: 12px 14px 12px 38px;
	font: inherit;
	font-size: 14px;
	color: var(--ldtl-text);
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 12px;
	outline: none;
	transition: all .18s ease;
}

.ldtl-fld input::placeholder { color: var(--ldtl-text-3); }

.ldtl-fld input:focus {
	background: var(--ldtl-bg-2);
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 3.5px var(--ldtl-primary-soft);
}

.ldtl-fld-row {
	display: flex;
	gap: 10px;
}

.ldtl-fld-row .ldtl-fld { flex: 1; min-width: 0; }

.ldtl-chk {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 17px;
	font-size: 12.8px;
	color: var(--ldtl-text-2);
	cursor: pointer;
}

.ldtl-chk input { width: 15px; height: 15px; accent-color: var(--ldtl-primary); }

.ldtl-md-foot {
	margin: 15px 0 0;
	font-size: 12.6px;
	color: var(--ldtl-text-2);
}

.ldtl-link {
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--ldtl-primary);
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: 0;
}

@keyframes ldtlPop {
	from { opacity: 0; transform: scale(.4); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes ldtlShake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(3px); }
}

/* ------------------------------------------------------------------
   4. Tep dinh kem
   ------------------------------------------------------------------ */

.ldtl-files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 11px 13px 3px;
}

.ldtl-files[hidden] { display: none; }

.ldtl-chip-file {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	max-width: 268px;
	padding: 7px 8px 7px 10px;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 12px;
	animation: ldtlFadeUp .3s ease both;
}

.ldtl-chip-file.is-loading { border-style: dashed; }
.ldtl-chip-file.is-error { border-color: var(--ldtl-primary); }

.ldtl-chip-ic {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--ldtl-primary);
}

.ldtl-chip-spin {
	display: block;
	width: 17px;
	height: 17px;
	border: 2px solid var(--ldtl-border-2);
	border-top-color: var(--ldtl-primary);
	border-radius: 50%;
	animation: ldtlSpin .8s linear infinite;
}

.ldtl-chip-tx {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.32;
}

.ldtl-chip-tx b {
	overflow: hidden;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-chip-tx em {
	overflow: hidden;
	font-size: 10.8px;
	font-style: normal;
	color: var(--ldtl-text-3);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-chip-x {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 7px;
	transition: all .16s ease;
}

.ldtl-chip-x:hover { color: #fff; background: var(--ldtl-primary); }

/* Vung tha tep */
.ldtl-drop {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	flex-direction: column;
	gap: 9px;
	align-items: center;
	justify-content: center;
	font-size: 13.4px;
	font-weight: 600;
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border: 2px dashed var(--ldtl-primary);
	border-radius: var(--ldtl-radius);
	backdrop-filter: blur(3px);
}

.ldtl-input-shell.is-drop .ldtl-drop {
	display: flex;
	animation: ldtlPop .22s ease both;
}

.ldtl-file-input { display: none; }

.ldtl-tool-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 10px;
	transition: all .18s ease;
}

.ldtl-tool-btn:hover {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	transform: rotate(-12deg);
}

/* Tep hien trong tin nhan */
.ldtl-msg-files {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 8px;
}

.ldtl-msg-files[hidden] { display: none; }

.ldtl-mf {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	max-width: 260px;
	padding: 6px 11px;
	font-size: 12.2px;
	color: var(--ldtl-text-2);
	text-decoration: none;
	background: var(--ldtl-panel);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 10px;
	transition: all .18s ease;
}

.ldtl-mf span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.ldtl-mf:hover {
	color: var(--ldtl-primary);
	border-color: var(--ldtl-primary);
	transform: translateY(-1px);
}

.ldtl-msg-user .ldtl-msg-files { justify-content: flex-end; }

/* ------------------------------------------------------------------
   5. Khoi Agent: cac buoc xu ly
   ------------------------------------------------------------------ */

.ldtl-agent {
	position: relative;
	max-width: 560px;
	padding: 15px 17px 13px;
	overflow: hidden;
	background: var(--ldtl-bubble-ai);
	border: 1px solid var(--ldtl-border);
	border-radius: var(--ldtl-radius);
	box-shadow: var(--ldtl-shadow);
	animation: ldtlMsgIn .32s ease both;
}

.ldtl-agent::after {
	position: absolute;
	top: 0;
	left: -60%;
	width: 60%;
	height: 100%;
	content: "";
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
	animation: ldtlSweep 2.6s ease-in-out infinite;
}

.ldtl-agent-head {
	display: flex;
	gap: 11px;
	align-items: center;
	margin-bottom: 12px;
}

.ldtl-agent-orb {
	position: relative;
	display: flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

.ldtl-agent-orb .ldtl-t-ring {
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-top-color: var(--ldtl-primary);
	border-right-color: var(--ldtl-accent);
	border-radius: 50%;
	animation: ldtlSpin 1.5s linear infinite;
}

.ldtl-agent-orb .ldtl-t-ring-2 {
	inset: 6px;
	border-top-color: var(--ldtl-accent);
	border-right-color: transparent;
	border-bottom-color: var(--ldtl-primary);
	animation: ldtlSpin 2.1s linear infinite reverse;
}

.ldtl-agent-orb .ldtl-t-core {
	width: 9px;
	height: 9px;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 50%;
	animation: ldtlCore 1.3s ease-in-out infinite;
}

.ldtl-agent-title {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.4;
}

.ldtl-agent-title strong {
	font-size: 13.4px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-agent-title em {
	overflow: hidden;
	font-size: 12.2px;
	font-style: normal;
	color: transparent;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: linear-gradient(90deg, var(--ldtl-text-2) 20%, var(--ldtl-primary) 45%, var(--ldtl-accent) 60%, var(--ldtl-text-2) 85%);
	background-clip: text;
	background-size: 220% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ldtlShine 2.8s linear infinite;
}

.ldtl-agent-timer {
	flex: 0 0 auto;
	padding: 3px 9px;
	font-family: var(--ldtl-fm);
	font-size: 11.4px;
	font-variant-numeric: tabular-nums;
	color: var(--ldtl-text-3);
	background: var(--ldtl-bg);
	border-radius: 8px;
}

/* Thanh tien do */
.ldtl-agent-bar {
	height: 3px;
	margin-bottom: 13px;
	overflow: hidden;
	background: var(--ldtl-border);
	border-radius: 3px;
}

.ldtl-agent-fill {
	display: block;
	width: 8%;
	height: 100%;
	background: linear-gradient(90deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 3px;
	transition: width .7s cubic-bezier(.22, 1, .36, 1);
}

/* Danh sach buoc */
.ldtl-agent-steps {
	padding: 0;
	margin: 0 0 11px;
	list-style: none;
}

.ldtl-step {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 5px 0 5px 2px;
	opacity: .38;
	transition: opacity .35s ease;
}

.ldtl-step.is-now,
.ldtl-step.is-done { opacity: 1; }

/* Duong noi giua cac buoc */
.ldtl-step::before {
	position: absolute;
	top: 24px;
	bottom: -2px;
	left: 10px;
	width: 1.5px;
	content: "";
	background: var(--ldtl-border-2);
}

.ldtl-step:last-child::before { display: none; }
.ldtl-step.is-done::before { background: var(--ldtl-primary); opacity: .45; }

.ldtl-step-dot {
	position: relative;
	display: flex;
	flex: 0 0 21px;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	background: var(--ldtl-bg-2);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 50%;
	transition: all .3s ease;
}

.ldtl-step.is-now .ldtl-step-dot {
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 4px var(--ldtl-primary-soft);
}

.ldtl-step.is-done .ldtl-step-dot {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-color: transparent;
}

.ldtl-step-spin {
	display: none;
	width: 9px;
	height: 9px;
	border: 1.5px solid transparent;
	border-top-color: var(--ldtl-primary);
	border-right-color: var(--ldtl-primary);
	border-radius: 50%;
	animation: ldtlSpin .7s linear infinite;
}

.ldtl-step.is-now .ldtl-step-spin { display: block; }

.ldtl-step-tick {
	display: none;
	align-items: center;
	justify-content: center;
}

.ldtl-step.is-done .ldtl-step-tick {
	display: flex;
	animation: ldtlPop .3s cubic-bezier(.34, 1.56, .64, 1) both;
}

.ldtl-step-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding-top: 1px;
	line-height: 1.4;
}

.ldtl-step-label {
	font-size: 12.8px;
	font-weight: 600;
	color: var(--ldtl-text);
}

.ldtl-step.is-now .ldtl-step-label { color: var(--ldtl-primary); }

.ldtl-step-sub {
	font-size: 11.4px;
	font-style: normal;
	color: var(--ldtl-text-3);
}

.ldtl-agent-foot {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-top: 9px;
	border-top: 1px solid var(--ldtl-border);
}

.ldtl-agent-stop {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 5px 12px;
	font: inherit;
	font-size: 11.8px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 9px;
	transition: all .18s ease;
}

.ldtl-agent-stop:hover {
	color: var(--ldtl-primary);
	border-color: var(--ldtl-primary);
}

/* ------------------------------------------------------------------
   6. Khoi "Qua trinh xu ly" gan vao cau tra loi
   ------------------------------------------------------------------ */

.ldtl-trace {
	margin-bottom: 9px;
	overflow: hidden;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border);
	border-radius: 13px;
}

.ldtl-trace[hidden] { display: none; }

.ldtl-trace-toggle {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 100%;
	padding: 9px 13px;
	font: inherit;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color .18s ease;
}

.ldtl-trace-toggle:hover { color: var(--ldtl-primary); }
.ldtl-trace-label { flex: 1 1 auto; }

.ldtl-trace-count {
	padding: 2px 8px;
	font-size: 10.8px;
	font-weight: 600;
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-radius: 7px;
}

.ldtl-trace-caret { transition: transform .24s ease; }
.ldtl-trace.is-open .ldtl-trace-caret { transform: rotate(180deg); }

.ldtl-trace-body {
	display: none;
	padding: 3px 15px 13px 17px;
	margin: 0;
	list-style: none;
	counter-reset: ldtlTrace;
}

.ldtl-trace.is-open .ldtl-trace-body { display: block; }

.ldtl-trace-item {
	position: relative;
	padding: 5px 0 5px 22px;
	counter-increment: ldtlTrace;
	animation: ldtlFadeUp .3s ease both;
}

.ldtl-trace-item::before {
	position: absolute;
	top: 6px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	font-size: 9.5px;
	font-weight: 700;
	color: #fff;
	content: counter(ldtlTrace);
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 50%;
}

.ldtl-trace-item b {
	display: block;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text);
}

.ldtl-trace-item em {
	display: block;
	font-size: 11.4px;
	font-style: normal;
	color: var(--ldtl-text-3);
}

/* Nhan trang thai trong dong tieu de tin nhan */
.ldtl-badge {
	padding: 2px 8px;
	font-size: 10.6px;
	font-weight: 600;
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-radius: 7px;
}

.ldtl-badge[hidden] { display: none; }

/* Khoa khi khong du quyen */
.ldtl-locked {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 15px 18px;
	font-size: 13.4px;
	line-height: 1.55;
	color: var(--ldtl-text-2);
	background: var(--ldtl-panel);
	border: 1px dashed var(--ldtl-border-2);
	border-radius: var(--ldtl-radius);
}

.ldtl-locked svg { flex: 0 0 auto; color: var(--ldtl-accent); }

/* ------------------------------------------------------------------
   7. Man hinh hep
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ldtl-app.is-side-shut .ldtl-sidebar {
		margin-left: 0;
		opacity: 1;
		transform: translateX(-100%);
	}

	.ldtl-app.is-side-shut .ldtl-side-open { display: none; }
	.ldtl-app.is-side-open .ldtl-sidebar { transform: translateX(0); }
}

@media (max-width: 720px) {
	.ldtl-modal-body { padding: 26px 20px 22px; }
	.ldtl-fld-row { flex-direction: column; gap: 0; }
	.ldtl-agent { max-width: 100%; padding: 13px 14px 11px; }
	.ldtl-step-sub { display: none; }
	.ldtl-chip-file { max-width: 100%; }
	.ldtl-md-actions { flex-direction: column-reverse; }
	.ldtl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ldtl-agent::after,
	.ldtl-agent-title em,
	.ldtl-modal::before { animation: none; }

	.ldtl-modal { transition: opacity .01ms; transform: none; }
}

/* --- Bo sung cac lop con thieu --- */

.ldtl-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.ldtl-msg-time {
	font-size: 11px;
	color: var(--ldtl-text-3);
	font-variant-numeric: tabular-nums;
}

.ldtl-conv-empty {
	padding: 10px 4px;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ldtl-text-3);
}

.ldtl-conv-empty[hidden] { display: none; }

.ldtl-think-label { flex: 1 1 auto; }

.ldtl-orb-ring-1 { animation-duration: 3.2s; }

.ldtl-msg-thinking .ldtl-msg-body { padding-top: 2px; }

/* ==================================================================
   BO SUNG v1.2: giong noi, tai khoan, giao dien dien thoai
   ================================================================== */

/* ------------------------------------------------------------------
   1. Nut micro
   ------------------------------------------------------------------ */

.ldtl-mic-btn { position: relative; }
.ldtl-mic-btn[hidden] { display: none; }

.ldtl-mic-btn.is-rec {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	transform: none;
}

.ldtl-mic-btn.is-rec::before {
	position: absolute;
	inset: -4px;
	content: "";
	border: 2px solid var(--ldtl-primary);
	border-radius: 50%;
	opacity: 0;
	animation: ldtlMicPulse 1.5s ease-out infinite;
}

@keyframes ldtlMicPulse {
	0% { opacity: .7; transform: scale(.85); }
	100% { opacity: 0; transform: scale(1.5); }
}

.ldtl-mic-wave {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: none;
	gap: 1.5px;
	align-items: flex-end;
	height: 11px;
	padding: 2px 3px;
	background: var(--ldtl-bg-2);
	border-radius: 5px;
}

.ldtl-mic-btn.is-rec .ldtl-mic-wave { display: flex; }

.ldtl-mic-wave i {
	display: block;
	width: 2px;
	background: var(--ldtl-primary);
	border-radius: 1px;
	animation: ldtlMicBar .7s ease-in-out infinite;
}

.ldtl-mic-wave i:nth-child(1) { height: 4px; animation-delay: 0s; }
.ldtl-mic-wave i:nth-child(2) { height: 7px; animation-delay: .15s; }
.ldtl-mic-wave i:nth-child(3) { height: 5px; animation-delay: .3s; }

@keyframes ldtlMicBar {
	0%, 100% { transform: scaleY(.45); }
	50% { transform: scaleY(1); }
}

/* Vien o nhap sang len khi dang nghe */
.ldtl-input-shell.is-rec {
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 3px var(--ldtl-primary-soft);
}

/* ------------------------------------------------------------------
   2. Hop thoai tai khoan
   ------------------------------------------------------------------ */

.ldtl-acc-open {
	display: flex;
	flex: 1 1 auto;
	gap: 9px;
	align-items: center;
	min-width: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 9px;
	transition: opacity .16s ease;
}

.ldtl-acc-open:hover { opacity: .75; }

.ldtl-md-form.is-account { text-align: left; }
.ldtl-md-form.is-account .ldtl-md-title { text-align: center; }

.ldtl-md-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin: 16px 0 18px;
	background: var(--ldtl-bg);
	border-radius: 12px;
}

.ldtl-md-tab {
	flex: 1;
	padding: 9px 6px;
	font: inherit;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 9px;
	transition: all .18s ease;
}

.ldtl-md-tab:hover { color: var(--ldtl-text); }

.ldtl-md-tab.is-on {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	box-shadow: 0 4px 12px rgba(200, 16, 46, .24);
}

.ldtl-md-pane { animation: ldtlFadeUp .26s ease both; }

/* Khu doi anh dai dien */
.ldtl-av-box { text-align: center; }

.ldtl-av-big {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	margin-bottom: 13px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border: 3px solid var(--ldtl-panel-solid);
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(18, 28, 48, .18);
}

.ldtl-av-big img { width: 100%; height: 100%; object-fit: cover; }
.ldtl-av-big svg { width: 44px; height: 44px; }

.ldtl-av-acts {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 15px;
}

/* ------------------------------------------------------------------
   3. GIAO DIEN DIEN THOAI
   ------------------------------------------------------------------ */

/* Tinh ca vung khuyet (tai tho) cua may */
.ldtl-app.is-fullscreen {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 860px) {

	.ldtl-app { --ldtl-sidebar-w: 82vw; --ldtl-radius: 15px; }

	/* --- Thanh trên: gọn lại, chỉ giữ thông tin cần thiết --- */
	.ldtl-topbar {
		gap: 8px;
		padding: 9px 12px;
		padding-top: calc(9px + env(safe-area-inset-top, 0));
	}

	.ldtl-brand-avatar { width: 32px; height: 32px; }

	.ldtl-brand-text strong { font-size: 14.5px; }

	/* Dòng mô tả dài làm vỡ bố cục trên máy nhỏ */
	.ldtl-brand-text small {
		display: -webkit-box;
		overflow: hidden;
		font-size: 10.8px;
		line-height: 1.35;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	/* Nút tra cứu Internet thu về biểu tượng */
	.ldtl-chip-btn { gap: 0; padding: 9px; }
	.ldtl-chip-btn span { display: none; }

	.ldtl-icon-btn,
	.ldtl-menu-btn {
		width: 40px;
		height: 40px;
	}

	/* --- Vùng tin nhắn --- */
	.ldtl-inner { padding-right: 12px; padding-left: 12px; }

	.ldtl-msg { gap: 8px; }

	.ldtl-msg-avatar {
		width: 30px;
		height: 30px;
		flex-basis: 30px;
	}

	.ldtl-bubble {
		padding: 11px 13px;
		font-size: 14.6px;
		line-height: 1.68;
	}

	/* Tin nhắn người dùng rộng gần hết bề ngang cho dễ đọc */
	.ldtl-msg-user .ldtl-bubble { max-width: 88%; }

	.ldtl-bubble-ai table { font-size: 12.8px; }
	.ldtl-bubble-ai h1 { font-size: 18px; }
	.ldtl-bubble-ai h2 { font-size: 16px; }
	.ldtl-bubble-ai h3 { font-size: 14.6px; }

	/* Hàng nút dưới câu trả lời: cuộn ngang thay vì xuống dòng lộn xộn */
	.ldtl-msg-actions {
		flex-wrap: nowrap;
		gap: 6px;
		padding-bottom: 3px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ldtl-msg-actions::-webkit-scrollbar { display: none; }

	.ldtl-act {
		flex: 0 0 auto;
		min-height: 34px;
		padding: 7px 11px;
		font-size: 12.2px;
	}

	.ldtl-act-stat {
		flex: 0 0 auto;
		font-size: 10.8px;
	}

	/* --- Ô nhập: bám đáy, chạm dễ --- */
	.ldtl-composer {
		padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0));
	}

	.ldtl-input-shell { border-radius: 16px; }

	.ldtl-input {
		padding: 12px 12px 4px;
		font-size: 16px;   /* dưới 16px iOS sẽ tự phóng to trang */
		line-height: 1.55;
	}

	.ldtl-input-tools { padding: 5px 8px 8px; }

	.ldtl-tool-btn,
	.ldtl-send {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	/* Dòng nhắc dài chiếm chỗ, rút còn một ý */
	.ldtl-hint { font-size: 10.8px; }
	.ldtl-hint .ldtl-hint-sep,
	.ldtl-hint br { display: none; }

	.ldtl-counter { display: none; }

	/* --- Màn hình chào --- */
	.ldtl-hero { padding: 22px 4px 14px; }
	.ldtl-hero-orb { width: 76px; height: 76px; }
	.ldtl-hero-title { font-size: 22px; }
	.ldtl-hero-text { font-size: 13.6px; }

	.ldtl-suggestions { grid-template-columns: 1fr; gap: 8px; }

	.ldtl-sugg {
		padding: 12px 13px;
		font-size: 13px;
		text-align: left;
	}

	/* --- Khối Agent --- */
	.ldtl-agent { padding: 12px 13px 10px; }
	.ldtl-agent-head { gap: 9px; margin-bottom: 10px; }
	.ldtl-agent-orb { flex-basis: 30px; width: 30px; height: 30px; }
	.ldtl-agent-title strong { font-size: 12.8px; }
	.ldtl-agent-title em { font-size: 11.4px; }
	.ldtl-agent-timer { padding: 2px 7px; font-size: 10.6px; }
	.ldtl-step { padding: 4px 0 4px 1px; }
	.ldtl-step-label { font-size: 12.2px; }

	/* --- Tệp đính kèm --- */
	.ldtl-chip-file { max-width: 100%; }
	.ldtl-mf { max-width: 100%; font-size: 11.6px; }

	/* --- Hộp thoại trượt lên từ đáy, như ứng dụng điện thoại --- */
	.ldtl-modal-wrap { padding: 0; align-items: flex-end; }

	.ldtl-modal {
		max-width: 100%;
		max-height: 92vh;
		padding-bottom: env(safe-area-inset-bottom, 0);
		border-radius: 22px 22px 0 0;
		transform: translateY(100%);
	}

	.ldtl-modal-wrap.is-open .ldtl-modal { transform: translateY(0); }

	/* Thanh kéo nhỏ ở đầu hộp thoại */
	.ldtl-modal-body::before {
		display: block;
		width: 38px;
		height: 4px;
		margin: 0 auto 14px;
		content: "";
		background: var(--ldtl-border-2);
		border-radius: 3px;
	}

	.ldtl-modal-body { padding: 14px 18px 20px; }
	.ldtl-modal-x { top: 10px; right: 10px; }

	.ldtl-md-title { font-size: 17px; }
	.ldtl-md-icon { width: 54px; height: 54px; }
	.ldtl-md-crest { width: 50px; height: 50px; }
	.ldtl-fld input { padding: 13px 14px 13px 38px; font-size: 16px; }
	.ldtl-fld-row { flex-direction: column; gap: 0; }
	.ldtl-btn { min-height: 46px; }

	/* --- Thanh bên: che gần hết màn hình khi mở --- */
	.ldtl-sidebar {
		padding-top: calc(14px + env(safe-area-inset-top, 0));
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
		box-shadow: 18px 0 50px rgba(9, 14, 28, .32);
	}

	.ldtl-conv-item { min-height: 42px; }

	.ldtl-toast-wrap {
		right: 12px;
		bottom: calc(84px + env(safe-area-inset-bottom, 0));
		left: 12px;
		/* Phải bỏ phép dịch của bản máy tính, nếu không khay bị đẩy lệch ra ngoài màn hình. */
		transform: none;
		align-items: stretch;
	}

	.ldtl-toast { width: 100%; font-size: 13px; }

	.ldtl-jump {
		right: 14px;
		bottom: calc(96px + env(safe-area-inset-bottom, 0));
		width: 38px;
		height: 38px;
	}
}

/* Máy nhỏ, ví dụ iPhone SE */
@media (max-width: 400px) {
	.ldtl-app { --ldtl-sidebar-w: 88vw; }

	.ldtl-inner { padding-right: 9px; padding-left: 9px; }

	.ldtl-brand-text small { display: none; }

	.ldtl-bubble { padding: 10px 12px; font-size: 14.2px; }
	.ldtl-msg-user .ldtl-bubble { max-width: 92%; }

	.ldtl-hero-title { font-size: 19.5px; }
	.ldtl-hero-orb { width: 66px; height: 66px; }

	.ldtl-sugg span {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ldtl-step-sub { display: none; }
	.ldtl-agent-timer { display: none; }

	.ldtl-modal-body { padding: 14px 15px 18px; }
	.ldtl-md-tab { font-size: 11.8px; padding: 9px 4px; }
	.ldtl-av-big { width: 92px; height: 92px; }
	.ldtl-av-acts { flex-direction: column; }
}

/* Máy nằm ngang, màn hình thấp: nhường chỗ cho ô nhập */
@media (max-height: 480px) and (orientation: landscape) {
	.ldtl-hero { padding: 12px 4px 8px; }
	.ldtl-hero-orb { display: none; }
	.ldtl-hero-title { margin-bottom: 4px; font-size: 18px; }
	.ldtl-hero-text { display: none; }
	.ldtl-suggestions { grid-template-columns: 1fr 1fr; }
	.ldtl-hint { display: none; }
	.ldtl-modal { max-height: 96vh; }
}

/* Máy cảm ứng: bỏ hiệu ứng di chuột, nút to hơn */
@media (hover: none) {
	.ldtl-act:hover,
	.ldtl-sugg:hover,
	.ldtl-conv-item:hover,
	.ldtl-acc-btn:hover,
	.ldtl-tool-btn:hover,
	.ldtl-mf:hover { transform: none; }

	.ldtl-msg-actions { opacity: 1; }
	.ldtl-conv-del { opacity: 1; }
}

/* Lop chung cho moi bieu tuong SVG */
.ldtl-ic {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ==================================================================
   BO SUNG v1.3: chia se, soan van ban, do sac net
   ================================================================== */

/* ------------------------------------------------------------------
   1. Do sac net va chuan muc chung
   ------------------------------------------------------------------ */

.ldtl-app {
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "kern" 1, "liga" 1;
}

/* Bieu tuong sac net o moi mat do diem anh */
.ldtl-app svg,
.ldtl-modal svg {
	flex: 0 0 auto;
	overflow: visible;
	shape-rendering: geometricPrecision;
	vector-effect: non-scaling-stroke;
}

/* Bieu tuong khong bi bop meo khi thieu cho */
.ldtl-app svg,
.ldtl-modal svg {
	min-width: 0;
}

.ldtl-icon-btn svg,
.ldtl-tool-btn svg,
.ldtl-act svg,
.ldtl-chip-btn svg { flex: 0 0 auto; }

/* Tieu de chat hon, dong deu hon */
.ldtl-bubble-ai h1,
.ldtl-bubble-ai h2,
.ldtl-bubble-ai h3,
.ldtl-hero-title,
.ldtl-md-title,
.ldtl-brand-text strong {
	letter-spacing: -.012em;
}

/* Vien manh va deu tren man hinh net cao */
@media (min-resolution: 2dppx) {
	.ldtl-bubble,
	.ldtl-agent,
	.ldtl-modal,
	.ldtl-input-shell { border-width: .5px; }
}

/* Trang thai duoc chon bang ban phim - ro rang, dung chuan */
.ldtl-app button:focus-visible,
.ldtl-app a:focus-visible,
.ldtl-app textarea:focus-visible,
.ldtl-modal button:focus-visible,
.ldtl-modal input:focus-visible,
.ldtl-modal textarea:focus-visible {
	outline: 2px solid var(--ldtl-primary);
	outline-offset: 2px;
}

.ldtl-app button:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------
   2. Nut soan van ban va chia se
   ------------------------------------------------------------------ */

.ldtl-compose-btn {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(200, 16, 46, .22);
}

.ldtl-compose-btn:hover {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.ldtl-act.is-primary {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-color: var(--ldtl-primary);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   3. Hop thoai chia se
   ------------------------------------------------------------------ */

.ldtl-md-note-sm.is-warn {
	color: var(--ldtl-text);
	border-left-color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
}

.ldtl-share-load {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 22px 0;
	font-size: 13px;
	color: var(--ldtl-text-2);
}

.ldtl-share-link {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 7px 7px 7px 12px;
	margin-bottom: 16px;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 13px;
}

.ldtl-share-link i {
	display: flex;
	flex: 0 0 auto;
	color: var(--ldtl-text-3);
}

.ldtl-share-link input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 0;
	font: inherit;
	font-size: 12.6px;
	color: var(--ldtl-text-2);
	background: none;
	border: 0;
	outline: none;
}

.ldtl-share-copy {
	flex: 0 0 auto;
	padding: 8px 14px;
	font: inherit;
	font-size: 12.4px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border: 0;
	border-radius: 9px;
	transition: filter .16s ease;
}

.ldtl-share-copy:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------
   4. Hop thoai soan van ban
   ------------------------------------------------------------------ */

.ldtl-md-form.is-compose { text-align: left; }
.ldtl-md-form.is-compose .ldtl-md-title,
.ldtl-md-form.is-compose .ldtl-md-sub { text-align: center; }

.ldtl-dt-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-top: 6px;
}

.ldtl-dt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 13px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 13px;
	transition: all .18s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-dt:hover {
	background: var(--ldtl-bg-2);
	border-color: var(--ldtl-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(18, 28, 48, .09);
}

.ldtl-dt b {
	font-size: 13.4px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-dt em {
	font-size: 11.4px;
	font-style: normal;
	line-height: 1.4;
	color: var(--ldtl-text-3);
}

.ldtl-ta {
	display: block;
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ldtl-text);
	resize: vertical;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 12px;
	outline: none;
	transition: all .18s ease;
}

.ldtl-ta::placeholder { color: var(--ldtl-text-3); }

.ldtl-ta:focus {
	background: var(--ldtl-bg-2);
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 3.5px var(--ldtl-primary-soft);
}

.ldtl-len-row {
	display: flex;
	gap: 7px;
}

.ldtl-len {
	flex: 1;
	padding: 10px 6px;
	font: inherit;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 11px;
	transition: all .18s ease;
}

.ldtl-len:hover { border-color: var(--ldtl-text-3); }

.ldtl-len.is-on {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-color: transparent;
}


/* ------------------------------------------------------------------
   5. Man hinh hep
   ------------------------------------------------------------------ */

@media (max-width: 860px) {
	.ldtl-compose-btn { gap: 0; padding: 9px; }
	.ldtl-compose-btn span { display: none; }

	.ldtl-dt-grid { grid-template-columns: 1fr; gap: 7px; }
	.ldtl-dt { padding: 11px 12px; }

	.ldtl-share-link { flex-wrap: wrap; }
	.ldtl-share-link input { flex: 1 1 100%; order: 3; padding: 6px 2px; }
	.ldtl-share-copy { flex: 1 1 auto; }

	.ldtl-len-row { flex-direction: column; }
	.ldtl-len { min-height: 42px; }
	.ldtl-ta { font-size: 16px; }
}

@media (max-width: 400px) {
	.ldtl-top-actions { gap: 3px; }
	.ldtl-dt em { display: none; }
}

/* ==================================================================
   BO SUNG v1.4: thanh cuon, muc luc, khoi noi bat, cai dat ung dung
   ================================================================== */

/* ------------------------------------------------------------------
   1. Thanh cuon
   ------------------------------------------------------------------ */

.ldtl-app,
.ldtl-modal {
	scrollbar-width: thin;
	scrollbar-color: var(--ldtl-border-2) transparent;
}

.ldtl-app *::-webkit-scrollbar,
.ldtl-modal *::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.ldtl-app *::-webkit-scrollbar-track,
.ldtl-modal *::-webkit-scrollbar-track {
	background: transparent;
}

.ldtl-app *::-webkit-scrollbar-thumb,
.ldtl-modal *::-webkit-scrollbar-thumb {
	background: var(--ldtl-border-2);
	background-clip: content-box;
	border: 3px solid transparent;
	border-radius: 99px;
	transition: background .2s ease;
}

.ldtl-app *::-webkit-scrollbar-thumb:hover,
.ldtl-modal *::-webkit-scrollbar-thumb:hover {
	background: var(--ldtl-text-3);
	background-clip: content-box;
}

.ldtl-app *::-webkit-scrollbar-thumb:active {
	background: var(--ldtl-primary);
	background-clip: content-box;
}

.ldtl-app *::-webkit-scrollbar-corner { background: transparent; }

/* Vung tin nhan: thanh cuon chi ro khi ro chuot vao */
.ldtl-stream::-webkit-scrollbar-thumb { background: transparent; }
.ldtl-stream:hover::-webkit-scrollbar-thumb { background: var(--ldtl-border-2); background-clip: content-box; }

/* Thanh cuon ngang cua bang bieu: mong hon */
.ldtl-tbl-wrap::-webkit-scrollbar { height: 7px; }
.ldtl-tbl-wrap::-webkit-scrollbar-thumb { border-width: 2px; }

/* ------------------------------------------------------------------
   2. Muc luc trong cau tra loi
   ------------------------------------------------------------------ */

.ldtl-toc {
	margin: 0 0 15px;
	overflow: hidden;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border);
	border-left: 3px solid var(--ldtl-accent);
	border-radius: 0 12px 12px 0;
}

.ldtl-toc-head {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 100%;
	padding: 9px 13px;
	font: inherit;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color .18s ease;
}

.ldtl-toc-head:hover { color: var(--ldtl-primary); }
.ldtl-toc-label { flex: 1 1 auto; }

.ldtl-toc-count {
	padding: 2px 8px;
	font-size: 10.6px;
	font-weight: 600;
	color: var(--ldtl-accent);
	background: color-mix(in srgb, var(--ldtl-accent) 14%, transparent);
	border-radius: 7px;
}

.ldtl-toc-caret { transition: transform .24s ease; }
.ldtl-toc.is-open .ldtl-toc-caret { transform: rotate(180deg); }

.ldtl-toc-list {
	display: none;
	padding: 0 13px 12px 15px;
	margin: 0;
	list-style: none;
	counter-reset: ldtlToc;
}

.ldtl-toc.is-open .ldtl-toc-list { display: block; }

.ldtl-toc-item {
	position: relative;
	padding: 3px 0 3px 20px;
	counter-increment: ldtlToc;
}

.ldtl-toc-item::before {
	position: absolute;
	top: 5px;
	left: 0;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ldtl-text-3);
	content: counter(ldtlToc) ".";
}

.ldtl-toc-item.is-h3 { padding-left: 34px; }
.ldtl-toc-item.is-h3::before { left: 14px; }

.ldtl-toc-link {
	padding: 0;
	font: inherit;
	font-size: 12.6px;
	line-height: 1.5;
	color: var(--ldtl-text-2);
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color .16s ease;
}

.ldtl-toc-link:hover {
	color: var(--ldtl-primary);
	text-decoration: underline;
}

/* Nhay sang khi bam vao muc luc */
.ldtl-bubble-ai h1.is-flash,
.ldtl-bubble-ai h2.is-flash,
.ldtl-bubble-ai h3.is-flash {
	animation: ldtlFlash 1.4s ease;
}

@keyframes ldtlFlash {
	0%, 100% { background: transparent; }
	25% { background: var(--ldtl-primary-soft); }
}

/* ------------------------------------------------------------------
   3. Bang bieu va khoi noi bat
   ------------------------------------------------------------------ */

.ldtl-tbl-wrap {
	position: relative;
	margin: 0 0 14px;
	overflow-x: auto;
	border: 1px solid var(--ldtl-border);
	border-radius: 11px;
	-webkit-overflow-scrolling: touch;
}

.ldtl-tbl-wrap table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.ldtl-tbl-wrap th {
	position: sticky;
	top: 0;
	font-weight: 700;
	background: color-mix(in srgb, var(--ldtl-primary) 9%, var(--ldtl-panel-solid));
	border-top: 0;
}

.ldtl-tbl-wrap tr:nth-child(even) td {
	background: color-mix(in srgb, var(--ldtl-text) 3%, transparent);
}

.ldtl-tbl-wrap td.is-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ldtl-tbl-wrap th:first-child,
.ldtl-tbl-wrap td:first-child { border-left: 0; }

.ldtl-tbl-wrap th:last-child,
.ldtl-tbl-wrap td:last-child { border-right: 0; }

/* Khoi noi bat: luu y, can cu, ket luan */
.ldtl-bubble-ai p.ldtl-callout {
	position: relative;
	padding: 11px 14px 11px 40px;
	margin: 0 0 13px;
	font-size: .96em;
	line-height: 1.66;
	border-radius: 0 11px 11px 0;
}

.ldtl-bubble-ai p.ldtl-callout::before {
	position: absolute;
	top: 11px;
	left: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	border-radius: 50%;
}

.ldtl-callout.is-note {
	color: var(--ldtl-text);
	background: color-mix(in srgb, var(--ldtl-accent) 11%, transparent);
	border-left: 3px solid var(--ldtl-accent);
}

.ldtl-callout.is-note::before {
	content: "!";
	background: var(--ldtl-accent);
}

.ldtl-callout.is-law {
	color: var(--ldtl-text);
	background: color-mix(in srgb, #2563eb 10%, transparent);
	border-left: 3px solid #2563eb;
}

.ldtl-callout.is-law::before {
	content: "§";
	background: #2563eb;
}

.ldtl-callout.is-sum {
	color: var(--ldtl-text);
	background: var(--ldtl-primary-soft);
	border-left: 3px solid var(--ldtl-primary);
}

.ldtl-callout.is-sum::before {
	content: "✓";
	background: var(--ldtl-primary);
}

/* ------------------------------------------------------------------
   4. Cai dat ung dung
   ------------------------------------------------------------------ */

.ldtl-install-btn[hidden] { display: none; }

.ldtl-install-btn {
	position: relative;
	color: var(--ldtl-accent);
}

.ldtl-install-btn::after {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--ldtl-accent);
	border-radius: 50%;
	animation: ldtlPulse 2.2s ease-in-out infinite;
}

.ldtl-install-side {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 10px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--ldtl-primary) 12%, transparent),
		color-mix(in srgb, var(--ldtl-accent) 12%, transparent));
	border: 1px solid var(--ldtl-border-2);
	border-radius: 13px;
	transition: all .2s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-install-side[hidden] { display: none; }

.ldtl-install-side:hover {
	border-color: var(--ldtl-primary);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 28, 48, .1);
}

.ldtl-install-side svg { flex: 0 0 auto; color: var(--ldtl-primary); }

.ldtl-install-side span {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.ldtl-install-side strong {
	font-size: 12.6px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-install-side small {
	font-size: 10.8px;
	color: var(--ldtl-text-3);
}

/* Cac buoc huong dan cai dat */
.ldtl-md-form.is-install { text-align: left; }
.ldtl-md-form.is-install .ldtl-md-title,
.ldtl-md-form.is-install .ldtl-md-sub { text-align: center; }
.ldtl-md-form.is-install .ldtl-md-crest { display: block; margin: 0 auto 12px; }

.ldtl-ins-steps {
	padding: 0;
	margin: 4px 0 14px;
	list-style: none;
}

.ldtl-ins-step {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 9px 0;
	border-bottom: 1px solid var(--ldtl-border);
}

.ldtl-ins-step:last-child { border-bottom: 0; }

.ldtl-ins-step b {
	display: flex;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 50%;
}

.ldtl-ins-step span {
	flex: 1 1 auto;
	font-size: 13.2px;
	line-height: 1.6;
	color: var(--ldtl-text-2);
}

.ldtl-ins-step span b {
	display: inline;
	width: auto;
	height: auto;
	padding: 1px 5px;
	font-size: inherit;
	color: var(--ldtl-text);
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 5px;
}

/* ------------------------------------------------------------------
   5. Man hinh hep
   ------------------------------------------------------------------ */

@media (max-width: 860px) {
	.ldtl-app *::-webkit-scrollbar,
	.ldtl-modal *::-webkit-scrollbar { width: 5px; height: 5px; }

	.ldtl-app *::-webkit-scrollbar-thumb { border-width: 1px; }

	.ldtl-toc-head { padding: 9px 11px; }
	.ldtl-bubble-ai p.ldtl-callout { padding: 10px 12px 10px 36px; }
	.ldtl-ins-step span { font-size: 12.8px; }
}

/* --- Thanh tien trinh soan van ban --- */

.ldtl-wiz {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
	margin: 14px 0 18px;
}

.ldtl-wiz-step {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 11.6px;
	font-weight: 600;
	color: var(--ldtl-text-3);
	transition: color .24s ease;
}

.ldtl-wiz-step i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 50%;
	transition: all .24s ease;
}

.ldtl-wiz-step em { font-style: normal; }

.ldtl-wiz-step.is-now { color: var(--ldtl-primary); }

.ldtl-wiz-step.is-now i {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-color: transparent;
	box-shadow: 0 0 0 3.5px var(--ldtl-primary-soft);
}

.ldtl-wiz-step.is-done { color: var(--ldtl-text-2); }

.ldtl-wiz-step.is-done i {
	color: #fff;
	content: "";
	background: var(--ldtl-accent);
	border-color: transparent;
}

.ldtl-wiz-line {
	flex: 0 1 26px;
	height: 1.5px;
	background: var(--ldtl-border-2);
}

.ldtl-opt-row {
	display: flex;
	gap: 16px;
	margin-bottom: 13px;
}

.ldtl-opt-row .ldtl-chk { margin-bottom: 0; }

.ldtl-tone { font-size: 11.8px; }

@media (max-width: 560px) {
	.ldtl-wiz-step em { display: none; }
	.ldtl-wiz-line { flex-basis: 34px; }
	.ldtl-opt-row { flex-direction: column; gap: 8px; }
}

/* ==================================================================
   BO SUNG v1.5: ban trinh chieu PowerPoint
   ================================================================== */

.ldtl-slides-btn {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-color: color-mix(in srgb, var(--ldtl-primary) 30%, transparent);
}

.ldtl-slides-btn:hover {
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-color: transparent;
	transform: translateY(-1px);
}

/* --- Luoi chon phong cach --- */

.ldtl-th-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin: 6px 0 16px;
}

.ldtl-th {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 12px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 13px;
	transition: all .2s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-th:hover {
	border-color: var(--ldtl-text-3);
	transform: translateY(-2px);
}

.ldtl-th.is-on {
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 3px var(--ldtl-primary-soft);
}

.ldtl-th-sw {
	display: flex;
	gap: 3px;
	margin-bottom: 4px;
}

.ldtl-th-sw i {
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(18, 28, 48, .14);
	border-radius: 5px;
}

.ldtl-th b {
	font-size: 12.8px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-th em {
	font-size: 11px;
	font-style: normal;
	line-height: 1.4;
	color: var(--ldtl-text-3);
}

.ldtl-fld-in input[type="number"] {
	width: 100%;
	padding: 12px 14px 12px 38px;
	font: inherit;
	font-size: 14px;
	color: var(--ldtl-text);
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 12px;
	outline: none;
}

.ldtl-fld-in input[type="number"]:focus {
	background: var(--ldtl-bg-2);
	border-color: var(--ldtl-primary);
	box-shadow: 0 0 0 3.5px var(--ldtl-primary-soft);
}

/* --- The tep trinh chieu --- */

.ldtl-ppt-card {
	display: flex;
	gap: 12px;
	align-items: center;
	max-width: 460px;
	padding: 12px 13px;
	margin-top: 10px;
	background: var(--ldtl-panel);
	border: 1px solid var(--ldtl-border-2);
	border-left: 3px solid var(--ldtl-accent);
	border-radius: 0 13px 13px 0;
	animation: ldtlFadeUp .32s ease both;
}

.ldtl-ppt-ic {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-accent), #b8860b);
	border-radius: 11px;
}

.ldtl-ppt-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.4;
}

.ldtl-ppt-info strong {
	overflow: hidden;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-ppt-info small {
	font-size: 11.2px;
	color: var(--ldtl-text-3);
}

.ldtl-ppt-dl {
	flex: 0 0 auto;
	padding: 8px 15px;
	font-size: 12.4px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24);
	border-radius: 10px;
	transition: filter .16s ease;
}

.ldtl-ppt-dl:hover { color: #fff; filter: brightness(1.08); }

@media (max-width: 860px) {
	.ldtl-slides-btn { gap: 0; padding: 9px; }
	.ldtl-slides-btn span { display: none; }
	.ldtl-th-grid { grid-template-columns: 1fr; }
	.ldtl-ppt-card { max-width: 100%; flex-wrap: wrap; }
	.ldtl-ppt-dl { flex: 1 1 100%; text-align: center; }
}

/* ==================================================================
   BO SUNG v1.6: sua giao dien dien thoai
   ================================================================== */

/* ------------------------------------------------------------------
   1. Khong de mat chu o bat ky dau
   ------------------------------------------------------------------ */

.ldtl-toast,
.ldtl-md-title,
.ldtl-md-text,
.ldtl-md-sub,
.ldtl-md-note-sm,
.ldtl-md-err,
.ldtl-act-stat,
.ldtl-ins-step span,
.ldtl-hint {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

.ldtl-toast {
	display: block;
	line-height: 1.55;
	text-align: center;
}

/* ------------------------------------------------------------------
   2. Man hinh dien thoai
   ------------------------------------------------------------------ */

@media (max-width: 860px) {

	/* --- O nhap: chu chiem tron be ngang, nut xuong hang duoi --- */
	.ldtl-input-shell {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 4px 6px 6px;
		border-radius: 20px;
	}

	.ldtl-input {
		width: 100%;
		padding: 11px 10px 6px;
		font-size: 16px;
		line-height: 1.55;
		max-height: 168px;
	}

	.ldtl-input-tools {
		justify-content: flex-end;
		gap: 4px;
		padding: 0 2px 1px;
	}

	/* Day cac nut phu sang trai, nut gui nam rieng ben phai */
	.ldtl-input-tools .ldtl-tool-btn:first-child { margin-right: auto; }

	.ldtl-tool-btn,
	.ldtl-mic-btn {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}

	.ldtl-send {
		width: 42px;
		height: 42px;
		min-width: 42px;
	}

	.ldtl-files { padding: 8px 4px 4px; }

	/* --- Dong trang thai xuong hang rieng, khong bi cuon mat --- */
	.ldtl-msg-actions {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.ldtl-msg-actions .ldtl-act { flex: 0 0 auto; }

	.ldtl-act-stat {
		flex: 1 1 100%;
		order: 9;
		margin: 5px 0 0;
		font-size: 11px;
		line-height: 1.5;
	}

	/* --- Hop thoai: bao dam luon cuon duoc, khong cat noi dung --- */
	.ldtl-modal {
		display: flex;
		flex-direction: column;
		max-height: 88dvh;
	}

	.ldtl-modal-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ldtl-md-actions {
		position: sticky;
		bottom: 0;
		z-index: 2;
		padding-top: 10px;
		margin-bottom: 0;
		background: linear-gradient(to top,
			var(--ldtl-panel-solid) 65%,
			color-mix(in srgb, var(--ldtl-panel-solid) 0%, transparent));
	}

	/* Bang trong cau tra loi: bo cam xuong dong o dong tieu de */
	.ldtl-bubble-ai th { white-space: normal; }
}

@media (max-width: 400px) {
	.ldtl-input { padding: 10px 8px 5px; }
	.ldtl-input-tools { gap: 2px; }
	.ldtl-tool-btn,
	.ldtl-mic-btn { width: 36px; height: 36px; min-width: 36px; }
	.ldtl-send { width: 40px; height: 40px; min-width: 40px; }
	.ldtl-hint { font-size: 10.2px; line-height: 1.45; }
}

/* Anh dai dien dang chu cai */
.ldtl-avatar-txt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	letter-spacing: .01em;
	border-radius: 50%;
}

.ldtl-acc-av .ldtl-avatar-txt { font-size: 13px; }
.ldtl-av-big .ldtl-avatar-txt { font-size: 34px; }

/* ==================================================================
   BO SUNG v1.7: dinh kem tai lieu trong hop thoai
   ================================================================== */

.ldtl-md-files {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 8px;
}

.ldtl-md-files[hidden] { display: none; }

.ldtl-md-files .ldtl-chip-file {
	max-width: 100%;
	background: var(--ldtl-bg-2);
}

.ldtl-md-attach {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 12.8px;
	font-weight: 600;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px dashed var(--ldtl-border-2);
	border-radius: 12px;
	transition: all .18s ease;
}

.ldtl-md-attach:hover {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-color: var(--ldtl-primary);
}

.ldtl-md-attach svg { flex: 0 0 auto; }

@media (max-width: 860px) {
	.ldtl-md-attach { min-height: 44px; font-size: 12.4px; }
	.ldtl-md-files .ldtl-chip-file { width: 100%; }
}

/* Chon he the thuc van ban */
.ldtl-ht-row {
	display: flex;
	gap: 8px;
}

.ldtl-ht {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 12px;
	transition: all .18s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-ht:hover { border-color: var(--ldtl-text-3); }

.ldtl-ht.is-on {
	border-color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	box-shadow: 0 0 0 3px var(--ldtl-primary-soft);
}

.ldtl-ht b {
	font-size: 12.8px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-ht.is-on b { color: var(--ldtl-primary); }

.ldtl-ht em {
	font-size: 10.8px;
	font-style: normal;
	line-height: 1.4;
	color: var(--ldtl-text-3);
}

@media (max-width: 860px) {
	.ldtl-ht-row { flex-direction: column; }
	.ldtl-ht { min-height: 44px; }
}

/* ==================================================================
   BO SUNG v1.9: bao cao tham dinh
   ================================================================== */

.ldtl-td-btn {
	color: #fff;
	background: linear-gradient(135deg, #10457e, #0b2545);
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(16, 69, 126, .24);
}

.ldtl-td-btn:hover {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.ldtl-md-form.is-td .ldtl-md-crest {
	background: linear-gradient(135deg, #10457e, #0b2545);
	box-shadow: 0 8px 22px rgba(16, 69, 126, .26);
}

.ldtl-td-cq {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ldtl-td-cq .ldtl-ht { flex: none; }

.ldtl-td-nhom {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ldtl-td-nhom .ldtl-len {
	flex: 0 0 auto;
	padding: 8px 13px;
	font-size: 12.2px;
}

@media (max-width: 860px) {
	.ldtl-td-btn { gap: 0; padding: 9px; }
	.ldtl-td-btn span { display: none; }
	.ldtl-td-nhom .ldtl-len { flex: 1 1 46%; min-height: 42px; }
}

/* ==================================================================
   BO SUNG v1.10: khung rong cho bieu mau lam viec tren may tinh
   ================================================================== */

/* Bo khung 560px cu, thay bang he thong khung rong theo be ngang man hinh */
.ldtl-modal-wrap.is-wide .ldtl-modal { max-width: 452px; }

@media (min-width: 900px) {

	.ldtl-modal-wrap.is-wide .ldtl-modal {
		max-width: 780px;
		max-height: 92vh;
	}

	.ldtl-modal-wrap.is-wide .ldtl-modal-body { padding: 32px 38px 28px; }

	/* --- Hai o một hàng, canh đều --- */
	.ldtl-modal-wrap.is-wide .ldtl-fld-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}

	.ldtl-modal-wrap.is-wide .ldtl-fld-row .ldtl-fld { flex: none; }

	/* --- Lưới chọn loại văn bản: ba cột --- */
	.ldtl-modal-wrap.is-wide .ldtl-dt-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	/* --- Lưới chọn phong cách trình chiếu: bốn cột --- */
	.ldtl-modal-wrap.is-wide .ldtl-th-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}

	.ldtl-modal-wrap.is-wide .ldtl-th em {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* --- Ba cơ quan thẩm định nằm ngang --- */
	.ldtl-modal-wrap.is-wide .ldtl-td-cq {
		flex-direction: row;
		gap: 9px;
	}

	.ldtl-modal-wrap.is-wide .ldtl-td-cq .ldtl-ht { flex: 1; }

	/* --- Ô nhập nhiều dòng cao hơn cho dễ soạn --- */
	.ldtl-modal-wrap.is-wide .ldtl-ta { min-height: 96px; }
	.ldtl-modal-wrap.is-wide .ldtl-ta[rows="2"] { min-height: 64px; }
	.ldtl-modal-wrap.is-wide .ldtl-ta[rows="5"] { min-height: 132px; }

	/* --- Hàng nút bấm dồn phải, không kéo giãn cả bề ngang --- */
	.ldtl-modal-wrap.is-wide .ldtl-md-actions { justify-content: flex-end; }
	.ldtl-modal-wrap.is-wide .ldtl-md-actions .ldtl-btn { min-width: 148px; }

	/* --- Thanh tiến trình rộng hơn cho cân đối --- */
	.ldtl-modal-wrap.is-wide .ldtl-wiz-line { flex-basis: 60px; }

	/* --- Câu dẫn không kéo dài hết bề ngang, đọc đỡ mỏi mắt --- */
	.ldtl-modal-wrap.is-wide .ldtl-md-sub,
	.ldtl-modal-wrap.is-wide .ldtl-md-note-sm {
		max-width: 620px;
		margin-right: auto;
		margin-left: auto;
	}

	/* --- Các mức độ dài, giọng văn dàn đều --- */
	.ldtl-modal-wrap.is-wide .ldtl-len-row .ldtl-len { padding: 10px 8px; }
	.ldtl-modal-wrap.is-wide .ldtl-td-nhom .ldtl-len { flex: 0 0 auto; }
}

/* Màn hình lớn: rộng thêm nữa */
@media (min-width: 1280px) {
	.ldtl-modal-wrap.is-wide .ldtl-modal { max-width: 900px; }
	.ldtl-modal-wrap.is-wide .ldtl-modal-body { padding: 34px 44px 30px; }
	.ldtl-modal-wrap.is-wide .ldtl-dt-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Màn hình rất rộng */
@media (min-width: 1600px) {
	.ldtl-modal-wrap.is-wide .ldtl-modal { max-width: 1000px; }
}

/* Màn hình thấp: ưu tiên chiều cao, cuộn trong hộp */
@media (min-width: 900px) and (max-height: 820px) {
	.ldtl-modal-wrap.is-wide .ldtl-modal { max-height: 94vh; }
	.ldtl-modal-wrap.is-wide .ldtl-modal-body { padding-top: 24px; }
	.ldtl-modal-wrap.is-wide .ldtl-ta { min-height: 76px; }
	.ldtl-modal-wrap.is-wide .ldtl-ta[rows="5"] { min-height: 104px; }
}

/* ==================================================================
   BO SUNG v2.0: bang xuat tep kieu agent
   ================================================================== */

.ldtl-xp {
	margin-top: 13px;
	overflow: hidden;
	background: var(--ldtl-panel);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 15px;
	animation: ldtlFadeUp .34s ease both;
}

/* --- Dòng đầu --- */

.ldtl-xp-head {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 11px 14px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--ldtl-primary) 8%, transparent),
		transparent);
	border-bottom: 1px solid var(--ldtl-border);
}

.ldtl-xp-ic {
	display: flex;
	flex: 0 0 26px;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #fff;
	background: linear-gradient(135deg, var(--ldtl-primary), var(--ldtl-accent));
	border-radius: 8px;
}

.ldtl-xp-title {
	flex: 0 0 auto;
	font-size: 12.8px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-xp-hint {
	flex: 1 1 auto;
	font-size: 11.4px;
	color: var(--ldtl-text-3);
	text-align: right;
}

/* --- Ba thẻ định dạng --- */

.ldtl-xp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 11px;
	transition: opacity .24s ease;
}

.ldtl-xp-grid.is-dim {
	pointer-events: none;
	opacity: .38;
}

.ldtl-xp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px 12px 11px;
	overflow: hidden;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-radius: 12px;
	transition: all .2s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-xp-card::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	content: "";
	background: var(--xp, var(--ldtl-primary));
	opacity: 0;
	transition: opacity .2s ease;
}

.ldtl-xp-card:hover {
	background: var(--ldtl-bg-2);
	border-color: var(--xp, var(--ldtl-primary));
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(18, 28, 48, .12);
}

.ldtl-xp-card:hover::before { opacity: 1; }

.ldtl-xp-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #fff;
	background: var(--xp, var(--ldtl-primary));
	border-radius: 9px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--xp, #c8102e) 34%, transparent);
}

.ldtl-xp-txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ldtl-xp-txt b {
	font-size: 13px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-xp-txt em {
	font-size: 10.8px;
	font-style: normal;
	line-height: 1.45;
	color: var(--ldtl-text-3);
}

.ldtl-xp-ext {
	position: absolute;
	top: 11px;
	right: 11px;
	padding: 2px 7px;
	font-size: 9.8px;
	font-weight: 700;
	color: var(--xp, var(--ldtl-primary));
	letter-spacing: .03em;
	background: color-mix(in srgb, var(--xp, #c8102e) 12%, transparent);
	border-radius: 6px;
}

/* --- Khu tiến trình --- */

.ldtl-xp-stage { padding: 0 13px 13px; }

.ldtl-xp-run {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 9px 0 11px;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-text-2);
}

.ldtl-xp-spin {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	border: 2px solid color-mix(in srgb, var(--xp, #c8102e) 25%, transparent);
	border-top-color: var(--xp, var(--ldtl-primary));
	border-radius: 50%;
	animation: ldtlSpin .72s linear infinite;
}

.ldtl-xp-steps {
	padding: 0;
	margin: 0;
	list-style: none;
}

.ldtl-xp-step {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 5px 0;
	font-size: 12.2px;
	color: var(--ldtl-text-3);
	opacity: .55;
	transition: all .3s ease;
}

.ldtl-xp-dot {
	position: relative;
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	background: var(--ldtl-border-2);
	border-radius: 50%;
	transition: all .3s ease;
}

.ldtl-xp-step.is-now {
	color: var(--ldtl-text);
	opacity: 1;
}

.ldtl-xp-step.is-now .ldtl-xp-dot {
	background: var(--xp, var(--ldtl-primary));
	box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--xp, #c8102e) 22%, transparent);
}

.ldtl-xp-step.is-done {
	color: var(--ldtl-text-2);
	opacity: 1;
}

.ldtl-xp-step.is-done .ldtl-xp-dot { background: var(--ldtl-accent); }

/* --- Kết quả --- */

.ldtl-xp-done {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 11px 12px;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-left: 3px solid var(--xp, var(--ldtl-primary));
	border-radius: 0 12px 12px 0;
	animation: ldtlFadeUp .3s ease both;
}

.ldtl-xp-okic {
	display: flex;
	flex: 0 0 30px;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #fff;
	background: var(--xp, var(--ldtl-primary));
	border-radius: 50%;
	animation: ldtlPop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

.ldtl-xp-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.4;
}

.ldtl-xp-info b {
	overflow: hidden;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ldtl-xp-info small {
	font-size: 11px;
	color: var(--ldtl-text-3);
}

.ldtl-xp-dl {
	flex: 0 0 auto;
	padding: 8px 16px;
	font-size: 12.4px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--xp, var(--ldtl-primary));
	border-radius: 10px;
	transition: filter .16s ease;
}

.ldtl-xp-dl:hover { color: #fff; filter: brightness(1.1); }

.ldtl-xp-err {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 13px;
	font-size: 12.4px;
	line-height: 1.6;
	color: var(--ldtl-text-2);
	background: var(--ldtl-primary-soft);
	border-left: 3px solid var(--ldtl-primary);
	border-radius: 0 11px 11px 0;
}

.ldtl-xp-err b { color: var(--ldtl-text); }

@media (max-width: 860px) {
	.ldtl-xp-grid { grid-template-columns: 1fr; gap: 7px; }
	.ldtl-xp-card { flex-direction: row; align-items: center; gap: 11px; }
	.ldtl-xp-badge { flex: 0 0 32px; width: 32px; height: 32px; }
	.ldtl-xp-txt { flex: 1 1 auto; }
	.ldtl-xp-ext { position: static; flex: 0 0 auto; }
	.ldtl-xp-hint { display: none; }
	.ldtl-xp-done { flex-wrap: wrap; }
	.ldtl-xp-dl { flex: 1 1 100%; text-align: center; }
}

/* ==================================================================
   BO SUNG v2.2: soan thao ban Pro
   ================================================================== */

.ldtl-pro-btn {
	position: relative;
	color: #fff;
	background: linear-gradient(135deg, #7c2d12, #b45309);
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(124, 45, 18, .26);
}

.ldtl-pro-btn:hover {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.ldtl-pro-tag {
	padding: 1px 5px;
	font-size: 8.6px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.5;
	color: #7c2d12;
	letter-spacing: .06em;
	background: var(--ldtl-accent);
	border-radius: 4px;
}

.ldtl-md-title .ldtl-pro-tag {
	position: relative;
	top: -3px;
	margin-left: 6px;
	font-size: 9.4px;
}

.ldtl-md-form.is-pro .ldtl-md-crest {
	background: linear-gradient(135deg, #7c2d12, var(--ldtl-accent));
	box-shadow: 0 8px 22px rgba(124, 45, 18, .28);
}

.ldtl-md-form.is-pro .ldtl-ht.is-on,
.ldtl-md-form.is-pro .ldtl-dt.is-on {
	border-color: #b45309;
	background: color-mix(in srgb, #b45309 10%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, #b45309 18%, transparent);
}

.ldtl-md-form.is-pro .ldtl-len.is-on {
	background: linear-gradient(135deg, #7c2d12, #b45309);
}

/* --- Cơ quan ban hành --- */

.ldtl-pro-cq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
}

/* --- Thể loại chia theo nhóm --- */

.ldtl-pro-nhom { margin-bottom: 14px; }

.ldtl-pro-nhom-lb {
	display: block;
	margin-bottom: 7px;
	font-size: 11.4px;
	font-weight: 700;
	color: #b45309;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.ldtl-pro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

.ldtl-pro-grid .ldtl-dt { position: relative; padding: 10px 34px 10px 12px; }

.ldtl-pro-vt {
	position: absolute;
	top: 9px;
	right: 9px;
	padding: 1px 6px;
	font-size: 9.6px;
	font-style: normal;
	font-weight: 700;
	color: #b45309;
	background: color-mix(in srgb, #b45309 13%, transparent);
	border-radius: 5px;
}

@media (min-width: 900px) {
	.ldtl-modal-wrap.is-wide .ldtl-pro-cq { grid-template-columns: repeat(3, 1fr); }
	.ldtl-modal-wrap.is-wide .ldtl-pro-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.ldtl-modal-wrap.is-wide .ldtl-pro-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
	.ldtl-pro-btn { gap: 0; padding: 9px; }
	.ldtl-pro-btn span { display: none; }
	.ldtl-pro-btn .ldtl-pro-tag { display: none; }
	.ldtl-pro-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   BO SUNG v2.3: menu Pro gop chung, khu tep da xuat giu lai
   ================================================================== */

/* ------------------------------------------------------------------
   1. Menu Pro
   ------------------------------------------------------------------ */

.ldtl-pro-wrap { position: relative; }

.ldtl-pro-caret { transition: transform .24s ease; }
.ldtl-pro-btn.is-open .ldtl-pro-caret { transform: rotate(180deg); }

.ldtl-pro-btn.is-open {
	filter: brightness(1.1);
	box-shadow: 0 0 0 3px color-mix(in srgb, #b45309 26%, transparent);
}

.ldtl-pro-menu {
	position: absolute;
	top: calc(100% + 9px);
	right: 0;
	z-index: 40;
	width: 330px;
	max-width: calc(100vw - 24px);
	padding: 6px;
	overflow: hidden;
	background: var(--ldtl-panel-solid);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 15px;
	box-shadow: 0 18px 44px rgba(18, 28, 48, .2);
	animation: ldtlMenuIn .22s cubic-bezier(.22, 1, .36, 1) both;
}

.ldtl-pro-menu[hidden] { display: none; }

@keyframes ldtlMenuIn {
	from { opacity: 0; transform: translateY(-8px) scale(.97); }
	to { opacity: 1; transform: none; }
}

.ldtl-pro-menu-head {
	padding: 9px 11px 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ldtl-border);
}

.ldtl-pro-menu-head strong {
	display: block;
	font-size: 12.4px;
	font-weight: 700;
	color: #b45309;
}

.ldtl-pro-menu-head small {
	display: block;
	margin-top: 1px;
	font-size: 10.8px;
	line-height: 1.45;
	color: var(--ldtl-text-3);
}

.ldtl-pro-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	padding: 10px 11px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 11px;
	transition: background .16s ease;
}

.ldtl-pro-item:hover { background: var(--ldtl-bg); }

.ldtl-pro-item-ic {
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #fff;
	border-radius: 9px;
}

.ldtl-pro-item-ic.is-doc { background: linear-gradient(135deg, #7c2d12, #b45309); }
.ldtl-pro-item-ic.is-td { background: linear-gradient(135deg, #10457e, #0b2545); }

.ldtl-pro-item-tx {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ldtl-pro-item-tx b {
	font-size: 12.8px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-pro-item-tx em {
	font-size: 10.9px;
	font-style: normal;
	line-height: 1.5;
	color: var(--ldtl-text-3);
}

/* ------------------------------------------------------------------
   2. Khu tep da xuat, giu lai lau dai
   ------------------------------------------------------------------ */

.ldtl-xp-out {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 0 13px 13px;
}

.ldtl-xp-out[hidden] { display: none; }

.ldtl-xp-out .ldtl-xp-done { margin: 0; }

.ldtl-xp-done.is-new { animation: ldtlFadeUp .34s ease both; }

@media (max-width: 860px) {
}

/* Co quan ban hanh: the co nhan ky hieu goc phai */
.ldtl-pro-cq .ldtl-ht { position: relative; padding-right: 46px; }

.ldtl-pro-cq .ldtl-pro-vt {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* ==================================================================
   BO SUNG v2.4: thanh tren gon, khay cong cu tren dien thoai
   ================================================================== */

/* Nút mở khay công cụ: chỉ dùng trên điện thoại */
.ldtl-more-btn { display: none; }

/* ------------------------------------------------------------------
   Khay công cụ trượt lên từ đáy
   ------------------------------------------------------------------ */

.ldtl-sheet-wrap {
	position: absolute;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
}

.ldtl-sheet-wrap[hidden] { display: none; }

.ldtl-sheet-veil {
	position: absolute;
	inset: 0;
	background: rgba(9, 14, 28, .46);
	opacity: 0;
	backdrop-filter: blur(3px);
	transition: opacity .24s ease;
}

.ldtl-sheet-wrap.is-open .ldtl-sheet-veil { opacity: 1; }

.ldtl-sheet {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 86dvh;
	padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0));
	overflow-y: auto;
	background: var(--ldtl-panel-solid);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -14px 44px rgba(9, 14, 28, .26);
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.22, 1, .36, 1);
	-webkit-overflow-scrolling: touch;
}

.ldtl-sheet-wrap.is-open .ldtl-sheet { transform: translateY(0); }

.ldtl-sheet-grip {
	display: block;
	width: 38px;
	height: 4px;
	margin: 0 auto 12px;
	background: var(--ldtl-border-2);
	border-radius: 3px;
}

.ldtl-sheet-title {
	margin: 0 0 10px;
	font-size: 13.4px;
	font-weight: 700;
	color: var(--ldtl-text-3);
	text-align: center;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.ldtl-sheet-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ldtl-sheet-item {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 58px;
	padding: 10px 12px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border);
	border-radius: 14px;
	transition: background .16s ease;
}

.ldtl-sheet-item:active { background: var(--ldtl-bg-2); }

.ldtl-sheet-ic {
	display: flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: #fff;
	background: var(--ldtl-text-3);
	border-radius: 11px;
}

.ldtl-sheet-ic svg { width: 20px; height: 20px; }

.ldtl-sheet-item.is-pro .ldtl-sheet-ic { background: linear-gradient(135deg, #7c2d12, #b45309); }
.ldtl-sheet-item.is-td .ldtl-sheet-ic { background: linear-gradient(135deg, #10457e, #0b2545); }
.ldtl-sheet-item.is-doc .ldtl-sheet-ic { background: linear-gradient(135deg, var(--ldtl-primary), #9c0c24); }
.ldtl-sheet-item.is-ppt .ldtl-sheet-ic { background: linear-gradient(135deg, #c43e1c, #8a2a12); }
.ldtl-sheet-item.is-sh .ldtl-sheet-ic { background: linear-gradient(135deg, #0f766e, #115e59); }
.ldtl-sheet-item.is-app .ldtl-sheet-ic { background: linear-gradient(135deg, var(--ldtl-accent), #b8860b); }
.ldtl-sheet-item.is-web .ldtl-sheet-ic { background: linear-gradient(135deg, #2563eb, #1e40af); }
.ldtl-sheet-item.is-th .ldtl-sheet-ic { background: linear-gradient(135deg, #4b5563, #1f2937); }

.ldtl-sheet-tx {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ldtl-sheet-tx b {
	font-size: 13.4px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-sheet-tx em {
	font-size: 11.2px;
	font-style: normal;
	line-height: 1.45;
	color: var(--ldtl-text-3);
}

.ldtl-sheet-sw {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	width: 40px;
	height: 23px;
	padding: 3px;
	background: var(--ldtl-border-2);
	border-radius: 99px;
	transition: background .2s ease;
}

.ldtl-sheet-sw i {
	display: block;
	width: 17px;
	height: 17px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.ldtl-sheet-sw.is-on { background: var(--ldtl-primary); }
.ldtl-sheet-sw.is-on i { transform: translateX(17px); }

.ldtl-sheet-empty {
	padding: 22px 0;
	margin: 0;
	font-size: 13px;
	color: var(--ldtl-text-3);
	text-align: center;
}

/* ------------------------------------------------------------------
   Thanh trên trên điện thoại: nhường chỗ cho tên trợ lý
   ------------------------------------------------------------------ */

@media (max-width: 860px) {

	/* Giấu hết nút công cụ, chỉ để lại nút mở khay */
	.ldtl-top-actions > *:not(.ldtl-more-btn) { display: none !important; }
	.ldtl-more-btn { display: flex; }

	.ldtl-top-actions { flex: 0 0 auto; gap: 0; }

	/* Tên trợ lý được trả lại chỗ */
	.ldtl-brand { flex: 1 1 auto; min-width: 0; }
	.ldtl-brand-text { min-width: 0; }

	.ldtl-brand-text strong {
		display: block;
		overflow: hidden;
		font-size: 15px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ldtl-brand-text small {
		display: -webkit-box;
		overflow: hidden;
		font-size: 11px;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.ldtl-topbar { gap: 10px; }
}

/* Máy nhỏ: vẫn giữ tên, chỉ bỏ dòng mô tả */
@media (max-width: 400px) {
	.ldtl-brand-text small { display: none; }
	.ldtl-brand-text strong { font-size: 14.6px; }
	.ldtl-sheet-tx em { display: none; }
	.ldtl-sheet-item { min-height: 50px; }
}

/* Bản chất công việc và năm trường hợp điều chỉnh */
.ldtl-td-lv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

.ldtl-td-dc {
	padding: 12px 13px;
	margin-bottom: 16px;
	background: var(--ldtl-bg);
	border: 1.5px solid var(--ldtl-border-2);
	border-left: 3px solid #10457e;
	border-radius: 0 13px 13px 0;
	animation: ldtlFadeUp .26s ease both;
}

.ldtl-td-dc[hidden] { display: none; }

.ldtl-td-dc-lb {
	margin: 0 0 9px;
	font-size: 12.4px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ldtl-text-2);
}

.ldtl-td-dc-lb i {
	display: block;
	margin-top: 3px;
	font-size: 11.2px;
	font-style: normal;
	font-weight: 400;
	color: var(--ldtl-text-3);
}

.ldtl-tdth {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	padding: 8px 9px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 9px;
	transition: background .15s ease;
}

.ldtl-tdth:hover { background: var(--ldtl-bg-2); }

.ldtl-tdth input {
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: #10457e;
}

.ldtl-tdth span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ldtl-tdth b {
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text);
}

.ldtl-tdth em {
	font-size: 10.9px;
	font-style: normal;
	line-height: 1.45;
	color: var(--ldtl-text-3);
}

@media (max-width: 860px) {
	.ldtl-td-lv { grid-template-columns: 1fr; }
	.ldtl-tdth { padding: 10px 9px; }
}

/* Dòng báo đã tự nhận diện */
.ldtl-td-auto {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	padding: 9px 11px;
	margin: 0 0 14px;
	font-size: 11.8px;
	line-height: 1.55;
	color: #10457e;
	background: color-mix(in srgb, #10457e 8%, transparent);
	border-left: 3px solid #10457e;
	border-radius: 0 10px 10px 0;
	animation: ldtlFadeUp .26s ease both;
}

.ldtl-td-auto[hidden] { display: none; }

.ldtl-td-auto::before {
	flex: 0 0 auto;
	font-weight: 700;
	content: "✓";
}

/* ==================================================================
   BO SUNG v2.7: tim kiem lich su, xem truoc A4, ra soat
   ================================================================== */

/* ------------------------------------------------------------------
   1. Tim kiem, ghim, nhan chuyen de
   ------------------------------------------------------------------ */

.ldtl-conv-find { padding: 0 4px 9px; }

.ldtl-conv-find-in {
	position: relative;
	display: flex;
	gap: 7px;
	align-items: center;
	padding: 0 9px;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 10px;
	transition: border-color .16s ease;
}

.ldtl-conv-find-in:focus-within { border-color: var(--ldtl-primary); }
.ldtl-conv-find-in svg { flex: 0 0 auto; color: var(--ldtl-text-3); }

.ldtl-conv-find-in input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 0;
	font: inherit;
	font-size: 12.6px;
	color: var(--ldtl-text);
	background: none;
	border: 0;
	outline: none;
}

.ldtl-conv-find-in input::-webkit-search-cancel-button { display: none; }

.ldtl-conv-find-x {
	display: flex;
	flex: 0 0 auto;
	padding: 2px;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
}

.ldtl-conv-find-x:hover { color: var(--ldtl-primary); }
.ldtl-conv-find-x[hidden] { display: none; }

.ldtl-conv-find-kq {
	padding: 0 3px;
	margin: 7px 0 0;
	font-size: 11.2px;
	color: var(--ldtl-text-3);
}

.ldtl-conv-find-kq[hidden] { display: none; }

.ldtl-conv-item.is-pinned { border-left: 2.5px solid var(--ldtl-accent); }

.ldtl-conv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 100%;
	margin-top: 3px;
}

.ldtl-conv-tags i {
	padding: 1px 6px;
	overflow: hidden;
	font-size: 9.8px;
	font-style: normal;
	color: var(--ldtl-primary);
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--ldtl-primary-soft);
	border-radius: 5px;
}

.ldtl-conv-hit {
	width: 100%;
	margin-top: 3px;
	font-size: 10.2px;
	font-style: italic;
	color: var(--ldtl-text-3);
}

.ldtl-conv-acts {
	display: flex;
	flex: 0 0 auto;
	gap: 1px;
	align-items: center;
	margin-left: auto;
	opacity: 0;
	transition: opacity .16s ease;
}

.ldtl-conv-item:hover .ldtl-conv-acts,
.ldtl-conv-item.is-active .ldtl-conv-acts { opacity: 1; }

.ldtl-conv-act {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--ldtl-text-3);
	cursor: pointer;
	border-radius: 6px;
}

.ldtl-conv-act svg { width: 14px; height: 14px; }
.ldtl-conv-act:hover { color: var(--ldtl-primary); background: var(--ldtl-primary-soft); }
.ldtl-conv-act.is-on { color: var(--ldtl-accent); }

@media (max-width: 860px) {
	.ldtl-conv-acts { opacity: 1; }
	.ldtl-conv-act { width: 30px; height: 30px; }
}

/* ------------------------------------------------------------------
   2. Xem trước khổ A4 — dựng đúng kích thước giấy thật
   ------------------------------------------------------------------ */

.ldtl-xp-a4,
.ldtl-xp-rs {
	display: flex;
	gap: 9px;
	align-items: center;
	justify-content: center;
	width: calc(100% - 22px);
	padding: 11px;
	margin: 11px 11px 0;
	font: inherit;
	font-size: 12.6px;
	font-weight: 600;
	color: var(--ldtl-primary);
	cursor: pointer;
	background: var(--ldtl-primary-soft);
	border: 1.5px solid transparent;
	border-radius: 12px;
	transition: all .18s ease;
}

.ldtl-xp-a4:hover,
.ldtl-xp-rs:hover { border-color: var(--ldtl-primary); transform: translateY(-1px); }

.ldtl-xp-rs { color: #10457e; background: color-mix(in srgb, #10457e 9%, transparent); }
.ldtl-xp-rs:hover { border-color: #10457e; }

/* --- Khổ hộp thoại riêng cho trang A4 --- */

.ldtl-modal-wrap.is-a4 .ldtl-modal {
	max-width: min(1280px, calc(100vw - 40px));
	max-height: 94dvh;
}

.ldtl-modal-wrap.is-a4 .ldtl-modal-body {
	display: flex;
	flex-direction: column;
	padding: 20px 22px 18px;
	overflow: hidden;
}

.ldtl-a4-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* --- Thanh công cụ --- */

.ldtl-a4-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--ldtl-border);
}

.ldtl-a4-bar .ldtl-md-title { flex: 0 0 auto; margin: 0; }

.ldtl-a4-zoom {
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 3px;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 9px;
}

.ldtl-a4-zbtn {
	padding: 5px 11px;
	font: inherit;
	font-size: 11.6px;
	font-weight: 600;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 6px;
	transition: all .16s ease;
}

.ldtl-a4-zbtn:hover { color: var(--ldtl-text); }

.ldtl-a4-zbtn.is-on {
	color: #fff;
	background: var(--ldtl-primary);
}

.ldtl-a4-tools { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.ldtl-btn-sm { padding: 8px 15px; font-size: 12.4px; }

/* --- Khu chính: trang giấy bên trái, bảng sửa bên phải --- */

.ldtl-a4-main {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 16px;
	min-height: 0;
	padding-top: 16px;
}

.ldtl-a4-scroll {
	min-height: 0;
	padding: 26px 0 34px;
	overflow: auto;
	background: #59616f;
	border-radius: 12px;
	-webkit-overflow-scrolling: touch;
}

.ldtl-a4-stage { margin: 0 auto; }

/* Trang A4 đúng kích thước: 210 x 297mm ở 96 điểm ảnh mỗi inch */
.ldtl-a4-page {
	position: relative;
	box-sizing: border-box;
	width: 794px;
	min-height: 1123px;
	padding: 76px 57px 76px 113px;
	font-family: "Times New Roman", Times, serif;
	font-size: 17.3px;
	line-height: 1.5;
	color: #111;
	text-align: justify;
	background: #fff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .34);
}

.ldtl-a4-page ::selection { background: color-mix(in srgb, var(--ldtl-accent) 60%, transparent); }

/* --- Khối thể thức --- */

.ldtl-a4-head,
.ldtl-a4-sign {
	width: 100%;
	margin-bottom: 16px;
	border-collapse: collapse;
}

.ldtl-a4-head td,
.ldtl-a4-sign td {
	width: 50%;
	padding: 0;
	font-size: 17.3px;
	line-height: 1.42;
	text-align: center;
	vertical-align: top;
}

.ldtl-a4-sign { margin-top: 26px; }
.ldtl-a4-sign td:first-child { text-align: left; }
.ldtl-a4-sign td:first-child div { font-size: 14.6px; line-height: 1.5; }

.ldtl-a4-head .is-b,
.ldtl-a4-sign .is-b { font-weight: 700; }
.ldtl-a4-head .is-big { font-size: 18.6px; }
.ldtl-a4-head .is-u,
.ldtl-a4-sign .is-u { text-decoration: underline; }
.ldtl-a4-head .is-i,
.ldtl-a4-sign .is-i { font-style: italic; }
.ldtl-a4-head .is-sep { letter-spacing: .06em; }
.ldtl-a4-sign .is-space { height: 62px; }

.ldtl-a4-loai {
	margin: 26px 0 3px;
	font-size: 18.6px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.ldtl-a4-trich {
	margin: 0;
	font-weight: 700;
	text-align: center;
}

.ldtl-a4-line { margin: 5px 0 22px; text-align: center; }

/* --- Thân bài --- */

.ldtl-a4-body h1,
.ldtl-a4-body h2,
.ldtl-a4-body h3 {
	margin: 16px 0 8px;
	font-size: 17.3px;
	font-weight: 700;
	text-align: left;
}

.ldtl-a4-body h1 { text-align: center; text-transform: uppercase; }
.ldtl-a4-body h3 { font-style: italic; }
.ldtl-a4-body p { margin: 0 0 9px; text-indent: 38px; }
.ldtl-a4-body ul,
.ldtl-a4-body ol { padding-left: 52px; margin: 0 0 9px; }
.ldtl-a4-body li { margin-bottom: 4px; }

.ldtl-a4-body table {
	width: 100%;
	margin: 12px 0;
	font-size: 15px;
	border-collapse: collapse;
}

.ldtl-a4-body th,
.ldtl-a4-body td {
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #333;
}

.ldtl-a4-body th { font-weight: 700; text-align: center; }

/* --- Đường ngắt trang --- */

.ldtl-a4-brk {
	position: absolute;
	right: 0;
	left: 0;
	pointer-events: none;
	border-top: 1.5px dashed #c8102e;
}

.ldtl-a4-brk span {
	position: absolute;
	top: 4px;
	right: 10px;
	padding: 2px 8px;
	font-family: system-ui, sans-serif;
	font-size: 10.4px;
	color: #fff;
	background: #c8102e;
	border-radius: 4px;
}

/* --- Bảng sửa bên phải --- */

.ldtl-a4-side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	background: var(--ldtl-bg);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 12px;
}

.ldtl-a4-side-hd {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 13px 15px 11px;
	font-size: 12.8px;
	font-weight: 700;
	color: var(--ldtl-text);
	background: var(--ldtl-bg);
	border-bottom: 1px solid var(--ldtl-border);
}

.ldtl-a4-side-hint {
	padding: 15px;
	margin: 0;
	font-size: 12.2px;
	line-height: 1.65;
	color: var(--ldtl-text-3);
}

.ldtl-a4-side-hint[hidden] { display: none; }

.ldtl-a4-side-ft {
	display: flex;
	gap: 14px;
	justify-content: center;
	padding: 11px 15px;
	margin-top: auto;
	font-size: 11.4px;
	color: var(--ldtl-text-3);
	border-top: 1px solid var(--ldtl-border);
}

.ldtl-a4-pop {
	position: relative;
	padding: 14px 15px;
}

.ldtl-a4-pop[hidden] { display: none; }

.ldtl-a4-pop-hd {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 12.4px;
	font-weight: 700;
	color: var(--ldtl-text);
}

.ldtl-a4-pop-hd i {
	font-size: 10.8px;
	font-style: normal;
	font-weight: 400;
	color: var(--ldtl-text-3);
}

.ldtl-a4-pop-doan {
	padding: 9px 11px;
	margin: 0 0 12px;
	font-size: 11.6px;
	font-style: italic;
	line-height: 1.55;
	color: var(--ldtl-text-2);
	background: var(--ldtl-bg-2);
	border-left: 3px solid var(--ldtl-accent);
	border-radius: 0 8px 8px 0;
}

.ldtl-a4-pop-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 11px;
}

.ldtl-a4-yc {
	padding: 10px 8px;
	font: inherit;
	font-size: 11.6px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ldtl-text-2);
	cursor: pointer;
	background: var(--ldtl-panel-solid);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 9px;
	transition: all .16s ease;
}

.ldtl-a4-yc:hover {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
	border-color: var(--ldtl-primary);
}

.ldtl-a4-pop-tu { display: flex; flex-direction: column; gap: 7px; }

.ldtl-a4-pop-tu input {
	width: 100%;
	padding: 10px 11px;
	font: inherit;
	font-size: 12.2px;
	color: var(--ldtl-text);
	background: var(--ldtl-panel-solid);
	border: 1px solid var(--ldtl-border-2);
	border-radius: 9px;
	outline: none;
}

.ldtl-a4-pop-tu input:focus { border-color: var(--ldtl-primary); }

.ldtl-a4-pop-x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	padding: 3px;
	color: var(--ldtl-text-3);
	cursor: pointer;
	background: none;
	border: 0;
}

.ldtl-a4-pop-x:hover { color: var(--ldtl-primary); }

.ldtl-a4-pop-run {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 15px;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--ldtl-text-2);
}

.ldtl-a4-pop-run .ldtl-xp-spin { --xp: var(--ldtl-primary); }

/* --- Màn hình vừa: bảng sửa hẹp hơn --- */

@media (max-width: 1180px) {
	.ldtl-a4-main { grid-template-columns: minmax(0, 1fr) 290px; }
	.ldtl-a4-pop-grid { grid-template-columns: 1fr; }
}

/* --- Điện thoại và máy bảng: xếp dọc --- */

@media (max-width: 900px) {
	.ldtl-modal-wrap.is-a4 .ldtl-modal { max-width: 100%; max-height: 96dvh; }
	.ldtl-modal-wrap.is-a4 .ldtl-modal-body { padding: 14px 12px 12px; }

	.ldtl-a4-main {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-top: 12px;
	}

	.ldtl-a4-scroll { flex: 1 1 auto; padding: 14px 0 20px; }
	.ldtl-a4-side { flex: 0 0 auto; max-height: 42dvh; }
	.ldtl-a4-pop-grid { grid-template-columns: 1fr 1fr; }

	.ldtl-a4-bar { gap: 8px 10px; }
	.ldtl-a4-bar .ldtl-md-title { flex: 1 1 100%; }
	.ldtl-a4-tools { flex: 1 1 auto; margin-left: 0; }
	.ldtl-a4-tools .ldtl-btn { flex: 1; }
}

/* ==================================================================
   BO SUNG v2.7.2: bang sua noi canh cho boi den, to noi doan da sua
   ================================================================== */

/* Khung cuộn làm gốc toạ độ cho bảng sửa nổi */
.ldtl-a4-scroll { position: relative; }

/* --- Bảng sửa nổi ngay cạnh chỗ bôi đen --- */

.ldtl-a4-pop.is-noi {
	position: absolute;
	z-index: 12;
	width: 340px;
	max-width: calc(100% - 20px);
	padding: 13px 14px;
	background: var(--ldtl-panel-solid);
	border: 1.5px solid var(--ldtl-primary);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(9, 14, 28, .3);
	animation: ldtlPopIn .18s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ldtlPopIn {
	from { opacity: 0; transform: translateY(-6px) scale(.97); }
	to { opacity: 1; transform: none; }
}

.ldtl-a4-pop.is-noi .ldtl-a4-pop-grid { grid-template-columns: 1fr 1fr; }

.ldtl-a4-pop.is-noi .ldtl-a4-pop-doan {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Khi bảng nổi thì cột phải chỉ còn lời nhắc và thông tin */
.ldtl-a4-side-hint.is-dang-sua {
	color: var(--ldtl-primary);
	background: var(--ldtl-primary-soft);
}

/* --- Tô nổi đoạn vừa được sửa --- */

.ldtl-a4-body .is-moi {
	position: relative;
	padding: 4px 10px 4px 12px;
	margin-left: -12px;
	background: color-mix(in srgb, #d4a017 17%, transparent);
	border-left: 3px solid #b8860b;
	border-radius: 0 6px 6px 0;
	animation: ldtlSuaMoi 1.1s ease both;
}

@keyframes ldtlSuaMoi {
	0% { background: color-mix(in srgb, #d4a017 52%, transparent); }
	100% { background: color-mix(in srgb, #d4a017 17%, transparent); }
}

.ldtl-a4-body table.is-moi { display: table; padding: 0; margin-left: 0; }

.ldtl-a4-body .is-moi::after {
	position: absolute;
	top: -9px;
	right: 6px;
	padding: 1px 7px;
	font-family: system-ui, sans-serif;
	font-size: 9.4px;
	font-weight: 700;
	color: #fff;
	content: "đã sửa";
	background: #b8860b;
	border-radius: 4px;
}

/* --- Nút nhảy tới đoạn vừa sửa --- */

.ldtl-a4-toi {
	padding: 3px 10px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	color: #b8860b;
	cursor: pointer;
	background: color-mix(in srgb, #d4a017 15%, transparent);
	border: 0;
	border-radius: 6px;
	transition: filter .16s ease;
}

.ldtl-a4-toi:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
	.ldtl-a4-pop.is-noi {
		position: static;
		width: auto;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}