/* =========================================================================
   ArTnoc — hệ thống giao diện
   Bố cục, bảng màu và thang chữ dựng theo đúng mẫu tham chiếu timcraft.vn:
   nền #EAECF0, chữ đen, footer trắng, Montserrat, khung nội dung 1210px,
   header logo ở giữa, thẻ sản phẩm phẳng không viền không đổ bóng.
   ========================================================================= */

:root {
  --ground: #eaecf0;   /* nền toàn trang */
  --white: #ffffff;    /* footer, lớp nổi, ô nhập */
  --ink: #000000;      /* toàn bộ chữ */
  --muted: rgba(0, 0, 0, 0.6);
  --line: rgba(0, 0, 0, 0.16);
  --line-soft: rgba(0, 0, 0, 0.08);
  --veil: rgba(0, 0, 0, 0.2);
  --veil-strong: rgba(0, 0, 0, 0.4);
  --danger: #c31829;
  --ok: #207d36;

  --wrap: 1210px;
  --gutter: 30px;
  --gap-section: 100px;   /* padding dọc của mỗi khối nội dung */

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Chữ trong khối logo: kiểu hình học, nét tròn và rộng hơn Montserrat —
     bám theo bản lockup. Century Gothic đứng đầu danh sách dự phòng vì
     chính nó là kiểu chữ trong bản gốc và có sẵn trên nhiều máy. */
  --font-brand: "Poppins", "Century Gothic", "Futura", var(--font);

  color-scheme: light;
}

/* ---------------------------------------------------------------- Nền tảng */

*, *::before, *::after { box-sizing: border-box; }

/* Thuộc tính hidden phải thắng mọi khai báo display của chính file này.
   Trình duyệt chỉ có sẵn [hidden]{display:none} trong stylesheet mặc định, mà
   quy tắc của tác giả luôn thắng stylesheet mặc định — nên .card{display:flex}
   hay .grid{display:grid} làm hidden mất tác dụng: thuộc tính được đặt đúng
   nhưng phần tử vẫn hiện. Đó chính là lỗi thẻ sản phẩm không ẩn khi lọc. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Thang chữ theo mẫu: tiêu đề dùng Montserrat Medium 500, không in hoa,
   không giãn chữ, line-height 1.5 — cùng nhịp với chữ thường. */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.5; margin: 0 0 16px; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h1 em, h2 em { font-style: italic; }

p { margin: 0 0 16px; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 10px 16px;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- Bố cục */

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: var(--gap-section) 0; }
.section--tight { padding: 40px 0; }
.section--white { background: var(--white); }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }

/* Khối chữ hẹp căn giữa — tương ứng .noidung (1024px) của mẫu. */
.measure { max-width: 1024px; margin-inline: auto; text-align: center; }
/* Khối mở đầu căn trái, hẹp hơn — tương ứng .mota (670px) của mẫu. */
.intro { max-width: 670px; }

