/* KCG theme: only what theme.json cannot express. Values come from theme.json presets/custom (--wp--preset--*, --wp--custom--*). */
:root {
	--kcg-indicator: 2px; /* menu underline thickness, sits on the menu bar bottom edge */
	--kcg-panel-ic: 40px; /* panel heading icon; the heading row is this tall (tab pills align to it) */
	--kcg-bnav-h: 52px; /* phone bottom bar height (the bar is sized by it, and the page reserves this much at the bottom) */
	--kcg-menubar-h: 48px; /* the sticky blue menu bar (one control tall on phones, see the 640px block) */
	--kcg-adminbar-h: 0px; /* WordPress admin bar above the sticky bar: 0 for visitors, set below for logged-in users */
	--kcg-sticky-top: calc(var(--kcg-menubar-h) + var(--wp--preset--spacing--40) + var(--kcg-adminbar-h)); /* in-page jumps and sticky side columns stop below the bar */
	--kcg-logo-tablet: 72px; /* header logo width on tablets and phones (bigger than desktop: the logo sits alone in its row) */
	--kcg-panel-w: 400px; /* phone/tablet menu panel width */
	--kcg-tool: var(--wp--custom--control-height); /* compact header icon buttons (menu, search, quote): square side; smaller on phones */
	--kcg-tool-ic: 22px; /* their icon size */
	--kcg-fab: 56px; /* floating quote button (desktop, once the menu bar is stuck): diameter */
	--kcg-fab-ic: 24px; /* its icon */
	--kcg-fab-gap: var(--wp--preset--spacing--60); /* its distance from the bottom-right corner of the window */
	--kcg-panel-gap: 64px;
	--kcg-title-h: var(--kcg-panel-ic); /* height of a panel heading (2 lines when it wraps); theme.js sets it per panel so the pills and "⋯" stay centred on it */
	--kcg-sugg-max: min(70vh, 560px); /* tallest the search suggestions box gets before it scrolls */
	--kcg-check: 14px; /* tick box / radio of the listing filters */
	--kcg-scroll-w: 6px; /* thin scrollbar of boxes that scroll on their own (filters, side column, menus) */
	--kcg-tabs-w: 0px; /* width taken by the pill tabs (+ "⋯") beside a panel heading; theme.js sets it per panel */ /* strip left of the panel: the menu button stays visible and tappable there */
	--kcg-pc-name-lines: 2; /* product card name lines; 3 in cards narrower than 210px, 4 below 160px (container queries at the end of this file), so the model code (e.g. KC-D21) stays visible */
	--kcg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6l-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root:has(> body.admin-bar) { --kcg-adminbar-h: var(--wp-admin--admin-bar--height); }
/* Every in-page jump (#danh-muc, #showroom, article contents, future anchors) stops below the sticky menu bar.
   :root, not html: it must beat the admin bar's own html { scroll-padding-top } (our value already includes it). */
:root { scroll-padding-top: var(--kcg-sticky-top); }

/* Top-level parts touch each other (top bar, header, main, footer); spacing lives inside each part. */
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- top bar: icon + text pairs; hours and numbers come from Settings › KCG settings ---------- */
.kcg-topbar .wp-block-icon { flex: none; }
.kcg-topbar .wp-block-icon svg { width: 15px; height: 15px; }

/* ---------- header ---------- */
/* Only the blue menu bar sticks. The header part's own box is removed (display: contents) so the bar's sticky
   range is the whole page instead of the header part. */
.kcg-sticky { display: contents; }
.kcg-sticky > .kcg-navbar { position: sticky; top: var(--kcg-adminbar-h); z-index: var(--wp--custom--z--header); }
.kcg-header { box-shadow: 0 1px 0 var(--wp--preset--color--line); }
/* Floating quote button (footer part, desktop only): a round icon button in the bottom-right corner, shown once the
   header row has scrolled away and the menu bar is stuck at the top (theme.js sets html.kcg-stuck), i.e. once the
   header "Báo giá" button is out of sight. The count badge (quote.js) sits on its top-right edge, as on the phone
   header button. The label stays for screen readers (font-size 0). */
.kcg-fab { position: fixed; right: var(--kcg-fab-gap); bottom: var(--kcg-fab-gap); z-index: var(--wp--custom--z--bottom-nav); margin: 0 !important; opacity: 0; visibility: hidden; transform: translateY(var(--wp--preset--spacing--40)) scale(.9); transition: opacity .25s var(--wp--custom--ease), transform .25s var(--wp--custom--ease), visibility 0s .25s; } /* ds-ok: entrance scale */
.kcg-stuck .kcg-fab { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--wp--custom--ease), transform .25s var(--wp--custom--ease); }
.kcg-fab .wp-block-button__link { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; width: var(--kcg-fab); height: var(--kcg-fab); min-height: var(--kcg-fab); padding: 0; border-radius: var(--wp--preset--border-radius--pill); box-shadow: var(--wp--preset--shadow--float); font-size: 0; line-height: 0; }
.kcg-fab .kcg-quote-open .kcg-btn-ic { display: flex; } /* beats ".kcg-quote-open .kcg-btn-ic" (desktop header shows text instead) */
.kcg-fab .kcg-btn-ic svg { width: var(--kcg-fab-ic); height: var(--kcg-fab-ic); }
.kcg-fab .kcg-badge { position: absolute; top: calc(-1 * var(--wp--preset--spacing--10)); right: calc(-1 * var(--wp--preset--spacing--10)); box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 var(--wp--preset--spacing--10); margin: 0; font-size: 12px; line-height: 22px; box-shadow: 0 0 0 2px var(--wp--preset--color--surface); } /* ds-ok: badge a size up for the bigger button; round for 1 digit, a pill for more */
@media (max-width: 900px) { .kcg-fab { display: none !important; } } /* phones and tablets have the bottom bar and the header button; !important: the flex layout of the Buttons block sets display (body .is-layout-flex) */
@media (prefers-reduced-motion: reduce) { .kcg-fab, .kcg-stuck .kcg-fab { transform: none; transition: none; } }
.kcg-header__row .wp-block-site-logo { flex: none; }
.kcg-header__tools, .kcg-navbar__close { display: none !important; } /* menu + search buttons: tablets and phones only (the flex group layout sets display) */
.kcg-quote-open .kcg-btn-ic { display: none; } /* the quote icon replaces the text on tablets and phones only */
.kcg-search { flex: 1 1 auto; max-width: 720px; }
.kcg-search .wp-block-search__inside-wrapper { border: 2px solid var(--wp--preset--color--brand); border-radius: var(--wp--preset--border-radius--medium); padding: 0; background: var(--wp--preset--color--surface); }
.kcg-search .wp-block-search__input { border: 0; min-height: var(--wp--custom--control-height); padding: 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--medium); background: transparent; }
.kcg-search .wp-block-search__input:focus { outline: none; }
.kcg-search .wp-block-search__inside-wrapper:focus-within { box-shadow: 0 0 0 3px var(--wp--preset--color--brand-soft); }
.kcg-search .wp-block-search__button { margin: 0; border-radius: 0 var(--wp--preset--border-radius--small) var(--wp--preset--border-radius--small) 0; min-width: 56px; }
.kcg-act__ic { display: grid; place-items: center; width: var(--wp--custom--control-height); height: var(--wp--custom--control-height); border-radius: 50%; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); }
.kcg-act__ic svg { width: 22px; height: 22px; fill: currentColor; }
.kcg-act__txt { line-height: 1.3; }
.kcg-act__txt > p { margin: 0; } /* label + number stacked tight (the number is its own paragraph, bound to the settings) */
.kcg-act__label { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-2); }
.kcg-act__num { font-weight: 600; }
.kcg-act__txt a { color: var(--wp--preset--color--ink); }

