/* Liên kết Penci (17/10/2026) — CSS riêng của cụm components/penci, mọi class tiền tố .hv3-penci-.
   Nạp bởi Hv3Penci::renderAssets() chỉ khi công tắc bật. Không đụng token / rule dùng chung. */

/* ── Tab "Thiết kế trực tuyến" trang SP: nút ĐÈ lên góc phải dưới banner cũ ──
   Không được thêm chiều cao cho khung: 3 khung file xếp chồng cùng 1 ô grid (.hv3-file-panels) — khung cao hơn làm
   tab "Đã có file" / "Yêu cầu thiết kế" bị chừa khoảng trắng. .hv3-penci-host do penci.js gắn (dự phòng cho :has). */
.box-lib-dsv2x:has(> .hv3-penci-tab),
.box-lib-dsv2x.hv3-penci-host { position: relative; }
.hv3-penci-tab { position: absolute; right: 16px; bottom: 16px; z-index: 2; margin: 0; padding: 0; }
.hv3-penci-tab__btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
    background: #fff; color: var(--hv3-button-green, #207F5D);
    font-family: 'Arial Web Head', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2;
    box-shadow: 0 6px 18px -6px rgba(16, 40, 30, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hv3-penci-tab__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(16, 40, 30, .5); }
.hv3-penci-tab__btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.hv3-penci-tab__arrow { font-size: 16px; }

