/* ═══════════════════════════════════════════════════════════════════════════
   CNHD — NGÔN NGỮ HÌNH ẢNH v3  ·  "lab nghiên cứu & sản xuất, mood bảo tàng hiện đại"
   ───────────────────────────────────────────────────────────────────────────
   LUẬN ĐIỂM: hiện vật đã rực rỡ sẵn (đỏ · vàng · cobalt · ngọc trên nền trắng).
   Trang phải IM LẶNG để hiện vật lên tiếng. Trang bán hàng ồn ào thì hai thứ
   ồn cùng lúc, triệt tiêu nhau — và khách B2B đọc ra "shop bán lại", không phải
   "nhà sản xuất". Đây là lý do kỹ thuật của mọi lựa chọn bên dưới.

   RÀNG BUỘC TỰ ĐẶT — đừng phá:
   1. --son chỉ dùng ĐÚNG MỘT chỗ trên mỗi trang. Màu càng hiếm càng có sức nặng.
   2. Chuyển động phải lấy từ chính đồ vật hoặc dụng cụ đo, không dán thêm hiệu ứng.
   3. Ảnh nền trắng (catalog) hoà nền bằng multiply; ảnh đời thật thì KHÔNG.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --muc:#12141C;        /* mực — xanh đen, không phải đen tuyền */
  --coban:#1D33C8;      /* cobalt — màu thương hiệu sẵn có, nay làm màu "dụng cụ" */
  --phien:#E7E8E4;      /* phiến trưng bày — xám lạnh */
  --giay:#FAFAF8;       /* giấy */
  --son:#C8382A;        /* son — MỖI TRANG ĐÚNG 1 LẦN */
  --net:rgba(18,20,28,.14);
  --mo:rgba(18,20,28,.55);
  --mo2:rgba(18,20,28,.72);

  --dis:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --tech:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --lech:clamp(20px,5vw,64px);   /* lề trang */
  --rong:1560px;   /* nới từ 1240 — trước dư 100px mỗi bên ở màn 1440 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--giay);color:var(--muc);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--coban);outline-offset:3px}

.khung{max-width:var(--rong);margin:0 auto;padding:0 var(--lech)}
.hep{max-width:760px}

/* ── THANG BẬC CHỮ ───────────────────────────────────────────────────────────
   Bản trước sai nguyên tắc: h1 80px rồi TỤT THẲNG xuống 17 · 12 · 11 — mọi thứ
   dưới tiêu đề trang đều na ná nhau, người đọc không phân biệt được mục / thẻ / thân.
   Nay 6 bậc rõ ràng, và phân biệt bằng BA lực chứ không chỉ cỡ chữ:

     bậc          cỡ        trục ngang   vai
     ──────────────────────────────────────────────────────────────────
     TRANG  h1    42→84     wdth 112     tên hiện vật / bộ sưu tập
     MỤC    h2    26→42     wdth 112     đầu mục — có kẻ ngang + nhãn mono
     THẺ    h3    21        wdth 100     tên từng món  ← đổi TRỤC, khác chất
     THÂN   p     16        —            văn xuôi đọc kỹ
     PHỤ    .phu  14        —            chú thích, mô tả ngắn
     KÝ HIỆU .tech 11       mono         số hiệu, thông số, nhãn

   Lực 1 = cỡ chữ · Lực 2 = TRỤC BỀ NGANG (112 cho tiêu đề, 100 cho thẻ — nhìn ra
   ngay là hai loại chữ khác nhau dù cùng họ) · Lực 3 = họ phông (mono cho ký hiệu). */
h1,h2,.dis{font-family:var(--dis);font-variation-settings:'wdth' 112;
  font-weight:700;line-height:1.04;margin:0}
h1{font-size:clamp(42px,5.6vw,84px);text-transform:uppercase;line-height:.96;
  letter-spacing:-.022em}
h2{font-size:clamp(26px,3.2vw,42px);text-transform:uppercase;letter-spacing:-.012em;
  line-height:1.06}