.kcg-navbar__row { min-height: var(--kcg-menubar-h); align-items: stretch !important; }
/* "Danh mục sản phẩm": icon + label; hovering (or tabbing into) it drops the vertical category menu down */
.kcg-navbar__cat { position: relative; align-items: center; gap: var(--wp--preset--spacing--20) !important; width: 260px; margin: 0; padding: 0 var(--wp--preset--spacing--40); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.kcg-navbar__cat p { margin: 0; }
.kcg-navbar__cat > p a { color: var(--wp--preset--color--on-brand); text-decoration: none; } /* the label only: links in the drop-down keep their own colours */
.kcg-navbar__caticon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.kcg-cm-dropdown { position: absolute !important; top: 100%; left: 0; width: 100%; display: none; z-index: var(--wp--custom--z--flyout); border-radius: 0 0 var(--wp--preset--border-radius--medium) var(--wp--preset--border-radius--medium); box-shadow: var(--wp--preset--shadow--float); text-transform: none; letter-spacing: 0; font-weight: 400; }
.kcg-navbar__cat:hover .kcg-cm-dropdown, .kcg-navbar__cat:focus-within .kcg-cm-dropdown { display: block; }
.kcg-mainnav .wp-block-navigation-item__content { position: relative; display: flex; align-items: center; height: var(--kcg-menubar-h); padding: 0 var(--wp--preset--spacing--40); font-weight: 500; font-size: var(--wp--preset--font-size--small); text-decoration: none; }
.kcg-mainnav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); bottom: 0; height: var(--kcg-indicator); background: currentColor; transform: scaleX(0); transition: transform .25s var(--wp--custom--ease); }
.kcg-mainnav .wp-block-navigation-item__content:hover::after,
.kcg-mainnav .wp-block-navigation-item__content:focus-visible::after,
.kcg-mainnav :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::after,
.kcg-mainnav .wp-block-navigation-item__content[aria-current]::after { transform: none; } /* the page being viewed keeps the hover underline */
.kcg-mainnav .wp-block-navigation__container { gap: 0; }
/* "Sản phẩm" submenu: only in the phone/tablet menu panel (<=900px). On wider screens the category box beside the menu
   bar already lists the categories, so the submenu and its arrow are not shown. */
@media (min-width: 901px) {
	.kcg-mainnav :is(.wp-block-navigation__submenu-icon, .wp-block-navigation__submenu-container) { display: none !important; }
}

/* ---------- shared surfaces ---------- */
.kcg-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); padding: var(--wp--preset--spacing--60); }
.kcg-card--deep { border-color: var(--wp--preset--color--deep); }
.kcg-crumb { color: var(--wp--preset--color--ink-2); margin-bottom: var(--wp--preset--spacing--40); }
.kcg-crumb [aria-current] { color: var(--wp--preset--color--ink); font-weight: 500; } /* the page being viewed: dark text, links stay blue */
.kcg-grid { gap: var(--wp--preset--spacing--40); }

