/**
 * Tokutei Vocabulary V2 - Irodori Style Table
 * Inspired by Japan Foundation's Irodori textbook design
 *
 * @package TokuteiVocabulary
 * @since 2.1.0
 */

/* ============================================================================
   IRODORI COLOR PALETTE
   ============================================================================ */

:root {
	/* Irodori primary colors - Default brown theme (neutral) */
	--irodori-primary: #8B7355;
	--irodori-primary-light: #A89078;
	--irodori-primary-dark: #5D4E37;
	--irodori-primary-pale: #EFEBE9;

	/* Ruby text color - Orange-red */
	--irodori-ruby: #E74C3C;
	--irodori-ruby-light: #EC7063;

	/* Accent colors */
	--irodori-accent-yellow: #F7DC6F;
	--irodori-accent-orange: #F39C12;
	--irodori-accent-pink: #FF6B9D;
	--irodori-accent-blue: #5DADE2;
	--irodori-accent-purple: #BB8FCE;

	/* Warm tones for backgrounds */
	--irodori-bg-light: #FDFEFE;
	--irodori-bg-warm: #FEF9E7;
	--irodori-bg-green-light: #F5F5F5;
	--irodori-bg-green-pale: #FAFAFA;

	/* Text colors - stronger */
	--irodori-text: #1A1A1A;
	--irodori-text-secondary: #4A4A4A;
	--irodori-text-muted: #777777;

	/* Border colors - more visible */
	--irodori-border: #D0C8C0;
	--irodori-border-light: #E8E4E0;
	--irodori-border-strong: #8B7355;
}

/* ============================================================================
   LESSON THEME COLORS - Synced with flashcard.css
   ============================================================================ */

/* Theme 1: Purple (Tím đậm) - Bài 1 */
.tvoc2-theme-purple {
	--irodori-primary: #6B4C9A;
	--irodori-primary-light: #9575CD;
	--irodori-primary-dark: #4A2C7A;
	--irodori-primary-pale: #EDE7F6;
	--irodori-bg-green-light: #F3E5F5;
	--irodori-bg-green-pale: #F8F4FC;
	--irodori-border: #D1C4E9;
	--irodori-border-light: #E8E0F0;
	--irodori-border-strong: #6B4C9A;
}

/* Theme 2: Orange (Cam đậm) - Bài 2 */
.tvoc2-theme-orange {
	--irodori-primary: #E67E22;
	--irodori-primary-light: #F5A623;
	--irodori-primary-dark: #D35400;
	--irodori-primary-pale: #FFF3E0;
	--irodori-bg-green-light: #FFF8E1;
	--irodori-bg-green-pale: #FFFCF0;
	--irodori-border: #FFE0B2;
	--irodori-border-light: #FFF0D6;
	--irodori-border-strong: #E67E22;
}

/* Theme 3: Navy (Xanh navy đậm) - Bài 3 */
.tvoc2-theme-navy {
	--irodori-primary: #34495E;
	--irodori-primary-light: #5D6D7E;
	--irodori-primary-dark: #2C3E50;
	--irodori-primary-pale: #ECEFF1;
	--irodori-bg-green-light: #ECEFF1;
	--irodori-bg-green-pale: #F5F7F8;
	--irodori-border: #CFD8DC;
	--irodori-border-light: #E8EAEC;
	--irodori-border-strong: #34495E;
}

/* Theme 4: Brown (Nâu đất) - Bài 4 */
.tvoc2-theme-brown {
	--irodori-primary: #8B7355;
	--irodori-primary-light: #A89078;
	--irodori-primary-dark: #5D4E37;
	--irodori-primary-pale: #EFEBE9;
	--irodori-bg-green-light: #EFEBE9;
	--irodori-bg-green-pale: #FAF8F6;
	--irodori-border: #D7CCC8;
	--irodori-border-light: #EBE6E3;
	--irodori-border-strong: #8B7355;
}

/* Theme 5: Teal (Xanh ngọc) - Bài 5 */
.tvoc2-theme-teal {
	--irodori-primary: #00897B;
	--irodori-primary-light: #4DB6AC;
	--irodori-primary-dark: #00695C;
	--irodori-primary-pale: #E0F2F1;
	--irodori-bg-green-light: #E0F2F1;
	--irodori-bg-green-pale: #F0FAF9;
	--irodori-border: #B2DFDB;
	--irodori-border-light: #D8EDEB;
	--irodori-border-strong: #00897B;
}

/* Theme 6: Green (Xanh lá) - Bài 6 */
.tvoc2-theme-green {
	--irodori-primary: #27AE60;
	--irodori-primary-light: #58D68D;
	--irodori-primary-dark: #1E8449;
	--irodori-primary-pale: #D5F5E3;
	--irodori-bg-green-light: #E8F8F5;
	--irodori-bg-green-pale: #F0FDF4;
	--irodori-border: #C8E6C9;
	--irodori-border-light: #E0F0E0;
	--irodori-border-strong: #27AE60;
}

