/* ============================================================================
   Work & Wonders — site-wide layout fixes
   ----------------------------------------------------------------------------
   Two jobs:
     1. the contact form that now lives in the footer (every page)
     2. mobile spacing on the front page, which Elementor ships with desktop
        padding and a zero side gutter
   Loaded after Elementor's generated CSS so plain specificity wins; no
   !important anywhere. Revert = delete this file + its wp_enqueue_style call.
   ============================================================================ */

:root {
	--ww-red:   #bf1e2e;
	--ww-navy:  #17262f;
}


/* --------------------------------------------------------- 1. Footer form */

/* The widget sits in the footer's flex row, so on its own it collapsed to a
   single ~420px column. Let it take the row and cap it to a readable measure. */
.footer .footer-widgets .widget_custom_html:only-child {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

.ww-footer-form {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	padding-block: 8px 24px;
}

.ww-footer-form__title {
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.25;
}

.ww-footer-form__lead {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.6;
}

/* Name + phone share a row on desktop, everything else spans.
   Grid rather than inline-block: two 50% inline-blocks plus the whitespace
   between the <p> tags exceeds 100% and wraps. */
.ww-footer-form .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ww-footer-form .wpcf7-form > * {
	margin: 0;
	min-width: 0;
}

.ww-footer-form .wpcf7-form > p:nth-of-type(n+3),
.ww-footer-form .wpcf7-form > .wpcf7-response-output,
.ww-footer-form .wpcf7-form > .screen-reader-response {
	grid-column: 1 / -1;
}

.ww-footer-form .wpcf7-form input[type="text"],
.ww-footer-form .wpcf7-form input[type="tel"],
.ww-footer-form .wpcf7-form input[type="email"],
.ww-footer-form .wpcf7-form textarea {
	width: 100%;
	padding: 13px 16px;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	font-size: 15px;
	transition: border-color .2s, background-color .2s;
}

/* CF7 ships `div.wpcf7 textarea.wpcf7-textarea` (0,2,2), which out-ranks the
   grouped rule above and would leave the textarea white-on-white. */
.ww-footer-form div.wpcf7 textarea.wpcf7-textarea {
	min-height: 104px;
	resize: vertical;
	padding: 13px 16px;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	font-size: 15px;
}

.ww-footer-form div.wpcf7 textarea.wpcf7-textarea:focus {
	outline: none;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--ww-red);
}

.ww-footer-form .wpcf7-form :is(input, textarea)::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.ww-footer-form .wpcf7-form :is(input, textarea):focus {
	outline: none;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--ww-red);
}

.ww-footer-form .wpcf7-form input[type="submit"] {
	width: auto;
	min-width: 200px;
	padding: 14px 30px;
	color: #fff;
	background-color: var(--ww-red);
	border: none;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s;
}

.ww-footer-form .wpcf7-form input[type="submit"]:hover {
	background-color: #a01827;
}

.ww-footer-form .wpcf7-response-output {
	margin: 14px 0 0;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
	font-size: 14px;
}

.ww-footer-form .wpcf7-not-valid-tip {
	color: #ff9ba4;
	font-size: 13px;
}


/* ------------------------------------------------- 2. Front page on mobile */

@media only screen and (max-width: 767px) {

	/* Sections ship with a 0px side gutter, so headings and body copy ran to
	   the very edge of the screen. */
	body.home .elementor > .e-con {
		padding-inline: 16px;
	}

	/* …except the hero slider, which is meant to bleed. */
	body.home .elementor > .e-con:has(> .elementor-widget-industrium_content_slider) {
		padding-inline: 0;
	}

	/* Desktop's 96px top+bottom on every section made the page ~20,000px tall
	   on a phone. */
	body.home .elementor > .e-con {
		padding-block: 44px;
	}

	body.home .elementor > .e-con:has(> .elementor-widget-industrium_content_slider) {
		padding-block: 0;
	}

	/* Oversized decorative numerals eat a third of the screen on a phone.
	   Elementor writes these per element as
	   `.elementor-192 .elementor-element.elementor-element-XXXXXXX .special-text`
	   (0,4,0), so the selector below has to out-rank that — do not shorten it. */
	body.home .elementor .elementor-element.elementor-widget-industrium_special_text .special-text {
		font-size: 34px;
		line-height: 1.05;
	}

	/* Stacked columns were still carrying their desktop side padding. */
	body.home .elementor .e-con > .e-con {
		padding-inline: 0;
	}

	.ww-footer-form .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.ww-footer-form .wpcf7-form input[type="submit"] {
		width: 100%;
	}
}