/* "see all" links (design C .all): every link inside .kcg-all gets the same trailing chevron, on every page */
.kcg-all { margin: var(--wp--preset--spacing--50) 0 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--brand-ink); }
.kcg-all a { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); }
.kcg-all a::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--kcg-chevron) center / contain no-repeat; mask: var(--kcg-chevron) center / contain no-repeat; }
.kcg-all .wp-block-icon { flex: none; }
.kcg-all .wp-block-icon svg { width: 16px; height: 16px; }

/* panel: white card with an icon + title row (home sections, product tabs and related row, contact, about) */
.kcg-panel { margin-top: var(--wp--preset--spacing--60) !important; padding: var(--wp--preset--spacing--60); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); }
.kcg-panel__h { margin-bottom: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--line); }
.kcg-panel__t { gap: var(--wp--preset--spacing--30) !important; }
.kcg-panel__t h2 { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.kcg-panel__ic { display: grid !important; place-items: center; flex: none; width: var(--kcg-panel-ic); height: var(--kcg-panel-ic); border-radius: var(--wp--preset--border-radius--small); background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }
.kcg-panel__ic svg { width: 26px; height: 26px; fill: currentColor; }
.kcg-panel__h .kcg-all { margin: 0; }

/* round icon badges used on several pages: 44px brand-soft circle (home promises, contact list) and the category icon block */
.kcg-usp__ic { display: grid !important; place-items: center; flex: none; width: var(--wp--custom--control-height); height: var(--wp--custom--control-height); border-radius: 50%; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); }
.kcg-usp__ic svg { width: 22px; height: 22px; fill: currentColor; }
.kcg-term-icon { display: grid; place-items: center; border-radius: 50%; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); transition: background-color .25s var(--wp--custom--ease), color .25s var(--wp--custom--ease), transform .25s var(--wp--custom--ease); }
.kcg-term-icon--large { width: 76px; height: 76px; }
.kcg-term-icon--large svg { width: 40px; height: 40px; fill: currentColor; }
.kcg-term-icon--small { width: 32px; height: 32px; }
.kcg-term-icon--small svg { width: 20px; height: 20px; fill: currentColor; }

/* core Tabs: pill buttons, or a vertical list (class kcg-tabs-vertical: showroom part) */
.kcg-tabs .wp-block-tab-list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--50); border: 0; }
.kcg-tabs .wp-block-tab-list [role="tab"] { min-height: 36px; padding: 0 var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: 500 var(--wp--preset--font-size--small)/1 var(--wp--preset--font-family--be-vietnam-pro); cursor: pointer; }
.kcg-tabs .wp-block-tab-list [role="tab"][aria-selected="true"] { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }
/* core draws a 2px underline under the selected tab (:where(.wp-block-tab-list button)[aria-selected]::before); our pills and
   cards mark the selected tab by colour, so the underline only showed as a stray line that ignores the rounded corners */
.kcg-tabs .wp-block-tab-list [role="tab"]::before { content: none; }
/* panel heading + pill tabs: the pills sit on the heading row, right side, at every width. The tabs wrapper box is dropped
   (display: contents) so its tab list and panels become cells of the panel grid. Pills that do not fit go into the
   "⋯" menu next to them (theme.js), and the heading gets the rest of the row (--kcg-tabs-w, may wrap). */
.kcg-panel:has(> .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical)) > .kcg-panel__h > .kcg-panel__t { max-width: calc(100% - var(--kcg-tabs-w)); }
.kcg-panel > .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical) > .wp-block-tab-list { flex-wrap: nowrap; min-width: 0; }
.kcg-panel > .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical) > .wp-block-tab-list [role="tab"] { flex: none; white-space: nowrap; } /* never squeezed: theme.js measures their real width */
.kcg-tabs .wp-block-tab-list [role="tab"][hidden] { display: none !important; }
.kcg-tabmore { grid-area: 1 / 3; align-self: start; position: relative; display: flex; align-items: center; height: var(--kcg-title-h); margin: 0 0 0 var(--wp--preset--spacing--20) !important; } /* !important: the Tabs block's flow layout gives the element after the tab list a top margin (block gap) */
.kcg-tabmore[hidden] { display: none; }
.kcg-tabmore__btn { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); cursor: pointer; } /* ds-ok: square twin of a 36px pill */
.kcg-tabmore__btn svg { width: 18px; height: 18px; fill: currentColor; } /* ds-ok: icon size */
.kcg-tabmore__btn:hover, .kcg-tabmore__btn[aria-expanded="true"] { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.kcg-tabmore__btn.is-active { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); } /* the chosen category is in the menu */
.kcg-tabmore__menu { position: absolute; top: calc(100% + var(--wp--preset--spacing--10)); right: 0; z-index: var(--wp--custom--z--flyout); display: flex; flex-direction: column; min-width: 240px; max-height: 60vh; overflow-y: auto; padding: var(--wp--preset--spacing--20) 0; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--float); } /* ds-ok: same drop-down as the "Sản phẩm" submenu */
.kcg-tabmore__menu[hidden] { display: none; }
.kcg-tabmore__menu button { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border: 0; background: none; color: var(--wp--preset--color--ink); font: inherit; font-size: var(--wp--preset--font-size--small); text-align: left; white-space: nowrap; cursor: pointer; }
.kcg-tabmore__menu button:is(:hover, :focus-visible) { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--brand); }
.kcg-tabmore__menu button.is-current { color: var(--wp--preset--color--brand); font-weight: 600; } /* the chosen category, when no pill has room for it */
.kcg-panel:has(> .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical)) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.kcg-panel:has(> .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical)) > * { margin-block: 0; }
.kcg-panel > .kcg-panel__h:has(+ .kcg-tabs:not(.kcg-tabs-vertical)) { grid-area: 1 / 1 / 2 / 4; margin-bottom: var(--wp--preset--spacing--50); }
.kcg-panel > .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical) { display: contents; }
.kcg-panel > .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical) > .wp-block-tab-list { grid-area: 1 / 2; align-self: start; align-items: center; height: var(--kcg-title-h); margin: 0; }
.kcg-panel > .kcg-panel__h + .kcg-tabs:not(.kcg-tabs-vertical) > .wp-block-tab-panels { grid-column: 1 / -1; }
.kcg-tabs-vertical { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--wp--preset--spacing--40); align-items: start; }
/* Tabs keep a flow layout (core locks it), so its block-gap margin would push the second grid cell (the map) down */
.kcg-tabs-vertical > * { margin-block: 0; }
.kcg-tabs-vertical .wp-block-tab-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--wp--preset--spacing--30); margin: 0; }
.kcg-tabs-vertical .wp-block-tab-list [role="tab"] { width: 100%; justify-content: flex-start; min-height: 64px; padding: var(--wp--preset--spacing--40); border-radius: var(--wp--preset--border-radius--medium); text-align: left; font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
.kcg-tabs-vertical .wp-block-tab-list [role="tab"][aria-selected="true"] { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand-ink); border-color: var(--wp--preset--color--brand); }
/* tab icon (design C): a kcg-ic-<icon> class on a Tab puts that icon in its button, as a round badge that fills when selected */
.kcg-tabs-vertical .wp-block-tab-list [role="tab"]:has(.kcg-btn-ic) { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: center; } /* ds-ok: icon badge size (design C .store__tabs) */
.kcg-tabs-vertical [role="tab"] .kcg-btn-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); } /* ds-ok: icon badge size */
.kcg-tabs-vertical [role="tab"] .kcg-btn-ic svg { width: 22px; height: 22px; fill: currentColor; } /* ds-ok: icon size */
.kcg-tabs-vertical [role="tab"][aria-selected="true"] .kcg-btn-ic { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }

