:root {
    --sm-ink: #102a43;
    --sm-ink-2: #183b56;
    --sm-orange: #f97316;
    --sm-orange-dark: #ea580c;
    --sm-blue: #2563eb;
    --sm-white: #ffffff;
    --sm-surface: #f4f7fb;
    --sm-line: #dbe4ee;
    --sm-muted: #62748a;
    --sm-success: #16a34a;
    --sm-radius: 14px;
    --sm-shadow: 0 14px 38px rgba(16, 42, 67, 0.09);
}

body.page-home {
    background: var(--sm-white);
    color: var(--sm-ink);
    font-family: "Quicksand", Arial, sans-serif;
}

.page-home .wraper {
    width: min(100% - 40px, 1320px);
    max-width: 1320px;
    margin-inline: auto;
}

.page-home .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sm-btn {
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 700 14px/1 "Quicksand", Arial, sans-serif;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.sm-btn:hover,
.sm-btn:focus-visible {
    transform: translateY(-2px);
}

.sm-btn--orange {
    color: #fff !important;
    background: var(--sm-orange);
    border-color: var(--sm-orange);
}

.sm-btn--orange:hover,
.sm-btn--orange:focus-visible {
    background: var(--sm-orange-dark);
    border-color: var(--sm-orange-dark);
    box-shadow: 0 9px 22px rgba(249, 115, 22, 0.24);
}

.sm-btn--outline {
    color: var(--sm-ink) !important;
    background: #fff;
    border-color: #9fb0c3;
}

.sm-btn--outline:hover,
.sm-btn--outline:focus-visible {
    border-color: var(--sm-ink);
    box-shadow: 0 8px 20px rgba(16, 42, 67, 0.1);
}

.sm-btn--light-outline {
    color: #fff !important;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
}

.sm-btn--small {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

.sm-btn--block {
    width: 100%;
}

.sm-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sm-ink) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
}

.sm-text-link:hover {
    color: var(--sm-orange) !important;
}

/* Homepage marketplace header */
.sm-market-header {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid rgba(219, 228, 238, 0.75);
}

.sm-market-header__inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.sm-market-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.sm-market-brand img {
    max-width: 190px;
    object-fit: contain;
}

.sm-market-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

.sm-market-nav a,
.sm-market-nav button {
    padding: 10px 0;
    color: var(--sm-ink) !important;
    background: transparent;
    border: 0;
    font: 650 14px/1 "Quicksand", Arial, sans-serif;
    text-decoration: none !important;
    cursor: pointer;
}

.sm-market-nav a:hover,
.sm-market-nav button:hover {
    color: var(--sm-orange) !important;
}

.sm-market-header__actions {
    display: flex;
    gap: 10px;
}

.sm-market-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--sm-line);
    border-radius: 9px;
    color: var(--sm-ink);
    background: #fff;
}

/* Hero */
.sm-hero {
    /* 650px cứng + nội dung ~646px = hero nuốt trọn màn hình, người dùng không thấy
       có gì bên dưới nên không cuộn. clamp theo vh: co lại trên laptop màn thấp,
       không phình quá 520px trên màn lớn. */
    min-height: clamp(380px, 54vh, 520px);
    display: flex;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--sm-line);
    overflow: hidden;
}

.sm-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(520px, 0.98fr);
    align-items: center;
    gap: 46px;
}

.sm-hero__content {
    padding: clamp(28px, 3.6vh, 46px) 0 clamp(30px, 3.8vh, 48px);
    position: relative;
    z-index: 3;
}

