/* =====================================================================
 * Cải tiến UI/UX theo rà soát ui-ux-pro-max (18/10/2026).
 * Chỉ áp dụng khi <body> có class .lxan-ux (xem trước: ?uiux=1, ?uiux=2 thêm font mới).
 * ===================================================================== */

/* 1. Focus nhìn thấy được khi dùng bàn phím (theme đang tắt outline của mọi link). */
body.lxan-ux :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #f2b705 !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

/* 2. Tương phản: đỏ hành động #c62828 (5,6:1 trên nền trắng) thay #e53935 (4,2:1). */
body.lxan-ux .lxan { --lxan-red: #c62828; --lxan-red-dark: #a51f1f; }
body.lxan-ux .elementor-2068 .elementor-element-61cbbfe,
body.lxan-ux .elementor-2068 .elementor-element-61cbbfe a { color: rgba(255, 255, 255, .85) !important; }

/* 3. Icon SVG thay ký tự (☎ ★ → ◷ ⌖ ⏱ ❚❚ ✓). */
body.lxan-ux .lxan .lxan-icon { flex: none; }
body.lxan-ux .lxan-btn__icon, body.lxan-ux .lxan-info li > span, body.lxan-ux .lxan-card__meta, body.lxan-ux .lxan-gcard__link { display: inline-flex; align-items: center; gap: 6px; }
body.lxan-ux .lxan-btn__icon .lxan-icon, body.lxan-ux .lxan-info .lxan-icon { color: inherit; }
body.lxan-ux .lxan-rating__stars { display: inline-flex; gap: 1px; color: var(--lxan-yellow); }
body.lxan-ux .lxan-gcard .lxan-rating__stars .lxan-icon { color: var(--lxan-yellow); }
body.lxan-ux .lxan-v1 .lxan-gcard .lxan-rating__stars .lxan-icon { color: #14202f; }
body.lxan-ux .lxan-hero__pause .lxan-icon--play,
body.lxan-ux .lxan-hero__pause.is-paused .lxan-icon--pause { display: none; }
body.lxan-ux .lxan-hero__pause.is-paused .lxan-icon--play { display: inline; }
body.lxan-ux .lxan-check li::before {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}
/* Nền tích màu vàng/sáng (hero mẫu 1, mẫu 3, mẫu 2): dấu tích màu tối. */
body.lxan-ux :is(.lxan-v1 .lxan-hero, .lxan-v3 .lxan-hero) .lxan-check li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body.lxan-ux .lxan-v2 .lxan-check li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23354c68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* 4. Vùng chạm tối thiểu 44×44px, cách nhau ≥ 8px. */
body.lxan-ux .lxan-hero__controls { gap: 0; padding: 0 6px; }
body.lxan-ux .lxan-hero__dot { position: relative; width: 44px; height: 44px; border: 0; background: transparent; }
body.lxan-ux .lxan-hero__dot::before { content: ""; position: absolute; inset: 15px; border: 2px solid #fff; border-radius: 50%; }
body.lxan-ux .lxan-hero__dot.is-active::before { background: #fff; }
body.lxan-ux .lxan-hero__pause { width: 44px; height: 44px; display: inline-grid; place-items: center; }
body.lxan-ux .lxan-rating { min-height: 44px; }
body.lxan-ux .wpcf7 :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) { min-height: 48px; font-size: 16px; }
body.lxan-ux .wpcf7 textarea { min-height: 96px; }
@media (max-width: 991px) {
	body.lxan-ux .elementor-2068 .elementor-widget-footer-nav-menu a { display: inline-block; padding: 10px 0; }
	body.lxan-ux .elementor-2068 .footer-widget__info li { padding: 6px 0; }
}

/* 5. Chữ phụ tối thiểu 15px, chữ thân 16px trên điện thoại. */
@media (max-width: 767px) {
	body.lxan-ux .lxan :is(.lxan-card__sub, .lxan-card__meta, .lxan-trust__item span, .lxan-small, .lxan-teacher p, .lxan-quote figcaption, .lxan-head__eyebrow, .lxan-path__num, .lxan-rating) { font-size: 15px; }
	/* Chỉ nâng các đoạn đang < 16px (không đụng giá, tiêu đề, dòng nổi bật). */
	body.lxan-ux .lxan :is(.lxan-path p, .lxan-why__item p, .lxan-quote blockquote, .lxan-check--sm li, .lxan-steps__item p) { font-size: 16px; }
}

/* 6. Nhãn hiển thị cho ô nhập (không chỉ dùng placeholder). */
body.lxan-ux .lxan-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: inherit; }
body.lxan-ux .lxan-label span { color: #c62828; }
body.lxan-ux .lxan-contact__form .lxan-label { color: #354c68; }

/* 7. Hover tinh tế: đổi bóng & viền, không phóng to/dịch chuyển bố cục. */
body.lxan-ux .lxan :is(.lxan-card, .lxan-quote, .lxan-teacher, .lxan-faq__item) { transition: box-shadow .2s ease-out, border-color .2s ease-out; }
body.lxan-ux .lxan :is(.lxan-card, .lxan-quote, .lxan-teacher):hover { box-shadow: 0 14px 32px rgba(20, 32, 47, .16); border-color: #c3ccd8; }
body.lxan-ux .lxan-faq__item:hover { border-color: #c3ccd8; }
body.lxan-ux .lxan-btn { transition-duration: .2s; cursor: pointer; }

/* 8. Tôn trọng "giảm chuyển động": tắt hiệu ứng WOW/animate của theme. */
@media (prefers-reduced-motion: reduce) {
	body.lxan-ux .wow, body.lxan-ux .animated { animation: none !important; visibility: visible !important; }
	body.lxan-ux { scroll-behavior: auto !important; }
}

/* 9. Thanh liên hệ nhanh trên điện thoại (thay 2 nút nổi tròn chồng lên nội dung). */
.lxan-actionbar { display: none; }
@media (max-width: 767px) {
	body.lxan-ux .lxan-actionbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: #fff; box-shadow: 0 -6px 20px rgba(20, 32, 47, .15);
	}
	body.lxan-ux .lxan-actionbar__btn {
		display: flex; align-items: center; justify-content: center; gap: 6px;
		min-height: 48px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.1;
		color: #24364d !important; background: #eef2f7; text-decoration: none;
	}
	body.lxan-ux .lxan-actionbar__btn .lxan-icon { width: 20px; height: 20px; }
	body.lxan-ux .lxan-actionbar__btn--zalo { background: #0068ff; color: #fff !important; }
	body.lxan-ux .lxan-actionbar--single { grid-template-columns: 1fr; }
	body.lxan-ux .lxan-actionbar__btn--primary { background: #c62828; color: #fff !important; }
	body.lxan-ux { padding-bottom: 72px; }
	body.lxan-ux .gsb-buttons { display: none !important; }
	body.lxan-ux .scroll-to-top { bottom: 92px !important; }
}

/* =====================================================================
 * 10. Thanh menu chính (chủ site duyệt 18/10/2026 — phương án 2 → đổi sang phương án 1 cùng ngày; cỡ 90%).
 * Chỉ màn hình ≥ 1200px (có menu ngang); điện thoại/tablet giữ thanh logo + nút ☰ như cũ.
 * Về giao diện cũ: xoá khối này.
 * ===================================================================== */
@media (min-width: 1200px) {
	/* Thu nhỏ cả thanh (logo, chiều cao, chữ) còn 90%. */
	body.lxan-ux .main-header { zoom: .9; }

	/* Nền vùng menu giữa: xám-xanh rất nhạt chuyển màu, chữ menu giữ màu tối của theme.
	   Đặt trên chính .main-header (khối logo & khối điện thoại là pseudo z-index âm, vẫn nằm trên nền này). */
	body.lxan-ux .main-header {
		background: linear-gradient(90deg, #cfd9e6 0%, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%, #cfd9e6 100%) !important;
	}
	body.lxan-ux .main-header__right::before { background: #cfd9e6; }

	/* Khối điện thoại/Zalo cao bằng khối logo (trước: canh giữa, thấp hơn ~1/3). */
	body.lxan-ux .main-header__right { align-self: stretch; align-items: center; padding-top: 0; padding-bottom: 0; }
	/* Số điện thoại luôn trên 1 dòng. */
	body.lxan-ux .main-header__right :is(.content__call, .content__text) { white-space: nowrap; }
	/* Chữ menu luôn trên 1 dòng. */
	body.lxan-ux .main-menu .main-menu__list > li > a { white-space: nowrap; }
}
/* Màn hình 1200–1399px: thu hẹp khoảng cách mục menu để không bị chật. */
@media (min-width: 1200px) and (max-width: 1399px) {
	body.lxan-ux .main-menu .main-menu__list > li + li { margin-left: 22px; }
}