/* THẺ: đổi sang trục ngang 100 — cùng họ Archivo nhưng chất chữ khác hẳn tiêu đề,
   nên mắt tách được "đầu mục" với "tên món" ngay cả khi hai cái gần nhau. */
h3{font-family:var(--dis);font-variation-settings:'wdth' 100;font-size:21px;
  font-weight:600;letter-spacing:-.006em;line-height:1.24;text-transform:none;margin:0}
h4{font-family:var(--dis);font-variation-settings:'wdth' 100;font-size:15px;
  font-weight:600;letter-spacing:0;line-height:1.3;margin:0}
p{margin:0 0 1.05em;font-size:16px;line-height:1.72}
.phu{font-size:14px;line-height:1.6;color:var(--mo2)}

/* vai thứ ba: chú giải kỹ thuật — chất phiếu đo đạc phòng lab */
.tech{font-family:var(--tech);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mo)}
.tech-s{font-family:var(--tech);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase}

/* ── VỎ TRANG ────────────────────────────────────────────────────────────────
   Băng-rôn pháp lý: GIỮ NGUYÊN VĂN (hồ sơ BCT). Nền mực thay nền cam để đọc như
   một thông báo chính thức, không như cảnh báo lỗi. */
#trialBanner{background:var(--muc)!important;color:var(--giay)!important;
  font-family:var(--tech)!important;font-size:10.5px!important;font-weight:500!important;
  letter-spacing:.06em;text-transform:uppercase;padding:11px 20px!important;
  line-height:1.55;text-align:center}
/* Chỉ chữ "Instagram" là liên kết -> phải tạo kiểu cho CẢ dòng, không chỉ thẻ <a>. */
.topbar{border-bottom:1px solid var(--net);padding:13px var(--lech);text-align:center;
  font-family:var(--tech);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mo)}
/* Vùng bấm phải đủ lớn cho ngón tay. Bản trước chỉ cao 16px — dưới xa mức tối thiểu
   44px, trên điện thoại bấm toàn trượt. Nay nới bằng padding + inline-block. */
.topbar a{color:var(--coban);text-decoration:none;display:inline-block;
  padding:13px 8px;margin:-13px 0;line-height:1;
  box-shadow:inset 0 -1px 0 0 currentColor;   /* gạch chân bám sát chữ, không theo ô đệm */
  transition:color .2s,background .2s}
.topbar a:hover,.topbar a:focus-visible{color:var(--muc);background:rgba(29,51,200,.07)}

.nav{border-bottom:1px solid var(--muc);background:var(--giay)}
.nav-inner{max-width:var(--rong);margin:0 auto;padding:18px var(--lech);
  display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-links{list-style:none;display:flex;gap:clamp(16px,2.4vw,34px);margin:0;padding:0}
.nav-links a{font-family:var(--tech);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--muc);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .2s}
.nav-links a:hover{border-bottom-color:var(--coban)}
.nav-item{position:relative}
.nav-dd{display:none}
.nav-logo{display:flex;align-items:center;order:-1}
/* 42px đè thuộc tính height="34" trong HTML — user chê 30px quá nhỏ (30/07) */
.nav-logo img{height:42px;width:auto}
.cart-btn{background:none;border:0;cursor:pointer;color:var(--muc);padding:6px}
.cart-btn svg{width:20px;height:20px}
@media(max-width:720px){
  .nav-inner{flex-wrap:wrap;gap:14px;padding:14px var(--lech)}
  .nav-links{gap:14px;flex-wrap:wrap}
  .nav-links a{font-size:10px;letter-spacing:.1em}
}

/* dải dữ liệu — như dòng đầu một phiếu hồ sơ */
.dai{border-bottom:1px solid var(--net)}
.dai .khung{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;padding-top:13px;
  padding-bottom:13px}

/* ── PHIẾN TRƯNG BÀY + DẤU ĐỊNH VỊ ───────────────────────────────────────── */
.phien{position:relative;background:var(--phien);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:11%}
/* width/height 100% + object-fit: ảnh CÓ hộp ngay cả khi chưa tải xong.
   width:auto làm ảnh 0×0 -> lazy-load không bao giờ kích hoạt (khoá lẫn nhau). */
