/* ==========================================================
   Hiệu ứng chuyển trang — port lại đúng theo thiết kế trong
   Other/Hieu Ung Chuyen Trang Tieng Nhat V2.html (thẻ "dấu mộc" bo
   khuyết 4 góc, hoa văn 5 cánh kiểu hoa mai, 2 tông màu câu dịch),
   viết lại bằng CSS/JS thuần cho site MPA thật (file gốc là 1 bundle
   mockup ~17MB của công cụ thiết kế, không thể nhúng thẳng).

   - @view-transition{navigation:auto} bật crossfade native của trình
     duyệt cho điều hướng cùng-origin (Chrome/Edge mới). Trình duyệt
     chưa hỗ trợ sẽ bỏ qua at-rule lạ này — không hỏng gì.
   - #tndg-pt-overlay là lớp phủ trang trí, position:fixed, ẩn mặc
     định (opacity 0 + visibility hidden + pointer-events none) nên
     không chiếm layout và không bao giờ là điều kiện để nội dung
     thật xuất hiện. JS chỉ bật nó khi người dùng bấm 1 link nội bộ.
   ========================================================== */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .22s;
	animation-timing-function: ease;
}

#tndg-pt-overlay {
	position: fixed;
	inset: 0;
	/* Phải cao hơn TẤT CẢ z-index khác trên site — kể cả khi người dùng bấm 1 link điều hướng
	   (VD thẻ .gt-card trong kết quả tìm kiếm Giáo trình) NGAY LÚC khung tìm kiếm đang ở chế độ
	   tập trung (.box-search-container.hp_btn_onfocus/.kanji-search-result-home.hp_btn_onfocus,
	   z-index:9999999!important — xem new-home.css) hoặc panel "Cách nhớ và Giải nghĩa" đang mở
	   (#tndg-kanji-info-panel-overlay, z-index:2147483000 — cũng new-home.css). z-index cũ
	   (999999) thấp hơn cả 2 nên overlay chuyển trang bị che khuất phía sau, trông như bấm link
	   không có phản ứng gì (đúng lỗi "vẫn hiện khung tìm kiếm, không thấy hiệu ứng load trang"). */
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 24px;
	background: var( --page-bg, #f4fafb );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease;
}

#tndg-pt-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#tndg-pt-overlay.is-leaving {
	transition-duration: .28s;
}

#tndg-pt-overlay .tndg-pt-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-width: min( 92vw, 420px );
	max-width: min( 92vw, 560px );
	margin: auto;
	padding: 24px 16px;
	text-align: center;
	transform: translateY( 6px );
	opacity: 0;
	transition: transform .3s ease .05s, opacity .3s ease .05s;
}

#tndg-pt-overlay.is-active .tndg-pt-inner {
	transform: translateY( 0 );
	opacity: 1;
}

/* Logo tròn ở giữa */
#tndg-pt-overlay .tndg-pt-logo-wrap {
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#tndg-pt-overlay .tndg-pt-logo {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

/* Thẻ "dấu mộc" — bo khuyết 4 góc kiểu tem/vé, viền + 2 chấm trên,
   2 móc vuông dưới, giống nguyên bản trong file V2. */
#tndg-pt-overlay .tndg-pt-stamp-shadow {
	filter: drop-shadow( 0 10px 26px rgba( 0, 0, 0, .14 ) );
	width: 100%;
}

#tndg-pt-overlay .tndg-pt-stamp {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 26px 24px;
	background: #fbf7f1;
	border: 1px solid #e5e5e4;
	-webkit-mask-image:
		radial-gradient( circle 22px at 0 0, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 100% 0, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 0 100%, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 100% 100%, transparent 22px, black 22.5px );
	mask-image:
		radial-gradient( circle 22px at 0 0, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 100% 0, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 0 100%, transparent 22px, black 22.5px ),
		radial-gradient( circle 22px at 100% 100%, transparent 22px, black 22.5px );
	mask-composite: intersect, intersect, intersect;
	-webkit-mask-composite: source-in;
}

@media ( min-width: 420px ) {
	#tndg-pt-overlay .tndg-pt-stamp {
		padding: 30px 48px;
	}
}

