/* ==========================================================================
   JunGo - base styles dùng chung cho mọi widget
   Token lấy từ bản HTML (_html, tailwind.config + class Tailwind đang dùng).
   Override được trong Giao diện > Tuỳ biến > CSS bổ sung (CSS của WordPress, chạy với Elementor Free), ví dụ:
   :root { --jg-mango: #F5B00D; }. (Ô "Custom CSS" trong Site Settings của Elementor là tính năng Pro.)
   Font: chỉ đọc biến (--jg-font-display / --jg-font / --jg-font-mono), giá trị do inc/fonts.php in ra.
   ========================================================================== */

:root {
	/* Thương hiệu (tailwind.config) */
	--jg-mango: #F5B00D;
	--jg-mango-hover: #E09E00;
	--jg-leaf: #0F3D23;
	--jg-forest: #092616;
	--jg-growth: #16A34A;
	--jg-surface: #F6F8F7;
	--jg-ink: #0F172A;
	--jg-white: #FFFFFF;

	/* Trung tính (slate của Tailwind dùng trong bản HTML) */
	--jg-text: #475569;      /* slate-600: đoạn văn */
	--jg-text-strong: #334155; /* slate-700: menu, link */
	--jg-muted: #64748B;     /* slate-500: chú thích */
	--jg-subtle: #94A3B8;    /* slate-400 */
	--jg-line: #E2E8F0;      /* slate-200: viền thẻ */
	--jg-line-soft: #F1F5F9; /* slate-100 */
	--jg-amber-text: #92400E; /* amber-800: link "Dự toán" */

	/* Font (giá trị thật do inc/fonts.php ghi đè ở html:root) */
	--jg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--jg-font-display: "Be Vietnam Pro", var(--jg-font);
	--jg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Layout */
	--jg-container: 1360px;
	--jg-gutter: 24px;

	/* Bo góc (Tailwind: xl / 2xl / 3xl / full) */
	--jg-radius-sm: 12px;
	--jg-radius: 16px;
	--jg-radius-lg: 24px;
	--jg-radius-xl: 32px;

	/* Bóng (card-hover / pmax-card của bản HTML) */
	--jg-shadow-card: 0 1px 2px 0 rgba(15, 23, 42, .03), 0 0 0 1px rgba(255, 255, 255, .85) inset;
	--jg-shadow-card-hover: 0 24px 48px -16px rgba(9, 38, 22, .13), 0 0 0 1px rgba(22, 163, 74, .2) inset;
	--jg-shadow-pop: 0 25px 50px -12px rgba(15, 23, 42, .25);

	--jg-ease: cubic-bezier(.22, 1, .36, 1);

}

/* Tiêu đề tiếng Việt: line-height theo bản HTML (h1 1.24, h2 1.28) để dấu không chạm dòng trên */
[class*="elementor-widget-jg-"] :is(h1, h2, h3, h4) {
	font-family: var(--jg-font-display);
	letter-spacing: -.015em;
}

/* Bản HTML chỉ cân dòng (text-wrap: balance) cho h1, h2 */
[class*="elementor-widget-jg-"] :is(h1, h2) {
	text-wrap: balance;
}

[class*="elementor-widget-jg-"] {
	font-family: var(--jg-font);
}

[class*="elementor-widget-jg-"] *,
[class*="elementor-widget-jg-"] *::before,
[class*="elementor-widget-jg-"] *::after {
	box-sizing: border-box;
}

[class*="elementor-widget-jg-"] img {
	max-width: 100%;
	height: auto;
}

.jg-icon {
	width: 1em;
	height: 1em;
	display: block;
	flex: none;
}

/* Chữ nhấn trong heading: *chữ* */
.jg-hl {
	color: var(--jg-leaf);
}