.phien img{width:100%;height:100%;object-fit:contain;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
/* Ảnh catalog chụp NỀN TRẮNG: nhân với nền phiến thì trắng thành trong suốt,
   hiện vật giữ nguyên màu. Khỏi phải tách nền từng ảnh. */
.phien.nen-trang img{mix-blend-mode:multiply}
.phien.nen-that{padding:0;background:none}
.phien.nen-that img{object-fit:cover}

/* 4 dấu góc — ngôn ngữ ống ngắm / khung định vị của phòng lab */
.moc{position:absolute;width:13px;height:13px;border:1px solid var(--coban);opacity:.5;
  transition:width .32s cubic-bezier(.2,.7,.3,1),height .32s cubic-bezier(.2,.7,.3,1),opacity .32s}
.moc.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.moc.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.moc.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.moc.br{bottom:10px;right:10px;border-left:0;border-top:0}

/* ── BẢNG THÔNG SỐ ───────────────────────────────────────────────────────── */
.ts{border-top:1px solid var(--net);width:100%;border-collapse:collapse}
.ts th,.ts td{text-align:left;padding:11px 0;border-bottom:1px solid var(--net);vertical-align:top}
.ts th{font-family:var(--tech);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(18,20,28,.5);width:38%;padding-right:16px}
.ts td{font-size:14.5px}

/* ── ĐẦU TRANG ───────────────────────────────────────────────────────────── */
.mo{padding:clamp(40px,7vw,88px) 0 clamp(36px,6vw,72px)}
.mo-luoi{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.mo-luoi{grid-template-columns:1fr;gap:32px}}
.mo h1{margin:22px 0 20px}
.mo-dan{font-size:clamp(16px,1.35vw,18.5px);max-width:46ch;color:var(--mo2);margin:0 0 30px}

/* ── LƯỚI PHIẾU HIỆN VẬT ─────────────────────────────────────────────────── */
.muc-dau{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-top:clamp(34px,5vw,64px);border-top:1px solid var(--muc);margin-bottom:26px}
/* Đường kẻ do TỪNG THẺ vẽ. Mẹo "nền xám + khe 1px" làm ô TRỐNG của hàng cuối
   hiện thành khối xám lớn — trông như trang vỡ. */
/* 3 cột thay vì 4 — hiện vật là vật NHỎ (40–60mm) chụp trên nền rộng, để 4 cột thì
   mỗi món chỉ còn vài chục pixel, nhìn không ra hoa văn. Ít ô hơn = mỗi ô to hơn. */
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--net);border-left:1px solid var(--net)}
@media(max-width:900px){.luoi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.luoi{grid-template-columns:1fr}}
.pht{margin:0;background:var(--giay);text-decoration:none;color:inherit;display:block;
  border-right:1px solid var(--net);border-bottom:1px solid var(--net)}
/* khung cao hơn (3/4) cho vật dạng dọc như móc khóa có tua; lề 5% thay 13%
   -> hiện vật chiếm gần trọn khung, vẫn không chạm mép. */
.pht .phien{aspect-ratio:3/4;padding:5%}
.pht-than{padding:14px 16px 20px}
.pht-so{font-family:var(--tech);font-size:10.5px;letter-spacing:.12em;color:var(--coban);
  display:block;margin-bottom:7px}
.pht h3{margin:0;font-size:19px}
/* Cắt bằng CSS 2 dòng (tự thêm dấu …). Cắt chuỗi trong code làm câu đứt giữa chữ. */
.pht-chuc{font-size:13.5px;line-height:1.5;color:rgba(18,20,28,.62);margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Rê chuột: dấu góc bung ra như đang lấy nét — chuyển động lấy từ dụng cụ đo. */
.pht:hover .moc,.pht:focus-visible .moc{width:26px;height:26px;opacity:1}
.pht:hover .phien img{transform:translateY(-3px)}

/* ── TRANG HIỆN VẬT (mỗi linh thú một trang) ─────────────────────────────── */
.hv{padding:clamp(34px,5vw,64px) 0 0}
.hv-luoi{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px)}
@media(max-width:900px){.hv-luoi{grid-template-columns:1fr;gap:30px}}
.duong-dan{margin-bottom:26px}
.duong-dan a{color:var(--mo);text-decoration:none;border-bottom:1px solid transparent}
.duong-dan a:hover{color:var(--coban);border-bottom-color:var(--coban)}
.hv-dong{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--net);
  border:1px solid var(--net);margin-bottom:26px}