/* showroom part: every tab is a framed map (Google map; the hotline tab an image block) with a card of name, address or
   hours, and buttons. The tab panel is a size container: the card floats on the map's lower left corner only when the map
   is wide enough to leave Google's logo (bottom centre) visible; a narrower map keeps the card under it. */
.kcg-tabs-vertical .wp-block-tab-panel { position: relative; container-type: inline-size; }
.kcg-map, .kcg-store__frame { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); overflow: hidden; background: var(--wp--preset--color--paper-2); } /* the frame shows before the lazy map loads */
.kcg-map iframe, .kcg-store__frame img { display: block; }
.kcg-store__frame { position: relative; margin: 0; }
.kcg-store__frame img { width: 100%; object-fit: cover; } /* height: the image block's own Height setting (same as the map height) */
.kcg-store__frame figcaption { position: absolute; top: 0; right: 0; margin: 0; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); background: var(--wp--preset--color--surface); border-bottom-left-radius: var(--wp--preset--border-radius--small); font-size: var(--wp--preset--font-size--x-small); } /* map credit (design C .store__attr) */
.kcg-store__card { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); text-wrap: pretty; } /* pretty: no lone last word ("xem.") in the narrow card */
@container (min-width: 800px) { /* ds-ok: container queries cannot read var(). At 800 Google's logo (52px, bottom centre) starts at 374, right of the card edge 8 + 360 = 368; a 1280px screen with a scrollbar gives a 806-812px map */
	:is(.kcg-map, .kcg-store__frame) + .kcg-store__card { position: absolute; left: var(--wp--preset--spacing--20); bottom: var(--wp--preset--spacing--20); max-width: 360px; margin: 0; border: 0; box-shadow: var(--wp--preset--shadow--float); } /* ds-ok: card width (design C .store__card); offset 8 also hides Google's satellite toggle fully */
}
.kcg-store__addr { color: var(--wp--preset--color--ink-2); }
.kcg-store__hours { margin: 0; font-weight: 600; }
.kcg-store__hours .wp-block-icon { flex: none; color: var(--wp--preset--color--brand); }
.kcg-store__hours .wp-block-icon svg { width: 18px; height: 18px; }
.kcg-store__note { color: var(--wp--preset--color--ink-2); }
/* card buttons (design C .store__card .row .btn padding): a pair that fits shares the row and fills it, a pair that does not
   fit gives each button a full row. No screen width involved, so it holds for any label length and in the floating card. */
.kcg-store__card .wp-block-buttons > .wp-block-button { flex: 1 1 auto; }
.kcg-store__card .wp-block-button__link { width: 100%; padding-inline: var(--wp--preset--spacing--40); }

/* product card */
.kcg-pc { height: 100%; gap: var(--wp--preset--spacing--10); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); overflow: hidden; padding-bottom: var(--wp--preset--spacing--40); transition: border-color .2s var(--wp--custom--ease), box-shadow .2s var(--wp--custom--ease); }
.kcg-pc:hover { border-color: var(--wp--preset--color--brand-line); box-shadow: var(--wp--preset--shadow--lift); }
/* Inner spacing uses PADDING: WordPress layout CSS (.is-layout-flex > :is(*,div) { margin: 0 }, specificity 0,1,1)
   resets margins on every child of a flex group, so margins here would be silently ignored. */
