#fw-section-featured-collection-1d0037c8-c98d-42a3-a88b-7535ab5141ca {
--font-heading-scale: 2.0;
--font-body-scale: 1.19;
}
#fw-section-featured-collection-1d0037c8-c98d-42a3-a88b-7535ab5141ca {

h2, .h2 {
    text-align: left !important;
}
}

#fw-section-custom-html-f9890365-a7e2-49b4-8e42-eb9d29eaa8c7 {
--font-heading-scale: 1.1;
--font-body-scale: 0.7;
}
#fw-section-newsletter-ee95bab7-b63b-4176-ab06-0099c079ee53 {
--font-heading-scale: 1.32;
--font-body-scale: 1.05;
}
#fw-section-newsletter-ee95bab7-b63b-4176-ab06-0099c079ee53 {

/* 1. ĐẬP VỠ KHUNG GIỚI HẠN CỦA THẰNG CHA (Cái này giữ nguyên, cứ cho bung xõa) */
.newsletter .container.wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 2. ÉP THẰNG CON TRÀN VIỀN + ĐỔI MÀU SÁNG CHÓI */
.newsletter__content {
    background-color: #f3f4f6 !important; /* Sang light mode rồi thì xài xám khói nhạt nha, dẹp #151516 đi! */
    border-radius: 0 !important; /* Dẹp bo góc, full width vuông vức */
    width: 100% !important;
    padding: 80px 20px !important; /* Bơm oxy */
}

/* 3. GOM CHỮ VÀ FORM VÀO CHÍNH GIỮA */
.newsletter__header, 
.newsletter__text, 
.newsletter__form {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    color: #1f2937 !important; /* Tui ép luôn text về màu tối, lỡ CSS cũ đang set màu trắng thì nó tàng hình mất 🤡 */
}

/* Sửa lại cái form input cho nó trắng trẻo sạch sẽ */
.newsletter__form input {
    background-color: #ffffff !important; /* Đổi nền input thành trắng tinh khôi */
    color: #111827 !important; /* Chữ gõ vào phải đen chát để dễ đọc */
    border: 1px solid #d1d5db !important; /* Đổi viền sang xám nhạt cho tinh tế */
}
}

#fw-section-footer {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #151516;
--color-background-rgb: 21, 21, 22;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #070708;
--color-on-primary-rgb: 7, 7, 8;
--color-product-image-background: #f3f4f6;
--color-background-brightness: 21;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #ffffff;
--primary-btn-text: #070708;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: #ffffff;
--secondary-btn-text: #070708;
--secondary-btn-border-color: #ffffff;

}
#fw-section-header {
--font-heading-scale: 1.1;
--font-body-scale: 0.85;
}
#fw-section-header {

.header {
  font-size: 0.3rem;
}

@media (min-width: 768px) {
  .header {
    font-size: 1rem;
  }
}
}
#fw-section-product-product-ascend {
--font-heading-scale: 0.89;
--font-body-scale: 1.2;
}
#fw-section-custom-html-86331595-cba5-408c-aaea-1d86f8628466 {

/* ==========================================================
   Sample Pack Player — light, Apple-style (v3)
   Giữ nguyên toàn bộ class cũ. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-audio-player-list {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --fill: rgba(0, 0, 0, 0.05);
  --fill-strong: rgba(0, 0, 0, 0.09);
  --surface: #f5f5f7;
  --accent: #ff3b30;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 8px 28px;
}

/* ---------- Mỗi dòng track ----------
   Nghỉ: trong suốt · Hover: xám nhạt · Đang phát: thẻ trắng nổi lên */
.audio-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "btn wave"
    "btn info";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:hover {
  background: var(--surface);
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Nút play ---------- */
.play-btn {
  grid-area: btn;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 1px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.92); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.4);
}