.hv-dong figure{margin:0;background:var(--giay)}
.hv-dong figcaption{padding:11px 14px 15px}
@media(max-width:520px){.hv-dong{grid-template-columns:1fr}}

/* ── CHÚ GIẢI (chữ tường bảo tàng) ───────────────────────────────────────── */
.chu-giai{padding:clamp(44px,7vw,90px) 0;margin-top:clamp(40px,6vw,80px);
  border-top:1px solid var(--muc)}
.chu-giai-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(28px,5vw,64px)}
@media(max-width:860px){.chu-giai-luoi{grid-template-columns:1fr}}
.chu-giai p{font-size:16.5px;line-height:1.78;max-width:64ch}
/* ★ MÀU SON — chỗ DUY NHẤT trên trang ★ */
.loi-chuc{font-family:var(--dis);font-variation-settings:'wdth' 112;font-weight:600;
  font-size:clamp(19px,2.1vw,26px);line-height:1.32;color:var(--son);
  border-left:2px solid var(--son);padding-left:20px;margin:30px 0 0;max-width:30ch}

/* ── DẢI ẢNH BỐI CẢNH (dùng cho khu B2B / về xưởng) ──────────────────────── */
.bang-anh{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--net);border:1px solid var(--net);margin-top:28px}
.bang-anh figure{margin:0;background:var(--giay)}
.bang-anh img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bang-anh figcaption{padding:12px 15px 17px;font-size:13.5px;line-height:1.5;color:var(--mo2)}

/* ── NĂNG LỰC / SỐ LIỆU ──────────────────────────────────────────────────── */
/* Tiêu đề dài ngắn khác nhau -> chữ mô tả bên dưới bắt đầu ở độ cao khác nhau,
   nhìn lệch hẳn. `subgrid` cho MỌI ô dùng CHUNG hai hàng của lưới cha, nên tiêu đề
   thẳng hàng với tiêu đề, mô tả thẳng hàng với mô tả. */
/* ⚠ LUẬT CHỐNG CHỒNG CHỮ: số hàng subgrid PHẢI ≥ số con lớn nhất của một ô.
   Đã dính thật 30/07: ô /ve-xuong/ có 3 con (số + tiêu đề + mô tả) mà lưới chỉ khai
   2 hàng ⇒ con thứ 3 KHÔNG có hàng, đè thẳng lên tiêu đề. Khai dư hàng thì hàng
   thừa cao 0 — vô hại; khai thiếu là chữ chồng chữ. Thêm con thứ 4 vào ô nào thì
   PHẢI nâng số `auto` và `span` dưới đây lên theo. */
.nang-luc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-template-rows:auto auto auto;gap:1px;background:var(--net);border:1px solid var(--net);
  margin-top:26px}
.nang-luc>div{background:var(--giay);padding:24px 22px 28px;
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:10px;align-content:start}
.nang-luc strong{font-family:var(--dis);font-variation-settings:'wdth' 100;
  font-size:22px;font-weight:600;letter-spacing:-.006em;line-height:1.2;display:block}
.nang-luc p{font-size:14.5px;line-height:1.62;color:var(--mo2);margin:0}
@supports not (grid-template-rows:subgrid){
  /* trình duyệt cũ: chốt 2 dòng tiêu đề để vẫn thẳng hàng */
  .nang-luc>div{display:block}
  .nang-luc strong{min-height:2.4em}
}