.jg-serif {
	font-family: var(--jg-font-display);
	font-style: italic;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Nút pill (bản HTML): chữ font tiêu đề đậm, vòng tròn mango có mũi tên ↗ bên phải.
   Kiểu: primary (leaf) · forest · mango · light (trắng viền) · soft (nền surface).
   Màu chỉnh qua biến --jg-btn-* (control Style của widget ghi vào biến).
   ------------------------------------------------------------------------ */
.jg-btn {
	--jg-btn-bg: var(--jg-leaf);
	--jg-btn-bg-hover: var(--jg-forest);
	--jg-btn-color: var(--jg-white);
	--jg-btn-color-hover: var(--jg-btn-color);
	--jg-btn-border: transparent;
	--jg-btn-border-hover: var(--jg-btn-border);
	--jg-btn-icon-bg: var(--jg-mango);
	--jg-btn-icon-color: var(--jg-forest);
	--jg-btn-icon: 32px;
	--jg-btn-shadow: 0 12px 24px -8px rgba(15, 61, 35, .35);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 24px;
	border: 1px solid var(--jg-btn-border);
	border-radius: 999px;
	background: var(--jg-btn-bg);
	color: var(--jg-btn-color);
	box-shadow: var(--jg-btn-shadow);
	font-family: var(--jg-font-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s var(--jg-ease), color .3s var(--jg-ease), border-color .3s var(--jg-ease), transform .2s var(--jg-ease);
}

.jg-btn:hover,
.jg-btn:focus-visible {
	background: var(--jg-btn-bg-hover);
	border-color: var(--jg-btn-border-hover);
	color: var(--jg-btn-color-hover);
}

.jg-btn:active {
	transform: scale(.98);
}

.jg-btn:focus-visible {
	outline: 2px solid var(--jg-mango);
	outline-offset: 3px;
}

/* Có vòng tròn icon: padding phải nhỏ để icon sát mép như bản HTML (pr-2.5). */
.jg-btn.has-icon {
	padding: 10px 10px 10px 24px;
}

.jg-btn__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jg-btn-icon);
	height: var(--jg-btn-icon);
	border-radius: 50%;
	background: var(--jg-btn-icon-bg);
	color: var(--jg-btn-icon-color);
	transition: transform .3s var(--jg-ease);
}

.jg-btn__icon .jg-icon {
	width: 60%;
	height: 60%;
}

.jg-btn:hover .jg-btn__icon,
.jg-btn:focus-visible .jg-btn__icon {
	transform: rotate(45deg); /* mũi tên ↗ xoay thành → khi hover */
}

/* Vệt sáng lướt qua khi hover (btn-shimmer của bản HTML) */
.jg-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	z-index: -1;
	width: 65%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
	transform: skewX(-20deg);
	transition: left .65s var(--jg-ease);
	pointer-events: none;
}

.jg-btn:hover::after {
	left: 140%;
}

.jg-btn--forest {
	--jg-btn-bg: var(--jg-forest);
	--jg-btn-bg-hover: var(--jg-leaf);
	--jg-btn-shadow: 0 12px 24px -8px rgba(9, 38, 22, .35);
}

.jg-btn--mango {
	--jg-btn-bg: var(--jg-mango);
	--jg-btn-bg-hover: #FBBF24;
	--jg-btn-color: var(--jg-forest);
	--jg-btn-icon-bg: var(--jg-forest);
	--jg-btn-icon-color: var(--jg-mango);
	--jg-btn-shadow: 0 12px 24px -10px rgba(245, 176, 13, .55);
	font-weight: 800;
}