.sm-hero h1 {
    max-width: 680px;
    margin: 0 0 16px;
    color: var(--sm-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    /* 72px x line-height 0.98 cho tiêu đề 3 dòng = 212px, chiếm 1/3 hero.
       50px/1.05 vẫn đủ sức nặng thị giác mà tiết kiệm ~55px chiều cao. */
    font-size: clamp(32px, 3.4vw, 50px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

.sm-hero__content > p {
    max-width: 620px;
    margin: 0 0 20px;
    color: #4e6075;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.sm-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Dòng trấn an nằm ngay dưới, nên khoảng cách chuyển xuống .sm-hero__reassure
       — nếu để 22px ở đây thì dòng chữ nhỏ bị tách rời khỏi nút nó đang nói về. */
    margin-bottom: 8px;
}

/* Trấn an ngay dưới nút RFQ: ba rào cản lớn nhất khiến người mua ngần ngại điền form
   là sợ mất phí, sợ phải tạo tài khoản, và không biết bao giờ được trả lời.
   KHÔNG hứa số giờ cụ thể — hệ thống chưa ghi lại thời gian phản hồi nên không có
   dữ liệu nào chống lưng cho một con số SLA. Chỉ nói kênh liên hệ, thứ luôn đúng. */
.sm-hero__reassure {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 22px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7c8f;
}
.sm-hero__reassure i {
    color: var(--sm-success, #2E7D32);
    font-size: 13px;
}

@media (max-width: 575px) {
    .sm-hero__reassure { font-size: 12px; align-items: flex-start; }
}

.sm-market-search {
    width: 100%;
    min-height: 66px;
    padding: 7px 8px 7px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #aebccc;
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(16, 42, 67, 0.06);
}

.sm-market-search:focus-within {
    border-color: var(--sm-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.sm-market-search > i {
    color: var(--sm-ink);
    font-size: 19px;
}

.sm-market-search input {
    width: 100%;
    min-width: 0;
    height: 48px;
    color: var(--sm-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font: 600 14px/1.3 "Quicksand", Arial, sans-serif;
}

.sm-market-search input::placeholder {
    color: #7c8da1;
}

.sm-market-search button {
    height: 50px;
    padding: 0 24px;
    color: #fff;
    background: var(--sm-ink);
    border: 0;
    border-radius: 8px;
    font: 700 14px/1 "Quicksand", Arial, sans-serif;
}

.sm-hero__proof {
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    list-style: none;
    color: #52667d;
    font-size: 12px;
    font-weight: 650;
}

.sm-hero__proof i {
    margin-right: 6px;
    color: var(--sm-ink);
}

.sm-hero__media {
    align-self: stretch;
    min-height: 650px;
    position: relative;
    margin-right: calc((100vw - min(100vw - 40px, 1320px)) / -2);
    overflow: hidden;
}

.sm-hero__media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 120px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* <picture> boc <img> nen KHONG dung `> img` nua — bo chon con truc tiep se truot.
   `display: contents` cho <picture> giup <img> tiep tuc tham gia layout cua
   .sm-hero__media y het nhu truoc, khong phai sua them gi. */
.sm-hero__media picture { display: contents; }
.sm-hero__media img {
    width: 100%;
    height: 100%;
    /* PHAI khop min-height cua .sm-hero. Truoc day de 650px cung: du .sm-hero da ha
       xuong clamp(380,54vh,520) thi anh van keo hero tro lai 650px, tuc thay doi kia
       hoan toan vo hieu. Chieu cao hang grid = max(noi dung, chieu cao anh). */
    min-height: clamp(360px, 50vh, 500px);
    object-fit: cover;
    object-position: center;
}

.sm-route {
    position: absolute;
    z-index: 2;
    left: 32px;
    top: 70px;
    bottom: 62px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sm-route::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 30px;
    bottom: 30px;
    width: 3px;
    background: var(--sm-orange);
}

.sm-route span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sm-ink);
    font-weight: 800;
    font-size: 12px;
    text-shadow: 0 1px 8px #fff;
}

.sm-route i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--sm-ink);
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(249,115,22,0.45);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(16,42,67,0.1);
}

/* Shared section system */
.sm-section-heading {
    margin-bottom: 30px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.sm-section-heading--compact {
    margin-bottom: 20px;
}

.sm-section-heading--single {
    justify-content: flex-start;
}

.sm-section-heading h2 {
    margin: 0 0 8px;
    color: var(--sm-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(34px, 3.7vw, 48px);
    font-weight: 800;
    line-height: 1;
}

.sm-section-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--sm-muted);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.6;
}

.sm-discovery {
    padding: 76px 0 52px;
    background: #fff;
}

.sm-market-tabs {
    display: flex;
    gap: 34px;
    border-bottom: 1px solid var(--sm-line);
}

.sm-market-tabs button {
    padding: 0 0 14px;
    position: relative;
    color: #53677d;
    background: transparent;
    border: 0;
    font: 750 14px/1 "Quicksand", Arial, sans-serif;
    cursor: pointer;
}

.sm-market-tabs button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: transparent;
}

.sm-market-tabs button.is-active {
    color: var(--sm-orange);
}

.sm-market-tabs button.is-active::after {
    background: var(--sm-orange);
}

.sm-tab-panel {
    padding-top: 18px;
}

.sm-tab-panel[hidden] {
    display: none;
}

.sm-tab-panel--intro {
    min-height: 160px;
    padding: 34px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--sm-surface);
    border-radius: var(--sm-radius);
}

.sm-tab-panel--intro > i {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: var(--sm-orange);
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 50%;
    font-size: 24px;
}

.sm-tab-panel--intro > div {
    margin-right: auto;
}

.sm-tab-panel--intro strong,
.sm-tab-panel--intro span {
    display: block;
}

.sm-tab-panel--intro strong {
    margin-bottom: 6px;
    color: var(--sm-ink);
    font-size: 18px;
}

.sm-tab-panel--intro span {
    color: var(--sm-muted);
    font-size: 13px;
}

/* Normalize the configured NukeViet category block into a horizontal rail */
.sm-category-rail .category-container,
.sm-category-rail .row {
    width: 100%;
    margin: 0 !important;
}

.sm-category-rail .row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.sm-category-rail [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    float: none !important;
}

.sm-category-rail .category-box {
    min-height: 170px;
    padding: 0 0 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 10px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sm-category-rail .category-box:hover {
    transform: translateY(-3px);
    border-color: var(--sm-orange);
    box-shadow: var(--sm-shadow);
}

.sm-category-rail .category-box img {
    width: 100% !important;
    height: 122px !important;
    object-fit: cover;
}

.sm-category-rail .category-name {
    padding: 12px 14px 0;
    color: var(--sm-ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.sm-category-rail .category-name a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Supplier directory + buyer RFQ */
.sm-supply-market {
    padding: 26px 0 72px;
    background: #fff;
}

.sm-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.75fr);
    gap: 18px;
    align-items: stretch;
}

.sm-supplier-directory {
    padding-right: 24px;
    border-right: 2px solid rgba(249,115,22,0.75);
}

.sm-supplier-list {
    border-top: 1px solid var(--sm-line);
}

.sm-supplier-row {
    min-height: 114px;
    padding: 14px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--sm-line);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.sm-supplier-row:hover {
    margin-inline: -12px;
    padding-inline: 12px;
    background: #f7faff;
    box-shadow: inset 3px 0 0 var(--sm-blue);
}

.sm-supplier-row__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit !important;
    text-decoration: none !important;
}

.sm-supplier-row__logo {
    width: 84px;
    height: 76px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--sm-ink);
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: 9px;
    font-size: 26px;
    font-weight: 850;
}

