.skm-zone { width: 100%; }
.skm-zone > .skm-zone__inner > :first-child { margin-block-start: 0; }
.skm-zone > .skm-zone__inner > :last-child { margin-block-end: 0; }
.skm-zone--full > .skm-zone__inner { max-width: none; }
/*
 * "Theo khung nội dung": dùng đúng cách Blocksy tính khung .ct-container
 * (Blocksy 2.1.59: width: var(--theme-container-width); max-width: var(--theme-normal-container-max-width)),
 * để mép trái/phải của vùng thẳng hàng với nội dung và footer của Blocksy.
 * SK-03: bỏ padding-inline cũ vì làm vùng lệch so với dòng bản quyền.
 */
.skm-zone--boxed > .skm-zone__inner {
	width: var(--theme-container-width, 90vw);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin-inline: auto;
}
.skm-zone--mobile { display: none; }
@media (max-width: 689.98px) {
	.skm-zone--desktop { display: none; }
	.skm-zone--mobile { display: block; }
}

/* [skm_menu]: a menu inside a zone takes the zone's text colour. */
.skm-menu { margin: 0; padding-left: 1.2em; list-style: disc; }
.skm-menu li { margin: 0 0 .35em; }
.skm-menu a { color: inherit; text-decoration: none; }
.skm-menu a:hover, .skm-menu a:focus { color: inherit; text-decoration: underline; }

