/* ============================================================ Stylesheet DÙNG CHUNG cho các trang chi tiết sản phẩm đơn lẻ (Product Detail Page — "pdp") của những dòng đàn cao cấp, ví dụ product/sk-7/index.html, product/sk-ex/index.html... Mỗi trang chỉ cần link tới file này (../pdp-style.css) — không cần tạo style.css riêng nữa. Ngôn ngữ thiết kế: biên tập cao cấp (editorial), nhiều khoảng trắng, ảnh lớn, chữ serif — cùng bảng màu vàng/đen với chinhsach.html và 30th-anniversary-style.css (#ac801a / #1a1a1a) để nhất quán toàn site. Header/footer dùng chung từ ../style.css (product/style.css), file này CHỈ chứa phần nội dung riêng của 1 trang sản phẩm (hero, 3 trụ cột, lý do đắt giá, di sản, MPA, thông số, CTA). ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* product/style.css (header/footer dùng chung) không có reset box-sizing toàn cục — mọi phần tử ở đây mặc định content-box. Kết hợp với các nút "width: 100%" + padding ngang trên mobile (.pdp-hero__btn, .pdp-cta__btn...), content-box khiến nút render RỘNG HƠN khung chứa đúng bằng phần padding ngang, tràn ra ngoài và bị cắt mất 1 chút bên phải — đây chính là lỗi "nút bị mất 1 tí bên phải" trên mobile. Ép border-box cho riêng phạm vi trang chi tiết sản phẩm (.pdp-page) để width/padding luôn tính đúng, không đụng tới các trang khác. */ .pdp-page, .pdp-page *, .pdp-page *::before, .pdp-page *::after { box-sizing: border-box; } .pdp-page { background: #fff; } /* Ẩn về mặt hình ảnh nhưng vẫn có trong DOM cho trình đọc màn hình và công cụ tìm kiếm — dùng để chèn tên thương hiệu đầy đủ (vd "Kawai ") vào

mà không phá vỡ thiết kế hero chữ lớn chỉ hiển thị mã model. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----- Sub-nav dính, chuyển nhanh giữa các mục ----- */ .pdp-subnav { position: sticky; top: 70px; z-index: 500; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid #eee; } .pdp-subnav__inner { max-width: 108rem; margin: 0 auto; display: flex; justify-content: center; gap: 0.6rem; padding: 1.1rem 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-subnav__inner::-webkit-scrollbar { display: none; } .pdp-subnav__link { display: inline-flex; align-items: center; white-space: nowrap; padding: 0.7rem 1.6rem; border-radius: 999px; flex-shrink: 0; font-size: 1.12rem; letter-spacing: 0.03em; color: #555; text-decoration: none; transition: all 0.25s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-subnav__link:hover { color: #ac801a; } } .pdp-subnav__link.is-active { background: #ac801a; color: #fff; } @media screen and (max-width: 767px) { .pdp-subnav { top: 100px; } .pdp-subnav__inner { justify-content: flex-start; padding: 0.8rem 1.2rem; } .pdp-subnav__link { padding: 0.55rem 1.3rem; font-size: 1rem; } /* Dải mờ 2 bên báo hiệu còn mục có thể cuộn ngang — cùng kiểu với .policy-subnav bên chinhsach.html, thêm cho .pdp-subnav vì 6 mục (Cam Kết/Giới Thiệu/Giá Trị/Di Sản/Thông Số/Liên Hệ) không vừa 1 màn hình điện thoại, khách cần biết còn nội dung cuộn tiếp. */ .pdp-subnav::before, .pdp-subnav::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.2rem; pointer-events: none; z-index: 1; } .pdp-subnav::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); } .pdp-subnav::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); } } /* ----- Hero: ảnh lớn full-bleed + overlay tối, chữ vàng/trắng ----- Ảnh nền được gắn trực tiếp trong HTML qua thuộc tính style background-image (mỗi model 1 ảnh khác nhau), class này chỉ định nghĩa phần khung/overlay/typography dùng chung. */ .pdp-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; background-color: #111; background-size: cover; background-position: center 30%; background-repeat: no-repeat; } .pdp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 35%, rgba(10,10,10,0.85) 100%); } .pdp-hero__inner { position: relative; z-index: 1; max-width: 108rem; margin: 0 auto; padding: 6rem 2rem 5.5rem; width: 100%; box-sizing: border-box; } .pdp-hero__eyebrow { font-size: 1.2rem; letter-spacing: 0.28em; text-transform: uppercase; color: #f0d78a; margin: 0 0 1.4rem; } .pdp-hero__title { font-family: "Noto Serif JP", serif; font-weight: 600; color: #fff; line-height: 1; font-size: 7.5rem; letter-spacing: 0.04em; margin: 0; } .pdp-hero__title span { display: block; font-size: 1.9rem; font-weight: 400; letter-spacing: 0.14em; color: rgba(255,255,255,0.75); margin-top: 1.2rem; } .pdp-hero__tagline { margin: 2rem 0 0; max-width: 56rem; font-size: 1.35rem; line-height: 1.95; color: rgba(255,255,255,0.85); } /* Giá rút gọn trong hero — điền tự động bằng product-price-fill.js từ store-data.js, xem [data-pdp-price-hero]. */ .pdp-hero__price { margin-top: 1.8rem; font-size: 1.3rem; color: #f0d78a; letter-spacing: 0.02em; } .pdp-hero__price strong { font-family: "Noto Serif JP", serif; font-size: 2.1rem; font-weight: 600; margin-left: 0.4rem; } @media screen and (max-width: 767px) { .pdp-hero__price { font-size: 1.1rem; margin-top: 1.2rem; } .pdp-hero__price strong { font-size: 1.6rem; } } .pdp-hero__actions { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 3rem; } .pdp-hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.2rem 2.8rem; font-size: 1.2rem; letter-spacing: 0.04em; border-radius: 0.3rem; text-decoration: none; transition: all 0.25s ease; } .pdp-hero__btn--gold { background: #ac801a; color: #fff; } @media (hover: hover) and (min-width: 768px) { .pdp-hero__btn--gold:hover { background: #c9a227; } } .pdp-hero__btn--ghost { border: 1px solid rgba(255,255,255,0.5); color: #fff; } @media (hover: hover) and (min-width: 768px) { .pdp-hero__btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); } } @media screen and (max-width: 767px) { /* Hero rút ngắn hơn bản cũ (78vh → 68vh) — mục "3 Trụ Cột Chính Sách" ngay bên dưới là nội dung QUAN TRỌNG NHẤT của trang (xem comment ở .pdp-pillars__grid), nên trên điện thoại không để hero chiếm gần hết màn hình đầu tiên, khách cần thấy được gợi ý cuộn xuống sớm hơn. */ .pdp-hero { min-height: 68vh; align-items: flex-end; background-position: 65% 30%; } .pdp-hero__inner { padding: 3.2rem 1.5rem 2.6rem; } .pdp-hero__title { font-size: 3.6rem; } .pdp-hero__title span { font-size: 1.3rem; margin-top: 0.9rem; } .pdp-hero__tagline { font-size: 1.15rem; margin-top: 1.4rem; } .pdp-hero__actions { flex-direction: column; margin-top: 2.2rem; } .pdp-hero__btn { width: 100%; padding: 1.05rem 2rem; font-size: 1.1rem; } } /* ----- Generic section wrapper ----- */ .pdp-section { max-width: 108rem; margin: 0 auto; padding: 7rem 2rem; scroll-margin-top: 6.5rem; } .pdp-section--alt { background: #faf8f4; } .pdp-section--dark { background: #14120f; color: #fff; } .pdp-section__inner { max-width: 92rem; margin: 0 auto; } @media screen and (max-width: 767px) { /* scroll-margin-top phải đủ lớn để bù cho header 2 dòng (~100px) + sub-nav dính (~50-55px) đè lên trên khi bấm 1 mục trong sub-nav — 4.5rem cũ (~40px) không đủ, khiến tiêu đề mục bị khuất sau 2 thanh cố định này. */ .pdp-section { padding: 4rem 1.5rem; scroll-margin-top: 15rem; } } .pdp-section__eyebrow { text-align: center; font-size: 1.1rem; letter-spacing: 0.24em; text-transform: uppercase; color: #ac801a; margin: 0 0 1.2rem; } .pdp-section--dark .pdp-section__eyebrow { color: #c9a227; } .pdp-section__title { text-align: center; font-family: "Noto Serif JP", serif; font-size: 2.8rem; font-weight: 500; color: #1a1a1a; margin: 0; } .pdp-section--dark .pdp-section__title { color: #f0d78a; } .pdp-section__lead { max-width: 74rem; margin: 2rem auto 0; text-align: center; font-size: 1.3rem; line-height: 2; color: #555; } .pdp-section--dark .pdp-section__lead { color: rgba(255,255,255,0.78); } @media screen and (max-width: 767px) { .pdp-section__title { font-size: 2rem; } .pdp-section__lead { font-size: 1.15rem; line-height: 1.85; margin-top: 1.4rem; } } /* ----- 01/02/03 — 3 Trụ Cột Chính Sách, đặt NGAY sau hero theo yêu cầu "phải đưa chính sách/cam kết của VTM lên hàng đầu" — khách hàng đọc được sự chỉn chu trước cả khi đọc chi tiết kỹ thuật cây đàn. Thẻ 03 (Royal) tô đen/vàng làm điểm nhấn khi sản phẩm thuộc hạng bảo hành cao nhất — tái dùng đúng tinh thần .policy-tier-card--royal bên chinhsach.html để khách nhận ra ngay đây là 1 hệ thống nhất quán. */ .pdp-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; } /* Nâng cấp theo mẫu ô "Giá Đặt Hàng Trước" ở product/30th-anniversary/ (.pdp-price-card__promo trong pdp-30th-style.css) — chủ shop thấy 3 ô Cam Kết (chính hãng/dịch vụ/hậu mãi) trên MỌI trang chi tiết sản phẩm quá đơn điệu, muốn "nổi bật" như mẫu đó. Mượn đúng công thức đã chứng minh hiệu quả: box-shadow LUÔN HIỆN (không chỉ lúc hover — trước đây ẩn lúc thường khiến thẻ trông "chìm" vào nền .pdp-section--alt) + viền TRÊN dày màu vàng thương hiệu làm điểm nhấn, + đường kẻ đứt ngăn cách hẳn phần tiêu đề (01/02/03 — tên trụ cột) với danh sách bên dưới, giống cách price-card tách khối tên model khỏi khối giá. Đây là file CSS dùng chung (.pdp-pillar-card) cho TẤT CẢ trang chi tiết sản phẩm dạng pdp-style.css (K/GL/GX/SK/entry/nd-21/k-15e/k-200/crystal/anytime/ aures/pk/ms-134/130/123...), nên chỉ cần sửa 1 chỗ này là áp dụng cho toàn bộ — không cần đụng vào HTML từng trang. */ .pdp-pillar-card { padding: 2.6rem 2.4rem 2.8rem; background: #fff; border: 1px solid #ecebe7; border-top: 4px solid #ac801a; border-radius: 0.8rem; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.07); transition: box-shadow 0.25s ease, transform 0.25s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-pillar-card:hover { box-shadow: 0 1.4rem 3rem rgba(0,0,0,0.11); transform: translateY(-4px); } } .pdp-pillar-card__num { display: block; font-family: "Noto Serif JP", serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; color: #ac801a; margin: 0 0 1.4rem; padding-bottom: 1.3rem; border-bottom: 1px dashed #ecebe7; } .pdp-pillar-card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .pdp-pillar-card__list li { padding-left: 1.4rem; position: relative; font-size: 1.15rem; line-height: 1.7; color: #555; } .pdp-pillar-card__list li::before { content: ""; position: absolute; left: 0; top: 0.85rem; width: 6px; height: 6px; border-radius: 50%; background: #ac801a; } /* Trade-Up là chính sách ĐẶC BIỆT riêng của Việt Thương Music (giữ nguyên 100% giá trị trong 5 năm khi nâng cấp model), theo yêu cầu chủ shop cần "làm nổi bật" thay vì nằm lẫn như 1 gạch đầu dòng thường trong danh sách — thêm 1 khối nhấn nhẹ (nền vàng nhạt + viền trái vàng), tĩnh chứ không dùng hiệu ứng nhấp nháy/động (đúng gu thương hiệu cao cấp của site: nổi bật nhưng vẫn điềm đạm, không "rẻ tiền"). */ .pdp-pillar-card__list li.pdp-tradeup { padding: 0.8rem 1rem 0.8rem 1.2rem; margin: 0.1rem 0; background: rgba(172, 128, 26, 0.08); border-left: 3px solid #ac801a; border-radius: 0 0.4rem 0.4rem 0; color: #1a1a1a; } .pdp-pillar-card__list li.pdp-tradeup::before { display: none; } .pdp-pillar-card__list li.pdp-tradeup strong { color: #ac801a; } .pdp-pillar-card--royal { background: #1a1a1a; border-color: #1a1a1a; border-top-color: #c9a227; color: #fff; } .pdp-pillar-card--royal .pdp-pillar-card__num { color: #f0d78a; border-bottom-color: rgba(255,255,255,0.15); } .pdp-pillar-card--royal .pdp-pillar-card__list li { color: rgba(255,255,255,0.8); } .pdp-pillar-card--royal .pdp-pillar-card__list li::before { background: #c9a227; } .pdp-pillars__foot { text-align: center; margin-top: 3rem; } .pdp-pillars__foot a { color: #ac801a; font-size: 1.18rem; text-decoration: none; border-bottom: 1px solid rgba(172,128,26,0.4); padding-bottom: 0.2rem; transition: border-color 0.2s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-pillars__foot a:hover { border-color: #ac801a; } } @media screen and (max-width: 900px) { .pdp-pillars__grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.4rem; } } @media screen and (max-width: 767px) { .pdp-pillar-card { padding: 1.8rem 1.8rem; } .pdp-pillar-card__num { font-size: 1.15rem; } .pdp-pillar-card__list li { font-size: 1.08rem; } } /* ----- Giới thiệu — 2 cột: ảnh + chữ ----- */ .pdp-intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: center; margin-top: 3rem; } .pdp-intro__media img { width: 100%; border-radius: 0.6rem; display: block; } .pdp-intro__text p { font-size: 1.25rem; line-height: 2; color: #444; margin: 0 0 1.6rem; } .pdp-intro__text p:last-child { margin-bottom: 0; } .pdp-intro__text strong { color: #1a1a1a; } @media screen and (max-width: 900px) { .pdp-intro__grid { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 2.2rem; } } @media screen and (max-width: 767px) { .pdp-intro__text p { font-size: 1.15rem; } } /* Ô nhấn mạnh 1 điểm khác biệt cốt lõi trong nội dung Giới Thiệu — dùng lần đầu cho K-800AS (khác K-800 tiêu chuẩn ĐÚNG 1 CHỖ: pedal Sostenuto giữa), nhưng để tên chung "pdp-callout" vì sau này có thể dùng lại cho bất kỳ trang special-edition/biến thể nào khác cần làm nổi bật đúng 1 điểm khác biệt so với bản gốc. Viền trái vàng thương hiệu (không phải khung 4 cạnh) để không cạnh tranh với card 2 cột intro bên cạnh, nền be nhạt tách khỏi nền trắng .pdp-intro__text xung quanh. */ .pdp-callout { margin-top: 1.8rem; padding: 1.6rem 1.8rem; background: #faf8f4; border-left: 3px solid #ac801a; border-radius: 0.4rem; } .pdp-callout__ttl { display: block; font-weight: 700; color: #1a1a1a; font-size: 1.12rem; margin-bottom: 0.5rem; } .pdp-callout p { font-size: 1.08rem !important; line-height: 1.8 !important; color: #555 !important; margin: 0 !important; } @media screen and (max-width: 767px) { .pdp-callout { padding: 1.3rem 1.4rem; } } /* ----- Vì sao xứng đáng — lưới chi tiết chế tác ----- */ .pdp-value__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; } .pdp-value-card { background: #fff; border: 1px solid #ecebe7; border-radius: 0.8rem; overflow: hidden; } .pdp-value-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f0eee8; } .pdp-value-card__body { padding: 2rem 2.2rem 2.2rem; } .pdp-value-card__num { font-family: "Noto Serif JP", serif; font-size: 1.3rem; color: #e3d3ac; display: block; margin-bottom: 1rem; } .pdp-value-card__ttl { font-family: "Noto Serif JP", serif; font-size: 1.35rem; color: #1a1a1a; margin: 0 0 0.9rem; line-height: 1.4; } .pdp-value-card__text { font-size: 1.12rem; line-height: 1.85; color: #555; margin: 0; } .pdp-value-card__text em { font-style: italic; color: #333; } @media screen and (max-width: 1024px) { .pdp-value__grid { grid-template-columns: repeat(2, 1fr); } } /* Chia nhóm (Touch/Tone/Strength — dòng GX/GL) bằng THANH TAB thay vì xếp liên tục nhiều khối thẻ từ trên xuống (quá dài, không gọn). Mỗi lần chỉ 1 nhóm hiển thị (panel còn lại có [hidden]), khách bấm tab để chuyển — JS tương ứng nằm trong file HTML từng trang. Lưới 2 cột (thay vì 3) vì mỗi nhóm chỉ có 2-4 thẻ, chia đều không lẻ dòng. */ .pdp-value__tabs { display: flex; justify-content: center; gap: 0.9rem; margin: 3.2rem 0 0; flex-wrap: wrap; } .pdp-value__tab { font-family: inherit; cursor: pointer; background: #fff; border: 1px solid #ddd6c4; border-radius: 999px; padding: 0.7rem 1.9rem; text-align: center; line-height: 1.5; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .pdp-value__tab-en { display: block; font-size: 0.86rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ac801a; } .pdp-value__tab-vi { display: block; font-family: "Noto Serif JP", serif; font-size: 1.08rem; color: #1a1a1a; } @media (hover: hover) and (min-width: 768px) { .pdp-value__tab:hover { border-color: #c9a227; } } .pdp-value__tab--active { background: #1a1a1a; border-color: #1a1a1a; } .pdp-value__tab--active .pdp-value__tab-en { color: #e3c568; } .pdp-value__tab--active .pdp-value__tab-vi { color: #fff; } .pdp-value__group { margin-top: 3rem; } /* Ảnh + câu mở đầu riêng của mỗi nhóm công nghệ (vd MS-134: mỗi nhóm Touch/Sound/Design trên trang chính hãng đều mở đầu bằng 1 ảnh lifestyle + 1 câu dẫn, TRƯỚC lưới thẻ chi tiết) — tùy chọn, chỉ hiện khi trang chèn ảnh này, không ảnh hưởng các trang pdp khác không dùng. */ .pdp-value__lead-img { display: block; width: 100%; max-width: 62rem; margin: 0 auto; border-radius: 0.6rem; aspect-ratio: 27 / 16; object-fit: cover; } .pdp-value__lead-text { max-width: 46rem; margin: 1.4rem auto 0; text-align: center; font-size: 1.15rem; line-height: 1.8; color: #4a4a4a; font-style: italic; } @media screen and (max-width: 767px) { .pdp-value__lead-text { font-size: 1.02rem; margin-top: 1.1rem; } } .pdp-value__grid--pair { grid-template-columns: repeat(2, 1fr); } /* Nhóm Âm Sắc của GL-10/20/30 chỉ có 1 thẻ (không có hệ thống CORE, dành riêng cho GL-40/GL-50) — lưới 2 cột sẽ để trống 1 nửa, nên dùng biến thể 1 cột, giới hạn bề rộng và canh giữa cho cân đối. */ .pdp-value__grid--single { grid-template-columns: 1fr; max-width: 42rem; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .pdp-value__grid--single { max-width: none; } } @media screen and (max-width: 767px) { .pdp-value__tabs { margin-top: 2.2rem; gap: 0.6rem; } .pdp-value__tab { padding: 0.6rem 1.3rem; } .pdp-value__tab-en { font-size: 0.76rem; } .pdp-value__tab-vi { font-size: 0.96rem; } .pdp-value__group { margin-top: 1.8rem; } } /* Gợi ý vuốt ngang — chỉ hiện trên mobile, ẩn trên desktop/tablet vì ở đó lưới vẫn xếp cột bình thường, không cần vuốt. */ .pdp-value__hint { display: none; } @media screen and (max-width: 767px) { /* 9 thẻ full-width xếp DỌC (ảnh 4:3 mỗi thẻ) khiến trang dài hàng ngàn pixel, khách phải lướt rất nhiều mới hết mục này. Đổi sang dải cuộn NGANG (vuốt qua từng thẻ, giống thanh sub-nav phía trên) — chiều cao của cả mục chỉ còn bằng 1 thẻ duy nhất, ảnh cũng nhỏ lại tương ứng vì mỗi thẻ giờ chỉ rộng ~78% màn hình thay vì 100%. */ .pdp-value__grid { display: flex; grid-template-columns: none; overflow-x: auto; gap: 1.2rem; margin-top: 1.8rem; padding: 0.2rem 0.2rem 0.6rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-value__grid::-webkit-scrollbar { display: none; } .pdp-value-card { flex: 0 0 78%; scroll-snap-align: start; } .pdp-value-card__body { padding: 1.5rem 1.6rem 1.7rem; } .pdp-value-card__ttl { font-size: 1.2rem; } .pdp-value-card__text { font-size: 1.02rem; } .pdp-value__hint { display: block; text-align: center; margin-top: 1.4rem; font-size: 0.98rem; letter-spacing: 0.02em; color: #ac801a; } /* Nhóm chỉ có ĐÚNG 1 thẻ (.pdp-value__grid--single, vd tab "Âm Sắc" của K-15E) không có gì để vuốt — carousel ngang ở trên biến nó thành 1 thẻ 78% bề rộng dạt về bên trái, thừa khoảng trắng bên phải, trông lệch. Trả về hiển thị 1 thẻ full-width, canh giữa bình thường; các nhóm có từ 2 thẻ trở lên vẫn giữ nguyên carousel như trên. */ .pdp-value__grid--single { display: block; overflow-x: visible; padding: 0; scroll-snap-type: none; } .pdp-value__grid--single .pdp-value-card { flex: none; width: 100%; scroll-snap-align: none; } } /* ----- Mục công nghệ dạng VĂN BẢN + trích dẫn (không phải lưới ảnh) — dùng khi hãng KHÔNG công khai ảnh cận cảnh thật cho từng công nghệ (vd trang tĩnh kawai-global.com của NV12 chỉ có 1 ảnh hero, khác với dòng SK/GX vốn tìm được bộ ảnh cận cảnh riêng từng chi tiết chế tác) — thay vì lưới .pdp-value-card cần ảnh, dùng khối văn bản nối tiếp trong mỗi tab, câu trích dẫn nổi bật viền vàng giống .pdp-heritage__quote nhưng cho nền sáng. Không tự chế ảnh minh họa khi không có ảnh thật. */ .pdp-feature__block { max-width: 76rem; margin: 3rem auto 0; } .pdp-feature__block + .pdp-feature__block { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #ecebe7; } .pdp-feature__ttl { font-family: "Noto Serif JP", serif; font-size: 1.6rem; color: #1a1a1a; margin: 0 0 1.4rem; } .pdp-feature__block p { font-size: 1.2rem; line-height: 1.95; color: #555; margin: 0 0 1.4rem; } .pdp-feature__block p:last-child { margin-bottom: 0; } .pdp-feature__quote { margin: 1.8rem 0; padding: 0 0 0 2rem; border-left: 3px solid #ac801a; font-family: "Noto Serif JP", serif; font-size: 1.4rem; font-style: italic; color: #1a1a1a; line-height: 1.6; } /* Ảnh minh họa lớn, mở đầu cả mục (trước thanh tab) — dùng khi có 1 ảnh thật đại diện chung cho cả trải nghiệm, không gắn riêng 1 tab nào. */ .pdp-value__showcase { margin: 3rem auto 0; max-width: 92rem; } .pdp-value__showcase img { width: 100%; border-radius: 0.6rem; display: block; } /* Showcase "xuyên thấu": ảnh vỏ ngoài (solid) hiện ra trước, rồi mờ dần nhường chỗ cho ảnh xuyên thấu (semi-transparent) lộ ra cấu tạo hybrid bên trong — mỗi ảnh "tồn tại" trọn 2 giây trong chu kỳ 4 giây, lặp vô hạn. Lớp solid LUÔN giữ opacity: 1, không tự mờ đi — chỉ lớp xray phủ lên trên mờ dần vào/ra. Nhờ vậy nền trang không bao giờ lộ ra qua chỗ giao giữa 2 lớp, tránh hiện tượng "sáng lên" giữa chừng; đây là một phép hòa (mix) thuần giữa 2 ảnh chứ không phải 2 lớp cùng mờ độc lập. */ .pdp-value__showcase--xray { position: relative; overflow: hidden; border-radius: 0.6rem; background: #000; } .pdp-value__showcase-layer { width: 100%; border-radius: 0.6rem; display: block; } .pdp-value__showcase-layer--solid { position: relative; } .pdp-value__showcase-layer--xray { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; animation: pdp-xray-reveal 4s ease-in-out infinite; } @keyframes pdp-xray-reveal { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pdp-value__showcase-layer--xray { animation: none; opacity: 0; } } /* Ảnh CHÍNH (hero) — 1 ảnh lớn, nổi bật nhất, mở đầu mỗi khối công nghệ trong tab. Khung rộng cố định (16:9) để "to" nhất quán giữa các tab dù ảnh gốc có tỷ lệ khác nhau, thay vì để mỗi tab cao thấp tùy ảnh gốc. */ .pdp-feature__hero { margin: 0 0 1.8rem; } .pdp-feature__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.6rem; display: block; background: #f4f2ee; } /* Ảnh PHỤ — xếp thành dải NGAY BÊN DƯỚI ảnh chính, cùng khung/tỷ lệ 4:3 ĐỒNG DẠNG VỚI NHAU (object-fit: cover) dù ảnh gốc dọc/ngang/vuông khác nhau — nhỏ hơn ảnh chính rõ rệt để giữ đúng thứ bậc chính/phụ, nhưng không đứa to đứa nhỏ lộn xộn với nhau trong cùng dải. Số cột khớp đúng số ảnh phụ (2, 3 hoặc 4). */ .pdp-feature__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin: 0 0 2.4rem; } .pdp-feature__gallery--2 { grid-template-columns: repeat(2, 1fr); } .pdp-feature__gallery--4 { grid-template-columns: repeat(4, 1fr); } .pdp-feature__gallery--5 { grid-template-columns: repeat(5, 1fr); } .pdp-feature__gallery .pdp-feature__figure { margin: 0; } .pdp-feature__gallery .pdp-feature__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.6rem; display: block; background: #f4f2ee; } .pdp-feature__figure figcaption { margin-top: 0.8rem; font-size: 1rem; color: #999; text-align: center; line-height: 1.6; } @media screen and (max-width: 767px) { .pdp-feature__block { margin-top: 2.2rem; } .pdp-feature__block + .pdp-feature__block { margin-top: 2.2rem; padding-top: 2.2rem; } .pdp-feature__ttl { font-size: 1.32rem; } .pdp-feature__block p { font-size: 1.1rem; line-height: 1.85; } .pdp-feature__quote { font-size: 1.2rem; padding-left: 1.5rem; margin: 1.5rem 0; } .pdp-value__showcase { margin-top: 2.2rem; } .pdp-feature__figure figcaption { font-size: 0.92rem; } /* Trên mobile, lưới nhiều cột sẽ ép ảnh quá nhỏ để đọc chi tiết — đổi thành dải vuốt ngang, mỗi ảnh chiếm ~78% màn hình, giống cách các lưới ảnh khác trên trang này xử lý (xem .pdp-value__grid). */ .pdp-feature__gallery, .pdp-feature__gallery--2, .pdp-feature__gallery--4, .pdp-feature__gallery--5 { display: flex; grid-template-columns: none; overflow-x: auto; gap: 1.2rem; margin: 0 0 1rem; padding: 0.2rem 0.2rem 0.6rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-feature__gallery::-webkit-scrollbar, .pdp-feature__gallery--2::-webkit-scrollbar, .pdp-feature__gallery--4::-webkit-scrollbar, .pdp-feature__gallery--5::-webkit-scrollbar { display: none; } .pdp-feature__gallery .pdp-feature__figure { flex: 0 0 78%; scroll-snap-align: start; } /* Riêng dải chỉ có 2 ảnh phụ: đủ nhỏ để hiện trọn cả 2 cùng lúc trên màn hình, không cần vuốt — vuốt ngang cho đúng 2 ảnh dễ bị hiểu nhầm là "mất ảnh" vì ảnh thứ 2 chỉ ló ra một mẩu ở rìa màn hình. Chuyển về lưới 2 cột co giãn theo màn hình, cả 2 ảnh luôn hiện đủ. */ .pdp-feature__gallery--2 { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; gap: 1rem; scroll-snap-type: none; padding: 0; margin-bottom: 2.2rem; } .pdp-feature__gallery--2 .pdp-feature__figure { flex: none; scroll-snap-align: none; } /* Dải có 3-4 ảnh phụ vẫn vuốt ngang (thu nhỏ vừa đủ để đọc chi tiết ảnh), nhưng ảnh còn lại chỉ ló một mẩu rìa — trên ảnh nền đen của Kawai, mẩu đó gần như vô hình nên dễ bị hiểu lầm là hết ảnh. Thêm chấm chỉ số vị trí (tĩnh, không nhấp nháy — xem .s-lineup-link__dot) để báo rõ còn ảnh phía sau, JS điền chấm theo đúng số ảnh trong từng dải. */ .pdp-feature__dots { display: flex; justify-content: center; gap: 0.6rem; margin: 0 0 2.2rem; } .pdp-feature__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d8d8d8; transition: background 0.25s ease; } .pdp-feature__dot.is-active { background: #ac801a; } } @media screen and (min-width: 768px) { .pdp-feature__dots { display: none; } } /* Sơ đồ kích thước trong mục Thông Số Kỹ Thuật */ .pdp-specs__dims { margin: 3rem auto 0; max-width: 64rem; } .pdp-specs__dims img { width: 100%; border-radius: 0.6rem; display: block; } @media screen and (max-width: 767px) { .pdp-specs__dims { margin-top: 2.2rem; } } /* ----- Di sản Shigeru Kawai — nền tối, văn bản kể chuyện + trích dẫn ----- */ .pdp-heritage__body { max-width: 78rem; margin: 3.5rem auto 0; } .pdp-heritage__body p { font-size: 1.25rem; line-height: 2.05; color: rgba(255,255,255,0.82); margin: 0 0 1.8rem; } .pdp-heritage__quote { margin: 3rem 0; padding: 0 0 0 2.2rem; border-left: 3px solid #c9a227; font-family: "Noto Serif JP", serif; font-size: 1.55rem; font-style: italic; color: #f0d78a; line-height: 1.7; } @media screen and (max-width: 767px) { .pdp-heritage__body p { font-size: 1.12rem; line-height: 1.9; } .pdp-heritage__quote { font-size: 1.25rem; padding-left: 1.6rem; margin: 2.2rem 0; } } /* Ảnh minh họa chế tác thủ công trong khối Di Sản — tùy chọn, chỉ dùng khi trang có ảnh thật (vd MS-134: nghệ nhân đeo găng trắng chỉnh búa đàn). Không bắt buộc, các trang Di Sản khác không có ảnh vẫn không bị ảnh hưởng vì đây là class riêng, chỉ áp dụng khi được chèn. */ .pdp-heritage__photo { display: block; width: 100%; max-width: 56rem; margin: 0 auto 3rem; border-radius: 0.6rem; } @media screen and (max-width: 767px) { .pdp-heritage__photo { margin-bottom: 2rem; } } /* ----- Master Piano Artisans — cùng tông với .policy-mpa bên chinhsach ----- */ .pdp-mpa { max-width: 92rem; margin: 3.5rem auto 0; padding: 3rem 3.2rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.8rem; } .pdp-mpa__ttl { font-family: "Noto Serif JP", serif; font-size: 1.8rem; color: #f0d78a; margin: 0 0 1.2rem; } .pdp-mpa__text { font-size: 1.18rem; line-height: 1.95; color: rgba(255,255,255,0.8); margin: 0 0 1.2rem; } .pdp-mpa__text:last-child { margin-bottom: 0; } .pdp-mpa__note { margin-top: 1.6rem; font-size: 1.02rem; color: rgba(255,255,255,0.45); } @media screen and (max-width: 767px) { .pdp-mpa { padding: 2.2rem 1.8rem; margin-top: 2.4rem; } } /* ----- Thông số kỹ thuật ----- */ /* ----- Bảng giá theo màu/phiên bản — điền tự động bằng product-price-fill.js từ store-data.js, xem [data-pdp-price-table]. Ban đầu làm dạng bảng liệt kê (giống .pdp-specs) nhưng chủ shop phản hồi "đơn điệu, chưa hấp dẫn, chưa chuyên nghiệp" — đổi sang dạng THẺ (1 thẻ/màu), mượn đúng công thức thẻ đã được duyệt ở .pdp-pillar-card (viền trên vàng + shadow LUÔN hiện, không chỉ lúc hover + hover nổi lên) thay vì tự nghĩ ra kiểu mới — mỗi thẻ có chấm màu swatch thật, badge giảm giá nổi bật, giá bán cỡ lớn kiểu serif thay vì text thường trong ô bảng. ----- */ .pdp-price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } /* Đa số model chỉ có 1-2 biến thể màu (không phải 3 như K-15E) — lưới 3 cột cố định sẽ để trống 1-2 ô bên phải, lệch hẳn sang trái. Cùng cách giải quyết đã dùng cho .pdp-value__grid--single/--pair: co số cột lại đúng số thẻ thật, canh giữa khi chỉ có 1 thẻ. */ .pdp-price__grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 62rem; margin-left: auto; margin-right: auto; } .pdp-price__grid--single { grid-template-columns: 1fr; max-width: 34rem; margin-left: auto; margin-right: auto; } .pdp-price-tile { position: relative; padding: 2.8rem 2.2rem 2.6rem; background: #fff; border: 1px solid #ecebe7; border-top: 4px solid #ac801a; border-radius: 0.8rem; text-align: center; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.07); transition: box-shadow 0.25s ease, transform 0.25s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-price-tile:hover { box-shadow: 0 1.4rem 3rem rgba(0,0,0,0.11); transform: translateY(-4px); } } .pdp-price-tile__badge { position: absolute; top: -1rem; right: 1.8rem; padding: 0.45rem 1.1rem; background: #c0392b; color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; box-shadow: 0 0.3rem 0.9rem rgba(192, 57, 43, 0.35); } .pdp-price-tile__swatch { display: block; width: 4.6rem; height: 4.6rem; border-radius: 50%; margin: 0 auto 1.8rem; box-shadow: 0 0 0 1px #ddd6c4, 0 0.5rem 1.2rem rgba(0, 0, 0, 0.12); } .pdp-price-tile__name { font-family: "Noto Serif JP", serif; font-size: 1.4rem; font-weight: 500; color: #1a1a1a; margin: 0; } .pdp-price-tile__origin { margin: 0.5rem 0 0; font-size: 0.98rem; color: #999; } .pdp-price-tile__price { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed #ecebe7; } .pdp-price-tile__old { display: block; text-decoration: line-through; color: #aaa; font-size: 1.05rem; margin-bottom: 0.4rem; } .pdp-price-tile__now { display: block; font-family: "Noto Serif JP", serif; font-size: 1.9rem; font-weight: 700; color: #ac801a; letter-spacing: 0.01em; } .pdp-price-tile__contact { display: block; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed #ecebe7; font-size: 1.2rem; font-weight: 600; color: #ac801a; text-decoration: none; } @media (hover: hover) and (min-width: 768px) { .pdp-price-tile__contact:hover { color: #c9a227; } } /* Link "Liên hệ tư vấn" phụ, hiện thêm ở CẢ ô đã có giá (không chỉ ô "Liên hệ báo giá") — xem ghi chú trong product-price-fill.js. */ .pdp-price-tile__link { display: block; margin-top: 1rem; font-size: 1.02rem; color: #ac801a; text-decoration: none; } @media (hover: hover) and (min-width: 768px) { .pdp-price-tile__link:hover { color: #c9a227; } } .pdp-price__note { margin-top: 2.8rem; text-align: center; font-size: 1.1rem; color: #777; } .pdp-price__note a { color: #ac801a; } /* Phụ kiện bán riêng (vd ghế đàn GP-9M) — 1 Ô NHỎ giống dạng thẻ giá (.pdp-price-tile) nhưng gọn/nằm ngang, có ảnh thật — điền tự động bằng product-price-fill.js từ product.bundleAccessory trong store-data.js, chỉ xuất hiện ở model nào có field này. Theo đúng phản hồi "trình bày 1 cái ô nhỏ thôi cũng được, giống tag giá" (không phải đoạn text trần như bản đầu). */ .pdp-price__accessory { display: flex; align-items: center; gap: 1.8rem; max-width: 50rem; margin: 2.8rem auto 0; padding: 1.6rem 2rem; background: #fff; border: 1px solid #ecebe7; border-radius: 0.8rem; box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.06); text-align: left; } .pdp-price__accessory-img { width: 10rem; height: 7.5rem; object-fit: cover; flex-shrink: 0; border-radius: 0.5rem; background: #faf8f4; } .pdp-price__accessory-body { min-width: 0; } .pdp-price__accessory-note { margin: 0; font-size: 0.98rem; color: #888; } .pdp-price__accessory-note strong { color: #1a1a1a; } .pdp-price__accessory-name { margin: 0.3rem 0 0; font-size: 1.15rem; color: #1a1a1a; } .pdp-price__accessory-name span { font-weight: 400; color: #999; font-size: 0.9em; } .pdp-price__accessory-price { margin: 0.4rem 0 0; font-size: 1.2rem; } .pdp-price__accessory-price strong { color: #ac801a; font-weight: 700; } .pdp-price__accessory-old { text-decoration: line-through; color: #999; margin-right: 0.6rem; font-size: 0.85em; } @media screen and (max-width: 767px) { .pdp-price__accessory { gap: 1.2rem; padding: 1.1rem 1.3rem; margin-top: 2rem; } .pdp-price__accessory-img { width: 6.4rem; height: 4.8rem; } .pdp-price__accessory-name { font-size: 1.02rem; } .pdp-price__accessory-price { font-size: 1.08rem; } } @media screen and (max-width: 900px) { .pdp-price__grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.4rem; } } /* Trên mobile, thẻ dọc căn giữa (đẹp trên desktop) bị chủ shop chê "đơn điệu... cần gọn hơn" khi xếp chồng 3 thẻ cao — đổi sang 1 HÀNG NGANG gọn/thấp cho mỗi màu: swatch nhỏ bên trái, tên+xuất xứ ở giữa, giá bên phải, badge giảm giá thành chip nhỏ cạnh giá thay vì nhãn nổi phía trên thẻ. Không đổi HTML/JS — chỉ đổi cách bày các phần tử con bằng flexbox, .pdp-price-tile__info (bọc tên+xuất xứ) vẫn là 1 khối block bình thường trên desktop, chỉ trở thành 1 flex item ở đây. */ @media screen and (max-width: 767px) { .pdp-price-tile { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.2rem; row-gap: 0.5rem; padding: 1.4rem 1.6rem; text-align: left; } .pdp-price-tile__badge { position: static; order: 3; margin-left: auto; padding: 0.3rem 0.7rem; font-size: 0.72rem; } .pdp-price-tile__swatch { order: 1; width: 3.2rem; height: 3.2rem; margin: 0; flex-shrink: 0; } .pdp-price-tile__info { order: 2; flex: 1 1 9rem; min-width: 0; } .pdp-price-tile__name { font-size: 1.06rem; } .pdp-price-tile__origin { margin-top: 0.2rem; font-size: 0.85rem; } /* .pdp-price-tile__foot bọc CHUNG giá + link "Liên hệ tư vấn" thành 1 dòng duy nhất (thay vì mỗi cái 1 dòng riêng) — tránh thêm dòng làm thẻ dài ra, theo đúng phản hồi của chủ shop. Viền/khoảng cách trước đây gắn riêng trên .pdp-price-tile__price/__contact nay chuyển hết lên đây, chỉ 1 border-top duy nhất cho cả dòng. */ .pdp-price-tile__foot { order: 4; flex-basis: 100%; display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; row-gap: 0.2rem; margin: 0; padding-top: 0.6rem; border-top: 1px dashed #ecebe7; } /* Giá bên PHẢI (dễ dò theo cột), "Liên hệ tư vấn" bên TRÁI — đảo vị trí bằng order, không đổi thứ tự HTML (order 1 = link/contact, order 2 = giá), để giá luôn nằm ở 1 cột cố định bên phải cho dễ so sánh giữa các thẻ màu. */ .pdp-price-tile__price { order: 2; margin: 0; padding: 0; border: none; text-align: right; } .pdp-price-tile__old { display: inline; margin: 0 0.6rem 0 0; font-size: 0.9rem; } .pdp-price-tile__now { display: inline; font-size: 1.35rem; } /* margin-left: auto đảm bảo vẫn nằm bên phải kể cả khi đây là phần tử DUY NHẤT trong .pdp-price-tile__foot (ô "Liên hệ báo giá" không có link phụ đi kèm) — justify-content: space-between không tự đẩy phải nếu chỉ có 1 item. */ .pdp-price-tile__contact { order: 2; margin: 0 0 0 auto; padding: 0; border: none; font-size: 1.05rem; text-align: right; } .pdp-price-tile__link { order: 1; margin: 0; font-size: 0.92rem; text-align: left; } } .pdp-specs__wrap { margin-top: 3rem; overflow-x: auto; } .pdp-specs table { width: 100%; border-collapse: collapse; font-size: 1.18rem; } .pdp-specs th, .pdp-specs td { text-align: left; padding: 1.3rem 1.6rem; border-bottom: 1px solid #ecebe7; } .pdp-specs th { width: 38%; color: #888; font-weight: 400; letter-spacing: 0.02em; } .pdp-specs td { color: #1a1a1a; font-weight: 500; } .pdp-specs tr:last-child th, .pdp-specs tr:last-child td { border-bottom: none; } @media screen and (max-width: 767px) { .pdp-specs table { font-size: 1.02rem; } .pdp-specs th, .pdp-specs td { padding: 1rem 1rem; } } /* Màn hình rất hẹp (điện thoại nhỏ): nhãn dài (vd "Bề mặt phím trắng / đen", "Casters / Giá nhạc") ép vào 38% cột trái sẽ vỡ dòng xấu — xếp nhãn lên trên, giá trị xuống dưới trong cùng 1 khối, dễ đọc hơn nhiều so với bảng 2 cột chật hẹp. */ @media screen and (max-width: 480px) { .pdp-specs table, .pdp-specs tbody, .pdp-specs tr, .pdp-specs th, .pdp-specs td { display: block; width: 100%; } .pdp-specs tr { padding: 0.9rem 0; border-bottom: 1px solid #ecebe7; } .pdp-specs tr:last-child { border-bottom: none; } .pdp-specs th, .pdp-specs td { padding: 0; border-bottom: none; } .pdp-specs th { font-size: 0.92rem; color: #999; margin-bottom: 0.3rem; } .pdp-specs td { font-size: 1.08rem; } } /* ----- "Có thể bạn cũng quan tâm" — section tĩnh dưới Thông Số, trước CTA cuối trang (xem renderInlineRelatedSection() ở custom-header.js — trước đây là nút nổi + panel bung ra, chủ site phản hồi "khá phiền" trên trang sản phẩm nên đổi hẳn thành 1 phần nội dung cố định của trang). Bố cục mượn công thức lưới 3 cột đã duyệt ở .pdp-pillars__grid, ảnh dạng object-fit: contain (không cắt ảnh sản phẩm) trên nền kem nhạt giống ảnh trong .vtm-related__img cũ. */ .pdp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .pdp-related__item { display: block; text-decoration: none; color: inherit; text-align: center; } .pdp-related__img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f7f5f0; border-radius: 0.6rem; margin-bottom: 0.9rem; transition: transform 0.2s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-related__item:hover .pdp-related__img { transform: scale(1.04); } } .pdp-related__name { font-size: 1.15rem; color: #1a1a1a; } @media screen and (max-width: 900px) { .pdp-related__grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.2rem; } } /* ----- CTA cuối trang ----- */ .pdp-cta { background: #1a1a1a; } .pdp-cta__box { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; } .pdp-cta__left { max-width: 52rem; } .pdp-cta__badge { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f0d78a; border: 1px solid #c9a227; border-radius: 999px; padding: 0.4rem 1.2rem; margin-bottom: 1.6rem; } /* Tem khuyến mãi — tặng thêm 5 lần bảo dưỡng (model Kawai Indonesia). Đặt dưới hàng số liệu (facts), tông vàng đồng bộ với badge/nút gold sẵn có trên trang, bấm vào chuyển sang trang Store. */ .pdp-cta__promo { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 0.15rem; column-gap: 0.5rem; max-width: 100%; background: linear-gradient(135deg, #ac801a, #f0d78a); color: #1a1a1a; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.6rem; padding: 0.4rem 0.9rem; margin-top: 1.4rem; text-decoration: none; box-shadow: 0 4px 10px rgba(172,128,26,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (min-width: 768px) { .pdp-cta__promo:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(172,128,26,0.45); } } .pdp-cta__promo-arrow { text-decoration: underline; white-space: nowrap; } .pdp-cta__title { font-family: "Noto Serif JP", serif; font-size: 2.4rem; color: #fff; margin: 0 0 1.2rem; } .pdp-cta__text { font-size: 1.2rem; line-height: 1.9; color: rgba(255,255,255,0.72); margin: 0; } .pdp-cta__facts { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; } /* Gợi ý "Có thể bạn cũng quan tâm" — ĐÃ CHUYỂN vào assets/js/custom-header.js (nút .vtm-related, gộp chung với nút "Aa") để hiện được ở MỌI trang, không riêng gì trang PDP nữa. CSS tương ứng giờ cũng nằm trong custom-header.js (tự chèn