.sm-supplier-row__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-supplier-row__copy {
    min-width: 0;
}

.sm-supplier-row__copy > * {
    display: block;
}

.sm-supplier-row__copy strong {
    margin-bottom: 5px;
    color: var(--sm-ink);
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-supplier-row__copy strong i {
    color: var(--sm-blue);
    font-size: 13px;
}

.sm-supplier-row__copy small {
    margin-bottom: 6px;
    color: #52677e;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-supplier-row__copy > span {
    color: var(--sm-muted);
    font-size: 11px;
    line-height: 1.45;
}

.sm-supplier-row__rating {
    color: var(--sm-ink);
    font-size: 12px;
    font-weight: 800;
}

.sm-supplier-row__rating i {
    color: #f59e0b;
}

.sm-supplier-row__actions {
    display: grid;
    gap: 7px;
}

.sm-supplier-empty {
    min-height: 140px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--sm-muted);
    background: var(--sm-surface);
    border-radius: var(--sm-radius);
}

.sm-supplier-empty > i {
    color: var(--sm-orange);
    font-size: 28px;
}

.sm-supplier-empty > div {
    flex: 1;
}

.sm-supplier-empty strong,
.sm-supplier-empty span {
    display: block;
}

.sm-supplier-empty strong {
    margin-bottom: 5px;
    color: var(--sm-ink);
}

