/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/

/* The inset "card" sections (green Services + Testimonials) carry a 16px margin
   on all sides, but Elementor renders them at full (100vw) width, so the side
   margins push 16px past the viewport (a thin horizontal scroll). Cap the width
   and centre them so the 16px gap sits inside the viewport on every screen. */
.ntv-services-grid, .ntv-testimonials {
	max-width: calc(100% - 32px);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Transparent header floating over the page banner (matches demo) ----
   Applies to the front page AND every Elementor page (each opens with a hero or
   a .ntv-page-banner image, exactly like the demo's inner pages). The header
   template (.elementor-76) is pulled out of flow and layered over that image;
   the topbar + main-bar backgrounds go transparent so the white nav pill floats
   over the photo. The first section gets top padding so its content clears the
   overlaid header. Blog archive & single posts (no banner, body has no .page
   class) keep the normal solid header. */
body.page .elementor-76 {
	position: absolute; top: 0; left: 0; right: 0; z-index: 100;
}
body.page .ntv-topbar { background: transparent !important; }
body.page .ntv-mainbar-outer { background: transparent !important; }
/* subtle top-down darkening so the white topbar text stays legible over any
   image (sits behind the header content, above the banner photo). */
body.page .elementor-76::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px;
	background: linear-gradient(180deg, rgba(20,26,17,0.5), rgba(20,26,17,0));
	z-index: -1; pointer-events: none;
}
body.page .ntv-hero { padding-top: 216px !important; }
body.page .ntv-page-banner { padding-top: 230px !important; }
@media (max-width: 767px) {
	body.page .ntv-hero { padding-top: 210px !important; }
	body.page .ntv-page-banner { padding-top: 190px !important; }
}

/* ---- Task 5: site header + footer (ElementsKit templates) ---- */
.ntv-topbar-left .elementor-icon-list-icon,
.ntv-topbar-left .elementor-icon-list-text,
.ntv-topbar-left a { color: #FFFFFF; }
.ntv-topbar-left .elementor-icon-list-item:not(:last-child):after {
	content: ""; display: inline-block; width: 1px; height: 12px;
	background: rgba(255,255,255,0.35); margin-inline-start: 11px; vertical-align: middle;
}

.ntv-mainbar-outer { position: relative; z-index: 20; }
.ntv-logo a { text-decoration: none; }

/* Header main bar: ONE row — logo (standalone) | white nav pill | CTA — like the
   demo. The bar itself is transparent; only .ntv-nav-pill carries the white
   rounded background. */
.ntv-mainbar {
	flex-wrap: nowrap !important;
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 24px;
	align-items: center !important;
}
.ntv-mainbar > .ntv-logo { flex: 0 0 auto; }
.ntv-mainbar > .ntv-nav-pill { flex: 0 1 auto !important; width: auto !important; min-width: 0; }
.ntv-mainbar > .elementor-widget-button { flex: 0 0 auto; width: auto !important; }
.ntv-nav-pill { transition: box-shadow .2s ease; }

/* On overlay pages (front page + Elementor pages) the header floats over a dark
   image, so the standalone logo must be white to read against it. Blog/single
   keep the solid header, so their logo stays dark (default). */
body.page .ntv-logo,
body.page .ntv-logo a,
body.page .ntv-logo .elementor-heading-title { color: #FFFFFF !important; }

/* Menu items — compact pills matching the Modulux demo. ElementsKit forces the
   links to height:100% so they stretched to the full ~80px bar (an oversized
   pill); override to a content-height pill (~40px) with left-aligned items. */
.ekit-wid-con .elementskit-navbar-nav { justify-content: flex-start; align-items: center; }
/* ElementsKit gives the menu container a fixed ~80px height, which inflates the
   whole white bar; collapse it so the compact pill items set the bar height. */
.ekit-wid-con .elementskit-menu-container,
.ekit-wid-con .elementskit-navbar-nav,
.ntv-mainbar .elementor-widget-ekit-nav-menu { min-height: 0 !important; height: auto !important; }
.ekit-wid-con .elementskit-navbar-nav > li > a {
	height: auto !important;
	min-height: 0 !important;
	padding: 9px 18px !important;
	border-radius: 100px !important;
	font-size: 15px;
	line-height: 1.25;
	color: #4A4A44;
	transition: background .18s ease, color .18s ease;
}
/* Hover AND active are the same solid olive pill with white text (demo does
   both identically — hover is not a faint tint). */
.ekit-wid-con .elementskit-navbar-nav > li:hover > a,
.ekit-wid-con .elementskit-navbar-nav > li.current-menu-item > a,
.ekit-wid-con .elementskit-navbar-nav > li.current_page_item > a,
.ekit-wid-con .elementskit-navbar-nav > li.current-menu-ancestor > a {
	background: #8C9B5A !important; color: #FFFFFF !important;
}

/* Dropdown submenu (ElementsKit nav-menu walker renders
   <ul class="elementskit-dropdown elementskit-submenu-panel"> for children,
   each link gets class "dropdown-item" — see elementskit-lite/modules/
   megamenu/walker-nav-menu.php start_lvl()/start_el()). */
.ntv-nav-pill .elementskit-dropdown.elementskit-submenu-panel {
	background: #FFFFFF;
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 12px 30px rgba(31,42,27,0.14);
	min-width: 220px;
}
.ntv-nav-pill .elementskit-dropdown.elementskit-submenu-panel .dropdown-item {
	display: block;
	color: #31402B !important;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 14px;
	padding: 10px 14px !important;
	border-radius: 8px;
	text-decoration: none;
}
.ntv-nav-pill .elementskit-dropdown.elementskit-submenu-panel .dropdown-item:hover {
	background: rgba(140,155,90,0.12);
	color: #8C9B5A !important;
}

.ntv-foot-links, .ntv-foot-services, .ntv-foot-hours {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
.ntv-foot-links a, .ntv-foot-services a {
	color: rgba(255,255,255,0.82); text-decoration: none; transition: color .15s ease;
}
.ntv-foot-links a:hover, .ntv-foot-services a:hover { color: #8C9B5A; }
.ntv-foot-title { margin-bottom: 4px; }
/* Footer columns: keep the 4 columns on one row (Elementor sets each child
   width:100% inline, which otherwise wraps them into a single stacked column). */
.ntv-foot-cols { flex-wrap: nowrap !important; align-items: flex-start; }
.ntv-foot-cols > .e-con { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
.ntv-foot-cols > .e-con:first-child { flex: 1.6 1 0 !important; }

@media (max-width: 767px) {
	.ntv-topbar { justify-content: center; text-align: center; }
	.ntv-topbar-right { display: none; }
	/* Logo + menu pill + CTA no longer fit on one narrow row now that they are
	   separate; hide the header CTA on mobile (the menu + the floating contact
	   button already cover it). Header becomes: logo (left) · menu pill (right). */
	.ntv-mainbar > .elementor-widget-button { display: none !important; }
	.ntv-foot-cols { flex-direction: column !important; flex-wrap: wrap !important; }
	.ntv-foot-cols > .e-con, .ntv-foot-cols > .e-con:first-child {
		flex: 0 0 auto !important; width: 100% !important;
	}
	.ntv-foot-bottom { flex-direction: column; text-align: center; }
}

/* ---- Task 8: home section 5-7 (Features, Collections, Approach) ---- */

/* Features: 2 ảnh cắt vát song song (parallel diagonal-cut images) */
.ntv-feat-img-1 img { clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%); }
.ntv-feat-img-2 img { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%); margin-left: -6%; }

/* Features: rotating badge fallback (no dedicated ElementsKit "rotating badge" widget in
   the Lite version) — circular text ring (SVG textPath) spins via CSS keyframe, center
   arrow icon stays fixed. position:absolute here targets our OWN .ntv-feat-imgrow wrapper
   (position:relative, below) as containing block, so it does not have the escaping-to-page
   problem that Elementor's native _position advanced control had (see about() in gen-home.py). */
.ntv-feat-imgrow { position: relative; }
/* Elementor gives every .elementor-widget wrapper `position: relative`, so the badge's
   absolute positioning resolved against its own zero-size html-widget wrapper instead of
   .ntv-feat-imgrow (badge floated in empty space right of the images). Neutralize the
   wrapper so .ntv-feat-imgrow becomes the containing block. */
.ntv-feat-imgrow > .elementor-widget-html { position: static; }
.ntv-rotate-badge {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 112px; height: 112px; z-index: 5;
}
.ntv-rotate-badge .ntv-badge-ring {
	width: 100%; height: 100%; display: block;
	animation: ntv-spin 16s linear infinite;
}
.ntv-rotate-badge .ntv-badge-ring text {
	font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; letter-spacing: 2px; fill: #31402B;
}
.ntv-rotate-badge .ntv-badge-center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 40px; height: 40px; border-radius: 50%; background: #8C9B5A; color: #FFFFFF;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}
@keyframes ntv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Approach: 2x2 image/card grid cells — background image fills the fixed-height cell */
.ntv-approach-cell { overflow: hidden; }
.ntv-approach-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Approach: overlapping avatar group (small circular avatars, plain <img> in an html widget) */
.ntv-avatar-group { display: flex; align-items: center; }
.ntv-avatar-group img {
	width: 38px; height: 38px; border-radius: 50%; border: 2px solid #FFFFFF;
	object-fit: cover; margin-left: -10px;
}
.ntv-avatar-group img:first-child { margin-left: 0; }

@media (max-width: 767px) {
	.ntv-feat-img-2 img { margin-left: 0; }
}

/* ---- Task 9: home section 8-13 (Materials, Process, Projects, FAQ, Testimonials, Blog) ---- */

/* Materials: rounded big image + thumbnail row */
.ntv-mat-img img { border-radius: 16px; display: block; width: 100%; }
.ntv-mat-thumb { overflow: hidden; border-radius: 12px; }
.ntv-mat-thumb img { display: block; width: 100%; height: 120px; object-fit: cover; }

/* Projects: hover-zoom photo card with gradient text overlay (no dedicated widget covers this —
   hand-rolled html widget, same convention as rotate_badge()/avatar_group() in gen-home.py).
   position:absolute here targets our own .ntv-project-card wrapper (position:relative, set
   below) as containing block — not Elementor's native _position control, so it doesn't have
   the escaping-to-page problem noted for about()'s abandoned attempt. */
.ntv-project-card { position: relative; display: block; overflow: hidden; border-radius: 18px;
	text-decoration: none; }
.ntv-project-card img { display: block; width: 100%; height: 360px; object-fit: cover;
	transition: transform .5s ease; }
.ntv-project-card:hover img { transform: scale(1.08); }
.ntv-project-overlay { position: absolute; left: 0; right: 0; bottom: 0;
	padding: 26px 22px 20px;
	background: linear-gradient(to top, rgba(31,42,27,0.92), rgba(31,42,27,0)); }
.ntv-project-overlay h3 { margin: 0 0 6px; font-family: 'Playfair Display', serif;
	font-size: 20px; font-weight: 500; color: #FFFFFF; }
.ntv-project-overlay p { margin: 2px 0; font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 13px; color: rgba(255,255,255,0.85); }

/* Dynamic project grid (Task 4/5: [ntv_projects] shortcode + JS filter tabs).
   .ntv-project-card/.ntv-project-overlay styles above already handle the
   photo/gradient look; this just adds grid layout + tabs + hide/show. */
.ntv-project-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.ntv-project-tab {
	display: inline-block; padding: 8px 18px; border-radius: 999px;
	background: #FFFFFF; color: #31402B; font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 14px; text-decoration: none; border: 1px solid rgba(31,42,27,0.14);
	transition: background .2s ease, color .2s ease;
}
.ntv-project-tab.is-active, .ntv-project-tab:hover {
	background: #31402B; color: #FFFFFF; border-color: #31402B;
}
.ntv-project-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.ntv-project-grid .ntv-project-card { flex: 1 1 300px; max-width: calc(33.333% - 16px); }
.ntv-project-card.is-hidden { display: none; }
@media (max-width: 900px) {
	.ntv-project-grid .ntv-project-card { max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
	.ntv-project-grid .ntv-project-card { max-width: 100%; }
}

/* FAQ: ElementsKit accordion (elementskit-accordion) — GREEN fill + white text on the open item */
.ntv-faq-accordion .elementskit-card { background: transparent; border: none;
	border-bottom: 1px solid rgba(31,42,27,0.12); margin-bottom: 0 !important; }
.ntv-faq-accordion .elementskit-card:last-child { border-bottom: none; }
.ntv-faq-accordion .elementskit-card-header > .elementskit-btn-link {
	padding: 18px 6px; border-radius: 0; background: transparent;
	font-family: 'Playfair Display', serif; font-size: 16px; color: #31402B;
}
/* !important needed: ElementsKit's own `.ekit-wid-con .elementskit-accordion .elementskit-card-header
   > .elementskit-btn-link` rule (widget-styles.css) has identical specificity (0,4,0) to ours and
   loads after our child-theme stylesheet, so it wins the cascade tie without !important — verified
   via document.styleSheets in the browser (both rules matched the open toggle, plugin rule listed
   last). */
.ntv-faq-accordion .elementskit-card-header > .elementskit-btn-link[aria-expanded="true"] {
	padding: 18px 20px !important; border-radius: 12px !important;
	background: #31402B !important; color: #FFFFFF !important;
}
.ntv-faq-accordion .elementskit-card-body {
	padding: 4px 20px 20px; background: #FFFFFF;
	font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; color: #4A4A44;
}

/* Testimonials: rounded photo */
.ntv-testi-img img { display: block; width: 100%; border-radius: 20px; }

/* Blog: card image rounded top corners only (bottom stays square inside the card) */
.ntv-blog-card { overflow: hidden; box-shadow: 0 8px 24px rgba(31,42,27,0.08); }
.ntv-blog-card-img img { display: block; width: 100%; border-radius: 18px 18px 0 0; }

@media (max-width: 767px) {
	.ntv-project-card img { height: 260px; }
}

/* ---- Task 10: inner pages (Giới thiệu, Dịch vụ x9, Dự án x3, FAQ) ---- */

/* Page banner: small hero (breadcrumb) reused by every inner page; project-detail pages pass
   the project's own photo as the background image, doubling as their "hero ảnh lớn". */
.ntv-page-banner { display: flex; }

/* Service-detail 2-col: main service photo, rounded, no fixed crop (keeps natural aspect,
   same convention as .ntv-testi-img / .ntv-mat-img). */
.ntv-svc-detail-img img { width: 100%; border-radius: 20px; display: block; }

/* Gallery rows (service-detail x2, project-detail x4): uniform cropped height. */
.ntv-gallery-img img {
	width: 100%; height: 280px; object-fit: cover; border-radius: 16px; display: block;
}

@media (max-width: 767px) {
	.ntv-page-banner { padding-left: 24px !important; padding-right: 24px !important; }
	.ntv-gallery-img img { height: 200px; }
}

/* ---- Task 11: featured image on single blog posts ---- */
/* Prepended to the_content via functions.php (hello-elementor single.php omits the
   thumbnail). Framed to match the site: rounded, subtle CREAM border, full content width. */
.ntv-single-featured-wrap {
	margin: 0 0 32px;
}
.ntv-single-featured-wrap img.ntv-single-featured {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 18px;
	display: block;
	border: 1px solid rgba(140, 155, 90, 0.25);
}
@media (max-width: 767px) {
	.ntv-single-featured-wrap img.ntv-single-featured { max-height: 260px; border-radius: 12px; }
}

/* ---- Task 12: floating contact button (Call / Zalo / Messenger) ---- */
/* Fixed bottom-right widget echoed via wp_footer in functions.php (theme-only,
   no plugin) so it renders on every front-end template — home, inner pages,
   blog archive and single posts alike. */
.ntv-float-contact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ntv-float-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.ntv-float-contact.is-open .ntv-float-actions {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ntv-float-btn {
	position: relative;
	width: 52px;
	height: 52px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(31,42,27,0.28);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ntv-float-btn:hover { transform: scale(1.08); color: #FFFFFF; }

.ntv-float-call { background: #31402B; }
.ntv-float-zalo { background: #0068FF; }
.ntv-float-messenger { background: #0084FF; }

.ntv-float-zalo-text {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .2px;
}

.ntv-float-tooltip {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #31402B;
	color: #FFFFFF;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 12px;
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.ntv-float-btn:hover .ntv-float-tooltip { opacity: 1; }

.ntv-float-toggle {
	width: 58px;
	height: 58px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: #31402B;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(31,42,27,0.35);
	transition: transform .15s ease;
}
.ntv-float-toggle:hover { transform: scale(1.06); }
/* Theme reset `button:hover/:focus { background:#c36 }` (0,2,0, tag+pseudo) turns
   the toggle magenta on hover/click; re-assert GREEN with the container prefix so
   our rule wins the specificity tie (0,2,1 with .is-open would over-qualify, so
   .ntv-float-contact .ntv-float-toggle:hover is 0,3,0 and beats the reset). */
.ntv-float-contact .ntv-float-toggle:hover,
.ntv-float-contact .ntv-float-toggle:focus,
.ntv-float-contact .ntv-float-toggle:focus-visible { background: #31402B; }

/* Icon swap. ElementsKit ships `svg:not(:root){display:inline}` (0,1,1) which
   outranks a bare `.ntv-float-icon-close{display:none}` (0,1,0), so BOTH icons
   showed at once. Raise specificity + !important so the collapsed/open states win. */
.ntv-float-toggle .ntv-float-icon-close { display: none !important; }
.ntv-float-toggle .ntv-float-icon-chat { display: block !important; }
.ntv-float-contact.is-open .ntv-float-toggle .ntv-float-icon-chat { display: none !important; }
.ntv-float-contact.is-open .ntv-float-toggle .ntv-float-icon-close { display: block !important; }

@media (max-width: 767px) {
	.ntv-float-contact { right: 14px; bottom: 14px; }
	.ntv-float-tooltip { display: none; }
}

/* ==== Demo-parity effects (ntv-effects.js): carousels + heading reveal ==== */

/* --- Card carousels (Services + Testimonials) --- */
.ntv-car { position: relative; max-width: 100%; }
.ntv-car-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	/* !important: with elementor css_print_method=internal the per-element CSS is
	   inlined after this stylesheet and would otherwise reset overflow to visible,
	   letting the flex-nowrap cards spill past the viewport (horizontal scroll). */
	overflow-x: auto !important;
	overflow-y: visible;
	max-width: 100% !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.ntv-car-track::-webkit-scrollbar { display: none; }
/* each card takes 1/perView of the row (gap-aware) */
.ntv-car-track > * {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--ntv-pv) - 1) * 24px) / var(--ntv-pv)) !important;
	width: calc((100% - (var(--ntv-pv) - 1) * 24px) / var(--ntv-pv)) !important;
	max-width: none !important;
}
/* arrows */
.ntv-car-arrow {
	position: absolute; top: 38%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	border: none; cursor: pointer; z-index: 5;
	background: #FFFFFF; color: #31402B;
	font-size: 20px; line-height: 1; font-weight: 400;
	box-shadow: 0 6px 20px rgba(31,42,27,0.22);
	transition: background .15s ease, color .15s ease, transform .15s ease;
	display: flex; align-items: center; justify-content: center;
}
.ntv-car-arrow:hover { background: #8C9B5A; color: #FFFFFF; }
.ntv-car-prev { left: -14px; }
.ntv-car-next { right: -14px; }
/* progress bar */
.ntv-car-bar {
	position: relative; height: 4px; border-radius: 4px;
	background: rgba(140,155,90,0.25); margin-top: 30px; overflow: hidden;
}
.ntv-car-bar > span {
	position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px;
	background: #8C9B5A; width: 8%; transition: width .25s ease;
}
/* on the dark Services/Testimonials sections the arrow shadow is fine; give the
   testimonials arrows a little breathing room since the column is narrower */
.ntv-testimonials .ntv-car-prev { left: -10px; }
.ntv-testimonials .ntv-car-next { right: -10px; }
.ntv-testimonials .ntv-car-bar { background: rgba(255,255,255,0.22); }
@media (max-width: 1024px) {
	.ntv-car-prev { left: -8px; } .ntv-car-next { right: -8px; }
}
@media (max-width: 600px) {
	.ntv-car-arrow { width: 38px; height: 38px; font-size: 17px; }
	.ntv-car-prev { left: -6px; } .ntv-car-next { right: -6px; }
}

/* --- Heading word reveal --- */
.ntv-reveal .ntv-word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.ntv-reveal .ntv-word {
	display: inline-block;
	transform: translateY(115%);
	transition: transform .62s cubic-bezier(.22,.68,.28,1);
	will-change: transform;
}
.ntv-reveal.is-in .ntv-word { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.ntv-reveal .ntv-word { transform: none; transition: none; }
}

/* --- Pill / badge / chip vertical centering ---
   Pills (eyebrow labels "• VỀ CHÚNG TÔI", feature chips "Khảo sát kỹ lưỡng",
   the hero trust badge, etc.) are single-<p> text-editor widgets carrying a
   background + border-radius + symmetric vertical padding (see pill() in
   gen-home.py). The browser/Elementor default gives that <p> a ~14px bottom
   margin, so the text sits ~10px from the top but ~24px from the bottom —
   visibly high inside the pill. Zeroing the trailing paragraph margin makes the
   padding symmetric again so the text is centered. Scoped to auto-width text
   editors (the pill shape) to leave normal body copy untouched. */
.elementor-widget-text-editor.elementor-widget__width-auto p:last-child {
	margin-bottom: 0;
}

/* ============================================================================
   MOBILE RESPONSIVE OVERHAUL (phones, ≤767px)
   ----------------------------------------------------------------------------
   The Elementor JSON generators (scripts/gen-*.py + elgen.py) only ever emit a
   single DESKTOP value for section padding (px()) and heading font-size (size())
   — no _mobile / _tablet responsive variants. So on a phone every top-level
   section kept 48–64px side padding + 90–110px vertical padding, and headings
   kept their desktop px (hero H1 = 64px, section H2 = 38px). The result read
   cramped: a fat empty gutter on both sides squeezing content into a narrow
   centre column ("mọi thứ dồn vào giữa, padding 2 bên to").

   We backfill the missing mobile scale here in CSS rather than regenerating the
   DB content. Elementor's per-element padding/font rules are NOT !important, so
   an !important mobile rule wins the cascade regardless of specificity.
   ==========================================================================*/
@media (max-width: 767px) {
	/* -- 1. Side gutters --------------------------------------------------
	   Every top-level section is a direct child `.elementor > .e-con`. Nested
	   cards are deeper `.e-con` and keep their own padding, so this only
	   trims the outer page gutter down to a standard ~18px phone margin. */
	.elementor > .e-con {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* -- 2. Vertical rhythm ----------------------------------------------
	   Content sections shipped 90–110px top/bottom padding — far too airy on
	   a phone. Compress to a comfortable 52px. Excluded: the header topbar +
	   main bar (already small), the hero and page-banner (their top padding
	   clears the absolutely-positioned overlay header — see top of file), and
	   the footer (its own tuned spacing). */
	.elementor > .e-con:not(.ntv-topbar):not(.ntv-mainbar-outer):not(.ntv-hero):not(.ntv-page-banner):not(.ntv-foot-main):not(.ntv-foot-bottom) {
		padding-top: 52px !important;
		padding-bottom: 52px !important;
	}

	/* -- 3. Heading scale -------------------------------------------------
	   Fluid clamp() so titles track viewport width across 320–767px instead
	   of sitting at their fixed desktop px. Caps keep them from exceeding the
	   desktop size on the widest phones. h1 = hero / page-banner title,
	   h2 = every section title. Card titles (h3, 20px) already read fine and
	   are left untouched. */
	.elementor-widget-heading h1.elementor-heading-title {
		font-size: clamp(28px, 8.2vw, 40px) !important;
		line-height: 1.15 !important;
	}
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: clamp(21px, 6.2vw, 32px) !important;
		line-height: 1.22 !important;
	}

	/* -- 4. Hero fine-tuning ----------------------------------------------
	   With the smaller H1 the hero no longer needs its huge 210px top offset;
	   the header is ~168px tall on a phone, so 176px clears it with a little
	   breathing room and lifts the content up the fold. */
	body.page .ntv-hero { padding-top: 176px !important; }

	/* -- 5. Full-bleed media widgets -------------------------------------
	   Guard against any element forcing horizontal scroll on narrow screens. */
	.elementor > .e-con img { max-width: 100%; height: auto; }

	/* -- 6. FAQ accordion body -------------------------------------------
	   ElementsKit indents the answer body 65px on the left (to sit under the
	   question past an icon column). On a phone that wastes a third of the row
	   and forces the answer into a narrow wrapping column; pull it back to the
	   normal 20px gutter. !important to beat ElementsKit's own selector. */
	.ntv-faq-accordion .elementskit-card-body {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Blog archive (default hello-elementor template, not Elementor-built): the
   post titles inherit the theme's oversized heading size and the magenta
   default link colour, which clashes with the brand green and reads huge on a
   phone. Scope to the archive so single-post/​page headings are untouched. */
@media (max-width: 767px) {
	.blog .page-header .page-title,
	.archive .page-header .page-title { font-size: 28px; }
	.blog article.post .entry-title,
	.archive article.post .entry-title { font-size: 24px; line-height: 1.25; }
}
.blog article.post .entry-title a,
.archive article.post .entry-title a {
	color: #31402B;
}
.blog article.post .entry-title a:hover,
.archive article.post .entry-title a:hover {
	color: #8C9B5A;
}