/* ════════════════════════════════════════════════════════════
   SILENT.S — NOIR EXPERIENCE (phương án 2, one-page)
   Dark noir + pink accent. Chỉnh biến tại :root.
   ════════════════════════════════════════════════════════════ */

@font-face { font-family:'Bradley';  src:url('../assets/fonts/BradleyDJR.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Tegomin';  src:url('../assets/fonts/NewTegomin-vn.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Avaleigh'; src:url('../assets/fonts/SVN-Avaleigh-Regular.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Avaleigh'; src:url('../assets/fonts/SVN-Avaleigh-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }

:root {
  --pink:#f5a3c3;
  --pink-strong:#ef7fae;
  /* nền NÚT hồng — nhạt hơn màu nhấn để chữ ĐEN trên nút dễ đọc */
  --pink-fill:#f5a3c3;
  --pink-fill-hover:#f08fb6;
  --bg:#080706;
  --bg-2:#100d0a;
  --line:rgba(236,230,218,.14);
  --text:#ece6da;
  --muted:#9b917f;
  --overlay:rgba(16,13,10,.92);
  --accent-ink:#10090d;
  --kraft:url('../assets/brand/kraft-black.jpg');   /* pattern nền — hub tráo được ở mục Nhận diện */
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ── VAI TRÒ FONT (16/08) ─────────────────────────────────────────────
     Trước đây font cắm cứng ở 75 chỗ rời rạc — đổi 1 vai phải sửa 75 dòng.
     Nay gom về 4 vai; hub gán file font vào từng vai ở mục «Nhận diện»
     (tab Thư viện) và ghi đè khối này khi trả trang. */
  --f-tieude:'Bradley',serif;                      /* tiêu đề lớn · tên SP · giá */
  --f-vietay:'Avaleigh',cursive;                   /* chữ viết tay hồng · tag chương */
  --f-giaodien:'Tegomin',serif;                    /* nhãn · nút · breadcrumb · chú thích */
  --f-noidung:'Tegomin','Times New Roman',serif;   /* chữ đọc dài trong thân trang */
}
[data-theme="light"] {
  --pink:#c23a74;
  --pink-strong:#a92a61;
  /* light: nút hồng NHẠT hẳn xuống (không dùng #c23a74 đậm) — chữ đen rõ */
  --pink-fill:#eda3c5;
  --pink-fill-hover:#e78ab4;
  --bg:#f0ece4;
  --bg-2:#e7e1d6;
  --line:rgba(27,23,18,.16);
  --text:#1b1712;
  --muted:#6f675a;
  --overlay:rgba(250,248,243,.94);
  --accent-ink:#fff;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* NÚT/Ô NHẬP kế thừa font của site (mặc định trình duyệt dùng font hệ thống → lỗi font trên nút) */
button, input, select, textarea { font-family:inherit; }
/* 05/09 — scroll-padding-top BÁM chiều cao header thật thay vì cắm cứng 64px.
   Header là position:fixed nên mốc neo nào cuộn tới cũng nằm dưới nó. Con số 64
   cứng đã lệch: đo trên bản dựng hiện tại header cao 66px, tức mốc bị che 2px, và
   ở bố cục khác (mobile, hoặc sau khi font tải xong làm header cao lên) thì lệch
   nhiều hơn. syncHdrHeight() đã đo và ghi sẵn --hdr-h — dùng nó, cộng 12px thở.
   Giữ 64px làm giá trị lui cho lúc JS chưa kịp chạy. */
html { scroll-behavior:smooth; overflow-x:hidden; width:100%; scroll-snap-type:y proximity; scroll-padding-top:calc(var(--hdr-h, 64px) + 12px); }
/* mỗi mục lớn cuộn dừng gọn đúng đầu mục (snap) — KHÔNG ép min-height:100dvh
   nữa: khi nội dung 1 mục ngắn hơn màn hình, ép cứng + canh giữa lại tạo ra
   khoảng trắng thừa phía trên/dưới = đúng thứ đang muốn tránh. Độ "gọn 1 màn
   hình" giờ đến từ việc siết padding dọc của từng mục thay vì ép chiều cao. */
.hero, .manifesto, .symbols, .craft, .showcase, .contact {
  scroll-snap-align:start; scroll-snap-stop:normal;
}
body {
  font-family:var(--f-noidung);
  background:var(--bg) var(--kraft);
  background-size:520px; background-blend-mode:multiply;
  color:var(--text); line-height:1.65; overflow-x:hidden; width:100%; max-width:100vw;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
/* an toàn chung: chỉ chặn tràn NGANG (dọc để tự do — overflow:hidden theo
   chiều dọc từng bị lỗi che mất sketch phía trên, đã bỏ) */
.pmodal-box { overflow-x:hidden; }
[data-theme="light"] body { background-image:none; }
::selection { background:var(--pink); color:var(--accent-ink); }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--pink); color:#10090d; }
.wrap { width:min(92vw,1360px); margin:0 auto; }
/* trang kho Dấu ấn: nội dung phủ ngang rộng hơn, tự co theo màn hình */
.wrap.wrap-wide { width:min(96vw,1760px); }

/* language: html.lang-en shows .en */
.en { display:none; }
html.lang-en .en { display:revert; }
html.lang-en .vi { display:none; }

/* ── loader ─────────────────────────────── */
.loader {
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:clip-path 1s var(--ease-out);
  clip-path:inset(0 0 0 0);
}
.loader.done { clip-path:inset(0 0 100% 0); pointer-events:none; }
/* biểu tượng Lạc dạng LINE (viền) bọc lấy con số ở giữa
   — dark: line hồng · light: line đen */
.loader-mark {
  position:relative; width:clamp(170px,42vw,230px); aspect-ratio:207/337; /* tỉ lệ logo Lạc */
  display:flex; align-items:center; justify-content:center;
  animation:pulse 2s ease-in-out infinite;
}
/* logo Lạc dạng shape thông thường, mờ, nằm DƯỚI số đếm */
.loader-mark-line {
  position:absolute; inset:0; z-index:0;
  background:var(--brand-symbol,url('../assets/brand/symbol-pink.png')) center / contain no-repeat;
  opacity:.16;
}
[data-theme="light"] .loader-mark-line { opacity:.2; }
@keyframes pulse { 50% { transform:scale(1.05); opacity:.85; } }
.loader-count {
  position:relative; z-index:1;
  font-family:var(--f-tieude); font-size:clamp(44px,7vw,84px); color:var(--pink); line-height:1;
  text-shadow:0 0 30px var(--bg), 0 0 14px var(--bg);
}
[data-theme="light"] .loader-count { color:#1b1712; }
.loader-tag { font-family:var(--f-vietay); font-size:22px; color:var(--muted); }

/* ── grain + cursor + progress ───────────── */
.grain {
  position:fixed; inset:-100%; z-index:90; pointer-events:none; opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 12%{transform:translate(-4%,3%)} 25%{transform:translate(3%,-5%)}
  37%{transform:translate(-3%,-2%)} 50%{transform:translate(5%,4%)} 62%{transform:translate(-5%,1%)}
  75%{transform:translate(2%,5%)} 87%{transform:translate(4%,-3%)}
}
.cursor {
  position:fixed; z-index:95; top:0; left:0; width:14px; height:14px;
  border:1px solid var(--pink); border-radius:50%; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease);
  mix-blend-mode:difference;
}
.cursor.is-hover { width:52px; height:52px; background:rgba(245,163,195,.15); }
.cursor.is-big { width:110px; height:110px; background:var(--pink); mix-blend-mode:difference; }
/* 05/09 (E2) — kính lúp trên ảnh sản phẩm: vòng tròn vừa phải kèm dấu ⌕, để khách
   hiểu «rê vào đây là phóng được» mà không che mất chính chỗ đang xem. */
.cursor.is-zoom { width:44px; height:44px; background:rgba(245,163,195,.12); }
.cursor.is-zoom .cursor-label { opacity:1; font-size:17px; letter-spacing:0; color:var(--pink); }
.cursor-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bg); opacity:0; }
.cursor.is-big .cursor-label { opacity:1; }
@media (hover:none) { .cursor{display:none} }
.cursor.is-scrolling { opacity:0 !important; } /* ẩn khi đang cuộn/vuốt để không đè lên thẻ (17/07) */
/* con trỏ tuỳ chỉnh chỉ có ý nghĩa ở bố cục desktop rộng — ở bố cục mobile
   (kể cả khi xem qua khung xem trước desktop giả lập mobile, vốn vẫn có
   chuột thật nên hover:none không lọc được) nó chỉ gây vướng/chèn vào
   filter, thẻ sản phẩm… nên ẩn hẳn (17/07). */
@media (max-width:860px) { .cursor { display:none !important; } }
.progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--pink); z-index:96; }

/* ── header ─────────────────────────────── */
.hdr {
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:14px min(4vw,48px);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.hdr-logo { justify-self:start; }
.hdr-nav { justify-self:center; }
.hdr-tools { justify-self:end; }
.hdr.scrolled { background:rgba(8,7,6,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.hdr.hidden { transform:translateY(-110%); }
.hdr-logo img { height:31px; }
.hdr-nav { display:flex; gap:26px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.hdr-nav a { position:relative; padding:4px 0; color:var(--muted); transition:color .3s; }
.hdr-nav a:hover { color:var(--pink); }
.hdr-nav a::after {
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--pink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.hdr-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.lang-btn {
  font-family:var(--f-giaodien); font-size:12px; letter-spacing:.2em;
  background:none; border:1px solid var(--line); color:var(--text);
  border-radius:99px; padding:7px 16px; cursor:pointer; transition:all .3s;
}
.lang-btn:hover { border-color:var(--pink); color:var(--pink); }
@media (max-width:860px){ .hdr-nav{display:none} }

/* ── hero ───────────────────────────────── */
.hero { position:relative; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.08) brightness(.7); }
/* ══ 08/09 (SS) — CLIP NỀN PHẢI LÀ NỀN, KHÔNG PHẢI TRÌNH PHÁT ══════════════
   iOS vẽ một nút play rất to giữa mọi thẻ <video> chưa phát; đó là lý do clip đầu
   trang và clip Chế tác trên iPhone trông như «một clip rời bấm vào mới hiện».
   Luật dưới gỡ đúng nút đó, và `pointer-events:none` để chạm vào khung không mở
   trình phát của hệ điều hành — hai khối này là nền trang trí, không phải thứ để
   khách điều khiển. (Clip đo size và clip vệ sinh KHÔNG nằm trong luật này: hai
   cái đó khách cần bấm được.) */
.hero-video::-webkit-media-controls-start-playback-button,
.craft-video video::-webkit-media-controls-start-playback-button {
  display:none !important; -webkit-appearance:none; }
.hero-video, .craft-video video { pointer-events:none; }
/* khi rơi về ảnh tĩnh thì khung tự mang poster làm nền (xem epClipNen) */
.clip-tinh { background-repeat:no-repeat; }
.hero-shade { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 20%, rgba(8,7,6,.82) 100%), linear-gradient(rgba(8,7,6,.35), rgba(8,7,6,.15) 40%, rgba(8,7,6,.9)); }
.hero-inner { position:relative; z-index:2; text-align:center; padding:0 4vw; }
.hero-kicker { font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-bottom:2vh; }
.hero-title {
  font-family:var(--f-tieude); font-weight:400;
  font-size:clamp(64px,15.5vw,240px); line-height:.95; letter-spacing:.01em;
  color:#ece6da; /* luôn sáng — chữ nằm trên video tối */
  text-shadow:0 0 80px rgba(245,163,195,.25);
}
.hero-title .ch { display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; transition:transform 1s var(--ease-out), opacity .6s; }
.hero-title.in .ch { transform:none; opacity:1; }
/* 05/09 — WORDMARK thay chữ Silent.S (slot đặt ở hub › Thư viện › Nhận diện).
   Dùng ĐÚNG transform/transition của .ch để ảnh hiện lên cùng nhịp với phần chữ
   còn lại của hero — chỉ khác là một khối thay vì rơi từng ký tự (ảnh không tách
   ký tự được).

   06/09 — CÂN LẠI BỀ RỘNG. Bản đầu để width:min(74vw,920px): đo trên khung 1440
   ra khối cao 282px, trong khi khối CHỮ cũ (clamp(64px,15.5vw,240px), line-height
   .95) chỉ cao 212px — wordmark nặng hơn một phần ba và ép sát dòng kicker.
   Lý do là ảnh KHÔNG có lề: wordmark-white.png 1392×427, ink chạm cả bốn mép, còn
   chữ thì luôn có side bearing + leading. Nên bề rộng ở đây quy ngược từ chiều cao
   của khối chữ cũ: 212px × tỉ lệ 3,26 ≈ 690px.

   06/09 (SS) — muốn to ở đầu trang nên đã đưa lại 64vw, rồi SS bảo bớt 30%:
   64vw × 0,7 = 45vw (940 → 658, 280 → 196). Đây là con số ĐANG DÙNG. Chỗ
   chật chội trước đây KHÔNG phải do to, mà do file ảnh không có lề: nên cách chữa
   đúng là margin-block ở dưới + xuất lại wordmark CÓ lề trong suốt sẵn (xem
   CHUAN-ANH-SAN-PHAM.md, mục wordmark), chứ không phải thu nhỏ ảnh.
   Hai số trong clamp() = cỡ nhỏ nhất/lớn nhất. Sàn 280px giữ cho mobile không hụt
   — dưới 438px bề NGANG mới là ràng buộc chứ không phải chiều cao. */
.hero-title.co-wordmark { text-shadow:none; line-height:1; }
.hero-title .hero-wordmark {
  display:block; margin:1.4vh auto; width:clamp(196px, 45vw, 658px); height:auto;
  transform:translateY(110%) rotate(6deg); opacity:0;
  transition:transform 1s var(--ease-out), opacity .6s;
}
.hero-title.in .hero-wordmark { transform:none; opacity:1; }
.hero-sub { font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--pink); margin-top:2.5vh; }
.hero-scroll {
  position:absolute; z-index:3; bottom:86px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:max-content; /* co theo chữ dài hơn (bản EN) để không lệch tâm (17/07) */
}
/* ép 1 dòng — bản EN dài hơn VI nên hay bị xuống dòng, làm khối lệch vị
   trí (vạch + chấm phía dưới bị đẩy xuống) so với bản VI (17/07) */
.hero-scroll span { white-space:nowrap; }
.hero-scroll i { width:1px; height:44px; background:var(--line); position:relative; overflow:hidden; }
.hero-scroll i::after { content:''; position:absolute; inset:0; background:var(--pink); animation:drip 1.8s var(--ease) infinite; }
@keyframes drip { 0%{transform:translateY(-100%)} 60%{transform:translateY(0)} 100%{transform:translateY(100%)} }

/* ── marquee ────────────────────────────── */
.marquee { overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hero-marquee { position:absolute; z-index:3; bottom:0; left:0; right:0; background:rgba(8,7,6,.72); backdrop-filter:blur(6px); }
.marquee-track { display:inline-flex; will-change:transform; }
.marquee-track > span {
  display:inline-flex; align-items:center; padding:12px 0;
  font-family:var(--f-vietay); font-size:clamp(18px,2.2vw,26px); color:var(--pink);
}
.marquee-imgs > span { padding:16px 0; gap:16px; }
.marquee-imgs img { height:clamp(120px,16vw,210px); width:auto; border-radius:6px; filter:grayscale(.5) brightness(.85); transition:filter .5s; }
.marquee-imgs img:hover { filter:none; }

/* ── section commons ────────────────────── */
.sec-index { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--pink); margin-bottom:26px; }
:root { --co-tieude:clamp(30px,4.6vw,66px); }
/* 08/09 — HỆ SỐ ĐỆM DỌC GIỮA CÁC MỤC. applyTypo() (thanh «khoảng cách» trong hub)
   trước đây phun ra một BẢN SAO của mọi giá trị padding kèm !important, nên sửa số
   trong file này là vô nghĩa — đây là lần thứ NĂM cùng một cơ chế gây lỗi. Nay hub
   chỉ đặt lại đúng biến này, còn con số nền nằm duy nhất ở dưới. */
:root { --dem:1; }
/* câu hồng của Tuyên ngôn to hơn 44% so với cỡ chữ viết tay chung (SS chốt 08/09) */
:root { --co-vietay-mf:calc(var(--co-vietay) * 1.44); }
.ngat-mb { display:none; }
.sec-title { font-family:var(--f-tieude); font-weight:400; font-size:var(--co-tieude); line-height:1.12; max-width:20em; }

/* split-text reveal */
/* nới khung mask (padding) + bù lại bằng margin âm — để DẤU tiếng Việt
   (ấ ậ ễ …) không bị overflow:hidden cắt cụt khi dùng font Bradley */
.split .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding:.22em .08em .1em; margin:-.22em -.08em -.1em; }
.split .w > i { display:inline-block; font-style:normal; transform:translateY(130%); transition:transform .9s var(--ease-out); }
.split.in .w > i { transform:none; }

/* generic reveal */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal-clip { clip-path:inset(12% 6% 12% 6% round 14px); transition:clip-path 1.2s var(--ease-out); }
.reveal-clip.in { clip-path:inset(0 0 0 0 round 0); }

/* ── manifesto ──────────────────────────── */
/* 08/09 (SS: «giữa các mục ở trang chủ sát nhau quá») — nới đệm dọc của ba mục
   chính trang chủ. Chỉ đổi CON SỐ, không đụng cấu trúc. */
.manifesto { padding:calc(11vh * var(--dem)) 0 calc(12vh * var(--dem)); }
/* 16/07 (SS): PHÂN CẤP CHỮ ĐỒNG BỘ — title mục (01) dùng ĐÚNG cỡ .sec-title
   như mọi mục khác (trước đây to hơn hẳn 34-84px, lệch hệ thống). */
.manifesto-text { font-family:var(--f-tieude); font-weight:400;
  font-size:var(--co-tieude-mf, var(--co-tieude)); line-height:1.12; }
/* 07/09 — BỎ max-width:1100px. Khối hai cột này chỉ rộng 1100px trong khi .wrap
   của mục rộng 1325px, nên cột phải dừng sớm 225px so với lề phải — nhìn như cả
   khối bị lệch vào trong so với tiêu đề ngay phía trên nó. Nay khối chạy hết bề
   ngang của mục; phần cần giữ ngắn là ĐỘ DÀI DÒNG ĐỌC của đoạn xám, nên đặt hạn
   ở chính đoạn đó bằng em (theo cỡ chữ) chứ không hạn cả lưới bằng px. */
/* 07/09 (SS) — dong hong XUONG DUOI doan van, khong con nam cot phai.
   Mot cot: doan van truoc, cua vao trang Dau an ngay sau no. Do dai dong doc cua
   doan xam van bi han bang em o luat ngay duoi, nen bo hai cot khong lam dong chu
   dai ra qua muc doc duoc. */
/* ══ 07/09 tối (SS) — TUYÊN NGÔN: HAI CỘT, CHÂN KHỚP ═══════════════════════
   KHÔNG thêm thành phần nào — vẫn đúng câu tuyên ngôn, đoạn diễn giải, câu hồng
   kèm nhãn, dải thông số. Chỉ đổi lưới: đoạn diễn giải sang cột PHẢI, cụm câu
   hồng + nhãn xuống ngay dưới nó (cùng cột), cột trái để trọn cho câu tuyên ngôn.
   `align-items:end` là chỗ mấu chốt: hai cột canh theo ĐÁY nên dòng cuối của tiêu
   đề và dòng cuối của đoạn nằm trên cùng một đường ngang — khoảng trống còn lại
   thành khoảng thở có chủ ý thay vì chỗ bỏ quên. */
/* 08/09 (SS) — cột chữ NỚI RỘNG cho ngang tầm câu tuyên ngôn phía trên, cụm hồng
   dịch hẳn sang mép phải. Bỏ `max-width:34em` của đoạn: chính nó là thứ giữ đoạn
   lại ở khoảng nửa bề ngang trong khi cột đã rộng ra. */
.manifesto-foot { display:grid; grid-template-columns:2.05fr 1fr;
  gap:3.4vh clamp(26px,4vw,64px); margin-top:4vh; color:var(--muted); align-items:end; }
/* 08/09 (SS) — RIÊNG DESKTOP nâng cỡ đoạn này. Cột đã nới rộng bằng tiêu đề nên
   với cỡ chữ nền, mỗi dòng chứa quá nhiều từ và đoạn kết thúc bằng một chữ đứng
   một mình («thiện.»). Chữ to hơn thì số từ mỗi dòng giảm, dòng cuối tự đầy hơn.
   `text-wrap:pretty` là lớp thứ hai, xử nốt trường hợp còn sót. */
.manifesto-foot > p { max-width:none; font-size:clamp(17px,1.28vw,21px); line-height:1.85;
  text-wrap:pretty; }
.manifesto .manifesto-text { grid-column:auto; }
/* Câu hồng xuống hai dòng bằng <br> ĐẶT TAY trong index.html (ngắt ngay sau dấu
   gạch), không phải bằng max-width — SS muốn ngắt đúng chỗ đó, để trình duyệt tự
   vắt thì chữ «bạc.» rơi một mình xuống dòng.
   Cỡ chữ +20% hai lần (1.2 × 1.2 = 1.44): nhân vào BIẾN --co-vietay chứ không ghi
   số cứng, để thanh chỉnh cỡ
   chữ của hub vẫn còn tác dụng (bản CSS hub sinh ra nhân tiếp vào chính biến này). */
/* Cỡ chữ +44%: KHÔNG viết font-size ở đây. Bản CSS hub sinh ra phun
   `.manifesto-script{font-size:calc(var(--co-vietay) * <hệ số>) !important}` — có
   !important nên nó thắng mọi luật thường, kể cả luật cụ thể hơn. Nên chỗ chỉnh
   phải là CHÍNH CÁI BIẾN hub đang nhân vào. Hai bên nhân chồng lên nhau, thanh
   chỉnh cỡ chữ trong hub vẫn còn tác dụng. */
.mf-cta .manifesto-script { display:block; }
/* 07/09 (SS) — bớt 20%: clamp(28,3.4vw,46) × 0,8 = clamp(22,2.7vw,37). Dòng này
   nằm cạnh đoạn chữ xám cỡ 15px, để 46px thì nó át cả tiêu đề mục phía trên. */
/* 07/09 — co chu di qua BIEN --co-vietay chu khong viet thang. Bo ti le chu cua
   hub (applyTypo) sinh ra `font-size:calc(<he so> * <co goc>) !important`, va no
   giu MOT BAN SAO CUNG cua co goc: de literal thi luat mobile ben duoi khong bao
   gio thang duoc !important do. Dung bien thi ban sinh nhan voi CHINH bien, nen
   sua co o dau cung chay dung — ke ca theo media query. */
:root { --co-vietay:clamp(22px,2.7vw,37px); }
.manifesto-script { font-family:var(--f-vietay); font-size:var(--co-vietay); color:var(--pink); line-height:1.3; }
/* 06/09 — dòng viết tay ĐỒNG THỜI là cửa vào trang Dấu ấn & Chế tác (phương án A).
   Gạch chân vẽ dần bằng background-size thay vì text-decoration: chữ viết tay có
   nét thanh nét đậm, gạch chân mặc định cắt ngang chân chữ trông bẩn; nền chạy từ
   0 → 100% cho ra một nét mảnh dưới đáy dòng, dừng đúng chỗ. */
.mf-cta { display:block; text-decoration:none; justify-self:end; }
.mf-cta .u {
  background-image:linear-gradient(var(--pink), var(--pink));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .55s var(--ease-out);
}
.mf-cta:hover .u { background-size:100% 1px; }
/* ══ 08/09 (SS) — CÂU HỒNG PHẢI TỰ NÓI RẰNG NÓ BẤM ĐƯỢC ══════════════════════
   Trên điện thoại KHÔNG có thao tác rê, nên gạch chân vẽ-khi-rê chẳng bao giờ
   xuất hiện: câu hồng trông y như một câu chữ thường. Nay khi cụm này cuộn vào
   tầm mắt, gạch chân TỰ VẼ một lần từ trái sang phải, và mũi tên ở nhãn dưới nhích
   đi nhích lại. Rê chuột (desktop) vẫn vẽ lại như cũ — animation nhường chỗ cho
   transition vì nó chỉ chạy đúng một lượt rồi dừng ở 100%. */
/* Gạch chân VẼ ĐI VẼ LẠI theo chu kỳ, không chỉ vẽ một lượt rồi đứng im: vẽ một
   lượt xong thì nó thành một gạch chân tĩnh, mà gạch chân tĩnh trong bài viết là
   dấu hiệu của chữ được nhấn mạnh chứ không phải của nút bấm. Vẽ lại đều đặn mới
   đọc ra «đây là thứ chạm được». */
@keyframes mfVeGach {
  0%   { background-size:0 1px; }
  16%  { background-size:100% 1px; }
  72%  { background-size:100% 1px; }
  88%  { background-size:0 1px; background-position:100% 100%; }
  89%  { background-size:0 1px; background-position:0 100%; }
  100% { background-size:0 1px; background-position:0 100%; }
}
.manifesto-foot.in .mf-cta .u { animation:mfVeGach 5.5s var(--ease-out) .35s infinite; }
.mf-cta:hover .u { animation:none; background-size:100% 1px; }
@keyframes mfNhichMuiTen { 0%,72%,100% { transform:translateX(0); } 84% { transform:translateX(7px); } }
.manifesto-foot.in .mf-go i { animation:mfNhichMuiTen 2.6s var(--ease) 1.1s infinite; }
.mf-cta:hover .mf-go i { animation:none; }
@media (prefers-reduced-motion:reduce){
  .manifesto-foot.in .mf-cta .u { animation:none; background-size:100% 1px; }
  .manifesto-foot.in .mf-go i { animation:none; }
}
.mf-go {
  display:block; margin-top:14px;
  font-family:var(--f-giaodien); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); transition:color .3s;
}
.mf-cta:hover .mf-go { color:var(--pink); }
.mf-go i { font-style:normal; display:inline-block; transition:transform .35s var(--ease-out); }
.mf-cta:hover .mf-go i { transform:translateX(8px); }

/* 07/09 — hai cửa ra cuối trang Dấu ấn: một cho khách, một cho đối tác. Không dồn
   cả hai vào một nút chung — hai người đọc khác nhau muốn đi hai hướng khác nhau. */
/* xác nhận đã copy câu chung trong popup Liên hệ nhanh — rỗng thì không chiếm chỗ */
.contact-pop .pop-note { margin:6px 2px 0; font-size:11.5px; line-height:1.5; color:var(--pink); }
.contact-pop .pop-note:empty { display:none; }
.loi-ra { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
/* 07/09 chiều (SS) — dải cửa ra của trang Dấu ấn căn GIỮA. Tiêu đề .sec-title có
   max-width nên phải `margin-inline:auto` mới thật sự vào giữa, chỉ text-align
   không đủ. Chỉ áp cho .loi-ra-giua, dải cửa ra ở trang khác giữ căn trái. */
/* 07/09 chiều lần 2 (SS) — dải cuối trang cần MỘT MẢNG NỀN để nổi lên. Trước đó
   nó chỉ là chữ trôi trên nền trang, đọc hết trang không thấy đâu là chỗ đi tiếp.
   Dùng nền --bg-2 + viền như .cta-band ở trang chủ để cùng một ngôn ngữ. */
.loi-ra-giua .wrap {
  text-align:center; background:var(--bg-2); border:1px solid var(--line);
  border-radius:20px; padding:clamp(34px,6vh,68px) clamp(20px,4vw,56px);
}
.loi-ra-giua .sec-title { margin-left:auto; margin-right:auto; }
.loi-ra-giua .loi-ra { justify-content:center; margin-top:clamp(18px,2.4vh,30px); }
@media (max-width:560px){
  /* 08/09 (SS: «chân trang to quá» ở mobile) — dải này đang chiếm gần trọn một màn:
     đệm dọc 6vh + tiêu đề hai dòng + hai nút xếp dọc. Siết đệm, hạ cỡ tiêu đề, và
     cho hai nút nằm CÙNG một hàng. */
  .loi-ra-giua .wrap { border-radius:14px; padding:22px 16px; }
  .loi-ra-giua .sec-title { font-size:clamp(22px,6.4vw,28px); }
  .loi-ra-giua .loi-ra { margin-top:16px; gap:8px; flex-wrap:wrap; }
  .loi-ra-giua .loi-ra .btn-line { padding:11px 15px; font-size:10px; letter-spacing:.1em; }
  .loi-ra-giua { padding-top:0; padding-bottom:0; margin-top:-1vh; }
}
/* Sketch nền của dải cuối trang. `overflow:hidden` trên .wrap để nét không tràn ra
   ngoài góc bo; chữ và nút nâng lên z-index 1 để không bị nét đè lên. */
.loi-ra-giua .wrap { position:relative; overflow:hidden; }
.loi-ra-giua .sec-title, .loi-ra-giua .loi-ra { position:relative; z-index:1; }
/* 07/09 tối (SS chọn A2) — nền dải cuối trang là PATTERN của bộ nhận diện, phủ
   hai mép và che hẳn khoảng giữa để chữ với nút nằm trên nền sạch.
   Bộ pattern có sẵn bản đen và bản trắng cho mỗi mẫu nên đổi THẲNG file theo nền,
   không dùng filter:invert — giữ đúng sắc độ designer xuất ra.
   ⚠ File gốc có viền trong suốt bao quanh hoa văn, lặp thẳng là hở đường nối. Bản
   trong assets/uploads/ đã cắt đúng chu kỳ (loop2: 621×981px) nên lặp liền mạch;
   nếu thay file khác thì phải cắt lại, đừng chép thẳng bản gốc vào. */
.lr-sketch {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('assets/uploads/loop2-den.png') repeat; background-size:210px;
  opacity:.30;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 15%,transparent 33%,transparent 67%,#000 85%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 15%,transparent 33%,transparent 67%,#000 85%,#000 100%);
}
[data-theme="dark"] .lr-sketch { background-image:url('assets/uploads/loop2-trang.png'); }
@media (max-width:700px){ .lr-sketch { background-size:150px; opacity:.24; } }
@media (max-width:560px){ .loi-ra { flex-direction:column; } .loi-ra .btn-line { text-align:center; } }
@media (max-width:900px){ .manifesto-foot{ grid-template-columns:1fr; align-items:start; } .mf-cta{ justify-self:start; } }

.spec-strip {
  /* 16/07 v2 (SS chỉnh): strip nằm TRONG .wrap (index.html) — lề 2 bên tự
     thẳng hàng với chữ/tiêu đề phía trên, không còn "lưng chừng giữa trang". */
  margin-top:5vh;
  /* 07/09 — margin-bottom: dai nay ket thuc bang mot ĐUONG KE, va ngay duoi no la
     nhan «(02) — San pham tieu bieu» cua muc ke tiep. Do ra chi cach 25px; o be
     ngang nao mot o phai xuong hai dong (vd «che tac bang tay tai Ha Noi») thi dai
     cao them ~28px va duong ke cat ngang qua chu — dung cai SS bao «bi chen».
     4vh la khoang khong the nuot het boi mot dong chu phu troi ra. */
  margin-bottom:4vh;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
/* desktop: cột đầu/cuối ép sát mép wrap để title «Bạc 925» thẳng cột với
   chữ phía trên; các cột giữa giữ đệm quanh kẻ dọc */
@media (min-width:901px){
  .spec:first-child { padding-left:0; }
  .spec:last-child { padding-right:0; }
}
/* PHÁT HIỆN GỐC RỄ (17/07): khối này có class .reveal (mờ dần khi cuộn tới),
   nhưng hiệu ứng CSS transition đôi khi bị "kẹt" giữa chừng (opacity dừng ở
   ~0.2, không lên hẳn 1) — tuỳ trình duyệt/thiết bị, khi tab bị chuyển nền
   hoặc cuộn nhanh. Đây chính là lý do "chữ hồng nhìn mờ/tối" dù màu và font
   trong code đã đúng — không phải lỗi màu/font, mà là hiệu ứng hiện-dần bị
   treo. Bỏ hẳn hiệu ứng mờ-dần cho riêng khối chỉ số này để luôn hiện rõ
   ngay, không phụ thuộc animation. */
.spec-strip.reveal { opacity:1 !important; transform:none !important; }
.spec { padding:34px 40px; border-left:1px solid var(--line); } /* phương án A: giữ bố cục 4 cột, chỉ nới khoảng cách (17/07) */
.spec:first-child { border-left:0; }
.spec b { display:block; font-family:var(--f-tieude); font-weight:400; font-size:clamp(21px,2.4vw,32px); color:var(--pink); margin-bottom:12px; } /* 16/07: SS yêu cầu giảm ~30% */
/* 4 số liệu (Bạc 925/Oxy hoá/100%/Trọn đời) phải TO ĐỀU NHAU như demo —
   trước đây mỗi mục có 1 ekey riêng nên lỡ chỉnh 1 mục qua Inspector là
   mục đó bị lệch cỡ so với 3 mục còn lại. Ép cỡ chữ đồng nhất bằng độ ưu
   tiên chọn lọc cao hơn 1 override lẻ (nếu còn sót) — không cần dọn đúng
   dữ liệu cũ trong trình duyệt (17/07). */
.spec-strip .spec b { font-size:clamp(21px,2.4vw,32px) !important; color:var(--pink) !important; }
/* ══ TÌM RA GỐC RỄ "title nhỏ + tối + VIẾT HOA" (16/07) ══
   Rule cũ `.spec span` (dành cho DÒNG PHỤ) bắt luôn cả span.vi/span.en nằm
   TRONG <b> tiêu đề — vì specificity trực tiếp (0,1,1) thắng giá trị kế thừa
   từ `.spec b`. Hậu quả: 4 tiêu đề bị ép 13px + uppercase + màu chữ thường
   (đúng ảnh SS chụp). Fix: chỉ nhắm span là CON TRỰC TIẾP của .spec, và chốt
   chặn cho span trong <b> luôn kế thừa cỡ/màu của tiêu đề. */
.spec > span { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text); opacity:.9; }
.spec b span { font-size:inherit !important; letter-spacing:0; text-transform:none; color:inherit !important; opacity:1; }
@media (max-width:900px){
  /* 16/07: mobile/tablet GIỮ TRÀN VIỀN như cũ (SS yêu cầu) — strip nằm trong
     .wrap nên phải tự phá khung ra full bề ngang màn hình; desktop vẫn căn wrap */
  .spec-strip{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  .spec-strip{grid-template-columns:1fr 1fr; grid-auto-rows:1fr}
  .spec:nth-child(3){border-left:0} .spec{border-top:1px solid var(--line)} .spec:nth-child(-n+2){border-top:0}
  /* cân đối 2x2: căn giữa + ép 2 hàng cao bằng nhau dù nhãn phụ dài/ngắn khác nhau (16/07) */
  .spec{ display:flex; flex-direction:column; justify-content:center; text-align:center; }
}

/* ── symbols chapters ───────────────────── */
.symbols { padding:calc(11vh * var(--dem)) 0 calc(5vh * var(--dem)); }
.chapter {
  position:relative; min-height:100svh; display:flex; align-items:center;
  border-top:1px solid var(--line); margin-top:16vh; overflow:hidden; padding:14vh 0;
}
.chapter-sketch {
  position:absolute; top:50%; width:min(52vw,660px); aspect-ratio:3/4; z-index:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.22; mix-blend-mode:normal; filter:invert(1); /* PNG nét đen → dark hiện trắng */
  pointer-events:none; will-change:transform;
}
.chapter:nth-child(odd) .chapter-sketch { right:-8%; }
.chapter:nth-child(even) .chapter-sketch { left:-8%; }
.chapter-num {
  position:absolute; top:8vh; font-family:var(--f-tieude);
  font-size:clamp(90px,17vw,270px); line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(245,163,195,.28); z-index:0; user-select:none;
}
.chapter:nth-child(odd) .chapter-num { left:2vw; }
.chapter:nth-child(even) .chapter-num { right:2vw; }
.chapter-grid {
  position:relative; z-index:2; width:min(92vw,1360px); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:6vw; align-items:center;
}
.chapter:nth-child(even) .chapter-grid > .chapter-body { order:2; }
.chapter-tag { font-family:var(--f-vietay); color:var(--pink); font-size:clamp(24px,3vw,40px); display:block; margin-bottom:6px; }
.chapter-name { font-family:var(--f-tieude); font-weight:400; font-size:clamp(52px,8vw,120px); line-height:1; }
.chapter-sub { font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:14px 0 24px; }
.chapter-story { color:var(--muted); max-width:34em; }
.chapter-cta { display:inline-block; margin-top:28px; }
.btn-line {
  display:inline-block; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:14px 28px;
  background:none; /* .btn-line cũng gắn lên <button> (không chỉ <a>) — <button> có
    nền mặc định của trình duyệt, phải nói rõ "trong suốt" thì mới đồng nhất mọi nơi */
  transition:border-color .3s, color .3s, background .3s;
  white-space:nowrap; /* không cho mũi tên/chữ trong nút rơi xuống dòng */
}
@media (max-width:700px){ .btn-line { font-size:11.5px; letter-spacing:.14em; padding:12px 20px; } }
.btn-line:hover { border-color:var(--pink); color:var(--pink); }

/* ══ 05/09 — DẢI CỬA VÀO TRANG DẤU ẤN ═════════════════════════════════════════
   Thay nút .btn-line mảnh nép cuối mục Tuyên ngôn — ở đó gần như không ai thấy để
   bấm. Nay CẢ DẢI là vùng bấm, có nền sketch mờ, viền trên/dưới tách khỏi hai mục
   kề, và mũi tên trượt sang khi rê chuột.
   Không dựng bảng màu mới: dùng đúng --pink / --line / --bg-2 của site. */
.cta-band {
  position:relative; display:block; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(28px,5vh,56px) 0; background:var(--bg-2);
  transition:background .4s var(--ease);
}
.cta-band:hover { background:var(--overlay); }
.cta-band .bg-sketch { opacity:.10; }
.cta-band-in {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-kicker {
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--pink);
  margin-bottom:10px;
}
.cta-title {
  font-family:var(--f-tieude); font-weight:400; line-height:1.2;
  font-size:clamp(21px,3vw,38px); max-width:22em; color:var(--text);
}
.cta-go {
  flex:none; display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--text);
  border:1px solid var(--pink-strong); border-radius:99px; padding:14px 26px;
  transition:background .3s, color .3s;
}
.cta-go i { font-style:normal; transition:transform .35s var(--ease-out); }
.cta-band:hover .cta-go { background:var(--pink); color:var(--bg); }
.cta-band:hover .cta-go i { transform:translateX(7px); }
@media (max-width:700px){
  .cta-band-in { flex-direction:column; align-items:flex-start; gap:18px; }
  .cta-go { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .cta-go i { transition:none; } }
.chapter-visual { position:relative; aspect-ratio:3/4; }
.chapter-visual .ph {
  position:absolute; border-radius:10px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.6);
  will-change:transform;
}
.chapter-visual .ph img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.chapter-visual .ph:hover img { transform:scale(1.06); }
.ph-main { inset:6% 10% 18% 0; }
.ph-alt  { right:0; bottom:0; width:46%; aspect-ratio:1; border:1px solid var(--line); }
.ph-tag {
  position:absolute; left:-2%; bottom:6%; font-family:var(--f-vietay);
  font-size:clamp(20px,2vw,28px); color:var(--pink);
  background:rgba(8,7,6,.8); padding:6px 18px; border-radius:99px; backdrop-filter:blur(4px);
}
@media (max-width:860px){
  .chapter-grid { grid-template-columns:1fr; gap:52px; }
  .chapter:nth-child(even) .chapter-grid > .chapter-body { order:0; }
  .chapter-sketch { width:80vw; opacity:.14; }
  .chapter { min-height:auto; }
}

/* ── craft ──────────────────────────────── */
.craft { padding:calc(5vh * var(--dem)) 0 calc(4vh * var(--dem)); }
.craft-note { color:var(--muted); max-width:44em; margin-top:2vh; }
/* 07/09 chiều — .craft-note nay có thể là <div> nhiều đoạn (chương Cảm hứng & dấu
   ấn). Giữ nguyên màu/bề ngang, chỉ định khoảng cách giữa các đoạn con. */
.craft-note p { margin:0 0 14px; }
.craft-note p:last-child { margin-bottom:0; }
.craft-video { position:relative; margin:3.5vh auto 0; width:min(92vw,1360px); }
.craft-video video { width:100%; max-height:52vh; object-fit:cover; border-radius:14px; filter:grayscale(.3) brightness(.85); }
.craft-video-tag { position:absolute; left:24px; bottom:18px; font-family:var(--f-vietay); font-size:22px; color:var(--pink); }
/* Thông tin chế tác — quy trình (theo ver 1), hiện luôn, tiêu đề HỒNG */
.craft-more-wrap { margin-top:3.5vh; }
.craft-more {
  text-align:left;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--line); padding-top:3.5vh;
}
.craft-step b { display:block; font-family:var(--f-tieude); font-weight:400; font-size:clamp(19px,2vw,26px); color:var(--pink); margin-bottom:10px; }
.craft-step p { font-size:13.5px; line-height:1.85; color:var(--muted); }
@media (max-width:860px){ .craft-more { grid-template-columns:1fr; } }

/* ── showcase ───────────────────────────── */
.showcase { padding:calc(10vh * var(--dem)) 0 calc(8vh * var(--dem)); }
.show-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:3.5vh; }
/* ══ 16/07 FIX «vuốt bị đè hình» trên mobile ══
   Màn cảm ứng: chạm/vuốt làm trình duyệt giữ trạng thái :hover DÍNH trên card
   vừa chạm → ảnh hover (im-b) hiện đè + card nhấc lên/scale kẹt luôn ở đó.
   Tắt toàn bộ hiệu ứng hover + magnetic cho thiết bị không có chuột. */
/* 16/07 v2: thêm (max-width:860px) — khung 📱 trong /editor chạy bằng CHUỘT
   (hover:none không khớp) nên kéo-vuốt bằng chuột vẫn kích hoạt hover/magnetic
   và kẹt transform → card lệch/cắt mép. Giờ mọi bề ngang mobile đều tắt. */
@media (hover:none), (pointer:coarse), (max-width:860px){
  .show-card:hover { transform:none !important; border-color:var(--line) !important; }
  .show-card:hover .im img.im-a, .pcard:hover .pimg img.im-a { transform:none !important; filter:brightness(.92) !important; }
  .show-card:hover .im .im-b, .pcard:hover .pimg .im-b { opacity:0 !important; }
  .magnetic { transform:none !important; }
  /* 16/07 v3: card highlight là .reveal (trượt-hiện translateY 34px) — VUỐT
     NGANG làm hiệu ứng kẹt giữa chừng → card đứng lệch 34px che đè phần dưới
     (cùng gốc bệnh .reveal kẹt của spec-strip). Mobile: card luôn hiện rõ ngay. */
  .show-grid .show-card.reveal, .show-grid .pcard.reveal, .show-grid.reveal {
    opacity:1 !important; transform:none !important; transition:border-color .4s;
  }
}
.show-card { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2); transition:border-color .4s, transform .6s var(--ease); }
.show-card:hover { border-color:var(--pink); transform:translateY(-6px); }
.show-card .im { aspect-ratio:1; overflow:hidden; position:relative; }
.show-card .im img { width:100%; height:100%; object-fit:cover; filter:brightness(.92); transition:transform .9s var(--ease), filter .5s, opacity .45s var(--ease); }
.show-card:hover .im img.im-a { transform:scale(1.08); filter:brightness(1.02); }
/* ảnh thứ 2 hiện khi hover */
.im .im-b { position:absolute; inset:0; opacity:0; }
.show-card:hover .im .im-b { opacity:1; }
body.edit-mode .show-card:hover .im .im-b { opacity:0; } /* đang chỉnh thì giữ ảnh 1 để kéo vị trí */
body.edit-mode .show-card .im { cursor:move; }
.show-meta { padding:12px 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.show-meta b {
  font-family:var(--f-tieude); font-weight:400; font-size:clamp(27px,2.9vw,38px); letter-spacing:.01em;
  flex:1; line-height:1.12; /* tên = phần nổi bật nhất của card */
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
/* dòng loại sản phẩm phía trên tên — chỉ là nhãn phụ, giữ nhỏ/kín đáo.
   display:block THẬT (không dùng <br> nữa, xem cardName() trong noir.js)
   để dòng này có line-height RIÊNG, không bị kéo giãn theo cỡ chữ to của tên SP
   (đây là nguyên nhân chính gây khoảng trống lệch giữa nhãn loại và tên). */
.cn-cat {
  display:block; font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-family:var(--f-giaodien); line-height:1.3; margin-bottom:5px;
}
.show-meta span { color:var(--pink); font-size:14px; text-align:right; line-height:1.25; flex:none; font-weight:600; }
/* tag nhóm thiết kế trên card */
.show-design {
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--pink); color:var(--pink);
  background:rgba(8,7,6,.75); border-radius:99px; padding:4px 12px; backdrop-filter:blur(3px);
}
[data-theme="light"] .show-design { background:rgba(250,248,243,.88); }
/* chỉ là nhãn phụ (biểu tượng) — giữ nhỏ, viền rõ để không tệp vào ảnh nền tối/sáng */
.show-sym {
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--f-giaodien); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink); border:1px solid var(--pink);
  background:rgba(8,7,6,.82); padding:5px 12px; border-radius:99px; backdrop-filter:blur(3px);
}
[data-theme="light"] .show-sym { background:rgba(250,248,243,.88); }
.show-more { text-align:center; padding:4vh 0 0; }
@media (max-width:1020px){ .show-grid{grid-template-columns:repeat(2,1fr)} }
/* mobile: hàng ngang vuốt xem thay vì xếp chồng — gọn trong 1 màn hình
   như cách deck-gallery đã làm với biểu tượng */
