@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho&display=swap");

/* Fluid root font-size — đồng bộ với style.css gốc để .vt-footer (dùng rem)
   hiển thị đúng tỉ lệ như trên các trang chính. Không ảnh hưởng các quy tắc
   khác trong file này vì toàn bộ đều dùng px, không dùng rem. */
@media screen and (min-width: 1600px) {
  html { font-size: 12.6984126984px; }
}
@media screen and (min-width: 768px) and (max-width: 1599px) {
  html { font-size: 0.7936507937vw; }
}
@media screen and (max-width: 767px) {
  html { font-size: 2.5vw; }
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #222222;
  line-height: 2.4;
  margin: 0;
}

/* Hiệu ứng "hiện dần lên khi cuộn tới" — đồng bộ với style.css gốc (xem
   assets/js/reveal-on-scroll.js). Trang chi tiết sản phẩm dùng file CSS
   riêng này (không nạp style.css) nên cần khai báo lại ở đây. */
.js-inveiw-intro {
  opacity: 0.05;
  transform: translateY(-1rem);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.js-inveiw-intro.is-visible {
  opacity: 1 !important;
  transform: translateY(0);
}
.js-inveiw-intro-items > * {
  opacity: 0;
  transform: translateY(-1rem);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.js-inveiw-intro-items > *.is-visible {
  opacity: 1 !important;
  transform: translateY(0);
}

.custom-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      background-color: rgba(255, 255, 255, 0.95);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 40px;
      box-sizing: border-box;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    .custom-header__logo a {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .custom-header__logo img {
      display: block;
      max-height: 30px;
      width: auto;
    }
    .custom-header__nav {
      display: flex;
      gap: 30px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .custom-header__nav a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      font-size: 15px;
      text-transform: uppercase;
      transition: opacity 0.3s;
    }
    html[data-text-scale-active] .custom-header__nav a { font-size: calc(15px * var(--text-scale, 1)); }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__nav a:hover { opacity: 0.5; }
}
    /* Trang đang xem — xem custom-header.js. */
    .custom-header__nav a.is-active { color: #ac801a; }

    /* "Liên hệ" chèn kế bên logo trên mobile (xem assets/js/custom-header.js) —
       đồng bộ với style.css gốc. Ẩn mặc định (desktop); bản mobile hiện ra ở
       @media bên dưới. Rule ẩn này PHẢI đứng trước rule hiện trong @media —
       cùng độ đặc hiệu (1 class) nên rule đứng sau trong file luôn thắng. */
    .custom-header__mobile-contact {
      display: none;
    }

    /* "DANH MỤC" — đồng bộ với style.css gốc để dropdown hiển thị đúng
       (trước đây thiếu CSS này nên panel bị lộ luôn, không ẩn được). */
    .custom-header__nav-dropdown { position: relative; }
    .custom-header__nav-dropdown-toggle {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
      line-height: inherit;
      vertical-align: baseline;
      text-decoration: none;
      color: #333;
      font-weight: bold;
      font-size: 15px;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.3s;
    }
    html[data-text-scale-active] .custom-header__nav-dropdown-toggle { font-size: calc(15px * var(--text-scale, 1)); }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__nav-dropdown-toggle:hover { opacity: 0.5; }
}
    /* Đang xem 1 trang con của "Danh mục" — xem custom-header.js. */
    .custom-header__nav-dropdown-toggle.is-active { color: #ac801a; }
    .custom-header__nav-dropdown-arrow {
      width: 11px;
      height: 11px;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    .custom-header__nav-dropdown.is-open .custom-header__nav-dropdown-arrow {
      transform: rotate(180deg);
    }
    /* Panel dạng "liquid glass" — ĐỒNG BỘ với style.css gốc (alpha nền
       0.95, không phải 0.9 như .vtm-textsize__panel/.vtm-related__panel —
       xem lý do đầy đủ tại rule tương ứng ở đó). */
    .custom-header__nav-dropdown-panel {
      position: absolute;
      top: calc(100% + 20px);
      right: 0;
      min-width: 230px;
      background: rgba(255, 255, 255, 0.95);
      -webkit-backdrop-filter: blur(12px) saturate(150%);
      backdrop-filter: blur(12px) saturate(150%);
      border-radius: 10px;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    }
    .custom-header__nav-dropdown.is-open .custom-header__nav-dropdown-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .custom-header__nav .custom-header__nav-dropdown-item {
      display: block;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0.02em;
      color: #333;
      text-decoration: none;
      white-space: nowrap;
      text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.6);
      transition: background 0.2s ease, color 0.2s ease;
    }
    html[data-text-scale-active] .custom-header__nav .custom-header__nav-dropdown-item { font-size: calc(14px * var(--text-scale, 1)); }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__nav-dropdown-item:hover {
      background: #f7f5f0;
      color: #ac801a;
    }
}
    /* Trang đang xem — xem custom-header.js. */
    .custom-header__nav-dropdown-item.is-active {
      color: #ac801a;
    }
    .custom-header__nav-dropdown-item + .custom-header__nav-dropdown-item {
      border-top: 1px solid #f0f0f0;
    }

    /* Ô "Tìm kiếm" trong header (desktop) — ĐỒNG BỘ với style.css gốc
       (đổi 1 trong 2 chỗ thì phải đổi theo ở chỗ kia), xem đầy đủ chú
       thích tại rule gốc trong style.css. Trang sản phẩm dùng riêng file
       CSS này (không nạp style.css) nên cần lặp lại y hệt ở đây. */
    .custom-header__nav-search {
      position: relative;
    }
    .custom-header__search-toggle {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 7px 16px;
      border: 1px solid #ddd;
      border-radius: 999px;
      background: #fff;
      font-family: inherit;
      color: #333;
      font-weight: bold;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .custom-header__search-toggle svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__search-toggle:hover {
      background: #f7f5f0;
      border-color: #c9a227;
    }
}
    .custom-header__nav-search.is-open .custom-header__search-toggle {
      border-color: #c9a227;
      color: #ac801a;
    }
    /* Panel dạng "liquid glass" — ĐỒNG BỘ với style.css gốc, xem chú thích
       đầy đủ tại rule tương ứng ở đó. */
    /* CÙNG CÔNG THỨC kính với .custom-header__nav-dropdown-panel phía trên
       (và .vtm-textsize__panel/.vtm-related__panel) — xem chú thích ở đó. */
    .custom-header__search-panel {
      position: absolute;
      top: calc(100% + 20px);
      right: 0;
      width: 360px;
      max-width: calc(100vw - 4rem);
      background: rgba(255, 255, 255, 0.95);
      -webkit-backdrop-filter: blur(12px) saturate(150%);
      backdrop-filter: blur(12px) saturate(150%);
      border-radius: 12px;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
      padding: 14px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      z-index: 10000;
    }
    .custom-header__nav-search.is-open .custom-header__search-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .custom-header__search-panel-inputwrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border: 1px solid #eee;
      border-radius: 8px;
      background: #f9f8f5;
    }
    .custom-header__search-panel-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #999;
      display: flex;
    }
    .custom-header__search-panel-icon svg {
      width: 100%;
      height: 100%;
    }
    .custom-header__search-panel-input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: normal;
      text-transform: none;
      color: #1a1a1a;
    }
    .custom-header__search-panel-body {
      max-height: 360px;
      overflow-y: auto;
      margin-top: 10px;
    }
    .custom-header__search-hint {
      margin: 6px 4px;
      color: #888;
      font-size: 12.5px;
      font-weight: normal;
      text-transform: none;
      line-height: 1.6;
    }
    /* !important — ĐỒNG BỘ với style.css gốc, xem chú thích ở đó. */
    .custom-header__search-hint a {
      color: #c9a227;
      font-size: inherit !important;
      font-weight: inherit !important;
      text-transform: none !important;
    }
    .custom-header__search-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    /* !important trên 3 thuộc tính dưới đây — ĐỒNG BỘ với style.css gốc,
       xem chú thích đầy đủ tại rule gốc trong file đó (".custom-header__nav a"
       có độ đặc hiệu cao hơn 1 class đơn nên đè ngược nếu thiếu !important). */
    .custom-header__search-chip {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 999px;
      background: #f7f5f0;
      border: 1px solid #eee;
      color: #333;
      font-size: 13px !important;
      font-weight: 500 !important;
      text-transform: none !important;
      text-decoration: none;
      white-space: nowrap;
    }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__search-chip:hover {
      background: #efece4;
    }
}
    .custom-header__search-result {
      display: block;
      padding: 8px 4px;
      text-decoration: none;
      border-bottom: 1px solid #f5f5f5;
    }
    .custom-header__search-result:last-child {
      border-bottom: none;
    }
    .custom-header__search-result-cat {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #c9a227;
      margin-bottom: 2px;
    }
    .custom-header__search-result-title {
      display: block;
      font-size: 13.5px;
      font-weight: 600;
      text-transform: none;
      color: #1a1a1a;
      line-height: 1.35;
    }
    @media (hover: hover) and (min-width: 768px) {
  .custom-header__search-result:hover .custom-header__search-result-title {
      color: #ac801a;
    }
}

    /* Footer dùng chung (.vt-footer) — đồng bộ với style.css gốc để các
       trang sản phẩm dùng chung 1 footer với phần còn lại của site thay
       vì footer rút gọn ".sk-footer" trước đây. */
    .vt-footer {
      background: #0a0a0a;
      color: #fff;
      padding: 3rem 2rem 1rem;
      margin-top: auto;
      position: relative;
      z-index: 2;
    }
    .vt-footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .vt-footer__col--brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 1.5rem;
    }
    .vt-footer__col--products,
    .vt-footer__col--contact,
    .vt-footer__col--nav {
      text-align: left;
    }
    .vt-footer__logo { display: inline-block; }
    .vt-footer__logo img {
      display: block;
      max-height: 40px;
      width: auto;
    }
    .vt-footer__brand-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: stretch;
      gap: 1rem;
    }
    .vt-footer__social {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }
    .vt-footer__social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.7);
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .vt-footer__social-link svg { width: 16px; height: 16px; }
    @media (hover: hover) and (min-width: 768px) {
      .vt-footer__social-link:hover {
        background: #c9a227;
        border-color: #c9a227;
        color: #0a0a0a;
      }
    }
    .vt-footer__col-ttl {
      position: relative;
      font-size: 1.4rem;
      font-weight: 600;
      color: #fff;
      margin: 0 0 1.5rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding-left: 0.8rem;
    }
    .vt-footer__col-ttl::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 1em;
      width: 3px;
      background: #c9a227;
    }
    .vt-footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
    .vt-footer__list li { margin: 0; }
    .vt-footer__link {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: color 0.3s ease;
      line-height: 1.6;
    }
    @media (hover: hover) and (min-width: 768px) {
  .vt-footer__link:hover { color: #ac801a; }
}
    .vt-footer__bottom {
      max-width: 1200px;
      margin: 2rem auto 0;
      text-align: center;
    }
    .vt-footer__copyright {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.5);
      margin: 0;
      letter-spacing: 0.05em;
    }
    @media screen and (max-width: 1024px) {
      .vt-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }
    }
    @media screen and (max-width: 767px) {
      .vt-footer { padding: 2.5rem 1rem 1rem; }
      .vt-footer__inner {
        display: grid;
        grid-template-areas:
          "brand products"
          "contact nav";
        grid-template-columns: fit-content(46%) fit-content(46%);
        justify-content: center;
        gap: 1.4rem 7rem;
        padding-bottom: 1.6rem;
      }
      .vt-footer__col--brand { grid-area: brand; }
      .vt-footer__col--products { grid-area: products; }
      .vt-footer__col--contact { grid-area: contact; }
      .vt-footer__col--nav { grid-area: nav; }
      .vt-footer__col--brand,
      .vt-footer__col--products,
      .vt-footer__col--contact,
      .vt-footer__col--nav {
        text-align: left;
      }
      .vt-footer__col--brand {
        align-items: flex-start;
        gap: 1rem;
      }
      .vt-footer__list { align-items: flex-start; }
      .vt-footer__logo { align-self: flex-start; }
      .vt-footer__logo img { max-height: 28px; margin-left: 0; }
      .vt-footer__col-ttl {
        font-size: 1.05rem;
        margin-bottom: 0.7rem;
        line-height: 1.2;
      }
      .vt-footer__list { gap: 0.55rem; }
      .vt-footer__link { font-size: 0.95rem; line-height: 1.35; }
      .vt-footer__bottom { margin-top: 1.2rem; }
      .vt-footer__copyright { font-size: 0.95rem; }
    }

    /* ===== Page Sub-Navigation (page-specific links, below main header) ===== */
    .pk-subnav {
      position: sticky;
      /* --header-h: đo THẬT bằng JS (assets/js/custom-header.js), tự khớp
         đúng chiều cao header hiện tại — tránh khoảng hở trắng giữa header
         và thanh sub-nav khi con số đoán tay (70px) lệch so với thực tế.
         Giữ 70px làm fallback cho trường hợp JS chưa kịp chạy. */
      top: var(--header-h, 70px);
      z-index: 900;
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 12px 20px;
      background: rgba(26, 26, 46, 0.95);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    .pk-subnav a {
      text-decoration: none;
      color: #d5c78c;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 22px;
      border: 1px solid rgba(213, 199, 140, 0.4);
      border-radius: 30px;
      transition: all 0.3s ease;
    }
    html[data-text-scale-active] .pk-subnav a { font-size: calc(13px * var(--text-scale, 1)); }
    @media (hover: hover) and (min-width: 768px) {
  .pk-subnav a:hover {
      background: #d5c78c;
      color: #1a1a2e;
      border-color: #d5c78c;
    }
}

    /* ===== Hero Section ===== */
    /* Full-screen hero (giống .gp-hero) — ảnh/video nền phủ kín màn hình,
       tràn xuống dưới cả header trong suốt. Dùng chung cho mọi trang sản
       phẩm để đồng bộ tỉ lệ; mỗi trang chỉ khác nhau ở ảnh/video nền qua
       .product-hero__media. Khi có video cho từng dòng đàn, chỉ cần đổi
       thẻ <img class="product-hero__media"> thành <video autoplay muted
       loop playsinline class="product-hero__media"> (giống gp-hero__video). */
    .product-hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    .product-hero__media {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }
    .product-hero__overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.3);
    }
    .sk-hero__content {
      position: relative;
      z-index: 1;
      color: #fff;
    }
    .sk-hero__title {
      font-size: 56px;
      font-weight: 300;
      letter-spacing: 8px;
      margin-bottom: 20px;
    }
    html[data-text-scale-active] .sk-hero__title { font-size: calc(56px * var(--text-scale, 1)); }
    .sk-hero__title span { color: #d5c78c; }
    .sk-hero__sub {
      font-size: 18px;
      letter-spacing: 4px;
      color: #d5c78c;
      margin-bottom: 10px;
    }
    html[data-text-scale-active] .sk-hero__sub { font-size: calc(18px * var(--text-scale, 1)); }
    .sk-hero__tagline {
      font-size: 14px;
      letter-spacing: 6px;
      opacity: 0.7;
    }
    html[data-text-scale-active] .sk-hero__tagline { font-size: calc(14px * var(--text-scale, 1)); }
    /* GX, GL, MS, K, Entry, NV, PK hero đều dùng chung .product-hero ở
       trên; ảnh nền riêng từng dòng đàn được gắn trực tiếp trong HTML
       qua <img class="product-hero__media">. */
    /* ===== GP Hero Section ===== */
    .gp-hero {
  position: relative;
  height: 100vh; /* full màn hình */
  overflow: hidden;
}

.gp-hero__video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* video lấp đầy khung */
  z-index: -1;       /* nằm dưới nội dung */
}

