/* ==========================================================================
   BỘT THẦN HƯƠNG KIM TÂM CÁT — Design System
   Hướng thiết kế: Đông phương cao cấp — giấy mỹ thuật, ngọc bích, đồng cổ, gỗ.
   Nền kem/be chuyển tiếp mềm, khối tối là xanh ngọc bích (không phải đen/nâu),
   nhấn đồng cổ dùng hiếm. Chuyển động: "khói hương bay" — vào chậm và trôi,
   phản hồi khi chạm thì nhanh và nhẹ.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
/* Ảnh responsive bọc trong <picture> (WebP + JPG dự phòng). display:contents
   xoá hộp của chính thẻ <picture> khỏi bố cục, để <img> vẫn là con trực tiếp
   của khung chứa — nhờ vậy mọi quy tắc sẵn có kiểu ".image-frame img { height:
   100% }" giữ nguyên tác dụng, không cần sửa theo. */
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* ---------- Tokens ---------- */
:root {
  /* Nâu hổ phách đậm — khối tối chính, đồng bộ với tông vàng đồng + kem của
     thương hiệu Kim Tâm Cát (không còn dùng xanh ngọc bích) */
  --wood-900: #1c130b;
  --wood-800: #2c2018;
  --wood-700: #3d2f20;
  --wood-600: #51402a;
  --wood-500: #6b5636;
  --wood-400: #8a7350;

  /* Kem & be — giấy mỹ thuật, nền sáng chuyển tiếp */
  --cream:    #f8f4ec;
  --cream-2:  #f4efe5;
  --beige:    #e8dfcf;
  --beige-2:  #ddd0b6;
  --white:    #ffffff;

  /* Vàng đồng — màu chủ đạo của thương hiệu Kim Tâm Cát, dùng nhiều hơn bản cũ */
  --gold-700: #8a5f28;
  /* Đồng đậm — dành riêng cho CHỮ NHỎ trên nền sáng. --gold-600 không đạt AA
     trên bất kỳ nền sáng nào (tối đa 3.82:1 ngay cả trên trắng tinh), nên chỉ
     dùng nó cho viền/biểu tượng, không dùng cho chữ. */
  --gold-800: #6b4a1f;
  --gold-600: #af782b;
  --gold-500: #c6963f;
  --gold-400: #d9b46c;
  --gold-200: #f0dfbb;

  /* Xanh thảo mộc — lá sen, dược liệu */
  --sage-700: #33523f;
  --sage-600: #496b58;
  --sage-500: #5e7d6a;
  --sage-300: #8ea297;

  /* Đỏ son — phương Đông, năng lượng, dùng làm nhấn thứ hai sau vàng */
  --red-800: #5f1b17;
  --red-700: #7d2620;
  --red-600: #9c3327;
  --red-400: #c2695a;

  /* Sen — dùng rất tiết chế, chỉ ở chi tiết trang trí */
  --lotus-400: #e3a3b0;
  --lotus-200: #f4d8dd;

  /* Chữ */
  --ink:      #292721;
  --ink-2:    #55504a;
  /* ink-3 và on-dark-3 đã được đậm/sáng thêm một bậc so với bản trước:
     mức cũ (#7c7469 / #ab9a83) chỉ đạt 4.20 và 6.70 trên nền phẳng, tụt dưới
     chuẩn khi có hoạ tiết trống đồng phía sau. Mức mới đạt ≥4.5 ở mọi nền. */
  /* Đậm thêm một bậc nữa so với lần trước (#6b6257) — để nền be vẫn đạt AA
     ngay cả khi có hoạ tiết trống đồng phía sau (xem --drum-scrim-*). */
  --ink-3:    #5c5348;
  --on-dark:      #f4efe5;
  --on-dark-2:    #d9cdbc;
  --on-dark-3:    #bcac95;

  /* Viền */
  --line:      #ddd0b6;
  --line-2:    #d0c0a0;
  --line-dark: #4a3a26;

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Be Vietnam Pro được vẽ riêng cho dấu tiếng Việt — dấu không đè lên nhau ở
     cỡ nhỏ như các font sans phương Tây. Không dùng Inter/Roboto. */
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --fs-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-4xl: clamp(2.2rem, 1.5rem + 3.1vw, 3.6rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 4.4vw, 4.9rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.012em;
  --ls-wide: 0.05em;
  --ls-wider: 0.2em;

  /* Khoảng cách — nhiều whitespace hơn */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --section-y: clamp(4.25rem, 3rem + 5vw, 8rem);
  --section-y-sm: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);

  /* Bo góc — mềm hơn hẳn bản cũ */
  --r-sm: 0.375rem;
  --r-md: 0.75rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-2xl: 2.5rem;
  --r-pill: 62.5rem;
  --r-circle: 50%;

  --bw-1: 1px; --bw-2: 2px;

  /* Đổ bóng nhiều lớp, rất mềm */
  --shadow-xs: 0 1px 2px rgba(44,32,24,.05);
  --shadow-sm: 0 2px 4px rgba(44,32,24,.04), 0 6px 16px rgba(44,32,24,.05);
  --shadow-md: 0 4px 10px rgba(44,32,24,.05), 0 16px 36px rgba(44,32,24,.08);
  --shadow-lg: 0 10px 24px rgba(44,32,24,.07), 0 34px 70px rgba(44,32,24,.12);
  --shadow-gold: 0 8px 28px rgba(168,130,62,.24);
  /* Có blur (trước là 0) — cạnh cứng của vệt sáng 0-blur trên nút dạng viên
     thuốc (bo tròn hết cỡ) có thể lộ thành một chấm/vệt trắng nhỏ ở hai đầu
     nút, nơi cạnh thẳng gặp đường cong. Thêm 2px blur để vệt sáng tan dần,
     không còn mép cứng. */
  --shadow-inset-top: inset 0 1px 2px rgba(255,255,255,.4);

  /* Chuyển động */
  --e-soft: cubic-bezier(0.22, 0.61, 0.24, 1);
  --e-out:  cubic-bezier(0.16, 0.84, 0.28, 1);
  --e-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-1: 180ms;
  --t-2: 380ms;
  --t-3: 620ms;
  --t-4: 900ms;
  --t-5: 1150ms;   /* dành cho tiêu đề lớn trôi chậm (data-anim="rise") */
  --anim-stagger: 110ms;

  /* Vân giấy thủ công — phủ toàn trang, rất mờ */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Nền chìm trống đồng ----------------------------------------------
     Một ảnh trống đồng dùng chung cho mọi khối nền tối, chỉ đổi lớp phủ màu
     đặt lên trên. Vì cùng một ảnh xuyên suốt, mắt không thấy "dán ảnh riêng
     lẻ", chỉ thấy nền có chiều sâu và hoa văn ẩn hiện.

     ĐỘ PHỦ 60% LÀ SỐ ĐÃ ĐO, KHÔNG PHẢI SỐ ƯỚC LƯỢNG.
     Cách đo: lấy điểm SÁNG NHẤT của ảnh — rgb(111,79,40) — trộn với lớp phủ
     theo công thức mau_that = mau_phu * do_phu + mau_anh * (1 - do_phu), rồi
     tính tỉ lệ tương phản WCAG với từng màu chữ. Ở 60%, nền tối nhạt nhất của
     site (--wood-700) cho: chữ chính 9.07, chữ phụ 4.69 — đều đạt AA.
     Hạ dưới 60% thì chữ phụ (--on-dark-3) sẽ tụt dưới 4.5.

     KHỐI NỀN SÁNG CỐ TÌNH KHÔNG DÙNG hoạ tiết này: đo tại điểm TỐI NHẤT của
     ảnh — rgb(17,5,0) — chữ phụ trên nền kem chỉ còn 4.38 và trên nền be còn
     3.84, không đạt chuẩn. Nền sáng giữ vân giấy sẵn có là đủ. */
  --drum-image: url("../assets/web/nen-trong-dong.jpg");
  --drum-scrim: linear-gradient(rgba(44, 32, 24, 0.60), rgba(28, 19, 11, 0.68));

  /* NỀN SÁNG dùng một BẢN ẢNH RIÊNG, không dùng lớp phủ.
     Ảnh gốc rất tối (độ sáng 7-84). Phủ kem 58% lên nó cho ra nền xám-nâu,
     điểm tối nhất chỉ còn độ sáng 0.293 — chữ phụ tụt còn 2.46:1 và nhãn
     vàng còn 1.24:1, đều dưới AA (cần 4.5:1).
     nen-trong-dong-sang.jpg là chính ảnh đó đã được ánh xạ vào dải 210-255
     kèm tông ấm. Cách này CHO HOA VĂN RÕ HƠN bản phủ cũ (45 bậc sáng thay vì
     26) mà điểm tối nhất vẫn là rgb(210,206,198) — độ sáng 0.617. Đo tại
     đúng điểm đó: --ink 9.59:1, --ink-3 4.79:1, --gold-800 5.11:1.
     Nếu đổi ảnh khác, phải đo lại điểm TỐI NHẤT của ảnh mới, không đo trên
     nền phẳng. */
  --drum-image-light: url("../assets/web/nen-trong-dong-sang.jpg");
  --cta-image: url("../assets/web/footer-cta-ktc.jpg");
  /* Vẫn giữ một lớp phủ rất nhẹ để hoà ảnh vào màu nền của từng khối */
  --drum-veil-cream: linear-gradient(rgba(248,244,236,.14), rgba(248,244,236,.14));
  --drum-veil-sand: linear-gradient(180deg,
    rgba(248,244,236,.10) 0%, rgba(232,223,207,.30) 22%, rgba(232,223,207,.30) 78%, rgba(248,244,236,.10) 100%);

  /* Lá thảo mộc — silhouette trang trí */
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 260'%3E%3Cpath d='M70 4C30 46 12 108 30 168c9 30 24 54 40 88 16-34 31-58 40-88 18-60 0-122-40-164z' fill='%23000'/%3E%3Cpath d='M70 20v232' stroke='%23fff' stroke-width='3' fill='none' opacity='.5'/%3E%3C/svg%3E");

  --container-max: 78rem;
  --container-narrow: 44rem;
  --container-pad: var(--sp-5);
  --container-pad-lg: var(--sp-12);

  --header-h: 5.5rem;
  --header-h-sm: 4.5rem;
}

/* Ảnh nền trong CSS không bọc được trong <picture>, nên dùng image-set():
   trình duyệt nào hiểu được thì lấy bản WebP (nhẹ hơn 60-85%), còn lại giữ
   nguyên bản JPG khai ở trên. Cùng một tấm ảnh, chỉ khác định dạng — các
   phép đo tương phản ghi ở phần :root vẫn đúng nguyên. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  :root {
    --drum-image: image-set(
      url("../assets/web/nen-trong-dong.webp") type("image/webp"),
      url("../assets/web/nen-trong-dong.jpg") type("image/jpeg"));
    --drum-image-light: image-set(
      url("../assets/web/nen-trong-dong-sang.webp") type("image/webp"),
      url("../assets/web/nen-trong-dong-sang.jpg") type("image/jpeg"));
    --cta-image: image-set(
      url("../assets/web/footer-cta-ktc.webp") type("image/webp"),
      url("../assets/web/footer-cta-ktc.jpg") type("image/jpeg"));
  }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Vân giấy phủ toàn trang — nằm trên nền, dưới nội dung */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-repeat: repeat;
  opacity: .028;
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }

/* Màu chữ chạy theo token của vùng chứa: vùng nền tối chỉ cần đổi hai biến,
   không phải liệt kê lại từng selector — tránh sót chỗ như hero/page-head. */
:root { --c-heading: var(--ink); --c-body: var(--ink-2); }
.section-dark, .section-dark-2, .hero, .hero-cinema, .page-head, .cta-final,
.site-footer, .mobile-nav, .site-header, .on-dark {
  --c-heading: var(--on-dark);
  --c-body: var(--on-dark-2);
  color: var(--on-dark);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: 0; }

p { color: var(--c-body); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
@media (min-width: 64rem) { .container { padding: 0 var(--container-pad-lg); } }

/* Nhãn nhỏ phía trên tiêu đề — có vạch vàng kéo dài */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-800);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-4) var(--e-out) 120ms;
}
.is-in .eyebrow::before,
.is-visible .eyebrow::before,
.eyebrow.is-in::before { transform: scaleX(1); }
/* Cùng danh sách vùng nền tối như trên. --gold-800 là màu của nền SÁNG; bỏ
   sót .site-footer / .cta-final ở đây thì nhãn ở chân trang tụt còn 2.29:1. */
.section-dark .eyebrow, .section-dark-2 .eyebrow, .hero .eyebrow,
.hero-cinema .eyebrow, .page-head .eyebrow, .cta-final .eyebrow,
.site-footer .eyebrow, .mobile-nav .eyebrow, .on-dark .eyebrow {
  color: var(--gold-400);
}

/* Vạch khói nhỏ trước tiêu đề (giữ từ bản cũ, đổi màu) */
.smoke-rule {
  width: 3.5rem;
  height: 0.9rem;
  overflow: visible;
  margin-bottom: var(--sp-4);
}
.smoke-rule path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 1500ms var(--e-out);
}
.is-visible .smoke-rule path, .is-in .smoke-rule path { stroke-dashoffset: 0; }

/* ==========================================================================
   HỆ CHUYỂN ĐỘNG KHI CUỘN
   Chỉ ẩn phần tử khi JS đã bật (html.anim) — không có JS thì mọi thứ vẫn hiện.
   ========================================================================== */
html.anim [data-anim] {
  opacity: 0;
  transition:
    opacity var(--t-4) var(--e-soft),
    transform var(--t-4) var(--e-soft),
    filter var(--t-4) var(--e-soft);
  transition-delay: var(--anim-delay, 0ms);
}
html.anim [data-anim="fade-up"]    { transform: translate3d(0, 1.75rem, 0); }
html.anim [data-anim="fade-down"]  { transform: translate3d(0, -1.25rem, 0); }
html.anim [data-anim="fade-left"]  { transform: translate3d(-2rem, 0, 0); }
html.anim [data-anim="fade-right"] { transform: translate3d(2rem, 0, 0); }
html.anim [data-anim="scale-in"]   { transform: scale(.955); }
html.anim [data-anim="blur-in"]    { filter: blur(9px); transform: translate3d(0, .9rem, 0); }
html.anim [data-anim="fade"]       { transform: none; }