/* Trạng thái cùng sản phẩm: nằm trong kích thước banner có sẵn, không làm các tab file bị dư khoảng trắng. */
.hv3-penci-host.has-penci-design > a,
.hv3-penci-host.has-penci-design > .hv3-penci-tab { visibility: hidden; pointer-events: none; }
.hv3-penci-product {
    --hv3-penci-accent: #00AFCB;
    position: absolute; inset: 0; box-sizing: border-box; z-index: 3;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: 12px 14px; border: 1px solid #CEE9EF; border-radius: 14px;
    background: #F2FBFD; color: #59636F; font-size: 13px; line-height: 1.45; overflow: auto;
    box-shadow: 0 3px 12px rgba(16, 24, 40, .025);
    scrollbar-width: thin; scrollbar-color: #B5DCE6 transparent;
}
.hv3-penci-product__head { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.hv3-penci-product__head > strong { flex: 1; min-width: 0; color: #007E94; white-space: nowrap; overflow: visible; padding-left: 4px; }
.hv3-penci-product__head > strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hv3-penci-product__row { display: flex; align-items: center; gap: 10px; min-height: 40px; flex-shrink: 0; }
#sanpham-inan-quote-simple .hv3-penci-product .hv3-penci-product__img,
.hv3-penci-product__img { display: block; width: auto; height: auto; max-width: 48px; max-height: 44px; flex: 0 0 auto; border-radius: 6px; background: #fff; }
.hv3-penci-product__img[hidden] { display: none; }
.hv3-penci-product__previews { display: flex; gap: 8px; flex: 0 1 auto; max-width: 100%; min-width: 64px; overflow-x: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #B5DCE6 transparent; }
.hv3-penci-product__preview { display: flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 56px; border-radius: 6px; background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,175,203,.12); }
#sanpham-inan-quote-simple .hv3-penci-product .hv3-penci-product__preview .hv3-penci-product__img { max-width: 64px; max-height: 56px; }
.hv3-penci-product__preview:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: -2px; }
.hv3-penci-product__preview:hover { box-shadow: inset 0 0 0 1px var(--hv3-penci-accent); }
.hv3-penci-product__placeholder { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; color: #007E94; background: #E4F7FB; font-weight: 700; }
.hv3-penci-product__info { flex: 1; min-width: 0; }
.hv3-penci-product__info b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; }
.hv3-penci-product__info span { display: block; font-size: 11px; }
.hv3-penci-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hv3-penci-product__primary { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 7px; background: #207F5D; color: #fff; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.hv3-penci-product__primary:hover { background: #196B4E; color: #fff; text-decoration: none; }
.hv3-penci-product__primary--brand { gap: 6px; border: 1px solid var(--hv3-penci-accent); background: var(--hv3-penci-accent); color: #fff; }
.hv3-penci-product__primary--brand:hover { background: #0097B0; border-color: #0097B0; color: #fff; }
.hv3-penci-product__button-logo { display: block; width: 44px; height: 17px; object-fit: contain; flex: 0 0 44px; }
.hv3-penci-product__primary--brand .hv3-penci-product__button-logo { filter: brightness(0) invert(1); }
.hv3-penci-product__new { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; border: 1px solid #B8DFE8; border-radius: 8px; background: #fff; color: #007E94; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; text-align: center; text-decoration: none; }
.hv3-penci-product__new:hover { background: #E5F5F9; border-color: var(--hv3-penci-accent); color: #006A80; text-decoration: none; }
.hv3-penci-product__primary:disabled, .hv3-penci-product__new:disabled { opacity: .65; cursor: not-allowed; }
.hv3-penci-product button:focus-visible, .hv3-penci-product a:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }

/* ── Dòng giỏ pc_* ── */
/* Toast của Penci (penci.js toast() gắn data-hv3-penci-toast) trên SP demo: nền tối, chữ thoáng, điểm nhấn nhỏ.
   22/10: chỉ toast Penci — toast "Đã thêm vào giỏ hàng" của nút Thêm vào giỏ giữ giao diện gốc như trang SP thật. */
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 6px 12px;
    box-sizing: border-box; width: 370px; max-width: calc(100vw - 32px);
    padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    background: rgba(20,22,26,.92); color: #F0F3F6; font-size: 13px; font-weight: 400; line-height: 1.6;
    box-shadow: 0 10px 30px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.08);
}
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast])::before {
    content: ''; grid-column: 1; grid-row: 1; width: 26px; height: 26px; border-radius: 8px;
    background: rgba(32,197,223,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2361DEEF' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 9v4m0-7h.01'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) .hv3-toast__msg { grid-column: 2; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) .hv3-toast__action {
    grid-column: 2; justify-self: start; padding: 4px 10px; border-radius: 6px;
    background: rgba(255,255,255,.09); color: #6DE3F4; font-size: 12px; font-weight: 600; line-height: 1.5;
}
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) .hv3-toast__action:hover { background: rgba(255,255,255,.15); color: #A2F1FC; }
body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) .hv3-toast__action:focus-visible { outline: 2px solid #00AFCB; outline-offset: 3px; }
@media (max-width: 767px) {
    body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) { right: 16px; padding: 12px; gap: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    body:has([data-hv3-penci-tab]) > .hv3-toast:has([data-hv3-penci-toast]) { transition: none; transform: none; }
}

.hv3-penci-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; }
.hv3-penci-line__logo { display: block; width: auto; height: 20px; }
.hv3-penci-line__tag { padding: 2px 8px; border-radius: 999px; background: #E4F7EC; color: var(--hv3-button-green, #207F5D); }
.hv3-penci-line__btn {
    border: 1px solid var(--hv3-button-green, #207F5D); border-radius: 999px; padding: 3px 12px; cursor: pointer;
    background: #fff; color: var(--hv3-button-green, #207F5D); font-size: 13px;
}
.hv3-penci-line__btn[disabled] { opacity: .6; cursor: progress; }
.hv3-penci-line__btn--edit { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; color: #207F5D; border-color: #D5E8DF; border-radius: 6px; background: #F5FAF7; box-shadow: none; }
/* 26/10: về từ editor (?penci=D) — giữ khung chờ có sẵn của giỏ tới khi đồng bộ xong (penci.js cartVeil), tránh nháy 2 lần.
   Class riêng hv3-penci-syncing, không đụng is-loading của giỏ chung. */
body #hv3-gh.hv3-penci-syncing .hv3-gh__skeleton { display: flex; }
body #hv3-gh.hv3-penci-syncing .hv3-gh__grid { display: none; }
#hv3-gh .hv3-gh__line-media.hv3-penci-media { flex-direction: column; height: auto; gap: 8px; }
#hv3-gh .hv3-penci-media > .hv3-penci-line { justify-content: center; width: 100%; margin-top: 0; }
#hv3-gh .hv3-penci-media .hv3-penci-line__err { font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.hv3-penci-line__btn--edit:hover, .hv3-penci-line__btn--edit:focus-visible { background: #E7F3EC; border-color: #A5CDB8; outline: none; box-shadow: none; }
.hv3-penci-line__btn--edit:focus { outline: none; box-shadow: none; }
.hv3-penci-line__err { color: #c0392b; flex-basis: 100%; }

/* ── Giỏ: dòng vừa thêm / cập nhật từ Penci (penci.js gắn 3,5 giây) ── */
.hv3-gh__line.hv3-penci-flash { box-shadow: inset 0 0 0 2px var(--hv3-button-green, #207F5D); background-color: #F3FBF6; transition: box-shadow .3s ease, background-color .3s ease; }

/* Giỏ: lời nhắc nhỏ sau nhóm cùng loại SP, không phải một dòng đặt hàng / mẫu đã có. */
.hv3-penci-open { margin: 4px 0; padding: 8px 12px; border: 1px solid #9ADAE8; border-left: 3px solid #00AFCB; border-radius: 8px; background: #E0F5FA; color: #4B6269; font-size: 12px; line-height: 1.5; }
.hv3-penci-open__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hv3-penci-open__name { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.hv3-penci-open__logo { display: block; width: 52px; height: 20px; object-fit: contain; flex: 0 0 52px; }
.hv3-penci-open__brand { color: #008FA8; font-weight: 700; }
.hv3-penci-open__name b { font-weight: 600; }
.hv3-penci-open__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv3-penci-open .hv3-penci-line__btn { font-size: 12px; border-color: #008FA8; color: #007D94; }
.hv3-penci-open__skip { border: 0; background: none; padding: 3px 6px; cursor: pointer; color: var(--hv3-muted, #8a8a93); font-size: 13px; text-decoration: underline; }

@media (max-width: 767px) {
    .hv3-penci-tab { right: 10px; bottom: 10px; }
    .hv3-penci-tab__btn { padding: 7px 12px; font-size: 13px; gap: 6px; }
    .hv3-penci-tab__arrow { font-size: 14px; }
    .hv3-penci-product { padding: 10px 12px; gap: 8px; font-size: 12px; }
    .hv3-penci-host.has-penci-design { min-height: 156px; }
    .hv3-penci-product__foot { align-items: stretch; gap: 8px; margin-top: auto; }
    .hv3-penci-product__foot > .hv3-penci-product__primary { flex: 1; min-width: 0; }
    .hv3-penci-product__foot > .hv3-penci-product__new { flex: 0 0 auto; padding-inline: 10px; }
    .hv3-penci-product__primary { min-height: 34px; box-sizing: border-box; }
}

/* ── 19/10 tối: chỉnh UI ──
   1) Khung trạng thái trên banner (desktop): ảnh + chữ + nút cùng 1 hàng → vừa ô banner 112px, hết thanh cuộn.
   2) Khung ảnh giữ kích thước đều; ảnh bên trong dùng kích thước tự nhiên, chỉ giới hạn max-width/max-height, không crop/upscale.
   3) Chấm trạng thái xanh Penci, vòng lan nhẹ; chữ tiêu đề cắt riêng để không cắt hiệu ứng. */
.hv3-penci-product__head > strong { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.hv3-penci-product__head > strong::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--hv3-penci-accent); animation: hv3-penci-status-pulse 1.3s cubic-bezier(.24, .6, .35, 1) infinite; }
@keyframes hv3-penci-status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0,175,203,.4); }
    55%, 100% { box-shadow: 0 0 0 7px rgba(0,175,203,0); }
}
.box-lib-dsv2x .hv3-penci-product__row > .hv3-penci-product__img {
    max-width: 44px; max-height: 44px; padding: 2px; box-sizing: border-box;
    border: 1px solid #D5EEF3; border-radius: 8px; background: #fff;
}
.box-lib-dsv2x .hv3-penci-product__preview { border-radius: 8px; box-shadow: inset 0 0 0 1px #D5EEF3; overflow: hidden; }
.hv3-penci-product__info { line-height: 1.4; }
.hv3-penci-product__info b { color: #4A4A4A; font-family: 'Arial Web Head', Arial, sans-serif; }
.hv3-penci-product__info span { color: #667C83; margin-top: 3px; }
.hv3-penci-product__primary { min-height: 40px; padding: 9px 14px; border-radius: 9px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,143,168,.12); transition: background-color .15s ease, box-shadow .15s ease; }
.hv3-penci-product__primary:hover { box-shadow: 0 3px 8px rgba(0,143,168,.18); }
.hv3-penci-product__new { font-weight: 600; white-space: nowrap; }
@media (min-width: 768px) {
    .hv3-penci-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 20px; row-gap: 8px; padding: 14px 18px; }
    .hv3-penci-product__head { grid-column: 1; grid-row: 1; min-width: 0; }
    .hv3-penci-product__row { grid-column: 1; grid-row: 2; min-width: 0; min-height: 44px; }
    .hv3-penci-product__foot { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .hv3-penci-product__primary { transition: none; }
    .hv3-penci-product__head > strong::before { animation: none; }
}
/* Ô banner hẹp (màn 768–1200px: banner chỉ ~460×83px) → chế độ gọn theo độ rộng ô (container query; trình duyệt cũ: giữ cuộn như trước). */
@media (min-width: 768px) {
    .box-lib-dsv2x.hv3-penci-host { container-type: inline-size; container-name: hv3penci; }
    @container hv3penci (max-width: 600px) {
        .hv3-penci-product { padding: 7px 12px; row-gap: 4px; column-gap: 12px; }
        .hv3-penci-product__head { min-height: 16px; font-size: 12px; }
        .hv3-penci-product__row { flex-basis: 120px; min-height: 40px; gap: 8px; }
        #sanpham-inan-quote-simple .hv3-penci-product .hv3-penci-product__img,
        .box-lib-dsv2x .hv3-penci-product__row > .hv3-penci-product__img { max-width: 40px; max-height: 40px; }
        .box-lib-dsv2x .hv3-penci-product__preview { width: 60px; flex-basis: 60px; height: 44px; }
        #sanpham-inan-quote-simple .hv3-penci-product .hv3-penci-product__preview .hv3-penci-product__img { max-width: 60px; max-height: 44px; }
        .hv3-penci-product__previews { max-width: 100%; padding: 0; }
        .hv3-penci-product__info b, .hv3-penci-product__info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hv3-penci-product__foot { gap: 2px; }
        .hv3-penci-product__primary { min-height: 32px; padding: 6px 12px; }
        .hv3-penci-product__new { min-height: 28px; padding: 4px 8px; }
    }
}

/* ── Giỏ hàng: bấm ảnh thiết kế để phóng to (20/10, penci.js wrapZoom/openZoom; khung .hv3-modal của modal-shell.css) ── */
.hv3-penci-zoom { position: relative; display: block; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; cursor: zoom-in; }
.hv3-penci-zoom:focus-visible { outline: 2px solid #00AFCB; outline-offset: 2px; }
.hv3-penci-zoom__icon {
    position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.92); color: #00AFCB;
    box-shadow: 0 1px 3px rgba(16,24,40,.18); pointer-events: none; transition: transform .15s ease, opacity .15s ease;
}
.hv3-penci-zoom:hover .hv3-penci-zoom__icon { transform: scale(1.12); }
/* 20/10: máy có chuột — icon phóng to chỉ hiện khi rê / focus bàn phím; máy cảm ứng giữ icon làm dấu hiệu bấm được */
@media (hover: hover) {
    .hv3-penci-zoom__icon { opacity: 0; }
    .hv3-penci-zoom:hover .hv3-penci-zoom__icon, .hv3-penci-zoom:focus-visible .hv3-penci-zoom__icon { opacity: 1; }
}
.hv3-penci-zoombox { position: fixed; inset: 0; z-index: var(--hv3-modal-z, 1080); display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 48px; background: rgba(12, 18, 30, .88); backdrop-filter: blur(5px); }
.hv3-penci-zoombox[hidden] { display: none !important; }
.hv3-penci-zoombox { animation: hv3-penci-viewer-in .2s ease-out both; }
.hv3-penci-zoombox__img { animation: hv3-penci-image-in .26s cubic-bezier(.2, .85, .3, 1.02) both; }
.hv3-penci-zoombox.is-closing { animation: hv3-penci-viewer-out .15s ease-in both; }
.hv3-penci-zoombox.is-closing .hv3-penci-zoombox__img { animation: hv3-penci-image-out .15s ease-in both; }
@keyframes hv3-penci-viewer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hv3-penci-viewer-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hv3-penci-image-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes hv3-penci-image-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.97); } }
.hv3-penci-zoombox__box { width: auto; height: auto; max-width: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
.hv3-penci-zoombox__title { display: none; }
.hv3-penci-zoombox__frame { padding: 0; background: none; }
/* Ảnh giữ kích thước tự nhiên: chỉ thu nhỏ khi vượt màn hình, không kéo đầy khung. */
.hv3-penci-zoombox__img { display: block; width: auto; height: auto; max-width: calc(100vw - 96px); max-height: calc(100dvh - 96px); border-radius: 12px; }
.hv3-penci-zoombox__nav { position: fixed; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 0; line-height: 0; cursor: pointer; }
.hv3-penci-zoombox__nav svg { display: block; flex: none; width: 16px; height: 16px; margin: 0; }
.hv3-penci-zoombox__nav.is-prev { left: 10px; }
.hv3-penci-zoombox__nav.is-next { right: 10px; }
.hv3-penci-zoombox__nav:hover { color: #008CA5; border-color: #98DCE7; }
.hv3-penci-zoombox__nav[hidden], .hv3-penci-zoombox__thumbs[hidden] { display: none !important; }
.hv3-penci-zoombox.has-pages { padding-bottom: 92px; }
.hv3-penci-zoombox.has-pages .hv3-penci-zoombox__img { max-height: calc(100dvh - 160px); }
.hv3-penci-zoombox__footer { position: fixed; bottom: 16px; left: 12px; right: 12px; display: flex; justify-content: center; pointer-events: none; }
.hv3-penci-zoombox__thumbs { display: flex; gap: 8px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: thin; pointer-events: auto; }
.hv3-penci-zoombox__thumb { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; width: auto; height: auto; padding: 0; border: 1px solid #ffffff45; border-radius: 5px; background: transparent; overflow: hidden; cursor: pointer; }
.hv3-penci-zoombox__thumb img { display: block; width: auto; height: auto; max-width: 72px; max-height: 48px; border-radius: 4px; }
.hv3-penci-zoombox__thumb:hover { border-color: #ffffffa6; }
.hv3-penci-zoombox__thumb[aria-pressed="true"] { border-color: #35D2E8; background: #ffffff24; }
.hv3-penci-zoombox__thumb:focus-visible, .hv3-penci-zoombox__nav:focus-visible { outline: 2px solid #35D2E8; outline-offset: 3px; }
.hv3-penci-zoombox .hv3-modal__x { position: fixed; top: 16px; right: 16px; width: 38px; height: 38px; background: #ffffff1f; color: #fff; border: 1px solid #ffffff40; opacity: 1; }
.hv3-penci-zoombox .hv3-modal__x svg { width: 12px; height: 12px; }
.hv3-penci-zoombox__note { display: none; }
@media (max-width: 767px) {
    .hv3-penci-zoombox { padding: 44px 12px; }
    .hv3-penci-zoombox__img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 88px); border-radius: 8px; }
    .hv3-penci-zoombox__nav { width: 30px; height: 30px; }
    .hv3-penci-zoombox__nav.is-prev { left: 4px; }
    .hv3-penci-zoombox__nav.is-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .hv3-penci-zoom__icon { transition: none; }
    .hv3-penci-zoombox, .hv3-penci-zoombox__img,
    .hv3-penci-zoombox.is-closing, .hv3-penci-zoombox.is-closing .hv3-penci-zoombox__img { animation: none; }
}

/* ── 20/10 (lượt 2): khung "Thiết kế trực tuyến" dạng thẻ + hộp thư viện mẫu (penci.js cardHead / renderTemplatesBox / openGallery) ──
   Thẻ nằm đè đúng ô banner (kế thừa .hv3-penci-product: absolute, inset 0 — không thêm chiều cao). Mobile chỉ thêm trong @media. */
.box-lib-dsv2x .hv3-penci-card {
    --hv3-penci-accent: #00AFCB; --hv3-penci-ink: #1D2939; --hv3-penci-line: #DCEEF3;
    display: flex; flex-direction: column; justify-content: center; align-items: stretch; align-content: stretch; gap: 8px;
    padding: 12px 16px; border: 1px solid var(--hv3-penci-line); border-radius: 14px;
    background: linear-gradient(180deg, #F2FBFD 0%, #fff 70%); box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden;   /* 21/10: chuyển màu trên → dưới (trước chéo trái → phải) */
}
.hv3-penci-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.hv3-penci-card__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hv3-penci-card__logo { display: block; width: 46px; height: 18px; flex: 0 0 46px; object-fit: contain; }
.hv3-penci-card__title strong { color: var(--hv3-penci-ink); font-family: 'Arial Web Head', Arial, sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv3-penci-card__sub { flex: 0 0 auto; color: #667085; font-size: 12.5px; white-space: nowrap; }
/* 21/10: huy hiệu số thiết kế trong giỏ, cạnh tiêu đề "Thiết kế của bạn" */
.hv3-penci-card__badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #E3F6FA; color: #00718A; font-family: 'Arial Web Head', Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hv3-penci-card__sub::before { content: '·'; margin: 0 6px 0 2px; color: #98A2B3; }
.hv3-penci-card__link {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0; padding: 4px 2px; border: 0; background: none;
    color: #0088A3; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.hv3-penci-chevron { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.hv3-penci-card__link svg { transition: transform .15s ease; }
.hv3-penci-card__link:hover { color: #006A80; text-decoration: none; }
.hv3-penci-card__link:hover svg { transform: translateX(2px); }
.hv3-penci-card__link:disabled { opacity: .5; cursor: not-allowed; }
.hv3-penci-card .hv3-penci-card__link { gap: 3px; line-height: 20px; }
.hv3-penci-card .hv3-penci-card__link > span,
.hv3-penci-card__cta > span,
.hv3-penci-gdetail__back > span { display: block; font: inherit; }
#sanpham-inan-quote-simple .hv3-penci-card .hv3-penci-card__link > svg,
#sanpham-inan-quote-simple .hv3-penci-card .hv3-penci-card__cta > svg,
.hv3-penci-card .hv3-penci-card__link > svg,
.hv3-penci-card__cta > svg,
.hv3-penci-gdetail__back > svg { display: block; width: 8px; height: 12px; flex: 0 0 8px; margin: 0; transform: none; }
.hv3-penci-card__cta:hover > svg { transform: translateX(2px); }
.hv3-penci-gdetail__back:hover { color: #006A80; }
.hv3-penci-card__body { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* ô ảnh dùng chung: thiết kế trong giỏ / thiết kế dở / mẫu gợi ý */
.hv3-penci-card__tile, .hv3-penci-tpl__item {
    position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
    height: 56px; margin: 0; padding: 0; border: 1px solid #E4E7EC; border-radius: 10px; background: #F2F4F7; overflow: hidden;
    text-decoration: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hv3-penci-card__tile { min-width: 72px; }
/* 21/10: ô ảnh trong giỏ bấm để xem ảnh lớn (hộp phóng to chung). Rê chuột: màng phủ đen mờ + kính lúp trắng giữa ô
   (không nhãn / huy hiệu — đầu thẻ đã ghi "N trong giỏ hàng"). Máy cảm ứng: kính lúp nhỏ nền đen mờ góc dưới phải làm dấu bấm được. */
.hv3-penci-card__tile--zoom { font: inherit; color: inherit; cursor: zoom-in; }
.hv3-penci-card__zoom {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(16,24,40,.25); color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.hv3-penci-card__tile.hv3-penci-card__tile--zoom:hover, .hv3-penci-card__tile.hv3-penci-card__tile--zoom:focus-visible { border-color: #D0D5DD; box-shadow: 0 6px 14px -8px rgba(16,24,40,.35); transform: translateY(-1px); }
.hv3-penci-card__tile--zoom:hover .hv3-penci-card__zoom, .hv3-penci-card__tile--zoom:focus-visible .hv3-penci-card__zoom { opacity: 1; }
.hv3-penci-card__zoom svg { filter: drop-shadow(0 1px 2px rgba(16,24,40,.45)); }
@media (hover: none) {
    .hv3-penci-card__zoom { inset: auto 4px 4px auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(16,24,40,.55); opacity: 1; }
    .hv3-penci-card__zoom svg { width: 11px; height: 11px; }
}
#sanpham-inan-quote-simple .hv3-penci-card .hv3-penci-product__img,
.box-lib-dsv2x .hv3-penci-card .hv3-penci-product__img,
#sanpham-inan-quote-simple .hv3-penci-tpl__item img,
.hv3-penci-tpl__item img { display: block; width: auto; height: auto; max-width: 104px; max-height: 100%; border: 0; border-radius: 0; padding: 0; background: none; }
.hv3-penci-card__tile:hover, .hv3-penci-tpl__item:hover { border-color: var(--hv3-penci-accent); box-shadow: 0 4px 12px -4px rgba(0,143,168,.35); transform: translateY(-1px); }
.hv3-penci-card__tile.is-static { cursor: default; }
.hv3-penci-card__tile.is-static:hover { border-color: #E4E7EC; box-shadow: none; transform: none; }
.hv3-penci-card__tile:focus-visible, .hv3-penci-tpl__item:focus-visible, .hv3-penci-card__add:focus-visible, .hv3-penci-card__cta:focus-visible, .hv3-penci-card__link:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
.hv3-penci-card__tiles { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.hv3-penci-card__tiles::-webkit-scrollbar { display: none; }
/* 21/10: thẻ "thiết kế trong giỏ" cùng bố cục thẻ "Đang thiết kế": ảnh | tên + trạng thái | nút phụ "Thiết kế mới" (viền xanh,
   cùng cao nút chính bên thẻ dở). Ảnh cùng khổ, nền trắng, ảnh nằm gọn (contain); nhiều mẫu thì dải ảnh cuộn ngang, tối đa ~3 ô. */
#sanpham-inan-quote-simple .hv3-penci-card__body--cart .hv3-penci-card__tiles, .hv3-penci-card__body--cart .hv3-penci-card__tiles { flex: 0 0 auto; max-width: none; overflow: visible; }
.hv3-penci-card__more {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; width: 84px; height: 56px;
    border: 1px solid #E4E9EE; border-radius: 10px; background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%); color: #475467;
    font-family: 'Arial Web Head', Arial, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.hv3-penci-card__more:hover { border-color: #D0D5DD; background: #EDF1F4; color: #1D2939; text-decoration: none; }
.hv3-penci-card__more:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
.hv3-penci-card__more .is-narrow, .hv3-penci-card__more.is-narrow-only { display: none; }
/* 21/10: ô "+N" có ảnh → chồng 3 ảnh xếp lớp (sau nghiêng trái, giữa nghiêng phải, trước thẳng; rê chuột xoè thêm) + viên số tối góc dưới phải */
.hv3-penci-card__more.has-stack { position: relative; overflow: hidden; }   /* cùng khổ ô ảnh (84 / 64 khung hẹp / 68 mobile) */
.hv3-penci-card__stack { position: absolute; inset: 0; pointer-events: none; }
#sanpham-inan-quote-simple .hv3-penci-card__layer,
.hv3-penci-card__layer {
    position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 52%; height: auto; max-width: none; max-height: 62%; margin: 0; padding: 0;
    border: 1.5px solid #fff; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.22); transition: transform .2s ease;
}
.hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-12px, -4px) rotate(-17deg); }   /* 21/10: mặc định xoè sẵn (trước chỉ khi rê) */
.hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(12px, -3px) rotate(15deg); }
.hv3-penci-card__layer:nth-child(3) { transform: translate(-50%, -50%) translate(-2px, 0); }
.hv3-penci-card__more.has-stack:hover .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-14px, -5px) rotate(-19deg); }
.hv3-penci-card__more.has-stack:hover .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(14px, -4px) rotate(17deg); }
.hv3-penci-card__count { position: relative; display: flex; align-items: center; justify-content: center; }
.hv3-penci-card__more.has-stack .hv3-penci-card__count {
    position: absolute; right: 3px; bottom: 3px; min-width: 24px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; background: rgba(16,24,40,.8); color: #fff; font-size: 11.5px; line-height: 1; box-shadow: 0 0 0 1.5px #fff;
    transition: background-color .15s ease;
}
.hv3-penci-card__more.has-stack:hover .hv3-penci-card__count { background: #1D2939; }
/* 21/10: khung mẫu — viên số tối mờ, gọn (không viền trắng, chữ nhỏ, kính mờ phía sau) để không lấn chồng ảnh */
.hv3-penci-card--tpl .hv3-penci-card__more.has-stack .hv3-penci-card__count {
    right: 2px; bottom: 2px; height: 19px; padding: 0 7px; background: rgba(16,24,40,.82); color: #fff; font-size: 11px; font-weight: 700;
    box-shadow: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hv3-penci-card--tpl .hv3-penci-card__more.has-stack:hover .hv3-penci-card__count { background: rgba(16,24,40,.82); }   /* 21/10: thường = rê chuột, đen rõ */
.hv3-penci-card__more.has-stack { border-color: #D0D5DD; }
.hv3-penci-card__more.has-stack:hover { border-color: #D0D5DD; color: #fff; box-shadow: 0 6px 14px -8px rgba(16,24,40,.35); }
@media (prefers-reduced-motion: reduce) { .hv3-penci-card__layer, .hv3-penci-card__count { transition: none; } }
/* ô ảnh: "mặt bàn" xám rất nhạt, ảnh thiết kế như tấm thiệp đặt lên (bo nhỏ + bóng mảnh); rê chuột nhấc nhẹ */
.hv3-penci-card__body--cart .hv3-penci-card__tile { width: 84px; min-width: 84px; padding: 6px; border-color: #E4E9EE; background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%); }
#sanpham-inan-quote-simple .hv3-penci-card__body--cart .hv3-penci-product__img,
.box-lib-dsv2x .hv3-penci-card__body--cart .hv3-penci-product__img {
    max-width: 100%; max-height: 100%; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.08), 0 4px 8px -4px rgba(16,24,40,.22);
}
.hv3-penci-card__add {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; box-sizing: border-box;
    height: 40px; padding: 0 16px 0 14px; border: 1px solid #B8E3EC; border-radius: 10px; background: #F0FAFC; color: #00718A;
    font: inherit; font-family: 'Arial Web Head', Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* 21/10: vòng tròn xanh 17px, svg dấu + 13px bên trong, không hiệu ứng */
.hv3-penci-card__add-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--hv3-penci-accent); color: #fff;
}
#sanpham-inan-quote-simple .hv3-penci-card__add-ico svg,
.hv3-penci-card__add-ico svg { display: block; width: 13px; height: 13px; flex: 0 0 13px; }   /* thắng rule chung #sanpham-inan-quote-simple svg (18px) */
.hv3-penci-card__add:hover { border-color: var(--hv3-penci-accent); background: #E3F6FA; box-shadow: 0 4px 12px -6px rgba(0,143,168,.5); }
.hv3-penci-card__add:active { box-shadow: none; }
.hv3-penci-card__body--cart .hv3-penci-card__add { margin-left: auto; }   /* nhiều mẫu không có cột chữ → nút vẫn sát phải */
.hv3-penci-card__add:disabled { opacity: .5; cursor: not-allowed; }
.hv3-penci-card__info { flex: 1; min-width: 0; line-height: 1.4; }
.hv3-penci-card__info b { display: block; color: var(--hv3-penci-ink); font-family: 'Arial Web Head', Arial, sans-serif; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv3-penci-card__info span { display: block; margin-top: 2px; color: #667085; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 21/10: thẻ "Đang thiết kế" — chấm xanh nhấp nháy (quầng loang ra) trước dòng trạng thái: lượt đang mở trên Penci */
.hv3-penci-card__body--open .hv3-penci-card__info span::before {
    content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 2px; border-radius: 50%; background: #12B76A;
    vertical-align: middle; animation: hv3-penci-live 1.8s ease-out infinite;
}
@keyframes hv3-penci-live {
    0% { box-shadow: 0 0 0 0 rgba(18,183,106,.55); }
    70% { box-shadow: 0 0 0 6px rgba(18,183,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); }
}
@media (prefers-reduced-motion: reduce) { .hv3-penci-card__body--open .hv3-penci-card__info span::before { animation: none; box-shadow: 0 0 0 2.5px rgba(18,183,106,.2); } }
.hv3-penci-card__cta {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; box-sizing: border-box; height: 40px; padding: 0 16px;
    border: 1px solid #B8E3EC; border-radius: 10px; background: #F0FAFC; color: #00718A;
    font: inherit; font-family: 'Arial Web Head', Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* 21/10 (lượt 4): nút "Mở lại mẫu đã chọn" cùng kiểu nút "Thiết kế mới" (thẻ trong giỏ) — nền xanh nhạt, viền xanh nhạt, chữ xanh đậm */
.hv3-penci-card__cta:hover { border-color: var(--hv3-penci-accent); background: #E3F6FA; box-shadow: 0 4px 12px -6px rgba(0,143,168,.5); }
.hv3-penci-card__cta:active { box-shadow: none; }
.hv3-penci-card__cta:disabled { opacity: .6; cursor: not-allowed; }
/* 21/10: khung mẫu gợi ý — bỏ băng trượt ‹ ›; hàng mẫu vừa khung (fitRow) + ô "+N" chồng ảnh mở hộp thư viện. */
/* 21/10: khung mẫu gợi ý cao hơn banner để ô mẫu to + tiêu đề thoáng. Chỉ khi khung đang hiện (:not(.ng-hide)) — chuyển sang tab
   "Đã có file" thì khung bị ng-hide, ô lưới về cao cũ, không chừa khoảng trắng. Ô rộng 100, cao 76, cách 6; đầu thẻ cách hàng ô 12. */
@media (min-width: 768px) {
    .box-lib-dsv2x.hv3-penci-host.has-penci-tpl:not(.ng-hide) { min-height: 150px; }
}
.box-lib-dsv2x .hv3-penci-card--tpl { gap: 12px; }
/* 21/10: hàng mẫu `.hv3-penci-tpl__fit` cao cố định 1 hàng, ô rộng theo tỉ lệ ảnh, xếp sát trái thẳng tiêu đề, cách đều 10; mẫu không vừa
   hàng thì xuống dòng và bị cắt (JS fitRow đếm số ô hiện để ghi "+N"). Đệm âm để bóng / nhấc ảnh khi rê không bị cắt. Ô "+N" cuối hàng. */
.hv3-penci-card__body--tpl { gap: 10px; }
.hv3-penci-tpl__fit { --tpl-h: 86px; --tpl-gap: 14px; --tpl-fan: 48px; }   /* biến cao hàng — rule thường để khung hẹp / mobile ghi đè được */
#sanpham-inan-quote-simple .hv3-penci-tpl__fit,
.hv3-penci-tpl__fit {
    box-sizing: content-box; max-width: none; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--tpl-gap, 14px); row-gap: 40px;
    height: var(--tpl-h); margin: -16px -16px -18px; padding: 16px 16px 18px; overflow: hidden;   /* đệm rộng: lớp ảnh nghiêng của "+N" lòi ra không bị cắt */
}
/* .is-cut = mẫu bị bớt (quá số tối đa hoặc để "+N" vừa hàng). Hàng xếp sát trái, khoảng cố định (không trải kín hàng). */
.hv3-penci-tpl__fit .is-cut { display: none; }
.hv3-penci-card--tpl .hv3-penci-tpl__item, .hv3-penci-card--tpl .hv3-penci-card__more { height: var(--tpl-h, 76px); }
.hv3-penci-card--tpl .hv3-penci-card__more { flex: 0 0 auto; width: var(--tpl-h); margin-left: 0; border-color: transparent; background: none; overflow: visible; }   /* JS đặt rộng = ô mẫu đầu; khoảng cách dùng chung gap với các mẫu */
/* 21/10 (lượt sau): bỏ khung nền/viền/đệm quanh ảnh mẫu — ảnh đứng trơn trên nền thẻ (bo 6, bóng như tấm thiệp), rê chuột nhấc ảnh */
.hv3-penci-card--tpl .hv3-penci-tpl__item { flex: 0 0 auto; width: auto; min-width: 0; padding: 0; border-color: transparent; background: none; overflow: visible; cursor: zoom-in; }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-tpl__item img,
.box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-tpl__item img {
    max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.08), 0 8px 16px -8px rgba(16,24,40,.32); transition: transform .18s ease, box-shadow .18s ease;
}
.hv3-penci-card--tpl .hv3-penci-tpl__item:hover, .hv3-penci-card--tpl .hv3-penci-tpl__item:focus-visible { border-color: transparent; box-shadow: none; transform: none; }
.hv3-penci-card--tpl .hv3-penci-tpl__item:hover img, .hv3-penci-card--tpl .hv3-penci-tpl__item:focus-visible img {
    transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 4px 8px rgba(16,24,40,.1), 0 12px 22px -10px rgba(16,24,40,.4);
}
.hv3-penci-card--tpl .hv3-penci-card__more.has-stack, .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:hover { border-color: transparent; background: none; box-shadow: none; overflow: visible; }
/* Trả về quạt 3 ảnh: sau nghiêng trái / phải, ảnh trước thẳng. */
.hv3-penci-card--tpl .hv3-penci-card__stack { left: calc(var(--tpl-fan, 48px) / 2); right: calc(var(--tpl-fan, 48px) / 2); }
.hv3-penci-card--tpl .hv3-penci-card__more.has-stack .hv3-penci-card__count { right: calc(var(--tpl-fan, 48px) / 2 + 2px); pointer-events: none; }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer,
.hv3-penci-card--tpl .hv3-penci-card__layer { width: 100%; height: 100%; max-height: none; object-fit: cover; border-width: 2px; border-radius: 6px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-14px, -3px) rotate(-14deg); }
.hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(14px, -2px) rotate(12deg); }
.hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(3) { transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) {
    .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-17px, -4px) rotate(-16deg); }
    .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(17px, -3px) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { #sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer, .hv3-penci-card--tpl .hv3-penci-card__layer { transition: none; } }
@media (prefers-reduced-motion: reduce) { .box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-tpl__item img { transition: none; } }
.hv3-penci-tpl__item[hidden] { display: none; }
button.hv3-penci-card__more { margin: 0; padding: 0; font: inherit; font-family: 'Arial Web Head', Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
button.hv3-penci-card__more:disabled { opacity: .5; cursor: not-allowed; }
.hv3-penci-card__more .is-m, .hv3-penci-card__more.is-m-only { display: none; }
@media (min-width: 768px) {
    @container hv3penci (max-width: 600px) {
        .box-lib-dsv2x .hv3-penci-card { padding: 7px 12px; gap: 4px; }
        .hv3-penci-card__head { min-height: 18px; }
        .hv3-penci-card__logo { width: 38px; height: 15px; flex-basis: 38px; }
        .hv3-penci-card__title strong { font-size: 13px; }
        .hv3-penci-card__tile, .hv3-penci-tpl__item { height: 42px; }
        .hv3-penci-card__body--cart .hv3-penci-card__tile { width: 64px; min-width: 64px; }
        .hv3-penci-card__more { width: 64px; height: 42px; font-size: 13px; }
        .hv3-penci-card__more.has-stack .hv3-penci-card__count { right: 2px; bottom: 2px; min-width: 20px; height: 16px; padding: 0 4px; font-size: 10.5px; }
        .hv3-penci-card__body--cart .hv3-penci-card__tile { padding: 4px; }
        .hv3-penci-card__body--cart .is-wide-only, .hv3-penci-card__more .is-wide { display: none; }
        .hv3-penci-card__more.is-narrow-only { display: flex; }
        .hv3-penci-card__more .is-narrow { display: inline; }
        .hv3-penci-card__add { height: 34px; padding: 0 12px 0 10px; gap: 6px; font-size: 12.5px; }
        .box-lib-dsv2x .hv3-penci-card--tpl { gap: 10px; }
        .hv3-penci-tpl__fit { --tpl-h: 74px; --tpl-gap: 10px; --tpl-fan: 24px; }
        .hv3-penci-card--tpl .hv3-penci-card__more { margin-left: 0; }
        .hv3-penci-card__cta { height: 34px; padding: 0 12px; font-size: 12.5px; }
        .hv3-penci-card__info b { font-size: 13px; }
        .hv3-penci-card__info span { margin-top: 0; font-size: 11.5px; }
    }
}
@media (max-width: 767px) {
    .box-lib-dsv2x .hv3-penci-card { justify-content: center; gap: 8px; padding: 10px 12px; }
    .hv3-penci-card__sub { display: none; }
    .hv3-penci-card__tile, .hv3-penci-tpl__item { height: 64px; }
    .hv3-penci-card__tile { min-width: 64px; }
    .hv3-penci-card__body--open, .hv3-penci-card__body--cart { flex-wrap: wrap; row-gap: 8px; }
    .hv3-penci-card__body--open .hv3-penci-card__tile, .hv3-penci-card__body--cart .hv3-penci-card__tile { height: 48px; }
    .hv3-penci-card__body--cart .hv3-penci-card__tile { width: 68px; min-width: 68px; }
    .hv3-penci-card__more { width: 68px; height: 48px; }
    .hv3-penci-card__body--cart .is-wide-only, .hv3-penci-card__more .is-wide { display: none; }
    .hv3-penci-card__more.is-narrow-only { display: flex; }
    .hv3-penci-card__more .is-narrow { display: inline; }
    .hv3-penci-card__body--open .hv3-penci-card__cta, .hv3-penci-card__body--cart .hv3-penci-card__add { flex: 1 0 100%; justify-content: center; height: 38px; }
    .hv3-penci-tpl__fit { --tpl-h: 68px; --tpl-gap: 8px; --tpl-fan: 10px; }
    .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-8px, -2px) rotate(-10deg); }
    .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(8px, -2px) rotate(9deg); }
    .hv3-penci-card--tpl .hv3-penci-card__more { margin-left: 0; }
    .box-lib-dsv2x .hv3-penci-card--tpl { gap: 12px; }
    .hv3-penci-card__more .is-d { display: none; }
    .hv3-penci-card__more.is-m-only { display: flex; }
    .hv3-penci-card__more .is-m { display: inline; }
}

/* 21/10 (lượt sau): thẻ "Thiết kế của bạn" (.hv3-penci-card--cart) cùng kiểu khung mẫu gợi ý — ảnh trơn to (không khung nền/viền),
   bo 6 + bóng tấm thiệp, rê chuột nhấc ảnh + phủ mờ kính lúp; ô "+N" quạt 3 ảnh cao bằng ô, viên số tối góc dưới.
   Biến --cart-h / --cart-fan ở rule thường để khung hẹp / mobile ghi đè. Ô thẻ cao hơn banner như khung mẫu (has-penci-cart). */
@media (min-width: 768px) {
    .box-lib-dsv2x.hv3-penci-host.has-penci-cart:not(.ng-hide) { min-height: 136px; }
}
.box-lib-dsv2x .hv3-penci-card--cart { gap: 12px; }
.hv3-penci-card--cart { --cart-h: 72px; --cart-fan: 32px; }   /* 21/10: thu nhỏ (86 → 72) cho gọn; khung hẹp 64, mobile 60 */
.hv3-penci-card--cart .hv3-penci-card__body--cart { gap: 16px; }
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__tiles,
.hv3-penci-card--cart .hv3-penci-card__tiles { gap: 14px; padding: 0; overflow: visible; }
.hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-card__tile {
    width: auto; min-width: 0; height: var(--cart-h); padding: 0; border-color: transparent; border-radius: 6px; background: none; overflow: visible;
}
.hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-card__tile:hover,
.hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-card__tile:focus-visible { border-color: transparent; box-shadow: none; transform: none; }
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-product__img,
.box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-product__img {
    max-width: calc(var(--cart-h) * 1.45); max-height: 100%; border-radius: 6px; background: #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.08), 0 8px 16px -8px rgba(16,24,40,.32); transition: transform .18s ease, box-shadow .18s ease;
}
.hv3-penci-card--cart .hv3-penci-card__tile--zoom:hover .hv3-penci-product__img,
.hv3-penci-card--cart .hv3-penci-card__tile--zoom:focus-visible .hv3-penci-product__img {
    transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 4px 8px rgba(16,24,40,.1), 0 12px 22px -10px rgba(16,24,40,.4);
}
/* lớp phủ kính lúp đi theo ảnh (nhấc cùng ảnh), bo cùng góc */
.hv3-penci-card--cart .hv3-penci-card__zoom { border-radius: 6px; transition: opacity .15s ease, transform .18s ease; }
.hv3-penci-card--cart .hv3-penci-card__tile--zoom:hover .hv3-penci-card__zoom,
.hv3-penci-card--cart .hv3-penci-card__tile--zoom:focus-visible .hv3-penci-card__zoom { transform: translateY(-2px); }
/* ô "+N": cao bằng ô ảnh, rộng = cao + chỗ xoè; nền / viền trong suốt */
.hv3-penci-card--cart .hv3-penci-card__more { width: var(--cart-h); height: var(--cart-h); border-radius: 6px; }   /* không có ảnh nào → ô số nền xám nhạt như cũ */
.hv3-penci-card--cart .hv3-penci-card__more.has-stack,
.hv3-penci-card--cart .hv3-penci-card__more.has-stack:hover { width: calc(var(--cart-h) + var(--cart-fan)); border-color: transparent; background: none; box-shadow: none; overflow: visible; }
.hv3-penci-card--cart .hv3-penci-card__stack { left: calc(var(--cart-fan) / 2); right: calc(var(--cart-fan) / 2); }
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer,
.hv3-penci-card--cart .hv3-penci-card__layer { width: 100%; height: 100%; max-height: none; object-fit: cover; border-width: 2px; border-radius: 6px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-12px, -3px) rotate(-12deg); }
.hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(12px, -2px) rotate(10deg); }
.hv3-penci-card--cart .hv3-penci-card__layer:nth-child(3) { transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) {
    .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-15px, -4px) rotate(-14deg); }
    .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(15px, -3px) rotate(12deg); }
}
.hv3-penci-card--cart .hv3-penci-card__more.has-stack .hv3-penci-card__count,
.hv3-penci-card--cart .hv3-penci-card__more.has-stack:hover .hv3-penci-card__count {
    right: calc(var(--cart-fan) / 2 + 2px); bottom: 2px; min-width: 0; height: 19px; padding: 0 7px; background: rgba(16,24,40,.82); color: #fff;
    font-size: 11px; font-weight: 700; box-shadow: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none;
}
/* JS fitCartRow quyết số ô theo bề ngang thật (thay cho ẩn ô 3 cứng ở khung hẹp / mobile) → bớt ô không vừa hàng */
.hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-card__tile.is-wide-only { display: flex; }
.hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-card__tile.is-cut { display: none; }
/* 1 mẫu: tên mẫu ở giữa, 2 dòng nếu dài */
.hv3-penci-card--cart .hv3-penci-card__info b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (prefers-reduced-motion: reduce) {
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer, .hv3-penci-card--cart .hv3-penci-card__layer,
    .box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__body--cart .hv3-penci-product__img, .hv3-penci-card--cart .hv3-penci-card__zoom { transition: none; }
}
@media (min-width: 768px) {
    @container hv3penci (max-width: 600px) {
        .box-lib-dsv2x .hv3-penci-card--cart { gap: 10px; }
        .hv3-penci-card--cart { --cart-h: 64px; --cart-fan: 22px; }
        .hv3-penci-card--cart .hv3-penci-card__body--cart { gap: 12px; }
        #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__tiles, .hv3-penci-card--cart .hv3-penci-card__tiles { gap: 10px; }
        .hv3-penci-card--cart .hv3-penci-card__more.has-stack .hv3-penci-card__count { height: 17px; padding: 0 6px; font-size: 10.5px; }
    }
}
@media (max-width: 767px) {
    .hv3-penci-card--cart { --cart-h: 60px; --cart-fan: 14px; }
    .hv3-penci-card--cart .hv3-penci-card__body--cart { gap: 10px; }
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__tiles, .hv3-penci-card--cart .hv3-penci-card__tiles { gap: 8px; }
    .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1) { transform: translate(-50%, -50%) translate(-6px, -2px) rotate(-9deg); }
    .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2) { transform: translate(-50%, -50%) translate(6px, -2px) rotate(8deg); }
}

/* 21/10: bong bóng gợi ý (JS bindTips) — cùng kiểu tooltip giỏ hàng `data-tip` (gio-hang.css): nền #2A2F36, chữ trắng 12.5px, mũi nhọn */
.hv3-penci-tip {
    --tip-arrow: 0px;
    position: fixed; z-index: 10050; box-sizing: border-box; max-width: 240px; padding: 8px 11px; border-radius: 8px;
    background: #2A2F36; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: nowrap;
    box-shadow: 0 8px 22px -10px rgba(16, 24, 32, .55); pointer-events: none;
    opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.hv3-penci-tip.is-below { transform: translate(-50%, -4px); }
.hv3-penci-tip.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hv3-penci-tip::after {
    content: ''; position: absolute; left: calc(50% + var(--tip-arrow)); top: 100%; margin-left: -5px;
    border: 5px solid transparent; border-top-color: #2A2F36;
}
.hv3-penci-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #2A2F36; }
@media (prefers-reduced-motion: reduce) { .hv3-penci-tip { transition: none; } }

/* ── Hộp thư viện mẫu: khung chung .hv3-modal (modal-shell.css); lưới như trang mau-thiet-ke-….html của Penci ── */
.hv3-penci-gallery { --hv3-penci-accent: #00AFCB; --hv3-penci-ink: #1D2939; }
.hv3-penci-gallery *, .hv3-penci-gallery *::before, .hv3-penci-gallery *::after { box-sizing: border-box; }
.hv3-penci-gallery .hv3-penci-gallery__box {
    display: flex; flex-direction: column; max-width: 1360px; width: 94vw; height: 92vh; height: 92dvh; padding: 0; overflow: hidden; background: #fff; border: 1px solid #E4EEF0; border-radius: 20px; box-shadow: 0 24px 80px rgba(16,24,40,.24);
}
.hv3-penci-gallery .hv3-modal__x { top: 20px; right: 20px; z-index: 3; width: 32px; height: 32px; color: #00718A; background: #EAF7FA; border-radius: 50%; transition: background-color .15s ease, color .15s ease, transform .15s ease; }   /* 21/10: nền xanh mỏng nhẹ */
.hv3-penci-gallery .hv3-modal__x:hover { background: #D5F0F6; color: #005E73; }
.hv3-penci-gallery .hv3-modal__x:active { transform: scale(.94); }
.hv3-penci-gallery .hv3-modal__x:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
.hv3-penci-gallery.is-detail .hv3-penci-gallery__tagbar,
.hv3-penci-gallery.is-detail .hv3-penci-gallery__sub { display: none; }
.hv3-penci-gallery.is-detail .hv3-penci-gallery__head { padding-bottom: 18px; }
.hv3-penci-gallery__head { flex: 0 0 auto; padding: 24px 28px 14px; border-bottom: 1px solid #EAECF0; background: #fff; }
.hv3-penci-gallery__brand { display: flex; align-items: center; gap: 10px; padding-right: 44px; }
.hv3-penci-gallery__brand img { display: block; width: 58px; height: 22px; object-fit: contain; }
.hv3-penci-gallery__title { margin: 0; color: var(--hv3-penci-ink); font-family: 'Arial Web Head', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; }
.hv3-penci-gallery__count { padding: 2px 10px; border-radius: 999px; background: #E3F6FA; color: #0088A3; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hv3-penci-gallery__count:empty { display: none; }
.hv3-penci-gallery__sub { margin: 6px 0 0; color: #667085; font-size: 13.5px; line-height: 1.5; }
.hv3-penci-gallery__tagbar { position: relative; margin-top: 16px; }
.hv3-penci-gallery__tagbar[hidden] { display: none; }
.hv3-penci-gallery__tags { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 48px; }
.hv3-penci-gallery__tags::-webkit-scrollbar { display: none; }
.hv3-penci-gallery__tagbar:has(> .hv3-penci-gallery__tag-nav.is-prev:not([hidden]))::before,
.hv3-penci-gallery__tagbar:has(> .hv3-penci-gallery__tag-nav.is-next:not([hidden]))::after { content: ''; position: absolute; top: -2px; bottom: -2px; width: 68px; z-index: 1; pointer-events: none; }
.hv3-penci-gallery__tagbar::before { left: -2px; background: linear-gradient(to right, #fff 0, #fff 40px, rgba(255,255,255,0) 100%); }
.hv3-penci-gallery__tagbar::after { right: -2px; background: linear-gradient(to left, #fff 0, #fff 40px, rgba(255,255,255,0) 100%); }
.hv3-penci-gallery__tag-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #DDE8EB; border-radius: 50%; background: #fff; color: #0088A3; box-shadow: 0 2px 8px rgba(16,24,40,.10); cursor: pointer; }
.hv3-penci-gallery__tag-nav svg { width: 14px; height: 14px; }
.hv3-penci-gallery__tag-nav.is-next { right: 0; }
.hv3-penci-gallery__tag-nav.is-prev { left: 0; }
.hv3-penci-gallery__tag-nav[hidden] { display: none; }
.hv3-penci-gallery__tag-nav { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.hv3-penci-gallery__tag-nav:hover { background: #EAF9FC; border-color: #9ED9E6; }
.hv3-penci-gallery__tag-nav:active { transform: translateY(-50%) scale(.92); }
.hv3-penci-gallery__tag-nav:focus-visible { outline: 2px solid #00AFCB; outline-offset: 2px; }
.hv3-penci-gallery__tags[hidden] { display: none; }
.hv3-penci-gallery__chip { flex: 0 0 auto; min-height: 32px; padding: 6px 16px; border: 1px solid #E4E7EC; border-radius: 999px; background: #fff; color: #475467; font: inherit; font-size: 13px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.hv3-penci-gallery__chip:hover { border-color: #9ED9E6; color: #0088A3; }
.hv3-penci-gallery__chip:not(.is-active):hover { background: #F5FCFD; }
.hv3-penci-gallery__chip:active { transform: scale(.97); }
.hv3-penci-gallery__chip:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
.hv3-penci-gallery__chip.is-active { border-color: var(--hv3-penci-accent); background: var(--hv3-penci-accent); color: #fff; font-weight: 600; }
.hv3-penci-gallery__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 12px; scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
/* 21/10: thanh cuộn xám nhẹ như mặc định (bỏ xanh), chỉ hiện khi rê chuột vào vùng lưới (máy cảm ứng: thanh cuộn hệ thống tự hiện khi vuốt) */
.hv3-penci-gallery__body:hover, .hv3-penci-gallery__body:focus-within { scrollbar-color: rgba(16,24,40,.22) transparent; }
.hv3-penci-gallery__body::-webkit-scrollbar { width: 8px; }
.hv3-penci-gallery__body::-webkit-scrollbar-thumb { border-radius: 8px; background: transparent; }
.hv3-penci-gallery__body:hover::-webkit-scrollbar-thumb { background: rgba(16,24,40,.22); }
.hv3-penci-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hv3-penci-gcard { position: relative; display: block; min-width: 0; margin: 0; }
.hv3-penci-gcard[hidden] { display: none; }
.hv3-penci-gcard__img { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: #F2F4F7; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgba(16,24,40,.06); }
.hv3-penci-gcard__img img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .25s ease; }
.hv3-penci-gcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.hv3-penci-gcard__hover {
    position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: flex-end; padding: 16px 16px 18px;
    bottom: 0; box-sizing: border-box; border-radius: 12px; background: linear-gradient(180deg, rgba(16,24,40,0) 30%, rgba(16,24,40,.42) 62%, rgba(16,24,40,.8) 100%);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.hv3-penci-gcard__btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-family: 'Arial Web Head', Arial, sans-serif; font-size: 13px; white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }   /* 21/10: bỏ nền / chữ xanh — nút viền trắng trong suốt trên lớp tối */
.hv3-penci-gcard__btn.is-use { background: var(--hv3-penci-accent); color: #fff; }
.hv3-penci-gcard__btn:hover { filter: brightness(.96); }
.hv3-penci-gcard__btn:disabled { opacity: .6; cursor: not-allowed; }
@media (hover: hover) {
    .hv3-penci-gcard:hover .hv3-penci-gcard__hover, .hv3-penci-gcard__img:focus-visible .hv3-penci-gcard__hover { opacity: 1; }
    .hv3-penci-gcard:hover .hv3-penci-gcard__img img { transform: scale(1.03); }
    /* 21/10: rê chuột thì tên + nút trượt từ dưới lên (nút trễ hơn tên một nhịp) */
    .hv3-penci-gcard__name, .hv3-penci-gcard__btn { transform: translateY(18px); opacity: 0; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease, background-color .15s ease, color .15s ease; }
    .hv3-penci-gcard__btn { transform: translateY(26px); }
    .hv3-penci-gcard:hover .hv3-penci-gcard__name, .hv3-penci-gcard__img:focus-visible .hv3-penci-gcard__name,
    .hv3-penci-gcard:hover .hv3-penci-gcard__btn, .hv3-penci-gcard__img:focus-visible .hv3-penci-gcard__btn { transform: none; opacity: 1; }
    .hv3-penci-gcard:hover .hv3-penci-gcard__btn, .hv3-penci-gcard__img:focus-visible .hv3-penci-gcard__btn { transition-delay: .06s; }
    .hv3-penci-gcard__img:hover .hv3-penci-gcard__btn { border-color: #fff; background: rgba(255,255,255,.2); }
    /* 21/10: rê chuột ô mẫu — nổi bóng nhẹ, ảnh phóng chậm mượt hơn */
    .hv3-penci-gcard__img { transition: box-shadow .25s ease; }
    .hv3-penci-gcard__img img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
    .hv3-penci-gcard:hover .hv3-penci-gcard__img { box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 14px 28px -14px rgba(16,24,40,.4); }
}
/* Thiết bị cảm ứng: không có rê chuột → tên mẫu 1 dòng dưới ảnh (không phủ lớp tối lên mẫu), bấm ảnh mở chi tiết */
@media (hover: none) {
    .hv3-penci-gallery .hv3-penci-gcard__img { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
    .hv3-penci-gallery .hv3-penci-gcard__img img { border-radius: 10px; background: #F2F4F7; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }
    .hv3-penci-gallery .hv3-penci-gcard__hover { position: static; opacity: 1; padding: 6px 2px 0; border-radius: 0; background: none; align-items: stretch; }
    .hv3-penci-gallery .hv3-penci-gcard__name { -webkit-line-clamp: 1; color: #475467; font-size: 12.5px; font-weight: 400; text-align: left; text-shadow: none; }
    .hv3-penci-gcard__btn { display: none; }
}
.hv3-penci-gallery__tail { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; color: #667085; font-size: 13px; }
.hv3-penci-gallery__more { height: 38px; padding: 0 20px; border: 1px solid #B8E4EE; border-radius: 999px; background: #fff; color: #0088A3; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hv3-penci-gallery__more { transition: background-color .15s ease, border-color .15s ease; }
.hv3-penci-gallery__more:hover { background: #EFFAFD; border-color: var(--hv3-penci-accent); }
.hv3-penci-gcard__img:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
.hv3-penci-gallery__spin { width: 16px; height: 16px; border: 2px solid #CDEFF5; border-top-color: var(--hv3-penci-accent); border-radius: 50%; animation: hv3-penci-spin .8s linear infinite; }
@keyframes hv3-penci-spin { to { transform: rotate(360deg); } }
.hv3-penci-gallery__foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid #E3EEF1; background: #F8FCFD; color: #667085; font-size: 13px; line-height: 1.5; }
.hv3-penci-gallery__source { display: inline-flex; align-items: center; gap: 8px; }
.hv3-penci-gallery__source img { display: block; width: 44px; height: 17px; flex: 0 0 auto; }
.hv3-penci-gallery__hint { display: inline-flex; align-items: center; gap: 8px; color: #667085; }
.hv3-penci-gallery__hint-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #E3F6FA; color: #00718A; }
.hv3-penci-gallery__hint-ico svg { display: block; width: 14px; height: 14px; }
.hv3-penci-gallery__hint b { color: #344054; font-family: 'Arial Web Head', Arial, sans-serif; font-weight: 400; }
.hv3-penci-gallery.is-detail .hv3-penci-gallery__hint { display: none; }
.hv3-penci-gallery__penci { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 2px; border: 0; background: none; color: #0088A3; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hv3-penci-gallery__penci:hover { color: #006A80; text-decoration: underline; }
.hv3-penci-gallery__penci:disabled { opacity: .5; cursor: not-allowed; }
.hv3-penci-gallery__usebar { display: none; }
.hv3-penci-gallery button:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 2px; }
/* chi tiết mẫu (trong cùng hộp) */
.hv3-penci-gdetail__back { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; margin: 0 0 10px; padding: 4px 0; border: 0; border-radius: 6px; background: transparent; color: #0088A3; font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; }
.hv3-penci-gdetail__back:focus-visible { outline: 2px solid var(--hv3-penci-accent); outline-offset: 3px; }
.hv3-penci-gdetail { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.hv3-penci-gdetail__view { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hv3-penci-gdetail__frame { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 12px; background: #F2F5F7; overflow: hidden; }
/* Use intrinsic image dimensions; only scale down to the existing frame/viewport limits. Never upscale a small cover. */
.hv3-penci-gdetail__img { display: block; width: auto; max-width: min(100%, 560px); max-height: 56vh; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px -8px rgba(16,24,40,.25); transition: opacity .2s ease; }
/* chờ ảnh: ảnh đã có khung theo tỉ lệ mẫu (aspect-ratio từ JS), phủ lớp shimmer tới khi tải xong */
.hv3-penci-gdetail__frame.is-loading .hv3-penci-gdetail__img { opacity: 0; }
.hv3-penci-gdetail__frame.is-loading::after { content: ''; position: absolute; inset: 24px; border-radius: 6px; background: linear-gradient(90deg, #E6ECEF 25%, #F4F7F9 50%, #E6ECEF 75%); background-size: 200% 100%; animation: hv3-penci-shimmer 1.1s linear infinite; }
@keyframes hv3-penci-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* nội dung chi tiết ngắn hơn khung hộp: căn giữa theo chiều dọc thay vì để trống phía dưới */
/* vào / ra màn chi tiết: nội dung hiện dần + nhích lên (CSS chạy mỗi lần JS dựng lại phần tử) */
.hv3-penci-gallery__body.is-detail > *, .hv3-penci-gallery__body.is-grid > .hv3-penci-gallery__grid { animation: hv3-penci-enter .22s ease-out both; }
.hv3-penci-gallery__body.is-detail > .hv3-penci-gdetail { animation-delay: .03s; }
@keyframes hv3-penci-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hv3-penci-gdetail__nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid #E4E7EC; border-radius: 50%; background: #fff; color: #344054; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(16,24,40,.12); }
.hv3-penci-gdetail__nav.is-prev { left: 12px; }
.hv3-penci-gdetail__nav.is-next { right: 12px; }
.hv3-penci-gdetail__nav:hover { border-color: var(--hv3-penci-accent); color: #0088A3; }
.hv3-penci-gdetail__pages { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; padding: 2px; }
.hv3-penci-gdetail__page { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; margin: 0; padding: 1px; border: 1px solid #D0D5DD; border-radius: 7px; background: #fff; line-height: 0; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.hv3-penci-gdetail__page:hover { border-color: #9ED9E6; }
.hv3-penci-gdetail__page img { display: block; width: auto; height: auto; max-width: 52px; max-height: 68px; border-radius: 5px; background: #F2F4F7; }
.hv3-penci-gdetail__page.is-active { border-color: var(--hv3-penci-accent); box-shadow: 0 0 0 1px var(--hv3-penci-accent); }
.hv3-penci-gdetail__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 4px 0 0; }
.hv3-penci-gdetail__info h4 { margin: 0; color: var(--hv3-penci-ink); font-family: 'Arial Web Head', Arial, sans-serif; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.hv3-penci-gdetail__mine { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #E3F6FA; color: #0088A3; font-size: 12px; font-weight: 600; line-height: 1.5; }
.hv3-penci-gdetail__meta { margin: 0; padding: 12px 0; list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #EAECF0; border-bottom: 1px solid #EAECF0; font-size: 13.5px; }
.hv3-penci-gdetail__meta li { display: flex; justify-content: space-between; gap: 12px; }
.hv3-penci-gdetail__meta span { color: #667085; }
.hv3-penci-gdetail__meta b { color: #344054; font-weight: 600; text-align: right; }
.hv3-penci-gdetail__use {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 12px;
    background: var(--hv3-penci-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0,143,168,.7);
}
.hv3-penci-gdetail__use:hover { background: #0097B0; }
.hv3-penci-gdetail__use:disabled { opacity: .6; cursor: not-allowed; }
.hv3-penci-gdetail__use .hv3-penci-product__button-logo { filter: brightness(0) invert(1); }
.hv3-penci-gdetail__steps { margin: 0; padding: 0; color: #667085; font-size: 13px; line-height: 1.65; }
@media (min-width: 768px) {
    .hv3-penci-gallery.is-detail .hv3-penci-gallery__foot { display: none; }
    /* màn chi tiết: hộp co theo nội dung (không giữ cao 92% màn hình để trống), hẹp lại cho ảnh + thông tin sát nhau */
    .hv3-penci-gallery .hv3-penci-gallery__box { transition: max-width .22s ease; }
    .hv3-penci-gallery.is-detail .hv3-penci-gallery__box { height: auto; max-height: 92vh; max-height: 92dvh; max-width: 1080px; }
    .hv3-penci-gallery__body.is-detail { padding: 16px 28px 28px; }
}
@media (max-width: 1023px) { .hv3-penci-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 767px) {
    .hv3-penci-gallery { padding: 0; }
    .hv3-penci-gallery .hv3-penci-gallery__box { height: 96vh; height: 96dvh; width: 100%; max-width: 100%; }
    .hv3-penci-gallery__head { padding: 16px 16px 10px; }
    .hv3-penci-gallery__title { font-size: 17px; }
    .hv3-penci-gallery .hv3-modal__x { top: 12px; right: 14px; }
    .hv3-penci-gallery__brand { flex-wrap: wrap; gap: 6px 8px; padding-right: 44px; }
    .hv3-penci-gallery__brand img { width: 44px; height: auto; }
    .hv3-penci-gallery__title { flex: 1 1 140px; }
    .hv3-penci-gallery__count { font-size: 11px; padding: 2px 8px; }
    .hv3-penci-gallery__sub { font-size: 12.5px; }
    .hv3-penci-gallery__body { padding: 14px 12px 8px; }
    .hv3-penci-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hv3-penci-gcard__hover { padding: 10px; gap: 6px; }
    .hv3-penci-gcard__name { font-size: 12px; }
    .hv3-penci-gdetail__info h4 { font-size: 20px; }
    .hv3-penci-gallery__foot { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .hv3-penci-gallery__foot > span { display: none; }
    .hv3-penci-gallery:not(.is-detail) .hv3-penci-gallery__foot { display: none; }
    .hv3-penci-gallery__foot.is-detail { padding-top: 10px; }
    .hv3-penci-gallery__foot.is-detail > .hv3-penci-gallery__penci, .hv3-penci-gallery__body.is-detail .hv3-penci-gdetail__use { display: none; }
    .hv3-penci-gallery__foot.is-detail .hv3-penci-gallery__usebar {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border: 0; border-radius: 12px;
        background: var(--hv3-penci-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .hv3-penci-gallery__usebar .hv3-penci-product__button-logo { filter: brightness(0) invert(1); }
    .hv3-penci-gallery__usebar:disabled { opacity: .6; }
    .hv3-penci-gdetail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hv3-penci-gdetail__frame { min-height: 180px; padding: 16px; }
    .hv3-penci-gdetail__frame.is-loading::after { inset: 16px; }
    .hv3-penci-gdetail__img { max-height: 40vh; }
    .hv3-penci-gdetail__nav { width: 34px; height: 34px; margin-top: -17px; font-size: 20px; }
    .hv3-penci-gdetail__nav.is-prev { left: 6px; }
    .hv3-penci-gdetail__nav.is-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .hv3-penci-card__tile, .hv3-penci-tpl__item, .hv3-penci-gcard__img img, .hv3-penci-gcard__hover, .hv3-penci-gcard__name, .hv3-penci-gcard__btn, .hv3-penci-gcard__img, .hv3-penci-gallery__chip, .hv3-penci-gallery__tag-nav, .hv3-penci-gallery .hv3-modal__x { transition: none; }
    .hv3-penci-gallery__body.is-detail > *, .hv3-penci-gallery__body.is-grid > .hv3-penci-gallery__grid { animation: none; }
    .hv3-penci-gallery .hv3-penci-gallery__box, .hv3-penci-gdetail__img { transition: none; }
    .hv3-penci-gdetail__frame.is-loading::after { animation: none; }
    .hv3-penci-gallery__spin { animation: none; }
}

/* Saved TGIA Flow V2 design: presentation only; legacy and cart cards stay unchanged. */
.box-lib-dsv2x.hv3-penci-host:has(> .hv3-penci-card--saved) > a,
.box-lib-dsv2x.hv3-penci-host:has(> .hv3-penci-card--saved) > .hv3-penci-tab { display: none; }
.box-lib-dsv2x .hv3-penci-card--saved {
    position: relative; inset: auto; height: auto; min-height: 0; padding: 16px 18px; gap: 12px;
    border-color: #E4E7EC; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.035);
}
.hv3-penci-card--saved .hv3-penci-card__logo { width: 42px; height: 17px; flex-basis: 42px; }
.hv3-penci-card--saved .hv3-penci-card__title strong { font-size: 13px; color: #475467; }
.hv3-penci-card--saved .hv3-penci-card__body { gap: 16px; }
.hv3-penci-card--saved .hv3-penci-card__tile {
    height: auto; min-width: 0; padding: 0; border-radius: 8px; background: #fff; box-shadow: none;
}
#sanpham-inan-quote-simple .hv3-penci-card--saved .hv3-penci-product__img,
.box-lib-dsv2x .hv3-penci-card--saved .hv3-penci-product__img {
    display: block; width: auto; height: auto; max-width: 124px; max-height: 88px; border-radius: 7px;
}
.hv3-penci-card--saved .hv3-penci-card__info b { font-size: 16px; margin-bottom: 5px; }
.hv3-penci-card--saved .hv3-penci-card__saved-status { color: #027A48; font-size: 12px; }
.hv3-penci-card--saved .hv3-penci-card__saved-status::before {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #12B76A;
}
.hv3-penci-card--saved .hv3-penci-card__info small { display: block; margin-top: 3px; color: #667085; font-size: 12px; }
.hv3-penci-card--saved .hv3-penci-card__actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 5px; }
.hv3-penci-card--saved .hv3-penci-card__cta {
    justify-content: center; height: 38px; padding: 0 20px; border-color: #00AFCB; border-radius: 8px;
    color: #fff; background: #00AFCB; box-shadow: none;
}
.hv3-penci-card--saved .hv3-penci-card__cta:hover { background: #009AB3; border-color: #009AB3; box-shadow: none; }
.hv3-penci-card--saved .hv3-penci-card__link { justify-content: center; font-size: 12px; font-weight: 400; color: #667085; }
.hv3-penci-card--saved .hv3-penci-card__link:hover { color: #0088A3; }
.hv3-penci-card--saved button:focus,
.hv3-penci-card--saved button:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 767px) {
    .box-lib-dsv2x .hv3-penci-card--saved { padding: 14px; gap: 12px; }
    .hv3-penci-card--saved .hv3-penci-card__body { flex-wrap: wrap; gap: 12px; }
    #sanpham-inan-quote-simple .hv3-penci-card--saved .hv3-penci-product__img,
    .box-lib-dsv2x .hv3-penci-card--saved .hv3-penci-product__img { max-width: 104px; max-height: 80px; }
    .hv3-penci-card--saved .hv3-penci-card__info b { font-size: 15px; }
    .hv3-penci-card--saved .hv3-penci-card__actions { flex: 1 0 100%; flex-direction: row; align-items: center; gap: 16px; }
    .hv3-penci-card--saved .hv3-penci-card__cta { flex: 1; }
}

/* Product suggestions: fill the row; derive each image's height from its ratio.
   Only this panel grows. Never keep the expanded hidden Penci panel in the grid. */
.box-lib-dsv2x.hv3-penci-host.has-penci-tpl { min-height: 0; overflow: hidden; }
.box-lib-dsv2x.hv3-penci-host.has-penci-tpl > a,
.box-lib-dsv2x.hv3-penci-host.has-penci-tpl > .hv3-penci-tab { display: none; }
.box-lib-dsv2x.hv3-penci-host.has-penci-tpl > .hv3-penci-card--tpl {
    position: relative; inset: auto; min-height: 0; height: auto; overflow: hidden;
}
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-tpl__fit {
    flex-wrap: nowrap; flex: 1 1 0%; min-width: 0; align-items: center;
}
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-tpl__item img {
    display: block; width: 100%; height: auto; max-width: 100%; max-height: none;
}
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-card__stack {
    left: calc(var(--tpl-fan-space, var(--tpl-fan, 48px)) / 2);
    right: calc(var(--tpl-fan-space, var(--tpl-fan, 48px)) / 2);
}
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-card__more.has-stack .hv3-penci-card__count {
    right: calc(var(--tpl-fan-space, var(--tpl-fan, 48px)) / 2 + 2px);
}
#sanpham-inan-quote-simple#sanpham-inan-quote-simple#sanpham-inan-quote-simple .hv3-file-panels > .box-lib-dsv2x.hv3-penci-host.has-penci-tpl.ng-hide {
    display: none !important; min-height: 0; height: 0;
}
#sanpham-inan-quote-simple#sanpham-inan-quote-simple .hv3-file-panels > .box-lib-dsv2x.hv3-penci-host.has-penci-tpl:not(.ng-hide),
.box-lib-dsv2x.hv3-penci-host.has-penci-tpl:not(.ng-hide) {
    min-height: 0;
    animation: hv3-penci-panel-open .18s cubic-bezier(.2,.7,.2,1) !important;
}
@keyframes hv3-penci-panel-open {
    from { opacity: .35; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #sanpham-inan-quote-simple#sanpham-inan-quote-simple .hv3-file-panels > .box-lib-dsv2x.hv3-penci-host.has-penci-tpl:not(.ng-hide),
    .box-lib-dsv2x.hv3-penci-host.has-penci-tpl:not(.ng-hide) { animation: none !important; }
}

/* 30/10: ô quạt "+N" khung mẫu — ảnh cùng định dạng ô mẫu: tỷ lệ thật, không cắt cover / không viền trắng, bo 6 + bóng như ô mẫu.
   Căn giữa bằng inset + margin:auto thay cho translate(-50%,-50%) (dịch lẻ nửa điểm ảnh → nhoè). Giữ nguyên vị trí + góc xoay quạt. Ô quạt giỏ hàng không đổi. */
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer,
.box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer {
    inset: -1px 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: calc(100% + 2px); object-fit: fill;   /* +2px cao: ảnh ô mẫu cũng chờm viền 1px của nút → cùng cỡ */ border: 0; border-radius: 6px; background: #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.08), 0 8px 16px -8px rgba(16,24,40,.32);
}
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1),
.box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1) { transform: translate(-14px, -3px) rotate(-14deg); }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2),
.box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2) { transform: translate(14px, -2px) rotate(12deg); }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(3),
.box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(3) { transform: none; }
@media (hover: hover) and (pointer: fine) {
    #sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1),
    .box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1) { transform: translate(-17px, -4px) rotate(-16deg); }
    #sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2),
    .box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2) { transform: translate(17px, -3px) rotate(14deg); }
}
@media (max-width: 767px) {
    #sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1),
    .box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(1) { transform: translate(-8px, -2px) rotate(-10deg); }
    #sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2),
    .box-lib-dsv2x .hv3-penci-card--tpl .hv3-penci-card__layer:nth-child(2) { transform: translate(8px, -2px) rotate(9deg); }
}

/* 30/10: ô quạt "+N" thẻ "Thiết kế của bạn" (--cart) — cùng cách sửa khung mẫu (mục 62): ảnh tỷ lệ thật như ô ảnh thiết kế, không cắt cover /
   không viền trắng, bo 6 + bóng như ô ảnh; căn giữa bằng inset + margin:auto (bỏ translate(-50%,-50%) dịch lẻ → nhoè). Giữ nguyên vị trí + góc xoay. */
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer,
.box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer {
    inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: fill; border: 0; border-radius: 6px; background: #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.08), 0 8px 16px -8px rgba(16,24,40,.32);
}
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1),
.box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1) { transform: translate(-12px, -3px) rotate(-12deg); }
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2),
.box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2) { transform: translate(12px, -2px) rotate(10deg); }
#sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(3),
.box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(3) { transform: none; }
@media (hover: hover) and (pointer: fine) {
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1),
    .box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(1) { transform: translate(-15px, -4px) rotate(-14deg); }
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2),
    .box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__more.has-stack:is(:hover, :focus-visible) .hv3-penci-card__layer:nth-child(2) { transform: translate(15px, -3px) rotate(12deg); }
}
@media (max-width: 767px) {
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1),
    .box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(1) { transform: translate(-6px, -2px) rotate(-9deg); }
    #sanpham-inan-quote-simple .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2),
    .box-lib-dsv2x .hv3-penci-card--cart .hv3-penci-card__layer:nth-child(2) { transform: translate(6px, -2px) rotate(8deg); }
}

/* 30/10: khung mẫu 2 hàng (JS fitRow thêm .is-2row khi mẫu không "dài" — tỷ lệ giữa > 0.6). Thẻ ngắt .hv3-penci-tpl__br chiếm trọn 1 dòng,
   cao = khoảng cách ô, nên row-gap về 0 để không cộng đôi. Mẫu dài (photobooth) vẫn 1 hàng như cũ. */
.hv3-penci-tpl__br { display: none; }
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-tpl__fit.is-2row,
.hv3-penci-tpl__fit.is-2row { flex-wrap: wrap; align-content: flex-start; row-gap: 0; height: calc(var(--tpl-h) * 2 + var(--tpl-gap, 14px)); }
.hv3-penci-tpl__fit.is-2row .hv3-penci-tpl__br { display: block; flex: 0 0 100%; height: var(--tpl-gap, 14px); }

/* 30/10: khung 2 hàng — ô "+N" (.is-tile) cùng cỡ ô mẫu: nền là mẫu kế tiếp phủ lớp đen mỏng, đáy xếp lớp 3 mẫu nhỏ gọn trong khung,
   viên số giữa ô. Khung 1 hàng giữ quạt như cũ (.hv3-penci-tpl__tile ẩn). */
.hv3-penci-tpl__tile { display: none; }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-card__stack,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-card__stack { display: none; }
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile {
    position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 6px; background: #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.08), 0 8px 16px -8px rgba(16,24,40,.32); transition: transform .18s ease, box-shadow .18s ease;
}
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile::after { content: ''; position: absolute; inset: 0; background: rgba(16,24,40,.16); transition: background-color .18s ease; }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-cover,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-cover {
    display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: cover;
}
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini {
    position: absolute; z-index: 1; left: 8%; right: 8%; bottom: 8%; display: flex; justify-content: center; height: 30%;   /* rộng cố định để căn giữa (khung co theo ảnh gốc sẽ lệch trái) */
}
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img {
    display: block; flex: 0 0 auto; width: auto; height: 100%; max-width: none; max-height: none; min-width: 0; margin: 0 0 0 -10%; padding: 0;
    border: 1.5px solid #fff; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.3); box-sizing: border-box;
}
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img:first-child { margin-left: 0; }
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-card__more.is-tile .hv3-penci-card__count,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile.has-stack .hv3-penci-card__count {
    z-index: 2; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); height: 22px; padding: 0 9px; font-size: 12.5px;
}
@media (hover: hover) and (pointer: fine) {
    .hv3-penci-card--tpl .hv3-penci-card__more.is-tile:is(:hover, :focus-visible) .hv3-penci-tpl__tile {
        transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 4px 8px rgba(16,24,40,.1), 0 12px 22px -10px rgba(16,24,40,.4);
    }
    .hv3-penci-card--tpl .hv3-penci-card__more.is-tile:is(:hover, :focus-visible) .hv3-penci-tpl__tile::after { background: rgba(16,24,40,.26); }
}
@media (prefers-reduced-motion: reduce) { .hv3-penci-tpl__tile, .hv3-penci-tpl__tile::after { transition: none; } }

/* 30/10 (lượt 3): ô "+N" khung 2 hàng — số về góc dưới phải, lớp phủ đậm hơn, xếp lớp 6 mẫu nhỏ (chờm nhiều) giữa ô. Chỉ thêm, đè lượt 2 ở trên. */
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile::after { background: rgba(16,24,40,.38); }
@media (hover: hover) and (pointer: fine) {
    .hv3-penci-card--tpl .hv3-penci-card__more.is-tile:is(:hover, :focus-visible) .hv3-penci-tpl__tile::after { background: rgba(16,24,40,.48); }
}
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini { top: 50%; bottom: auto; left: 6%; right: 6%; height: 34%; transform: translateY(-50%); }
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img { margin-left: -26%; }   /* % theo bề rộng khung mini: ảnh ≈ 38,6% khung → 6 ảnh trải vừa đủ */
#sanpham-inan-quote-simple .hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img:first-child,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile .hv3-penci-tpl__tile-mini img:first-child { margin-left: 0; }
#sanpham-inan-quote-simple .hv3-penci-host.has-penci-tpl .hv3-penci-card__more.is-tile .hv3-penci-card__count,
.hv3-penci-card--tpl .hv3-penci-card__more.is-tile.has-stack .hv3-penci-card__count { top: auto; left: auto; right: 6px; bottom: 6px; transform: none; }

/* 30/10: modal xem mẫu — dải ảnh nhỏ (các mặt thiết kế) căn giữa dưới ảnh lớn. Dùng margin auto ở 2 đầu thay justify-content:center
   để khi nhiều ảnh tràn ngang vẫn cuộn được từ ảnh đầu (center sẽ cắt mất phần bên trái). */
.hv3-penci-gdetail__pages > .hv3-penci-gdetail__page:first-child { margin-left: auto; }
.hv3-penci-gdetail__pages > .hv3-penci-gdetail__page:last-child { margin-right: auto; }