.jg-btn--light {
	--jg-btn-bg: var(--jg-white);
	--jg-btn-bg-hover: var(--jg-white);
	--jg-btn-color: #1E293B;
	--jg-btn-color-hover: var(--jg-leaf);
	--jg-btn-border: #CBD5E1;
	--jg-btn-border-hover: var(--jg-leaf);
	--jg-btn-icon-bg: var(--jg-surface);
	--jg-btn-icon-color: var(--jg-leaf);
	--jg-btn-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.jg-btn--soft {
	--jg-btn-bg: var(--jg-surface);
	--jg-btn-bg-hover: #E2E8F0;
	--jg-btn-color: var(--jg-text-strong);
	--jg-btn-border: rgba(226, 232, 240, .6);
	--jg-btn-shadow: none;
	font-family: var(--jg-font);
	font-weight: 600;
	font-size: 12px;
	padding: 8px 14px;
}

.jg-btn--light::after,
.jg-btn--soft::after {
	display: none;
}

@media (max-width: 639px) {
	.jg-btn {
		--jg-btn-icon: 28px;
		font-size: 12px;
		padding: 12px 20px;
	}

	.jg-btn.has-icon {
		padding: 10px 10px 10px 20px;
	}
}

/* Cỡ nhỏ (px-5 py-2.5 text-xs) */
.jg-btn.jg-btn--sm {
	padding: 10px 20px;
	font-size: 12px;
}

.jg-btn.jg-btn--sm.has-icon {
	--jg-btn-icon: 26px;
	padding: 6px 6px 6px 18px;
}

button.jg-btn {
	font-family: var(--jg-font-display);
	letter-spacing: -.015em;
}

/* Blocksy tự style mọi [type=submit] (nền, viền, màu hover + lớp ::before đổ bóng).
   Trả lại đúng kiểu nút JunGo. */
.jg-btn[type="submit"],
.jg-btn[type="submit"]:hover,
.jg-btn[type="submit"]:focus-visible {
	min-height: 0;
	background: var(--jg-btn-bg);
	color: var(--jg-btn-color);
	border-color: var(--jg-btn-border);
	box-shadow: var(--jg-btn-shadow);
}

.jg-btn[type="submit"]:hover,
.jg-btn[type="submit"]:focus-visible {
	background: var(--jg-btn-bg-hover);
	color: var(--jg-btn-color-hover);
}

.jg-btn[type="submit"]::before {
	display: none;
}

button.jg-btn[disabled] {
	opacity: .6;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Tiện ích
   ------------------------------------------------------------------------ */
.jg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jg-richtext > :first-child {
	margin-top: 0;
}

.jg-richtext > :last-child {
	margin-bottom: 0;
}

.jg-richtext p {
	margin: 0 0 1em;
}

.jg-richtext a {
	color: var(--jg-leaf);
}

@media (prefers-reduced-motion: reduce) {
	.jg-anim--spin .jg-anim__poster,
	.jg-btn,
	.jg-btn__icon,
	.jg-nav {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Hiệu ứng xuất hiện khi cuộn (Figma: các variant Hide -> Default)
   html.jg-motion được gắn trong <head>; jg-base.js thêm .is-revealed khi phần tử vào màn hình.
     data-jg-reveal="up"     : mờ -> rõ + trượt lên (--jg-reveal-y)
     data-jg-reveal="lines"  : từng dòng tiêu đề trượt lên từ mask (.jg-line)
     data-jg-reveal="stagger": các con trực tiếp lần lượt trượt lên
     data-jg-reveal="draw"   : vẽ nét SVG
   ------------------------------------------------------------------------ */
[data-jg-reveal] {
	--jg-reveal-y: 48px;
	--jg-reveal-dur: .7s;
	--jg-reveal-delay: 0s;
	--jg-reveal-ease: cubic-bezier(.45, .05, .25, 1);
}

.jg-motion [data-jg-reveal="up"] {
	transition: opacity var(--jg-reveal-dur) var(--jg-reveal-ease) var(--jg-reveal-delay), transform var(--jg-reveal-dur) var(--jg-reveal-ease) var(--jg-reveal-delay);
}

.jg-motion [data-jg-reveal="up"]:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--jg-reveal-y), 0);
}

.jg-line {
	display: block;
	font-weight: 700;
	overflow: hidden;
	margin: -.14em 0;
	padding: .14em 0;
}

.jg-line__inner {
	display: block;
}

.jg-motion [data-jg-reveal="lines"] .jg-line__inner {
	transition: transform .76s cubic-bezier(.65, 0, .2, 1) calc(var(--jg-reveal-delay) + var(--jg-line-i, 0) * .1s), opacity .5s ease calc(var(--jg-reveal-delay) + var(--jg-line-i, 0) * .1s);
}

.jg-motion [data-jg-reveal="lines"]:not(.is-revealed) .jg-line__inner {
	opacity: 0;
	transform: translate3d(0, 105%, 0);
}

.jg-motion [data-jg-reveal="stagger"] > * {
	transition: opacity var(--jg-reveal-dur) var(--jg-reveal-ease), transform var(--jg-reveal-dur) var(--jg-reveal-ease);
	transition-delay: calc(var(--jg-reveal-delay) + var(--jg-stagger-i, 0) * .09s);
}

.jg-motion [data-jg-reveal="stagger"]:not(.is-revealed) > * {
	opacity: 0;
	transform: translate3d(0, var(--jg-reveal-y), 0);
}

.jg-motion [data-jg-reveal="draw"] path {
	stroke-dasharray: 1;
	transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .25, 1) var(--jg-reveal-delay);
}

.jg-motion [data-jg-reveal="draw"]:not(.is-revealed) path {
	stroke-dashoffset: 1;
}

/* clip-path đặt trên phần tử con: IntersectionObserver vẫn nhìn thấy phần tử được theo dõi */
.jg-motion [data-jg-reveal="wipe"] > * {
	transition: clip-path 2.2s cubic-bezier(.45, .05, .25, 1) var(--jg-reveal-delay);
}

.jg-motion [data-jg-reveal="wipe"]:not(.is-revealed) > * {
	clip-path: inset(0 100% 0 0);
}

