/*
 * Trang chủ — scoped under .zc-home (front-page.php) or a .zc-* block placed elsewhere.
 * Visual language: Roboto text, Sansita Swashed script headings in orange, blue→green→yellow hero
 * gradient with a glass card, pastel stat tiles, orange kicker pills, cream panels, orange CTAs.
 * Flatsome adds margins/uppercase to headings, lists, buttons and dl; those are reset per block.
 */

.zc-home,
.zc-menu {
	--zc-font: Roboto, "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--zc-script: "Sansita Swashed", Roboto, cursive;
	--zc-ink: #0f172a;          /* slate-900 */
	--zc-text: #374151;         /* gray-700 */
	--zc-muted: #6b7280;        /* gray-500 */
	--zc-line: #e5e7eb;         /* gray-200 */
	--zc-page: #f3f4f6;         /* gray-100 */
	--zc-surface: #ffffff;
	--zc-blue: #2563eb;         /* blue-600 */
	--zc-blue-dark: #1e40af;    /* blue-800 */
	--zc-orange: #ea580c;       /* orange-600 */
	--zc-orange-soft: #ffedd5;  /* orange-100 */
	--zc-amber: #f59e0b;
	--zc-cream: rgba(254, 252, 232, 0.6);
	--zc-cream-line: rgba(252, 211, 77, 0.8); /* amber-300 */
	--zc-radius: 10px;
	--zc-radius-lg: 24px;
	--zc-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--zc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--zc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--zc-gap: clamp(1rem, 2vw, 1.5rem);
	font-family: var(--zc-font);
	color: var(--zc-text);
	-webkit-font-smoothing: antialiased;
}

.zc-home { background: var(--zc-page); padding: 0; font-size: 16px; line-height: 1.5; }
.zc-home :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.zc-home :where(ul, ol) { padding: 0; list-style: none; }
.zc-home :where(li) { margin: 0; }
.zc-home :where(h1, h2, h3, h4) { font-family: var(--zc-font); color: var(--zc-ink); text-transform: none; letter-spacing: normal; line-height: 1.25; }
.zc-home a { text-decoration: none; }
.zc-home .zc-icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }
.zc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zc-center { text-align: center; margin-top: 2rem !important; }

.zc-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.zc-wrap--narrow { max-width: 900px; }