.kcg-pc > :not(.kcg-pc__img) { padding-inline: var(--wp--preset--spacing--40); }
.kcg-pc > .kcg-pc__img, .kcg-pc > .wp-block-kcg-add-to-quote { align-self: stretch; } /* full-width photo + button (design C) */
.kcg-pc > .wp-block-kcg-add-to-quote { margin-top: auto !important; padding-top: var(--wp--preset--spacing--30); } /* button to the card bottom; !important beats the layout margin reset */
.kcg-pc__img img { padding: var(--wp--preset--spacing--30); transition: transform .5s var(--wp--custom--ease); }
.kcg-pc:hover .kcg-pc__img img { transform: scale(1.04); }
.kcg-pc__cat { align-self: stretch; min-width: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* stretch + min-width 0: the ellipsis needs a bounded box inside the flex card */
.kcg-pc__cat a { color: inherit; }
.kcg-pc__cat .wp-block-post-terms__separator { white-space: inherit; } /* core pre-wraps the ", " separator, which broke the one-line ellipsis */
.kcg-pc__name { font-size: var(--wp--preset--font-size--small); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: var(--kcg-pc-name-lines); -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * var(--kcg-pc-name-lines)); }
.kcg-pc__name a { color: var(--wp--preset--color--ink); }

/* Core shows post-title links as inline-block, one unbreakable box that a line clamp cannot cut (card and side-list titles) */
.wp-block-post-title a { display: inline; }

/* post card */
.kcg-post { height: 100%; gap: var(--wp--preset--spacing--20); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); overflow: hidden; padding-bottom: var(--wp--preset--spacing--40); }
.kcg-post > :not(.kcg-post__img) { padding-inline: var(--wp--preset--spacing--40); } /* padding, see .kcg-pc */
.kcg-post > .kcg-post__img { align-self: stretch; }
/* date line: calendar icon + date (core Icon + Post Date blocks) */
.kcg-post__date { align-items: center; color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--x-small); }
.kcg-post__dateic { display: grid !important; }
.kcg-post__dateic svg { width: 16px; height: 16px; fill: currentColor; }

/* product page */
.kcg-pdp__info > * { margin-block: 0; }
.kcg-pdp__info { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
/* template part "product-highlights" (price box, buttons, promises): its wrapper box is dropped so its blocks
   join the column's flex flow and spacing, exactly as if they were placed in the template itself */
.kcg-pdp__info > .wp-block-template-part { display: contents; }
.kcg-pdp__info > .wp-block-template-part > * { margin-block: 0; }
.kcg-pdp__cat a { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.kcg-pdp .wp-block-post-title { text-wrap: balance; }
.kcg-nowrap { white-space: nowrap; }
/* "Mã KC-D16 · Chất liệu Acrylic": each pair hides itself when its bound value is empty */
.kcg-meta { column-gap: var(--wp--preset--spacing--30) !important; row-gap: 0 !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.kcg-meta__i { gap: var(--wp--preset--spacing--10) !important; }
.kcg-meta__i:has(.kcg-meta__v:empty), .kcg-meta:not(:has(.kcg-meta__v:not(:empty))) { display: none; }
.kcg-meta__i + .kcg-meta__i::before { content: "·"; margin-right: var(--wp--preset--spacing--20); }
.kcg-meta__v { font-weight: 600; color: var(--wp--preset--color--ink); }
.kcg-buyrow { gap: var(--wp--preset--spacing--30); align-items: center; }
/* tabs: description + spec table, shipping + warranty */
.kcg-ptabs .wp-block-tab-list { padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--line); }
.kcg-prose table { width: 100%; border-collapse: collapse; border: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--small); } /* framed on all four sides: rows alone left the right edge open */
.kcg-prose th, .kcg-prose td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border: 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: top; }
.kcg-prose tr > :first-child { width: 34%; color: var(--wp--preset--color--ink-2); background: var(--wp--preset--color--paper); }
.kcg-policy ul { padding-left: var(--wp--preset--spacing--50); }
/* product rows (home shelves, related products): design C 5 / 4 / 3 / 2 columns, and an incomplete last row is hidden
   whatever the product count ("see all" links list every product). The selector finds the card that starts a last row
   shorter than the column count, plus every card after it; :not(:first-child) keeps a set smaller than one row.
   Ranges use < / <= so they neither overlap the 2-column phone rule (max-width: 640px) nor leave fractional-width gaps. */
@media (width > 1180px) {
	:is(.kcg-shelf, .kcg-related) .kcg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child),
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child) ~ * { display: none; }
}
@media (900px < width <= 1180px) {
	:is(.kcg-shelf, .kcg-related) .kcg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ * { display: none; }
}
@media (640px < width <= 900px) {
	:is(.kcg-shelf, .kcg-related) .kcg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child) ~ * { display: none; }
}
@media (width <= 640px) {
	:is(.kcg-shelf, .kcg-related) .kcg-grid > :nth-child(2n+1):last-child:not(:first-child) { display: none; }
	.kcg-pdp.kcg-card { padding: var(--wp--preset--spacing--40); }
}
/* promises under the buttons: one core Icon + paragraph per row (icon and text both editable in the part) */
.kcg-usp-list { padding: var(--wp--preset--spacing--30) 0 0; border-top: 1px solid var(--wp--preset--color--line); }
.kcg-usp-list .wp-block-icon { flex: none; color: var(--wp--preset--color--brand); }
.kcg-usp-list .wp-block-icon svg { width: 18px; height: 18px; }
.kcg-usp-list a { font-weight: 600; }

