/* =========================================================================
   NgoiSaoXanh — các trang trong: danh sách bài viết/sản phẩm, chi tiết bài viết, chi tiết sản phẩm,
   Giới thiệu, Liên hệ, Giỏ báo giá. Nạp ở section head_tag của từng view (sau bộ nsx).
   Ghép từ class có sẵn (.container .section .grid .card .media .tabs .breadcrumb .pagination .prose .field .table…);
   ở đây chỉ phần riêng. Cỡ chữ/khoảng cách giữ nhỏ gọn như trang chủ.
   ========================================================================= */

/* ============================ ĐẦU TRANG ================================
   Breadcrumb (trái) + H1 + mô tả ngắn (giữa), không nền/khung riêng: nằm ngay đầu .container của section chính
   (.page-body, .cart, .about, .contact-page). Markup: Views/Shared/_PageHead.cshtml */
.page-intro { margin-bottom: var(--sp-6);}
.page-intro .breadcrumb { margin-bottom: var(--sp-4); display:none;}
.page-title {
    max-width: var(--section-head-max);
    margin: 0 auto;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    text-align: center;
    text-transform: uppercase;
}
.page-desc { max-width: var(--section-head-max); margin: var(--sp-2) auto 0; color: var(--text-2); font-size: var(--fs-sm); text-align: center; }

/* Thanh tab danh mục (link) phía trên lưới. Markup: Views/Shared/_CategoryTabs.cshtml */
.page-tabs { margin-bottom: var(--sp-5); }
.page-tabs .tab { display: inline-flex; align-items: center; }   /* tab ở đây là thẻ <a> */
.page-tabs.tabs-bar .tab { justify-content: center; }
.page-body .empty { padding: var(--sp-10) var(--sp-4); font-size: var(--fs-sm); }
.page-body .pagination { margin-top: var(--sp-8); }
/* Khối nội dung CKEditor của thể loại nằm cùng trang danh sách */
.page-content { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.page-content:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-content .prose { margin-inline: auto; }
.page-content ~ .grid, .page-content + .page-tabs { margin-top: var(--sp-8); }
.page-content + .page-tabs ~ .grid { margin-top: 0; }

/* Tiêu đề khối phụ ("Bài viết cùng chuyên mục", "Sản phẩm liên quan"): dùng .section-head + .section-title, thu gọn khoảng cách */
.related .section-head { margin-bottom: var(--sp-6); }
.related .section-title { margin-bottom: 0; }

/* ============================ CARD BÀI VIẾT ============================
   Ảnh 3:2 + ngày + tiêu đề (2 dòng) + tóm tắt (2 dòng, ẩn trên điện thoại). Nền --surface (mặc định của .card),
   viền trắng mảnh + bóng để tách khỏi nền section bg-2. Markup: Views/Shared/_ArticleCard.cshtml */
.post-card { border-color: var(--border-strong); box-shadow: var(--shadow); }
.post-card:hover { box-shadow: var(--shadow-lg); }
.post-card .card-body { gap: var(--sp-1); padding: var(--sp-3); }
.post-card .card-title { font-size: var(--fs-sm); }
.post-card .card-text { display: none; color: var(--text-2); }
.post-date { color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; display:none;}
@media (min-width: 768px) {
    .post-card .card-text { display: -webkit-box; }
}
@media (min-width: 1024px) {
    .post-card .card-body { padding: var(--sp-4); }
    .post-card .card-title { font-size: var(--fs-base); }
    .post-date { font-size: var(--fs-sm); }
}

/* ============================ CHI TIẾT BÀI VIẾT ========================
   Bố cục theo trenghe.vn: dải đầu nền --bg-1 (breadcrumb + H1 + thông tin, căn giữa) → thân nền kem chữ đậm:
   mục lục dính bên trái (nền --surface, JS: Contents/JS/nsx/toc.js) + ô Tóm tắt + nội dung. Markup: Views/Article/Index.cshtml */
.article-hero { padding: var(--sp-6) 0 var(--sp-8); border-bottom: 1px solid var(--border); background: var(--bg-2); text-align: center; }
.article-hero .breadcrumb ol { justify-content: center; }
.article-title {/* max-width: 32ch; */margin: var(--sp-4) auto var(--sp-3);font-size: var(--fs-h3);font-weight: var(--fw-bold);line-height: 1.3;}
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); }
.article-meta-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.article-meta-cat { color: var(--accent); }
.article-meta-cat:hover { color: var(--accent-2); }