/* Theme 7: Rose (Hồng đậm) - Bài 7 */
.tvoc2-theme-rose {
	--irodori-primary: #C2185B;
	--irodori-primary-light: #E91E63;
	--irodori-primary-dark: #880E4F;
	--irodori-primary-pale: #FCE4EC;
	--irodori-bg-green-light: #FCE4EC;
	--irodori-bg-green-pale: #FEF2F6;
	--irodori-border: #F8BBD9;
	--irodori-border-light: #FBDBE9;
	--irodori-border-strong: #C2185B;
}

/* Theme 8: Indigo (Chàm) - Bài 8 */
.tvoc2-theme-indigo {
	--irodori-primary: #3F51B5;
	--irodori-primary-light: #7986CB;
	--irodori-primary-dark: #303F9F;
	--irodori-primary-pale: #E8EAF6;
	--irodori-bg-green-light: #E8EAF6;
	--irodori-bg-green-pale: #F3F4FA;
	--irodori-border: #C5CAE9;
	--irodori-border-light: #E0E3F0;
	--irodori-border-strong: #3F51B5;
}

/* ============================================================================
   WRAPPER
   ============================================================================ */

.tvoc2-wrapper {
	position: relative;
}

/* ============================================================================
   LESSON HEADER - IRODORI STYLE
   ============================================================================ */

.tvoc2-irodori-header {
	position: relative;
	margin-bottom: 2rem;
	border-radius: 8px;
	overflow: hidden;
	box-shadow:
		0 4px 15px rgba(39, 174, 96, 0.15),
		0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Topic bar - Now with gradient green */
.tvoc2-irodori-topic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	background: linear-gradient(135deg, var(--irodori-primary) 0%, var(--irodori-primary-dark) 100%);
	color: white;
	font-size: 0.9rem;
	position: relative;
	overflow: hidden;
}

.tvoc2-irodori-topic__left {
	display: flex;
	align-items: center;
}

/* Decorative circles in topic bar */
.tvoc2-irodori-topic::before {
	content: "";
	position: absolute;
	right: -30px;
	top: -30px;
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.tvoc2-irodori-topic::after {
	content: "";
	position: absolute;
	right: 40px;
	top: -20px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

.tvoc2-irodori-topic__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
	border-radius: 5px;
	font-weight: 700;
	margin-right: 1rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tvoc2-irodori-topic__label::before {
	content: "▶";
	font-size: 0.9rem;
}

.tvoc2-irodori-topic__text {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Lesson title bar */
.tvoc2-irodori-lesson {
	display: flex;
	align-items: center;
	padding: 1.5rem 2rem;
	background: linear-gradient(135deg, var(--irodori-bg-green-pale) 0%, var(--irodori-bg-warm) 50%, var(--irodori-primary-pale) 100%);
	border-bottom: 4px solid var(--irodori-primary-light);
	position: relative;
}

/* Decorative pattern */
.tvoc2-irodori-lesson::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 100%;
	background:
		radial-gradient(circle at 80% 20%, var(--irodori-accent-yellow) 0%, transparent 8%),
		radial-gradient(circle at 60% 70%, var(--irodori-primary-light) 0%, transparent 6%),
		radial-gradient(circle at 90% 80%, var(--irodori-accent-orange) 0%, transparent 5%);
	opacity: 0.3;
	pointer-events: none;
}

.tvoc2-irodori-lesson__number {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
	margin-right: 1.5rem;
	padding-right: 1.5rem;
	border-right: 3px solid var(--irodori-primary);
	position: relative;
	z-index: 1;
}

.tvoc2-irodori-lesson__number-label {
	font-size: 1.25rem;
	color: var(--irodori-primary-dark);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
}

.tvoc2-irodori-lesson__number-value {
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--irodori-primary);
	line-height: 1;
	text-shadow: 2px 2px 0 rgba(39, 174, 96, 0.2);
}

.tvoc2-irodori-lesson__number-sublabel {
	font-size: 1.25rem;
	color: var(--irodori-primary-dark);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
}

.tvoc2-irodori-lesson__title {
	flex: 1;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--irodori-text);
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.4;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.tvoc2-irodori-lesson__title ruby rt {
	font-size: 0.45em;
	color: var(--irodori-ruby);
	font-weight: 500;
}

/* Small button in topic bar */
.tvoc2-irodori-btn--small {
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	border-radius: 8px;
	position: relative;
	z-index: 1;
}

.tvoc2-irodori-btn--small .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ============================================================================
   TABLE HEADER - IRODORI STYLE
   ============================================================================ */

.tvoc2-irodori-table-header {
	display: table;
	width: 100%;
	table-layout: fixed;
	background: #FDF2F4;
	border: 2px solid #ADB5BD;
	border-bottom: 2px solid var(--irodori-primary);
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.tvoc2-irodori-table-header__col {
	display: table-cell;
	padding: 1rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
	color: #C0392B;
	border-right: 1px solid #ADB5BD;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tvoc2-irodori-table-header__col:first-child {
	width: 50px;
}

.tvoc2-irodori-table-header__col:nth-child(2) {
	width: 25%;
}

.tvoc2-irodori-table-header__col:nth-child(3) {
	width: 100px;
}

.tvoc2-irodori-table-header__col:nth-child(4) {
	width: 20%;
}

.tvoc2-irodori-table-header__col:last-child {
	border-right: none;
}

.tvoc2-irodori-table-header__col--word {
	font-family: "Noto Sans JP", sans-serif;
}

/* ============================================================================
   SECTION HEADER - IRODORI STYLE (Hidden by default)
   ============================================================================ */

.tvoc2-irodori-section {
	display: none;
}

/* ============================================================================
   VOCABULARY TABLE - IRODORI STYLE
   ============================================================================ */

.tvoc2-irodori-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: white;
	font-size: 0.95rem;
	border-left: 2px solid #ADB5BD;
	border-right: 2px solid #ADB5BD;
	border-bottom: 2px solid #ADB5BD;
	table-layout: fixed;
}

.tvoc2-irodori-table:last-of-type {
	border-radius: 0 0 6px 6px;
}

.tvoc2-irodori-table:last-of-type tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}