/* ------------------------------------------------- 3. Front page hero scrim */

/* The theme's customizer CSS washes every hero slide in 50% brand red
   (.industrium-content-slider-widget .owl-carousel.owl-theme .slider-item::before),
   which muddies the photo and drops the headline's contrast. Landing pages get
   a neutral scrim from landing.css; this does the same for the front page.
   The selector mirrors the theme's own chain so it out-ranks it. */
body.home .industrium-content-slider-widget .owl-carousel.owl-theme .slider-item::before,
body.home .content-item.slider-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-image: linear-gradient(
		100deg,
		rgba(15, 26, 33, 0.86) 0%,
		rgba(15, 26, 33, 0.70) 42%,
		rgba(15, 26, 33, 0.34) 78%,
		rgba(15, 26, 33, 0.20) 100%
	);
}

body.home .content-item.slider-item {
	position: relative;
	background-size: cover;
	background-position: center 55%;
	background-repeat: no-repeat;
}

body.home .content-item.slider-item > * {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 767px) {
	/* On a phone the slide is narrow, so the gradient's light end lands right
	   under the copy — even it out. */
	body.home .industrium-content-slider-widget .owl-carousel.owl-theme .slider-item::before,
	body.home .content-item.slider-item::before {
		background-image: linear-gradient(
			180deg,
			rgba(15, 26, 33, 0.72) 0%,
			rgba(15, 26, 33, 0.80) 100%
		);
	}
}


/* ------------------------------------------- 4. Solution card numerals (01–05) */

/* The industrium_special_text widget has no colour control, so the card badges
   in the "Giải pháp của nhà máy" section are styled here. 9cc7f69 is that
   section's Elementor id — stable, it lives in the page data. */
body.home .elementor-element-9cc7f69 .special-text {
	color: var(--ww-red);
	font-weight: 700;
	letter-spacing: .04em;
	opacity: .9;
}


/* ============================================================================
   5. Front-page section polish
   ----------------------------------------------------------------------------
   Elementor ids used as hooks (stable — they live in the page data):
     b06c186  capability columns      58dc1c2 / b1ac002  collection row
     ed6a6f8 / 63c4b62  process steps  984fd85  blog grid
   ============================================================================ */

/* ---------------------------------------- 5a. "Năng lực sản xuất" capability cards */

body.home .elementor-element-b06c186 {
	gap: 20px;
}