@media (max-width:700px){
  .show-grid {
    grid-template-columns:none; display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; padding-bottom:6px;
    /* 16/07 v2 (debug trực tiếp trên Chrome SS): .show-grid CHÍNH LÀ .wrap
       (không nằm trong wrap) nên tràn viền = width:100% + margin 0; card đầu
       căn đúng mép chữ = padding trái/phải khớp hệ lề wrap (4vw; ≤640px hub
       inject thêm .wrap padding 16px — bù ở block dưới). */
    width:100%; margin-left:0; margin-right:0;
    padding-left:4vw; padding-right:4vw; scroll-padding-left:4vw;
  }
  @media (max-width:640px){
    .show-grid { padding-left:calc(4vw + 16px); padding-right:calc(4vw + 16px); scroll-padding-left:calc(4vw + 16px); }
  }
  .show-grid::-webkit-scrollbar { display:none; }
  /* card kiểu mới (.pcard) — mobile: dải vuốt ngang, card đủ rộng */
  .show-grid .show-card, .show-grid .pcard { flex:none; width:min(68vw,280px); scroll-snap-align:start; }
}

/* ── contact / footer ───────────────────── */
.contact { padding:calc(10vh * var(--dem)) 0 0; margin-top:calc(6vh * var(--dem)); border-top:1px solid var(--line); position:relative; overflow:hidden; }
/* đồng bộ cỡ chữ với .sec-title (16/07) — trước đây to hơn hẳn (tới 110px),
   nhìn lệch tông so với các tiêu đề mục khác trong site */
.contact-big { font-family:var(--f-tieude); font-weight:400; font-size:var(--co-tieude); line-height:1.05; max-width:11em; }
/* liên hệ: cột trái = Kênh + Ghé xem, cột phải = form */
.contact-body { display:grid; grid-template-columns:.85fr 1.15fr; gap:5vw; margin-top:8vh; align-items:start; }
.contact-cols { display:flex; flex-direction:column; gap:5vh; }
@media (max-width:860px){ .contact-body{grid-template-columns:1fr; gap:40px} }
.contact-cols h4 { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:400; }
.contact-cols h4.mt { margin-top:22px; }
.contact-cols a { display:block; padding:7px 0; border-bottom:1px solid var(--line); transition:color .3s, padding-left .3s; }
.contact-cols a:hover { color:var(--pink); padding-left:8px; }
.contact-cols p { color:var(--muted); }
/* ══ LIÊN HỆ — MỘT KHỐI (SS chốt 16/08) ═══════════════════════════════════════
   Phương án 2 đảo chiều: thông tin bên TRÁI, form lời nhắn bên PHẢI (rộng hơn).
   Chip thành phố tô màu lấy từ phương án 3 — Hà Nội / TP.HCM phải bắt mắt ngay. */
/* 17/08 (SS): chân cột Liên hệ phải NGANG chân khung «Để lại lời nhắn» → hai cột
   kéo cao bằng nhau (stretch), cột trái là flex dọc để đẩy .vnote xuống đáy. */
.contact-body.lh2 { grid-template-columns:.95fr 1.35fr; gap:4.5vw; margin-top:7vh; align-items:stretch; }
.contact-body.lh2 .lh-info { display:flex; flex-direction:column; }
.contact-body.lh2 .lh-info .vnote { margin-top:auto; padding-top:26px; }
@media (max-width:980px){ .contact-body.lh2 { grid-template-columns:1fr; gap:44px; } }
.lh-info h4 { font-family:var(--f-giaodien); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin-bottom:13px; }
.lh-info h4.mt { margin-top:32px; }
.lh-info .lk a { display:block; padding:8px 0; border-bottom:1px solid var(--line); transition:color .3s, padding-left .3s; }
.lh-info .lk a:hover { color:var(--pink); padding-left:8px; }
.lh-form { border-left:1px solid var(--line); padding-left:4vw; }
@media (max-width:980px){ .lh-form { border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:30px; } }
/* 05/09 — MOBILE KHÔNG CÓ FORM Ở CHÂN TRANG. Vào bằng nút tắt (✎ Để lại lời nhắn)
   ở cụm nút góc phải, nó mở popup.
   Vì sao bỏ hẳn khỏi chân trang trên mobile: form này có 3 chế độ và tới 10 ô —
   nhét vào cuối một trang vốn đã dài là bắt khách vuốt qua nó mỗi lần xuống chân
   trang, mà phần lớn không định điền.
   CHỐT THEO TỔ TIÊN, không chốt theo #msgForm: khi mở popup, chính thẻ form này
   được DỜI vào .msg-box (xem moKhungNhan). Lúc đó nó không còn nằm trong .contact
   nên vẫn hiện bình thường — ẩn theo id là ẩn luôn cả trong popup. */
