/* ==========================================================================
   Snackhouse v2 — style
   Không Tailwind, không CSS ngoài. Token lấy đúng từ bộ thiết kế Claude Design.
   Breakpoint: @media (max-width: 980px) — bằng ngưỡng state.narrow của prototype.
   ========================================================================== */

:root {
  /* Màu — lấy nguyên từ file thiết kế, không từ README (README ghi sai màu header) */
  --red:        #E1252B;
  --red-dark:   #C81E23;
  --red-deep:   #8E1114;
  --red-deepest:#2E0405;
  --ink:        #241C18;
  --ink-2:      #544B43;
  --ink-3:      #6B6259;
  --muted:      #8A8076;
  --muted-2:    #A29788;
  --bg:         #FFFDF9;
  --cream:      #FDF6EC;
  --cream-2:    #FAF3E8;
  --cream-3:    #FAF5EC;
  --hero-cream: #F5EDE0;   /* nền hero sáng — Minh chốt 16/09/2026 */
  --line:       #EFE7DA;
  --line-2:     #F0E5D4;
  --white:      #FFFFFF;
  --map-mk:     #FFE0B8;
  --map-hi:     #FFD9A0;
  --bean-1:     #D89C5C;
  --bean-2:     #C4864A;
  --bean-3:     #E7B478;

  /* Chữ */
  --f-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Nhịp */
  --wrap: 1360px;
  --pad: clamp(16px, 3vw, 40px);
  --sec: clamp(44px, 6vw, 104px);
  --r-card: 16px;
  --r-img: 12px;
  --r-pill: 999px;
  --sh-card: 0 14px 34px rgba(36,28,24,.10);
  --sh-red:  0 18px 44px rgba(225,37,43,.12);
  --sh-deep: 0 24px 60px rgba(36,28,24,.24);
  --t: .28s ease;
}

/* CN và KR không có glyph trong Playfair / Be Vietnam Pro.
   Đặt font hệ thống bản địa lên đầu thay vì tải thêm vài MB Noto CJK —
   máy người dùng ở hai thị trường đó luôn có sẵn font bản địa. */
html[lang="zh-CN"] {
  --f-head: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --f-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif;
}
html[lang="ko"] {
  --f-head: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --f-body: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; }
h2 { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.05; }
h3 { font-size: clamp(16.5px, 1.6vw, 21px); line-height: 1.25; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.sh-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.sh-skip:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------- layout */

.sh-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.sh-sec  { padding-block: var(--sec); }
.sh-sec--tight { padding-block: clamp(32px, 4vw, 64px); }

.sh-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red); margin: 0 0 14px;
  font-family: var(--f-body);
}
.sh-lead {
  color: var(--ink-3); font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.75; max-width: 68ch;
}
.sh-head-c { text-align: center; }
.sh-head-c .sh-lead { margin-inline: auto; }

/* "Xem tất cả →" trong header căn giữa: chữ gạch chân đỏ, KHÔNG phải nút viền.
   Đúng bộ thiết kế (13/09/2026); bản dựng đầu để nút ghost bên dưới lưới. */
.sh-more {
  display: inline-block; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--red);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1.5px; text-decoration-color: currentColor;
  transition: color .2s ease, gap .2s ease;
}
.sh-more:hover, .sh-more:focus-visible { color: var(--red-dark); }
.sh-more span { display: inline-block; transition: transform .2s ease; }
.sh-more:hover span { transform: translateX(3px); }

.sh-i { flex: 0 0 auto; }

/* --------------------------------------------------------------- nút */