.article-main { padding-block: var(--sp-8) var(--sp-12); background: var(--cream); color: var(--cream-ink-2); }
.article-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }

/* ---- Mục lục ---- */
.article-toc { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); }
.article-toc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.article-toc-title { margin: 0; color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.article-toc-toggle {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.article-toc-toggle:hover { border-color: var(--accent-line); background: var(--surface-2); }
.article-toc-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.article-toc.is-collapsed .article-toc-head { padding-block: var(--sp-3); }
.article-toc-nav { position: relative; max-height: 60vh; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); scrollbar-width: thin; }
.article-toc-list, .article-toc-sub { margin: 0; padding: 0; list-style: none; }
.article-toc-list { padding-top: var(--sp-3); }
.article-toc-item + .article-toc-item { margin-top: var(--sp-2); }
.article-toc-sub { margin-top: var(--sp-1); padding-left: var(--sp-3); border-left: 1px solid var(--border-strong); }
.article-toc-sub-item + .article-toc-sub-item { margin-top: var(--sp-1); }
.article-toc-link { display: block; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.article-toc-sub .article-toc-link { font-size: var(--fs-xs); }
.article-toc-link:hover { color: var(--text); background: var(--surface-2); }
.article-toc-link[aria-current="true"] { color: var(--accent); background: var(--bg-1); font-weight: var(--fw-semibold); }

/* ---- Ô Tóm tắt ---- */
.article-summary { margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--cream-line); border-left: 3px solid var(--surface); border-radius: var(--radius-lg); background: var(--cream-2); }
.article-summary-label { margin: 0 0 var(--sp-2); color: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.article-summary-text { margin: 0; color: var(--cream-ink); font-size: var(--fs-base); line-height: 1.7; }

/* ---- Nội dung (màu chữ tông đậm do .prose-cream trong nsx/components.css) ---- */
.article-prose { max-width: none; }
.article-prose h2, .article-prose h3 { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

.article-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--cream-line); }
.article-foot-label { color: var(--cream-ink-2); font-size: var(--fs-sm); }
.article-foot .tag { border-color: var(--cream-line); color: var(--cream-ink-2); }
.article-foot .tag:hover { border-color: var(--surface); color: var(--surface); }
.article-foot .link-arrow { color: var(--surface); }

@media (min-width: 1024px) {
    .article-hero { padding: var(--sp-8) 0 var(--sp-10); }
    .article-main { padding-block: var(--sp-10) var(--sp-16); }
    .article-layout { gap: var(--sp-8); grid-template-columns: 280px minmax(0, 1fr); }
    .article-layout-no-toc { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
    .article-toc { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
    .article-toc-nav { max-height: calc(100vh - var(--header-h) - var(--sp-16) - var(--sp-4)); }
}

/* ============================ CHI TIẾT SẢN PHẨM ========================
   Nền section bg-2. Trên: thư viện ảnh khung --surface (hiện trọn ảnh) (trái)
   + khung thông tin nền kem --cream, chữ tông đậm: tên, tình trạng, mã, mô tả, giá, hàng nút [số lượng | Thêm vào giỏ | Gọi] (phải);
   dưới: khung --surface chứa tab Chi tiết / Thông số; cuối: sản phẩm liên quan.
   Markup: Views/Product/Index.cshtml, JS: Contents/JS/nsx/product.js */
.product-detail { background: var(--bg-2); }
.product-detail .breadcrumb { margin-bottom: var(--sp-5); }
.product-top { align-items: start; gap: var(--sp-6); }

.product-gallery-main {
    display: block;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.product-gallery-main img { object-fit: contain; padding: var(--sp-4); border-radius: var(--radius-lg); }
.product-gallery-main.placeholder { border-color: var(--border-strong); background: var(--surface); }
.product-thumbs { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.product-thumbs::-webkit-scrollbar { display: none; }
.product-thumb {
    display: block; flex: none;
    width: 72px; aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    opacity: .7;
    transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.product-thumb { background: var(--surface); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-1); }
.product-thumb:hover, .product-thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.product-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.product-info {
    display: flex; flex-direction: column; gap: var(--sp-4);
    min-width: 0;
    padding: var(--sp-5);
    border: 1px solid var(--cream-line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--cream-ink-2);
    box-shadow: var(--shadow);
}
.product-title { margin: 0; color: var(--cream-ink); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.25; }
.product-info .badge { background: var(--surface); color: var(--text); }
.product-info .badge-warning { background: var(--cream-2); color: var(--cream-ink); }
.product-code { color: var(--cream-ink-2); font-size: var(--fs-sm); }
.product-code strong { color: var(--cream-ink); }
.product-desc { margin: 0; color: var(--cream-ink-2); font-size: var(--fs-sm); white-space: pre-line; }
.product-price {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--cream-line);
    border-radius: var(--radius);
    background: var(--cream-2);
}
.product-price-label { color: var(--cream-ink-2); font-size: var(--fs-sm); }
.product-price-value { color: var(--surface); font-size: var(--fs-h3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.product-price-old { color: var(--cream-ink-2); font-size: var(--fs-sm); text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* Hàng nút: [số lượng] [Thêm vào giỏ hàng] [Gọi …] — xuống dòng khi hẹp */
.product-buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); }
.product-buy .qty { border-color: var(--cream-line); }
.product-buy .qty .input, .product-buy .qty .input:not(:placeholder-shown) { min-height: 46px; background: var(--cream); color: var(--cream-ink); }
.product-buy .qty button { background: var(--cream-2); color: var(--cream-ink); }
.product-buy .qty button:hover { color: var(--surface); }
.product-call { --btn-bd: var(--surface); --btn-fg: var(--surface); }
.product-call:hover { --btn-bg: var(--surface); --btn-bd: var(--surface); --btn-fg: var(--text); }
.product-note { margin: 0; color: var(--cream-ink-2); font-size: var(--fs-sm); }

/* Khung tab nền kem (giống thân bài viết): nội dung dùng .prose-cream, thanh tab gạch chân --surface */
.product-tabs {
    margin-top: var(--sp-8);
    padding: var(--sp-5);
    border: 1px solid var(--cream-line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--cream-ink-2);
    box-shadow: var(--shadow);
}
.product-tabs .tabs { margin-bottom: var(--sp-5); border-bottom-color: var(--cream-line); }
.product-tabs .tab { color: var(--cream-ink-2); }
.product-tabs .tab:hover { color: var(--cream-ink); }
.product-tabs .tab[aria-selected="true"] { border-bottom-color: var(--surface); color: var(--surface); }
.product-tabs-title { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--cream-line); color: var(--cream-ink); font-size: var(--fs-h4); font-weight: var(--fw-semibold); text-transform: uppercase; }
.product-tabs .prose { max-width: none; }

@media (min-width: 1024px) {
    .product-top { gap: var(--sp-8); }
    .product-info, .product-tabs { padding: var(--sp-6); }
}

/* ============================ GIỚI THIỆU (6 khối) ======================
   Giản lược theo trenghe.vn/ve-tre-nghe: nhãn .eyebrow có vạch + tiêu đề căn trái (chữ thường) + đoạn ngắn; ngăn bằng đường mảnh.
   Nhịp nền: ảnh phủ xanh → kem → --bg-1 → kem → --bg-0 → dải CTA --bg-1. Markup: Views/Default/Abouts.cshtml */
.about-head { max-width: 640px; margin-bottom: var(--sp-8); }
.about-head .eyebrow { margin-bottom: var(--sp-3); }
.about-title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.3; }
/* khối nền kem: chữ tông đậm, nhãn màu --surface */
.about-intro, .about-commit { background: var(--cream); color: var(--cream-ink-2); }
.about-intro .eyebrow, .about-commit .eyebrow { color: var(--surface); }
.about-intro .about-title, .about-commit .about-title { color: var(--cream-ink); }

/* ---- 1. Mở trang: ảnh nền + lớp phủ --overlay-side, chữ góc dưới trái ---- */
.about-hero {
    position: relative;
    isolation: isolate;
    display: flex; align-items: flex-end;
    min-height: 420px;
    padding: var(--sp-16) 0 var(--sp-12);
    background-color: var(--bg-1);
    background-position: center;
    background-size: cover;
}
.about-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-side); }
.about-hero-inner { width: 100%; }
.about-hero-title { max-width: 18ch; margin: 0 0 var(--sp-4); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.15; text-transform: uppercase; }
.about-hero-desc { max-width: 56ch; margin: 0 0 var(--sp-6); color: var(--text-2); font-size: var(--fs-base); line-height: 1.7; }

/* ---- 2. Chúng tôi là ai ---- */
.about-intro-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.about-lead { margin: 0; color: var(--cream-ink); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.35; }
.about-intro-body { max-width: none; }
.about-stats-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4);
    margin: var(--sp-10) 0 0; padding-top: var(--sp-6); border-top: 1px solid var(--cream-line);
}
.about-stats-num { color: var(--surface); font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.about-stats-label { margin: var(--sp-1) 0 0; color: var(--cream-ink-2); font-size: var(--fs-sm); }

/* ---- 3. Lĩnh vực: danh sách đánh số, ngăn bằng đường mảnh ---- */
.about-field-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.about-field {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-2);
    border-bottom: 1px solid var(--border-strong);
    transition: background-color var(--dur) var(--ease);
}
.about-field:hover { background: var(--surface); }
.about-field-num { color: var(--accent); font-size: var(--fs-h4); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.about-field-title { margin: 0; color: var(--text); font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.about-field-desc { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.about-field-arrow { color: var(--accent); font-size: var(--fs-h4); transition: transform var(--dur) var(--ease); }
.about-field:hover .about-field-arrow { transform: translateX(4px); }
.about-field .stretched-link:focus-visible { outline: none; }
.about-field:focus-within { box-shadow: inset var(--focus-ring); }

/* ---- 4. Năng lực & Cam kết: ảnh lớn + 4 mục xếp dọc ---- */
.about-commit-grid { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.about-commit-media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about-commit-list { margin: 0; padding: 0; list-style: none; }
.about-commit-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--cream-line); }
.about-commit-num { color: var(--surface); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; font-variant-numeric: tabular-nums; }
.about-commit-title { margin: 0; color: var(--cream-ink); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.4; text-transform: uppercase; }
.about-commit-desc { margin: var(--sp-1) 0 0; color: var(--cream-ink-2); font-size: var(--fs-sm); line-height: 1.6; }

/* ---- 5. Quy trình: timeline dọc (mobile) → ngang (từ 1024px), số trong vòng tròn nối bằng đường mảnh ---- */
.about-process { background: var(--bg-0); }
.about-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.about-step { position: relative; padding: 0 0 var(--sp-6) calc(48px + var(--sp-4)); }
.about-step:last-child { padding-bottom: 0; }
/* đường dọc nối các vòng tròn */
.about-step::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 1px; background: var(--border-strong); }
.about-step:last-child::before { display: none; }
.about-step-num {
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 1px solid var(--accent-line-strong);
    border-radius: 50%;
    background: var(--bg-0);
    color: var(--accent);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.about-step-title { margin: 0; padding-top: var(--sp-3); color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.about-step-desc { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

@media (min-width: 768px) {
    .about-stats-row { grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .about-hero { min-height: 560px; padding-bottom: var(--sp-16); }
    .about-intro-grid { gap: var(--sp-12); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .about-field { padding: var(--sp-6) var(--sp-4); gap: var(--sp-8); grid-template-columns: 64px minmax(0, 1fr) auto; }
    .about-commit-grid { gap: var(--sp-12); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .about-commit-media { position: sticky; top: calc(var(--header-h) + var(--sp-6)); aspect-ratio: 1 / 1; }

    .about-steps { display: grid; grid-template-columns: repeat(var(--count, 5), minmax(0, 1fr)); gap: var(--sp-6); }
    .about-step { padding: calc(48px + var(--sp-4)) 0 0; }
    /* đường ngang nối từ vòng tròn này sang vòng tròn kế */
    .about-step::before { left: 48px; right: calc(var(--sp-6) * -1); top: 23px; bottom: auto; width: auto; height: 1px; }
    .about-step-title { padding-top: 0; }
}

/* ---- 6. Kêu gọi: dải CTA cuối trang Giới thiệu ---- */
.cta-band { border-top: 1px solid var(--border); background: var(--bg-1); text-align: center; }
.cta-band-title { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); text-transform: uppercase; }
.cta-band-desc { max-width: 60ch; margin: 0 auto; color: var(--text-2); font-size: var(--fs-sm); }
.cta-band-actions { justify-content: center; margin-top: var(--sp-5); }

/* ============================ LIÊN HỆ ==================================
   Trình bày theo hungphuthinh.vn (trang Liên hệ / Tuyển dụng): dải tiêu đề nền xanh đậm (H1 in hoa căn giữa, không breadcrumb)
   → vùng nền kem: 2 khung sáng viền xanh --surface — form lời nhắn (trái) + cột phải: trò chuyện, thông tin công ty, bản đồ
   (cột cao bằng form, bản đồ lấp phần còn lại). Chữ / ô nhập / nút trong vùng sáng dùng tông đậm (--cream-ink, --surface).
   Markup: Views/Contact/Index.cshtml */
.contact-page { background: var(--cream-2); }

/* ---- Dải tiêu đề ---- */
.contact-head { padding: var(--sp-8) 0; border-bottom: 3px solid var(--surface); background: var(--bg-1); text-align: center; }
.contact-head .container { max-width: var(--section-head-max); }
.contact-eyebrow {
    display: inline-block;
    margin: 0 0 var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.contact-hero-title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); text-transform: uppercase; }
.contact-hero-desc {/* max-width: 60ch; */margin: var(--sp-3) auto 0;color: var(--text-2);font-size: var(--fs-sm);}

/* ---- 2 khung sáng viền xanh ---- */
.contact-main-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.contact-form, .contact-aside {
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--surface);
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--cream-ink-2);
    box-shadow: var(--shadow-sm);
}
.contact-form-title, .contact-aside-title, .contact-company-name {
    margin: 0;
    color: var(--surface);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    text-transform: uppercase;
}
.contact-form-desc, .contact-aside-desc { margin: calc(var(--sp-2) * -1) 0 0; color: var(--cream-ink-2); font-size: var(--fs-sm); }

/* Ô nhập trên nền sáng */
.contact-form .label { color: var(--cream-ink); }
.contact-form .input, .contact-form .select, .contact-form .textarea {
    border-color: var(--cream-line);
    background-color: var(--cream-2);
    color: var(--cream-ink);
}
.contact-form .input:hover, .contact-form .select:hover, .contact-form .textarea:hover { border-color: var(--surface); }
.contact-form .input:focus, .contact-form .select:focus, .contact-form .textarea:focus { border-color: var(--surface); box-shadow: 0 0 0 3px var(--cream-line); }
.contact-form .input:not(:placeholder-shown), .contact-form .textarea:not(:placeholder-shown) { background-color: var(--cream-2); }
.contact-form .select option { background: var(--cream); color: var(--cream-ink); }
.contact-form .req { color: var(--surface); }
.contact-form .btn-primary { border-color: var(--surface); background: var(--surface); color: var(--text); }
.contact-form .btn-primary:hover { border-color: var(--surface-2); background: var(--surface-2); color: var(--text); }
.contact-form .alert { border-color: var(--cream-line); background: var(--cream-2); color: var(--cream-ink); }

/* Cột phải */
.contact-chat-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-chat { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.contact-chat .btn { flex: 1 1 auto; justify-content: center; }
.contact-chat .btn-primary { border-color: var(--surface); background: var(--surface); color: var(--text); }
.contact-chat .btn-outline { border-color: var(--surface); color: var(--surface); }
.contact-chat .btn-outline:hover { background: var(--surface); color: var(--text); }
.contact-company { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--cream-line); }
.contact-company:first-child { padding-top: 0; border-top: 0; }
.contact-company-name { font-size: var(--fs-base); }
.contact-company-info { color: var(--cream-ink-2); font-size: var(--fs-sm); line-height: 1.7; overflow-wrap: anywhere; }
.contact-company-info p { margin: 0; }
.contact-company-info a { color: var(--surface); font-weight: var(--fw-semibold); }
.contact-company-info a:hover { color: var(--surface-2); }
.contact-social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.contact-social-link {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 1px solid var(--surface);
    border-radius: 50%;
    color: var(--surface);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-social-link:hover { background: var(--surface); color: var(--text); }

/* Bản đồ trong cột phải: flex:1 lấp phần còn trống đến đáy cột (cột cao bằng form), tối thiểu 260px */
.contact-map { flex: 1; display: flex; min-height: 260px; overflow: hidden; border: 1px solid var(--cream-line); border-radius: var(--radius); }
.contact-map iframe { display: block; flex: 1; width: 100%; min-height: 260px; border: 0; }

@media (min-width: 1024px) {
    .contact-head { padding: var(--sp-10) 0; }
    .contact-main-grid { gap: var(--sp-6); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .contact-form, .contact-aside { padding: var(--sp-6); }
}

/* ============================ GIỎ BÁO GIÁ ==============================
   Bước 1 (Views/Cart/Index): bảng sản phẩm + thanh cuối (tiếp tục xem | tổng cộng + nút sang bước 2).
   Bước 2 (Views/Cart/XacNhan): form thông tin khách (trái) + tóm tắt yêu cầu (phải). Cảm ơn: Views/Cart/HoanTat. */
.cart .alert { margin-bottom: var(--sp-4); }
.cart .table-wrap { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow); }
.cart-product { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
.cart-product img { flex: none; width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; }
.cart-qty { display: flex; align-items: center; gap: var(--sp-2); }
.cart-qty .input { width: 72px; min-height: 40px; padding: var(--sp-2); text-align: center; }
.table .cart-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-remove { color: var(--muted); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.cart-remove:hover { color: var(--danger); }

/* Thanh cuối bước 1: mobile xếp dọc (tổng + nút trên, link tiếp tục dưới); từ 768px hai bên */
.cart-bar { display: flex; flex-direction: column-reverse; gap: var(--sp-4); margin-top: var(--sp-5); }
.cart-checkout { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.cart-checkout .btn { justify-content: center; }
.cart-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin: 0; }
.cart-total-label { color: var(--text-2); font-size: var(--fs-sm); }
.cart-total-value { color: var(--accent); font-size: var(--fs-h4); font-variant-numeric: tabular-nums; }
.cart-continue { align-self: flex-start; }
@media (min-width: 768px) {
    .cart-bar { flex-direction: row; align-items: center; justify-content: space-between; }
    .cart-checkout { flex-direction: row; align-items: center; gap: var(--sp-5); }
    .cart-continue { align-self: center; }
}

/* Bước 2: form (trái) + tóm tắt (phải), cùng kiểu khung --surface như form Liên hệ */
.checkout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.checkout-form, .checkout-summary {
    display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.checkout-form .input, .checkout-form .textarea { background-color: var(--bg-1); }
.checkout-summary { background: var(--bg-0); }
.checkout-title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); text-transform: uppercase; }
.checkout-desc { margin: calc(var(--sp-2) * -1) 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.checkout-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.checkout-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.checkout-item { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--border); }
.checkout-item:first-child { padding-top: 0; }
.checkout-item-img { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius); background: var(--cream); }
.checkout-item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.checkout-item-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.checkout-item-name { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; }
a.checkout-item-name:hover { color: var(--accent); }
.checkout-item-meta { color: var(--text-2); font-size: var(--fs-xs); }
.checkout-item-meta strong { color: var(--text); font-variant-numeric: tabular-nums; }
.checkout-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.checkout-total strong { color: var(--accent); font-size: var(--fs-h4); font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
    .checkout { gap: var(--sp-8); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .checkout-form, .checkout-summary { padding: var(--sp-6); }
    .checkout-summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

.order-code { color: var(--accent); font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: .04em; }

/* Chữ nhỏ in đậm → Roboto (quy ước ở cuối nsx/components.css) */
.post-card .card-title, .article-toc-link[aria-current="true"], .article-summary-label, .about-step-num,
.contact-eyebrow, .contact-company-info a, .checkout-item-name,
:where(.page-desc, .post-date, .article-meta, .article-toc-link, .article-foot-label, .product-code, .product-desc,
       .product-price-label, .product-note, .about-stats-label, .about-field-desc, .about-commit-desc, .about-step-desc,
       .cta-band-desc, .contact-hero-desc, .contact-form-desc, .contact-aside-desc, .contact-company-info,
       .cart-total-label, .checkout-desc, .checkout-item-meta, .checkout-total) :is(strong, b) { font-family: var(--font-sm-bold); }
.checkout-total strong { font-family: var(--font); }   /* số tổng cỡ --fs-h4 */
@media (min-width: 1024px) {
    .post-card .card-title { font-family: var(--font); }
}