#tndg-pt-overlay .tndg-pt-corner {
	position: absolute;
	bottom: 22px;
	width: 16px;
	height: 16px;
}

#tndg-pt-overlay .tndg-pt-corner--bl {
	left: 22px;
	border-left: 2px solid color-mix( in srgb, #c8232f 45%, transparent );
	border-bottom: 2px solid color-mix( in srgb, #c8232f 45%, transparent );
}

#tndg-pt-overlay .tndg-pt-corner--br {
	right: 22px;
	border-right: 2px solid color-mix( in srgb, #c8232f 45%, transparent );
	border-bottom: 2px solid color-mix( in srgb, #c8232f 45%, transparent );
}

#tndg-pt-overlay .tndg-pt-dot {
	position: absolute;
	top: 22px;
	border-radius: 50%;
	background: #f0b8c2;
}

#tndg-pt-overlay .tndg-pt-dot--tl {
	left: 22px;
	width: 8px;
	height: 8px;
}

#tndg-pt-overlay .tndg-pt-dot--tr {
	right: 22px;
	width: 7px;
	height: 7px;
}

/* Hoa văn 5 cánh (kiểu hoa mai) — dùng lại ở 3 chỗ: cuối dòng chữ Nhật,
   giữa đường kẻ phân cách, và đầu thanh tiến trình. */
#tndg-pt-overlay .tndg-pt-flower {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
	display: inline-block;
}

#tndg-pt-overlay .tndg-pt-flower i {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f0b8c2;
}

#tndg-pt-overlay .tndg-pt-flower i:nth-child( 1 ) { top: 4.5px; left: 9.5px; }
#tndg-pt-overlay .tndg-pt-flower i:nth-child( 2 ) { top: 9.25px; left: 6.05px; }
#tndg-pt-overlay .tndg-pt-flower i:nth-child( 3 ) { top: 7.44px; left: 0.46px; }
#tndg-pt-overlay .tndg-pt-flower i:nth-child( 4 ) { top: 1.56px; left: 0.46px; }
#tndg-pt-overlay .tndg-pt-flower i:nth-child( 5 ) { top: -0.25px; left: 6.05px; }

#tndg-pt-overlay .tndg-pt-flower b {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c8232f;
	top: 5.5px;
	left: 5.5px;
}

#tndg-pt-overlay .tndg-pt-flower--red i { background: #c8232f; }
#tndg-pt-overlay .tndg-pt-flower--red b { background: #fbf7f1; }

#tndg-pt-overlay .tndg-pt-flower--cursor { width: 14px; height: 14px; }
#tndg-pt-overlay .tndg-pt-flower--cursor i { width: 6px; height: 6px; background: #c8232f; }
#tndg-pt-overlay .tndg-pt-flower--cursor i:nth-child( 1 ) { top: 4px; left: 8px; }
#tndg-pt-overlay .tndg-pt-flower--cursor i:nth-child( 2 ) { top: 8px; left: 5px; }
#tndg-pt-overlay .tndg-pt-flower--cursor i:nth-child( 3 ) { top: 6px; left: 0; }
#tndg-pt-overlay .tndg-pt-flower--cursor i:nth-child( 4 ) { top: 1px; left: 0; }
#tndg-pt-overlay .tndg-pt-flower--cursor i:nth-child( 5 ) { top: 0; left: 5px; }

/* Nhãn phân loại câu (vd. "Khẩu ngữ thông dụng") — chỉ hiện khi câu đang
   chọn có q.label, tự ẩn khi rỗng nên không cần JS toggle riêng. Kiểu con
   triện đỏ (hanko) đóng lệch, mượn từ hướng thiết kế "Kakejiku". */
#tndg-pt-overlay .tndg-pt-label {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 14px;
	transform: rotate( -3deg );
	font-family: var( --font-ui, Inter, sans-serif );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #a3453f;
	background: rgba( 163, 32, 31, .1 );
	border: 1px dashed rgba( 163, 32, 31, .3 );
	border-radius: 6px;
	padding: 6px 16px;
}

#tndg-pt-overlay .tndg-pt-label:empty {
	display: none;
}