.tvoc2-irodori-table:last-of-type tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.tvoc2-irodori-table tr {
	transition: background 0.2s ease;
}

.tvoc2-irodori-table tr:nth-child(even) {
	background: #FAFBFC;
}

.tvoc2-irodori-table tr:hover {
	background: #F0F7F4;
}

.tvoc2-irodori-table td {
	padding: 1rem 0.875rem;
	vertical-align: middle;
	border-right: 1px solid #ADB5BD;
	border-bottom: 1px solid #ADB5BD;
}

.tvoc2-irodori-table td:last-child {
	border-right: none;
}

.tvoc2-irodori-table tr:last-child td {
	border-bottom: none;
}

/* Column 0: STT (Number) */
.tvoc2-irodori-col-stt {
	width: 50px;
	text-align: center;
	font-weight: 700;
	color: #2980B9;
	font-size: 0.875rem;
	background: #F8F9FA;
}

/* Column 1: Word (Từ vựng) */
.tvoc2-irodori-col-word {
	width: 25%;
	font-family: "Noto Sans JP", sans-serif;
	background: #FFFDF7;
}

.tvoc2-irodori-word {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--irodori-text);
	line-height: 1.8;
	display: inline;
}

.tvoc2-irodori-word ruby {
	ruby-position: over;
}

.tvoc2-irodori-word ruby rt {
	font-size: 0.5em;
	color: var(--irodori-ruby);
	font-weight: 500;
}

/* Audio icon inline - White background with primary icon (synced with flashcard style) */
.tvoc2-irodori-audio-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 0.5rem;
	background: #fff;
	border: 2px solid var(--irodori-primary);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	vertical-align: middle;
	color: var(--irodori-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tvoc2-irodori-audio-icon:hover {
	background: var(--irodori-primary-pale, #D5F5E3);
	transform: scale(1.05);
	border-color: var(--irodori-primary-dark);
	color: var(--irodori-primary-dark);
}

.tvoc2-irodori-audio-icon:active {
	transform: scale(0.95);
}

.tvoc2-irodori-audio-icon .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Column 2: Han Viet (Hán Nôm) + Audio */
.tvoc2-irodori-col-hanviet {
	width: 100px;
	text-align: center;
	font-size: 0.9rem;
}

/* Desktop: Audio and Hanviet inline */
.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon {
	margin-bottom: 0.375rem;
}

.tvoc2-irodori-hanviet {
	font-weight: 700;
	color: #6B4C9A;
	padding: 0.25rem 0.5rem;
	background: #FFFBEB;
	border-radius: 2px;
	display: block;
	font-size: 0.85rem;
}

/* Column 3: Vietnamese meaning (Nghĩa) */
.tvoc2-irodori-col-meaning {
	width: 20%;
	color: var(--irodori-text);
}

.tvoc2-irodori-meaning {
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--irodori-text);
}

/* Column 4: Examples (Ví dụ) */
.tvoc2-irodori-col-example {
	color: var(--irodori-text);
}

.tvoc2-irodori-col-example .tvoc2-irodori-example {
	padding: 0.5rem 0.625rem;
	background: #F8F9FA;
	border-radius: 3px;
	border-left: 3px solid var(--irodori-primary);
}

.tvoc2-irodori-col-example .tvoc2-irodori-example + .tvoc2-irodori-example {
	margin-top: 0.75rem;
}

.tvoc2-irodori-col-example .tvoc2-irodori-example__jp {
	font-family: "Noto Sans JP", sans-serif;
	color: var(--irodori-text);
	font-size: 0.9rem;
	line-height: 1.6;
	padding-bottom: 0.375rem;
	margin-bottom: 0.375rem;
	border-bottom: 1px dashed #CCC;
	padding-left: 2rem;
	position: relative;
}

.tvoc2-irodori-col-example .tvoc2-irodori-example__jp::before {
	content: "JP:";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--irodori-primary);
	font-size: 0.75rem;
}

