/* Generated by scripts/Publish-DesignAssets.py from assets/css/pdp-redesign/*.css. Edit those files. */

/* ---- 10-base.css ---- */
/* 10-base.css - P5 khung chung: màu chữ, token, focus, khung mobile (display:contents + order).
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* Tokens (TOKEN.md). One colour, one meaning: red = price/main action, #0E7CC0 = selected/clickable,
   #0A4EA8 = links, green = good/free, orange = time-limited promotion, grey = secondary. */
.ict-pdp {
    --pdp-ink: #202733;
    --pdp-ink-2: #475569;
    --pdp-ink-3: #64748B;
    --pdp-brand: #0E7CC0;
    --pdp-brand-dark: #0A4EA8;
    --pdp-tint: #E8F4FB;
    --pdp-tint-2: #F3F9FD;
    --pdp-price: #E00611;
    --pdp-price-hover: #C00510;
    --pdp-price-active: #A80410;
    --pdp-ok: #15803D;
    --pdp-flash: #B45309;
    --pdp-flash-bg: #FFF4E6;
    --pdp-line: #E2E8F0;
    --pdp-line-soft: #F1F5F9;
    --pdp-line-strong: #CBD5E1;
    --pdp-bg: #F4F6F8;
    --pdp-card-2: #F8FAFC;
    --pdp-disabled-bg: #F1F5F9;
    --pdp-disabled-ink: #94A3B8;
    color: var(--pdp-ink);
}

/* C05: struck prices are grey-blue and legible (#475569 on white 7.6:1). */
.ict-pdp del {
    color: var(--pdp-ink-2);
    text-decoration-thickness: 1px;
}

/* C38: one visible focus ring for keyboard users on every control of the page. */
.ict-pdp :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.ict-pdp .ict-variant-input:focus-visible + .ict-variant-card {
    outline: 2px solid var(--pdp-brand);
    outline-offset: 2px;
}
/* Owner 28/09 (iPhone): opening the buy sheet moves focus to its title (tabindex=-1, for screen readers); Safari then
   drew the ring round the product name. Elements that only take focus from script are not controls: no ring. */
.ict-pdp [tabindex="-1"]:focus { outline: none; }

/* Primary action = red everywhere on the page (the old desktop yellow is gone); disabled = grey, not red. */
.ict-pdp .ict-button-primary { flex-direction: column; gap: 2px; border-color: transparent; background: var(--pdp-price); color: #fff; }
.ict-pdp .ict-button-primary:hover:not(:disabled) { background: var(--pdp-price-hover); color: #fff; }
.ict-pdp .ict-button-primary:active:not(:disabled) { background: var(--pdp-price-active); }
.ict-pdp .ict-button-primary:disabled { background: var(--pdp-disabled-bg); color: var(--pdp-disabled-ink); }
.ict-pdp .ict-related-dialog-actions .ict-button-primary { flex: 1; }

/* C37/C07: shared popups (quote, visit, finance, terms). Same layout and fields; tokens only: 48px inputs
   (16px text, no iOS zoom), #CBD5E1 border, brand focus ring, solid buttons #0A4EA8 (7.9:1 with white). */
.ict-pdp .ict-contact-sheet .ict-quote-native-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ict-pdp .ict-contact-sheet .ict-quote-native-form select,
.ict-pdp .ict-contact-sheet .ict-quote-native-form textarea {
    min-height: 48px;
    border: 1px solid var(--pdp-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--pdp-ink);
}
.ict-pdp .ict-contact-sheet .ict-quote-native-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { height: 48px; }
.ict-pdp .ict-contact-sheet .ict-quote-native-form :is(input, select, textarea):focus {
    border-color: var(--pdp-brand);
    outline: 0;
    box-shadow: 0 0 0 3px var(--pdp-tint);
}
.ict-pdp .ict-contact-sheet .ict-quote-native-form :is(input, textarea)::placeholder { color: var(--pdp-ink-3); }
.ict-pdp .ict-contact-sheet .ict-quote-native-form .is-invalid,
.ict-pdp .ict-contact-sheet .ict-quote-native-form [aria-invalid="true"] { border-color: var(--pdp-price); }
.ict-pdp .ict-contact-sheet .ict-quote-native-form button[type="submit"],
.ict-pdp .ict-contact-sheet .ict-quote-success button,
.ict-pdp .ict-contact-sheet .ict-finance-summary button {
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: var(--pdp-brand-dark);
    color: #fff;
    box-shadow: none;
}
.ict-pdp .ict-contact-sheet .ict-quote-native-form button[type="submit"]:hover:not(:disabled),
.ict-pdp .ict-contact-sheet .ict-quote-success button:hover,
.ict-pdp .ict-contact-sheet .ict-finance-summary button:hover { background: #083F8A; color: #fff; }
.ict-pdp .ict-contact-sheet .ict-quote-native-form button[type="submit"]:disabled { background: var(--pdp-disabled-bg); color: var(--pdp-disabled-ink); }
.ict-pdp .ict-contact-sheet :is(.ict-quote-chips, .ict-finance-period) button[aria-pressed="true"] {
    border-color: var(--pdp-brand);
    box-shadow: inset 0 0 0 1px var(--pdp-brand);
    background: var(--pdp-tint-2);
    color: var(--pdp-brand-dark);
}
/* Owner 28/09: the 80px white fade that closes a collapsed list (`[data-ict-collapsed="true"]::after`, absolute,
   bottom:0) must be contained by its own block. Two containers (#ict-rental-service-grid, #ict-customer-grid) had no
   position, so the fade attached to the viewport-sized initial containing block and floated over whatever sat at
   document y = viewport height - 80 (the configuration cards on a scrolled phone). */
.ict-pdp [data-ict-collapsed="true"] { position: relative; }

@media (min-width: 1024px) {
    .ict-pdp .ict-contact-sheet { border-radius: 16px; }
    /* v2 mobile: markup rendered only for phones (class ict-m-only) never shows on desktop. The class is repeated so
       this outranks every generic display rule of the elements that carry it (chips `.ict-kickers > *`, trust items,
       buy-bar buttons, …) by specificity alone. */
    .ict-pdp .ict-m-only.ict-m-only.ict-m-only.ict-m-only { display: none; }
}
@media (max-width: 1023.98px) {
    .ict-pdp .ict-contact-sheet { border-radius: 20px 20px 0 0; }
    /* M7 (v2 template): the sheets' primary button is brand blue, 52px, radius 12; labels 15/20 600 ink with a red star. */
    .ict-pdp .ict-contact-sheet .ict-quote-native-form button[type="submit"],
    .ict-pdp .ict-contact-sheet .ict-quote-success button,
    .ict-pdp .ict-contact-sheet .ict-finance-summary button { min-height: 52px; border-radius: 12px; background: var(--pdp-brand); }
    .ict-pdp .ict-contact-sheet .ict-quote-native-form button[type="submit"]:hover:not(:disabled),
    .ict-pdp .ict-contact-sheet .ict-quote-success button:hover,
    .ict-pdp .ict-contact-sheet .ict-finance-summary button:hover { background: var(--pdp-brand-dark); }
    .ict-pdp .ict-contact-sheet .ict-quote-native-form label:not(.form-check),
    .ict-pdp .ict-contact-sheet .ict-quote-native-form legend { color: var(--pdp-ink); font-weight: 600; }
    .ict-pdp .ict-contact-sheet .ict-quote-native-form label.required::after { color: var(--pdp-price); }
}

/* Visually hidden but read by screen readers (labels the design does not print). */
.ict-pdp .ict-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 20-hero.css ---- */
/* 20-hero.css - P1 đầu khối mua: tên, hàng meta, khối giá, đồng hồ, gallery.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* C10: round button on the image, top right: wishlist (off on this site today).
   GS (owner 28/09): no share / compare on the photo at any width. On PC "So sánh · Chia sẻ" sit at the right end of the
   breadcrumb row (rules at "C06/C09" below); the compare link left the gallery markup, the share button stays hidden
   because the breadcrumb "Chia sẻ" (outside the PDP root) clicks it. */
.ict-pdp .ict-gallery-stage .ict-gallery-share { display: none; }
.ict-pdp .ict-gallery-stage .ict-gallery-wish {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--pdp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pdp-ink);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.ict-pdp .ict-gallery-stage .ict-gallery-wish svg { width: 18px; height: 18px; }
.ict-pdp .ict-gallery-stage .ict-gallery-wish:hover { border-color: var(--pdp-line-strong); color: var(--pdp-brand-dark); }

/* GS / GS2 (owner 28/09: "ô thông số kỹ thuật làm vuông ko phải dài vậy"): "Thông số kỹ thuật" tile in the PC thumbnail
   grid (a link to #specs, not an image). Always ONE square cell with the thumbnail's own box (64 x 64, 2px border,
   radius 8): the thumbnails are 64px at every PC width (flex 0 0 64px / width / height !important, ict-product-design.css),
   while the grid columns are 64px at 1280/1440 and 66px at 1024 — the tile follows the thumbnail, not the column.
   layoutThumbs() in ict-product-design.js puts it in the cell right after the last thumbnail (or, when the images
   overflow two rows, in the last cell of the first page) and keeps the DOM / Tab order in the visual order.
   Icon on top, "Thông số" / "kỹ thuật" on two centred lines; tint background, brand icon, text #0A4EA8 600.
   Phones: hidden (v2 gallery unchanged). Sizes (13/16) are in ict-type-scale.css (artifacts/.../type-scale-gs-snippet.css). */
@media (min-width: 1024px) {
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-specs {
        display: flex;
        /* Before layoutThumbs() runs the rail is still a wrapping flex row (ict-product-design.css): one 64px slot after
           the last thumbnail, the same cell the grid gives it (no shift). */
        flex: 0 0 64px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        justify-self: start;
        align-self: start;
        width: 64px;
        height: 64px;
        padding: 0;
        border: 2px solid var(--pdp-line);
        border-radius: 8px;
        background: var(--pdp-tint);
        color: var(--pdp-brand-dark);
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        overflow: hidden;
    }
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-specs:hover { border-color: #90D0EE; background: #fff; color: var(--pdp-brand-dark); }
    /* The rail clips overflow, so the page's 2px-outside focus ring (forced with !important in ict-product-design.css)
       loses its right/bottom edge here; an inner ring keeps the keyboard focus fully visible. */
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-specs:focus-visible { box-shadow: inset 0 0 0 2px var(--pdp-brand); }
    .ict-pdp .ict-gallery-specs > svg { flex: none; width: 18px; height: 18px; color: var(--pdp-brand); }
    /* "Thông số" is 59.5px wide in the 60px inner box: -0.2px tracking leaves ~1px of air at each side. */
    .ict-pdp .ict-gallery-specs-label { display: flex; flex-direction: column; align-items: center; letter-spacing: -.2px; }
    .ict-pdp .ict-gallery-specs-label > span { white-space: nowrap; }
    /* GS2: after a keyboard jump the JS focuses the specs heading (tabindex -1, set at run time only) and the page's
       forced focus ring shows on it; fit-content keeps that ring on the words instead of across the header row. */
    .ict-pdp #specs h2[tabindex="-1"] { width: fit-content; }
}
@media (max-width: 1023.98px) {
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-specs { display: none; }
}

/* P1 (owner 29/09, PC): ONE thumbnail row — image 1, the video, the next images, the "Thông số kỹ thuật" tile last
   (layoutThumbs() in ict-product-design.js places the cells). The images that do not fit get data-ict-thumb-hidden; the
   last visible image is covered by a dark "+N" (data-ict-thumb-more) that opens the viewer. "▶ Video" pill at the
   bottom-left of the main image (32px, dark 82%). Phones keep the v2 gallery (their own "+N" rule; no pill).
   P1 follow-up (verifier 29/09): min-height 0 undoes the legacy ".ict-pdp button{min-height:40px}" (ict-readability.css)
   so the pill keeps its 32px, and bottom 12px = the zoom button's bottom inset (both sit on the same line). */
@media (min-width: 1024px) {
    .ict-pdp .ict-gallery-thumbs > [data-ict-thumb-hidden] { display: none; }
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-thumb[data-ict-thumb-more] { position: relative; }
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-thumb[data-ict-thumb-more]::after {
        content: attr(data-ict-thumb-more);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: inherit;
        background: rgba(32, 39, 51, .62);
        color: #fff;
        font-weight: 700;
    }
    .ict-pdp .ict-gallery-stage > .ict-gallery-video-pill {
        position: absolute;
        left: 16px;
        bottom: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        min-height: 0;
        margin: 0;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: rgba(32, 39, 51, .82);
        color: #fff;
        font-weight: 600;
        cursor: pointer;
    }
    .ict-pdp .ict-gallery-stage > .ict-gallery-video-pill:hover { background: rgba(32, 39, 51, .95); }
    .ict-pdp .ict-gallery-stage > .ict-gallery-video-pill > svg { flex: none; width: 10px; height: 12px; }
}
@media (max-width: 1023.98px) {
    .ict-pdp .ict-gallery-stage > .ict-gallery-video-pill { display: none; }
}

/* B03: "Đại lý ủy quyền chính hãng ASUS" line under the thumbnails. */
.ict-pdp .ict-gallery-caption { color: var(--pdp-ink-2); }
.ict-pdp .ict-gallery-certification { color: var(--pdp-brand-dark); }

/* B02/B03: title, then one meta row: ★ score (n) | ● stock | chips … SKU chip at the end. */
.ict-pdp .ict-product-heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.ict-pdp .ict-product-heading .product_title { margin: 0; color: var(--pdp-ink); text-wrap: pretty; }
.ict-pdp .ict-product-heading .product_title a { color: inherit; }
.ict-pdp .ict-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    color: var(--pdp-ink-2);
}
.ict-pdp .ict-product-meta > .ict-rating:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pdp-ink);
    text-decoration: none;
}
.ict-pdp .ict-product-meta > .ict-rating svg { width: 16px; height: 16px; color: #FFB01F; }
.ict-pdp .ict-product-meta > .ict-rating span { color: var(--pdp-ink-3); }
/* Owner 28/09: the star row stays when there are no reviews yet (like production): star + "Chưa có đánh giá",
   both widths; product.blade.php adds is-empty and span.ict-rating-empty instead of the hidden attribute.
   Phone review 28/09 (task P2): the grey #CBD5E1 star read as "no star", so it keeps the #FFB01F of a rated product;
   only the text stays grey. No score is shown without reviews. */
.ict-pdp .ict-product-meta > .ict-rating.is-empty { color: var(--pdp-ink-3); }
.ict-pdp .ict-product-meta > .ict-rating.is-empty svg { color: #FFB01F; }
.ict-pdp .ict-product-meta > .ict-rating.is-empty:hover { color: var(--pdp-brand-dark); }
.ict-pdp .ict-product-meta > .ict-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pdp-ok);
}
.ict-pdp .ict-product-meta > .ict-stock > svg { display: none; }
.ict-pdp .ict-product-meta > .ict-stock::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.ict-pdp .ict-product-meta > .ict-rating:not([hidden]) + .ict-stock,
.ict-pdp .ict-product-meta > .ict-stock + .ict-kickers:not(:empty) {
    padding-left: 12px;
    border-left: 1px solid var(--pdp-line);
}
.ict-pdp .ict-product-meta > .ict-stock[data-unavailable="true"] { color: var(--pdp-ink-3); }
.ict-pdp [data-ict-offer-state="backorder"] .ict-product-meta > .ict-stock[data-unavailable="true"] { color: var(--pdp-brand-dark); }
/* Task ST (owner 28/09 design, sale pages): "● Hàng đặt trước" / "● Liên hệ báo giá" in blue. The design label is
   span.ict-stock-state; the audited [data-ict-stock-text] stays in the DOM and is only hidden in those two states. */
.ict-pdp:not(.ict-pdp-rental) :is([data-ict-offer-state="backorder"], [data-ict-offer-state="quote"]) .ict-product-meta > .ict-stock > [data-ict-stock-text] { display: none; }
.ict-pdp:not(.ict-pdp-rental) [data-ict-offer-state="quote"] .ict-product-meta > .ict-stock { color: var(--pdp-brand-dark); }
/* B13: nothing to finance before a price is quoted. */
.ict-pdp [data-ict-offer-state="quote"] .ict-price-box > .ict-finance-link { display: none; }
/* Task ST (owner 28/09 design): out of stock, the sale price frame keeps the price, the struck price and the percentage
   (and the VAT line); no assurance line, saving, promotion clock or instalment link. */
.ict-pdp:not(.ict-pdp-rental) [data-ict-offer-state="out"] .ict-price-box > :is(.ict-price-assurance, .ict-price-saving, .ict-countdown, .ict-finance-link) { display: none; }
.ict-pdp .ict-kickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.ict-pdp .ict-kickers:empty { display: none; }
.ict-pdp .ict-kickers > * {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--pdp-tint);
    color: var(--pdp-brand-dark);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.ict-pdp .ict-kickers > a:hover { background: #D6E8F5; color: var(--pdp-brand-dark); }
.ict-pdp .ict-product-meta > .ict-sku-chip:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin-left: auto;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: var(--pdp-line-soft);
    color: var(--pdp-ink-2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ict-pdp .ict-sku-chip svg { flex: none; width: 14px; height: 14px; }
.ict-pdp .ict-sku-chip:hover { background: var(--pdp-line); color: var(--pdp-ink); }

/* B04/B05/B13/T02: the price box. Row 1: price · struck · −% · VAT chip … Trả góp / Điều khoản (right).
   Following rows: assurance line, orange promotion chip, state notes. Flex order keeps the DOM order for readers. */
.ict-pdp .ict-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 6px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
}
.ict-pdp .ict-price-box > *,
.ict-pdp .ict-price-box > .ict-rental-price-footer > * { flex: 1 1 100%; order: 10; margin: 0; min-width: 0; }
.ict-pdp .ict-price-box > .ict-rental-price-footer { display: contents; }
.ict-pdp .ict-price-box > .ict-price-line {
    flex: 0 1 auto;
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
}
.ict-pdp .ict-price-line #product-price-main { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; }
.ict-pdp .ict-price-line del { color: var(--pdp-ink-2); }
.ict-pdp .ict-price-line .ict-price-unit { color: var(--pdp-ink-2); font-weight: 600; }
.ict-pdp .ict-price-line .ict-discount-badge:not([hidden]) {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--pdp-price);
    color: #fff;
    font-weight: 700;
}
.ict-pdp:not(.ict-pdp-rental) .ict-price-box > .ict-price-policy {
    flex: 0 1 auto;
    order: 2;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--pdp-line-soft);
    color: var(--pdp-ink-2);
    font-weight: 600;
}
.ict-pdp:not(.ict-pdp-rental) .ict-price-box > .ict-price-policy > svg { display: none; }
.ict-pdp .ict-price-box > .ict-finance-link,
.ict-pdp .ict-price-box .ict-price-service-link {
    flex: 0 0 auto;
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    color: var(--pdp-brand-dark);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.ict-pdp .ict-price-box .ict-price-service-link svg { width: 16px; height: 16px; }
.ict-pdp .ict-price-box > .ict-price-assurance { order: 4; color: var(--pdp-ink-2); }
.ict-pdp .ict-price-box > .ict-price-note { order: 4; color: var(--pdp-ink-2); }
.ict-pdp .ict-price-box :is(.ict-countdown, .ict-price-saving):not([hidden]) {
    flex: 0 1 auto;
    order: 5;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--pdp-flash-bg);
    color: var(--pdp-flash);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ict-pdp .ict-price-box :is(.ict-countdown, .ict-price-saving) > svg { flex: none; width: 16px; height: 16px; }
.ict-pdp .ict-price-box .ict-countdown > span { white-space: nowrap; }
.ict-pdp .ict-price-box .ict-countdown b,
.ict-pdp .ict-price-box .ict-price-saving strong { font-weight: 700; color: inherit; }
.ict-pdp .ict-price-box .ict-countdown-left::before { content: "· "; }
/* Rental: policy line with a green tick; the full deposit sentence (how much) under it on every width, as the old site
   (owner 27/09). The calculator only says it is returned (owner 28/09: one sentence, no amount). */
.ict-pdp-rental .ict-price-box > .ict-price-policy,
.ict-pdp .ict-price-box > .ict-deposit-summary {
    order: 6;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    color: var(--pdp-ink-2);
}
.ict-pdp-rental .ict-price-box > .ict-price-policy > svg,
.ict-pdp .ict-price-box > .ict-deposit-summary > svg { width: 18px; height: 18px; margin-top: 1px; }
.ict-pdp-rental .ict-price-box > .ict-price-policy > svg { color: var(--pdp-ink-3); } /* owner 28/09: "chưa gồm VAT" is information, not a benefit */
.ict-pdp .ict-price-box > .ict-deposit-summary > .ict-deposit-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ict-pdp .ict-price-box > .ict-deposit-summary .ict-deposit-head b { color: var(--pdp-ink); font-weight: 700; }
.ict-pdp .ict-price-box > .ict-deposit-summary .ict-deposit-line { color: var(--pdp-ink-3); }
.ict-pdp .ict-price-box > .ict-deposit-summary .ict-deposit-business { margin-top: 2px; font-weight: 600; }
.ict-pdp .ict-price-box > .ict-deposit-summary > svg { color: var(--pdp-brand); }
/* B11/B12/B13 notes under the price row. */
.ict-pdp .ict-price-box > :is(.ict-quote-note, .ict-stock-note):not([hidden]) {
    order: 7;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 10px;
}
.ict-pdp .ict-price-box > :is(.ict-quote-note, .ict-stock-note) > svg { width: 18px; height: 18px; margin-top: 1px; }
.ict-pdp .ict-price-box > .ict-quote-note { background: var(--pdp-tint); color: var(--pdp-brand-dark); }
/* Task ST: the in-frame stock row is the pre-order one ("Hàng đặt trước · Giao hàng từ …", blue tint, clock). */
.ict-pdp .ict-price-box > .ict-stock-note { align-items: center; background: var(--pdp-tint); color: var(--pdp-brand-dark); }
.ict-pdp .ict-price-box > :is(.ict-quote-note, .ict-stock-note) b { color: inherit; font-weight: 700; }
/* X1 lead time (owner 29/09): a short pre-order lead time ("8–10 tuần", App\Support\ProductPreorder) stays on one line. */
.ict-pdp .ict-price-box > .ict-stock-note .ict-preorder-days { white-space: nowrap; }
/* Task ST (owner 28/09 design): the out-of-stock row follows the price frame, after a 1px #F1F5F9 rule drawn in the
   panel gap (PC 20px; phones set their own spacing in 70-mobile.css). */
.ict-pdp .ict-purchase-panel > .ict-oos-note:not([hidden]) {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--pdp-bg);
    color: var(--pdp-ink-2);
}
.ict-pdp .ict-purchase-panel > .ict-oos-note::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    height: 1px;
    background: var(--pdp-line-soft);
}
.ict-pdp .ict-purchase-panel > .ict-oos-note > svg { width: 18px; height: 18px; margin-top: 1px; }
.ict-pdp .ict-purchase-panel > .ict-oos-note b { color: var(--pdp-ink); font-weight: 700; }
[data-ict-offer-state="quote"] .ict-price-line #product-price-main { color: var(--pdp-price); }

/* C06/C09: breadcrumb links #475569, current item #202733 600, the long product name capped at 520px on PC.
   (This bundle loads on product pages only, so these outside-.ict-pdp selectors do not reach other pages.) */
