/*
    Story 2.1: Site B (trongdoitam.net) "Mộc Trầm" shell styles.
    Loaded only by _LayoutTrongDoiTam.cshtml. Plain CSS (no gulp/SCSS step),
    mobile-first, tablet breakpoint at 768px. Token values come from
    ux-trongdoitam DESIGN.md's frontmatter - change them there first.

    Bootstrap CSS is still loaded (existing partials use its utilities); its
    font/color variables are re-pointed at the tokens below so nothing on
    Site B falls back to Bootstrap's own palette or system font.
*/

/* ---------- Tokens ---------- */
:root {
    --sb-background: #F5EFE6;
    --sb-surface: #FFFFFF;
    --sb-surface-sunken: #EFE7D8;
    --sb-on-surface: #3A2E22;
    --sb-on-surface-muted: #7A6A56;
    --sb-primary: #8B5A2B;
    --sb-primary-rgb: 139, 90, 43;
    --sb-primary-hover: #744A22;
    --sb-on-primary: #FFFFFF;
    --sb-secondary: #A97142;
    --sb-on-secondary: #FFFFFF;
    --sb-border: #DCCFB8;
    --sb-border-subtle: #EAE1CD;
    --sb-error: #A63B2E;
    --sb-on-error: #FFFFFF;

    --sb-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --sb-radius-sm: 6px;
    --sb-radius-md: 10px;
    --sb-radius-lg: 14px;
    --sb-radius-full: 9999px;

    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-5: 24px;
    --sb-space-6: 32px;
    --sb-space-8: 48px;
    --sb-gutter: 16px;
    --sb-card-gap: 12px;
    --sb-section-gap: 32px;

    --sb-nav-h: 56px;
    --sb-bar-h: 64px;
    --sb-bar-total: calc(var(--sb-bar-h) + env(safe-area-inset-bottom, 0px));
    --sb-bar-shadow: 0 -4px 14px rgba(58, 46, 34, 0.10);

    /* Bootstrap variable overrides */
    --bs-body-font-family: var(--sb-font);
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--sb-on-surface);
    --bs-body-color-rgb: 58, 46, 34;
    --bs-body-bg: var(--sb-background);
    --bs-body-bg-rgb: 245, 239, 230;
    --bs-emphasis-color: var(--sb-on-surface);
    --bs-secondary-color: var(--sb-on-surface-muted);
    --bs-heading-color: var(--sb-on-surface);
    --bs-link-color: var(--sb-primary);
    --bs-link-color-rgb: var(--sb-primary-rgb);
    --bs-link-hover-color: var(--sb-primary);
    --bs-link-hover-color-rgb: var(--sb-primary-rgb);
    --bs-primary: var(--sb-primary);
    --bs-primary-rgb: var(--sb-primary-rgb);
    --bs-secondary: var(--sb-secondary);
    --bs-secondary-rgb: 169, 113, 66;
    --bs-danger: var(--sb-error);
    --bs-danger-rgb: 166, 59, 46;
    --bs-form-invalid-color: var(--sb-error);
    --bs-form-invalid-border-color: var(--sb-error);
    --bs-border-color: var(--sb-border);
    --bs-border-radius: var(--sb-radius-md);
    --bs-border-radius-sm: var(--sb-radius-sm);
    --bs-border-radius-lg: var(--sb-radius-lg);
    --bs-focus-ring-color: rgba(var(--sb-primary-rgb), 0.35);
}

@media (min-width: 768px) {
    :root {
        --sb-gutter: 24px;
    }
}

/* ---------- Base ---------- */
html {
    background: var(--sb-background);
}

/* Keep focused / anchored content clear of the fixed nav and sticky bar. */
html:has(> body.sb-has-nav) {
    scroll-padding-top: var(--sb-nav-h);
}

html:has(> body.sb-has-bar) {
    scroll-padding-bottom: var(--sb-bar-total);
}

body.site-b {
    font-family: var(--sb-font);
    background: var(--sb-background);
    color: var(--sb-on-surface);
}

body.site-b.sb-has-nav {
    padding-top: var(--sb-nav-h);
}

/* Body bottom padding equals the sticky bar's height - only when the bar exists. */
body.site-b.sb-has-bar {
    padding-bottom: var(--sb-bar-total);
}