/* ---- section frame + headings ---- */
.zc-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.zc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.zc-head--center { justify-content: center; text-align: center; }
.zc-head--center > div { display: flex; flex-direction: column; align-items: center; }
.zc-kicker {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.25rem 0.75rem; margin-bottom: 0.9rem !important;
	border-radius: 999px; background: var(--zc-orange-soft); color: var(--zc-orange);
	font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
	box-shadow: var(--zc-shadow);
}
.zc-home .zc-title { font-size: clamp(1.875rem, 4.2vw, 3rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.2; color: var(--zc-ink); }
.zc-home .zc-title .zc-accent { color: var(--zc-orange); }
.zc-home .zc-title--display { font-family: var(--zc-script); font-size: clamp(1.875rem, 3.6vw, 2.25rem); font-weight: 700; letter-spacing: 0; color: var(--zc-orange); }
.zc-sub { color: var(--zc-muted); margin-top: 0.4rem !important; max-width: 62ch; }
.zc-head--center .zc-sub { margin-top: 0.9rem !important; font-size: 1.05rem; }
.zc-more {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem;
	border-radius: 8px; background: #f3f4f6; color: var(--zc-blue); font-size: 14px; font-weight: 500; white-space: nowrap;
	transition: background 0.2s;
}
.zc-home .zc-more { background: var(--zc-surface); box-shadow: var(--zc-shadow); }
.zc-more:hover { background: #e5e7eb; color: var(--zc-blue-dark); }

/* buttons */
.zc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 8px; font-weight: 500; font-size: 14px; line-height: 1.2; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.zc-btn--blue { padding: 0.6rem 0.75rem; background: var(--zc-blue-dark); color: #eff6ff; }
.zc-btn--blue:hover { background: #1e3a8a; color: #fff; }
.zc-btn--cta {
	padding: 1rem 1.75rem; border-radius: 16px;
	background: linear-gradient(to right, #ea580c, #f97316, #f59e0b); color: #fff;
	font-size: 15px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase;
	box-shadow: 0 10px 20px -6px rgba(234, 88, 12, 0.45);
}
.zc-btn--cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(234, 88, 12, 0.55); }

/* ---- hero ---- */
.zc-hero {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: linear-gradient(46deg, #09aded 0%, #5bd98f 50%, #f7e85c 100%);
	overflow: hidden;
}
.zc-hero__card {
	position: relative;
	padding: clamp(1rem, 3vw, 2rem);
	border-radius: var(--zc-radius);
	background: linear-gradient(to top right, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.75));
	box-shadow: var(--zc-shadow);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.zc-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #f97316; color: #fff; font-weight: 500; }
.zc-home .zc-hero__title { display: flex; flex-direction: column; margin-top: 1rem !important; font-size: clamp(1.875rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
.zc-grad-cool, .zc-grad-warm { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.zc-grad-cool { background-image: linear-gradient(to right, #0e7490, #0ea5e9); }
.zc-grad-warm { background-image: linear-gradient(90deg, #facc15, #f97316, #db2777, #f97316, #facc15); background-size: 200% auto; animation: zc-shine 6s linear infinite; }
@keyframes zc-shine { to { background-position: 200% center; } }
.zc-hero__lead { margin-top: 0.85rem !important; font-size: clamp(1rem, 1.5vw, 1.1rem); color: #1f2937; max-width: 64ch; }

/* search: gradient frame around the plugin widgets */
.zc-search {
	margin-top: 1.5rem; max-width: 860px;
	padding: 2px; border-radius: var(--zc-radius);
	background: linear-gradient(to top right, #0284c7, #22c55e, #f59e0b);
}
.zc-search > * { background: var(--zc-surface); }
.zc-search__tabs { display: flex; gap: 0.25rem; padding: 0.35rem 0.5rem 0; border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--zc-line); overflow-x: auto; }
.zc-search__panel { padding: 0.9rem 1rem 0.6rem; border-radius: 0 0 8px 8px; }
.zc-search__panel:only-child, .zc-search__tabs + .zc-search__panel:last-child { border-radius: 0 0 8px 8px; }
.zc-search > .zc-search__panel:first-child { border-radius: 8px; }
.zc-search__panel[hidden] { display: none; }
.zc-home .zc-search__tabs button {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin: 0; padding: 0.6rem 0.9rem; min-height: 0;
	border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
	background: none; box-shadow: none;
	color: var(--zc-muted); font: 500 15px/1.3 var(--zc-font);
	text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
.zc-home .zc-search__tabs button:hover { color: var(--zc-ink); background: #f9fafb; }
.zc-home .zc-search__tabs button[aria-selected="true"] { color: var(--zc-blue); border-bottom-color: var(--zc-blue); }
.zc-home .zc-search__tabs button:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: -2px; }
/* plugin widgets sit flat inside the frame; their titles stay for screen readers only */
.zc-search .vnp-lookup, .zc-search .vnp-plookup { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; font-family: var(--zc-font); }
.zc-search .vnp-lookup__title, .zc-search .vnp-plookup__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zc-home .zc-search input[type="search"] { font-family: var(--zc-font); font-size: 18px; border-radius: 8px; }
.zc-home .zc-search .vnp-lookup__submit,
.zc-home .zc-search .vnp-plookup__submit {
	border: 0; border-radius: 8px;
	background: linear-gradient(to top right, #3b82f6, #22c55e); color: #fff;
	font-family: var(--zc-font); font-weight: 700; text-transform: none; letter-spacing: 0;
}
.zc-home .zc-search .vnp-lookup__submit:hover,
.zc-home .zc-search .vnp-plookup__submit:hover { background: linear-gradient(to top right, #2563eb, #16a34a); }
.zc-search .vnp-lookup__hint, .zc-search .vnp-plookup__hint { font-size: 13px; }
/* keep input + button on one line, like a search bar */
.zc-search .vnp-lookup__form { flex-wrap: nowrap; }
.zc-search .vnp-lookup__field { flex: 1 1 auto; min-width: 0; }
.zc-home .zc-search .vnp-lookup__submit { flex: none; white-space: nowrap; }

/* chips */
.zc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.zc-chip {
	display: inline-flex; align-items: center; gap: 0.3rem; height: 32px; padding: 0 12px;
	border: 1px solid #d1d5db; border-radius: 8px; background: var(--zc-surface);
	color: var(--zc-ink); font-size: 14px; font-weight: 500; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.zc-chip:hover { border-color: var(--zc-blue); color: var(--zc-blue); }
.zc-chip--all { background: var(--zc-blue); border-color: var(--zc-blue); color: #fff; }
.zc-chip--all:hover { background: var(--zc-blue-dark); border-color: var(--zc-blue-dark); color: #fff; }

/* stat tiles */
.zc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2rem) !important; }
.zc-stat {
	--c: var(--zc-blue); --bg: rgba(219, 234, 254, 0.9);
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: clamp(0.75rem, 1.6vw, 1.25rem);
	border: 1px solid var(--zc-line); border-radius: var(--zc-radius);
	background: var(--bg); box-shadow: var(--zc-shadow);
	transition: box-shadow 0.2s;
}
.zc-stat:hover { box-shadow: var(--zc-shadow-md); }
.zc-stat--red { --c: #dc2626; --bg: rgba(254, 226, 226, 0.9); }
.zc-stat--orange { --c: #ea580c; --bg: rgba(255, 237, 213, 0.9); }
.zc-stat--green { --c: #16a34a; --bg: rgba(220, 252, 231, 0.9); }
.zc-stat--pink { --c: #db2777; --bg: #fce7f3; }
.zc-stat--purple { --c: #9333ea; --bg: #f3e8ff; }
.zc-stat__label { display: flex; align-items: center; gap: 0.5rem; color: var(--zc-ink); font-size: 15px; }
.zc-stat__label .zc-icon { color: var(--c); width: 20px; height: 20px; }
.zc-stat__value { color: var(--c); padding-left: 1.75rem; }
.zc-stat__value strong { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zc-stat__value small { font-size: 14px; }
.zc-updated { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem !important; color: #1f2937; font-size: 14px; }

/* ---- featured ---- */
.zc-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zc-gap); }
.zc-fcard { display: flex; flex-direction: column; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 12px; overflow: hidden; box-shadow: var(--zc-shadow); transition: box-shadow 0.25s, transform 0.25s; }
.zc-fcard:hover { box-shadow: var(--zc-shadow-lg); transform: translateY(-2px); }
.zc-fcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #e5e7eb; overflow: hidden; }
.zc-fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 0.5s; }
.zc-fcard:hover .zc-fcard__media img { transform: scale(1.05); }
.zc-fcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15) 45%, transparent 70%); }
.zc-fcard__mono { display: grid; place-items: center; height: 100%; font-size: 3rem; font-weight: 900; color: var(--zc-blue); }
.zc-fcard__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 0.15rem; padding: 0.9rem 1rem; color: #fff; }
.zc-fcard__name { font-size: 1.25rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.zc-fcard__region { font-size: 0.85rem; color: #fcd34d; }
.zc-fcard__body { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; flex: 1; }
.zc-fcard__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.zc-fcard__facts dt { display: block; float: none; width: auto; margin: 0; color: var(--zc-muted); font-size: 12px; font-weight: 400; text-transform: none; }
.zc-fcard__facts dd { display: block; margin: 0; color: var(--zc-muted); font-size: 13px; text-transform: none; }
.zc-fcard__facts dd strong { color: var(--zc-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zc-fcard__grdp { display: grid; gap: 0.1rem; padding-top: 0.75rem; border-top: 1px solid var(--zc-line); font-size: 12px; color: var(--zc-muted); }
.zc-fcard__grdp strong { color: var(--zc-blue); font-size: 15px; }
.zc-fcard .zc-btn { margin-top: auto; width: 100%; }

/* ---- planning focus: communes → wards ---- */
.zc-upgrades { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.zc-upg + .zc-upg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.zc-upg .zc-title--display { font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1.3; }
.zc-upg__viewport { position: relative; }
.zc-upg__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1rem) / 5); gap: 1rem;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 4px 4px 1rem; margin: 0 -4px; scroll-padding-inline: 4px; scrollbar-width: thin;
}
.zc-ucard { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; background: var(--zc-surface); border: 1px solid #fde7d3; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px -6px rgba(234, 88, 12, 0.18); }
.zc-ucard__media { position: relative; height: 225px; background: linear-gradient(180deg, #f3f4f6 0%, #d1d5db 45%, #374151 100%); }
.zc-ucard__badge { position: absolute; top: 10px; left: 12px; padding: 3px 7px; border-radius: 3px; background: #f97316; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.zc-ucard--done .zc-ucard__badge { background: #ea4a0c; }
.zc-ucard__date { position: absolute; top: 9px; right: 12px; display: inline-flex; align-items: center; gap: 0.3rem; padding: 3px 10px; border-radius: 999px; background: #fff7ed; color: var(--zc-orange); font-size: 12px; }
.zc-ucard__ph { position: absolute; left: 50%; top: 42%; translate: -50% -50%; color: #9ca3af; }
.zc-ucard__ph .zc-icon { width: 34px; height: 34px; }
.zc-ucard__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.8rem 0.9rem; color: #fff; }
.zc-home .zc-ucard__caption h3 { color: #fff; font-size: 1.15rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.zc-ucard__caption p { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem; color: #f3f4f6; font-size: 12.5px; font-weight: 500; }
.zc-ucard__caption p .zc-icon { color: #f59e0b; width: 13px; height: 13px; }
.zc-ucard__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem 1rem; flex: 1; }
.zc-ucard__std { display: flex; align-items: center; gap: 0.5rem; color: #374151; font-size: 12.5px; font-weight: 500; text-transform: uppercase; }
.zc-ucard__std .zc-icon { padding: 3px; width: 22px; height: 22px; border-radius: 5px; background: #fff7ed; color: var(--zc-orange); }
.zc-metric__label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-left: 2rem; color: #4b5563; font-size: 11.5px; text-transform: uppercase; }
.zc-metric__pill { padding: 1px 6px; border-radius: 3px; background: #dcfce7; color: #15803d; font-size: 10px; font-weight: 900; }
.zc-metric.is-fail .zc-metric__pill { background: #fee2e2; color: #b91c1c; }
.zc-metric__box { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; padding: 0.55rem 0.7rem; border: 1px solid var(--zc-line); border-radius: 8px; }
.zc-metric__box > .zc-icon { width: 20px; height: 20px; color: #db2777; }
.zc-metric:nth-of-type(3) .zc-metric__box > .zc-icon { color: #16a34a; }
.zc-metric__main { flex: 1; min-width: 0; }
.zc-metric__main p { color: var(--zc-muted); font-size: 11px; }
.zc-metric__main strong { color: var(--zc-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zc-metric__bar { display: block; height: 4px; margin-top: 0.25rem; border-radius: 4px; background: #e5e7eb; overflow: hidden; }
.zc-metric__bar span { display: block; height: 100%; background: #22c55e; border-radius: inherit; }
.zc-metric.is-fail .zc-metric__bar span { background: #ef4444; }
.zc-metric__pct { color: #374151; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zc-ucard__legal { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.zc-ucard__legal .zc-icon { width: 15px; height: 15px; margin-top: 0.2rem; color: var(--zc-blue); }
.zc-ucard__legal p { display: grid; gap: 0.1rem; }
.zc-ucard__legal span { color: #60a5fa; font-size: 9.5px; font-weight: 700; text-transform: uppercase; }
.zc-ucard__legal strong { color: var(--zc-blue-dark); font-size: 11.5px; font-weight: 700; }
.zc-ucard__actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.25rem; }
.zc-ucard__actions .zc-btn { flex: 1; padding: 0.55rem 0.5rem; font-size: 13px; font-weight: 700; text-align: center; }
.zc-home .zc-ucard .zc-btn--blue { background: #1d4ed8; color: #fff; }
.zc-home .zc-ucard .zc-btn--blue:hover { background: #1e3a8a; }
.zc-btn--orange { background: #ea7a0c; color: #fff; }
.zc-btn--orange:hover { background: #c2410c; color: #fff; }
.zc-upg__nav {
	position: absolute; top: 40%; z-index: 2; display: grid; place-items: center;
	width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid var(--zc-line); border-radius: 50%;
	background: #fff; color: var(--zc-ink); box-shadow: var(--zc-shadow-md); cursor: pointer;
}
.zc-upg__nav[hidden] { display: none; }
.zc-upg__nav--prev { left: -12px; }
.zc-upg__nav--next { right: -12px; }
.zc-upg__nav:hover { color: var(--zc-orange); }
.zc-upg__nav .zc-icon { width: 20px; height: 20px; }

/* ---- regions ---- */
.zc-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zc-gap); align-items: start; }
.zc-region { --c: var(--zc-blue); background: var(--zc-surface); border: 1px solid var(--zc-line); border-top: 4px solid var(--c); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--zc-shadow); }
.zc-region--1 { --c: #16a34a; }
.zc-region--2 { --c: #ea580c; }
.zc-region--3 { --c: #0891b2; }
.zc-region--4 { --c: #dc2626; }
.zc-region--5 { --c: #9333ea; }
.zc-home .zc-region h3 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 1.05rem; font-weight: 700; padding-bottom: 0.6rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--zc-line); }
.zc-region h3 span { min-width: 1.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--c); color: #fff; font-size: 0.8rem; text-align: center; }
.zc-region li + li { border-top: 1px dashed var(--zc-line); }
.zc-region a { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.3rem; color: var(--zc-ink); border-radius: 6px; }
.zc-region a:hover { background: #f9fafb; color: var(--c); }
.zc-region__name { font-weight: 500; }
.zc-region__name em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: #fff; background: var(--zc-orange); border-radius: 4px; padding: 0.05rem 0.3rem; vertical-align: 0.15em; }
.zc-region__meta { color: var(--zc-muted); font-size: 0.8rem; text-align: right; white-space: nowrap; }

/* ---- cream panel + tools ---- */
.zc-panel { padding: clamp(1.25rem, 4vw, 2.5rem); border: 2px solid var(--zc-cream-line); border-radius: var(--zc-radius-lg); background: var(--zc-cream); box-shadow: 0 4px 6px -1px rgba(120, 53, 15, 0.05); }
.zc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--zc-gap); }
.zc-tool {
	--c: var(--zc-blue); --bg: #dbeafe;
	display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem;
	background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 16px;
	color: var(--zc-text); box-shadow: var(--zc-shadow); transition: transform 0.2s, box-shadow 0.2s;
}
.zc-tool--green { --c: #16a34a; --bg: #dcfce7; }
.zc-tool--orange { --c: #ea580c; --bg: #ffedd5; }
.zc-tool--purple { --c: #9333ea; --bg: #f3e8ff; }
.zc-tool:hover { transform: translateY(-3px); box-shadow: var(--zc-shadow-lg); color: var(--zc-text); }
.zc-tool__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg); color: var(--c); }
.zc-tool__icon .zc-icon { width: 24px; height: 24px; }
.zc-tool strong { color: var(--zc-ink); font-size: 1.125rem; font-weight: 700; margin-top: 0.25rem; }
.zc-tool__text { font-size: 0.92rem; color: var(--zc-muted); flex: 1; }
.zc-tool__cta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--c); font-weight: 700; font-size: 0.9rem; }

/* ---- reform diagram ---- */
.zc-reform { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--zc-gap); align-items: center; max-width: 920px; margin: 0 auto; }
.zc-reform__col { padding: 1.25rem; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 16px; box-shadow: var(--zc-shadow); }
.zc-reform__col--new { border: 2px solid var(--zc-orange); box-shadow: var(--zc-shadow-lg); }
.zc-reform__label { font-weight: 900; color: var(--zc-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem !important; }
.zc-reform__col--new .zc-reform__label { color: var(--zc-orange); }
.zc-tiers { display: grid; gap: 0.5rem; counter-reset: tier; }
.zc-tiers li { position: relative; padding: 0.7rem 0.8rem 0.7rem 2.7rem; border-radius: var(--zc-radius); background: #f9fafb; counter-increment: tier; }
.zc-tiers li::before { content: counter(tier); position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #d1d5db; color: var(--zc-ink); font-size: 0.75rem; font-weight: 700; }
.zc-reform__col--new .zc-tiers li { background: #fff7ed; }
.zc-reform__col--new .zc-tiers li::before { background: var(--zc-orange); color: #fff; }
.zc-tiers strong { color: var(--zc-ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.zc-reform__col--new .zc-tiers .zc-tiers__gone { background: none; border: 1px dashed #d1d5db; color: var(--zc-muted); text-decoration: line-through; }
.zc-reform__col--new .zc-tiers .zc-tiers__gone::before { background: #e5e7eb; color: var(--zc-muted); }
.zc-reform__arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(to right, #ea580c, #f59e0b); color: #fff; box-shadow: 0 6px 14px -4px rgba(234, 88, 12, 0.5); }
.zc-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem !important; }
.zc-types li { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--zc-surface); border: 1px solid var(--zc-line); font-size: 0.9rem; box-shadow: var(--zc-shadow); }
.zc-types strong { color: var(--zc-orange); }

/* ---- postal strip ---- */
.zc-postal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.65rem; }
.zc-postal a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border: 1px solid var(--zc-line); border-radius: var(--zc-radius); background: var(--zc-surface); color: var(--zc-ink); box-shadow: var(--zc-shadow); transition: border-color 0.2s, box-shadow 0.2s; }
.zc-postal a:hover { border-color: var(--zc-orange); box-shadow: var(--zc-shadow-md); }
.zc-postal__code { font-weight: 900; font-size: 1.1rem; color: var(--zc-orange); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.zc-postal__name { font-size: 0.88rem; font-weight: 500; }

/* ---- FAQ ---- */
.zc-faq { display: grid; gap: 0.75rem; }
.zc-faq__item { background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 12px; box-shadow: var(--zc-shadow); }
.zc-faq__item[open] { border-color: rgba(234, 88, 12, 0.4); }
.zc-faq__item summary { position: relative; padding: 1.05rem 3rem 1.05rem 1.25rem; color: var(--zc-ink); font-weight: 700; cursor: pointer; list-style: none; }
.zc-faq__item summary::-webkit-details-marker { display: none; }
.zc-faq__item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--zc-orange-soft); color: var(--zc-orange); font-weight: 900; }
.zc-faq__item[open] summary::after { content: "−"; }
.zc-faq__item p { padding: 0 1.25rem 1.1rem; color: var(--zc-text); }

/* ---- news ---- */
.zc-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zc-gap); }
.zc-post { background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 12px; overflow: hidden; box-shadow: var(--zc-shadow); transition: box-shadow 0.2s; }
.zc-post:hover { box-shadow: var(--zc-shadow-lg); }
.zc-post__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #e5e7eb; }
.zc-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.zc-post__ph { display: grid; place-items: center; height: 100%; color: #d1d5db; }
.zc-post__ph .zc-icon { width: 48px; height: 48px; }
.zc-post__body { display: grid; gap: 0.4rem; padding: 1rem; }
.zc-post time { color: var(--zc-orange); font-size: 0.8rem; font-weight: 700; }
.zc-home .zc-post h3 { font-size: 1.1rem; font-weight: 700; }
.zc-post h3 a { color: var(--zc-ink); }
.zc-post h3 a:hover { color: var(--zc-orange); }
.zc-post p { font-size: 0.9rem; color: var(--zc-muted); }

/* ---- sources ---- */
.zc-section--sources { padding-block: 2rem 3rem; }
.zc-home .zc-sources__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.zc-sources__title .zc-icon { color: #16a34a; }
.zc-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem 1.5rem; padding: 1.25rem; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: 12px; }
.zc-sources li { display: grid; gap: 0.15rem; padding-left: 0.85rem; border-left: 3px solid var(--zc-orange-soft); font-size: 0.88rem; }
.zc-sources a, .zc-sources strong { color: var(--zc-ink); font-weight: 700; }
.zc-sources a:hover { color: var(--zc-orange); }
.zc-sources span { color: var(--zc-muted); }

/* ---- region mega menu (header UX Block) ---- */
.zc-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem 1.5rem; padding: 0.5rem 0; text-align: left; }
.zc-menu__title { margin: 0 0 0.4rem; color: var(--zc-orange); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.zc-menu ul { margin: 0; padding: 0; list-style: none; }
.zc-menu li { margin: 0; }
.zc-menu a { display: block; padding: 0.2rem 0; color: var(--zc-ink); font-size: 0.9rem; text-transform: none; }
.zc-menu a:hover { color: var(--zc-blue); }

/* ---- responsive ---- */
@media (min-width: 1200px) {
	.zc-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
	.zc-upg__track { grid-auto-columns: calc((100% - 2 * 1rem) / 3); }
}

@media (max-width: 1023px) {
	.zc-upg__track { grid-auto-columns: calc((100% - 1rem) / 2); }
	.zc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zc-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zc-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.zc-hero { padding: 1.25rem 0 2rem; }
	.zc-hero > .zc-wrap { padding: 0 12px; }
	.zc-search__panel { padding: 0.75rem; }
	.zc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zc-stat__value { padding-left: 0; }
	.zc-stat__label { font-size: 14px; }
	.zc-featured, .zc-regions, .zc-news, .zc-tools { grid-template-columns: 1fr; }
	.zc-reform { grid-template-columns: 1fr; }
	.zc-reform__arrow { margin: 0 auto; rotate: 90deg; }
	.zc-head .zc-more { white-space: normal; }
	.zc-btn--cta { width: 100%; padding-inline: 1rem; }
	.zc-upg__track { grid-auto-columns: 82%; }
	.zc-upg__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.zc-home *, .zc-home *::before, .zc-home *::after { transition: none !important; animation: none !important; }
}