/* Front page sections (design C). Loaded with theme.css; values come from theme.json presets. */
.kcg-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; gap: var(--wp--preset--spacing--40); align-items: stretch; }
.kcg-hero > * { margin: 0 !important; }
.kcg-slide__tag { align-self: flex-start; width: max-content; padding: 6px 10px; border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--amber); color: var(--wp--preset--color--on-amber); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; line-height: 1; }
.kcg-slide .wp-block-cover__inner-container { max-width: 460px; z-index: 1; }
.kcg-slide::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--deep) 62%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--deep) 50%, transparent) 60%, transparent 90%); /* dark across the whole text column (subtitle stays readable over light photos) */ pointer-events: none; }
.kcg-promos { display: grid; gap: var(--wp--preset--spacing--40); }
.kcg-promos > * { margin: 0 !important; }
.kcg-promo { border-radius: var(--wp--preset--border-radius--medium); overflow: hidden; }
.kcg-promo h3 a { color: inherit; }
.kcg-promo-how { display: grid; align-content: space-between; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--brand-line); }
.kcg-promo-how > * { margin: 0 !important; }
.kcg-promo-how ol { padding-left: 1.1em; color: var(--wp--preset--color--ink-2); }
.kcg-promo__ic, .kcg-strip__ic { display: grid !important; place-items: center; flex: none; }
.kcg-promo__ic { width: 52px; height: 52px; border-radius: var(--wp--preset--border-radius--medium); background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }
.kcg-promo__ic svg { width: 26px; height: 26px; fill: currentColor; }

.kcg-usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40) !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); }
.kcg-usp > * { margin: 0 !important; }
.kcg-usp__item p { margin: 0; line-height: 1.45; color: var(--wp--preset--color--ink-2); }
.kcg-usp__item strong { color: var(--wp--preset--color--ink); }
.kcg-strip__ic svg { width: 34px; height: 34px; fill: currentColor; } /* ds-ok: icon size (design C .strip .ic .i) */

.kcg-shelf .kcg-all { text-align: center; }

/* featured categories: round icon tiles. The 8-column grid and its gaps are the Term Template block's own layout
   settings; the media queries below only reduce the column count on smaller screens. */
.kcg-cat { display: grid; justify-items: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10); text-align: center; } /* padding: design C .cat, also a larger tap area */
.kcg-cat > * { margin: 0 !important; }
.kcg-cat:hover .kcg-term-icon { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); transform: translateY(-3px); }
.kcg-cat .wp-block-term-name { font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.3; }
.kcg-cat .wp-block-term-name a { color: var(--wp--preset--color--ink); }

/* navy call-to-action strip */
.kcg-strip { margin-top: var(--wp--preset--spacing--60) !important; gap: var(--wp--preset--spacing--60) !important; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); border-radius: var(--wp--preset--border-radius--medium); }
.kcg-strip__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--wp--preset--color--deep-2); color: var(--wp--preset--color--on-deep); }
.kcg-strip__txt { flex: 1 1 320px; }
.kcg-strip__txt > * { margin: 0 !important; }