/* ── LIÊN HỆ ─────────────────────────────────────────────────────────────── */
.cta{border-top:1px solid var(--net);padding:clamp(34px,5vw,60px) 0 clamp(50px,7vw,84px)}
.cta-hang{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:20px}
.nut{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;
  background:var(--muc);color:var(--giay);text-decoration:none;font-family:var(--tech);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--muc);
  transition:background .2s,color .2s}
.nut:hover{background:transparent;color:var(--muc)}
.nut.vien{background:transparent;color:var(--muc)}
.nut.vien:hover{background:var(--muc);color:var(--giay)}

/* ── CHÂN TRANG — 6 trang điều khoản phải thấy rõ ────────────────────────── */
footer{border-top:1px solid var(--muc);background:var(--giay);padding:clamp(36px,5vw,58px) 0 44px}
footer .container{max-width:var(--rong);margin:0 auto;padding:0 var(--lech);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:860px){footer .container{grid-template-columns:1fr;gap:26px}}
/* Logo chân trang đứng cạnh khối thông tin cao ~100px — để 30px thì lọt thỏm như lỗi bố cục. */
.footer-logo{height:clamp(76px,7vw,100px);width:auto}
.company-info{font-size:13.5px;line-height:1.85;color:var(--mo2);max-width:44ch}
.policy-links{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.policy-links a{font-family:var(--tech);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(18,20,28,.62);text-decoration:none;border-bottom:1px solid transparent}
.policy-links a:hover{color:var(--coban);border-bottom-color:var(--coban)}
.copyright{grid-column:1/-1;border-top:1px solid var(--net);margin-top:12px;padding-top:16px;
  font-family:var(--tech);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(18,20,28,.45)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}}

/* ═══════════════════════════════════════════════════════════════════════════
   LỚP TƯƠNG THÍCH — markup CŨ mặc ngôn ngữ MỚI
   ───────────────────────────────────────────────────────────────────────────
   Trang chủ, Chuyện xưa, Liên hệ được viết tay theo bộ CSS cũ (hero blob, chữ
   chạy ngang, thẻ 4 màu). Viết lại HTML từng trang thì tốn và dễ vỡ; thay vào đó
   tạo kiểu lại chính những lớp đó. Markup không đổi, diện mạo đổi hết.

   Ba thứ bị TẮT HẲN vì đi ngược luận điểm "trang im lặng để hiện vật lên tiếng":
   đốm màu nền, chữ chạy ngang, và bảng 4 màu rực trên thẻ.
   ═══════════════════════════════════════════════════════════════════════════ */

.container{max-width:var(--rong);margin:0 auto;padding:0 var(--lech)}

/* ═══ LUẬT NHỊP DỌC (30/07) — quên margin thì hệ tự cách ═══
   Mọi phần tử đứng SAU trong một khối chữ tự nhận khoảng cách trên = var(--nhip).
   :nth-child(n+2) cho ưu tiên (0,1,0): THẮNG luật thẻ trần kiểu `h1{margin:0}`,
   nhưng THUA mọi margin đặt tay theo class ⇒ luật chỉ đỡ chỗ người viết quên.
   (Bẫy đã dính: `> * + *` ưu tiên 0 nên bị chính reset `h1{margin:0}` đè — đo ra 0px.)
   Chỉnh nhịp một phần tử: khai --nhip lên nó. */
:where(.hero-content,.mission-inner,.mission-inner>div,.coll-card,.sau-in,
       .contact .container,.mo-luoi>div,.products-head,.hop-noi-dung,
       .story-article .container,.article-body,.story-body) > :nth-child(n+2){
  margin-top:var(--nhip,18px)}
:where(h1,h2,h3){--nhip:18px}        /* tiêu đề đứng sau nhãn mắt (eyebrow) */
:where(p){--nhip:20px}
:where(.label,.tech){--nhip:36px}    /* nhãn mắt mở MỤC MỚI -> cách khối trước xa */
:where(.btn,.nut){--nhip:32px}
:where(.lat-sach,.anh-the,figure,table){--nhip:26px}

/* nhãn nhỏ in hoa -> vai "chú giải kỹ thuật" */
.label{font-family:var(--tech);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mo);display:inline-block}

