/* ============================================================ XÂY DỰNG CẤU HÌNH (product/builder) ------------------------------------------------------------ Bố cục dựng theo https://vutampc.vn/xay-dung-cau-hinh: - thẻ banner xanh: icon + tiêu đề + phụ đề - bảng 3 cột, hàng tiêu đề nền xanh chữ hoa - mỗi dòng: icon + tên | "Chưa chọn linh kiện" | nút tròn + - thanh dưới: Tổng cộng + các nút xuất / thêm giỏ Màu xanh lấy từ chính logo VietMinh (#00a95b), không phải màu của bản mẫu. Khai báo một lần ở đầu để đổi nhanh khi cần. Toàn bộ JS nằm ở javascript/builder/builder.js (file ngoài, minify() không đụng tới). File CSS này không đổi class nào mà JS đang bám: .bp-table-value, .summary_price, .btn_cart... ============================================================ */ /* Core cung gan class "page-product-builder" len (body class theo route), nen phai ghi ro section - neu khong padding duoi day ap ca vao body va day header xuong 18px. */ section.page-product-builder { --bp-green: #00a95b; --bp-green-dark: #007f43; --bp-green-deep: #006637; --bp-green-soft: #e8f8f0; padding: 18px 0 46px; } /* ── Banner ───────────────────────────────────────────────── */ .page-product-builder .bp-hero { display: flex; align-items: center; gap: 18px; padding: 22px 26px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(105deg, var(--bp-green-deep), var(--bp-green)); color: #fff; } .page-product-builder .bp-hero-icon { flex: 0 0 auto; font-size: 2.1rem; line-height: 1; opacity: .95; } .page-product-builder .bp-hero-title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 700; color: #fff; } .page-product-builder .bp-hero-sub { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .88); } /* ── Thẻ chứa bảng ────────────────────────────────────────── */ .page-product-builder .bp-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(17, 24, 39, .06); } .page-product-builder .bp-table { width: 100%; border-collapse: collapse; } .page-product-builder .bp-table-head th { padding: 14px 18px; background: linear-gradient(105deg, var(--bp-green-deep), var(--bp-green)); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; white-space: nowrap; } .page-product-builder .bp-th-key { width: 240px; } .page-product-builder .bp-th-price { width: 200px; text-align: right; } .page-product-builder .bp-table > tbody > tr { border-bottom: 1px solid var(--borderLight); } .page-product-builder .bp-table > tbody > tr:last-child { border-bottom: none; } .page-product-builder .bp-table > tbody > tr > td { padding: 14px 18px; vertical-align: middle; } /* Cột 1: icon + tên thành phần, có vạch ngăn như bản mẫu */ .page-product-builder .bp-table-key { width: 240px; border-right: 1px solid var(--borderLight); font-size: .9rem; font-weight: 600; color: var(--titleColor); } .page-product-builder .bp-key-icon { display: inline-block; width: 22px; margin-right: 8px; color: var(--textMuted); text-align: center; } /* Cột 2: linh kiện đã chọn */ .page-product-builder .bp-empty { font-size: .88rem; font-style: italic; color: var(--textLight); } /* Cột 3: nút tròn */ .page-product-builder .bp-table-action { width: 200px; text-align: right; white-space: nowrap; } .page-product-builder .bp-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: .82rem; text-decoration: none; transition: background .15s, transform .12s; } .page-product-builder .bp-act-add { background: var(--bp-green); color: #fff; } .page-product-builder .bp-act-add:hover { background: var(--bp-green-dark); transform: scale(1.06); } .page-product-builder .bp-act-del { display: none; margin-left: 6px; background: var(--labelColorSoft); color: var(--dangerColor); } .page-product-builder .bp-act-del:hover { background: var(--dangerColor); color: #fff; } .page-product-builder tr.has-product .bp-act-del { display: inline-flex; } /* ── Thanh dưới ───────────────────────────────────────────── */ .page-product-builder .bp-footbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding: 16px 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(17, 24, 39, .06); } .page-product-builder .bp-total { font-size: .95rem; font-weight: 600; color: var(--titleColor); } .page-product-builder .bp-total .summary_price { margin-left: 4px; font-size: 1.25rem; font-weight: 700; color: var(--dangerColor); } .page-product-builder .bp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .page-product-builder .bp-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--borderColor); border-radius: 8px; background: #fff; color: var(--textColor); font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; } .page-product-builder .bp-btn i { font-size: .9rem; color: var(--textMuted); } .page-product-builder .bp-btn:hover { border-color: var(--bp-green); color: var(--bp-green-dark); background: var(--bp-green-soft); } .page-product-builder .bp-btn:hover i { color: var(--bp-green); } .page-product-builder .bp-btn-primary { border-color: transparent; background: var(--bp-green); color: #fff; font-weight: 600; } .page-product-builder .bp-btn-primary i { color: #fff; } .page-product-builder .bp-btn-primary:hover { background: var(--bp-green-dark); color: #fff; } .page-product-builder .bp-btn-primary:hover i { color: #fff; } .page-product-builder .bp-btn-reset:hover { border-color: var(--dangerColor); background: var(--labelColorSoft); color: var(--dangerColor); } .page-product-builder .bp-btn-reset:hover i { color: var(--dangerColor); } /* ── Linh kiện đã chọn trong bảng ─────────────────────────── */ #capture .related-products__box { display: flex; align-items: center; gap: 12px; width: 100%; } #capture .related-products-item { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } #capture .product-item__info__image { flex: 0 0 52px; } #capture .related-product-img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--borderColor); border-radius: 8px; background: #fff; } #capture .product-item__info__text { flex: 1 1 auto; min-width: 0; } #capture .related-product-name a { color: var(--titleColor); font-size: .88rem; font-weight: 600; line-height: 1.45; text-decoration: none; } #capture .related-product-name a:hover { color: var(--bp-green-dark); } /* JS nhân bản nguyên thẻ sản phẩm nên khối giá bị kéo theo và in hai lần. Trong bảng chỉ giữ bản ở cụm bên phải. */ #capture .product-item__info__text > .related-product-final-price { display: none; } #capture .related-product-stock__box { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .76rem; color: var(--bp-green); } #capture .product-item__price { flex: 0 0 auto; } #capture .pro-infor-buy { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } #capture .related-product-final-price .final-price { font-size: .95rem; font-weight: 700; color: var(--dangerColor); } #capture .related-product-final-price .old-price { margin-left: 6px; font-size: .78rem; color: var(--textLight); text-decoration: line-through; } #capture .input-quantity { width: 52px; height: 32px; padding: 0 4px; text-align: center; border: 1px solid var(--borderColor); border-radius: 7px; font-size: .85rem; } #capture .input-quantity:focus { outline: none; border-color: var(--bp-green); } #capture .total { font-size: .85rem; font-weight: 600; color: var(--titleColor); } /* Nút sửa/xoá đi kèm bản sao: đã có nút ở cột 3 nên ẩn đi */ #capture .product-item__button { display: none; } /* ── Hộp chọn sản phẩm ────────────────────────────────────── */ .page-product-builder .product-modal .modal-dialog { max-width: 1100px; margin: 24px auto; } .page-product-builder .product-modal .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(17, 24, 39, .25); } .page-product-builder .product-modal__header { display: flex; align-items: center; gap: 14px; padding: 15px 20px; background: linear-gradient(105deg, var(--bp-green-deep), var(--bp-green)); color: #fff; } .page-product-builder .product-modal__header__title { flex: 1 1 auto; margin: 0; font-size: 1.02rem; font-weight: 700; color: #fff; } .page-product-builder .product-modal__close-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: 1rem; cursor: pointer; } .page-product-builder .product-modal__close-btn:hover { background: rgba(255, 255, 255, .35); } .page-product-builder .modal-body { padding: 16px 20px 20px; } /* Ô tìm kiếm nằm dưới tiêu đề như bản mẫu */ .page-product-builder .bp-modal-search { margin-bottom: 12px; } .page-product-builder .search__box { display: flex; align-items: center; border: 1px solid var(--borderColor); border-radius: 8px; overflow: hidden; } .page-product-builder .search__box:focus-within { border-color: var(--bp-green); } .page-product-builder .search-box__input { flex: 1 1 auto; height: 40px; padding: 0 14px; border: none; outline: none; font-size: .88rem; } .page-product-builder .search-box__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; color: var(--textMuted); text-decoration: none; } /* Hai cột: bộ lọc trái + danh sách phải */ .page-product-builder .bp-modal-products { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; } .page-product-builder .modal-products-filter { border: 1px solid var(--borderColor); border-radius: 10px; overflow: hidden; max-height: 62vh; overflow-y: auto; } .page-product-builder .bp-modal-products-content { max-height: 62vh; overflow-y: auto; } /* ── Danh sách sản phẩm trong hộp chọn ────────────────────── */ .page-product-builder .grid-products-content { display: block; } .page-product-builder .grid-products .product-item { display: block; padding: 12px 4px; border-bottom: 1px solid var(--borderLight); } .page-product-builder .grid-products .product-item:last-child { border-bottom: none; } .page-product-builder .grid-products .related-products-item { display: flex; align-items: center; gap: 14px; } .page-product-builder .grid-products .product-item__info__image { position: relative; flex: 0 0 62px; } .page-product-builder .grid-products .related-product-img { width: 62px; height: 62px; object-fit: contain; border: 1px solid var(--borderColor); border-radius: 8px; background: #fff; } .page-product-builder .product-item__sale { position: absolute; top: -6px; left: -6px; padding: 1px 6px; border-radius: 999px; background: var(--labelColor); color: #fff; font-size: .68rem; font-weight: 700; } .page-product-builder .grid-products .product-item__info__text { flex: 1 1 auto; min-width: 0; } .page-product-builder .grid-products .related-product-name a { color: var(--titleColor); font-size: .88rem; font-weight: 600; line-height: 1.45; text-decoration: none; } .page-product-builder .grid-products .related-product-name a:hover { color: var(--bp-green-dark); } .page-product-builder .bp-item-meta { margin-top: 3px; font-size: .78rem; color: var(--textMuted); } .page-product-builder .grid-products .related-product-final-price { margin-top: 4px; } .page-product-builder .grid-products .final-price { font-size: .95rem; font-weight: 700; color: var(--dangerColor); } .page-product-builder .grid-products .old-price { margin-right: 8px; font-size: .8rem; color: var(--textLight); text-decoration: line-through; } /* Cụm số lượng chỉ cần khi đã vào bảng, trong hộp chọn thì giấu */ .page-product-builder .grid-products .product-item__price { display: none; } .page-product-builder .grid-products .product-item__button { flex: 0 0 auto; display: flex; align-items: center; } .page-product-builder .grid-products .add_builder { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 20px; border: none; border-radius: 7px; background: var(--bp-green); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .page-product-builder .grid-products .add_builder:hover { background: var(--bp-green-dark); color: #fff; } .page-product-builder .pagination-custom { margin-bottom: 10px; } /* ── Nạp dữ liệu ──────────────────────────────────────────── */ /* JS bật/tắt bằng .show()/.hide() của jQuery (display:block), nên mặc định phải là none và không được dùng flex để canh giữa. */ .builder_loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(17, 24, 39, .28); z-index: 9999; } .builder_loading .bp-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .page-product-builder .bp-modal-products-content > .bp-loading { display: block; padding: 40px 0; text-align: center; } /* ── Mobile ───────────────────────────────────────────────── */ @media (max-width: 991px) { .page-product-builder .bp-modal-products { grid-template-columns: 1fr; } .page-product-builder .modal-products-filter { max-height: 200px; } } @media (max-width: 767px) { .page-product-builder .bp-hero { padding: 16px 18px; gap: 12px; } .page-product-builder .bp-hero-title { font-size: 1.15rem; } .page-product-builder .bp-table-head { display: none; } .page-product-builder .bp-table, .page-product-builder .bp-table > tbody, .page-product-builder .bp-table > tbody > tr, .page-product-builder .bp-table > tbody > tr > td { display: block; width: 100%; } .page-product-builder .bp-table > tbody > tr { position: relative; padding: 12px 0; border-bottom: 1px solid var(--borderColor); } .page-product-builder .bp-table > tbody > tr > td { padding: 4px 16px; } .page-product-builder .bp-table-key { border-right: none; } .page-product-builder .bp-table-action { position: absolute; top: 10px; right: 12px; width: auto; padding: 0; } .page-product-builder .bp-footbar { flex-direction: column; align-items: stretch; } .page-product-builder .bp-actions .bp-btn { flex: 1 1 auto; justify-content: center; } #capture .related-products__box { flex-wrap: wrap; } #capture .pro-infor-buy { justify-content: flex-start; } } /* ============================================================ NỀN CHO MODAL BOOTSTRAP 3 ------------------------------------------------------------ Trang này nạp bootstrap.min.js v3.3.5 nhưng theme KHÔNG nạp bootstrap CSS. Thiếu phần dưới đây thì .modal không được ẩn, nội dung hộp chọn đổ thẳng ra cuối trang. BS3 thêm/bớt class `in` chứ không phải `show`. ============================================================ */ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .modal.in, .modal.show { overflow-x: hidden; overflow-y: auto; } .modal-open { overflow: hidden; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.in { opacity: .5; } .modal.fade .modal-dialog { transform: translate(0, -25%); transition: transform .25s ease-out; } .modal.in .modal-dialog { transform: translate(0, 0); } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #fff; background-clip: padding-box; outline: 0; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } } /* Canh phải tiêu đề cột giá — phải thắng .bp-table-head th ở trên */ .page-product-builder .bp-table-head th.bp-th-price { text-align: right; } /* Thanh nút: cho xuống dòng, không tràn ra ngoài thẻ */ .page-product-builder .bp-footbar { align-items: flex-start; } .page-product-builder .bp-actions { justify-content: flex-end; flex: 1 1 420px; } /* Nen BS3 o tren dat .modal-dialog { width:600px } cho man >=768px, de nang hon max-width nen phai ghi de bang width. */ @media (min-width: 768px) { .page-product-builder .product-modal .modal-dialog { width: 1100px; max-width: 95vw; } } /* Mot dong san pham = [anh] [ten + meta + gia] [nut Chon] */ .page-product-builder .grid-products .product-item { display: flex; align-items: center; gap: 14px; } .page-product-builder .grid-products .product-item__info { flex: 1 1 auto; min-width: 0; } .page-product-builder .grid-products .product-item__button { margin-left: auto; } /* Phan trang trong hop chon */ .page-product-builder .pagination-custom .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; } .page-product-builder .pagination-custom .pagination li > a, .page-product-builder .pagination-custom .pagination li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--borderColor); border-radius: 7px; background: #fff; color: var(--textColor); font-size: .82rem; text-decoration: none; } .page-product-builder .pagination-custom .pagination li.active > span, .page-product-builder .pagination-custom .pagination li.active > a { background: var(--bp-green); border-color: var(--bp-green); color: #fff; } .page-product-builder .pagination-custom .pagination li > a:hover { border-color: var(--bp-green); color: var(--bp-green-dark); } /* Bo loc ben trai */ .page-product-builder .modal-products-filter .box-filters { padding: 12px 14px; } .page-product-builder .modal-products-filter .heading__title { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--titleColor); } .page-product-builder .modal-products-filter .heading__title .title { margin: 0; font-size: .82rem; } .page-product-builder .modal-products-filter ul { list-style: none; margin: 0 0 14px; padding: 0; } .page-product-builder .modal-products-filter li { margin-bottom: 4px; } .page-product-builder .modal-products-filter ._checkbox { display: flex; align-items: center; gap: 7px; font-size: .83rem; color: var(--textColor); text-decoration: none; } .page-product-builder .modal-products-filter ._checkbox label { margin: 0; cursor: pointer; } .page-product-builder .modal-products-filter input[type="radio"], .page-product-builder .modal-products-filter input[type="checkbox"] { accent-color: var(--bp-green); } /* ── Nút bị khoá khi chưa chọn linh kiện nào ──────────────── */ .page-product-builder .bp-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ============================================================ HỘP CHỌN: hàng lọc ngang + cột thuộc tính + thanh đáy ------------------------------------------------------------ .modal-products-filter là nơi AJAX đổ mảnh lọc vào. Đặt display:contents để hai khối con (.bp-filter-top, .bp-filter-side) tham gia thẳng vào lưới, nhờ vậy hàng lọc trải hết bề ngang còn cột thuộc tính đứng cạnh danh sách — khỏi phải dùng JS để bê đi. ============================================================ */ .page-product-builder .bp-modal-products { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 16px; } .page-product-builder .modal-products-filter { display: contents; border: none; max-height: none; overflow: visible; } .page-product-builder .bp-filter-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .page-product-builder .bp-f-ctl { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--borderColor); border-radius: 8px; background: #fff; color: var(--textColor); font-size: .85rem; outline: none; } .page-product-builder .bp-f-ctl:focus { border-color: var(--bp-green); } select.bp-f-ctl { cursor: pointer; } .page-product-builder .bp-filter-side { grid-column: 1; grid-row: 2; border: 1px solid var(--borderColor); border-radius: 10px; padding: 12px 14px; max-height: 58vh; overflow-y: auto; } .page-product-builder .bp-side-title { margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--bp-green-dark); } .page-product-builder .bp-side-group { margin-bottom: 14px; } .page-product-builder .bp-side-group-name { margin-bottom: 6px; font-size: .83rem; font-weight: 700; color: var(--titleColor); } .page-product-builder .bp-side-list { list-style: none; margin: 0; padding: 0; } .page-product-builder .bp-side-list li { margin-bottom: 4px; } .page-product-builder .bp-side-item { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .83rem; font-weight: 400; color: var(--textColor); cursor: pointer; } .page-product-builder .bp-side-item input { accent-color: var(--bp-green); } .page-product-builder .bp-side-item input:checked + span { color: var(--bp-green-dark); font-weight: 600; } .page-product-builder .bp-side-empty { font-size: .82rem; color: var(--textLight); } .page-product-builder .bp-modal-products-content { grid-column: 2; grid-row: 2; position: relative; max-height: 58vh; overflow-y: auto; } /* Thanh đáy: dính khi cuộn danh sách */ .page-product-builder .bp-items-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--borderColor); } .page-product-builder .bp-items-total { font-size: .84rem; color: var(--textMuted); } .page-product-builder .bp-items-total strong { color: var(--bp-green-dark); } .page-product-builder .bp-items-foot .pagination-custom { margin: 0; } .page-product-builder .bp-items-foot .pagination { margin: 0; } @media (max-width: 991px) { .page-product-builder .bp-modal-products { grid-template-columns: 1fr; } .page-product-builder .bp-filter-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-product-builder .bp-filter-side { grid-column: 1; grid-row: auto; max-height: 180px; } .page-product-builder .bp-modal-products-content { grid-column: 1; grid-row: auto; } } .page-product-builder .bp-w { display: none; } /* ============================================================ BẢN BÁO GIÁ (dùng cho xuất ảnh / PDF) ------------------------------------------------------------ Dựng ở bề ngang cố định 820px để ảnh chụp ra luôn sắc nét và tỉ lệ giống trang A4, không phụ thuộc màn hình người dùng. Bình thường đẩy ra ngoài khung nhìn; lúc chụp thêm class .is-rendering để dom-to-image đo được kích thước thật. ============================================================ */ .vm-quote-stage { position: fixed; top: 0; left: -10000px; width: 860px; z-index: -1; opacity: 0; pointer-events: none; } .vm-quote-stage:has(.is-rendering) { opacity: 1; } .vm-quote { width: 820px; padding: 26px 28px 34px; background: #fff; color: #000; font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 1.45; } .vm-quote .q-head { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; } .vm-quote .q-logo { width: 120px; height: auto; } .vm-quote .q-co { font-weight: 700; } .vm-quote .q-co-name { font-size: 20px; margin-bottom: 4px; } .vm-quote .q-title { margin: 10px 0 18px; font-size: 26px; font-weight: 700; text-align: center; letter-spacing: .5px; } .vm-quote .q-to, .vm-quote .q-date { margin: 0 0 8px; font-weight: 700; font-style: italic; } .vm-quote .q-intro { margin: 0 0 12px; font-weight: 700; font-style: italic; text-align: center; } .vm-quote .q-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; } .vm-quote .q-table th, .vm-quote .q-table td { border: 1px solid #000; padding: 6px 8px; vertical-align: middle; } .vm-quote .q-table th { background: #c6e0b4; font-weight: 700; text-align: center; } .vm-quote .q-w-stt { width: 42px; } .vm-quote .q-w-unit { width: 62px; } .vm-quote .q-w-war { width: 82px; } .vm-quote .q-w-qty { width: 58px; } .vm-quote .q-w-price { width: 104px; } .vm-quote .q-w-total { width: 116px; } .vm-quote .q-c { text-align: center; } .vm-quote .q-r { text-align: right; } .vm-quote .q-name { text-align: left; } .vm-quote .q-sum-label, .vm-quote .q-words { text-align: center; font-weight: 700; } .vm-quote .q-notes { margin-bottom: 26px; } .vm-quote .q-notes-title { font-weight: 700; text-decoration: underline; margin-bottom: 4px; } .vm-quote .q-notes ol { margin: 0; padding-left: 26px; } .vm-quote .q-notes li { font-style: italic; margin-bottom: 3px; } .vm-quote .q-sign { display: flex; justify-content: space-around; margin-top: 28px; font-weight: 700; text-align: center; } /* Mobile: thanh dưới xếp theo cột nên flex-basis 420px của .bp-actions bị hiểu thành CHIỀU CAO — tạo khoảng trống lớn giữa các nút. */ @media (max-width: 767px) { .page-product-builder .bp-actions { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .page-product-builder .bp-actions .bp-btn { justify-content: center; padding: 0 10px; } .page-product-builder .bp-actions .bp-btn-primary, .page-product-builder .bp-actions .bp-btn-reset { grid-column: span 2; } }