/* --- Bộ chuyển động mở rộng -------------------------------------------
   Trước đây 38/48 hiệu ứng toàn site là "fade-up", cuộn đến đâu cũng một
   kiểu nên rất đơn điệu. Các kiểu dưới đây để phân vai theo loại nội dung:
   ảnh mở theo rèm, tiêu đề lớn trôi chậm, thẻ nghiêng nhẹ, ảnh sản phẩm
   lắng lại từ cỡ lớn. Tất cả chỉ đụng transform/opacity/filter/clip-path
   nên không gây dựng lại bố cục. */

/* Ảnh: mở như kéo rèm từ dưới lên, kèm nhích ảnh cho có quán tính */
html.anim [data-anim="clip-up"] {
  clip-path: inset(18% 0 0 0);
  transform: translate3d(0, 1rem, 0);
  transition-property: opacity, transform, clip-path;
}
/* Ảnh: lau ngang — dùng xen kẽ với clip-up để hai khối ảnh liền nhau
   không mở giống hệt nhau */
html.anim [data-anim="clip-wipe"] {
  clip-path: inset(0 22% 0 0);
  transition-property: opacity, transform, clip-path;
}
html.anim [data-anim="clip-up"].is-in,
html.anim [data-anim="clip-wipe"].is-in { clip-path: inset(0 0 0 0); }

/* Tiêu đề lớn / câu tuyên ngôn: đi xa hơn và chậm hơn fade-up */
html.anim [data-anim="rise"] {
  transform: translate3d(0, 3rem, 0);
  transition-duration: var(--t-5, 1100ms);
}

/* Thẻ: nghiêng rất nhẹ rồi thẳng lại — tạo cảm giác vật thể có bề dày */
html.anim [data-anim="tilt-in"] {
  transform: perspective(900px) rotateX(7deg) translate3d(0, 1.5rem, 0);
  transform-origin: 50% 100%;
}

/* Ảnh sản phẩm: bắt đầu hơi lớn rồi lắng về đúng cỡ, không xê dịch vị trí */
html.anim [data-anim="settle"] { transform: scale(1.06); }

/* Chỉ tan nét mờ, không dịch chuyển — cho ảnh chân dung/sản phẩm */
html.anim [data-anim="unblur"] { filter: blur(12px); transform: scale(1.02); }

html.anim [data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Mobile: rút ngắn quãng đường và bỏ các kiểu nặng.
   clip-path và blur tốn công vẽ lại trên máy yếu — trên điện thoại hạ về
   dịch chuyển + mờ dần, vẫn có nhịp nhưng chắc chắn mượt. */
@media (max-width: 47.99rem) {
  html.anim [data-anim="fade-up"]    { transform: translate3d(0, 1.1rem, 0); }
  html.anim [data-anim="rise"]       { transform: translate3d(0, 1.4rem, 0); transition-duration: var(--t-4); }
  html.anim [data-anim="fade-left"],
  html.anim [data-anim="fade-right"] { transform: translate3d(0, 1.1rem, 0); }
  html.anim [data-anim="tilt-in"]    { transform: translate3d(0, 1.1rem, 0); }
  html.anim [data-anim="clip-up"],
  html.anim [data-anim="clip-wipe"]  { clip-path: none; transform: translate3d(0, 1.1rem, 0); }
  html.anim [data-anim="unblur"]     { filter: none; transform: scale(1.02); }
  html.anim [data-anim="blur-in"]    { filter: none; transform: translate3d(0, 1.1rem, 0); }
}

/* ==========================================================================
   CHIỀU SÂU & CHUYỂN ĐỘNG NỀN
   Mỗi hiệu ứng dưới đây có một việc cụ thể, không phải trang trí:
   vệt sáng = hướng mắt vào thẻ đang trỏ; thở bóng = giữ sản phẩm "sống";
   phóng chậm = tạo chiều sâu cho ảnh lớn.
   ========================================================================== */

/* Vệt sáng vàng quét qua thẻ khi rê chuột — rất nhạt, chỉ một lượt */
.p-card, .cat-card, .price-card { position: relative; overflow: hidden; }
.p-card::after, .cat-card::after, .price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(217,180,108,.20) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 1100ms var(--e-soft);
}
.p-card:hover::after, .cat-card:hover::after, .price-card:hover::after {
  transform: translateX(130%);
}

/* Ảnh sản phẩm nhích lên cùng thẻ — nhấn mạnh chứ không che sản phẩm */
.p-card .image-frame img { transition: transform 900ms var(--e-soft); }
.p-card:hover .image-frame img { transform: scale(1.045); }

/* Thẻ sản phẩm nổi hẳn lên khi trỏ vào */
.p-card { transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out), border-color var(--t-2) var(--e-soft); }

/* Bóng "thở" — dùng cho khối sản phẩm nổi bật, chu kỳ rất chậm */
@keyframes shadow-breathe {
  from { box-shadow: 0 14px 30px rgba(44,32,24,.10); }
  to   { box-shadow: 0 26px 60px rgba(44,32,24,.20); }
}
.breathe { animation: shadow-breathe 7s ease-in-out infinite alternate; }

/* Phóng chậm cho ảnh lớn — biên độ 3%, chu kỳ 24s, gần như không nhận ra
   nhưng đủ để ảnh không "chết" trên màn hình */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}
.zoom-slow img, img.zoom-slow {
  animation: slow-zoom 24s ease-in-out infinite alternate;
}

/* Vệt sáng chạy dọc vạch vàng khi vạch lọt vào khung nhìn */
@keyframes rule-sweep {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
.gold-rule.is-in {
  background-image: linear-gradient(90deg, transparent, var(--gold-300, var(--gold-400)), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: rule-sweep 2.4s var(--e-soft) 240ms 1 both;
}

/* Đường viền vàng sáng lên khi trỏ vào thẻ nổi bật */
.card::before { transition: opacity var(--t-3) var(--e-soft); }

/* Điện thoại: tắt mọi vòng lặp chạy liên tục. Chúng chiếm CPU suốt thời
   gian cuộn mà mắt gần như không thấy trên màn hình nhỏ. */
@media (max-width: 47.99rem) {
  .breathe, .zoom-slow img, img.zoom-slow, .gold-rule.is-in { animation: none; }
  .p-card::after, .cat-card::after, .price-card::after { display: none; }
}

/* ==========================================================================
   HỆ CHUYỂN ĐỘNG LƠ LỬNG (AMBIENT FLOATING)
   Mỗi hạt dùng BA animation riêng trên BA thuộc tính riêng — translate,
   rotate, scale — với ba chu kỳ lệch nhau (số nguyên tố). Vì ba chu kỳ không
   chia hết cho nhau, quỹ đạo tổng hợp gần như không lặp lại: đó là cách tạo
   chuyển động "tự nhiên" mà không cần JS tính từng khung hình.
   Dùng thuộc tính translate/rotate/scale rời (không phải transform gộp) để
   ba animation không ghi đè lẫn nhau.
   ========================================================================== */
.amb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* BẮT BUỘC: không bao giờ chặn nút/link/chữ */
  z-index: 0;
}
/* Nội dung phải nằm TRÊN lớp hạt.
   Hầu hết .container đang là position:static — mà phần tử ĐỊNH VỊ (lớp hạt)
   luôn vẽ đè lên nội dung không định vị cùng ngữ cảnh, nên nếu không nâng
   thì hạt bay ngang qua trước mặt chữ. Lớp hạt luôn được chèn TRƯỚC nội dung
   nên bộ chọn anh-em sau (~) bắt đúng mọi thứ cần nâng. */
.amb ~ * { position: relative; z-index: 1; }
.amb i {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 110%);
  width: var(--size, 10px);
  height: var(--size, 10px);
  opacity: 0;
  will-change: translate, rotate;
  animation:
    amb-rise var(--dur, 29s) ease-in-out var(--delay, 0s) infinite,
    amb-sway var(--sway, 11s) ease-in-out var(--delay, 0s) infinite alternate,
    amb-turn var(--spin, 17s) linear var(--delay, 0s) infinite;
}
/* Bay lên chậm, mờ dần ở hai đầu hành trình */
@keyframes amb-rise {
  0%   { translate: 0 0;                    opacity: 0; }
  12%  {                                    opacity: var(--peak, .5); }
  88%  {                                    opacity: var(--peak, .5); }
  100% { translate: 0 calc(var(--travel, -120vh)); opacity: 0; }
}
/* Đung đưa ngang — chu kỳ lệch hẳn với nhịp bay lên */
@keyframes amb-sway {
  from { rotate: calc(var(--tilt, 6deg) * -1); }
  to   { rotate: var(--tilt, 6deg); }
}
/* Nhịp phồng xẹp rất nhẹ, chu kỳ thứ ba */
@keyframes amb-turn {
  0%, 100% { scale: .96; }
  50%      { scale: 1.04; }
}

/* --- Cánh sen: hình giọt bất đối xứng, vàng chuyển sắc --- */
.amb-petal i {
  border-radius: 60% 0 60% 0;
  background: linear-gradient(135deg, rgba(217,180,108,.85), rgba(198,150,63,.35));
  filter: blur(.2px);
}
/* --- Hạt vàng li ti: chỉ là chấm sáng, phải nhìn kỹ mới thấy --- */
.amb-dust i {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,223,187,.95), rgba(217,180,108,0) 70%);
}
/* --- Lá thảo mộc: dài hơn, xanh trầm, dùng ở khối hương liệu --- */
.amb-leaf i {
  border-radius: 0 70% 0 70%;
  background: linear-gradient(140deg, rgba(142,162,151,.5), rgba(94,125,106,.18));
}

/* --- Vầng sáng nền trôi rất chậm (20-60s) --- */
.amb-glow::before,
.amb-glow::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: translate;
}
.amb-glow::before {
  left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(194,160,92,.30), transparent 70%);
  animation: amb-glow-a 44s ease-in-out infinite alternate;
}
.amb-glow::after {
  right: 2%; bottom: 4%;
  background: radial-gradient(circle, rgba(94,125,106,.22), transparent 70%);
  animation: amb-glow-b 61s ease-in-out infinite alternate;
}
@keyframes amb-glow-a { from { translate: 0 0; } to { translate: 14% 9%; } }
@keyframes amb-glow-b { from { translate: 0 0; } to { translate: -11% -7%; } }

/* Lớp trang trí phản ứng chuột — JS ghi --mx/--my, ở đây chỉ dịch vài px */
.amb[data-mouse] {
  translate: calc(var(--mx, 0) * var(--depth, 6px)) calc(var(--my, 0) * var(--depth, 6px));
  transition: translate 900ms cubic-bezier(.22,.61,.36,1);
}

/* Thẻ nổi: nhô lên hạ xuống 2px, chu kỳ dài */
@keyframes card-float {
  0%, 100% { translate: 0 2px; }
  50%      { translate: 0 -2px; }
}
.float-card { animation: card-float 7.5s ease-in-out infinite; }

/* MOBILE: bỏ hẳn vầng sáng nhoè (blur 60px rất tốn công vẽ) và phản ứng
   chuột. Số hạt do JS giảm riêng. */
@media (max-width: 47.99rem) {
  .amb-glow::before, .amb-glow::after { display: none; }
  .amb[data-mouse] { translate: none; }
  .float-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .amb { display: none !important; }
  .float-card { animation: none !important; }
}

/* Lớp cũ vẫn dùng được, ánh xạ sang hệ mới */
html.anim .reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity var(--t-4) var(--e-soft), transform var(--t-4) var(--e-soft);
  transition-delay: var(--anim-delay, 0ms);
}
html.anim .reveal.is-visible { opacity: 1; transform: none; }
html.anim .reveal-stagger { transition-delay: calc(var(--stagger-i, 0) * var(--anim-stagger)); }

/* ==========================================================================
   NÚT
   ========================================================================== */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 1rem 1.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: var(--bw-1) solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-2) var(--e-out),
    box-shadow var(--t-2) var(--e-out),
    background-color var(--t-2) var(--e-soft),
    border-color var(--t-2) var(--e-soft),
    color var(--t-2) var(--e-soft);
}
/* Vệt sáng quét ngang khi hover */
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.32) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform 900ms var(--e-soft);
}
.button:hover::after { transform: translateX(120%); }
.button:active { transform: translateY(1px) scale(.99); transition-duration: 90ms; }

/* Nút chính của cả site. Bản cũ là chữ kem trên gradient gold-500 -> gold-700:
   ở đầu SÁNG của gradient chỉ còn 2.44:1, dưới xa chuẩn AA — mà đây lại là
   nút xuất hiện trên mọi trang.
   Đảo lại thành chữ nâu đậm trên nền vàng sáng hơn: 9.32:1 ở đầu sáng và
   6.83:1 ở đầu tối. Đây cũng đúng lối "dập nhũ vàng" — mực đậm trên nền vàng. */