/* ── đầu trang chủ: bỏ đốm màu + chữ chạy ── */
/* Hero 2 cột: chữ trái + hiện vật phải (trước 30/07 cột phải bỏ trống cả nửa màn) */
.hero{position:relative;padding:clamp(48px,8vw,104px) var(--lech) clamp(34px,5vw,64px);
  max-width:var(--rong);margin:0 auto;overflow:visible;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
.hero-anh .phien{aspect-ratio:1/1}
.hero-anh .phien img{width:100%;height:100%;object-fit:contain;padding:7%}
.hero-anh>.tech{display:block;margin-top:12px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-anh{max-width:420px}}
.hero-blob,.marquee-wrap,.marquee{display:none!important}
/* ⚠ Trước đây .hero-content bị đặt max-width:22ch — bóp CẢ khối, nên tiêu đề vỡ 6 dòng
   và max-width:48ch của .sub bên dưới thành vô nghĩa (cha đè con). Bề ngang phải đặt
   trên TỪNG phần tử: tiêu đề đo theo cỡ chữ lớn, đoạn dẫn đo theo cỡ chữ đọc. */
.hero-content{max-width:none}
.hero h1{font-size:clamp(40px,7.4vw,88px);max-width:15ch}
.hero .accent{color:var(--son)}          /* ★ son: chỗ duy nhất của trang chủ ★ */
.hero .sub{font-family:var(--body);font-size:clamp(16px,1.35vw,18.5px);color:var(--mo2);
  max-width:48ch;margin-top:22px;text-transform:none;letter-spacing:0}

.mission{border-top:1px solid var(--net);padding:clamp(38px,6vw,72px) 0}
/* Mission 2 cột: câu chuyện trái + bảng nhãn bảo tàng phải (lấp cột phải trống) */
.mission-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
.mission-so{border-top:1px solid var(--muc)}
.mission-so>div{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--net)}
.mission-so strong{font-family:var(--dis);font-variation-settings:'wdth' 100;font-weight:600;
  font-size:14.5px;color:var(--muc)}
@media(max-width:860px){.mission-inner{grid-template-columns:1fr}}
/* margin dọc để LUẬT NHỊP lo (trước đây 14px trên — sát nhãn quá) */
.mission .big{font-family:var(--dis);font-variation-settings:'wdth' 112;font-weight:600;
  font-size:clamp(19px,2.3vw,29px);line-height:1.32;max-width:30ch}

/* ── thẻ bộ sưu tập / bài viết -> phiến trưng bày ── */
.collection,.products,.stories{padding:clamp(34px,5vw,64px) 0}
.collection-grid,.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--net);border:1px solid var(--net)}
/* LUẬT THẲNG HÀNG NGANG: 2 thẻ cùng chức năng phải chung hàng (tiêu đề/ảnh/nút) dù
   tiêu đề dài ngắn khác nhau — subgrid 3 hàng, cùng nguyên lý .nang-luc (30/07). */
.collection-grid{grid-template-rows:auto 1fr auto}
.collection-grid>.coll-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;
  gap:12px;align-content:start}
.coll-card,.story-card{background:var(--giay);padding:26px 24px 28px;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;gap:12px;min-height:210px;
  transition:background .2s}
.coll-card:hover,.story-card:hover{background:var(--phien)}
.coll-card h3,.story-card h3{font-size:19px;line-height:1.25}
/* 4 màu rực cũ -> đồng loạt về phiến xám. Màu để dành cho hiện vật. */
.coll-card.pink,.coll-card.neon,.coll-card.purple,.coll-card.cobalt,
.purple,.orange,.teal,.blue,.cobalt,.pink,.neon{background-color:transparent}
.coll-letter,.story-letter,.product-letter{font-family:var(--dis);
  font-variation-settings:'wdth' 112;font-weight:700;color:rgba(18,20,28,.10);
  font-size:clamp(48px,7vw,92px);line-height:1}
.story-block{background:var(--phien);aspect-ratio:16/10;display:flex;align-items:center;
  justify-content:center;margin:-26px -24px 4px}