@media (max-width:700px){ .contact .lh-form { display:none; } }

/* ── điểm trưng bày ──
   16/08 (SS): BỎ khung riêng của từng điểm — không viền, không nền, không bo góc.
   Các điểm tách nhau bằng KHOẢNG TRỐNG, không bằng gạch. Giữ `article.vcard` làm
   tên lớp để index.html và noir.js › lhDiem không phải đổi theo. */
/* 17/08 (SS): giờ mở cửa đang rơi quá xa địa chỉ — kéo sát lại.
   Khe trong một điểm (gap) 9→5px, còn khoảng cách GIỮA hai điểm giữ nguyên 34px
   để hai nơi vẫn tách bạch. `.vfoot` cũng bỏ margin trên thừa. */
.vcard {
  border:0; border-radius:0; padding:0; background:none;
  margin-top:34px;
  display:flex; flex-direction:column; gap:5px;
}
.vcard:first-child { margin-top:12px; }
.vcard .vaddr { margin-bottom:2px; }
/* dòng nhắc «điểm trưng bày ký gửi» ngay dưới tiêu đề Ghé xem trực tiếp */
.vnote {
  font-family:var(--f-giaodien); font-size:12.4px; line-height:1.6;
  color:var(--muted); margin-top:6px; max-width:56ch;
}
.vcard-top { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.vcard-top .vname { font-family:var(--f-tieude); font-weight:400; font-size:clamp(21px,2.1vw,27px);
  line-height:1; letter-spacing:.01em; color:var(--text); text-transform:none; margin:0; }
/* chip thành phố — nền hồng, chữ tối; đây là thứ SS muốn bắt mắt trước tiên */
.vcity {
  font-family:var(--f-giaodien); font-size:10px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--pink-fill); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.vaddr { font-size:14.2px; line-height:1.5; color:var(--text); }
/* 16/08 (SS): BỎ gạch ngang dưới địa chỉ. */
.vhours {
  font-family:var(--f-giaodien); font-size:12.6px; line-height:1.7; color:var(--muted);
}
/* 16/08 (SS): nút «Chỉ đường» nằm NGANG HÀNG với DÒNG CUỐI của phần thông tin.
   `align-items:flex-end` là chỗ mấu chốt — Casanova có 2 dòng giờ, nút phải bám
   dòng dưới cùng chứ không phải giữa khối. Màn hẹp thì tự xuống dòng. */
/* 17/08 (SS): giờ mở cửa bị TỤT XA địa chỉ. Gốc: hàng này để align-items:flex-end
   nên .vhours (1 dòng, thấp hơn nút) bị dìm xuống đáy hàng, còn .vbtn lại
   align-self:flex-start nên nằm trên — ngược hẳn ý muốn. Đảo lại: giờ bám MÉP
   TRÊN (sát ngay địa chỉ), nút «Chỉ đường» bám MÉP DƯỚI. Casanova có 2 dòng giờ
   thì hàng cao bằng giờ, nút vẫn ngang dòng cuối — vẫn đúng yêu cầu 16/08. */
.vfoot {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px 22px; flex-wrap:wrap;
}
.vfoot .vhours { flex:1 1 auto; min-width:0; }
.vbtn {
  align-self:flex-end; display:inline-block; flex:0 0 auto;
  font-family:var(--f-giaodien); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 19px; border:1px solid var(--pink); border-radius:999px; color:var(--pink);
  transition:background .3s, color .3s;
}
.vbtn:hover { background:var(--pink-fill); color:var(--accent-ink); border-color:var(--pink-fill); }
.soon { font-family:var(--f-vietay); font-size:24px; color:var(--pink) !important; }
@media (max-width:760px){ .contact-cols{grid-template-columns:1fr} }
.footer-giant {
  margin-top:12vh; text-align:center; font-family:var(--f-tieude);
  font-size:clamp(80px,17.5vw,280px); line-height:.8; transform:translateY(18%);
  color:transparent; -webkit-text-stroke:1px rgba(245,163,195,.3);
  user-select:none; pointer-events:none;
}
.footer-base {
  display:flex; justify-content:center; text-align:center; gap:20px; flex-wrap:wrap;
  padding:26px 0 30px; border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  position:relative; z-index:2; background:var(--bg);
}

/* ════════════════════════════════════════════════════════════
   TRANG CON (catalogue / policies)
   ════════════════════════════════════════════════════════════ */
.subpage { padding-top:0; }
.subpage .hdr { background:linear-gradient(rgba(8,7,6,.94), rgba(8,7,6,0)); }
/* 07/09 — đệm trên phải TRỪ ĐI chiều cao header cố định. Trước là 8vh: trên màn
   900px ra 72px, mà header cao 66px — dòng «(Dấu ấn) — Nguồn gốc & chế tác» chỉ
   cách gầm header 18px, và mặt nạ chữ chạy của .split còn kéo tiêu đề đè lên nó
   thêm 8px nữa. --hdr-h do JS đo header thật rồi đặt (syncHdrHeight). */
.sub-hero { padding:calc(var(--hdr-h,64px) + 7vh * var(--dem)) 0 calc(3vh * var(--dem)); }
/* 07/09 — MUC DAU TIEN cua mot trang con phai tu chua cho header co dinh.
   Truoc day .sub-hero lam viec do; bo khoi dau trang di thi muc dau tien chui
   len sat gam header — nhan «(01) — DAU AN» de len ca logo. --hdr-h do bang JS. */
/* Dung `section.mo-trang` chu khong phai `.mo-trang`: ban CSS hub sinh cung dat
   padding cho .symbols/.craft/... kem !important. Hai ben cung !important va cung
   hang do uu tien (0,1,0) thi ban sinh thang vi no nam sau. Them ten the la (0,1,1),
   thang bat ke thu tu. Day la lan thu TU trong ngay dinh cung co che nay. */
section.mo-trang { padding-top:calc(var(--hdr-h,64px) + 6vh * var(--dem)) !important; }

/* ══ 07/09 (SS) — BỐ CỤC TRANG DẤU ẤN ═══════════════════════════════════════
   Ba kiểu SS chọn cho ba chương, thay cho «mọi khối xếp dọc cùng một bề ngang». */

/* ① Dẫn nhập — 07/09 chiều (SS): BỎ bố cục hai cột (tiêu đề trái / chữ phải).
   Nay tiêu đề chiếm trọn bề ngang, phần diễn giải xuống dưới chia BA CỘT, cùng
   một nhịp với chương (02) và (03) — SS muốn cả trang đọc theo một lưới. */
.dan-nhap .sec-title { margin:0; max-width:none; }
.dan-nhap .dn-doan { margin-top:clamp(22px,3vh,38px); }

/* ══ 07/09 chiều (SS chọn N1) — ẢNH TRÀN MÉP TRÁI, CHỮ BÊN PHẢI ═════════════
   `margin-left` âm bằng đúng nửa phần lề của .wrap để ảnh chạm mép trái màn hình:
   .wrap rộng min(92vw,1360px) và căn giữa, nên lề mỗi bên là (100vw − bề ngang)/2.
   Kéo ảnh sang trái đúng chừng ấy là hết lề, không cần đổi cấu trúc .wrap. */
.dan-nhap .dn-n1 { display:grid; grid-template-columns:44vw 1fr; gap:clamp(28px,3.6vw,64px); align-items:center; }
.dn-anh { height:min(70vh,600px); overflow:hidden; margin-left:calc((100vw - min(92vw,1360px))/-2); }
.dn-anh img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.06); }
.dn-chu { padding-right:2%; }
@media (max-width:900px){
  /* 08/09 (SS) — mobile: ẢNH XUỐNG DƯỚI phần chữ. Ảnh cao gần nửa màn, để trên
     thì khách phải cuộn hết ảnh mới biết chương này nói gì. */
  /* 08/09 (SS) — ẢNH nằm NGAY SAU đoạn đầu, không phải sau cả ba đoạn.
     `display:contents` cho .dn-chu và .dn-doan để các con của chúng thành ô lưới
     trực tiếp, nhờ đó `order` xếp xen kẽ được: chỉ mục → tiêu đề → đoạn 1 → ẢNH →
     đoạn 2 → đoạn 3. Hai khối bọc đó không còn hộp riêng nên hiệu ứng hiện dần
     (.reveal) không chạy trên chúng ở mobile — đổi lấy đúng thứ tự SS muốn. */
  .dan-nhap .dn-n1 { grid-template-columns:1fr; gap:22px; }
  .dn-chu, .dan-nhap .dn-doan { display:contents; }
  .dan-nhap .sec-index { order:1; }
  .dan-nhap .sec-title { order:2; }
  .dan-nhap .dn-doan > p:nth-of-type(1) { order:3; }
  .dn-anh { order:4; }
  .dan-nhap .dn-doan > p:nth-of-type(2) { order:5; }
  .dan-nhap .dn-doan > p:nth-of-type(3) { order:6; }
  .dn-anh { height:46vh; margin-left:calc((100vw - min(92vw,1360px))/-2);
    margin-right:calc((100vw - min(92vw,1360px))/-2); }
  .dn-chu { padding-right:0; }
}
.dan-nhap .dn-doan p { color:var(--muted); line-height:1.8; margin:0 0 15px; }
.dan-nhap .dn-doan p:last-child { margin-bottom:0; }

/* ⓪ LƯỚI BA CỘT DÙNG CHUNG cho chữ chạy dài của trang Dấu ấn.
   `max-width:none` là bắt buộc: .craft-note vốn bị bó 44em cho bố cục một cột,
   để nguyên thì ba cột chen nhau trong nửa màn. */
.chu-ba-cot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,44px); max-width:none; align-items:start; }
.chu-ba-cot > p { margin:0 !important; }

/* 07/09 chiều (SS) — «không để chữ và dòng cô đơn».
   `text-wrap:pretty` bảo trình duyệt tránh để MỘT từ đứng một mình ở dòng cuối
   (kiểu «bỉ.» lơ lửng dưới đoạn SSen); `balance` chia đều các dòng của tiêu đề
   ngắn. Trình duyệt cũ không hiểu thì bỏ qua, không hỏng bố cục. */
.chu-ba-cot > p, .dn-doan p, .craft-note p, .craft-step p, .ct-chatlieu p,
.deck-story, .chapter-sub, .sub-note { text-wrap:pretty; }
.sec-title, .deck-name, .chapter-tag, .deck-more { text-wrap:balance; }

/* Ảnh sketch của chương (01) — SS tự chỉnh vị trí/kích thước ở đây.
   07/09 chiều: bố cục N1 đưa ảnh xưởng lên góc trên-trái và chữ sang phải, nên
   sketch phải rời góc TRÊN-phải (đang đè lên tiêu đề) xuống góc DƯỚI-phải. */
.sk-logo-goc {
  position:absolute; bottom:2vh; right:1.5%;
  width:min(18vw,205px); aspect-ratio:621/1011; z-index:0; pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:top right;
  /* symbol-line.png là nét TRẮNG (đo được: mọi điểm đục đều lum 255). Nền tối để
     nguyên; nền sáng phải invert, không thì trắng trên kem = vô hình. Đây đúng là
     chỗ ngược với .bg-sketch — sketch kia là nét đen. */
  opacity:.06; filter:none;
}
[data-theme="light"] .sk-logo-goc { filter:invert(1); opacity:.06; }
@media (max-width:860px){ .sk-logo-goc { width:38vw; opacity:.05; } }
.dan-nhap .dn-muc { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.dan-nhap .dn-muc b { display:block; font-family:var(--f-giaodien); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--pink); margin-bottom:9px; }
.dan-nhap .dn-muc p { margin:0 0 12px; }
.dan-nhap .dn-muc p:last-child { margin-bottom:0; }

/* ② Cảm hứng & dấu ấn: ĐÃ BỎ bố cục hai cột. Deck có sẵn hai cột BÊN TRONG
   (cột tên biểu tượng + khung nội dung) nên nhét vào một cột hẹp là nó rộng
   1325px trong ô 765px và tràn ra ngoài màn 560px. Chữ trên, deck dưới. */

/* ③ Chế tác: CHẤT LIỆU một cụm riêng ở trên, phần còn lại chia ba cột. */
.ct-chatlieu { border-top:1px solid var(--line); padding-top:22px; margin-bottom:34px; max-width:52em; }
.ct-chatlieu b { display:block; font-family:var(--f-giaodien); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pink); margin-bottom:9px; }
.ct-chatlieu p { color:var(--muted); line-height:1.8; margin:0 0 12px; }
.ct-chatlieu p:last-child { margin-bottom:0; }
.craft-more.ct-ba-cot { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ══ 07/09 chiều (SS chọn B) — CHƯƠNG (02): DANH MỤC + TỜ THÔNG TIN ══════════
   Thay deck bấm-đổi. Bên trái bảy dòng, bên phải tờ thông tin của SS (dính theo
   khi cuộn). Bấm một dòng mở tờ ở cỡ đọc được. */
.bt-khung { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px);
  align-items:start; margin-top:clamp(24px,3.5vh,44px); }
.bt-hang { display:grid; grid-template-columns:34px 1fr auto; gap:18px; align-items:baseline;
  width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line);
  padding:19px 0; cursor:pointer; color:var(--text); font:inherit;
  transition:color .3s var(--ease); }
.bt-hang:first-child { border-top:1px solid var(--line); }
.bt-hang i { font-style:normal; font-family:var(--f-giaodien); font-size:11px;
  letter-spacing:.16em; color:var(--muted); }
.bt-ten { font-family:var(--f-tieude); font-size:clamp(23px,2.3vw,32px); line-height:1.15; }
.bt-ten em { font-style:normal; display:block; color:var(--muted); font-size:13px; margin-top:3px;
  font-family:var(--f-giaodien); letter-spacing:.1em; }
.bt-hang:hover, .bt-hang.on { color:var(--pink); }
.bt-to { position:sticky; top:calc(var(--hdr-h,64px) + 14px); }
/* chưa có tờ thông tin trên máy chủ → danh mục trải hết bề ngang, không để lửng
   một cột trống bên phải (xem giauNeuThieu trong noir.js) */
.bt-khung.thieu-to { grid-template-columns:1fr; }
.bt-khung.thieu-to .bt-to { display:none; }
/* khung giấy: viền mảnh + bóng đổ để tờ ra dáng tờ giấy chứ không phải một tấm ảnh */
/* 07/09 tối (SS: «ảnh chuyển bị chớp») — đổi tờ bằng HAI LỚP CHỒNG NHAU thay vì
   mờ-đổi-src-hiện trên một thẻ. Cách cũ chớp vì trong lúc ảnh mới còn đang tải
   thì thẻ đã rỗng và nền trắng lộ ra. Nay lớp dưới giữ tờ đang xem, lớp trên nạp
   tờ mới ở opacity 0, TẢI XONG mới cho hiện, rồi mới hoán vai hai lớp. */
.bt-giay { position:relative; border:1px solid var(--line); background:#fff; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.10); cursor:zoom-in; aspect-ratio:1772/2598; }
.bt-giay img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .5s var(--ease); }
.bt-giay img.duoi { opacity:1; }
.bt-giay img.tren { opacity:0; }

/* cột phải của mỗi dòng: lối tắt sang bộ sưu tập của biểu tượng đó */
/* Cùng cơ chế với câu hồng ở Tuyên ngôn: gạch chân tự vẽ theo chu kỳ để nói rằng
   đây là thứ chạm được. Dùng nền gradient chứ không dùng border-bottom — border
   không chạy hoạt hình theo bề ngang được. */
.bt-sp { text-decoration:none; color:var(--muted); font-size:12px; white-space:nowrap;
  font-family:var(--f-giaodien); letter-spacing:.12em; text-transform:uppercase;
  background-image:linear-gradient(var(--pink), var(--pink));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:3px; transition:color .3s var(--ease); }