@media (max-width: 1180px) {
	.kcg-hero { grid-template-columns: 220px minmax(0, 1fr); }
	.kcg-promos { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.kcg-hero { grid-template-columns: minmax(0, 1fr); }
	.kcg-hero .kcg-cm { display: none; }
	.kcg-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kcg-cats .wp-block-term-template { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kcg-strip { text-align: center; justify-content: center !important; }
}
@media (max-width: 640px) {
	.kcg-promos { grid-template-columns: minmax(0, 1fr); }
	.kcg-usp { grid-template-columns: minmax(0, 1fr); }
	.kcg-term-icon--large { width: 60px; height: 60px; }
	.kcg-term-icon--large svg { width: 32px; height: 32px; }
}
/* 3 columns on small phones; a lone last tile spans the row (its content is centred) instead of leaving two empty cells */
@media (max-width: 380px) {
	.kcg-cats .wp-block-term-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kcg-cats .wp-block-term-template > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* latest articles: 3 columns, 1 column at <=900 (design C .posts), so 3 articles never leave one alone on a row
   (the grid block minimum width alone gave 2 + 1 between 641 and 950px). Product rows: theme.css. */

/* ---------- "Kinh nghiệm chọn mua": the newest post large (left), the next three as rows (right) ---------- */
.kcg-news { margin: 0 !important; align-items: stretch !important; }
.kcg-news .wp-block-query, .kcg-news .wp-block-post-template { height: 100%; margin: 0; }
.kcg-news__feat > li { height: 100%; }
.kcg-news__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.kcg-post__body { flex: 1; } /* card padding: .kcg-post (inline) */
.kcg-post__body > * { margin: 0 !important; }
.kcg-post--feat .wp-block-post-excerpt { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--small); }
.kcg-post--feat .wp-block-post-excerpt__more-text { display: none; } /* the title is the link */
.kcg-post--row { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 0; padding-bottom: 0; }
.kcg-post--row > .kcg-post__img { height: 100%; margin: 0; }
.kcg-post--row > .kcg-post__img img { height: 100%; object-fit: cover; }
.kcg-post--row > .kcg-post__body { padding-block: var(--wp--preset--spacing--30); }

/* ---------- last section "Nhận báo giá": the heading (icon + title) on the page, a tinted band under it with the steps and
   the hotline, and the form card rising above the band by exactly the heading's height. One grid: the heading is row 1
   left, the band is row 2 across, the card spans rows 1-2 on the right (its top = the heading's top). ---------- */
.kcg-qs { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-rows: auto 1fr; column-gap: var(--wp--preset--spacing--70); margin-top: var(--wp--preset--spacing--60) !important; }
.kcg-qs > * { margin: 0 !important; }
.kcg-qs__head { grid-area: 1 / 1; align-self: end; padding-bottom: var(--wp--preset--spacing--40); }
.kcg-qs__band { grid-area: 2 / 1 / 3 / 3; display: grid; grid-template-columns: subgrid; padding: var(--wp--preset--spacing--60); border: 1px solid var(--wp--preset--color--brand-line); border-radius: var(--wp--preset--border-radius--medium); }
.kcg-qs__band > * { margin: 0 !important; }
.kcg-qs__info { grid-column: 1; gap: var(--wp--preset--spacing--40); }
.kcg-qs__info > *, .kcg-qs__step > *, .kcg-qs__steptxt > * { margin: 0 !important; }
.kcg-qs__steps { gap: var(--wp--preset--spacing--40); }
.kcg-qs__steptxt { line-height: 1.45; }
.kcg-qs__num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); font-weight: 700; font-size: var(--wp--preset--font-size--small); line-height: 1; } /* ds-ok: step badge, a notch under the 36px pills */
.kcg-qs__call { align-self: stretch; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--brand-line); } /* the line runs the full column width */
.kcg-qs .kcg-act__ic { background: var(--wp--preset--color--surface); } /* the header's call block, on the tinted band */
/* the card sits inside the band's right and bottom padding, and above its top edge */
.kcg-qs__card { grid-area: 1 / 2 / 3 / 3; z-index: 1; margin: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) 0 !important; padding: var(--wp--preset--spacing--60); border-radius: var(--wp--preset--border-radius--medium); box-shadow: var(--wp--preset--shadow--float); }
.kcg-qs__card > h3 { margin: 0 0 var(--wp--preset--spacing--40); }
.kcg-qs .wp-block-kcg-contact-form > button[type="submit"] { grid-column: 1 / -1; } /* full width under the fields */
@media (max-width: 900px) { /* phones and tablets: heading, band, card, one under the other */
	.kcg-qs { display: block; }
	.kcg-qs__card { margin: var(--wp--preset--spacing--40) 0 0 !important; }
}
@media (max-width: 640px) {
	.kcg-qs__band, .kcg-qs__card { padding: var(--wp--preset--spacing--40); }
}