/*
    analytics-consent.js pads the body inline by the banner's height while
    the banner shows, which replaces the bar padding above. The margin adds
    the bar's height back on top so the page end clears banner + bar.
*/
body.site-b.sb-has-bar:has(> [data-consent-banner]:not([hidden])) {
    margin-bottom: var(--sb-bar-total);
}

.site-b h1, .site-b h2, .site-b h3, .site-b h4, .site-b h5, .site-b h6 {
    font-family: var(--sb-font);
    color: var(--sb-on-surface);
    font-weight: 700;
}

.site-b h1 { font-size: 24px; line-height: 1.3; }
.site-b h2 { font-size: 20px; line-height: 1.35; }
.site-b h3 { font-size: 17px; line-height: 1.4; font-weight: 600; }

.site-b a {
    color: var(--sb-primary);
}

.site-b :focus-visible {
    outline: 3px solid var(--sb-primary);
    outline-offset: 2px;
}

.site-b .container,
.sb-container {
    --bs-gutter-x: calc(var(--sb-gutter) * 2);
}

.sb-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sb-gutter);
    padding-right: var(--sb-gutter);
}

.sb-icon {
    flex-shrink: 0;
}

.site-b .btn-primary {
    --bs-btn-bg: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-color: var(--sb-on-primary);
    --bs-btn-hover-bg: var(--sb-primary-hover);
    --bs-btn-hover-border-color: var(--sb-primary-hover);
    --bs-btn-hover-color: var(--sb-on-primary);
    --bs-btn-active-bg: var(--sb-primary-hover);
    --bs-btn-active-border-color: var(--sb-primary-hover);
    --bs-btn-disabled-bg: var(--sb-primary);
    --bs-btn-disabled-border-color: var(--sb-primary);
    --bs-btn-focus-shadow-rgb: var(--sb-primary-rgb);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--sb-radius-sm);
}

.site-b .form-control:focus,
.site-b .form-select:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--sb-primary-rgb), 0.2);
}

/* ---------- Skip link ---------- */
.sb-skip-link {
    position: absolute;
    left: var(--sb-space-2);
    top: -100px;
    z-index: 1100;
    padding: var(--sb-space-2) var(--sb-space-4);
    background: var(--sb-primary);
    color: var(--sb-on-primary) !important;
    border-radius: var(--sb-radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.sb-skip-link:focus {
    top: var(--sb-space-2);
}

.sb-main:focus {
    outline: none;
}

/* ---------- Nav ---------- */
.sb-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--sb-nav-h);
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
}

.sb-nav__bar {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
    height: 100%;
}

.sb-nav__brand {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sb-on-surface) !important;
    text-decoration: none;
    white-space: nowrap;
}

.sb-nav__brand-accent {
    color: var(--sb-secondary);
}

.sb-nav__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-on-surface);
}

.sb-nav__list,
.sb-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sb-nav__link,
.sb-nav__sublink {
    display: flex;
    align-items: center;
    color: var(--sb-on-surface) !important;
    text-decoration: none;
}

.sb-nav__link {
    font-size: 17px;
    font-weight: 600;
}

.sb-nav__item.is-active > .sb-nav__link,
.sb-nav__sublink[aria-current="page"] {
    color: var(--sb-primary) !important;
}

.sb-nav__subtoggle {
    display: none;
}

.sb-nav__hotline {
    display: none;
}