.button-ember,
.button-gold {
  background: linear-gradient(160deg, var(--gold-400), var(--gold-500));
  color: var(--wood-900);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
}
.button-ember:hover, .button-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.button-outline {
  background: rgba(255,255,255,.4);
  border-color: var(--line-2);
  color: var(--ink);
  backdrop-filter: blur(2px);
}
.button-outline:hover {
  border-color: var(--gold-500);
  color: var(--gold-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
/* DANH SÁCH VÙNG NỀN TỐI — phải khớp y hệt danh sách ở khối --c-heading
   phía trên. Trước đây danh sách này bị chép thiếu .cta-final, .site-footer
   và .hero-cinema, nên nút viền ở khối kêu gọi cuối trang và ở chân trang
   vẫn dùng nền trắng 40% + chữ --ink của nền sáng: chỉ còn 3.1:1. */
.section-dark .button-outline, .section-dark-2 .button-outline,
.hero .button-outline, .hero-cinema .button-outline, .page-head .button-outline,
.cta-final .button-outline, .site-footer .button-outline,
.mobile-nav .button-outline, .on-dark .button-outline {
  background: rgba(255,255,255,.06);
  border-color: rgba(214,188,133,.45);
  color: var(--on-dark);
}
.section-dark .button-outline:hover, .section-dark-2 .button-outline:hover,
.hero .button-outline:hover, .hero-cinema .button-outline:hover,
.page-head .button-outline:hover, .cta-final .button-outline:hover,
.site-footer .button-outline:hover, .mobile-nav .button-outline:hover,
.on-dark .button-outline:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.button-ghost {
  background: transparent;
  color: var(--ink-2);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-base);
}
.button-ghost .icon { transition: transform var(--t-2) var(--e-out); }
.button-ghost:hover { color: var(--gold-800); }
.button-ghost:hover .icon { transform: translateX(4px); }
/* --ink-2 là màu chữ của nền SÁNG. Đặt nguyên nó lên khối nền tối cho tương
   phản 1.82:1 — gần như vô hình. Phải đổi sang bộ màu của nền tối. */
.section-dark .button-ghost, .section-dark-2 .button-ghost,
.hero .button-ghost, .hero-cinema .button-ghost, .page-head .button-ghost,
.cta-final .button-ghost, .site-footer .button-ghost,
.mobile-nav .button-ghost, .on-dark .button-ghost {
  color: var(--on-dark-2);
}
.section-dark .button-ghost:hover, .section-dark-2 .button-ghost:hover,
.hero .button-ghost:hover, .hero-cinema .button-ghost:hover,
.page-head .button-ghost:hover, .cta-final .button-ghost:hover,
.site-footer .button-ghost:hover, .mobile-nav .button-ghost:hover,
.on-dark .button-ghost:hover { color: var(--gold-400); }

.button-block { width: 100%; }
.button-sm { padding: .7rem 1.3rem; font-size: var(--fs-xs); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(44, 32, 24, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--bw-1) solid rgba(214,188,133,.16);
  transition: background var(--t-3) var(--e-soft), box-shadow var(--t-3) var(--e-soft),
              border-color var(--t-3) var(--e-soft);
}
.site-header.is-scrolled {
  background: rgba(44, 32, 24, .95);
  box-shadow: 0 10px 34px rgba(30,20,14,.28);
  border-bottom-color: rgba(214,188,133,.26);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h-sm);
}
@media (min-width: 64rem) { .header-inner { height: var(--header-h); } }

/* flex: none + nowrap: ở quanh 1024px (đúng ngưỡng bật thanh điều hướng) khối
   tên bị bóp lại còn ~97px, làm cả "Kim Tâm Cát" lẫn dòng tên người tư vấn
   gãy thành hai dòng. Tên thương hiệu thì không được phép xuống dòng. */
.brand-mark { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand-name, .brand-tagline { white-space: nowrap; }
.brand-glyph {
  width: 2.6rem; height: 2.6rem; flex: none;
  object-fit: contain;
  transition: transform var(--t-3) var(--e-out);
}
.brand-mark:hover .brand-glyph { transform: translateY(-2px) rotate(-4deg); }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  color: var(--on-dark);
  line-height: 1.15;
}
.brand-tagline {
  display: none;
  font-size: var(--fs-xs);
  /* Header là lớp mờ 82% nên nền dưới nó thay đổi theo khối đang cuộn qua.
     Ở khối nền sáng, --on-dark-3 chỉ còn 4.03:1 — dưới AA. --on-dark-2 giữ
     5.78:1 ở cả trường hợp xấu nhất. */
  color: var(--on-dark-2);
  letter-spacing: var(--ls-wide);
}
@media (min-width: 30rem) { .brand-tagline { display: block; } }

.main-nav { display: none; }
@media (min-width: 64rem) {
  /* Khoảng cách co theo bề rộng: ở đúng 1024px (ngưỡng bật thanh này) khoảng
     cách cố định sp-8 làm các mục bị bóp và gãy thành hai dòng. */
  .main-nav { display: flex; align-items: center; gap: clamp(1rem, 0.1rem + 1.4vw, 2rem); }
  /* CHỈ các mục ở hàng ngang trên cùng mới cấm xuống dòng.
     Đặt nowrap lên ".main-nav a" thì nó kế thừa xuống cả menu thả xuống —
     phần mô tả từng ngành hàng bị ép thành một dòng và tràn đè sang ô bên
     cạnh. Dùng dấu ">" để chặn ở đúng một cấp. */
  .main-nav > a,
  .nav-mega > a { white-space: nowrap; }
  .main-nav a {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--on-dark-2);
    padding: .45rem 0;
    transition: color var(--t-2) var(--e-soft);
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-3) var(--e-out);
  }
  .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--on-dark); }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-circle);
  border: var(--bw-1) solid rgba(214,188,133,.28);
  color: var(--on-dark);
  transition: border-color var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft),
              transform var(--t-2) var(--e-out), background var(--t-2) var(--e-soft);
}
.cart-button:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(214,188,133,.08);
  transform: translateY(-2px);
}
.cart-badge {
  position: absolute;
  top: -0.35rem; right: -0.35rem;
  min-width: 1.2rem; height: 1.2rem;
  padding: 0 0.28rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-500);
  color: var(--wood-900);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  border-radius: var(--r-circle);
  visibility: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cart-badge.has-items { visibility: visible; animation: badge-pop 420ms var(--e-out); }
@keyframes badge-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.header-call {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: .65rem 1.25rem;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, var(--gold-500), var(--gold-700));
  color: var(--cream);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-inset-top);
  transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.header-call:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
@media (min-width: 64rem) { .header-call { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  color: var(--on-dark);
  border-radius: var(--r-circle);
  transition: background var(--t-2) var(--e-soft);
}
.nav-toggle:hover { background: rgba(255,255,255,.07); }
@media (min-width: 64rem) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 70;
  background-color: var(--wood-900);
  background-image:
    radial-gradient(120% 60% at 80% 0%, rgba(194,160,92,.14), transparent 60%),
    var(--drum-scrim),
    var(--drum-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* fixed ở lớp cuối (ảnh trống đồng): neo ảnh theo khung nhìn thay vì theo
     từng khối, để hoa văn nối liền mạch giữa các khối kề nhau — xem chú
     thích đầy đủ tại .section-dark bên dưới. */
  background-attachment: scroll, scroll, fixed;
  display: flex;
  flex-direction: column;
  /* Chừa thêm ở đáy cho vạch home của iPhone */
  padding: var(--sp-6) var(--container-pad);
  padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));
  /* Danh sách trang cao hơn màn hình trên máy nhỏ (987px nội dung / 812px
     màn hình). Để overflow visible thì mấy mục cuối bị cắt và không cuộn
     tới được. overscroll-behavior giữ cho việc cuộn không lan ra trang nền. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100vh);
  visibility: hidden;
  transition: transform var(--t-3) var(--e-soft), visibility 0s linear var(--t-3);
}
.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-3) var(--e-out);
}
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.mobile-nav-top .brand-name { color: var(--on-dark); }
.mobile-nav-top button { color: var(--on-dark); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: var(--bw-1) solid rgba(214,188,133,.14);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--on-dark);
  transition: color var(--t-2) var(--e-soft), padding-left var(--t-2) var(--e-out);
}
.mobile-nav nav a:hover, .mobile-nav nav a[aria-current="page"] {
  color: var(--gold-400);
  padding-left: var(--sp-2);
}
.mobile-nav-foot { margin-top: auto; padding-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 64rem) { .mobile-nav { display: none; } }

/* ==========================================================================
   SECTION — chuyển tiếp màu mềm, không cắt khối
   ========================================================================== */
.section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}
.section-sm { padding: var(--section-y-sm) 0; }

.section-paper {
  background-color: var(--cream);
  background-image: var(--drum-veil-cream), var(--drum-image-light);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}
.section-ash {
  background-color: var(--beige);
  background-image: var(--drum-veil-sand), var(--drum-image-light);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

/* Khối nâu gỗ — vòm cong hữu cơ ở trên và dưới, ánh sáng vàng phía sau.
   margin-top ÂM PHẢI ÍT NHẤT BẰNG bán kính dọc của border-radius (3.5rem).
   Ở hai mép ngoài cùng (x=0 và x=100%), vòm còn PHẲNG — nó chỉ bắt đầu cong
   từ y = bán_kính_dọc trở lên. Nếu margin-top kéo lên ít hơn bán kính đó
   (bản cũ chỉ -2.5rem, thiếu 1rem), đúng đoạn phẳng ấy sẽ lộ ra một khe nhỏ
   thấy màu khối phía trên ở sát hai mép — chỉ khuất ở giữa nơi vòm đã cong.
   Padding-top cộng thêm đúng bằng số đã trừ để nội dung không bị đẩy lệch. */
.section-dark, .section-dark-2 {
  color: var(--on-dark);
  border-radius: 50% 50% 0 0 / 3.5rem 3.5rem 0 0;
  margin-top: -3.6rem;
  padding-top: calc(var(--section-y) + 3.6rem);
}
/* Thứ tự lớp: quầng sáng ấm → lớp phủ màu → ảnh trống đồng.
   background-size/position/repeat phải có đúng số giá trị bằng số lớp ảnh.

   VỀ background-attachment: fixed trên lớp ảnh trống đồng
   Mỗi khối (.section-dark, .section-ash, .cta-final, footer...) trước đây tự
   "cover" ảnh theo chiều cao RIÊNG của nó — khối cao và khối thấp co giãn
   ảnh khác nhau, nên đúng chỗ vòm cong nối hai khối, hoa văn bị lệch pha,
   nhìn như "gãy mí". Đổi lớp ảnh (không phải lớp màu) sang fixed: ảnh được
   neo theo khung nhìn (viewport), mỗi khối chỉ là một "ô cửa sổ" hé lộ đúng
   phần ảnh tại vị trí nó đang đứng trên màn hình — hai khối kề nhau vì vậy
   luôn hé đúng phần ảnh tiếp giáp nhau, mí khớp tuyệt đối ở mọi vị trí cuộn.
   Tắt lại trên mobile (xem khối responsive) vì nhiều trình duyệt di động xử
   lý fixed-background không mượt. */
.section-dark {
  background-color: var(--wood-900);
  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(194,160,92,.16), transparent 62%),
    radial-gradient(70% 60% at 85% 100%, rgba(120,86,42,.14), transparent 65%),
    var(--drum-scrim),
    var(--drum-image);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, fixed;
}
.section-dark-2 {
  background-color: var(--wood-800);
  background-image:
    radial-gradient(80% 50% at 20% 0%, rgba(194,160,92,.13), transparent 60%),
    var(--drum-scrim),
    var(--drum-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}
/* Khối tiếp ngay sau vùng tối được kéo lên để bờ cong ăn vào nhau */
.section-dark + .section,
.section-dark-2 + .section {
  border-radius: 50% 50% 0 0 / 3rem 3rem 0 0;
  margin-top: -3.1rem;
  padding-top: calc(var(--section-y) + 3.1rem);
}

/* Lá thảo mộc góc — đã bỏ theo yêu cầu (trùng với hoạ tiết trống đồng làm
   rối góc). Giữ lại class .section-deco trong HTML cho an toàn, chỉ tắt
   hiệu ứng ở đây — không cần sửa từng trang. */

.section-head { max-width: 44rem; margin-bottom: var(--sp-12); }
.section-head-center { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }
.section-head-center .eyebrow { justify-content: center; }
.section-head h2 { margin-top: var(--sp-4); }
.section-head p { margin-top: var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-relaxed); }

.split { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.split > * { flex: 1 1 22rem; min-width: 0; }
.split-reverse { flex-direction: row-reverse; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0 var(--sp-24);
  color: var(--on-dark);
  background:
    radial-gradient(70% 55% at 78% 28%, rgba(194,160,92,.20), transparent 62%),
    radial-gradient(90% 70% at 10% 90%, rgba(120,86,42,.16), transparent 60%),
    linear-gradient(165deg, var(--wood-800) 0%, var(--wood-900) 60%, #241a13 100%);
}
/* Ánh sáng chậm trôi phía sau sản phẩm */
.hero-glow {
  position: absolute;
  top: 8%; right: 4%;
  width: min(38rem, 90vw);
  height: min(38rem, 90vw);
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(214,188,133,.26), rgba(214,188,133,.06) 45%, transparent 70%);
  pointer-events: none;
  filter: blur(6px);
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  100% { transform: translate3d(-3%, 4%, 0) scale(1.08); opacity: 1; }
}

/* Bụi sáng bay rất chậm */
.hero-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-motes span {
  position: absolute;
  bottom: -10%;
  width: 4px; height: 4px;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(236,222,192,.85), rgba(236,222,192,0) 70%);
  animation: mote-rise linear infinite;
}
.hero-motes span:nth-child(1) { left: 12%; animation-duration: 26s; animation-delay: 0s; }
.hero-motes span:nth-child(2) { left: 28%; animation-duration: 34s; animation-delay: -6s; width: 3px; height: 3px; }
.hero-motes span:nth-child(3) { left: 47%; animation-duration: 30s; animation-delay: -13s; }
.hero-motes span:nth-child(4) { left: 63%; animation-duration: 38s; animation-delay: -4s; width: 5px; height: 5px; }
.hero-motes span:nth-child(5) { left: 79%; animation-duration: 28s; animation-delay: -18s; width: 3px; height: 3px; }
.hero-motes span:nth-child(6) { left: 90%; animation-duration: 36s; animation-delay: -9s; }
@keyframes mote-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .75; }
  85%  { opacity: .5; }
  100% { transform: translate3d(2.5rem, -105vh, 0); opacity: 0; }
}

