/* ==========================================================================
   THẦY KHÔI - RESPONSIVE
   Mobile-first breakpoints: 1366px, 1200px, 1024px, 768px, 480px, 360px
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1366px - Laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
	:root {
		--tk-container: 1160px;
	}

	.tk-hero__stats {
		right: -10px;
	}
}

/* --------------------------------------------------------------------------
   <= 1200px - Small laptop / large tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.tk-nav a {
		padding: 10px 9px;
		font-size: 0.87rem;
	}

	.tk-header-actions .tk-btn {
		padding: 11px 18px;
		font-size: 0.86rem;
	}

	.tk-footer-grid {
		grid-template-columns: 1.3fr 1fr 1fr;
	}

	.tk-footer-contact-col {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   <= 1024px - Tablet landscape
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tk-hero__inner {
		grid-template-columns: 1fr;
	}

	.tk-hero__media {
		max-width: 640px;
	}

	.tk-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.tk-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.tk-process::before {
		display: none;
	}

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

	.tk-gallery__item--wide {
		grid-column: span 2;
		aspect-ratio: 4 / 3;
	}

	.tk-teacher {
		grid-template-columns: 1fr;
	}

	.tk-teacher__media {
		max-width: 420px;
	}

	.tk-sidebar-layout {
		grid-template-columns: 1fr;
	}

	.tk-contact-layout {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   <= 991px - Switch to mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.tk-header-inner {
		min-height: 68px;
	}

	/*
	 * backdrop-filter tạo containing block cho phần tử fixed, khiến menu
	 * drawer bị kẹp trong chiều cao header. Bỏ blur ở chế độ mobile.
	 */
	.tk-site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: #fff;
	}

	.tk-header-actions .tk-btn {
		display: none;
	}

	.tk-hotline__text {
		display: none;
	}

	.tk-hotline__icon {
		width: 42px;
		height: 42px;
	}

	.tk-nav-toggle {
		display: flex;
	}

	.tk-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(340px, 86vw);
		background: #fff;
		box-shadow: -12px 0 40px rgba(11, 31, 51, 0.18);
		padding: 84px 22px 30px;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.35s var(--tk-ease), visibility 0.35s;
		z-index: var(--tk-z-drawer);
		/* Drawer phải xếp dọc từ trên xuống, không center theo chiều cao. */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	.tk-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.tk-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	.tk-nav a {
		padding: 14px 12px;
		font-size: 1rem;
		border-bottom: 1px solid var(--tk-border);
		border-radius: 0;
	}

	.tk-nav__close {
		display: grid !important;
		position: absolute;
		top: 20px;
		right: 22px;
		margin: 0 !important;
		width: 44px;
		height: 44px;
		padding: 0;
		place-items: center;
		border-radius: 12px;
	}

	.tk-nav__close span,
	.tk-nav__close .tk-nav__close-text {
		display: none;
	}

	.tk-nav-toggle {
		position: relative;
		z-index: var(--tk-z-nav-toggle);
	}

	.tk-body-nav-open {
		overflow: hidden;
	}

	.tk-mobile-cta {
		display: grid;
	}

	/* Khoảng trống cho thanh CTA cố định ở đáy màn hình */
	body {
		padding-bottom: 62px;
	}

	@media (min-width: 992px) {
		body {
			padding-bottom: 0;
		}
	}
}