/* article */
.kcg-mini-posts li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: center; }
.kcg-mini-posts .wp-block-latest-posts__featured-image { margin: 0; }
.kcg-mini-posts .wp-block-latest-posts__featured-image img { border-radius: var(--wp--preset--border-radius--small); }

/* ---------- footer ---------- */
.kcg-footer__h { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: var(--wp--preset--spacing--40); }
.kcg-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); } /* the category list (Terms Query) spaces its rows natively */
.kcg-footer__arrows li { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; }
.kcg-footer__arrows li::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--kcg-chevron) center / contain no-repeat; mask: var(--kcg-chevron) center / contain no-repeat; }
/* category rows: the category's own icon (kcg/term-icon), bare, before the name (design C .foot li>a .i) */
.kcg-footer .kcg-term-icon { width: auto; height: auto; margin-right: var(--wp--preset--spacing--10); background: none; color: var(--wp--preset--color--on-deep); } /* + the row's 4px gap = design 8px */
.kcg-footer .kcg-term-icon svg { width: 18px; height: 18px; }
.kcg-footer__tel { width: max-content; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.kcg-footer__tel svg { width: 20px; height: 20px; fill: currentColor; }
.kcg-footer__tel > .wp-block-icon { flex: none; }
.kcg-footer__telt { line-height: 1.3; }
.kcg-footer__telt > p { margin: 0; }
.kcg-footer__hotline { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; }
.kcg-footer .kcg-footer__hotline a { color: var(--wp--preset--color--on-deep); } /* beats the footer link colour (element style, 0,1,1) */
/* showroom column: icon + address / email rows, values from Settings › KCG settings */
.kcg-footer__row > .wp-block-icon { flex: none; color: var(--wp--preset--color--on-deep); }
.kcg-footer__row svg { width: 16px; height: 16px; margin-top: .2em; } /* centre the icon on the first text line */
.kcg-footer__end { border-top: 1px solid var(--wp--preset--color--deep-line); padding-top: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--70); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
	/* Compact header: [menu][search]  logo  [quote]. The whole header part sticks. The search opens as an overlay under
	   the header row; the menu is a panel that slides in from the right (theme.js toggles html.kcg-search-open /
	   html.kcg-menu-open; a click outside, the menu button again, the panel's close button or Esc closes). */
	.kcg-sticky { display: block; position: sticky; top: var(--kcg-adminbar-h); z-index: var(--wp--custom--z--header); }
	.kcg-menu-open .kcg-sticky { z-index: var(--wp--custom--z--drawer); } /* panel + header above the phone bottom bar */
	.kcg-header { position: relative; padding-block: var(--wp--preset--spacing--20) !important; } /* !important: beats the block's own 16px padding (desktop keeps it) */
	.kcg-header__row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "tools logo acts"; align-items: center; gap: 0 var(--wp--preset--spacing--30) !important; }
	:root { --kcg-menubar-h: calc(max(var(--wp--custom--control-height), var(--kcg-logo-tablet) * .9) + 2 * var(--wp--preset--spacing--20)); } /* sticky header height (logo ~1.11:1): in-page jumps stop below it */
	.kcg-header__row > * { margin: 0; }
	.kcg-header__tools { display: flex !important; grid-area: tools; justify-self: start; }
	.kcg-header__tools .wp-block-buttons { flex-wrap: nowrap; gap: var(--wp--preset--spacing--20); }
	.kcg-header__row .wp-block-site-logo { grid-area: logo; }
	.kcg-header__row .wp-block-site-logo img { width: var(--kcg-logo-tablet); height: auto; }
	.kcg-header__acts { grid-area: acts; justify-self: end; }
	.kcg-act-call { display: none !important; }
	/* search: an overlay strip under the header row, so the header itself never grows */
	.kcg-search { display: none; position: absolute; top: 100%; left: 0; right: 0; max-width: none; margin: 0 !important; padding: var(--wp--preset--spacing--30) var(--wp--style--root--padding-left); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--float); }
	.kcg-search-open .kcg-search { display: block; }
	/* icon-only square buttons; the label stays for screen readers (font-size 0 keeps it in the accessibility tree).
	   No gap: the zero-size text must not push the icon off centre. */ /* scoped to the sticky header: the same buttons elsewhere (e.g. the home "send your size" strip) keep their text */
	.kcg-sticky :is(.kcg-tool, .kcg-quote-open) .wp-block-button__link { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; width: var(--kcg-tool); height: var(--kcg-tool); min-height: var(--kcg-tool); padding: 0; font-size: 0; line-height: 0; }
	.kcg-sticky :is(.kcg-tool, .kcg-quote-open) .kcg-btn-ic { display: flex; }
	.kcg-sticky :is(.kcg-tool, .kcg-quote-open) .kcg-btn-ic svg { width: var(--kcg-tool-ic); height: var(--kcg-tool-ic); }
	.kcg-menu-open .kcg-ic-menu-2 .wp-block-button__link, .kcg-search-open .kcg-ic-search .wp-block-button__link { background: var(--wp--preset--color--brand-soft); border-color: var(--wp--preset--color--brand); }
	/* the quote count sits as a round badge on the button's top-right corner */
	.kcg-sticky .kcg-quote-open .kcg-badge { position: absolute; top: calc(-1 * var(--wp--preset--spacing--20)); right: calc(-1 * var(--wp--preset--spacing--20)); box-sizing: border-box; min-width: 20px; padding: 0 var(--wp--preset--spacing--10); margin: 0; font-size: 11px; line-height: 20px; box-shadow: 0 0 0 2px var(--wp--preset--color--surface); } /* ds-ok: badge text size as in quote.css; round for 1 digit, a pill for 2 */
	/* menu: the menu bar becomes a full-height panel sliding in from the right, leaving a strip on the left
	   (the page is dimmed behind it and the menu button stays visible there) */
	.kcg-sticky > .kcg-navbar { position: fixed; top: var(--kcg-adminbar-h); bottom: 0; right: 0; width: min(var(--kcg-panel-w), calc(100% - var(--kcg-panel-gap))); max-width: none; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--wp--custom--ease), visibility 0s .3s; box-shadow: var(--wp--preset--shadow--float); }
	.kcg-menu-open .kcg-sticky > .kcg-navbar { transform: none; visibility: visible; transition: transform .3s var(--wp--custom--ease); }
	.kcg-menu-open body { overflow: hidden; } /* the page behind the panel does not scroll */
	.kcg-menu-open .wp-site-blocks::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--wp--custom--z--drawer) - 1); background: color-mix(in srgb, var(--wp--preset--color--deep) 55%, transparent); }
	.kcg-navbar > * { max-width: none !important; margin: 0 !important; }
	.kcg-navbar__row { flex-direction: column; align-items: stretch !important; min-height: 0; }
	.kcg-navbar__close { display: flex !important; justify-content: flex-end; }
	.kcg-navbar__cat { display: none !important; } /* the categories live under "Sản phẩm" in the menu */
	.kcg-mainnav, .kcg-mainnav .wp-block-navigation__container { width: 100%; }
	.kcg-mainnav .wp-block-navigation__container { flex-direction: column; align-items: stretch; }
	.kcg-mainnav .wp-block-navigation-item { flex-direction: column; align-items: flex-start; }
	.kcg-mainnav .wp-block-navigation-item__content { width: fit-content; height: var(--wp--custom--control-height); padding: 0; font-size: var(--wp--preset--font-size--medium); }
	.kcg-mainnav .wp-block-navigation-item__content::after { left: 0; right: 0; } /* the underline is exactly as long as the text */
	/* "Sản phẩm" submenu: always open in the panel, indented under its parent */
	.kcg-mainnav .wp-block-navigation__submenu-icon { display: none; }
	.kcg-mainnav .wp-block-navigation__submenu-container { position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 0 !important; overflow: visible !important; padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important; border: 0 !important; background: none !important; box-shadow: none !important; }
	.kcg-mainnav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { height: auto; padding: var(--wp--preset--spacing--20) 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-brand); }
	.kcg-topbar__hours { display: none !important; } /* design C: the showroom line stays, the hours go */
	.kcg-tabs-vertical { grid-template-columns: minmax(0, 1fr); }
	/* footer: 2 columns (design C), the Columns block gap spaces both ways */
	.kcg-footer .wp-block-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	:root { --kcg-tool: var(--wp--custom--control-height-sm); --kcg-tool-ic: 20px; } /* ds-ok: phone icon buttons 40px, icon 20px */
	.kcg-topbar__info { display: none !important; }
	.kcg-topbar__row { justify-content: center !important; } /* only the two numbers are left: centred */
	.kcg-panel { padding: var(--wp--preset--spacing--40); }
	/* compact sticky header like design C: small logo, 5 text links spread evenly. The header keeps its own 16px
	   top/bottom padding (block setting); the wrapped rows (logo + button, then search) are 16px apart (design s4). */
	.kcg-footer .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
}
/* product grids: always 2 columns on phones (the grid minimum width would otherwise drop to 1 column) */
@media (max-width: 640px) {
	.kcg-products .kcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--20); }
	.kcg-pc > :not(.kcg-pc__img) { padding-inline: var(--wp--preset--spacing--30); }
	.kcg-add { font-size: var(--wp--preset--font-size--x-small); padding: 0 var(--wp--preset--spacing--20); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* category intro text (long SEO copy from the old site) sits below the products; it reads like an article (class kcg-prose)
   with lines no longer than the text column */
.kcg-termdesc { margin-top: var(--wp--preset--spacing--80); }
.kcg-termdesc > * { max-width: var(--wp--style--global--content-size); }

/* product listing (categories, all products, search): filters left, results right */
.kcg-catl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: start; margin-top: var(--wp--preset--spacing--50); }
.kcg-catl > * { margin: 0 !important; }
.kcg-catm { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } /* toolbar / grid / pagination spacing */
.kcg-catm > * { margin: 0 !important; }
.kcg-catm .kcg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1180px) { .kcg-catm .kcg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { .kcg-catl { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); } }
@media (max-width: 640px) { .kcg-catm .kcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* pagination (core Query Pagination: listings, news, search): 44px boxes 8px apart, current page filled */
.wp-block-query-pagination, .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--20); }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: var(--wp--custom--control-height); min-height: var(--wp--custom--control-height); margin: 0; padding: 0 var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--small); background: var(--wp--preset--color--surface); text-decoration: none; }
.wp-block-query-pagination a.page-numbers:hover, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--brand-soft); text-decoration: none; }
.wp-block-query-pagination a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; } /* same focus ring as buttons (theme.json) */
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); font-weight: 600; }
.wp-block-query-pagination .page-numbers.dots { border: 0; background: none; }
/* phones: the numbers get their own row, "previous" + "next" share the row below (instead of one row each) */
@media (max-width: 640px) { .wp-block-query-pagination-numbers { flex-basis: 100%; order: -1; } }