body.home .elementor-element-b06c186 > .e-con {
	padding: 28px 26px;
	background-color: #fff;
	border: 1px solid var(--ww-border, #e3e6ea);
	border-radius: 3px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.home .elementor-element-b06c186 > .e-con:hover {
	transform: translateY(-4px);
	border-color: rgba(191, 30, 46, 0.35);
	box-shadow: 0 14px 34px rgba(23, 38, 47, 0.10);
}

/* The copy is one paragraph: <strong>Title</strong><br>line<br>line<br>line.
   Promote the <strong> to a proper card header and give the lines breathing room. */
body.home .elementor-element-b06c186 > .e-con p {
	margin: 0;
	color: #4a5560;
	font-size: 14.5px;
	line-height: 2.05;
}

body.home .elementor-element-b06c186 > .e-con p strong {
	display: block;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ww-red);
	color: var(--ww-navy);
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: .01em;
}


/* ------------------------------------------------- 5b. Collection product cards */

body.home .elementor-element-b1ac002 {
	gap: 20px;
	align-items: stretch;
}

body.home .elementor-element-b1ac002 > .e-con {
	display: flex;
	flex-direction: column;
	/* the cloned columns carried align-items:end/start, which collapsed the
	   image widget to zero width once the card became a flex column */
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--ww-border, #e3e6ea);
	border-radius: 3px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.home .elementor-element-b1ac002 > .e-con:hover {
	transform: translateY(-4px);
	border-color: rgba(191, 30, 46, 0.35);
	box-shadow: 0 16px 38px rgba(23, 38, 47, 0.12);
}

/* Product shots arrive at assorted crops; pin them to one ratio on a neutral
   ground so the row reads as a set. */
body.home .elementor-element-b1ac002 .elementor-widget-image {
	width: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #f4f5f7;
}

body.home .elementor-element-b1ac002 .elementor-widget-image .elementor-widget-container,
body.home .elementor-element-b1ac002 .elementor-widget-image figure,
body.home .elementor-element-b1ac002 .elementor-widget-image a {
	display: block;
	width: 100%;
	margin: 0;
}

body.home .elementor-element-b1ac002 .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

body.home .elementor-element-b1ac002 > .e-con:hover .elementor-widget-image img {
	transform: scale(1.05);
}

body.home .elementor-element-b1ac002 .elementor-widget-e-paragraph,
body.home .elementor-element-b1ac002 > .e-con > .elementor-widget {
	padding-inline: 22px;
}

body.home .elementor-element-b1ac002 > .e-con p {
	margin: 0;
	padding-block: 20px 24px;
	color: #4a5560;
	font-size: 14.5px;
	line-height: 1.7;
}

body.home .elementor-element-b1ac002 > .e-con p strong {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 1.3;
}

body.home .elementor-element-b1ac002 > .e-con p strong a {
	color: var(--ww-navy);
	transition: color .2s ease;
}

body.home .elementor-element-b1ac002 > .e-con:hover p strong a {
	color: var(--ww-red);
}


/* ------------------------------------------------------- 5c. Process steps */

body.home .elementor-element-63c4b62 {
	gap: 14px;
}

body.home .elementor-element-63c4b62 > .e-con {
	padding: 22px 26px;
	background-color: #fff;
	border: 1px solid var(--ww-border, #e3e6ea);
	border-inline-start: 3px solid var(--ww-red);
	border-radius: 0 3px 3px 0;
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

body.home .elementor-element-63c4b62 > .e-con:hover {
	transform: translateX(5px);
	background-color: #fff;
	box-shadow: 0 12px 30px rgba(23, 38, 47, 0.10);
}

/* the step numeral */
body.home .elementor-element-63c4b62 .special-text {
	color: var(--ww-red);
	font-weight: 700;
	opacity: .55;
}


/* ----------------------------------------------------------- 5d. Blog cards */

/* Thumbnails came through at four different heights (203 / 240 / 303 / 229px)
   because the theme prints them unconstrained with object-fit: fill. */
body.home .elementor-element-984fd85 .blog-item .post-media-wrapper {
	overflow: hidden;
	background-color: #f4f5f7;
}

body.home .elementor-element-984fd85 .blog-item .post-media-wrapper :is(a, picture) {
	display: block;
}

body.home .elementor-element-984fd85 .blog-item .post-media-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

body.home .elementor-element-984fd85 .blog-item:hover .post-media-wrapper img {
	transform: scale(1.05);
}


@media only screen and (max-width: 767px) {
	body.home .elementor-element-b06c186 > .e-con,
	body.home .elementor-element-63c4b62 > .e-con {
		padding: 20px 18px;
	}

	body.home .elementor-element-63c4b62 > .e-con:hover {
		transform: none;
	}

	body.home .elementor-element-b1ac002 > .e-con p {
		padding-block: 16px 20px;
	}
}


/* ------------------------------------------------ 5e. Industry cards (Ngành) */

/* Same card treatment as the collection row. dfa5c17 is the row's Elementor id,
   set deliberately when the row was built so this hook stays stable. */
body.home .elementor-element-dfa5c17 {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
	padding: 0;
}

body.home .elementor-element-dfa5c17 > .e-con {
	display: flex;
	/* explicit basis per breakpoint — the cloned cards carry a width from the
	   template they came from, which otherwise wins over a flex-grow basis */
	flex: 0 1 calc(20% - 20px);
	min-width: 0;
	max-width: none;
	width: auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--ww-border, #e3e6ea);
	border-radius: 3px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.home .elementor-element-dfa5c17 > .e-con:hover {
	transform: translateY(-4px);
	border-color: rgba(191, 30, 46, 0.35);
	box-shadow: 0 16px 38px rgba(23, 38, 47, 0.12);
}

body.home .elementor-element-dfa5c17 .elementor-widget-image {
	width: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #f4f5f7;
}

body.home .elementor-element-dfa5c17 .elementor-widget-image :is(.elementor-widget-container, figure, a) {
	display: block;
	width: 100%;
	margin: 0;
}

body.home .elementor-element-dfa5c17 .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

body.home .elementor-element-dfa5c17 > .e-con:hover .elementor-widget-image img {
	transform: scale(1.05);
}

body.home .elementor-element-dfa5c17 > .e-con p {
	margin: 0;
	padding: 18px 18px 20px;
	color: #4a5560;
	font-size: 14px;
	line-height: 1.65;
}

body.home .elementor-element-dfa5c17 > .e-con p strong {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.3;
}

body.home .elementor-element-dfa5c17 > .e-con p strong a {
	color: var(--ww-navy);
	transition: color .2s ease;
}

body.home .elementor-element-dfa5c17 > .e-con:hover p strong a {
	color: var(--ww-red);
}

/* Two of the five cards were merged from a pair of industries, so their title
   carries one link per half, each pointing at its own service page. The whole
   card turning red on hover cannot show that, so underline the hovered half. */
body.home .elementor-element-dfa5c17 > .e-con p strong a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* The [Dự án →] link Ver 2 asks for on each industry.
   Elementor's escaped-html sanitiser strips class attributes from inline
   markup, so this is matched structurally: the title link sits inside
   <strong>, leaving the CTA as the paragraph's only direct-child anchor. */
body.home .elementor-element-dfa5c17 p > a:last-child {
	display: inline-block;
	margin-top: 12px;
	color: var(--ww-red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(191, 30, 46, 0.4);
	padding-bottom: 2px;
	transition: border-color .2s ease, gap .2s ease;
}

body.home .elementor-element-dfa5c17 p > a:last-child:hover {
	color: var(--ww-red-dark, #a01827);
	border-bottom-color: var(--ww-red);
}

@media only screen and (max-width: 1199px) {
	body.home .elementor-element-dfa5c17 > .e-con {
		flex: 0 1 calc(33.333% - 20px);
	}
}

@media only screen and (max-width: 767px) {
	body.home .elementor-element-dfa5c17 > .e-con {
		flex: 1 1 100%;
	}
}


/* ------------------------------- 5f. Card rows: grid instead of flex */

/* Elementor re-declares display and flex-direction on containers at its own
   breakpoints, and those declarations kept winning below ~1100px, dropping
   every card onto its own line. Grid sidesteps the fight entirely: the column
   count is stated outright and flex-direction no longer applies. */
body.home .elementor-element-dfa5c17,
body.home .elementor-element-b1ac002,
body.home .elementor-element-b06c186 {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

body.home .elementor-element-dfa5c17 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.home .elementor-element-b1ac002,
body.home .elementor-element-b06c186 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media only screen and (max-width: 1199px) {
	body.home .elementor-element-dfa5c17 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.home .elementor-element-b1ac002,
	body.home .elementor-element-b06c186 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 640px) {
	body.home .elementor-element-dfa5c17,
	body.home .elementor-element-b1ac002,
	body.home .elementor-element-b06c186 { grid-template-columns: minmax(0, 1fr); }
}

/* grid items size themselves from the track, so drop the flex bases */
body.home .elementor-element-dfa5c17 > .e-con,
body.home .elementor-element-b1ac002 > .e-con,
body.home .elementor-element-b06c186 > .e-con {
	flex: initial;
	width: auto;
	min-width: 0;
	max-width: none;
}


/* ============================================================================
   6. Front page — mobile refinements
   ----------------------------------------------------------------------------
   The page ran ~19,700px tall on a 390px screen. These rules tighten the
   biggest offenders without dropping any content.
   ============================================================================ */

@media only screen and (max-width: 767px) {

	/* --- headings: desktop sizes were set for a 1200px measure ------------- */
	body.home .elementor > .e-con h2 {
		font-size: 24px;
		line-height: 1.3;
	}

	/* the USP titles ship at 30px, which wraps to two lines on a phone */
	body.home .elementor-element-a1698ed h2 {
		font-size: 21px;
		line-height: 1.3;
	}

	/* --- USP photos: 300px wide in a 358px column, at a tall 3:2 ----------- */
	body.home .elementor-element-a1698ed .elementor-widget-image img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	/* the photo sits in a 300px block inside a 358px column — let the whole
	   chain go full width so the image spans the card */
	body.home .elementor-element-a1698ed .elementor-widget-image,
	body.home .elementor-element-a1698ed .elementor-widget-image .elementor-widget-container,
	body.home .elementor-element-a1698ed .elementor-widget-image figure,
	body.home .elementor-element-a1698ed .e-con:has(> .elementor-widget-image) {
		width: 100%;
		max-width: none;
	}

	/* --- USP cards alternate text/image on desktop; stacked on a phone that
	       left two photos butting up against each other with no copy between.
	       Force copy first for every card. --------------------------------- */
	body.home .elementor-element-d3a901b > .e-con {
		display: flex;
		flex-direction: column;
	}

	body.home .elementor-element-d3a901b > .e-con > .e-con {
		order: 1;
	}

	body.home .elementor-element-d3a901b > .e-con > .e-con:has(.elementor-widget-image) {
		order: 2;
	}

	/* --- card photos: 4:3 is tall once the cards go single-column ---------- */
	body.home .elementor-element-dfa5c17 .elementor-widget-image img,
	body.home .elementor-element-b1ac002 .elementor-widget-image img {
		aspect-ratio: 16 / 9;
	}

	/* --- process steps: the numeral sat in its own 59px full-width row ----- */
	body.home .elementor-element-63c4b62 > .e-con {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* baseline alignment pushed the numeral ~96px below the title because the
		   content block reports its baseline from its last line */
		align-items: flex-start;
		gap: 0 12px;
		padding: 16px 16px 18px;
	}

	body.home .elementor-element-63c4b62 > .e-con > .e-con:first-child {
		flex: 0 0 auto;
		/* the block carries its own align-self, which centred the numeral
		   against the whole step instead of sitting beside the step title */
		align-self: flex-start;
		width: auto;
		min-width: 28px;
		margin-top: 1px;
		padding: 0;
	}

	body.home .elementor-element-63c4b62 > .e-con > .e-con:first-child h2 {
		width: auto;
		margin: 0;
		font-size: 17px;
		line-height: 1.2;
		text-align: start;
	}

	body.home .elementor-element-63c4b62 > .e-con > .e-con:last-child {
		flex: 1 1 200px;
		min-width: 0;
		padding: 0;
	}

	body.home .elementor-element-63c4b62 > .e-con > .e-con:last-child h2 {
		margin-bottom: 4px;
		font-size: 16px;
	}

	/* --- solution cards ran together with no separation ------------------- */
	body.home .elementor-element-9cc7f69 .e-con > .e-con + .e-con {
		margin-top: 22px;
		padding-top: 22px;
		border-top: 1px solid var(--ww-border, #e3e6ea);
	}

	/* --- card copy: slightly tighter so cards lose a line or two ---------- */
	body.home .elementor-element-dfa5c17 > .e-con p,
	body.home .elementor-element-b1ac002 > .e-con p {
		padding: 14px 16px 16px;
		font-size: 13.5px;
		line-height: 1.6;
	}

	body.home .elementor-element-b06c186 > .e-con p {
		line-height: 1.85;
	}
}


/* ============================================================
   7. Shop — headings and empty price
   The catalogue imported from noithatvanphong.pro quotes no prices, so
   WooCommerce still prints its price element with nothing inside it.
   ============================================================ */

.ww-shop-heading {
	margin-bottom: 28px;
}

.ww-shop-heading__title {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	color: var(--ww-navy, #17262f);
}

.ww-shop-heading__text {
	max-width: 760px;
	margin-top: 10px;
	color: #4a5560;
	font-size: 15px;
	line-height: 1.7;
}

.ww-shop-heading__text p:last-child {
	margin-bottom: 0;
}

.woocommerce div.product .summary > h1.product-title {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.25;
}

/* an empty <p class="price"><span class="price_wrapper"></span></p> */
.woocommerce div.product p.price:has(> .price_wrapper:empty),
.woocommerce ul.products li.product .price:has(> .price_wrapper:empty) {
	display: none;
}

@media only screen and (max-width: 767px) {
	.ww-shop-heading__title {
		font-size: 24px;
	}

	.woocommerce div.product .summary > h1.product-title {
		font-size: 22px;
	}
}