.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 14.5px; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap; text-align: center;
}
.sh-btn--solid { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.sh-btn--solid:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.sh-btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.sh-btn--ghost:hover { border-color: var(--red); color: var(--red); }
.sh-btn--onDark { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
/* Nút phụ trên NỀN SÁNG. Tách riêng khỏi --onDark vì --onDark còn dùng ở 5 chỗ khác,
   tất cả đều nằm trên nền đỏ đậm — sửa chung là làm hỏng 5 chỗ kia. */
.sh-btn--outlineRed { border-color: var(--red-dark); color: var(--red-dark); background: transparent; }
.sh-btn--outlineRed:hover { background: var(--red-dark); color: #fff; border-color: var(--red-dark); transform: translateY(-1px); }
.sh-btn--onDark:hover { background: #fff; color: var(--red-dark); border-color: #fff; }
.sh-btn--sm { padding: 9px 18px; font-size: 13px; }
.sh-btn--block { width: 100%; }

.sh-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--cream); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}

/* ------------------------------------------------------------- header */

.sh-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--red);
  color: #fff;
}
.sh-header a { color: #fff; }
.sh-header__bar {
  max-width: var(--wrap); margin: 0 auto;
  padding: 8px clamp(14px, 2.4vw, 32px);
  min-height: 60px;
  display: flex; align-items: center; gap: 8px clamp(10px, 1.6vw, 26px);
}
.sh-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Logo đứng một mình từ 13/09/2026 (đã bỏ dòng chữ "Viễn Hồng Co., Ltd") nên cho
   cao hơn một chút. aspect-ratio:auto để dùng đúng tỉ lệ thật của file, không dùng
   tỉ lệ suy ra từ thuộc tính width/height trong HTML. */
.sh-logo img {
  height: 40px; width: auto; aspect-ratio: auto;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
@media (max-width: 980px) { .sh-logo img { height: 34px; } }

.sh-nav { display: flex; align-items: center; gap: 2px clamp(8px, 1.3vw, 20px); flex: 1 1 auto; min-width: 0; }
.sh-nav__item { position: relative; }
.sh-nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 18px 2px; font-size: 14px; font-weight: 600;
  white-space: nowrap; border-bottom: 2px solid transparent;
  background: none; border-top: 0; border-inline: 0; cursor: pointer;
}
.sh-nav__link[aria-current="true"] { border-bottom-color: #fff; }
.sh-nav__item:hover > .sh-nav__link { color: rgba(255,255,255,.82); }

.sh-sub {
  position: absolute; top: 100%; left: -14px; padding-top: 6px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.sh-nav__item:hover .sh-sub,
.sh-nav__item:focus-within .sh-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sh-sub__inner {
  background: #fff; border-radius: 12px; box-shadow: var(--sh-deep);
  padding: 8px; min-width: 216px; display: flex; flex-direction: column;
}
.sh-sub__inner a {
  padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink); white-space: nowrap;
}
.sh-sub__inner a:hover { background: #FFF3EE; color: var(--red-dark); }

.sh-hsearch {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: rgba(255,255,255,.18);
  border-radius: var(--r-pill); flex: 0 0 auto;
  transition: background var(--t);
}
.sh-hsearch:focus-within { background: #fff; }
.sh-hsearch input {
  background: none; border: 0; outline: none; color: #fff;
  font-size: 13px; font-weight: 500; width: clamp(88px, 10vw, 150px);
}
.sh-hsearch input::placeholder { color: rgba(255,255,255,.8); }
.sh-hsearch:focus-within input,
.sh-hsearch:focus-within .sh-i { color: var(--ink); }
.sh-hsearch:focus-within input::placeholder { color: var(--muted-2); }
.sh-hsearch button { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }

.sh-head__right { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; margin-left: auto; }

.sh-lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--r-pill); }
.sh-lang a {
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.sh-lang a[aria-current="true"] { background: #fff; color: var(--red-dark); }
.sh-lang a:not([aria-current="true"]):hover { background: rgba(255,255,255,.2); color: #fff; }

/* Nút CTA trên header. PHẢI kèm .sh-header để thắng `.sh-header a { color:#fff }`
   (0,1,1 > 0,1,0). Thiếu tiền tố này thì chữ trắng trên nền trắng — nút tàng hình.
   Lỗi có từ bản dựng đầu, phát hiện 13/09/2026. */
.sh-header a.sh-head__cta { background: #fff; color: var(--red-dark); border-color: #fff; }
.sh-header a.sh-head__cta:hover { background: var(--cream); color: var(--red-deep); }

.sh-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: #fff; }

/* panel mobile */
.sh-mob {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column; padding: 18px var(--pad) 32px; overflow-y: auto;
}
.sh-mob[data-open="true"] { transform: translateX(0); }
.sh-mob__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sh-mob__close { background: var(--cream); border: 0; border-radius: var(--r-pill); padding: 10px; cursor: pointer; color: var(--ink); display: flex; }
.sh-mob__list { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.sh-mob__list > a { padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.sh-mob__group > a { padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--ink); display: block; }
.sh-mob__sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 12px 14px; border-left: 2px solid rgba(225,37,43,.28); border-bottom: 1px solid var(--line); }
.sh-mob__sub a { padding: 8px 0; font-size: 14px; color: var(--ink-3); }
.sh-mob__lang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.sh-mob__lang a { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sh-mob__lang a[aria-current="true"] { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------- hero */

.sh-hero {
  position: relative; overflow: hidden; color: var(--ink);
  background: var(--hero-cream);
}
/* Lớp phủ kem rất mờ. Hero hiện KHÔNG có ảnh nền — lớp này chỉ để nền không phẳng lì,
   sáng dần về phía sản phẩm. Nếu sau này gắn ảnh nền thật thì đặt ảnh ở .sh-hero
   (background-image) và lớp này thành tấm phủ làm dịu ảnh, không phải sửa gì thêm. */
.sh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(86% 78% at 72% 16%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(245,237,224,0) 40%);
}
.sh-hero .sh-beans { z-index: 1; }
.sh-hero .sh-wrap  { position: relative; z-index: 2; }
.sh-hero__grid {
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-block: clamp(40px, 6vw, 92px);
}
.sh-hero h1 { color: var(--ink); }
.sh-hero h1 .hl { color: var(--red-dark); }
.sh-hero__sub { color: var(--ink-2); max-width: 52ch; font-size: clamp(14.5px, 1.2vw, 16.5px); }
.sh-hero__sub em { color: var(--ink-3); font-style: italic; }
.sh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sh-hero__eyebrow { color: var(--red-dark); }
/* Hạt đậu trang trí vốn chỉnh cho nền đỏ đậm. Trên nền kem cùng tông nâu ấm nên phải
   hạ đục xuống, không thì chúng thành những đốm bẩn giữa khoảng trắng. */
.sh-hero .sh-bean { opacity: .3; }

/* carousel hũ sản phẩm */
.sh-carousel { position: relative; min-height: clamp(300px, 38vw, 460px); display: grid; place-items: center; }
.sh-carousel__track { position: relative; width: 100%; height: clamp(260px, 34vw, 420px); }
/* Ảnh hero. Trước đây khối này là display:grid + place-items:end center; hàng lưới
   tự co theo nội dung nên max-height:100% quy chiếu vào chính chiều cao ảnh (880px)
   chứ không phải khung 420px ⇒ ảnh giữ 341×880 và tràn khỏi đáy, nhìn ra như bị cắt
   mất nửa dưới sản phẩm. Flex column + chiều cao phần trăm trên con thì quy chiếu
   đúng vào khung: đo lại được 128×332 trong khung 596×420, không tràn.
   aspect-ratio:auto vì width/height trong HTML không mô tả đúng ảnh cutout.
   Số liệu bám bộ thiết kế: ảnh 80% chiều cao sân khấu, neo đáy, padding đáy 88px;
   bóng đổ ellipse rộng 42% / tối đa 210px / cao 24px. */
.sh-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: clamp(22px, 5vw, 88px);
  opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.sh-slide[data-active="true"] { opacity: 1; transform: scale(1); pointer-events: auto; }
.sh-slide a { display: block; height: 100%; max-width: 70%; }
/* Bóng đổ dịu hơn hẳn bản nền đỏ: đổ bóng đen 55% trên nền kem trông như vết bẩn.
   Dùng nâu mực loãng, lệch ít và toả rộng hơn. */
.sh-slide img {
  aspect-ratio: auto;
  height: 100%; max-height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(6px 16px 20px rgba(36,28,24,.18));
}
.sh-slide::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(14px, 4.2vw, 78px);
  width: 42%; max-width: 210px; height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36,28,24,.22), rgba(36,28,24,.08) 62%, rgba(36,28,24,0));
}

/* Nhãn tên sản phẩm đang hiện. KHÁC với lớp chữ mờ khổng lồ sau hũ (.sh-carousel__ghost)
   đã gỡ hẳn ở 2.1.1 theo yêu cầu — đây là nhãn nhỏ nằm trước, đọc được, có nền riêng. */
.sh-carousel__name {
  position: relative; z-index: 2; margin: 0 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(36,28,24,.10); border: 1px solid rgba(36,28,24,.06);
}
.sh-carousel__nav { position: absolute; inset-inline: 0; top: 50%; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.sh-carousel__nav button {
  pointer-events: auto; background: #fff; border: 1px solid rgba(36,28,24,.10);
  color: var(--ink); border-radius: var(--r-pill); padding: 10px; cursor: pointer; display: flex;
  box-shadow: 0 4px 14px rgba(36,28,24,.10);
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.sh-carousel__nav button:hover { background: var(--red-dark); color: #fff; box-shadow: 0 6px 18px rgba(200,30,35,.24); }
.sh-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.sh-carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(36,28,24,.22); cursor: pointer; transition: background var(--t), width var(--t);
}
.sh-carousel__dots button[aria-current="true"] { background: var(--red-dark); width: 22px; border-radius: var(--r-pill); }

.sh-beans { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sh-bean { position: absolute; border-radius: 50%; opacity: .5; animation: sh-float linear infinite; }
@keyframes sh-float {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(-14px,-18px) rotate(120deg); }
  100% { transform: translate(0,0) rotate(240deg); }
}
@media (prefers-reduced-motion: reduce) { .sh-bean { animation: none; } }

/* --------------------------------------------------------- dải số liệu */

.sh-stats { background: #fff; border-block: 1px solid var(--line); }
.sh-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.sh-stat { padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 28px); text-align: center; box-shadow: inset -1px 0 0 var(--line); }
.sh-stats__grid > .sh-stat:last-child { box-shadow: none; }
.sh-stat__n { font-family: var(--f-head); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; color: var(--red); letter-spacing: -.02em; }
.sh-stat__n .u { font-size: .52em; }
.sh-stat__l { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }

/* ------------------------------------------------------ "Tại sao chọn" */

.sh-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 3vw, 44px); }
.sh-why__card {
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.sh-why__card:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); box-shadow: var(--sh-red); }
.sh-why__card:hover h3, .sh-why__card:hover p { color: #fff; }
.sh-why__img { aspect-ratio: 16/10; background: var(--cream-2); }
.sh-why__img img { width: 100%; height: 100%; object-fit: cover; }
.sh-why__body { padding: clamp(16px, 1.6vw, 22px); }
.sh-why__body p { font-size: 13.6px; line-height: 1.68; color: var(--ink-3); margin: 0; transition: color var(--t); }

/* ---------------------------------------------------------- bản đồ band */

.sh-map-band {
  background: linear-gradient(160deg, var(--red-deep) 0%, var(--red-deepest) 86%);
  color: #fff;
}
.sh-map-band h2, .sh-map-band .sh-eyebrow { color: #fff; }
.sh-map-band .sh-eyebrow { color: var(--map-hi); }
.sh-map-band .sh-lead { color: rgba(255,255,255,.8); }
.sh-map-band__grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: clamp(20px, 2.6vw, 36px); }

.sh-map { width: 100%; height: auto; }
.sh-map-base path { fill: rgba(255,255,255,.075); stroke: rgba(255,255,255,.13); stroke-width: .4; vector-effect: non-scaling-stroke; }
.sh-map-mk path { fill: var(--map-mk); stroke: rgba(46,4,5,.3); stroke-width: .4; vector-effect: non-scaling-stroke; }
.sh-map-vn { fill: #fff; stroke: var(--red); stroke-width: .7; vector-effect: non-scaling-stroke; }

.sh-pin line, .sh-map-factory line { stroke: rgba(255,255,255,.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sh-pin circle { fill: var(--red); stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sh-pin text, .sh-map-factory text {
  font-family: var(--f-body); font-size: 15px; font-weight: 700; fill: #fff;
  stroke: rgba(46,4,5,.85); stroke-width: 3.4; paint-order: stroke fill;
  transition: fill var(--t);
}
.sh-pin:hover text { fill: var(--map-hi); }
.sh-map-factory .sh-core { fill: #fff; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sh-map-factory .sh-halo { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sh-map-factory text { font-size: 13.5px; }

.sh-map-side { display: flex; flex-direction: column; gap: 18px; }
.sh-map-stat { border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-card); padding: 18px 20px; background: rgba(255,255,255,.05); }
.sh-map-stat__n { font-family: var(--f-head); font-weight: 700; font-size: 34px; line-height: 1; color: var(--map-mk); }
.sh-map-stat__l { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); margin-top: 6px; }
.sh-map-list { display: flex; flex-wrap: wrap; gap: 7px; }
.sh-map-list span { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; font-weight: 500; }
.sh-map-more { font-size: 12px; color: rgba(255,255,255,.6); }

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

.sh-pgrid { display: grid; gap: clamp(16px, 2vw, 26px); margin-top: clamp(24px, 3vw, 40px); }
.sh-pgrid--2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.sh-pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-pgrid--4 { grid-template-columns: repeat(4, 1fr); }

.sh-pcard {
  border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.sh-pcard:hover { border-color: var(--red); border-width: 1.5px; box-shadow: var(--sh-red); transform: translateY(-3px); }
/* Khung ảnh thẻ sản phẩm — sửa 13/09/2026 (v2.1.1).
   Lỗi cũ: display:grid + max-height phần trăm. Phần trăm không quy chiếu được vào
   hàng lưới tự co, nên ảnh giữ tỉ lệ tự nhiên và render 414px cao trong khung 230px
   ⇒ tràn 250px, bị overflow:hidden cắt cụt nắp hũ. Cùng loại lỗi với .sh-slide ở hero.
   Cách sửa: flex + chiều cao phần trăm (không phải max-height) trên phần tử con —
   quy chiếu đúng vào khung có chiều cao cố định. Số 76% / 84% giữ nguyên bộ thiết kế. */
.sh-pcard__shot {
  margin: 14px; border-radius: var(--r-img); background: #fff;
  height: 230px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sh-pcard__shot img {
  aspect-ratio: auto;
  height: 76%; max-height: 76%; width: auto; max-width: 86%;
  object-fit: contain;
  transition: height var(--t);
}
.sh-pcard:hover .sh-pcard__shot img { height: 84%; max-height: 84%; }
.sh-pcard__body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.sh-pcard__badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.sh-pcard h3 { margin: 0; font-size: 17px; }
.sh-pcard__price { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sh-pcard__price small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.sh-pcard__foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Khung hình động dùng chung cho dải ảnh chạy ngang (.sh-strip).
   Bản dựng đầu có thêm .sh-rail — băng chạy bằng chính các thẻ sản phẩm — sai so với
   bộ thiết kế; đã gỡ 13/09/2026, không template nào còn dùng. */
@keyframes sh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sh-empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 48px); text-align: center; color: var(--ink-3);
  background: var(--cream-3); margin-top: 24px;
}
.sh-empty h3 { margin-bottom: 6px; }

/* ------------------------------------------------------------ CTA band */

.sh-cta { background: var(--red); color: #fff; text-align: center; }
.sh-cta h2 { color: #fff; }
.sh-cta p { color: rgba(255,255,255,.9); max-width: 68ch; margin-inline: auto; }
.sh-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* --------------------------------------------------- trang Giới thiệu */

.sh-about__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.sh-about__slogan { font-family: var(--f-head); font-style: italic; font-size: clamp(18px, 2vw, 25px); color: var(--red-dark); margin: 0 0 18px; }

.sh-shots { position: relative; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-deep); aspect-ratio: 4/3; background: var(--cream-2); }
.sh-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.sh-shots img[data-active="true"] { opacity: 1; }
.sh-shots__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.sh-shots__dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.sh-shots__dots button[aria-current="true"] { background: #fff; width: 20px; border-radius: var(--r-pill); }

.sh-vm { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
.sh-vm__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 34px); background: #fff; }
.sh-vm__card h3 { font-size: clamp(19px, 1.8vw, 24px); color: var(--red-dark); }

.sh-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(26px, 3vw, 42px); }
.sh-values__card { text-align: center; padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--cream-3); }
.sh-values__ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: #fff; color: var(--red); border: 1px solid var(--line); }

.sh-tech { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-tech__media { position: relative; border-radius: var(--r-card); overflow: hidden; }
.sh-tech__media::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow var(--t);
}
.sh-tech__media:hover::after { box-shadow: inset 0 0 0 1.5px var(--map-mk); }
.sh-tech__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(36,28,24,.78); color: #fff; padding: 6px 13px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
}
.sh-tech__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-tech__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.sh-tech__list .sh-i { color: var(--red); margin-top: 3px; }

.sh-scroller { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.sh-scroller > * { flex: 0 0 clamp(240px, 30vw, 340px); scroll-snap-align: start; }
.sh-scroller__hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* chứng nhận */
.sh-certs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(26px, 3vw, 42px); }
.sh-cert {
  border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
  padding: clamp(16px, 1.8vw, 24px); text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.sh-cert:hover { border-color: var(--red); box-shadow: var(--sh-card); transform: translateY(-2px); }
.sh-cert__name { font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.sh-cert__desc { font-size: 12.6px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.sh-cert__ico { color: var(--red); }
.sh-cert button {
  margin-top: auto; background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--red);
  display: inline-flex; align-items: center; gap: 5px;
}
.sh-cert button:hover { color: var(--red-dark); }
.sh-cert__soon { font-size: 11.5px; color: var(--muted); margin: auto 0 0; }

/* ⚠ display PHẢI nằm trong [open].
   <dialog> mặc định bị trình duyệt ẩn bằng `dialog:not([open]){display:none}`.
   Đặt `display:grid` trần sẽ ĐÈ luôn quy tắc đó ⇒ hộp thoại hiện thường trực giữa
   trang, kèm nút X và một ảnh vỡ. Đó chính là "lỗi hình" ở đầu trang Câu chuyện,
   phát hiện 13/09/2026. */
.sh-lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,4,5,.82);
  padding: clamp(16px, 4vw, 48px); border: 0;
}
.sh-lightbox[open] { display: grid; place-items: center; }
.sh-lightbox::backdrop { background: rgba(20,4,5,.82); }
.sh-lightbox__inner { position: relative; max-width: 900px; width: 100%; }
.sh-lightbox img { width: 100%; height: auto; border-radius: 10px; background: #fff; }
.sh-lightbox__cap { color: #fff; font-weight: 600; margin: 0 0 12px; text-align: center; }
.sh-lightbox__x {
  position: absolute; top: -46px; right: 0; background: rgba(255,255,255,.16);
  border: 0; color: #fff; border-radius: 50%; padding: 9px; cursor: pointer; display: flex;
}
.sh-lightbox__x:hover { background: rgba(255,255,255,.34); }

/* cột mốc */
.sh-tl { position: relative; margin-top: clamp(28px, 3vw, 48px); }
.sh-tl__axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line-2); transform: translateX(-50%); }
.sh-tl__fill { position: absolute; left: 50%; top: 0; width: 2px; background: var(--red); transform: translateX(-50%); height: 0; transition: height .2s linear; }
.sh-tl__row { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 0; padding-block: clamp(14px, 2vw, 26px); }
.sh-tl__card { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: clamp(18px, 2vw, 26px); box-shadow: var(--sh-card); }
.sh-tl__row:nth-child(odd) .sh-tl__card { grid-column: 1; text-align: right; }
.sh-tl__row:nth-child(even) .sh-tl__card { grid-column: 3; }
.sh-tl__year { font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); color: var(--red); line-height: 1; margin-bottom: 6px; }
.sh-tl__dot {
  grid-column: 2; justify-self: center; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--line-2); z-index: 2;
  transition: transform var(--t), border-color var(--t);
}
.sh-tl__row[data-on="true"] .sh-tl__dot { border-color: var(--red); transform: scale(1.34); }

/* ------------------------------------------------------ trang Hợp tác */

.sh-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(26px, 3vw, 42px); }
.sh-svc__card { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.sh-svc__card--hi { border: 1.5px solid var(--red); box-shadow: var(--sh-red); }
.sh-svc__tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 5px 11px; border-radius: var(--r-pill); }
.sh-svc__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sh-svc__list li { display: flex; gap: 9px; font-size: 13.6px; color: var(--ink-2); align-items: flex-start; }
.sh-svc__list .sh-i { color: var(--red); margin-top: 3px; }
.sh-svc__card .sh-btn { margin-top: auto; align-self: flex-start; }

.sh-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(26px, 3vw, 42px); counter-reset: sh-step; }
.sh-step { position: relative; padding-top: 46px; }
.sh-step::before {
  counter-increment: sh-step; content: counter(sh-step);
  position: absolute; top: 0; left: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px;
  font-family: var(--f-body);
}
.sh-step::after { content: ""; position: absolute; top: 17px; left: 42px; right: -12px; height: 1px; background: var(--line-2); }
.sh-flow > .sh-step:last-child::after { display: none; }
.sh-step h3 { font-size: 16.5px; margin-bottom: 5px; }
.sh-step p { font-size: 13.6px; color: var(--ink-3); margin: 0; }
.sh-step__time { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }

/* ------------------------------------------------ danh mục sản phẩm */

.sh-crumb { background: #fff; border-bottom: 1px solid var(--line); }
.sh-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 13px 0; font-size: 12.8px; color: var(--muted); }
.sh-crumb li { display: flex; gap: 8px; align-items: center; }
.sh-crumb a { color: var(--ink-3); }
.sh-crumb a:hover { color: var(--red); }
.sh-crumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

.sh-cat { display: grid; grid-template-columns: 272px minmax(0,1fr); gap: clamp(20px, 3vw, 42px); align-items: start; }
.sh-side { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 18px; }
.sh-side__box { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 18px; }
.sh-side h3 { font-size: 15px; margin-bottom: 12px; }
.sh-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-side__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: 13.8px; font-weight: 500; color: var(--ink-2);
}
.sh-side__list a:hover { background: var(--cream); color: var(--red-dark); }
.sh-side__list a[aria-current="true"] { background: var(--red); color: #fff; font-weight: 600; }
.sh-side__list a[aria-current="true"] .sh-count { color: rgba(255,255,255,.8); }
.sh-side__nest { padding-left: 12px; margin-top: 2px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sh-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-side__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }

.sh-searchbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px; background: var(--cream-3); }
.sh-searchbox input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; }
.sh-searchbox button { background: none; border: 0; cursor: pointer; display: flex; color: var(--ink-3); }

.sh-cat__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sh-cat__count { font-size: 13.5px; color: var(--ink-3); }
.sh-cat__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.sh-cat__sort a { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-2); }
.sh-cat__sort a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.sh-promo { border: 1.5px solid var(--red); border-radius: var(--r-card); background: linear-gradient(150deg, #fff, var(--cream)); padding: 18px; }
.sh-promo h4 { font-family: var(--f-head); font-size: 16px; margin: 0 0 5px; }
.sh-promo p { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }

.sh-side__toggle { display: none; }

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

.sh-pd { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.sh-pd__shot { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 18px; }
.sh-pd__shot img { max-height: 100%; width: auto; object-fit: contain; transition: opacity .2s ease; }
.sh-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 12px; }
.sh-thumbs button {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 5px;
  aspect-ratio: 1; cursor: pointer; display: grid; place-items: center; overflow: hidden;
  transition: border-color var(--t);
}
.sh-thumbs button:hover { border-color: var(--muted-2); }
.sh-thumbs button[aria-current="true"] { border-color: var(--red); border-width: 2px; }
.sh-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sh-pd__badges { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.sh-pd__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.sh-pd__price b { font-family: var(--f-head); font-size: clamp(21px, 2vw, 28px); color: var(--red-dark); font-weight: 700; }
.sh-pd__price small { font-size: 12.5px; color: var(--muted); }

.sh-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.sh-spec { border: 1px solid var(--line); border-radius: 12px; background: var(--cream-3); padding: 13px 15px; display: flex; gap: 11px; align-items: center; }
.sh-spec .sh-i { color: var(--red); }
.sh-spec__l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sh-spec__v { font-size: 14px; font-weight: 600; color: var(--ink); }

.sh-acc { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.sh-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none;
}
.sh-acc > summary::-webkit-details-marker { display: none; }
.sh-acc > summary .sh-i { transition: transform var(--t); color: var(--red); }
.sh-acc[open] > summary .sh-i { transform: rotate(45deg); }
.sh-acc__body { padding: 0 16px 16px; }
.sh-acc__body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.sh-acc__body li { font-size: 13.8px; line-height: 1.68; color: var(--ink-2); }
.sh-acc__body p { font-size: 13.8px; line-height: 1.7; color: var(--ink-2); }

.sh-quote { border: 1.5px solid var(--red); border-radius: var(--r-card); background: linear-gradient(160deg, #fff, var(--cream)); padding: clamp(18px, 2vw, 26px); margin-top: 22px; box-shadow: var(--sh-red); }
.sh-quote h3 { font-size: 18px; margin-bottom: 4px; }
.sh-quote__note { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.sh-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sh-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sh-field input, .sh-field select, .sh-field textarea {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink); width: 100%;
}
.sh-field input:focus, .sh-field select:focus, .sh-field textarea:focus { border-color: var(--red); outline: none; }
.sh-field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sh-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-needs label {
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 13px; cursor: pointer; background: #fff; transition: all var(--t);
}
.sh-needs input { position: absolute; opacity: 0; pointer-events: none; }
.sh-needs input:checked + span { color: #fff; }
.sh-needs label:has(input:checked) { background: var(--red); border-color: var(--red); color: #fff; }
.sh-formnote { font-size: 11.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }

.sh-contactrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sh-assure { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sh-assure li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-2); align-items: center; }
.sh-assure .sh-i { color: var(--red); }

.sh-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: rgba(255,253,249,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(36,28,24,.08);
  transform: translateY(100%); transition: transform .3s ease;
}
.sh-sticky[data-on="true"] { transform: translateY(0); }
.sh-sticky__in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--pad); display: flex; align-items: center; gap: 14px; }
.sh-sticky img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.sh-sticky__t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.sh-sticky__s { font-size: 11.5px; color: var(--muted); }
.sh-sticky .sh-btn { margin-left: auto; }

/* ------------------------------------------------------------- tin tức */

.sh-news { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 40px); }
.sh-news__sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.sh-ncard { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.sh-ncard:hover { border-color: var(--red); box-shadow: var(--sh-card); transform: translateY(-2px); }
.sh-ncard__img { aspect-ratio: 16/10; background: var(--cream-2); overflow: hidden; }
.sh-ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sh-ncard:hover .sh-ncard__img img { transform: scale(1.04); }
.sh-ncard__body { padding: clamp(14px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sh-ncard__meta { display: flex; gap: 10px; align-items: center; font-size: 11.5px; color: var(--muted); }
.sh-ncard h3 { margin: 0; font-size: 16.5px; }
.sh-ncard p { font-size: 13.4px; color: var(--ink-3); margin: 0; }
.sh-ncard__foot { margin-top: auto; }
.sh-ncard--lead .sh-ncard__img { aspect-ratio: 4/3.1; }
.sh-ncard--lead h3 { font-size: clamp(20px, 2.2vw, 30px); }
.sh-ncard--lead .sh-ncard__body { padding: clamp(18px, 2vw, 28px); gap: 11px; }
.sh-tag--new { background: var(--red); color: #fff; padding: 4px 11px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-chips a { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ink-2); background: #fff; }
.sh-chips a[aria-current="true"] { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }

.sh-pager { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 42px); }
.sh-pager a, .sh-pager span { min-width: 40px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.sh-pager .current { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }

/* bài viết đơn */
.sh-article { max-width: 76ch; margin-inline: auto; }
.sh-article__meta { display: flex; gap: 12px; align-items: center; font-size: 12.8px; color: var(--muted); margin-bottom: 14px; }
.sh-article__hero { border-radius: var(--r-card); overflow: hidden; margin: 20px 0 26px; aspect-ratio: 16/9; background: var(--cream-2); }
.sh-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.sh-prose > * + * { margin-top: 1.05em; }
.sh-prose h2 { font-size: clamp(21px, 2vw, 28px); margin-top: 1.6em; }
.sh-prose h3 { font-size: clamp(17px, 1.6vw, 21px); margin-top: 1.4em; }
.sh-prose img { border-radius: var(--r-img); }
.sh-prose ul, .sh-prose ol { padding-left: 22px; }
.sh-prose li + li { margin-top: .4em; }
.sh-prose blockquote { border-left: 3px solid var(--red); margin: 0; padding-left: 18px; color: var(--ink-2); font-style: italic; }
.sh-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.sh-gallery a { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 1; display: block; background: var(--cream-2); }
.sh-gallery img { width: 100%; height: 100%; object-fit: cover; }
.sh-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.sh-tags a { font-size: 12.5px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--cream); border: 1px solid var(--line); color: var(--ink-2); }
.sh-postnav { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------ trang liên hệ */

.sh-ct { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.sh-info { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: clamp(20px, 2.2vw, 30px); }
.sh-info__row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sh-info__row:last-child { border-bottom: 0; }
.sh-info__ico { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); color: var(--red); display: grid; place-items: center; flex: 0 0 auto; }
.sh-info__l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sh-info__v { font-size: 14.2px; color: var(--ink); line-height: 1.6; }
.sh-intl { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--cream-3); padding: clamp(18px, 2vw, 26px); }
.sh-intl__list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sh-intl__list a { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; font-size: 13.8px; color: var(--ink); }
.sh-intl__list a:hover { border-color: var(--red); color: var(--red-dark); }
.sh-mapembed { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21/9; background: var(--cream-2); margin-top: clamp(26px, 3vw, 44px); }
.sh-mapembed iframe { width: 100%; height: 100%; border: 0; display: block; }

.sh-formcard { border: 1px solid var(--line); border-top: 6px solid var(--red); border-radius: var(--r-card); background: #fff; padding: clamp(22px, 2.6vw, 38px); box-shadow: var(--sh-card); }

.sh-notice { border-radius: 12px; padding: 14px 16px; font-size: 13.8px; margin-bottom: 16px; }
.sh-notice--warn { background: #FFF6E8; border: 1px solid #F0DCBA; color: #6B4A12; }
.sh-notice--ok { background: #EEF9F0; border: 1px solid #CBE7D2; color: #1E5B2C; }

/* --------------------------------------------------- newsletter + footer */

.sh-nl { background: var(--cream); border-top: 1px solid var(--line-2); text-align: center; }
.sh-nl h2 { font-size: clamp(21px, 2.2vw, 30px); }
.sh-nl p { color: var(--ink-3); max-width: 62ch; margin-inline: auto; font-size: 14.2px; }
.sh-nl__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sh-nl__form input { border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 13px 20px; font: inherit; font-size: 14px; min-width: min(320px, 100%); background: #fff; }
.sh-nl__form input:focus { border-color: var(--red); outline: none; }

.sh-footer { background: var(--bg); border-top: 1px solid var(--line-2); }
.sh-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: clamp(20px, 3vw, 44px); padding-block: clamp(34px, 4vw, 62px); }
.sh-footer h4 { font-family: var(--f-body); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.sh-footer__brand img { height: 38px; width: auto; }
.sh-footer__slogan { font-family: var(--f-head); font-style: italic; color: var(--red-dark); font-size: 15px; margin: 12px 0 10px; }
.sh-footer__about { font-size: 13.4px; color: var(--ink-3); line-height: 1.7; }
.sh-footer__addr { font-size: 13px; color: var(--ink-3); display: flex; gap: 9px; margin-top: 12px; }
.sh-footer__addr .sh-i { color: var(--red); flex: 0 0 auto; margin-top: 2px; }
.sh-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sh-footer ul a { font-size: 13.6px; color: var(--ink-2); }
.sh-footer ul a:hover { color: var(--red); }
.sh-footer__contact li { display: flex; gap: 9px; align-items: center; font-size: 13.8px; }
.sh-footer__contact .sh-i { color: var(--red); }
.sh-socials { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.sh-socials a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #fff; }
.sh-socials a:hover { border-color: var(--red); color: var(--red); }
.sh-footer__bottom { border-top: 1px solid var(--line); padding-block: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.6px; color: var(--muted); }
.sh-footer__bottom nav { display: flex; gap: 16px; }
/* Dòng ghi công đơn vị làm website. Cố ý mờ và nhỏ ngang phần bản quyền: nó là dòng
   ghi công, không phải quảng cáo. Gạch chân chỉ hiện khi rê chuột để không kéo mắt
   khỏi các link pháp lý bên cạnh. */
.sh-credit { opacity: .72; }
.sh-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.sh-credit a:hover, .sh-credit a:focus-visible { color: var(--red); border-bottom-color: currentColor; }

/* --------------------------------------------------------- hiệu ứng */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal][data-in="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}
/* Không để nội dung phụ thuộc JS: nếu JS không chạy, mọi thứ vẫn hiện. */
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .sh-why { grid-template-columns: repeat(2, 1fr); }
  .sh-certs { grid-template-columns: repeat(3, 1fr); }
  .sh-hsearch { display: none; }
}

@media (max-width: 980px) {
  .sh-nav, .sh-head__right .sh-head__cta { display: none; }
  .sh-burger { display: flex; }
  .sh-hero__grid { grid-template-columns: 1fr; }
  .sh-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .sh-stat { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .sh-map-band__grid { grid-template-columns: 1fr; }
  .sh-pgrid--3, .sh-pgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .sh-about__grid, .sh-tech, .sh-pd, .sh-ct, .sh-news { grid-template-columns: 1fr; }
  .sh-vm, .sh-values, .sh-svc, .sh-flow { grid-template-columns: 1fr; }
  .sh-step::after { display: none; }
  .sh-cat { grid-template-columns: 1fr; }
  .sh-side { position: static; }
  .sh-side__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 15px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .sh-side__panel[hidden] { display: none; }
  .sh-tl__axis, .sh-tl__fill { left: 7px; }
  .sh-tl__row { grid-template-columns: 15px 1fr; gap: 16px; padding-block: 14px; }
  .sh-tl__row:nth-child(odd) .sh-tl__card,
  .sh-tl__row:nth-child(even) .sh-tl__card { grid-column: 2; text-align: left; }
  .sh-tl__dot { grid-column: 1; justify-self: start; }
  .sh-news__sub { grid-template-columns: 1fr; }
  .sh-gallery { grid-template-columns: repeat(2, 1fr); }
  .sh-footer__grid { grid-template-columns: 1fr 1fr; }
  .sh-field--2 { grid-template-columns: 1fr; }
  .sh-specs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .sh-certs { grid-template-columns: repeat(2, 1fr); }
  .sh-pgrid--2, .sh-pgrid--3, .sh-pgrid--4 { grid-template-columns: 1fr; }
  .sh-pgrid--2 { max-width: 340px; margin-inline: auto; }
  .sh-thumbs { grid-template-columns: repeat(4, 1fr); }
  .sh-footer__grid { grid-template-columns: 1fr; }
  .sh-gallery { grid-template-columns: 1fr; }
  .sh-sticky__t { font-size: 13px; }
  .sh-sticky .sh-btn { padding: 10px 16px; font-size: 13px; }
}

/* Bảng, biểu đồ, khối code trong nội dung: cho phép cuộn ngang riêng,
   nhưng thân trang thì không bao giờ cuộn ngang. */
.sh-prose table { width: 100%; border-collapse: collapse; font-size: 13.8px; }
.sh-prose table th, .sh-prose table td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; }
.sh-prose :where(table, pre) { display: block; overflow-x: auto; max-width: 100%; }

@media print {
  .sh-header, .sh-footer, .sh-nl, .sh-sticky, .sh-mob { display: none !important; }
  body { background: #fff; }
}

/* ================================================================
   Hạt bung khi đổi slide hero (BURST trong bộ thiết kế)
   ================================================================ */

.sh-burst { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sh-burst i { position: absolute; left: 50%; top: 50%; border-radius: 50%; display: block; opacity: 0; will-change: transform, opacity; }

/* ================================================================
   Hũ đậu đầy dần theo % cuộn trang — cố định góc trái dưới
   Số liệu lấy nguyên từ bộ thiết kế, đừng chỉnh cảm tính.
   ================================================================ */

@keyframes sh-drop {
	0%   { transform: translateY(0) scale(.9); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translateY(30px) scale(1); opacity: 0; }
}

.sh-jar {
	position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px);
	z-index: 80; display: flex; align-items: flex-end; gap: 10px;
	pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.sh-jar[data-on="true"] { opacity: 1; }

.sh-jar__box { position: relative; width: 62px; height: 92px; flex: 0 0 auto; }

.sh-jar__drop { position: absolute; top: -18px; border-radius: 50%; animation: sh-drop 1.5s ease-in infinite; transition: opacity .4s ease; }
.sh-jar__drop--1 { left: 24px; width: 11px; height: 8px; background: #C98A4B; }
.sh-jar__drop--2 { left: 38px; width: 9px;  height: 7px; background: #B87C42; animation-delay: .5s; }
.sh-jar__drop--3 { left: 50px; width: 10px; height: 7px; background: #D89C5C; animation-delay: 1s; }
.sh-jar[data-drops="off"] .sh-jar__drop { opacity: 0; }

.sh-jar__lid {
	position: absolute; top: 0; left: 8px; right: 8px; height: 12px;
	border-radius: 5px 5px 3px 3px; background: linear-gradient(#F8D062, #DFA52A);
	box-shadow: 0 2px 6px rgba(36,28,24,.25);
}

.sh-jar__glass {
	position: absolute; top: 10px; left: 0; right: 0; bottom: 0;
	border-radius: 8px 8px 12px 12px;
	background: linear-gradient(105deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
	border: 1.5px solid rgba(36,28,24,.16);
	box-shadow: 0 12px 28px rgba(36,28,24,.22);
	overflow: hidden;
}

.sh-jar__fill {
	position: absolute; left: 0; right: 0; bottom: 0; height: 5%;
	background-color: #C4864A;
	background-image:
		radial-gradient(circle at 5px 5px, #E7B478 0 3.4px, rgba(0,0,0,0) 3.6px),
		radial-gradient(circle at 11px 11px, #D89C5C 0 3px, rgba(0,0,0,0) 3.2px);
	background-size: 12px 12px, 12px 12px;
	transition: height .28s ease-out;
}

.sh-jar__label { position: absolute; left: 5px; right: 5px; top: 52%; transform: translateY(-50%); opacity: 0; transition: opacity .5s ease; }
.sh-jar[data-label="on"] .sh-jar__label { opacity: 1; }
.sh-jar__label > span { display: block; background: #fff; border-radius: 4px; padding: 5px 3px; box-shadow: 0 3px 10px rgba(36,28,24,.28); }
.sh-jar__label img { width: 100%; height: auto; display: block; }

.sh-jar__shine { position: absolute; top: 0; bottom: 0; left: 9px; width: 7px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.15)); border-radius: 999px; }

.sh-jar__cap {
	margin: 0 0 6px; background: rgba(36,28,24,.92); color: #fff;
	padding: 8px 13px; border-radius: 999px; font-size: 11px; font-weight: 600;
	white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
	opacity: 0; transition: opacity .45s ease;
}
.sh-jar[data-cap="on"] .sh-jar__cap { opacity: 1; }

/* Lệch có chủ ý so với bộ thiết kế: dưới 700px ẩn hũ, vì thanh CTA dính đáy
   trên mobile của theme này nằm đúng chỗ đó — để cả hai sẽ chồng lên nhau. */
@media (max-width: 700px) { .sh-jar { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.sh-jar__drop { animation: none; }
	.sh-jar__fill { transition: none; }
	.sh-burst { display: none; }
}

/* ================================================================
   Sản phẩm nội địa: lưới thẻ + dải ảnh chạy ngang  (dựng 13/09/2026)
   ================================================================ */

/* Lưới thẻ: repeat(auto-fit, minmax(min(100%,200px),1fr)) đúng bộ thiết kế —
   5 thẻ trên desktop, tự xuống hàng, không cần media query riêng. */
.sh-pgrid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}

/* Dải ảnh chạy ngang. Số liệu lấy nguyên từ bộ thiết kế:
   chu kỳ 34s tuyến tính vô hạn, khoảng cách clamp(28px,4vw,64px),
   ô clamp(74px,7vw,104px) × clamp(104px,10vw,148px), mờ 0.6 → 1 khi rê chuột,
   hai mép mờ dần bằng mask 8%/92%. Dùng chung @keyframes sh-marquee đã có. */
.sh-strip {
  margin-top: clamp(26px, 3vw, 44px);
  overflow: hidden; position: relative; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sh-strip__track {
  display: flex; align-items: flex-end; width: max-content;
  gap: clamp(28px, 4vw, 64px);
  animation: sh-marquee 34s linear infinite;
}
.sh-strip:hover .sh-strip__track,
.sh-strip:focus-within .sh-strip__track { animation-play-state: paused; }
.sh-strip__item {
  flex: 0 0 auto; display: block;
  width: clamp(74px, 7vw, 104px); height: clamp(104px, 10vw, 148px);
  opacity: .6; transition: opacity .3s ease, transform .3s ease;
}
.sh-strip__item:hover, .sh-strip__item:focus-visible { opacity: 1; transform: translateY(-6px); }
.sh-strip__item img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

@media (prefers-reduced-motion: reduce) {
  .sh-strip { overflow-x: auto; }
  .sh-strip__track { animation: none; }
}