.hero-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: var(--sp-12);
  align-items: center;
}
.hero-copy { flex: 1 1 26rem; }
.hero-media { flex: 1 1 20rem; }
.hero h1 { margin: var(--sp-5) 0 var(--sp-6); }
.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
}
.hero-lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 33rem;
  margin-bottom: var(--sp-10);
  color: var(--on-dark-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Khung sản phẩm — trôi rất nhẹ, có quầng sáng và viền vàng mảnh */
.hero-frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: var(--bw-1) solid rgba(214,188,133,.28);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(194,160,92,.14);
  animation: float-soft 9s ease-in-out infinite;
}
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(30,21,15,.6));
  pointer-events: none;
}
.hero-frame-tag {
  position: absolute;
  left: var(--sp-6); bottom: var(--sp-6);
  z-index: 1;
  color: var(--on-dark);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
@media (min-width: 64rem) { .hero { padding: var(--sp-24) 0; } }

/* Thẻ nổi đè lên góc ảnh hero — tạo lớp và chiều sâu (nổi/chìm) */
.hero-media { position: relative; }
.hero-frame-float {
  position: absolute;
  left: var(--sp-6);
  bottom: calc(-1 * var(--sp-8));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(28,19,11,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--bw-1) solid rgba(214,188,133,.3);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-lg);
  max-width: 15rem;
  animation: float-soft 9s ease-in-out infinite;
  animation-delay: -3s;
}
.hero-frame-float img { width: 2.15rem; height: 2.15rem; flex: none; object-fit: contain; }
.hero-frame-float strong {
  display: block; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); color: var(--on-dark); line-height: 1.3;
}
.hero-frame-float span { display: block; font-size: .72rem; color: var(--on-dark-3); letter-spacing: var(--ls-wide); margin-top: .15rem; }
@media (max-width: 47.99rem) { .hero-frame-float { animation: none; } }

/* ==========================================================================
   KHUNG ẢNH
   ========================================================================== */
.image-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: var(--bw-1) solid var(--line);
  box-shadow: var(--shadow-sm);
  aspect-ratio: var(--ratio, 4/3);
  transition: box-shadow var(--t-3) var(--e-out), transform var(--t-3) var(--e-out);
}
.image-frame:hover { box-shadow: var(--shadow-md); }
.section-dark .image-frame, .section-dark-2 .image-frame, .on-dark .image-frame {
  border-color: rgba(214,188,133,.2);
}
.image-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--e-soft);
}
.image-frame:hover img { transform: scale(1.05); }
.image-frame-portrait { --ratio: 4/5; }
.image-frame-square { --ratio: 1/1; }
.image-frame-wide { --ratio: 16/9; }
/* Khung riêng cho thẻ sản phẩm: 4/3 — ảnh vẫn lớn như khung ngang nhưng cắt
   ít hơn nhiều. Ảnh sản phẩm ở đây phần lớn chụp dọc (tỉ lệ ~0.67), khung
   16/9 cắt mất tới 62% chiều cao, khung 4/3 chỉ mất khoảng 27%. */
.image-frame-card { --ratio: 4/3; }
/* Khung cho ảnh dạng poster (có sẵn chữ/logo in trong ảnh): giữ đúng tỉ lệ
   gốc và dùng object-fit:contain để không cắt mất phần chữ ở mép. */
.image-frame-poster { --ratio: 904/1280; }
.image-frame-poster img { object-fit: contain; background: var(--beige); }
.figure-caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: var(--ls-wide);
}
.section-dark .figure-caption, .section-dark-2 .figure-caption,
.hero-cinema .figure-caption { color: var(--on-dark-3); }

/* Thẻ thay chỗ cho iframe bản đồ trong bản xem trước Claude Artifact — nơi
   iframe nhúng site khác bị chặn. Chỉ xuất hiện trong bản gộp, không có
   trên site thật (site thật vẫn dùng iframe Google Maps bình thường). */
.map-stub {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(158deg, var(--beige-2), var(--beige));
  color: var(--ink-2);
  transition: background var(--t-2) var(--e-soft);
}
.map-stub:hover { background-color: var(--beige-2); }
.map-stub .icon { width: 2.25rem; height: 2.25rem; color: var(--gold-600); }
.map-stub span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.map-stub small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-3); }

/* Khung chờ ảnh thật */
.media-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(158deg, var(--beige-2), var(--beige));
  color: var(--ink-3);
  text-align: center;
  padding: var(--sp-5);
}
.media-placeholder .icon { width: 2.5rem; height: 2.5rem; opacity: .45; }
.media-placeholder span { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); max-width: 15rem; }
.section-dark .media-placeholder, .section-dark-2 .media-placeholder, .hero .media-placeholder {
  background:
    radial-gradient(75% 55% at 50% 32%, rgba(214,188,133,.16), transparent 70%),
    linear-gradient(158deg, var(--wood-700), var(--wood-800));
  color: var(--on-dark-3);
}

/* ==========================================================================
   THẺ
   ========================================================================== */
.card-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.card {
  flex: 1 1 16rem;
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border: var(--bw-1) solid rgba(219,203,177,.7);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--t-3) var(--e-out), box-shadow var(--t-3) var(--e-out),
              border-color var(--t-3) var(--e-soft);
}
/* Highlight rất nhẹ chạy qua mép trên khi hover */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: 0;
  transition: opacity var(--t-3) var(--e-soft);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(194,160,92,.5);
}
.card:hover::before { opacity: 1; }
.section-dark .card, .section-dark-2 .card {
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border-color: rgba(214,188,133,.16);
}
.section-dark .card:hover, .section-dark-2 .card:hover { border-color: rgba(214,188,133,.4); }

.card-icon {
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-circle);
  background: linear-gradient(160deg, var(--gold-200), var(--beige));
  color: var(--gold-800);
  margin-bottom: var(--sp-5);
  transition: transform var(--t-3) var(--e-out);
}
.card:hover .card-icon, .split:hover > div > .card-icon { transform: translateY(-3px) rotate(-6deg); }
.section-dark .card-icon, .section-dark-2 .card-icon {
  background: rgba(214,188,133,.12);
  color: var(--gold-400);
}
/* Thẻ trong khối luôn đi sau một <h2>, nên về ngữ nghĩa phải là <h3> (nhảy
   thẳng xuống <h4> làm hỏng cây tiêu đề mà trình đọc màn hình dựa vào).
   Ở đây trả lại đúng cỡ chữ của cấp 4 để giao diện không đổi. */
.card h3, .step-body h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.card h3, .card h4 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ==========================================================================
   CÁC BƯỚC
   ========================================================================== */
.step-list { display: flex; flex-direction: column; }
.step-item {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: var(--bw-1) solid var(--line);
  transition: padding-left var(--t-3) var(--e-out);
}
.step-item:last-child { border-bottom: var(--bw-1) solid var(--line); }
.step-item:hover { padding-left: var(--sp-2); }
.section-dark .step-item, .section-dark-2 .step-item { border-color: rgba(214,188,133,.16); }
.step-num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  width: 2.8rem;
  line-height: 1.2;
  transition: color var(--t-3) var(--e-soft);
}
.step-item:hover .step-num { color: var(--gold-600); }
.section-dark .step-num { color: var(--on-dark-3); }
.section-dark .step-item:hover .step-num { color: var(--gold-400); }
.step-body h3, .step-body h4 { margin-bottom: var(--sp-2); }
.step-body p { font-size: var(--fs-sm); }

/* ==========================================================================
   BẢNG GIÁ
   ========================================================================== */
.price-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: stretch; }
.price-card {
  flex: 1 1 17rem;
  position: relative;
  background: linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: var(--bw-1) solid rgba(214,188,133,.18);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex; flex-direction: column;
  transition: transform var(--t-3) var(--e-out), box-shadow var(--t-3) var(--e-out),
              border-color var(--t-3) var(--e-soft);
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(214,188,133,.42);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.price-card-featured {
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(194,160,92,.16), transparent 65%),
    linear-gradient(168deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border-color: rgba(214,188,133,.5);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.price-tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--wood-900);
  background: linear-gradient(160deg, var(--gold-400), var(--gold-500));
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.price-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--on-dark);
  margin-bottom: var(--sp-3);
}
.price-amount { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.price-now {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--gold-400);
  font-weight: var(--fw-semibold);
}
.price-old { font-size: var(--fs-sm); color: var(--on-dark-3); text-decoration: line-through; }
.price-unit { font-size: var(--fs-xs); color: var(--on-dark-3); margin-bottom: var(--sp-8); letter-spacing: var(--ls-wide); }
.price-features { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); flex: 1; }
.price-features li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--on-dark-2); }
.price-features .icon { color: var(--gold-500); margin-top: .3em; }

/* ==========================================================================
   ĐÁNH GIÁ
   ========================================================================== */
.review-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.review-card {
  flex: 1 1 18rem;
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border: var(--bw-1) solid rgba(219,203,177,.7);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-3) var(--e-out), box-shadow var(--t-3) var(--e-out);
}
.review-card::before {
  content: "”";
  position: absolute;
  top: .5rem; right: 1.25rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold-400);
  opacity: .35;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-quote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.review-person { display: flex; align-items: center; gap: var(--sp-4); }
.review-avatar {
  width: 3rem; height: 3rem;
  border-radius: var(--r-circle);
  overflow: hidden; flex: none;
  border: var(--bw-1) solid var(--gold-400);
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.review-role { font-size: var(--fs-xs); color: var(--ink-3); }

/* Trạng thái chờ đánh giá thật */
.review-empty {
  border: var(--bw-1) dashed rgba(194,160,92,.45);
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  background: linear-gradient(165deg, rgba(255,255,255,.6), rgba(255,255,255,.25));
}
.review-empty .icon { width: 2.25rem; height: 2.25rem; color: var(--gold-500); margin: 0 auto var(--sp-4); }

/* ==========================================================================
   NHÃN NỘI DUNG MẪU
   ========================================================================== */
.sample-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--sage-600);
  background: rgba(133,148,122,.1);
  border: var(--bw-1) dashed rgba(109,124,97,.45);
  border-radius: var(--r-pill);
  padding: .3rem .8rem;
  margin-top: var(--sp-3);
}
.section-dark .sample-flag, .section-dark-2 .sample-flag {
  color: var(--sage-300);
  background: rgba(170,182,159,.09);
  border-color: rgba(170,182,159,.35);
}

/* ==========================================================================
   VẠCH KHÓI NGĂN SECTION
   ========================================================================== */
.section-divider {
  display: flex;
  justify-content: center;
  padding: var(--sp-4) 0;
  background: var(--cream);
  overflow: visible;
}
.section-divider svg { width: 7rem; height: 2.75rem; overflow: visible; }
.section-divider path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: .75;
  transition: stroke-dashoffset 1600ms var(--e-out);
}
.section-divider.is-visible path, .section-divider.is-in path { stroke-dashoffset: 0; }

/* ==========================================================================
   SẢN PHẨM
   ========================================================================== */
.product-block { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.product-media { flex: 1 1 22rem; }
.product-info { flex: 1 1 22rem; }
.product-price {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  color: var(--gold-700);
  margin-top: var(--sp-5);
}
.section-dark .product-price { color: var(--gold-400); }
.product-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.product-meta li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  border: var(--bw-1) solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: var(--r-pill);
  padding: .35rem .85rem;
}
.product-meta .icon { color: var(--gold-600); }

.qty-input {
  display: inline-flex;
  align-items: center;
  border: var(--bw-1) solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.qty-btn {
  width: 2.75rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--t-1) var(--e-soft), color var(--t-1) var(--e-soft);
}
.qty-btn:hover { background: var(--beige); color: var(--gold-800); }
.qty-value {
  width: 3rem; text-align: center;
  font-weight: var(--fw-semibold);
  height: 3rem;
  line-height: 3rem;
  font-variant-numeric: tabular-nums;
}
.add-cart-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-8); }

/* ==========================================================================
   GIỎ HÀNG
   ========================================================================== */
.cart-table { width: 100%; }
.cart-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: var(--bw-1) solid var(--line);
}
.cart-row-media {
  width: 5rem; height: 5rem; flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  border: var(--bw-1) solid var(--line);
}
.cart-row-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-info { flex: 1 1 12rem; min-width: 0; }
.cart-row-name { font-weight: var(--fw-semibold); }
.cart-row-price { font-size: var(--fs-sm); color: var(--ink-3); }
.cart-row-remove {
  color: var(--ink-3);
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-circle);
  transition: color var(--t-1) var(--e-soft), background var(--t-1) var(--e-soft);
}
.cart-row-remove:hover { color: #9c4a3c; background: rgba(156,74,60,.08); }
.cart-empty { text-align: center; padding: var(--sp-16) 0; color: var(--ink-2); }
.cart-summary {
  background: linear-gradient(165deg, var(--beige), var(--cream-2));
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
}
.cart-summary-row { display: flex; justify-content: space-between; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.cart-summary-total {
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: var(--sp-4) 0;
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--line-2);
}

/* ==========================================================================
   BIỂU MẪU
   ========================================================================== */
.form-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.form-field { flex: 1 1 15rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field-full { flex-basis: 100%; }
.form-field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.form-field input, .form-field select, .form-field textarea {
  padding: .95rem 1.1rem;
  border-radius: var(--r-md);
  border: var(--bw-1) solid var(--line-2);
  background: var(--white);
  font-size: var(--fs-base);
  transition: border-color var(--t-2) var(--e-soft), box-shadow var(--t-2) var(--e-soft);
}
.section-dark .form-field input, .section-dark .form-field select, .section-dark .form-field textarea,
.section-dark-2 .form-field input, .section-dark-2 .form-field select, .section-dark-2 .form-field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(214,188,133,.22); color: var(--on-dark);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(194,160,92,.14);
}
.form-field textarea { min-height: 7.5rem; resize: vertical; }
.form-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-1); }
.section-dark .form-note, .section-dark-2 .form-note { color: var(--on-dark-3); }
.form-error { font-size: var(--fs-sm); color: #b0503f; min-height: 1.2em; margin-top: var(--sp-3); }
.channel-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  border: var(--bw-1) solid rgba(214,188,133,.22);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  transition: border-color var(--t-2) var(--e-soft), background var(--t-2) var(--e-soft);
}
.section-paper .faq-item, .section-ash .faq-item {
  background: rgba(255,255,255,.7);
  border-color: var(--line);
}
.faq-item[data-open="true"] { border-color: rgba(214,188,133,.5); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-weight: var(--fw-semibold);
  transition: color var(--t-2) var(--e-soft);
}
.faq-q:hover { color: var(--gold-500); }
.section-paper .faq-q:hover, .section-ash .faq-q:hover { color: var(--gold-800); }
.faq-q .icon { transition: transform var(--t-3) var(--e-out); color: var(--gold-500); }
.faq-item[data-open="true"] .faq-q .icon { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-4) var(--e-soft);
  padding: 0 var(--sp-6);
}
.faq-item[data-open="true"] .faq-a { padding-bottom: var(--sp-6); }
.faq-a p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
/* Bảng thả xuống neo theo KHUNG NỘI DUNG của header, không neo theo chữ
   "Sản phẩm". Neo theo chữ thì bảng rộng 928px bị canh giữa quanh x=413 —
   tràn ra ngoài mép trái màn hình 51px và chừa một mảng trống bên phải,
   nhìn như bị vỡ. Khung nội dung luôn nằm gọn trong màn hình nên không thể
   tràn. */
