/* =============================================================
   store.css — Bộ sưu tập Piano (trang catalog kiểu thương mại
   điện tử luxury). Font dùng ĐÚNG font-family stack mà Shopee dùng
   trên web của họ — Shopee không nạp font riêng mà dùng "system
   font stack" (font mặc định của từng hệ điều hành: San Francisco
   trên macOS/iOS, Segoe UI trên Windows, Roboto trên Android) để
   trang tải nhanh và vẫn quen mắt với người dùng — áp dụng cho
   TOÀN BỘ trang store (kể cả header/nav dùng chung với site, qua
   selector .store-body bên dưới), KHÔNG áp dụng cho các trang khác.
   Màu chủ đạo vẫn giữ nguyên theo site: đen #1a1a1a, vàng đồng
   #ac801a / #c9a227. */
.store-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Toàn site kế thừa line-height: 2.4 từ style.css (hợp cho văn bản dài
     kiểu editorial) — với card sản phẩm dạng UI, giá trị này khiến MỌI
     dòng chữ không tự set line-height riêng (vd tên sản phẩm, giá) bị kéo
     cao gấp 2.4 lần cỡ chữ, tạo khoảng trắng ảo rất lớn phía trên/dưới dù
     margin đã nhỏ. Đặt lại mức hợp lý cho UI ngay tại đây. */
  line-height: 1.4;
}

.store-body {
  background: #faf9f6;
}

/* ===== Banner carousel =====
   Nằm trên cùng, ngay dưới nav cố định (nên là phần tử chịu margin-top
   để chừa chỗ cho nav — xem .store-intro { margin-top } cũ đã dời sang
   đây). Lướt ngang kiểu carousel: mỗi slide rộng 100% viewport, dùng
   scroll-snap để dừng đúng khung mỗi slide; nút mũi tên chỉ là
   scrollBy 1 slide, chấm tròn là scrollTo slide tương ứng (xử lý ở
   store.js — file này chỉ lo phần khung/hiệu ứng trượt mượt). Khi chỉ
   có 1 slide (mặc định lúc chưa có nội dung thật), store.js sẽ tự ẩn
   nút mũi tên + chấm tròn đi vì không cần điều hướng. */
