/*
 * Fox40 – tùy biến máy tính bảng và điện thoại.
 * Nạp sau theme.css, quang-pho.css, docs.css (inc/assets.php). Mốc: ≤1023px máy tính bảng, ≤781px điện thoại
 * (trùng mốc xếp cột của WordPress), ≤480px điện thoại nhỏ.
 */

/* ------------------------------------------------------------------ máy tính: ngăn menu hiển thị như thanh menu */

.fox40-menu-toggle,
.fox40-drawer__foot {
	display: none;
}

.fox40-nav__panel {
	display: contents;
}

/* ------------------------------------------------------------------ chung: không để trang tràn ngang */

html,
body {
	overflow-x: clip;
}

img,
video,
iframe,
svg {
	max-width: 100%;
}

/* ================================================================== ≤ 1023px: máy tính bảng */

@media (max-width: 1023px) {
	:root {
		--f-header-h: 64px;
	}

	/* Header: thương hiệu | công cụ | nút ☰ */
	.fox40-header__inner {
		gap: 0.75rem !important;
	}

	.fox40-header__inner > .fox40-nav--primary {
		order: 3;
	}

	.fox40-header__inner > .wp-block-group {
		margin-left: auto;
	}

	.fox40-header .fox40-head-account,
	.fox40-header__inner > .wp-block-group > .fox40-lang {
		display: none;
	}

	.fox40-menu-toggle {
		display: inline-grid;
		place-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--f-border);
		border-radius: 12px;
		background: transparent;
		color: var(--f-text);
		cursor: pointer;
	}

	.fox40-menu-toggle span {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.25s, opacity 0.2s;
	}

	.fox40-menu-open .fox40-menu-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.fox40-menu-open .fox40-menu-toggle span:nth-child(2) {
		opacity: 0;
	}

	.fox40-menu-open .fox40-menu-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Ngăn menu trượt từ phải, nền mờ phía sau */
	.fox40-nav__panel {
		position: fixed;
		z-index: 60;
		top: var(--f-header-h);
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: min(100%, 420px);
		padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-left: 1px solid var(--f-border);
		background: var(--f-bg);
		box-shadow: -30px 0 60px rgba(0, 0, 0, 0.35);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.fox40-menu-open .fox40-nav__panel {
		transform: none;
		visibility: visible;
		transition: transform 0.3s ease;
	}

	.fox40-menu-open::after {
		content: "";
		position: fixed;
		z-index: 40; /* dưới header (50) chứa ngăn menu */
		inset: var(--f-header-h) 0 0;
		background: rgba(5, 7, 14, 0.55);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	.fox40-menu-open {
		overflow: hidden;
	}

	/* backdrop-filter của header làm phần tử fixed bên trong định vị theo header: tắt khi mở ngăn */
	.fox40-menu-open .fox40-header {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: var(--f-bg) !important;
	}

	.admin-bar .fox40-nav__panel,
	.admin-bar.fox40-menu-open::after {
		top: calc(var(--f-header-h) + 46px);
	}

	.fox40-nav--primary .fox40-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fox40-nav--primary .fox40-menu > li {
		border-bottom: 1px solid var(--f-border);
	}

	.fox40-nav--primary .fox40-menu a {
		padding: 0.95rem 0.25rem !important;
		font-size: 1.125rem !important;
	}

	.fox40-nav--primary .menu-item-has-children > a::after {
		display: none;
	}

	/* Menu con: luôn mở, thụt vào trong ngăn */
	.fox40-nav--primary .sub-menu {
		position: static !important;
		display: block !important;
		min-width: 0 !important;
		margin: -0.25rem 0 0.75rem !important;
		padding: 0 0 0 0.75rem !important;
		border: 0 !important;
		border-left: 2px solid var(--f-border) !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.fox40-nav--primary .sub-menu a {
		padding: 0.6rem 0.5rem !important;
		color: var(--f-muted) !important;
		font-size: 1rem !important;
		font-weight: 500 !important;
	}

	.fox40-drawer__foot {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: auto;
		padding-top: 1.5rem;
	}

	.fox40-drawer__foot .fox40-lang {
		align-self: flex-start;
	}

	.fox40-drawer__foot .fox40-head-account {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.fox40-drawer__foot .fox40-head-account .fox40-btn {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}

	/* Lưới thẻ: 2 cột */
	.fox40-grid--3,
	.fox40-grid--4,
	.fox40-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Quy trình 4 bước, lưới bài viết (query loop): 2 cột */
	.wp-block-columns.fox40-steps {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.fox40-steps > .wp-block-column {
		flex: 1 1 calc(50% - 1.5rem) !important;
	}

	.wp-block-post-template.is-layout-grid,
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.fox40-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fox40-footer__about {
		grid-column: 1 / -1;
		max-width: 520px;
	}
}

/* ================================================================== ≤ 781px: điện thoại */

@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--60: clamp(2.75rem, 10vw, 3.5rem);
		--wp--preset--spacing--70: clamp(3rem, 12vw, 4rem);
		--wp--preset--spacing--50: clamp(1.75rem, 7vw, 2.25rem);
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
	}

	body {
		font-size: 1rem;
	}

	h1 {
		font-size: clamp(2rem, 9vw, 2.5rem);
	}

	h2,
	.fox40-section-title {
		font-size: clamp(1.5rem, 6.5vw, 1.875rem) !important;
		line-height: 1.22 !important;
	}

	h3 {
		font-size: 1.1875rem;
	}

	.fox40-lead {
		font-size: 1.0625rem !important;
		line-height: 1.65 !important;
	}

	/* Thương hiệu: icon + tên + khẩu hiệu cỡ nhỏ */
	.fox40-header .fox40-brand__tagline {
		display: block;
		font-size: 0.6875rem !important;
		line-height: 1.3;
		white-space: nowrap;
	}

	.fox40-header .fox40-brand__mark {
		width: 38px;
		height: 38px;
	}

	.fox40-header .fox40-brand__name {
		font-size: 1.0625rem;
	}

	.fox40-header__inner > .wp-block-group {
		gap: 0.375rem !important;
	}

	.fox40-header .fox40-icon-btn {
		width: 40px;
		height: 40px;
	}

	/* Hero đầu trang */
	.fox40-page-hero {
		padding: 2rem 0 1.75rem;
	}

	.fox40-page-hero__title {
		font-size: clamp(2rem, 9vw, 2.5rem) !important;
	}

	.fox40-page-hero__lead {
		font-size: 1rem !important;
	}

	.fox40-breadcrumbs {
		font-size: 0.8125rem;
	}

	/* Mọi lưới thẻ: 1 cột */
	.fox40-grid--2,
	.fox40-grid--3,
	.fox40-grid--4,
	.fox40-feature-grid,
	.fox40-faq-list,
	.fox40-contact-list {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-columns {
		gap: 1.5rem !important;
	}

	.wp-block-columns.fox40-steps > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-post-template.is-layout-grid,
	.wp-block-group.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Nút: dễ bấm, xuống dòng gọn */
	.wp-block-buttons {
		gap: 0.625rem;
	}

	.wp-block-button__link,
	.fox40-btn {
		min-height: 44px;
	}

	/* Bảng: cuộn ngang trong khung, không đẩy trang */
	.wp-block-table,
	.fox40-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-table table {
		min-width: 560px;
	}

	.fox40-compare-table table {
		min-width: 640px;
		font-size: 0.875rem;
	}

	.fox40-compare-table th:first-child,
	.fox40-compare-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		min-width: 170px;
		background: var(--f-bg);
	}

	/* Bảng giá */
	.fox40-plan {
		padding: 1.5rem 1.25rem !important;
	}

	.fox40-plan.is-featured {
		margin-top: 0.75rem;
	}

	/* Khung minh họa sản phẩm */
	.fox40-rata-mock__card {
		padding: 1rem;
	}

	.fox40-rata-mock__info {
		min-width: 0;
	}

	.fox40-rata-mock__voice {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fox40-canva-mock__timeline {
		margin-inline: 0;
	}

	/* Chân trang */
	.fox40-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2rem;
	}

	/* Hàng cuối chân trang: bản quyền, liên kết pháp lý một dòng ngắn, công cụ */
	.fox40-footer__bottom {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 1rem !important;
		margin-top: 2.5rem !important;
		padding-top: 1.25rem;
	}

	.fox40-footer__legal {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}

	.fox40-footer__legal .fox40-text,
	.fox40-footer__legal p {
		font-size: 0.75rem !important;
		line-height: 1.6;
	}

	.fox40-legal-links {
		flex-wrap: wrap;
		gap: 0.25rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.6;
	}

	.fox40-footer .fox40-legal-links a {
		font-size: 0.75rem !important;
	}

	.fox40-footer__tools {
		gap: 0.5rem !important;
	}

	/* Thẻ tool nổi bật (trang chủ): ảnh trên, chữ dưới */
	.fox40-plugin--spotlight {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.fox40-plugin--spotlight .fox40-plugin__media img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	/* Bình luận, form */
	.fox40-form-row,
	.fox40-lead-form__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	input,
	select,
	textarea {
		font-size: 16px !important; /* iOS không tự phóng to khi chạm vào ô nhập */
	}
}

/* ================================================================== ≤ 480px: điện thoại nhỏ */

@media (max-width: 480px) {
	.fox40-header .fox40-brand__name {
		font-size: 1rem;
	}

	.fox40-header__inner > .wp-block-group > [data-fox40-theme-toggle],
	.fox40-header__inner > .wp-block-group > .fox40-theme-toggle {
		display: none;
	}

	.fox40-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ================================================================== tài liệu (BetterDocs), thuật ngữ */

@media (max-width: 1023px) {
	/* Bài tài liệu: thanh bên + nội dung, ẩn cột mục lục */
	.fox40-docs-layout--3 {
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) !important;
	}

	.fox40-docs-toc {
		display: none !important;
	}

	.fox40-docs--kb .betterdocs-category-grid-inner-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.fox40-glossary .section-item {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		padding-left: 104px !important;
	}

	.fox40-glossary .section-item > .letter-start {
		width: 84px !important;
	}

	.fox40-glossary .letter-start span {
		font-size: 3.5rem !important;
	}
}

@media (max-width: 781px) {
	/* Một cột: nội dung trước, danh sách bài cùng chủ đề xuống cuối */
	.fox40-docs-layout,
	.fox40-docs-layout--2,
	.fox40-docs-layout--3 {
		display: flex !important;
		flex-direction: column;
		gap: 2rem !important;
	}

	.fox40-docs-body {
		order: -1;
		min-width: 0;
		width: 100%;
	}

	.fox40-docs-nav {
		position: static !important;
		width: 100%;
		max-height: none !important;
		padding-top: 1.5rem;
		border-top: 1px solid var(--f-border);
	}

	.fox40-docs-title {
		font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
	}

	.fox40-docs .docs-navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	.fox40-docs .betterdocs-content,
	.fox40-docs .betterdocs-entry-content {
		overflow-wrap: anywhere;
	}

	.fox40-docs--kb .betterdocs-category-grid-inner-wrapper {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Thuật ngữ: chữ cái nằm trên, thẻ 1 cột */
	.fox40-glossary .section-item {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0.875rem;
		padding: 1.5rem 0 !important;
	}

	.fox40-glossary .section-item > .letter-start,
	.fox40-glossary .section-item > .letter-start span {
		position: static !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
	}

	.fox40-glossary .letter-start span {
		font-size: 3rem !important;
	}

	.fox40-glossary .alphabet-list {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}

	/* Khối thành viên, CTA cuối bài: chữ trên, nút dưới */
	.fox40-cta,
	.fox40-member {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 1.25rem;
	}
}


/* ================================================================== bảng so sánh gói trên điện thoại */

.fox40-plan-switch {
	display: none;
}

@media (max-width: 781px) {
	.fox40-plan-switch {
		position: sticky;
		z-index: 5;
		top: calc(var(--f-header-h) + 0.5rem);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.375rem;
		margin: 0 0 0.75rem;
		padding: 0.5rem;
		border: 1px solid var(--f-border);
		border-radius: 18px;
		background: color-mix(in srgb, var(--f-bg) 88%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.fox40-plan-switch__label {
		flex-basis: 100%;
		padding: 0.125rem 0.5rem 0;
		color: var(--f-muted);
		font-size: 0.8125rem;
	}

	.fox40-plan-switch button {
		flex: 1 1 0;
		min-height: 38px;
		padding: 0.375rem 0.625rem;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--f-text);
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
	}

	.fox40-plan-switch button[aria-pressed="true"] {
		background: linear-gradient(90deg, #734cff, #30e3ff);
		color: #fff;
	}

	/* Bảng còn 3 cột: tính năng | Free | gói đang chọn — không cần cuộn ngang */
	.fox40-compare-table[data-col] table {
		min-width: 0 !important;
		table-layout: fixed;
	}

	.fox40-compare-table[data-col] :is(th, td):first-child {
		position: static !important;
		width: 46% !important;
		min-width: 0 !important;
	}

	.fox40-compare-table[data-col="3"] :is(th, td):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
		display: none;
	}

	.fox40-compare-table[data-col="3"] :is(th, td):nth-child(3) {
		background: color-mix(in srgb, #734cff 14%, var(--f-bg));
		color: var(--f-text);
		font-weight: 600;
	}

	.fox40-compare-table[data-col="4"] :is(th, td):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
		display: none;
	}

	.fox40-compare-table[data-col="4"] :is(th, td):nth-child(4) {
		background: color-mix(in srgb, #734cff 14%, var(--f-bg));
		color: var(--f-text);
		font-weight: 600;
	}

	.fox40-compare-table[data-col="5"] :is(th, td):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(5)) {
		display: none;
	}

	.fox40-compare-table[data-col="5"] :is(th, td):nth-child(5) {
		background: color-mix(in srgb, #734cff 14%, var(--f-bg));
		color: var(--f-text);
		font-weight: 600;
	}

	.fox40-compare-table[data-col="6"] :is(th, td):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(6)) {
		display: none;
	}

	.fox40-compare-table[data-col="6"] :is(th, td):nth-child(6) {
		background: color-mix(in srgb, #734cff 14%, var(--f-bg));
		color: var(--f-text);
		font-weight: 600;
	}

	.fox40-compare-table[data-col="7"] :is(th, td):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(7)) {
		display: none;
	}

	.fox40-compare-table[data-col="7"] :is(th, td):nth-child(7) {
		background: color-mix(in srgb, #734cff 14%, var(--f-bg));
		color: var(--f-text);
		font-weight: 600;
	}
}