.eyebrow { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.lede { font-size: 15px; line-height: 1.9; }

.section-head { margin-bottom: 40px; }
.section-head h2 { margin-bottom: 8px; }
.section-head p { margin: 0; max-width: 62ch; }
.section-head--center { text-align: center; }
.section-head--center p { margin-inline: auto; }

.grid { display: grid; gap: 40px 30px; }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* "Xem tất cả" — chữ in hoa 22px căn giữa, không khung nút, đúng như mẫu. */
/* Đệm đáy rộng để liên kết không dính sát hàng cam kết bên dưới — nó là lối
   đi duy nhất từ trang chủ sang trang sản phẩm nên cần khoảng thở quanh mình. */
.see-all { text-align: center; padding: 40px 0 76px; }

/* Lối đi duy nhất từ trang chủ sang trang sản phẩm, nên làm hẳn thành nút đặc
   thay vì một dòng chữ có gạch chân: khối đen trên nền sáng là thứ tương phản
   mạnh nhất có được với bảng màu này, mắt bắt ngay.

   Hai lớp chuyển động, đều nhẹ:
     1. mũi tên nhích theo chu kỳ để hút mắt khi trang đứng yên
     2. rê chuột thì nút đảo màu, nhấc lên 2px, mũi tên đẩy sang phải
   Khối @media giảm chuyển động ở đầu file vô hiệu hoá cả hai. */
.see-all a {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 48px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--ground);
  font-size: 17px; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em;
  transition: background-color 0.22s, color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.see-all a:hover,
.see-all a:focus-visible {
  background: transparent; color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgb(0 0 0 / 60%);
}

.see-all .arrow {
  display: inline-block;
  animation: see-all-nudge 2.4s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.see-all a:hover .arrow,
.see-all a:focus-visible .arrow {
  animation: none;
  transform: translateX(8px);
}

@keyframes see-all-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  76% { transform: translateX(7px); }
  88% { transform: translateX(2px); }
}

/* ---------------------------------------------------------------- Nút bấm */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 400 13px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.18s, color 0.18s;
  /* Nhãn nút thường ngắn, nhưng vài nút mang giá trị dữ liệu — email, số điện
     thoại — là một "từ" dài không ngắt được. anywhere cho phép ngắt giữa chuỗi
     khi (và chỉ khi) không đủ chỗ; nhãn ngắn không bị ảnh hưởng. Nó cũng hạ
     min-content của nút, nhờ đó ô lưới chứa nút co lại được thay vì đẩy cả
     trang tràn ngang ở màn hình hẹp. */
  overflow-wrap: anywhere;
}
.btn:hover { background: var(--ink); color: var(--ground); text-decoration: none; }
.btn--solid { background: var(--ink); color: var(--ground); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--wide { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: 12px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Kiểu "liên kết gạch chân" cho hành động phụ — mẫu dùng rất nhiều. */
.link-line {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 13px/1.5 var(--font); color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.link-line:hover { opacity: 0.6; text-decoration: none; }

/* ------------------------------------------------------------------ Header */

/* Ba vùng: trái (Menu · Tìm kiếm) — giữa (logo) — phải (giỏ hàng).
   Dùng grid 1fr auto 1fr để logo luôn nằm đúng tâm trang bất kể hai bên dài
   ngắn khác nhau. */
/* Dính ở đầu trang và đè lên nội dung khi cuộn.
   Nền phải đục (--ground) chứ không trong suốt, nếu không chữ bên dưới sẽ
   chạy xuyên qua thanh. z-index 40 nằm dưới lớp tìm kiếm (999), ngăn kéo
   (99999) và nền mờ (9998) — ba thứ đó phải phủ được lên header. */
/* Nền trong mờ kiểu kính: thấy được nội dung chạy bên dưới nhưng chữ trên
   thanh vẫn đọc rõ.
   Trong suốt hoàn toàn thì không dùng được — chữ trong header sẽ chồng lên chữ
   của trang và cả hai cùng không đọc nổi. 40% nền + làm mờ hậu cảnh giữ được
   cảm giác xuyên thấu mà nền phía sau luôn bị nhoè thành một mảng đều màu.

   Lưu ý về tương phản: ở mức 40%, chữ đen trên header dư tương phản với nền
   trang, ảnh gỗ và footer trắng. Nhưng nếu có ảnh TỐI chạy qua dưới header
   thì tỉ lệ tụt xuống khoảng 2.9–3.3:1, dưới ngưỡng 4.5:1. Hiện trang chưa có
   ảnh nào như vậy; cần cân nhắc lại nếu về sau dùng ảnh tối tràn viền. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 40%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: box-shadow 0.25s;
}

/* Trình duyệt không làm mờ được hậu cảnh thì phải trả về nền đục: có trong
   suốt mà không có mờ là đúng trường hợp chữ chồng chữ nói trên. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--ground); }
}
/* Chỉ đổ bóng khi đã cuộn: lúc đứng ở đầu trang, header liền mạch với nội
   dung nên không cần đường phân cách. */
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgb(20 18 14 / 45%); }
.header-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 114px;
}
.header-left { display: flex; align-items: center; gap: 26px; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }

.header-bar button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 16px/50px var(--font); color: var(--ink);
}
.header-bar button:hover { text-decoration: underline; }
.header-right a { font-size: 16px; line-height: 50px; }

.brand { display: flex; align-items: center; gap: 20px; justify-self: center; }
/* Dấu logo.
 *
 * Hình lấy từ KÊNH ALPHA của file PNG khách gửi, dùng làm CSS mask, còn màu do
 * `currentColor` quyết định — không đặt ảnh bằng <img>.
 *
 * Lý do: nét trong ảnh gốc có độ sáng cao nhất chỉ 159/255 (bạc rất nhạt). Đặt
 * thẳng lên nền sáng của trang thì tương phản quá thấp, gần như không đọc được. Qua
 * mask thì nét ăn theo màu chữ nên đen rõ trên nền sáng, và tự sáng lên nếu
 * đặt trên nền tối, mà vẫn giữ đúng từng đường nét của bản gốc.
 *
 * Tỉ lệ 1.574:1 lấy từ kích thước thật của file mask sau khi cắt lề trống. */