.gp-hero__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); /* lớp mờ để chữ nổi bật */
}

.sk-hero__content {
  position: relative;
  color: #fff;
  text-align: center;
  padding-top: 20vh;
}

    /* ===== Section Title ===== */
    .section-title {
      text-align: center;
      padding: 80px 20px 40px;
      scroll-margin-top: 120px; /* offset for fixed header + sticky subnav */
    }
    .section-title h2 {
      font-size: 36px;
      font-weight: 300;
      letter-spacing: 4px;
      margin-bottom: 10px;
    }
    html[data-text-scale-active] .section-title h2 { font-size: calc(36px * var(--text-scale, 1)); }
    .section-title p {
      font-size: 16px;
      color: #999;
      max-width: 700px;
      margin: 0 auto;
    }
    html[data-text-scale-active] .section-title p { font-size: calc(16px * var(--text-scale, 1)); }

    /* ===== Đoạn giới thiệu dòng đàn (SEO) — đặt dưới lưới sản phẩm để giữ
       trải nghiệm "vào là thấy sản phẩm ngay" ở trên, nhưng vẫn có đủ nội
       dung văn bản thật cho Google/AI Search hiểu và xếp hạng trang, thay
       vì chỉ 1 câu tagline ngắn dưới hero. ===== */
    .collection-intro {
      max-width: 900px;
      margin: 0 auto;
      padding: 10px 20px 80px;
    }
    .collection-intro p {
      font-size: 16px;
      line-height: 1.9;
      color: #555;
      margin: 0 0 18px;
    }
    .collection-intro p:last-child { margin-bottom: 0; }
    .collection-intro strong { color: #1a1a1a; }
    @media screen and (max-width: 767px) {
      .collection-intro { padding: 0 20px 50px; }
      .collection-intro p { font-size: 14px; line-height: 1.75; margin-bottom: 14px; }
    }

    /* ===== Product Grid ===== */
    .product-grid {
      display: grid;
      /* Cố định 3 cột (repeat(3, 1fr)) thay vì auto-fit/minmax trước đây —
         mỗi cột luôn ăn đúng 1/3 bề rộng cố định 1200px dù trang có bao
         nhiêu sản phẩm, nên thẻ vẫn cùng 1 kích thước giữa các trang (kể
         cả trang chỉ có 1-2 model như anytime/, aures/ — thẻ không bị
         giãn to bất thường, chỉ đơn giản là các ô cột 2-3 còn lại bỏ
         trống ở hàng cuối). */
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    .product-card {
      background: #f9f9f9;
      border-radius: 12px;
      overflow: hidden;
      /* opacity thêm vào đây — cùng độ ưu tiên với .js-inveiw-intro-items
         > * (dòng ~48 phía trên) nên khai báo transition sau sẽ THAY HẲN
         chứ không cộng dồn; thiếu opacity khiến thẻ sản phẩm hiện "bụp"
         tức thời thay vì mờ dần khi cuộn tới. */
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s, box-shadow 0.3s;
    }
    @media (hover: hover) and (min-width: 768px) {
  .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
}
    .product-card__img {
      height: 280px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .product-card__badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: #d5c78c;
      color: #1a1a2e;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 4px;
    }
    html[data-text-scale-active] .product-card__badge { font-size: calc(11px * var(--text-scale, 1)); }
    .product-card--flagship {
      border: 2px solid #d5c78c;
    }
    .product-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .product-card__body {
      padding: 25px;
    }
    .product-card__name {
      font-size: calc(22px * var(--text-scale, 1));
      font-weight: 600;
      /* margin: 0 ... thay vì chỉ margin-bottom — <h3>/<p> có margin-top
         mặc định của trình duyệt, nếu không reset về 0 thì margin-top mặc
         định đó sẽ cộng thêm vào (không bị "collapse" hết như mong đợi,
         tuỳ ngữ cảnh flex/block), khiến khoảng cách vẫn xa dù đã giảm
         margin-bottom. line-height cũng phải siết lại — mặc định kế thừa
         (~1.5-1.6) khiến hộp dòng cao hơn hẳn chữ thật, margin đã 0 vẫn
         thấy xa (y hệt lỗi từng gặp ở bản mobile). */
      line-height: 1.2;
      margin: 0 0 3px;
    }
    .product-card__type {
      font-size: calc(14px * var(--text-scale, 1));
      color: #d5c78c;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1.3;
      margin: 0 0 6px;
    }
    .product-card__desc {
      /* Tăng từ 14px lên 16px (chuẩn tối thiểu WCAG cho chữ đọc liên tục)
         + đậm màu hơn (#666 → #4a4a4a) để tăng độ tương phản — khách lớn
         tuổi khó đọc mô tả sản phẩm nếu chữ vừa bé vừa nhạt màu. Nhân thêm
         var(--text-scale) để còn phóng to được qua nút "Aa" (custom-header.js). */
      font-size: calc(16px * var(--text-scale, 1));
      color: #4a4a4a;
      margin: 0 0 15px;
      line-height: 1.6;
       display: -webkit-box;
  -webkit-line-clamp: 4;   /* số dòng tối đa hiển thị */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* thêm dấu ... nếu bị cắt */
    }
    .product-card__specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 13px;
      color: #888;
      border-top: 1px solid #eee;
      padding-top: 15px;
    }
    html[data-text-scale-active] .product-card__specs { font-size: calc(13px * var(--text-scale, 1)); }
    .product-card__specs dt { font-weight: 600; color: #555; }
    .product-card__specs dd { text-align: right; }

    /* Nút "Xem thêm" trên thẻ sản phẩm — CHỈ có tác dụng/hiển thị ở bản
       mobile (nơi thông số bị ẩn bớt để đỡ dài thẻ, xem @media 767px bên
       dưới). Desktop thông số luôn hiển thị sẵn nên không cần nút này. */
    .product-card__toggle { display: none; }
    /* Badge hiện nhanh 1 kích thước quan trọng nhất của model, không cần
       bấm "Xem thêm" mới thấy — đàn grand thì ghi "Dài ___ cm" (thông số
       khách quan tâm nhất khi so sánh grand), đàn upright thì ghi
       "Cao ___ cm" (thông số khách quan tâm nhất vì ảnh hưởng độ vang và
       diện tích đặt đàn). Chỉ hiện ở mobile, vì desktop bảng thông số đã
       hiển thị đủ ngay bên dưới rồi. */
    .product-card__length { display: none; }
    /* Nút "Xem chi tiết" — cũng CHỈ dành cho mobile (xuất hiện khi bấm
       "Xem thêm" bung thông số ra). Thiếu rule display:none này ở đây
       (bản desktop) khiến nút hiện ra dạng chữ trần + icon SVG khổng lồ
       (SVG không có width/height nên trình duyệt vẽ theo kích thước mặc
       định ~300x150px) ngay dưới mỗi thẻ sản phẩm trên desktop — bug đã
       thấy trong ảnh chụp màn hình người dùng gửi. */
    .product-card__cta { display: none; }

    /* ===== Footer ===== */
    .sk-footer {
      background: #1a1a2e;
      color: #fff;
      text-align: center;
      padding: 40px 20px;
    }
    .sk-footer p { font-size: 13px; opacity: 0.6; }
    html[data-text-scale-active] .sk-footer p { font-size: calc(13px * var(--text-scale, 1)); }

    /* ===== CTA cuối trang (PianoDisc / AnyTime / AURES) =====
       Cả 3 trang "Special Edition" này không có SKU riêng trong store (đây
       là gói/hệ thống gắn thêm vào 1 model đàn cơ có sẵn, giá tuỳ cấu hình),
       nên không dùng CTA kiểu .pdp-cta (có nút "Đặt Hàng Ngay" deep-link
       thẳng vào store) như các trang model riêng lẻ — nhưng vẫn PHẢI có 1
       điểm kết rõ ràng ở cuối trang để khách biết bước tiếp theo là liên hệ
       tư vấn, thay vì trang trôi thẳng vào footer không có lối ra nào. */
    .pk-cta {
      background: #1a1a2e;
      color: #fff;
      text-align: center;
      padding: 70px 20px;
    }
    .pk-cta__title {
      font-size: 28px;
      letter-spacing: 2px;
      margin: 0 0 14px;
      color: #fff;
    }
    html[data-text-scale-active] .pk-cta__title { font-size: calc(28px * var(--text-scale, 1)); }
    .pk-cta__text {
      max-width: 560px;
      margin: 0 auto 30px;
      color: #cfcfe0;
      font-size: 15px;
      line-height: 1.8;
    }
    html[data-text-scale-active] .pk-cta__text { font-size: calc(15px * var(--text-scale, 1)); }
    .pk-cta__actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .pk-cta__btn {
      display: inline-block;
      padding: 14px 34px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    html[data-text-scale-active] .pk-cta__btn { font-size: calc(13px * var(--text-scale, 1)); }
    .pk-cta__btn--gold { background: #d5c78c; color: #1a1a2e; }
    @media (hover: hover) and (min-width: 768px) {
  .pk-cta__btn--gold:hover { background: #c2b26e; }
}
    .pk-cta__btn--outline { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
    @media (hover: hover) and (min-width: 768px) {
  .pk-cta__btn--outline:hover { border-color: #d5c78c; color: #d5c78c; }
}

    /* ===== Model tương thích (AnyTime / AURES) =====
       Cả 2 hệ thống này không phải 1 cây đàn riêng — mà là gói công nghệ
       GẮN THÊM vào các model đàn cơ Kawai có sẵn. Section này liệt kê đúng
       những model đó, link thẳng về trang chi tiết model gốc (nếu đã có
       trên site) để khách hiểu rõ và đi tiếp được, thay vì đọc xong không
       biết đàn nào mua được option này. */
    .pk-models {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    .pk-models__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
    }
    .pk-models__item {
      display: block;
      text-align: center;
      padding: 24px 12px;
      border: 1px solid #e5e0d0;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.25s ease;
    }
    @media (hover: hover) and (min-width: 768px) {
  a.pk-models__item:hover {
      border-color: #d5c78c;
      background: #fbf9f2;
    }
}
    .pk-models__name {
      display: block;
      font-size: 17px;
      font-weight: 700;
      color: #1a1a2e;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }
    html[data-text-scale-active] .pk-models__name { font-size: calc(17px * var(--text-scale, 1)); }
    .pk-models__type {
      display: block;
      font-size: 12px;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    html[data-text-scale-active] .pk-models__type { font-size: calc(12px * var(--text-scale, 1)); }
    span.pk-models__item .pk-models__name { color: #999; }
    span.pk-models__item { cursor: default; }

    /* ===== PK Comparison Table ===== */
    .pk-comparison {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    .pk-comparison__wrap {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid #e8e0d0;
      box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    }
    .pk-comparison__table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      background: #fff;
      min-width: 600px;
    }
    html[data-text-scale-active] .pk-comparison__table { font-size: calc(14px * var(--text-scale, 1)); }
    .pk-comparison__table thead {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: #fff;
    }
    .pk-comparison__table th {
      padding: 18px 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1px;
      font-size: 14px;
    }
    html[data-text-scale-active] .pk-comparison__table th { font-size: calc(14px * var(--text-scale, 1)); }
    .pk-comparison__table th:first-child {
      text-align: left;
    }
    .pk-comparison__table td.col-entertainment,
    .pk-comparison__table td.col-a {
      background: #f5f0e8;
    }
    .pk-comparison__table td.col-quiettime,
    .pk-comparison__table td.col-b {
      background: #fff8e7;
    }
    .pk-comparison__table thead th.col-entertainment,
    .pk-comparison__table thead th.col-quiettime,
    .pk-comparison__table thead th.col-a,
    .pk-comparison__table thead th.col-b {
      background: transparent;
      color: #fff;
    }
    .pk-comparison__table td {
      padding: 14px 20px;
      border-bottom: 1px solid #eee;
      text-align: center;
    }
    .pk-comparison__table td:first-child {
      text-align: left;
      font-weight: 600;
      color: #333;
    }
    @media (hover: hover) and (min-width: 768px) {
  .pk-comparison__table tbody tr:hover {
      background: #fafafa;
    }
}
    .pk-comparison__table .yes {
      color: #2e7d32;
      font-weight: 700;
      font-size: 18px;
    }
    html[data-text-scale-active] .pk-comparison__table .yes { font-size: calc(18px * var(--text-scale, 1)); }
    .pk-comparison__table .no {
      color: #c62828;
      font-weight: 400;
      font-size: 18px;
    }
    html[data-text-scale-active] .pk-comparison__table .no { font-size: calc(18px * var(--text-scale, 1)); }
    .pk-comparison__note {
      margin-top: 15px;
      font-size: 12px;
      color: #999;
      font-style: italic;
      text-align: center;
    }
    html[data-text-scale-active] .pk-comparison__note { font-size: calc(12px * var(--text-scale, 1)); }

    /* =============================================
       30th VTM ANNIVERSARY STYLES
    ============================================= */

    /* ===== Anniv Hero ===== */
    .anniv-hero {
      margin-top: 70px;
      position: relative;
      height: 80vh;
      min-height: 550px;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #2d1b4e 60%, #1a1a2e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    .anniv-hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
      z-index: 1;
    }
    .anniv-hero__overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('../images/campaigns/30th-anniversary/30th_Anniversary_Series_Grand.png') center/cover no-repeat;
      opacity: 0.08;
      z-index: 0;
    }
    .anniv-hero__content {
      position: relative;
      z-index: 2;
      color: #fff;
    }
    .anniv-hero__title {
      font-size: 64px;
      font-weight: 300;
      letter-spacing: 10px;
      margin-bottom: 15px;
      text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    }
    html[data-text-scale-active] .anniv-hero__title { font-size: calc(64px * var(--text-scale, 1)); }
    .anniv-hero__title span {
      color: #d4af37;
      font-weight: 700;
    }
    .anniv-hero__title sup {
      font-size: 28px;
      vertical-align: super;
      letter-spacing: 2px;
    }
    html[data-text-scale-active] .anniv-hero__title sup { font-size: calc(28px * var(--text-scale, 1)); }
    .anniv-hero__sub {
      font-size: 18px;
      letter-spacing: 6px;
      color: #d4af37;
      margin-bottom: 10px;
    }
    html[data-text-scale-active] .anniv-hero__sub { font-size: calc(18px * var(--text-scale, 1)); }
    .anniv-hero__tagline {
      font-size: 14px;
      letter-spacing: 6px;
      opacity: 0.7;
      margin-bottom: 30px;
    }
    html[data-text-scale-active] .anniv-hero__tagline { font-size: calc(14px * var(--text-scale, 1)); }
    .anniv-hero__badge {
      margin-top: 20px;
    }
    .anniv-hero__badge-img {
      max-height: 60px;
      opacity: 0.8;
    }

    /* ===== Anniv Models ===== */
    .anniv-models {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    .anniv-models__inner {
      display: flex;
      flex-direction: column;
      gap: 50px;
    }
    .anniv-model-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      background: #f9f9f9;
      border-radius: 16px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      border: 1px solid #e8e0d0;
    }
    @media (hover: hover) and (min-width: 768px) {
  .anniv-model-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    }
}
    .anniv-model-card--grand {
      border-left: 4px solid #d4af37;
    }
    .anniv-model-card--upright {
      border-left: 4px solid #8b7355;
    }
    .anniv-model-card__img {
      height: 100%;
      min-height: 350px;
      background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      padding: 30px;
    }
    .anniv-model-card__img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
    }
    .anniv-model-card__badge {
      position: absolute;
      top: 15px;
      left: 15px;
      background: #d4af37;
      color: #1a1a2e;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 4px;
    }
    html[data-text-scale-active] .anniv-model-card__badge { font-size: calc(11px * var(--text-scale, 1)); }
    .anniv-model-card__body {
      padding: 35px 35px 35px 0;
    }
    .anniv-model-card__name {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    html[data-text-scale-active] .anniv-model-card__name { font-size: calc(28px * var(--text-scale, 1)); }
    .anniv-model-card__name span {
      display: block;
      font-size: 16px;
      color: #d4af37;
      font-weight: 400;
      letter-spacing: 2px;
      margin-top: 2px;
    }
    html[data-text-scale-active] .anniv-model-card__name span { font-size: calc(16px * var(--text-scale, 1)); }
    .anniv-model-card__type {
      font-size: 14px;
      color: #d4af37;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 15px;
    }
    html[data-text-scale-active] .anniv-model-card__type { font-size: calc(14px * var(--text-scale, 1)); }
    .anniv-model-card__desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
      line-height: 1.8;
    }
    html[data-text-scale-active] .anniv-model-card__desc { font-size: calc(14px * var(--text-scale, 1)); }
    .anniv-model-card__features {
      background: #f0ece4;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .anniv-model-card__features h4 {
      font-size: 14px;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }
    html[data-text-scale-active] .anniv-model-card__features h4 { font-size: calc(14px * var(--text-scale, 1)); }
    .anniv-model-card__features ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .anniv-model-card__features li {
      font-size: 13px;
      color: #555;
      padding: 4px 0;
      line-height: 1.6;
    }
    html[data-text-scale-active] .anniv-model-card__features li { font-size: calc(13px * var(--text-scale, 1)); }
    .feature-icon {
      color: #d4af37;
      margin-right: 8px;
    }
    .anniv-model-card__specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 13px;
      color: #888;
      border-top: 1px solid #eee;
      padding-top: 15px;
    }
    html[data-text-scale-active] .anniv-model-card__specs { font-size: calc(13px * var(--text-scale, 1)); }
    .anniv-model-card__specs dt { font-weight: 600; color: #555; }
    .anniv-model-card__specs dd { text-align: right; }

    /* ===== Anniv Features ===== */
    .anniv-features {
      background: #f5f0e8;
      padding: 20px 20px 80px;
    }
    .anniv-features__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .anniv-feature-item {
      background: #fff;
      border-radius: 12px;
      padding: 35px 25px;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
      border: 1px solid #e8e0d0;
    }
    @media (hover: hover) and (min-width: 768px) {
  .anniv-feature-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
}
    .anniv-feature-item__icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      border: 2px solid #d4af37;
    }
    .anniv-feature-item__icon-text {
      font-size: 20px;
      font-weight: 700;
      color: #d4af37;
      letter-spacing: 1px;
    }
    html[data-text-scale-active] .anniv-feature-item__icon-text { font-size: calc(20px * var(--text-scale, 1)); }
    .anniv-feature-item__title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #1a1a2e;
    }
    html[data-text-scale-active] .anniv-feature-item__title { font-size: calc(18px * var(--text-scale, 1)); }
    .anniv-feature-item__desc {
      font-size: 13px;
      color: #777;
      line-height: 1.7;
    }
    html[data-text-scale-active] .anniv-feature-item__desc { font-size: calc(13px * var(--text-scale, 1)); }

    /* ===== Anniv Comparison Table ===== */
    .anniv-comparison {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    .anniv-comparison__table-wrap {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid #e8e0d0;
    }
    .anniv-comparison__table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    html[data-text-scale-active] .anniv-comparison__table { font-size: calc(14px * var(--text-scale, 1)); }
    .anniv-comparison__table thead {
      background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
      color: #fff;
    }
    .anniv-comparison__table th {
      padding: 15px 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1px;
      font-size: 13px;
    }
    html[data-text-scale-active] .anniv-comparison__table th { font-size: calc(13px * var(--text-scale, 1)); }
    .anniv-comparison__table th:first-child {
      text-align: left;
    }
    .anniv-comparison__table .col-standard {
      background: #f5f0e8;
    }
    .anniv-comparison__table .col-anniv {
      background: #fff8e7;
    }
    .anniv-comparison__table td {
      padding: 12px 20px;
      border-bottom: 1px solid #eee;
      text-align: center;
    }
    .anniv-comparison__table td:first-child {
      text-align: left;
      font-weight: 600;
    }
    .anniv-comparison__table td:nth-child(2) {
      text-align: left;
    }
    @media (hover: hover) and (min-width: 768px) {
  .anniv-comparison__table tbody tr:hover {
      background: #fafafa;
    }
}
    .anniv-comparison__table .model-group td {
      border-top: 2px solid #d4af37;
    }
    .anniv-comparison__table .model-name {
      font-weight: 700;
      color: #1a1a2e;
      font-size: 16px;
      vertical-align: middle;
    }
    html[data-text-scale-active] .anniv-comparison__table .model-name { font-size: calc(16px * var(--text-scale, 1)); }
    .anniv-comparison__table .yes {
      color: #2e7d32;
      font-weight: 700;
      font-size: 18px;
    }
    html[data-text-scale-active] .anniv-comparison__table .yes { font-size: calc(18px * var(--text-scale, 1)); }
    .anniv-comparison__table .no {
      color: #c62828;
      font-weight: 400;
      font-size: 18px;
    }
    html[data-text-scale-active] .anniv-comparison__table .no { font-size: calc(18px * var(--text-scale, 1)); }
    .anniv-comparison__note {
      margin-top: 15px;
      font-size: 12px;
      color: #999;
      font-style: italic;
      text-align: center;
    }
    html[data-text-scale-active] .anniv-comparison__note { font-size: calc(12px * var(--text-scale, 1)); }

    /* ===== Responsive ===== */
    @media (max-width: 767px) {
      .custom-header {
        padding: 4px 15px 0 15px;
        flex-direction: column;
        gap: 10px;
      }
      .custom-header__nav {
        width: 100%;
        justify-content: space-between;
      }
      .custom-header__nav a { font-size: 13px; }
      html[data-text-scale-active] .custom-header__nav a { font-size: calc(13px * var(--text-scale, 1)); }

      /* Link "Liên hệ" chèn kế bên logo (xem custom-header.js). Chữ trơn,
         cùng kiểu với .custom-header__nav a — không pill/nền/viền. */
      .custom-header__mobile-contact {
        display: inline-flex;
        align-items: center;
        margin-left: auto; /* tự đẩy sang phải, cách logo ra — không dính liền bên cạnh nữa */
        color: #333;
        font-weight: bold;
        font-size: 13px;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        transition: opacity 0.3s;
      }
      html[data-text-scale-active] .custom-header__mobile-contact { font-size: calc(13px * var(--text-scale, 1)); }
      .custom-header__mobile-contact:active {
        opacity: 0.5;
      }
@media (hover: hover) and (min-width: 768px) {
  .custom-header__mobile-contact:hover {
        opacity: 0.5;
      }
}
      /* Trang đang xem — xem custom-header.js. */
      .custom-header__mobile-contact.is-active {
        color: #ac801a;
      }
      .pk-subnav { top: var(--header-h, 100px); }
      .pk-subnav a { font-size: 11px; padding: 5px 16px; }
      html[data-text-scale-active] .pk-subnav a { font-size: calc(11px * var(--text-scale, 1)); }
      .sk-hero__title { font-size: 32px; letter-spacing: 4px; }
      html[data-text-scale-active] .sk-hero__title { font-size: calc(32px * var(--text-scale, 1)); }
      .product-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 15px 50px; }

      /* Thẻ sản phẩm dạng NGANG trên mobile (ảnh nhỏ bên trái, nội dung bên
         phải) thay vì dọc (ảnh to phía trên ~280px + mô tả + thông số) —
         mỗi thẻ trước đây cao ~500-600px, dòng sản phẩm nào có 5-6 model
         (shigeru-kawai/, gx/, gl/...) phải lướt rất nhiều mới xem hết. Thu
         gọn lại nhiều để lướt ít mà vẫn thấy đủ toàn bộ sản phẩm — ảnh vẫn
         to (190px) cho dễ nhìn, khối chữ (tên/loại/dài/mô tả) canh giữa
         theo chiều dọc và sát nhau gọn gàng bên cạnh.
         Thông số kỹ thuật (specs) ẩn theo mặc định — có nút "Xem thêm"
         (.product-card__toggle, xem product-card-expand.js) để bung ra
         xem tại chỗ, giống cách làm ở phần kỹ thuật viên
         (doi-ngu-ky-thuat/), không cần rời khỏi thẻ.
         ẢNH GIỮ NGUYÊN KÍCH THƯỚC (190px) DÙ ĐÓNG HAY MỞ — đã thử co nhỏ
         ảnh lúc mở (nhìn kỳ) và đẩy nội dung xuống hàng riêng bên dưới
         (nhìn giống bản thẻ dọc cũ, không rõ hiệu ứng "mở rộng"), đều bị
         từ chối. Cách đúng: .product-card__body VẪN nằm trong luồng flex
         bình thường (không position:absolute — để chiều cao nó vẫn được
         tính vào chiều cao hàng như bình thường, thẻ tự cao thêm đúng
         chỗ, không đè/tràn lên thẻ sản phẩm kế tiếp bên dưới), chỉ dùng
         width + margin-left ÂM để "nới" bản thân nó rộng thêm sang trái,
         tràn qua che bớt ảnh (ảnh vẫn 190px y nguyên, chỉ bị che khuất
         phần bị đè lên, không đổi kích thước thật). */
      .product-card {
        /* !important bắt buộc: thẻ <a class="product-card"> có inline
           style="display:block" viết tay trong HTML, luôn thắng CSS
           thường trong file — không có !important thì layout ngang này
           không bao giờ áp dụng được. */
        display: flex !important;
        align-items: stretch;
        position: relative;
      }
      .product-card__img {
        width: 190px;
        min-width: 190px;
        height: auto;
      }
      .product-card__img img {
        padding: 8px !important; /* override padding:20px inline trên <img> — quá rộng so với ảnh nhỏ */
      }
      .product-card__badge {
        font-size: 8px;
        padding: 2px 6px;
        letter-spacing: 0.5px;
        top: 6px;
        left: 6px;
      }
      html[data-text-scale-active] .product-card__badge { font-size: calc(8px * var(--text-scale, 1)); }
      .product-card__body {
        /* box-sizing:border-box đặt ở đây (base, luôn áp dụng) thay vì
           chỉ riêng lúc is-open — để lúc chuyển trạng thái, chỉ có
           width/margin-left đổi (transition mượt được), không đổi luôn
           cả cách tính box-sizing giữa 2 trạng thái (đổi model tính kích
           thước giữa chừng sẽ làm hiệu ứng bị giật). content-box mặc
           định sẽ cộng thêm padding (12px 14px) RA NGOÀI width đã tính ở
           trạng thái mở, khiến khối này tràn quá mép phải thẻ và bị
           .product-card (overflow:hidden) cắt mất — lỗi "Xem chi tiết bị
           che 1 phần bên phải" đã gặp trước đây. */
        box-sizing: border-box;
        flex: 1 1 0;
        position: relative;
        z-index: 1;
        padding: 12px 14px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center; /* ảnh cao hơn nội dung — canh giữa khối chữ theo chiều dọc cho cân */
        /* Hiệu ứng mượt khi bấm "Xem thêm": width/margin-left đổi dần
           thay vì nhảy khựng, nền cũng mờ dần sang màu phủ. */
        transition: width 0.35s ease, margin-left 0.35s ease, background-color 0.35s ease;
      }
      /* Bấm "Xem thêm": nới bề ngang khối nội dung thêm 90px, kéo mép trái
         sang trái bằng margin-left âm cùng lượng — mép phải giữ nguyên
         tại chỗ, mép trái lấn qua che 90px trong số 190px của ảnh (chừa
         lại 100px bên trái để vẫn thấy rõ phần lớn cây đàn — lùi bớt so
         với lần trước che tới 130px, nhìn che quá nhiều). Vẫn nằm trong
         luồng flex bình thường nên chiều cao khối này (giờ có thêm thông
         số + nút Xem chi tiết) vẫn đẩy cả hàng (và ảnh, nhờ
         align-items:stretch) cao thêm đúng cách — không tràn chồng lên
         thẻ sản phẩm kế tiếp. */
      .product-card.is-open .product-card__body {
        flex: none;
        width: calc(100% - 100px);
        margin-left: -90px;
        z-index: 2;
        background: #f9f9f9;
        box-shadow: -12px 0 16px -6px rgba(0, 0, 0, 0.2);
      }
      /* Tên model, loại đàn, chiều dài, mô tả — sát lại gần nhau thành 1
         khối chữ gọn, không dàn trải cách xa như trước.
         margin: 0 ... (không chỉ margin-bottom) — .product-card__body là
         flex column nên margin giữa các item KHÔNG tự collapse như block
         thường; nếu không reset margin-top về 0, margin-top mặc định của
         trình duyệt trên <h3>/<p> vẫn cộng dồn vào. Còn line-height thì
         KHÔNG phải margin nhưng vẫn tạo cảm giác "cách xa" y hệt — line-
         height mặc định (kế thừa từ body, thường 1.5-1.6) khiến hộp dòng
         cao hơn hẳn chữ thật, dù margin đã về 0 vẫn thấy khoảng trống ở
         trên/dưới mỗi dòng. Set line-height sát (~1.1-1.2) để hết hẳn. */
      .product-card__name { font-size: calc(16px * var(--text-scale, 1)); line-height: 1.15; margin: 0 0 6px; }
      .product-card__type { font-size: calc(10.5px * var(--text-scale, 1)); line-height: 1.2; letter-spacing: 1px; margin: 0 0 7px; }
      .product-card__desc {
        /* Tăng nhẹ từ 12px lên 13px — mobile chật hơn desktop nên không
           nhảy thẳng lên 16px, nhưng vẫn nhân var(--text-scale) để phóng
           to được qua nút "Aa" khi khách cần. */
        font-size: calc(13px * var(--text-scale, 1));
        line-height: 1.35;
        margin: 0;
        /* Tăng từ 2 lên 3 dòng — khối chữ (tên/loại/mô tả) giờ sát nhau
           nên tổng chiều cao thấp hơn hẳn ảnh bên cạnh, canh giữa dọc
           (justify-content:center) sẽ để trống nhiều khoảng trên/dưới.
           Cho mô tả hiện thêm 1 dòng để LẤP khoảng trống đó bằng nội
           dung có ích, thay vì để trống. */
        -webkit-line-clamp: 3;
      }

      /* Badge kích thước nhanh — viết sẵn trong HTML từng card, không cần
         bấm "Xem thêm" mới thấy, để dễ so sánh giữa các model ngay trên
         danh sách. Đàn grand ghi "Dài ___ cm", đàn upright ghi
         "Cao ___ cm" — card nào không có <p class="product-card__length">
         thì không hiện badge này. */
      .product-card__length {
        display: block;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: #333;
        margin: 0 0 5px;
      }
      html[data-text-scale-active] .product-card__length { font-size: calc(11px * var(--text-scale, 1)); }

      /* Nút "Xem thêm" — bấm để bung/thu thông số (.product-card__specs)
         tại chỗ. Nằm trong thẻ <a> nên JS phải preventDefault +
         stopPropagation, không thì bấm vào sẽ điều hướng sang trang chi
         tiết sản phẩm luôn thay vì chỉ mở rộng thông tin. Luôn nằm trong
         khối nội dung nên khi mở vẫn nổi lên trên, bấm lại được để đóng. */
      .product-card__toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        font-size: 11px;
        font-weight: 600;
        color: #ac801a;
        cursor: pointer;
        user-select: none;
      }
      html[data-text-scale-active] .product-card__toggle { font-size: calc(11px * var(--text-scale, 1)); }
      .product-card__toggle svg {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        transition: transform 0.25s;
      }
      .product-card.is-open .product-card__toggle svg { transform: rotate(180deg); }

      /* Đè lại grid-template-columns 1fr/1fr của bản desktop (2 cột đều
         nhau khiến số liệu bị đẩy tuốt qua bên phải, cách xa tên thông
         số) — đổi thành max-content (cột nhãn co khít theo chữ) + 1fr
         (cột số liệu chiếm phần còn lại), và bỏ text-align:right ở dd để
         số liệu nằm SÁT bên nhãn thay vì dạt về mép phải xa tít.
         LUÔN display:grid (không display:none nữa) — ẩn lúc đóng bằng
         max-height:0 + overflow:hidden thay vì display:none, vì
         display không transition được (nhảy khựng tức thời), còn
         max-height/opacity thì mượt được. max-height 260px chỉ cần đủ
         LỚN HƠN chiều cao thật của 4 dòng specs (không cần khớp chính
         xác — transition vẫn mượt, chỉ là kết thúc sớm hơn 1 chút so
         với mốc 260px danh nghĩa). */
      .product-card__specs {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 10px;
        row-gap: 7px;
        font-size: 11px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        padding-top: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease, padding-top 0.35s ease;
      }
      html[data-text-scale-active] .product-card__specs { font-size: calc(11px * var(--text-scale, 1)); }
      .product-card__specs dd { text-align: left; }
      .product-card.is-open .product-card__specs {
        max-height: 260px;
        opacity: 1;
        margin-top: 10px;
        padding-top: 10px;
      }

      /* Nút "Xem chi tiết" — CHỈ hiện sau khi bấm "Xem thêm" mở thẻ ra.
         Không cần JS riêng: nằm trong thẻ <a> bao ngoài nên bấm vào tự
         điều hướng sang trang chi tiết sản phẩm như bình thường (không
         preventDefault/stopPropagation như nút toggle ở trên). Cũng dùng
         max-height/opacity để mượt, giống .product-card__specs ở trên —
         xem giải thích tại đó. */
      .product-card__cta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0 16px;
        margin: 0;
        border-radius: 999px;
        background: #1a1a2e;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease;
      }
      html[data-text-scale-active] .product-card__cta { font-size: calc(11px * var(--text-scale, 1)); }
      .product-card.is-open .product-card__cta {
        max-height: 40px;
        opacity: 1;
        padding: 7px 16px;
        margin: 12px 0 2px;
      }
      .product-card__cta svg { width: 11px; height: 11px; }

      /* Anniv Responsive */
      .anniv-hero { height: 50vh; min-height: 400px; margin-top: 70px; }
      .anniv-hero__title { font-size: 36px; letter-spacing: 4px; }
      html[data-text-scale-active] .anniv-hero__title { font-size: calc(36px * var(--text-scale, 1)); }
      .anniv-hero__title sup { font-size: 18px; }
      html[data-text-scale-active] .anniv-hero__title sup { font-size: calc(18px * var(--text-scale, 1)); }
      .anniv-hero__sub { font-size: 14px; letter-spacing: 3px; }
      html[data-text-scale-active] .anniv-hero__sub { font-size: calc(14px * var(--text-scale, 1)); }
      .anniv-hero__tagline { font-size: 11px; letter-spacing: 3px; }
      html[data-text-scale-active] .anniv-hero__tagline { font-size: calc(11px * var(--text-scale, 1)); }
      .anniv-hero__badge-img { max-height: 40px; }

      .anniv-model-card {
        grid-template-columns: 1fr;
      }
      .anniv-model-card__img {
        min-height: 250px;
        padding: 20px;
      }
      .anniv-model-card__body {
        padding: 25px;
      }
      .anniv-model-card__name {
        font-size: 22px;
      }
      html[data-text-scale-active] .anniv-model-card__name { font-size: calc(22px * var(--text-scale, 1)); }
      .anniv-model-card__specs {
        grid-template-columns: 1fr 1fr;
      }

      .anniv-features__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
      }

      .anniv-comparison__table {
        font-size: 12px;
      }
      html[data-text-scale-active] .anniv-comparison__table { font-size: calc(12px * var(--text-scale, 1)); }
      .anniv-comparison__table th,
      .anniv-comparison__table td {
        padding: 10px 12px;
      }
    }