/*
Theme Name:        Sendesign Child
Template:          nectar-blocks-theme
Version:           1.0.0
Requires at least: 6.2
Requires PHP:      7.4
Description:       Child theme of Nectarblocks for sendesign.vn. Holds site-specific design overrides and template customisations so they survive parent-theme updates.
Author:            Sendesign
Text Domain:       sendesign-child
Domain Path:       /languages
*/

/* =========================================================================
   Site-specific design overrides for sendesign.vn.
   Shortcode-critical CSS (client marquee, team grid, job list, dark
   sections) lives with its shortcodes in the sendesign-shortcodes mu-plugin
   so those sections keep their styling regardless of the active theme.
   This file is the home for everything else — add your customisations below.
   ========================================================================= */

:root {
	--sd-brown: #572b12;
	--sd-cream: #faf0dd;
	--sd-dark: #1c140c;
	--sd-light: #f7f1e8;
}

/* -------------------------------------------------------------------------
   Fluid root font-size — the backbone of the original sendesign.vn layout.
   Every rem-based size (Global Typography, section padding, block spacing)
   scales against this viewport-relative root, so the whole design grows and
   shrinks proportionally instead of jumping at breakpoints. Values are taken
   verbatim from the source stylesheet; the 1801–1999px desktop gap in the
   original is closed here so common 1920px screens stay consistent.
   ------------------------------------------------------------------------- */
html {
	font-size: 0.86vw;
}

/* base desktop */
@media (max-width: 374px) {
	html {
		font-size: 3.6vw;
	}
}

@media (min-width: 375px) and (max-width: 767px) {
	html {
		font-size: 4.3vw;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	html {
		font-size: 1.8vw;
	}
}

@media (min-width: 1200px) and (max-width: 1999px) {
	html {
		font-size: 0.86vw;
	}
}

@media (min-width: 2000px) {
	html {
		font-size: 0.8vw;
	}
}

/* landscape phones/tablets get a smaller root so lines don't overflow */
@media (min-width: 375px) and (max-width: 767px) and (orientation: landscape) {
	html {
		font-size: 2.4vw;
	}
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
	html {
		font-size: 1.56vw;
	}
}

/* The WordPress admin bar is px-based; keep it unaffected by the fluid root. */
#wpadminbar {
	font-size: 13px;
}