.header-inner { position: relative; }
.nav-mega { display: inline-flex; }
.nav-mega > a { display: inline-flex; align-items: center; gap: .35rem; }
.nav-caret { width: .85em; height: .85em; transition: transform var(--t-2) var(--e-out); }
.nav-mega:hover .nav-caret { transform: rotate(180deg); }
.mega-panel {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, .5rem);
  width: min(58rem, 100%);
  padding-top: 1.1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-2) var(--e-soft), transform var(--t-2) var(--e-out), visibility 0s linear var(--t-2);
}
.nav-mega:hover .mega-panel, .nav-mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity var(--t-2) var(--e-soft), transform var(--t-2) var(--e-out);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .35rem;
  padding: 1rem;
  background: var(--cream);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.mega-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem;
  border-radius: var(--r-md);
  transition: background var(--t-1) var(--e-soft);
}
.mega-item:hover { background: var(--beige); }
.mega-ico {
  flex: none;
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-circle);
  background: var(--gold-200);
  color: var(--gold-800);
}
.mega-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mega-name {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink);
}
.mega-name em {
  font-style: normal; font-size: .7rem; font-weight: var(--fw-bold);
  color: var(--gold-800); background: var(--gold-200);
  padding: 0 .35rem; border-radius: var(--r-pill);
}
/* Chốt chặn: dù sau này có ai đặt nowrap ở cấp trên thì nội dung trong bảng
   thả xuống vẫn được phép xuống dòng. */
.mega-panel, .mega-panel * { white-space: normal; }
.mega-desc { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
/* Phải kèm .main-nav: chọn bằng ".mega-all" trơn thì bị ".main-nav a" (đặc
   hiệu cao hơn) đè, và link này nhận màu chữ của nền TỐI trong khi panel có
   nền kem — chỉ còn 1.43:1, gần như không đọc được. */
.main-nav .mega-all {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .35rem; padding: .75rem;
  border-top: var(--bw-1) solid var(--line);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--gold-800);
}
.main-nav .mega-all:hover { color: var(--wood-900); }

.mobile-subnav { display: flex; flex-direction: column; padding: 0 0 .5rem .9rem; }
.mobile-subnav a {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  padding: .55rem 0 !important;
  color: var(--on-dark-3) !important;
  border-bottom: none !important;
}
.mobile-subnav a:hover { color: var(--gold-400) !important; }

/* ==========================================================================
   LƯỚI SẢN PHẨM
   ========================================================================== */
/* Thẻ to hơn hẳn: tối thiểu 21rem thay vì 15rem, để ảnh sản phẩm đủ lớn
   và phần chữ (giá, mô tả, gạch đầu dòng) có chỗ thở. */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--sp-8);
}
@media (max-width: 30rem) { .p-grid { grid-template-columns: 1fr; } }
.p-card {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-3) var(--e-out), box-shadow var(--t-3) var(--e-out), border-color var(--t-3) var(--e-soft);
}
.p-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(177,138,82,.45);
}
.p-card-media { display: block; }
.p-card-media .image-frame { border: none; border-radius: 0; box-shadow: none; }
.p-card-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-6); flex: 1; }
.p-cat {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--gold-800);
}
.p-name { font-size: 1.3rem; line-height: 1.25; margin: 0; }
.p-name a:hover { color: var(--gold-800); }
.p-unit { font-size: var(--fs-xs); color: var(--ink-3); }
.p-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--sp-4);
}
.p-price {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  color: var(--wood-900);
  font-variant-numeric: tabular-nums;
}
.p-price-contact { font-size: var(--fs-lg); color: var(--gold-800); font-style: italic; }
.shop-empty { color: var(--ink-3); padding: var(--sp-10) 0; text-align: center; }

/* Lọc theo ngành hàng */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  border: var(--bw-1) solid var(--line);
  background: var(--white);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--ink-2);
  transition: border-color var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft), background var(--t-2) var(--e-soft);
}
.filter-chip .icon { color: var(--gold-600); }
.filter-chip em {
  font-style: normal; font-size: .7rem; font-weight: var(--fw-bold);
  color: var(--ink-3);
}
.filter-chip:hover { border-color: var(--gold-500); color: var(--gold-800); }
.filter-chip.is-on {
  background: var(--wood-900); border-color: var(--wood-900); color: var(--on-dark);
}
.filter-chip.is-on .icon, .filter-chip.is-on em { color: var(--gold-400); }

.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.shop-head h2 { font-size: var(--fs-3xl); }
.shop-head p { margin-top: var(--sp-2); }
#shop-count { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }

/* ==========================================================================
   BREADCRUMB · CHI TIẾT SẢN PHẨM
   ========================================================================== */
.breadcrumb {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-3);
  margin-bottom: var(--sp-8);
}
.breadcrumb a:hover { color: var(--gold-800); }
.breadcrumb .icon { width: .85em; height: .85em; opacity: .5; }
.breadcrumb span { color: var(--ink); font-weight: var(--fw-medium); }

.detail-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-10);
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: var(--bw-1) solid var(--line);
}
.detail-col { flex: 1 1 18rem; }
/* Các mục này nằm ngay dưới <h1> tên sản phẩm nên về ngữ nghĩa phải là <h2>
   (dùng <h3> làm cây tiêu đề nhảy 1->3). Ở đây trả lại đúng cỡ chữ cũ để
   giao diện không đổi. */
.detail-col h2, .detail-col h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
/* ---------- Thư viện ảnh sản phẩm ---------- */
/* Ảnh nằm đè lên khung placeholder; khi ảnh lỗi/chưa có, JS gỡ thẻ img và
   bỏ class has-img nên placeholder hiện lại. */
.image-frame .media-placeholder { position: absolute; inset: 0; }
.image-frame img { position: relative; z-index: 1; }
.image-frame.has-img .media-placeholder { display: none; }

.gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--sp-3);
}
/* chưa có ảnh nào tải được thì không chừa chỗ trống */
.gallery-thumbs:empty { display: none; }
.gal-thumb {
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: var(--bw-1) solid var(--line);
  background: var(--beige);
  padding: 0;
  transition: border-color var(--t-2) var(--e-soft), transform var(--t-2) var(--e-out);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb:hover { transform: translateY(-2px); border-color: var(--gold-500); }
.gal-thumb.is-on { border-color: var(--gold-600); box-shadow: 0 0 0 2px rgba(177,138,82,.25); }

.benefit-list { display: flex; flex-direction: column; gap: .6rem; }
.benefit-list li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-2); }
.benefit-list .icon { color: var(--gold-600); flex: none; margin-top: .2em; }
.spec-table { width: 100%; font-size: var(--fs-sm); }
.spec-table th {
  text-align: left; font-weight: var(--fw-medium); color: var(--ink-3);
  padding: .6rem 0; width: 40%; vertical-align: top;
  border-bottom: var(--bw-1) solid var(--line);
}
.spec-table td { padding: .6rem 0; border-bottom: var(--bw-1) solid var(--line); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

.related { margin-top: var(--sp-16); }
.related h2, .related h3 { font-size: var(--fs-2xl); margin-bottom: var(--sp-6); }

/* Thẻ ngành hàng trang chủ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--sp-4);
}
@media (min-width: 48rem) {
  .cat-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.65);
  transition: transform var(--t-3) var(--e-out), border-color var(--t-3) var(--e-soft), background var(--t-3) var(--e-soft);
}
.cat-card:hover { transform: translateY(-4px); border-color: var(--gold-500); background: var(--white); }
.cat-ico {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-circle);
  background: linear-gradient(160deg, var(--gold-200), var(--beige));
  color: var(--gold-800);
}
.cat-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink); }
.cat-count { font-size: var(--fs-xs); color: var(--ink-3); }

/* ==========================================================================
   VIDEO CINEMATIC
   ========================================================================== */
.video-block {
  position: relative;
  aspect-ratio: 16/8;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: var(--bw-1) solid rgba(244,239,229,.14);
}
.video-block .media-placeholder {
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(177,138,82,.14), transparent 70%),
    linear-gradient(155deg, var(--wood-800), var(--wood-900));
  color: var(--on-dark-3);
}
.video-play {
  width: 4.25rem; height: 4.25rem;
  border-radius: var(--r-circle);
  border: var(--bw-1) solid rgba(244,239,229,.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-dark);
  margin-bottom: var(--sp-2);
  transition: transform var(--t-2) var(--e-out), border-color var(--t-2) var(--e-soft);
}
.video-block:hover .video-play { transform: scale(1.06); border-color: var(--gold-400); }
.video-play .icon { width: 1.6rem; height: 1.6rem; }

/* ==========================================================================
   TRÍCH DẪN CẢM XÚC
   ========================================================================== */
.quote-block {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.quote-block p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--c-heading);
}

/* ==========================================================================
   KHOẢNH KHẮC — danh sách thẻ nhỏ
   ========================================================================== */
.occasion-list {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}
.occasion-chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: .9rem 1.5rem;
  border-radius: var(--r-pill);
  border: var(--bw-1) solid var(--line);
  background: rgba(255,255,255,.55);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  transition: border-color var(--t-2) var(--e-soft), transform var(--t-2) var(--e-out), background var(--t-2) var(--e-soft);
}
.occasion-chip:hover { border-color: var(--gold-500); background: var(--white); transform: translateY(-2px); }
.occasion-chip .icon { color: var(--gold-600); }

/* ==========================================================================
   BOTANICAL EDITORIAL — thành phần
   ========================================================================== */
.botanical-list {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
}
.botanical-list li {
  position: relative;
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--on-dark-2);
}
.botanical-list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: .4rem; height: .4rem;
  border-radius: var(--r-circle);
  background: var(--gold-500);
}

/* ==========================================================================
   CTA CUỐI TRANG
   ========================================================================== */
.cta-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--on-dark);
  border-radius: 50% 50% 0 0 / 3.5rem 3.5rem 0 0;
  margin-top: -3.6rem;
  padding: calc(var(--section-y) + 3.6rem) 0 var(--section-y);
  /* Dùng chung ảnh thương hiệu với footer ngay bên dưới. Cả hai đều
     attachment: fixed nên ảnh khớp liền mạch qua đường vòm giữa hai khối,
     nhìn như một tấm ảnh chạy suốt. Chữ ở đây căn giữa nên lớp phủ phải
     đều tay (.86 → .80), không dùng gradient ngang như dải CTA của footer. */
  background-color: var(--wood-900);
  background-image:
    radial-gradient(65% 60% at 50% 22%, rgba(194,160,92,.18), transparent 62%),
    linear-gradient(180deg, rgba(14,9,4,.86), rgba(14,9,4,.80)),
    var(--cta-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}
.cta-final h2 { margin-bottom: var(--sp-5); }
.cta-final p { max-width: 34rem; margin: 0 auto var(--sp-10); font-size: var(--fs-md); }
.cta-final .hero-motes span { background: radial-gradient(circle, rgba(236,222,192,.6), transparent 70%); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Ảnh thương hiệu PHỦ TRỌN footer — từ dải CTA trên cùng xuống hết dòng
   pháp lý, không còn cắt ngang thành một dải riêng.

   Ba lớp, lớp đầu nằm TRÊN CÙNG:
   1. phủ dọc — trong suốt ở vùng CTA (ảnh hiện rõ nhất), đậm dần xuống 80%
      cho vùng nhiều chữ bên dưới;
   2. phủ ngang — chỉ để tiêu đề CTA bên trái đọc được khi ảnh phía sau sáng;
   3. chính tấm ảnh.

   ĐỘ PHỦ 80% LÀ SỐ ĐÃ ĐO. Điểm sáng nhất của ảnh là rgb(254,255,244) — gần
   như trắng, khác hẳn hoạ tiết trống đồng (sáng nhất chỉ 83). Ở 80%, màu chữ
   yếu nhất (--on-dark-3) vẫn đạt 5.09:1, chữ chính 9.85:1 — đều qua chuẩn AA.
   Ảnh dùng attachment: fixed nên cỡ ảnh tính theo KHUNG NHÌN, không bị kéo
   giãn theo chiều cao rất lớn của footer. */
.site-footer {
  position: relative;
  background-color: var(--wood-900);
  background-image:
    linear-gradient(180deg, rgba(14,9,4,0) 0%, rgba(14,9,4,0) 16%, rgba(14,9,4,.80) 38%, rgba(14,9,4,.84) 100%),
    linear-gradient(100deg, rgba(14,9,4,.90) 0%, rgba(14,9,4,.70) 28%, rgba(14,9,4,.26) 50%, rgba(14,9,4,.06) 68%, rgba(14,9,4,0) 84%),
    var(--cta-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
  color: var(--on-dark-2);
  overflow: hidden;
}
/* Dải CTA trên cùng — giờ chỉ còn là vùng chừa chỗ cho chữ, ảnh đã nằm ở
   nền của cả footer nên không cần <img>/lớp phủ riêng nữa. */
.footer-cta-band {
  position: relative;
  min-height: clamp(22rem, 18rem + 13vw, 34rem);
  display: flex;
  align-items: center;
}
.footer-cta-band-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
@media (min-width: 64rem) { .footer-cta-band-inner { padding-inline: var(--container-pad-lg); } }
.footer-cta-band-inner > * { max-width: 30rem; }
.footer-cta-band-inner h2 { font-size: var(--fs-3xl); }
.footer-cta-band-inner p { color: var(--on-dark-2); }
.footer-top { padding-top: var(--sp-16); }

.footer-top {
  display: flex; flex-wrap: wrap; gap: var(--sp-10);
  padding-bottom: var(--sp-12);
  border-bottom: var(--bw-1) solid rgba(214,188,133,.14);
}
.footer-brand { flex: 1 1 17rem; }
.footer-brand .brand-mark { margin-bottom: var(--sp-5); }
.footer-brand p { max-width: 24rem; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.footer-col { flex: 1 1 10rem; }
.footer-col h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--gold-400);
  margin-bottom: var(--sp-5);
  font-weight: var(--fw-semibold);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a, .footer-col li { font-size: var(--fs-sm); }
/* Gạch chân tự "mọc" ra từ trái khi rê chuột — dùng background-image thay vì
   border-bottom vì border không animate độ rộng mượt được.
   LƯU Ý: giá trị lệch phải DƯƠNG. Bản trước dùng "bottom -0.15em" (âm) nên
   vạch bị đẩy ra NGOÀI khung, mà nền thì bị cắt ở mép khung — vạch vẽ ra
   nhưng không bao giờ nhìn thấy. Đó là lý do hiệu ứng "mất tích". */
.footer-col a {
  display: inline-flex;
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom 0.25em;
  background-size: 0 1px;
  transition: color var(--t-2) var(--e-soft), background-size var(--t-3) var(--e-out);
}
.footer-col a:hover { color: var(--gold-400); background-size: 100% 1px; }

/* Hàng icon + chữ cho địa chỉ / giờ mở cửa / điện thoại — icon căn theo
   đỉnh dòng chữ đầu tiên, chữ được phép xuống dòng tự nhiên nếu dài. */
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: var(--lh-snug);
}
.footer-contact-row .icon {
  flex: none;
  margin-top: .2em;
  color: var(--gold-400);
  opacity: .85;
}
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border: var(--bw-1) solid rgba(214,188,133,.22);
  border-radius: var(--r-circle);
  transition: border-color var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft),
              transform var(--t-2) var(--e-out);
}
.footer-social a:hover { border-color: var(--gold-400); color: var(--gold-400); transform: translateY(-3px); }
/* ---- Tìm đường tới cơ sở: thông tin bên trái, bản đồ bên phải ---- */
.footer-map {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-12);
  border-bottom: var(--bw-1) solid rgba(214,188,133,.14);
}
@media (min-width: 56.25rem) {
  .footer-map { grid-template-columns: 1fr 1.15fr; align-items: center; gap: var(--sp-12); }
}
.footer-map-info h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--gold-400);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
}
.footer-map-info ul {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}
.footer-map-info a { color: inherit; }
.footer-map-info a:hover { color: var(--gold-400); }
/* aspect-ratio đặt trên KHUNG, không phải iframe: bản gộp Artifact thay
   iframe bằng thẻ liên kết, khung vẫn phải giữ đúng hình dạng. */