.bt-hang.on .bt-sp { color:var(--pink); animation:mfVeGach 5.5s var(--ease-out) infinite; }
.bt-sp:hover { color:var(--pink); animation:none; background-size:100% 1px; }
@media (prefers-reduced-motion:reduce){
  .bt-hang.on .bt-sp { animation:none; background-size:100% 1px; }
}
.bt-chan { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.bt-bang, .bt-chibao { display:none; }
.bt-chan .btn-line { padding:9px 16px; font-size:11px; }

/* lớp xem tờ ở cỡ đọc được */
.bt-lop { position:fixed; inset:0; z-index:210; display:none; }
.bt-lop.mo { display:block; }
.bt-lop-nen { position:absolute; inset:0; background:rgba(8,7,6,.93); }
/* `grid-template-rows:minmax(0,1fr)` + `min-height:0` là bắt buộc, không phải cho
   đẹp: hàng lưới mặc định là `auto`, tức nó CAO BẰNG NỘI DUNG. Tờ thông tin cao
   2598px nên hàng phình theo, `max-height:100%` của ảnh lại đo theo chính cái hàng
   đã phình đó → không chặn được gì, tờ tràn khỏi màn hình (đúng lỗi SS gặp).
   Khoá hàng lại đúng bằng chiều cao lớp phủ thì ảnh mới co vừa. */
/* 07/09 tối (SS: «bố cục popup chưa cân đối») — trước đây cột ảnh là `1fr` nên nó
   ăn hết phần thừa: tờ dựng đứng chỉ cao được bằng màn, phần ngang còn lại thành
   một mảng tối trống bên phải tờ. Nay cột ảnh co ĐÚNG bề ngang thật của tờ
   (`auto`), cột chữ có bề ngang cố định, và cả cặp được đẩy vào giữa màn. */
.bt-lop-trong { position:relative; height:100%; display:grid;
  grid-template-columns:auto minmax(300px,400px);
  grid-template-rows:minmax(0,1fr); justify-content:center; align-content:center;
  gap:clamp(26px,3.4vw,56px); padding:clamp(28px,4vh,52px) clamp(20px,4vw,60px); }
.bt-lop-anh { min-height:0; height:100%; display:flex; align-items:center; justify-content:center; }
.bt-lop-anh img { max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:zoom-out; }
.bt-lop-chu { color:#fff; align-self:center; overflow:auto; max-height:100%; min-height:0; }
.bt-lop-nen { background:rgba(8,7,6,.96); }
.bt-lop-tag { font-family:var(--f-giaodien); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pink); margin:0; }
.bt-lop-chu h3 { font-family:var(--f-tieude); font-weight:400;
  font-size:clamp(32px,3.2vw,50px); line-height:1.05; margin:10px 0 16px; }
.bt-lop-chu > p:not(.bt-lop-tag) { color:rgba(255,255,255,.78); line-height:1.85;
  margin:0 0 24px; font-size:14.5px; text-wrap:pretty; }
.bt-lop-chu .btn-line { border-color:rgba(255,255,255,.5); color:#fff; }
.bt-lop-chu .btn-line:hover { background:#fff; color:#141210; }
.bt-lop-dong { position:absolute; top:14px; right:20px; z-index:2; background:none; border:0;
  color:#fff; font-size:26px; line-height:1; cursor:pointer; }

/* Mục dạng BỘ (Ngẫu) — chỗ của tờ thông tin thành lưới các mảnh */
.bt-manh { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,30px); width:min(64vw,720px); max-height:100%; overflow:auto; }
.bt-manh-o { text-decoration:none; color:#fff; display:block; }
.bt-manh-anh { display:block; aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.06); }
.bt-manh-anh img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bt-manh-o:hover .bt-manh-anh img { transform:scale(1.05); }
.bt-manh-o b { display:block; font-family:var(--f-tieude); font-weight:400; font-size:21px; margin:12px 0 2px; }
.bt-manh-o em { display:block; font-style:normal; font-family:var(--f-giaodien); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:7px; }
.bt-manh-o p { color:rgba(255,255,255,.72); font-size:13px; line-height:1.65; margin:0; text-wrap:pretty; }
@media (max-width:900px){ .bt-manh { width:auto; grid-template-columns:1fr 1fr; } }

/* ══ 07/09 tối (SS) — POPUP ĐẶT HẸN, dựng bằng JS nên CSS phải tự đủ ═════════
   Chạy ở MỌI trang (trang con không có form lời nhắn của trang chủ). */
.hen-lop { position:fixed; inset:0; z-index:220; display:none; }
.hen-lop.mo { display:block; }
.hen-nen { position:absolute; inset:0; background:rgba(8,7,6,.72); backdrop-filter:blur(3px); }
.hen-hop { position:relative; margin:4vh auto; width:min(92vw,660px); max-height:92vh; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3.4vw,40px); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.hen-dong { position:absolute; top:12px; right:16px; background:none; border:0; color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer; }
.hen-dong:hover { color:var(--pink); }
.hen-kicker { font-family:var(--f-giaodien); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pink); margin:0 0 6px; }
.hen-hop h3 { font-family:var(--f-tieude); font-weight:400; font-size:clamp(26px,3vw,38px);
  line-height:1.1; margin:0 0 10px; }
.hen-dan { color:var(--muted); font-size:14px; line-height:1.75; margin:0 0 22px; text-wrap:pretty; }

.hen-diem { border:0; margin:0 0 20px; }
.hen-diem legend { font-family:var(--f-giaodien); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.hen-o { display:flex; gap:12px; align-items:flex-start; padding:13px 15px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  transition:border-color .25s var(--ease), background .25s var(--ease); }
.hen-o:hover { border-color:var(--pink); }
.hen-o input { margin-top:3px; accent-color:var(--pink); flex:none; }
.hen-o b { display:block; font-family:var(--f-than); font-weight:400; font-size:15px; }
.hen-o em { display:block; font-style:normal; color:var(--muted); font-size:12.5px; margin-top:3px; }
.hen-o i { display:block; font-style:normal; color:var(--muted); font-size:11px; margin-top:3px;
  font-family:var(--f-giaodien); letter-spacing:.1em; }
.hen-o:has(input:checked) { border-color:var(--pink); background:var(--bg-2); }

/* Ba ô ngắn (tên · SĐT · ngày) đi CHUNG một hàng. Để hai cột thì ô ngày nằm một
   mình ở hàng dưới và bên phải nó là một ô trống — trông như thiếu mất một trường. */
.hen-luoi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hen-luoi label { display:flex; flex-direction:column; gap:6px; }
.hen-luoi .hen-rong { grid-column:1 / -1; }
.hen-luoi span { font-family:var(--f-giaodien); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.hen-luoi input, .hen-luoi select, .hen-luoi textarea {
  font:inherit; font-size:15px; color:var(--text); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:9px 2px; border-radius:0;
  transition:border-color .25s var(--ease); }
.hen-luoi textarea { border:1px solid var(--line); border-radius:8px; padding:11px 12px; resize:vertical; }
.hen-luoi input:focus, .hen-luoi select:focus, .hen-luoi textarea:focus {
  outline:0; border-color:var(--pink); }
/* ô ngày: ép icon lịch của trình duyệt về đúng tông chữ, và cho ô đủ rộng để
   Safari iOS không cắt mất chuỗi ngày */
.hen-luoi input[type=date] { min-height:38px; }
.hen-luoi input[type=date]::-webkit-calendar-picker-indicator { opacity:.55; cursor:pointer; }
.hen-luoi input[type=date]:focus::-webkit-calendar-picker-indicator { opacity:1; }

.hen-gui { margin-top:22px; }
.hen-note { margin:12px 0 0; font-size:13.5px; line-height:1.7; color:var(--muted); }
.hen-note.loi { color:var(--pink); }
.hen-note.xong { color:var(--text); }
.hen-kenh { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
/* bản đặt TRÊN: đường kẻ nằm ở dưới chứ không ở trên, và có câu nối xuống form */
.hen-kenh.tren { margin:0 0 22px; padding:0 0 18px;
  border-top:0; border-bottom:1px solid var(--line); }
.hen-kenh.tren em { font-style:normal; font-family:var(--f-giaodien); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); opacity:.75; }
.hen-kenh > span { font-family:var(--f-giaodien); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.hen-kenh .btn-line { padding:8px 15px; font-size:10.5px; }
@media (max-width:560px){
  .hen-hop { margin:0; width:100%; min-height:100%; max-height:none; border-radius:0; border:0; }
  .hen-luoi { grid-template-columns:1fr; }
}

@media (max-width:900px){
  /* ══ 08/09 (SS chốt A3) — HAI BĂNG VUỐT NGANG, CUỘN ĐỒNG BỘ ═══════════════
     Trên: tên bộ sưu tập + lối tắt sang sản phẩm ngay cạnh tên.
     Dưới: chính tờ thông tin. Vuốt băng nào băng kia chạy theo (xem veChiMuc).
     Bản cũ xếp tờ (cao 2598px) lên trên bảy dòng dọc — tờ thu về 358px thì chữ
     nhỏ không đọc nổi, mà vẫn ăn gần hết một màn. */
  .bt-khung { grid-template-columns:1fr; gap:16px; }
  .bt-to { position:static; }
  .bt-giay, .bt-chan { display:none; }   /* cơ chế của desktop, mobile không dùng */

  .bt-list, .bt-bang { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; margin:0 -4vw; padding:0 4vw; }
  .bt-list::-webkit-scrollbar, .bt-bang::-webkit-scrollbar { display:none; }
  .bt-list { padding-bottom:4px; }

  /* nút «Các thiết kế…» XUỐNG DƯỚI tên và tượng trưng (08/09) — để cạnh tên thì
     tên bị bó lại còn nửa ô, mà tên mới là thứ cần to nhất ở đây. */
  .bt-hang { flex:0 0 78vw; scroll-snap-align:center;
    display:grid; grid-template-columns:26px 1fr; gap:4px 10px; align-items:baseline;
    border:0; border-bottom:1px solid var(--line); padding:10px 0 12px; }
  .bt-hang:first-child { border-top:0; }
  .bt-hang.on { border-bottom-color:var(--pink); }
  .bt-ten { font-size:27px; }          /* +30% so với 21px */
  .bt-ten em { font-size:11px; margin-top:4px; }
  .bt-sp { grid-column:2; justify-self:start; text-align:left;
    font-size:10px; letter-spacing:.1em; margin-top:8px; }

  .bt-bang { display:flex; }
  .bt-o-to { flex:0 0 78vw; scroll-snap-align:center;
    border:1px solid var(--line); background:#fff; overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.09); }
  .bt-o-to img { width:100%; display:block; }
  .bt-o-trong { aspect-ratio:1772/2598; background:var(--bg-2); }

  /* ── dấu hiệu «vuốt ngang được» ─────────────────────────────────────────── */
  .bt-chibao { display:flex; align-items:center; justify-content:center;
    gap:12px; margin:10px 2px 0; }
  /* Vuốt rồi thì bỏ dòng chữ nhắc, nhưng GIỮ hai mũi tên và hàng chấm — chúng là
     nút bấm và là chỉ vị trí, không phải lời nhắc dùng một lần. */
  .bt-chibao.da-vuot .bt-vuot { opacity:0; }
  .bt-vuot { transition:opacity .5s var(--ease); }
  .bt-mui { background:none; border:1px solid var(--line); border-radius:50%;
    width:34px; height:34px; flex:none; cursor:pointer; color:var(--muted);
    font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:border-color .3s var(--ease), color .3s var(--ease); }
  .bt-mui:hover, .bt-mui:active { border-color:var(--pink); color:var(--pink); }
  .bt-mui.sau { animation:btNhipMui 2.4s var(--ease) infinite; }
  @keyframes btNhipMui {
    0%,66%,100% { transform:translateX(0); border-color:var(--line); }
    78%         { transform:translateX(5px); border-color:var(--pink); }
  }
  .bt-chibao.da-vuot .bt-mui.sau { animation:none; }
  @media (prefers-reduced-motion:reduce){ .bt-mui.sau { animation:none; } }
  .bt-cham { display:flex; gap:6px; }
  .bt-cham i { width:5px; height:5px; border-radius:50%; background:var(--line);
    transition:background .3s var(--ease), transform .3s var(--ease); }
  .bt-cham i.on { background:var(--pink); transform:scale(1.35); }
  .bt-vuot { font-family:var(--f-giaodien); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px; }
  .bt-vuot b { font-weight:400; animation:mfNhichMuiTen 2.2s var(--ease) infinite; }

  /* vệt mờ ở mép phải: cho thấy nội dung còn chạy tiếp ra ngoài màn */
  .bt-list, .bt-bang {
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%); }

  @media (prefers-reduced-motion:reduce){ .bt-vuot b { animation:none; } }
  .bt-lop-trong { grid-template-columns:1fr; overflow:auto; padding:52px 18px 30px; }
  .bt-lop-anh { height:auto; }
}

/* ══ 07/09 chiều (SS) — PHƯƠNG ÁN A cho 8 bước chế tác ═══════════════════════
   Bốn cột × hai hàng: cả tám bước hiện cùng lúc, không phải bấm hay vuốt — đó
   chính là điều chương này cần nói (nhiều công đoạn, mỗi công đoạn có người làm).
   Số + gạch nối là thứ báo «đây là các bước»; bỏ chúng đi thì lưới này chỉ còn là
   tám ô chữ rời. */
.craft-more.ct-buoc-luoi { grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 26px; }
.ct-buoc-luoi .craft-step { position:relative; }
.cb-anh { aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--bg-2); }
.cb-anh img { width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease), transform .6s var(--ease); }
.ct-buoc-luoi .craft-step:hover .cb-anh img { filter:grayscale(.15) contrast(1.02); transform:scale(1.03); }
.cb-moc { display:flex; align-items:center; gap:12px; margin:16px 0 8px; }
.cb-so { font-family:var(--f-tieude); font-size:32px; line-height:1; color:var(--pink); }
.cb-gach { flex:1; height:1px; background:var(--line); }
.ct-buoc-luoi .craft-step b { display:block; font-family:var(--f-giaodien); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px; }
.ct-buoc-luoi .craft-step p { color:var(--muted); font-size:14px; line-height:1.75; margin:0; }
/* Mỗi bước có HAI bản mô tả: bản đầy đủ cho desktop, bản gọn (.chi-gon) cho mobile.
   Không cắt bằng line-clamp vì kiểu đó cắt giữa câu; viết riêng thì câu nào cũng
   trọn nghĩa. Bản không dùng bị `display:none` nên không chiếm chỗ. */
.chi-gon { display:none; }
/* .chi-dt / .chi-mb — hai bản chữ của cùng một câu, hiện theo bề rộng màn.
   Phải viết kèm `html:not(.lang-en) .vi` / `html.lang-en .en` mới đủ hạng ưu tiên
   để thắng luật đổi ngôn ngữ ở đầu file (`html.lang-en .en{display:revert}` là
   (0,2,0), một mình `.chi-mb` là (0,1,0) nên thua). */
html:not(.lang-en) .vi.chi-mb, html.lang-en .en.chi-mb { display:none; }
@media (max-width:1100px){ .craft-more.ct-buoc-luoi { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){ .craft-more.ct-buoc-luoi { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; }
  .cb-so { font-size:26px; } }
/* 08/09 (SS chốt B1) — mobile GIỮ HAI CỘT, ảnh vuông. Bản một cột với ảnh 4:3 đo
   được 3.584px, tức hơn bốn màn hình chỉ để đọc tám đoạn ngắn. */
@media (max-width:480px){
  /* 08/09 (SS) — nới rãnh giữa hai cột: 12px thì hai cột chữ dính nhau, mắt nhảy
     nhầm sang cột bên. Và KHÔNG canh đều hai bên ở đây — ô chỉ rộng ~150px, canh
     đều là mỗi dòng vài từ bị kéo giãn thành khe trắng. Canh trái + `text-wrap:
     pretty` + ngắt từ mới hết chữ đứng một mình cuối đoạn. */
  .craft-more.ct-buoc-luoi { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 22px; }
  .ct-buoc-luoi .craft-step p { text-align:left; text-wrap:pretty;
    hyphens:auto; -webkit-hyphens:auto; }
  .ct-buoc-luoi .craft-step p:not(.chi-gon) { display:none; }
  .ct-buoc-luoi .craft-step .chi-gon { display:block; }
  .ct-buoc-luoi .cb-anh { aspect-ratio:1/1; }
  .cb-moc { margin:10px 0 6px; gap:8px; }
  .cb-so { font-size:21px; }
  .ct-buoc-luoi .craft-step b { font-size:10.5px; letter-spacing:.14em; }
  .ct-buoc-luoi .craft-step p { font-size:12px; line-height:1.65; }
}

@media (max-width:1000px){
  /* ba cột chỉ đủ chỗ trên màn rộng; dưới 1000px về hai cột, dưới 860px về một cột */
  .chu-ba-cot { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .chu-ba-cot { grid-template-columns:1fr; gap:15px; }
  .chu-ba-cot > p { margin:0 0 15px !important; }
  .chu-ba-cot > p:last-child { margin-bottom:0 !important; }
  .craft-more.ct-ba-cot { grid-template-columns:1fr; }
}
.sub-title { font-family:var(--f-tieude); font-weight:400; font-size:var(--co-tieude); line-height:1.1; max-width:18em; }
.sub-note { color:var(--muted); max-width:44em; margin-top:3vh; }
.sub-toc { display:flex; flex-wrap:wrap; gap:10px; margin-top:4vh; }

/* chips filter — cỡ nhỏ để thấy nhiều lựa chọn hơn.
   Dính (sticky) dưới header khi cuộn xuống ở MỌI kích thước màn hình,
   không chỉ mobile như trước (16/07). */
/* 🔴 17/08 — THANH LỌC KHÔNG ĐƯỢC MANG HIỆU ỨNG `.reveal`.
   `catalogue.html` gắn `class="filters reveal"`. `.reveal` đặt `opacity:0` +
   `transform:translateY(34px)` và chỉ gỡ khi IntersectionObserver bắt được —
   nhưng thanh này nằm ngay đầu màn, có lúc observer không bắn, nên nó **kẹt ở
   trạng thái mờ và bị dịch xuống 34px**. Hai hậu quả đo được:
     · thanh lọc đè lên 34px đầu của lưới sản phẩm — hàng «Đang lọc» nằm chồng
       lên hàng thẻ đầu tiên;
     · `transform` trên chính phần tử sticky làm **hỏng luôn position:sticky**
       (phần tử có transform tự tạo containing block mới).
   Cùng gốc bệnh với `.spec-strip` đã vá 17/07. Thanh lọc là thứ phải hiện ngay
   và đứng đúng chỗ — không có lý do gì để nó mờ dần khi cuộn tới. */
.filters.reveal { opacity:1 !important; transform:none !important; }
.filters {
  position:sticky; top:var(--hdr-h,60px); z-index:40;
  padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(8,7,6,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
[data-theme="light"] .filters { background:rgba(240,236,228,.92); }
.filters > .wrap { display:flex; flex-direction:column; gap:10px; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; }
.filters .chip, .policy-side .chip { font-size:11px; padding:7px 14px; letter-spacing:.1em; }
/* 16/09 — SS: chip lọc loại ở trang sản phẩm đậm hơn cho nổi */
.filters .filter-bar .chip { font-weight:700; color:var(--text); }
.filters .filter-bar .chip.on { color:var(--pink); }
/* ── FILTER BAR kiểu ver5: 1 hàng chips loại cuộn ngang + «Lọc thêm ▾» + Đã lưu ── */
.filter-bar { display:flex; align-items:center; gap:10px; position:relative; }
.filter-bar .filt-row {
  flex:1; min-width:0; display:flex; gap:8px; align-items:center;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-bottom:2px;
}
.filter-bar .filt-row::-webkit-scrollbar { display:none; }
.filter-bar .chip { flex:none; white-space:nowrap; }
.more-btn {
  flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); border-radius:99px; color:var(--muted);
  font-family:var(--f-giaodien); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; transition:border-color .3s, color .3s;
}
.more-btn:hover, .more-btn.active, .more-btn.open-dd { border-color:var(--pink); color:var(--pink); }
.more-btn .car { font-size:9px; transition:transform .3s; }
.more-btn.open-dd .car { transform:rotate(180deg); }
.more-panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:45; width:min(340px,92vw);
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  box-shadow:0 20px 44px rgba(0,0,0,.45); display:none;
}
[data-theme="light"] .more-panel { box-shadow:0 20px 44px rgba(30,20,10,.18); }
.more-panel.show { display:block; }
.mp-group { margin-bottom:14px; }
.mp-group h5 { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; font-weight:400; }
.mp-chips { display:flex; flex-wrap:wrap; gap:7px; }
.mp-clear {
  margin-top:4px; width:100%; cursor:pointer; background:none; border:1px solid var(--line); border-radius:99px;
  color:var(--muted); font-family:var(--f-giaodien); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:9px;
  transition:border-color .3s, color .3s;
}
.mp-clear:hover { border-color:var(--pink); color:var(--pink); }
/* ── hàng «Đang lọc» (bộ sưu tập / nhóm thiết kế) ─────────────────
   Hai facet này khuất trong dropdown nên phải bày ra đây, kèm ✕ gỡ nhanh. */
.filt-active { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.filt-active[hidden] { display:none; }
.filt-active .fa-lab {
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.filt-active .fa-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--bg-2);
  background:color-mix(in srgb, var(--pink) 12%, transparent);
  border:1px solid var(--pink-strong); border-radius:99px; color:var(--pink);
  font-family:var(--f-giaodien); font-size:11px; letter-spacing:.08em;
  padding:6px 13px; transition:background .3s, color .3s;
}
.filt-active .fa-chip em { font-style:normal; opacity:.62; }
.filt-active .fa-chip i { font-style:normal; font-size:11px; opacity:.7; }
.filt-active .fa-chip:hover { background:var(--pink); color:#fff; }
.filt-active .fa-chip:hover em, .filt-active .fa-chip:hover i { opacity:.85; }
.filt-active .fa-clear {
  margin-left:auto; cursor:pointer; background:none; border:none; padding:6px 2px;
  color:var(--muted); font-family:var(--f-giaodien); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line); transition:color .3s, border-color .3s;
}
.filt-active .fa-clear:hover { color:var(--pink); border-color:var(--pink); }
/* ── chân lưới: lối ra khỏi bộ lọc bộ sưu tập ── */
.grid-allcta {
  margin:44px auto 8px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.grid-allcta p { font-size:12.5px; letter-spacing:.06em; color:var(--muted); margin:0; }
.grid-allcta p b { color:var(--text); font-weight:400; }
/* ── trạng thái rỗng: luôn có lối ra ── */
.grid-empty {
  padding:9vh 6vw; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.grid-empty p { font-size:13px; letter-spacing:.06em; color:var(--muted); margin:0; }
.grid-empty .ge-acts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
@media (max-width:860px){
  .filt-active { gap:6px; }
  .filt-active .fa-lab { width:100%; }
  .filt-active .fa-clear { margin-left:0; }
  .grid-empty .ge-acts { flex-direction:column; width:100%; }
}
/* ══ 07/09 (SS) — NÚT TRÊN THANH TỐI PHẢI MANG DÁNG TỐI ═══════════════════════
   `.icon-btn` lấy `background:var(--overlay)` + `color:var(--text)`; ở nền Sáng hai
   biến này ra nền kem + chữ đen, nên khi thanh còn nằm trên hero TỐI thì chúng hiện
   thành bốn đĩa kem đặc, chọi hẳn với nền. Lúc thanh còn tối (chưa cuộn, không phải
   trang con) thì ép về dáng tối: vòng mỏng sáng, icon sáng, nền trong.

   09/09 — ĐƯA RA KHỎI @media mobile. Ghi chú cũ ở đây viết «chỉ mobile — desktop
   thanh trong suốt sẵn, không dính lỗi này»: sai. Desktop cũng lấy đúng `--overlay`
   kem đó, chỉ là ít ai để ý vì thanh desktop thưa hơn. SS xem trên máy và bảo muốn
   ĐÚNG hiệu ứng này ở desktop: trên nền đen thì ô tròn tối, cuộn xuống mới đổi sang
   ô sáng. Nay luật áp ở mọi bề ngang; chính `.hdr.scrolled` là công tắc, không phải
   kích thước màn hình. */
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .icon-btn,
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .lang-btn {
  background:rgba(236,230,218,.07); border-color:rgba(236,230,218,.34); color:#ece6da;
}
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .icon-btn:hover,
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .lang-btn:hover {
  border-color:var(--pink); color:var(--pink);
}
/* số đã lưu: chữ số trên tim cũng phải đổi, không thì số đen trên vòng sáng */
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .hdr-wish svg {
  stroke:#ece6da;
}

/* mobile: ghim thanh filter dưới header để vừa kéo vừa lọc */
@media (max-width:860px){
  /* mobile: header luôn hiện (không tự ẩn) + filter ghim ngay dưới header */
  .hdr.hidden { transform:none; }
  .hdr {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding:10px 14px;
    background:rgba(8,7,6,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  /* 07/09 (SS) — TRÊN MOBILE, thanh header phải TỐI khi còn nằm trên teaser đầu
     trang, chỉ sáng lên khi đã cuộn xuống. Luật cũ tô sáng .hdr vô điều kiện nên
     ngay ở đỉnh trang chủ thanh sáng đã đè lên video tối.
     Trang con (.subpage) thì sáng NGAY TỪ ĐẦU — chúng không có hero tối. */
  [data-theme="light"] .hdr.scrolled { background:rgba(240,236,228,.9); }
  [data-theme="light"] .subpage .hdr { background:rgba(240,236,228,.9); }
  /* 16/07 (SS): mobile light mode header nền kem LUÔN HIỆN → logo trắng bị chìm,
     đổi ĐEN (giống cách menu-logo đã làm). Desktop giữ trắng — header desktop
     trong suốt trên hero tối / nền sẫm khi cuộn. */
  /* 07/09 — đi kèm thay đổi ngay trên: thanh giờ TỐI khi còn ở teaser đầu trang,
     nên logo và icon chỉ được đổi sang đen ĐÚNG LÚC thanh đã sáng (đã cuộn, hoặc
     đang ở trang con). Để nguyên luật cũ vô điều kiện là logo đen trên nền tối —
     chìm hẳn, đúng cái bẫy mà ghi chú 16/07 kể nhưng ngược chiều. */
  /* 09/09 — BỎ `filter:brightness(0)`. Luật này sinh ra khi logo còn hai bản
     trắng/đen: nền kem thì bôi đen bản trắng cho khỏi chìm. Từ 09/09 logo là bản
     HỒNG dùng chung cả hai nền, mà brightness(0) thì bôi đen mọi thứ — kể cả
     hồng. Giữ lại là logo hồng chỉ hồng trên desktop, ra mobile thành đen. */
  [data-theme="light"] .hdr:not(.scrolled) { color:#ece6da; }
  [data-theme="light"] .subpage .hdr:not(.scrolled) { color:inherit; }

  .hdr-logo { flex:none; }
  .hdr-logo img { height:23px; }
  .hdr-tools { gap:6px; flex:none; }
  .icon-btn { width:34px; height:34px; font-size:14px; }
  .icon-btn svg { width:15px; height:15px; }
  .lang-btn { padding:6px 12px; font-size:11px; }
  .filter-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .filter-row::-webkit-scrollbar { display:none; }
  .chip { white-space:nowrap; flex:none; padding:6px 12px; font-size:10.5px; }
  .filter-bar { gap:8px; }
  .more-btn { padding:6px 11px; font-size:10px; letter-spacing:.06em; }
  .more-panel { left:0; right:0; width:auto; }
  .chip-wish { flex:none; }
}
.chip {
  font-family:var(--f-giaodien); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:99px; padding:9px 20px; cursor:pointer; transition:all .3s var(--ease);
  display:inline-block;
}
.chip:hover { border-color:var(--pink); color:var(--pink); }
.chip.on { background:transparent; border:1.5px solid var(--pink-strong); color:var(--pink); font-weight:700; }
.cat-count { font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.cat-grid { margin-top:0; }
.card-in { animation:cardIn .7s var(--ease-out) backwards; }
@keyframes cardIn { from { opacity:0; transform:translateY(26px); } }

/* ── modal chi tiết sản phẩm ── */
body.modal-open { overflow:hidden; }
.pmodal { position:fixed; inset:0; z-index:85; display:none; }
.pmodal.open { display:block; }
.pmodal-backdrop { position:absolute; inset:0; background:rgba(5,4,3,.82); backdrop-filter:blur(8px); }
.pmodal-box {
  position:absolute; inset:4vh 4vw; overflow:auto;
  background:var(--bg-2) var(--kraft); background-size:520px; background-blend-mode:multiply;
  border:1px solid var(--line); border-radius:16px;
  animation:modalIn .6s var(--ease-out);
}
@keyframes modalIn { from { opacity:0; transform:translateY(40px); } }
.pmodal-close {
  position:sticky; top:14px; float:right; margin:14px 18px 0 0; z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(8,7,6,.8); border:1px solid var(--line); color:var(--text); font-size:16px;
  transition:all .3s;
}
.pmodal-close:hover { border-color:var(--pink); color:var(--pink); }
.pmodal-body {
  display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:auto 1fr;
  grid-template-areas:"gal head" "gal info";
  column-gap:4vw; row-gap:18px; padding:clamp(20px,4vw,56px);
}
.pm-head { grid-area:head; }
.pm-gallery { grid-area:gal; position:relative; align-self:start; }
.pm-info { grid-area:info; }
.pm-design {
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--pink); color:var(--pink); border-radius:99px; padding:5px 14px;
  align-self:center;
}
.pm-main { border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.pm-main img { width:100%; aspect-ratio:4/3; object-fit:cover; }
/* ══ 05/09 (E2) — PHÓNG ẢNH SẢN PHẨM KHI RÊ CHUỘT (chỉ desktop) ══════════════
   Phóng ở LỚP BỌC .pm-zoom chứ không ở chính <img>: thẻ img đã mang sẵn
   transform/transform-origin nội tuyến do imgStyle() sinh ra (căn cắt ảnh từng
   sản phẩm — zoom, xoay, tâm). Đụng vào transform của img là phá phần căn chỉnh
   thủ công SS đã làm cho từng ảnh một.
   `--pmx/--pmy` do JS cập nhật theo vị trí con trỏ, nên ảnh phóng ĐÚNG chỗ đang
   nhìn chứ không phóng vào giữa khung.
   Chỉ bật ở thiết bị có con trỏ THẬT: (hover:hover) and (pointer:fine). Trên cảm
   ứng, :hover bị kẹt sau cú chạm nên ảnh sẽ phóng rồi đứng nguyên đó — SS chốt
   chỉ làm desktop, và đây cũng là lý do kỹ thuật để không làm ở mobile.
   Loại trừ edit-mode: ở đó .pm-main dùng cursor:move để kéo căn ảnh. ══════════ */
.pm-zoom { display:block; }
@media (hover:hover) and (pointer:fine) {
  .pm-zoom { transition:transform .2s var(--ease-out); will-change:transform; }
  body:not(.edit-mode) .pm-main:hover .pm-zoom {
    transform:scale(var(--pmz, 2.1));
    transform-origin:var(--pmx, 50%) var(--pmy, 50%);
  }
  /* video có điều khiển riêng — phóng nó lên là khách không bấm trúng nút nào */
  body:not(.edit-mode) .pm-main.is-vid:hover .pm-zoom { transform:none; }
}
@media (prefers-reduced-motion: reduce) { .pm-zoom { transition:none; } }
/* thumbs: 1 HÀNG DUY NHẤT, lướt ngang (16/07) — không xuống dòng nữa */
.pm-thumbs {
  display:flex; gap:10px; margin-top:12px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
  scrollbar-width:thin;
}
.pm-thumbs::-webkit-scrollbar { height:5px; }
.pm-thumbs::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.pm-thumb {
  width:72px; height:72px; border-radius:8px; overflow:visible; cursor:pointer; flex:none;
  border:1px solid var(--line); background:none; padding:0; opacity:.65; transition:all .3s; position:relative;
}
.pm-thumb img { width:100%; height:100%; object-fit:cover; border-radius:8px; }

/* ── ✎ chỉnh gallery ngay trong modal sản phẩm (edit mode) ── */
/* click thường vào ảnh nhỏ = CHỌN để chỉnh (con trỏ pointer bình thường);
   chỉ tay cầm ⠿ mới có con trỏ "grab" — tránh nhầm giữa bấm chọn và kéo. */
body.edit-mode .pm-main { cursor:move; }
.pm-thumb-del {
  position:absolute; top:-7px; right:-7px; z-index:3; width:18px; height:18px;
  border-radius:50%; background:var(--bg-2); border:1px solid var(--line); color:var(--muted);
  font-size:9px; line-height:18px; text-align:center; cursor:pointer;
}
.pm-thumb-del:hover { border-color:#e05a5a; color:#e05a5a; }
/* tay cầm kéo-thả riêng — bấm vào đây mới bắt đầu kéo đổi thứ tự,
   để bấm ảnh nhỏ bình thường luôn là CHỌN ảnh, không xung đột. */
.pm-thumb-drag {
  position:absolute; top:-7px; left:-7px; z-index:3; width:18px; height:18px;
  border-radius:50%; background:var(--bg-2); border:1px solid var(--pink); color:var(--pink);
  font-size:9px; line-height:17px; text-align:center; cursor:grab;
}
.pm-thumb-drag:active { cursor:grabbing; }
.pm-edit-ctl {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;
  padding-top:10px; border-top:1px dashed var(--pink);
}
.pm-edit-ctl button {
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:13px;
  background:var(--overlay); border:1px solid var(--pink); color:var(--pink); flex:none;
}
.pm-edit-ctl button[data-padd] { width:auto; border-radius:99px; padding:0 12px; font-size:12px; }
.pm-edit-ctl button:hover { background:var(--pink); color:#fff; font-weight:700; }
.pm-edit-hint { font-size:11px; color:var(--pink); line-height:1.4; flex-basis:100%; }
.pm-thumb:hover, .pm-thumb.on { opacity:1; border-color:var(--pink); }
.pm-sketch {
  margin-top:18px; border:1px dashed var(--line); border-radius:10px; overflow:hidden;
  background:#0f0d0b; transition:border-color .3s;
}
.pm-sketch:hover { border-color:var(--pink); }
.pm-sketch img { width:100%; max-height:220px; object-fit:contain; filter:invert(1) grayscale(1) brightness(1.1); mix-blend-mode:screen; opacity:.85; }
.pm-symrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pm-sym {
  font-family:var(--f-vietay); font-size:18px; color:var(--pink);
  border:1px solid var(--line); border-radius:99px; padding:3px 16px; transition:all .3s;
}
.pm-sym:hover { border-color:var(--pink); }
.pm-name { font-family:var(--f-tieude); font-weight:400; font-size:clamp(34px,4vw,58px); line-height:1.05; }
.pm-code { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:10px 0 22px; }
.pm-desc { color:var(--muted); font-size:15.5px; line-height:1.75; max-width:34em; }
/* căn TRÁI nội dung chi tiết sản phẩm trên bản web (yêu cầu 14/07) */
.pm-head, .pm-info { text-align:left; }
.pm-symrow, .pm-ctas { justify-content:flex-start; }
.pm-price { justify-content:space-between; gap:16px; }
.pm-price .pm-price-label { flex:none; }
.pm-desc, .pm-fine, .pm-note { margin-left:0; margin-right:auto; }
.pm-note { margin-top:14px; font-family:var(--f-vietay); font-size:20px; color:var(--pink); }
.pm-prices { margin-top:26px; border-top:1px solid var(--line); }
/* 3 CỘT thẳng hàng giữa các dòng giá: nhãn · VND (phải) · USD (phải) */
.pm-price {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(58px,auto);
  align-items:baseline; column-gap:14px; padding:13px 0; border-bottom:1px solid var(--line);
}
.pm-price-label { color:var(--muted); font-size:14px; }
.pm-price b { font-family:var(--f-tieude); font-weight:400; font-size:20px; color:var(--text); text-align:right; white-space:nowrap; }
.pm-price i { font-style:normal; font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; }
.pm-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
/* nút chính: VIỀN HỒNG ĐẬM, nền trong (yêu cầu 15/07 — thay nền hồng) */
.btn-fill { background:transparent; border:1.5px solid var(--pink-strong); color:var(--text); font-weight:700; }
.btn-fill:hover { background:rgba(245,163,195,.14); border-color:var(--pink); color:var(--pink); }
[data-theme="light"] .btn-fill:hover { background:rgba(194,58,116,.08); }
.pm-fine { margin-top:18px; font-size:13px; color:var(--muted); }
@media (max-width:860px){
  .pmodal-box { inset:2vh 2vw; }
  /* mobile: title lên trước, rồi ảnh, rồi thông tin */
  .pmodal-body { grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"head" "gal" "info"; row-gap:20px; }
}

/* ════════════════════════════════════════════════════════════
   KHO DẤU ẤN — bố cục lưới + panel chi tiết bên cạnh (ver5)
   Thay cho modal che toàn màn hình cũ: lưới thu gọn lại, panel
   chi tiết mở song song bên cạnh (desktop) hoặc bên dưới (mobile).
   Dùng LẠI toàn bộ biến --pink/--bg/--line… nên sáng/tối tự ăn theo
   theme-toggle sẵn có, không cần bảng màu riêng.
   ════════════════════════════════════════════════════════════ */
.store-layout { display:block; align-items:start; }
.store-layout.detail-open { display:grid; grid-template-columns:minmax(240px,34%) 1fr; gap:clamp(20px,3vw,40px); }
.store-grid-col { min-width:0; }

/* ── LƯỚI kiểu ver5: sections theo loại (.psec) + card 4:3 (.pcard) ── */
.psec { margin-bottom:calc(3.5vh * var(--dem)); }
.psec-h {
  font-family:var(--f-tieude); font-weight:400; font-size:clamp(20px,2.2vw,28px);
  padding-bottom:10px; margin-bottom:18px; border-bottom:1px solid var(--line); letter-spacing:.02em;
}
/* SỐ CỘT CỐ ĐỊNH (15/07, không auto-fit nữa): card giữ ĐÚNG kích thước
   chuẩn (bằng hàng Nhẫn) dù mục ít sản phẩm — mục thiếu chỉ để trống ô,
   KHÔNG co giãn card cho vừa hàng như trước. */
.pgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
@media (min-width:861px) and (max-width:1300px){
  .pgrid { grid-template-columns:repeat(4,1fr); }
}
.store-layout.detail-open .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.store-layout.detail-open .psec-h { font-size:17px; }
.store-layout.detail-open .pcard .pname { font-size:19px; }
.store-layout.detail-open .pcard .pbody { padding:9px 10px 11px; }
.store-layout.detail-open .pcard .pfrom { font-size:11.5px; }
.pcard {
  position:relative; display:flex; flex-direction:column; height:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--bg-2); transition:border-color .4s, transform .6s var(--ease);
}
.pcard:hover { border-color:var(--pink); transform:translateY(-5px); }
.pcard.sel { border-color:var(--pink); box-shadow:0 0 0 1px var(--pink); }
/* sketch nền card — MỜ hơn + sửa lỗi tách nền:
   file gốc = nét TRẮNG trên nền ĐEN → dark: screen (nền đen tự biến mất);
   light: invert rồi multiply, ép nền về trắng bằng brightness/contrast */
.pcard .csk {
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  mix-blend-mode:screen; opacity:.05; pointer-events:none; filter:grayscale(1) brightness(1.1);
}
[data-theme="light"] .pcard .csk {
  mix-blend-mode:multiply; filter:invert(1) grayscale(1) contrast(1.15) brightness(1.22); opacity:.07;
}
.pcard .pimg { position:relative; aspect-ratio:4/3; overflow:hidden; }
.pcard .pimg img { width:100%; height:100%; object-fit:cover; filter:brightness(.92); transition:transform .9s var(--ease), filter .5s, opacity .45s var(--ease); }
.pcard:hover .pimg img.im-a { transform:scale(1.06); filter:brightness(1.02); }
.pcard:hover .pimg .im-b { opacity:1; }
/* ảnh hover LUÔN phủ tràn ô (kể cả light mode đang contain ảnh cutout) */
.pcard .pimg.im-cut img.im-b { object-fit:cover; padding:0; }
.pcard .card-heart { top:10px; left:10px; right:auto; bottom:auto; }
.pcard .ptag {
  position:absolute; top:12px; right:12px; z-index:3; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); background:rgba(8,7,6,.72); border:1px solid var(--line); border-radius:99px; padding:3px 10px;
  backdrop-filter:blur(3px); opacity:.8;
}
[data-theme="light"] .pcard .ptag { background:rgba(250,248,243,.88); }
.pcard .ptag i { font-style:normal; }
.pcard .ptag .ls { display:none; }
/* 16/09 — SS: điện thoại — chip nhỏ hơn, bản ngắn (Crafted), lùi sát góc để không che sản phẩm */
@media (max-width:700px){
  .pcard .ptag { top:8px; right:8px; font-size:7.5px; letter-spacing:.1em; padding:2px 7px; opacity:.7; }
  .pcard .ptag .lf { display:none; }
  .pcard .ptag .ls { display:inline; }
}
/* ── 17/08 — CHIP «MỚI / NEW» trên thẻ sản phẩm ────────────────────────────
   Cờ 'new-in' do hub gắn (mảng symbols). Chip nằm TRONG khung ảnh (.pimg /
   .im) ở góc DƯỚI TRÁI — góc trên trái là tim lưu (.card-heart), góc trên
   phải là nhãn nhóm thiết kế (.ptag), nên đây là góc duy nhất không đè lên
   thứ gì; lại sát ngay tên SP phía dưới nên khách đọc được liền.
   Kiểu dáng theo nếp chip .vcity/.ptag: chữ nhỏ, hoa, giãn chữ, bo tròn.
   MÀU: nền --pink-fill (đặc, để nổi trên ảnh) + chữ ĐEN ở cả hai nền —
   dark dùng --accent-ink (#10090d), light --accent-ink lại là #fff (chữ
   trắng trên hồng nhạt sẽ mờ) nên light chuyển sang --text (#1b1712). */
.pcard .pimg .pnew, .show-card .im .pnew {
  position:absolute; left:10px; bottom:10px; z-index:3; pointer-events:none;
  font-family:var(--f-giaodien); font-size:9px; line-height:1.5; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--accent-ink); background:var(--pink-fill);
  border:1px solid var(--pink-fill); border-radius:99px; padding:3px 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.30);
}
[data-theme="light"] .pcard .pimg .pnew, [data-theme="light"] .show-card .im .pnew {
  color:var(--text); box-shadow:0 2px 10px rgba(30,20,10,.16);
}
.pcard .pbody { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; padding:12px 14px 14px; }
.pcard .pcat { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.pcard .pname { font-family:var(--f-tieude); font-weight:400; font-size:clamp(23px,2.5vw,30px); line-height:1.08; margin:5px 0 6px; }  /* SS 16/08: tên là thứ đập vào mắt đầu tiên trong thẻ · khoảng cách xuống giá giảm 30% (9→6) */
/* tên dài tự hạ cỡ (class do bacTen() gắn) — giữ tên gọn MỘT dòng, thẻ cùng hàng
   không bị kéo cao lệch nhau, khoảng trắng tên ↔ giá về đều. */
.pcard .pname.n2 { font-size:clamp(19px,2.05vw,25px); }
.pcard .pname.n3 { font-size:clamp(16px,1.7vw,20px); line-height:1.12; }
/* 16/08 (SS): tên ↔ giá sát lại 30%. Tổng khe = margin dưới .pname (9→6) + padding
   trên .pfrom (10→7) = 19px → 13px. Phải chỉnh CẢ HAI, vì .pfrom có margin-top:auto
   nên chỉ hạ mỗi margin của tên là thẻ nào thừa chỗ vẫn hở nguyên. */
.pcard .pfrom { font-size:14px; color:var(--pink); font-weight:600; letter-spacing:.02em; margin-top:auto; padding-top:7px; }

/* tim lưu — trên ảnh thẻ sản phẩm (icon SVG, không dùng glyph ♡ vì font làm méo) */
.card-heart {
  position:absolute; right:10px; bottom:10px; z-index:3; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1;
  background:rgba(8,7,6,.72); border:1px solid var(--line); color:var(--text); backdrop-filter:blur(3px);
  transition:all .3s; cursor:pointer; opacity:.8;
}
[data-theme="light"] .card-heart { background:rgba(250,248,243,.85); }
.card-heart:hover, .card-heart.on { opacity:1; }
.card-heart:hover { border-color:var(--pink); color:var(--pink); }
.card-heart.on { color:var(--pink); border-color:var(--pink); }
.ht { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; pointer-events:none; }
.card-heart.on .ht { fill:var(--pink); stroke:var(--pink); }
.chip-wish { display:inline-flex; align-items:center; gap:6px; }
.chip-wish .ht { width:12px; height:12px; stroke-width:1.9; }
.chip-wish.on .ht { fill:currentColor; }
.chip-wish .wish-count {
  font-size:10px; background:var(--pink-fill); color:#141210; border-radius:99px; padding:1px 7px; font-weight:700;
}
.chip-wish.on .wish-count { background:#141210; color:var(--pink); }
/* nút tim wishlist trên header (mọi trang) */
.hdr-wish { position:relative; }
.hdr-wish svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.hdr-wish:hover { border-color:var(--pink); color:var(--pink); }
.hdr-wish.has { color:var(--pink); }
.hdr-wish.has svg { fill:var(--pink); stroke:var(--pink); }
.hdr-wish .wish-count {
  display:none; position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; line-height:16px;
  background:var(--pink-fill); color:#141210; font-size:9px; font-weight:700; border-radius:99px; padding:0 4px; text-align:center;
}
.hdr-wish.has .wish-count { display:block; }

/* panel chi tiết bên cạnh lưới */
.store-detail {
  display:none; position:sticky; top:96px; max-height:calc(100vh - 116px); overflow:auto;
  background:var(--bg-2) var(--kraft); background-size:520px; background-blend-mode:multiply;
  border:1px solid var(--line); border-radius:16px; animation:modalIn .5s var(--ease-out);
}
.store-layout.detail-open .store-detail { display:block; }
/* light mode: giữ TỆP NỀN kraft nhưng phủ lớp kem gần đặc để chữ dễ đọc
   (kraft gốc là bản đen — multiply trực tiếp làm panel tối) */
[data-theme="light"] .store-detail, [data-theme="light"] .enq-pop-box {
  background-color:#faf8f3;
  background-image:linear-gradient(rgba(250,248,243,.93), rgba(250,248,243,.93)), var(--kraft);
  background-size:auto, 520px; background-attachment:local, local; background-blend-mode:normal;
}
.store-detail-close {
  position:sticky; top:14px; float:right; margin:14px 18px 0 0; z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(8,7,6,.8); border:1px solid var(--line); color:var(--text); font-size:16px;
  transition:all .3s;
}
[data-theme="light"] .store-detail-close { background:rgba(250,248,243,.85); }
.store-detail-close:hover { border-color:var(--pink); color:var(--pink); }
/* thanh quay lại — CHỈ dùng ở mobile khi panel chiếm toàn màn (xem khối
   store-lock ≤860px bên dưới); ẩn hẳn ở desktop, nút ✕ tròn vẫn lo việc đó. */
.store-detail-bar { display:none; }
.sdb-back {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer;
  background:none; color:var(--text);
}
.sdb-back:hover { border-color:var(--pink); color:var(--pink); }
/* chip loại sản phẩm trong thanh — thay vì tên sp, để nhảy nhanh sang loại
   khác đang xem chi tiết (17/07); cuộn ngang, ẩn scrollbar như .filt-row. */
.sdb-cats { display:flex; gap:8px; overflow-x:auto; flex:1; min-width:0; scrollbar-width:none; }
.sdb-cats::-webkit-scrollbar { display:none; }
.sdb-cats .chip { flex:0 0 auto; font-size:11px; padding:6px 12px; white-space:nowrap; font-weight:700; color:var(--text); }   /* 16/09 — SS: chip loại ở thanh chi tiết SP cũng đậm */
.sdb-cats .chip.on { color:var(--pink); }
.store-detail-body { position:relative; z-index:1; padding:clamp(18px,3vw,40px); padding-top:clamp(14px,2vw,24px); }
/* bố cục ver5 trong panel: KHÔNG dùng grid-areas của .pmodal-body cũ */
.store-detail-body.pmodal-body { display:block; }

/* ── nội dung chi tiết kiểu ver5: media trái (sticky) + thông tin phải ── */
.pm-cols {
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(18px,2.6vw,34px); align-items:start;
}
.pm-media { position:sticky; top:0; min-width:0; }
.pm-side { min-width:0; }
.pm-main { position:relative; }
.pm-main img { cursor:pointer; }
.pm-sarr {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px;
  border-radius:50%; background:rgba(8,7,6,.6); border:1px solid var(--line); color:var(--text);
  font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .3s; padding-bottom:3px;
}
[data-theme="light"] .pm-sarr { background:rgba(250,248,243,.8); }
.pm-sarr:hover { border-color:var(--pink); color:var(--pink); }
.pm-sprev { left:10px; } .pm-snext { right:10px; }
.pm-kick { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--pink); }
.store-detail .pm-name { font-size:clamp(28px,3vw,44px); margin-top:8px; }
.pm-meta { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 10px; }
.pm-tag {
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:4px 12px; transition:all .3s;
}
a.pm-tag:hover { border-color:var(--pink); color:var(--pink); }
.pm-mat { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
/* nội dung panel: THU GỌN khoảng cách dòng (15/07) — bố cục khít như wireframe */
.store-detail .pm-desc { font-size:14.5px; line-height:1.65; }
.store-detail .pm-meta { margin:10px 0 6px; }
.store-detail .pm-note { margin-top:8px; }
.store-detail .pm-prices { margin-top:12px; }
.store-detail .pm-price { padding:9px 0; }
.store-detail .pm-fine { margin-top:10px; font-size:12.5px; }
.store-detail .pm-related { margin-top:18px; padding-top:14px; }
.store-detail .pm-ctas { margin-top:14px; flex-direction:column; align-items:stretch; gap:9px; }
/* khi KHOÁ MÀN: ảnh chính nén theo chiều cao màn — chi tiết vừa khung, không tràn */
body.store-lock .store-detail .pm-main img { aspect-ratio:auto; height:min(44vh,480px); }
body.store-lock .store-detail .pm-name { font-size:clamp(24px,2.4vw,34px); }
.store-detail .pm-ctas .btn-line { text-align:center; }
.store-detail .pm-heart { justify-content:center; }
/* «Để dành suy nghĩ» + «Hướng dẫn đo size» chung 1 hàng */
/* 07/09 — min-width:0 cho phép nút CO XUỐNG DƯỚI bề rộng chữ của chính nó. Đo
   trên panel chi tiết: nút cần 162px (chữ 138 + đệm 12×2) mà chỉ được 154 → dấu
   «›» chỉ còn cách viền 3px trong khi bên trái 13px, nhìn như chữ chờm ra ngoài.
   max-content là sàn đúng: nút không bao giờ hẹp hơn chữ; hết chỗ thì cho xuống
   hàng (flex-wrap) chứ đừng bóp chữ ra ngoài viền. */
.pm-cta-row { display:flex; gap:10px; flex-wrap:wrap; }
.pm-cta-row > * { flex:1 1 auto; min-width:max-content; }
.pm-cta-row .btn-line, .pm-cta-row .pm-heart {
  padding-left:12px; padding-right:12px; font-size:11.5px; letter-spacing:.1em;
  height:44px; display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase;
}
/* nút «Hướng dẫn đo size» ở dark mode: ép chữ TRẮNG — độ ưu tiên chọn lọc
   cao hơn 1 override màu lẻ (nếu còn sót từ trước) nên luôn thắng, không
   phụ thuộc phải dọn đúng dữ liệu cũ trong trình duyệt (16/07) */
[data-theme="dark"] .pm-cta-row [data-sizebtn] { color:#fff !important; }
/* thumbs: TẤT CẢ BẰNG NHAU, 1 hàng lướt ngang (16/07) */
.store-detail .pm-thumbs {
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
}
.store-detail .pm-thumb { width:56px; height:56px; flex:none; }
.store-detail .pm-thumb img { transform:none !important; } /* không zoom/xoay tràn khung thumb */
/* link «xem Chính sách» trong dòng fine-print */
.pm-fine-link { color:var(--pink); border-bottom:1px solid transparent; transition:border-color .3s; }
.pm-fine-link:hover { border-bottom-color:var(--pink); }

/* ── FORM «SỬA NỘI DUNG» trong panel (edit mode) ── */
.pm-editbtn {
  display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; cursor:pointer;
  border:1px dashed var(--pink); color:var(--pink); background:none; border-radius:99px;
  padding:8px 16px; font-family:var(--f-giaodien); font-size:12px; letter-spacing:.08em; transition:background .3s;
}
.pm-editbtn:hover { background:rgba(245,163,195,.12); }
/* đang mở form -> ẩn nội dung xem để tập trung sửa */
.store-detail.edit-open .pm-cols, .store-detail.edit-open .pm-related, .store-detail.edit-open .pm-bgsketch { display:none; }
.pm-editor {
  position:relative; z-index:2; border:1px dashed var(--pink); border-radius:14px;
  padding:18px; margin-bottom:20px; background:var(--bg-2);
}
[data-theme="light"] .pm-editor { background:#faf8f3; }
.pm-editor h3 { font-family:var(--f-tieude); font-weight:400; font-size:20px; color:var(--pink); margin-bottom:4px; }
.pm-editor h3 small { font-size:11px; letter-spacing:.14em; color:var(--muted); font-family:var(--f-giaodien); }
.pm-editor label { display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:13px 0 5px; }
.pm-editor input, .pm-editor textarea {
  width:100%; background:none; border:1px solid var(--line); border-radius:8px; outline:0;
  color:var(--text); font-family:var(--f-giaodien); font-size:13.5px; padding:9px 11px;
  resize:none; overflow:hidden; transition:border-color .3s;
}
.pm-editor input:focus, .pm-editor textarea:focus { border-color:var(--pink); }
.pe-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pe-row { display:flex; gap:8px; margin-bottom:8px; }
.pe-row input { flex:1; min-width:0; }
.pe-row .pe-vnd { flex:0 0 118px; }
.pe-del { flex:none; width:36px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--muted); cursor:pointer; transition:all .3s; }
.pe-del:hover { border-color:#e05a5a; color:#e05a5a; }
.pe-add {
  cursor:pointer; background:none; border:1px dashed var(--line); border-radius:99px; color:var(--muted);
  font-family:var(--f-giaodien); font-size:11px; letter-spacing:.1em; padding:7px 14px; transition:all .3s;
}
.pe-add:hover { border-color:var(--pink); color:var(--pink); }
.pe-actions { display:flex; gap:10px; margin-top:16px; }
.pe-actions .btn-line { flex:1; text-align:center; padding:12px 10px; }
.pe-hint { margin-top:12px; font-size:11px; line-height:1.6; color:var(--muted); }
@media (max-width:700px){ .pe-2col { grid-template-columns:1fr; } .pe-row { flex-wrap:wrap; } }

/* ── POPUP hướng dẫn đo size (theo loại) — video nhẫn mở tiếp popup video ── */
.size-pop { position:fixed; inset:0; z-index:97; display:none; }
.size-pop.open { display:block; }
.size-pop-bk { position:absolute; inset:0; background:rgba(5,4,3,.82); backdrop-filter:blur(8px); }
.size-pop-box {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94vw,560px);
  max-height:86vh; overflow:auto; background:var(--bg-2) var(--kraft); background-size:520px; background-blend-mode:multiply;
  border:1px solid var(--line); border-radius:16px; padding:clamp(22px,4vw,40px); animation:modalIn .5s var(--ease-out);
}
[data-theme="light"] .size-pop-box {
  background-color:#faf8f3;
  background-image:linear-gradient(rgba(250,248,243,.93), rgba(250,248,243,.93)), var(--kraft);
  background-size:auto, 520px; background-blend-mode:normal;
}
.size-pop-close {
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-size:14px; z-index:2;
}
.size-pop-close:hover { border-color:var(--pink); color:var(--pink); }
.size-pop-title { font-family:var(--f-tieude); font-weight:400; font-size:clamp(20px,2.4vw,26px); margin-bottom:14px; padding-right:44px; }
.size-pop-body { font-size:13.5px; line-height:1.9; color:var(--muted); }
.size-pop-body b { color:var(--text); font-weight:400; }
.size-pop-body p { margin-bottom:10px; }
.sz-vidbtn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-bottom:12px;
  background:transparent; border:1.5px solid var(--pink-strong); color:var(--text); border-radius:99px; padding:9px 16px;
  font-family:var(--f-giaodien); font-size:12px; letter-spacing:.08em; transition:all .3s; font-weight:700;
}
.sz-vidbtn:hover { background:rgba(245,163,195,.14); border-color:var(--pink); color:var(--pink); }
.sz-more { display:inline-block; margin-top:4px; color:var(--pink); font-size:12px; letter-spacing:.06em; border-bottom:1px solid transparent; transition:border-color .3s; }
.sz-more:hover { border-bottom-color:var(--pink); }

/* tim lưu trong panel chi tiết */
.pm-heart {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:99px;
  padding:0 16px; height:44px; cursor:pointer; color:var(--text); background:none; font-size:13px;
  transition:all .3s;
}
.pm-heart:hover { border-color:var(--pink); color:var(--pink); }
.pm-heart.on { border-color:var(--pink); color:var(--pink); background:rgba(245,163,195,.12); }
.pm-heart .ht { width:15px; height:15px; }
.pm-heart.on .ht { fill:var(--pink); stroke:var(--pink); }

/* gợi ý sản phẩm liên quan (ver5): dải ngang, tối đa 8 */
.pm-related { position:relative; z-index:1; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.pm-related-h { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.pm-rel-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.pm-rel-row::-webkit-scrollbar { height:5px; }
.pm-rel-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.pm-rcard { flex:0 0 auto; width:104px; display:block; }
.pm-rcard .im {
  display:block; width:104px; height:104px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; transition:border-color .3s;
}
.pm-rcard:hover .im { border-color:var(--pink); }
.pm-rcard .im img { width:100%; height:100%; object-fit:cover; display:block; }
.pm-rcard b {
  display:block; font-family:var(--f-tieude); font-weight:400; font-size:12.5px; line-height:1.2; margin-top:7px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* popup video hướng dẫn đo size */
.vid-pop, .enq-pop { position:fixed; inset:0; z-index:98; display:none; }
.vid-pop.open, .enq-pop.open { display:block; }
.vid-pop-bk, .enq-pop-bk { position:absolute; inset:0; background:rgba(5,4,3,.82); backdrop-filter:blur(8px); }
.vid-pop-box {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,720px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:18px; animation:modalIn .5s var(--ease-out);
}
.vid-pop-box video { width:100%; border-radius:10px; display:block; }
/* nút ✕ đặt HẲN VÀO TRONG hộp (đặt lòi ra ngoài bị cắt góc — lỗi hiển thị) */
.vid-pop-close, .enq-pop-close {
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-size:14px; z-index:2;
}
.vid-pop-close:hover, .enq-pop-close:hover { border-color:var(--pink); color:var(--pink); }

/* popup "Quan tâm sản phẩm" — 2 lựa chọn kênh + form nhắn tin 2 cột */
.enq-pop-box {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94vw,480px);
  max-height:88vh; overflow:auto; background:var(--bg-2) var(--kraft); background-size:520px; background-blend-mode:multiply;
  border:1px solid var(--line); border-radius:16px; padding:clamp(24px,4vw,40px); animation:modalIn .5s var(--ease-out);
  text-align:center;
}
.enq-pop.show-form .enq-pop-box { width:min(94vw,760px); text-align:left; }
.enq-title { font-family:var(--f-tieude); font-weight:400; font-size:clamp(20px,2.4vw,28px); margin-bottom:6px; padding-right:34px; }
.enq-sub { color:var(--muted); font-size:13.5px; margin-bottom:20px; }
/* 3 nút xếp 1 CỘT, căn giữa, bề ngang bằng nhau vừa đủ */
.enq-choices { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px; }
.enq-choices > * { width:min(100%,300px); text-align:center; }
#enqCopyNote { min-height:1.2em; margin-top:8px; }
.enq-cols { display:none; grid-template-columns:.85fr 1.15fr; gap:5vw; margin-top:24px; }
.enq-pop.show-form .enq-cols { display:grid; }
.enq-pop.show-form .enq-choices { display:none; }
.enq-cols-left h4 { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:400; }
.enq-cols-left a { display:block; padding:6px 0; border-bottom:1px solid var(--line); transition:color .3s, padding-left .3s; }
.enq-cols-left a:hover { color:var(--pink); padding-left:8px; }
.enq-form { display:flex; flex-direction:column; gap:12px; }
.enq-form input, .enq-form textarea {
  background:none; border:none; border-bottom:1px solid var(--line); color:var(--text); font-family:var(--f-giaodien);
  font-size:14px; padding:8px 0; outline:none; transition:border-color .3s; width:100%;
}
.enq-form input:focus, .enq-form textarea:focus { border-color:var(--pink); }
.enq-form textarea { resize:vertical; min-height:70px; }
.enq-form button { margin-top:6px; align-self:flex-start; }
.enq-note { font-size:13px; color:var(--pink); margin-top:10px; min-height:1.4em; }
/* ════ KHOÁ MÀN khi mở chi tiết (15/07): trang KHÔNG cuộn — filter ghim
   cùng cột sản phẩm con (cuộn riêng bên trái), panel chính đứng yên.
   Mobile: dải sản phẩm nhỏ ghim trên, kéo NGANG; chi tiết chiếm phần dưới. ════ */
body.store-lock .hdr { transform:none; }
/* chốt chặn: khi khoá màn, thanh lọc + khối sản phẩm là 2 lớp position:fixed
   xếp sát nhau. Chỉ cần lệch 1px là tiêu đề trang bên dưới ló ra thành một dải
   chữ chạy ngang giữa màn. Giấu hẳn sub-hero cho chắc (13/08). */
body.store-lock .sub-hero { visibility:hidden; }
@media (min-width:861px){
  body.store-lock .filters {
    position:fixed; top:var(--lockTop,64px); left:0; right:0; z-index:58; margin:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:10px 0;
    /* vào thẳng bằng deep-link: bỏ hiệu ứng reveal đang dở (mờ + trượt) */
    opacity:1 !important; transform:none !important;
  }
  body.store-lock .filters > .wrap { width:min(96vw,1760px); }
  body.store-lock .store-layout.detail-open {
    position:fixed; z-index:57; left:0; right:0; bottom:0;
    top:calc(var(--lockTop,64px) + var(--lockFilt,58px));
    background:var(--bg); margin:0; overflow:hidden;
    padding:16px calc((100vw - min(96vw,1760px)) / 2) 0;
    display:grid; grid-template-columns:minmax(260px,34%) 1fr; gap:clamp(16px,2vw,32px);
  }
  body.store-lock .store-grid-col {
    overflow-y:auto; height:100%; min-height:0; padding-right:6px; padding-bottom:34px;
    scrollbar-width:thin; overscroll-behavior:contain;
  }
  body.store-lock .store-detail {
    position:relative; top:0; height:calc(100% - 16px); max-height:none;
    overflow:auto; overscroll-behavior:contain; margin-bottom:16px;
  }
}
@media (max-width:860px){
  body.store-lock .filters { display:none; }
  /* Phương án A (16/07): bỏ hẳn dải sản phẩm nhỏ ghim phía trên — khi xem
     chi tiết trên mobile, panel chiếm TOÀN MÀN HÌNH, quay lại bằng thanh
     .store-detail-bar (nút ← + tên sp) thay cho nút ✕ tròn cũ (dễ bị che/
     khó bấm khi panel full-screen). Card list (.store-grid-col) ẩn hẳn
     trong lúc xem chi tiết, không còn cuộn ngang phía trên nữa. */
  body.store-lock .store-layout.detail-open {
    position:fixed; z-index:57; left:0; right:0; bottom:0; top:var(--lockTop,58px);
    background:var(--bg); display:block; margin:0; padding:0; overflow:hidden;
  }
  body.store-lock .store-grid-col { display:none; }
  body.store-lock .store-detail-close { display:none; }
  body.store-lock .store-detail-bar {
    display:flex; align-items:center; gap:10px;
    position:sticky; top:0; z-index:2; padding:14px 16px;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  body.store-lock .store-detail {
    height:100%; overflow-y:auto; overscroll-behavior:contain;
    position:static; max-height:none; margin:0; border-radius:0; border-left:0; border-right:0;
  }
}
/* thanh chỉnh sketch trong ⚙ Quản lý sản phẩm */
.adm-skop { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-left:10px; }
.adm-skop input[type=range] { width:130px; accent-color:var(--pink); }
.adm-skop output { color:var(--pink); font-size:11px; }
.adm-sketch-thumb { background:#fff; }

@media (max-width:860px){
  /* .store-layout.detail-open / .store-detail LUÔN đi kèm body.store-lock
     (xem openDetail()/closeDetail() trong catalogue.js — 2 class này bật/tắt
     cùng lúc, không bao giờ lệch nhau). Trước đây 2 quy tắc dưới đây KHÔNG
     scope theo body.store-lock nên phải "thắng" bằng độ đặc hiệu CSS với
     bộ quy tắc body.store-lock…(max-width:860px) ở trên — rất dễ vỡ khi có
     người sửa 1 trong 2 chỗ. Giờ loại trừ hẳn body.store-lock để chỉ còn
     DUY NHẤT 1 nguồn sự thật cho trạng thái khoá màn (17/07 — fix panel
     chi tiết mobile trống trơn / phần tử trôi nổi). */
  body:not(.store-lock) .store-layout.detail-open { display:block; }
  /* 16/07 (SS): lưới SP đang bắt đầu SÁT ngay dưới thanh filter — thêm nhịp thở */
  .store-layout { padding-top:22px; }
  /* filter mobile hết «chồng đè»: hàng chips cuộn ngang chiếm trọn 1 hàng,
     «Lọc thêm» + «Đã lưu» xuống hàng riêng bên dưới */
  .filter-bar { flex-wrap:wrap; row-gap:8px; }
  .filter-bar .filt-row { flex:1 1 100%; order:1; }
  .filter-bar .more-btn { order:2; }
  .filter-bar .chip-wish { order:3; margin-left:auto; }
  .pgrid, .store-layout.detail-open .pgrid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .psec { margin-bottom:4vh; }
  .psec-h { font-size:18px; }
  .pcard .pname { font-size:21px; }
  body:not(.store-lock) .store-detail { position:static; max-height:none; margin-top:22px; }
  .pm-cols { grid-template-columns:1fr; gap:18px; }
  .pm-media { position:static; }
  .enq-cols { grid-template-columns:1fr; gap:28px; }
}

/* ── policies ── */
.policy-wrap { padding-bottom:6vh; }
.policy-sec { padding:9vh 0 2vh; border-top:1px solid var(--line); scroll-margin-top:90px; }
.policy-title { font-family:var(--f-tieude); font-weight:400; font-size:clamp(28px,3.6vw,52px); margin-bottom:4vh; }
.policy-title em { font-style:normal; color:var(--pink); margin-right:18px; font-size:.6em; vertical-align:middle; }
.policy-sub { font-family:var(--f-tieude); font-weight:400; font-size:clamp(20px,2.2vw,28px); margin:4vh 0 2vh; color:var(--pink); }
.policy-script { font-family:var(--f-vietay); font-size:clamp(24px,3vw,38px); color:var(--pink); margin-bottom:2vh; }
.policy-list { list-style:none; max-width:56em; }
.policy-list li {
  position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--line); color:var(--muted);
}
.policy-list li::before { content:'✦'; position:absolute; left:0; top:14px; color:var(--pink); font-size:13px; }
.policy-list b { color:var(--text); font-weight:400; }
.policy-list a { color:var(--pink); border-bottom:1px solid transparent; }
.policy-list a:hover { border-bottom-color:var(--pink); }

.size-video { position:relative; margin:2vh 0 6vh; }
.size-video video { width:100%; max-height:64vh; object-fit:cover; border-radius:14px; }
/* 07/09 (SS) — muc «Cham soc bac»: DESKTOP chia hai cot, chu trai clip phai.
   Chu muc nay dai ma clip lai doc; xep clip xuong duoi thi phai cuon het chu moi
   thay. Clip dinh (sticky) de con theo mat khi doc cac buoc lam sach.
   Duoi 900px tra ve xep doc — hai cot tren man hep chi lam ca hai cung chat. */
.care-cols { display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(24px,3.4vw,52px); align-items:start; }
.care-cols .care-clip { position:sticky; top:calc(var(--hdr-h,64px) + 16px); }
.care-cols .size-video { margin-top:0; }
@media (max-width:900px){
  .care-cols { grid-template-columns:1fr; }
  .care-cols .care-clip { position:static; }
}

/* 07/09 — BIEN THE CHO CLIP DOC. Luat goc dat object-fit:cover trong khung rong
   het be ngang: clip NGANG thi vua, clip DOC 9:16 bi cat mat khoang hai phan ba
   chieu cao — voi clip huong dan thao tac tay thi cat la mat phan can xem.
   Bien the nay giu tron khung hinh, can giua, cao toi da 78vh. */
.size-video.doc { display:flex; flex-direction:column; align-items:center; }
.size-video.doc video { width:auto; max-width:min(100%,420px); max-height:78vh;
  object-fit:contain; background:var(--bg-2); }
/* 08/09 (SS) — bỏ nhãn chữ đè lên video (.size-video-tag). Cả hai clip đều có
   `controls`, nút play của trình duyệt đã nói rõ đây là video; nhãn hồng đè lên
   chỉ che mất khung hình đầu.

   Mục Đo size: DESKTOP chữ một cột bên trái, clip một cột bên phải và dính theo
   khi cuộn. MOBILE đổi thứ tự bằng `order` — đo nhẫn → bảng size → clip → lắc tay
   & vòng cổ — nên HTML vẫn giữ thứ tự đọc hợp lý cho máy đọc màn hình và SEO. */
.size-khung { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,4vw,60px); align-items:start; }
.size-chu > div + div { margin-top:clamp(26px,3.4vh,44px); }
.size-clip { position:sticky; top:calc(var(--hdr-h,64px) + 16px); }
@media (max-width:860px){
  .size-khung { grid-template-columns:1fr; gap:26px; }
  .size-chu { display:contents; }
  .size-chu > div + div { margin-top:0; }
  .sz-nhan { order:1; }
  .sz-bang { order:2; }
  .size-clip { order:3; position:static; }
  .sz-lac  { order:4; }
}
.size-table { width:100%; border-collapse:collapse; font-size:14px; }
.size-table th {
  text-align:left; font-weight:400; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink); padding:10px 12px; border-bottom:1px solid var(--pink);
}
.size-table td { padding:9px 12px; border-bottom:1px solid var(--line); color:var(--muted); }
.size-table tr td:first-child { font-family:var(--f-tieude); color:var(--text); }
.size-table tr:hover td { color:var(--text); }

.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--f-tieude); font-size:clamp(17px,1.8vw,22px); transition:color .3s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--pink); font-size:24px; transition:transform .35s var(--ease);
}
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq summary:hover { color:var(--pink); }
.faq details p { padding:0 0 22px; color:var(--muted); max-width:52em; }
.faq details a { color:var(--pink); }

.subfoot { margin-top:10vh; }
.subfoot a:hover { color:var(--pink); }

/* ── ✎ chế độ sửa text ── */
.edit-fab {
  position:fixed; right:22px; bottom:22px; z-index:88;
  display:flex; align-items:center; gap:10px;
}
/* edit mode: dời FAB web (💬/↑) sang trái — tránh ĐÈ lên bộ nút sửa
   (hub inject 2 nút ở right:16 / bottom:150–206) */
body.edit-mode .fab-stack { right:84px; }
/* bảng «Aa» — cỡ chữ theo vai trò + khoảng cách mục */
.typo-panel {
  position:fixed; right:22px; bottom:88px; z-index:96; width:min(320px,92vw);
  background:var(--overlay); border:1px solid var(--pink); border-radius:16px; padding:18px 20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.typo-panel > b { display:block; font-size:12px; letter-spacing:.08em; color:var(--pink); margin-bottom:12px; font-weight:400; }
.typo-panel label { display:block; font-size:11.5px; letter-spacing:.06em; color:var(--text); margin-bottom:10px; }
.typo-panel output { float:right; color:var(--pink); font-size:11px; }
.typo-panel input[type=range] { width:100%; margin-top:5px; accent-color:var(--pink); cursor:pointer; }
.typo-reset {
  margin-top:6px; width:100%; cursor:pointer; background:none; border:1px solid var(--line); border-radius:99px;
  color:var(--muted); font-family:var(--f-giaodien); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:8px;
  transition:all .3s;
}
.typo-reset:hover { border-color:var(--pink); color:var(--pink); }
.edit-fab .edit-main, .edit-fab .edit-sub {
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:19px;
  background:var(--overlay); border:1px solid var(--muted); color:var(--text);
  transition:all .3s var(--ease); backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.edit-fab .edit-sub { width:44px; height:44px; font-size:16px; display:none; }
.edit-fab .edit-main:hover, .edit-fab .edit-sub:hover { border-color:var(--pink); color:var(--pink); }
.edit-fab.open .edit-main { background:var(--pink); border-color:var(--pink); color:#fff; font-weight:700; }
.edit-fab.open .edit-sub { display:block; }
.edit-hint {
  display:none; font-size:12px; letter-spacing:.08em; color:var(--pink);
  background:var(--overlay); border:1px solid var(--line); border-radius:99px; padding:9px 18px;
}
.edit-fab.open .edit-hint { display:block; }
body.edit-mode span.vi, body.edit-mode span.en {
  outline:1px dashed rgba(245,163,195,.4); outline-offset:2px; border-radius:2px;
  cursor:text; min-width:8px;
}
body.edit-mode span.vi:hover, body.edit-mode span.en:hover,
body.edit-mode span.vi:focus, body.edit-mode span.en:focus {
  outline-color:var(--pink); background:rgba(245,163,195,.07);
}
body.edit-mode .cursor { display:none; }
@media (max-width:640px){ .edit-hint{display:none !important} }

/* ── ✎ INSPECTOR — panel DUY NHẤT bên phải (kiểu Wix, thay cụm nút rải cũ) ── */
body.edit-mode .insp-hover { outline:1.5px dashed var(--pink); outline-offset:2px; cursor:pointer; }
body.edit-mode .insp-selected { outline:2px solid var(--pink); outline-offset:2px; }
body.edit-mode .insp-el-hidden { opacity:.35; outline:1px dashed var(--muted); }
body.edit-mode .insp-clone { outline:1px dotted var(--pink); outline-offset:3px; position:relative; }
body.edit-mode .insp-clone::before {
  content:'bản sao'; position:absolute; top:-9px; left:0; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; background:var(--pink); color:#fff; padding:1px 6px; border-radius:99px; pointer-events:none; z-index:1;
}
/* khối HOÀN TOÀN MỚI thêm từ Inspector «➕ Thêm khối» (16/07) — kiểu chữ trung
   tính theo hệ thống, chỉnh tiếp bằng chính Inspector (cỡ/màu/đệm/vị trí) */
.insp-new-h { font-family:var(--f-tieude); font-weight:400; font-size:clamp(24px,2.6vw,40px); color:var(--pink); line-height:1.15; margin:18px 0 10px; }
.insp-new-p { font-size:15px; line-height:1.75; color:var(--text); max-width:640px; margin:12px 0; }
a.insp-new-btn { display:inline-block; margin:12px 0; }
.inspector-panel {
  position:fixed; top:0; right:0; bottom:0; width:min(320px,92vw); z-index:97;
  background:var(--overlay); border-left:1px solid var(--pink); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:-14px 0 40px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow-y:auto;
}
.insp-head {
  position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:16px 18px;
  border-bottom:1px solid var(--line); background:inherit; z-index:1;
}
.insp-head b { flex:1; font-family:var(--f-giaodien); font-size:13px; letter-spacing:.06em; color:var(--pink); font-weight:400; }
.insp-status { font-size:10.5px; letter-spacing:.04em; color:var(--muted); opacity:0; transition:opacity .25s; white-space:nowrap; }
.insp-status.show { opacity:1; }
.insp-status.saved { color:var(--pink); }
.insp-close {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--muted);
  cursor:pointer; font-size:12px; transition:all .2s;
}
.insp-close:hover { border-color:var(--pink); color:var(--pink); }
.insp-body { padding:6px 18px 26px; }
.insp-group { padding:16px 0; border-bottom:1px solid var(--line); }
.insp-group:last-child { border-bottom:none; }
.insp-group h4 { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:12px; }
.insp-viewport { text-transform:none; letter-spacing:0; color:var(--pink); font-size:10px; }
.insp-ta {
  width:100%; resize:vertical; min-height:52px; margin-bottom:8px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--line); background:rgba(128,128,128,.06); color:var(--text); font:13px/1.5 inherit;
}
.insp-ta:focus { outline:none; border-color:var(--pink); }
/* ô sửa chữ GIÀU ĐỊNH DẠNG (16/07 — B/I/U/màu theo cụm bôi đen) */
.insp-rt {
  min-height:52px; max-height:180px; overflow-y:auto; margin-bottom:8px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--line); background:rgba(128,128,128,.06); color:var(--text);
  font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.insp-rt:focus { outline:none; border-color:var(--pink); }
.insp-rt:empty::before { content:attr(data-ph); color:var(--muted); }
.insp-rtbar { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.insp-rtbar button, .insp-rtcolor {
  min-width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:6px; color:var(--text);
  cursor:pointer; font-size:12px; padding:0 7px; font-family:inherit; transition:border-color .2s, color .2s;
}
.insp-rtbar button:hover, .insp-rtcolor:hover { border-color:var(--pink); color:var(--pink); }
.insp-rtbar [data-rt="pink"] { color:var(--pink); font-weight:700; }
.insp-rtcolor { position:relative; overflow:hidden; font-weight:700; text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:#4aa3ff; }
.insp-rtcolor input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.insp-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--text); margin-bottom:10px; }
.insp-row:last-child { margin-bottom:0; }
.insp-step { display:flex; align-items:center; gap:8px; }
.insp-step button {
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--text);
  cursor:pointer; font-size:12px; line-height:1; transition:all .2s;
}
.insp-step button:hover { border-color:var(--pink); color:var(--pink); }
.insp-step b { min-width:44px; text-align:center; font-weight:400; color:var(--pink); font-size:11.5px; }
.insp-swatches { display:flex; align-items:center; gap:8px; }
.insp-sw { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer; }
.insp-sw.on { border:2px solid var(--pink); }
.insp-color-custom { width:26px; height:26px; border:none; border-radius:50%; overflow:hidden; padding:0; cursor:pointer; background:none; }
.insp-btnstyles { display:flex; flex-wrap:wrap; gap:8px; }
.insp-sw-btn {
  padding:7px 12px; border-radius:99px; border:1px solid var(--line); background:none; color:var(--muted);
  font-size:11px; letter-spacing:.04em; cursor:pointer; transition:all .2s;
}
.insp-sw-btn.on, .insp-sw-btn:hover { border-color:var(--pink); color:var(--pink); }
.insp-xy { display:flex; gap:10px; margin-bottom:10px; }
.insp-xy label { flex:1; font-size:10.5px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.insp-xy input[type=number] {
  width:100%; padding:7px 9px; border-radius:7px; border:1px solid var(--line); background:rgba(128,128,128,.06);
  color:var(--text); font-size:12.5px;
}
.insp-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); margin-bottom:8px; cursor:pointer; }
/* 18/08 — dòng nhắc trong Inspector (vd sketch đang sửa bản nền sáng hay nền tối) */
.insp-note { margin:2px 0 8px; font-size:11px; line-height:1.45; color:var(--muted); }
.insp-note b { color:var(--pink); font-weight:600; }
.insp-check:last-child { margin-bottom:0; }
.insp-check input { accent-color:var(--pink); width:15px; height:15px; }
.insp-link {
  display:inline-block; background:none; border:1px solid var(--line); border-radius:99px; padding:8px 16px;
  color:var(--text); font-size:11.5px; letter-spacing:.04em; cursor:pointer; transition:all .2s;
}
.insp-link:hover { border-color:var(--pink); color:var(--pink); }
.insp-danger:hover { border-color:#e05a5a; color:#e05a5a; }
.insp-actions { display:flex; flex-wrap:wrap; gap:8px; }
.insp-hint { font-size:11px; color:var(--muted); line-height:1.5; margin-top:10px; }
.insp-typo-role { display:block; font-size:11.5px; letter-spacing:.06em; color:var(--text); margin-bottom:14px; }
.insp-typo-role output { float:right; color:var(--pink); font-size:11px; }
.insp-typo-role input[type=range] { width:100%; margin-top:6px; accent-color:var(--pink); cursor:pointer; }
/* kiểu nền nút — per-element (Inspector · nhóm «Nút») */
.btn-line.bst-fill, .chip.bst-fill { background:var(--pink); border-color:var(--pink); color:#fff; }
.btn-line.bst-fill:hover, .chip.bst-fill:hover { background:var(--pink-strong); border-color:var(--pink-strong); color:#fff; }
.btn-line.bst-invert, .chip.bst-invert { background:var(--text); border-color:var(--text); color:var(--bg); }
.btn-line.bst-invert:hover, .chip.bst-invert:hover { opacity:.85; }
.btn-line.bst-plain, .chip.bst-plain { border-color:transparent; background:none; color:var(--pink); }
.btn-line.bst-plain:hover, .chip.bst-plain:hover { color:var(--pink-strong); }
@media (max-width:640px){ .inspector-panel { width:100vw; } }

/* ── gộp vào Inspector (§5 EDITOR-PLAN): ẨN cụm nút rải cũ — logic kéo/định vị
   bên dưới vẫn giữ nguyên (an toàn, khỏi phải mổ lại), chỉ khoá hiển thị UI cũ
   vì Inspector đã thay thế đầy đủ (✥ Vị trí, Aa Cỡ chữ, deco Sketch, msec Thiết bị). */
.edit-tools, .deco-bar, .deco-size, .msec-bar { display:none !important; }

/* ════════════════════════════════════════════════════════════
   HEADER TOOLS · SEARCH · MENU MOBILE · MOBILE PREVIEW · THEME
   ════════════════════════════════════════════════════════════ */
.hdr-tools { display:flex; align-items:center; gap:10px; }
.icon-btn {
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1;
  background:var(--overlay); border:1px solid var(--line); color:var(--text);
  transition:all .3s; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* glyph ⌕ vốn nhỏ hơn icon khác — phóng cho đều mắt */
#searchBtn { font-size:21px; }
.lang-btn { background:var(--overlay); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.icon-btn:hover { border-color:var(--pink); color:var(--pink); }
.icon-btn svg { width:17px; height:17px; display:block; }
/* 05/09 — icon nút Sáng/Tối đổi từ KÝ TỰ sang SVG.
   Ký tự ☀ là U+2600, nằm trong bộ emoji của Unicode. Font chữ của web (Tegomin)
   không có glyph này nên iOS/Android rơi xuống font emoji MÀU — trên điện thoại nút
   hiện một mặt trời vàng chóe, lệch hẳn với ☾ (U+263E, KHÔNG thuộc bộ emoji nên luôn
   vẽ như chữ) và với mọi icon khác trên header. Desktop không lộ vì font hệ thống ở
   đó có glyph đen trắng. SVG thì mọi máy vẽ như nhau — và đi đúng lối nút ♡ sẵn có.
   Đổi icon theo data-theme bằng CSS, không bằng JS: nút phải đúng ngay từ khung hình
   đầu tiên, trước khi noir.js kịp chạy. */
#themeBtn svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* 07/09 — icon TÌM KIẾM đổi từ KÝ TỰ sang SVG, cùng lý do đã ghi ở nút Sáng/Tối
   ngay trên. Trước đây là ký tự ⌕ (U+2315) đặt font-size 21px: phần MỰC của glyph
   này nhỏ hơn hẳn ô chữ, nên cạnh trái tim SVG 17×17 nó trông bé hơn một bậc dù ô
   nút bằng nhau (đo: cả hai nút đều 38×38). Nay đi cùng luật cỡ với mọi icon khác. */
#searchBtn svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* 07/09 — icon MENU doi tu KY TU sang SVG, cung ly do da ghi o nut Sang/Toi va nut
   Tim kiem. Ky tu ☰ (U+2630) co phan MUC nam thap trong o chu: hop nut can giua dung
   (do ra lech 0) nhung ba vach VE ra van thap hon tam — SS nhin thay ngay. SVG thi
   ve dung toa do minh dat. */
.burger svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#themeBtn .ic-sun { display:none; }
:root[data-theme="light"] #themeBtn .ic-moon { display:none; }
:root[data-theme="light"] #themeBtn .ic-sun { display:block; }
.fab svg { width:22px; height:22px; display:block; margin:auto; }
.burger { display:none; }
@media (max-width:860px){ .burger{display:flex} }
@media (hover:none), (max-width:700px){ #previewBtn{display:none} }

/* hero luôn tối (chữ trên video) bất kể theme */
.hero .hero-kicker { color:#a89f90; }
.hero .hero-sub { color:#f5a3c3; }
.hero .hero-scroll { color:#a89f90; }
.hero .hero-scroll i { background:rgba(236,230,218,.14); }
.hero-marquee .marquee-track > span { color:#f5a3c3; }

/* light-mode tinh chỉnh */
[data-theme="light"] .grain { opacity:.05; }
[data-theme="light"] .hdr.scrolled { background:rgba(240,236,228,.88); }
[data-theme="light"] .subpage .hdr { background:linear-gradient(rgba(240,236,228,.96), rgba(240,236,228,0)); }
[data-theme="light"] .subpage .hdr.scrolled { background:rgba(240,236,228,.88); }
[data-theme="light"] .loader { background:var(--bg); }
/* sketch = nét trắng trên nền đen -> light mode phải invert rồi multiply */
[data-theme="light"] .chapter-sketch, [data-theme="light"] .deck-sketch, [data-theme="light"] .bg-sketch {
  /* sketch đã convert PNG TRONG SUỐT (nét đen + alpha, 15/07) — hết hẳn
     lỗi tách nền, không cần blend/ép trắng nữa */
  /* 07/09 (SS) — 30% quá đậm, nét sketch tranh đọc với chữ. Về 6%: vẫn thấy có
     hình sau lưng chữ nhưng không còn cạnh tranh sự chú ý. */
  mix-blend-mode:normal; filter:none; opacity:.06;
}
/* cursor light mode: blend thường trên nền sáng, nhưng KHI Ở VÙNG TỐI
   (hero, video) thì trả lại hiệu ứng difference như dark mode */
[data-theme="light"] .cursor { mix-blend-mode:normal; }
[data-theme="light"] .cursor.is-hover { background:rgba(194,58,116,.12); }
[data-theme="light"] .cursor.is-big { background:var(--pink); }
[data-theme="light"] .cursor.is-big .cursor-label { color:#fff; }
[data-theme="light"] .cursor.over-dark { mix-blend-mode:difference; border-color:#f5a3c3; }
[data-theme="light"] .cursor.over-dark.is-big { background:#f5a3c3; }
[data-theme="light"] .footer-giant, [data-theme="light"] .chapter-num { -webkit-text-stroke-color:rgba(194,58,116,.35); }
[data-theme="light"] .show-card { background:#faf8f3; box-shadow:0 10px 30px rgba(30,20,10,.08); }
[data-theme="light"] .ph { box-shadow:0 20px 50px rgba(30,20,10,.2); }
[data-theme="light"] .ph-tag, [data-theme="light"] .show-sym { background:rgba(250,248,243,.88); }
[data-theme="light"] .pmodal-box { background:#faf8f3; }
[data-theme="light"] .pmodal-backdrop { background:rgba(60,50,40,.5); }
[data-theme="light"] .pmodal-close { background:rgba(250,248,243,.9); }
[data-theme="light"] .craft-video video, [data-theme="light"] .hero-video { filter:grayscale(.2) contrast(1.04) brightness(.85); }
[data-theme="light"] .btn-fill { color:#1b1712; }
/* light: card dùng ảnh cutout (nền trong suốt) */
/* 17/08 (SS chốt phương án A) — nền ô ảnh PNG cắt nền phải ĐỔI THEO NỀN TRANG.
   Trước đây ghim cứng màu kem #e9e5dc nên ở nền tối, thẻ nào cũng có một mảng
   sáng chói cắt ngang. Nay: nền tối → tông tối; nền sáng → giữ nguyên kem cũ.
   Đổ bóng cũng phải đổi: bóng nâu trên nền tối thì không nhìn thấy gì. */
.im.im-cut { background:#17161a; }
.im.im-cut img { object-fit:contain; padding:10%; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
[data-theme="light"] .im.im-cut { background:#e9e5dc; }
[data-theme="light"] .im.im-cut img { filter:drop-shadow(0 12px 18px rgba(30,20,10,.25)); }

/* ── sketch nền trang trí ──
   nạp trước bằng JS (initDecoFade) rồi mới hiện dần — tránh chớp
   nền trắng/ảnh gốc chưa đổ hiệu ứng lúc ảnh còn đang tải chậm.
   .sk-loading chỉ là lớp TẠM lúc ảnh chưa nạp xong — gỡ ra là opacity
   trở lại đúng giá trị mặc định (hoặc giá trị admin đã tuỳ chỉnh, nếu có). */
.bg-sketch, .deck-sketch, .chapter-sketch { transition:opacity .7s var(--ease); }
.bg-sketch.sk-loading, .deck-sketch.sk-loading, .chapter-sketch.sk-loading { opacity:0 !important; }
.bg-sketch {
  position:absolute; top:50%; right:-6%; width:min(46vw,560px); aspect-ratio:3/4; z-index:0;
  transform:translateY(-50%); pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  /* PNG trong suốt nét ĐEN → dark mode invert thành nét trắng */
  opacity:.16; mix-blend-mode:normal; filter:invert(1);
}
.bg-sketch.left { right:auto; left:-6%; }
.manifesto, .craft, .contact, .sub-hero { position:relative; overflow:hidden; }
.manifesto .wrap, .craft .wrap, .contact .wrap, .sub-hero .wrap { position:relative; z-index:1; }
.pm-bgsketch { top:auto; bottom:-4%; right:-3%; width:38%; opacity:.14; transform:none; }
.pmodal-body { position:relative; z-index:1; }

/* ── deck biểu tượng (xem lần lượt, không kéo dài) ── */
/* 07/09 chiều (SS) — THANH TÊN BIỂU TƯỢNG RA GIỮA, nằm NGANG bên trên sân khấu.
   Bố cục cũ (cột tên 250px dính bên trái + khung nội dung bên phải) là chỗ SS thấy
   «hơi kỳ»: cột tên dính sticky đứng lơ lửng cạnh một khung nội dung vốn đã có hai
   cột bên trong, thành ba cột lệch nhau. Nay một cột, thanh tên là mục lục ở giữa. */
.deck { display:block; width:min(92vw,1360px); margin:4vh auto 0; }
/* 16/07 (SS, đo qua Chrome): .deck nằm NGOÀI .wrap nên không nhận 16px lề
   mobile mà hub inject cho .wrap ở ≤640px — nội dung biểu tượng rộng hơn cột
   chữ (24px vs 40px). Bù đúng 16px, đúng ngưỡng, cho đồng bộ lề toàn trang. */
@media (max-width:640px){
  .deck { padding-left:16px; padding-right:16px; }
}
.deck-nav { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px clamp(14px,2.4vw,34px); position:static; }
.deck-tab {
  display:flex; align-items:baseline; gap:12px; text-align:center; cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent; padding:10px 2px;
  font-family:var(--f-tieude); font-size:20px; color:var(--muted); transition:all .3s var(--ease);
}
.deck-tab em { font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--muted); font-family:var(--f-giaodien); }
.deck-tab:hover { color:var(--text); }
.deck-tab.on { border-bottom-color:var(--pink); color:var(--pink); }
/* .deck-more nằm CÙNG một flex container với các tab. Không cho nó chiếm trọn một
   hàng riêng thì nó đứng ngang hàng và đẩy cụm tab lệch hẳn sang trái. */
.deck-more { flex-basis:100%; margin-top:10px; padding-left:0; text-align:center;
  font-family:var(--f-vietay); font-size:18px; color:var(--muted); }
/* hạ chiều cao khoá của sân khấu biểu tượng — trước 78vh làm mục 02↔03 hở quá xa */
.deck-stage { position:relative; min-height:min(58vh,560px); margin-top:clamp(20px,3vh,40px); }
.deck-panel {
  position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s;
}
.deck-panel.on { position:relative; opacity:1; visibility:visible; transform:none; transition-delay:.1s,.1s,0s; }
.deck-sketch {
  position:absolute; right:0; top:0; width:52%; height:100%; z-index:0; pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:center right;
  opacity:.5; mix-blend-mode:normal; filter:invert(1); /* PNG nét đen → dark hiện trắng */
}
[data-theme="light"] .deck-sketch { opacity:.42; }
/* 18/08 (SS) — sketch CÓ SẴN HAI BẢN (nét đen / nét trắng do designer xuất riêng):
   JS chọn file theo nền, nên phải TẮT invert ở cả hai nền. Để nguyên invert thì
   nền tối lấy bản nét trắng đem đảo thành đen → mất hút trên nền đen.
   Viết `html[data-theme=...]` để thắng `[data-theme="light"] .deck-sketch` ở trên
   bằng độ đặc hiệu, khỏi phải dùng !important. */
.deck-sketch.sk-doi,
html[data-theme="light"] .deck-sketch.sk-doi { filter:none; mix-blend-mode:normal; }
/* 18/08 — CẮT KHUNG sketch. `.sk-cat` biến khung thành ô ngắm: ảnh nằm ở lớp con
   `.sk-in` và bị xén theo biên khung. Chỉ có class này khi SS thật sự chỉnh gì đó,
   nên sketch chưa đụng tới vẫn tràn viền như nếp cũ. */
.bg-sketch.sk-cat, .deck-sketch.sk-cat, .chapter-sketch.sk-cat { overflow:hidden; }
/* Tay nắm ⤡ vốn nhô ra ngoài khung (right/bottom −14px) — khung cắt thì nó bị xén
   mất, tức là chỉnh xong một lần là hết đường kéo lại. Kéo nó vào trong. */
.sk-cat > .deco-size { right:6px; bottom:6px; }
.sk-in {
  position:absolute; inset:0; pointer-events:none;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  transform-origin:50% 50%;
}
/* sketch phụ (khi chương có 2 hình): nhỏ hơn, lệch vào giữa */
.deck-sketch-2 { right:34%; width:34%; opacity:.3; background-position:center; }
@media (max-width:980px){ .deck-sketch-2 { right:50%; width:55%; opacity:.2; } }
/* chỉ còn sketch làm visual — body chiếm nửa trái, sketch nổi bên phải */
.deck-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3.5vw; align-items:center; }
.deck-inner .deck-body { grid-column:1; }
.deck-name { font-family:var(--f-tieude); font-weight:400; font-size:clamp(44px,6vw,92px); line-height:1; }
.deck-story { color:var(--muted); max-width:34em; margin-bottom:24px; }
.deck-story:last-child { margin-bottom:0; }
/* nút nay đứng TRÊN phần chữ (xem renderDeck) — nên lề dưới, không phải lề trên */
.deck-cta { margin:6px 0 26px; }
.deck-visual { position:relative; aspect-ratio:3/4; max-height:60vh; }
/* mũi tên chuyển biểu tượng — mang tên BST, căn lề phải */
.deck-ctl { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:26px; position:relative; z-index:2; }
.deck-arrow {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:99px; cursor:pointer;
  background:var(--overlay); border:1px solid var(--line); color:var(--text); transition:all .3s;
  font-family:var(--f-tieude); font-size:16px;
}
.deck-arrow i { font-style:normal; font-size:15px; color:var(--pink); }
.deck-arrow b { font-weight:400; }
.deck-arrow:hover { border-color:var(--pink); color:var(--pink); }
/* gallery vuốt ngang (chỉ mobile) */
.deck-gallery { display:none; }
@media (max-width:980px){
  .deck { grid-template-columns:1fr; gap:18px; }
  .deck-nav { position:static; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:8px; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .deck-nav::-webkit-scrollbar { display:none; }
  .deck-tab { border-bottom:2px solid var(--line); padding:8px 14px; white-space:nowrap; font-size:17px; flex:none; }
  .deck-tab.on { border-bottom-color:var(--pink); }
  .deck-more { display:none; }
  /* gói gọn 1 màn hình: ẩn cặp ảnh lớn, dùng gallery vuốt; story rút gọn */
  .deck-inner { grid-template-columns:1fr; gap:16px; }
  .deck-visual { display:none; }
  .deck-gallery {
    display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:4px;
  }
  .deck-gallery::-webkit-scrollbar { display:none; }
  .deck-gallery img {
    width:62%; flex:none; aspect-ratio:1; object-fit:cover;
    border-radius:12px; scroll-snap-align:center; border:1px solid var(--line);
  }
  .deck-name { font-size:clamp(38px,11vw,56px); }
  .deck-story {
    /* trước đây giới hạn 4 dòng + "…" — SS muốn đọc trọn nội dung, bỏ giới
       hạn, để panel tự cao theo nội dung + cuộn (16/07) */
    margin-bottom:14px; font-size:14.5px;
  }
  .deck-sketch { width:96%; right:-6%; opacity:.34; }
  .deck-stage { min-height:0; }
  .deck-panel { position:absolute; }
  .deck-panel.on { position:relative; }
  .deck-ctl { margin-top:16px; }
  .deck-arrow { padding:10px 14px; font-size:14px; }
}

/* ── search overlay ── */
.search-ov {
  position:fixed; inset:0; z-index:92; display:none;
  background:var(--overlay); backdrop-filter:blur(10px);
}
.search-ov.open { display:block; }
.search-box { width:min(92vw,760px); margin:14vh auto 0; }
.search-head { display:flex; gap:14px; align-items:center; border-bottom:1px solid var(--pink); padding-bottom:14px; }
.search-head input {
  flex:1; background:none; border:0; outline:0; color:var(--text);
  font-family:var(--f-tieude); font-size:clamp(22px,3.4vw,40px);
}
.search-head input::placeholder { color:var(--muted); opacity:.7; }
.search-close {
  width:44px; height:44px; border-radius:50%; cursor:pointer; flex:none;
  background:none; border:1px solid var(--line); color:var(--text); transition:all .3s;
}
.search-close:hover { border-color:var(--pink); color:var(--pink); }
.search-res { margin-top:14px; max-height:56vh; overflow:auto; }
.sr-group { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--pink); margin:20px 0 6px; }
.sr-item {
  display:flex; align-items:center; gap:14px; padding:11px 6px;
  border-bottom:1px solid var(--line); transition:background .2s, padding-left .2s;
}
.sr-item:hover { background:rgba(245,163,195,.07); padding-left:14px; }
.sr-item img { width:46px; height:46px; object-fit:cover; border-radius:8px; flex:none; }
.sr-item b { font-family:var(--f-tieude); font-weight:400; font-size:17px; display:block; }
.sr-item small { color:var(--muted); font-size:12px; letter-spacing:.06em; }
.sr-empty { color:var(--muted); padding:24px 6px; font-family:var(--f-vietay); font-size:20px; }

/* ── menu mobile ── */
.menu-ov {
  position:fixed; inset:0; z-index:91; background:var(--overlay); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s;
}
body.nav-open .menu-ov { opacity:1; visibility:visible; transition-delay:0s; }
.menu-logo { width:54px; margin-bottom:4vh; opacity:.95; }
[data-theme="light"] .menu-logo { filter:brightness(0); } /* light mode: con Lạc màu đen */
.menu-ov a {
  font-family:var(--f-tieude); font-size:clamp(32px,8.5vw,52px); line-height:1.55; color:var(--text);
  transform:translateY(24px); opacity:0; transition:transform .5s var(--ease), opacity .5s, color .3s;
}
body.nav-open .menu-ov a { transform:none; opacity:1; }
.menu-ov a:nth-child(2){transition-delay:.05s} .menu-ov a:nth-child(3){transition-delay:.1s}
.menu-ov a:nth-child(4){transition-delay:.15s} .menu-ov a:nth-child(5){transition-delay:.2s}
.menu-ov a:hover { color:var(--pink); }
.menu-foot { margin-top:5vh; display:flex; gap:12px; justify-content:center; }
body.nav-open { overflow:hidden; }

/* ── mobile preview (khung iPhone) ── */
.preview-fab {
  position:fixed; left:22px; bottom:22px; z-index:88;
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:20px;
  background:var(--overlay); border:1px solid var(--line); color:var(--text);
  transition:all .3s; backdrop-filter:blur(6px);
}
.preview-fab:hover { border-color:var(--pink); }
@media (hover:none), (max-width:700px) { .preview-fab { display:none; } }
.prev-ov {
  position:fixed; inset:0; z-index:93; display:none; align-items:center; justify-content:center;
  background:rgba(5,4,3,.85); backdrop-filter:blur(8px);
}
.prev-ov.open { display:flex; }
.prev-frame {
  width:390px; height:844px; flex:none; border-radius:44px; overflow:hidden;
  border:10px solid #1c1a17; box-shadow:0 40px 120px rgba(0,0,0,.7); background:#000;
  transform-origin:center;
}
.prev-frame iframe { width:100%; height:100%; border:0; }
.prev-close {
  position:absolute; top:24px; right:28px; width:48px; height:48px; border-radius:50%;
  background:rgba(16,13,10,.9); border:1px solid rgba(236,230,218,.2); color:#ece6da;
  font-size:18px; cursor:pointer;
}
.prev-close:hover { border-color:#f5a3c3; color:#f5a3c3; }

/* ── FAB ↑ + ✉ liên hệ nhanh ── */
.fab-stack {
  position:fixed; right:22px; bottom:88px; z-index:87;
  display:flex; flex-direction:column; gap:10px;
}
.fab {
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:19px;
  background:var(--overlay); border:1px solid var(--line); color:var(--text);
  transition:all .3s var(--ease); backdrop-filter:blur(6px);
}
.fab:hover { border-color:var(--pink); color:var(--pink); }
.fab-top { opacity:0; visibility:hidden; transform:translateY(8px); transition:all .3s var(--ease); }
.fab-stack.show-top .fab-top { opacity:1; visibility:visible; transform:none; }
.contact-pop {
  position:fixed; right:84px; bottom:88px; z-index:89; width:min(calc(100vw - 32px), 300px);
  background:var(--overlay); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease);
}
.contact-pop.open { opacity:1; visibility:visible; transform:none; }
@media (max-width:700px){
  .contact-pop { right:16px; left:auto; bottom:212px; }
  .fab-stack { bottom:92px; }
  .edit-fab { bottom:24px; }
}
.pop-title { font-family:var(--f-vietay); font-size:20px; color:var(--pink); margin-bottom:8px; }
.contact-pop a, .contact-pop button {
  display:block; width:100%; text-align:left; padding:10px 0;
  border:0; border-bottom:1px solid var(--line); background:none;
  font-family:var(--f-giaodien); font-size:14px; color:var(--text); cursor:pointer;
  transition:color .3s, padding-left .3s;
}
.contact-pop a:hover, .contact-pop button:hover { color:var(--pink); padding-left:6px; }
.contact-pop button { border-bottom:0; }

/* modal lời nhắn */
.msg-modal { position:fixed; inset:0; z-index:94; display:none; }
.msg-modal.open { display:block; }
.msg-backdrop { position:absolute; inset:0; background:rgba(5,4,3,.7); backdrop-filter:blur(6px); }
.msg-box {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,440px); background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  /* 07/09 — đệm TRÊN phải chừa chỗ cho nút ✕. Nút rộng 36px đặt cách mép 14px, tức
     chiếm 50px tính từ mép; đệm cũ 28px nên nó ăn vào 22px của khung form bên trong,
     chữ ✕ đè lên góc form. Đo trên khung 375: form x 44→331, nút x 309→345. */
  padding:58px 28px 28px; display:flex; flex-direction:column; gap:14px;
}
[data-theme="light"] .msg-box { background:#faf8f3; }
.msg-box h3 { font-family:var(--f-tieude); font-weight:400; font-size:26px; }
.msg-box label { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.msg-box input, .msg-box textarea {
  font-family:var(--f-giaodien); font-size:15px; color:var(--text);
  background:none; border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;
  resize:vertical;
}
.msg-box input:focus, .msg-box textarea:focus { border-color:var(--pink); }
.msg-box .btn-line { cursor:pointer; font-family:var(--f-giaodien); }
.msg-close {
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--text); cursor:pointer;
}
.msg-close:hover { border-color:var(--pink); color:var(--pink); }
.msg-note { font-size:12px; color:var(--muted); }
/* 05/09 — #msgForm được DỜI vào .msg-box khi mở popup (xem moKhungNhan trong
   noir.js). Lưới 2 cột của chân trang không vừa hộp 440px, nên trong popup ép về
   một cột và cho cuộn khi màn thấp — form ba chế độ có lúc dài hơn màn hình. */
.msg-box .cform-grid { grid-template-columns:1fr; }
.msg-box .cform h3 { margin-bottom:2px; }
.msg-box { max-height:88vh; overflow:auto; }
.msg-box .cform-wide { grid-column:auto; }

/* 06/09 — TRANG DẤU ẤN, bố cục ②: ba bước xuống cuối dạng DẢI NGANG.
   Ở trang chủ cũ ba bước nằm ngay dưới clip trong cùng một mục nên thừa hưởng
   khoảng đệm rất rộng của .craft. Nay chúng là mục riêng ở cuối trang — phần đọc
   thêm — nên siết đệm trên lại, nếu không giữa deck và ba bước hở một khoảng
   trống lớn trông như trang bị đứt. */
.craft-buoc { padding-top:2vh; }
.craft-buoc .sec-index { margin-bottom:14px; }
@media (min-width:861px){
  /* 07/09 chiều — `:not(.ct-buoc-luoi)`: luật ba cột này nằm SAU luật bốn cột của
     lưới 8 bước và cùng hạng ưu tiên (0,2,0) nên nó thắng, kéo lưới về ba cột.
     Loại trừ thẳng ở đây thay vì chồng thêm !important. */
  .craft-buoc .craft-more:not(.ct-buoc-luoi) { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:start; }
}

/* ── edit mode: LỐI VỀ HUB (16/08, SS) ──
   Đã gỡ toàn bộ dải chỉnh ảnh trên card (.ce-row/.ce-item/.ce-del/.ce-zoom/.ce-pan/
   .ce-hint) và bộ sửa gallery trong panel. Còn đúng một lối: mở SKU đó ở Quản trị. */
.card-edit {
  border-top:1px dashed var(--pink); padding:9px 12px 11px;
  background:rgba(245,163,195,.05); display:flex; flex-direction:column; gap:6px;
}
.ce-hub, .ce-open {
  display:block; width:100%; text-align:center; cursor:pointer;
  border:1px dashed var(--pink); color:var(--pink); background:none; border-radius:99px;
  padding:7px 12px; font-family:var(--f-giaodien); font-size:11px; letter-spacing:.08em;
  transition:background .3s;
}
.ce-hub:hover, .ce-open:hover { background:rgba(245,163,195,.12); }
/* nút trong panel chi tiết sản phẩm */
.pm-hub {
  display:block; margin-top:10px; text-align:center;
  border:1px dashed var(--pink); color:var(--pink); border-radius:99px;
  padding:7px 12px; font-family:var(--f-giaodien); font-size:11px; letter-spacing:.08em;
  transition:background .3s;
}
.pm-hub:hover { background:rgba(245,163,195,.12); }
/* nút đang chờ xác nhận nhịp 2 (thay cho confirm() bị Chrome chặn) — phải nở ra
   cho vừa câu hỏi, và đổi màu để không ai bấm nhầm tưởng nút bình thường */
.arm {
  width:auto !important; padding:0 12px !important; height:26px;
  font-size:10.5px !important; letter-spacing:.05em; white-space:nowrap;
  background:var(--pink) !important; color:var(--accent-ink) !important; font-weight:600;
  border-radius:99px !important;
}
.pm-edit-pan { display:inline-flex; gap:3px; }

/* ── tay kéo chỉnh bề rộng khung chữ (edit mode) ── */
.resize-h {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:10px; border-radius:50%;
  background:var(--pink); color:var(--accent-ink); font-size:13px;
  cursor:ew-resize; user-select:none; vertical-align:middle;
}
/* deck: dòng tagline giữa 2 mũi tên */
.deck-cur { font-family:var(--f-vietay); font-size:clamp(18px,2vw,24px); color:var(--pink); }

/* ── BẢN MOBILE: ẩn/đổi thứ tự section + siết khoảng cách ── */
@media (max-width:700px){
  body { display:flex; flex-direction:column; } /* để style.order hoạt động */
  .m-hide { display:none !important; }
  /* trong ✎ sửa web, mục "ẩn ở mobile" vẫn hiện dạng mờ + viền để còn bấm
     BẬT LẠI được ngay trên điện thoại — trước đây ẩn tuyệt đối kể cả lúc
     sửa nên lỡ ẩn nhầm 1 mục thì chỉ gỡ được bằng cách mở ở khung desktop,
     rất dễ quên/bỏ sót (giống .sec-hidden đã làm) (16/07). */
  body.edit-mode .m-hide { display:block !important; opacity:.3; outline:2px dashed var(--pink); outline-offset:-2px; }

  /* 08/09 (SS) — mobile cũng nới ra theo bản desktop, nhưng nới ÍT hơn: màn dọc
     hẹp nên mỗi vh ăn nhiều hơn, cộng thêm ghi chú cũ ở đây là «mỗi mục gọn trong
     một màn hình». Nới quá là mỗi mục thành hai màn phải cuộn. */
  .manifesto { padding-top:9vh; padding-bottom:6vh; }
  /* câu tuyên ngôn to hơn trên mobile — đặt lại BIẾN chứ không ghi font-size ở đây:
     bản CSS hub sinh ra phun `.manifesto-text{font-size:… !important}` và sẽ xoá sạch
     mọi font-size thường. Đây là lần thứ SÁU cùng cơ chế đó.
     08/09 chốt 1.3; 09/09 SS báo cỡ đó làm bố cục mục (01) mất cân → hạ về 1.15. */
  :root { --co-tieude-mf:calc(var(--co-tieude) * 1.15); }
  /* 08/09 (SS) — câu hồng trên mobile GIẢM 30% so với bản desktop (+44%): màn hẹp
     nên cỡ đó ăn ba dòng và lấn hết khoảng thở của mục. 1.44 × 0.7 ≈ 1.0. */
  :root { --co-vietay-mf:calc(var(--co-vietay) * 1.008); }
  .manifesto-foot { margin-top:3vh; gap:22px; }
  .spec-strip { margin-top:3vh; margin-bottom:7vh; } /* 16/07: SS báo mục (01)↔(02) sát quá trên mobile */
  .spec { padding:16px 10px; }
  /* 08/09 (SS: «chữ đen cứ 2 chữ là xuống dòng») — ô hẹp mà giãn chữ .12em thì
     mỗi dòng chỉ chứa nổi hai từ. Siết giãn chữ và hạ cỡ một nấc để nhãn tự vắt
     cân; `text-wrap:balance` chia đều số từ mỗi dòng thay vì bỏ một từ lẻ xuống
     dòng cuối. KHÔNG siết xuống .02em như lần trước — mức đó làm bốn ô lệch nhau
     ô hai dòng ô một dòng (ghi chú 07/09 ngay dưới). */
  .spec span { letter-spacing:.04em; font-size:10.5px; text-wrap:balance; }
  /* 07/09 (SS) — GIU NGUYEN gian chu goc (.12em) cho nhan trong o. Toi da thu siet
     xuong .02em de nhan ngan vua mot dong, nhung ra bon o KHONG DEU: hai o mot dong,
     hai o hai dong. SS muon ca bon cung 2 dong cho thang hang, nen bo luat siet do. */
  .symbols, .craft, .showcase { padding-top:8vh; padding-bottom:6vh; }
  .contact { padding-top:9vh; margin-top:5vh; }
  .chapter { margin-top:6vh; padding:6vh 0; }
  .deck { margin-top:4vh; }
  .craft-note { margin-top:2.5vh; }
  html:not(.lang-en) .vi.chi-dt, html.lang-en .en.chi-dt { display:none; }
  html:not(.lang-en) .vi.chi-mb, html.lang-en .en.chi-mb { display:inline; }
  /* 08/09 (SS) — mobile canh đều hai bên.
     🔴 `text-wrap:wrap` là BẮT BUỘC ở đây — nó TẮT `text-wrap:pretty` mà chính tôi
     đặt cho các đoạn này hôm 07/09. Blink gặp `pretty` + `justify` thì đem kéo giãn
     cả DÒNG CUỐI, ra cảnh «thủ ......... công.». Đo tại chỗ: giữ pretty thì dòng
     cuối rộng 311px đúng bằng khung, bỏ pretty còn 42px. `text-align-last:left`
     một mình KHÔNG cứu được (đã thử, computed ra `left` mà vẫn giãn) — giữ lại làm
     lớp bảo hiểm cho trình duyệt khác.
     `hyphens:auto` để từ dài không tạo khe trắng lớn giữa dòng. */
  .dn-doan p, .craft-note p, .bt-lop-chu > p,
  .bt-manh-o p, .chapter-story, .policy-list li, .faq details p,
  .manifesto-foot > p, .sub-note, .vnote, .contact-cols p {
    text-align:justify; text-align-last:left; text-wrap:wrap;
    hyphens:auto; -webkit-hyphens:auto; }
  /* 09/09 (SS: «clip chế tác mobile để khung ngang thay vì vuông») — nguồn mobile
     là chetac-mobile.mp4 DỌC 720×1280. Không ép khung thì chiều cao chạy theo tỉ lệ
     dọc rồi bị `max-height:52vh` chặn lại, ra một ô xấp xỉ 4:5 — đúng cái SS gọi là
     vuông. Ép 16/9 lên chính KHUNG (không phải thẻ video) để bản ảnh động nền trong
     app — nó đặt background lên .craft-video và ẩn thẻ video — cũng có đúng khung đó.
     Đánh đổi: nguồn dọc nằm trong khung ngang thì `object-fit:cover` cắt trên–dưới,
     chỉ còn dải giữa. Muốn hết cắt thì phải xuất lại chetac-mobile.mp4 dạng ngang. */
  .craft-video { margin-top:4vh; aspect-ratio:16/9; overflow:hidden; border-radius:14px; }
  .craft-video video { height:100%; max-height:none; }
  .craft-marquee { margin-top:4vh; }
  .show-grid { margin-top:4vh; gap:14px; }
  .show-more { padding-top:5vh; }
  .contact-body { margin-top:4vh; }
  .contact-cols { margin-top:0; gap:26px; }
  .footer-giant { margin-top:6vh; }
  /* 07/09 (SS) — dòng hồng TO HƠN trên mobile và cho phép xuống 3 dòng.
     clamp chung là clamp(22px,2.7vw,37px): ở 375px thì 2.7vw chỉ ra 10px nên
     rơi về sàn 22px — nhỏ hơn hẳn so với desktop 37px. Ở khổ hẹp thì vw là
     thước đo sai; dùng thước riêng cho mobile. */
  /* Co o day la co GOC; bo ti le «Chu viet tay» trong hub (dang 70%) se nhan vao
     truoc khi ra man. Dat 10.6vw de sau khi nhan 0.7 con ~28px tren khung 375 —
     du to va du cho cau xuong 3 dong dung nhu SS muon. */
  :root { --co-vietay:clamp(32px,10.6vw,44px); }
  .sub-hero { padding:7vh 0 1vh; } /* 16/07 (SS): headline gần filter hơn */
  /* 08/09 (SS) — mobile bỏ đoạn dẫn của trang Chính sách: nó liệt kê lại đúng tên
     các tab nằm ngay bên dưới, nên trên màn hẹp là một màn chữ nói lại điều mà
     hàng chip đã nói rõ hơn. Desktop giữ nguyên. */
  .sub-hero .sub-note { display:none; }
  .policy-sec { padding-top:5vh; }
  .size-video { margin:1.5vh 0 4vh; }
  /* 07/09 (SS) — tren mobile tieu de muc trong NHO HON ca chu than. Do ra: tieu de
     24px, than 16px. Ti le 1.5 lan nghe thi du, nhung font tieu de la kieu gothic
     hep con font than la kieu rong deu, nen 24px doc ra be hon 16px kia — chua ke
     bo ti le cua SS dang de tieu de o 80% con than 100%, tuc thu bac bi keo lai gan.
     Nang co GOC len de sau khi nhan 0.8 van con cach biet ro. */
  :root { --co-tieude:clamp(34px,10vw,46px); }
  /* 07/09 (SS) — chu «sat mep qua» tren mobile. .wrap la min(92vw,…) nen tren khung
     375 chi chua 15px moi ben. Ha ve 88vw -> 22px, doc de tho hon ma van khong hep chu. */
  .wrap { width:min(88vw,1360px); }
  /* <br class="ngat-mb"> chi ngat tren mobile — dung cho tieu de can xuong dong dung y */
  .ngat-mb { display:inline; }
  .hero-scroll { bottom:70px; letter-spacing:.2em; max-width:92vw; } /* giữ 1 dòng cả bản EN dài hơn trên màn hẹp */
  /* 16/07 (SS): mục Liên hệ căn TRÁI thống nhất với các mục trên — chỉ giữ
     dòng © cuối trang căn giữa */
  .footer-base { flex-direction:column; align-items:center; text-align:center; gap:8px; }
  .contact-cols { text-align:left; }
  .contact-cols a { text-align:left; }
  .contact-big { text-align:left; margin:0; }
  .contact .sec-index { text-align:left; }
}

/* 16/07 (đã GỠ theo yêu cầu SS): từng ẩn .edit-fab ở ≤860px nhưng làm mất luôn
   quyền sửa trong khung 📱 của /editor. Nay khôi phục — an toàn vì bộ sửa chỉ
   dựng được trong iframe /editor đã đăng nhập (guard initEditMode + EDIT_OPEN=false
   phía server); điện thoại khách không bao giờ thấy nút bút. */

/* thanh điều khiển mobile của section (chỉ hiện khi bật ✎) */
.msec-bar {
  position:absolute; top:10px; right:10px; z-index:30;
  display:flex; gap:6px;
}
.manifesto, .symbols, .craft, .showcase, .contact, .hero { position:relative; }
.msec-bar button {
  font-family:var(--f-giaodien); font-size:11px; letter-spacing:.06em;
  background:var(--overlay); border:1px dashed var(--pink); color:var(--pink);
  border-radius:99px; padding:6px 12px; cursor:pointer;
}
.msec-bar button:hover { background:var(--pink); color:#fff; font-weight:700; }
.msec-bar.is-hidden button:first-child { background:var(--pink); color:#fff; font-weight:700; }

/* toast đã lưu */
.edit-hint.saved { border-color:var(--pink); color:var(--pink); font-weight:bold; }

/* light mode: nút to hồng khi hover chữ lớn -> bán trong suốt (không che chữ) */
[data-theme="light"] .cursor.is-big { background:rgba(194,58,116,.3); border-color:var(--pink); }
/* index light mode, chưa cuộn (đang trên hero tối): nav sáng lại cho dễ đọc */
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .hdr-nav a { color:#b8afa0; }
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .hdr-nav a:hover { color:#f5a3c3; }

/* ── form liên hệ (index) ── */
.cform {
  margin-top:0; border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,3.5vw,40px); background:rgba(16,13,10,.5); backdrop-filter:blur(4px);
}
[data-theme="light"] .cform { background:rgba(250,248,243,.7); }
.cform h3 { font-family:var(--f-tieude); font-weight:400; font-size:clamp(24px,3vw,36px); margin-bottom:22px; }
.cform-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:20px; }
.cform label {
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.cform-wide { grid-column:1 / -1; }
.cform-grid > * { min-width:0; } /* chặn select/option dài kéo cột vượt khung màn hình */
.cform input, .cform select, .cform textarea {
  font-family:var(--f-giaodien); font-size:15px; color:var(--text);
  background:none; border:1px solid var(--line); border-radius:10px; padding:11px 13px; outline:none;
  resize:vertical; transition:border-color .3s;
  width:100%; max-width:100%; min-width:0;
}
.cform select { background:var(--bg-2); }
[data-theme="light"] .cform select { background:#faf8f3; }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color:var(--pink); }
.cform .btn-line { cursor:pointer; font-family:var(--f-giaodien); }
.cform .msg-note { margin-top:14px; font-size:12.5px; color:var(--muted); }
.topic-hint { grid-column:1/-1; font-family:var(--f-vietay); font-size:19px; color:var(--pink); min-height:1em; }

/* 06/09 — [hidden] PHẢI THẮNG. `.cform label` đặt display:flex, mà quy tắc của
   tác giả luôn thắng display:none trong bảng mặc định của trình duyệt — nên ô
   ẩn theo nhu cầu vẫn hiện nguyên. Đây là lỗi câm: JS chạy đúng, chỉ CSS nuốt. */
.cform [hidden] { display:none !important; }
/* 07/09 chiều — hàng nút nhắn nhanh IG/FB của chế độ «Đặt hẹn thăm Silent.S» */
/* 08/09 — «Mua ở đâu?» dạng chọn nhanh, mở dần (chế độ Kích hoạt bảo hành) */
.cf-mua { display:flex; flex-direction:column; gap:10px; }
.cf-nut { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cf-nut button { font:inherit; font-size:13px; color:var(--muted); cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:40px; padding:8px 15px;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.cf-nut button:hover { border-color:var(--pink); color:var(--pink); }
.cf-nut button.on { border-color:var(--pink); color:var(--pink); background:var(--bg-2); }
.cf-them { border-left:2px solid var(--line); padding-left:14px; margin-top:2px; }
.cf-them .cf-lb { display:block; }

.cf-kenh-nut { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.cf-kenh-nut .btn-line { padding:9px 16px; font-size:11px; }

/* ── 06/09 — CHỌN SẢN PHẨM: loại → món → thẻ ────────────────────
   Nhãn của khối này không nằm trong <label> (bên trong có hai <select> và một
   nút, bọc chung một <label> là bấm nhãn sẽ focus lung tung), nên .cf-lb phải
   tự mang lại đúng dáng chữ nhãn của .cform label. */
.cf-sp { display:flex; flex-direction:column; gap:8px; }
.cf-lb { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.sp-pick { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:10px; }
.sp-add {
  font-family:var(--f-giaodien); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); background:none; border:1px solid var(--line); border-radius:10px;
  padding:0 18px; cursor:pointer; white-space:nowrap; transition:border-color .3s, color .3s;
}
.sp-add:hover:not(:disabled) { border-color:var(--pink); color:var(--pink); }
.sp-add:disabled { opacity:.4; cursor:default; }
.cform select:disabled { opacity:.45; }
.sp-chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 0; padding:0; }
.sp-chips:empty { display:none; }
.sp-chips li {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-giaodien); font-size:13px; letter-spacing:.04em; color:var(--text);
  border:1px solid var(--pink); border-radius:99px; padding:6px 8px 6px 15px;
}
.sp-chips button {
  background:none; border:0; color:var(--pink); cursor:pointer; line-height:1;
  font-size:17px; padding:0 3px; transition:opacity .25s;
}
.sp-chips button:hover { opacity:.6; }
@media (max-width:640px){
  .sp-pick { grid-template-columns:1fr; }
  .sp-add { padding:12px 18px; }
}

/* ── 15/08 (SS): DESKTOP — gói gọn ô «Để lại lời nhắn» trong 1 khung hình ──
   Trước đây khối liên hệ cao hơn màn hình nên khách phải cuộn mới thấy hết ô
   nhắn (ô Lời nhắn + nút Gửi bị rơi khỏi tầm mắt). Siết khoảng đệm + cỡ chữ
   trong form, đồng thời kéo phần tiêu đề mục lên gần hơn. Mobile giữ nguyên
   vì vốn đã cuộn dọc từng mục một. */
@media (min-width:861px){
  .contact { padding-top:4vh; margin-top:2vh; }
  .contact-body { margin-top:4.5vh; gap:4vw; }
  .contact-cols { gap:3.5vh; }
  .cform { padding:clamp(20px,2.2vw,30px); }
  .cform h3 { font-size:clamp(22px,2.3vw,30px); margin-bottom:15px; }
  .cform-grid { gap:12px 16px; margin-bottom:15px; }
  .cform label { font-size:10.5px; gap:5px; }
  .cform input, .cform select, .cform textarea { font-size:14px; padding:9px 12px; }
  .cform textarea { height:86px; min-height:86px; }
  .cform .msg-note { margin-top:11px; font-size:11.5px; line-height:1.5; }
  .footer-giant { margin-top:8vh; }
}
/* Laptop màn thấp (≤900px chiều cao): siết thêm một nấc nữa cho đủ 1 khung. */
@media (min-width:861px) and (max-height:900px){
  .contact { padding-top:3vh; margin-top:0; }
  /* 07/09 — BỎ luật siết cỡ chữ riêng cho tiêu đề này (trước là
     clamp(28px,3.4vw,46px)). Nó làm «Kể chuyện cùng chúng tôi» nhỏ hơn hẳn mọi
     tiêu đề mục khác trên cùng một trang — cùng cấp mà khác cỡ thì đọc ra như
     cấp thấp hơn. Lý do siết ban đầu (15/08: gói cả khối Liên hệ vào một khung
     màn hình) nay đã nhẹ đi: form chỉ còn hiện đúng những ô của nhu cầu đang
     chọn chứ không bày hết như trước. Các nấc siết KHOẢNG CÁCH bên dưới vẫn giữ. */
  .contact-body { margin-top:3vh; }
  .contact-cols { gap:2.6vh; }
  .cform h3 { font-size:26px; margin-bottom:12px; }
  .cform-grid { gap:10px 14px; margin-bottom:12px; }
  .cform input, .cform select, .cform textarea { padding:8px 11px; }
  .cform textarea { height:72px; min-height:72px; }
}

@media (max-width:700px){
  .cform-grid{grid-template-columns:1fr}
  .cform{margin-top:0; width:100%; max-width:100%; box-sizing:border-box}
  .contact-body{grid-template-columns:1fr; gap:32px}
  .contact .wrap{max-width:92vw}
}

/* ── chính sách dạng tab ── */
body.policy-tabs .policy-sec { display:none; border-top:0; padding-top:5vh; }
body.policy-tabs .policy-sec.tab-on { display:block; animation:cardIn .5s var(--ease-out); }
body.policy-tabs .policy-wrap { min-height:50vh; }
body.policy-tabs .sub-toc .chip.on { background:var(--pink); border-color:var(--pink); color:#fff; font-weight:700; }
/* ── Phương án 1 (15/07): cột mục lục CỐ ĐỊNH bên trái ở desktop, thay cho
   hàng chip cuộn ngang — nội dung 1 mục hiện bên phải. Mobile giữ nguyên
   hàng chip ghim dưới header như filter trang Dấu ấn (đo --hdr-h thật). */
.policy-layout { border-top:1px solid var(--line); padding-top:14px; }
.policy-side { margin-top:0; }
@media (min-width:861px){
  .policy-layout { display:flex; align-items:flex-start; gap:56px; border-top:0; padding-top:0; }
  .policy-side {
    width:210px; flex:none; flex-direction:column; flex-wrap:nowrap; gap:2px;
    position:sticky; top:120px; margin-top:9vh;
  }
  .policy-side .chip {
    border:none; background:none; text-align:left; padding:11px 16px; border-radius:10px;
    color:var(--muted); transition:background .3s, color .3s;
  }
  .policy-side .chip:hover { color:var(--pink); }
  body.policy-tabs .policy-side .chip.on {
    background:rgba(245,163,195,.1); border:none; color:var(--pink); font-weight:400;
  }
  .policy-wrap { flex:1; min-width:0; }
}
@media (max-width:860px){
  .policy-side {
    position:sticky; top:var(--hdr-h,60px); z-index:40;
    background:rgba(8,7,6,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line); padding:10px 0;
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  [data-theme="light"] .policy-side { background:rgba(240,236,228,.92); }
  .policy-side::-webkit-scrollbar { display:none; }
  .policy-side .chip { white-space:nowrap; flex:none; }
}

/* ── ảnh cutout trong modal (light mode) ── */
/* ── video sản phẩm trong hồ sơ chi tiết (26/07) ─────────────
   Nguồn video do nen-video.command sinh ra, khai báo ở data/media.js. */
.pm-video { display:none; width:100%; aspect-ratio:4/3; object-fit:cover; background:#000; }
.pm-main.is-vid img { display:none; }
.pm-main.is-vid .pm-video { display:block; }
body.store-lock .store-detail .pm-main.is-vid .pm-video { aspect-ratio:auto; height:min(44vh,480px); }
.pm-thumb.is-vid { position:relative; }
.pm-thumb-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; background:rgba(0,0,0,.34); pointer-events:none;
}
/* 17/08 — ảnh chính trong panel chi tiết đi cùng luật với ô thẻ ở trên */
.pm-main.im-cut { background:#17161a; }
.pm-main.im-cut img { object-fit:contain; padding:8%; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
[data-theme="light"] .pm-main.im-cut { background:#e9e5dc; }
[data-theme="light"] .pm-main.im-cut img { filter:drop-shadow(0 14px 20px rgba(30,20,10,.25)); }

/* ── bộ nút sửa: ↔ + A− A+ ── */
.edit-tools { display:inline-flex; align-items:center; gap:6px; margin-left:10px; vertical-align:middle; }
.move-h {
  font-size:13px; line-height:1; cursor:move; user-select:none; display:inline-block;
  background:var(--overlay); border:1px solid var(--pink); color:var(--pink);
  border-radius:99px; padding:4px 10px;
}
.move-h:hover { background:var(--pink); color:#fff; }
.font-h {
  font-family:var(--f-giaodien); font-size:11px; cursor:pointer;
  background:var(--overlay); border:1px solid var(--pink); color:var(--pink);
  border-radius:99px; padding:4px 10px;
}
.font-h:hover { background:var(--pink); color:#fff; font-weight:700; }

/* ── thanh chỉnh element trang trí nền (sketch) ── */
body.edit-mode .bg-sketch, body.edit-mode .deck-sketch {
  pointer-events:auto;
  outline:2px dashed var(--pink); outline-offset:2px; /* KHUNG hiện rõ để chỉnh */
  background-color:rgba(245,163,195,.04);
  z-index:25; cursor:move; /* nổi lên trên nội dung để kéo/bấm được trực tiếp trên web */
}
.deco-size {
  position:absolute; right:-14px; bottom:-14px; z-index:32;
  width:30px; height:30px; border-radius:50%;
  background:var(--pink); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  cursor:nwse-resize; user-select:none; pointer-events:auto;
}
.deco-bar {
  position:absolute; top:8px; left:8px; z-index:31; display:flex; gap:4px; pointer-events:auto;
}
.deco-bar button {
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:13px;
  background:var(--overlay); border:1px solid var(--pink); color:var(--pink);
}
.deco-bar button:hover { background:var(--pink); color:#fff; font-weight:700; }
.deco-hidden { display:none !important; }
body.edit-mode .deco-hidden { display:block !important; opacity:.07 !important; }
/* mục bị ẩn trên web: bình thường biến mất, trong chế độ ✎ hiện mờ để bật lại */
.sec-hidden { display:none !important; }
body.edit-mode .sec-hidden { display:block !important; opacity:.3; outline:2px dashed var(--pink); outline-offset:-2px; }

/* ══ Đ1 14/08: hai khối dưới CHUYỂN TỪ demo-video.css vào chính thức (demo đã gỡ) ══ */

/* Vá object-fit — chống ảnh bị kéo giãn trên máy thật.
   Cutout phải giữ contain (ép cover là nhẫn bị phóng to cắt cụt),
   nên mọi rule tách hai trường hợp bằng :not(.im-cut). */
.pm-main:not(.im-cut) img,
.pm-main:not(.im-cut) #pmMain { object-fit: cover !important; }
.pm-main.im-cut img,
.pm-main.im-cut #pmMain { object-fit: contain !important; }
.pcard .pimg:not(.im-cut) img { object-fit: cover !important; }
.pcard .pimg.im-cut img.im-a,
.im.im-cut img.im-a { object-fit: contain !important; }
.pm-thumb img { object-fit: cover !important; }

/* Hover thẻ sản phẩm → chạy clip (tính năng thật, từng nằm trong demo-video) */
.pcard .pimg .card-clip { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; z-index:2; pointer-events:none;
  transition:opacity .45s var(--ease,ease); }
.pcard .pimg.clip-on .card-clip { opacity:1; }
.pcard .pimg.clip-on img.im-b { opacity:0 !important; }
/* 15/08 — thẻ CÓ clip thì không bao giờ hiện ảnh 2 nữa. Trước đây ảnh 2 hiện ngay
   lúc hover còn clip vào sau ~140ms, thành ra nháy qua một khung hình lạ. */
.pcard .pimg.co-clip img.im-b { opacity:0 !important; }
/* 17/08 (SS) — cài đặt chung «Không đổi gì khi rê chuột» (hub › Giao diện):
   khoá cả ảnh thứ 2 lẫn clip trên MỌI thẻ, cả trang chủ lẫn Dấu ấn. */
body.hover-khong .pcard:hover .pimg .im-b,
body.hover-khong .show-card:hover .im .im-b { opacity:0 !important; }
body.hover-khong .pcard .pimg .card-clip { display:none !important; }
/* máy cảm ứng không hover được → tắt hẳn lớp clip */
@media (hover:none), (pointer:coarse) {
  .pcard .pimg .card-clip { display:none; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal,.split .w>i,.hero-title .ch,.hero-title .hero-wordmark { opacity:1 !important; transform:none !important; }
  .pcard .pimg .card-clip { display:none; } /* Đ1: không tự chạy clip khi người dùng hạn chế chuyển động */
}