.brand-mark {
  display: block; flex: none;
  width: 123px; height: 78px;
  background-color: currentColor;
  -webkit-mask: url("/assets/logo-mask.png") no-repeat center / contain;
  mask: url("/assets/logo-mask.png") no-repeat center / contain;
}
/* Khối chữ của lockup: tên, gạch ngang, dòng mô tả — xếp dọc.
   align-items: stretch để gạch ngang tự bằng đúng bề ngang của tên. */
.brand-text { display: flex; flex-direction: column; align-items: stretch; }

/* Bản lockup viết "ArTnoc" theo đúng kiểu hoa-thường đó, KHÔNG viết hoa toàn
   bộ — nên bỏ text-transform. Nét chữ mảnh, giãn chữ rộng. */
/* Tỉ lệ giữ theo bản lockup gốc: dấu cá cao gấp khoảng 2,6 lần cỡ chữ của tên.
   Giữ tỉ lệ đó bằng cách PHÓNG DẤU CÁ chứ không thu chữ — chữ vẫn 30px, dấu cá
   cao 78px (30 × 2.6), rộng 123px theo tỉ lệ 1.574:1 của chính hình. */
.brand-name {
  font-family: var(--font-brand);
  font-size: 30px; font-weight: 600; letter-spacing: 0.005em;
  text-transform: none; line-height: 1; white-space: nowrap;
}
.brand-rule { display: block; height: 1px; background: currentColor; margin: 8px 0 5px; }
.brand-sub {
  font-family: var(--font-brand);
  display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.10em;
  text-transform: none; text-align: center; color: inherit; line-height: 1.2;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* Icon chỉ dùng ở bề ngang hẹp; desktop giữ nhãn chữ như bản gốc. */
.ico { display: none; }
.ico svg { display: block; width: 21px; height: 21px; }

.cart-count { font-variant-numeric: tabular-nums; }
.cart-count::before { content: "("; }
.cart-count::after { content: ")"; }

/* ------------------------------------------------------ Ngăn kéo điều hướng */

/* Mẫu không có thanh nav ngang: mọi mục nằm trong ngăn kéo 400px trượt từ
   trái, ở cả desktop lẫn mobile — và ngăn kéo mang logo riêng ở đầu. */
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 99999;
  /* Chừa lại một dải bên phải: ở điện thoại, ngăn kéo phủ kín bề ngang thì
     không còn chỗ nào bấm để đóng ngoài đúng nút X. Dải này chính là nền mờ,
     vốn đã bắt sự kiện bấm để đóng. */
  width: min(400px, 84%); padding: 60px 0 20px;
  background: var(--ground);
  transform: translateX(-100%);
  transition: transform 0.5s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }

/* Logo chiếm trọn bề ngang ngăn kéo và căn giữa, cao 80px. */
.drawer-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px;
  height: 124px; margin-bottom: 20px;
}
.drawer-brand:hover { text-decoration: none; }
/* Ngăn kéo dùng cùng tỉ lệ 2.6, chỉ lớn hơn một bậc. */
.drawer-brand .brand-mark { width: 143px; height: 91px; }
.drawer-brand .brand-name { font-size: 35px; }
.drawer-brand .brand-sub { font-size: 13.5px; }

.drawer ul { list-style: none; margin: 0; padding: 0 40px; }
.drawer li > a { display: block; padding: 15px 0; font-size: 17px; }
.drawer .sub { margin: 0 0 6px 18px; padding: 0; }
.drawer .sub a { padding: 8px 0; font-size: 14px; color: var(--muted); }
.drawer .sub a:hover { color: var(--ink); }

.drawer-close {
  position: absolute; top: 5px; right: 7px;
  width: 35px; height: 35px; border: 0; cursor: pointer;
  background: var(--veil); color: var(--ink);
  font-size: 20px; line-height: 35px; text-align: center;
}

.scrim {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--veil-strong);
  opacity: 0; pointer-events: none; transition: opacity 0.5s;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------- Lớp tìm kiếm */

/* Dải cố định cao 85px, nằm sẵn ngoài mép trên (top: -150px) và trượt xuống
   0 khi mở — đúng cơ chế .wap_search của mẫu, không phải một khối chèn vào
   luồng tài liệu (chèn vào luồng sẽ đẩy cả trang xuống khi mở). */
.search-layer {
  position: fixed; top: -150px; left: 0; right: 0; z-index: 999;
  height: 85px; padding: 15px 0;
  background: var(--ground);
  transition: top 0.4s;
}
/* Mở ra thì nằm NGAY DƯỚI header, không đè lên khối thương hiệu.
   Giá trị --search-top do app.js đặt theo chiều cao thật của header (thay đổi
   giữa desktop/mobile, và còn đổi nữa nếu thanh header phải xuống dòng). Số
   114px chỉ là dự phòng khi JS chưa chạy. */
.search-layer.is-open { top: var(--search-top, 114px); }