/* Mobile (< 768px): full-height single-level sheet */
@media (max-width: 767.98px) {
    .sb-nav__menu {
        position: fixed;
        top: var(--sb-nav-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        overflow-y: auto;
        padding: var(--sb-space-2) var(--sb-gutter) var(--sb-space-6);
        background: var(--sb-surface);
        border-top: 1px solid var(--sb-border);
    }

    body.sb-has-bar .sb-nav__menu {
        bottom: var(--sb-bar-total);
    }

    .js .sb-nav__menu {
        display: none;
    }

    .js .sb-nav[data-menu-open="true"] .sb-nav__menu {
        display: block;
    }

    .js body:has(.sb-nav[data-menu-open="true"]) {
        overflow: hidden;
    }

    .sb-nav__item {
        border-bottom: 1px solid var(--sb-border-subtle);
    }

    .sb-nav__link {
        min-height: 52px;
    }

    /* Children always listed flat beneath their parent - no disclosure on mobile. */
    .sb-nav__submenu {
        display: block;
        padding: 0 0 var(--sb-space-2) var(--sb-space-4);
    }

    .sb-nav__sublink {
        min-height: 44px;
        font-size: 16px;
    }

    /* No JS: the nav stops being fixed and just shows the whole list. */
    html:not(.js) .sb-nav {
        position: static;
        height: auto;
    }

    html:not(.js) .sb-nav__bar {
        flex-wrap: wrap;
        min-height: var(--sb-nav-h);
    }

    html:not(.js) body.sb-has-nav {
        padding-top: 0;
    }

    html:not(.js) .sb-nav__toggle {
        display: none;
    }

    html:not(.js) .sb-nav__menu {
        position: static;
        width: 100%;
        padding: 0 0 var(--sb-space-4);
        border-top: 0;
    }
}

/* Tablet/desktop (>= 768px): inline links, click-to-open submenus, hotline */
@media (min-width: 768px) {
    .sb-nav__toggle {
        display: none;
    }

    .sb-nav__menu {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
    }

    .sb-nav__list {
        display: flex;
        align-items: center;
        gap: var(--sb-space-5);
        height: 100%;
    }

    .sb-nav__item {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .sb-nav__link {
        height: 100%;
        font-size: 16px;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        border-top: 2px solid transparent;
    }

    .sb-nav__item.is-active > .sb-nav__link {
        border-bottom-color: var(--sb-primary);
    }

    .js .sb-nav__subtoggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-left: var(--sb-space-1);
        padding: 0;
        border: 0;
        border-radius: var(--sb-radius-sm);
        background: transparent;
        color: var(--sb-on-surface);
    }

    .sb-nav__subtoggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .sb-nav__submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: calc(var(--sb-space-3) * -1);
        min-width: 220px;
        padding: var(--sb-space-2) 0;
        background: var(--sb-surface);
        border: 1px solid var(--sb-border);
        border-radius: var(--sb-radius-md);
    }

    .sb-nav__subtoggle[aria-expanded="true"] + .sb-nav__submenu,
    html:not(.js) .sb-nav__item:focus-within > .sb-nav__submenu,
    html:not(.js) .sb-nav__item:hover > .sb-nav__submenu {
        display: block;
    }

    .sb-nav__sublink {
        min-height: 44px;
        padding: 0 var(--sb-space-4);
        font-size: 16px;
        white-space: nowrap;
    }

    .sb-nav__hotline {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--sb-primary) !important;
        text-decoration: none;
        white-space: nowrap;
    }
}

/* ---------- Page header / blocks (Cms/Page, Post, Archive markup) ---------- */
.sb-main > header {
    position: relative;
    padding: var(--sb-space-6) 0 var(--sb-space-5);
    background: var(--sb-background);
}

.sb-main > header h1 {
    margin-bottom: var(--sb-space-2);
}

.sb-main > header .lead {
    font-size: 17px;
    font-weight: 400;
    color: var(--sb-on-surface-muted);
}

.sb-main > header .dimmer {
    display: none;
}

.sb-main > header.has-image {
    background-size: cover;
    background-position: center;
    padding: var(--sb-space-8) 0;
}

.sb-main > header.has-image .dimmer {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(58, 46, 34, 0.6);
}

.sb-main > header.has-image .container {
    position: relative;
}

.sb-main > header.has-image h1,
.sb-main > header.has-image .lead,
.sb-main > header.has-image .post-meta,
.sb-main > header.has-image .post-meta a {
    color: #FFFFFF;
}

.sb-main .post-meta {
    font-size: 13px;
    color: var(--sb-on-surface-muted);
}

.sb-main .post-meta span + span {
    margin-left: var(--sb-space-3);
}

.sb-main .block {
    padding: var(--sb-space-3) 0;
}

.sb-main main {
    padding-bottom: var(--sb-section-gap);
}

.sb-main blockquote {
    padding: var(--sb-space-4);
    background: var(--sb-surface-sunken);
    border-radius: var(--sb-radius-md);
}

.sb-main img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sb-radius-md);
}

/* ---------- Catalog: grid, product-card, category-tile, pager (Story 2.2) ---------- */
.sb-catalog > .container {
    padding-top: var(--sb-space-3);
}

