/* ====== MOCK-EXAM-CARD ====== */
.main-card-test {
	padding: 20px;
}

.main-card-test .cards-test {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 40px;
}

.cards-test .card-test-each {
	background: #4fa1e8;
	border-radius: 16px;
	padding: 20px;
	width: 250px;
	height: 300px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	color: var(--color-primary);
}

.cards-test .card-test-each:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.card-title h3 {
	font-size: 1.5rem;
	margin: 0;
	color: var(--color-primary);
	text-align: center;
}

.card-score .score-box {
	background: #fff;
	border-radius: 8px;
	padding: 10px;
	font-size: 1rem;
	text-align: center;
	color: var(--color-primary);
	font-weight: bold;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

.card-detail {
	display: flex;
	flex-direction: column;
}

.card-detail .info {
	display: flex;
	justify-content: start;
	align-items: center;
	font-size: 1rem;
	font-family: 'Poppins', sans-serif;
	color: var(--color-text);
	margin-top: 10px;
}

.card-detail .info i {
	font-size: 1.1rem;
	color: var(--color-primary);
	margin-right: 3px;
	padding: 10px;
}

.card-detail .info div {
	margin-right: 3px;
}

.card-action .action-box {
	background-color: #006ac7;
	outline: none;
	color: white;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	transition: all 0.3s;
	margin-top: 10px;
}

.card-action .action-box:hover {
	box-shadow: 0 4px 10px #006ac7;
}

.score-result {
	font-size: 15px;
	font-weight: bold;
	color: #2e7d32;
	background-color: #e8f5e9;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid #c8e6c9;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ====== MOCK-EXAM ====== */
.main-content-test {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	background-color: var(--color-beige);
	height: auto;
}

.main-content-test .header-title {
	align-items: center;
	display: flex;
	justify-content: center;
}

.main-content-test .header-title h3 {
	font-size: 26px;
	font-weight: 600;
	color: var(--color-primary);
	font-family: 'Roboto', sans-serif;
}

.main-content-test .header-title a {
	padding: 8px 20px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	text-align: center;
	margin-left: 10px;
	background-color: var(--color-bgsecond);
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	transition: all 0.3s ease;
}

.main-content-test .header-title a:hover {
	background-color: var(--color-main);
	border: 1px solid var(--color-bgsecond);
	color: var(--color-bgsecond);
}

.wrapper-test {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: row;
}

/* ====== SIDEBAR-QUESTION ====== */
.sidebar-question-sum {
	flex: 1;
	margin-right: 15px;
	padding: 10px 20px;
	position: relative;
	border-radius: 10px;
	background-color: var(--color-white);
}

.sidebar-question-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.sidebar-question-inner .div {
	display: flex;
	flex-direction: column;
	justify-content: start;
	padding: 10px 0;
}

.time-test {
	font-size: 20px;
	color: var(--color-primary);
	font-family: "Robioo", sans-serif;
	font-weight: 600;
	border-bottom: solid 1px var(--color-border);
}

.div-submit {
	width: 100%;
	align-items: center;
}

.btn-submit-test {
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-primary);
	padding: 8px;
	border: solid 1px var(--color-primary);
	border-radius: 10px;
	background-color: var(--color-bgsecond);
	transition: all 0.3s ease;
	width: 100%;
}

.btn-submit-test:hover {
	background-color: var(--color-primary);
	border: 1px solid var(--color-bgsecond);
	color: var(--color-bgsecond);
}

.btn-save-score {
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-primary);
	padding: 8px;
	border: solid 1px var(--color-primary);
	border-radius: 10px;
	background-color: var(--color-bgsecond);
	transition: all 0.3s ease;
	width: 100%;
}

.btn-save-score:hover {
	background-color: var(--color-primary);
	border: 1px solid var(--color-bgsecond);
	color: var(--color-bgsecond);
}

.test-question-list-part {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: start;
}

.test-question-list-part .part-list {
	font-size: 16px;
	font-family: "Robioo", sans-serif;
	font-weight: 600;
	padding: 3px;
	border-radius: 5px;
	background-color: #006ac7;
	border: solid 1px var(--color-primary);
	color: var(--color-white);
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
}

.test-question-list-part .part-list:hover {
	background-color: var(--color-bgsecond);
	color: var(--color-primary);
	border: solid 1px var(--color-primary);
}

.test-question-list-part .item-question {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	padding: 3px;
	border: solid 1px var(--color-primary);
	border-radius: 5px;
	background-color: var(--color-bgsecond);
	transition: all 0.3s ease;
	width: 28px;
	height: 28px;
	margin-right: 3px;
	margin-bottom: 3px;
}