.ict-product-breadcrumb .ict-breadcrumb-list a { color: #475569; }
.ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item.active > span { color: #202733; font-weight: 600; }
@media (min-width: 1024px) {
    .ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item.active { max-width: 520px; }
    .ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item.active > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* GS (owner 28/09): "So sánh · Chia sẻ" at the right end of the row. The compare link borrows the share button's look
       (class ict-breadcrumb-share, ict-design-shell.css); the share button's 24px fade (its ::before, drawn over whatever
       sits to its left) becomes the "·" between the two, so it no longer fades the word "So sánh". */
    .ict-product-breadcrumb .ict-breadcrumb-compare { text-decoration: none; }
    /* P6 (owner 29/09): "So sánh · Chia sẻ" in the breadcrumb links' colour (#475569, 6.99:1 on the #F4F6F8 row) instead
       of the shell's #64748B; the shell's :hover blue still wins (higher specificity). */
    .ict-product-breadcrumb :is(a, button).ict-breadcrumb-share { color: #475569; }
    .ict-product-breadcrumb .ict-breadcrumb-compare + .ict-breadcrumb-share::before {
        content: "·";
        position: static;
        width: auto;
        margin-right: 2px;
        background: none;
        color: #94A3B8;
    }
    /* C19: the image column sticks 16px under the sticky buy bar. */
    .ict-pdp .ict-hero-media { top: calc(var(--ict-sticky-top, 0px) + 16px); }
    /* v2 mobile: the clock block's phone-only parts (date line, four boxes, saving tail) never show on desktop. */
    .ict-pdp :is(.ict-countdown-until, .ict-countdown-boxes, .ict-countdown-saving-tail) { display: none; }
}
@media (max-width: 1023.98px) {
    /* KIEM-KE: the back-to-top button sits above the bottom buy bar. */
    .scrollup { bottom: calc(80px + env(safe-area-inset-bottom)); }

    /* M1 chips (v2): 28px tall, padding 0 8, radius 6, tint background, brand-dark text. */
    /* 6px (design 8px): owner 28/09 wants the four chips "Mới 100% · Full VAT · BH 36 tháng · Hàng chính hãng" on one
       row at 390; 8px left the fourth 5px short. At 360 they still wrap to a second row. */
    .ict-pdp .ict-product-heading .ict-kickers > * { padding: 0 6px; }

    /* M1 sale price frame (v2 "Khung giá"): 12px padding; row 1 = price · struck (#64748B) · −% (1px 6px); then the
       assurance line, "⚡ Tiết kiệm X so với giá niêm yết" in red without the orange chip, the clock block (a rule,
       "KM đến …:" and four dark boxes), the state note, and "Tư vấn trả góp ›" right-aligned on the last line.
       Flex order only; the DOM (and p.ict-price-policy, hidden here) stays for the tests. */
    .ict-pdp:not(.ict-pdp-rental) .ict-price-box { padding: 12px; gap: 10px 6px; }
    .ict-pdp .ict-price-line del { color: var(--pdp-ink-3); }
    .ict-pdp .ict-price-line .ict-discount-badge:not([hidden]) { padding: 1px 6px; border-radius: 6px; }
    .ict-pdp:not(.ict-pdp-rental) .ict-price-box > .ict-price-policy { display: none; }
    .ict-pdp .ict-price-box > .ict-price-assurance { order: 4; margin-top: -6px; }
    .ict-pdp .ict-price-box > .ict-price-saving:not([hidden]) {
        order: 5;
        flex: 1 1 100%;
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--pdp-price);
        font-weight: 600;
    }
    .ict-pdp .ict-price-box > .ict-price-saving > svg { margin-top: 2px; }
    .ict-pdp .ict-price-box .ict-price-saving strong { font-weight: 800; }
    .ict-pdp .ict-price-box > .ict-countdown:not([hidden]) {
        order: 6;
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 4px;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--pdp-ink-2);
    }
    .ict-pdp .ict-price-box > .ict-countdown > svg { order: 1; margin-right: 2px; color: var(--pdp-price); }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-saving,
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-saving-tail { color: var(--pdp-price); font-weight: 600; }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-saving { order: 2; }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-saving-tail { order: 3; }
    .ict-pdp .ict-price-box .ict-countdown b { font-weight: 800; }
    .ict-pdp .ict-price-box .ict-countdown > :is(.ict-countdown-end, .ict-countdown-left) { display: none; }
    /* The thin rule between the saving line and the clock row is a flex item of its own (no extra markup). */
    .ict-pdp .ict-price-box > .ict-countdown::before { content: ""; order: 4; flex: 1 1 100%; height: 1px; background: var(--pdp-line-soft); }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-until { order: 5; display: inline-flex; align-items: center; gap: 6px; }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-until::before {
        content: "";
        flex: none;
        width: 15px;
        height: 15px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .ict-pdp .ict-price-box .ict-countdown > .ict-countdown-boxes { order: 6; display: flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }
    .ict-pdp .ict-price-box .ict-countdown-box {
        display: grid;
        width: 42px;
        padding: 5px 0 4px;
        border-radius: 8px;
        background: var(--pdp-ink);
        color: #fff;
        text-align: center;
    }
    .ict-pdp .ict-price-box .ict-countdown-box > b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
    .ict-pdp .ict-price-box .ict-countdown-unit { color: var(--pdp-line-strong); }
    /* The v2 JS keeps the standalone saving line on phones while the clock runs, so the clock block drops its own copy. */
    .ict-pdp .ict-price-box:has(> .ict-price-saving:not([hidden])) > .ict-countdown > :is(svg, .ict-countdown-saving, .ict-countdown-saving-tail) { display: none; }
    /* Block, not inline-flex, so "Tư vấn " + "Trả góp ›" keep their space. */
    .ict-pdp .ict-price-box > .ict-finance-link { order: 20; flex: 1 1 100%; display: block; margin: -10px 0 -12px; padding: 12px 0; text-align: right; }
    /* D1 (owner 29/09, sale pages): "🚚 Giao HCM 2–4 giờ · Tỉnh 3–5 ngày" after the price, saving and clock rows, before
       "Tư vấn Trả góp ›" (p.ict-price-ship.ict-m-only, product.blade.php). Like the delivery lines it replaces, it goes in
       the three states (out of stock, pre-order, quote). */
    .ict-pdp .ict-price-box > .ict-price-ship { order: 7; display: flex; align-items: flex-start; gap: 6px; color: var(--pdp-ink); }
    .ict-pdp .ict-price-box > .ict-price-ship > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pdp-brand); }
    .ict-pdp .ict-price-box > .ict-price-ship b { font-weight: 600; }
    .ict-pdp :is([data-ict-offer-state="out"], [data-ict-offer-state="backorder"], [data-ict-offer-state="quote"]) .ict-price-box > .ict-price-ship { display: none; }

    /* M1 rental price frame (v2): price + unit | "Điều khoản thuê ›" on one baseline, a rule, the policy line, the deposit line. */
    .ict-pdp-rental .ict-price-box { padding: 12px; gap: 6px; }
    .ict-pdp-rental .ict-price-box > .ict-price-line { align-self: baseline; }
    .ict-pdp-rental .ict-price-box .ict-price-service-link { order: 1; flex: 0 0 auto; align-self: baseline; margin: -11px 0 -11px auto; padding: 11px 0; }
    .ict-pdp-rental .ict-price-box > .ict-price-policy { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--pdp-line-soft); column-gap: 10px; }
    .ict-pdp-rental .ict-price-box > .ict-deposit-summary { column-gap: 10px; }

    /* M2 breadcrumb (v2): parents only on phones (the current-page item stays in the DOM for the microdata and the
       browser script), 44px hit rows, #64748B links, the last parent #475569 600, the 24px fade with a spacer after it. */
    .ict-product-breadcrumb .ict-breadcrumb-list > .breadcrumb-item.active { display: none; }
    .ict-product-breadcrumb .ict-breadcrumb-list {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    .ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item a { padding: 12px 0; margin: -10px 0; color: #64748B; }
    .ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item:nth-last-child(2) a { color: #475569; font-weight: 600; }
    .ict-product-breadcrumb .ict-breadcrumb-list .breadcrumb-item:nth-last-child(2)::after { content: ""; flex: none; width: 24px; }

    /* M2 gallery (v2): 4:3 white stage with 12px radius on the page background, the counter pill centred at the bottom,
       no buttons on the image; one scrollable row of 60px thumbs (selected = 2px brand), "+N" overlay on the last visible
       thumb (JS sets data-ict-thumb-more; every thumb stays in the DOM and scrollable), "Video" overlay on the video thumb. */
    .ict-pdp .ict-hero-media > .ict-gallery { padding: 0 12px 8px; background: transparent; }
    /* ict-review-20260918.css (phones) gives the stage margin 0 12px, a 1px border, radius 14 and min-height 220: the
       12px inset is the gallery padding here, so those go; its forced 1/1 ratio and hidden counter were pruned. */
    .ict-pdp .ict-gallery-stage { aspect-ratio: 4 / 3; min-height: 0; margin: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; box-shadow: none; }
    .ict-pdp .ict-gallery-stage :is(.ict-gallery-share, .ict-gallery-compare) { display: none; }
    .ict-pdp .ict-gallery-stage .ict-gallery-counter {
        left: 50%;
        right: auto;
        bottom: 12px;
        max-width: calc(100% - 24px);
        transform: translateX(-50%);
        padding: 5px 12px;
        border-radius: 999px;
        background: rgba(32, 39, 51, .85);
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ict-pdp .ict-gallery-navigation { padding: 10px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
    .ict-pdp .ict-gallery-rail > .ict-thumb-scroll { display: none; }
    .ict-pdp .ict-gallery-thumbs {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-thumb {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        padding: 0;
        border: 1px solid var(--pdp-line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        scroll-snap-align: start;
    }
    .ict-pdp .ict-gallery-thumbs > .ict-gallery-thumb.is-active { border: 2px solid var(--pdp-brand); }
    .ict-pdp-rental .ict-gallery-thumb img { object-fit: cover; }
    /* Owner 28/09 (v2 §2): the rental cover photo fills the 4:3 frame; sale pages keep `contain` (the legacy base rule
       .ict-gallery-slide img in ict-product-design.css). The phone-only `contain !important` copies were pruned from
       ict-product-design.css and ict-review-20260918.css. The lightbox image is outside the stage and stays `contain`. */
    .ict-pdp-rental .ict-gallery-stage .ict-gallery-slide img { object-fit: cover; }
    .ict-pdp .ict-gallery-thumb.ict-gallery-video small { display: none; }
    .ict-pdp .ict-gallery-thumb[data-ict-video] { position: relative; border-color: var(--pdp-line); box-shadow: none; }
    .ict-pdp .ict-gallery-thumb[data-ict-video]::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 16px;
        height: 16px;
        border: 0;
        border-radius: 0;
        background: #fff;
        transform: translate(-50%, calc(-50% - 9px));
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .ict-pdp .ict-gallery-thumb[data-ict-video]::after {
        content: "Video";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: end center;
        width: auto;
        height: auto;
        padding-bottom: 11px;
        transform: none;
        clip-path: none;
        border-radius: inherit;
        background: rgba(15, 23, 42, .55);
        color: #fff;
        font-weight: 700;
    }
    .ict-pdp .ict-gallery-thumb[data-ict-thumb-more] { position: relative; }
    .ict-pdp .ict-gallery-thumb[data-ict-thumb-more]::before { content: none; }
    .ict-pdp .ict-gallery-thumb[data-ict-thumb-more]::after {
        content: attr(data-ict-thumb-more);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        width: auto;
        height: auto;
        padding: 0;
        transform: none;
        clip-path: none;
        border-radius: inherit;
        background: rgba(15, 23, 42, .62);
        color: #fff;
        font-weight: 800;
    }

    /* M4 gifts (v2): 16px card, gap 12; h2 without icon or "Tổng giá trị"; rows [18px brand check | text … Miễn phí]
       split by 1px rules (12px above, 10px below); "Xem thêm" is a bordered 44px button. The JS row normalisation
       (.ict-gift-copy / .ict-gift-value / .ict-gift-collapsed) and the legacy 6px row padding are kept as they are. */
    .ict-pdp .ict-hero-media > .ict-gifts { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 0; box-shadow: none; }
    .ict-pdp .ict-gifts > :is(h2, h3) { display: flex; gap: 0; margin: 0; }
    .ict-pdp .ict-gifts > :is(h2, h3) .ict-heading-icon,
    .ict-pdp .ict-gifts .ict-gift-total { display: none; }
    .ict-pdp .ict-gifts ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .ict-pdp .ict-gifts li {
        position: relative;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: start;
        min-height: 0;
        margin: 0;
        padding: 6px 0;
        border: 0;
        list-style: none;
        color: var(--pdp-ink);
    }
    .ict-pdp .ict-gifts li.ict-gift-collapsed { display: none; }
    .ict-pdp .ict-gifts.is-expanded li.ict-gift-collapsed { display: grid; }
    .ict-pdp .ict-gifts li + li::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 1px; background: var(--pdp-line-soft); }
    .ict-pdp .ict-gifts :is(ul > li, .ict-cms-content li)::before {
        content: "";
        position: static;
        grid-column: 1;
        width: 18px;
        height: 18px;
        flex: none;
        margin: 2px 0 0;
        border: 0;
        border-radius: 0;
        background: var(--pdp-brand);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .ict-pdp .ict-gifts li > .ict-gift-copy { grid-column: 2; min-width: 0; }
    .ict-pdp .ict-gifts li > .ict-gift-value { grid-column: 3; display: inline; max-width: none; margin: 0; color: var(--pdp-ok); font-weight: 700; text-align: right; white-space: nowrap; }
    .ict-pdp .ict-gifts .ict-gift-detail,
    .ict-pdp .ict-gifts .ict-gift-condition { color: var(--pdp-ink-3); }
    .ict-pdp .ict-gifts .ict-gifts-expand:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        border: 1px solid var(--pdp-line-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--pdp-brand-dark);
        text-align: center;
    }
}

/* v2 (27/09 chiều): the gifts heading is an <h3> now (SEO S2). Legacy ict-product-design.css only laid out `.ict-gifts h2`
   (flex, gap 10, margin-bottom 12; desktop icon 16px white), so the same layout is restated here for both tags. Sizes: type-scale. */
.ict-pdp .ict-gifts > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

/* Owner 28/09 (PC review): the PC gift card follows the design like the phone one — plain blue gift icon beside an
   18/24 title, rows 15/22 in ink with a blue ✓, a hairline between rows, the detail in grey and "Miễn phí" green 600 on
   the right. Sizes and the row padding live in ict-type-scale.css (12.1 PC gifts). */
@media (min-width: 1024px) {
    .ict-pdp .ict-hero-media > .ict-gifts { padding: 18px 20px 12px; }
    .ict-pdp .ict-gifts > :is(h2, h3) { align-items: flex-start; gap: 10px; margin: 0 0 6px; }
    .ict-pdp .ict-gifts > :is(h2, h3) .ict-heading-icon { flex: none; width: 20px; height: 24px; margin: 0; border-radius: 0; background: none; color: var(--pdp-brand); display: grid; place-items: center; }
    .ict-pdp .ict-gifts > :is(h2, h3) .ict-heading-icon svg { width: 20px; height: 20px; color: var(--pdp-brand); }
    .ict-pdp .ict-gifts .ict-gift-total { display: block; margin-top: 2px; color: var(--pdp-ink-2); font-weight: 400; }
    .ict-pdp .ict-hero-media > .ict-gifts :is(ul, .ict-cms-content > ul) { gap: 0; margin: 0; }
    .ict-pdp .ict-hero-media > .ict-gifts :is(ul > li, .ict-cms-content li) { align-items: flex-start; gap: 10px; color: var(--pdp-ink); }
    .ict-pdp .ict-hero-media > .ict-gifts :is(ul > li, .ict-cms-content li) + li { border-top: 1px solid var(--pdp-line-soft); }
    .ict-pdp .ict-hero-media > .ict-gifts .ict-gift-copy { flex: 1; min-width: 0; }
    .ict-pdp .ict-hero-media > .ict-gifts .ict-gift-copy strong { color: var(--pdp-ink); font-weight: 700; }
    .ict-pdp .ict-hero-media > .ict-gifts .ict-gift-detail { color: var(--pdp-ink-2); }
    .ict-pdp .ict-hero-media > .ict-gifts .ict-gift-condition { color: var(--pdp-ink-3); }
    .ict-pdp .ict-hero-media > .ict-gifts .ict-gift-value { flex: none; margin-left: auto; padding-left: 12px; color: var(--pdp-ok); font-weight: 600; white-space: nowrap; }
    /* "Đặc điểm nổi bật" on PC: the design draws the "–" of each line in brand blue. */
    .ict-pdp .ict-feature-summary .ict-feature-bullet { color: var(--pdp-brand); }
}

/* ---- 30-purchase.css ---- */
/* 30-purchase.css - P1 chọn cấu hình, hàng nút, dòng giao hàng, thẻ B2B, trạng thái, đặc điểm nổi bật.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* B06: configuration cards. Selected = brand border + 1px inset (2px look, no layout jump) + tinted background. */
.ict-pdp .ict-variant-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 12px;
}
.ict-pdp .ict-variant-heading h2 { margin: 0; color: var(--pdp-ink); text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-variant-heading .ict-compare-all {
    margin-left: auto;
    color: var(--pdp-brand-dark);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.ict-pdp .ict-variant-heading .ict-compare-all:hover { color: var(--pdp-brand); text-decoration: underline; }
.ict-pdp .ict-variant-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ict-pdp .ict-variant-grid > li { position: relative; display: flex; min-width: 0; margin: 0; padding: 0; }
.ict-pdp .ict-variant-grid .ict-variant-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ict-pdp .ict-variant-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pdp-ink);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.ict-pdp .ict-variant-card:hover { border-color: var(--pdp-line-strong); }
.ict-pdp .ict-variant-grid > li.active > .ict-variant-card {
    border-color: var(--pdp-brand);
    box-shadow: inset 0 0 0 1px var(--pdp-brand);
    background: var(--pdp-tint-2);
}
.ict-pdp .ict-variant-card .ict-variant-check { display: none; }
.ict-pdp .ict-variant-card .ict-variant-name { display: block; color: var(--pdp-ink); font-weight: 600; overflow-wrap: anywhere; }
.ict-pdp .ict-variant-card > strong { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px; color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; }
.ict-pdp .ict-variant-card .ict-variant-old-price { display: none; }
.ict-pdp:not(.ict-pdp-rental) .ict-variant-card .ict-variant-note { display: none; }
.ict-pdp .ict-variant-card .ict-variant-unavailable,
.ict-pdp .ict-variant-card > small:last-child { color: var(--pdp-ink-3); }
.ict-pdp .ict-variant-card .ict-variant-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--pdp-ink);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* B07: Barebone note under the grid (shown by JS for the selected Barebone card). */
.ict-pdp .ict-variant-hint:not([hidden]) {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--pdp-bg);
    color: var(--pdp-ink);
}
.ict-pdp .ict-variant-hint > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--pdp-brand); }
.ict-pdp .ict-variant-hint a { color: var(--pdp-brand-dark); font-weight: 600; white-space: nowrap; }

/* Colours ("KHÔNG VẼ"): shown only when there is a real choice; swatch chips. */
.ict-pdp .ict-colors:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.ict-pdp .ict-colors legend { float: left; width: auto; margin: 0 8px 0 0; padding: 0; color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-colors label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--pdp-line);
    border-radius: 10px;
    cursor: pointer;
}
.ict-pdp .ict-colors label:has(input:checked) { border-color: var(--pdp-brand); box-shadow: inset 0 0 0 1px var(--pdp-brand); }

/* B08/T07: one row [quantity | MUA NGAY + total | Thêm vào giỏ]; rental [THUÊ NGAY + total | Thêm vào giỏ]. */
.ict-pdp .ict-order-controls { margin: 0; padding: 0; background: transparent; }
.ict-pdp .ict-order-controls form { display: block; width: 100%; margin: 0; }
.ict-pdp .ict-cta-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    margin: 16px 0 0;
}
.ict-pdp .ict-cta-row > .ict-quantity-row { display: flex; margin: 0; }
.ict-pdp .ict-cta-row > .ict-quantity-row > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ict-pdp .ict-cta-row > :only-child,
.ict-pdp-rental .ict-cta-row > .ict-purchase-buttons { grid-column: 1 / -1; }
.ict-pdp .ict-order-controls .ict-quantity {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: stretch;
    width: 100%;
    min-height: 52px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--pdp-line-strong);
    border-radius: 10px;
    background: #fff;
}
.ict-pdp .ict-order-controls .ict-quantity button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--pdp-ink);
}
.ict-pdp .ict-order-controls .ict-quantity button svg { width: 16px; height: 16px; }
.ict-pdp .ict-order-controls .ict-quantity button:hover:not(:disabled) { background: var(--pdp-line-soft); }
.ict-pdp .ict-order-controls .ict-quantity button:disabled { color: var(--pdp-line-strong); cursor: not-allowed; }
.ict-pdp .ict-order-controls .ict-quantity .qty {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: var(--pdp-ink);
    font-weight: 600;
    text-align: center;
}
.ict-pdp .ict-purchase-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.ict-pdp-rental .ict-purchase-buttons { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ict-pdp .ict-purchase-buttons > .ict-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 4px 12px;
    border-radius: 12px;
    text-align: center;
    text-transform: none;
    box-shadow: none;
}
.ict-pdp .ict-purchase-buttons > .ict-button-primary {
    border: 0;
    background: var(--pdp-price);
    color: #fff;
}
.ict-pdp .ict-purchase-buttons > .ict-button-primary:hover:not(:disabled) { background: var(--pdp-price-hover); color: #fff; }
.ict-pdp .ict-purchase-buttons > .ict-button-primary:active:not(:disabled) { background: var(--pdp-price-active); }
.ict-pdp .ict-purchase-buttons > .ict-button-primary strong { color: inherit; font-weight: 800; letter-spacing: .02em; }
.ict-pdp .ict-purchase-buttons > .ict-button-primary small { display: block; color: inherit; font-weight: 600; opacity: .95; }
.ict-pdp .ict-purchase-buttons > .ict-button-outline {
    flex-direction: row;
    gap: 8px;
    border: 2px solid var(--pdp-brand);
    background: #fff;
    color: var(--pdp-brand-dark);
    font-weight: 700;
}
.ict-pdp .ict-purchase-buttons > .ict-button-outline:hover:not(:disabled) { background: var(--pdp-tint); color: var(--pdp-brand-dark); }
.ict-pdp .ict-purchase-buttons > .ict-button-outline svg { width: 18px; height: 18px; flex: none; }
.ict-pdp .ict-purchase-buttons > .ict-button:disabled {
    border-color: var(--pdp-line);
    background: var(--pdp-disabled-bg);
    color: var(--pdp-disabled-ink);
    cursor: not-allowed;
}
.ict-pdp .ict-quantity-note:not([hidden]) {
    display: block;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--pdp-flash-bg);
    color: #7E4707;
}
.ict-pdp .ict-sheet-total { display: none; }
.ict-pdp .ict-order-controls :is(.success-message, .error-message) { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; }
.ict-pdp .ict-order-controls .error-message { background: #FFF1F2; color: var(--pdp-price); }

/* B11/B12/B13: state buttons replace the pair; quantity is hidden when nothing can be bought.
   X1 (owner 29/09): a sale pre-order is bought like an in-stock offer (quantity + red "ĐẶT TRƯỚC" + "Thêm vào giỏ"), so
   the pre-order state hides the pair on rental pages only (`:where()` keeps the old specificity). */
.ict-pdp .ict-purchase-buttons > .ict-state-button { display: none; }
.ict-pdp [data-ict-offer-state="quote"] .ict-purchase-buttons > .ict-state-quote,
.ict-pdp [data-ict-offer-state="out"] .ict-purchase-buttons > .ict-state-out,
.ict-pdp-rental [data-ict-offer-state="backorder"] .ict-purchase-buttons > .ict-state-out { display: flex; }
.ict-pdp [data-ict-offer-state="quote"] .ict-purchase-buttons > button.ict-button,
.ict-pdp [data-ict-offer-state="out"] .ict-purchase-buttons > button.ict-button,
.ict-pdp-rental [data-ict-offer-state="backorder"] .ict-purchase-buttons > button.ict-button,
.ict-pdp [data-ict-offer-state="quote"] .ict-cta-row > .ict-quantity-row,
.ict-pdp [data-ict-offer-state="out"] .ict-cta-row > .ict-quantity-row,
.ict-pdp-rental [data-ict-offer-state="backorder"] .ict-cta-row > .ict-quantity-row { display: none; }
[data-ict-offer-state="quote"] .ict-cta-row > .ict-purchase-buttons,
[data-ict-offer-state="out"] .ict-cta-row > .ict-purchase-buttons,
:where(.ict-pdp-rental) [data-ict-offer-state="backorder"] .ict-cta-row > .ict-purchase-buttons { grid-column: 1 / -1; }
[data-ict-offer-state="out"] .ict-purchase-buttons,
:where(.ict-pdp-rental) [data-ict-offer-state="backorder"] .ict-purchase-buttons { grid-template-columns: minmax(0, 1fr); }
.ict-pdp .ict-purchase-buttons > .ict-state-button { gap: 8px; text-decoration: none; }
.ict-pdp .ict-purchase-buttons > .ict-state-button svg { width: 18px; height: 18px; flex: none; }
.ict-pdp .ict-purchase-buttons > .ict-state-out { flex-direction: row; }
/* Verifier 28/09: the two-line red state buttons (NHẬN BÁO GIÁ + sub-line, ĐẶT TRƯỚC + total) stack their lines like
   MUA NGAY, without the 8px gap the icon buttons use, so the row stays 52px high. */
.ict-pdp .ict-purchase-buttons > .ict-button-primary:is(.ict-state-quote, .ict-state-preorder) { gap: 0; }
/* Task ST (owner 28/09 design, sale pages): out of stock = [🔔 BÁO KHI CÓ HÀNG | 📞 Liên hệ đặt hàng]; red one 1.3fr
   like the quote pair. Rental keeps its single button. X1 (owner 29/09): pre-order uses the in-stock row, no state link. */
.ict-pdp [data-ict-offer-state="out"] .ict-purchase-buttons > .ict-state-notify { display: flex; }
.ict-pdp:not(.ict-pdp-rental) [data-ict-offer-state="out"] .ict-purchase-buttons { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ict-pdp .ict-purchase-buttons > .ict-state-notify { flex-direction: row; }
/* The design hides the delivery line (and its "Đặt lịch xem máy ›") in the three states. */
.ict-pdp:not(.ict-pdp-rental) :is([data-ict-offer-state="out"], [data-ict-offer-state="backorder"], [data-ict-offer-state="quote"]) .ict-order-controls form > .ict-ship-line { display: none; }
.ict-pdp-container[data-ict-offer-state="quote"] .ict-business-contact,
.ict-pdp-container[data-ict-offer-state="quote"] .ict-accessories,
.ict-pdp-container[data-ict-offer-state="out"] .ict-accessories,
.ict-pdp-container[data-ict-offer-state="quote"] .ict-gifts,
.ict-pdp-container[data-ict-offer-state="out"] .ict-gifts { display: none; }

/* B09: delivery line under the buttons, with "Đặt lịch xem máy ›" (same popup as before). */
.ict-pdp .ict-ship-line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    margin: 12px 0 0;
    color: var(--pdp-ink-2);
}
.ict-pdp .ict-ship-line > svg { width: 18px; height: 18px; color: var(--pdp-ok); }
.ict-pdp .ict-ship-line > a { color: var(--pdp-brand-dark); font-weight: 600; white-space: nowrap; text-decoration: none; }
.ict-pdp .ict-ship-line > a:hover { color: var(--pdp-brand); text-decoration: underline; }

/* B11 / Task ST (owner 28/09 design "Hết hàng"): "Sản phẩm thay thế tham khảo" right under the buttons, inside the buy
   box, when the selected offer is out of stock: a heading row (title | note) and cards 3 a row [56px image | name on
   2 lines, red price]; the whole card is the link (partials/product-design/replacements.blade.php). */
.ict-pdp .ict-replacements:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.ict-pdp .ict-replacements-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ict-pdp .ict-replacements-head > :is(h2, h3) { margin: 0; color: var(--pdp-ink); font-weight: 700; }
.ict-pdp .ict-replacements-note { color: var(--pdp-ink-2); }
.ict-pdp .ict-replacement-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ict-pdp .ict-replacement-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pdp-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ict-pdp .ict-replacement-card:hover { border-color: var(--pdp-line-strong); box-shadow: 0 6px 20px rgba(15, 23, 42, .08); color: var(--pdp-ink); text-decoration: none; }
.ict-pdp .ict-replacement-card > img { display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--pdp-card-2); }
.ict-pdp .ict-replacement-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ict-pdp .ict-replacement-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; }
.ict-pdp .ict-replacement-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ict-pdp .ict-replacement-price { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; }
.ict-pdp .ict-replacement-stock { color: var(--pdp-ok); font-weight: 600; }
.ict-pdp .ict-replacement-stock[data-stock="backorder"] { color: var(--pdp-brand-dark); }
.ict-pdp .ict-replacement-stock[data-stock="out"] { color: var(--pdp-ink-3); }
/* PC cards as the design (name + price); a card that is not in stock still says so ("Hàng đặt trước" / "Tạm hết hàng"). */
@media (min-width: 1024px) {
    .ict-pdp .ict-replacement-stock[data-stock="ok"] { display: none; }
}
/* Verifier 28/09, 1024-1279px (narrow buy box, 470px at 1024): three replacement cards a row were 150px wide with a 62px
   name column. Each card keeps at least 300px here, so the list is one card a row [image | name, price] up to ~1190px
   and two a row above; from 1280px the three a row of the design. Four configuration cards a row were 110px wide and an
   8-digit price ran over the card edge: each card keeps at least 128px (widest price + padding) and there are never more
   than four tracks (a quarter of the row, gaps 3 x 10px), so a sale page shows three a row at 1024 (four cards as 2 x 2
   below 1100px) and four a row again from ~1100px. Rental plan cards keep their own grid (40-rental.css). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .ict-pdp .ict-replacement-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 10px; }
    .ict-pdp:not(.ict-pdp-rental) .ict-variant-grid { grid-template-columns: repeat(auto-fill, minmax(max(146px, calc((100% - 30px) / 4)), 1fr)); }
}
/* 28/09 re-check with the real font (Be Vietnam Pro): "25.500.000đ" is 112px, so a card needs 146px (price + 2 x 14px
   padding + border + slack); measured 129px cards at 1100px overran the padding by 11.7px. Four cards fit a row from a
   614px grid (~1170px viewport); below that four cards read as 2 x 2 instead of 3 + 1. */
@media (min-width: 1024px) and (max-width: 1169.98px) {
    .ict-pdp:not(.ict-pdp-rental) .ict-variant-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* An admin-chosen replacement list of exactly four: 2 x 2 rather than three and a lone card on the second row. */
@media (min-width: 1280px) {
    .ict-pdp .ict-replacement-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* B10: business quote card. */
.ict-pdp .ict-business-contact {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--pdp-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--pdp-ink);
    text-decoration: none;
}
.ict-pdp .ict-business-contact:hover { border-color: var(--pdp-brand); background: var(--pdp-tint-2); }
.ict-pdp .ict-business-contact > .ict-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pdp-tint);
    color: var(--pdp-brand);
}
.ict-pdp .ict-business-contact > .ict-heading-icon svg { width: 20px; height: 20px; }
.ict-pdp .ict-business-contact > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.ict-pdp .ict-business-contact strong { color: var(--pdp-brand-dark); font-weight: 600; }
.ict-pdp .ict-business-contact small { color: var(--pdp-ink-2); }
.ict-pdp .ict-business-contact .ict-business-arrow { display: inline-flex; align-items: center; gap: 2px; color: var(--pdp-brand-dark); font-weight: 700; white-space: nowrap; }
.ict-pdp .ict-business-contact .ict-business-arrow .ict-mobile-label { display: inline; }
.ict-pdp .ict-business-contact .ict-business-arrow svg { width: 16px; height: 16px; }
.ict-pdp .ict-purchase-note { margin: 0; color: var(--pdp-ink-2); }

/* B14: feature summary card (4 lines + "Xem thêm" on phones through the generic expander). */
.ict-pdp .ict-feature-summary {
    margin: 0;
    padding: 16px 20px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pdp-ink);
}
.ict-pdp .ict-feature-summary > :is(h2, h3) { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--pdp-ink); text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-feature-summary > :is(h2, h3) .ict-heading-icon { display: inline-flex; color: var(--pdp-brand); }
.ict-pdp .ict-feature-summary > :is(h2, h3) .ict-heading-icon svg { width: 20px; height: 20px; }
.ict-pdp .ict-feature-summary .ict-feature-name { margin: 0 0 6px; color: var(--pdp-ink); font-weight: 700; }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] { color: var(--pdp-ink); }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] :is(p, li) { margin: 0; }
/* HF 30/09 (owner): lists typed in the product content line up with the text above (the theme reset left ul/ol
   without padding, so the dots hung outside the text column). A bullet list shows the same brand-coloured "–" as
   the typed "– " lines (.ict-feature-bullet), at the text edge, with wrapped lines hanging under the item text;
   a numbered list keeps its numbers inside the card. */
.ict-pdp .ict-feature-summary [data-ict-feature-lines] :is(ul, ol) { margin: 0; }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] ul { padding: 0; list-style: none; }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] ul > li { position: relative; padding-left: 0.9em; list-style: none; }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] ul > li::before { content: "–"; position: absolute; left: 0; color: var(--pdp-brand); }
.ict-pdp .ict-feature-summary [data-ict-feature-lines] ol { padding: 0 0 0 1.4em; list-style: decimal outside; }
.ict-pdp .ict-feature-summary .ict-feature-bullet { color: var(--pdp-brand); }
.ict-pdp .ict-feature-expand { display: none; }

/* T07: rental note under the button row on PC (phones show the same note inside the calculator). */
.ict-pdp .ict-rental-cta-note { margin: 8px 0 0; color: var(--pdp-ink-2); }
@media (max-width: 1023.98px) {
    .ict-pdp .ict-rental-cta-note { display: none; }
}