.sm-supplier-empty span {
    font-size: 12px;
}

.sm-buy-demand {
    padding: 26px;
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
}

.sm-buy-demand__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sm-buy-demand__head > i {
    color: var(--sm-orange);
    font-size: 28px;
}

.sm-buy-demand h2 {
    margin: 0 0 5px;
    color: var(--sm-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 27px;
    font-weight: 800;
}

.sm-buy-demand p {
    margin: 0;
    color: var(--sm-muted);
    font-size: 12px;
    line-height: 1.5;
}

.sm-buy-demand__steps {
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

.sm-buy-demand__steps li {
    padding: 0 0 22px;
    position: relative;
    display: flex;
    gap: 12px;
}

.sm-buy-demand__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 4px;
    width: 1px;
    background: #cbd7e4;
}

.sm-buy-demand__steps > li > span {
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--sm-orange);
    background: #fff;
    border: 1px solid rgba(249,115,22,0.45);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 850;
}

.sm-buy-demand__steps strong,
.sm-buy-demand__steps small {
    display: block;
}

.sm-buy-demand__steps strong {
    margin-bottom: 3px;
    color: var(--sm-ink);
    font-size: 13px;
}

.sm-buy-demand__steps small {
    color: var(--sm-muted);
    font-size: 11px;
}

/* Existing product block, normalized */
.sm-featured {
    padding: 72px 0;
    background: var(--sm-surface);
}

.sm-products-wrap .section_product_new {
    padding: 0 !important;
    background: transparent !important;
}

.sm-products-wrap .section_product_new > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.sm-products-wrap .section_product_new .title-index,
.sm-products-wrap .section_product_new .title_module_main {
    display: none !important;
}

.sm-products-wrap .swiper-slide,
.sm-products-wrap .b2b-product-card {
    background: #fff;
}

/* Workflow and logistics */
.sm-workflow {
    padding: 80px 0;
    background: #fff;
}

.sm-workflow__steps {
    margin: 44px 0 54px;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    list-style: none;
}

.sm-workflow__steps::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 61px;
    height: 2px;
    background: var(--sm-orange);
}

.sm-workflow__steps li {
    position: relative;
    text-align: center;
}

.sm-workflow__icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    color: var(--sm-ink);
    background: #fff;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    font-size: 32px;
}

.sm-workflow__steps li.is-active .sm-workflow__icon {
    color: var(--sm-orange);
    border-color: var(--sm-orange);
}

.sm-workflow__number {
    width: 29px;
    height: 29px;
    margin: -24px auto 18px;
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    color: var(--sm-ink);
    background: #fff;
    border: 2px solid var(--sm-ink);
    border-radius: 50%;
    font-weight: 850;
    font-size: 12px;
}

.sm-workflow__steps li.is-active .sm-workflow__number {
    color: #fff;
    background: var(--sm-orange);
    border-color: var(--sm-orange);
}

.sm-workflow__steps strong {
    display: block;
    margin-bottom: 7px;
    color: var(--sm-ink);
    font-size: 15px;
}

.sm-workflow__steps p {
    max-width: 240px;
    margin: 0 auto;
    color: var(--sm-muted);
    font-size: 12px;
    line-height: 1.55;
}

.sm-logistics {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    overflow: hidden;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
}

.sm-logistics__media {
    min-height: 410px;
}

.sm-logistics__media img {
    width: 100%;
    height: 100%;
    min-height: 410px;
    object-fit: cover;
}

.sm-logistics__form {
    padding: 38px;
    background: var(--sm-surface);
}