.footer-map-frame {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  border: var(--bw-1) solid rgba(214,188,133,.22);
  box-shadow: var(--shadow-lg);
  background: rgba(14,9,4,.55);
}
.footer-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-6) 0;
  font-size: var(--fs-xs);
  color: var(--on-dark-3);
}

/* ==========================================================================
   ĐẦU TRANG CON
   ========================================================================== */
.page-head {
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0 var(--sp-16);
  color: var(--on-dark);
  background-color: var(--wood-900);
  background-image:
    radial-gradient(70% 60% at 80% 10%, rgba(194,160,92,.18), transparent 62%),
    var(--drum-scrim),
    var(--drum-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}
.page-head h1 { margin-top: var(--sp-4); font-size: var(--fs-4xl); }
.page-head p { max-width: 36rem; margin-top: var(--sp-5); font-size: var(--fs-md); }
@media (min-width: 64rem) { .page-head { padding: var(--sp-24) 0 var(--sp-20); } }

/* ==========================================================================
   MÀN MỞ ĐẦU — nhận diện thương hiệu trong 3 giây đầu
   Chỉ hiện một lần mỗi phiên truy cập (sessionStorage), không làm phiền
   người đã xem. Không có JS thì không bao giờ hiện.
   ========================================================================== */
/* Màn tối được vẽ ngay từ lúc tải trang, trước cả khi JS chạy — nhờ vậy
   không thấy nội dung nháy lên rồi mới bị che. Hiệu ứng intro-failsafe tự
   gỡ màn sau 4,5 giây phòng khi JS lỗi, trang không bao giờ bị kẹt đen. */
html.intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(70% 50% at 50% 38%, rgba(175,120,43,.18), transparent 66%),
    linear-gradient(170deg, #2c2018, #1c130b 62%, #120c06);
  animation: intro-failsafe 4500ms linear forwards;
}
@keyframes intro-failsafe {
  0%, 86% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  background:
    radial-gradient(70% 50% at 50% 38%, rgba(175,120,43,.18), transparent 66%),
    linear-gradient(170deg, var(--wood-800), var(--wood-900) 62%, #120c06);
  color: var(--on-dark);
  transition: transform 900ms var(--e-soft), opacity 500ms var(--e-soft);
}
.brand-intro.is-done {
  transform: translate3d(0, -100%, 0);
  opacity: .4;
}
.brand-intro-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  transition: opacity 600ms var(--e-soft), transform 600ms var(--e-soft);
}
.brand-intro.is-done .brand-intro-mark { opacity: 0; transform: translate3d(0, -1rem, 0); }
.brand-intro-mark img {
  width: 5.5rem; height: 5.5rem;
  object-fit: contain;
  animation: intro-rise 1100ms var(--e-out) both;
}
.brand-intro-name {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--on-dark);
  animation: intro-rise 1100ms var(--e-out) 120ms both;
}
.brand-intro-tagline {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
  animation: intro-rise 1100ms var(--e-out) 240ms both;
}
@keyframes intro-rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to   { opacity: 1; transform: none; }
}
.brand-intro-bar {
  width: min(18rem, 62vw);
  height: 1px;
  background: rgba(214,188,133,.2);
  overflow: hidden;
}
.brand-intro-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transition: width 120ms linear;
}

/* Hoa sen nét trang trí đã bỏ theo yêu cầu — nền ảnh và hoạ tiết trống đồng
   đã đủ, thêm hoa sen đứng lẻ làm rối. */

/* Vạch vàng chữ ký — dùng lặp lại để tạo nhịp nhận diện */
.gold-rule {
  width: 4.5rem; height: 1px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  margin-bottom: var(--sp-5);
}
.section-dark .gold-rule, .cta-final .gold-rule, .hero-cinema .gold-rule {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

/* ==========================================================================
   HERO ĐIỆN ẢNH — ảnh thương hiệu là nhân vật chính
   Mobile: ảnh nằm trên, chữ nằm dưới (bố cục dọc riêng).
   Desktop: ảnh tràn nền, chữ nằm trên vùng trống bên trái.
   object-position chọn lệch phải để sản phẩm KHÔNG bao giờ bị cắt.
   ========================================================================== */
.hero-cinema {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--on-dark);
  background: linear-gradient(175deg, var(--wood-800), var(--wood-900) 70%, #150e07);
}
/* Khung gần vuông: ảnh gốc tỉ lệ 1,06 nên cắt rất ít, cụm sản phẩm còn nguyên
   và đủ lớn để nhìn rõ trên điện thoại. */
.hero-cinema-media { position: relative; aspect-ratio: 9 / 8; overflow: hidden; }
.hero-cinema-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% 44%;
  /* Không animation, không transform trên chính thẻ <img>: mọi transform đều
     buộc trình duyệt nội suy lại ảnh và làm mềm chi tiết. */
}
/* ĐÃ BỎ hiệu ứng "thở" (scale) của ảnh hero — cố ý.
   Nó từng chạy scale(1) → scale(1.03) lặp vô hạn. Hai vấn đề:
   1. Ảnh bị phóng to hơn độ phân giải thật gần như suốt chu kỳ, nên lúc nào
      cũng hơi mờ — mà hero là ảnh đầu tiên người xem nhìn thấy.
   2. Khi trình duyệt tạm dừng animation (tab chạy nền, tiết kiệm pin), ảnh
      đứng yên ở khung hình đầu — tức kẹt luôn ở trạng thái phóng to.
   Ảnh hero nay giữ đúng tỉ lệ 1:1. Chiều sâu vẫn còn nhờ parallax ở khối bọc
   (đã làm tròn về pixel nguyên nên không gây nội suy).
   Ưu tiên của thương hiệu: ảnh nét > hiệu ứng. */
/* Khổ tablet: khung ảnh dẹt lại để tiêu đề và nút vẫn nằm trong màn đầu tiên.
   Vùng cắt vẫn giữ trọn logo và cụm sản phẩm. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .hero-cinema-media { aspect-ratio: 16 / 10; }
}
.hero-cinema-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(21,14,7,.18) 0%, transparent 38%, rgba(21,14,7,.72) 86%, var(--wood-900) 100%);
}
.hero-cinema-inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--container-pad) var(--sp-14);
  margin-top: calc(-1 * var(--sp-6));
}
.hero-cinema-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
}
.hero-cinema h1 {
  margin: var(--sp-5) 0 var(--sp-5);
  font-size: clamp(2.5rem, 1.75rem + 3vw, 3.9rem);
  line-height: 1.04;
  /* Chữ nằm trên ảnh: thêm quầng tối rất mềm để luôn đủ tương phản, kể cả
     khi ảnh sáng hơn dự kiến ở một số khổ màn hình. */
  text-shadow: 0 2px 28px rgba(14,9,4,.55);
}
.hero-cinema h1 em { font-style: italic; color: var(--gold-400); }
.hero-cinema-lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--on-dark-2);
  max-width: 34rem;
  margin-bottom: var(--sp-8);
}
.hero-cinema-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Dải tin cậy dưới hero — thay cho việc nhồi chữ vào ảnh */
.hero-cinema-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-5) var(--container-pad) var(--sp-8);
  border-top: var(--bw-1) solid rgba(214,188,133,.16);
}
.hero-cinema-strip li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hero-cinema-strip .icon { color: var(--gold-500); }

@media (min-width: 64rem) {
  .hero-cinema { display: block; min-height: min(92vh, 54rem); }
  .hero-cinema-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-cinema-media img { object-position: 62% 54%; }
  /* Ảnh bìa mới có 2 logo đối tác (Kim Tâm Cát, Đông Y Nhân Tâm) nằm ngay
     trên ảnh — làm tối cả nửa trái như trước sẽ nhấn chìm logo. Chỉ hạ nhẹ
     độ sáng tổng thể để chữ vẫn nổi bật; độ tương phản thật sự đến từ tấm
     nền sau khối chữ (.hero-cinema-copy) bên dưới. */
  .hero-cinema-scrim {
    background:
      linear-gradient(95deg, rgba(18,12,6,.5) 0%, rgba(18,12,6,.38) 30%, rgba(18,12,6,.2) 50%, transparent 66%),
      linear-gradient(180deg, rgba(18,12,6,.3) 0%, transparent 22%, transparent 70%, rgba(18,12,6,.55) 100%);
  }
  .hero-cinema-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-10) var(--container-pad-lg) var(--sp-16);
    min-height: min(92vh, 54rem);
    display: flex;
    flex-direction: column;
    /* Chữ neo xuống đáy: ảnh bìa mới có 2 logo đối tác nằm ở nửa trên, chữ
       tiêu đề đặt giữa (như cũ) sẽ đè thẳng lên logo. Neo đáy để tiêu đề nằm
       trên vùng phong cảnh mờ phía dưới, không chồng lên logo. */
    justify-content: flex-end;
  }
  /* Cột chữ dừng lại trước cụm sản phẩm, không bao giờ đè lên hàng hộp.
     Tấm nền tối mờ + blur phía sau đảm bảo chữ luôn đọc rõ bất kể ảnh nền
     bên dưới sáng/tối hay có chi tiết gì (logo, hoa sen…). */
  .hero-cinema-copy {
    max-width: min(36rem, 44vw);
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-lg);
    background: linear-gradient(165deg, rgba(15,10,5,.6), rgba(15,10,5,.42));
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border: var(--bw-1) solid rgba(214,188,133,.16);
  }
  .hero-cinema-strip {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--container-pad-lg) var(--sp-8);
  }
}

/* ==========================================================================
   TUYÊN NGÔN THƯƠNG HIỆU — chữ lớn, nhiều khoảng thở
   ========================================================================== */
.brand-statement { position: relative; overflow: hidden; }
.brand-statement .container { position: relative; }
.brand-statement-text {
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 2.1vw, 3.1rem);
  line-height: 1.28;
  letter-spacing: var(--ls-tight);
  color: var(--c-heading);
  text-wrap: balance;
}
.brand-statement-text em { font-style: italic; color: var(--gold-700); }
.brand-statement-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: var(--bw-1) solid var(--line);
}
.brand-statement-sign {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.brand-statement-sign img { width: 2.4rem; height: 2.4rem; object-fit: contain; flex: none; }
.brand-statement-sign strong { display: block; font-weight: var(--fw-semibold); color: var(--ink); }
.brand-statement-sign span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }

/* ==========================================================================
   KHỐI ẢNH EDITORIAL — ảnh lớn lệch trục, chồng lớp, có chiều sâu
   ========================================================================== */
.ed-figure { position: relative; }
.ed-figure-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: var(--ed-ratio, 4/3);
}
.ed-figure-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--ed-pos, center);
  transition: transform 1400ms var(--e-soft);
}
.ed-figure:hover .ed-figure-img img { transform: scale(1.04); }
/* viền vàng mảnh lệch khỏi ảnh — tạo lớp nền phía sau */
.ed-figure::before {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%;
  height: 62%;
  border: var(--bw-1) solid rgba(175,120,43,.4);
  border-radius: var(--r-xl);
  z-index: -1;
}
.ed-figure-tag {
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5);
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(21,14,7,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--bw-1) solid rgba(214,188,133,.28);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--on-dark);
}
.ed-figure-tag .icon { color: var(--gold-400); }

/* ==========================================================================
   PHÓNG SỰ TRUYỀN HÌNH — video khổ rộng, khung vàng, nút phát phủ lên poster
   Video đã được cắt sẵn về 852×464 (bỏ viền đen của bản quay màn hình),
   nên ở đây chỉ cần giữ đúng tỉ lệ, không phóng to lệch trục.
   ========================================================================== */
/* Nguồn chỉ rộng 850px. Kéo tràn cả container 1152px là phóng to 1.35 lần,
   nhìn nhoè ngay. Giới hạn 900px (≈1.06 lần) để giữ nét gần như nguyên bản. */
.video-band {
  margin: 0 auto;
  max-width: 56.25rem;
}