/* CMS-count-flexible grid: 2-up mobile, 3 at >= 768px, 4 at >= 1200px. */
.sb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sb-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-grid > li {
    display: flex;
    min-width: 0;
}

/* Product cards go 1-up on small phones (~165px 2-up cards were too
   cramped for the photo and description); 2-up from 480px. Category
   tiles are text-only and stay 2-up. */
.sb-grid--products {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
    .sb-grid--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Story 5.1: blog cards follow the product grid - 1-up below 480px,
   2-up from 480px, then the shared 3 / 4 columns. */
.sb-grid--blog {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
    .sb-grid--blog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .sb-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

/* product-card */
.sb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.sb-card__thumb {
    aspect-ratio: 4 / 3;
    /* The one gradient in the system: wood-grain frame, visible when there is no photo. */
    background: linear-gradient(135deg, var(--sb-secondary), var(--sb-primary));
}

.sb-main .sb-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.sb-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sb-space-1);
    padding: var(--sb-space-3);
}

.sb-card__eyebrow,
.sb-tile__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.site-b .sb-card__title,
.site-b .sb-tile__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.site-b .sb-card__link {
    color: var(--sb-on-surface);
    text-decoration: none;
}

/* Stretched link: the whole card body is a tap target to the product. */
.sb-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sb-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-card__price,
.sb-product__price {
    margin: var(--sb-space-1) 0 var(--sb-space-2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-card__price--contact,
.sb-product__price--contact {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
}

/* Independent CTA, stacked above the stretched link. */
.site-b .sb-card__cta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: auto;
    padding: var(--sb-space-2) var(--sb-space-3);
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    border-radius: var(--sb-radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.site-b .sb-card__cta:focus-visible {
    outline-color: var(--sb-on-surface);
}

/* category-tile: the whole tile is one link. */
.site-b .sb-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    padding: var(--sb-space-4) var(--sb-space-3);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-on-surface);
    text-decoration: none;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.sb-tile__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
}

/* Pressed state on touch-down (never hover-only): inset primary ring + 0.98 scale. */
.sb-card:active,
.site-b .sb-tile:active {
    box-shadow: inset 0 0 0 2px var(--sb-primary);
    transform: scale(0.98);
}

.site-b .sb-card__cta:active {
    background: var(--sb-primary-hover);
    box-shadow: inset 0 2px 4px rgba(58, 46, 34, 0.25);
}

/* Keyboard focus on the stretched link rings the whole card. */
.sb-card:has(.sb-card__link:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--sb-primary);
}

@media (prefers-reduced-motion: reduce) {
    .sb-card,
    .site-b .sb-tile {
        transition: none;
    }
}

/* Pagination: plain prev/next links. */
.sb-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-3);
    margin-top: var(--sb-space-6);
}

.sb-pager__status {
    font-size: 14px;
    color: var(--sb-on-surface-muted);
}

.site-b .sb-pager__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sb-space-4);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.sb-pager__link--next {
    margin-left: auto;
}

.site-b .sb-pager__link:active {
    background: var(--sb-surface-sunken);
}

/* ---------- Blog listing + minimal article page (Story 5.1) ---------- */
.sb-card__date,
.sb-article__date {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
}

/* Blog excerpts may wrap to two lines (product excerpts stay one line). */
.sb-grid--blog .sb-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.sb-empty {
    margin: var(--sb-space-5) 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sb-on-surface-muted);
}

.site-b .sb-article__title {
    margin: 0 0 var(--sb-space-1);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---------- article-detail-page (Story 5.2) ---------- */
.sb-article {
    padding-top: var(--sb-space-3);
    padding-bottom: var(--sb-section-gap);
}

/* Reading column: width-limited on desktop, full width on phones. */
.sb-article__column {
    max-width: 720px;
    margin: 0 auto;
}

/* Breadcrumb: Trang chủ / Blog / [title]. Links keep a 44px tap height. */
.sb-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sb-on-surface-muted);
}

.sb-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.sb-breadcrumb__item + .sb-breadcrumb__item::before {
    content: "/";
    content: "/" / "";
    padding: 0 var(--sb-space-2);
    color: var(--sb-on-surface-muted);
}

.site-b .sb-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sb-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sb-breadcrumb__current {
    color: var(--sb-on-surface-muted);
    overflow-wrap: anywhere;
}

