/**
 * Mobile App UX & Micro-Interactions + Desktop Scroll Reveal
 * 
 * 1. MOBILE (<= 768px):
 *    - Super compact, sleek, and elegant (no oversized elements, no bloated margins)
 *    - Narrow comfortable padding (14px) so content breathes without awkward empty spaces
 *    - Crisp typography: headings scaled down to 20px-24px, subtitles to 11px
 *    - Card padding tightened to 14px-16px, border-radius refined to 14px
 *    - Circle buttons & icons scaled to ergonomic mobile dimensions
 *    - Haptic active tap feedback (-webkit-tap-highlight-color removed)
 * 
 * 2. PC / DESKTOP (> 768px):
 *    - 100% PRESERVED layout and design
 *    - Smooth Scroll-Reveal entrance effects on scroll up / down
 *    - Directional scroll awareness (scrolling-down / scrolling-up)
 */

/* =========================================================
   1. MOBILE APP STYLING (ONLY FOR SCREENS <= 768px)
   ========================================================= */
@media (max-width: 768px) {

	/* --- GLOBAL CONTAINER PADDINGS: COMPACT & CLEAN --- */
	.ctaf-inner-container,
	.bds-container,
	.bds-post-wrapper,
	.ccs-container,
	.anl-inner-container,
	.lr-inner-container,
	.lr-container,
	.hiw-inner-container,
	.hiw-container,
	.rf-inner-container,
	.rf-container,
	.faq-accordion-container,
	.faq-container,
	.rsc-inner-container,
	.rsc-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* --- HEADINGS: CRISP, NOT BULKY --- */
	.ctaf-heading {
		font-size: 22px !important;
		line-height: 1.25 !important;
		letter-spacing: -0.01em !important;
	}

	.bds-main-title {
		font-size: 22px !important;
		line-height: 1.25 !important;
		margin: 0 0 12px 0 !important;
	}

	.anl-title,
	.lr-main-title,
	.lr-title,
	.hiw-main-title,
	.hiw-title,
	.rf-main-title,
	.rf-title,
	.faq-accordion-title,
	.ccs-section-title {
		font-size: 22px !important;
		line-height: 1.25 !important;
		margin-bottom: 8px !important;
	}

	/* --- SUBTITLES / EYEBROWS --- */
	.bds-subtitle,
	.ctaf-col-title,
	.anl-eyebrow,
	.lr-subtitle,
	.hiw-subtitle,
	.rf-subtitle,
	.faq-accordion-subtitle {
		font-size: 11px !important;
		letter-spacing: 0.1em !important;
		margin-bottom: 6px !important;
	}

	.bds-sub-line {
		width: 22px !important;
		height: 1.5px !important;
	}

	/* --- CTA FOOTER: BALANCED & ERGONOMIC --- */
	.ctaf-top-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 16px !important;
		margin-bottom: 22px !important;
	}

	.ctaf-heading-box {
		flex: 1 !important;
		min-width: 0 !important;
	}

	.ctaf-circle-btn {
		width: 50px !important;
		height: 50px !important;
		min-width: 50px !important;
		min-height: 50px !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
	}

	.ctaf-circle-btn svg {
		width: 22px !important;
		height: 14px !important;
	}

	.ctaf-divider {
		margin: 0 0 22px 0 !important;
	}

	.ctaf-bottom-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.ctaf-brand-col {
		max-width: 100% !important;
		gap: 12px !important;
	}

	.ctaf-logo-box {
		gap: 10px !important;
	}

	.ctaf-logo-icon {
		width: 32px !important;
		height: 32px !important;
	}

	.ctaf-logo-title {
		font-size: 18px !important;
	}

	.ctaf-logo-slogan {
		font-size: 10.5px !important;
	}

	.ctaf-bio-desc {
		font-size: 12.5px !important;
		line-height: 1.6 !important;
	}

	.ctaf-socials {
		gap: 8px !important;
	}

	.ctaf-social-btn {
		width: 32px !important;
		height: 32px !important;
	}

	.ctaf-social-btn svg {
		width: 14px !important;
		height: 14px !important;
	}

	.ctaf-col-title {
		margin-bottom: 12px !important;
	}

	.ctaf-links-subgrid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px 16px !important;
	}

	.ctaf-links-list {
		gap: 9px !important;
	}

	.ctaf-link-item,
	.ctaf-contact-row {
		font-size: 12.5px !important;
	}

	.ctaf-bottom-bar {
		padding: 12px 14px !important;
	}

	.ctaf-bar-container {
		flex-direction: column !important;
		text-align: center !important;
		gap: 4px !important;
		font-size: 11.5px !important;
	}

	/* --- SINGLE POST DETAIL ON MOBILE --- */
	.bds-grid-layout {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.bds-featured-media {
		max-height: 340px !important;
		border-radius: 12px !important;
		margin-bottom: 18px !important;
	}

	.bds-article-body {
		font-size: 14px !important;
		line-height: 1.7 !important;
	}

	.bds-article-body p {
		margin-bottom: 16px !important;
	}

	.bds-article-body .bds-lead-text {
		font-size: 14.5px !important;
		line-height: 1.65 !important;
		margin-bottom: 20px !important;
	}

	.bds-content-heading,
	.bds-article-body h2 {
		font-size: 18px !important;
		margin: 24px 0 12px 0 !important;
	}

	.bds-content-subheading,
	.bds-article-body h3 {
		font-size: 15.5px !important;
		margin: 20px 0 10px 0 !important;
	}

	.bds-content-quote {
		margin: 18px 0 !important;
		padding: 14px 16px !important;
		font-size: 14px !important;
		border-radius: 0 10px 10px 0 !important;
	}

	.bds-post-footer {
		margin-top: 28px !important;
		padding-top: 18px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	.bds-sidebar-col {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 20px !important;
	}

	.bds-about-card {
		padding: 18px 14px !important;
		border-radius: 12px !important;
	}

	.bds-about-avatar-wrap {
		width: 90px !important;
		height: 90px !important;
		margin: 0 auto 12px !important;
		border-radius: 50% !important;
	}

	.bds-about-name {
		font-size: 12.5px !important;
		margin-bottom: 12px !important;
	}

	.bds-skills-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.bds-skill-box {
		padding: 14px 8px !important;
		min-height: 80px !important;
		border-radius: 8px !important;
		gap: 8px !important;
	}

	.bds-skill-icon {
		width: 22px !important;
		height: 22px !important;
	}

	.bds-skill-icon svg {
		width: 20px !important;
		height: 20px !important;
	}

	.bds-skill-label {
		font-size: 10.5px !important;
	}

	/* --- COMPACT CARDS IN GENERAL --- */
	.ccs-card,
	.lr-card,
	.rf-card,
	.rsc-card,
	.hiw-card,
	.faq-accordion-item {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}

	.rsc-stats-grid,
	.stats-counter-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.rsc-stat-number,
	.stats-counter-number {
		font-size: 24px !important;
	}

	.rsc-stat-label,
	.stats-counter-label {
		font-size: 10.5px !important;
	}

	/* --- FAQ ACCORDION MOBILE --- */
	.faq-accordion-header {
		padding: 14px 14px !important;
		font-size: 13.5px !important;
		min-height: 48px !important;
	}

	.faq-accordion-body {
		padding: 0 14px 14px !important;
		font-size: 13px !important;
	}
}

/* =========================================================
   2. TOUCH & HAPTIC ACTIVE SCALING (Mobile)
   ========================================================= */
.ccs-card,
.lr-card,
.rf-card,
.rsc-card,
.hiw-card,
.bds-skill-box,
.bds-tag-pill,
.bds-share-btn,
.bds-copy-btn,
.ctaf-social-btn,
.ctaf-circle-btn,
.ctaf-link-item,
.faq-accordion-header {
	-webkit-tap-highlight-color: transparent !important;
	touch-action: manipulation;
}

.ccs-card:active,
.lr-card:active,
.rf-card:active,
.rsc-card:active,
.hiw-card:active,
.bds-skill-box:active,
.bds-share-btn:active,
.bds-tag-pill:active,
.ctaf-circle-btn:active,
.ctaf-social-btn:active {
	transform: scale(0.965) !important;
	transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* =========================================================
   3. DESKTOP / PC ONLY: SCROLL REVEAL (>= 769px)
   ========================================================= */
@media (min-width: 769px) {
	.ccs-scroll-item {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}

	.ccs-scroll-item.ccs-revealed {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}

	/* Subtle parallax hover boost on PC */
	.ccs-card:hover,
	.lr-card:hover,
	.rf-card:hover,
	.rsc-card:hover,
	.hiw-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	}
}

/* =========================================================
   4. HEADER .main-home: TRANSPARENT AT TOP & GLASSMORPHISM ON SCROLL
   ========================================================= */

/* Khi ở đầu trang / cuộn lên đầu (At Top):
   - Nền trong suốt 100% ăn theo background phía sau (hero/nền cha)
   - Giữ nguyên màu chữ và liên kết sáng rõ nét */
.main-home,
.main-home.at-top,
#tahefobu-header:not(.ta-sticky-active) .main-home,
body:not(.is-scrolled) .main-home {
	background-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-bottom: 1px solid transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Giữ nguyên màu chữ, menu items và icons của .main-home */
.main-home .eael-simple-menu-horizontal > li > a,
.main-home .menu-link,
.main-home .elementor-item,
.main-home a:not(.elementor-button),
.main-home .elementor-heading-title,
.main-home p,
.main-home span:not(.elementor-button-text) {
	color: #ffffff !important;
	transition: color 0.25s ease, opacity 0.25s ease !important;
}

.main-home .eael-simple-menu-horizontal > li > a:hover,
.main-home .menu-link:hover,
.main-home .elementor-item:hover,
.main-home a:not(.elementor-button):hover {
	color: #cbd5e1 !important;
}

/* Khi cuộn trang xuống (Scrolled / Sticky):
   - Nền chuyển sang kính mờ sang trọng chống rối mắt khi trượt qua chữ/ảnh
   - Màu chữ vẫn giữ nguyên độ tương phản sắc nét */
.main-home.is-scrolled,
#tahefobu-header.ta-sticky-active .main-home,
body.is-scrolled .main-home {
	background-color: rgba(11, 12, 14, 0.85) !important;
	background: rgba(11, 12, 14, 0.85) !important;
	backdrop-filter: blur(16px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* =========================================================
   5. CONTAINER 1400PX CONTENT WIDTH STANDARD
   ========================================================= */
.main-home > .e-con-inner,
.main-home .e-con-inner,
.ccs-container,
.anl-container,
.nlr-container,
.orf-container,
.cfaq-container,
.ctaf-inner-container,
.ctaf-bar-container,
.bas-container,
.bds-container,
.rsc-container,
.hiw-container,
.bl-container,
.bl-marquee-mask,
.bds-comments-wrapper,
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}