.video-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: var(--bw-1) solid rgba(214, 188, 133, .3);
  box-shadow: var(--shadow-lg);
  background: #0b0703;
  aspect-ratio: 850 / 464;
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0703;
}

/* Video sản phẩm quay dọc bằng điện thoại (9:16) — khác hẳn tỉ lệ ngang
   850/464 cố định ở trên, vốn chỉ hợp video quay ngang kiểu phóng sự.
   Giới hạn bề rộng để khung dọc không cao lênh khênh giữa trang. */
.video-frame.is-portrait {
  aspect-ratio: 9 / 16;
  max-width: 22rem;
  margin: 0 auto;
}

/* Video riêng của một sản phẩm — cùng nhịp cách với .related bên dưới nó */
.detail-video {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: var(--bw-1) solid var(--line);
}
.detail-video h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-6); text-align: center; }

/* Nút phát phủ lên poster — ẩn hẳn khi video đã chạy */
.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  /* <button> không tự giãn theo inset:0 như <div> — phải ép kích thước, nếu
     không lớp phủ co lại quanh nội dung và cả vòng tròn bị bóp méo. */
  width: 100%;
  height: 100%;
  padding: var(--sp-6);
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--on-dark);
  text-align: center;
  /* Poster có vùng rất sáng (băng rôn trắng). Với lớp phủ cũ (.30-.58) dòng
     thời lượng chỉ còn 3.75:1. Đậm lên .42-.66 cho 4.79:1 tại điểm sáng nhất. */
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(14, 9, 4, .34), transparent 70%),
    linear-gradient(180deg, rgba(14, 9, 4, .42), rgba(14, 9, 4, .66));
  transition: opacity var(--t-3) var(--e-out), visibility var(--t-3) var(--e-out);
}
.video-play[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }

.video-play-ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  color: var(--wood-900);
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  box-shadow: 0 .75rem 2rem rgba(14, 9, 4, .5);
  transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.video-play-ring svg { width: 1.9rem; height: 1.9rem; margin-left: .18rem; }
.video-play:hover .video-play-ring,
.video-play:focus-visible .video-play-ring {
  transform: scale(1.07);
  box-shadow: 0 1rem 2.5rem rgba(14, 9, 4, .62);
}

.video-play-label {
  display: grid;
  gap: .25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-shadow: 0 1px 6px rgba(14, 9, 4, .8);
}
.video-play-label small {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--on-dark-2);
}

.video-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--on-dark-3);
  text-align: center;
}
.video-credit .icon { flex: none; color: var(--gold-400); }

@media (max-width: 40rem) {
  .video-play-ring { width: 3.5rem; height: 3.5rem; }
  .video-play-ring svg { width: 1.5rem; height: 1.5rem; }
  .video-credit { align-items: flex-start; text-align: left; }
}

/* Bản gộp Artifact: video là data URI nên không tải thêm được gì — giữ nguyên
   giao diện, chỉ báo cho người xem biết đây là bản nén nhẹ. */
.video-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--on-dark-3);
  text-align: center;
}

/* Cặp ảnh so le — một nổi, một chìm */
.ed-pair { display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) {
  .ed-pair { grid-template-columns: 1.15fr .85fr; align-items: end; gap: var(--sp-8); }
  .ed-pair > :last-child { margin-bottom: var(--sp-10); }
}

/* Khối kể chuyện thương hiệu — ảnh dọc lớn + chữ */
.brand-story { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 56.25rem) {
  .brand-story { grid-template-columns: .85fr 1.15fr; gap: var(--sp-16); }
}
/* Ảnh poster gốc rất dài (gần tỉ lệ 1:2, dạng story) — nếu để nguyên tỉ lệ
   cạnh cột chữ ngắn hơn, khung sẽ kéo dài bất thường và trông "dính"/xấu.
   Khống chế về một khung dọc vừa phải, luôn giữ trọn phần logo + chữ
   "Kim Tâm Cát" ở trên bằng object-position: top. */
.brand-story-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: var(--bw-1) solid rgba(214,188,133,.3);
  aspect-ratio: 4 / 5;
}
.brand-story-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.brand-story-badge {
  position: absolute;
  right: calc(-1 * var(--sp-4)); bottom: var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(28,19,11,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--bw-1) solid rgba(214,188,133,.32);
  box-shadow: var(--shadow-lg);
  max-width: 14rem;
}
.brand-story-badge img { width: 2.2rem; height: 2.2rem; object-fit: contain; flex: none; border: none; box-shadow: none; border-radius: 0; }
.brand-story-badge strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--on-dark); }
.brand-story-badge span { display: block; font-size: .72rem; color: var(--on-dark-3); letter-spacing: var(--ls-wide); margin-top: .15rem; }

/* Lưới ảnh editorial — ba khung so le, khung giữa tụt xuống để tạo nhịp.
   Cỡ khung được giữ vừa phải cho khớp độ phân giải ảnh gốc, không phóng to
   quá mức làm ảnh bị bệt. */
.ed-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 40rem) { .ed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56.25rem) {
  .ed-grid { grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--sp-8); }
  .ed-grid > :nth-child(2) { margin-top: var(--sp-10); }
}
.ed-figure figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}
.ed-figure figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: .15rem;
}
.section-dark .ed-figure figcaption, .section-dark-2 .ed-figure figcaption { color: var(--on-dark-2); }
.section-dark .ed-figure figcaption strong, .section-dark-2 .ed-figure figcaption strong { color: var(--on-dark); }

/* ==========================================================================
   TRANG GIỚI THIỆU
   ========================================================================== */
/* Bộ ba chữ Kim — Tâm — Cát */
.gt-meaning { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 48rem) { .gt-meaning { grid-template-columns: repeat(3, 1fr); } }
.gt-word {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  border: var(--bw-1) solid rgba(214,188,133,.18);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: border-color var(--t-3) var(--e-soft), transform var(--t-3) var(--e-out);
}
.gt-word:hover { border-color: rgba(214,188,133,.42); transform: translateY(-4px); }
.gt-word b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--gold-400);
  margin-bottom: var(--sp-4);
}
.gt-word p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* Thư viện dấu ấn — ảnh tư liệu khổ 16:9 */
.gt-gallery { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 40rem) { .gt-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .gt-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.gt-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: var(--bw-1) solid rgba(214,188,133,.24);
  box-shadow: var(--shadow-sm);
  background: var(--wood-900);
}
.gt-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--e-soft);
}
.gt-shot:hover img { transform: scale(1.05); }

/* Nổi / chìm xen kẽ cho lưới thẻ — tạo chiều sâu tinh tế, không phá hàng lưới */
@media (min-width: 48rem) {
  .cat-grid .cat-card:nth-child(3n+2) { margin-top: -.85rem; margin-bottom: .85rem; }
  .card-list .card:nth-child(even) { margin-top: 1.1rem; }
}

/* ---------- Tiện ích ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Liên kết bỏ qua điều hướng — ẩn ngoài màn hình, trượt xuống khi nhận tiêu
   điểm bàn phím. Không dùng display:none vì như thế bàn phím không tới được. */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  z-index: 200;
  transform: translate(-50%, -110%);
  padding: .85rem 1.6rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--gold-400);
  color: var(--wood-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-2) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Đích của skip link nhận tiêu điểm bằng tabindex="-1"; bỏ viền để không
   thấy khung sáng quanh cả trang sau khi nhảy tới. */
main:focus { outline: none; }

/* ==========================================================================
   VÙNG CHẠM TRÊN THIẾT BỊ CẢM ỨNG
   Đo ở 320px: link chân trang chỉ cao 18-26px, tên sản phẩm 23px, biểu tượng
   mạng xã hội 38px — đều dưới ngưỡng bấm thoải mái bằng ngón tay (~44px).
   Nới bằng lớp giả phủ vô hình thay vì thêm padding: padding sẽ đẩy gạch
   chân ra xa chữ và làm giãn bố cục chân trang.
   Chỉ áp dụng cho con trỏ thô (cảm ứng) — chuột không cần.
   ========================================================================== */
@media (pointer: coarse) {
  .footer-col a,
  .footer-contact-row a,
  .footer-map-info a,
  .p-name a,
  .breadcrumb a { position: relative; }

  .footer-col a::before,
  .footer-contact-row a::before,
  .footer-map-info a::before,
  .p-name a::before,
  .breadcrumb a::before {
    content: "";
    position: absolute;
    inset: -11px -4px;
    z-index: 1;
  }

  /* Số điện thoại và Zalo ở chân trang chỉ cao 18px — với -11px vẫn mới được
     40px. Đây là hai đích quan trọng nhất trên điện thoại nên nới đủ 44px. */
  .footer-contact-row a::before,
  .footer-map-info a::before { inset: -13px -6px; }

  /* Biểu tượng mạng xã hội: nới thẳng kích thước vì chúng đứng riêng */
  .footer-social a,
  .footer-brand a[aria-label] { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 29.99rem) {
  .card-list, .price-list, .review-list { gap: var(--sp-4); }
  .card { padding: var(--sp-6) var(--sp-5); }
  .price-card { padding: var(--sp-8) var(--sp-6); }
  h1 { line-height: var(--lh-snug); }
}

@media (min-width: 48rem) {
  .split { flex-wrap: nowrap; }
}

@media (min-width: 56.25rem) {
  .footer-top { flex-wrap: nowrap; }
}

/* Trên máy nhỏ: bớt hiệu ứng nặng để không giật */
@media (max-width: 47.99rem) {
  .hero-motes, .hero-glow { display: none; }
  .hero-frame { animation: none; }
  /* Ảnh hero phải đứng yên trên mobile: vừa nhẹ máy, vừa không xê dịch sản phẩm */
  .hero-cinema-media img { animation: none; }
  .brand-story-badge { right: var(--sp-4); bottom: var(--sp-4); }
  .ed-figure::before { display: none; }
  .section-deco::before, .section-deco::after { display: none; }
  html.anim [data-anim] { transition-duration: var(--t-3); }
  html.anim [data-anim="fade-left"], html.anim [data-anim="fade-right"] {
    transform: translate3d(0, 1.25rem, 0);
  }
  .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  /* fixed-background không mượt/không hỗ trợ tốt trên nhiều trình duyệt di
     động — trả về scroll bình thường. Trên mobile màn hẹp nên chỗ nối giữa
     các khối cũng ít bị lộ mí lệch hơn so với desktop. */
  .mobile-nav, .section-paper, .section-ash, .section-dark, .section-dark-2,
  .cta-final, .site-footer, .page-head {
    background-attachment: initial;
  }
  /* Không còn fixed thì "cover" sẽ tính theo chiều cao rất lớn của footer,
     phóng ảnh to quá mức chỉ còn thấy một mẩu. Cho ảnh trải đúng bề ngang,
     neo lên đỉnh — phần dưới footer là nền tối, đúng như lớp phủ dọc. */
  .site-footer { background-size: auto, auto, 100% auto; background-position: center, center, center top; }
}

/* ==========================================================================
   GIẢM CHUYỂN ĐỘNG
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* clip-path phải được reset cùng: kiểu clip-up/clip-wipe mở ảnh bằng
     clip-path, thiếu dòng này thì ảnh bị cắt vĩnh viễn khi người dùng chọn
     giảm chuyển động. */
  html.anim [data-anim], html.anim .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .hero-motes, .hero-glow { display: none; }
  .p-card::after, .cat-card::after, .price-card::after { display: none; }
  .zoom-slow img, img.zoom-slow, .breathe { animation: none !important; }
  .hero-cinema-media img { animation: none !important; }
  .brand-intro { display: none !important; }
}

@media print {
  .site-header, .site-footer, .mobile-nav, .hero-glow, .hero-motes { display: none; }
  body::after { display: none; }
}

/* ==========================================================================
   TIN TỨC — danh sách bài và trang đọc bài
   Nội dung mang về từ kimtamcat.com.vn. Thân bài là HTML của WordPress đã
   làm sạch, nên phần .news-body phải tự định kiểu cho các thẻ trần
   (h2/h3/p/ul/table/blockquote…) chứ không dựa vào class nào.
   ========================================================================== */
.news-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: var(--bw-1) solid var(--line);
}
.news-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.news-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: border-color var(--t-1) var(--e-out), color var(--t-1) var(--e-out);
}
.news-tab span {
  font-size: .72rem; color: var(--ink-3);
  background: var(--beige); border-radius: var(--r-pill); padding: .05rem .4rem;
}
.news-tab:hover { border-color: var(--gold-500); color: var(--gold-800); }
.news-tab.is-on { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.news-tab.is-on span { background: rgba(255,255,255,.22); color: #fff; }

.news-search { display: flex; gap: var(--sp-2); }
.news-search input {
  min-width: 12rem; padding: .55rem .9rem;
  border: var(--bw-1) solid var(--line); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: #fff;
}
.news-search input:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }

.news-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.news-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-card-media .image-frame { border: none; border-radius: 0; box-shadow: none; }
.news-card-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-5); flex: 1; }
.news-card-tag {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--gold-700);
}
.news-card h3 { font-size: 1.12rem; line-height: 1.35; margin: 0; text-wrap: balance; }
.news-card h3 a { color: var(--c-heading); }
.news-card h3 a:hover { color: var(--gold-800); }
.news-card p {
  font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed);
  margin: 0;
}
.news-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: var(--bw-1) solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.news-card-more { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold-700); }
.news-card:hover .news-card-more { color: var(--gold-800); }

.news-pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-10); }
/* min-width 2.75rem = 44px: số trang là ô vuông nhỏ, ở 2.4rem chỉ được 38px
   nên hay bấm trượt sang số bên cạnh trên điện thoại. */