.story-date,.story-body .label{font-family:var(--tech);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mo)}
.products-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid var(--muc);padding-top:clamp(28px,4vw,52px);margin-bottom:24px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--net);border-left:1px solid var(--net)}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.product-grid{grid-template-columns:1fr}}
/* thẻ sản phẩm do site.js/gen_pages sinh — dựng lại theo kiểu phiếu hiện vật */
.product-card{position:relative;display:block;background:var(--giay);text-decoration:none;
  color:inherit;border-right:1px solid var(--net);border-bottom:1px solid var(--net);
  aspect-ratio:auto;padding:0}
/* Ảnh nay nằm trong .phien nên nền + lề + hoà nền do .phien lo. Đặt lại ở đây là
   nền phiến bị nhân với nền THẺ, sinh ra ô trắng nổi quanh sản phẩm (đã dính 29/07). */
.product-card .phien{aspect-ratio:3/4;padding:5%}
.product-card .pc-img{width:100%;height:100%;object-fit:contain}
.product-card:hover .pc-img{transform:translateY(-3px)}

.product-info{padding:14px 16px 20px;display:flex;flex-direction:column;gap:5px}
.product-info .code{font-family:var(--dis);font-variation-settings:'wdth' 100;
  font-size:19px;font-weight:600;letter-spacing:-.006em;line-height:1.24}
.price{font-family:var(--tech);font-size:13px;letter-spacing:.06em;color:var(--mo)}
.price-old{color:rgba(18,20,28,.35);margin-right:7px}
.sale-badge{color:var(--son);margin-left:7px}
.custom-tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--tech);
  font-size:9.5px;letter-spacing:.12em;background:var(--muc);color:var(--giay);padding:3px 7px}
.product-overlay{display:none}          /* lớp phủ "XEM CHI TIẾT" — thừa, đã có nguyên thẻ bấm được */

/* ── liên hệ ── */
.contact{border-top:1px solid var(--muc);padding:clamp(40px,6vw,76px) 0}
.contact-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
/* Link phụ dưới 3 nút kênh chat — cố ý KHÔNG làm nút, để 3 kênh chính khỏi bị loãng. */
.contact-them{margin-top:16px;font-size:14px}
.contact-them a{color:var(--mo2);border-bottom:1px solid var(--net)}
.contact-them a:hover{color:var(--coban);border-bottom-color:var(--coban)}
.btn,.btn.on-cobalt,.btn.outline{display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 26px;background:var(--muc);color:var(--giay);text-decoration:none;
  font-family:var(--tech);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--muc);border-radius:0;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--muc)}
.btn.outline{background:transparent;color:var(--muc)}
.btn.outline:hover{background:var(--muc);color:var(--giay)}

/* ── Chuyện xưa: danh sách bài + thẻ bộ truyện ── */
.news-row,.ctlt-card{display:grid;grid-template-columns:200px 1fr;gap:22px;
  padding:22px 0;border-bottom:1px solid var(--net);text-decoration:none;color:inherit;
  align-items:start}
@media(max-width:640px){.news-row,.ctlt-card{grid-template-columns:1fr}}
.news-thumb,.ctlt-block{background:var(--phien);aspect-ratio:16/10;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.news-thumb img{width:100%;height:100%;object-fit:cover}
.news-meta,.ctlt-num,.news-read,.ctlt-read{font-family:var(--tech);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mo)}
.news-body h3,.ctlt-body h3{font-size:19px;margin-bottom:6px}
.exc{color:var(--mo2);font-size:14.5px;line-height:1.6}
.tag{font-family:var(--tech);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--net);padding:3px 9px;margin:0 5px 5px 0;display:inline-block;
  text-decoration:none;color:var(--mo)}
.tag:hover{border-color:var(--coban);color:var(--coban)}

/* ── bài viết dài ── */
.article-body{max-width:66ch}
.article-body p{font-size:16.5px;line-height:1.78}
.pp-chip{font-family:var(--tech);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--net);padding:6px 12px;text-decoration:none;color:var(--mo2);
  display:inline-block;margin:0 6px 6px 0}