/* Trong Elementor editor luôn hiện đầy đủ */
.elementor-editor-active [data-jg-reveal] *,
.elementor-editor-active [data-jg-reveal] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	stroke-dashoffset: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-jg-reveal],
	[data-jg-reveal] *,
	.jg-btn,
	.jg-btn::after,
	.jg-btn__icon {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Thành phần dùng chung theo bản HTML
   ------------------------------------------------------------------------ */

/* Thẻ (pmax-card): nền trắng, viền slate-200, bo 22px; hover nâng 4px + viền xanh + spotlight theo con trỏ
   (biến --jg-mx/--jg-my do jg-base.js ghi). */
.jg-card {
	position: relative;
	overflow: hidden;
	background: var(--jg-white);
	border: 1px solid rgba(226, 232, 240, .95);
	border-radius: 22px;
	box-shadow: 0 1px 2px 0 rgba(15, 23, 42, .03), 0 0 0 1px rgba(255, 255, 255, .85) inset;
	transition: transform .36s var(--jg-ease), border-color .3s ease, box-shadow .36s var(--jg-ease);
}

.jg-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--jg-mx, -999px) var(--jg-my, -999px), rgba(22, 163, 74, .085), transparent 60%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

.jg-card > * {
	position: relative;
	z-index: 1;
}

a.jg-card,
.jg-card--hover {
	color: inherit;
	text-decoration: none;
}

.jg-card:hover {
	border-color: rgba(22, 163, 74, .55);
	box-shadow: 0 22px 44px -14px rgba(9, 38, 22, .12), 0 0 0 1px rgba(22, 163, 74, .18) inset;
	transform: translateY(-4px);
}

.jg-card:hover::before {
	opacity: 1;
}

/* Eyebrow: font-mono text-xs bold uppercase tracking-wider */
.jg-eyebrow {
	display: inline-block;
	font-family: var(--jg-font-mono);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--jg-growth);
}

.jg-eyebrow--rose { color: #BE123C; }
.jg-eyebrow--mango { color: var(--jg-mango); }
.jg-eyebrow--forest { color: var(--jg-forest); }
.jg-eyebrow--slate { color: var(--jg-subtle); }
.jg-eyebrow--amber { color: #B45309; }
.jg-eyebrow--blue { color: #1D4ED8; }

/* Tiêu đề section: text-2xl sm:text-3xl font-extrabold */
.jg-h2 {
	margin: 6px 0 12px;
	font-family: var(--jg-font-display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.015em;
	color: var(--jg-ink);
	text-wrap: balance;
}

@media (min-width: 640px) {
	.jg-h2 {
		font-size: 30px;
	}
}

.jg-intro {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--jg-text);
}

.jg-intro strong {
	color: var(--jg-ink);
}

.jg-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-forest);
	text-decoration: none;
	transition: color .2s;
}

.jg-textlink:hover {
	color: var(--jg-growth);
}

/* Container Elementor có class "jg-orbs": 2 quầng màu mờ trôi chậm (ambient-orb của hero) */
.e-con.jg-orbs {
	position: relative;
	overflow: hidden;
}

.e-con.jg-orbs::before,
.e-con.jg-orbs::after {
	content: '';
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
	animation: jg-float 9s ease-in-out infinite;
}

.e-con.jg-orbs::before {
	top: -96px;
	right: -96px;
	width: 384px;
	height: 384px;
	background: rgba(22, 163, 74, .06);
}

.e-con.jg-orbs::after {
	top: 128px;
	left: -96px;
	width: 320px;
	height: 320px;
	background: rgba(245, 176, 13, .07);
	animation-delay: -4s;
}

.e-con.jg-orbs > * {
	position: relative;
	z-index: 1;
}

@keyframes jg-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(12px, -14px, 0) scale(1.04); }
}

.jg-no-scrollbar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.jg-no-scrollbar::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.jg-card,
	.e-con.jg-orbs::before,
	.e-con.jg-orbs::after {
		animation: none !important;
		transition: none !important;
	}

	.jg-card:hover {
		transform: none;
	}
}

/* Số liệu nhấn dạng `...` trong nội dung (font mono, giữ màu chữ xung quanh) */
.jg-mono {
	font-family: var(--jg-font-mono);
	font-weight: 600;
	font-size: .95em;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Popup (widget jg-modal). Mở bằng bất kỳ link href="#id-popup".
   Khi mở, JS chuyển popup ra <body> (tránh bị cha có transform/backdrop-filter giam position:fixed).
   ------------------------------------------------------------------------ */
.jg-modal[hidden] {
	display: none !important;
}

.jg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(2, 6, 23, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-family: var(--jg-font);
}

.jg-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 768px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 24px;
	border: 1px solid var(--jg-line);
	border-radius: 24px;
	background: var(--jg-white);
	box-shadow: var(--jg-shadow-pop);
	color: var(--jg-text);
	animation: jg-modal-in .25s var(--jg-ease);
}

