/*
 * Mobile sheet — cột phụ thành bảng trượt từ đáy trên điện thoại.
 * Cách gắn: inc/mobile-sheet.php. JS: assets/js/sheet.js.
 *
 * ≥768px: chỉ ẩn nút / nền / đầu bảng, cột phụ giữ nguyên bố cục trang.
 */

.tri-sheet__fab,
.tri-sheet__backdrop,
.tri-sheet__head {
	display: none;
}

@media (max-width: 767px) {
	/* Cột phụ không còn chiếm chỗ trong luồng trang. */
	.tri-sheet {
		position: static;
		order: 0;
		width: 0;
		height: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* ── Nút nổi góc dưới trái (đối xứng nút "Tư vấn" góc phải) ── */
	.tri-sheet__fab {
		position: fixed;
		left: 16px;
		bottom: calc(var(--tri-bottombar-h, 62px) + 16px + env(safe-area-inset-bottom, 0px));
		z-index: 55;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 16px 0 12px;
		border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--sky, #6f96d1) 45%, transparent);
		border-radius: 999px;
		/* Nền trắng: nổi cả trên nền sáng lẫn footer navy. */
		background: #fff;
		color: var(--wp--preset--color--navy, #091f5b);
		font-family: var(--wp--preset--font-family--beau-sans);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.01em;
		box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--navy, #091f5b) 35%, transparent);
		cursor: pointer;
		transition: bottom 0.28s ease, transform 0.2s ease, background-color 0.2s ease;
	}

	/* Thanh đáy màn thụt xuống khi cuộn → nút hạ theo, như nút "Tư vấn". */
	body:has(.tri-mobile-bar.is-hidden) .tri-sheet__fab {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.tri-sheet__fab:hover,
	.tri-sheet__fab:focus-visible {
		border-color: transparent;
		background: var(--wp--preset--color--navy, #091f5b);
		color: #fff;
		outline: none;
		transform: translateY(-2px);
	}

	.tri-sheet__fab svg {
		flex-shrink: 0;
		color: var(--wp--preset--color--royal, #3b63a8);
	}

	.tri-sheet__fab:hover svg,
	.tri-sheet__fab:focus-visible svg {
		color: var(--wp--preset--color--cyan, #00b2ff);
	}

	.tri-sheet.is-open .tri-sheet__fab {
		transform: scale(0.9);
		opacity: 0;
		pointer-events: none;
	}

	/* ── Nền mờ ── */
	.tri-sheet__backdrop {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		background: color-mix(in srgb, var(--wp--preset--color--navy, #091f5b) 38%, transparent);
		opacity: 0;
		cursor: pointer;
		transition: opacity 0.25s ease;
	}

	.tri-sheet__backdrop[hidden] {
		display: none;
	}

	.tri-sheet.is-open .tri-sheet__backdrop {
		opacity: 1;
	}

	/* ── Bảng trượt từ đáy ── (ghi đè mọi bố cục cột phụ của trang). */
	.tri-sheet .tri-sheet__panel {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		z-index: 61;
		display: block;
		width: auto;
		max-width: none;
		max-height: min(78vh, 640px);
		max-height: min(78dvh, 640px);
		margin: 0;
		padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 20px 20px 0 0;
		background: #fff;
		box-shadow: 0 -12px 40px color-mix(in srgb, var(--wp--preset--color--navy, #091f5b) 22%, transparent);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.32s;
		-webkit-overflow-scrolling: touch;
	}

	.tri-sheet.is-open .tri-sheet__panel {
		transform: none;
		visibility: visible;
	}

	/* Đầu bảng dính trên cùng khi cuộn trong bảng. */
	.tri-sheet__head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 -12px 8px;
		padding: 22px 16px 12px 20px;
		background: #fff;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #091f5b) 8%, transparent);
	}

	/* Thanh kéo. */
	.tri-sheet__head::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		border-radius: 4px;
		background: #d5deec;
		transform: translateX(-50%);
	}

	.tri-sheet__title {
		color: var(--wp--preset--color--navy, #091f5b);
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.tri-sheet__close {
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #eef3fb;
		color: var(--wp--preset--color--navy, #091f5b);
		cursor: pointer;
	}

	.tri-sheet__close:hover,
	.tri-sheet__close:focus-visible {
		background: var(--wp--preset--color--navy, #091f5b);
		color: #fff;
		outline: none;
	}

	/* Khoá cuộn trang khi bảng mở. */
	html.tri-sheet-lock,
	html.tri-sheet-lock body {
		overflow: hidden;
	}

	/* Nội dung trong bảng: bỏ thẻ / bóng / sticky của bố cục cột phụ. */
	.tri-sheet .tri-sheet__panel > .tri-practice-nav,
	.tri-sheet .tri-sheet__panel > .tri-knowledge-nav {
		padding: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.tri-sheet .tri-knowledge-nav__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 4px;
		overflow: visible;
		padding-bottom: 0;
	}

	.tri-sheet .tri-knowledge-nav__link {
		flex: none;
		white-space: normal;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.tri-sheet .tri-sheet__panel,
	.tri-sheet__backdrop,
	.tri-sheet__fab {
		transition: none;
	}
}