.test-question-list-part .mockexam34 {
	display: contents;   
}

.test-question-list-part .item-question:hover {
	background-color: var(--color-primary);
	border: 1px solid var(--color-bgsecond);
	color: var(--color-bgsecond);
}

.test-question-list-part .item-question.selected {
	font-weight: bold;
	background-color: var(--color-selected-bg, #ffd700);
	color: var(--color-selected-text, #000);
	border-color: var(--color-selected-border, #000);
	box-shadow: 0 0 5px var(--color-selected-shadow, #ffc107);
}

.test-question-list-part .item-question.selected:hover {
	background-color: #ffea70;
	color: #000;
	border-color: #d4af37;
	box-shadow: 0 0 6px #f0c94d;
}

.test-question-list-part .item-question.correct {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
	box-shadow: 0 0 3px #a3cfbb;
}

.test-question-list-part .item-question.correct:hover {
	background-color: #c3e6cb;
	border-color: #a3cfbb;
	color: #0c4128;
}

.test-question-list-part .item-question.wrong,
.test-question-list-part .item-question.unanswered {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	box-shadow: 0 0 3px #f1b0b7;
}

.test-question-list-part .item-question.wrong:hover,
.test-question-list-part .item-question.unanswered:hover {
	background-color: #f5c6cb;
	border-color: #f1b0b7;
	color: #491217;
}

/* Tooltip container */
.item-question {
	position: relative;
	cursor: pointer;
	text-decoration: none;
}

/* Tooltip text */
.item-question::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 125%;
	/* Hiển thị tooltip phía trên */
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 5px 8px;
	border-radius: 4px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 999;
}

/* Arrow of tooltip */
.item-question::before {
	content: "";
	position: absolute;
	bottom: 115%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Show tooltip on hover */
.item-question:hover::after,
.item-question:hover::before {
	opacity: 1;
}

/* ====== TEST-QUESTION ====== */
.test-content {
	flex: 5;
	padding: 10px;
	position: relative;
	border-radius: 10px;
	background-color: var(--color-white);
}

.test-inner {
	display: flex;
	flex-direction: column;
	padding: 10px;
}

/*
.test-inner>.part-test {
	display: none;
}

.part-test>.active {
	display: block;
}
*/

.part-test {
	margin-bottom: 10px;
}

.part-test .part-title span {
	font-size: 20px;
	font-weight: 600;
	color: var(--color-primary);
	margin-top: 5px;
}

.test-number {
	display: flex;
	flex-direction: row;
	justify-content: start;
	margin-top: 5px;
}

.number-question {
	margin-right: 10px;
	cursor: pointer;
}

.number-question strong {
	border-radius: 50%;
	background-color: var(--color-bgsecond);
	color: var(--color-primary);
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	text-align: center;
	display: inline-block;
}

/*
.number-question.marked strong {
    background-color: var(--color-btn);
    color: var(--color-white);
}
*/

/* ====== MOCKEXAM-PART345 ====== */
.list-each-audio {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.each-question-audio {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: solid 1px var(--color-border);
}

.question-common {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px 20px;
}

.question-common .ques-audio {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.question-common .ques-audio audio {
	width: 100%;
	height: 50px;
	margin-top: 10px;
	color: #0b0a0a;
}

.question-detail.part34 {
	border: none;
	margin-bottom: 10px;
}

.have-question {
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.number-question-text {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

.question-part345 p {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-primary);
}

/* ====== MOCKEXAM-PART67 ====== */

.list-each-script {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.each-question-script {
	display: flex;
	flex-direction: row;
	justify-content: center;
	border-bottom: solid 1px var(--color-border);
	margin: 10px 0;
}

.script-common {
	flex: 6;
	border: none;
}

.part67-wrapper {
	flex: 4;
}

.choose-ans.trandong {
	display: flex;
    align-items: start;
}

.choose-ans.trandong div {
    display: flex;
    /*align-items: flex-start;*/
    padding: 10px;
}

.choose-ans.trandong div input {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.choose-ans.trandong div label {
    color: #505050;
    font-size: 16px;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.number-question-text.trandong{
	align-items: flex-start;
}

.to-top-btn {
    position: fixed;
    bottom: 7rem;
    right: 0.5rem;
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    color: var(--color-main);
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: bolf;
    z-index: 20;
    transition: right 300ms;
    font-size: 18px;
}

.to-top-btn.show {
    right: -2rem;
}

.to-top-btn .line {
    display: inline-block;
    height: 1px;
    width: 60px;
    background: var(--color-primary);
    margin-left: .5rem;
}