.sb-article__header {
    padding: var(--sb-space-2) 0 var(--sb-space-4);
}

/* Metadata line: caption, muted. */
.sb-article .sb-article__date {
    font-size: 13px;
    line-height: 1.4;
}

/* Body copy + in-article subheads (heading-md / heading-sm). */
.sb-article__body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sb-on-surface);
    overflow-wrap: break-word;
}

.sb-article__body img {
    max-width: 100%;
    height: auto;
}

.site-b .sb-article__body h2 {
    margin: var(--sb-space-6) 0 var(--sb-space-3);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.site-b .sb-article__body h3 {
    margin: var(--sb-space-5) 0 var(--sb-space-2);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.sb-article__body p {
    margin: 0 0 var(--sb-space-4);
}

/* Back-link (no related posts): primary, 44px tap height. */
.sb-backlink {
    margin: var(--sb-space-6) 0 0;
}

.site-b .sb-backlink__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sb-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Related strip: label typography in secondary, smaller blog cards -
   1-up below 480px, 2-up, 3-up from 768px (never 4). */
.sb-related {
    margin-top: var(--sb-section-gap);
    padding-top: var(--sb-space-5);
    border-top: 1px solid var(--sb-border);
}

.site-b .sb-related__title {
    margin: 0 0 var(--sb-space-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

@media (min-width: 1200px) {
    .sb-grid--related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sb-grid--related .sb-card__body {
    padding: var(--sb-space-2) var(--sb-space-3);
}

.site-b .sb-grid--related .sb-card__title {
    font-size: 16px;
}

.sb-grid--related .sb-card__desc {
    font-size: 14px;
}

@media (min-width: 768px) {
    .sb-related {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- image gallery block (shared template) ----------
   Fixed 16:9 frame; every photo is contained, never cropped by CSS, so
   portrait and landscape slides show whole and the height never jumps.
   The letterbox bars show a blurred copy of the same photo. Controls sit on
   a dark chip so they read on any photo. */
.site-b .gallery-block {
    background: var(--sb-on-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    overflow: hidden;
}

.site-b .gallery-block__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Oversized so the blur has no soft, see-through edge. */
.site-b .gallery-block__backdrop {
    position: absolute;
    inset: -40px;
    background-position: center;
    background-size: cover;
    filter: blur(28px) brightness(0.8);
}

.site-b .gallery-block .gallery-block__image {
    position: relative;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.site-b .gallery-block .carousel-control-prev,
.site-b .gallery-block .carousel-control-next {
    width: 56px;
    opacity: 1;
}

.site-b .gallery-block .carousel-control-prev-icon,
.site-b .gallery-block .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    background-color: rgba(58, 46, 34, 0.6);
    background-size: 50%;
    border-radius: var(--sb-radius-full);
}

/* ---------- product-detail-page (Story 2.4) ---------- */
.sb-pdp {
    padding-top: var(--sb-space-5);
}

.sb-pdp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sb-space-5);
}

/* Gallery: surface frame, border, radius-md. Never auto-advances. */
.sb-pdp__gallery {
    padding: var(--sb-space-2);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.sb-main .sb-pdp__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sb-radius-sm);
}

/* Multi-photo gallery: fixed frame so swapping photos of different aspect
   ratios never moves the thumbnail row under the finger. */
.sb-main [data-sb-gallery] .sb-pdp__image {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
    background: var(--sb-surface);
}

.sb-pdp__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
    margin: var(--sb-space-2) 0 0;
    padding: 0;
    list-style: none;
}

/* >=44px tap target; active thumbnail gets a primary ring. */
.site-b .sb-pdp__thumb {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
}

.sb-main .sb-pdp__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.site-b .sb-pdp__thumb[aria-current="true"] {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 2px var(--sb-primary);
}

.site-b .sb-pdp__thumb:active {
    box-shadow: inset 0 0 0 2px var(--sb-primary);
}

/* Pressing the active thumbnail keeps its ring. */
.site-b .sb-pdp__thumb[aria-current="true"]:active {
    box-shadow: 0 0 0 2px var(--sb-primary), inset 0 0 0 2px var(--sb-primary);
}

.sb-pdp__eyebrow {
    margin: 0 0 var(--sb-space-1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.site-b .sb-pdp__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sb-pdp__sku {
    margin: var(--sb-space-1) 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sb-on-surface-muted);
    overflow-wrap: anywhere;
}

.sb-pdp__excerpt {
    margin: var(--sb-space-3) 0 0;
}

.sb-pdp .sb-product__price {
    margin: var(--sb-space-3) 0 0;
}

.sb-pdp__form {
    margin-top: var(--sb-section-gap);
}

@media (min-width: 992px) {
    .sb-pdp__layout--gallery {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--sb-space-6);
    }
}

/*
    Spec rows: the drum-config-reference row treatment (surface-sunken,
    body-sm). Story 4.2's .sb-config* block ("Bảng cấu hình") mirrors this
    look with its own classes (labelled controls, not these rows).
*/
.sb-spec {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    margin: var(--sb-space-4) 0 0;
}

.sb-spec__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sb-space-3);
    padding: var(--sb-space-2) var(--sb-space-3);
    background: var(--sb-surface-sunken);
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

/* on-surface, not muted: muted on surface-sunken is below 4.5:1. */
.sb-spec__label {
    margin: 0;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-spec__value {
    margin: 0;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

/*
    Story 4.2: "Bảng cấu hình" block (drum-config-reference look, from 4.1) -
    one row per config item on surface-sunken, reusing the .sb-spec row
    look. Rows are read-only text or labelled controls (select, text input,
    checkbox, checkbox group); every tap target is >= 44px, inputs are full
    width and editor text wraps anywhere, so it fits 375px with no sideways
    scroll.
*/
.sb-config {
    margin: 0;
}

.site-b .sb-config__title {
    margin: 0 0 var(--sb-space-4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sb-config__panel {
    padding: var(--sb-space-1) var(--sb-space-3);
    background: var(--sb-surface-sunken);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.sb-config__row {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
    margin: 0;
    padding: var(--sb-space-2) 0;
    border: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface);
}

.sb-config__row + .sb-config__row {
    border-top: 1px solid var(--sb-border-subtle);
}

/* on-surface, not muted: muted on surface-sunken is below 4.5:1. */
.sb-config__label,
.sb-config__value,
.sb-config__check-label {
    margin: 0;
    padding: 0;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
    word-break: normal;
}

.sb-config__label {
    float: none;
    width: auto;
    font-size: 14px;
    font-weight: 600;
}

.sb-config__value {
    white-space: pre-line;
}

.sb-config__input,
.sb-config__select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: var(--sb-space-2) var(--sb-space-3);
    font-size: 16px;
    color: var(--sb-on-surface);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
}

.sb-config__choices {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Check rows and multi-option choices: the whole label is the tap target. */
.sb-config__row--check,
.sb-config__choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sb-space-2);
    min-height: 44px;
}

.sb-config__checkbox {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--sb-primary);
}

.sb-config__check-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}

.sb-config__input:focus-visible,
.sb-config__select:focus-visible,
.sb-config__checkbox:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: 2px;
}

.sb-config__disclaimer {
    margin: var(--sb-space-2) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
}

.sb-config__form {
    margin-top: var(--sb-space-5);
}

.sb-config__form input,
.sb-config__form textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--sb-space-2) var(--sb-space-3);
    font-size: 16px;
    color: var(--sb-on-surface);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
}