body {
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The parent theme forces "Source Serif Pro" on single-post article content
   (.single-post .post-content), which overrode the site body font on the 116
   Kiến thức/Tin tức posts. Keep article body text on SVN-CoFo Gothic like the
   rest of the site; headings keep their own SVN-Albra Grotesk rule. */
.single-post .post-content,
.single-post .post-content p,
.single-post .post-content li,
.single-post .post-content blockquote,
.single-post .post-content td {
	font-family: "SVN-Albra Grotesk", sans-serif;
}

/* The parent theme also prints the featured image again at the top of
   .post-content (a <span class="post-featured-img">). The custom "post title"
   global section already shows the featured image, so hide this duplicate.
   The global section's image uses .wp-block-post-featured-image, so it stays. */
.single-post .post-content>.post-featured-img,
.single-post .post-featured-img {
	display: none;
}

/* Blog article body typography. Force the article-body headings (h2/h3) and body
   text to the requested reading sizes. Scoped to `.nectar_template_single__post` —
   the BLOG single template ONLY, never `.nectar_template_single__du_an`, so project
   headings keep their own sizes. `:not(.nectar-blocks-post-grid *)` keeps it off the
   related-posts grid (e.g. the "Bài viết khác" section) — NOT `.nectar-blocks-column`,
   because on prod the article body itself is wrapped in a column. !important beats
   Nectar's per-block size. */
.nectar_template_single__post h2.nectar-blocks-text:not(.nectar-blocks-post-grid *),
.nectar_template_single__post .nectar-blocks-text.nectar-font-h2:not(.nectar-blocks-post-grid *) {
	font-size: 3rem !important;
	text-transform: none !important;
}

.nectar_template_single__post h3.nectar-blocks-text:not(.nectar-blocks-post-grid *),
.nectar_template_single__post .nectar-blocks-text.nectar-font-h3:not(.nectar-blocks-post-grid *) {
	font-size: 2.5rem !important;
	text-transform: none !important;
}

/* Body copy. Exclude headings (nectar-font-h*), byline labels (nectar-font-label)
   and related-posts grid content — the article body on prod is wrapped in a
   .nectar-blocks-column, so we exclude the post-grid instead of all columns.
   On prod the block text colour is locked via -webkit-text-fill-color, so plain
   `color` alone doesn't win — set both. Root font-size is 12px (rem × 12). */
.nectar_template_single__post p.nectar-blocks-text:not([class*="nectar-font-h"]):not(.nectar-font-label):not(.nectar-blocks-post-grid *),
.nectar_template_single__post .nectar-blocks-text li:not(.nectar-font-label):not(.nectar-blocks-post-grid *) {
	font-size: 1.5rem !important;
	color: #150a04 !important;
	-webkit-text-fill-color: #150a04 !important;
}

@media (max-width: 1199px) {

	/* tablet */
	.nectar_template_single__post h2.nectar-blocks-text:not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text.nectar-font-h2:not(.nectar-blocks-post-grid *) {
		font-size: 4rem !important;
	}

	.nectar_template_single__post h3.nectar-blocks-text:not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text.nectar-font-h3:not(.nectar-blocks-post-grid *) {
		font-size: 3rem !important;
	}

	.nectar_template_single__post p.nectar-blocks-text:not([class*="nectar-font-h"]):not(.nectar-font-label):not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text li:not(.nectar-font-label):not(.nectar-blocks-post-grid *) {
		font-size: 1.75rem !important; /* 21px — tablet = mobile theo yêu cầu */
	}
}

@media (max-width: 767px) {

	/* mobile */
	.nectar_template_single__post h2.nectar-blocks-text:not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text.nectar-font-h2:not(.nectar-blocks-post-grid *) {
		font-size: 3rem !important;
	}

	.nectar_template_single__post h3.nectar-blocks-text:not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text.nectar-font-h3:not(.nectar-blocks-post-grid *) {
		font-size: 2.5rem !important;
	}

	.nectar_template_single__post p.nectar-blocks-text:not([class*="nectar-font-h"]):not(.nectar-font-label):not(.nectar-blocks-post-grid *),
	.nectar_template_single__post .nectar-blocks-text li:not(.nectar-font-label):not(.nectar-blocks-post-grid *) {
		font-size: 1.75rem !important;
	}
}

/* Article-body spacing (blog only): images had no margin and headings had no top
   margin, so they butted against the surrounding text. Give them breathing room.
   rem values track the fluid root, so the gaps scale down on tablet/mobile too.
   Scoped like the type rules — never the template's own columns or the du_an body. */
.nectar_template_single__post .nectar-blocks-image:not(.nectar-blocks-column *) {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}

.nectar_template_single__post .nectar-blocks-text.nectar-font-h2:not(.nectar-blocks-column *),
.nectar_template_single__post .nectar-blocks-text.nectar-font-h3:not(.nectar-blocks-column *) {
	margin-top: 3rem !important;
}

/* List items in the article body sat ~23px apart — too airy for the bullet
   lists (e.g. the "Key takeaways" list). Tighten the gap between <li>s. Scoped
   like the type rules: never the related post-grid ("Bài viết khác"). */
.nectar_template_single__post .nectar-blocks-text li:not(.nectar-font-label):not(.nectar-blocks-post-grid *),
.nectar_template_single__post .wp-block-list li:not(.nectar-blocks-post-grid *) {
	margin-bottom: 1rem !important;
}

/* The related-section heading ("Bài viết khác" / "Các dự án khác") lives in the row
   that holds the related post-grid on both single templates. Its size is a per-block
   Size setting that happens to differ between them (single-post inherits the H2
   preset ≈ 72px; du_an is set to 48px), so the same Font Style looked different.
   Pin it to one size on both templates. Change the value here to taste. */
.nectar_template_single__post .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2,
.nectar_template_single__du_an .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2 {
	font-size: 6rem !important;
}

@media (max-width: 1199px) {

	/* tablet */
	.nectar_template_single__post .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2,
	.nectar_template_single__du_an .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2 {
		font-size: 4rem !important;
	}
}

@media (max-width: 767px) {

	/* mobile */
	.nectar_template_single__post .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2,
	.nectar_template_single__du_an .nectar-blocks-row:has(.nectar-blocks-post-grid) .nectar-blocks-text.nectar-font-h2 {
		font-size: 3.5rem !important;
	}
}

/* Match the source's spacious single-column reading layout: a constrained,
   centred column so lines stay ~65–70 characters (rem width scales with the
   fluid root, keeping the measure constant at any viewport), plus generous
   vertical rhythm around images and headings. */
/* The theme constrains single-post content to a narrow (~800px) column, so a
   plain 60% measured against that came out smaller. Make the reading column an
   explicit 60% of the viewport (60vw), centred with a symmetric break-out so
   it works regardless of the wrapper's own width. */
.single-post .post-content .nectar-blocks-text,
.single-post .post-content .nectar-blocks-image {
	width: 50vw;
	max-width: 50vw;
	margin-left: calc(50% - 25vw);
	margin-right: calc(50% - 25vw);
}

/* tablet (768–1199): full width with a 2.5rem gutter each side (the narrow
   50vw reading column is desktop-only; on tablet it reads as too pinched) */
@media (min-width: 768px) and (max-width: 1199px) {

	.single-post .post-content .nectar-blocks-text,
	.single-post .post-content .nectar-blocks-image {
		width: auto;
		max-width: none;
		margin-left: calc(50% - 50vw + 2.5rem);
		margin-right: calc(50% - 50vw + 2.5rem);
	}
}

/* mobile: full width with a 1rem gutter each side (break out to the viewport
   edge, then inset 1rem — independent of any wrapper padding) */
@media (max-width: 767px) {

	.single-post .post-content .nectar-blocks-text,
	.single-post .post-content .nectar-blocks-image {
		width: auto;
		max-width: none;
		margin-left: calc(50% - 50vw + 1rem);
		margin-right: calc(50% - 50vw + 1rem);
	}
}

.single-post .post-content .nectar-blocks-image {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.single-post .post-content h2,
.single-post .post-content .nectar-font-h2 {
	margin-top: 2.75rem;
	margin-bottom: 1.25rem;
}

/* The user's "post title" global section (#4208, hooked before content) uses
   core blocks that render in the default black/generic style. Restyle them to
   the source article header: brand brown, Albra title, uppercase breadcrumb
   and meta. Scoped to single posts so it can't touch other global sections. */
.single-post .nectar_hook_before_content_global_section .wp-block-post-title {
	font-family: "SVN-Albra Grotesk", serif !important;
	color: #572b12;
	text-transform: uppercase;
}

.single-post .nectar_hook_before_content_global_section .wp-block-breadcrumbs,
.single-post .nectar_hook_before_content_global_section .wp-block-breadcrumbs a,
.single-post .nectar_hook_before_content_global_section .wp-block-post-author-name,
.single-post .nectar_hook_before_content_global_section .wp-block-post-author-name a,
.single-post .nectar_hook_before_content_global_section .wp-block-post-date,
.single-post .nectar_hook_before_content_global_section .wp-block-post-date time {
	color: #572b12;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
}

/* ---- Breadcrumbs block — global typography (all pages) ---- */
.wp-block-breadcrumbs,
.wp-block-breadcrumbs a {
	font-family: "SVN-Albra Grotesk", serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.33333;
	letter-spacing: 0.72px;
	text-transform: uppercase;
}

/* keep the single-post header breadcrumb on the same spec */
.single-post .nectar_hook_before_content_global_section .wp-block-breadcrumbs,
.single-post .nectar_hook_before_content_global_section .wp-block-breadcrumbs a {
	letter-spacing: 0.72px;
}

/* mobile: the title's desktop size is far too large on a phone (one word per
   line) — cap it so it reads as a headline, not a wall of letters. */
@media (max-width: 767px) {
	.single-post .nectar_hook_before_content_global_section .wp-block-post-title {
		font-size: 2rem !important;
		line-height: 1.12 !important;
	}

	.single-post .nectar_hook_before_content_global_section .wp-block-breadcrumbs {
		font-size: 0.75rem !important;
	}
}

/* ---- reveal on scroll: slide up (4rem) + fade — the Nectar "Slide / From
   Bottom" preset (1s, ease-in-out-cubic). Applied to image & text blocks in
   single blog posts and single projects (du_an). The hidden start state lives
   on .sd-reveal, which JS adds only to below-the-fold elements, so
   above-the-fold content (incl. the LCP hero) is never hidden, and nothing is
   stuck hidden if JS is unavailable. */
/* Body-class scope raises specificity above Nectar's own
   `.nectar-blocks-text { transition: background-color/color }`, which would
   otherwise drop the opacity/transform transition and make the reveal snap. */
.single-post .sd-reveal,
.single-du_an .sd-reveal {
	opacity: 0;
	transform: translateY(4rem);
	transition: opacity 1s cubic-bezier(.645, .045, .355, 1),
		transform 1s cubic-bezier(.645, .045, .355, 1);
	will-change: opacity, transform;
}

.single-post .sd-reveal.sd-in,
.single-du_an .sd-reveal.sd-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.single-post .sd-reveal,
	.single-du_an .sd-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Utility: full-bleed minus a fixed 2.5rem gutter on each side.
   Add the class "sd-inset" to a Row block (Advanced → Additional CSS class)
   to make it span the viewport width minus exactly 2.5rem left and right —
   the "framed banner" look that plain margin/padding can't achieve because
   Full Width breaks out to the edges and Default snaps to the theme width. */
.sd-inset {
	margin-left: calc(50% - 50vw + 2.5rem) !important;
	margin-right: calc(50% - 50vw + 2.5rem) !important;
	max-width: none !important;
	width: auto !important;
}

/* tablet + mobile (≤1199px): tighten the framed gutter to 1rem each side —
   2.5rem is too wide on small screens (it scales with the fluid root). Desktop
   (≥1200px) keeps the 2.5rem above. */
@media (max-width: 1199px) {
	.sd-inset {
		margin-left: calc(50% - 50vw + 1rem) !important;
		margin-right: calc(50% - 50vw + 1rem) !important;
	}
}

/* variant if you ever want a different gutter */
.sd-inset-1 {
	margin-left: calc(50% - 50vw + 1rem) !important;
	margin-right: calc(50% - 50vw + 1rem) !important;
	max-width: none !important;
	width: auto !important;
}

/* Utility: dark gradient overlay on a Row's background image.
   Add the class "sd-overlay" to a Row (Advanced → Additional CSS class) that
   has a background image. The overlay sits ON the background image but UNDER
   the row content (bg layers are absolute + behind the in-flow content, so the
   ::after over them stays behind the columns/text). */
.sd-overlay .nectar__bg-layers {
	/* contain the overlay's stacking inside the background layer so it can sit
	   above the image (below) but never above the row's content. */
	isolation: isolate;
}

.sd-overlay .nectar__bg-layers::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Links inside body copy pick up the brand brown with a subtle underline. */
.nectar-blocks-text a:not(.nectar-blocks-button__link) {
	color: #f7f1e9;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: opacity .25s ease;
}

.nectar-blocks-text a:not(.nectar-blocks-button__link):hover {
	opacity: .65;
}

/* Image hover-zoom disabled per request — images stay static on hover. */

/* Pill buttons matching the source outline style. */
.nectar-blocks-button__link {
	transition: background-color .3s ease, color .3s ease;
}

/* ===========================================================================
   "Phẩm chất con người" — hover-expand columns (accordion).
   Usage: add the CSS class  sd-values  to a Nectar Row (Advanced → Additional
   CSS class) that holds 4 equal Columns; each Column has a heading (title) and
   a paragraph (description). Rest state shows only the titles at the bottom;
   hovering a column makes it grow and fades its description in. Textures are
   set per column at the bottom of this block — swap those URLs for the final
   material images. Everything is targeted structurally (nth-child / element),
   so no extra classes are needed on the inner blocks.
   =========================================================================== */
.sd-values-title {
	font-family: "SVN-Albra Grotesk", serif;
	color: #572b12;
	text-transform: uppercase;
	text-align: center;
	font-size: 3rem;
	line-height: 1.1;
	letter-spacing: .02em;
	margin: 0 0 1.6rem;
}

.sd-values {
	gap: 6px !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	/* horizontal gutter comes from the shared .sd-inset utility on this same row */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.sd-values>.nectar-blocks-column {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	position: relative;
	overflow: hidden;
	min-height: 62vh;
	display: flex !important;
	flex-direction: column !important;
	transition: flex-grow .6s cubic-bezier(.25, .8, .25, 1);
	will-change: flex-grow;
}

/* Fill the whole column with the builder background image at ANY height. The
   Nectar bg layers live inside .__wrapper, so the wrapper (or the plain inner
   for image-less columns) must stretch to the full column height — otherwise a
   taller/stretched column (e.g. two-up on tablet) reveals the bg colour/old
   texture below the image. Also keeps the content bottom-aligned in both
   structures. */
.sd-values>.nectar-blocks-column>.nectar-blocks-column__wrapper,
.sd-values>.nectar-blocks-column>.nectar-blocks-column__inner {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-height: 0;
}

.sd-values .nectar-blocks-column__wrapper {
	display: flex !important;
	flex-direction: column !important;
}

.sd-values .nectar-blocks-column__wrapper>.nectar-blocks-column__inner {
	flex: 1 1 auto !important;
	min-height: 0;
}

/* Nectar forces flex-basis:auto !important on columns below 1024px with a
   higher-specificity selector; match that specificity (and load later) so the
   equal-width flex sizing still wins in the tablet range. */
.nectar-blocks-row__inner.sd-values>.nectar-blocks-column {
	flex: 1 1 0 !important;
}

.sd-values>.nectar-blocks-column:hover {
	flex-grow: 3.4 !important;
}

/* readability shade over any texture. Sits ABOVE the background image (Nectar's
   bg layers are z-index 0–1) but BELOW the text (z-index 5 below). */
.sd-values>.nectar-blocks-column::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	z-index: 2;
	pointer-events: none;
}

/* content sits at the bottom, above the shade (direct-child structure — used
   when the column has no builder background image) */
.sd-values>.nectar-blocks-column>.nectar-blocks-column__inner {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	height: 100%;
	padding: 1.6rem !important;
}

/* Keep the text ABOVE the readability shade in BOTH structures. When you add a
   background image to a column, Nectar nests the content inside an extra
   .nectar-blocks-column__wrapper, so the inner is no longer a direct child —
   this descendant rule (and a z-index above the shade) covers both cases. */
.sd-values .nectar-blocks-column .nectar-blocks-column__inner {
	position: relative;
	z-index: 5;
}

/* FIX overlay đè lên chữ: khi column có ảnh nền, Nectar bọc nội dung trong
   .nectar-blocks-column__wrapper (stacking context riêng, z-index:0). Scrim
   ::before ở cấp column (z-index:2) khi đó paint ĐÈ LÊN cả wrapper — gồm cả
   text — làm chữ trắng bị xám/mờ. Cách sửa: nâng wrapper lên trên ::before, và
   đặt scrim BÊN TRONG wrapper (trên ảnh z-index<0, dưới text z-index:5). */
.sd-values .nectar-blocks-column__wrapper {
	position: relative;
	z-index: 3 !important; /* thắng inline/scope z-index:0 của Nectar; trên ::before (z:2) → text không bị scrim ngoài phủ */
}
/* bỏ luôn scrim ::before cấp column ở ô có ảnh (đã có scrim trong wrapper) để chắc chắn không phủ chữ */
.sd-values > .nectar-blocks-column:has(.nectar-blocks-column__wrapper)::before {
	content: none;
}
.sd-values .nectar-blocks-column__wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2; /* trên bg-layers, dưới column__inner (z-index:5) */
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.62) 100%);
}