/* --------------------------------------------------------------------------
   <= 768px - Tablet portrait
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--tk-radius: 12px;
		--tk-radius-lg: 16px;
	}

	body {
		font-size: 15.5px;
	}

	.tk-topbar {
		font-size: 0.78rem;
	}

	.tk-topbar .tk-container {
		justify-content: center;
		text-align: center;
	}

	.tk-topbar__extra {
		display: none;
	}

	.tk-brand__text strong {
		font-size: 1.1rem;
	}

	.tk-brand__text span {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}

	.tk-brand__logo img {
		max-height: 44px;
	}

	.tk-hero {
		padding: 44px 0 56px;
	}

	.tk-hero__desc {
		font-size: 1rem;
	}

	.tk-hero__badge {
		left: 10px;
		bottom: 14px;
		font-size: 0.72rem;
		padding: 10px 15px;
	}

	.tk-hero__stats {
		right: 8px;
		top: 10px;
		padding: 11px 15px;
		min-width: 120px;
	}

	.tk-hero__stats strong {
		font-size: 1.15rem;
	}

	.tk-hero__stats span {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}

	.tk-grid--2,
	.tk-grid--3,
	.tk-grid--4 {
		grid-template-columns: 1fr;
	}

	.tk-process {
		grid-template-columns: 1fr;
	}

	.tk-step {
		text-align: left;
		display: grid;
		grid-template-columns: 62px 1fr;
		gap: 0 18px;
		padding: 22px 20px;
		align-items: start;
	}

	.tk-step__num {
		width: 62px;
		height: 62px;
		margin: 0;
		font-size: 1.05rem;
		grid-row: span 2;
	}

	.tk-step h3 {
		margin-bottom: 4px;
	}

	.tk-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.tk-gallery__item--wide {
		grid-column: span 2;
		aspect-ratio: 16 / 9;
	}

	.tk-gallery__caption {
		opacity: 1;
		transform: none;
		font-size: 0.78rem;
		padding: 10px 12px;
		-webkit-line-clamp: 2;
	}

	.tk-teacher__values {
		grid-template-columns: 1fr;
	}

	.tk-form-row {
		grid-template-columns: 1fr;
	}

	.tk-btn--lg {
		padding: 15px 26px;
		font-size: 0.96rem;
	}

	.tk-btn-row .tk-btn {
		width: 100%;
	}

	.tk-course__actions .tk-btn {
		width: 100%;
	}

	.tk-footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.tk-footer-bottom {
		justify-content: center;
		text-align: center;
	}

	.tk-page-hero {
		padding: 36px 0;
	}

	.tk-map iframe {
		height: 320px;
	}

	.tk-lightbox__nav--prev { left: 6px; }
	.tk-lightbox__nav--next { right: 6px; }
	.tk-lightbox__close { top: 12px; right: 12px; }

	/* Vùng chạm tối thiểu 44px theo chuẩn WCAG 2.5.5 (target size). */
	.tk-lightbox__close,
	.tk-lightbox__nav {
		width: 46px;
		height: 46px;
	}

	.tk-slider__dot {
		position: relative;
		width: 12px;
		height: 12px;
	}

	/*
	 * Mở rộng vùng chạm của chấm điều hướng bằng pseudo-element.
	 *
	 * Vùng chạm thực = 12px (nút) + 32px (inset -16px mỗi cạnh) = 44px,
	 * đạt chuẩn WCAG 2.5.5 (Target Size, Enhanced).
	 *
	 * `pointer-events: auto` trên pseudo-element là BẮT BUỘC: theo đặc tả,
	 * pseudo-element không tự kế thừa `pointer-events` từ phần tử cha, nên
	 * vùng mở rộng sẽ KHÔNG bắt được chạm nếu không khai báo rõ.
	 */
	.tk-slider__dot::after {
		content: "";
		position: absolute;
		inset: -16px;
		width: auto;
		height: auto;
		transform: none;
		pointer-events: auto;
	}

	.tk-slider__dots {
		gap: 12px;
	}

	/* Liên kết trong footer / menu pháp lý: tăng khoảng cách dòng để dễ bấm. */
	.tk-footer-list a,
	.tk-legal-menu a,
	.tk-footer-bottom a {
		min-height: 34px;
		display: inline-flex;
		align-items: center;
	}

	/* Liên hệ trong footer (gọi ngay / zalo) cũng cần vùng chạm đủ lớn. */
	.tk-footer-contact a {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
	}

	/* Hotline trên topbar: vùng chạm tối thiểu 44px. */
	.tk-hotline {
		min-height: 44px;
	}

	/* Tiêu đề khóa học là link: tăng vùng chạm. */
	.tk-course__body h3 a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	/* Thẻ liên hệ trong trang Liên hệ: link bên trong cần vùng chạm đủ lớn. */
	.tk-contact-card a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	/* Breadcrumb: dễ bấm hơn trên màn hình nhỏ. */
	.tk-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 28px;
	}

	/* Input >= 16px: iOS Safari tự zoom khi focus nếu nhỏ hơn 16px. */
	.tk-field input[type="text"],
	.tk-field input[type="tel"],
	.tk-field input[type="email"],
	.tk-field select,
	.tk-field textarea {
		font-size: 16px;
	}

	/* Ô tìm kiếm: xếp dọc trên màn hình nhỏ để nút không bị bóp. */
	.tk-search-form,
	.wp-block-search__inside-wrapper {
		flex-direction: column;
	}

	.tk-search-form input[type="search"],
	.tk-search-form input[type="text"],
	.tk-search-form .tk-btn,
	.wp-block-search__input,
	.wp-block-search__button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   <= 480px - Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.tk-container {
		padding-inline: 16px;
	}

	.tk-section {
		padding: 48px 0;
	}

	.tk-hero__eyebrow {
	 font-size: 0.7rem;
		padding: 7px 14px;
	}

	.tk-hero__features li {
		font-size: 0.92rem;
	}

	.tk-benefit {
		padding: 24px 20px;
	}

	.tk-course__body {
		padding: 20px 20px 22px;
	}

	.tk-cta .tk-btn-row {
		flex-direction: column;
	}

	.tk-cta .tk-btn {
		width: 100%;
	}

	.tk-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
	}

	.tk-mobile-cta a {
		padding: 13px 6px;
		font-size: 0.82rem;
	}
}

/* --------------------------------------------------------------------------
   <= 360px - Small mobile
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
	.tk-container {
		padding-inline: 13px;
	}

	/*
	 * Ở 320px, logo + chữ + hotline + nút menu vượt quá chiều rộng khung
	 * (đo được: .tk-header-actions tràn tới 350px > 320px) → trình duyệt giãn
	 * layout viewport và trang bị cuộn ngang. Giảm khoảng cách + cỡ chữ để
	 * mọi thứ vừa khung.
	 */
	.tk-header-inner {
		gap: 8px;
	}

	.tk-brand {
		gap: 8px;
	}

	.tk-brand__logo img {
		max-width: 40px;
	}

	.tk-brand__text strong {
		font-size: 0.92rem;
		letter-spacing: 0.04em;
	}

	.tk-brand__text span {
		font-size: 0.6rem;
		letter-spacing: 0.02em;
	}

	.tk-header-actions {
		gap: 8px;
	}

	.tk-hotline__icon {
		width: 38px;
		height: 38px;
	}

	.tk-nav-toggle {
		width: 42px;
		height: 42px;
	}

	.tk-hero h1 {
		font-size: 1.72rem;
	}

	.tk-hero__stats {
		min-width: 104px;
		padding: 9px 12px;
	}

	.tk-hero__badge {
		left: 6px;
		bottom: 8px;
		padding: 8px 12px;
		font-size: 0.72rem;
		letter-spacing: 0.07em;
	}

	.tk-gallery {
		grid-template-columns: 1fr;
	}

	.tk-gallery__item--wide {
		grid-column: span 1;
	}

	.tk-mobile-cta a {
	 font-size: 0.76rem;
		padding: 12px 4px;
	}
}

/* --------------------------------------------------------------------------
   Landscape phone
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
	.tk-nav {
		padding-top: 70px;
	}
}