/* Toán Tư Duy Core – front-end app */
.ttd-core-app,
.ttd-dashboard {
	--ttd-blue: #07589f;
	--ttd-blue-dark: #043f78;
	--ttd-blue-soft: #eaf5ff;
	--ttd-sky: #d8efff;
	--ttd-yellow: #f0b429;
	--ttd-yellow-soft: #fff5d7;
	--ttd-green: #1b9b5f;
	--ttd-green-soft: #e8f8ef;
	--ttd-red: #d95656;
	--ttd-red-soft: #fff0f0;
	--ttd-ink: #19344d;
	--ttd-muted: #667c90;
	--ttd-line: #d7e3ed;
	--ttd-paper: #ffffff;
	max-width: 1040px;
	margin: 30px auto;
	color: var(--ttd-ink);
	font: inherit;
}

.ttd-core-app *,
.ttd-dashboard * {
	box-sizing: border-box;
}

.ttd-core-app .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ttd-core-app__header,
.ttd-dashboard__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 18px;
}

.ttd-core-app__eyebrow,
.ttd-dashboard__eyebrow,
.ttd-result__eyebrow {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--ttd-blue);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ttd-core-app__title,
.ttd-dashboard__header h2 {
	margin: 0;
	color: var(--ttd-blue-dark);
	font-size: clamp(25px, 3vw, 34px);
	line-height: 1.15;
}

.ttd-core-app__description {
	max-width: 650px;
	margin: 9px 0 0;
	color: var(--ttd-muted);
	font-size: 16px;
	line-height: 1.6;
}

.ttd-core-app__account {
	flex: 0 0 auto;
	padding: 10px 13px;
	border: 1px solid var(--ttd-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.ttd-core-app__account a,
.ttd-result__save a {
	color: var(--ttd-blue);
	text-decoration: none;
}

.ttd-core-app__account a:hover,
.ttd-result__save a:hover {
	text-decoration: underline;
}

.ttd-core-app__saved {
	color: var(--ttd-green);
}

.ttd-core-app__mount {
	min-height: 145px;
}

.ttd-core-app__loading {
	margin: 0;
	padding: 28px;
	border: 1px solid var(--ttd-line);
	border-radius: 18px;
	background: #fff;
	color: var(--ttd-muted);
	text-align: center;
}

.ttd-setup,
.ttd-session,
.ttd-result,
.ttd-dashboard {
	border: 1px solid var(--ttd-line);
	border-radius: 20px;
	background: var(--ttd-paper);
	box-shadow: 0 10px 30px rgba(30, 79, 119, .08);
}

.ttd-setup {
	padding: clamp(22px, 4vw, 38px);
}

.ttd-setup__intro {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 25px;
}

.ttd-setup__badge {
	display: grid;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--ttd-blue), #1f9be4);
	box-shadow: 0 8px 15px rgba(7, 88, 159, .2);
	color: #fff;
	font-size: 27px;
}

.ttd-setup h3 {
	margin: 0;
	color: var(--ttd-blue-dark);
	font-size: 25px;
}

.ttd-setup p {
	margin: 5px 0 0;
	color: var(--ttd-muted);
	line-height: 1.55;
}

.ttd-setup__fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.ttd-setup__fields--hidden {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ttd-setup__fields label {
	display: grid;
	gap: 7px;
	font-size: 14px;
	font-weight: 800;
}

.ttd-setup__fields select {
	width: 100%;
	height: 46px;
	padding: 0 34px 0 12px;
	border: 1px solid #b9cddb;
	border-radius: 10px;
	outline: none;
	background-color: #fff;
	color: var(--ttd-ink);
	font: inherit;
	font-weight: 700;
}

.ttd-setup__fields select:focus {
	border-color: var(--ttd-blue);
	box-shadow: 0 0 0 3px rgba(7, 88, 159, .13);
}

.ttd-setup__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px dashed var(--ttd-line);
	color: var(--ttd-muted);
	font-size: 14px;
	font-weight: 600;
}

.ttd-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 45px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ttd-button:not(:disabled):hover {
	transform: translateY(-1px);
}

.ttd-button:disabled {
	cursor: not-allowed;
	opacity: .48;
}

.ttd-button--primary {
	border-color: var(--ttd-blue);
	background: var(--ttd-blue);
	box-shadow: 0 7px 14px rgba(7, 88, 159, .18);
	color: #fff;
}

.ttd-button--primary:hover {
	background: var(--ttd-blue-dark);
}

.ttd-button--soft {
	border-color: #c3d8e6;
	background: #f7fbff;
	color: var(--ttd-blue);
}

.ttd-button--soft:hover {
	background: var(--ttd-blue-soft);
}

.ttd-session {
	padding: clamp(16px, 3.4vw, 32px);
}

.ttd-session__top,
.ttd-session__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.ttd-session__top strong {
	display: block;
	font-size: 19px;
}

.ttd-session__module {
	display: block;
	margin-bottom: 4px;
	color: var(--ttd-blue);
	font-size: 13px;
	font-weight: 800;
}

.ttd-session__score {
	padding: 9px 12px;
	border-radius: 12px;
	background: var(--ttd-blue-soft);
	text-align: right;
}

.ttd-session__score span,
.ttd-session__score strong {
	display: block;
}

.ttd-session__score span {
	color: var(--ttd-muted);
	font-size: 12px;
	font-weight: 700;
}

.ttd-session__score strong {
	color: var(--ttd-blue);
	font-size: 18px;
}

.ttd-session__progress {
	height: 8px;
	margin: 14px 0 23px;
	overflow: hidden;
	border-radius: 99px;
	background: #e7eff5;
}

.ttd-session__progress i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ttd-blue), #44a8e8);
	transition: width .25s ease;
}