/* title — always visible. Colour is only a DEFAULT (no !important) so the
   per-block colour you pick in the builder wins. */
.sd-values .nectar-blocks-column h3.nectar-blocks-text {
	color: #fff;
	font-size: 2rem;
	line-height: 1.1;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* description — collapsed until the column is hovered. Colour is a default
   only (no !important) so a builder-set colour overrides it. */
.sd-values .nectar-blocks-column p.nectar-blocks-text {
	color: #f3efe7;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	transition: max-height .6s ease, opacity .5s ease .1s, margin-top .5s ease;
}

.sd-values .nectar-blocks-column:hover p.nectar-blocks-text {
	max-height: 460px;
	opacity: 1;
	margin-top: .9rem;
}

/* Column background images are set per-column in the builder (each column's
   Background → Image). Deliberately NO CSS placeholder textures here: a CSS
   background on the column shows THROUGH as a second, "old" background wherever
   the builder image doesn't reach (this caused the double-background on tablet). */

/* Desktop (≥1200px) keeps the four-up hover-expand layout (base rules above).
   The left/right gutter (2.5rem desktop, 1rem tablet+mobile) is handled by the
   shared .sd-inset utility on this same row, so it isn't repeated here. */
@media (min-width: 1200px) {

	/* remove the 6px inter-column gap so the panels sit flush (no white lines) */
	.sd-values {
		gap: 0 !important;
	}
}

/* tablet (768–1199): two columns per row, NO hover effect — hovering no longer
   grows a column and every description is shown. The combined-class selector +
   explicit width/max-width force 50% past Nectar's own <1024 column sizing. */
@media (min-width: 768px) and (max-width: 1199px) {
	.sd-values.nectar-blocks-row__inner {
		/* Nectar switches the row to flex-direction:column at ≤1024px (stacks the
		   columns). Force it back to a wrapping row so two columns sit per line. */
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}

	.sd-values.nectar-blocks-row__inner>.nectar-blocks-column {
		flex: 0 0 calc(50% - 3px) !important;
		width: calc(50% - 3px) !important;
		max-width: calc(50% - 3px) !important;
		min-width: 0 !important;
		/* two per row, allowing for the 6px gap */
		min-height: 46vh;
	}

	.sd-values>.nectar-blocks-column:hover {
		flex-grow: 0 !important;
	}

	.sd-values .nectar-blocks-column p.nectar-blocks-text {
		max-height: none;
		opacity: 1;
		margin-top: .9rem;
	}
}

/* mobile (≤767): single column, every description shown */
@media (max-width: 767px) {
	.sd-values.nectar-blocks-row__inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	.sd-values.nectar-blocks-row__inner>.nectar-blocks-column {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 40vh;
	}

	.sd-values>.nectar-blocks-column:hover {
		flex-grow: 1 !important;
	}

	.sd-values .nectar-blocks-column p.nectar-blocks-text {
		max-height: none;
		opacity: 1;
		margin-top: .8rem;
	}
}

/* ---- Footer SENDESIGN wordmark ----------------------------------------
   The uploaded SVG (SENDESIGN_Logo-Display_White.svg, wp-image-4888) is a
   white <img>, so its colour can't be changed with `fill`. Use the SVG as a
   CSS mask and paint the shape in cream (#f7f1e9), full-width like the source
   (sendesign.vn uses .footer__mid-logo svg{width:100%;fill:var(--text-light)}).
   Nectar's reveal-on-scroll on the wrapper still applies. */
.nectar-blocks-image__inner:has(> img.wp-image-4888) {
	width: 100%;
	aspect-ratio: 800 / 115.27;
	background-color: #f7f1e9;
	-webkit-mask: url("/wp-content/uploads/2026/08/SENDESIGN_Logo-Display_White.svg") no-repeat center / contain;
	mask: url("/wp-content/uploads/2026/08/SENDESIGN_Logo-Display_White.svg") no-repeat center / contain;
}

.nectar-blocks-image__inner:has(> img.wp-image-4888)>img {
	width: 100%;
	height: 100%;
	display: block;
	visibility: hidden;
}

/* ---- utility: .sd-point — a small dot before the text (colour follows text) ---- */
.sd-point::before {
	content: "";
	display: inline-block;
	width: .42em;
	height: .42em;
	border-radius: 50%;
	background: currentColor;
	margin-right: .7em;
	vertical-align: middle;
	position: relative;
	top: -.06em;
}

/* ============================================================
   Trang chi tiết VỊ TRÍ TUYỂN DỤNG — thân nội dung style GIỐNG thân bài blog.
   Scope tự động .nectar_template_single__tuyen_dung (Nectar tự thêm) — không cần class.
   Heading = Nectar Text (.nectar-font-h2/h3); danh sách = core (.wp-block-list).
   h2 36px / h3 30px (không in hoa); body 20px #150a04; giãn mục list (hết chồng dòng).
   ============================================================ */
.nectar_template_single__tuyen_dung .nectar-blocks-text.nectar-font-h2{
	font-size:36px !important;line-height:1.15 !important;text-transform:none !important;
}
.nectar_template_single__tuyen_dung .nectar-blocks-text.nectar-font-h3{
	font-size:30px !important;line-height:1.2 !important;text-transform:none !important;
}
.nectar_template_single__tuyen_dung .wp-block-list li,
.nectar_template_single__tuyen_dung .nectar-blocks-text li,
.nectar_template_single__tuyen_dung .nectar-blocks-text p:not([class*="nectar-font-h"]){
	font-size:20px !important;color:#150a04 !important;line-height:1.65 !important;
}
.nectar_template_single__tuyen_dung .wp-block-list li,
.nectar_template_single__tuyen_dung .nectar-blocks-text li{margin:0 0 .6em !important}
.nectar_template_single__tuyen_dung .wp-block-list li:last-child,
.nectar_template_single__tuyen_dung .nectar-blocks-text li:last-child{margin-bottom:0 !important}
@media (max-width:767px){
	.nectar_template_single__tuyen_dung .nectar-blocks-text.nectar-font-h2{font-size:28px !important}
	.nectar_template_single__tuyen_dung .nectar-blocks-text.nectar-font-h3{font-size:24px !important}
	.nectar_template_single__tuyen_dung .wp-block-list li,
	.nectar_template_single__tuyen_dung .nectar-blocks-text li{font-size:18px !important}
}

/* =========================================================================
 * Link trong thân bài (single post / tuyển dụng): mặc định đang là màu kem
 * gần trắng (#F7F1E9) → chìm vào nền, nhiều chỗ không đọc được. Đổi sang nâu
 * đậm thương hiệu + in đậm, giữ gạch chân để vẫn nhận ra là link. Chỉ nhắm
 * link trong khối chữ (.nectar-blocks-text) nên nav / breadcrumb / nút không
 * bị ảnh hưởng.
 * ========================================================================= */
.nectar_template_single__post .nectar-blocks-text a,
.nectar_template_single__tuyen_dung .nectar-blocks-text a{
	color:#572b12 !important;
	font-weight:700 !important;
	text-decoration:underline;
	text-underline-offset:2px;
}
.nectar_template_single__post .nectar-blocks-text a:hover,
.nectar_template_single__tuyen_dung .nectar-blocks-text a:hover{
	color:#3a1c0b !important;
}

/* =========================================================================
 * Blog single: chuẩn hoá list core / bảng / caption ảnh cho KHỚP với <p> thân
 * bài — cùng cỡ chữ responsive (root 12px): desktop 1.5rem = 18px, còn lại
 * (tablet + mobile ≤1199px) 1.75rem = 21px — và cùng màu #150a04. Chỉ nhắm block
 * core (.wp-block-list / .wp-block-table / .wp-element-caption) nên breadcrumb
 * (ol không class) và heading không đụng. Không set font-weight để chữ in đậm
 * trong bảng/list vẫn giữ đậm.
 * ========================================================================= */
.nectar_template_single__post .wp-block-list li,
.nectar_template_single__post .wp-block-table td,
.nectar_template_single__post .wp-block-table th,
.nectar_template_single__post figcaption.wp-element-caption{
	font-size:1.5rem !important;
	color:#150a04 !important;
	-webkit-text-fill-color:#150a04 !important;
}
@media (max-width:1199px){
	.nectar_template_single__post .wp-block-list li,
	.nectar_template_single__post .wp-block-table td,
	.nectar_template_single__post .wp-block-table th,
	.nectar_template_single__post figcaption.wp-element-caption{
		font-size:1.75rem !important;
	}
}

/* Blog single: giãn cách giữa các <li> (mặc định ~0.7em hơi sát). */
.nectar_template_single__post .wp-block-list li,
.nectar_template_single__post .nectar-blocks-text li{
	margin-bottom:1.1em !important;
}
.nectar_template_single__post .wp-block-list li:last-child,
.nectar_template_single__post .nectar-blocks-text li:last-child{
	margin-bottom:0 !important;
}