.news-page {
  min-width: 2.75rem; text-align: center; padding: .5rem .7rem;
  border: var(--bw-1) solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.news-page:hover { border-color: var(--gold-500); color: var(--gold-800); }
.news-page.is-on { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.news-pager span { padding: .45rem .3rem; color: var(--ink-3); }
.news-count { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Trang đọc bài ---------- */
#news-article > .eyebrow { display: block; margin-top: var(--sp-6); }
#news-article h1 { margin: var(--sp-3) 0 var(--sp-4); text-wrap: balance; }
.news-meta { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-8); }
.news-hero { margin-bottom: var(--sp-10); border-radius: var(--r-xl); overflow: hidden; }
.news-hero img { width: 100%; height: auto; }

.news-body { font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); }
.news-body > * + * { margin-top: var(--sp-5); }
.news-body h2, .news-body h3, .news-body h4 {
  color: var(--c-heading); line-height: 1.3; text-wrap: balance;
  margin-top: var(--sp-10); margin-bottom: var(--sp-4);
}
.news-body h2 { font-size: 1.6rem; }
.news-body h3 { font-size: 1.3rem; }
.news-body h4 { font-size: 1.1rem; }
.news-body p { margin-bottom: 0; }
.news-body strong { color: var(--ink); }
.news-body a { color: var(--gold-800); text-decoration: underline; text-underline-offset: 2px; }
.news-body a:hover { color: var(--gold-700); }
.news-body img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  margin-top: var(--sp-6); margin-bottom: var(--sp-6);
}
.news-body ul, .news-body ol { padding-left: 1.3rem; }
.news-body li + li { margin-top: .45rem; }
.news-body li { line-height: 1.7; }
.news-body blockquote {
  border-left: 3px solid var(--gold-500);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  color: var(--ink-2); font-style: italic;
}
/* Bảng trong bài có thể rộng hơn cột chữ — cho cuộn ngang trong khung riêng
   để thân trang không bao giờ bị kéo ngang. */
.news-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.news-body th, .news-body td { border: var(--bw-1) solid var(--line); padding: .55rem .7rem; text-align: left; }
.news-body th { background: var(--beige); color: var(--ink); }
.news-body figure { margin: var(--sp-6) 0; }
.news-body figcaption { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; margin-top: var(--sp-2); }
.news-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; margin: var(--sp-6) 0; }
.news-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.news-related { margin-top: var(--sp-20); padding-top: var(--sp-10); border-top: var(--bw-1) solid var(--line); }
.news-related h2 { margin-bottom: var(--sp-8); }

@media (max-width: 40rem) {
  .news-toolbar { flex-direction: column; align-items: stretch; }
  .news-search input { min-width: 0; flex: 1; }
  .news-body { font-size: .98rem; }
}

/* ==========================================================================
   TRANG DỊCH VỤ + CÔNG CỤ TRA CỨU (thần số học, Bát Cực Linh Số)
   ========================================================================== */

/* ---------- Thẻ dịch vụ ở trang tổng hợp ---------- */
/* Thẻ dịch vụ — cùng khuôn với thẻ sản phẩm: ảnh lớn phía trên, nội dung
   bên dưới, cả lưới cao bằng nhau. */
.svc-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
@media (max-width: 30rem) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out), border-color var(--t-2) var(--e-soft);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }

/* Khung ảnh 4/3 — cùng tỉ lệ với thẻ sản phẩm cho đồng bộ */
.svc-media {
  display: block; position: relative;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--beige);
}
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--e-soft); }
.svc-card:hover .svc-media img { transform: scale(1.045); }
/* Thẻ chưa có ảnh riêng: hiện biểu tượng lớn giữa khung, giữ đúng chỗ */
.svc-media-blank { display: flex; align-items: center; justify-content: center; }
.svc-media-blank .icon { width: 3rem; height: 3rem; color: var(--gold-600); opacity: .55; }

.svc-body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--sp-6); flex: 1;
}
.svc-tag { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold-700); }
.svc-card h3 { font-size: 1.3rem; margin: 0; color: var(--c-heading); line-height: 1.25; }
.svc-card p { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); margin: 0; flex: 1; }
.svc-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-sm); color: var(--gold-700);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: var(--bw-1) solid var(--line);
}
.svc-card:hover .svc-more { color: var(--gold-800); }

/* ---------- Bố cục hai cột dùng chung ---------- */
.two-col { display: grid; gap: var(--sp-12); align-items: start; }
@media (min-width: 56rem) { .two-col { grid-template-columns: 1.15fr .85fr; gap: var(--sp-16); } }

.step-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step-card { padding: var(--sp-6); background: #fff; border: var(--bw-1) solid var(--line); border-radius: var(--r-lg); }
.step-no {
  display: inline-block; font-family: var(--font-display); font-size: 1.5rem;
  color: var(--gold-600); margin-bottom: var(--sp-2);
}
.step-card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.step-card p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; line-height: var(--lh-relaxed); }

/* ---------- Khung công cụ ---------- */
.tsh-tool {
  max-width: 54rem; margin: 0 auto;
  background: #fff;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tsh-form { padding: var(--sp-10) var(--sp-8); }
@media (min-width: 48rem) { .tsh-form { padding: var(--sp-12); } }
.tsh-form-head { margin-bottom: var(--sp-8); }
.tsh-form-head h2 { margin: var(--sp-2) 0 var(--sp-3); }
.tsh-form-head p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

.tsh-fields { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .tsh-fields { grid-template-columns: 1.4fr 1fr; } }
.tsh-fields-one { grid-template-columns: 1fr !important; max-width: 24rem; }
.tsh-field { display: flex; flex-direction: column; gap: .4rem; }
.tsh-field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.tsh-field input {
  padding: .75rem 1rem; font: inherit; color: var(--ink);
  background: #fff;
  border: var(--bw-1) solid var(--line); border-radius: var(--r-md);
}
.tsh-field input:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; border-color: var(--gold-500); }
.tsh-field small { font-size: var(--fs-xs); color: var(--ink-3); }
.tsh-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.tool-error {
  margin-top: var(--sp-4); padding: .6rem .9rem;
  font-size: var(--fs-sm); color: #8c2f16;
  background: #fbeee9; border: var(--bw-1) solid #e8c6b8; border-radius: var(--r-md);
}

/* ---------- Kết quả ---------- */
.tool-result { padding: var(--sp-10) var(--sp-8); border-top: var(--bw-1) solid var(--line); background: var(--beige); }
@media (min-width: 48rem) { .tool-result { padding: var(--sp-12); } }
.tool-result-head { text-align: center; margin-bottom: var(--sp-10); }
.tool-result-head h3 { margin: var(--sp-3) 0 var(--sp-2); }
.tool-result-head > p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 34rem; margin: 0 auto; }
.tool-result-note { margin-top: var(--sp-4) !important; font-size: var(--fs-xs) !important; color: var(--ink-3) !important; }
.big-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; margin-top: var(--sp-4);
  border-radius: var(--r-circle);
  background: linear-gradient(150deg, var(--gold-500), var(--gold-700));
  color: #fff; font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  box-shadow: 0 6px 22px rgba(177,138,82,.35);
}
.tool-sub { margin: var(--sp-10) 0 var(--sp-5); font-size: 1.05rem; color: var(--c-heading); }
.tool-disclaimer {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-relaxed);
}

/* ---------- Lưới chỉ số thần số học ---------- */
.idx-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.idx-card { padding: var(--sp-5); background: #fff; border: var(--bw-1) solid var(--line); border-radius: var(--r-lg); }
.idx-card.is-main { border-color: var(--gold-500); box-shadow: 0 0 0 2px rgba(177,138,82,.16); }
.idx-top { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.idx-num {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--r-circle);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--beige); color: var(--gold-800);
  font-family: var(--font-display); font-size: 1.2rem;
}
.idx-card h4 { margin: 0; font-size: 1rem; color: var(--c-heading); }
.idx-q { font-size: var(--fs-xs); color: var(--ink-3); }
.idx-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); }
.idx-from { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Bảng chữ cái Pythagoras ---------- */
.tsh-alphabet { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
.alpha-col {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: var(--sp-4) var(--sp-2);
  background: #fff; border: var(--bw-1) solid var(--line); border-radius: var(--r-md);
}
.alpha-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-700); }
.alpha-letters { font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--ink-2); }

/* ---------- Ý nghĩa các con số ---------- */
.num-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.num-card { padding: var(--sp-6); background: #fff; border: var(--bw-1) solid var(--line); border-radius: var(--r-lg); }
.num-card.is-master { border-color: var(--gold-500); background: linear-gradient(180deg, #fffdf8, #fff); }
.num-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; border-radius: var(--r-circle);
  background: var(--beige); color: var(--gold-800);
  font-family: var(--font-display); font-size: 1.35rem; margin-bottom: var(--sp-3);
}
.num-card.is-master .num-badge { background: linear-gradient(150deg, var(--gold-500), var(--gold-700)); color: #fff; }
.num-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.num-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); }

/* ---------- Bát Cực Linh Số ---------- */
.star-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.star-card { padding: var(--sp-6); background: #fff; border: var(--bw-1) solid var(--line); border-radius: var(--r-lg); border-top-width: 3px; }
.star-card.is-cat { border-top-color: var(--gold-600); }
.star-card.is-hung { border-top-color: #a8705c; }
.star-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.star-head h3 { margin: 0; font-size: 1.15rem; }
.star-tag { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.star-card.is-cat .star-tag { color: var(--gold-700); }
.star-card.is-hung .star-tag { color: #a8705c; }
.star-pairs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: var(--sp-3); }
.star-pairs span {
  font-size: var(--fs-xs); padding: .15rem .45rem; border-radius: var(--r-sm);
  background: var(--beige); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.star-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); }

.ratio-bar { height: .7rem; border-radius: var(--r-pill); background: #e0cdc2; overflow: hidden; margin: var(--sp-5) auto var(--sp-3); max-width: 26rem; }
.ratio-cat { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-700)); }
.ratio-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; font-size: var(--fs-xs); }
.ratio-legend .is-cat { color: var(--gold-800); }
.ratio-legend .is-hung { color: #a8705c; }
.ratio-legend .is-neutral { color: var(--ink-3); }

.pair-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.pair-cell {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md);
  background: #fff; border: var(--bw-1) solid var(--line);
}
.pair-cell.is-cat { border-color: var(--gold-500); background: #fffdf7; }
.pair-cell.is-hung { border-color: #dcb9ab; background: #fdf7f4; }
.pair-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pair-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pair-cell.is-cat .pair-name { color: var(--gold-800); }
.pair-cell.is-hung .pair-name { color: #a8705c; }
.pair-cell.is-neutral .pair-name { color: var(--ink-3); }
.pair-pos { font-size: .68rem; color: var(--ink-3); }

.tally-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.tally-list li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: #fff; border: var(--bw-1) solid var(--line); font-size: var(--fs-sm);
}
.tally-list li.is-cat { border-color: var(--gold-500); }
.tally-list li.is-hung { border-color: #dcb9ab; }
.tally-list span { color: var(--ink-3); font-size: var(--fs-xs); }

.tsh-foot-note { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }

/* Chuỗi nguyên lý số → vận mệnh (trang Sim Linh Số Thượng Lưu) */
.chain-list {
  display: grid; gap: var(--sp-4); list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  counter-reset: chain;
}
.chain-list li {
  position: relative; padding: var(--sp-6) var(--sp-5);
  border: var(--bw-1) solid rgba(214,188,133,.22);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
}
.chain-list li span {
  display: block; font-family: var(--font-display); font-size: 1.1rem;
  color: var(--gold-400); margin-bottom: var(--sp-2);
}
.chain-list li strong { display: block; color: var(--on-dark); margin-bottom: .3rem; }
.chain-list li p { margin: 0; font-size: var(--fs-sm); color: var(--on-dark-2); line-height: var(--lh-relaxed); }

.tier-box { padding: var(--sp-8); border-radius: var(--r-xl); border: var(--bw-1) solid var(--line); background: #fff; }
.tier-box.is-cat { border-top: 3px solid var(--gold-600); }
.tier-box.is-hung { border-top: 3px solid #a8705c; }
.tier-tag { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.tier-box.is-cat .tier-tag { color: var(--gold-700); }
.tier-box.is-hung .tier-tag { color: #a8705c; }
.tier-names { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--c-heading); line-height: 1.5; }

/* Ghi chú nhỏ đặt trong khối nền tối phải đổi sang màu chữ của nền tối —
   nếu không thì xám trên nâu đậm, tương phản chỉ 2.4 và gần như không đọc được. */
.section-dark .tsh-foot-note,
.section-dark-2 .tsh-foot-note,
.cta-final .tsh-foot-note { color: var(--on-dark-3); }

/* Dòng nêu mức phí ở trang công cụ — nổi hơn chữ thường một chút để người
   đọc không bỏ sót ranh giới giữa bước miễn phí và bước có phí. */
.fee-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--beige);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
}
.fee-note strong { color: var(--ink); }

/* ---------- Thẻ sản phẩm: dòng giá, mô tả, gạch đầu dòng, nút ---------- */
.p-price-line {
  margin: .15rem 0 .35rem;
  font-size: var(--fs-md);
  color: var(--gold-800);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.p-price-line strong { font-weight: var(--fw-semibold); }
/* Giá sỉ nhỏ và nhạt hơn giá lẻ để không tranh chỗ, nhưng vẫn đọc được */
.p-price-bulk { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 400; }
.p-price-line.p-price-contact { color: var(--gold-800); font-style: italic; font-size: var(--fs-sm); }

.p-short {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
}

.p-highlights {
  list-style: none; padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.p-highlights li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.p-highlights li::before {
  content: "•";
  position: absolute; left: 0; top: -.05em;
  color: var(--gold-600); font-size: 1.1em;
}

/* Nút chiếm trọn bề ngang, luôn nằm đáy thẻ để các thẻ thẳng hàng nhau */
.p-card-cta {
  margin-top: auto;
  padding-top: .8rem; padding-bottom: .8rem;
  justify-content: center;
  width: 100%;
}
.p-card-body > .p-card-cta { margin-top: auto; }
.p-highlights + .p-card-cta { margin-top: var(--sp-5); }

/* ---------- Bài viết dài trong trang chi tiết sản phẩm ---------- */
.product-story {
  margin-top: var(--sp-16);
  padding: var(--sp-12) 0;
  border-top: var(--bw-1) solid var(--line);
}
.product-story h2 {
  margin-bottom: var(--sp-6);
  text-wrap: balance;
}
.product-story p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.product-story p + p { margin-top: var(--sp-5); }
/* Đoạn cuối là lời lưu ý về giới hạn của vật phẩm — tách ra cho nhẹ giọng hơn */
.product-story p:last-child {
  margin-top: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--gold-500);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-style: italic;
}