.ttd-question-card {
	padding: clamp(18px, 4vw, 32px);
	border: 1px solid #d9e7f0;
	border-radius: 17px;
	background: linear-gradient(180deg, #faffff 0%, #f6fbff 100%);
}

.ttd-question-card h3 {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ttd-blue-dark);
	font-size: clamp(21px, 3vw, 29px);
	line-height: 1.35;
	text-align: center;
}

.ttd-question-card__visual {
	display: grid;
	min-height: 170px;
	margin: 24px 0;
	place-items: center;
}

.ttd-choices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	max-width: 800px;
	margin: 0 auto;
}

.ttd-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 12px 10px;
	border: 2px solid #cadde9;
	border-radius: 13px;
	background: #fff;
	color: var(--ttd-ink);
	cursor: pointer;
	font: inherit;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.ttd-choice:not(:disabled):hover {
	transform: translateY(-2px);
	border-color: #61a8d5;
	box-shadow: 0 7px 14px rgba(28, 100, 148, .11);
}

.ttd-choice.is-selected {
	border-color: var(--ttd-blue);
	background: var(--ttd-blue-soft);
	box-shadow: 0 0 0 3px rgba(7, 88, 159, .12);
}

.ttd-choice.is-correct {
	border-color: var(--ttd-green);
	background: var(--ttd-green-soft);
	color: #137145;
}

.ttd-choice.is-wrong {
	border-color: var(--ttd-red);
	background: var(--ttd-red-soft);
	color: #a93939;
}

.ttd-choice:disabled {
	cursor: default;
}

.ttd-choice--shape {
	min-height: 82px;
}

.ttd-choice__shape {
	width: 51px;
	height: 51px;
}

.ttd-feedback {
	max-width: 800px;
	margin: 18px auto 0;
	padding: 14px 17px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}

.ttd-feedback strong {
	display: block;
	margin-bottom: 3px;
}

.ttd-feedback p {
	margin: 0;
}

.ttd-feedback--correct {
	border: 1px solid #b9e7cf;
	background: var(--ttd-green-soft);
	color: #156a42;
}

.ttd-feedback--wrong {
	border: 1px solid #f1c2c2;
	background: var(--ttd-red-soft);
	color: #a23c3c;
}

.ttd-question-card__message {
	margin: 16px 0 0;
	color: #b53d3d;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
}

.ttd-session__actions {
	margin-top: 19px;
}

/* Number sequence */
.ttd-sequence {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	font-size: clamp(20px, 4vw, 30px);
	font-weight: 900;
}

.ttd-sequence__item {
	display: grid;
	width: clamp(42px, 8vw, 64px);
	height: clamp(42px, 8vw, 64px);
	place-items: center;
	border: 2px solid #b8d8ec;
	border-radius: 13px;
	background: #fff;
	color: var(--ttd-blue-dark);
}

.ttd-sequence__item--missing {
	border-style: dashed;
	border-color: var(--ttd-yellow);
	background: var(--ttd-yellow-soft);
	color: #a16d00;
}

.ttd-sequence__arrow {
	font-style: normal;
	color: #82a6bd;
}