.pp-chip:hover,.pp-chip.active{border-color:var(--muc);color:var(--muc)}

/* ảnh thật thay ô chữ cái trên trang chủ (xem _tools/patch_home.py) */
.anh-the{width:100%;height:100%;object-fit:contain}
.anh-trang{mix-blend-mode:multiply;padding:6%}      /* ảnh nền trắng -> hoà vào phiến */
.anh-that{object-fit:cover;padding:0}               /* ảnh đời thật -> phủ kín, KHÔNG hoà nền */
.coll-card .anh-the{aspect-ratio:16/10;background:var(--phien);margin:4px 0 2px}
.story-block{overflow:hidden}

/* Thẻ lật catalogue (trang chủ): mỗi TẤM (.lat-tam) là một dải hiện vật xếp cạnh nhau.
   Rê chuột vào hiện vật nào thì ô đó PHÌNH TO (flex-grow), các ô bên tự dạt ra — chốt
   với user 30/07. Tấm lật như giở sách theo nhịp data-giay (site.js).
   Không JS: tấm đầu đứng yên, ảnh vẫn nằm đủ trong HTML cho Google. */
.lat-sach{position:relative;aspect-ratio:16/10;background:#fff;margin:4px 0 2px;
  overflow:hidden;perspective:1400px}
.lat-tam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:16px;background:#fff;transform-origin:left center;
  backface-visibility:hidden;visibility:hidden;
  /* contain: khoanh vùng reflow trong tấm — animation flex chạy đủ 60fps,
     không kéo cả trang re-layout theo từng frame */
  contain:layout style}
.lat-tam:first-child,.lat-tam.hien{visibility:visible}
.lat-sach.js .lat-tam:first-child:not(.hien){visibility:hidden}
.lat-tam.lat-vao{animation:latVao .85s cubic-bezier(.35,.1,.22,1)}
/* Nhịp .9s + ease mềm: user chê bản .5s "bung ra quá nhanh" (30/07).
   Zoom = transform:scale (chạy trên compositor -> 60fps thật), flex-grow chỉ lo
   phần DẠT CHỖ. Ảnh mặc định 62% cao khung; hover scale 1.62 ≈ kín khung —
   to hơn cả bản ảnh ghép tĩnh cũ (~85%). */
.lat-o{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;
  justify-content:center;transition:flex-grow .9s cubic-bezier(.45,.05,.22,1)}
.lat-o img{max-width:100%;max-height:64%;width:auto;height:auto;object-fit:contain;
  will-change:transform;transition:transform .9s cubic-bezier(.45,.05,.22,1)}
.lat-o:hover,.lat-o:focus-visible{flex-grow:3}
.lat-o:hover img,.lat-o:focus-visible img{transform:scale(1.5)}
@keyframes latVao{
  from{transform:rotateY(-88deg);filter:brightness(.82)}
  to{transform:rotateY(0);filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){
  .lat-tam.lat-vao{animation:none}
  .lat-o,.lat-o img{transition:none}
}

/* ảnh linh thú trong danh sách Chuyện xưa (xem _tools/patch_danh_sach.py) */
.news-thumb .anh-the,.ctlt-block .anh-the{width:100%;height:100%;object-fit:contain;padding:8%}
.ctlt-block{position:relative;background:var(--phien);aspect-ratio:16/10;overflow:hidden}
.ctlt-num{position:absolute;top:10px;left:12px;z-index:2}

/* 7 sản phẩm chưa có ảnh (5 MICA + 2 charm Clicker): ô chữ cái phải nằm trong PHIẾN
   như mọi thẻ khác, bằng không nó trôi lửng giữa thẻ và lưới trông như trang lỗi.
   Đây là ô thay thế CÓ THIẾT KẾ, không phải chỗ trống — không bịa ảnh cho chúng. */
.product-card .product-letter{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-family:var(--dis);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:clamp(52px,6vw,88px);color:rgba(18,20,28,.13);line-height:1}