.search-layer form {
  display: flex; justify-content: space-between; align-items: center;
  height: 55px;
}
.search-layer input {
  flex: 1; min-width: 0; height: 55px; padding: 0 10px;
  border: 0; border-bottom: 1px solid var(--veil);
  background: transparent; color: var(--ink);
  font: 400 13px var(--font);
}
.search-layer form > button {
  width: 55px; height: 55px; flex: none;
  border: 0; border-bottom: 1px solid var(--veil);
  background: transparent; color: var(--ink); cursor: pointer;
}
.search-layer .close {
  position: absolute; top: 0; right: 0;
  width: 30px; height: 30px; border: 0;
  background: var(--veil); color: var(--ink);
  font-size: 20px; line-height: 30px; text-align: center; cursor: pointer;
}

/* -------------------------------------------------------------------- Hero */

/* Trang chủ theo đúng nhịp của mẫu: khối mở đầu 100px trên dưới, ảnh lớn
   không đệm dọc, đoạn dẫn căn giữa 100px trên dưới, "Xem tất cả", rồi hàng
   cam kết đệm đáy 100px. */
.home-intro { padding: var(--gap-section) 0; }
.home-note { padding: var(--gap-section) 0; }
.home-note + .see-all { padding-top: 0; }
.home-image a { display: block; aspect-ratio: 1210 / 786; overflow: hidden; }
.home-image .media { width: 100%; height: 100%; }
.pledges-band { padding: 0 0 var(--gap-section); }

.hero { padding: var(--gap-section) 0 0; }
.hero h1 { margin-bottom: 20px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Ảnh lớn tràn khung nội dung, tỉ lệ ~1210×786 như mẫu. */
.hero-figure { margin-top: 60px; aspect-ratio: 1210 / 786; overflow: hidden; }
.hero-figure .media { width: 100%; height: 100%; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0; }
.stats dt { font-size: 26px; font-weight: 500; }
.stats dd { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* ----------------------------------------------- Cam kết / giá trị / quy trình */

/* Bốn ô ngang, gap 30px, chữ căn giữa, mỗi ô mở đầu bằng một icon 40×40 —
   đúng .camket của mẫu. Ở 1210px: 4 × 280 + 3 × 30 = 1210. */
.pledges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.pledge { text-align: center; }
.pledge .icon {
  display: block; width: 40px; height: 40px; margin: 0 auto 14px;
  color: var(--ink);
}
.pledge h3 { font-size: 16px; margin-bottom: 8px; }
.pledge p { margin: 0; font-size: 14px; }

/* Biến thể đánh số dùng cho quy trình — ở đó thứ tự MANG thông tin (bước 1
   phải trước bước 2), khác với cam kết vốn không có thứ tự. */
.pledge .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 13px;
}

/* ------------------------------------------------------------ Ảnh / media */

.media { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--placeholder { display: block; overflow: hidden; background: rgba(0, 0, 0, 0.06); }
.media--placeholder svg { display: block; width: 100%; height: 100%; }

/* -------------------------------------------------------- Thẻ sản phẩm */

/* Thẻ phẳng: nền trong suốt, không viền, không bo góc, không đổ bóng, ảnh
   vuông, chữ căn giữa — copy đúng .item của mẫu. */
.card { display: flex; flex-direction: column; text-align: center; }
.card-media { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, 0.06); }
.card-media .media { position: absolute; inset: 0; transition: transform 0.5s ease; }
.card:hover .card-media .media { transform: scale(1.04); }

.card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 10px; background: var(--ground);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}

.quick-view {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 0; border: 0; width: 100%;
  background: var(--veil-strong); color: var(--white);
  font: 400 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.22s, transform 0.22s;
}
.card:hover .quick-view, .quick-view:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .quick-view { opacity: 1; transform: none; } }

.card-body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card-cat { font-size: 12px; color: var(--muted); }
.card-title { font-size: 17.5px; font-weight: 500; line-height: 1.5; margin: 0; }
.card-meta { font-size: 13px; color: var(--muted); margin: 0; }
.card-foot { margin-top: auto; padding-top: 10px; display: grid; gap: 10px; justify-items: center; }
.price { font-size: 13px; }
.price--ask { color: var(--muted); }

/* ---------------------------------------------------------- Bộ lọc / chip */

.filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 0 0 20px; margin-bottom: 40px; border-bottom: 1px solid var(--line);
}
.filters label { font-size: 13px; color: var(--muted); }
.filters select, .filters input[type="search"] {
  padding: 9px 10px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); font: 400 13px var(--font);
}
.filters .spacer { margin-left: auto; }
.result-count { font-size: 13px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
.chip { font-size: 15px; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.chip:hover { text-decoration: none; border-bottom-color: var(--line); }
.chip[aria-current="true"] { border-bottom-color: var(--ink); }

/* -------------------------------------------------- Chi tiết sản phẩm */

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-gallery { display: grid; gap: 14px; }
.product-gallery .main { aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, 0.06); }
.product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-thumbs > * { aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, 0.06); }

.spec-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec-table th { width: 40%; font-weight: 400; color: var(--muted); }

.price-block { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; }
.price-block .amount { font-size: 22px; font-weight: 500; }
.price-block .note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
.qty button { width: 40px; height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.qty button:hover { background: rgba(0, 0, 0, 0.06); }
.qty input { width: 48px; height: 44px; border: 0; background: transparent; text-align: center; font: 400 14px var(--font); color: var(--ink); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.buy-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- Bài viết */

.post-head { max-width: 1024px; margin-inline: auto; text-align: center; }
.post-meta { font-size: 13px; color: var(--muted); }
.post-cover { aspect-ratio: 1210 / 640; overflow: hidden; margin: 40px 0; background: rgba(0, 0, 0, 0.06); }
.prose { max-width: 800px; margin-inline: auto; font-size: 15px; line-height: 1.9; }
.prose p { margin-bottom: 1.3em; }
.prose strong { font-weight: 700; }

.post-card .card-media { aspect-ratio: 3 / 2; }
.post-card .card-body { text-align: center; }
.tag { display: inline-block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- Form */

.form { display: grid; gap: 18px; }
/* align-content: start là bắt buộc, không phải trang trí.
   Hai ô cạnh nhau trong .field-row bị lưới kéo cho cao bằng nhau. Ô nào ít
   hàng hơn (không có dòng gợi ý) sẽ được chia phần cao dôi ra vào chính các
   hàng auto của nó — nhãn và ô nhập phình lên, và hai ô nhập lệch nhau đúng
   bằng chiều cao dòng gợi ý. Cho các hàng giữ đúng cỡ tự nhiên, phần dôi dồn
   xuống đáy. */
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 13px; color: var(--muted); }
.field .req { color: var(--danger); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font: 400 14px/1.5 var(--font);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
/* .hint dùng cả trong .field lẫn ngoài (ghi chú dưới form, dưới bảng giỏ),
   nên khai báo ở phạm vi chung thay vì lồng trong .field. */
.hint { font-size: 12px; color: var(--muted); }
.field .hint { margin: 0; }

/* Hành động phá huỷ (xoá dòng trong giỏ) — cùng dáng .link-line nhưng đỏ. */
.link-danger {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 12px/1.5 var(--font); color: var(--muted);
  text-decoration: underline;
}
.link-danger:hover { color: var(--danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-note { padding: 12px 14px; font-size: 14px; border: 1px solid var(--ink); }
.form-note[data-kind="ok"] { border-color: var(--ok); color: var(--ok); }
.form-note[data-kind="err"] { border-color: var(--danger); color: var(--danger); }


/* ---------------------------------------------------------------- Giỏ hàng */

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-weight: 400; }
.cart-table td { padding: 18px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cart-item { display: flex; gap: 16px; align-items: center; text-align: left; }
.cart-item .thumb { width: 76px; height: 76px; flex: none; overflow: hidden; background: rgba(0, 0, 0, 0.06); }
.cart-item strong { display: block; font-size: 15px; font-weight: 500; }
.cart-item small { color: var(--muted); font-size: 12px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0; }
.cart-total .amount { font-size: 22px; font-weight: 500; }

.layout-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
/* Ô lưới mặc định có min-width: auto — không co nhỏ hơn nội dung dài nhất bên
   trong, nên một chuỗi không ngắt được sẽ kéo cả lưới rộng ra khỏi khung. */
.layout-2col > * { min-width: 0; }
.panel { background: var(--white); padding: 30px; }

/* Giỏ rỗng: cột thanh toán bị ẩn nhưng grid vẫn giữ chỗ 1fr, khiến ô
   "giỏ đang trống" co lại còn nửa trang. Về một cột trong trường hợp đó. */
.layout-2col.is-empty { grid-template-columns: 1fr; }

/* --------------------------------------------------------- Trạng thái rỗng */

.empty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); }
.empty h3 { font-size: 16px; }

/* ------------------------------------------------------------------- Modal */

dialog.modal {
  width: min(900px, calc(100% - 32px));
  padding: 0; border: 0; background: var(--ground); color: var(--ink);
}
dialog.modal::backdrop { background: var(--veil-strong); }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { aspect-ratio: 1; background: rgba(0, 0, 0, 0.06); }
.modal-content { padding: 34px; display: flex; flex-direction: column; }
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 35px; height: 35px; border: 0;
  background: var(--veil); color: var(--white); cursor: pointer; font-size: 18px; line-height: 1;
}

/* ------------------------------------------------------------------- Toast */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 130;
  transform: translate(-50%, 16px);
  padding: 13px 24px; background: var(--ink); color: var(--white);
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------- Liên hệ nổi */

.floating-contact { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 12px; }
.floating-contact a,
.floating-contact button {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  cursor: pointer;
}
.floating-contact a:hover,
.floating-contact button:hover { background: var(--ink); color: var(--white); }
.floating-contact svg { width: 22px; height: 22px; }

/* Nút lên đầu trang chỉ xuất hiện khi đã cuộn — ở đầu trang nó không làm gì.
   Ẩn bằng opacity + visibility chứ không display:none, để còn mờ dần ra vào
   thay vì nhảy đột ngột. visibility mới là thứ gỡ nó khỏi thứ tự tab khi ẩn. */
.to-top {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------------ Footer */

/* Footer nền trắng, padding 50px 0, chữ đen 14px — đúng .wap_footer của mẫu. */
.site-footer { background: var(--white); padding: 50px 0; margin-top: var(--gap-section); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.site-footer h4 { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}

/* ------------------------------------------------------------- Breadcrumb */

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; }

/* ------------------------------------------------------------------ Dải CTA */

/* Nền màu nền chung, KHÔNG trắng: khối blog phía trên và footer phía dưới
   đều trắng, để dải này trắng nữa thì ba khối dính thành một mảng trắng dài. */
.cta-band { background: var(--ground); padding: var(--gap-section) 0; text-align: center; }
.cta-band .inner { max-width: 640px; margin-inline: auto; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------------------------------- Câu hỏi thường gặp */

/* Khối này dùng <details> nên phần lớn hành vi do trình duyệt lo. Chỉ cần
   gỡ mũi tên mặc định (mỗi trình duyệt vẽ một kiểu) và tự vẽ dấu +/− để
   trạng thái mở/đóng nhìn giống nhau ở mọi nơi. */
.faq-title { font-size: 26px; font-weight: 500; margin: 0 0 8px; }
.faq { max-width: 760px; margin-top: 26px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: baseline; gap: 14px; cursor: pointer;
  padding: 20px 0; font-size: 16px; font-weight: 500; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto; font-size: 22px; font-weight: 300;
  line-height: 1; color: var(--muted); flex: none;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--muted); }
.faq-a { padding: 0 34px 22px 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 1000px) {
  :root { --gap-section: 70px; }
  .product-detail, .layout-2col, .modal-body { grid-template-columns: 1fr; gap: 40px; }
  .modal-media { aspect-ratio: 16 / 9; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pledges { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .home-image a { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --gap-section: 56px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .header-bar { min-height: 92px; }
  .header-left { gap: 2px; }
  .header-bar button, .header-right a { font-size: 14px; line-height: 34px; }

  /* Ở bề ngang điện thoại, ba nhãn chữ ("Menu", "Tìm kiếm", "Giỏ hàng (0)")
     chiếm gần hết thanh và ép khối logo ở giữa. Đổi sang icon.
     Nhãn chữ KHÔNG bị display:none mà chỉ ẩn khỏi mắt thường — trình đọc màn
     hình vẫn đọc được tên nút, nên không cần thêm aria-label. */
  .ico { display: block; }

  /* Bỏ hẳn nút tìm kiếm ở bề ngang điện thoại theo yêu cầu. Lớp tìm kiếm vẫn
     nằm trong trang nhưng không còn lối mở, nên nó vô hại. */
  #search-toggle { display: none; }

  /* Ngăn kéo ở mobile chỉ rộng 84% màn hình, không đủ chỗ cho khối logo cỡ
     desktop — ở 320px nó tràn 13px. Thu nhỏ theo, vẫn giữ tỉ lệ dấu/tên 2.6. */
  .drawer-brand { height: 84px; }
  .drawer-brand .brand-mark { width: 98px; height: 62px; }
  .drawer-brand .brand-name { font-size: 24px; }
  .drawer-brand .brand-sub { font-size: 10px; }
  .header-bar .lbl {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .header-bar button, .header-right a {
    display: inline-flex; align-items: center; justify-content: center;
    /* 40px thay vì 42: khối logo được ưu tiên chỗ, và ở 320px thanh header
       thiếu đúng 6px. Vẫn trên ngưỡng ô bấm tối thiểu. */
    min-width: 40px; min-height: 40px; padding: 0; line-height: 1;
  }
  .header-right a { position: relative; }

  /* Số lượng thành huy hiệu tròn trên icon giỏ; ngoặc của bản desktop bỏ đi. */
  .cart-count {
    /* right: 0 chứ không âm — nút giỏ nằm sát mép phải của thanh header, huy
       hiệu thò ra ngoài sẽ làm thanh tràn và có nguy cơ bị cắt ở màn hẹp. */
    position: absolute; top: 0; right: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--ink); color: var(--ground);
    font-size: 10px; font-weight: 500; line-height: 16px; text-align: center;
  }
  .cart-count::before, .cart-count::after { content: none; }
  .cart-count[data-empty="1"] { display: none; }
  .brand-name { font-size: 21px; letter-spacing: 0.08em; }
  .brand-rule { margin: 5px 0 3px; }
  /* Tỉ lệ dấu/tên giữ đúng 2.6 ở mọi cỡ. Riêng dòng mô tả, nếu bám đúng tỉ lệ
     trong lockup (~0.39 cỡ chữ tên) thì ở mobile chỉ còn ~8px — quá nhỏ để
     đọc trên điện thoại. Đặt sàn 10px và chấp nhận lệch tỉ lệ ở riêng dòng
     này; quan hệ thị giác chính là giữa dấu cá và tên, vẫn nguyên vẹn. */
  .brand-sub { font-size: 10px; letter-spacing: 0.1em; }
  .brand { gap: 10px; }
  .brand-mark { width: 87px; height: 55px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .see-all a { font-size: 15px; padding: 17px 34px; gap: 11px; letter-spacing: 0.12em; }
  .see-all { padding-bottom: 52px; }
  .hero-figure { margin-top: 36px; aspect-ratio: 4 / 3; }

  /* Bảng giỏ hàng chuyển sang thẻ xếp dọc — 4 cột không đọc được ở bề ngang
     điện thoại. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .cart-table td { border: 0; padding: 5px 0; }
  .cart-table td[data-label]::before { content: attr(data-label) " · "; font-size: 12px; color: var(--muted); }
}

@media (max-width: 560px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .card-title { font-size: 15px; }
  .pledges { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Dưới 380px, lưới 2 cột để lại cột nội dung quá hẹp cho chuỗi giá dài nhất. */
@media (max-width: 380px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Dưới 360px, header đã phải xếp hai hàng mà vẫn không đủ chỗ cho lockup đầy
   đủ. Bỏ gạch ngang và dòng mô tả, giữ dấu cá + tên — phần nhận diện chính. */
@media (max-width: 360px) {
  .brand-rule, .brand-sub { display: none; }
  .brand-mark { width: 74px; height: 47px; }
  .brand-name { font-size: 18px; }
  .brand { gap: 9px; }
}

/* Ô nhập phải từ 16px trở lên trên điện thoại.
   iOS tự phóng trang khi con trỏ vào một ô nhập có cỡ chữ dưới 16px. Bình
   thường người dùng chỉ việc chụm tay thu lại — nhưng trang này đã chặn zoom,
   nên họ sẽ mắc kẹt ở trạng thái phóng to. 16px làm iOS không phóng ngay từ
   đầu, và cách này đúng kể cả khi trình duyệt bỏ qua user-scalable=no. */
@media (max-width: 760px) {
  .field input, .field textarea, .field select,
  .search-layer input,
  .filters select, .filters input[type="search"],
  .qty input { font-size: 16px; }
}

@media print {
  .site-header, .site-footer, .floating-contact, .quick-view, .btn, .drawer, .scrim { display: none !important; }
}

/* ------------------------------------------------- Phóng to ảnh sản phẩm */

/* Chỉ <img> thật mới bấm phóng to được — ô vân gỗ sinh tại chỗ cho sản phẩm
   chưa có ảnh không nhận lớp này, nên con trỏ không hứa hẹn thao tác vô ích. */
.product-gallery img.is-zoomable { cursor: zoom-in; }
.product-gallery img.is-zoomable:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

dialog.lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0; border: 0; background: transparent; overflow: hidden;
}
dialog.lightbox::backdrop { background: rgb(18 18 16 / 94%); }

.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lb-stage img {
  max-width: 92vw; max-height: 84vh;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none; -webkit-user-drag: none;
  will-change: transform;
}
/* touch-action: none để khi đã phóng to, kéo trên màn cảm ứng là di chuyển ảnh
   chứ không phải cuộn trang phía sau. */
.lb-stage.is-zoomed img { cursor: grab; touch-action: none; }
.lb-stage.is-panning img { cursor: grabbing; }

.lb-btn {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%;
  background: rgb(255 255 255 / 10%); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-btn:hover { background: rgb(255 255 255 / 22%); }
.lb-close { top: 18px; right: 18px; font-size: 22px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

.lb-count, .lb-hint {
  position: absolute; left: 0; right: 0; z-index: 2;
  margin: 0; text-align: center; color: rgb(255 255 255 / 70%);
}
.lb-count { bottom: 46px; font-size: 13px; letter-spacing: 0.08em; }
.lb-hint { bottom: 20px; font-size: 11px; letter-spacing: 0.06em; }

@media (max-width: 560px) {
  .lb-btn { width: 40px; height: 40px; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-stage img { max-width: 96vw; max-height: 74vh; }
  .lb-hint { display: none; }
}

/* -------------------------------------------------------------- Liên hệ */

/* SVG nhúng thẳng trong nút KHÔNG có kích thước nội tại — không ràng buộc thì
   trình duyệt cho nó nở tới cỡ mặc định 300×150 và phá vỡ cả khối. Đặt ở đây
   một lần cho mọi nút, thay vì nhớ đặt ở từng chỗ dùng icon. */
.btn svg { width: 18px; height: 18px; flex: none; }

.panel-title { font-size: 20px; margin: 0 0 6px; }
.panel-sub { margin: 0 0 22px; font-size: 13px; color: var(--muted); }
.panel-sub .req, .field .req { color: var(--danger); }

.contact-side { display: grid; gap: 24px; align-content: start; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.contact-list li:first-child { border-top: 0; padding-top: 4px; }
.contact-list li:last-child { padding-bottom: 4px; }

.contact-list .ci { flex: none; color: var(--muted); margin-top: 3px; }
.contact-list .ci svg { display: block; width: 20px; height: 20px; }

.contact-list .cv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-list .lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.contact-list .cv a { font-size: 17px; overflow-wrap: anywhere; }
.contact-list .note { font-size: 12px; color: var(--muted); }

.contact-address {
  margin: 0 0 18px; font-style: normal; font-size: 16px; line-height: 1.7;
}
.contact-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.contact-meta dt {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.contact-meta dd { margin: 0; font-size: 14px; line-height: 1.6; }

/* Nút gửi và dòng ghi chú nằm cùng hàng ở màn rộng, xuống dòng khi hẹp. */
.form-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 6px;
}
.form-foot .hint { margin: 0; font-size: 12px; color: var(--muted); max-width: 34ch; }

@media (max-width: 760px) {
  .contact-meta { grid-template-columns: 1fr; gap: 2px; }
  .contact-meta dd { margin-bottom: 12px; }
  .form-foot .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------- Logo động lúc tải trang */

/* Chỉ chạy cho người KHÔNG bật giảm chuyển động. Bọc trong no-preference thay
   vì dựa vào quy tắc chung ở đầu file: ở đây hiệu ứng không được định nghĩa gì
   cả, chắc chắn hơn là định nghĩa rồi rút thời lượng về 0.01ms.

   Dấu logo là ảnh mask nên không "vẽ nét" theo kiểu stroke-dasharray của SVG
   được; thay vào đó quét lộ dần bằng clip-path, từ đuôi ra đầu cá.

   KHÔNG dùng animation-delay + fill: backwards để xếp thứ tự.
   Cách đó giữ trạng thái ĐẦU (ẩn) trong suốt thời gian chờ, nên nếu hiệu ứng
   không chạy vì bất kỳ lý do gì — tab nền, trình duyệt tắt animation — logo
   sẽ biến mất thay vì chỉ là không có hiệu ứng. Thay vào đó mọi hiệu ứng bắt
   đầu ngay tại 0s và tự "chờ" bằng cách giữ khung hình đầu tới một mốc phần
   trăm. Không có fill nào, nên khi hiệu ứng không chạy thì phần tử hiện đúng
   kiểu tự nhiên của nó. */
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand-mark { animation: logo-wipe 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .site-header .brand-name { animation: logo-name 0.9s ease-out; }
  .site-header .brand-rule { transform-origin: left center; animation: logo-rule 0.98s ease-out; }
  .site-header .brand-sub  { animation: logo-sub 1.15s ease-out; }
}

@keyframes logo-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0.25; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* 38% / 53% / 54% là phần giữ khung đầu, thay cho animation-delay
   0.34s / 0.52s / 0.62s tương ứng. */
@keyframes logo-name {
  0%, 38% { opacity: 0; transform: translateY(7px); }
  100%    { opacity: 1; transform: none; }
}
@keyframes logo-rule {
  0%, 53% { transform: scaleX(0); }
  100%    { transform: scaleX(1); }
}
@keyframes logo-sub {
  0%, 54% { opacity: 0; transform: translateY(7px); }
  100%    { opacity: 1; transform: none; }
}