/* ============================================================
   PDP Cartridge — Tất cả CSS cho trang mực in
   Load DUY NHẤT trên cartridge PDP, không dùng chung với máy in.
   ============================================================ */

/* ─── Grid layout ────────────────────────────────────────────── */
.ctg-pdp { padding: var(--s-6, 1.5rem) 0; }

.ctg-pdp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 2rem);
    align-items: start;
}

@media (max-width: 960px) {
    .ctg-pdp__grid { grid-template-columns: 1fr; }
}

/* ─── Gallery (dùng chung class với máy in, đã có CSS) ──────── */
/* gallery, gallery__main, gallery__thumbs — kế thừa từ pdp-hero.css */
/* Chỉ override nếu cần khác biệt */

/* ─── Info column ────────────────────────────────────────────── */
.ctg-info { display: flex; flex-direction: column; gap: var(--s-4, 1rem); }

/* ─── Badge trên ảnh (pa_muc-in, pa_loai-muc-in) ────────────── */
.ctg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    letter-spacing: 0.01em;
}

.ctg-badge--promo    { background: var(--color-brand-primary, #dd3333); }
.ctg-badge--greentech{ background: #16a34a; }
.ctg-badge--oem      { background: #2563eb; }
.ctg-badge--black    { background: #1f2937; }
.ctg-badge--laser    { background: #475569; }
.ctg-badge--cyan     { background: #0891b2; }
.ctg-badge--magenta  { background: #c026d3; }
.ctg-badge--yellow   { background: #ca8a04; }
.ctg-badge--inkjet   { background: #7c3aed; }
.ctg-badge--sublimation { background: #db2777; }
.ctg-badge--dotmatrix{ background: #64748b; }
.ctg-badge--default  { background: #1f2937; }
.ctg-badge--yield-std  { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.ctg-badge--yield-high { background: #fbbf24; color: #1f2937; }

/* ─── Attr badges (dưới title: tương thích + số trang + chip) ── */
.ctg-attr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2, 0.5rem);
}

.ctg-attr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--color-surface-sunken, #f2f4f7);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-body, #1f2937);
}

.ctg-attr-badge i[class*="fa-"] {
    color: var(--color-brand-primary, #dd3333);
    font-size: 0.875em;
}

/* chip badge — cùng màu với các badge khác, không override */

/* Rating sát callout hồng */
.info__rating { margin-bottom: 0; }
.ctg-distinctive { margin-top: -5px; }

/* ─── Distinctive callout — giống .why-buy máy in ───────────── */
.ctg-distinctive {
    position: relative;
    padding: 0 var(--s-4, 1rem);
    margin-bottom: var(--s-4, 1rem);
}

.ctg-distinctive__text {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-body, #1f2937);
    line-height: 1.6;
    margin: 0;
}

/* ─── Feature grid (copy structure từ .feature-icons / .feature-icon máy in) ── */
.ctg-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4, 1rem) var(--s-2, 0.5rem);
    padding: var(--s-4, 1rem);
    background: var(--color-surface-base, #fff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: var(--s-4, 1rem);
}

@media (max-width: 480px) {
    .ctg-features { grid-template-columns: repeat(2, 1fr); }
}

.ctg-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-2, 0.5rem);
}

/* Vòng tròn icon — giống .feature-icon__circle máy in */
.ctg-feature__icon {
    width: 48px;
    height: 48px;
    background: var(--color-brand-surface, #fef2f2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-brand-primary, #dd3333);
    flex-shrink: 0;
}

.ctg-feature__icon .mitn-icon,
.ctg-feature__icon svg { width: 22px; height: 22px; }
.ctg-feature__icon i[class*="fa-"] { font-size: 1.125rem; }

.ctg-feature__value {
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 400;
    color: var(--color-text-primary, #111);
    line-height: 1.1;
}

.ctg-feature__value strong {
    font-weight: 800;
    display: block;
}

.ctg-feature__label {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--color-text-muted, #6b7280);
    line-height: 1.3;
}

/* ─── CPP chip (đơn) ─────────────────────────────────────────── */
.ctg-cpp {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2, 0.5rem);
    background: var(--color-surface-sunken, #f2f4f7);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 8px;
    padding: 6px 14px;
}

.ctg-cpp__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-brand-primary, #dd3333);
}

.ctg-cpp__value small { font-size: 0.75em; font-weight: 500; }

.ctg-cpp__label {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
}

/* ─── Savings boxes ──────────────────────────────────────────── */
.ctg-savings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem);
}

@media (max-width: 380px) {
    .ctg-savings { grid-template-columns: 1fr; }
}

.ctg-savings__box {
    border-radius: 10px;
    padding: var(--s-3, 0.75rem) var(--s-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ctg-savings__box--cost {
    background: #1e293b;
    color: #fff;
}

.ctg-savings__box--save {
    background: #15803d;
    color: #fff;
}

.ctg-savings__title {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    line-height: 1.3;
}

.ctg-savings__main {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ctg-savings__sub {
    font-size: 0.75rem;
    opacity: 0.75;
    line-height: 1.3;
}

/* ─── Trust badges (SCF trust_badges, dùng chung với PDP máy in) ────── */
.trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem) var(--s-4, 1rem);
    padding: var(--s-3, 0.75rem) 0;
    margin-bottom: var(--s-4, 1rem);
}
.trust > div,
.trust > a {
    display: flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    font-size: var(--fs-sm, 0.8125rem);
    color: var(--color-text-body, #1f2937);
    text-decoration: none;
}
.trust > a:hover { color: var(--color-brand-primary-hover, #dd3333); text-decoration: underline; }
.trust i {
    color: var(--color-brand-primary, #dd3333);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Section + FAQ CSS — xem phần SHARED ở cuối file */

/* ─── Reviews collapse ───────────────────────────────────────── */
/* reviews-collapse — đã có trong pdp-body.css, không cần override */

/* ─── Responsive: info column ────────────────────────────────── */
@media (max-width: 640px) {
    .ctg-features { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: var(--s-3, 0.75rem); }
    .ctg-savings__main { font-size: 1.25rem; }
}

/* ============================================================
   SHARED — Gallery, Price, CTA, Tabnav, FAQ, Reviews
   Copy từ pdp-hero.css + pdp-body.css — tách riêng để không
   phụ thuộc vào file CSS của máy in.
   ============================================================ */

html { scroll-behavior: smooth; }

/* ─── Gallery ────────────────────────────────────────────────── */
.gallery {
    display: block;
    position: sticky;
    top: calc(var(--header-height, 72px) + var(--s-4, 1rem));
    align-self: start;
}
@media (max-width: 980px) { .gallery { position: static; } }

.gallery__main {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f8fafc, var(--color-surface-base, #fff));
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    display: grid;
    place-items: center;
    position: relative;
    overflow: visible;
    margin-bottom: var(--s-3, 0.75rem);
    clip-path: inset(0 round var(--radius-lg, 12px));
}
.gallery__main svg { width: 55%; height: 55%; color: var(--color-text-subtle, #9ca3af); }
.gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--s-4, 1rem);
    position: absolute;
    inset: 0;
    background: #fff;
}

.gallery__badges {
    position: absolute;
    top: var(--s-4, 1rem);
    left: var(--s-4, 1rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    z-index: 1;
    width: max-content;
}

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-2, 0.5rem);
}
.gallery__thumb {
    aspect-ratio: 1;
    background: var(--color-surface-sunken, #f2f4f7);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    display: grid;
    place-items: center;
    color: var(--color-text-subtle, #9ca3af);
    cursor: pointer;
    padding: 0;
    transition: border-color 200ms;
    overflow: hidden;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.gallery__thumb.is-active { border-color: var(--color-brand-primary, #dd3333); border-width: 2px; }
.gallery__thumb:hover:not(.is-active) { border-color: var(--color-border-strong, #9ca3af); }

.gallery__thumb--video { background: #0f172a; color: #fff; padding: 0; }
.gallery__thumb--video:hover:not(.is-active) { border-color: #ef4444; }
.gallery__thumb--video.is-active { border-color: #ef4444; }
.gallery__play-icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: #ef4444; color: #fff;
}
.gallery__play-label { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; line-height: 1; }
.gallery__play-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; color: inherit; text-decoration: none; }

/* ─── Info meta + title + rating ─────────────────────────────── */
.info__meta {
    display: flex;
    gap: var(--s-3, 0.75rem);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-muted, #4b5563);
    margin-bottom: var(--s-3, 0.75rem);
}
.info__meta strong { color: var(--color-text-body, #1f2937); }

.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--color-status-success-bg, #dcfce7);
    color: var(--color-status-success-text, #166534);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
}
.stock-pill svg { width: 12px; height: 12px; }
.stock-pill--out { background: #fee2e2; color: #991b1b; }

.info__title {
    font-size: var(--fs-2xl, 1.75rem);
    font-weight: 800;
    color: var(--color-text-primary, #111);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--s-3, 0.75rem);
}
@media (max-width: 480px) { .info__title { font-size: var(--fs-xl, 1.5rem); } }

.info__rating {
    display: flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-4, 1rem);
    font-size: var(--fs-sm, 0.875rem);
}

/* ─── Price block ────────────────────────────────────────────── */
.price-block {
    padding: 0 var(--s-4, 1rem);
    margin-bottom: var(--s-4, 1rem);
}
.price-block__row {
    display: flex;
    align-items: baseline;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
    margin-bottom: var(--s-2, 0.5rem);
}
.price-block__price {
    font-size: var(--fs-2xl, 1.75rem);
    font-weight: 800;
    color: var(--color-brand-primary, #dd3333);
    letter-spacing: -0.02em;
    line-height: 1;
}
.price-block__original {
    font-size: var(--fs-md, 1.125rem);
    color: var(--color-text-subtle, #9ca3af);
    text-decoration: line-through;
}
.price-block__discount {
    background: var(--color-brand-primary, #dd3333);
    color: #fff;
    padding: 3px 8px;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 700;
}
.price-block__save { font-size: var(--fs-sm, 0.875rem); color: #16a34a; font-weight: 600; }
.price-block__vat { font-size: var(--fs-xs, 0.75rem); color: var(--color-text-subtle, #9ca3af); margin-top: var(--s-1, 0.25rem); }

/* ─── Highlights ─────────────────────────────────────────────── */
.highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-4, 1rem);
    padding: 0;
}
.highlights li {
    display: flex;
    gap: var(--s-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--color-text-body, #1f2937);
    line-height: 1.5;
}
.highlights li > svg {
    width: 18px; height: 18px;
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── CTA row ────────────────────────────────────────────────── */
.cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-4, 1rem);
}
.cta {
    height: 52px;
    border-radius: var(--radius-md, 8px);
    font-weight: 700;
    font-size: var(--fs-base, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2, 0.5rem);
    text-decoration: none;
    transition: background 200ms;
}
.cta--primary {
    background: var(--color-brand-primary, #dd3333);
    color: #fff;
    box-shadow: 0 2px 12px rgba(221,51,51,.3);
}
.cta--primary:hover  { background: #c82b2b; color: #fff; text-decoration: none; }
.cta--zalo {
    background: var(--color-surface-base, #fff);
    color: var(--color-brand-primary, #dd3333);
    border: 2px solid var(--color-brand-primary, #dd3333);
}
.cta--zalo:hover { background: #fef1f1; text-decoration: none; }
.cta i[class*="fa-"], .cta .mitn-icon, .cta svg { width: 20px; height: 20px; flex-shrink: 0; font-size: 1rem; }

/* ─── Mobile sticky CTA ──────────────────────────────────────── */
.mobile-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 80;
    background: var(--color-surface-base, #fff);
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    box-shadow: 0 -4px 16px rgba(15,23,42,.08);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem);
}
@media (max-width: 980px) {
    .mobile-cta { display: grid; }
    body { padding-bottom: 76px; }
}
.mobile-cta__btn {
    height: 48px;
    border-radius: var(--radius-md, 8px);
    font-weight: 700;
    font-size: var(--fs-sm, 0.875rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2, 0.5rem);
    text-decoration: none;
}
.mobile-cta__btn--secondary {
    background: var(--color-surface-base, #fff);
    color: var(--color-brand-primary, #dd3333);
    border: 2px solid var(--color-brand-primary, #dd3333);
}
.mobile-cta__btn--primary { background: var(--color-brand-primary, #dd3333); color: #fff; }

/* ─── Tab Nav ────────────────────────────────────────────────── */
.tabnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface-base, #fff);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    margin-top: var(--s-8, 2rem);
}
.admin-bar .tabnav { top: 32px; }
@media screen and (max-width: 600px) { .admin-bar .tabnav { top: 0; } }

/* .container mặc định khoá cứng 1250px (dùng chung toàn site — xem
   .ctg-body > .section > .container bên dưới). Riêng tabnav nới rộng hơn để
   đủ 10 tab 1 hàng ở màn hình lớn — đo thật cần tối thiểu 1401px (list
   1371px + padding container 30px), lấy dư ra 1420px. CHỈ scope trong
   .tabnav, không đụng .container dùng ở nội dung bên dưới (vẫn giữ 1250px,
   tabnav sẽ rộng hơn phần nội dung — user đã xác nhận đánh đổi này). */
.tabnav .container {
    max-width: 1420px;
}

.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; }

/* Chừa chỗ bên phải để cuộn/xuống hàng tránh vùng thanh liên hệ nổi
   (.ntm-floating-contact, plugin context-menu — cố định cách mép phải
   viewport ~54px, KHÔNG phụ thuộc .container). Giới hạn 701–1500px: dưới
   701px thanh liên hệ nổi tự ẩn; trên 1500px .container 1420px của tabnav
   mới thực sự cách xa thanh (đo thật ở cap 1420px, force 1 hàng: 1440px đè
   -5px, 1500px dư 25px, 1600px dư 75px, 1920px dư ~250px). Cận trên nới từ
   1348px lên 1500px so với bản gốc vì .container tabnav giờ rộng hơn
   (1420px thay vì 1250px) nên vùng "chưa đủ xa thanh" cũng lùi ra xa hơn. */
@media (min-width: 701px) and (max-width: 1500px) {
    .tabnav__list {
        padding-right: 64px;
    }
}

/* Desktop (≥1000px, khớp mốc mobile/tablet đang dùng ở pdp-body.css máy in):
   cho tab tự xuống hàng thay vì cuộn ngang — user yêu cầu hiện đủ tab trên
   máy tính, không cuộn như điện thoại. Từ khi .tabnav .container nới lên
   1420px: đủ 10 tab vẫn xuống 2 hàng ở 1000–1500px (chưa đủ chỗ, hoặc chưa
   cách xa thanh liên hệ nổi — xem media block padding-right phía trên), tự
   lên 1 hàng khi ≥~1500px vì flex-wrap chỉ xuống hàng lúc thật sự thiếu chỗ. */
@media (min-width: 1000px) {
    .tabnav__list {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.tabnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-4, 1rem) 14px 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;
}

/* ─── Gợi ý "Cuộn ngang" cho thanh tab — CHỈ hiện dưới 1000px. Từ ≥1000px
   tab đã xuống hàng (xem media block phía trên .tabnav__link), không còn gì
   để cuộn nên ẩn cứng bằng CSS luôn (không chờ tab-nav.js đo overflow=0 mới
   ẩn, tránh chớp hint trước khi JS kịp chạy). Dòng nhỏ căn phải nằm NGAY
   TRÊN hàng tab (KHÔNG đè lên chữ tab). Dưới 1000px: 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: 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;
}
.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; }
}
@media (min-width: 1000px) {
    .tabnav__scroll-hint { display: none; }
}

/* ─── Section layout (dùng .ctg-body thay .pdp-description) ─── */
.ctg-body .section {
    padding: var(--s-6, 1.5rem) 0;
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}
.ctg-body .section:first-child { border-top: none; }
/* Section đầu tiên trong ctg-body thứ 2 trở đi vẫn cần border-top */
.ctg-body ~ .ctg-body .section:first-child { border-top: 1px solid var(--color-border-subtle, #e5e7eb); }

/* ─── Desktop reading width: áp cho TẤT CẢ khối nội dung mực in ───────
   Khác máy in (chỉ co từ #specs trở xuống) — mực in co ngay từ khối đầu
   (#compatible), theo yêu cầu. Chỉ co `.container` bên trong .section,
   KHÔNG co .ctg-body/.section ngoài, để border-top phân cách khối giữ
   full-width. Công thức margin-left giống máy in — chuẩn Flatsome,
   .container tự có padding 15px nên không cộng thêm. Chỉ desktop
   (>880px); mobile/tablet giữ full-width. */
@media (min-width: 881px) {
    .ctg-body > .section > .container {
        max-width: 1140px;
        margin-left: max(0px, calc((100% - 1250px) / 2));
        margin-right: auto;
    }
}

.ctg-body .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);
}
@media (max-width: 640px) {
    #savings .section__title {
        font-size: var(--fs-xl, 1.3rem);
    }
}
.ctg-body .section__sub {
    color: var(--color-text-muted, #4b5563);
    font-size: var(--fs-sm, 0.875rem);
    margin-bottom: var(--s-5, 1.25rem);
    max-width: 680px;
    line-height: 1.6;
}
.ctg-body .ctg-content { line-height: 1.7; }
.ctg-body .ctg-content a { color: var(--color-brand-primary, #dd3333); }
.ctg-body .ctg-content a:hover { text-decoration: underline; }
.ctg-body .ctg-content img { border-radius: 12px !important; display: block; max-width: 100%; height: auto; }

/* ─── FAQ Accordion ──────────────────────────────────────────── */
.ctg-body .faq-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
}
.ctg-body .faq-item {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin: 0;
}
.ctg-body .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;
}
.ctg-body .faq-item__q:hover { color: var(--color-brand-primary, #dd3333); }
.ctg-body .faq-item__icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: var(--color-brand-primary, #dd3333);
    transition: transform 0.2s ease;
}
.ctg-body .faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.ctg-body .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;
}
.ctg-body .faq-item.is-open .faq-item__a { display: block; }
.ctg-body .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;
}
.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; }
.reviews-collapse__toggle[aria-expanded="true"] .reviews-collapse__icon { transform: rotate(180deg); }

/* ─── Collapsible groups + tables (copy từ specs-table.css) ─── */
.specs-groups {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 0.75rem);
}
.specs-group {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.specs-group__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    padding: 10px var(--s-4, 1rem);
    background: #f2f4f72e;
    border: none;
    cursor: pointer;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-text-primary, #111);
    font-family: inherit;
    text-align: left;
}
.specs-group__head:hover { background: var(--color-surface-raised, #f0f2f5); }
.specs-group__head br { display: none; }
.specs-group__head svg.ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-brand-primary, #dd3333); fill: currentColor; }
.specs-group__head i[class*="fa-"] { width: 18px; text-align: center; flex-shrink: 0; color: var(--color-brand-primary, #dd3333); font-size: 0.95em; }
.specs-group__chevron { margin-left: auto; width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted, #4b5563); fill: currentColor; transition: transform 0.2s ease; }
.specs-group.is-collapsed .specs-group__chevron { transform: rotate(-90deg); }
.specs-group__body { padding: 0; }
.specs-group.is-collapsed .specs-group__body { display: none; }

.specs-group__body table { width: 100%; border-collapse: collapse; }
.specs-group__body td { padding: var(--s-3, 0.75rem) var(--s-4, 1rem); font-size: var(--fs-sm, 0.875rem); border-bottom: 1px solid var(--color-border-subtle, #e5e7eb); vertical-align: top; }
.specs-group__body tr:last-child td { border-bottom: none; }
.specs-group__body td:first-child { color: var(--color-text-muted, #4b5563); width: 45%; }
.specs-group__body td:last-child { color: var(--color-text-primary, #111); font-weight: 500; }
.specs-group__body strong { font-weight: 800; color: var(--color-brand-primary, #dd3333); }

/* Compatible list — 2 col (tên máy / dòng), không dùng style label-value */
.ctg-content .specs-group__body td:first-child { color: var(--color-text-body, #1f2937); width: auto; }
.ctg-content .specs-group__body td:last-child  { color: var(--color-text-muted, #4b5563); font-weight: 400; width: 40%; }

/* Máy tương thích — nhóm KHÔNG có sẵn tại Toàn Nhân (mờ hơn nhóm có sẵn) */
.specs-group--muted .specs-group__body td:first-child,
.specs-group--muted .specs-group__body td:last-child,
.ctg-content .specs-group--muted .specs-group__body td:first-child,
.ctg-content .specs-group--muted .specs-group__body td:last-child {
    color: var(--color-text-muted, #4b5563);
    font-weight: 400;
}

/* Máy tương thích — mobile: bảng → khối thẻ (label trái, value phải), không cuộn ngang */
@media (max-width: 640px) {
    .specs-group__body table,
    .specs-group__body thead,
    .specs-group__body tbody,
    .specs-group__body tr,
    .specs-group__body td {
        display: block;
    }
    .specs-group__body thead { display: none; }
    .specs-group__body tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 12px var(--s-4, 1rem);
        border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    }
    .specs-group__body tr:last-child { border-bottom: none; }
    .specs-group__body td {
        padding: 0;
        border: none;
    }
    .specs-group__body td:first-child {
        width: auto;
        flex: 0 1 auto;
        font-weight: 600;
    }
    .specs-group__body td:last-child {
        width: auto;
        flex: 0 1 auto;
        text-align: right;
    }
}

/* Ghi chú cuối nội dung */
.note-mute { font-size: var(--fs-sm, 0.875rem); color: var(--color-text-muted, #4b5563); margin-top: var(--s-3, 0.75rem); padding-top: 15px; }
.note-mute a { color: var(--color-brand-primary, #dd3333); text-decoration: none; }
.note-mute a:hover { text-decoration: underline; }

/* ─── model-compare (dùng trong ctg-content: yield, compare) ─── */
.ctg-content .model-compare { overflow-x: auto; border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-lg, 12px); }
.ctg-content .model-compare table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ctg-content .model-compare th,
.ctg-content .model-compare td { padding: var(--s-3, 0.75rem) var(--s-4, 1rem); text-align: left; font-size: var(--fs-sm, 0.875rem); border-bottom: 1px solid var(--color-border-subtle, #e5e7eb); }
.ctg-content .model-compare thead th { background: var(--color-surface-sunken, #f2f4f7); font-weight: 700; color: var(--color-text-primary, #111); vertical-align: top; }
.ctg-content .model-compare thead th.is-current { background: var(--color-brand-surface, #fef1f1); }
.ctg-content .model-compare__model { font-weight: 800; color: var(--color-text-primary, #111); font-size: var(--fs-base, 1rem); }
.ctg-content .model-compare__price { font-weight: 800; color: var(--color-brand-primary, #dd3333); margin-top: 2px; }
.ctg-content .model-compare__tag { display: inline-block; font-size: var(--fs-xs, 0.75rem); padding: 2px 8px; border-radius: var(--radius-sm, 4px); font-weight: 700; margin-top: var(--s-2, 0.5rem); }
.ctg-content .model-compare__tag--current { background: var(--color-brand-primary, #dd3333); color: #fff; }
.ctg-content .model-compare td.is-current { background: var(--color-brand-surface, #fef1f1); font-weight: 600; }
.ctg-content .model-compare__rowlabel { font-weight: 600; color: var(--color-text-muted, #4b5563); background: var(--color-surface-raised, #f9fafb); }
.ctg-content .model-compare__cta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs, 0.75rem); font-weight: 700; padding: 6px 12px; border: 1px solid var(--color-brand-primary, #dd3333); color: var(--color-brand-primary, #dd3333); border-radius: var(--radius-md, 8px); text-decoration: none; margin-top: var(--s-2, 0.5rem); }
.ctg-content .model-compare__cta:hover { background: var(--color-brand-surface, #fef1f1); text-decoration: none; }
.ctg-content .model-compare th { text-transform: none; }
.ctg-content .hot { color: var(--color-status-success, #16a34a); font-weight: 700; }

/* So sánh dung lượng — mobile: bảng → khối thẻ, mỗi tiêu chí 1 dòng đậm +
   2 dòng "tên model: giá trị" (data-label) bên dưới, không cuộn ngang */
@media (max-width: 640px) {
    .ctg-content .model-compare table,
    .ctg-content .model-compare thead,
    .ctg-content .model-compare tbody,
    .ctg-content .model-compare tr,
    .ctg-content .model-compare td {
        display: block;
    }
    .ctg-content .model-compare thead { display: none; }
    .ctg-content .model-compare table { min-width: 0; }
    .ctg-content .model-compare tr {
        padding: 12px var(--s-4, 1rem);
        border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    }
    .ctg-content .model-compare tr:last-child { border-bottom: none; }
    .ctg-content .model-compare td {
        padding: 0;
        border: none;
        background: none;
    }
    .ctg-content .model-compare__rowlabel {
        font-weight: 700;
        color: var(--color-text-primary, #111);
        background: none;
        margin-bottom: 6px;
    }
    .ctg-content .model-compare td:not(.model-compare__rowlabel) {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 4px 0;
    }
    .ctg-content .model-compare td:not(.model-compare__rowlabel)::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted, #4b5563);
        flex-shrink: 0;
    }
    .ctg-content .model-compare td.is-current {
        color: var(--color-brand-primary, #dd3333);
        font-weight: 700;
    }
}

/* ─── feature-deep (dùng trong Mô tả chi tiết) ─── */
.ctg-content .feature-deep { display: flex; flex-direction: column; gap: var(--s-8, 2rem); }
.ctg-content .feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6, 1.5rem); align-items: center; }
@media (max-width: 880px) {
    .ctg-content .feature-block { grid-template-columns: 1fr; }
}
.ctg-content .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); }
.ctg-content .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; }
.ctg-content .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); }
.ctg-content .feature-block__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2, 0.5rem); padding: 0; margin: 0; }
.ctg-content .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); }
.ctg-content .feature-block__list i[class*="fa-"] { color: var(--color-brand-primary, #dd3333); flex-shrink: 0; margin-top: 2px; width: 16px; text-align: center; }
.ctg-content .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); }
.ctg-content .feature-block__media-label { font-size: var(--fs-xs, 0.75rem); line-height: 1.5; }
.ctg-content .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; }
.ctg-content .feature-block__media:has(img) img { width: 100%; height: auto; display: block; border-radius: 0 !important; }
.ctg-content .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; }
.ctg-content .feature-block__content { min-width: 0; }
.ctg-content .feature-block__list svg { width: 16px; height: 16px; color: var(--color-savings, #047857); flex-shrink: 0; margin-top: 2px; }
.ctg-content .feature-block__media:has(.ctg-cost-chart) { aspect-ratio: auto; background: transparent; border: none; padding: 0; display: block; place-items: normal; }
.ctg-content .feature-block__media:has(.ctg-cost-chart) .ctg-cost-chart { margin: 0; gap: var(--s-6, 1.5rem); }
.ctg-content .feature-block__media:has(.ctg-cost-chart) .ctg-cost-chart__bar { flex: 1 1 0; max-width: 200px; }
.ctg-content .feature-block__media:has(.ctg-cost-chart) .ctg-cost-chart__fill { width: 100%; max-width: 96px; }

/* ─── ctg-cost-chart (shortcode mitn_cartridge_chart, dùng trong #description) ─── */
.ctg-content .ctg-cost-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--s-8, 2rem);
    height: 292px;
    padding: var(--s-8, 2rem) var(--s-4, 1rem) 4rem;
    margin: var(--s-4, 1rem) 0;
    background: var(--color-surface-sunken, #f2f4f7);
    border-radius: var(--radius-lg, 12px);
}
.ctg-content .ctg-cost-chart__bar {
    position: relative;
    flex: 0 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.ctg-content .ctg-cost-chart__fill {
    position: relative;
    display: block;
    width: 56px;
    max-width: 60%;
    height: 50%;
    background: var(--ctg-bar-fill, var(--color-text-subtle, #9ca3af));
    border-radius: 6px 6px 0 0;
    transition: height .3s ease;
}
.ctg-content .ctg-cost-chart__bar--gt .ctg-cost-chart__fill {
    background: #397b21;
}
.ctg-content .ctg-cost-chart__value {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: var(--fs-xs, 0.75rem);
    color: var(--color-surface-base, #111);
    white-space: nowrap;
    z-index: 1;
}
.ctg-content .ctg-cost-chart__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--s-2, 0.5rem);
    font-size: var(--fs-xs, 0.75rem);
    line-height: 1.35;
}
.ctg-content .ctg-cost-chart__label-main {
    font-weight: 700;
    color: var(--color-text-primary, #111);
}
.ctg-content .ctg-cost-chart__label-sub {
    color: var(--color-text-subtle, #6b7280);
    white-space: nowrap;
}

/* ─── ink-tblwrap + pick (dùng trong cartridge_yield_guide) ─── */
.ink-tblwrap { overflow-x: auto; border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-lg, 12px); margin-bottom: var(--s-4, 1rem); }
.ink-tblwrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 0.875rem); min-width: 520px; }
.ink-tblwrap th, .ink-tblwrap td { padding: var(--s-3, 0.75rem) var(--s-4, 1rem); text-align: left; border-bottom: 1px solid var(--color-border-subtle, #e5e7eb); }
.ink-tblwrap th { background: var(--color-surface-sunken, #f2f4f7); font-weight: 700; color: var(--color-text-primary, #111); }
.ink-tblwrap th:last-child { background: var(--color-brand-surface, #fef1f1); color: var(--color-brand-primary, #dd3333); border-top: 3px solid var(--color-brand-primary, #dd3333); }
.ink-tblwrap td:last-child { background: var(--color-brand-surface, #fef1f1); }
.ink-tblwrap tr:last-child td { border-bottom: none; }
.ink-tblwrap td:first-child { font-weight: 500; color: var(--color-text-muted, #4b5563); }
.ink-tblwrap__caption { display: none; }

/* ink-tblwrap mobile — dùng chung cho #savings/#compare/#drum, tách hành vi theo ID vì
   #savings là bảng 2 cột đơn giản (1 dòng ngang label:value), còn #compare/#drum là bảng
   so sánh 2-3 cột (mỗi tiêu chí thành khối: tên tiêu chí đậm + các dòng nhãn sản phẩm
   qua data-label — xem ink.php/drum.php) */
@media (max-width: 640px) {
    #savings .ink-tblwrap table,
    #savings .ink-tblwrap thead,
    #savings .ink-tblwrap tbody,
    #savings .ink-tblwrap tr,
    #savings .ink-tblwrap td,
    #compare .ink-tblwrap table,
    #compare .ink-tblwrap thead,
    #compare .ink-tblwrap tbody,
    #compare .ink-tblwrap tr,
    #compare .ink-tblwrap td,
    #drum .ink-tblwrap table,
    #drum .ink-tblwrap thead,
    #drum .ink-tblwrap tbody,
    #drum .ink-tblwrap tr,
    #drum .ink-tblwrap td {
        display: block;
    }
    #savings .ink-tblwrap thead,
    #compare .ink-tblwrap thead,
    #drum .ink-tblwrap thead {
        display: none;
    }
    #savings .ink-tblwrap table,
    #compare .ink-tblwrap table,
    #drum .ink-tblwrap table {
        min-width: 0;
    }
    #savings .ink-tblwrap tr,
    #compare .ink-tblwrap tr,
    #drum .ink-tblwrap tr {
        padding: 12px var(--s-4, 1rem);
        border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    }
    #savings .ink-tblwrap tr:last-child,
    #compare .ink-tblwrap tr:last-child,
    #drum .ink-tblwrap tr:last-child {
        border-bottom: none;
    }
    #savings .ink-tblwrap td,
    #compare .ink-tblwrap td,
    #drum .ink-tblwrap td {
        padding: 0;
        border: none;
        background: none;
    }

    /* #savings — caption thay cho thead đã ẩn, đứng trên cùng khối thẻ */
    #savings .ink-tblwrap__caption {
        display: block;
        padding: 10px var(--s-4, 1rem);
        background: var(--color-surface-sunken, #f2f4f7);
        color: var(--color-text-muted, #4b5563);
        font-size: var(--fs-xs, 0.75rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    }

    /* #savings — 2 cột cố định (mốc trang | tiền tiết kiệm), 1 dòng ngang label:value */
    #savings .ink-tblwrap tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }
    #savings .ink-tblwrap td:first-child {
        color: var(--color-text-muted, #4b5563);
        font-weight: 500;
    }
    #savings .ink-tblwrap td:last-child {
        color: var(--color-brand-primary, #dd3333);
        text-align: right;
    }

    /* #compare, #drum — mỗi tiêu chí 1 khối: dòng đầu đậm (tên tiêu chí),
       các dòng sau "Chính hãng/Greentech: giá trị" qua data-label */
    #compare .ink-tblwrap td:first-child,
    #drum .ink-tblwrap td:first-child {
        font-weight: 700;
        color: var(--color-text-primary, #111);
        margin-bottom: 6px;
    }
    #compare .ink-tblwrap td:not(:first-child),
    #drum .ink-tblwrap td:not(:first-child) {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 4px 0;
    }
    #compare .ink-tblwrap td:not(:first-child)::before,
    #drum .ink-tblwrap td:not(:first-child)::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted, #4b5563);
        flex-shrink: 0;
    }
    #compare .ink-tblwrap td:last-child,
    #drum .ink-tblwrap td:last-child {
        font-weight: 600;
        color: var(--color-brand-primary, #dd3333);
        background: var(--color-brand-surface, #fef1f1);
        padding: 4px 5px;
        margin-top: 2px;
    }
}

.pick { font-size: var(--fs-sm, 0.875rem); background: var(--color-surface-sunken, #f2f4f7); border-left: 3px solid var(--color-brand-primary, #dd3333); padding: var(--s-3, 0.75rem) var(--s-4, 1rem); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; line-height: 1.6; color: var(--color-text-body, #1f2937); }
.pick br { display: none; }
.pick i[class*="fa-"] { display: inline-block; vertical-align: middle; color: var(--color-brand-primary, #dd3333); margin-right: var(--s-2, 0.5rem); }

/* ─── disclosure ("Cần biết trước khi lắp") + install guide (steps/note-grid) ─── */
.disclosure { display: flex; gap: var(--s-3, 0.75rem); background: var(--color-status-warning-bg, #fef3c7); border: 1px solid var(--color-status-warning, #d97706); border-radius: var(--radius-lg, 12px); padding: var(--s-4, 1rem); margin-bottom: var(--s-6, 1.5rem); }
.disclosure .mitn-icon { color: var(--color-status-warning, #d97706); font-size: 1.25rem; margin-top: .15em; }
.disclosure h2 { font-size: var(--fs-h3, clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem)); margin-bottom: var(--s-1, 0.25rem); }
.disclosure p { margin: 0; font-size: var(--fs-sm, 0.875rem); color: var(--color-text-body, #1f2937); }

.steps { counter-reset: s; list-style: none; margin: 0 0 var(--s-5, 1.25rem); padding: 0; display: grid; gap: var(--s-3, 0.75rem); }
.steps li { counter-increment: s; position: relative; padding-left: 44px; font-size: var(--fs-sm, 0.875rem); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: var(--radius-pill, 999px); background: var(--color-brand-surface, #fef1f1); color: var(--color-brand-primary, #dd3333); font-family: var(--font-numeric, 'Inter', 'SF Mono', ui-monospace, monospace); font-weight: 800; font-size: var(--fs-sm, 0.875rem); display: grid; place-items: center; }

.note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 0.75rem); }
@media (max-width: 640px) { .note-grid { grid-template-columns: 1fr; } }
.note-card { border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-lg, 12px); padding: var(--s-4, 1rem); background: var(--color-surface-base, #ffffff); }
.note-card h3 { font-size: var(--fs-base, 1rem); margin-bottom: var(--s-1, 0.25rem); }

/* ============================================================================
   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-cartridge/consult-cta.php (port từ pdp-printer,
   style .consult-cta__* giữ nguyên 100% — không phụ thuộc wrapper .ctg-body).
   ========================================================================== */
.consult-cta {
    margin: 32px 0;
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
}
/* Khối KHÔNG dùng .section (giống ink/cost-compare bên máy in) nên tự co
   container riêng — .ctg-body > .section > .container (rule chung phía trên)
   không khớp target này. */
@media (min-width: 881px) {
    .ctg-body > .consult-cta > .container {
        max-width: 1140px;
        margin-left: max(0px, calc((100% - 1250px) / 2));
        margin-right: auto;
    }
}
/* consult-cta không có .section nên vốn đã không tự vẽ border-top (khác máy
   in phải khai riêng rule "thêm kẻ cho khối direct" rồi mới null lại) — chỉ
   cần null border-top của khối LIỀN SAU (FAQ) để không có đường kẻ xám ngay
   dưới banner nền tối. */
.ctg-body:has(> #consult-cta) + .ctg-body > .section:first-child {
    border-top: none;
}
.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;
    }
}

/* ============================================================================
   SẢN PHẨM LIÊN QUAN — tóm tắt 4 mối quan hệ SP (#yield/OEM/#drum/#compatible)
   thành 1 khối. Khối KHÔNG dùng .section (giống consult-cta) nên tự co
   container riêng + tự null border-top của khối liền sau.
   Markup: template-parts/pdp-cartridge/related.php
   ========================================================================== */
.ctg-related {
    margin: 32px 0;
}
@media (min-width: 881px) {
    .ctg-body > .ctg-related > .container {
        max-width: 1140px;
        margin-left: max(0px, calc((100% - 1250px) / 2));
        margin-right: auto;
    }
}
.ctg-body:has(> #related) + .ctg-body > .section:first-child {
    border-top: none;
}
.ctg-related__title {
    margin: 0 0 16px;
}
.ctg-related__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-surface-sunken, #f2f4f7);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}
.ctg-related__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    background: var(--color-surface-base, #ffffff);
    border-radius: var(--radius-md, 8px);
    padding: 14px 18px;
}
.ctg-related__label {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
}
.ctg-related__value {
    flex: 1 1 240px;
    min-width: 0;
    color: var(--color-text-body, #1f2937);
}
.ctg-related__value a {
    color: var(--color-brand-primary, #dd3333);
    font-weight: 400;
    text-decoration: none;
}
.ctg-related__value a:hover {
    text-decoration: underline;
}
.ctg-related__suffix {
    color: var(--color-text-muted, #4b5563);
    font-size: var(--fs-sm, 0.875rem);
}
@media (max-width: 640px) {
    .ctg-related__card {
        padding: 14px;
    }
    .ctg-related__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 14px;
    }
    .ctg-related__value {
        flex: 1 1 auto;
    }
}
.note-card p { margin: 0; font-size: var(--fs-sm, 0.875rem); color: var(--color-text-muted, #4b5563); }