/* ============================================================
   PDP Body — Tab Nav + Content Sections
   Load DUY NHẤT trên máy in (printer / printer-color).
   Không dùng chung với mực in — xem pdp-cartridge.css.
   ============================================================ */

html { scroll-behavior: smooth; }


/* ─── Tab Nav (sticky) ──────────────────────────────────────── */
.tabnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface-base, #fff);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

/* WP admin bar chiếm 32px trên desktop; ẩn trên mobile nhưng class vẫn còn */
.admin-bar .tabnav {
    top: 32px;
}
@media screen and (max-width: 600px) {
    .admin-bar .tabnav {
        top: 0;
    }
}

.tabnav__list {
    display: flex;
    gap: var(--s-1, 0.25rem);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
}

.tabnav__list::-webkit-scrollbar { display: none; }

.tabnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-4, 1rem) var(--s-4, 1rem) 5px;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-muted, #4b5563);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s;
}

.tabnav__link:hover {
    color: var(--color-text-primary, #111);
    text-decoration: none;
}

.tabnav__link.is-active {
    color: var(--color-brand-primary, #dd3333);
    text-decoration-line: underline;
    text-decoration-color: var(--color-brand-primary, #dd3333);
    text-decoration-thickness: 2px;
    text-underline-offset: 20px;
}

.tabnav__count {
    background: var(--color-surface-sunken, #f2f4f7);
    color: var(--color-text-subtle, #6b7280);
    font-size: var(--fs-xs, 0.75rem);
    padding: 1px 7px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 700;
    text-decoration: none;
}

/* ─── Gợi ý "Cuộn ngang" cho thanh tab (CHỈ mobile/tablet) ───────────
   Dòng nhỏ căn phải nằm NGAY TRÊN hàng tab (KHÔNG đè lên chữ tab).
   Mặc định ẩn (desktop). Tự ẩn khi user đã cuộn (.is-scrolled) hoặc khi
   các tab vừa khít không cần cuộn (.no-overflow) — toggle bằng tab-nav.js. */
.tabnav__scroll-hint {
    display: none;
}
@media (max-width: 999px) {
    .tabnav__scroll-hint {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        padding: 6px 0 2px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--color-brand-primary, #dd3333);
        pointer-events: none;
        white-space: nowrap;
        opacity: 1;
        max-height: 40px;
        overflow: hidden;
        transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease;
    }
    .tabnav__scroll-arrow {
        flex-shrink: 0;
        animation: tabnav-hint-nudge 1.1s ease-in-out infinite;
    }
    /* Đã cuộn / không tràn → thu gọn dòng gợi ý mượt (ẩn cả chiều cao) */
    .tabnav.is-scrolled .tabnav__scroll-hint,
    .tabnav.no-overflow .tabnav__scroll-hint {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}
@keyframes tabnav-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .tabnav__scroll-arrow { animation: none; }
}

/* ─── PDP Description wrapper ───────────────────────────────── */
.pdp-description { margin-bottom: var(--s-8, 2rem); }
.pdp-description__function { padding-top: 20px; }

/* ─── Desktop reading width: từ specs (Thông số kỹ thuật) trở xuống ────
   Áp trực tiếp vào `.container` BÊN TRONG mỗi khối — KHÔNG áp vào
   .pdp-description/.section ngoài — để đường kẻ ngang phân cách section
   (border-top vẽ trên .pdp-description hoặc .section, xem khối dưới) giữ
   NGUYÊN full-width như cũ; chỉ cột nội dung đọc (chữ/bảng) bị co hẹp.
   3 kiểu `.container` lồng trong `.pdp-description` (đã rà toàn bộ file):
     - trực tiếp                          : ink · cost-compare · compare · combo
     - qua <section class="section">      : specs · faq · reviews
     - qua <section class="consult-cta">  : consult-cta
   Neo bằng :has(> section#specs) — id thật do ACF render trong specs.php,
   KHÔNG phải id gắn thêm ở div ngoài (đã bỏ, tránh trùng id) — rồi `~` bắt
   hết các khối SAU specs; description.php (đứng TRƯỚC specs) không bị ảnh
   hưởng. Chỉ desktop (>880px); điện thoại/tablet giữ full-width. margin-left
   dùng đúng công thức mép trái `.container` chuẩn Flatsome (không cộng thêm
   15px — padding 15px sẵn có của .container tự lo phần đó) để thẳng hàng
   với khối "Tính năng nổi bật" phía trên. */
@media (min-width: 881px) {
    .pdp-description:has(> section#specs) > .container,
    .pdp-description:has(> section#specs) > .section > .container,
    .pdp-description:has(> section#specs) > .consult-cta > .container,
    .pdp-description:has(> section#specs) ~ .pdp-description > .container,
    .pdp-description:has(> section#specs) ~ .pdp-description > .section > .container,
    .pdp-description:has(> section#specs) ~ .pdp-description > .consult-cta > .container {
        max-width: 1140px;
        margin-left: max(0px, calc((100% - 1250px) / 2));
        margin-right: auto;
    }
}

/* ─── Divider phân tách KHỐI top-level ───────────────────────────
   specs / faq / reviews / description tự vẽ đường kẻ nhờ `.section`
   bên trong (rule `.pdp-description .section { border-top }` phía dưới).
   Các khối render `.pdp-description` TRỰC TIẾP — ink, cost-compare,
   inline-compare ("Chọn model"), combo, consult-cta — không có `.section`
   nên thiếu kẻ, nhìn không đều. Thêm kẻ trên full-width cho đúng những
   khối này; `:not(:has(.section))` tự loại các khối đã có kẻ → không trùng
   đường (mỗi ranh giới khối đúng 1 kẻ, phân tách trên–dưới đồng nhất). */
.pdp-description:not(:has(.section)) {
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    padding-top: var(--s-8, 2rem);
}

/* Chỉ khớp bucket 'other' (pdp-generic/description.php có id="description") —
   pdp-printer/description.php gốc KHÔNG có id này nên rule này không ảnh hưởng
   tới Máy in/Mực in, dù file CSS này dùng chung. */
#description.pdp-description { padding-top: var(--s-6, 1.5rem); }

/* [caption] shortcode wrapper — chỉ pdp-generic/description.php chạy do_shortcode()
   cho mô tả dài (pdp-printer/description.php giữ nguyên, không do_shortcode, nên
   không có div.wp-caption nào xuất hiện ở đó). WP in inline style="width:XXXpx"
   trên wrapper theo kích thước ảnh gốc — cần max-width để không tràn .container. */
#description .wp-caption {
    max-width: 100%;
    margin: 0 0 var(--s-4, 1rem);
}
#description .wp-caption img {
    max-width: 100%;
    height: auto;
}
#description .wp-caption-text {
    margin: 8px 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary, #666);
    text-align: center;
}

.pdp-description a {
    color: var(--color-brand-primary, #dd3333);
    text-decoration: none;
}

.pdp-description a:hover {
    text-decoration: underline;
}

/* ─── Section Shared ─────────────────────────────────────────── */
.pdp-description .section {
    padding: var(--s-8, 2rem) 0;
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}

.pdp-description .section:first-child { border-top: none; }

.pdp-description .section__title {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: 800;
    color: var(--color-text-primary, #111);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-2, 0.5rem);
}

.pdp-description .section__sub {
    color: var(--color-text-muted, #4b5563);
    font-size: var(--fs-sm, 0.875rem);
    margin-bottom: var(--s-5, 1.25rem);
    max-width: 875px;      /* máy tính: giới hạn ngang cho dễ đọc */
    line-height: 1.6;
}
/* Điện thoại: bỏ giới hạn cho full chiều rộng (khai báo tường minh) */
@media (max-width: 549px) {
    .pdp-description .section__sub {
        max-width: none;
    }
}

/* ─── Audience Tables ─────────────────────────────────────────── */
.pdp-description .audience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5, 1.25rem);
}

@media (max-width: 880px) {
    .pdp-description .audience { grid-template-columns: 1fr; }
}

.pdp-description .audience__col-title {
    display: flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    font-size: var(--fs-md, 1.125rem);
    font-weight: 800;
    margin-bottom: var(--s-4, 1rem);
}

.pdp-description .audience__col-title svg { width: 20px; height: 20px; fill: currentColor; }

.pdp-description .audience__col--fit .audience__col-title  { color: var(--color-status-success-text, #166534); }
.pdp-description .audience__col--misfit .audience__col-title { color: var(--color-status-error-text, #991b1b); }

.pdp-description .audience-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1, 0.25rem);
    padding: var(--s-3, 0.75rem) 0;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.pdp-description .audience-item:last-child { border-bottom: none; }

.pdp-description .audience-item__target {
    font-weight: 700;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-primary, #111);
}

.pdp-description .audience-item__reason {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-muted, #4b5563);
    line-height: 1.5;
}

.pdp-description .audience-item__alt {
    font-size: var(--fs-xs, 0.75rem);
    margin-top: 2px;
}

.pdp-description .audience-item__alt a { font-weight: 700; }

/* ─── Feature Deep-Dive ───────────────────────────────────────── */
.pdp-description .feature-deep {
    display: flex;
    flex-direction: column;
    gap: var(--s-8, 2rem);
}

.pdp-description .feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6, 1.5rem);
    align-items: center;
}

.pdp-description .feature-block:nth-child(even) .feature-block__media { order: -1; }

@media (max-width: 880px) {
    .pdp-description .feature-block { grid-template-columns: 1fr; }
    .pdp-description .feature-block:nth-child(even) .feature-block__media { order: 0; }
}

.pdp-description .feature-block__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-brand-primary, #dd3333);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: var(--fs-sm, 0.875rem);
    margin-bottom: var(--s-3, 0.75rem);
}

.pdp-description .feature-block__title {
    font-size: var(--fs-lg, 1.25rem);
    font-weight: 800;
    color: var(--color-text-primary, #111);
    margin-bottom: var(--s-3, 0.75rem);
    letter-spacing: -0.01em;
}

.pdp-description .feature-block__text {
    color: var(--color-text-muted, #4b5563);
    font-size: var(--fs-sm, 0.875rem);
    line-height: 1.7;
    margin-bottom: var(--s-3, 0.75rem);
}

.pdp-description .feature-block__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
    padding: 0;
    margin: 0;
}

.pdp-description .feature-block__list li {
    display: flex;
    gap: var(--s-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-body, #1f2937);
}

.pdp-description .feature-block__list svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    color: var(--color-brand-primary, #dd3333);
    flex-shrink: 0;
    margin-top: 2px;
}

.pdp-description .feature-block__list .fa-check {
    font-size: 11px;
    color: var(--color-brand-primary, #e5392e);
    flex-shrink: 0;
    margin-top: 2px;
}

.pdp-description .feature-block__media {
    aspect-ratio: 4 / 3;
    background: var(--color-surface-sunken, #f2f4f7);
    border: 1px dashed var(--color-border-default, #d1d5db);
    border-radius: var(--radius-lg, 12px);
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--color-text-subtle, #6b7280);
    padding: var(--s-4, 1rem);
}

.pdp-description .feature-block__media svg { width: 40px; height: 40px; margin-bottom: var(--s-2, 0.5rem); fill: currentColor; }
.pdp-description .feature-block__media-label { font-size: var(--fs-xs, 0.75rem); line-height: 1.5; }

.pdp-description .feature-block__media:has(img) {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    border: none;
    padding: 0;
    background: var(--color-surface-sunken, #f2f4f7);
    overflow: hidden;
}
.pdp-description .feature-block__media img { width: 100%; height: auto; display: block; }
.pdp-description .feature-block__media:has(img) .feature-block__media-label {
    padding: var(--s-3, 0.75rem) var(--s-4, 1rem);
    color: var(--color-text-subtle, #6b7280);
    text-align: center;
}

/* ─── Flush sections remove top padding + border (first content block) ── */
.pdp-description .section--flush {
    padding-top: 0;
    border-top: none;
}

/* ─── Adjacent pdp-description sections get a top border ───────── */
.pdp-description + .pdp-description .section {
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}

/* ─── Bỏ 2 đường kẻ quanh consult-cta (theo yêu cầu user) ────────
   Divider #1 (trên consult-cta): do rule :not(:has(.section)) ở
   trên vẽ cho MỌI khối pattern-1 (ink/cost-compare/inline-compare/
   combo/consult-cta) — neo :has(> .consult-cta) để chỉ null đúng
   khối này, không đụng các khối pattern-1 khác.
   Divider #2 (dưới consult-cta, trên FAQ): do rule "Adjacent
   pdp-description" ngay trên vẽ lại border-top cho .section đầu
   tiên của khối liền sau — chỉ null khi khối liền trước là
   consult-cta, không ảnh hưởng các cặp specs↔faq/faq↔reviews... */
.pdp-description:has(> .consult-cta) {
    border-top: none;
}
.pdp-description:has(> .consult-cta) + .pdp-description .section {
    border-top: none;
}

/* ─── FAQ Accordion ──────────────────────────────────────────── */
.pdp-description .faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
    max-width: 1140px;
}

.pdp-description .faq-item {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin: 0;
}

.pdp-description .faq-item__q {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 0.75rem);
    padding: 10px var(--s-4, 1rem) !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    text-align: left;
    font-size: var(--fs-sm, 0.875rem) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    min-height: unset !important;
    color: var(--color-text-primary, #111);
    font-family: inherit;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.pdp-description .faq-item__q:hover {
    color: var(--color-brand-primary, #dd3333);
}

.pdp-description .faq-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-brand-primary, #dd3333);
    transition: transform 0.2s ease;
}

.pdp-description .faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
    color: var(--color-brand-primary, #dd3333);
}

.pdp-description .faq-item__a {
    display: none;
    padding: 0 var(--s-4, 1rem) var(--s-4, 1rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-muted, #4b5563);
    line-height: 1.7;
}

.pdp-description .faq-item.is-open .faq-item__a {
    display: block;
}

.pdp-description .faq-item__a p:last-child { margin-bottom: 0; }

/* ─── Reviews Collapse ───────────────────────────────────────── */
.reviews-collapse {
    position: relative;
    max-height: 400px;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

.reviews-collapse__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--color-surface-base, #fff));
    pointer-events: none;
    transition: opacity 0.3s;
}

.reviews-collapse.is-expanded .reviews-collapse__fade {
    opacity: 0;
}

.reviews-collapse__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--s-4, 1rem);
}

.reviews-collapse__toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 22px !important;
    border: 1px solid var(--color-border-default, #d1d5db) !important;
    border-radius: var(--radius-pill, 999px) !important;
    background: var(--color-surface-base, #fff) !important;
    color: var(--color-text-muted, #4b5563) !important;
    font-size: var(--fs-sm, 0.875rem) !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-height: unset !important;
    line-height: 1 !important;
    transition: border-color 0.15s, color 0.15s;
}

.reviews-collapse__toggle:hover {
    border-color: var(--color-brand-primary, #dd3333) !important;
    color: var(--color-brand-primary, #dd3333) !important;
}

.reviews-collapse__icon {
    flex-shrink: 0;
    transition: transform 0.35s ease;
}

/* Font rating trong "Sản phẩm tương tự" / "Thường mua cùng" — chỉ scope 2 wrapper này,
   KHÔNG đụng .info__rating (rating của sản phẩm chính ở hero) hay các trang khác dùng chung content-product.php */
.related-products-wrapper .wp_rv_product_info,
.upsells-wrapper .wp_rv_product_info {
    font-size: 9px !important;
}

.reviews-collapse__toggle[aria-expanded="true"] .reviews-collapse__icon {
    transform: rotate(180deg);
}

/* ============================================================================
   CONSULT CTA BANNER — "Cần tư vấn cấu hình phù hợp văn phòng bạn?"
   Khối tối, LUÔN hiển thị mặc định, nạp ngay TRÊN khối FAQ.
   Markup: template-parts/pdp-printer/consult-cta.php
   ========================================================================== */
.consult-cta {
    margin: 32px 0;
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
}
.consult-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 32px;
    color: var(--color-text-inverse, #fff);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.consult-cta__copy {
    flex: 1 1 100%; /* chiếm trọn hàng → đẩy cụm nút xuống hàng dưới */
    min-width: 0;
}
.consult-cta__title {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text-inverse, #fff);
}
.consult-cta__sub {
    margin: 0;
    max-width: 640px; /* giới hạn bề rộng dòng mô tả cho dễ đọc */
    font-size: var(--fs-sm, 0.9375rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.consult-cta__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.consult-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: var(--fs-base, 1.0625rem); /* nút to hơn dòng mô tả */
    line-height: 1.1;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1.5px solid transparent;
    color: #fff !important; /* chữ + icon (currentColor) luôn TRẮNG — ghi đè màu link đỏ của theme */
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.consult-cta__btn:hover,
.consult-cta__btn:focus {
    transform: translateY(-2px);
    color: #fff !important;
}
.consult-cta__btn * {
    color: #fff !important;
}
.consult-cta__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #fff;
}
.consult-cta__btn-sub {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* Gọi tư vấn — ghost trắng viền mờ */
.consult-cta__btn--call {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-inverse, #fff);
    border-color: rgba(255, 255, 255, 0.35);
}
.consult-cta__btn--call:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
}
/* Chat Zalo — xanh Zalo */
.consult-cta__btn--zalo {
    background: #0068ff;
    color: #fff;
}
.consult-cta__btn--zalo:hover {
    background: #0057d6;
}
/* Mua ngay — đỏ thương hiệu */
.consult-cta__btn--buy {
    background: var(--color-brand-primary, #dd3333);
    color: #fff;
}
.consult-cta__btn--buy:hover {
    background: var(--color-brand-primary-hover, #c12424);
}

@media (max-width: 768px) {
    .consult-cta {
        margin: 0;
    }
    .consult-cta__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start; /* ghi đè space-between của desktop — tránh đẩy giãn dọc */
        text-align: center;
        gap: 18px;
        padding: 24px 20px;
    }
    /* QUAN TRỌNG: reset flex — ở column, flex-basis:320px sẽ biến thành CHIỀU CAO 320px → dư khoảng trống */
    .consult-cta__copy {
        flex: 0 0 auto;
    }
    .consult-cta__actions {
        flex: 0 0 auto;
        justify-content: center;
    }
    .consult-cta__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* Mua ngay: nhãn "Mua ngay" + GIÁ nằm NGANG cùng hàng, chữ & số to 16px */
    .consult-cta__btn--buy {
        font-size: 16px;
    }
    .consult-cta__btn--buy .consult-cta__btn-sub {
        display: inline;
        font-size: 16px;
        margin: 0 0 0 8px;
        opacity: 1;
    }
    .consult-cta__btn--buy .consult-cta__btn-sub::before {
        content: "·";
        margin-right: 8px;
    }
}

/* ============================================================
   Cost Compare (Khối A) — So sánh chi phí vận hành máy tương tự
   Namespaced .mitn-cc để không đụng class chung của Flatsome.
   ============================================================ */
#cost-compare .mitn-cc { margin-top: var(--s-4, 1rem); }

.mitn-cc__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 16px;
    font-size: var(--fs-sm, 0.875rem);
}
.mitn-cc__basepill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-status-success-surface, #eafaf0);
    color: var(--color-status-success, #16a34a);
    border: 1px solid var(--color-status-success-border, #b6e8c8);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}
.mitn-cc__basepill svg { width: 15px; height: 15px; flex-shrink: 0; }
.mitn-cc__bar label { color: var(--color-text-muted, #4b5563); font-weight: 600; }
.mitn-cc__select {
    font-family: inherit;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-primary, #111);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 5px 12px;
    background: #fff;
    cursor: pointer;
    /* Flatsome đặt select{width:100%} toàn cục — ghim lại kích thước cố định để nằm chung hàng với label, không tự xuống dòng. */
    width: auto;
    max-width: 170px;
    flex: 0 0 auto;
    /* Flatsome còn đặt margin-bottom:14px trên select → align-items:center căn giữa luôn margin đó, làm khung lệch lên trên so với pill. Reset về 0. */
    margin: 0;
}

.mitn-cc__tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mitn-cc__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fs-sm, 0.875rem);
}
.mitn-cc__table th,
.mitn-cc__table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    vertical-align: middle;
}
.mitn-cc__table thead th {
    font-weight: 700;
    color: var(--color-text-muted, #4b5563);
    font-size: var(--fs-xs, 0.75rem);
    border-bottom: 1.5px solid var(--color-border-strong, #cbd5e1);
    white-space: nowrap;
}
.mitn-cc__table tbody tr.is-current { background: var(--color-brand-surface, #fdf1f1); }
.mitn-cc__table tbody tr.is-current td:first-child {
    font-weight: 700;
    color: var(--color-text-primary, #111);
}
.mitn-cc__table td a {
    color: var(--color-text-primary, #111);
    font-weight: 600;
    text-decoration: none;
}
.mitn-cc__table td a:hover {
    color: var(--color-brand-primary, #dd3333);
    text-decoration: underline;
}

.mitn-cc__tag,
.mitn-cc__win {
    display: inline-block;
    font-size: var(--fs-xs, 0.72rem);
    font-weight: 700;
    color: #fff;
    border-radius: 6px;
    padding: 1px 8px;
    vertical-align: middle;
}
.mitn-cc__tag { background: var(--color-brand-primary, #dd3333); margin-left: 4px; }
.mitn-cc__win { background: var(--color-status-success, #16a34a); margin-right: 6px; }
.mitn-cc__cpp { font-weight: 800; color: var(--color-text-primary, #111); }
.mitn-cc__u { font-size: var(--fs-xs, 0.75rem); color: var(--color-text-subtle, #6b7280); font-weight: 500; }
.mitn-cc__money { font-weight: 800; color: var(--color-brand-primary, #dd3333); white-space: nowrap; }
/* Ô thiếu dữ liệu (giá / cpp / tiền mực) — đồng bộ với .ink-cost-tbl__na bên specs-table.css */
.mitn-cc__na {
    color: var(--color-text-subtle, #6b7280);
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
}

.mitn-cc__pick {
    margin-top: 14px;
    font-size: var(--fs-sm, 0.875rem);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-surface-raised, #f8fafc);
    border-left: 3px solid var(--color-brand-primary, #dd3333);
    padding: 11px 14px;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    line-height: 1.5;
}
.mitn-cc__pick svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-status-success, #16a34a);
    margin-top: 1px;
}

@media (max-width: 600px) {
    /* Card-collapse: mỗi hàng thành 1 thẻ dọc, ô hiện nhãn cột qua data-label.
       Bỏ min-width + scroll ngang, giấu thead, dựng thẻ. */
    .mitn-cc__tblwrap { overflow-x: visible; }
    .mitn-cc__table { min-width: 0; }
    .mitn-cc__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .mitn-cc__table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--color-border-subtle, #e5e7eb);
        border-radius: var(--radius-md, 8px);
        overflow: hidden;
    }
    .mitn-cc__table tbody tr.is-current {
        border-color: var(--color-brand-primary, #dd3333);
    }

    .mitn-cc__table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        text-align: right;
        border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    }
    .mitn-cc__table td:last-child { border-bottom: 0; }
    .mitn-cc__table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-weight: 700;
        font-size: var(--fs-xs, 0.75rem);
        color: var(--color-text-muted, #4b5563);
        text-align: left;
    }
    /* Ô đầu (tên máy) nổi bật như tiêu đề thẻ — giữ nhãn "Máy in", tên căn trái,
       tag "đang xem" ghim góc phải để không bị dồn */
    .mitn-cc__table td:first-child {
        background: var(--color-surface-raised, #f8fafc);
        font-weight: 700;
        justify-content: flex-start;
        text-align: left;
    }
    .mitn-cc__table td:first-child::before { margin-right: var(--s-2, 0.5rem); }
    .mitn-cc__table td:first-child .mitn-cc__tag {
        margin-left: auto;
        flex-shrink: 0;
    }
    .mitn-cc__table tbody tr.is-current td:first-child {
        background: var(--color-brand-surface, #fdf1f1);
    }
}