/* Nút đi nhanh, cài app và lên đầu trang (Trình Giải Toán) */

.tgt-qn {
	--qn-bg: #ffffff;
	--qn-card: #f3f6fd;
	--qn-card-hover: #e8eefc;
	--qn-ink: #23314d;
	--qn-muted: #5d6b86;
	--qn-line: #e3e8f4;
	--qn-grad: linear-gradient(135deg, #8b5cf6 0%, #f0508f 100%);
	--qn-shadow: 0 18px 48px rgba(18, 26, 53, .22);
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: inherit;
	pointer-events: none;
}
.tgt-qn--left { right: auto; left: 18px; align-items: flex-start; }
.tgt-qn > * { pointer-events: auto; }
:root[data-mode="dark"] .tgt-qn {
	--qn-bg: #121a35;
	--qn-card: #1b2547;
	--qn-card-hover: #233059;
	--qn-ink: #e9edf8;
	--qn-muted: #a5b0cc;
	--qn-line: #2a365e;
	--qn-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

.tgt-qn__icon { width: 22px; height: 22px; flex: none; }

/* ---------- Bảng đi nhanh ---------- */
.tgt-qn__panel {
	width: min(320px, calc(100vw - 36px));
	max-height: calc(100vh - 170px);
	max-height: calc(100dvh - 170px);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 16px 14px 14px;
	background: var(--qn-bg);
	color: var(--qn-ink);
	border: 1px solid var(--qn-line);
	border-radius: 20px;
	box-shadow: var(--qn-shadow);
	transform-origin: bottom right;
	animation: tgt-qn-in .18s ease-out;
}
.tgt-qn--left .tgt-qn__panel { transform-origin: bottom left; }
.tgt-qn__panel[hidden] { display: none; }
@keyframes tgt-qn-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.tgt-qn__title {
	margin: 0 4px 10px;
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qn-muted);
}
.tgt-qn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tgt-qn__list li { margin: 0; padding: 0; }
.tgt-qn__item {
	display: block;
	padding: 10px 14px 10px 16px;
	border-radius: 12px;
	background: var(--qn-card);
	border-left: 4px solid var(--c, #8b5cf6);
	color: var(--qn-ink) !important;
	text-decoration: none !important;
	transition: background .15s, transform .15s;
}
.tgt-qn__item:hover, .tgt-qn__item:focus-visible { background: var(--qn-card-hover); transform: translateX(2px); }
.tgt-qn__item strong { display: block; font-size: .98rem; font-weight: 800; line-height: 1.3; }
.tgt-qn__item span { display: block; margin-top: 1px; font-size: .84rem; line-height: 1.35; color: var(--qn-muted); }

.tgt-qn__install {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 12px 0 0;
	padding: 13px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--qn-grad);
	color: #fff;
	font: inherit;
	font-size: .98rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(240, 80, 143, .3);
	transition: filter .15s, transform .15s;
}
.tgt-qn__install:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tgt-qn__install[hidden] { display: none; }
.tgt-qn__hint {
	margin: 8px 2px 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--qn-card);
	font-size: .86rem;
	line-height: 1.45;
	color: var(--qn-ink);
}
.tgt-qn__hint[hidden] { display: none; }
.tgt-qn__hint b { font-weight: 800; }

.tgt-qn__search { position: relative; margin: 12px 0 0; }
.tgt-qn__search input[type="search"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 44px 12px 14px;
	border: 1px solid var(--qn-line);
	border-radius: 12px;
	background: var(--qn-card);
	color: var(--qn-ink);
	font: inherit;
	font-size: .95rem;
	-webkit-appearance: none;
	appearance: none;
}
.tgt-qn__search input::placeholder { color: var(--qn-muted); opacity: 1; }
.tgt-qn__search input:focus { outline: 2px solid #8b5cf6; outline-offset: 1px; }
.tgt-qn__search button {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--qn-muted);
	cursor: pointer;
}
.tgt-qn__search button:hover { color: var(--qn-ink); background: var(--qn-card-hover); }
.tgt-qn__search .tgt-qn__icon { width: 18px; height: 18px; }

/* ---------- Nút tròn ---------- */
.tgt-qn__fab, .tgt-qn__top {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.tgt-qn__fab {
	background: var(--qn-grad);
	color: #fff;
	box-shadow: 0 10px 24px rgba(139, 92, 246, .38);
	transition: transform .2s;
}
.tgt-qn__fab:hover { transform: scale(1.06); }
.tgt-qn__fab .tgt-qn__icon:last-child { display: none; }
.tgt-qn__fab[aria-expanded="true"] .tgt-qn__icon:first-child { display: none; }
.tgt-qn__fab[aria-expanded="true"] .tgt-qn__icon:last-child { display: block; }

.tgt-qn__top {
	background: var(--qn-bg);
	color: var(--qn-ink);
	box-shadow: 0 8px 22px rgba(18, 26, 53, .18);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.tgt-qn__top:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(10px); }
.tgt-qn__top:hover { transform: translateY(-2px); }
.tgt-qn__top .tgt-qn__icon { width: 20px; height: 20px; }
.tgt-qn__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tgt-qn__ring circle { fill: none; stroke: var(--qn-line); stroke-width: 3; }
.tgt-qn__ring .tgt-qn__ring-bar {
	stroke: #8b5cf6;
	stroke-linecap: round;
	stroke-dasharray: 131.95;
	stroke-dashoffset: 131.95;
}

.tgt-qn__fab:focus-visible, .tgt-qn__top:focus-visible, .tgt-qn__install:focus-visible, .tgt-qn__item:focus-visible {
	outline: 3px solid #8b5cf6;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.tgt-qn { right: 14px; bottom: 14px; }
	.tgt-qn--left { left: 14px; }
	.tgt-qn__fab, .tgt-qn__top { width: 48px; height: 48px; }
	.tgt-qn__panel { padding: 14px 12px 12px; max-height: calc(100dvh - 150px); }
	.tgt-qn__list { gap: 6px; }
	.tgt-qn__item { padding: 8px 12px 8px 14px; }
	.tgt-qn__item strong { font-size: .94rem; }
	.tgt-qn__item span { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tgt-qn__panel { animation: none; }
	.tgt-qn__fab, .tgt-qn__top, .tgt-qn__item, .tgt-qn__install { transition: none; }
}

@media print { .tgt-qn { display: none !important; } }