.tvoc2-irodori-col-example .tvoc2-irodori-example__jp ruby rt {
	font-size: 0.55em;
	color: var(--irodori-ruby);
}

.tvoc2-irodori-col-example .tvoc2-irodori-example__vi {
	font-size: 0.85rem;
	color: #555;
	font-weight: 500;
	padding-left: 2rem;
	position: relative;
}

.tvoc2-irodori-col-example .tvoc2-irodori-example__vi::before {
	content: "VN:";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: #E74C3C;
	font-size: 0.75rem;
}

.tvoc2-irodori-no-example {
	color: var(--irodori-text-muted);
	font-style: italic;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.tvoc2-irodori-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	margin-top: 2rem;
	background: #F8F9FA;
	border-radius: 8px;
	border: 1px solid #DEE2E6;
}

.tvoc2-irodori-footer__level {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.1rem;
	color: #495057;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tvoc2-irodori-footer__level::before {
	content: "";
	font-size: 1.25rem;
}

.tvoc2-irodori-footer__page {
	font-weight: 600;
	font-size: 0.95rem;
	color: white;
	background: var(--irodori-primary);
	padding: 0.375rem 0.875rem;
	border-radius: 8px;
}

/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

.tvoc2-irodori-actions {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.tvoc2-irodori-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.tvoc2-irodori-btn--primary {
	background: linear-gradient(135deg, var(--irodori-primary-light) 0%, var(--irodori-primary) 100%);
	color: white;
}

.tvoc2-irodori-btn--primary:hover {
	background: linear-gradient(135deg, var(--irodori-primary) 0%, var(--irodori-primary-dark) 100%);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(39, 174, 96, 0.35);
}

.tvoc2-irodori-btn--secondary {
	background: white;
	color: var(--irodori-text);
	border: 2px solid var(--irodori-border);
}

.tvoc2-irodori-btn--secondary:hover {
	background: var(--irodori-bg-green-light);
	border-color: var(--irodori-primary);
	color: var(--irodori-primary-dark);
}

.tvoc2-irodori-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1024px) {
	.tvoc2-irodori-table-header__col:first-child {
		width: 40px;
	}

	.tvoc2-irodori-table-header__col:nth-child(3) {
		width: 80px;
	}

	.tvoc2-irodori-col-stt {
		width: 40px;
	}

	.tvoc2-irodori-col-hanviet {
		width: 80px;
	}
}