/* news list: on page 1 the newest article is featured across the full row (image left, text right) */
body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
@media (min-width: 901px) {
	/* 5 rows: flexible spacer, date, title, excerpt, flexible spacer -> text sits in the vertical middle */
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .kcg-post { display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--wp--preset--spacing--70); row-gap: var(--wp--preset--spacing--30); padding-bottom: 0; }
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .kcg-post > * { grid-column: 2; margin: 0 var(--wp--preset--spacing--70) 0 0; }
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .kcg-post > .kcg-post__img { grid-column: 1; grid-row: 1 / -1; min-height: 320px; margin: 0; }
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .kcg-post__img img { height: 100%; object-fit: cover; }
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .kcg-post__date { grid-row: 2; }
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .wp-block-post-title { grid-row: 3; font-size: var(--wp--preset--font-size--xx-large) !important; } /* beats core's !important size preset class */
	body:not(.paged) .kcg-posts .wp-block-post-template > li:first-child .wp-block-post-excerpt { grid-row: 4; }
}

/* article titles in cards read as text (ink), turning blue on hover like design C */
.kcg-post .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.kcg-post:hover .wp-block-post-title a { color: var(--wp--preset--color--brand-ink); text-decoration: none; }

/* ---------- phone bottom bar (footer part): Danh mục · Tìm · Báo giá · Gọi ---------- */
.kcg-bnav { display: none !important; } /* !important: core grid layout sets display on the group */
@media (max-width: 640px) {
	.kcg-bnav { display: grid !important; gap: 0 !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wp--custom--z--bottom-nav); box-sizing: border-box; height: calc(var(--kcg-bnav-h) + env(safe-area-inset-bottom)); margin: 0 !important; padding-bottom: env(safe-area-inset-bottom); background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); }
	.kcg-bnav__i { position: relative; gap: 2px !important; justify-content: center; } /* ds-ok: icon sits right on its label */
	.kcg-bnav__i :is(.wp-block-buttons, .kcg-bnav__a) { line-height: 0; } /* the label box is as tall as the label, no empty line box above it */
	.kcg-bnav__ic { display: grid !important; color: var(--wp--preset--color--ink); }
	.kcg-bnav__ic svg { width: 22px; height: 22px; fill: currentColor; }
	.kcg-bnav .wp-block-buttons { margin: 0; }
	/* the link covers the whole cell, so the icon is tappable too */
	.kcg-bnav__a .wp-block-button__link { position: static; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; line-height: 1.2; }
	.kcg-bnav__a .wp-block-button__link::after { content: ""; position: absolute; inset: 0; }
	.kcg-bnav .kcg-badge { position: absolute; top: var(--wp--preset--spacing--10); left: calc(50% + var(--wp--preset--spacing--20)); margin: 0; }
	body { padding-bottom: calc(var(--kcg-bnav-h) + env(safe-area-inset-bottom)); } /* keep the page end above the bar */
	.kcg-toast { bottom: calc(var(--kcg-bnav-h) + var(--wp--preset--spacing--30)); }
}