/* ---------- Waveform ---------- */
.waveform-container {
  grid-area: wave;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container.one-shot { max-width: 180px; }

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--accent) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- Thông tin: tên bên trái, badge bên phải ---------- */
.track-info-container {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.track-name {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.audio-track-row:has(.is-glowing) .track-name {
  color: var(--ink);
  font-weight: 500;
}

/* Badge: pill xám nhạt, không viền */
.badge {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 22px;
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.badge.type { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.bpm  { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.key  { background: var(--ink); color: #ffffff; font-weight: 600; border: none; }

/* ---------- CTA cuối: chip trắng nổi nhẹ ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta span { color: var(--accent); font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }
  .category-track-list { grid-template-columns: 1fr; gap: 4px; }

  .audio-track-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 8px;
    border-radius: 14px;
  }

  .play-btn { width: 36px; height: 36px; }
  .track-name { font-size: 11px; }
  .badge { padding: 1px 7px; font-size: 10px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .track-name,
  .waveform-container ::part(cursor) { transition: none; }
}
}

#fw-section-product-product-closure {
--font-heading-scale: 0.9;
--font-body-scale: 1.2;
}



#fw-section-product-product-default {
--font-heading-scale: 0.8;
--font-body-scale: 1.2;
}
#fw-section-product-recommendations-product-default {
--font-heading-scale: 1.17;
--font-body-scale: 1.55;
}



#fw-section-custom-html-626fac83-dc12-4fe3-983e-b7766de5bd0d {

/* ==========================================================
   Sample Pack Player — light, Apple-style (v3) — bản màu tím #cc00ff
   Giữ nguyên toàn bộ class cũ. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-audio-player-list {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --fill: rgba(0, 0, 0, 0.05);
  --fill-strong: rgba(0, 0, 0, 0.09);
  --surface: #f5f5f7;
  --accent: #cc00ff;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 8px 28px;
}

/* ---------- Mỗi dòng track ----------
   Nghỉ: trong suốt · Hover: xám nhạt · Đang phát: thẻ trắng nổi lên */
.audio-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "btn wave"
    "btn info";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:hover {
  background: var(--surface);
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Nút play ---------- */
.play-btn {
  grid-area: btn;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 1px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.92); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(204, 0, 255, 0.35);
}

/* ---------- Waveform ---------- */
.waveform-container {
  grid-area: wave;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container.one-shot { max-width: 180px; }

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--accent) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- Thông tin: tên bên trái, badge bên phải ---------- */
.track-info-container {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.track-name {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.audio-track-row:has(.is-glowing) .track-name {
  color: var(--ink);
  font-weight: 500;
}

/* Badge: pill xám nhạt, không viền */
.badge {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 22px;
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.badge.type { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.bpm  { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.key  { background: var(--ink); color: #ffffff; font-weight: 600; border: none; }

/* ---------- CTA cuối: chip trắng nổi nhẹ ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta span { color: var(--accent); font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }
  .category-track-list { grid-template-columns: 1fr; gap: 4px; }

  .audio-track-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 8px;
    border-radius: 14px;
  }

  .play-btn { width: 36px; height: 36px; }
  .track-name { font-size: 11px; }
  .badge { padding: 1px 7px; font-size: 10px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .track-name,
  .waveform-container ::part(cursor) { transition: none; }
}
}




#fw-section-custom-html-c0b586a3-4d1d-4112-b53b-ac16a64ae83e {

/* ==========================================================
   Sample Pack Player — light, Apple-style (v3) — bản đơn sắc đen/xám
   Giữ nguyên toàn bộ class cũ. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-audio-player-list {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --fill: rgba(0, 0, 0, 0.05);
  --fill-strong: rgba(0, 0, 0, 0.09);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #888888;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 8px 28px;
}

/* ---------- Mỗi dòng track ----------
   Nghỉ: trong suốt · Hover: xám nhạt · Đang phát: thẻ trắng nổi lên */
.audio-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "btn wave"
    "btn info";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:hover {
  background: var(--surface);
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Nút play ---------- */
.play-btn {
  grid-area: btn;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 1px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.92); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  grid-area: wave;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container.one-shot { max-width: 180px; }

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- Thông tin: tên bên trái, badge bên phải ---------- */
.track-info-container {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.track-name {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.audio-track-row:has(.is-glowing) .track-name {
  color: var(--ink);
  font-weight: 600;
}

/* Badge: pill xám nhạt, không viền */
.badge {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 22px;
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.badge.type { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.bpm  { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.key  { background: var(--ink); color: #ffffff; font-weight: 600; border: none; }

/* ---------- CTA cuối: chip trắng nổi nhẹ ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta span { color: var(--accent); font-weight: 600; }

/* Trang này không có dòng CTA: ẩn chip rỗng */
.bundle-cta:empty { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }
  .category-track-list { grid-template-columns: 1fr; gap: 4px; }

  .audio-track-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 8px;
    border-radius: 14px;
  }

  .play-btn { width: 36px; height: 36px; }
  .track-name { font-size: 12px; }
  .badge { padding: 1px 7px; font-size: 10px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .track-name,
  .waveform-container ::part(cursor) { transition: none; }
}
}



#fw-section-custom-html-29b7b9d3-90ef-4c57-9543-43e41d396118 {

/* ==========================================================
   Full Project Demo — light, Apple-style (v3) — bản đơn sắc đen/xám
   1 player duy nhất, to hơn. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-demo-player {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-strong: rgba(0, 0, 0, 0.1);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #4b5563;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách (chỉ 1 player) ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ---------- Player: thẻ xám nhạt, khi phát thì nổi lên trắng ---------- */
.audio-track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 22px;
  min-width: 0;
  padding: 22px 28px;
  background: var(--surface);
  border: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.09);
}

/* ---------- Nút play ---------- */
.play-btn,
.full-demo-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 2px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.94); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- CTA cuối (trang này để trống nên tự ẩn) ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta:empty { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }

  .audio-track-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .play-btn,
  .full-demo-btn { width: 44px; height: 44px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .waveform-container ::part(cursor) { transition: none; }
}
}



#fw-section-custom-html-75f8ccb4-97c6-444f-9471-8395c3f26b4b {

/* ==========================================================
   Full Project Demo — light, Apple-style (v3) — bản đơn sắc đen/xám
   1 player duy nhất, to hơn. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-demo-player {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-strong: rgba(0, 0, 0, 0.1);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #4b5563;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách (chỉ 1 player) ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ---------- Player: thẻ xám nhạt, khi phát thì nổi lên trắng ---------- */
.audio-track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 22px;
  min-width: 0;
  padding: 22px 28px;
  background: var(--surface);
  border: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.09);
}

/* ---------- Nút play ---------- */
.play-btn,
.full-demo-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 2px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.94); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- CTA cuối (trang này để trống nên tự ẩn) ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta:empty { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }

  .audio-track-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .play-btn,
  .full-demo-btn { width: 44px; height: 44px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .waveform-container ::part(cursor) { transition: none; }
}
}





#fw-section-custom-html-fddf3971-abaf-49cb-84d9-b7b4cd973387 {

/* ==========================================================
   Full Project Demo — light, Apple-style (v3) — bản đơn sắc đen/xám
   1 player duy nhất, to hơn. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-demo-player {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-strong: rgba(0, 0, 0, 0.1);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #4b5563;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách (chỉ 1 player) ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ---------- Player: thẻ xám nhạt, khi phát thì nổi lên trắng ---------- */
.audio-track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 22px;
  min-width: 0;
  padding: 22px 28px;
  background: var(--surface);
  border: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.09);
}

/* ---------- Nút play ---------- */
.play-btn,
.full-demo-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 2px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.94); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- CTA cuối (trang này để trống nên tự ẩn) ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta:empty { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }

  .audio-track-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .play-btn,
  .full-demo-btn { width: 44px; height: 44px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .waveform-container ::part(cursor) { transition: none; }
}
}







#fw-section-product-product-light-between {
--font-heading-scale: 0.9;
--font-body-scale: 1.2;
}
#fw-section-custom-html-2fca9a62-2bc0-4286-a3d5-fd01d62b199b {

#fh-audio-player-list {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --fill: rgba(0, 0, 0, 0.05);
  --fill-strong: rgba(0, 0, 0, 0.09);
  --surface: #f5f5f7;
  --accent: #8e8e93;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Gạch ngang giữa Full Demos và Preview ---------- */
.category-divider {
  height: 1px;
  margin: 40px 16px 48px;
  background: var(--fill-strong);
}

/* ---------- Danh sách ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 8px 28px;
}

/* Full Project Demos: đúng 2 bản, mỗi bản 50% */
.category-track-list.demo-track-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One-shot (kick/snare/snap/rim) ngắn: lưới 3 cột, sóng giãn đầy ô cho thẳng hàng */
.category-track-list.is-oneshot {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 8px 16px;
}

.category-track-list.is-oneshot .waveform-container.one-shot { max-width: none; }

/* ---------- Chip lọc ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -12px 0 44px;
  padding: 4px;
}

.filter-chip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.filter-chip:hover { background: var(--fill-strong); }
.filter-chip:active { transform: scale(0.96); }
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-chip.is-active,
.filter-chip.is-active:hover { background: var(--ink); color: #ffffff; }

.filter-chip[class*="type-"]::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--dot, transparent);
}

/* ---------- Ghi chú nhỏ dưới tiêu đề Preview ---------- */
.category-title.has-note { margin-bottom: 8px; }

.category-note {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-align: center;
  text-wrap: balance;
}

.category-note + .filter-bar { margin-top: 0; }
.category-note + .demo-track-list { margin-top: 28px; }

/* ---------- Nhóm sample ---------- */
.track-group { margin-bottom: 40px; }
.track-group:last-child { margin-bottom: 0; }
.track-group[hidden] { display: none; }

/* ---------- Cặp nhóm chung 1 hàng ngang (Snap + Rim) ----------
   Màn rộng: 2 nhóm cạnh nhau, mỗi nhóm 2 cột => thẳng hàng với 4 cột Snare phía trên.
   Màn hẹp (<= 1100px): tự xếp dọc như cũ. */
.track-group-pair { margin-bottom: 40px; }
.track-group-pair:last-child { margin-bottom: 0; }
.track-group-pair[hidden] { display: none !important; }

@media (min-width: 1101px) {
  .track-group-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px; /* = gap của lưới one-shot để cột canh thẳng */
    align-items: start;
  }

  .track-group-pair > .track-group { margin-bottom: 0; }

  .track-group-pair .category-track-list.is-oneshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Đang lọc chỉ còn Snap hoặc Rim: trả về layout thường */
  .track-group-pair.is-single { grid-template-columns: minmax(0, 1fr); }
  .track-group-pair.is-single .category-track-list.is-oneshot {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
}

.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.group-title::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, transparent);
}

.group-count {
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 400;
}

/* Đang lọc 1 loại thì chip đã báo rồi, ẩn tiêu đề cho gọn */
.track-groups.is-filtered .group-title { display: none; }

/* ---------- Mỗi dòng track ----------
   Nghỉ: trong suốt · Hover: xám nhạt · Đang phát: thẻ trắng nổi lên */
.audio-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "btn wave"
    "btn info";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:hover {
  background: var(--surface);
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Nút play ---------- */
.play-btn {
  grid-area: btn;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 1px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.92); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(142, 142, 147, 0.35);
}

/* ---------- Waveform ---------- */
.waveform-container {
  grid-area: wave;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container.one-shot { max-width: 180px; }

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--ink) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- Thông tin: tên bên trái, badge bên phải ---------- */
.track-info-container {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.track-name {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.audio-track-row:has(.is-glowing) .track-name {
  color: var(--ink);
  font-weight: 500;
}

/* Thứ tự badge cố định: Type -> BPM -> Key (tên track luôn đứng đầu bên trái) */
.badge.type { order: 1; }
.badge.bpm  { order: 2; }
.badge.key  { order: 3; }

/* Badge: pill xám nhạt, không viền */
.badge {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 22px;
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.badge.type { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.bpm  { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.key  { background: var(--ink); color: #ffffff; font-weight: 600; border: none; }

/* Badge Type: chữ xám trung tính, chỉ có chấm tròn nhỏ ăn màu theo loại */
.badge.type::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--dot, transparent);
}
.type-kick         { --dot: #c9736b; }
.type-snare        { --dot: #c98b5a; }
.type-snap         { --dot: #c4a64a; }
.type-rim          { --dot: #8fa862; }
.type-bass         { --dot: #8f82c4; }
.type-hypergrowl   { --dot: #c27aa6; }
.type-piano        { --dot: #7a9bc9; }
.type-ambience     { --dot: #6fb0a4; }
.type-glitch       { --dot: #6fa6bd; }
.type-build-up     { --dot: #a88b73; }
.type-short-fill   { --dot: #78a883; }
.type-full-project { --dot: #7d869c; }

/* ---------- CTA cuối: chip trắng nổi nhẹ ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta span { color: var(--accent); font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }
  .category-track-list,
  .category-track-list.is-oneshot,
  .category-track-list.demo-track-list { grid-template-columns: 1fr; gap: 4px; }

  /* Mobile: chip xuống dòng để thấy hết, không phải vuốt ngang */
  .filter-bar {
    gap: 6px;
    margin: -6px 0 22px;
    padding: 4px 0;
  }
  .filter-chip { padding: 6px 12px; font-size: 12px; }

  .track-group { margin-bottom: 28px; }
  .track-group-pair { margin-bottom: 28px; }
  .group-title { margin-bottom: 8px; padding: 0 8px; font-size: 14px; }
  .category-divider { margin: 26px 8px 30px; }

  .audio-track-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 8px;
    border-radius: 14px;
  }

  .play-btn { width: 36px; height: 36px; }
  .track-name { font-size: 11px; }
  .badge { padding: 1px 7px; font-size: 10px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
  .category-note { font-size: 12px; margin-bottom: 4px; }
  .category-note + .demo-track-list { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .track-name,
  .waveform-container ::part(cursor) { transition: none; }
}

}







#fw-section-custom-html-03d8ac99-cabe-4d0b-85ca-e6f9acf1567f {

/* ==========================================================
   Sample Pack Player — light, Apple-style (v3) — bản đơn sắc đen/xám
   Giữ nguyên toàn bộ class cũ. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-audio-player-list {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --fill: rgba(0, 0, 0, 0.05);
  --fill-strong: rgba(0, 0, 0, 0.09);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #000000;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 8px 28px;
}

/* ---------- Mỗi dòng track ----------
   Nghỉ: trong suốt · Hover: xám nhạt · Đang phát: thẻ trắng nổi lên */
.audio-track-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "btn wave"
    "btn info";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 18px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:hover {
  background: var(--surface);
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ---------- Nút play ---------- */
.play-btn {
  grid-area: btn;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 1px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.92); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  grid-area: wave;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container.one-shot { max-width: 180px; }

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- Thông tin: tên bên trái, badge bên phải ---------- */
.track-info-container {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.track-name {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.audio-track-row:has(.is-glowing) .track-name {
  color: var(--ink);
  font-weight: 500;
}

/* Badge: pill xám nhạt, không viền */
.badge {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 22px;
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.badge.type { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.bpm  { background: var(--fill); color: var(--ink-soft); border: none; }
.badge.key  { background: var(--ink); color: #ffffff; font-weight: 600; border: none; }

/* ---------- CTA cuối: chip trắng nổi nhẹ ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta span { color: var(--accent); font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }
  .category-track-list { grid-template-columns: 1fr; gap: 4px; }

  .audio-track-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 8px;
    border-radius: 14px;
  }

  .play-btn { width: 36px; height: 36px; }
  .track-name { font-size: 11px; }
  .badge { padding: 1px 7px; font-size: 10px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .track-name,
  .waveform-container ::part(cursor) { transition: none; }
}
}


#fw-section-custom-html-097fd556-92a8-4662-8645-cd9a67998c23 {

/* ==========================================================
   Full Project Demo — light, Apple-style (v3) — bản đơn sắc đen/xám
   1 player duy nhất, to hơn. Không dùng hàm toán CSS để tránh lỗi Sass.
   ========================================================== */

#fh-demo-player {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-strong: rgba(0, 0, 0, 0.1);
  --surface: #f5f5f7;
  --accent: #1d1d1f;
  --cursor: #4b5563;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung ngoài ---------- */
.category-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.07);
  padding: 56px 44px 44px;
  margin-bottom: 36px;
}

.category-title {
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 40px;
}

/* ---------- Danh sách (chỉ 1 player) ---------- */
.category-track-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ---------- Player: thẻ xám nhạt, khi phát thì nổi lên trắng ---------- */
.audio-track-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 22px;
  min-width: 0;
  padding: 22px 28px;
  background: var(--surface);
  border: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.audio-track-row:has(.is-glowing) {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.09);
}

/* ---------- Nút play ---------- */
.play-btn,
.full-demo-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.play-btn svg { display: block; margin-left: 2px; } /* bù lệch quang học của hình tam giác */
.audio-track-row:has(.is-glowing) .play-btn svg { margin-left: 0; }

.play-btn:hover { background: var(--fill-strong); }
.play-btn:active { transform: scale(0.94); }
.play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.audio-track-row:has(.is-glowing) .play-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.28);
}

/* ---------- Waveform ---------- */
.waveform-container {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.waveform-container ::part(cursor) {
  transition: background-color 0.2s ease;
}

.waveform-container:not(.is-glowing) ::part(cursor) {
  background-color: transparent !important;
  width: 2px !important;
}

.waveform-container.is-glowing ::part(cursor) {
  background-color: var(--cursor) !important;
  box-shadow: none !important;
  width: 2px !important;
  border-radius: 2px;
  z-index: 10;
}

/* ---------- CTA cuối (trang này để trống nên tự ẩn) ---------- */
.bundle-cta {
  display: table;
  margin: 0 auto 44px;
  padding: 12px 26px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bundle-cta:empty { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .category-box { padding: 32px 12px 20px; border-radius: 22px; }
  .category-title { font-size: 24px; margin-bottom: 22px; }

  .audio-track-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .play-btn,
  .full-demo-btn { width: 44px; height: 44px; }
  .bundle-cta { padding: 10px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-track-row,
  .play-btn,
  .waveform-container ::part(cursor) { transition: none; }
}
}