@keyframes jg-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: none; }
}

.jg-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.jg-modal__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(15, 61, 35, .08);
	color: var(--jg-leaf);
	font-family: var(--jg-font-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .03em;
}

.jg-modal .jg-modal__title {
	margin: 10px 0 0;
	font-family: var(--jg-font-display);
	letter-spacing: -.015em;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-modal__close,
.jg-modal__close:hover,
.jg-modal__close:focus {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-surface);
	box-shadow: none;
	color: var(--jg-text);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.jg-modal__close:hover {
	background: var(--jg-line);
}

.jg-modal__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	line-height: 1.65;
}

.jg-modal__body p {
	margin: 0;
}

.jg-modal__body strong {
	color: var(--jg-ink);
}

.jg-modal__boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.jg-modal__item {
	padding: 16px;
	border: 1px solid var(--jg-line);
	border-radius: 16px;
	background: var(--jg-surface);
}

.jg-modal__item--plain {
	border-color: transparent;
}

.jg-modal__item--accent {
	border-color: transparent;
	background: rgba(22, 163, 74, .1);
	color: var(--jg-leaf);
}

.jg-modal__item--accent strong {
	color: var(--jg-forest);
}

.jg-modal__group-title {
	font-family: var(--jg-font-display);
	letter-spacing: -.015em;
	font-size: 14px;
	font-weight: 700;
	color: var(--jg-leaf);
}

.jg-modal__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--jg-line-soft);
}

@media (min-width: 640px) {
	.jg-modal {
		padding: 24px;
	}

	.jg-modal__box {
		padding: 32px;
	}

	.jg-modal__boxes--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Khi popup mở: khoá cuộn trang */
html.jg-modal-open {
	overflow: hidden;
}

/* Trong Elementor editor: hiện popup tại chỗ (không fixed) để sửa nội dung */
.elementor-editor-active .jg-modal[hidden] {
	display: flex !important;
}

.elementor-editor-active .jg-modal {
	position: relative;
	inset: auto;
	z-index: auto;
	padding: 24px;
	border-radius: 24px;
}

/* Widget JunGo trong container flex của Elementor: không cho co lại.
   Lưới thẻ có aspect-ratio (vd thẻ dự án 4:3) báo chiều cao tối thiểu thấp hơn thực tế ->
   widget bị co, nội dung tràn khỏi section (section thấp hơn, đè lên section dưới). */
.e-con > [class*="elementor-widget-jg-"],
.e-con > .e-con-inner > [class*="elementor-widget-jg-"] {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Hiệu năng: section dưới màn hình đầu chưa cần dựng layout / vẽ (content-visibility).
   Đo trên trang chủ (CPU chậm x4): layout lần đầu 522ms -> 260ms. Bỏ qua 2 section đầu
   (breadcrumb / hero) và trong Elementor editor (paint containment cắt khung chọn của editor).
   contain-intrinsic-size "auto" nhớ chiều cao thật sau lần hiển thị đầu -> thanh cuộn không nhảy.
   ------------------------------------------------------------------------ */
body:not(.elementor-editor-active) .elementor > .e-con.e-parent:nth-child(n+3) {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* ---------------------------------------------------------------------------
   Ô chọn (select) của form JunGo: bỏ mũi tên mặc định (mỗi trình duyệt một kiểu), dùng chevron
   bo tròn, đổi màu khi hover / focus, chữ dài cắt bằng "…" thay vì chạy dưới mũi tên.
   ------------------------------------------------------------------------ */
.jg-lead select.jg-lead__input,
.jg-brief select.jg-brief__input {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.jg-lead select.jg-lead__input:hover,
.jg-brief select.jg-brief__input:hover {
	border-color: var(--jg-subtle);
}

.jg-lead select.jg-lead__input:focus,
.jg-brief select.jg-brief__input:focus {
	border-color: var(--jg-growth);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316A34A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.jg-lead select.jg-lead__input option,
.jg-brief select.jg-brief__input option {
	background: var(--jg-white);
	color: var(--jg-ink);
	font-weight: 500;
}

.jg-lead select.jg-lead__input::-ms-expand,
.jg-brief select.jg-brief__input::-ms-expand {
	display: none;
}

/* Lỗi theo từng ô form (JG.fieldError trong jg-base.js) */
.jg-field-error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #BE123C;
}

.jg-field-error::before {
	content: '! ';
	font-weight: 700;
}