.sm-logistics__form h3 {
    margin: 0 0 26px;
    color: var(--sm-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.sm-logistics__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.sm-logistics__fields label {
    color: var(--sm-ink);
    font-size: 12px;
    font-weight: 750;
}

.sm-logistics__fields input,
.sm-logistics__fields select {
    width: 100%;
    height: 52px;
    margin-top: 7px;
    padding: 0 14px;
    color: var(--sm-ink);
    background: #fff;
    border: 1px solid #c4d0dd;
    border-radius: 8px;
    outline: 0;
    font: 600 13px/1 "Quicksand", Arial, sans-serif;
}

.sm-logistics__fields input:focus,
.sm-logistics__fields select:focus {
    border-color: var(--sm-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.sm-logistics__result {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--sm-success);
    font-size: 12px;
    font-weight: 700;
}

.sm-closing-cta {
    min-height: 140px;
    margin-top: 24px;
    padding: 28px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    color: #fff;
    background: var(--sm-ink);
    border-radius: var(--sm-radius);
}

.sm-closing-cta > div,
.sm-closing-cta > span {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sm-closing-cta > div > i {
    color: var(--sm-orange);
    font-size: 38px;
}

.sm-closing-cta h2 {
    margin: 0;
    color: #fff;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 34px;
    font-weight: 800;
}

/* Downstream content */
.sm-partners {
    padding: 34px 0;
    background: var(--sm-surface);
    border-block: 1px solid var(--sm-line);
}

.sm-partners img {
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter 160ms ease, opacity 160ms ease;
}

.sm-partners img:hover {
    filter: none;
    opacity: 1;
}

.sm-policy {
    padding: 24px 0;
    background: #fff;
    border-bottom: 1px solid var(--sm-line);
}

.sm-news {
    padding: 72px 0;
    background: #fff;
}

.sm-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.sm-seo {
    padding: 44px 0;
    color: var(--sm-muted);
    background: var(--sm-surface);
    border-top: 1px solid var(--sm-line);
    font-size: 13px;
    line-height: 1.75;
}

@media (max-width: 1120px) {
    .sm-market-header__inner { gap: 22px; }
    .sm-market-nav { gap: 20px; }
    .sm-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr); gap: 24px; }
    .sm-market-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr); }
    .sm-supplier-row { grid-template-columns: minmax(0, 1fr) auto; }
    .sm-supplier-row__rating { display: none; }
    .sm-closing-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 920px) {
    .sm-market-menu-toggle { display: grid; place-items: center; }
    .sm-market-header__actions { display: none; }
    .sm-market-nav {
        display: none;
        position: absolute;
        top: 74px;
        left: 20px;
        right: 20px;
        padding: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border: 1px solid var(--sm-line);
        border-radius: 12px;
        box-shadow: var(--sm-shadow);
    }
    .sm-market-nav.is-open { display: flex; }
    .sm-market-nav a,
    .sm-market-nav button { padding: 12px; text-align: left; }
    .sm-hero__grid { grid-template-columns: 1fr; }
    .sm-hero__content { padding-bottom: 20px; }
    .sm-hero__media { min-height: 470px; margin: 0 -20px; }
    .sm-hero__media img { min-height: 400px; }
    .sm-route { left: 26px; top: 36px; bottom: 36px; }
    .sm-category-rail .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-market-grid { grid-template-columns: 1fr; }
    .sm-supplier-directory { padding: 0; border: 0; }
    .sm-logistics { grid-template-columns: 1fr; }
    .sm-logistics__media,
    .sm-logistics__media img { min-height: 340px; }
}