/* ---- 40-rental.css ---- */
/* 40-rental.css - P2 trang thuê: khối giá, thẻ gói, hộp tính, bậc giá, phần mềm, thuê kèm.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* T02 (price box, deposit line included) is styled by P1 in 20-hero.css. Owner 27/09: the price box says the amount,
   the calculator's refund sentence says it is returned (owner 28/09: "Hoàn đủ tiền cọc khi trả máy đúng điều kiện thuê."). */

/* ---- T03 plan cards (.ict-variant-grid of a rental product) ---- */
.ict-pdp-rental .ict-variant-picker .ict-variant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 10px; align-items: stretch; }
.ict-pdp-rental .ict-variant-picker .ict-variant-grid > li { position: relative; min-width: 0; }
.ict-pdp-rental .ict-variant-card.ict-rental-term-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; height: 100%; min-height: 0; margin: 0; padding: 18px 12px 14px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; box-shadow: none; color: #202733; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ict-pdp-rental .ict-variant-card.ict-rental-term-card:hover { border-color: #CBD5E1; }
.ict-pdp-rental .ict-variant-input:checked + .ict-variant-card.ict-rental-term-card { border-color: #0E7CC0; box-shadow: inset 0 0 0 1px #0E7CC0; background: #F3F9FD; }
.ict-pdp-rental .ict-variant-input:focus-visible + .ict-variant-card.ict-rental-term-card { outline: 2px solid #0E7CC0; outline-offset: 2px; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-check,
.ict-pdp-rental .ict-rental-term-card .ict-variant-old-price { display: none; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-name { display: block; max-width: 100%; margin: 0; padding: 0; color: #202733; font-weight: 600; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.ict-pdp-rental .ict-rental-term-card > strong { display: block; max-width: 100%; margin: 2px 0 0; padding: 0; color: #E00611; font-weight: 800; white-space: normal; }
.ict-pdp-rental .ict-rental-term-card [data-ict-variant-amount] { overflow-wrap: anywhere; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-price-unit { display: inline-block; margin-left: 2px; color: #475569; font-weight: 400; white-space: nowrap; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-approx { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 3px; max-width: 100%; color: #15803D; font-weight: 600; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-approx b { font-weight: 600; white-space: nowrap; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-approx > span { white-space: nowrap; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-tier { display: block; max-width: 100%; margin: 0; padding: 0; color: #0A4EA8; font-weight: 600; }
.ict-pdp-rental .ict-variant-card.ict-rental-term-card .ict-variant-note { display: block; max-width: 100%; margin: 4px 0 0; padding: 0; color: #475569; font-weight: 400; }
.ict-pdp-rental .ict-rental-term-card .ict-variant-badge { position: absolute; top: 0; left: 50%; right: auto; margin: 0; padding: 1px 10px; transform: translate(-50%, -50%); border-radius: 999px; background: #202733; color: #fff; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ict-pdp-rental .ict-rental-term-card .ict-rental-term-badge-saving { background: #15803D; }
.ict-pdp-rental .ict-rental-term-card .ict-rental-term-badge-popular { background: #202733; }

/* ---- T04 calculator box: [data-ict-rental-duration] (steppers moved in by ict-rental-request.js, estimate, chips) ---- */
/* No top margin: the purchase panel (P1) spaces its children with a 20px gap. */
.ict-pdp-rental [data-ict-rental-duration] { margin: 0; padding: 14px 16px; border-radius: 12px; background: #F8FAFC; color: #202733; }
.ict-pdp-rental [data-ict-rental-duration] > * { margin: 0; }
.ict-pdp-rental .ict-rental-control-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0; }
.ict-pdp-rental .ict-rental-control-grid :is(.ict-rental-period-row, .ict-quantity-row),
.ict-pdp-rental [data-ict-rental-duration] > .ict-rental-period-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; min-width: 0; }
.ict-pdp-rental .ict-rental-control-grid label { margin: 0; color: #202733; font-weight: 500; }
.ict-pdp-rental .ict-rental-control-grid .ict-sheet-stock { display: none; }
/* Steppers: PC 40 high (value 44, unit cell 56 on #F4F6F8); the phone sizes are further down (T06). */
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper,
.ict-pdp-rental .ict-rental-control-grid .ict-quantity { display: grid; grid-template-columns: 40px 44px 56px 40px; align-items: stretch; flex: none; width: auto; height: 40px; min-height: 0; margin: 0; padding: 0; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; overflow: hidden; }
.ict-pdp-rental .ict-rental-control-grid .ict-quantity { grid-template-columns: 40px 44px 40px; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) > * + * { border-left: 1px solid #E2E8F0; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) button { display: grid; place-items: center; width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: #fff; color: #202733; opacity: 1; cursor: pointer; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) button:first-child { border-left: 0; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) button:hover:not(:disabled) { background: #F1F5F9; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) button:disabled { background: #fff; color: #CBD5E1; cursor: not-allowed; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) button svg { width: 18px; height: 18px; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) input { width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; box-shadow: none; background: #fff; color: #202733; font-weight: 600; text-align: center; }
.ict-pdp-rental :is([data-ict-rental-duration] .ict-rental-stepper, .ict-rental-control-grid .ict-quantity, .ict-service-stepper) input:focus { outline: 2px solid #0E7CC0; outline-offset: -2px; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper > [data-ict-rental-unit] { display: flex; align-items: center; justify-content: center; padding: 0 2px; background: #F4F6F8; color: #475569; font-weight: 600; white-space: nowrap; }
/* Estimate: "Tạm tính" + total, the formula (with the milestone and the add-ons), then the deposit copy and the chips. */
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > span { display: flex; flex-direction: column; min-width: 0; color: #202733; }
.ict-pdp-rental [data-ict-rental-duration] .ict-estimate-label { color: #475569; }
.ict-pdp-rental [data-ict-rental-duration] .ict-estimate-vat { color: #475569; }
.ict-pdp-rental [data-ict-rental-duration] .ict-calc-lines { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 16px; min-width: 0; }
.ict-pdp-rental [data-ict-rental-duration] [data-ict-rental-calculation] { display: block; min-width: 0; margin: 0; color: #475569; overflow-wrap: anywhere; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > strong { color: #E00611; font-weight: 800; white-space: nowrap; }
/* Owner 28/09: the refund line is one plain sentence (no amount, no link). Regular weight also inside the buy sheet,
   whose Tạm tính row is 600 (ict-type-scale.css); `pretty` keeps a last word from sitting alone on a 360px phone. */
.ict-pdp-rental .ict-calc-deposit { min-width: 0; color: #475569; font-weight: 400; text-wrap: pretty; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-period-note { color: #475569; }
.ict-pdp-rental .ict-rental-request-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; color: #E00611; }
.ict-pdp-rental [data-ict-rental-service-error] { margin: 0 24px 16px; }

/* ---- T05 long-term price chips, rendered into p.ict-rental-tier-ladder by ict-rental-request.js ---- */
.ict-pdp-rental .ict-rental-tier-ladder { display: block; margin: 0; padding: 10px 0 0; border-top: 1px solid #E2E8F0; color: #475569; }
.ict-pdp-rental .ict-term-tiers-title { display: block; color: #475569; }
.ict-pdp-rental .ict-term-tiers-title b { color: #202733; font-weight: 600; }
.ict-pdp-rental .ict-term-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ict-pdp-rental .ict-term-tier { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #E2E8F0; color: #475569; font-weight: 400; white-space: nowrap; }
.ict-pdp-rental .ict-term-tier.is-active { background: #E8F4FB; box-shadow: inset 0 0 0 1px #0E7CC0; color: #0A4EA8; font-weight: 700; }
.ict-pdp-rental .ict-term-saving { display: block; margin-top: 6px; color: #15803D; font-weight: 600; }

/* ---- T08 software: one bordered box, "Đã gồm phần mềm" row and "Thuê thêm phần mềm bản quyền" row ---- */
.ict-pdp .ict-rental-software { margin: 16px 0 0; padding: 0; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; overflow: hidden; }
.ict-pdp .ict-rental-software > details + details { border-top: 1px solid #F1F5F9; }
.ict-pdp .ict-rental-software summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 12px 16px; list-style: none; cursor: pointer; }
.ict-pdp .ict-rental-software summary::-webkit-details-marker { display: none; }
.ict-pdp .ict-rental-software summary:hover { background: #F8FAFC; }
.ict-pdp .ict-rental-software summary:focus-visible { outline: 2px solid #0E7CC0; outline-offset: -2px; }
.ict-pdp .ict-rental-software .ict-software-icon { display: grid; place-items: center; width: 24px; height: 20px; color: #0E7CC0; }
.ict-pdp .ict-rental-software .ict-software-icon svg { width: 18px; height: 18px; }
.ict-pdp .ict-rental-software .ict-software-included-line { min-width: 0; color: #475569; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ict-pdp .ict-rental-software .ict-software-included-line strong,
.ict-pdp .ict-rental-software .ict-software-addon-line strong { color: #202733; font-weight: 600; }
.ict-pdp .ict-rental-software .ict-software-included-box[open] .ict-software-included-names { display: none; }
.ict-pdp .ict-rental-software .ict-software-toggle { display: inline-flex; align-items: center; gap: 4px; color: #0A4EA8; font-weight: 600; white-space: nowrap; }
.ict-pdp .ict-rental-software .ict-software-toggle small { color: inherit; font-weight: inherit; }
.ict-pdp .ict-rental-software .ict-software-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.ict-pdp .ict-rental-software details[open] > summary .ict-software-toggle svg { transform: rotate(180deg); }
.ict-pdp .ict-rental-software .ict-software-included-body { padding: 0 16px 14px 50px; }
.ict-pdp .ict-rental-software .ict-software-included { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ict-pdp .ict-rental-software .ict-software-included li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; margin: 0; color: #202733; }
.ict-pdp .ict-rental-software .ict-software-included li svg { width: 16px; height: 16px; margin-top: 2px; color: #15803D; }
.ict-pdp .ict-rental-software .ict-software-note { display: block; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; color: #475569; }
.ict-pdp .ict-rental-software .ict-software-addon-line { display: flex; flex-direction: column; min-width: 0; }
.ict-pdp .ict-rental-software .ict-software-summary { display: block; min-width: 0; overflow: hidden; color: #475569; text-overflow: ellipsis; white-space: nowrap; }
.ict-pdp .ict-rental-software .ict-software-summary.has-picked .ict-software-names { display: none; }
.ict-pdp .ict-rental-software .ict-software-summary [data-ict-software-picked] { color: #15803D; font-weight: 600; }
.ict-pdp .ict-rental-software .ict-software-summary [data-ict-software-picked]:empty { display: none; }
.ict-pdp .ict-rental-software .ict-software-options { padding: 0 16px 14px; }
.ict-pdp .ict-rental-software .ict-software-options h4 { margin: 12px 0 6px; color: #475569; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-rental-software .ict-software-choice { margin: 0 0 8px; }
.ict-pdp .ict-rental-software .ict-software-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; cursor: pointer; }
.ict-pdp .ict-rental-software .ict-software-option:hover { border-color: #CBD5E1; }
.ict-pdp .ict-rental-software .ict-software-option:has(input:checked) { border-color: #0E7CC0; box-shadow: inset 0 0 0 1px #0E7CC0; background: #F3F9FD; }
.ict-pdp .ict-rental-software .ict-software-option > input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7CC0; }
.ict-pdp .ict-rental-software .ict-software-option > span { min-width: 0; }
.ict-pdp .ict-rental-software .ict-software-option > span strong { display: block; color: #202733; font-weight: 600; }
.ict-pdp .ict-rental-software .ict-software-option > span small { display: block; margin-top: 2px; color: #475569; }
.ict-pdp .ict-rental-software .ict-software-option > b { display: block; color: #E00611; font-weight: 700; text-align: right; white-space: nowrap; }
.ict-pdp .ict-rental-software .ict-software-option > b small { color: #475569; font-weight: 400; }
.ict-pdp .ict-rental-software .ict-software-min { display: block; color: #475569; font-weight: 400; }
.ict-pdp .ict-rental-software .ict-software-choice > .ict-addon-period { margin-top: 6px; }

/* Months of an add-on (software and add-on rows): own field, own line total (L14 unchanged). */
.ict-pdp-rental .ict-addon-period { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #F8FAFC; }
.ict-pdp-rental .ict-addon-period > label { flex: 1; min-width: 0; margin: 0; color: #202733; font-weight: 600; }
.ict-pdp-rental .ict-addon-period > label > small { display: block; color: #475569; font-weight: 400; }
.ict-pdp-rental .ict-addon-period > [data-ict-addon-line-total] { color: #E00611; font-weight: 700; white-space: nowrap; }
.ict-pdp-rental .ict-service-stepper { display: grid; grid-template-columns: 40px 44px 40px; align-items: stretch; flex: none; width: 124px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; overflow: hidden; }

/* ---- T09 rental add-ons (.ict-request-services) ---- */
.ict-pdp-rental .ict-request-services .ict-section-header :is(h2, h3) svg { display: none; }
.ict-pdp-rental .ict-request-services .ict-section-header { display: block; margin: 0; padding: 20px 24px 8px; border: 0; }
.ict-pdp-rental .ict-request-services .ict-section-header :is(h2, h3) { display: block; margin: 0; color: #202733; }
.ict-pdp-rental .ict-request-services .ict-section-header p { margin: 2px 0 0; color: #475569; }
.ict-pdp-rental .ict-request-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 0 24px; }
.ict-pdp-rental .ict-rental-service-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 124px; column-gap: 12px; row-gap: 8px; align-items: center; min-width: 0; margin: 0; padding: 14px 0; border-top: 1px solid #F1F5F9; }
.ict-pdp-rental .ict-service-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #E8F4FB; color: #0E7CC0; }
.ict-pdp-rental .ict-service-icon svg { width: 20px; height: 20px; }
.ict-pdp-rental .ict-rental-service-row.is-selected .ict-service-icon { box-shadow: inset 0 0 0 1px #0E7CC0; }
.ict-pdp-rental .ict-rental-service-info { min-width: 0; }
.ict-pdp-rental .ict-rental-service-info > label { display: block; margin: 0; color: #202733; font-weight: 600; cursor: pointer; }
.ict-pdp-rental .ict-rental-service-info > strong { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; margin-top: 2px; color: #E00611; font-weight: 800; }
.ict-pdp-rental .ict-rental-service-info > strong small { margin: 0; color: #475569; font-weight: 400; }
.ict-pdp-rental .ict-rental-service-info .ict-rental-addon-unavailable { display: block; margin-top: 2px; }
.ict-pdp-rental .ict-service-quantity { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.ict-pdp-rental .ict-service-quantity > span { display: block; color: #475569; text-align: center; }
.ict-pdp-rental .ict-rental-service-row > .ict-addon-period { grid-column: 2 / -1; }
/* HF 29/09: an add-on marked "Liên hệ báo giá" in admin (rental-services / rental-supplies / rental-software): "Liên hệ"
   in the price slot and a contact button (the quote dialog) the size of the stepper it replaces; sizes of text in
   ict-type-scale.css. The caption cell above the button stays empty so the row keeps the height of its neighbours. */
.ict-pdp-rental .ict-rental-service-row.is-quote .ict-rental-service-info > label { cursor: default; }
.ict-pdp .ict-rental-addon-contact { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 124px; height: 40px; margin: 0; padding: 0 10px; border: 1px solid var(--pdp-brand); border-radius: 10px; background: #fff; color: var(--pdp-brand); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ict-pdp .ict-rental-addon-contact:hover,
.ict-pdp .ict-rental-addon-contact:focus-visible { background: var(--pdp-tint); color: var(--pdp-brand-dark); text-decoration: none; }
.ict-pdp .ict-rental-addon-contact svg { flex: none; width: 16px; height: 16px; }
.ict-pdp .ict-rental-software .ict-software-choice.is-quote .ict-software-option { cursor: default; }
.ict-pdp .ict-rental-software .ict-software-choice.is-quote .ict-software-option:hover { border-color: #E2E8F0; }
.ict-pdp .ict-rental-software .ict-rental-addon-contact-link { display: inline-block; margin-top: 2px; color: var(--pdp-brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ict-pdp-rental .ict-request-services .ict-service-more { margin: 8px 16px 0; }
.ict-pdp-rental .ict-request-services-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 24px 24px; padding: 12px 16px; border: 0; border-radius: 10px; background: #F8FAFC; }
.ict-pdp-rental .ict-request-services-footer > div:first-child { min-width: 0; }
.ict-pdp-rental .ict-rental-addon-line { margin: 0; color: #202733; }
.ict-pdp-rental .ict-rental-addon-line .ict-rental-addon-total { display: inline; margin: 0; color: #E00611; font-weight: 800; }
.ict-pdp-rental .ict-request-services-footer small { display: block; margin-top: 2px; color: #475569; }
.ict-pdp-rental .ict-rental-service-actions { display: flex; flex: none; gap: 8px; margin: 0; }
.ict-pdp-rental .ict-rental-service-actions .ict-button { min-height: 44px; padding: 0 16px; border-radius: 10px; }
.ict-pdp-rental .ict-rental-service-actions .ict-button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- T10 "Muốn mua hẳn thiết bị này?" (struck price kept until ICT decides) ---- */
/* M3 reverted (owner 29/09: "quay lại layout cũ"): this card and the B2B card are back in the buy box as before. */
.ict-pdp-rental .ict-rental-buy-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 12px 0 0; padding: 14px 16px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: #202733; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ict-pdp-rental .ict-rental-buy-option:hover { border-color: #CBD5E1; box-shadow: 0 6px 20px rgba(15, 23, 42, .08); color: #202733; }
.ict-pdp-rental .ict-rental-buy-option:focus-visible { outline: 2px solid #0E7CC0; outline-offset: 2px; }
.ict-pdp-rental .ict-buy-option-icon,
.ict-pdp-rental .ict-buy-option-chevron { display: none; }
.ict-pdp-rental .ict-buy-option-copy { min-width: 0; }
.ict-pdp-rental .ict-buy-option-copy strong { display: block; color: #202733; font-weight: 600; }
.ict-pdp-rental .ict-buy-option-copy small { display: block; margin-top: 2px; color: #475569; }
.ict-pdp-rental .ict-buy-option-prices { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ict-pdp-rental .ict-buy-option-prices b { color: #E00611; font-weight: 800; }
.ict-pdp-rental .ict-buy-option-prices del { color: #475569; }

/* ---- T13 terms dialog and the finance dialog: tokens (frame C37 is P1/P5) ---- */
.ict-pdp .ict-terms-sheet dl { margin: 0; border-top: 1px solid #F1F5F9; }
.ict-pdp .ict-terms-sheet dl > div { border-bottom: 1px solid #F1F5F9; }
.ict-pdp .ict-terms-sheet dt { color: #202733; font-weight: 700; }
.ict-pdp .ict-terms-sheet dd { margin: 0; color: #475569; }
.ict-pdp .ict-terms-content > p { color: #475569; }
.ict-pdp .ict-terms-content > p a { color: #0A4EA8; font-weight: 600; }
.ict-pdp .ict-finance-sheet .ict-finance-providers > button[aria-pressed="true"] { border-color: #0E7CC0; box-shadow: inset 0 0 0 1px #0E7CC0; background: #F3F9FD; }
.ict-pdp .ict-finance-sheet [data-ict-finance-request] { background: #0E7CC0; color: #fff; }
.ict-pdp .ict-finance-sheet [data-ict-finance-request]:hover { background: #0A4EA8; }

@media (min-width: 1024px) {
    .ict-pdp-rental .ict-variant-selected-note { display: none; }
    /* M4 (owner 29/09): PC shows each plan's note in its card; it gets the same "Phù hợp:" label as the phone line (CSS
       text, so the plan cards' markup and the note's text for the phone line stay as they are). */
    .ict-pdp-rental .ict-variant-card.ict-rental-term-card .ict-variant-note::before { content: "Phù hợp: "; color: #475569; font-weight: 600; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-period-row > label::after,
    .ict-pdp-rental .ict-rental-control-grid .ict-quantity-row > label[for="ict-product-qty"]::after { content: ":"; }

    /* T04 box: from 1200px row 1 steppers | "Tạm tính", row 2 steppers | total, row 3 formula + deposit, then chips and
       notes. Narrower (the steppers wrap) or without subgrid, the estimate is one row under the steppers. */
    .ict-pdp-rental [data-ict-rental-duration] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin-bottom: 12px; }
    .ict-pdp-rental [data-ict-rental-duration] > * { grid-column: 1 / -1; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate { margin-top: 8px; }
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-tier-ladder { margin-top: 10px; }
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-period-note { margin-top: 8px; }
    .ict-pdp-rental:not([data-ict-rental-quote-required="true"]) [data-ict-rental-duration] > .ict-rental-period-note { display: none; }
    .ict-pdp-rental .ict-rental-control-grid label { white-space: nowrap; }
    @supports (grid-template-rows: subgrid) {
    @media (min-width: 1200px) {
        .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-control-grid,
        .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-period-row { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / span 2; }
        .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate { grid-column: 1 / -1; grid-row: 1 / span 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin-top: 0; }
        .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > span { display: contents; }
        .ict-pdp-rental [data-ict-rental-duration] .ict-estimate-label { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; text-align: right; }
        .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > strong { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
        .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate .ict-calc-lines { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
        .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-tier-ladder { grid-row: 4; }
    }
    }

    .ict-pdp .ict-terms-sheet dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 12px 0; }
    .ict-pdp .ict-terms-sheet .ict-terms-footer { display: flex; justify-content: flex-end; margin-top: 16px; padding: 0; border: 0; background: none; }
    .ict-pdp .ict-terms-sheet .ict-terms-footer button { min-width: 140px; height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: #0E7CC0; color: #fff; font-weight: 700; cursor: pointer; }
    .ict-pdp .ict-terms-sheet .ict-terms-footer button:hover { background: #0A4EA8; }
    .ict-pdp .ict-terms-sheet .ict-terms-footer button:focus-visible { outline: 2px solid #0E7CC0; outline-offset: 2px; }
}

@media (max-width: 1023.98px) {
    /* T03: three cards a row (two under 340px), the unit under the price, the note in the box under the grid. */
    .ict-pdp-rental .ict-variant-picker .ict-variant-grid { gap: 16px 8px; }
    /* The card is a size container: long prices step down in ict-type-scale.css 12.2 (the sheet's cards already are). */
    .ict-pdp-rental .ict-variant-card.ict-rental-term-card { padding: 16px 6px 12px; container-type: inline-size; }
    .ict-pdp-rental .ict-rental-term-card .ict-variant-price-unit { display: block; margin: 0; }
    .ict-pdp-rental .ict-variant-card.ict-rental-term-card .ict-variant-note { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    /* M4 (owner 29/09): "Phù hợp: Sự kiện, hội thảo, thi online" — a 600 grey label instead of the check mark. */
    .ict-pdp-rental .ict-variant-selected-note:not([hidden]) { display: block; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F4F6F8; color: #202733; }
    .ict-pdp-rental .ict-variant-selected-note .ict-variant-note-label { color: #475569; font-weight: 600; }
    @media (max-width: 339.98px) {
        .ict-pdp-rental .ict-variant-picker .ict-variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* T06: each stepper on its own row, label left, stepper right at 200px (period) / 144px (machines), 44 high. The
       estimate is its own grey box; the deposit copy stays in the price box on phones. */
    .ict-pdp-rental [data-ict-rental-duration] { display: flex; flex-direction: column; gap: 12px; padding: 0; border-radius: 0; background: none; }
    /* THU-TU-KHOI (Thuê · mobile): steppers, then the tier chips, then the Tạm tính box and the notes. */
    .ict-pdp-rental [data-ict-rental-duration] > * { order: 4; }
    .ict-pdp-rental [data-ict-rental-duration] > :is(.ict-rental-control-grid, .ict-rental-period-row) { order: 1; }
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-tier-ladder { order: 2; }
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-estimate { order: 3; }
    .ict-pdp-rental .ict-rental-control-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
    .ict-pdp-rental .ict-rental-control-grid :is(.ict-rental-period-row, .ict-quantity-row),
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rental-period-row { justify-content: space-between; gap: 12px; }
    .ict-pdp-rental .ict-rental-control-grid label { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: normal; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper { grid-template-columns: 44px minmax(0, 1fr) 60px 44px; width: 200px; height: 44px; }
    .ict-pdp-rental .ict-rental-control-grid .ict-quantity { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 144px; height: 44px; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate { padding: 12px 14px; border-radius: 12px; background: #F8FAFC; }
    /* Owner 27/09: the refund line stays on phones too (the price box line says the amount, this says it is returned). */
    .ict-pdp-rental .ict-rental-tier-ladder { padding: 12px; border: 0; border-radius: 12px; background: #F8FAFC; }

    /* T08 */
    .ict-pdp .ict-rental-software summary { padding: 12px; }
    .ict-pdp .ict-rental-software .ict-software-included-body { padding: 0 12px 12px 46px; }
    .ict-pdp .ict-rental-software .ict-software-summary { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ict-pdp .ict-rental-software .ict-software-options { padding: 0 12px 12px; }
    .ict-pdp .ict-rental-software .ict-software-option { grid-template-columns: 20px minmax(0, 1fr); }
    .ict-pdp .ict-rental-software .ict-software-option > b { grid-column: 2; margin-top: 4px; text-align: left; white-space: normal; }

    /* T09: one column; four rows then "Xem thêm n dịch vụ" (generic expand); the stepper 44 high. */
    .ict-pdp-rental .ict-request-services .ict-section-header { padding: 16px 16px 4px; }
    .ict-pdp-rental .ict-request-service-grid { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
    .ict-pdp-rental .ict-rental-service-row { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 0; }
    .ict-pdp-rental .ict-service-stepper { grid-template-columns: 44px 36px 44px; height: 44px; }
    .ict-pdp-rental .ict-request-services-footer { flex-direction: column; align-items: stretch; gap: 12px; margin: 8px 16px 16px; }
    .ict-pdp-rental .ict-rental-service-actions .ict-button { width: 100%; }
    .ict-pdp-rental [data-ict-rental-service-error] { margin: 0 16px 14px; }

    /* T10 */
    .ict-pdp-rental .ict-rental-buy-option { column-gap: 12px; padding: 12px 14px; }
}

/* Owner 27/09: on phones the Tạm tính box reads label | total on the first row, then the formula and the
   refund sentence across the full width (the refund line no longer squeezes into the left column). */
@media (max-width: 1023.98px) {
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate { row-gap: 4px; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > span { display: contents; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate .ict-estimate-label { grid-column: 1; grid-row: 1; align-self: center; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate > strong { grid-column: 2; grid-row: 1; align-self: center; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate .ict-calc-lines { grid-column: 1 / -1; grid-row: 2; flex-direction: column; align-items: flex-start; row-gap: 2px; }
    body .ict-pdp.ict-pdp-rental .ict-buy-dialog .ict-rental-estimate .ict-calc-deposit { grid-column: 1 / -1; grid-row: 4; }
}

/* v2 mobile (27/09, M6): the rental blocks on the page. Scoped to [data-ict-purchase-home] where the purchase sheet
   must keep the T06 layout above (the sheet moves .ict-purchase-panel out of that wrapper while it is open). */
@media (max-width: 1023.98px) {
    /* Steppers side by side, the label above each one; the unit sits in the label (small.ict-rental-unit-label,
       rental-duration.blade.php) so the stepper's unit cell goes. */
    .ict-pdp-rental [data-ict-purchase-home] .ict-rental-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
    .ict-pdp-rental [data-ict-purchase-home] .ict-rental-control-grid :is(.ict-rental-period-row, .ict-quantity-row),
    .ict-pdp-rental [data-ict-purchase-home] [data-ict-rental-duration] > .ict-rental-period-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
    .ict-pdp-rental [data-ict-purchase-home] .ict-rental-control-grid label { flex: none; }
    .ict-pdp-rental [data-ict-purchase-home] [data-ict-rental-duration] .ict-rental-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 100%; min-height: 44px; }
    .ict-pdp-rental [data-ict-purchase-home] .ict-rental-control-grid .ict-quantity { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 100%; min-height: 44px; }
    /* Owner 28/09: the value sits centred in the middle cell. style.css fixes `.quantity .qty` at width 28px !important
       (a 28px box at the start of the 1fr cell), so the cell width comes from min-width, which wins over width. */
    .ict-pdp-rental [data-ict-purchase-home] [data-ict-rental-duration] .ict-rental-stepper > input,
    .ict-pdp-rental [data-ict-purchase-home] .ict-rental-control-grid .ict-quantity > input { min-width: 100%; padding: 0; text-align: center; }
    .ict-pdp-rental [data-ict-purchase-home] [data-ict-rental-duration] .ict-rental-stepper > [data-ict-rental-unit] { display: none; }
    .ict-pdp-rental .ict-rental-unit-label { color: #475569; font-weight: 400; }
    /* The sheet keeps its unit cell, so the label there does not repeat the unit. */
    .ict-pdp-rental .ict-buy-dialog .ict-rental-unit-label { display: none; }
    .ict-pdp-rental [data-ict-purchase-home] [data-ict-rental-duration] > .ict-rental-period-note { display: none; }

    /* T08 fused into the configuration card: no box, one ruled row per details, the icon column 18px. */
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-rental-software { margin: -8px 0 0; padding: 0 16px 4px; border: 0; border-radius: 0; background: #fff; overflow: visible; }
    .ict-pdp.ict-pdp-rental .ict-rental-software > details + details { border-top: 0; }
    .ict-pdp.ict-pdp-rental .ict-rental-software summary { grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 0; border-top: 1px solid #F1F5F9; }
    .ict-pdp.ict-pdp-rental .ict-rental-software summary:hover { background: none; }
    .ict-pdp.ict-pdp-rental .ict-rental-software .ict-software-icon { width: 18px; }
    .ict-pdp.ict-pdp-rental .ict-rental-software .ict-software-included-body { padding: 0 0 12px 28px; }
    .ict-pdp.ict-pdp-rental .ict-rental-software .ict-software-options { padding: 0 0 12px; }

    /* T09 add-on rows: 36px icon, name + price, a 120px stepper with no "Số lượng" caption; the footer stays. */
    .ict-pdp-rental .ict-rental-service-row { grid-template-columns: 36px minmax(0, 1fr) 120px; column-gap: 10px; padding: 10px 0; }
    .ict-pdp-rental .ict-service-icon { width: 36px; height: 36px; }
    .ict-pdp-rental .ict-service-icon svg { width: 18px; height: 18px; }
    .ict-pdp-rental .ict-service-quantity > span { display: none; }
    .ict-pdp-rental .ict-service-stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; width: 120px; height: 44px; }
    .ict-pdp-rental .ict-rental-service-row .ict-rental-addon-contact { width: 120px; height: 44px; }

    /* B2B quote + "Muốn mua hẳn" as one white card: each block is full-bleed white and draws its own frame with ::after
       (16px in from the card edge, 12px around the content, 10px between the two frames). The buy option pulls up 8px
       to cancel the container gap; a.ict-business-contact stays a direct child of .ict-buybox (tests). */
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-business-contact { position: relative; margin: 0; padding: 28px 28px 22px; border: 0; border-radius: 0; background: #fff; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-business-contact::after { content: ""; position: absolute; inset: 16px 16px 10px; border: 1px solid #CBD5E1; border-radius: 12px; pointer-events: none; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-business-contact:hover { background: #fff; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-business-contact:hover::after { border-color: #0E7CC0; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-business-contact small { display: none; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-rental-buy-option { position: relative; margin: -8px 0 0; padding: 12px 30px 28px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-rental-buy-option::after { content: ""; position: absolute; inset: 0 16px 16px; border: 1px solid #E2E8F0; border-radius: 12px; pointer-events: none; }
    .ict-pdp.ict-pdp-rental .ict-buybox > .ict-rental-buy-option:hover::after { border-color: #CBD5E1; }
    /* Quote-only rentals hide the B2B card, so the buy option opens its own card. */
    .ict-pdp.ict-pdp-rental .ict-pdp-container[data-ict-offer-state="quote"] .ict-buybox > .ict-rental-buy-option { margin-top: 0; padding-top: 28px; }
    .ict-pdp.ict-pdp-rental .ict-pdp-container[data-ict-offer-state="quote"] .ict-buybox > .ict-rental-buy-option::after { top: 16px; }
}

/* ---- 45-rental-types.css ---- */
/* 45-rental-types.css - trang thuê theo loại (28/09, artifacts/rental-types-2809; P1: máy in, README §5.2; P2: máy photo, §5.1).
   Scope: products whose rental profile has its own page (App\Support\RentalTypePage) carry
   div.ict-pdp-container[data-ict-rental-type]; every other rental (laptop, PC, iPad…) never matches a rule here.
   Parts that leave the container (the purchase panel moves into the phone sheet, the bottom bar is its sibling) are
   reached through main:has(> .ict-pdp-container[data-ict-rental-type]).
   Rules: no !important, no font-size/line-height (sizes: artifacts/rental-types-2809/type-scale-p1-snippet.css and
   type-scale-p2-snippet.css, pasted into ict-type-scale.css), mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* ---- Plan cards "Chọn hình thức thuê": one row of N cards on PC (4 = ngày / tuần / tháng / năm) ---- */
.ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-picker .ict-variant-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px 10px; }
.ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-card.ict-rental-term-card { padding: 16px 10px 12px; }
.ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-card.ict-rental-term-card .ict-variant-note { padding-top: 4px; margin-top: 0; text-wrap: balance; }

/* ---- Note under the delivery line: "Vật tư mua kèm tính một lần…" with the info icon (PC; phones hide the note) ---- */
.ict-pdp .ict-rental-cta-note.ict-rt-note > svg { width: 18px; height: 18px; color: var(--pdp-ink-3); }

/* ---- "Đã gồm …" + "Mua kèm vật tư" (rental-supplies.blade.php): PC = bordered box in the buy card ---- */
.ict-pdp .ict-rt-supplies { display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--pdp-line); border-radius: 12px; background: #fff; color: var(--pdp-ink); }
.ict-pdp .ict-rt-included { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 14px 16px; color: var(--pdp-ink); }
.ict-pdp .ict-rt-included > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--pdp-brand); }
.ict-pdp .ict-rt-included b { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-supplies-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 14px 16px 4px; }
.ict-pdp .ict-rt-included + .ict-rt-supplies-head { border-top: 1px solid var(--pdp-line-soft); }
.ict-pdp .ict-rt-supplies-head > :is(h2, h3) { margin: 0; padding: 0; color: var(--pdp-ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-rt-supplies-status { color: var(--pdp-ink-2); font-weight: 600; }
.ict-pdp .ict-rt-supplies-status.is-picked { color: var(--pdp-ok); }
.ict-pdp .ict-rt-supply-list { display: flex; flex-direction: column; margin: 0; padding: 0 0 6px; }
/* Row: 40px image slot | name over description | price | stepper. One price node; phones move it under the name. */
.ict-pdp .ict-rt-supply {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas: "icon name price step" "icon desc price step";
    column-gap: 12px;
    align-items: center;
    margin: 0;
    padding: 10px 16px;
}
.ict-pdp .ict-rt-supply-icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--pdp-tint); color: var(--pdp-brand); }
.ict-pdp .ict-rt-supply-icon svg { width: 20px; height: 20px; }
.ict-pdp .ict-rt-supply-name { grid-area: name; align-self: end; min-width: 0; margin: 0; color: var(--pdp-ink); font-weight: 600; cursor: pointer; }
.ict-pdp .ict-rt-supply-desc { grid-area: desc; align-self: start; min-width: 0; color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-supply:not(:has(.ict-rt-supply-desc)) .ict-rt-supply-name { grid-row: 1 / span 2; align-self: center; }
.ict-pdp .ict-rt-supply-price { grid-area: price; display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.ict-pdp .ict-rt-supply-price b { color: var(--pdp-price); font-weight: 800; }
.ict-pdp .ict-rt-supply-price small { color: var(--pdp-ink-2); font-weight: 400; }
.ict-pdp .ict-rt-supply-unavailable { grid-column: 2 / -1; margin-top: 4px; color: var(--pdp-ink-2); }
/* Stepper (shares the rental stepper rules of 40-rental.css): PC 40 high, 40 | 40 | 40. */
.ict-pdp-rental .ict-rt-supply .ict-rt-supply-stepper { grid-area: step; grid-template-columns: 40px 40px 40px; width: 120px; height: 40px; }
/* HF 29/09: a supply marked "Liên hệ báo giá" in admin: the contact button (40-rental.css) in the stepper's cell. */
.ict-pdp-rental .ict-rt-supply .ict-rt-supply-contact { grid-area: step; width: 120px; height: 40px; }
.ict-pdp .ict-rt-supply.is-quote .ict-rt-supply-name { cursor: default; }

/* ---- Blocks under the hero (rental-type-blocks.blade.php): two cards side by side on PC ---- */
.ict-pdp .ict-rt-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 0 0 16px; }
.ict-pdp .ict-rt-block { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 20px 24px; border: 0; border-radius: 16px; background: #fff; color: var(--pdp-ink); }
.ict-pdp .ict-rt-block > :is(h2, h3) { margin: 0; padding: 0; color: var(--pdp-ink); font-weight: 700; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.ict-pdp .ict-rt-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ict-pdp .ict-rt-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 0; }
.ict-pdp .ict-rt-steps > li::before,
.ict-pdp .ict-rt-steps > li::marker { content: none; }
.ict-pdp .ict-rt-step-number { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--pdp-tint); color: var(--pdp-brand-dark); font-weight: 700; text-align: center; }
.ict-pdp .ict-rt-step-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ict-pdp .ict-rt-step-copy > strong { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-step-copy > span { color: var(--pdp-ink-2); }

/* Four cards in one row need ~170px each for "1.000.000đ/tháng" (buy box ≥ ~790px, viewport ≥ 1366). Narrower PC
   widths: the unit goes under the price (1200-1365), then two cards a row (1024-1199, cards ~120px would split prices). */
@media (min-width: 1024px) and (max-width: 1365.98px) {
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-rental-term-card .ict-variant-price-unit { display: block; margin-left: 0; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-picker .ict-variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-rental-term-card .ict-variant-price-unit { display: inline-block; margin-left: 2px; }
}

@media (min-width: 1024px) {
    /* The note reads [icon | sentence] like the delivery line above it. */
    .ict-pdp .ict-rental-cta-note.ict-rt-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
    .ict-pdp .ict-rental-cta-note.ict-rt-note > svg { margin-top: 1px; }
}

@media (max-width: 1023.98px) {
    .ict-pdp .ict-rt-pc { display: none; }

    /* Plan cards 2 × 2 (design §5.2 phone); the selected card's note sits under the grid ("Theo ngày: …"). */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-picker .ict-variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 18px 8px; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-variant-card.ict-rental-term-card { padding: 16px 8px 12px; }
    /* Two cards a row leave room for "450.000đ/tháng" on one line (the laptop's three narrow cards stack the unit). */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-rental-term-card .ict-variant-price-unit { display: inline-block; margin-left: 2px; }

    /* "Mua kèm vật tư": its own white block right after the calculator (THU-TU-KHOI order 3, after the purchase card in
       the DOM); heading row first, then "Đã gồm …", then the rows [40 | name + price | stepper 132×44]. */
    .ict-pdp-rental .ict-buybox > .ict-rt-supplies { order: 3; gap: 12px; margin: 0; padding: 16px; border: 0; border-radius: 0; }
    .ict-pdp .ict-rt-supplies-head { order: -1; flex-wrap: nowrap; gap: 12px; padding: 0; }
    .ict-pdp .ict-rt-included + .ict-rt-supplies-head { border-top: 0; }
    .ict-pdp .ict-rt-supplies-status { flex: none; text-align: right; }
    .ict-pdp .ict-rt-included { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 0; color: var(--pdp-ink-2); }
    .ict-pdp .ict-rt-supply-list { gap: 12px; padding: 0; }
    .ict-pdp .ict-rt-supply {
        grid-template-columns: 40px minmax(0, 1fr) 132px;
        grid-template-areas: "icon name step" "icon price step";
        padding: 12px 0 0;
        border-top: 1px solid var(--pdp-line-soft);
    }
    .ict-pdp .ict-rt-supply-desc { display: none; }
    .ict-pdp .ict-rt-supply:not(:has(.ict-rt-supply-desc)) .ict-rt-supply-name { grid-row: auto; align-self: end; }
    .ict-pdp .ict-rt-supply-price { align-self: start; }
    .ict-pdp .ict-rt-supply-unavailable { grid-column: 2 / -1; }
    .ict-pdp-rental .ict-rt-supply .ict-rt-supply-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 132px; height: 44px; }
    .ict-pdp-rental .ict-rt-supply .ict-rt-supply-contact { width: 132px; height: 44px; }

    /* Blocks under the hero: stacked full-width white blocks after the supplies (order 5, before B2B at 7). */
    .ict-pdp-rental > .ict-pdp-container > .ict-rt-blocks { order: 5; display: flex; flex-direction: column; gap: 8px; margin: 0; }
    .ict-pdp .ict-rt-block { gap: 12px; padding: 16px; border-radius: 0; }

    /* Bottom bar of a type page: [Liên hệ] [Thêm vào giỏ] [THUÊ NGAY + total] (laptop keeps [Liên hệ] [Đặt lịch xem máy]
       [THUÊ NGAY]). Only in the "ok" state: quote / out / backorder keep the bars of 60-sticky.css. */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-buybar[data-ict-offer-state="ok"] .ict-sticky-add { display: flex; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) .ict-buybar .ict-buybar-visit { display: none; }
}

/* ==== P2 photocopier (28/09, README §5.1). Container flag: [data-ict-rental-type="photocopier"]; a model with its own print
   packages also carries [data-ict-rt-packages] (RentalTypePage::for(), product.blade.php). Sizes: type-scale-p2-snippet.css. ==== */

/* ---- Price frame: the picked package's price "800.000đ /tháng · gồm 3.000 bản" replaces the offer price node, which
   stays in the DOM (audited, JSON-LD twin; same amount as the default package after the admin sync). ---- */
.ict-pdp-rental:has(> .ict-pdp-container[data-ict-rt-packages]) .ict-price-line > :is(#product-price-main, del, .ict-price-unit, .ict-discount-badge) { display: none; }
.ict-pdp .ict-price-line > .ict-rt-package-price-main { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ict-pdp .ict-price-line > .ict-rt-package-unit { color: var(--pdp-ink-2); font-weight: 600; }
/* P2e (owner 29/09): a rental whose contract starts above one month and has long-term prices (Ricoh MP 3055) states the price
   at that minimum, "từ 1.400.000đ /tháng" ([data-ict-rt-from], product.blade.php), in the package frame's classes and
   sizes; the offer price node stays in the DOM (audited, cart twin) exactly as on a package page. */
.ict-pdp-rental:has(> .ict-pdp-container[data-ict-rt-from]) .ict-price-line > :is(#product-price-main, del, .ict-price-unit, .ict-discount-badge) { display: none; }
/* "Hợp đồng tối thiểu: 6 tháng" under the tax line (same row style as the tax / deposit lines, 20-hero.css). */
.ict-pdp .ict-price-box > .ict-rt-term-line { order: 6; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--pdp-ink-2); }
.ict-pdp .ict-price-box > .ict-rt-term-line > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--pdp-brand); }
.ict-pdp .ict-price-box > .ict-rt-term-line b { color: var(--pdp-ink); font-weight: 700; }
.ict-pdp .ict-price-box > .ict-rt-term-line .ict-rt-term-link { color: var(--pdp-brand-dark); font-weight: 600; white-space: nowrap; text-decoration: none; }

/* ---- "Chọn gói bản in": three cards (design §4 item 4: selected = brand border + 1px inset + tint). ---- */
.ict-pdp .ict-rt-packages { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; outline: 0; }
.ict-pdp .ict-rt-packages-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ict-pdp .ict-rt-packages-head > :is(h2, h3) { margin: 0; padding: 0; color: var(--pdp-ink); font-weight: 700; text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-rt-packages-head > span { color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding-top: 10px; }
.ict-pdp .ict-rt-package {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 16px 12px 12px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: var(--pdp-ink);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.ict-pdp .ict-rt-package:hover { border-color: var(--pdp-line-strong); }
.ict-pdp .ict-rt-package.is-selected { border-color: var(--pdp-brand); box-shadow: inset 0 0 0 1px var(--pdp-brand); background: var(--pdp-tint-2); }
.ict-pdp .ict-rt-package:focus-visible { outline: 2px solid var(--pdp-brand); outline-offset: 2px; }
.ict-pdp .ict-rt-package:disabled { cursor: not-allowed; }
.ict-pdp .ict-rt-package-badge { position: absolute; top: 0; left: 50%; padding: 1px 9px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--pdp-ink); color: #fff; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ict-pdp .ict-rt-package-name { max-width: 100%; color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-package-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px; }
.ict-pdp .ict-rt-package-price > b { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ict-pdp .ict-rt-package-price > small { color: var(--pdp-ink-2); font-weight: 400; }
.ict-pdp .ict-rt-package-quota { color: var(--pdp-ink); font-weight: 700; }
.ict-pdp .ict-rt-package-over { padding-top: 2px; color: var(--pdp-ink-2); }
/* P2c (29/09): 2–4 cards. Four in one row from 1280px (cards ~157px: the price and "/tháng" may take two lines), 2 × 2
   below it (1024–1279 and phones, rule further down); two cards share the row. */
.ict-pdp .ict-rt-package-grid[data-ict-package-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ict-pdp .ict-rt-package-grid[data-ict-package-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ict-pdp .ict-rt-package-grid[data-ict-package-count="4"] .ict-rt-package { padding-right: 8px; padding-left: 8px; }
/* Colour model: "1.000 trắng đen + 1.500 màu" breaks only between its two parts; one overage line per kind. */
.ict-pdp .ict-rt-package-quota > .ict-rt-package-part { white-space: nowrap; }
.ict-pdp .ict-rt-package-over > .ict-rt-package-part { display: block; }

/* ---- Calculator additions: "Tạm tính 6 tháng", the minimum line (warning 600 ink), the overage estimate. ---- */
.ict-pdp-rental [data-ict-rental-duration] .ict-calc-min { color: var(--pdp-ink-2); font-weight: 400; }
.ict-pdp-rental [data-ict-rental-duration] .ict-calc-min.is-warning { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp-rental .ict-rental-period-row > label > .ict-calc-min { display: block; }
/* "−" at the contract minimum stays pressable to explain the minimum (ict-rental-request.js): drawn like a disabled one. */
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper > button[aria-disabled="true"] { color: var(--pdp-line-strong); cursor: default; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper > button[aria-disabled="true"]:hover { background: #fff; }
.ict-pdp-rental [data-ict-rental-duration] > .ict-rt-estimator { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pdp-line); }
.ict-pdp .ict-rt-estimator-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ict-pdp .ict-rt-estimator-copy { display: flex; flex-direction: column; min-width: 0; }
.ict-pdp .ict-rt-estimator-copy > label { margin: 0; color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-estimator-copy > small { color: var(--pdp-ink-2); }
.ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper.ict-rt-pages-stepper { grid-template-columns: 40px 64px auto 40px; }
.ict-pdp-rental [data-ict-rental-duration] .ict-rt-pages-stepper > .ict-rt-pages-unit { align-items: center; justify-content: center; padding: 0 10px; background: var(--pdp-bg); color: var(--pdp-ink-2); font-weight: 600; white-space: nowrap; }
.ict-pdp .ict-rt-estimate-result { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; color: var(--pdp-ink); }
.ict-pdp .ict-rt-estimate-result > svg { width: 18px; height: 18px; margin-top: 1px; }
.ict-pdp .ict-rt-estimate-result > .ict-rt-icon-within { color: var(--pdp-ok); }
.ict-pdp .ict-rt-estimate-result > .ict-rt-icon-over { color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-estimate-result.is-over > .ict-rt-icon-within,
.ict-pdp .ict-rt-estimate-result:not(.is-over) > .ict-rt-icon-over { display: none; }
.ict-pdp .ict-rt-estimate-hint:not([hidden]) { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--pdp-line); border-radius: 10px; background: #fff; color: var(--pdp-ink); }
.ict-pdp .ict-rt-estimate-hint > svg { width: 18px; height: 18px; color: var(--pdp-brand); }
.ict-pdp .ict-rt-estimate-hint > .ict-rt-hint-pick { margin: 0; padding: 0; border: 0; background: none; color: var(--pdp-brand-dark); font-family: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ict-pdp .ict-rt-estimate-hint > .ict-rt-hint-pick:hover { color: var(--pdp-brand); text-decoration: underline; }
.ict-pdp .ict-rt-estimate-hint > .ict-rt-hint-pick:focus-visible { outline: 2px solid var(--pdp-brand); outline-offset: 2px; border-radius: 4px; }
/* P2c colour model: the title + note on top, then one row per counter ("Bản trắng đen …" / "Bản màu dự kiến/tháng"). */
.ict-pdp .ict-rt-estimator-head { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ict-pdp .ict-rt-estimator-title { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-estimator-head > small { color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-estimator-row > .ict-rt-estimator-label { min-width: 0; margin: 0; color: var(--pdp-ink); font-weight: 500; }

/* ---- "Đã gồm / Chưa gồm" (rental-inclusions.blade.php): PC = bordered box in the buy card (two rows). ---- */
.ict-pdp .ict-rt-inclusions { margin: 0; padding: 0; border: 1px solid var(--pdp-line); border-radius: 12px; background: #fff; color: var(--pdp-ink); }
.ict-pdp .ict-rt-inclusion { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 14px 16px; }
.ict-pdp .ict-rt-inclusion + .ict-rt-inclusion { border-top: 1px solid var(--pdp-line-soft); }
.ict-pdp .ict-rt-inclusion.is-excluded { color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-inclusions svg { width: 18px; height: 18px; margin-top: 1px; }
.ict-pdp .ict-rt-inclusions .ict-rt-inclusion-yes { color: var(--pdp-ok); }
.ict-pdp .ict-rt-inclusions .ict-rt-inclusion-no { color: var(--pdp-ink-3); }
.ict-pdp .ict-rt-inclusion b { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-rt-inclusions :is(h2, h3) { margin: 0; padding: 0; color: var(--pdp-ink); font-weight: 700; text-transform: none; letter-spacing: 0; }
.ict-pdp .ict-rt-inclusion-list { display: grid; row-gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ict-pdp .ict-rt-inclusion-list > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; padding: 0; }
.ict-pdp .ict-rt-inclusion-list > li::before,
.ict-pdp .ict-rt-inclusion-list > li::marker { content: none; }
.ict-pdp .ict-rt-inclusion-list > li.is-excluded { color: var(--pdp-ink-2); }

/* ---- Blocks: "Bảng giá gói thuê máy photo" across both columns, a row picks its package; the example box. ---- */
.ict-pdp .ict-rt-blocks > .ict-rt-price-table-block { grid-column: 1 / -1; }
.ict-pdp .ict-rt-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ict-pdp .ict-rt-block-head > :is(h2, h3) { margin: 0; padding: 0; color: var(--pdp-ink); font-weight: 700; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.ict-pdp .ict-rt-block-head > span { color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-price-table { display: flex; flex-direction: column; border: 1px solid var(--pdp-line); border-radius: 12px; overflow: hidden; }
.ict-pdp .ict-rt-price-head,
.ict-pdp .ict-rt-price-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; }
.ict-pdp .ict-rt-price-head { background: var(--pdp-card-2); color: var(--pdp-ink-2); font-weight: 700; }
.ict-pdp .ict-rt-price-head > span,
.ict-pdp .ict-rt-price-row > span { min-width: 0; padding: 12px 16px; }
.ict-pdp .ict-rt-price-row { width: 100%; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--pdp-line-soft); border-radius: 0; background: #fff; color: var(--pdp-ink); font-family: inherit; text-align: left; cursor: pointer; }
.ict-pdp .ict-rt-price-row:hover { background: var(--pdp-card-2); }
.ict-pdp .ict-rt-price-row.is-selected { background: var(--pdp-tint-2); }
.ict-pdp .ict-rt-price-row:focus-visible { outline: 2px solid var(--pdp-brand); outline-offset: -2px; }
.ict-pdp .ict-rt-price-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.ict-pdp .ict-rt-price-chip:not([hidden]) { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--pdp-tint); color: var(--pdp-brand-dark); font-weight: 600; }
.ict-pdp .ict-rt-price-amount { color: var(--pdp-price); font-weight: 700; font-variant-numeric: tabular-nums; }
.ict-pdp .ict-rt-price-note { margin: 0; color: var(--pdp-ink-2); }
.ict-pdp .ict-rt-example { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--pdp-card-2); color: var(--pdp-ink-2); }
/* A page with one step block (photocopier without packages) gives it the full width. */
.ict-pdp .ict-rt-blocks > .ict-rt-block:only-child { grid-column: 1 / -1; }

/* P2c: below 1280px four cards go 2 × 2 (PC and phones), and a colour model's cards become full-width rows
   [name / quota / overage | price]: its two quotas and two overages do not fit a third of the narrow buy box. */
@media (max-width: 1279.98px) {
    .ict-pdp .ict-rt-package-grid[data-ict-package-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ict-pdp .ict-rt-package-grid.is-color { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .ict-pdp .ict-rt-package-grid.is-color > .ict-rt-package {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name price" "quota price" "over over";
        column-gap: 12px;
        row-gap: 2px;
        align-items: start;
        justify-items: start;
        padding: 14px 14px 12px;
        text-align: left;
    }
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-badge { left: 14px; transform: translateY(-50%); }
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-name { grid-area: name; }
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-price { grid-area: price; flex-direction: column; align-items: flex-end; justify-self: end; gap: 0; }
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-quota { grid-area: quota; }
    /* The two overage lines share a line when they fit ("Vượt 150đ/bản trắng đen   Vượt 1.000đ/bản màu"), else each
       starts its own line. */
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-over { grid-area: over; display: flex; flex-wrap: wrap; column-gap: 12px; padding-top: 2px; }
    .ict-pdp .ict-rt-package-grid.is-color .ict-rt-package-over > .ict-rt-package-part { white-space: nowrap; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
    /* Narrow PC buy box (~470px): the suggestion's "Chọn gói … ›" goes under its sentence, like on phones. */
    .ict-pdp .ict-rt-estimate-hint:not([hidden]) { grid-template-columns: 18px minmax(0, 1fr); row-gap: 4px; }
    .ict-pdp .ict-rt-estimate-hint > .ict-rt-hint-pick { grid-column: 2; justify-self: start; }
}

@media (min-width: 1024px) {
    /* The estimator's "bản/tháng" cell (PC only: span.ict-rt-pc, hidden on phones). */
    .ict-pdp-rental [data-ict-rental-duration] .ict-rt-pages-stepper > .ict-rt-pages-unit { display: flex; }
    /* "Đặt lịch khảo sát" (visit form of a photocopier page, rental-survey-fields.blade.php): address | pages, like the
       two rental quote fields (ict-product-contact.css); phones stack them. */
    .ict-pdp .ict-quote-survey:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    /* P2c colour model: the address takes the whole row, the two page counts share the next one (inputs aligned at the
       bottom when a label takes two lines). */
    .ict-pdp .ict-quote-survey.is-color:not([hidden]) { align-items: end; }
    .ict-pdp .ict-quote-survey.is-color > :first-child { grid-column: 1 / -1; }
    /* P2c colour price table: Gói | Định mức trắng đen | Định mức màu | Giá | Phí vượt trắng đen | Phí vượt màu. */
    .ict-pdp .ict-rt-price-table.is-color > :is(.ict-rt-price-head, .ict-rt-price-row) { grid-template-columns: minmax(0, 1.75fr) repeat(5, minmax(0, 1fr)); }
    .ict-pdp .ict-rt-price-table.is-color > :is(.ict-rt-price-head, .ict-rt-price-row) > span { padding-right: 12px; padding-left: 12px; }
    .ict-pdp .ict-rt-price-table.is-color > :is(.ict-rt-price-head, .ict-rt-price-row) > span:first-child { padding-left: 16px; }
}

@media (max-width: 1023.98px) {
    /* Price frame: "Điều khoản thuê ›" ends the minimum line (design §5.1 mobile), so the price row's link goes. */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) .ict-price-box .ict-price-service-link { display: none; }

    /* Package cards: its own white block after the price frame (like the plan cards), name without "Gói", the price over
       "/tháng", 6px side padding; the note under the grid. */
    .ict-pdp [data-ict-purchase-home] .ict-rt-packages { gap: 12px; padding: 16px 16px 12px; border-top: 8px solid var(--pdp-bg); background: #fff; }
    /* In the purchase sheet (ict-rental-request.css flattens the panel with display:contents, every part order 4) the
       cards open the sheet like the plan cards (order 0), above the steppers; its "Tạm tính" keeps the plain label. */
    .ict-pdp.ict-pdp-rental .ict-buy-dialog .ict-purchase-panel > .ict-rt-packages { order: 0; gap: 12px; padding: 16px 16px 0; margin: 0 0 20px; }
    .ict-pdp.ict-pdp-rental .ict-buy-dialog .ict-rental-estimate .ict-estimate-term { display: none; }
    .ict-pdp .ict-rt-package-grid { gap: 16px 8px; }
    .ict-pdp .ict-rt-package { padding: 16px 6px 12px; }
    .ict-pdp .ict-rt-package-badge { padding: 1px 8px; }
    .ict-pdp .ict-rt-package-name { text-wrap: balance; }
    .ict-pdp .ict-rt-package-price { flex-direction: column; align-items: center; gap: 0; }
    .ict-pdp .ict-rt-package-over { padding-top: 0; }
    .ict-pdp .ict-rt-package-note:not([hidden]) { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--pdp-bg); color: var(--pdp-ink); }
    .ict-pdp .ict-rt-package-note > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--pdp-brand); }
    /* A photocopier without packages: the calculator block opens the configuration card itself. */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type]) [data-ict-purchase-home] .ict-variant-picker[hidden] + .ict-order-controls { padding-top: 16px; border-top: 8px solid var(--pdp-bg); }

    /* Calculator rows (design §5.1 mobile): label (+ the minimum line) left, stepper right — 200px with the unit cell
       for the term, 144px for the machines — instead of the side-by-side steppers of the other rental pages. */
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] .ict-rental-control-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] .ict-rental-control-grid :is(.ict-rental-period-row, .ict-quantity-row) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] .ict-rental-control-grid label { flex: 1 1 auto; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] [data-ict-rental-duration] .ict-rental-period-row .ict-rental-stepper { grid-template-columns: 44px minmax(0, 1fr) 60px 44px; flex: none; width: 200px; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] [data-ict-rental-duration] .ict-rental-period-row .ict-rental-stepper > [data-ict-rental-unit] { display: flex; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) [data-ict-purchase-home] .ict-rental-control-grid .ict-quantity { flex: none; width: 144px; }
    .ict-pdp-rental:has(> .ict-pdp-container[data-ict-rental-type="photocopier"]) .ict-rental-unit-label { display: none; }
    .ict-pdp-rental .ict-rental-period-row > label > .ict-calc-min { margin-top: 0; font-weight: 400; }
    .ict-pdp-rental .ict-rental-period-row > label > .ict-calc-min.is-warning { font-weight: 600; }
    /* The minimum line lives under the term label on phones; the formula row keeps the formula only. */
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-estimate .ict-calc-min { display: none; }

    /* Overage estimate: its own grey box between the steppers and "Tạm tính" (order 2; photocopiers have no tier chips),
       stepper 176×44 without the unit cell. Not in the purchase sheet (the sheet confirms the rental, the page estimates). */
    .ict-pdp-rental [data-ict-rental-duration] > .ict-rt-estimator { order: 2; gap: 10px; margin-top: 0; padding: 12px; border-top: 0; border-radius: 12px; background: var(--pdp-card-2); }
    .ict-pdp .ict-buy-dialog .ict-rt-estimator { display: none; }
    .ict-pdp .ict-rt-estimator-row { gap: 12px; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper.ict-rt-pages-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; flex: none; width: 176px; height: 44px; }
    .ict-pdp-rental [data-ict-rental-duration] .ict-rental-stepper.ict-rt-pages-stepper > input { min-width: 100%; padding: 0; text-align: center; }
    .ict-pdp .ict-rt-estimate-hint:not([hidden]) { grid-template-columns: 18px minmax(0, 1fr); row-gap: 4px; }
    .ict-pdp .ict-rt-estimate-hint > .ict-rt-hint-pick { grid-column: 2; justify-self: start; padding: 6px 0; white-space: normal; text-align: left; }

    /* "Giá thuê đã gồm": its own white block right after the calculator (THU-TU-KHOI order 3, after the purchase card). */
    .ict-pdp-rental .ict-buybox > .ict-rt-inclusions { order: 3; padding: 16px; border: 0; border-radius: 0; }

    /* Price table: two columns, "Gói · định mức · phí vượt" | "Giá/tháng"; no "Đang chọn" chip (the row tint says it). */
    .ict-pdp .ict-rt-block-head > span { display: none; }
    .ict-pdp .ict-rt-price-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; }
    .ict-pdp .ict-rt-price-head > span { padding: 0; }
    .ict-pdp .ict-rt-price-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px; }
    .ict-pdp .ict-rt-price-row > span { padding: 0; }
    .ict-pdp .ict-rt-price-name { flex-direction: column; align-items: flex-start; gap: 0; }
    .ict-pdp .ict-rt-price-name > small { color: var(--pdp-ink-2); font-weight: 400; }
    .ict-pdp .ict-rt-price-chip:not([hidden]) { display: none; }
    .ict-pdp .ict-rt-price-amount { font-weight: 800; white-space: nowrap; }
}

/* ---- 50-sections.css ---- */
/* 50-sections.css - P4 dưới hero: mua kèm, cam kết, thông số, so sánh, bài viết, vì sao, đánh giá, hỏi đáp, tương tự, logo.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px).
   The page container, the gaps between cards and the phone block order belong to 10-base/70-mobile (integrator);
   this file styles the inside of each section. Legacy rules for these sections were pruned from ict-product-design.css,
   ict-review-20260918.css and ict-readability.css (pruned-rules.json, note "P4: ..."). */

/* ---- Shared: card padding, section head, "Xem thêm" button, empty states ---------------------------------------- */
.ict-pdp .ict-specs-section,
.ict-pdp #overview,
.ict-pdp .ict-reviews,
.ict-pdp .ict-questions,
.ict-pdp .ict-compare-products,
.ict-pdp .ict-related-section,
.ict-pdp .ict-customer-logos,
.ict-pdp .ict-accessories,
.ict-pdp .ict-process,
.ict-pdp .ict-projects {
    padding: 20px 24px 24px;
    background: #fff;
}

.ict-pdp .ict-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-section-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ict-pdp .ict-section-head :is(h2, h3) {
    margin: 0;
    color: #202733;
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: pretty;
}

.ict-pdp .ict-section-head p {
    margin: 4px 0 0;
    color: #475569;
}

.ict-pdp .ict-section-head .ict-section-kicker {
    margin: 0 0 4px;
    color: #0E7CC0;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ict-pdp .ict-more-button:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 16px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 600;
    cursor: pointer;
}

.ict-pdp .ict-more-button:hover {
    background: #F8FAFC;
}

.ict-pdp .ict-more-button:focus-visible,
.ict-pdp .ict-copy-specs:focus-visible,
.ict-pdp .ict-spec-sku-copy:focus-visible,
.ict-pdp .ict-review-write-button:focus-visible,
.ict-pdp .ict-question-send:focus-visible,
.ict-pdp .ict-accessories-footer > button:focus-visible,
.ict-pdp #overview .ict-expand-button:focus-visible {
    outline: 2px solid #0E7CC0;
    outline-offset: 2px;
}

/* [data-ict-expand] buttons get their chevron from the shared ::after in ict-product-design.css (rotates when open). */

.ict-pdp .ict-review-empty-state,
.ict-pdp .ict-question-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    text-align: left;
}

.ict-pdp .ict-empty-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #E8F4FB;
    color: #0E7CC0;
}

.ict-pdp .ict-empty-icon svg {
    width: 24px;
    height: 24px;
}

.ict-pdp .ict-empty-icon-star {
    background: #FFF4E6;
    color: #FFB01F;
}

.ict-pdp .ict-review-empty-state p,
.ict-pdp .ict-question-empty-state p {
    margin: 0;
}

.ict-pdp .ict-review-empty-state strong,
.ict-pdp .ict-question-empty-state strong {
    display: block;
    color: #202733;
    font-weight: 600;
}

.ict-pdp .ict-review-empty-state p > span,
.ict-pdp .ict-question-empty-state p > span {
    display: block;
    margin-top: 2px;
    color: #475569;
}

/* ---- B16 Mua kèm theo ------------------------------------------------------------------------------------------ */
.ict-pdp .ict-accessories .ict-accessory-table {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
}

.ict-pdp .ict-accessories .ict-accessory-table > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    padding: 0;
}

.ict-pdp .ict-accessories tr.attach-box-item {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid #F1F5F9;
    background: none;
}

.ict-pdp .ict-accessories tr.attach-box-item > td {
    padding: 0;
    border: 0;
    min-width: 0;
}

/* style.css forces `.bought-together table td { display: table-cell !important }` (blockified inside the grid), so the
   check box and the thumbnail sit inline in one 90px track instead of using display: contents. */
.ict-pdp .ict-accessories tr.attach-box-item > td:first-child {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.ict-pdp .ict-accessories tr.attach-box-item > td:first-child > * {
    display: inline-block;
    vertical-align: middle;
}

.ict-pdp .ict-accessory-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 12px 0 0;
    border: 2px solid #CBD5E1;
    border-radius: 6px;
    background: #fff center / 14px 14px no-repeat;
    cursor: pointer;
}

.ict-pdp .ict-accessory-select:checked {
    border-color: #0E7CC0;
    background-color: #0E7CC0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.ict-pdp .ict-accessory-select:disabled {
    border-color: #E2E8F0;
    background-color: #F1F5F9;
    cursor: not-allowed;
}

.ict-pdp .ict-accessory-select:focus-visible {
    outline: 2px solid #0E7CC0;
    outline-offset: 2px;
}

.ict-pdp .ict-accessory-thumb {
    display: block;
    width: 56px;
    height: 56px;
}

.ict-pdp .ict-accessory-thumb img {
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.ict-pdp .ict-accessory-name {
    display: -webkit-box;
    overflow: hidden;
    color: #202733;
    font-weight: 600;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ict-pdp .ict-accessory-name:hover {
    color: #0A4EA8;
}

.ict-pdp .ict-accessories .ict-accessory-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 2px 0 0;
}

.ict-pdp .ict-accessories .ict-accessory-price strong {
    color: #E00611;
    font-weight: 800;
    white-space: nowrap;
}

.ict-pdp .ict-accessories .ict-accessory-price del {
    color: #475569;
    white-space: nowrap;
}

.ict-pdp .ict-accessories tr.attach-box-item > td:nth-child(2) > small {
    display: block;
    margin-top: 2px;
    color: #475569;
}

.ict-pdp .ict-accessories .ict-quantity {
    display: inline-grid;
    grid-template-columns: 36px 40px 36px;
    align-items: stretch;
    width: auto;
    height: 36px;
    min-height: 0;
    margin: 0;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ict-pdp .ict-accessories .ict-quantity input {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #202733;
    text-align: center;
    box-shadow: none;
}

.ict-pdp .ict-accessories .ict-quantity input[type="button"] {
    color: #0A4EA8;
    cursor: pointer;
}

.ict-pdp .ict-accessories .ict-quantity input[type="button"]:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
}

.ict-pdp .ict-accessories .ict-quantity .qty {
    font-weight: 600;
}

.ict-pdp .ict-accessories tr.attach-box-item.is-picked .ict-quantity {
    border-color: #0E7CC0;
}

/* The footer cell stays a table cell (style.css forces it), so the footer row is laid out as a full-width table. */
.ict-pdp .ict-accessories .ict-accessory-footer-row {
    display: table;
    width: 100%;
    border: 0;
}

.ict-pdp .ict-accessories .ict-accessory-footer-row > tr {
    display: table-row;
}

.ict-pdp .ict-accessories .ict-accessory-footer-row > tr > td {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
}

.ict-pdp .ict-accessories-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 12px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #F1F5F9;
}

.ict-pdp .ict-accessories-footer > div {
    min-width: 0;
}

.ict-pdp .ict-accessories-footer [data-ict-bundle-summary] {
    display: block;
    color: #475569;
}

.ict-pdp .ict-accessories-footer > div > strong:not([hidden]) {
    display: block;
    margin-top: 2px;
    color: #E00611;
    font-weight: 800;
}

.ict-pdp .ict-accessories-footer > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 8px;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 2px solid #0E7CC0;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

.ict-pdp .ict-accessories-footer > button:hover:not(:disabled) {
    background: #E8F4FB;
}

.ict-pdp .ict-accessories-footer > button:disabled {
    border-color: #E2E8F0;
    background: #fff;
    color: #94A3B8;
    cursor: not-allowed;
}

.ict-pdp .ict-accessories-footer > button svg {
    width: 18px;
    height: 18px;
}

.ict-pdp .ict-accessories .ict-bundle-preview {
    display: none;
}

.ict-pdp .ict-accessories .ict-bundle-error:not([hidden]) {
    display: block;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF1F2;
    color: #E00611;
}

.ict-pdp .ict-accessories .ict-accessories-expand {
    display: none;
}

.ict-pdp .ict-accessories-expand > span,
.ict-pdp .ict-projects-expand > span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    color: transparent;
    border: solid #0A4EA8;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
}

.ict-pdp .ict-accessories-expand[aria-expanded="true"] > span {
    transform: translateY(2px) rotate(-135deg);
}

/* ---- B17 Cam kết 4 ô ------------------------------------------------------------------------------------------- */
.ict-pdp .ict-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 20px 24px;
    border-radius: 16px;
    background: #fff;
}

.ict-pdp .ict-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border: 0;
}

.ict-pdp .ict-trust-item:first-child {
    padding-left: 0;
}

.ict-pdp .ict-trust-item:last-child {
    padding-right: 0;
}

.ict-pdp .ict-trust-item + .ict-trust-item {
    border-left: 1px solid #F1F5F9;
}

.ict-pdp .ict-trust-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid #D6E8F5;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
}

.ict-pdp .ict-trust-icon svg {
    width: 20px;
    height: 20px;
}

.ict-pdp .ict-trust-item strong {
    display: block;
    color: #202733;
    font-weight: 600;
}

.ict-pdp .ict-trust-item small {
    display: block;
    margin: 0;
    color: #475569;
}

/* Verifier 28/09: the pre-order text of the delivery tile wraps as "Giao hàng từ / 3–5 ngày" (never after the dash). */
.ict-pdp .ict-trust-item .ict-trust-nowrap {
    white-space: nowrap;
}

/* ---- C24 Thông số kỹ thuật ------------------------------------------------------------------------------------- */
.ict-pdp .ict-spec-config strong {
    color: #0A4EA8;
    font-weight: 600;
}

.ict-pdp .ict-copy-specs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ict-pdp .ict-copy-specs:hover {
    background: #F8FAFC;
}

.ict-pdp .ict-copy-specs svg,
.ict-pdp .ict-spec-sku-copy svg {
    width: 18px;
    height: 18px;
}

.ict-pdp .ict-specifications {
    position: relative;
    margin: 0;
    padding: 0;
}

.ict-pdp .ict-specifications .speci > p {
    margin: 0;
    padding: 12px 0;
    color: #475569;
}

.ict-pdp .ict-specifications figure {
    width: auto;
    margin: 0;
    overflow: visible;
}

.ict-pdp .ict-specifications table,
.ict-pdp .ict-specifications thead,
.ict-pdp .ict-specifications tbody,
.ict-pdp .ict-specifications tfoot {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.ict-pdp .ict-specifications colgroup {
    display: none;
}

.ict-pdp .ict-specifications tr,
.ict-pdp .ict-spec-sku {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid #F1F5F9;
    background: none;
    break-inside: avoid;
}

.ict-pdp .ict-specifications :is(td, th) {
    display: block;
    min-width: 0;
    max-width: 100%;
    border: 0;
    background: none;
    color: #202733;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ict-pdp .ict-specifications :is(td, th):first-child:not(:only-child):not([colspan]) {
    color: #475569;
}

.ict-pdp .ict-specifications :is(td, th):only-child,
.ict-pdp .ict-specifications :is(td, th)[colspan] {
    grid-column: 1 / -1;
}

.ict-pdp .ict-specifications :is(td, th)[colspan] {
    color: #202733;
    font-weight: 600;
}

.ict-pdp .ict-specifications :is(td, th) p {
    margin: 0;
}

.ict-pdp .ict-specifications :is(td, th) p + p {
    margin-top: 2px;
}

.ict-pdp .ict-specifications .ict-spec-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #202733;
}

.ict-pdp .ict-specifications .ict-spec-group-heading > svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 0;
    color: #0E7CC0;
}

.ict-pdp .ict-spec-sku-label {
    color: #475569;
}

.ict-pdp .ict-spec-sku-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: #202733;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ict-pdp .ict-spec-sku-copy {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: -11px 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #0E7CC0;
    cursor: pointer;
}

.ict-pdp .ict-spec-sku-copy:hover {
    background: #E8F4FB;
}

.ict-pdp .ict-spec-sku-copy[hidden] {
    display: none;
}

/* ---- B18 So sánh phiên bản + B19 Vì sao mua tại ICT: production look again since 28/09 (task R). The round-1
   rules were removed here (PC and phone); the legacy rules of both blocks are back in ict-product-design.css and
   ict-review-20260918.css (artifacts/pdp-redesign-20260927/v2-mobile/restored-rules.json). ---------------- */

/* ---- C25 Bài viết (#overview markup is audited, so styling only) ---------------------------------------------- */
.ict-pdp #overview .ict-article-kicker {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #0E7CC0;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ict-pdp #overview .ict-article-kicker svg {
    display: none;
}

.ict-pdp #overview .ict-mobile-article-heading {
    display: block;
    margin: 0 0 16px;
}

.ict-pdp #overview .ict-mobile-article-heading > span {
    display: block;
    color: #0E7CC0;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ict-pdp #overview .ict-mobile-article-heading h2 {
    margin: 0;
    color: #202733;
    font-weight: 700;
    text-wrap: pretty;
}

.ict-pdp #ict-product-article {
    max-width: 760px;
    margin: 0;
    padding: 0;
    color: #202733;
}

.ict-pdp #ict-product-article :is(p, li) {
    color: #202733;
}

.ict-pdp #ict-product-article :is(img, iframe, video, table) {
    max-width: 100%;
}

/* The CMS table of contents ("Nội dung chính") as the design's box. Its count is a CSS counter over the top-level
   list items, drawn by the top list's ::after at the title position, because the audited #overview markup cannot
   change. */
.ict-pdp #ict-product-article .toc {
    position: relative;
    display: block;
    width: 100%;
    max-height: none;
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 0;
    border-radius: 12px;
    background: #F8FAFC;
    overflow: visible;
    counter-reset: ict-toc-items;
}

.ict-pdp #ict-product-article .toc::after {
    content: none;
}

.ict-pdp #ict-product-article .toc .show-more-toc {
    display: none;
}

.ict-pdp #ict-product-article .toc .toc-title {
    display: block;
    min-height: 20px;
    margin: 0 0 8px;
}

.ict-pdp #ict-product-article .toc .toc-title svg {
    display: none;
}

.ict-pdp #ict-product-article .toc .toc-title span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ict-pdp #ict-product-article .toc > ol::after {
    content: "Nội dung chính · " counter(ict-toc-items) " mục";
    content: "Nội dung chính · " counter(ict-toc-items) " mục" / "";
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    color: #202733;
    font-weight: 700;
}

/* Owner 28/09: the box lists only the article's top-level headings (H2); the nested lists (H3, H4…) stay in the
   audited markup but are not shown, and only the top-level entries count towards "N mục". */
.ict-pdp #ict-product-article .toc > ol > li {
    counter-increment: ict-toc-items;
    break-inside: avoid;
}

.ict-pdp #ict-product-article .toc ol {
    margin: 0;
    padding: 0;
}

.ict-pdp #ict-product-article .toc ol ol {
    display: none;
}

.ict-pdp #ict-product-article .toc li::before {
    margin-right: 8px;
    color: #0E7CC0;
    font-weight: 600;
}

.ict-pdp #ict-product-article .toc a {
    color: #0A4EA8;
}

.ict-pdp #ict-product-article .toc a:hover {
    color: #0E7CC0;
    text-decoration: underline;
}

.ict-pdp #overview .ict-expand-button .ict-desktop-label {
    display: none;
}

.ict-pdp #overview .ict-expand-button .ict-mobile-label {
    display: inline;
}

.ict-pdp #overview .ict-expand-button:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 0 24px;
    border: 2px solid #0E7CC0;
    border-radius: 12px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 700;
}

.ict-pdp #overview .ict-expand-button:hover {
    background: #E8F4FB;
}

/* ---- C26 Đánh giá ---------------------------------------------------------------------------------------------- */
.ict-pdp .ict-reviews > .ict-section-head {
    margin-bottom: 16px;
}

.ict-pdp .ict-review-write {
    display: block;
    margin: 0;
    padding: 0;
}

.ict-pdp .ict-review-write-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 2px solid #0E7CC0;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ict-pdp .ict-review-write-button:hover {
    background: #E8F4FB;
    color: #0A4EA8;
}

/* M5 (owner 29/09): with reviews, "Viết đánh giá ›" is a text link at the right of the heading (phone and PC); its 44px
   hit area overhangs the heading row (negative margins) so the row keeps the heading's height. An 8px gap keeps the
   heading on one line at 360px (213 + 8 + 103 of 328px). */
.ict-pdp .ict-reviews > .ict-section-head:has(> .ict-review-write-link) {
    align-items: center;
    column-gap: 8px;
}

.ict-pdp .ict-review-write-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: -12px 0;
    padding: 0;
    border: 0;
    background: none;
    color: #0A4EA8;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.ict-pdp .ict-review-write-link:hover {
    color: #0E7CC0;
    text-decoration: underline;
}

.ict-pdp .ict-review-write-link:focus-visible {
    outline: 2px solid #0E7CC0;
    outline-offset: 2px;
}

.ict-pdp .ict-review-summary {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 12px;
    background: #F8FAFC;
}

.ict-pdp .ict-review-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.ict-pdp .ict-review-score strong {
    color: #202733;
    font-weight: 800;
}

.ict-pdp .ict-review-score p {
    margin: 0;
    color: #475569;
}

.ict-pdp .ict-review-stars {
    display: inline-flex;
    gap: 2px;
    color: #FFB01F;
}

.ict-pdp .ict-review-stars svg {
    display: block;
    width: 16px;
    height: 16px;
}

.ict-pdp .ict-review-stars .is-empty {
    color: #CBD5E1;
}

.ict-pdp .ict-review-bars {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ict-pdp .ict-review-bars > button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #475569;
    text-align: left;
    cursor: pointer;
}

.ict-pdp .ict-review-bars > button > span:first-child {
    white-space: nowrap;
}

.ict-pdp .ict-review-bars b {
    color: #FFB01F;
    font-weight: 400;
}

.ict-pdp .ict-review-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: hidden;
}

.ict-pdp .ict-review-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #FFB01F;
}

.ict-pdp .ict-review-bars > button > small {
    color: #475569;
    text-align: right;
}

.ict-pdp .ict-review-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-review-filters button {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    color: #202733;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ict-pdp .ict-review-filters button:hover {
    border-color: #CBD5E1;
}

.ict-pdp .ict-review-filters button.active,
.ict-pdp .ict-review-filters button[aria-pressed="true"] {
    border-color: #0E7CC0;
    background: #E8F4FB;
    color: #0A4EA8;
}

.ict-pdp .ict-review-filters button[aria-disabled="true"] {
    color: #94A3B8;
    cursor: default;
}

.ict-pdp .ict-review-filters select {
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0 32px 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background-color: #fff;
    color: #202733;
}

.ict-pdp .ict-review-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-review-search input {
    flex: 1 1 240px;
    max-width: 420px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #202733;
}

.ict-pdp .ict-review-search input:focus {
    border-color: #0E7CC0;
    outline: none;
    box-shadow: 0 0 0 3px #E8F4FB;
}

.ict-pdp .ict-review-search button {
    height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #0E7CC0;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.ict-pdp .ict-review-search button:hover {
    background: #0A4EA8;
}

.ict-pdp .ict-review-search [data-ict-review-result-count] {
    color: #475569;
}

.ict-pdp .ict-review-list-wrap {
    position: relative;
    margin: 8px 0 0;
}

.ict-pdp .ict-reviews.is-empty .ict-review-list-wrap:not(:has(.ict-review-card)) {
    display: none;
}

.ict-pdp .ict-review-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-top: 1px solid #F1F5F9;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ict-pdp .ict-review-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8F4FB;
    color: #0A4EA8;
    font-weight: 700;
}

.ict-pdp .ict-review-card-body {
    min-width: 0;
}

.ict-pdp .ict-review-card-header,
.ict-pdp .ict-review-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.ict-pdp .ict-review-author strong {
    color: #202733;
    font-weight: 700;
}

.ict-pdp .ict-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #F0FDF4;
    color: #15803D;
    font-weight: 600;
}

.ict-pdp .ict-review-verified svg {
    width: 14px;
    height: 14px;
}

.ict-pdp .ict-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 4px 0 0;
    color: #475569;
}

.ict-pdp .ict-review-meta .ict-review-stars svg {
    width: 14px;
    height: 14px;
}

.ict-pdp .ict-review-pending {
    margin: 6px 0 0;
    color: #B45309;
}

.ict-pdp .ict-review-comment {
    margin: 6px 0 0;
    color: #202733;
    white-space: pre-line;
}

.ict-pdp .ict-review-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}

.ict-pdp .ict-review-images img {
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    object-fit: cover;
}

.ict-pdp .ict-review-reply {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: #F8FAFC;
}

.ict-pdp .ict-review-reply strong {
    display: block;
    color: #0A4EA8;
    font-weight: 700;
}

.ict-pdp .ict-review-reply p {
    margin: 2px 0 0;
    color: #202733;
}

.ict-pdp .ict-reviews .ict-review-empty {
    display: block;
    margin: 0;
    padding: 16px 0;
    border: 0;
    color: #475569;
    text-align: center;
}

.ict-pdp .ict-reviews .ict-review-empty p {
    margin: 0;
    color: #475569;
}

.ict-pdp .ict-review-pagination {
    margin: 12px 0 0;
}

/* ---- C27 Hỏi & Đáp --------------------------------------------------------------------------------------------- */
.ict-pdp .ict-question-filter {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-question-filter-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    display: grid;
    color: #64748B;
    transform: translateY(-50%);
    pointer-events: none;
}

.ict-pdp .ict-question-filter-icon svg {
    width: 18px;
    height: 18px;
}

.ict-pdp .ict-question-filter input {
    width: 320px;
    max-width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 40px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #202733;
}

.ict-pdp .ict-question-filter input:focus,
.ict-pdp .ict-question-compose textarea:focus {
    border-color: #0E7CC0;
    outline: none;
    box-shadow: 0 0 0 3px #E8F4FB;
}

.ict-pdp .ict-question-count {
    color: #475569;
    white-space: nowrap;
}

.ict-pdp .ict-question-compose {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-question-compose textarea {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #202733;
    resize: none;
}

.ict-pdp .ict-question-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 10px;
    background: #0E7CC0;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.ict-pdp .ict-question-send:hover,
.ict-pdp .ict-question-send:focus-visible {
    background: #0A4EA8;
    color: #fff;
}

.ict-pdp .ict-question-list {
    position: relative;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.ict-pdp .ict-question-list > article {
    display: block;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-top: 1px solid #F1F5F9;
}

.ict-pdp .ict-question-list > article[hidden] {
    display: none;
}

/* P2 (owner 29/09): on PC the collapsed list is cut exactly between two questions (2 shown on sale pages, 3 on rental
   pages, ict-product-design.js), so the legacy white fade over the cut goes. */
@media (min-width: 1024px) {
    .ict-pdp #ict-question-list[data-ict-collapsed="true"]::after {
        content: none;
    }
}

.ict-pdp .ict-question-list h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: #202733;
    font-weight: 700;
}

.ict-pdp .ict-question-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 44px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: #202733;
    color: #fff;
    font-weight: 700;
}

.ict-pdp .ict-question-answer {
    margin: 6px 0 0;
    padding: 0 0 0 54px;
    border: 0;
    background: none;
}

.ict-pdp .ict-question-answer strong {
    display: block;
    color: #0A4EA8;
    font-weight: 700;
}

.ict-pdp .ict-question-answer p {
    margin: 2px 0 0;
    color: #202733;
}

.ict-pdp .ict-questions .ict-question-empty-state {
    padding: 0;
}

.ict-pdp .ict-question-no-results {
    margin: 0;
    padding: 12px 0 0;
    color: #475569;
}

/* ---- C28 Sản phẩm tương tự (the shared catalogue card keeps its markup; only the PDP rail is restyled) --------- */
.ict-pdp .ict-related-section > .ict-section-head {
    align-items: flex-end;
}

.ict-pdp .ict-related-controls {
    display: flex;
    align-items: center;
    flex: none;
    gap: 8px;
}

.ict-pdp .ict-related-compare-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-weight: 600;
}

.ict-pdp .ict-related-controls button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
}

.ict-pdp .ict-related-grid .product .product_title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ict-pdp .ict-related-grid .product .product_price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.ict-pdp .ict-related-grid .product .product_price del {
    color: #475569;
}

/* D3 (owner 29/09): red stays for the price and the cart button only. The "-19%" is red text with no chip on these
   rails. The HOT label is dark ink on every card since the D3 edit (ict-storefront.css "D3", labels row under the image). */
.ict-pdp .ict-related-grid .product .product_price .badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #E00611;
    font-weight: 700;
}

/* The stock line ("Còn hàng") and the cart icon are the catalogue card's own (style.css: blue 14px text, the 25px
   sprite icon on a transparent link), like the category listing (owner 28/09, task RC); the rules that restyled them
   here (600 weight, a 44px red square with a drawn cart) are gone. The compare link stays hidden. */
.ict-pdp .ict-related-grid .product .product-cmp .js-add-to-compare-button {
    display: none;
}

/* ---- C29 Khách hàng tiêu biểu ---------------------------------------------------------------------------------- */
.ict-pdp .ict-customer-logos .ict-section-head :is(h2, h3) em {
    color: inherit;
    font-style: normal;
}

.ict-pdp .ict-customer-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

.ict-pdp .ict-customer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
}

.ict-pdp .ict-customer-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

.ict-pdp .ict-customer-project-link {
    display: block;
    margin: 16px 0 0;
    padding: 0;
    color: #0A4EA8;
    font-weight: 600;
    text-align: center;
}

.ict-pdp .ict-customer-project-link:hover {
    color: #0E7CC0;
    text-decoration: underline;
}

/* ---- T11 Thuê 4 bước, T12 Dự án ------------------------------------------------------------------------------- */
.ict-pdp .ict-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ict-pdp .ict-process-grid > li {
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: #F8FAFC;
}

.ict-pdp .ict-process-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.ict-pdp .ict-process-step > span {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0E7CC0;
    color: #fff;
    font-weight: 800;
}

.ict-pdp .ict-process-step > i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #D6E8F5;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    font-style: normal;
}

.ict-pdp .ict-process-step > i svg {
    width: 20px;
    height: 20px;
}

.ict-pdp .ict-process-grid :is(h3, h4) {
    margin: 0 0 4px;
    color: #202733;
    font-weight: 700;
}

.ict-pdp .ict-process-grid p {
    margin: 0;
    color: #475569;
}

.ict-pdp .ict-project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

.ict-pdp .ict-project-grid figure {
    min-width: 0;
    margin: 0;
    border: 0;
    background: none;
}

.ict-pdp .ict-project-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #F4F6F8;
    overflow: hidden;
    cursor: zoom-in;
}

.ict-pdp .ict-project-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ict-pdp .ict-project-grid figcaption {
    margin: 6px 0 0;
    padding: 0;
    background: none;
    color: #475569;
}

.ict-pdp .ict-projects .ict-projects-expand {
    display: none;
}

/* P3 (owner 29/09): PC shows one row of 4 photos and "Xem thêm N ảnh ›" at the right of the heading, which opens the
   viewer on the photos past the row (ict-product-design.js); phones keep 2 x 2 + "Xem thêm n ảnh dự án" below. */
.ict-pdp .ict-projects-more {
    display: none;
}

@media (min-width: 1024px) {
    .ict-pdp .ict-project-grid figure:nth-child(n+5) {
        display: none;
    }

    .ict-pdp .ict-projects-more {
        display: inline-flex;
        flex: none;
        align-self: center;
        align-items: center;
        gap: 2px;
        min-height: 44px;
        margin: -12px 0;
        padding: 0;
        border: 0;
        background: none;
        color: #0A4EA8;
        font-family: inherit;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .ict-pdp .ict-projects-more svg {
        width: 14px;
        height: 14px;
    }

    .ict-pdp .ict-projects-more:hover {
        color: #0E7CC0;
        text-decoration: underline;
    }

    .ict-pdp .ict-projects-more:focus-visible {
        outline: 2px solid #0E7CC0;
        outline-offset: 2px;
    }
}

/* ================= Desktop only ================= */
@media (min-width: 1024px) {
    .ict-pdp .ict-specs-section .ict-specifications {
        column-count: 2;
        column-gap: 48px;
    }

    .ict-pdp .ict-specs-section .ict-specifications .speci > p {
        column-span: all;
    }

    .ict-pdp #overview .ict-mobile-article-heading > span {
        display: none;
    }

    /* The TOC entries (top level only) fill the columns top to bottom in a grid, so rows line up across columns.
       --ict-toc-rows (set below from the entry count) makes 2 columns up to 1279px and 3 from 1280px; a number
       stays in its own column so a long title wraps under its text, not under the number. */
    /* Browsers without :has() (the row counts below need it) keep a plain 2-column list. */
    .ict-pdp #ict-product-article .toc > ol {
        column-count: 2;
        column-gap: 32px;
    }

    @supports selector(:has(*)) {
        .ict-pdp #ict-product-article .toc > ol {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(var(--ict-toc-rows-2), auto);
            grid-auto-columns: minmax(0, 1fr);
            gap: 2px 32px;
        }
    }

    .ict-pdp #ict-product-article .toc > ol > li {
        display: flex;
        align-items: baseline;
        min-width: 0;
    }

    .ict-pdp #ict-product-article .toc > ol > li::before {
        flex: none;
        font-variant-numeric: tabular-nums;
    }

    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(10)) > li::before {
        min-width: 1.45em;
    }

    .ict-pdp #ict-product-article .toc > ol > li > a {
        min-width: 0;
    }

    .ict-pdp .ict-reviews {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: start;
    }

    .ict-pdp .ict-reviews > * {
        grid-column: 1 / -1;
    }

    .ict-pdp .ict-reviews > .ict-section-head {
        grid-column: 1;
        grid-row: 1;
    }

    .ict-pdp .ict-reviews > .ict-review-write {
        grid-column: 2;
        grid-row: 1;
    }

    .ict-pdp .ict-questions > .ict-section-head {
        align-items: center;
    }
}

/* Owner 28/09 (the production article, "kiểu vậy"): from tablet width up the article fills the card's inner width
   instead of a 760px column with an empty right half (the cap only bites above ~790px, so phones are unchanged).
   Photos and embeds are centred in it and never wider than it. */
@media (min-width: 768px) {
    .ict-pdp #ict-product-article {
        max-width: none;
    }

    /* A photo alone on its line (the CMS figure.image, or an image paragraph, including a big photo written right
       after a sentence) is a centred block as wide as the image. Photos sharing a line (CMS image pairs) stay
       inline: their paragraph is centred, with each image in the middle of its zoom button. Photos in tables keep
       the cell's alignment. */
    .ict-pdp #ict-product-article figure.image {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .ict-pdp #ict-product-article .ict-article-photo:not(.ict-article-photo ~ .ict-article-photo, :has(~ .ict-article-photo), :is(td, th) .ict-article-photo) {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }

    .ict-pdp #ict-product-article .ict-article-photo > img {
        margin-inline: auto;
    }

    .ict-pdp #ict-product-article p:has(> .ict-article-photo + .ict-article-photo) {
        text-align: center;
    }

    /* Embeds written without the video shortcode's 16:9 box (a bare YouTube iframe) keep their authored size,
       centred. The shortcode's box already spans the column at 16:9 (its inline styles fix that). */
    .ict-pdp #ict-product-article iframe:not(.youtube-iframe > iframe) {
        display: block;
        margin-inline: auto;
    }
}

/* TOC rows from the number of top-level entries n (PC). 2 columns (1024-1279px): ceil(n/2) rows. 3 columns (1280px
   and wider): ceil(n/3) rows, except 5 and 7 entries, which read better as two columns (3+2, 4+3) than three that
   end with a lone entry (4 entries: 2 rows = 2+2). The exact-count rules win by specificity. */
@media (min-width: 1024px) {
    .ict-pdp #ict-product-article .toc > ol { --ict-toc-rows-2: 1; --ict-toc-rows-3: 1; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(3)) { --ict-toc-rows-2: 2; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(4)) { --ict-toc-rows-3: 2; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(5)) { --ict-toc-rows-2: 3; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(7)) { --ict-toc-rows-2: 4; --ict-toc-rows-3: 3; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(9)) { --ict-toc-rows-2: 5; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(10)) { --ict-toc-rows-3: 4; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(11)) { --ict-toc-rows-2: 6; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(13)) { --ict-toc-rows-2: 7; --ict-toc-rows-3: 5; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(15)) { --ict-toc-rows-2: 8; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(16)) { --ict-toc-rows-3: 6; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(17)) { --ict-toc-rows-2: 9; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(19)) { --ict-toc-rows-2: 10; --ict-toc-rows-3: 7; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(21)) { --ict-toc-rows-2: 11; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(22)) { --ict-toc-rows-3: 8; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(23)) { --ict-toc-rows-2: 12; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(25)) { --ict-toc-rows-2: 13; --ict-toc-rows-3: 9; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(27)) { --ict-toc-rows-2: 14; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(28)) { --ict-toc-rows-3: 10; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(29)) { --ict-toc-rows-2: 15; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) { --ict-toc-rows-3: 3; }
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) { --ict-toc-rows-3: 4; }
    /* Exactly 3 entries: one row of three (1/1/1) from 1024px too, not 2 + a lone entry. */
    .ict-pdp #ict-product-article .toc > ol:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) { --ict-toc-rows-2: 1; }
}

@media (min-width: 1280px) {
    .ict-pdp #ict-product-article .toc > ol {
        grid-template-rows: repeat(var(--ict-toc-rows-3), auto);
    }
}

/* ================= Phones and tablets (<1024) ================= */
@media (max-width: 1023.98px) {
    .ict-pdp .ict-specs-section,
    .ict-pdp .ict-reviews,
    .ict-pdp .ict-questions,
    .ict-pdp .ict-compare-products,
    .ict-pdp .ict-related-section,
    .ict-pdp .ict-customer-logos,
    .ict-pdp .ict-accessories,
    .ict-pdp .ict-process,
    .ict-pdp .ict-projects {
        padding: 16px;
    }

    /* The article's expand button keeps the shared legacy 16px side margin, so the card pads only vertically and
       the article content takes the 16px gutter itself. */
    .ict-pdp #overview {
        padding: 16px 0;
    }

    .ict-pdp #overview > .ict-mobile-article-heading,
    .ict-pdp #overview > #ict-product-article {
        padding: 0 16px;
    }

    .ict-pdp #overview .ict-expand-button:not([hidden]) {
        width: calc(100% - 32px);
        min-width: 0;
    }

    .ict-pdp .ict-section-head {
        margin-bottom: 12px;
    }

    /* B16 */
    .ict-pdp .ict-accessories .ict-accessory-table > tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .ict-pdp .ict-accessories tr.attach-box-item {
        grid-template-columns: 82px minmax(0, 1fr);
        row-gap: 8px;
        column-gap: 12px;
    }

    .ict-pdp .ict-accessories tr.attach-box-item > td:last-child {
        grid-column: 2;
    }

    .ict-pdp .ict-accessory-thumb,
    .ict-pdp .ict-accessory-thumb img {
        width: 48px;
        height: 48px;
    }

    .ict-pdp .ict-accessories .ict-quantity {
        grid-template-columns: 44px 48px 44px;
        height: 44px;
    }

    .ict-pdp .ict-accessories tr.attach-box-item:nth-child(n+4) {
        display: none;
    }

    .ict-pdp .ict-accessories.is-expanded tr.attach-box-item:nth-child(n+4) {
        display: grid;
    }

    .ict-pdp .ict-accessories .ict-accessories-expand:not([hidden]) {
        display: flex;
    }

    .ict-pdp .ict-accessories-footer {
        flex-wrap: wrap;
    }

    .ict-pdp .ict-accessories-footer > div {
        flex: 1 1 180px;
    }

    .ict-pdp .ict-accessories-footer > button {
        flex: 1 1 auto;
    }

    .ict-pdp .ict-accessories .ict-bundle-preview:not([hidden]) {
        display: inline;
    }

    .ict-pdp .ict-accessories .ict-bundle-preview:not([hidden])::before {
        content: " · ";
    }

    /* B17: one column at 360, two from 390 */
    .ict-pdp .ict-trust-strip {
        grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
        gap: 16px 12px;
        padding: 16px;
        border-radius: 0;
    }

    .ict-pdp .ict-trust-item,
    .ict-pdp .ict-trust-item:first-child,
    .ict-pdp .ict-trust-item:last-child {
        align-items: flex-start;
        padding: 0;
    }

    .ict-pdp .ict-trust-item + .ict-trust-item {
        border-left: 0;
    }

    .ict-pdp .ict-trust-icon {
        width: 36px;
        height: 36px;
        border: 0;
        background: #E8F4FB;
        color: #0E7CC0;
    }

    /* C24 */
    .ict-pdp .ict-copy-specs {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .ict-pdp .ict-copy-specs-label {
        display: none;
    }

    .ict-pdp .ict-specifications tr,
    .ict-pdp .ict-spec-sku {
        grid-template-columns: 118px minmax(0, 1fr);
        column-gap: 12px;
        padding: 10px 0;
    }

    .ict-pdp .ict-spec-sku-copy {
        margin-top: -12px;
        margin-bottom: -12px;
    }

    /* C25 */
    .ict-pdp #overview .ict-article-kicker {
        display: none;
    }

    /* C26 */
    .ict-pdp .ict-review-write {
        margin-top: 16px;
    }

    .ict-pdp .ict-review-write-button {
        width: 100%;
    }

    .ict-pdp .ict-review-summary {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
        padding: 12px 16px;
    }

    .ict-pdp .ict-review-filters {
        flex-wrap: nowrap;
        margin-right: -16px;
        padding-right: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ict-pdp .ict-review-filters::-webkit-scrollbar {
        display: none;
    }

    .ict-pdp .ict-review-filters button,
    .ict-pdp .ict-review-filters select {
        flex: none;
        height: 40px;
    }

    .ict-pdp .ict-review-filters select {
        margin-left: 0;
    }

    .ict-pdp .ict-review-search input {
        max-width: none;
    }

    .ict-pdp .ict-review-card {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ict-pdp .ict-review-avatar {
        width: 36px;
        height: 36px;
    }

    /* C27 */
    .ict-pdp .ict-questions > .ict-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ict-pdp .ict-question-filter input {
        flex: 1 1 auto;
        width: auto;
    }

    .ict-pdp .ict-question-send {
        min-width: 88px;
        padding: 0 16px;
    }

    .ict-pdp .ict-question-answer {
        padding-left: 0;
    }

    /* C28: the phone rail (swipe cards 62% wide) stays the legacy flex row of ict-review-20260918.css. */

    /* C29: four columns of 56px, two rows until "Xem thêm" */
    .ict-pdp .ict-customer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        overflow: hidden;
    }

    .ict-pdp .ict-customer-logo {
        height: 56px;
        padding: 6px 8px;
    }

    /* T11 */
    .ict-pdp .ict-process-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 12px 0 0;
    }

    .ict-pdp .ict-process-grid > li {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 2px;
        padding: 0;
        background: none;
    }

    .ict-pdp .ict-process-grid > li .ict-process-step {
        display: block;
        grid-row: 1 / 3;
        margin: 0;
    }

    .ict-pdp .ict-process-step > i {
        display: none;
    }

    .ict-pdp .ict-process-grid :is(h3, h4),
    .ict-pdp .ict-process-grid p {
        grid-column: 2;
    }

    /* T12 */
    .ict-pdp .ict-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ict-pdp .ict-project-grid:not(.is-expanded) figure:nth-child(n+5) {
        display: none;
    }

    .ict-pdp .ict-projects .ict-projects-expand:not([hidden]) {
        display: flex;
    }
}

/* Codex review 27/09: CMS tables with 3+ cells in a row (e.g. component lists "MAIN | model | BH 36T") keep the
   native table layout; the 2-column grid above is for label/value tables only. */
.ict-pdp .ict-specifications table:has(tr > :nth-child(3)) { display: table; width: 100%; border-collapse: collapse; }
.ict-pdp .ict-specifications table:has(tr > :nth-child(3)) :is(thead, tbody, tfoot) { display: table-row-group; }
.ict-pdp .ict-specifications table:has(tr > :nth-child(3)) tr { display: table-row; padding: 0; }
.ict-pdp .ict-specifications table:has(tr > :nth-child(3)) :is(td, th) { display: table-cell; padding: 11px 12px 11px 0; border-bottom: 1px solid #F1F5F9; }
.ict-pdp .ict-specifications table:has(tr > :nth-child(3)) :is(td, th):nth-child(n+3) { white-space: nowrap; }

/* ================= v2 mobile (27/09): M4 trust strip + accessories, M5 sections under the tabs ================= */
@media (max-width: 1023.98px) {
    /* M4 trust: 2 x 2 at every phone width, 36px tinted icons; the phone-only 5th item (warranty,
       editorial-strips.blade.php) replaces the 4th (SSL), which the PC keeps. */
    .ict-pdp .ict-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ict-pdp .ict-trust-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: start; }
    .ict-pdp .ict-trust-icon { border-radius: 10px; }
    .ict-pdp .ict-trust-icon svg { width: 18px; height: 18px; }
    .ict-pdp .ict-trust-strip:has(> .ict-trust-item-mobile) > .ict-trust-item:nth-child(4) { display: none; }
    /* D1 (owner 29/09): the automatic delivery tile reads "HCM 2–4 giờ / Tỉnh 3–5 ngày" on phones (editorial-strips.blade.php). */
    .ict-pdp .ict-trust-item .ict-trust-sub-pc { display: none; }

    /* M4 accessories: 22px checkbox, 48px thumb, name + price; the stepper only once the row is picked (is-picked is
       set by ict-product-design.js). style.css forces the cell to stay a table cell (display cannot change), so the
       unpicked stepper cell is taken out of the grid and hidden (visibility keeps its inputs out of the tab order). */
    .ict-pdp .ict-accessories tr.attach-box-item { row-gap: 6px; padding: 10px 0; }
    .ict-pdp .ict-accessories tr.attach-box-item:not(.is-picked) > td:last-child { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
    .ict-pdp .ict-accessories .ict-quantity { grid-template-columns: 44px 44px 44px; min-height: 44px; }
    .ict-pdp .ict-accessory-select { border-width: 1.5px; }

    /* M5 specs: the copy icon ends at the value column's edge; the 44px hit area grows inwards (the specs block clips
       overflow, so a button reaching past the column would be cut). */
    .ict-pdp .ict-spec-sku-copy { margin-right: 0; justify-items: end; }

    /* M5 article: the collapsed state is the table of contents box + "Đọc bài viết" (the collapse height comes from
       ict-product-design.js), so the legacy fade at the cut goes. */
    .ict-pdp #ict-product-article .toc { margin: 0 0 12px; padding: 12px 14px; }
    .ict-pdp #ict-product-article .toc > ol::after { top: 12px; left: 14px; right: 14px; }
    .ict-pdp #ict-product-article[data-ict-collapsed="true"]::after { content: none; }

    /* M5 reviews empty state. */
    .ict-pdp .ict-empty-icon-star { background: #FFF8E6; color: #FFB01F; }

    /* M5 related cards (CSS only: the catalogue card markup is shared and pinned by tests). 58% wide, the image inset
       8px through a white border (the legacy card padding is forced to 0), labels row under it, the whole card a
       link through the title's ::after; the cart icon and the rental "Chọn gói thuê" link stay clickable above that
       overlay (55-feedback.css). The legacy phone widths (62% / 50%) were pruned from ict-product-design.css and
       ict-review-20260918.css. The stock line, the cart icon and "Chọn gói thuê" are the catalogue card's (55-feedback.css,
       tasks RC and RC2). */
    .ict-pdp .ict-related-grid > .ict-catalog-card { flex: 0 0 min(58%, 250px); width: min(58%, 250px); min-width: 0; scroll-snap-align: start; }
    .ict-pdp .ict-related-grid .product { position: relative; }
    .ict-pdp .ict-related-grid .product .product_title a::after { content: ""; position: absolute; inset: 0; }
    .ict-pdp .ict-related-grid .product .product_img { position: relative; order: 0; border: 8px solid #fff; border-radius: 16px; background-clip: padding-box; }
    .ict-pdp .ict-related-grid .product .product_info { order: 2; margin-top: -2px; }
    .ict-pdp .ict-related-grid .product .product_desc:not(:empty) { border-radius: 8px; }

    /* M5 customer logos: 56px tiles with 8px padding; the project link is PC-only. */
    .ict-pdp .ict-customer-logo { padding: 8px; }
    .ict-pdp .ict-customer-project-link { display: none; }
}

/* Owner 28/09: trust tile 4 is the warranty on every width ("Bảo mật thanh toán SSL" removed): when the product has
   a known warranty the server adds "Bảo hành N tháng" as a 5th tile, which replaces the generic 4th one. */
.ict-pdp .ict-trust-strip:has(> .ict-trust-item-mobile) > .ict-trust-item:nth-child(4) { display: none; }

/* ---- 55-feedback.css ---- */
/* 55-feedback.css - owner feedback 28/09 (v2 mobile, task S): related / replacement cards on phones.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12), mobile-only inside
   @media (max-width:1023.98px), except the task RC and RC2 blocks (owner asked for every width). This part follows
   50-sections.css in the bundle, so at equal specificity it wins.
   The catalogue card markup (partials/product-item-grid.blade.php) is shared and pinned by tests: CSS only. */

@media (max-width: 1023.98px) {
    /* The image wrapper becomes display:contents and its link is the 1:1 frame (8px inset, radius 8). The labels (HOT,
       NEW, SALE and the gift chip) are one row at the top of .product_info since the D3 edit (owner 29/09,
       ict-storefront.css "D3"), under the frame as on every card. The hover action box is display:none in style.css. */
    .ict-pdp .ict-related-grid .product .product_img { display: contents; }
    .ict-pdp .ict-related-grid .product .product_img > a {
        display: block;
        order: 0;
        flex: none;
        margin: 8px 8px 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 8px;
        background: #F8FAFC;
    }
    /* 8px from the image to the labels row (or the name): the info block keeps its 12px legacy top padding. */
    .ict-pdp .ict-related-grid .product .product_info { margin-top: -4px; }

    /* The name in full, like the catalogue page: no 3-line clamp (style.css clamps the h3 at 63px, 50-sections.css
       clamps the link); the link keeps its ::after overlay that makes the whole card the link. */
    .ict-pdp .ict-related-grid .product .product_title,
    .ict-pdp .ict-related-grid .product .product_title a {
        display: block;
        height: auto;
        overflow: visible;
        -webkit-line-clamp: none;
    }
}

/* Owner 28/09 (task RC), every width (PC and phone), as the owner asked:
   - "Còn hàng" and the cart icon: the catalogue card's own rules (style.css) now apply unchanged, as on the category
     listing (the PDP overrides were removed from 50-sections.css and ict-product-design.css). Two things are added:
     the row keeps the listing's 46px minimum (ict-review-20260918.css gives it to `.shop_container .product` only),
     and the 25px icon gets an invisible 44px touch target that sits above the phone's whole-card link overlay.
   - Spec box: five 20px lines (+ 8px top padding, 8px bottom border in the box colour) = 116px. Since task RC2 the
     catalogue card itself shows five lines (ict-type-scale.css section 1: every non-empty box is 116px, min and max,
     on the category listing too), so the PDP-only min-height that was here is gone. A box with fewer lines shows its
     lines; an empty one is not shown (ict-product-design.css). */
.ict-pdp .ict-related-grid .product .deal_foot { min-height: 46px; }
.ict-pdp .ict-related-grid .product .product-cmp .add-to-cart-button { position: relative; z-index: 1; }
.ict-pdp .ict-related-grid .product .product-cmp .add-to-cart-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

/* Owner 28/09 evening (task RC2), every width: "Chọn gói thuê" on rental cards (Thiết bị cho thuê khác, related) sits on
   the stock row's right like the category listing, as its plain text link: 15px/1.55 regular in the listing's link
   colour, hover in the theme blue (style.css `a`, `a:hover`). The outlined button, the column footer and their !important
   rules were pruned from ict-product-design.css, the 600 weight from ict-type-scale.css; only the page-wide link colour
   (.ict-pdp a, ict-product-design.css) is put back here. The look stays the listing's; an invisible 44px-tall target
   keeps it easy to tap and sits above the phone's whole-card link overlay (50-sections.css). */
.ict-pdp .ict-related-grid .product .ict-rental-product-link { position: relative; z-index: 1; color: #13172B; }
.ict-pdp .ict-related-grid .product .ict-rental-product-link:hover { color: var(--color-1st, #1B98E0); }
.ict-pdp .ict-related-grid .product .ict-rental-product-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    left: -4px;
    height: 44px;
    transform: translateY(-50%);
}

/* Phone review 28/09 (task P2). */
@media (max-width: 1023.98px) {
    /* "Mua kèm theo": the full product name (50-sections.css clamps it at two lines at every width; PC keeps that). */
    .ict-pdp .ict-accessory-name {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    /* "Bạn dùng máy để làm gì?": a swipe rail instead of the two-column grid. Cards are 76% wide so the next one peeks;
       the rail scrolls by itself (overscroll contained), the page never gets wider (the 18/09 complaint behind the
       grid, ict-review-20260918.css section 26, whose !important grid/card rules were pruned for this selector).
       Header: title and "Chạm để chọn…" on the left, the "Vuốt ngang ›" hint (ict-m-only) on the title row, right. */
    .ict-pdp #use-cases .ict-section-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        align-items: center;
    }
    .ict-pdp #use-cases .ict-section-header > div:not(.ict-section-heading-icon) { grid-column: 1; grid-row: 1; min-width: 0; }
    .ict-pdp #use-cases .ict-section-header > p { grid-column: 1 / -1; grid-row: 2; }
    .ict-pdp #use-cases .ict-section-header > .ict-swipe-hint {
        grid-column: 2;
        grid-row: 1;
        color: #0A4EA8;
        font-weight: 600;
        white-space: nowrap;
    }
    .ict-pdp #use-cases .ict-use-case-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .ict-pdp #use-cases .ict-use-case-grid::-webkit-scrollbar { display: none; }
    .ict-pdp #use-cases .ict-use-case-grid > .ict-use-case {
        flex: 0 0 76%;
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* D3 (owner 29/09): the related card's info column already spaces its children 8px apart (ict-product-design.css,
   gap:8px), so here the labels row drops its own 8px bottom margin and the empty slot of the other cards is 24px
   (24 + the 8px gap = the row's 32px, ict-storefront.css "D3"): the name sits 8px under the labels, as on the
   category listing, and the names of a rail still line up. Every width. */
.ict-pdp .ict-related-grid .product .ict-card-badges { margin-bottom: 0; }
.ict-pdp .ict-related-grid:has(.ict-card-badges) .product > .product_info:not(:has(> .ict-card-badges))::before { height: 24px; }

/* ---- 60-sticky.css ---- */
/* 60-sticky.css - P3 thanh mua dính PC, thanh dưới mobile, tab dính, thông báo.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

/* C21/C22 shared: one fixed bar; PC = top bar shown after the main buttons scroll away, phone = bottom bar. */
.ict-pdp .ict-buybar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0;
    background: #fff;
}
.ict-pdp .ict-buybar-inner { display: flex; align-items: center; min-width: 0; margin: 0 auto; }
.ict-pdp .ict-buybar .ict-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    border-radius: 10px;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    white-space: nowrap;
}
.ict-pdp .ict-buybar .ict-button svg { width: 18px; height: 18px; flex: none; }
.ict-pdp .ict-buybar .ict-button-primary { flex-direction: column; border: 0; background: var(--pdp-price); color: #fff; }
.ict-pdp .ict-buybar .ict-button-primary:hover:not(:disabled) { background: var(--pdp-price-hover); color: #fff; }
.ict-pdp .ict-buybar .ict-button-primary strong { color: inherit; font-weight: 800; letter-spacing: .02em; }
.ict-pdp .ict-buybar .ict-button-primary small { color: inherit; font-weight: 600; }
.ict-pdp .ict-buybar .ict-button-outline { gap: 6px; border: 2px solid var(--pdp-brand); background: #fff; color: var(--pdp-brand-dark); font-weight: 700; }
.ict-pdp .ict-buybar .ict-button-outline:hover:not(:disabled) { background: var(--pdp-tint); }
.ict-pdp .ict-buybar .ict-button:disabled { border-color: var(--pdp-line); background: var(--pdp-disabled-bg); color: var(--pdp-disabled-ink); cursor: not-allowed; }
.ict-pdp .ict-buybar .ict-state-button { display: none; }
.ict-pdp .ict-buybar[data-ict-offer-state="quote"] .ict-state-quote,
.ict-pdp .ict-buybar[data-ict-offer-state="out"] .ict-state-out,
.ict-pdp-rental .ict-buybar[data-ict-offer-state="backorder"] .ict-state-out:not(.ict-state-replacements),
.ict-pdp .ict-buybar[data-ict-offer-state="out"] .ict-state-notify { display: flex; }
/* Task ST (sale): the outline "Liên hệ đặt hàng" only when there is no "Sản phẩm thay thế" link beside the red button. */
.ict-pdp .ict-buybar[data-ict-offer-state="out"] .ict-state-replacements ~ .ict-state-contact { display: none; }
.ict-pdp .ict-buybar .ict-state-notify { flex-direction: row; gap: 8px; }
/* X1 (owner 29/09): a sale pre-order keeps the in-stock bar ([qty] [Thêm vào giỏ] [ĐẶT TRƯỚC + total]); rental pre-orders
   keep "Liên hệ đặt hàng". */
.ict-pdp .ict-buybar:is([data-ict-offer-state="quote"], [data-ict-offer-state="out"]) :is(.ict-sticky-add, .ict-sticky-buy, .ict-sticky-qty),
.ict-pdp-rental .ict-buybar[data-ict-offer-state="backorder"] :is(.ict-sticky-add, .ict-sticky-buy, .ict-sticky-qty) { display: none; }
.ict-pdp .ict-buybar-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--pdp-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--pdp-brand-dark);
    font-weight: 700;
    text-decoration: none;
}
.ict-pdp .ict-buybar-contact svg { width: 18px; height: 18px; }

@media (min-width: 1024px) {
    /* Owner 28/09 evening (task RC2): the product name is shown in full, wrapping onto up to three lines, so the bar is
       72px high at least (one or two name lines: unchanged) and grows only for a third line (92px); the buttons and
       the price stay vertically centred. The inner row's 6px/5px padding + the bar's 1px border make the 72px, with
       the 48px image 12px from the top as before. ict-product-design.js reads the bar's real height for the offsets. */
    .ict-pdp .ict-buybar {
        top: 0;
        min-height: 72px;
        border-bottom: 1px solid var(--pdp-line);
        box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
        transform: translateY(-110%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    .ict-pdp .ict-buybar.is-visible { transform: none; visibility: visible; transition: transform .25s ease; }
    .ict-pdp .ict-buybar-inner {
        gap: 16px;
        min-height: 71px;
        max-width: var(--ict-site-width, 1400px);
        padding: 6px 15px 5px;
    }
    .ict-pdp .ict-buybar .ict-scroll-navigation {
        display: flex;
        gap: 8px;
        padding-right: 16px;
        border-right: 1px solid var(--pdp-line);
    }
    .ict-pdp .ict-buybar .ict-scroll-nav-button {
        width: 44px;
        height: 44px;
        min-height: 44px;
        border: 1px solid var(--pdp-line-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--pdp-brand-dark);
    }
    .ict-pdp .ict-buybar .ict-scroll-nav-button svg { width: 20px; height: 20px; }
    .ict-pdp .ict-sticky-image {
        flex: none;
        width: 48px;
        height: 48px;
        object-fit: contain;
        border: 1px solid var(--pdp-line);
        border-radius: 8px;
        background: #fff;
    }
    .ict-pdp .ict-buybar-summary { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
    /* Full name, wrapped (owner 28/09 evening, task RC2): three lines from 1280px, four below (see the RC2 follow-up
       at the end of this file). The sub line keeps its one line. */
    .ict-pdp .ict-buybar-summary [data-ict-sticky-name] {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: var(--pdp-ink);
        font-weight: 600;
        overflow-wrap: break-word;
    }
    .ict-pdp .ict-sticky-sub { display: flex; min-width: 0; overflow: hidden; color: var(--pdp-ink-2); white-space: nowrap; text-overflow: ellipsis; }
    .ict-pdp .ict-sticky-sub > span:empty,
    .ict-pdp .ict-sticky-sub > span[hidden] { display: none; }
    .ict-pdp .ict-sticky-sub > span:not(:empty) ~ span:not(:empty)::before { content: "\00a0·\00a0"; color: var(--pdp-ink-3); }
    .ict-pdp .ict-sticky-sub [data-ict-sticky-stock] { color: var(--pdp-ok); }
    .ict-pdp .ict-sticky-sub [data-ict-sticky-stock][data-unavailable="true"] { color: var(--pdp-ink-3); }
    /* Task ST: "Hàng đặt trước" / "Liên hệ báo giá" in the status blue, as next to the rating. */
    .ict-pdp:not(.ict-pdp-rental) .ict-buybar:is([data-ict-offer-state="backorder"], [data-ict-offer-state="quote"]) .ict-sticky-sub [data-ict-sticky-stock] { color: var(--pdp-brand-dark); }
    .ict-pdp .ict-sticky-price { display: flex; flex: none; flex-direction: column; align-items: flex-end; margin: 0; color: var(--pdp-ink-2); white-space: nowrap; }
    .ict-pdp .ict-sticky-price strong { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; }
    .ict-pdp .ict-sticky-qty {
        display: grid;
        flex: none;
        grid-template-columns: 36px 52px 36px;
        height: 44px;
        overflow: hidden;
        border: 1px solid var(--pdp-line-strong);
        border-radius: 10px;
        background: #fff;
    }
    .ict-pdp .ict-sticky-qty button { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: #fff; color: var(--pdp-ink); }
    .ict-pdp .ict-sticky-qty button:hover:not(:disabled) { background: var(--pdp-line-soft); }
    .ict-pdp .ict-sticky-qty button:disabled { color: var(--pdp-line-strong); }
    .ict-pdp .ict-sticky-qty button svg { width: 16px; height: 16px; }
    .ict-pdp .ict-sticky-qty input { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-inline: 1px solid var(--pdp-line); text-align: center; font-weight: 600; color: var(--pdp-ink); }
    .ict-pdp .ict-buybar .ict-button { flex: none; height: 44px; padding: 0 16px; }
    .ict-pdp .ict-buybar .ict-sticky-buy,
    .ict-pdp .ict-buybar .ict-button-primary.ict-state-button { order: 1; width: 200px; }
    .ict-pdp .ict-buybar .ict-sticky-buy small { display: none; }
    /* Owner 28/09 (PC design sticky bar): a filled 16px bolt before the label, one row, white on red. */
    .ict-pdp .ict-buybar .ict-sticky-buy { flex-direction: row; gap: 8px; }
    .ict-pdp .ict-buybar .ict-sticky-buy > svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
    .ict-pdp .ict-buybar .ict-sticky-add,
    .ict-pdp .ict-buybar .ict-button-outline.ict-state-button { order: 2; width: 170px; }
    .ict-pdp .ict-buybar .ict-button-primary.ict-state-button small { display: none; }
    .ict-pdp .ict-buybar-contact { display: none; }
}

/* RC2 follow-up: below 1440px the fixed 200/170px buttons and the quantity stepper left the name about 100px at
   1024px, so a long name was cut after three lines. Here the buttons fit their label, and below 1280px the stepper
   (it only mirrors the buy box's quantity) steps aside: the name column stays >= ~325px there, where the longest
   names (~5% of the catalogue, up to 122 characters) need a fourth line, so the clamp is 4 below 1280px (bar 112px
   for those names only). From 1280px three lines hold every name. 1440px and up keep the design's fixed widths. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .ict-pdp .ict-buybar :is(.ict-sticky-buy, .ict-sticky-add, .ict-button-primary.ict-state-button, .ict-button-outline.ict-state-button) { width: auto; min-width: 128px; }
}
/* D7 (29/09): the bar's Menu / Home buttons went (the pinned header has them), which gives the name ~130px back; from
   1200px that is enough for the stepper again (the 122-character names take at most 3 lines there, measured at
   1200/1240/1279), so it hides only below 1200px, where the column would drop to ~300px and the longest names would
   need all 4 lines with nothing to spare. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .ict-pdp .ict-buybar .ict-sticky-qty { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .ict-pdp .ict-buybar-summary [data-ict-sticky-name] { -webkit-line-clamp: 4; }
}

/* Review 29/09 D7 (owner agreed): computers keep the compact site header pinned (ict-desktop-navigation.css); the buy bar
   sits right under it (ict-product-design.js writes the header's height to --ict-header-h) and the tab bar under the buy
   bar (--ict-sticky-top = header + bar, as before). The header carries the menu and home links, so the bar's own
   Menu / Home buttons go on computers. Jumps that the browser scrolls itself (expanded blocks folding back, anchors)
   land below the whole stack: --ict-scroll-offset = header + bar + tabs + 24px (was the fixed 132px). */
@media (min-width: 1024px) {
    .ict-pdp .ict-buybar { top: var(--ict-header-h, 0px); }
    .ict-pdp .ict-buybar .ict-scroll-navigation { display: none; }
    .ict-pdp .ict-detail-section [id],
    .ict-pdp [data-ict-expandable] { scroll-margin-top: var(--ict-scroll-offset, 132px); }
}

@media (max-width: 1023.98px) {
    .ict-pdp .ict-buybar {
        top: auto;
        bottom: 0;
        z-index: 99;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--pdp-line);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, .1);
    }
    .ict-pdp .ict-buybar-inner { gap: 8px; align-items: stretch; height: 48px; }
    .ict-pdp .ict-buybar :is(.ict-scroll-navigation, .ict-sticky-image, .ict-buybar-summary, .ict-sticky-price, .ict-sticky-qty) { display: none; }
    .ict-pdp .ict-buybar-contact { order: 1; flex: 0 0 52px; }
    .ict-pdp .ict-buybar .ict-button { height: 48px; padding: 4px 8px; }
    .ict-pdp .ict-buybar .ict-sticky-add,
    .ict-pdp .ict-buybar .ict-button-outline.ict-state-button { order: 2; flex: 1 1 0; }
    .ict-pdp .ict-buybar .ict-sticky-buy,
    .ict-pdp .ict-buybar .ict-button-primary.ict-state-button { order: 3; flex: 1.3 1 0; }
    /* "Thêm vào giỏ" has no cart icon at any width (owner 28/09, PC design too): buybar.blade.php renders none. */
    .ict-pdp .ict-buybar .ict-sticky-buy > svg { display: none; }
    .ict-pdp .ict-buybar .ict-button-primary small { display: block; }
    /* Rental, out of stock: "Liên hệ đặt hàng" already opens the contact sheet, so the small contact button goes.
       Sale (Task ST, v2 template): [Liên hệ] [SP thay thế] [BÁO KHI CÓ HÀNG]; the small "Liên hệ" is the contact button
       there, so the outline "Liên hệ đặt hàng" (PC bar) and the bell stay off. X1 (owner 29/09): a pre-order has the
       in-stock bar [Liên hệ] [Thêm vào giỏ] [ĐẶT TRƯỚC + total]. */
    .ict-pdp-rental .ict-buybar:is([data-ict-offer-state="out"], [data-ict-offer-state="backorder"]) .ict-buybar-contact { display: none; }
    .ict-pdp .ict-buybar[data-ict-offer-state] .ict-state-button.ict-state-contact,
    .ict-pdp .ict-buybar .ict-state-notify > svg { display: none; }
    /* Verifier 28/09, quote state: [Liên hệ] [NHẬN BÁO GIÁ + "Phản hồi trong giờ làm việc"], two buttons like the other
       phone bars (the v2 template draws no quote bar). "Liên hệ" already opens the hotline list, so the PC bar's outline
       "Gọi 0915 426 099" stays off here and the red button takes the rest of the row (276px at 360: the sub-line fits). */
    .ict-pdp .ict-buybar[data-ict-offer-state="quote"] .ict-state-call { display: none; }
    body.ict-dialog-open .ict-pdp .ict-buybar { visibility: hidden; }
}

/* C20: sticky tabs. PC: white 52px bar under the sticky buy bar; phone: 48px row under the header, scrolls sideways. */
.ict-pdp nav.ict-product-tabs {
    position: sticky;
    top: var(--ict-sticky-top, 0px);
    z-index: 20;
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0 0 16px;
    background: #fff;
    scrollbar-width: none;
}
.ict-pdp nav.ict-product-tabs::-webkit-scrollbar { display: none; }
.ict-pdp nav.ict-product-tabs > a {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    color: var(--pdp-ink-2);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ict-pdp nav.ict-product-tabs > a > svg { display: none; }
.ict-pdp nav.ict-product-tabs > a:hover { color: var(--pdp-ink); }
.ict-pdp nav.ict-product-tabs > a.is-active,
.ict-pdp nav.ict-product-tabs > a[aria-current="true"] { color: var(--pdp-brand-dark); box-shadow: inset 0 -2px 0 var(--pdp-brand); }
.ict-pdp nav.ict-product-tabs .ict-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--pdp-line-soft);
    color: var(--pdp-ink-2);
    font-weight: 600;
}
.ict-pdp nav.ict-product-tabs .ict-tab-count.has-items { background: var(--pdp-tint); color: var(--pdp-brand-dark); }
.ict-pdp nav.ict-product-tabs .ict-scroll-navigation { display: none; }
@media (min-width: 1024px) {
    .ict-pdp nav.ict-product-tabs { height: 52px; padding: 0 12px; border-radius: 12px; box-shadow: 0 1px 0 var(--pdp-line); }
}
@media (max-width: 1023.98px) {
    .ict-pdp nav.ict-product-tabs {
        height: 48px;
        margin: 0;
        padding: 0 8px;
        overflow-x: auto;
        border-bottom: 1px solid var(--pdp-line);
        border-radius: 0;
    }
    .ict-pdp nav.ict-product-tabs > a { padding: 0 12px; }
}

/* C36: add-to-cart toast with "Xem giỏ ›". */
.ict-pdp .ict-product-toast:not([hidden]) {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid var(--pdp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pdp-ink);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28);
    transform: translateX(-50%);
    animation: ict-pdp-toast-in .2s ease-out;
}
.ict-pdp .ict-product-toast .ict-toast-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pdp-ok);
    color: #fff;
}
.ict-pdp .ict-product-toast .ict-toast-icon svg { width: 14px; height: 14px; }
.ict-pdp .ict-product-toast > span:not(.ict-toast-icon) { display: flex; flex-direction: column; min-width: 0; }
.ict-pdp .ict-product-toast strong { color: var(--pdp-ink); font-weight: 600; }
.ict-pdp .ict-product-toast small { color: var(--pdp-ink-2); }
.ict-pdp .ict-product-toast small:empty { display: none; }
.ict-pdp .ict-toast-action:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: -12px 0 -12px auto;
    padding: 12px 0 12px 12px;
    border-left: 1px solid var(--pdp-line);
    color: var(--pdp-brand-dark);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
@keyframes ict-pdp-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 1023.98px) {
    .ict-pdp .ict-product-toast:not([hidden]) { bottom: calc(64px + 20px + env(safe-area-inset-bottom)); }
}

/* v2 mobile (27/09): M5 sticky tabs, M6 rental bottom bar, M7 lightbox and toast. */
@media (max-width: 1023.98px) {
    /* Tabs: the 1px rule is a shadow under the sticky row.
       M1 (owner 29/09): every tab fits one phone screen (5 on sale pages, 4 on rental pages): the tabs share the row
       (each grows from its label + 2px a side, so the gaps shrink with the screen: the five labels take ~310px); no "0"
       pill while nothing is counted; and no menu + home pair in the row any more,
       pinned or not (the sticky site header right above has both; the pair stays hidden by the base rule above). A real
       count ("Đánh giá 36") can still push the row past the screen: the row then scrolls and its right edge fades
       (data-ict-tabs-more, ict-product-design.js); the text is never shrunk. */
    .ict-pdp nav.ict-product-tabs { gap: 0; padding: 0 4px; border-bottom: 0; box-shadow: 0 1px 0 var(--pdp-line); }
    .ict-pdp nav.ict-product-tabs > a { flex: 1 1 auto; justify-content: center; padding: 0 2px; }
    .ict-pdp nav.ict-product-tabs .ict-tab-count:not(.has-items) { display: none; }
    .ict-pdp nav.ict-product-tabs[data-ict-tabs-more]::after {
        content: "";
        position: sticky;
        right: 0;
        flex: none;
        width: 32px;
        margin-left: -32px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 75%);
        pointer-events: none;
    }

    /* Rental bottom bar: [Liên hệ] [Đặt lịch xem máy] [THUÊ NGAY]; "Thêm vào giỏ" stays in the purchase sheet. */
    .ict-pdp-rental .ict-buybar .ict-sticky-add { display: none; }
    .ict-pdp .ict-buybar .ict-buybar-visit {
        order: 2;
        flex: 1 1 0;
        display: grid;
        place-items: center;
        min-height: 48px;
        padding: 4px 8px;
        border: 2px solid var(--pdp-brand);
        border-radius: 10px;
        background: #fff;
        color: var(--pdp-brand-dark);
        font-weight: 700;
        text-align: center;
        white-space: normal;
    }
    .ict-pdp .ict-buybar:is([data-ict-offer-state="quote"], [data-ict-offer-state="out"], [data-ict-offer-state="backorder"]) .ict-buybar-visit { display: none; }

    /* Lightbox: full-screen dark viewer, a 56px top bar with a round close button, the caption as a pill over the
       bottom of the image (fixed: the dialog has no transform), a 64px thumb strip; swiping replaces the arrows.
       The legacy phone sizes for the close button and thumbs were pruned; the image keeps its legacy 100%/auto
       size rule (that rule is what cancels the top-level desktop size on phones). */
    .ict-pdp .ict-lightbox { padding: 56px 0 96px; color: #fff; }
    .ict-pdp .ict-lightbox-title { left: 0; right: 0; height: 56px; padding: 0 10px 0 12px; justify-content: flex-end; }
    .ict-pdp .ict-lightbox .ict-lightbox-close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
    .ict-pdp .ict-lightbox-title [data-ict-lightbox-caption] {
        position: fixed;
        left: 50%;
        bottom: calc(96px + 12px);
        z-index: 1;
        flex: none;
        width: max-content;
        max-width: calc(100vw - 32px);
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .72);
        color: #fff;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .ict-pdp .ict-lightbox [data-ict-lightbox-content] { max-width: none; }
    .ict-pdp .ict-lightbox [data-ict-lightbox-content] > img { max-height: 100%; object-fit: contain; }
    .ict-pdp .ict-lightbox-nav { left: 0; right: 0; bottom: 0; gap: 0; padding: 12px 16px 20px; }
    .ict-pdp .ict-lightbox-nav > .ict-icon-button { display: none; }
    .ict-pdp .ict-lightbox-thumbs { flex: 1 1 auto; justify-content: safe center; gap: 8px; max-width: none; padding: 0; }
    .ict-pdp .ict-lightbox-thumb { flex: 0 0 64px; width: 64px; height: 64px; border: 2px solid transparent; border-radius: 8px; background: #fff; opacity: .6; }
    .ict-pdp .ict-lightbox-thumb[aria-pressed="true"] { border-color: #fff; opacity: 1; }
    .ict-pdp .ict-lightbox-thumb img { object-fit: cover; }

    /* Toast: dark pill, white text, no icon. */
    .ict-pdp .ict-product-toast:not([hidden]) {
        padding: 12px 18px;
        border: 0;
        border-radius: 12px;
        background: #202733;
        color: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
        text-align: center;
    }
    .ict-pdp .ict-product-toast .ict-toast-icon { display: none; }
    .ict-pdp .ict-product-toast strong,
    .ict-pdp .ict-product-toast small { color: #fff; }
    .ict-pdp .ict-toast-action:not([hidden]) { border-left-color: rgba(255, 255, 255, .25); color: #fff; }
}

@media (min-width: 1024px) {
    /* The rental visit button is phone-only markup (ict-m-only); .ict-buybar .ict-button would otherwise re-show it. */
    .ict-pdp .ict-buybar .ict-buybar-visit { display: none; }
}

/* LB (owner 29/09): tabs of the image viewer — "Ảnh sản phẩm N" · "Ảnh thực tế N" · "Thông số kỹ thuật"
   (partials/product-design/lightbox.blade.php; ict-product-design.js sets data-lb-tabs / data-lb-tab on the dialog).
   Pills 36px high in a 44px touch row (README C): chosen = #fff with #0F172A text, others rgba(255,255,255,.14); the row
   scrolls sideways inside itself when it does not fit (360px phones). With tabs the position pill ("3/10",
   "2/6 · Mặt sau – cổng kết nối") sits bottom-centre at every width. The specs tab shows the page's own spec rows on a
   light panel that scrolls inside the viewer (close button stays in the top bar), without thumbs, arrows or pill.
   Font sizes: ict-type-scale.css "LB tabs". Without tabs (project / article photos) the viewer is as before. */
.ict-pdp .ict-lb-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.ict-pdp .ict-lb-tabs::-webkit-scrollbar { display: none; }
.ict-pdp .ict-lb-tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    min-height: 0; /* .ict-pdp button sets 40px */
    margin: 4px 0;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    white-space: nowrap;
    box-shadow: none;
}
/* 44px touch area around the 36px pill. */
.ict-pdp .ict-lb-tab::after { content: ""; position: absolute; inset: -4px 0; }
.ict-pdp .ict-lb-tab[aria-pressed="true"] { background: #fff; color: #0F172A; }
.ict-pdp .ict-lb-tab:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .24); color: #fff; }
.ict-pdp .ict-lb-tab:focus-visible { outline: 2px solid #0E7CC0; outline-offset: -2px; }
.ict-pdp .ict-lb-tab-count { opacity: .7; }
.ict-pdp .ict-lightbox[data-lb-tabs] .ict-lightbox-title { gap: 8px; }
.ict-pdp .ict-lightbox[data-lb-tabs] [data-ict-lightbox-caption]:empty { display: none; }
.ict-pdp .ict-lightbox[data-lb-tab="specs"] .ict-lightbox-nav,
.ict-pdp .ict-lightbox[data-lb-tab="specs"] [data-ict-lightbox-caption] { display: none; }
.ict-pdp .ict-lightbox[data-lb-tab="specs"] [data-ict-lightbox-content] { max-width: none; }
/* HF 29/09 (owner, image 75: "chưa có đủ option"): the specs tab is a white card — header (thumbnail 56px, product name,
   "Mã sản phẩm: …", outline "Sao chép thông số"), a "Cấu hình" row with one pill per configuration of the page's picker
   (the shown one blue like the picker's chosen card; viewing only), then the rows in two columns (label muted, value
   normal) scrolling inside the card, under the fixed header. The card is as tall as its rows, at most the viewer.
   ict-product-design.js lightboxSpecs(); sizes in ict-type-scale.css "HF 29/09 LB specs card". */
.ict-pdp .ict-lb-specs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    background: #fff;
    color: #202733;
    text-align: left;
}
.ict-pdp .ict-lightbox[data-lb-tab="specs"] [data-ict-lightbox-content] { display: flex; align-items: center; justify-content: center; }
.ict-pdp .ict-lb-specs-head { display: flex; align-items: center; gap: 16px; flex: none; padding: 20px 24px 12px; }
.ict-pdp .ict-lb-specs-thumb { flex: none; width: 56px; height: 56px; padding: 2px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; object-fit: contain; }
.ict-pdp .ict-lb-specs-title { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ict-pdp .ict-lb-specs-name { color: #0F172A; overflow-wrap: anywhere; }
.ict-pdp .ict-lb-specs-sku { color: #475569; overflow-wrap: anywhere; }
.ict-pdp .ict-lb-specs-sku b { color: #0F172A; }
.ict-pdp .ict-lb-specs-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 8px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    color: #0A4EA8;
    white-space: nowrap;
    box-shadow: none;
}
.ict-pdp .ict-lb-specs-copy:hover { background: #F8FAFC; border-color: #0E7CC0; }
.ict-pdp .ict-lb-specs-copy svg { flex: none; width: 18px; height: 18px; }
.ict-pdp .ict-lb-specs-copy[data-copied] { border-color: #16A34A; color: #15803D; }
.ict-pdp .ict-lb-specs-configs { display: flex; align-items: center; gap: 12px; flex: none; padding: 0 24px 16px; }
.ict-pdp .ict-lb-specs-configs-label { flex: none; color: #475569; }
.ict-pdp .ict-lb-specs-pills { position: relative; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ict-pdp .ict-lb-spec-pill {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
    color: #202733;
    white-space: nowrap;
    box-shadow: none;
}
.ict-pdp .ict-lb-spec-pill:hover { border-color: #90D0EE; }
.ict-pdp .ict-lb-spec-pill[aria-pressed="true"] { border-color: #0E7CC0; background: #F0F7FC; color: #0E7CC0; box-shadow: inset 0 0 0 1px #0E7CC0; }
.ict-pdp :is(.ict-lb-specs-copy, .ict-lb-spec-pill):focus-visible { outline: 2px solid #0E7CC0; outline-offset: 2px; }
.ict-pdp .ict-lb-specs-status { flex: none; margin: 0 24px 12px; color: #B45309; }
.ict-pdp .ict-lb-specs-status:empty { display: none; }
.ict-pdp .ict-lb-specs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 12px; border-top: 1px solid #E2E8F0; }
.ict-pdp .ict-lb-specs-body:focus-visible { outline: 2px solid #0E7CC0; outline-offset: -2px; }
.ict-pdp .ict-lb-specs .ict-specifications tr { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; padding: 12px 0; }
.ict-pdp .ict-lb-specs .ict-specifications tr:last-child { border-bottom: 0; }
.ict-pdp .ict-lb-specs-clip { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

@media (min-width: 1024px) {
    .ict-pdp .ict-lightbox[data-lb-tabs] .ict-lightbox-title [data-ict-lightbox-caption] {
        position: fixed;
        left: 50%;
        bottom: 100px;
        z-index: 1;
        flex: none;
        width: max-content;
        max-width: calc(100vw - 32px);
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .72);
        color: #fff;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .ict-pdp .ict-lightbox[data-lb-tab="specs"] { padding-bottom: 40px; }
    .ict-pdp .ict-lightbox[data-lb-tab="specs"] [data-ict-lightbox-content] { width: min(800px, 100%); height: 100%; }
}

@media (max-width: 1023.98px) {
    .ict-pdp .ict-lightbox[data-lb-tab="specs"] { padding-bottom: 12px; }
    /* HF 29/09: the card fills the viewer width with 16px gutters; the pills scroll sideways in one row (the chosen one
       is scrolled into view), the copy button keeps its icon (label read by screen readers, shown as "Đã chép"). */
    .ict-pdp .ict-lightbox[data-lb-tab="specs"] [data-ict-lightbox-content] { width: 100%; height: 100%; padding: 0 16px; align-items: flex-start; }
    .ict-pdp .ict-lb-specs-head { gap: 12px; padding: 16px 16px 12px; }
    .ict-pdp .ict-lb-specs-thumb { width: 48px; height: 48px; }
    .ict-pdp .ict-lb-specs-copy { position: relative; width: 44px; height: 44px; padding: 0; }
    .ict-pdp .ict-lb-specs-copy .ict-lb-specs-copy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* "Đã chép" shows as a small green tag under the icon, so the name column keeps its width. */
    .ict-pdp .ict-lb-specs-copy[data-copied] .ict-lb-specs-copy-label { top: calc(100% + 4px); right: 0; z-index: 1; width: auto; height: auto; overflow: visible; clip: auto; padding: 2px 8px; border-radius: 6px; background: #15803D; color: #fff; }
    .ict-pdp .ict-lb-specs-configs { gap: 10px; padding: 0 0 12px 16px; }
    .ict-pdp .ict-lb-specs-pills { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 16px; }
    .ict-pdp .ict-lb-specs-pills::-webkit-scrollbar { display: none; }
    .ict-pdp .ict-lb-spec-pill { height: 36px; padding: 0 12px; }
    .ict-pdp .ict-lb-specs-status { margin: 0 16px 12px; }
    .ict-pdp .ict-lb-specs-body { padding: 0 16px 8px; }
    .ict-pdp .ict-lb-specs .ict-specifications tr { grid-template-columns: 118px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; }
}

/* LB tabs (owner 29/09): phones show the short label "Thông số" so all three tabs fit at 360px. */
/* Phones also drop "Ảnh " from the two photo tabs ("Sản phẩm 10", "Thực tế 6") and use 10px side padding: at 390px the
   full labels overflowed the row too; the text stays "Ảnh sản phẩm 10" for tests and screen readers (first letter capitalised by CSS). */
@media (max-width: 479.98px) {
    .ict-pdp .ict-lb-tab-long { display: none; }
    .ict-pdp .ict-lb-tab { padding: 0 10px; }
    .ict-pdp .ict-lb-tab-cap { display: inline-block; }
    .ict-pdp .ict-lb-tab-cap::first-letter { text-transform: uppercase; }
}

/* ---- 70-mobile.css ---- */
/* 70-mobile.css - P5 chỉ mobile: sheet, popup, thứ tự khối, thẻ thông tin v2, lưới số lượng, B2B, thay thế, đặc điểm.
   Rules: no !important, no font-size/line-height (sizes live in ict-type-scale.css section 12),
   mobile-only inside @media (max-width:1023.98px), desktop-only inside @media (min-width:1024px). */

@media (max-width: 1023.98px) {
    /* THU-TU-KHOI (phone, v2 27/09): the hero, its two columns and the buy box are display:contents, so every block of the
       page is a flex item of the container and is ordered by CSS alone (no DOM moves, no layout shift).
       Sale: gallery 1 → heading 2 → purchase 3 (X3: the replacements are its part after the price frame) → B2B 7 → note 8
       → gifts 9 → features 10/11 → accessories 12
       → trust 13 → use-cases 14 → tabs (40). Rental: … software 4 → Thuê kèm 5 → replacements 6 → B2B 7 → buy option 8
       → trust 10 → policy 12 → features 13/14 → accessories 15 → 4 bước 16 → dự án 17 → tabs. */
    .ict-pdp > .ict-pdp-container { display: flex; flex-direction: column; gap: 8px; }
    .ict-pdp > .ict-pdp-container > * { order: 40; margin-bottom: 0; }
    .ict-pdp > .ict-pdp-container > .ict-hero { display: contents; margin: 0; }
    .ict-pdp .ict-hero > .ict-hero-media,
    .ict-pdp .ict-hero > .ict-buybox { display: contents; }
    .ict-pdp .ict-hero-media > *,
    .ict-pdp .ict-buybox > * { order: 9; margin: 0; }
    .ict-pdp .ict-hero-media > .ict-gallery { order: 1; }
    .ict-pdp .ict-buybox > .ict-product-heading { order: 2; }
    .ict-pdp .ict-buybox > [data-ict-purchase-home] { order: 3; }
    .ict-pdp .ict-buybox > .ict-rental-software { order: 4; }
    .ict-pdp .ict-buybox > .ict-business-contact { order: 7; }
    .ict-pdp .ict-buybox > :is(.ict-rental-buy-option, .ict-purchase-note) { order: 8; }
    .ict-pdp:not(.ict-pdp-rental) .ict-hero-media > :is(.ict-gifts, .ict-filler-promo) { order: 9; }
    .ict-pdp:not(.ict-pdp-rental) .ict-buybox > .ict-feature-summary { order: 10; }
    .ict-pdp:not(.ict-pdp-rental) .ict-buybox > .ict-feature-expand { order: 11; }
    .ict-pdp:not(.ict-pdp-rental) > .ict-pdp-container > .ict-accessories { order: 12; }
    .ict-pdp:not(.ict-pdp-rental) > .ict-pdp-container > .ict-trust-strip { order: 13; }
    .ict-pdp:not(.ict-pdp-rental) > .ict-pdp-container > #use-cases { order: 14; }
    .ict-pdp-rental > .ict-pdp-container > .ict-request-services { order: 5; }
    .ict-pdp-rental .ict-buybox > .ict-replacements { order: 6; }
    .ict-pdp-rental > .ict-pdp-container > .ict-trust-strip { order: 10; }
    .ict-pdp-rental > .ict-pdp-container > #use-cases { order: 11; }
    .ict-pdp-rental .ict-hero-media > :is(.ict-gifts, .ict-filler-promo) { order: 12; }
    .ict-pdp-rental .ict-buybox > .ict-feature-summary { order: 13; }
    .ict-pdp-rental .ict-buybox > .ict-feature-expand { order: 14; }
    .ict-pdp-rental > .ict-pdp-container > .ict-accessories { order: 15; }
    .ict-pdp-rental > .ict-pdp-container > #rental-process { order: 16; }
    .ict-pdp-rental > .ict-pdp-container > #rental-projects { order: 17; }
    /* v2: the three-line assurance filler has no place on phones (its content is in the chips and the trust strip). */
    .ict-pdp .ict-hero-media > .ict-filler-promo { display: none; }

    /* M1 info card (v2): chips + share/compare → H1 → ★ rating | ● stock, then the price frame. The meta row is
       display:contents so its children sit on the card's grid without moving in the DOM (tests pin the DOM).
       Column 1 is sized by the rating only (chips and title span both columns), so stock sits right after it. */
    .ict-pdp .ict-buybox > .ict-product-heading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 10px;
        column-gap: 0;
        padding: 14px 16px 10px;
        background: #fff;
    }
    .ict-pdp .ict-product-heading > .ict-product-meta { display: contents; }
    .ict-pdp .ict-product-heading .ict-product-meta > .ict-kickers {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
        border: 0;
    }
    /* Phone review 28/09 (P2): no "|" before the chips. 20-hero.css draws the PC divider on `.ict-stock + .ict-kickers`,
       which still matches here (the meta row is display:contents, the DOM keeps them adjacent) and outranks the rule
       above. The 1×14 bar between rating and stock (below) stays. */
    .ict-pdp .ict-product-heading .ict-product-meta > .ict-stock + .ict-kickers:not(:empty) { padding-left: 0; border-left: 0; }
    /* Owner 28/09: no share/compare pair on phones (the markup is gone too) — the chip row takes the full width, in the
       order "Mới 100% · Full VAT · BH 36 tháng · Hàng chính hãng" (product labels such as HOT after them). */
    .ict-pdp .ict-kickers > .ict-kicker-condition { order: 1; }
    .ict-pdp .ict-kickers > .ict-kicker-vat { order: 2; }
    .ict-pdp .ict-kickers > .ict-kicker-warranty { order: 3; }
    .ict-pdp .ict-kickers > .ict-kicker-origin { order: 4; }
    .ict-pdp .ict-kickers > .ict-kicker-label { order: 5; }
    /* Phone review 28/09 (P2): plain wrapping, so each line fills the card width (balance left ~60px empty at the right). */
    .ict-pdp .ict-product-heading > .product_title { grid-column: 1 / -1; grid-row: 2; margin: 0; text-wrap: wrap; }
    .ict-pdp .ict-product-heading > .product_title a { text-wrap: wrap; }
    .ict-pdp .ict-product-heading .ict-product-meta > .ict-rating:not([hidden]) { grid-column: 1; grid-row: 3; align-self: center; padding: 12px 0; margin: -12px 0; }
    .ict-pdp .ict-product-heading .ict-product-meta > .ict-stock { grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: center; padding-left: 0; border-left: 0; }
    /* After a visible rating: column 2, with the 1×14 #CBD5E1 bar of the design 12px either side. */
    .ict-pdp .ict-product-heading .ict-product-meta > .ict-rating:not([hidden]) + .ict-stock {
        grid-column: 2;
        margin-left: 12px;
        padding-left: 13px;
        border-left: 0;
        background: linear-gradient(var(--pdp-line-strong), var(--pdp-line-strong)) 0 50% / 1px 14px no-repeat;
    }
    /* Hidden on phones (kept in the DOM for the tests): SKU chip (the SKU is the first specs row), brand/origin chip
       ("CHO THUÊ THIẾT BỊ" on rentals). Phone review 28/09 (P2): the rental "Có hợp đồng" chip shows again next to
       "Máy đẹp 95%" (the policy line no longer repeats it). */
    .ict-pdp .ict-product-meta > .ict-sku-chip:not([hidden]),
    .ict-pdp.ict-pdp-rental .ict-kickers > .ict-rental-kicker { display: none; }

    /* The price frame reads as part of the info card; the configuration card follows after the 8px grey gap. */
    .ict-pdp .ict-buybox > [data-ict-purchase-home] { margin-top: -8px; background: #fff; }
    .ict-pdp [data-ict-purchase-home] > .ict-purchase-panel { display: flex; flex-direction: column; gap: 0; }
    .ict-pdp [data-ict-purchase-home] .ict-price-box { margin: 0 16px 16px; }
    /* The bottom bar opens the sheet; quantity is already on the page, so the extra sheet link goes. */
    .ict-pdp [data-ict-purchase-home] .ict-variant-heading .ict-sheet-link { display: none; }
    .ict-pdp [data-ict-purchase-home] :is(.ict-model-picker, .ict-variant-picker) { margin: 0; padding: 16px; border-top: 8px solid var(--pdp-bg); background: #fff; }
    .ict-pdp [data-ict-purchase-home] .ict-model-picker + .ict-variant-picker { border-top: 0; }
    .ict-pdp [data-ict-purchase-home] .ict-order-controls { padding: 0 16px 16px; }
    .ict-pdp [data-ict-purchase-home] :is(.ict-price-box, .ict-oos-note) + .ict-order-controls { padding-top: 16px; border-top: 8px solid var(--pdp-bg); }
    /* Task ST (v2 template "Hết hàng"): the out-of-stock row follows the price frame inside the info card, after a 1px
       #F1F5F9 rule (drawn 8px under the frame by 20-hero.css's ::before). */
    .ict-pdp [data-ict-purchase-home] .ict-purchase-panel > .ict-oos-note:not([hidden]) { margin: 0 16px 16px; }
    .ict-pdp [data-ict-purchase-home] .ict-purchase-panel > .ict-oos-note::before { top: -9px; }
    /* Task ST: in the out / quote states nothing on the page copy of the form is left to show on phones (quantity and
       buttons are hidden, the design drops the delivery lines), so the empty block goes; the purchase sheet keeps its
       copy. X1 (owner 29/09): a sale pre-order keeps "Số lượng" + stepper like an in-stock offer. */
    .ict-pdp:not(.ict-pdp-rental) :is([data-ict-offer-state="out"], [data-ict-offer-state="quote"]) [data-ict-purchase-home] .ict-order-controls { display: none; }
    .ict-pdp .ict-variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ict-pdp .ict-variant-card { padding: 10px 12px; }

    /* M3 (v2): under the configuration grid a 1px rule, then one row [Số lượng + two delivery lines | stepper 132×44];
       the buttons live in the bottom bar. Scoped to the page copy: the sheet moves .ict-purchase-panel out of
       [data-ict-purchase-home], and the rental form keeps its own layout (40-rental.css). */
    .ict-pdp [data-ict-purchase-home] .ict-variant-picker:not([hidden]) { padding-bottom: 12px; }
    .ict-pdp [data-ict-purchase-home] .ict-variant-picker:not([hidden]) + .ict-order-controls form { padding-top: 12px; border-top: 1px solid var(--pdp-line-soft); }
    .ict-pdp [data-ict-purchase-home] .ict-cta-row { display: block; margin-top: 16px; }
    .ict-pdp [data-ict-purchase-home] .ict-purchase-buttons { display: none; }
    .ict-pdp .ict-cta-row > .ict-quantity-row { align-items: center; justify-content: space-between; gap: 12px; }
    .ict-pdp .ict-cta-row > .ict-quantity-row > label { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0; color: var(--pdp-ink); font-weight: 600; white-space: normal; }
    .ict-pdp .ict-cta-row .ict-quantity { flex: none; width: 144px; min-height: 44px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
    /* Owner 28/09 (same defect as the rental steppers): style.css fixes `.quantity .qty` at width 28px !important, which
       leaves the value at the start of the middle cell; min-width wins over width, so the input takes the whole cell. */
    .ict-pdp .ict-order-controls .ict-quantity .qty { min-width: 100%; text-align: center; }
    .ict-pdp .ict-ship-line { grid-template-columns: 18px minmax(0, 1fr); row-gap: 4px; }
    .ict-pdp .ict-ship-line > a { grid-column: 2; justify-self: start; padding: 6px 0; margin: -6px 0; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-order-controls form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
    }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-order-controls form > * { grid-column: 1 / -1; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-cta-row,
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-cta-row > .ict-quantity-row { display: contents; }
    /* B11/B12/B13 still apply: no quantity row when nothing can be bought (display:contents above would unhide it). */
    .ict-pdp :is([data-ict-offer-state="quote"], [data-ict-offer-state="out"]) [data-ict-purchase-home] .ict-cta-row > .ict-quantity-row,
    .ict-pdp-rental [data-ict-offer-state="backorder"] [data-ict-purchase-home] .ict-cta-row > .ict-quantity-row { display: none; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-cta-row > .ict-quantity-row > label { grid-column: 1; align-self: end; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-cta-row .ict-quantity { grid-column: 2; grid-row: span 2; align-self: center; width: 132px; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-cta-row .ict-quantity .qty { border-left: 1px solid var(--pdp-line); border-right: 1px solid var(--pdp-line); }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] form > .ict-ship-line {
        grid-column: 1;
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 0;
        margin: 0;
    }
    /* D1 (owner 29/09): the delivery time is said once, in the price frame (p.ict-price-ship, 20-hero.css); under
       "Số lượng" only "Đặt lịch xem máy ›" stays. The sentence stays in the HTML (PC reads it; tests pin the hooks). */
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] form > .ict-ship-line > :is(svg, .ict-ship-text) { display: none; }
    /* "So sánh 4 phiên bản ›" is a 22px-tall link: pad it to a 44px touch target without moving the heading row. */
    .ict-pdp [data-ict-purchase-home] .ict-variant-heading .ict-compare-all { padding: 11px 0; margin: -11px 0; }
    /* v2: no instalment link while the product is out of stock (phones; PC keeps today's behaviour). */
    .ict-pdp [data-ict-offer-state="out"] .ict-price-box > .ict-finance-link { display: none; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] form > .ict-ship-line > a { padding: 12px 0; margin: -6px 0 -12px; }

    /* M3 (v2): the B2B card sits inside the configuration card as a 1px #CBD5E1 frame (drawn by ::after inside the
       full-bleed white block; a.ict-business-contact stays a direct child of .ict-buybox). No subtitle on phones. */
    .ict-pdp .ict-buybox > :is(.ict-replacements, .ict-rental-software) { margin: 0 16px; }
    .ict-pdp .ict-buybox > .ict-business-contact {
        position: relative;
        margin: -8px 0 0;
        padding: 20px 28px 28px;
        border: 0;
        border-radius: 0;
        background: #fff;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        column-gap: 10px;
    }
    .ict-pdp .ict-buybox > .ict-business-contact::after {
        content: "";
        position: absolute;
        inset: 8px 16px 16px;
        border: 1px solid var(--pdp-line-strong);
        border-radius: 12px;
        pointer-events: none;
    }
    .ict-pdp .ict-buybox > .ict-business-contact:hover { background: #fff; }
    .ict-pdp .ict-buybox > .ict-business-contact:hover::after { border-color: var(--pdp-brand); }
    .ict-pdp .ict-business-contact > .ict-heading-icon { width: 18px; height: 18px; background: transparent; }
    .ict-pdp .ict-business-contact > .ict-heading-icon svg { width: 18px; height: 18px; }
    .ict-pdp .ict-business-contact small { display: none; }
    /* Phone review 28/09 (P2): "Nhận báo giá dành / cho doanh nghiệp" — the Blade wraps the tail in a span (default title only). */
    .ict-pdp .ict-business-contact .ict-business-title-tail { display: block; }
    /* Rental: the card follows "Thuê kèm" after the usual 8px gap, so it is its own white block (M3 reverted, owner
       29/09: "quay lại layout cũ" — the B2B card and "Muốn mua hẳn" are back, 40-rental.css). */
    .ict-pdp-rental .ict-buybox > .ict-business-contact { margin: 0; padding: 28px; }
    .ict-pdp-rental .ict-buybox > .ict-business-contact::after { inset: 16px; }

    /* M3 (v2) / Task ST: out of stock — "Sản phẩm thay thế tham khảo" as its own white card listing rows
       [64px image | name, price · stock | ›] (v2 template); the whole row is the link. No note line on phones (the
       template has none; every row states its own stock). */
    .ict-pdp .ict-buybox > .ict-replacements:not([hidden]) { gap: 4px; margin: 0; padding: 16px 16px 6px; border: 0; border-radius: 0; background: #fff; }
    /* X3 (owner 29/09, sale pages): the list is the last part of the purchase panel in the DOM (PC: under the buttons);
       on phones it comes right after the price frame and the out-of-stock row, before "Chọn cấu hình" and the form, as
       its own white card after the 8px grey gap (the configuration card keeps its own gap below it). The purchase sheet
       never shows it (the panel travels into the sheet only to buy an offer that is not out of stock). */
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-purchase-panel > * { order: 2; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-purchase-panel > :is(.ict-price-box, .ict-oos-note) { order: 0; }
    .ict-pdp:not(.ict-pdp-rental) [data-ict-purchase-home] .ict-purchase-panel > .ict-replacements { order: 1; }
    .ict-pdp .ict-purchase-panel > .ict-replacements:not([hidden]) { gap: 4px; margin: 0; padding: 16px 16px 6px; border: 0; border-top: 8px solid var(--pdp-bg); border-radius: 0; background: #fff; }
    .ict-pdp .ict-buy-dialog .ict-purchase-panel > .ict-replacements { display: none; }
    .ict-pdp .ict-replacements-head { padding-bottom: 6px; }
    .ict-pdp .ict-replacements-note { display: none; }
    .ict-pdp .ict-replacement-list { display: flex; flex-direction: column; gap: 0; }
    .ict-pdp .ict-replacement-card {
        grid-template-columns: 64px minmax(0, 1fr) 16px;
        column-gap: 12px;
        align-items: center;
        padding: 10px 0;
        border: 0;
        border-top: 1px solid var(--pdp-line-soft);
        border-radius: 0;
    }
    .ict-pdp .ict-replacement-card:hover { box-shadow: none; }
    .ict-pdp .ict-replacement-card > img { width: 64px; height: 64px; border: 1px solid var(--pdp-line); }
    .ict-pdp .ict-replacement-card::after {
        content: "";
        width: 16px;
        height: 16px;
        background: var(--pdp-ink-3);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* M4 (v2): feature summary — white full-bleed card, no icon and no product-name line, the 44px bordered "Xem thêm"
       pulled into the card (10px under the text, 16px above the card edge) when the expander is needed. */
    .ict-pdp .ict-buybox > .ict-feature-summary { padding: 16px; border: 0; border-radius: 0; }
    /* The collapsed card is a fixed box (JS: max-height = data-ict-collapse-limit, overflow hidden) and legacy
       `.ict-pdp .ict-expand-button` forces `margin: 14px 16px` (shared with the article button, so it is not pruned).
       So the card pulls the button over its last 12px (-34 = 12 + 8 gap + 14 margin) and the button paints the white
       card continuation around itself (::before: 22px above = gap + margin, 16px sides, 14px below → the next block
       keeps an 8px gap). Expanded, the card adds padding so the text keeps 14px to the button.
       P2 (28/09): that white strip starts 34px above the card edge (12 overlap + 22), so it hides whatever text sits in
       the card's last 34px. Collapsed, JS ends the card 34px under the 7th feature item (six items readable, 22px to
       the button); expanded, 34px of padding keeps the last line clear of it (26px cut 8px off the descenders). */
    .ict-pdp .ict-buybox > .ict-feature-summary:has(+ .ict-feature-expand:not([hidden])) { margin-bottom: -34px; }
    .ict-pdp .ict-buybox > .ict-feature-summary[data-ict-collapsed="false"]:has(+ .ict-feature-expand:not([hidden])) { padding-bottom: 34px; }
    .ict-pdp .ict-feature-summary > :is(h2, h3) { margin: 0 0 10px; }
    .ict-pdp .ict-feature-summary > :is(h2, h3) .ict-heading-icon,
    .ict-pdp .ict-feature-summary .ict-feature-name { display: none; }
    .ict-pdp .ict-buybox > .ict-feature-expand:not([hidden]) {
        position: relative;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: calc(100% - 32px);
        min-height: 44px;
        margin: 14px 16px;
        padding: 0 12px;
        border: 1px solid var(--pdp-line-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--pdp-brand-dark);
        font-weight: 600;
    }
    /* Offsets count from the padding box, hence +1px for the button border (P2: 16px left a 1px grey line at both page
       edges). */
    .ict-pdp .ict-buybox > .ict-feature-expand:not([hidden])::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -23px -17px -15px;
        background: #fff;
    }
    /* Phone review 28/09 (P2): that white ::before (z-index -1 inside the button's own stacking context) is painted over
       the button's border, so the bordered button read as a bare "Xem thêm" link. Outlines paint last, so the frame is an
       outline over the border (::after is the legacy chevron). Keyboard focus keeps a ring (ict-product-design.css). */
    .ict-pdp .ict-buybox > .ict-feature-expand:not([hidden]) { outline: 1px solid var(--pdp-line-strong); outline-offset: -1px; }
    .ict-pdp .ict-buybox > .ict-feature-expand:not([hidden]):focus-visible { outline: 3px solid #1B98E0; outline-offset: 3px; }
    .ict-pdp .ict-feature-summary[data-ict-collapsed="true"] { position: relative; }
    .ict-pdp .ict-feature-summary[data-ict-collapsed="true"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 32px;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }

    /* C23: purchase sheet. Body = variants → steppers → tiers; footer = total + buttons. */
    .ict-pdp .ict-buy-dialog .ict-price-box,
    .ict-pdp .ict-buy-dialog .ict-model-picker,
    .ict-pdp .ict-buy-dialog .ict-ship-line { display: none; }
    .ict-pdp .ict-buy-dialog .ict-purchase-panel { display: flex; flex-direction: column; gap: 0; }
    .ict-pdp .ict-buy-dialog .ict-variant-picker { padding: 16px; border-top: 0; }
    .ict-pdp .ict-buy-dialog .ict-order-controls {
        position: sticky;
        bottom: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--pdp-line);
        background: #fff;
    }
    /* Sheet footer order: steppers → software summary → Tạm tính → buttons → notes. */
    .ict-pdp .ict-buy-dialog .ict-order-controls form { display: flex; flex-direction: column; }
    .ict-pdp .ict-buy-dialog .ict-order-controls form > * { order: 8; }
    .ict-pdp .ict-buy-dialog .ict-order-controls form > :is(.ict-rental-duration, .ict-colors) { order: 1; }
    .ict-pdp .ict-buy-dialog .ict-cta-row { display: contents; }
    .ict-pdp .ict-buy-dialog .ict-cta-row > .ict-quantity-row { order: 2; margin: 0 0 12px; }
    .ict-pdp .ict-buy-dialog .ict-order-controls form > .ict-sheet-software-summary { order: 3; }
    .ict-pdp .ict-buy-dialog .ict-order-controls form > .ict-sheet-total { order: 4; }
    .ict-pdp .ict-buy-dialog .ict-cta-row > .ict-purchase-buttons { order: 5; }
    .ict-pdp .ict-buy-dialog .ict-order-controls form > .ict-quantity-note { order: 6; }
    .ict-pdp .ict-buy-dialog .ict-sheet-total:not([hidden]) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 12px;
        color: var(--pdp-ink-2);
    }
    .ict-pdp .ict-buy-dialog .ict-sheet-total strong { color: var(--pdp-price); font-weight: 800; font-variant-numeric: tabular-nums; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
    /* Task ST: the sheet keeps [outline | red] (30-purchase.css sets 1.3fr/1fr for the page row) and has no stock row. */
    .ict-pdp:not(.ict-pdp-rental) .ict-buy-dialog[data-ict-offer-state] .ict-purchase-buttons { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .ict-pdp .ict-buy-dialog .ict-purchase-panel > .ict-oos-note { display: none; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons > .ict-button { min-height: 48px; border-radius: 12px; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons > .ict-button-primary { order: 2; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons > .ict-button-outline { order: 1; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons > .ict-button-outline svg { display: none; }
    .ict-pdp .ict-buy-dialog .ict-purchase-buttons > .ict-button-primary small { display: none; }
}

@media (min-width: 1024px) {
    /* PC right column: the card holds the heading, the purchase panel and the blocks moved out of the form. */
    .ict-pdp .ict-buybox { gap: 16px; }
    .ict-pdp .ict-purchase-panel { gap: 20px; }
    /* X3 (owner 29/09): the sale replacement list is now the panel's last part (for the phone order); on PC it keeps the
       buy box's 16px under the buttons, as before the move. */
    .ict-pdp .ict-purchase-panel > .ict-replacements:not([hidden]) { margin-top: -4px; }
    .ict-pdp .ict-buybox > .ict-product-heading { gap: 10px; }
    /* B08: the button row sits one panel gap under the cards (≤ y 718 at 1366×768, as measured on the prototype). */
    .ict-pdp [data-ict-purchase-home] .ict-cta-row { margin-top: 0; }
}

/* T4 (owner 29/09): phones give the small controls a tap area of at least 44 x 44 through a transparent ::after layer;
   text, icons and spacing do not change.
   - Steppers (quantity, rental period / machines, rental add-ons "Thuê kèm"): the frame used to clip its buttons to its
     rounded corners (overflow: hidden), which would clip the layer too; the frame stops clipping and the end buttons
     round their own outer corners (frame radius 10 - 1px border), so a pressed/hover grey still stops at the curve.
   - Stepper end buttons narrower than 44px (40px in "Thuê kèm"): the layer grows outwards only ("−" to the left, "+" to
     the right), so it never covers the number in the middle.
   - "Đặt lịch xem máy ›" on rental pages (32px): the layer grows downwards (2px above the link box, into the empty
     leading under the "Giao máy …" text, as in the card's mock), 44px tall, ending exactly at the top of the next row
     ("Đã gồm phần mềm …", 10px under the link box) so it takes no tap from it. The sale page link is already 44px
     (padding, rules above).
   - "So sánh các bản ›" in the Barebone hint and the cross-sell check boxes: a 44px layer centred on the control.
   - Table of contents: the layer covers the whole entry row (number, text, the half gaps to the next rows; li is the
     containing block). The rows keep their spacing, so a one-line entry stays a 22px-tall (full-width) target; two-line
     entries get 44px. A full 44px for one-line entries needs 44px rows (a spacing change): asked the owner 29/09. */
@media (max-width: 1023.98px) {
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) { overflow: visible; }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button { position: relative; }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button:first-child { border-radius: 9px 0 0 9px; }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button:last-child { border-radius: 0 9px 9px 0; }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button::after,
    .ict-pdp .ict-variant-hint a::after,
    .ict-pdp .ict-accessory-select::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button:first-child::after { left: auto; right: 0; transform: translateY(-50%); }
    .ict-pdp :is(.ict-order-controls .ict-quantity, .ict-rental-control-grid .ict-quantity, .ict-rental-stepper, .ict-service-stepper) > button:last-child::after { left: 0; transform: translateY(-50%); }
    .ict-pdp .ict-variant-hint a,
    .ict-pdp .ict-accessory-select { position: relative; }
    .ict-pdp-rental .ict-ship-line > a { position: relative; }
    .ict-pdp-rental .ict-ship-line > a::after { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 44px; }
    .ict-pdp #ict-product-article .toc > ol > li { position: relative; }
    .ict-pdp #ict-product-article .toc > ol > li > a::after { content: ""; position: absolute; inset: -1.5px 0; }
}

/* ---- 80-heading-levels.css ---- */
/* 80-heading-levels.css - Review 29/09 T1 (owner agreed): heading levels only, the page looks exactly as before.
   Only the seven main sections of a product page stay <h2> (Chọn cấu hình / hình thức thuê, Thông số, So sánh, Bài viết,
   Đánh giá, Hỏi đáp, Sản phẩm tương tự). Small blocks are <h3> (their cards and steps <h4>); dialog and popup titles are
   bold text (div.ict-dialog-title, .ict-dialog-label, .ict-dialog-subtitle); the article's own headings are printed one
   level lower (App\Support\TableOfContents::render(…, 1)).
   The pdp-redesign rules of those blocks now name both elements (`:is(h2, h3)`); the legacy sheets' dialog / card rules
   were pointed at the new elements in place. This file restores what the old element got only from the generic heading
   rules (bootstrap, style.css, ict-review-20260918.css, the old `.ict-pdp h2/h3` defaults, ict-readability.css), which
   cannot be edited. Sizes, line heights, weights and the article colours (legacy !important) are in ict-type-scale.css,
   block "Review 29/09 — group P3 (part b)". Rules: no !important, no font-size / line-height. */

/* Section headers now <h3> (use cases, why ICT, rental add-ons): ict-readability.css centred the old h2 (flex items). */
.ict-pdp :is(.ict-use-cases, .ict-why-ict, .ict-request-services) .ict-section-header h3 { align-items: center; }

/* Use-case cards <h4>: the old h3 took its colour from `.ict-pdp h3` and no bottom margin (bootstrap gives h4 .5rem). */
.ict-pdp .ict-use-case h4 { margin-bottom: 0; color: var(--ict-ink); }

/* Article: new h3 = the author's h2 (the yellow bar, margins), new h4 = the author's h3 (margins). The article's intro
   heading (.ict-article-introduction > h3) was already an h3 and keeps its own rules. */
.ict-pdp #ict-product-article h3:not(.ict-article-introduction > h3) { margin: 24px 0 14px; padding-left: 5px; border-left: 5px solid #ffb627; }
.ict-pdp #ict-product-article h4 { margin: 20px 0 12px; }
@media (max-width: 1023.98px) {
    .ict-pdp #ict-product-article h3:not(.ict-article-introduction > h3) { margin: 20px 0 10px; text-wrap: wrap; }
    .ict-pdp #ict-product-article h4 { margin: 16px 0 8px; text-wrap: wrap; }
}

/* Dialog titles and labels (div): colour and weight the old `.ict-pdp h2/h3` gave them where the sheet sets none. */
.ict-pdp .ict-buy-dialog .ict-dialog-title,
.ict-pdp .ict-related-dialog-details .ict-dialog-title { color: var(--ict-ink); }
/* `.ict-finance-period > div` lays out the month buttons as a flex row; the "Chọn kỳ hạn" label is a div now. */
.ict-pdp .ict-finance-period > .ict-dialog-label { display: block; gap: normal; }