@media (max-width: 768px) {
	.tvoc2-wrapper::before,
	.tvoc2-wrapper::after {
		display: none;
	}

	.tvoc2-irodori-header {
		margin-bottom: 1rem;
		border-radius: 6px;
	}

	.tvoc2-irodori-topic {
		padding: 0.5rem 0.75rem;
	}

	.tvoc2-irodori-topic__label {
		padding: 0.2rem 0.5rem;
		font-size: 0.65rem;
	}

	/* Lesson header - keep horizontal layout, title flows naturally */
	.tvoc2-irodori-lesson {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0.75rem 1rem;
		gap: 0.5rem 0.75rem;
	}

	.tvoc2-irodori-lesson__number {
		margin-right: 0;
		margin-bottom: 0;
		padding-right: 0.75rem;
		padding-bottom: 0;
		border-right: 2px solid var(--irodori-primary);
		border-bottom: none;
		width: auto;
		justify-content: center;
		flex-shrink: 0;
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	.tvoc2-irodori-lesson__number-value {
		font-size: 1.5rem;
	}

	.tvoc2-irodori-lesson__number-label,
	.tvoc2-irodori-lesson__number-sublabel {
		font-size: 0.7rem;
	}

	.tvoc2-irodori-lesson__title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 1rem;
		text-align: left;
		display: flex;
		align-items: center;
	}

	.tvoc2-irodori-table-header {
		display: none;
	}

	.tvoc2-irodori-table {
		border-radius: 8px;
		border: none;
		background: transparent;
	}

	/* Card-style vocabulary items on mobile - 3-column layout with STT */
	.tvoc2-irodori-table tr {
		display: grid;
		grid-template-columns: auto 1fr 56px;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"stt word audio-hanviet"
			"stt meaning audio-hanviet"
			"example example example";
		padding: 0;
		margin-bottom: 0.75rem;
		border: 1px solid var(--irodori-border-light);
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
		background: white;
	}

	.tvoc2-irodori-table tr:nth-child(even) {
		background: white;
	}

	.tvoc2-irodori-table td {
		border-right: none;
		border-bottom: none;
		width: auto !important;
	}

	/* STT column - vertical badge on left side */
	.tvoc2-irodori-col-stt {
		display: flex !important;
		grid-area: stt;
		grid-row: 1 / 3;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.375rem !important;
		background: var(--irodori-primary-pale, #F0F7F4);
		font-size: 0.75rem;
		font-weight: 700;
		color: var(--irodori-primary, #27AE60);
		min-width: 28px;
		border-right: 1px dashed var(--irodori-border-light);
	}

	/* Word cell - top left */
	.tvoc2-irodori-col-word {
		grid-area: word;
		display: block !important;
		padding: 0.5rem 0.625rem 0.25rem !important;
		background: transparent;
		font-size: 1.1rem;
		font-weight: 600;
		border-bottom: none !important;
		line-height: 1.4;
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
	}

	.tvoc2-irodori-col-word .tvoc2-irodori-word {
		display: block;
		line-height: 1.4;
		word-break: keep-all;
	}

	/* Right column: Audio + Han Viet - fixed width */
	.tvoc2-irodori-col-hanviet {
		grid-area: audio-hanviet;
		grid-row: 1 / 3;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 0.25rem;
		padding: 0.5rem 0.375rem !important;
		background: transparent;
		text-align: center;
		border-left: 1px dashed var(--irodori-border-light);
		width: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;
	}

	.tvoc2-irodori-col-hanviet::before {
		content: none;
	}

	/* Audio button - icon only on mobile (no border/background) */
	/* Override min-width/min-height from frontend.css touch targets */
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon,
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon.tvoc2-btn-audio {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		margin-bottom: 0.25rem;
		margin-left: 0;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon .dashicons,
	.tvoc2-irodori-col-hanviet .tvoc2-btn-audio .dashicons {
		font-size: 14px !important;
		width: 14px !important;
		height: 14px !important;
	}

	/* Han Viet text below audio */
	.tvoc2-irodori-hanviet {
		font-size: 0.7rem;
		padding: 0.125rem 0.25rem;
		background: #FFFBEB;
		border-radius: 3px;
		display: inline-block;
		line-height: 1.3;
	}

	/* Meaning cell - below word, left side */
	.tvoc2-irodori-col-meaning {
		grid-area: meaning;
		padding: 0.25rem 0.75rem 0.5rem !important;
		font-size: 0.9rem;
		line-height: 1.5;
		color: var(--irodori-text-secondary);
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.tvoc2-irodori-col-meaning::before {
		content: none;
	}

	.tvoc2-irodori-meaning {
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* Example - full width at bottom */
	.tvoc2-irodori-col-example {
		grid-area: example;
		padding: 0.5rem 0.75rem !important;
		background: #FAFAFA;
		border-top: 1px solid var(--irodori-border-light) !important;
	}

	.tvoc2-irodori-col-example::before {
		content: none;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example {
		padding: 0.375rem 0.5rem;
		border-left: none;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__jp {
		font-size: 0.85rem;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__vi {
		font-size: 0.8rem;
	}

	.tvoc2-irodori-actions {
		flex-direction: column;
	}

	.tvoc2-irodori-btn {
		justify-content: center;
	}

	.tvoc2-irodori-footer {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
		padding: 1rem;
	}
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
	.tvoc2-wrapper::before,
	.tvoc2-wrapper::after {
		display: none;
	}

	.tvoc2-irodori-header {
		box-shadow: none;
		border: 1px solid #000;
	}

	.tvoc2-irodori-topic {
		background: var(--irodori-primary) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.tvoc2-irodori-actions,
	.tvoc2-irodori-audio-icon {
		display: none !important;
	}

	.tvoc2-irodori-table {
		font-size: 10pt;
	}

	.tvoc2-irodori-table tr {
		page-break-inside: avoid;
	}
}

/* ============================================================================
   LESSON NAVIGATION ARROWS
   ============================================================================ */

/* Desktop: Fixed position beside wrapper content */
/* JavaScript will calculate exact positions based on wrapper edges */
/* CSS provides fallback positioning */
.tvoc2-lesson-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
}

/* Fallback: hide on very wide screens until JS calculates position */
.tvoc2-lesson-nav--prev {
	left: 20px;
}

.tvoc2-lesson-nav--next {
	right: 20px;
}

/* Ensure wrapper has position context */
.tvoc2-wrapper {
	position: relative;
}

.tvoc2-lesson-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 72px;
	background: white;
	border: 2px solid #E0E0E0;
	border-radius: 6px;
	color: var(--irodori-primary);
	text-decoration: none;
	transition: all 0.25s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tvoc2-lesson-nav__btn:hover {
	background: var(--irodori-primary);
	border-color: var(--irodori-primary);
	color: white;
	box-shadow: 0 4px 16px rgba(39, 174, 96, 0.3);
	transform: scale(1.05);
}

.tvoc2-lesson-nav__btn:active {
	transform: scale(0.98);
}

/* Double chevron arrow style */
.tvoc2-lesson-nav__btn::before {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	font-family: "Times New Roman", Georgia, serif;
	font-style: italic;
}

.tvoc2-lesson-nav--prev .tvoc2-lesson-nav__btn::before {
	content: "«";
}

.tvoc2-lesson-nav--next .tvoc2-lesson-nav__btn::before {
	content: "»";
}

.tvoc2-lesson-nav__btn .dashicons {
	display: none;
}

.tvoc2-lesson-nav__btn--disabled {
	opacity: 0.25;
	pointer-events: none;
	cursor: not-allowed;
	color: #999;
}

.tvoc2-lesson-nav__btn--disabled:hover {
	background: white;
	border-color: #E0E0E0;
	color: #999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transform: none;
}

/* Tooltip for navigation */
.tvoc2-lesson-nav__tooltip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #333;
	color: white;
	padding: 0.5rem 0.75rem;
	border-radius: 3px;
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
}

.tvoc2-lesson-nav--prev .tvoc2-lesson-nav__tooltip {
	left: 100%;
	margin-left: 8px;
}

.tvoc2-lesson-nav--next .tvoc2-lesson-nav__tooltip {
	right: 100%;
	margin-right: 8px;
}

.tvoc2-lesson-nav__btn:hover + .tvoc2-lesson-nav__tooltip,
.tvoc2-lesson-nav:hover .tvoc2-lesson-nav__tooltip {
	opacity: 1;
	visibility: visible;
}

/* Responsive: Closer to edge on medium screens */
@media (max-width: 1200px) {
	.tvoc2-lesson-nav--prev {
		left: 16px;
	}

	.tvoc2-lesson-nav--next {
		right: 16px;
	}

	.tvoc2-lesson-nav__btn {
		width: 40px;
		height: 60px;
	}

	.tvoc2-lesson-nav__btn::before {
		font-size: 1.75rem;
	}
}

/* Mobile: Position at bottom of page, above back-to-top */
@media (max-width: 768px) {
	.tvoc2-lesson-nav {
		position: fixed;
		top: auto;
		bottom: 80px; /* Higher to avoid back-to-top button */
		transform: none;
		z-index: 999; /* High z-index to stay above theme elements */
	}

	.tvoc2-lesson-nav--prev {
		left: 12px;
	}

	.tvoc2-lesson-nav--next {
		right: 12px;
	}

	.tvoc2-lesson-nav__btn {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		background: white;
		border: 2px solid var(--irodori-primary, #6B4C9A);
	}

	.tvoc2-lesson-nav__btn::before {
		font-size: 1.25rem;
		color: var(--irodori-primary, #6B4C9A);
	}

	.tvoc2-lesson-nav__btn:hover {
		background: var(--irodori-primary, #6B4C9A);
	}

	.tvoc2-lesson-nav__btn:hover::before {
		color: white;
	}

	.tvoc2-lesson-nav__tooltip {
		display: none;
	}
}

/* Very small mobile: even higher and smaller */
@media (max-width: 480px) {
	.tvoc2-lesson-nav {
		bottom: 70px;
	}

	.tvoc2-lesson-nav--prev {
		left: 8px;
	}

	.tvoc2-lesson-nav--next {
		right: 8px;
	}

	.tvoc2-lesson-nav__btn {
		width: 42px;
		height: 42px;
	}

	.tvoc2-lesson-nav__btn::before {
		font-size: 1.125rem;
	}
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes pulse-green {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
	}
	50% {
		box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
	}
}

.tvoc2-irodori-audio-icon.is-playing {
	animation: pulse-green 1s infinite;
}

/* ============================================================================
   LESSON NAVIGATION DROPDOWN
   ============================================================================ */

.tvoc2-lesson-dropdown {
	position: relative;
	margin-left: auto;
	flex-shrink: 0;
	z-index: 10;
}

.tvoc2-lesson-dropdown__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--irodori-bg-light);
	border: 2px solid var(--irodori-primary);
	border-radius: 8px;
	padding: 0.5rem 2.5rem 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--irodori-primary-dark);
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 140px;
	font-family: "Noto Sans JP", sans-serif;
}

.tvoc2-lesson-dropdown__select:hover {
	background: var(--irodori-primary-pale);
	border-color: var(--irodori-primary-dark);
}

.tvoc2-lesson-dropdown__select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.2);
	border-color: var(--irodori-primary-dark);
}

.tvoc2-lesson-dropdown__icon {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--irodori-primary);
}

.tvoc2-lesson-dropdown__icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Responsive - Dropdown in table/list view */
@media (max-width: 768px) {
	.tvoc2-lesson-dropdown {
		margin-left: 0;
		margin-top: 0.75rem;
		width: 100%;
	}

	.tvoc2-lesson-dropdown__select {
		width: 100%;
	}
}

/* ============================================================================
   ENHANCED RESPONSIVE - TABLET (768-1024px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
	/* Table header adjustments */
	.tvoc2-irodori-table-header__col {
		padding: 0.75rem 0.5rem;
		font-size: 0.75rem;
	}

	.tvoc2-irodori-table-header__col:first-child {
		width: 40px;
	}

	.tvoc2-irodori-table-header__col:nth-child(2) {
		width: 22%;
	}

	.tvoc2-irodori-table-header__col:nth-child(3) {
		width: 70px;
	}

	.tvoc2-irodori-table-header__col:nth-child(4) {
		width: 18%;
	}

	/* Table cell adjustments - MUST match header widths */
	.tvoc2-irodori-table td {
		padding: 0.75rem 0.625rem;
	}

	.tvoc2-irodori-col-stt {
		width: 40px;
	}

	.tvoc2-irodori-col-word {
		width: 22%;
	}

	.tvoc2-irodori-col-hanviet {
		width: 70px;
	}

	.tvoc2-irodori-col-meaning {
		width: 18%;
	}

	.tvoc2-irodori-word {
		font-size: 1.125rem;
	}

	.tvoc2-irodori-meaning {
		font-size: 0.9rem;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__jp {
		font-size: 0.85rem;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__vi {
		font-size: 0.8rem;
	}

	/* Lesson header on tablet */
	.tvoc2-irodori-lesson {
		padding: 1.25rem 1.5rem;
	}

	.tvoc2-irodori-lesson__number {
		margin-right: 1rem;
		padding-right: 1rem;
	}

	.tvoc2-irodori-lesson__number-value {
		font-size: 2.75rem;
	}

	.tvoc2-irodori-lesson__title {
		font-size: 1.5rem;
	}

	/* Dropdown on tablet */
	.tvoc2-lesson-dropdown__select {
		min-width: 120px;
		padding: 0.4rem 2rem 0.4rem 0.75rem;
		font-size: 0.8rem;
	}
}

/* ============================================================================
   ENHANCED RESPONSIVE - SMALL MOBILE (320-480px)
   ============================================================================ */

@media (max-width: 480px) {
	/* Wrapper padding */
	.tvoc2-wrapper {
		padding: 0.75rem 0.5rem;
	}

	/* Breadcrumb compact */
	.tvoc2-breadcrumb {
		padding: 0.5rem 0.75rem;
		margin-bottom: 1rem;
	}

	.tvoc2-breadcrumb__list {
		font-size: 0.7rem;
	}

	.tvoc2-breadcrumb__link,
	.tvoc2-breadcrumb__current {
		padding: 0.125rem 0.25rem;
	}

	/* Header compact */
	.tvoc2-irodori-header {
		margin-bottom: 1rem;
		border-radius: 5px;
	}

	.tvoc2-irodori-topic {
		padding: 0.5rem 0.75rem;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.tvoc2-irodori-topic__left {
		flex: 1;
		min-width: 0;
	}

	.tvoc2-irodori-topic__label {
		padding: 0.2rem 0.5rem;
		font-size: 0.65rem;
		margin-right: 0.5rem;
	}

	.tvoc2-irodori-topic__text {
		font-size: 0.85rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Flashcard button in topic bar */
	.tvoc2-irodori-btn--small {
		padding: 0.25rem 0.5rem;
		font-size: 0.7rem;
	}

	.tvoc2-irodori-btn--small .dashicons {
		font-size: 12px;
		width: 12px;
		height: 12px;
	}

	/* Lesson bar compact - keep horizontal */
	.tvoc2-irodori-lesson {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0.625rem 0.75rem;
		gap: 0.375rem 0.5rem;
	}

	.tvoc2-irodori-lesson__number {
		padding-right: 0.5rem;
		padding-bottom: 0;
		margin-bottom: 0;
		border-right: 2px solid var(--irodori-primary);
		border-bottom: none;
	}

	.tvoc2-irodori-lesson__number-label,
	.tvoc2-irodori-lesson__number-sublabel {
		font-size: 0.6rem;
	}

	.tvoc2-irodori-lesson__number-value {
		font-size: 1.25rem;
	}

	.tvoc2-irodori-lesson__title {
		font-size: 0.95rem;
	}

	/* Dropdown compact */
	.tvoc2-lesson-dropdown {
		margin-top: 0;
		margin-left: auto;
		width: auto;
	}

	.tvoc2-lesson-dropdown__select {
		padding: 0.3rem 1.75rem 0.3rem 0.5rem;
		font-size: 0.75rem;
		min-width: auto;
	}

	/* Card style table - more compact with STT and fixed columns */
	.tvoc2-irodori-table tr {
		grid-template-columns: auto 1fr 48px;
		margin-bottom: 0.625rem;
		border-radius: 4px;
	}

	.tvoc2-irodori-col-stt {
		font-size: 0.7rem;
		min-width: 24px;
		padding: 0.375rem 0.25rem !important;
	}

	.tvoc2-irodori-col-word {
		padding: 0.5rem 0.625rem 0.25rem !important;
	}

	.tvoc2-irodori-word {
		font-size: 1.05rem;
	}

	/* Audio + Hanviet column smaller - fixed width */
	.tvoc2-irodori-col-hanviet {
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
		padding: 0.375rem 0.25rem !important;
	}

	/* Audio button - icon only (no border/background) */
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon,
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon.tvoc2-btn-audio {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon .dashicons,
	.tvoc2-irodori-col-hanviet .tvoc2-btn-audio .dashicons {
		font-size: 12px !important;
		width: 12px !important;
		height: 12px !important;
	}

	.tvoc2-irodori-hanviet {
		font-size: 0.65rem;
		padding: 0.1rem 0.2rem;
	}

	.tvoc2-irodori-col-meaning {
		padding: 0.25rem 0.625rem 0.375rem !important;
	}

	.tvoc2-irodori-meaning {
		font-size: 0.85rem;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example {
		padding: 0.375rem 0.5rem;
		border-left: none;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__jp {
		font-size: 0.8rem;
	}

	.tvoc2-irodori-col-example .tvoc2-irodori-example__vi {
		font-size: 0.75rem;
		padding-left: 2rem;
	}

	/* Footer compact */
	.tvoc2-irodori-footer {
		padding: 0.75rem 1rem;
		margin-top: 1.5rem;
	}

	.tvoc2-irodori-footer__level {
		font-size: 0.9rem;
	}

	.tvoc2-irodori-footer__page {
		font-size: 0.8rem;
		padding: 0.25rem 0.625rem;
	}

	/* Navigation arrows smaller on small screens */
	.tvoc2-lesson-nav__btn {
		width: 48px;
		height: 48px;
	}

	.tvoc2-lesson-nav__btn::before {
		font-size: 1.25rem;
	}
}

/* ============================================================================
   ENHANCED RESPONSIVE - VERY SMALL MOBILE (< 360px)
   ============================================================================ */

@media (max-width: 360px) {
	.tvoc2-wrapper {
		padding: 0.5rem 0.375rem;
	}

	.tvoc2-breadcrumb {
		padding: 0.375rem 0.5rem;
	}

	.tvoc2-breadcrumb__list {
		font-size: 0.65rem;
	}

	.tvoc2-irodori-topic {
		padding: 0.375rem 0.5rem;
	}

	.tvoc2-irodori-topic__label {
		display: none;
	}

	.tvoc2-irodori-topic__text {
		font-size: 0.8rem;
	}

	/* Lesson - keep horizontal, more compact */
	.tvoc2-irodori-lesson {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0.5rem;
		gap: 0.25rem 0.375rem;
	}

	.tvoc2-irodori-lesson__number {
		padding-right: 0.375rem;
	}

	.tvoc2-irodori-lesson__number-value {
		font-size: 1.125rem;
	}

	.tvoc2-irodori-lesson__number-label,
	.tvoc2-irodori-lesson__number-sublabel {
		font-size: 0.55rem;
	}

	.tvoc2-irodori-lesson__title {
		font-size: 0.85rem;
	}

	/* Table cards even more compact with STT and fixed columns */
	.tvoc2-irodori-table tr {
		grid-template-columns: auto 1fr 42px;
		border-radius: 2px;
		margin-bottom: 0.5rem;
	}

	.tvoc2-irodori-col-stt {
		font-size: 0.65rem;
		min-width: 22px;
		padding: 0.25rem 0.2rem !important;
	}

	.tvoc2-irodori-col-word {
		padding: 0.375rem 0.5rem 0.2rem !important;
	}

	.tvoc2-irodori-word {
		font-size: 0.95rem;
	}

	/* Audio + Hanviet very small - fixed width */
	.tvoc2-irodori-col-hanviet {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;
		padding: 0.25rem 0.25rem !important;
	}

	/* Audio button - icon only (no border/background) */
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon,
	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon.tvoc2-btn-audio {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		min-height: 20px !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	.tvoc2-irodori-col-hanviet .tvoc2-irodori-audio-icon .dashicons,
	.tvoc2-irodori-col-hanviet .tvoc2-btn-audio .dashicons {
		font-size: 10px !important;
		width: 10px !important;
		height: 10px !important;
	}

	.tvoc2-irodori-hanviet {
		font-size: 0.6rem;
	}

	.tvoc2-irodori-col-meaning {
		padding: 0.2rem 0.5rem 0.3rem !important;
	}

	.tvoc2-irodori-meaning {
		font-size: 0.8rem;
	}

	/* Hide navigation arrows on very small screens - use dropdown instead */
	.tvoc2-lesson-nav {
		display: none;
	}
}

/* ============================================================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 896px) and (orientation: landscape) {
	.tvoc2-lesson-nav {
		top: auto;
		bottom: 10px;
	}

	.tvoc2-lesson-nav__btn {
		width: 44px;
		height: 44px;
	}

	.tvoc2-irodori-lesson {
		padding: 0.75rem 1rem;
	}

	.tvoc2-irodori-lesson__number-value {
		font-size: 2rem;
	}

	.tvoc2-irodori-lesson__title {
		font-size: 1.25rem;
	}
}