.sb-config__form button[type="submit"] {
    min-height: 44px;
    padding: var(--sb-space-2) var(--sb-space-5);
    font-weight: 600;
    color: var(--sb-on-primary);
    background: var(--sb-primary);
    border: 0;
    border-radius: var(--sb-radius-md);
}

.sb-config__form button[type="submit"]:hover,
.sb-config__form button[type="submit"]:focus-visible {
    background: var(--sb-primary-hover);
}

/* ---------- Craftsman story page + trust-block (Story 2.5) ---------- */
.sb-story > .container:first-child {
    padding-top: var(--sb-space-5);
}

.sb-story__eyebrow {
    margin: 0 0 var(--sb-space-1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.site-b .sb-story__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Photo decision A: plain grid, 1-up mobile, 2-up from 768px. */
.sb-story__photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sb-space-5);
    margin-top: var(--sb-space-5);
}

@media (min-width: 768px) {
    .sb-story__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sb-story__figure {
    margin: 0;
    min-width: 0;
}

.sb-main .sb-story__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sb-radius-lg);
}

.sb-story__caption {
    margin-top: var(--sb-space-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface-muted);
    overflow-wrap: anywhere;
}

.sb-story__video {
    margin-top: var(--sb-section-gap);
}

.sb-story__player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: var(--sb-on-surface);
    border-radius: var(--sb-radius-lg);
}