/* Imported classic content: the [caption] shortcode writes an inline width (e.g. style="width: 600px") on its figure,
   which pushes phones sideways. Captioned images never grow wider than their column. */
.wp-caption { max-width: 100%; }
.wp-caption img { max-width: 100%; height: auto; }

/* Product names keep their model code (e.g. KC-020): the CARD width decides how many lines the name may use, so every
   grid (home shelves, listings with or without the filter column, related row) follows the same rule at any screen. */
.kcg-pc { container-type: inline-size; }
@container (max-width: 210px) { .kcg-pc__name { --kcg-pc-name-lines: 3; } } /* ds-ok: card widths measured, names cut below ~205px */
@container (max-width: 160px) { .kcg-pc__name { --kcg-pc-name-lines: 4; } } /* ds-ok: 2-per-row cards on 320-360px phones */

/* Headings never end with a lone word on a line (all breakpoints). Zero specificity: block settings still win. */
:where(h1, h2, h3) { text-wrap: balance; }

/* Boxes that scroll on their own (listing filters, article/product side column, the tab "⋯" menu): a thin scrollbar in
   the theme colours, no arrow buttons. Blink (Chrome, Cốc Cốc, Edge) uses ::-webkit-scrollbar only; scrollbar-width is
   given to Firefox alone (@supports), because Blink versions treat the mix differently (arrows, wider bars). */
:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg)::-webkit-scrollbar { width: var(--kcg-scroll-w); height: var(--kcg-scroll-w); }
:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg)::-webkit-scrollbar-button { display: none; }
:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg)::-webkit-scrollbar-track { background: transparent; }
:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg)::-webkit-scrollbar-thumb { border-radius: var(--kcg-scroll-w); background: var(--wp--preset--color--line); }
:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg):hover::-webkit-scrollbar-thumb { background: var(--wp--preset--color--ink-2); }
@supports not selector(::-webkit-scrollbar) {
	:is(.kcg-filters, .kcg-filters__form, .kcg-side, .kcg-tabmore__menu, .kcg-sugg) { scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--line) transparent; }
}