/* Pattern shapes */
.ttd-pattern {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ttd-pattern__item {
	display: grid;
	width: 70px;
	height: 70px;
	place-items: center;
	border: 1px solid #d6e5ef;
	border-radius: 15px;
	background: #fff;
}

.ttd-pattern__item--question {
	border: 2px dashed var(--ttd-yellow);
	background: var(--ttd-yellow-soft);
	color: #a26c00;
	font-size: 31px;
	font-weight: 900;
}

.ttd-shape {
	display: block;
	width: 50px;
	height: 50px;
	overflow: visible;
}

.ttd-shape > *,
.ttd-count-board__item .ttd-shape__drawing {
	stroke: currentColor;
	stroke-width: 6;
	stroke-linejoin: round;
	fill: currentColor;
}

.ttd-shape--circle { color: #248acf; }
.ttd-shape--square { color: #ee8c45; }
.ttd-shape--triangle { color: #44a772; }
.ttd-shape--star { color: #e7b027; }
.ttd-shape--hexagon { color: #8a6fd0; }
.ttd-shape--heart { color: #e66d90; }

/* Count shapes */
.ttd-count-visual {
	width: min(100%, 660px);
}

.ttd-count-visual__target {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 13px;
	color: var(--ttd-blue-dark);
	font-size: 15px;
}

.ttd-shape--tiny {
	width: 30px;
	height: 30px;
}

.ttd-count-board {
	display: block;
	width: 100%;
	height: auto;
	padding: 8px;
	border: 1px solid #d6e4ee;
	border-radius: 16px;
	background: #fff;
}


.ttd-count-board__item--0 { opacity: 1; }
.ttd-count-board__item--1 { opacity: .94; }
.ttd-count-board__item--2 { opacity: .88; }
.ttd-count-board__item--3 { opacity: .97; }

/* Logic */
.ttd-logic-visual {
	display: grid;
	width: 110px;
	height: 110px;
	place-items: center;
	border: 1px solid #c8dfef;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff 0, #ebf7ff 65%);
	color: var(--ttd-blue);
	font-size: 55px;
	font-weight: 900;
}

/* Clock */
.ttd-clock-wrap {
	display: grid;
	width: min(100%, 270px);
	place-items: center;
}

.ttd-clock {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 8px 10px rgba(19, 73, 111, .12));
}

.ttd-clock__face {
	fill: #fff;
	stroke: #1a75ad;
	stroke-width: 8;
}

.ttd-clock__tick {
	stroke: #52738c;
	stroke-width: 3;
	stroke-linecap: round;
}

.ttd-clock__number {
	fill: #1d4764;
	font-size: 17px;
	font-weight: 800;
	text-anchor: middle;
}

.ttd-clock__hand {
	stroke-linecap: round;
}

.ttd-clock__hand--hour {
	stroke: var(--ttd-blue-dark);
	stroke-width: 9;
}

.ttd-clock__hand--minute {
	stroke: var(--ttd-yellow);
	stroke-width: 6;
}

.ttd-clock__centre {
	fill: var(--ttd-blue-dark);
	stroke: #fff;
	stroke-width: 3;
}

/* Result */
.ttd-result {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(25px, 4.5vw, 45px);
	text-align: center;
}

.ttd-result__badge {
	display: grid;
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffcc57, #ed9c20);
	box-shadow: 0 9px 18px rgba(226, 151, 20, .22);
	color: #fff;
	font-size: 36px;
}

.ttd-result h3 {
	margin: 0;
	color: var(--ttd-blue-dark);
	font-size: clamp(27px, 4vw, 38px);
}

.ttd-result > p {
	max-width: 560px;
	margin: 9px auto 0;
	color: var(--ttd-muted);
	line-height: 1.6;
}

.ttd-result__score {
	margin: 25px 0 18px;
}

.ttd-result__score strong,
.ttd-result__score span {
	display: block;
}

.ttd-result__score strong {
	color: var(--ttd-blue);
	font-size: clamp(45px, 8vw, 66px);
	line-height: 1;
}

.ttd-result__score span {
	margin-top: 7px;
	color: var(--ttd-muted);
	font-weight: 800;
}

.ttd-result__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 auto;
}

.ttd-result__stats > div {
	padding: 13px 9px;
	border-radius: 12px;
	background: #f2f8fc;
}

.ttd-result__stats span,
.ttd-result__stats strong {
	display: block;
}

.ttd-result__stats span {
	color: var(--ttd-muted);
	font-size: 12px;
	font-weight: 700;
}

.ttd-result__stats strong {
	margin-top: 3px;
	color: var(--ttd-blue-dark);
	font-size: 14px;
}

.ttd-result__save {
	margin: 20px auto 0 !important;
	font-size: 14px;
	font-weight: 700;
}

.ttd-result__save.is-saved { color: var(--ttd-green); }
.ttd-result__save.is-failed { color: #b64545; }

.ttd-result__actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}

/* Dashboard */
.ttd-dashboard {
	padding: clamp(20px, 4vw, 36px);
}

.ttd-dashboard--login {
	max-width: 700px;
	text-align: center;
}

.ttd-dashboard--login h2 {
	margin: 0;
	color: var(--ttd-blue-dark);
}

.ttd-dashboard--login p {
	margin: 10px auto 20px;
	color: var(--ttd-muted);
	line-height: 1.6;
}

.ttd-dashboard__login,
.ttd-dashboard__practice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 14px;
	border-radius: 9px;
	background: var(--ttd-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

.ttd-dashboard__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

.ttd-stat {
	padding: 17px 15px;
	border: 1px solid #dce9f1;
	border-radius: 14px;
	background: #f8fcff;
}

.ttd-stat span,
.ttd-stat strong {
	display: block;
}

.ttd-stat span {
	color: var(--ttd-muted);
	font-size: 13px;
	font-weight: 700;
}

.ttd-stat strong {
	margin-top: 5px;
	color: var(--ttd-blue-dark);
	font-size: 27px;
	line-height: 1.1;
}

.ttd-dashboard__section {
	margin-top: 27px;
}

.ttd-dashboard__section h3 {
	margin: 0 0 14px;
	color: var(--ttd-blue-dark);
	font-size: 20px;
}

.ttd-dashboard__progress-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ttd-progress-card {
	padding: 15px;
	border: 1px solid #dbe8f0;
	border-radius: 13px;
	background: #fff;
}

.ttd-progress-card__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.ttd-progress-card__top strong { color: var(--ttd-blue-dark); }
.ttd-progress-card__top span { color: var(--ttd-green); font-weight: 900; }

.ttd-progress-card__bar {
	height: 7px;
	margin: 10px 0 8px;
	overflow: hidden;
	border-radius: 99px;
	background: #e8eff4;
}

.ttd-progress-card__bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ttd-green);
}

.ttd-progress-card p,
.ttd-dashboard__empty {
	margin: 0;
	color: var(--ttd-muted);
	font-size: 14px;
	line-height: 1.5;
}

.ttd-dashboard__table-wrap { overflow-x: auto; }

.ttd-dashboard__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ttd-dashboard__table th,
.ttd-dashboard__table td {
	padding: 12px 10px;
	border-bottom: 1px solid #e4edf3;
	text-align: left;
}

.ttd-dashboard__table th {
	color: var(--ttd-muted);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ttd-dashboard__table td strong { color: var(--ttd-blue-dark); }
.ttd-dashboard__table td span { color: var(--ttd-muted); }

@media (max-width: 800px) {
	.ttd-core-app__header,
	.ttd-dashboard__header {
		display: block;
	}

	.ttd-core-app__account,
	.ttd-dashboard__practice {
		display: inline-flex;
		margin-top: 14px;
	}

	.ttd-setup__fields,
	.ttd-setup__fields--hidden {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ttd-dashboard__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ttd-core-app,
	.ttd-dashboard {
		margin: 22px auto;
	}

	.ttd-setup,
	.ttd-session,
	.ttd-dashboard {
		border-radius: 15px;
	}

	.ttd-setup__intro {
		align-items: flex-start;
	}

	.ttd-setup__badge {
		flex-basis: 45px;
		width: 45px;
		height: 45px;
		border-radius: 13px;
		font-size: 22px;
	}

	.ttd-setup h3 { font-size: 21px; }

	.ttd-setup__fields,
	.ttd-setup__fields--hidden,
	.ttd-choices,
	.ttd-result__stats,
	.ttd-dashboard__progress-grid {
		grid-template-columns: 1fr 1fr;
	}

	.ttd-setup__footer,
	.ttd-session__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.ttd-session__actions > * { width: 100%; }
	.ttd-session__actions .ttd-button { width: 100%; }

	.ttd-question-card {
		padding: 17px 12px;
	}

	.ttd-question-card__visual {
		margin: 18px 0;
	}

	.ttd-sequence {
		gap: 3px;
	}

	.ttd-sequence__arrow {
		font-size: 15px;
	}

	.ttd-pattern__item {
		width: 52px;
		height: 52px;
		border-radius: 11px;
	}

	.ttd-pattern__item .ttd-shape {
		width: 36px;
		height: 36px;
	}

	.ttd-result__actions {
		flex-direction: column;
	}

	.ttd-result__actions .ttd-button { width: 100%; }

	.ttd-dashboard__table {
		min-width: 610px;
	}
}

@media print {
	.ttd-core-app__header,
	.ttd-setup__footer,
	.ttd-session__actions,
	.ttd-result__actions,
	.ttd-core-app__account {
		display: none !important;
	}

	.ttd-core-app,
	.ttd-session,
	.ttd-question-card {
		border: 0;
		box-shadow: none;
	}
}