.store-banner {
  position: relative;
  max-width: 1320px;
  margin: 7rem auto 0;
  padding: 1.6rem 2rem 0;
}
.store-banner__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.store-banner__viewport::-webkit-scrollbar { display: none; }
.store-banner__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.store-banner__img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.store-banner__nav {
  position: absolute;
  top: calc(50% + 0.8rem);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .store-banner__nav:hover { background: #fff; }
}
.store-banner__nav--prev { left: 2.6rem; }
.store-banner__nav--next { right: 2.6rem; }
.store-banner__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.store-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.store-banner__dot.is-active { background: #ac801a; transform: scale(1.3); }
@media screen and (max-width: 767px), print {
  .store-banner { margin-top: 5rem; padding: 1.2rem 1.5rem 0; }
  .store-banner__img { height: 180px; }
  .store-banner__nav { width: 32px; height: 32px; }
  .store-banner__nav--prev { left: 1rem; }
  .store-banner__nav--next { right: 1rem; }
}

/* ===== Page intro =====
   Kiểu Apple Store: bỏ hero to/rườm rà (ảnh nền, thống kê...), chỉ còn 1
   dòng tiêu đề gọn ngay trên khu vực lọc + lưới sản phẩm — trọng tâm là
   sản phẩm, không phải hero. */
.store-intro {
  background: #fff;
  padding: 3.2rem 2rem 2.2rem;
  text-align: center;
}
.store-intro__inner {
  max-width: 680px;
  margin: 0 auto;
}
.store-intro__title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  margin-bottom: 0.6rem;
}
@media screen and (max-width: 767px), print {
  .store-intro { padding: 2.2rem 1.6rem 1.6rem; }
  .store-intro__title { font-size: 1.9rem; }
}

/* ===== Toolbar ===== */
.store-toolbar {
  /* Không dùng position:sticky nữa — với 4 dòng bộ lọc (tìm kiếm/hãng+loại
     đàn/nhu cầu/sắp xếp), thanh này quá cao, dính lại khi cuộn sẽ che mất
     phần lớn màn hình (đặc biệt trên mobile). Để cuộn theo trang bình
     thường như các phần khác. */
  background: #fff;
  border-bottom: 1px solid #eee;
}
.store-toolbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.store-search {
  position: relative;
  max-width: 420px;
}
.store-search svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.store-search input {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.2s ease;
}
.store-search input:focus { border-color: #ac801a; }

.store-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.store-filter-row--sort {
  justify-content: space-between;
  padding-top: 0.4rem;
  border-top: 1px solid #f0f0f0;
}
.store-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.store-filter-group__label {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-right: 0.4rem;
}
.store-filter-group__divider {
  width: 1px;
  height: 1.6rem;
  background: #e2e2e2;
  margin: 0 0.2rem;
}
.store-chip {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
@media (hover: hover) and (min-width: 768px) {
  .store-chip:hover { border-color: #ac801a; color: #ac801a; }
}
.store-chip.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.store-chip--tag.is-active {
  background: #ac801a;
  border-color: #ac801a;
  color: #fff;
}

/* Ô nhập khoảng giá tự do (Từ/Đến, đơn vị triệu) — đặt ngay cạnh các chip
   mốc giá có sẵn, để khách vừa có thể bấm nhanh 1 mốc, vừa có thể gõ đúng
   khoảng mình muốn nếu không khớp mốc nào. */
.store-price-range {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.4rem;
}
.store-price-range__input {
  width: 5.4rem;
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.2s ease;
}
.store-price-range__input:focus { border-color: #ac801a; }
.store-price-range__sep { color: #bbb; }
.store-price-range__unit { font-size: 1.02rem; color: #999; }
@media screen and (max-width: 767px), print {
  .store-price-range { margin-left: 0; width: 100%; }
  .store-price-range__input { flex: 1; width: auto; }
}

.store-sort {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.store-sort label {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: #999;
  text-transform: uppercase;
}
.store-sort select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}
.store-advisor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ac801a, #c9a227);
  border: none;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .store-advisor-btn:hover { opacity: 0.88; }
}
.store-advisor-btn:active { transform: scale(0.97); }
/* Nút "Xóa bộ lọc" ngay trên toolbar — luôn hiện (không cần đợi lọc ra 0
   kết quả như nút cùng tên trong .store-empty), dạng chữ gạch chân nhẹ để
   không cạnh tranh với nút "Tư vấn chọn đàn" (CTA chính của thanh này). */
.store-toolbar-reset {
  font-family: inherit;
  font-size: 1.1rem;
  color: #999;
  background: none;
  border: none;
  text-decoration: underline;
  text-decoration-color: rgba(153, 153, 153, 0.4);
  text-underline-offset: 0.2rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .store-toolbar-reset:hover { color: #ac801a; text-decoration-color: currentColor; }
}
.store-result-count {
  font-size: 1.15rem;
  color: #999;
  margin-left: auto;
}
.store-result-count span { color: #1a1a1a; font-weight: 600; }

@media screen and (max-width: 767px), print {
  .store-toolbar__inner { padding: 1.2rem 1.5rem; gap: 1rem; }
  .store-filter-row { gap: 0.8rem 1rem; }
  .store-filter-group__label { width: 100%; margin-bottom: 0.2rem; }
  .store-chip { font-size: 1.05rem; padding: 0.5rem 1.1rem; }
  .store-filter-row--sort { flex-direction: column; align-items: stretch; gap: 1rem; }
  .store-result-count { margin-left: 0; text-align: center; }
  .store-advisor-btn { justify-content: center; }
}

/* ===== Product Grid ===== */
.store-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.4rem;
}
@media screen and (max-width: 767px), print {
  .store-main { padding: 2rem 1.5rem 5rem; }
  .store-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}
@media screen and (max-width: 480px) {
  .store-grid { grid-template-columns: 1fr; }
}

.store-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}
@media (hover: hover) and (min-width: 768px) {
  .store-card:hover {
  box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.1);
  transform: translateY(-0.3rem);
}
}
/* Khối cuối card (tem Collection/Best + hàng tồn kho) — gộp thành 1 khối,
   margin-top:auto đẩy cả khối (và hàng nút bấm theo sau) xuống sát đáy
   card, để hàng nút "Xem chi tiết / So sánh" luôn thẳng hàng nhau giữa các
   card trong cùng 1 dòng dù nội dung phía trên dài ngắn khác nhau. */
.store-card__meta-block {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.store-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Tem Mới/Collection/Best (tem "Mới" — key/class nội bộ vẫn là "genuine",
   trước đây hiển thị chữ "Chính hãng", xem BADGE_LABELS trong store.js) —
   CHỈ đóng khung viền mảnh, không tô màu đặc (nhiều màu sắc rực rỡ trước
   đây làm trang nhìn kém sang) — thống nhất còn 3 tông theo đúng bảng màu
   chủ đạo của site: xanh lá (cùng tông với tem bảo hành .offer-warranty)
   cho Mới, vàng đồng cho Collection, đen cho Best, không dùng thêm màu
   nào khác. */
.store-badge {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.26rem 0.65rem;
  border-radius: 0.3rem;
  background: transparent;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.store-badge--genuine { color: #1a7a4a; }
.store-badge--limited,
.store-badge--artists,
.store-badge--start { color: #ac801a; }
.store-badge--best-choice,
.store-badge--best-seller,
.store-badge--best-price,
.store-badge--best-start { color: #1a1a1a; }
/* Tình trạng giao hàng — KHÔNG còn đóng khung/tô màu, chỉ icon + chữ (kiểu
   Shopee): xe tải xanh "đang chạy" = Giao ngay, icon định vị = khu vực kho,
   đồng hồ = Đặt trước. Giữ đúng nguyên tắc "Giao ngay" và từng khu vực kho
   là các mục TÁCH BIỆT (đúng 2 cột khác nhau trong file excel). */
.store-card__stock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.store-card__stock-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
.store-card__stock-item svg { flex-shrink: 0; }
.store-card__stock-item--ready { color: #05a66e; }
.store-card__stock-item--location { color: #8a8a8a; font-weight: 500; }
.store-card__stock-item--preorder { color: #8a7a5a; }

/* Tem "THE BEST" kiểu Shopee — 1 badge nhỏ bo góc đặt ngay trước tên sản
   phẩm (KHÔNG phải chữ trong ngoặc vuông), dùng đúng 1 trong 4 nhãn thật
   của nhóm best (Best Seller/Best Price/Best Choice/Best Start). Dùng đơn
   vị `em` để badge tự co giãn theo cỡ chữ tiêu đề ở từng nơi hiển thị
   (card, modal chi tiết, bảng so sánh, kết quả tư vấn...). */
.store-name-badge {
  display: inline-block;
  vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.35em 0.7em;
  border-radius: 0.35em;
  white-space: nowrap;
}
.store-name-badge--limited { background: #4a2e6b; }
.store-name-badge--artists { background: #1a4a6b; }
.store-name-badge--start { background: #2f6b3a; }
.store-name-badge--best-choice { background: #ac2a5c; }
.store-name-badge--best-seller { background: #c0432c; }
.store-name-badge--best-price { background: #1a7a5e; }
.store-name-badge--best-start { background: #2f6b3a; }

.store-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f4f2ee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
/* Tem Voucher — neo cố định góc trên-phải của ẢNH (vị trí quen thuộc trên
   mọi sàn TMĐT), thu nhỏ lại (trước đây to, che mất sản phẩm). Viền đứt
   đoạn kiểu phiếu giảm giá (không phải khối màu đặc) để đóng khung mức
   giảm là "áp dụng voucher có căn cứ" thay vì một mức giảm giá tùy tiện
   làm giảm giá trị cảm nhận của sản phẩm. */
.store-card__sale-ribbon {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  max-width: calc(100% - 1.2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #c0432c;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 0.3rem;
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -3px;
  white-space: nowrap;
  box-shadow: 0 0.2rem 0.5rem rgba(192, 67, 44, 0.3);
}
/* Màu sắc + kích thước đặt LUÔN TRONG ảnh (góc dưới) — lớp phủ gradient
   tối dần từ dưới lên để chữ/swatch luôn đọc rõ dù ảnh nền sáng hay tối. */
.store-card__img-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem 0.55rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.store-card__img-size {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.store-card__img img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: transform 0.35s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .store-card:hover .store-card__img img { transform: scale(1.04); }
}
.store-card__img--empty {
  flex-direction: column;
  gap: 0.6rem;
  color: #bbb;
  font-size: 1.1rem;
  text-align: center;
}
.store-card__img--empty svg { opacity: 0.5; }

.store-card__body {
  padding: 1.3rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Tên sản phẩm = Thương hiệu + Model (vd "KAWAI K-300") — không còn tem
   thương hiệu riêng hay dòng "Dòng đàn · Loại đàn" bên dưới, gọn hơn nhiều. */
.store-card__name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
  cursor: pointer;
}
@media (hover: hover) and (min-width: 768px) {
  .store-card__name:hover { color: #ac801a; }
}
/* Swatch màu — vuông bo góc (không còn hình tròn), đặt trong ảnh nên viền
   trắng để nổi trên mọi nền ảnh. */
.store-card__swatches {
  display: flex;
  gap: 0.4rem;
}
.store-card__swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
/* Cột dọc: hàng 1 = "Từ" + giá ưu đãi (.store-card__price-main), hàng 2 =
   tem "-xx triệu" (.store-card__voucher-tag, nếu có khuyến mãi) — tách 2
   hàng RIÊNG BIỆT thay vì 1 hàng flex-wrap chung như trước, để tem LUÔN
   nằm dưới giá ở MỌI thẻ card, tránh thẻ này tem xuống hàng, thẻ khác lại
   không (tùy độ dài tên/độ rộng card ngẫu nhiên). */
.store-card__price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.store-card__price-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.store-card__price-from {
  font-size: 1rem;
  color: #999;
}
.store-card__price {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
}
.store-card__price--contact {
  font-size: 1.5rem;
  color: #ac801a;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) and (min-width: 768px) {
  .store-card__price--contact:hover { color: #8c6814; }
}
/* Chỉ hiện giá ưu đãi (bỏ giá niêm yết gạch ngang) — màu đỏ đồng bộ với tem
   voucher. Tem "-xx triệu" đặt NGAY CẠNH giá, kiểu Shopee. */
.store-card__price--sale { color: #c0432c; }
.store-card__voucher-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  background: #fff3ee;
  color: #c0432c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.16rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px dashed #e3a893;
  white-space: nowrap;
}
.store-card__voucher-tag svg { width: 10px; height: 10px; flex-shrink: 0; }
/* Bỏ nút "Xem chi tiết" riêng (bấm ảnh/tên sản phẩm ở trên đã mở được chi
   tiết rồi) — giờ chỉ còn 1 hành động duy nhất trong khu vực này. */
.store-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.store-card__compare-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  font-size: 1.1rem;
  color: #666;
  padding: 0.85rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
@media (hover: hover) and (min-width: 768px) {
  .store-card__compare-label:hover { border-color: #ac801a; }
}
.store-card__compare-label.is-checked {
  border-color: #ac801a;
  background: #fbf3e2;
  color: #ac801a;
}
.store-card__compare-label input { accent-color: #ac801a; width: 1.5rem; height: 1.5rem; cursor: pointer; }

.store-empty {
  text-align: center;
  padding: 6rem 2rem;
  color: #999;
  font-size: 1.4rem;
}
.store-empty__btn {
  margin-top: 1.4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  border: 1px solid #1a1a1a;
  background: #fff;
  cursor: pointer;
}

/* ===== Compare Tray ===== */
.compare-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 -0.4rem 2rem rgba(0, 0, 0, 0.3);
}
.compare-tray__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.compare-tray__items {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  flex: 1;
}
.compare-tray__item {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 0.4rem;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.compare-tray__item img { max-width: 85%; max-height: 85%; object-fit: contain; }
.compare-tray__item-remove {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #c0432c;
  color: #fff;
  border: 2px solid #1a1a1a;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-tray__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}
.compare-tray__clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.compare-tray__quote {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .compare-tray__quote:hover { border-color: #d8b440; color: #d8b440; }
}
.compare-tray__cta {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ac801a, #d8b440);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.compare-tray__cta:disabled { opacity: 0.4; cursor: not-allowed; }
@media screen and (max-width: 767px), print {
  /* mobile-bottom-nav.css ghim thanh điều hướng dưới cùng với z-index cực
     cao (2147483647) để luôn nổi trên mọi nội dung trang — nếu khay so
     sánh vẫn neo ở bottom:0 như trên desktop, nó sẽ bị thanh nav che mất
     hoàn toàn. Đẩy khay lên trên, ngay sát mép thanh nav (cùng cách xử lý
     đã dùng cho .cvArea__link--bottom / .pop_banner trong mobile-bottom-nav.css). */
  .compare-tray { bottom: 64px; }
  .compare-tray__inner { padding: 0.8rem 1.2rem; gap: 0.8rem; }
  .compare-tray__item { width: 3.6rem; height: 3.6rem; }
  .compare-tray__clear { display: none; }
  .compare-tray__quote { padding: 0.65rem 1.2rem; font-size: 1rem; }
  .compare-tray__cta { padding: 0.7rem 1.4rem; font-size: 1.1rem; }
}

/* ===== Modals (shared) ===== */
.store-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow-y: auto;
}
.store-modal[hidden] { display: none; }
.store-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
}
.store-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 0.8rem;
  max-width: 960px;
  width: 100%;
  padding: 3rem;
  z-index: 1;
  animation: storeModalIn 0.25s ease;
}
@keyframes storeModalIn {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}
.store-modal__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: none;
  background: #f4f2ee;
  color: #1a1a1a;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
@media (hover: hover) and (min-width: 768px) {
  .store-modal__close:hover { background: #ececec; }
}
.store-modal__ttl {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px), print {
  .store-modal { padding: 0; align-items: stretch; }
  /* padding-bottom chừa chỗ cho mobile-bottom-nav (cao 64px, z-index luôn
     nổi trên mọi thứ) để nội dung cuối modal không bị che khi cuộn hết. */
  .store-modal__panel { border-radius: 0; max-width: none; min-height: 100vh; padding: 2.2rem 1.5rem calc(2.2rem + 64px); }
}

/* ===== Detail Modal content ===== */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
}
.detail-grid__img {
  aspect-ratio: 4/3;
  background: #f4f2ee;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detail-grid__img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.detail-grid__img--empty { color: #bbb; font-size: 1.2rem; flex-direction: column; gap: 0.8rem; }

/* ===== Đặc quyền từ Việt Thương Music — đặt dưới ảnh, TRÊN phụ kiện thường
   mua kèm. Gồm tem "Bảo hành chính hãng X năm" (chuyển từ cột phải xuống,
   xem #detailWarrantyBadge) + 3 dòng ưu đãi cố định. ===== */
.detail-privileges { margin-top: 1.2rem; }
.detail-privileges__ttl { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #999; margin-bottom: 0.8rem; }
.privilege-list { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; background: #f9f8f5; border-radius: 0.6rem; }
/* Trong khối "Đặc quyền", tem bảo hành dùng ĐÚNG 2 tông màu như các dòng
   đặc quyền còn lại (.privilege-item mặc định): chữ xám #444, icon vàng
   đồng #ac801a — thay vì màu xanh lá gốc của .offer-warranty. Phải khai
   báo riêng màu icon (không chỉ đổi color trên div) vì SVG dùng
   stroke="currentColor", nếu chỉ đổi color của div thì icon sẽ ăn theo
   màu xám của chữ luôn, không còn vàng đồng như icon các dòng dưới. */
.privilege-list .offer-warranty { margin-bottom: 0; color: #444; }
.privilege-list .offer-warranty svg { color: #ac801a; }
#detailWarrantyBadge:empty { display: none; }
.privilege-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; font-weight: 600; color: #444; }
.privilege-item svg { flex-shrink: 0; color: #ac801a; }
/* Đặc quyền "nổi bật" (vd "Bảo dưỡng bởi MPA" — riêng dòng Shigeru Kawai)
   — GIỮ NGUYÊN format hàng thường (.privilege-item), chỉ đổi màu chữ +
   icon sang vàng đồng đậm để tự nổi bật lên, không cần khung/nền riêng. */
.privilege-item--featured,
.privilege-item--featured svg {
  color: #ac801a;
}
/* Dòng "Chính hãng [Hãng] [Xuất xứ]" — tô riêng tông xanh lá (kể cả icon),
   KHÁC với tem "Bảo hành chính hãng X năm" ngay bên dưới (tem đó dùng
   chung màu xám mặc định với các dòng đặc quyền còn lại, xem
   ".privilege-list .offer-warranty" phía trên). */
.privilege-item--origin,
.privilege-item--origin svg {
  color: #1a7a4a;
}
.detail-privileges__link { display: inline-block; margin-top: 0.6rem; font-size: 0.92rem; font-weight: 600; color: #ac801a; text-decoration: none; }
@media (hover: hover) and (min-width: 768px) {
  .detail-privileges__link:hover { text-decoration: underline; }
}

/* ===== Phụ kiện thường mua kèm — đặt dưới ảnh sản phẩm ===== */
.detail-accessories { margin-top: 1.2rem; }
.detail-accessories__ttl { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #999; margin-bottom: 0.8rem; }
.accessory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.accessory-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .accessory-item:hover { border-color: #d8b86a; }
}
.accessory-item.is-selected { border-color: #ac801a; box-shadow: 0 0.15rem 0.5rem rgba(172, 128, 26, 0.18); }
.accessory-item__name { font-size: 1rem; font-weight: 700; color: #1a1a1a; }
.accessory-item__price { font-size: 0.98rem; color: #444; font-weight: 600; }
.accessory-item__price--free { color: #05a66e; }
.accessory-item__was { color: #aaa; font-weight: 400; text-decoration: line-through; margin-left: 0.3rem; }
.accessory-item__expiry { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: #a67c00; }
.accessory-item__expiry svg { flex-shrink: 0; }
.accessory-item__check { margin-top: auto; padding-top: 0.3rem; font-size: 0.92rem; font-weight: 700; color: #999; }
.accessory-item.is-selected .accessory-item__check { color: #ac801a; }

/* ===== Gói Bảo Dưỡng Mua Thêm — đặt ngay dưới "Phụ kiện thường mua kèm",
   trên "Thu Cũ Đổi Mới". 3 thẻ Standard/Premium/Royal, CHỌN 1 (giống
   .accessory-item về style nhưng KHÔNG dùng chung class — khác hành vi:
   accessory-item là multi-select độc lập, còn đây là chọn 1 trong 3). ===== */
.detail-extra-maint { margin-top: 1.2rem; }
.detail-extra-maint__ttl { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #999; margin-bottom: 0.5rem; }
.detail-extra-maint__desc { font-size: 0.98rem; color: #666; line-height: 1.6; margin-bottom: 0.8rem; }
.extra-maint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.extra-maint-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  cursor: pointer;
  background: #fff;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .extra-maint-item:hover { border-color: #d8b86a; }
}
.extra-maint-item.is-selected { border-color: #ac801a; box-shadow: 0 0.15rem 0.5rem rgba(172, 128, 26, 0.18); }
.extra-maint-item__name { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; }
.extra-maint-item__sessions { font-size: 0.92rem; color: #888; }
.extra-maint-item__price { font-size: 1rem; font-weight: 700; color: #ac801a; margin-top: 0.15rem; }
.extra-maint-item__check { margin-top: auto; padding-top: 0.3rem; font-size: 0.92rem; font-weight: 700; color: #999; }
.extra-maint-item.is-selected .extra-maint-item__check { color: #ac801a; }
@media screen and (max-width: 767px) {
  .extra-maint-grid { grid-template-columns: 1fr; }
}

/* ===== Thu Cũ Đổi Mới — đặt ngay dưới "Phụ kiện thường mua kèm" ===== */
.detail-tradein {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  background: #f9f8f5;
  border-radius: 0.6rem;
}
.detail-tradein__ttl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.6rem;
}
.detail-tradein__ttl svg { flex-shrink: 0; color: #ac801a; }
.detail-tradein__desc { font-size: 0.98rem; color: #666; line-height: 1.6; margin-bottom: 0.8rem; }
.detail-tradein__row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.detail-tradein__input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background: #fff;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.2s ease;
}
.detail-tradein__input:focus { border-color: #ac801a; }
.detail-tradein__btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #ac801a;
  border: 1px solid #ac801a;
  cursor: pointer;
  transition: background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-tradein__btn:hover { background: #fbf3e2; }
}
@media screen and (max-width: 767px) {
  .detail-tradein__btn { width: 100%; }
}

.detail-brand { color: #ac801a; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.6rem; }
.detail-name { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.6rem; font-weight: 600; color: #1a1a1a; margin-bottom: 0.8rem; }
/* 2 hàng riêng biệt: hàng Mới/Collection/Best ở trên, hàng Giao ngay/khu
   vực kho/Đặt trước ở dưới (xem giải thích ở chỗ tạo HTML, cardHtml()/
   detail modal). */
.detail-badges { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; }
.detail-badges__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Mô tả — nay là <div> chứa nhiều section (h4 + p/ul, dịch nguyên trang sản
   phẩm chính hãng Kawai — xem KAWAI_OFFICIAL trong store-data.js), không
   còn là 1 đoạn text phẳng nên không dùng -webkit-line-clamp được nữa (chỉ
   đếm đúng "dòng" khi nội dung là text thuần chảy liên tục). Thay bằng
   max-height + overflow:hidden, JS đo scrollHeight y hệt trước để tự ẩn nút
   "Xem thêm" nếu nội dung vốn đã ngắn hơn giới hạn. */
.detail-desc {
  font-size: 1.25rem;
  line-height: 1.85;
  color: #555;
  margin-bottom: 0.8rem;
  max-height: 12.5em;
  overflow: hidden;
}
.detail-desc.is-expanded { max-height: none; overflow: visible; }
.detail-desc-section { margin-bottom: 1.1rem; }
.detail-desc-section:last-child { margin-bottom: 0; }
.detail-desc-section-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
}
.detail-desc p { margin: 0 0 0.7rem; }
.detail-desc p:last-child { margin-bottom: 0; }
.detail-desc ul { margin: 0 0 0.7rem; padding-left: 1.3rem; }
.detail-desc li { margin-bottom: 0.3rem; }
.detail-desc-empty { font-size: 1.15rem; color: #999; font-style: italic; margin-bottom: 1rem; }
.detail-desc-more-btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ac801a;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(172, 128, 26, 0.35);
}
@media (hover: hover) and (min-width: 768px) {
  .detail-desc-more-btn:hover { text-decoration-color: currentColor; }
}
.detail-meta { display: flex; gap: 2rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.detail-meta__item { font-size: 1.1rem; color: #888; }
.detail-meta__item strong { display: block; color: #1a1a1a; font-size: 1.3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.detail-features { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.detail-features li { font-size: 1.15rem; color: #444; padding-left: 1.6rem; position: relative; line-height: 1.5; }
.detail-features li::before { content: "✓"; position: absolute; left: 0; color: #ac801a; font-weight: 700; }
.detail-variants { margin-bottom: 1.8rem; }
.detail-variants__ttl { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #999; margin-bottom: 0.8rem; }
.detail-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
  font-size: 1.1rem;
  flex-wrap: wrap;
  gap: 0.6rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-variant-row:hover { border-color: #d8b86a; }
}
/* Biến thể ĐANG ĐƯỢC CHỌN — quyết định nhãn nút CTA chính (Đặt hàng/Đặt
   trước/Yêu cầu báo giá) nên cần nổi bật rõ ràng đây là lựa chọn hiện tại. */
.detail-variant-row.is-selected {
  border-color: #ac801a;
  background: #fbf3e2;
}
.detail-variant-row__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.detail-variant-row__swatch { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
/* Tên màu/phiên bản không bọc chữ giữa chừng — quá dài thì cắt bớt bằng "…"
   thay vì rớt xuống dòng thứ 2 làm lệch layout. */
.detail-variant-row__labeltext { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Cột phải: tem tồn kho (dòng 1, căn phải) rồi đến giá (dòng 2) rồi voucher
   nếu có (dòng 3) — mỗi dòng riêng nhưng KHÔNG được tự bọc chữ bên trong. */
.detail-variant-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.detail-variant-row__price-line { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.detail-variant-row__price { font-weight: 700; color: #1a1a1a; }
.detail-variant-row__price-old { color: #bbb; text-decoration: line-through; font-weight: 400; }
.detail-variant-row__price--link {
  color: #ac801a;
  text-decoration: none;
  white-space: nowrap;
}
.detail-variant-row__voucher {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: #ac801a;
  white-space: nowrap;
}
/* Hàng tem tồn kho của riêng biến thể này — "Giao ngay" + tem định vị gộp,
   luôn nằm ngang cùng nhau, không bọc chữ xuống dòng riêng từng tem. */
.detail-variant-row__stockrow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.detail-variant-row__stockrow .store-card__stock-item { font-size: 0.9rem; white-space: nowrap; }
@media (hover: hover) and (min-width: 768px) {
  .detail-variant-row__price--link:hover { color: #8c6814; }
}

/* ===== Khối "Ưu đãi cho đơn hàng" — chọn voucher/quà tặng/vận chuyển/
   thanh toán kiểu Shopee, đặt dưới phần chọn biến thể, trên hàng nút CTA
   chính. Vẫn giữ đúng tinh thần "hạn chế khối màu đặc" đã thống nhất
   trước đó: viền đứt/viền mảnh + nền vàng nhạt khi ĐÃ CHỌN, chứ không tô
   màu đặc từng khối. */
.detail-offers { margin-bottom: 1.8rem; }
.detail-offers__ttl { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #999; margin-bottom: 0.8rem; }

.offer-vouchers { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 0.9rem; }
/* Thiết kế kiểu TEM VÉ THẬT (tham khảo Shopee): khu vực icon bên trái tách
   khỏi phần nội dung bằng 1 đường viền đứt đoạn (như đường xé phiếu), 2
   nốt tròn "khoét lỗ" ở góc trên/dưới của đường đó mô phỏng lỗ bấm vé —
   thay cho khối tròn nhỏ trước đây nhìn giống nút bấm thông thường hơn là
   1 tấm voucher. overflow:hidden trên khối ngoài để bo góc gọn theo đúng
   border-radius dù icon zone có nền riêng. */
.offer-voucher {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid #f0dfa8;
  border-radius: 0.7rem;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .offer-voucher:hover { border-color: #ac801a; }
}
.offer-voucher.is-selected { border-color: #ac801a; box-shadow: 0 0.2rem 0.6rem rgba(172, 128, 26, 0.22); }
.offer-voucher.is-disabled { cursor: default; border-color: #e6e6e6; box-shadow: none; opacity: 0.72; }
.offer-voucher__icon {
  position: relative;
  flex-shrink: 0;
  width: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf3e2;
  color: #ac801a;
  border-right: 1px dashed #e3c88a;
}
.offer-voucher.is-selected .offer-voucher__icon { background: #f5e3ba; }
.offer-voucher.is-disabled .offer-voucher__icon { background: #f2f2f2; color: #aaa; border-right-color: #ddd; }
/* 2 nốt tròn khoét ở đầu/cuối đường viền đứt đoạn — màu trùng nền panel
   modal (#fff) để tạo hiệu ứng "lỗ xé", không phụ thuộc chiều cao thẻ. */
.offer-voucher__icon::before, .offer-voucher__icon::after {
  content: "";
  position: absolute;
  right: -0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
}
.offer-voucher__icon::before { top: -0.55rem; }
.offer-voucher__icon::after { bottom: -0.55rem; }
.offer-voucher__body { flex: 1; min-width: 0; padding: 0.9rem 1.1rem; }
.offer-voucher__title { font-size: 1.1rem; font-weight: 700; color: #1a1a1a; }
.offer-voucher.is-disabled .offer-voucher__title { color: #999; font-weight: 600; }
.offer-voucher__desc { font-size: 0.95rem; color: #888; margin-top: 0.15rem; }
/* Dòng "Có thời hạn đến..." — icon đồng hồ + chữ, tách riêng dòng dưới mô
   tả để nhấn mạnh đây là ưu đãi CÓ GIỚI HẠN THỜI GIAN. */
.offer-voucher__expiry { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; color: #a67c00; margin-top: 0.3rem; }
.offer-voucher__expiry svg { flex-shrink: 0; }
.offer-voucher__check {
  flex-shrink: 0; align-self: center;
  font-size: 1rem; font-weight: 700; color: #ac801a; white-space: nowrap;
  padding: 0 1.2rem;
}
.offer-voucher:not(.is-selected):not(.is-disabled) .offer-voucher__check { color: #999; font-weight: 600; }

/* Quà tặng bảo dưỡng — cùng kiểu tem vé để nhất quán với 2 voucher ở trên,
   chỉ đổi màu icon zone (be nhạt trung tính) để phân biệt đây là quà tặng
   kèm theo, không phải voucher giảm giá. */
.offer-gift {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid #eee;
  border-radius: 0.7rem;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .offer-gift:hover { border-color: #d8b86a; }
}
.offer-gift.is-selected { border-color: #ac801a; box-shadow: 0 0.2rem 0.6rem rgba(172, 128, 26, 0.22); }
.offer-gift__icon {
  position: relative;
  flex-shrink: 0;
  width: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f2ee;
  color: #ac801a;
  border-right: 1px dashed #ddd;
}
.offer-gift.is-selected .offer-gift__icon { background: #ede8dd; }
.offer-gift__icon::before, .offer-gift__icon::after {
  content: "";
  position: absolute;
  right: -0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
}
.offer-gift__icon::before { top: -0.55rem; }
.offer-gift__icon::after { bottom: -0.55rem; }
.offer-gift__body { flex: 1; min-width: 0; padding: 0.9rem 1.1rem; }
.offer-gift__title { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; }
.offer-gift__desc { font-size: 0.95rem; color: #888; margin-top: 0.15rem; }
/* Số tiền "Trị giá" cần nổi bật hơn phần chữ mô tả xung quanh. */
/* Số tiền "Trị giá" nổi bật — dùng chung cho cả quà tặng bảo dưỡng (offer-gift)
   lẫn voucher tặng thêm (offer-voucher). */
.offer-value { color: #ac801a; font-size: 1.1rem; font-weight: 800; }
.offer-gift__check { flex-shrink: 0; align-self: center; font-size: 1rem; font-weight: 700; color: #ac801a; white-space: nowrap; padding: 0 1.2rem; }

.offer-warranty {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1rem; font-weight: 600; color: #1a7a4a;
  margin-bottom: 0.7rem;
}
.offer-warranty svg { flex-shrink: 0; }

.offer-shipping, .offer-payment { margin-bottom: 0.7rem; padding: 1rem 1.1rem; background: #f9f8f5; border-radius: 0.5rem; }
.offer-shipping__ttl { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 0.6rem; }
.offer-shipping__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.offer-shipping__row:last-child { margin-bottom: 0; }
.offer-shipping__floors { justify-content: space-between; font-size: 0.98rem; color: #444; }
.offer-shipping__fee { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; text-align: right; }
.offer-shipping__fee--free { color: #05a66e; }
.offer-shipping__fee-was { color: #aaa; font-weight: 400; text-decoration: line-through; margin-left: 0.4rem; }
.offer-shipping__expiry { justify-content: flex-end; margin-top: 0.2rem; }
.offer-shipping__note { font-size: 1rem; color: #666; }
.offer-shipping__note--free { color: #05a66e; font-weight: 600; }

.offer-pill {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
@media (hover: hover) and (min-width: 768px) {
  .offer-pill:hover { border-color: #ac801a; color: #ac801a; }
}
.offer-pill.is-active { background: #ac801a; border-color: #ac801a; color: #fff; }

.offer-stepper { display: flex; align-items: center; gap: 0.8rem; }
.offer-stepper__btn {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid #ddd; background: #fff; color: #444;
  font-family: inherit;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) and (min-width: 768px) {
  .offer-stepper__btn:hover { border-color: #ac801a; color: #ac801a; }
}
.offer-stepper__val { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: 1.05rem; }

.offer-summary { padding: 1rem 1.1rem; border: 1px solid #eee; border-radius: 0.5rem; }
/* Dòng "Tổng giá trị đơn hàng" — TOÀN BỘ chi phí ở giá trị thật, chưa trừ
   ưu đãi gì — hiển thị NGANG HÀNG với các dòng giảm giá/phụ phí bên dưới
   (không cần nổi bật riêng), chỉ "Tổng cộng" (số phải trả thật sự) mới
   đậm/nổi bật. */
.offer-summary__gross { display: flex; justify-content: space-between; font-size: 1rem; color: #666; margin-bottom: 0.4rem; }
.offer-summary__row { display: flex; justify-content: space-between; font-size: 1rem; color: #666; margin-bottom: 0.4rem; }
.offer-summary__row--minus span:last-child { color: #c0432c; font-weight: 600; }
/* "--extra" dùng cho khoản phát sinh THÊM (phụ kiện có phí, phí vận
   chuyển thật) — màu trung tính, KHÔNG dùng xanh (xanh dành riêng cho ý
   nghĩa "được lợi/miễn phí" ở chỗ khác, dùng ở đây dễ gây hiểu lầm là ưu
   đãi trong khi thực ra là khoản phải trả thêm). */
.offer-summary__row--extra span:last-child { color: #1a1a1a; font-weight: 600; }
.offer-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.3rem; font-weight: 700; color: #1a1a1a;
  padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px solid #eee;
}
.offer-summary__save { margin-top: 0.5rem; font-size: 1rem; font-weight: 600; color: #05a66e; text-align: right; }

.detail-notice {
  font-size: 1.05rem;
  color: #a67c00;
  background: #fff8e6;
  border: 1px solid #f0dfa8;
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
}
.detail-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
/* "Đặt hàng" (.detail-cta__quote) giữ NGUYÊN thiết kế gốc — trắng/viền
   vàng đồng/chữ vàng đồng. "Tư vấn" và "So sánh" đổi để giống HỆT style
   này (chỉ khác nội dung chữ), thay vì mỗi nút một kiểu rời rạc như
   trước (xám phẳng / đen đặc). */
.detail-cta a, .detail-cta button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.9rem 1.8rem;
  border-radius: 0.5rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: #fff;
  color: #ac801a;
  border: 1px solid #ac801a;
  transition: background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-cta a:hover,
  .detail-cta button:hover { background: #fbf3e2; }
}

/* ===== Detail Modal — Tabs (Chi tiết sản phẩm / Mô tả / Tải xuống) =====
   Nằm NGOÀI .detail-grid, trải hết chiều ngang modal (dưới cả ảnh lẫn cột
   thông tin bên phải) thay vì gói gọn trong cột phải — có border-top để
   tách biệt rõ với phần trên. */
.detail-tabs-section {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}
.detail-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.6rem;
  /* 4 tab (thêm "Thông số kỹ thuật") có thể vượt chiều ngang trên màn hình
     hẹp — cho phép cuộn ngang thay vì bó cụm/tràn ra ngoài modal. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-tab-btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: #999;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.9rem 0.2rem;
  margin-right: 1.6rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-tab-btn:hover { color: #1a1a1a; }
}
.detail-tab-btn.is-active { color: #1a1a1a; border-bottom-color: #ac801a; }
.detail-tab-panel { display: none; }
.detail-tab-panel.is-active { display: block; }

/* Tab "Chi tiết sản phẩm" — bảng thông tin dạng nhãn/giá trị, gọn hơn
   .detail-meta cũ (vốn chỉ có 2 ô loại đàn/kích thước). */
.detail-spec-table {
  margin-bottom: 1.8rem;
  border-top: 1px solid #f0f0f0;
}
.detail-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1.12rem;
}
.detail-spec-row__label { color: #999; }
.detail-spec-row__value { color: #1a1a1a; font-weight: 600; text-align: right; }

/* Tab "Tải xuống" — 2 thẻ (catalog hãng / mini catalog), cùng 1 dạng hàng
   ngang: mô tả bên trái, nút tải bên phải. */
.detail-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.detail-download-card__info { display: flex; flex-direction: column; gap: 0.3rem; max-width: 60%; }
.detail-download-card__info strong { font-size: 1.2rem; color: #1a1a1a; }
.detail-download-card__info span { font-size: 1rem; color: #888; line-height: 1.5; }
.detail-download-card__btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #ac801a;
  background: #fff;
  color: #ac801a;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-download-card__btn:hover { background: #fbf3e2; }
}
.detail-download-card__btn:disabled,
.detail-download-card__btn--disabled {
  border-color: #ddd;
  color: #bbb;
  background: #f8f8f8;
  cursor: default;
}
@media screen and (max-width: 767px), print {
  .detail-download-card { flex-direction: column; align-items: flex-start; }
  .detail-download-card__info { max-width: none; }
  .detail-download-card__btn { align-self: stretch; text-align: center; }
}

/* ===== Sản phẩm liên quan (cùng kích thước / cùng tầm giá) — nằm dưới
   detail-grid, hàng cuộn ngang gọn nhẹ, không phải card đầy đủ như lưới
   chính. ===== */
.detail-related {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.detail-related__ttl { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.3rem; font-weight: 700; color: #1a1a1a; margin-bottom: 0.9rem; }
.detail-related__row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.detail-related-card {
  flex: 0 0 auto;
  width: 9.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  background: none;
  font-family: inherit;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  padding: 0.7rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .detail-related-card:hover { border-color: #ac801a; }
}
.detail-related-card__img {
  aspect-ratio: 1;
  background: #f4f2ee;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.detail-related-card__img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.detail-related-card__name { font-size: 0.98rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.detail-related-card__meta { font-size: 0.85rem; color: #999; }
.detail-related-card__price { font-size: 0.98rem; font-weight: 700; color: #ac801a; }

@media screen and (max-width: 767px), print {
  .detail-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .detail-name { font-size: 2.1rem; }
}

/* ===== Compare Table ===== */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.compare-table th, .compare-table td {
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
  font-size: 1.15rem;
}
.compare-table thead th {
  vertical-align: bottom;
  background: #faf9f6;
  position: sticky;
  top: 0;
}
.compare-table__product-col { min-width: 200px; }
.compare-table__img {
  width: 100%;
  aspect-ratio: 4/3;
  background: #f4f2ee;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.compare-table__img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.compare-table__name { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.3rem; color: #1a1a1a; }
.compare-table__brand { color: #ac801a; font-size: 0.98rem; letter-spacing: 0.06em; text-transform: uppercase; }
.compare-table__remove {
  margin-top: 0.6rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: #999;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.compare-table tbody th {
  color: #999;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: #fff;
}
.compare-cell--best {
  background: #fbf3e2;
  color: #935f00;
  font-weight: 700;
  border-radius: 0.4rem;
}
.compare-advice {
  margin-top: 2.4rem;
  padding: 1.6rem 1.8rem;
  background: #f4f2ee;
  border-radius: 0.6rem;
  border-left: 3px solid #ac801a;
}
.compare-advice__ttl { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.4rem; font-weight: 600; color: #1a1a1a; margin-bottom: 0.8rem; }
.compare-advice p { font-size: 1.15rem; line-height: 1.75; color: #555; margin: 0 0 0.6rem; }
.compare-advice p:last-child { margin-bottom: 0; }
.compare-advice__quote {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.85rem 1.8rem;
  border-radius: 0.5rem;
  background: #ac801a;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .compare-advice__quote:hover { background: #8c6814; }
}

/* ===== Advisor (Tư vấn chọn đàn) ===== */
.advisor-ttl { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.2rem; font-weight: 600; color: #1a1a1a; margin-bottom: 0.6rem; }
.advisor-sub { font-size: 1.2rem; color: #777; margin-bottom: 2.2rem; }
.advisor-step { display: none; }
.advisor-step.is-active { display: block; }
.advisor-question { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.5rem; font-weight: 600; color: #1a1a1a; margin-bottom: 1.4rem; }
.advisor-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.advisor-option {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  font-family: inherit;
  padding: 1.2rem 1.4rem;
  border: 1px solid #ddd;
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .advisor-option:hover { border-color: #ac801a; }
}
.advisor-option.is-selected { border-color: #ac801a; background: #fbf3e2; }
.advisor-option strong { font-size: 1.2rem; color: #1a1a1a; }
.advisor-option span { font-size: 1.02rem; color: #888; }
.advisor-progress { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.advisor-progress__dot { flex: 1; height: 0.4rem; border-radius: 999px; background: #eee; }
.advisor-progress__dot.is-done { background: #ac801a; }
.advisor-nav { display: flex; justify-content: space-between; align-items: center; }
.advisor-nav button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
}
.advisor-nav button.advisor-next { background: #1a1a1a; color: #fff; }
.advisor-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

.advisor-results__intro { font-size: 1.2rem; color: #555; margin-bottom: 1.8rem; line-height: 1.7; }
.advisor-result-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.4rem;
  padding: 1.4rem;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  margin-bottom: 1.2rem;
  align-items: center;
}
.advisor-result-card__img {
  width: 100%;
  aspect-ratio: 1;
  background: #f4f2ee;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.advisor-result-card__img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.advisor-result-card__rank {
  display: inline-block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  background: #ac801a;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.advisor-result-card__name { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.4rem; font-weight: 700; color: #1a1a1a; }
.advisor-result-card__why { font-size: 1.05rem; color: #666; margin: 0.4rem 0 0.6rem; line-height: 1.6; }
.advisor-result-card__price { font-size: 1.2rem; font-weight: 700; color: #1a1a1a; }
.advisor-result-card__link { font-size: 1.05rem; color: #ac801a; cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; margin-left: 1rem; }
.advisor-restart { margin-top: 1.6rem; font-size: 1.1rem; color: #999; background: none; border: none; text-decoration: underline; cursor: pointer; }
@media screen and (max-width: 767px), print {
  .advisor-options { grid-template-columns: 1fr; }
  .advisor-result-card { grid-template-columns: 72px 1fr; }
}