/* SK-33: [skm_search] — compact search box (white on the coloured header row). Two-class selectors beat the theme's form styles. */
.skm-hsearch { display: flex; align-items: center; width: 100%; max-width: 420px; height: 38px; margin: 0; background: #fff; border-radius: 5px; overflow: hidden; }
.skm-hsearch .skm-hsearch__input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0 4px 0 14px; border: 0; border-radius: 0; background: transparent; color: #1f2933; font-size: 15px; box-shadow: none; outline: none; }
.skm-hsearch .skm-hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.skm-hsearch .skm-hsearch__btn { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-palette-color-1, #0d8a3a); box-shadow: none; cursor: pointer; }
.skm-hsearch .skm-hsearch__btn:hover { background: var(--skm-tint-1); }
.skm-hsearch:focus-within { box-shadow: 0 0 0 3px var(--skm-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--skm-highlight) 85%, transparent); } /* màu nhấn phụ, modules/layout/tokens.css */
/* In a Blocksy "Text" header element: take the free space between the logo and the menu button. */
.ct-header-text:has(.skm-hsearch) { flex: 1 1 auto; min-width: 0; }
.ct-header-text:has(.skm-hsearch) > .entry-content { width: 100%; }

/* SK-33/SK-36: header top that comes back while scrolling up (every screen size, zones.js). */
.skm-zone--header-top.is-pinned > .skm-zone__inner { position: fixed; top: var(--skm-adminbar-h, 0px); left: 0; right: 0; z-index: 51; background: var(--theme-palette-color-8, #fff); box-shadow: 0 2px 10px rgba(16, 24, 40, .12); transform: translateY(-110%); transition: transform .2s ease; }
.skm-zone--header-top.is-pinned.is-shown > .skm-zone__inner { transform: none; }
body.skm-ht-shown #header [data-sticky*="yes"] { top: calc(var(--skm-adminbar-h, 0px) + var(--skm-ht-h, 0px)) !important; transition: top .2s ease; }
@media (prefers-reduced-motion: reduce) {
	.skm-zone--header-top.is-pinned > .skm-zone__inner, body.skm-ht-shown #header [data-sticky*="yes"] { transition: none; }
}

/* SK-40 (owner 14/10/2026): call-to-action band at the end of every page (pattern with class skm-cta-band in a zone,
   usually "Footer – Tầng trên"): centred text, three buttons side by side, stacked full width on phones. */
.skm-cta-band { text-align: center; border-top: 1px solid var(--skm-tint-3); }
.skm-cta-band > h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.skm-cta-band > p { margin: 0 auto 24px; max-width: 720px; color: #3d4852; }
.skm-cta-band .wp-block-buttons { gap: 12px; }
.skm-cta-band .wp-block-button__link { min-width: 220px; justify-content: center; }
@media (max-width: 689.98px) {
	.skm-cta-band .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.skm-cta-band .wp-block-button, .skm-cta-band .wp-block-button__link { width: 100%; min-width: 0; }
}
/* SK-41 (owner 14/10/2026): three short reasons under the question, side by side (stacked on phones). */
.skm-cta-band > .skm-cta-band__points { list-style: none; margin: 0 auto 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.skm-cta-band__points > li { margin: 0; padding: 14px 16px; border: 1px solid var(--skm-tint-3); border-radius: 10px; background: #fff; font-size: .95rem; line-height: 1.5; color: #3d4852; }
.skm-cta-band__points > li strong { display: block; margin-bottom: 4px; color: var(--theme-palette-color-1, #0d8a3a); }
@media (max-width: 689.98px) { .skm-cta-band > .skm-cta-band__points { grid-template-columns: 1fr; gap: 10px; } }
.skm-cta-band > h2 { text-wrap: balance; }
.skm-zone .skm-cta-band > ul.skm-cta-band__points { padding-inline: 0; margin-inline: auto; } /* not indented like text lists (spacing.css) */
/* SK-83 (18/10/2026): nút tìm kiếm, nút menu và giỏ hàng ở đầu trang to hơn, trong khung vuông bo góc. Màu khung và biểu
   tượng theo màu biểu tượng của đầu trang (--theme-icon-color của Blocksy), không bao giờ đen. */
#header :is(.ct-header-search,.ct-header-trigger),#header .ct-header-cart>.ct-cart-item{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:42px!important;height:42px!important;padding:0!important;border:1.5px solid color-mix(in srgb,var(--theme-icon-color,#fff) 45%,transparent)!important;border-radius:6px!important;background:transparent;transition:background-color .2s,border-color .2s}
@media(max-width:999.98px){#header :is(.ct-header-search,.ct-header-trigger),#header .ct-header-cart>.ct-cart-item{width:36px!important;height:36px!important}#header [data-device="mobile"] [data-row*="middle"] [data-column="start"]{flex:1 1 auto;min-width:0}#header [data-device="mobile"] [data-row*="middle"] [data-column="end"]{flex:0 0 auto}#header [data-device="mobile"] .site-logo-container{display:block;min-width:0;max-width:100%}#header [data-device="mobile"] .site-logo-container img{max-width:100%;height:auto!important;object-fit:contain}}
/* SK-84: điện thoại — logo co lại theo chỗ còn trống, không bị các nút khung vuông đè lên (18/10/2026) */
#header :is(.ct-header-search,.ct-header-trigger):hover,#header .ct-header-cart>.ct-cart-item:hover,#header .ct-header-search.skm-search-open,#header .ct-header-trigger[aria-expanded="true"]{border-color:var(--theme-icon-color,#fff)!important;background:color-mix(in srgb,var(--theme-icon-color,#fff) 14%,transparent)}
#header .ct-header-search svg,#header .ct-header-cart>.ct-cart-item svg{width:20px;height:20px}
#header .ct-header-trigger svg{width:22px;height:22px}
/* SK-85 (18/10/2026): điện thoại, máy tính bảng — logo nằm giữa theo chiều dọc như các nút; vạch đứng mảnh ngăn logo và
   từng nút; bấm giỏ hàng mở giỏ hàng nhỏ ngay dưới đầu trang (cart-drop.js), như nút tìm kiếm và nút menu. */
@media(max-width:999.98px){
#header [data-device="mobile"] .site-logo-container{display:flex;align-items:center}
#header [data-device="mobile"] .site-logo-container img{display:block}
#header [data-device="mobile"] [data-row*="middle"] [data-column="end"] [data-items]>[data-id]{position:relative;margin-left:15px!important}
#header [data-device="mobile"] [data-row*="middle"] [data-column="end"] [data-items]>[data-id]::before{content:"";position:absolute;left:-10px;top:50%;width:1px;height:26px;margin-top:-13px;background:color-mix(in srgb,var(--theme-icon-color,#fff) 35%,transparent);pointer-events:none}
#header [data-device="mobile"] .ct-header-cart.skm-cart-open>.ct-cart-item{border-color:var(--theme-icon-color,#fff)!important;background:color-mix(in srgb,var(--theme-icon-color,#fff) 14%,transparent)}
#header .ct-header-cart.skm-cart-open .ct-cart-content{display:block!important;position:fixed!important;top:calc(var(--skm-cart-top,80px) + 8px)!important;left:12px!important;right:12px!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:calc(100vh - var(--skm-cart-top,80px) - 24px);overflow-y:auto;margin:0!important;padding:16px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;z-index:99999;border-radius:12px;background:#fff;color:#1f2933;box-shadow:0 12px 40px rgba(16,24,40,.25)}
#header .ct-header-cart.skm-cart-open .ct-cart-content :is(.product-data,.quantity,.woocommerce-mini-cart__total,.woocommerce-mini-cart__total strong,.woocommerce-mini-cart__empty-message){color:#1f2933!important}
#header .ct-header-cart.skm-cart-open .ct-cart-content .woocommerce-mini-cart__total{display:flex;justify-content:space-between;margin:12px 0!important;padding-top:12px;border-top:1px solid #e3e9f2}
#header .ct-header-cart.skm-cart-open .ct-cart-content .woocommerce-mini-cart__total .amount{color:var(--theme-palette-color-1,#0b5cad)!important;font-weight:700}
#header .ct-header-cart.skm-cart-open .ct-cart-content .remove{right:0!important;color:var(--theme-palette-color-1,#0b5cad)!important;border:1.5px solid currentColor;border-radius:6px}
#header [data-device="mobile"] .ct-header-cart:not(.skm-cart-open) .ct-cart-content{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.skm-cart-drop__backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--skm-cart-top,80px);z-index:99998;background:rgba(16,24,40,.35)}
}
.skm-cart-drop__backdrop[hidden]{display:none}