@media (max-width: 720px) {
    .page-home .wraper { width: min(100% - 28px, 1320px); }
    .sm-market-header__inner { min-height: 72px; }
    .sm-market-brand img { max-width: 158px; height: 38px; }
    .sm-hero { min-height: auto; }
    .sm-hero__content { padding-top: 44px; }
    .sm-hero h1 { font-size: 46px; letter-spacing: -0.5px; }
    .sm-hero__content > p { font-size: 15px; }
    .sm-hero__actions { display: grid; }
    .sm-btn { width: 100%; }
    .sm-market-search { grid-template-columns: auto minmax(0,1fr); padding: 7px 12px; }
    .sm-market-search button { grid-column: 1 / -1; width: 100%; }
    .sm-hero__proof { display: grid; gap: 9px; }
    .sm-hero__media { min-height: 390px; }
    .sm-hero__media img { min-height: 340px; object-position: 58% center; }
    .sm-route span { font-size: 10px; }
    .sm-route i { width: 40px; height: 40px; }
    .sm-route::before { left: 19px; }
    .sm-section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
    .sm-section-heading h2 { font-size: 38px; }
    .sm-discovery,
    .sm-featured,
    .sm-workflow,
    .sm-news { padding-block: 54px; }
    .sm-market-tabs { gap: 24px; overflow-x: auto; }
    .sm-tab-panel--intro { align-items: flex-start; flex-direction: column; }
    .sm-category-rail .row { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; }
    .sm-category-rail [class*="col-"] { min-width: 72vw; scroll-snap-align: start; }
    .sm-supplier-row { grid-template-columns: 1fr; }
    .sm-supplier-row__actions { grid-template-columns: 1fr 1fr; }
    .sm-supplier-row__actions .sm-btn { width: auto; }
    .sm-supplier-empty { align-items: flex-start; flex-direction: column; }
    .sm-workflow__steps { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
    .sm-workflow__steps::before { left: 47px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
    .sm-workflow__steps li { display: grid; grid-template-columns: 96px 1fr; text-align: left; }
    .sm-workflow__icon { grid-row: 1 / span 2; margin: 0; }
    .sm-workflow__number { grid-column: 1; grid-row: 1; justify-self: end; margin: -5px -3px 0 0; }
    .sm-workflow__steps li > div { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-left: 14px; }
    .sm-workflow__steps p { max-width: none; margin: 0; }
    .sm-logistics__form { padding: 26px 20px; }
    .sm-logistics__fields { grid-template-columns: 1fr; }
    .sm-closing-cta { padding: 28px 22px; }
    .sm-closing-cta > div,
    .sm-closing-cta > span { width: 100%; align-items: flex-start; flex-direction: column; }
    .sm-closing-cta h2 { font-size: 31px; }
    .sm-news__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-btn,
    .sm-category-rail .category-box,
    .sm-supplier-row { transition: none; }
}

/* ═══ Dải tiêu chuẩn dưới hero ═══════════════════════════════════════════════
   Bản sáng của .b2b-cert-badge (bản gốc dùng chữ trắng trên nền footer tối, đặt
   trên nền sáng sẽ không đọc được). Cố ý làm THẤP và LẶNG: đây là dải trấn an,
   không phải khối nội dung — nó không được cạnh tranh chú ý với hero ngay trên.
   ═══════════════════════════════════════════════════════════════════════════ */
.sm-trustbar {
    background: var(--b2b-gray-50, #F8F9FA);
    border-bottom: 1px solid var(--b2b-gray-200, #E9ECEF);
    padding: 14px 0;
}
.sm-trustbar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.sm-trustbar__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--b2b-primary, #1A3A5C);
    white-space: nowrap;
}
.sm-trustbar__label i { color: var(--b2b-accent, #E8621A); }

.sm-trustbar__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sm-trustbar__list li {
    padding: 3px 10px;
    border: 1px solid var(--b2b-gray-300, #DEE2E6);
    border-radius: 3px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--b2b-gray-700, #495057);
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Cuộn ngang thay vì xuống dòng thành 3 hàng — giữ dải mỏng đúng vai trò của nó. */
    .sm-trustbar { padding: 10px 0; }
    .sm-trustbar__inner { flex-wrap: nowrap; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sm-trustbar__inner::-webkit-scrollbar { display: none; }
    .sm-trustbar__list { flex-wrap: nowrap; }
    .sm-trustbar__label { font-size: 11px; }
}