.sb-story__workshop {
    margin-top: var(--sb-section-gap);
    padding: var(--sb-space-4);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.site-b .sb-story__workshop-title {
    margin: 0 0 var(--sb-space-2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.sb-story__address,
.sb-story__maps {
    margin: 0;
    overflow-wrap: anywhere;
}

.sb-story__maps {
    margin-top: var(--sb-space-2);
}

/* >=44px tap target. */
.site-b .sb-story__maps a,
.site-b .sb-trust__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-trust {
    margin-top: var(--sb-section-gap);
    padding: var(--sb-space-4);
    background: var(--sb-surface-sunken);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.sb-trust__figure {
    margin: 0 0 var(--sb-space-2);
}

/* Resets the generic .sb-main blockquote box - the trust-block is the box. */
.sb-main .sb-trust__quote {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sb-on-surface);
}

.sb-trust__quote p {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Caption size. on-surface, not muted: muted on surface-sunken is below
   4.5:1 (same call as .sb-spec__label). */
.sb-trust__attribution {
    margin-top: var(--sb-space-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */
.sb-footer {
    padding: var(--sb-space-6) 0;
    background: var(--sb-surface);
    border-top: 1px solid var(--sb-border);
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-on-surface);
}

.sb-footer p {
    margin: 0 0 var(--sb-space-2);
}

.sb-footer__brand {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.sb-footer__brand-accent {
    color: var(--sb-secondary);
}

.sb-footer__phone a {
    font-size: 20px;
    font-weight: 700;
    color: var(--sb-primary);
    text-decoration: none;
}

.sb-footer__story a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--sb-primary);
}

/* ---------- Sticky contact bar ---------- */
.sb-contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background: var(--sb-surface);
    border-top: 1px solid var(--sb-border);
    box-shadow: var(--sb-bar-shadow);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sb-contact-bar__list {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.sb-contact-bar__item {
    flex: 1 1 0;
    min-width: 0;
}

.sb-contact-bar__item + .sb-contact-bar__item {
    border-left: 1px solid var(--sb-border);
}

.sb-contact-bar__seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--sb-bar-h);
    padding: 0 var(--sb-space-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sb-on-surface) !important;
    text-decoration: none;
    white-space: nowrap;
}

.sb-contact-bar__seg--zalo {
    background: var(--sb-primary);
    color: var(--sb-on-primary) !important;
}

.sb-contact-bar__seg:focus-visible {
    outline-offset: -4px;
}

.sb-contact-bar__seg--zalo:focus-visible {
    outline-color: var(--sb-on-primary);
}

@media (min-width: 768px) {
    .sb-contact-bar__seg {
        flex-direction: row;
        gap: var(--sb-space-2);
        font-size: 16px;
    }
}

/* ---------- Landing page (Story 3.1, DESIGN.md landing-page-cta) ---------- */
/*
    Chrome-less paid-ads page: no nav, footer or 3-segment bar. Its single
    persistent action is one full-width CTA fixed to the viewport bottom
    (56px touch target, larger than the product-card CTA). <main> pads its
    bottom by the CTA's footprint + safe area so the form's submit button is
    never covered; focused fields and the consent banner clear it too.
*/
:root {
    --sb-lp-cta-h: 56px;
    --sb-lp-cta-total: calc(var(--sb-lp-cta-h) + var(--sb-space-2) * 2 + env(safe-area-inset-bottom, 0px));
}

html:has(.sb-lp__cta) {
    scroll-padding-bottom: var(--sb-lp-cta-total);
}

.sb-main main.sb-lp {
    padding-bottom: calc(var(--sb-lp-cta-total) + var(--sb-space-5));
}

.sb-lp > .container:first-child {
    padding-top: var(--sb-space-5);
}

/* Brand recognition only - plain text, deliberately not a link. */
.sb-lp__brand {
    margin: 0 0 var(--sb-space-5);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sb-primary);
}

.sb-lp__eyebrow {
    margin: 0 0 var(--sb-space-1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.site-b .sb-lp__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sb-main .sb-lp__hero {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--sb-space-5);
    border-radius: var(--sb-radius-lg);
}

.sb-lp__intro {
    margin: var(--sb-space-4) 0 0;
    font-size: 18px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/*
    Story 3.2 (FR-13): variant cards in the product grid (.sb-grid--products,
    1-up <480px). Reuses .sb-card; the card itself is not a link, so it has no
    pressed state - only the per-card CTA (56px, like the fixed CTA) is tappable.
*/
.sb-lp__variants {
    margin-top: var(--sb-section-gap);
}

.site-b .sb-lp__variants-title {
    margin: 0 0 var(--sb-space-4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sb-card.sb-lp__variant:active {
    box-shadow: none;
    transform: none;
}

/* Variant-label chip: `label` type, rounded.sm; on-surface on
   surface-sunken is well above 4.5:1. */
.sb-lp__chip {
    align-self: flex-start;
    max-width: 100%;
    margin: 0 0 var(--sb-space-1);
    padding: 2px var(--sb-space-2);
    background: var(--sb-surface-sunken);
    color: var(--sb-on-surface);
    border-radius: var(--sb-radius-sm);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.site-b .sb-lp__variant-cta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: var(--sb-lp-cta-h);
    margin-top: auto;
    padding: var(--sb-space-2) var(--sb-space-3);
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    border-radius: var(--sb-radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.site-b .sb-lp__variant-cta:hover,
.site-b .sb-lp__variant-cta:active {
    background: var(--sb-primary-hover);
    color: var(--sb-on-primary);
}

.site-b .sb-lp__variant-cta:focus-visible {
    outline: 3px solid var(--sb-on-surface);
    outline-offset: 2px;
}

.sb-lp__form {
    margin-top: var(--sb-section-gap);
}

.site-b .sb-lp__form-title {
    margin: 0 0 var(--sb-space-4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.sb-lp__alt {
    margin: var(--sb-space-4) 0 0;
    overflow-wrap: anywhere;
}

/* >=44px tap target. */
.site-b .sb-lp__alt-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--sb-primary);
}

.site-b .sb-lp__cta {
    position: fixed;
    left: var(--sb-gutter);
    right: var(--sb-gutter);
    bottom: calc(var(--sb-space-2) + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1140px;
    min-height: var(--sb-lp-cta-h);
    margin: 0 auto;
    padding: var(--sb-space-2) var(--sb-space-4);
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    border-radius: var(--sb-radius-sm);
    box-shadow: var(--sb-bar-shadow);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-b .sb-lp__cta:hover,
.site-b .sb-lp__cta:active {
    background: var(--sb-primary-hover);
    color: var(--sb-on-primary);
}

.site-b .sb-lp__cta:focus-visible {
    outline: 3px solid var(--sb-on-surface);
    outline-offset: 2px;
}

/* The consent banner sits directly above the CTA, never under it. */
body.site-b:has(.sb-lp__cta) .cookie-consent {
    bottom: var(--sb-lp-cta-total) !important;
}

/* ---------- Hover / pressed feedback ---------- */
.sb-nav__link:hover,
.sb-nav__link:active,
.sb-nav__sublink:hover,
.sb-nav__sublink:active,
.sb-nav__toggle:hover,
.sb-nav__toggle:active,
.sb-nav__subtoggle:hover,
.sb-nav__subtoggle:active,
.sb-nav__hotline:hover,
.sb-nav__hotline:active,
.sb-contact-bar__seg:hover,
.sb-contact-bar__seg:active {
    background: var(--sb-surface-sunken);
}

.sb-contact-bar__seg--zalo:hover,
.sb-contact-bar__seg--zalo:active {
    background: var(--sb-primary-hover);
}

.sb-footer__phone a:hover,
.sb-footer__phone a:active {
    text-decoration: underline;
}

/* ---------- Cookie consent (Story 1.10 partial, restyled + offset) ---------- */
.site-b .cookie-consent {
    background: var(--sb-on-surface) !important;
    color: #FFFFFF;
}

/* Sits directly above the sticky bar, never behind or under it. */
body.site-b.sb-has-bar .cookie-consent {
    bottom: var(--sb-bar-total) !important;
}