/* Câu tục ngữ tiếng Nhật (furigana) + hoa văn cuối dòng */
#tndg-pt-overlay .tndg-pt-jp {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: "Noto Sans JP", var( --font-jp, "M PLUS Rounded 1c" ), sans-serif;
	font-size: clamp( 20px, 5.5vw, 30px );
	font-weight: 700;
	letter-spacing: .02em;
	color: #1b1b1a;
	white-space: nowrap;
}

#tndg-pt-overlay .tndg-pt-jp-rt {
	font-size: 12px;
	font-weight: 400;
	opacity: .65;
}

/* Đường kẻ phân cách + hoa văn giữa */
#tndg-pt-overlay .tndg-pt-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: .4;
}

#tndg-pt-overlay .tndg-pt-divider-line {
	width: 56px;
	height: 1px;
	background: color-mix( in srgb, #c8232f 35%, transparent );
}

/* Câu dịch tiếng Việt — 2 tông màu, đen + đỏ */
#tndg-pt-overlay .tndg-pt-vi {
	margin: 0;
	font-family: var( --font-ui, Inter, sans-serif );
	font-size: clamp( 18px, 4.6vw, 26px );
	font-weight: 700;
	line-height: 1.3;
}

#tndg-pt-overlay .tndg-pt-vi-black { color: #1b1b1a; }
#tndg-pt-overlay .tndg-pt-vi-red { color: #c8232f; }

/* "Đang tải…" */
#tndg-pt-overlay .tndg-pt-loading {
	margin: 4px 0 0;
	font-size: 14px;
	color: color-mix( in srgb, #1b1b1a 50%, transparent );
}

/* Thanh tiến trình */
#tndg-pt-overlay .tndg-pt-bar {
	position: relative;
	width: 220px;
	max-width: 70vw;
	height: 4px;
	background: #f3d9dc;
	border-radius: 2px;
}

#tndg-pt-overlay .tndg-pt-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: #c8232f;
}

#tndg-pt-overlay.is-active .tndg-pt-bar-fill {
	/* Phải khớp đúng ADVANCE_MS trong assets/js/page-transition.js (1000ms) — 2 chỗ này điều
	   khiển cùng 1 hiệu ứng (JS hoãn điều hướng thật, CSS animate thanh tiến trình chạy đầy),
	   lệch nhau sẽ khiến thanh tiến trình chạy xong sớm/muộn hơn lúc trang thật chuyển. */
	animation: tndg-pt-fill 1s ease forwards;
}

/* "Dừng để xem" — đóng băng thanh tiến trình tại chỗ */
#tndg-pt-overlay.is-paused .tndg-pt-bar-fill {
	animation-play-state: paused;
}

#tndg-pt-overlay .tndg-pt-bar-fill .tndg-pt-flower--cursor {
	position: absolute;
	right: -7px;
	top: 50%;
	transform: translate( 50%, -50% );
}

@keyframes tndg-pt-fill {
	from { width: 0%; }
	to   { width: 92%; }
}

/* Hàng nút hành động */
#tndg-pt-overlay .tndg-pt-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Nút bỏ qua */
#tndg-pt-overlay .tndg-pt-skip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	background: #fbf7f1;
	border: 2px dashed #c8232f;
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	font-family: var( --font-ui, Inter, sans-serif );
	font-size: 13px;
	color: #c8232f;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .08 );
}

/* Nút "Dừng để xem" — giữ nguyên màn hình chuyển trang, không tự điều hướng */
#tndg-pt-overlay .tndg-pt-pause {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	background: #c8232f;
	border: 2px solid #c8232f;
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	font-family: var( --font-ui, Inter, sans-serif );
	font-size: 13px;
	font-weight: 600;
	color: #fbf7f1;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .12 );
}

/* Trạng thái "Tiếp tục" — cùng 1 nút, đổi tên khi đang dừng */
#tndg-pt-overlay.is-paused .tndg-pt-pause {
	background: #fbf7f1;
	color: #c8232f;
}

@media ( prefers-reduced-motion: reduce ) {
	#tndg-pt-overlay,
	#tndg-pt-overlay .tndg-pt-inner,
	#tndg-pt-overlay .tndg-pt-bar-fill {
		transition: none !important;
		animation: none !important;
	}
	::view-transition-old( root ),
	::view-transition-new( root ) {
		animation: none !important;
	}
}