/* ============================================================
   hass.vn — Design System (Apple-like, CSS thuần)
   Dark mặc định + Light. Không xanh dương cho UI chính.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand HASS */
  --green:  #1f8b4c;
  --purple: #a386ff;
  --yellow: #facc15;

  /* ╔══════════════════════════════════════════════════════════════════╗
     ║  MÀU NHẤN CỦA TOÀN SITE — SỬA Ở ĐÂY LÀ ĐỔI HẾT MỌI TRANG        ║
     ║  Lấy đúng vàng trong logo HASS_logo_yellow.png.                  ║
     ║  --accent   : chữ nhấn — eyebrow, link, hover, viền focus…       ║
     ║  --accent-2 : sắc đậm hơn, chỉ dùng cho gradient số liệu lớn.    ║
     ║  Không trang HTML nào ghi mã màu; tất cả gọi var(--accent).      ║
     ╚══════════════════════════════════════════════════════════════════╝ */
  --accent:   #ffcc60;
  --accent-2: #e0a020;

  /* Dark (mặc định) */
  --bg:     #0f0f10;
  --card:   #151516;
  --text:   #f5f5f5;
  --muted:  #bfbfbf;
  --line:   #2a2a2b;
  --logo-filter: brightness(0) invert(1);   /* logo đối tác nền tối */

  /* Type scale — Apple-ish, co giãn theo màn hình */
  /* Hạ từ (6vw+1rem, tối đa 5rem) xuống một nhịp: dòng "Nhà máy gạch AAC" dài
     16 ký tự, cỡ cũ đẩy chữ "AAC" chạy tới 61% chiều ngang — đúng vào tấm ALC
     trên vai người công nhân trong ảnh hero. Sửa 30/07/2026. */
  --step-hero: clamp(2.15rem, 5.2vw + .7rem, 4.4rem);
  --step-h2:   clamp(1.8rem, 3.5vw + .5rem, 3rem);
  --step-h3:   clamp(1.3rem, 1.5vw + .5rem, 1.6rem);
  --step-body: clamp(1rem, .3vw + .95rem, 1.15rem);
  --step-lead: clamp(1.15rem, 1vw + 1rem, 1.4rem);
  --step-stat: clamp(3rem, 7vw, 5.5rem);

  /* Nhịp & khung */
  --maxw: 1120px;
  --gutter: clamp(1.2rem, 4vw, 3rem);
  /* Hai section liền nhau CỘNG padding của nhau, nên số ở đây luôn nhìn thấy gấp đôi.
     Cũ là clamp(4rem,10vw,8rem) → ở màn 970px ra 97px, hai section thành 194px trống.
     Nay ~48px mỗi bên → khe giữa hai section còn ~97px. Sửa 29→30/07/2026. */
  --section-y: clamp(2.6rem, 5vw, 4.5rem);
  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  HAI SỐ NÀY LÀ TOÀN BỘ NHỊP DỌC CỦA WEB — SỬA Ở ĐÂY LÀ ĐỔI HẾT       ║
     ║  --section-y : khe giữa hai section (mỗi bên; hai section cộng đôi)   ║
     ║  --block-y   : nhịp BÊN TRONG một khối — dải chỉ số có đường kẻ       ║
     ║                trên/dưới, chân hero…                                  ║
     ║  Đừng viết clamp() rời cho khoảng dọc nữa: trước đây .stats tự giữ    ║
     ║  padding 58px/58px nên hai trang sản phẩm vẫn dày y như cũ kể cả sau  ║
     ║  khi đã hạ --section-y (Kay bắt được 30/07/2026).                     ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --block-y: clamp(1.4rem, 3vw, 2.4rem);
  --radius: 18px;
  /* Chiều cao thật của header — main.js đo lại và ghi đè lên :root khi tải trang.
     Giá trị này chỉ để lần vẽ đầu không nhảy. Hero luồn lên dưới header bằng nó. */
  --header-h: 66px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          "Helvetica Neue", system-ui, "Noto Sans", sans-serif;
}

:root[data-theme="light"] {
  --bg:    #ffffff;
  --card:  #f5f5f7;
  --text:  #111113;
  --muted: #565659;
  --line:  #e2e2e6;
  --logo-filter: grayscale(1) opacity(.62);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:    #ffffff;
    --card:  #f5f5f7;
    --text:  #111113;
    --muted: #565659;
    --line:  #e2e2e6;
    --logo-filter: grayscale(1) opacity(.62);
  }
}

/* ---------- Reset nhẹ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* Nhảy tới #san-pham, #lien-he… mà không bị header dính đè lên tiêu đề */
section[id], :target { scroll-margin-top: calc(var(--header-h) + 14px); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  color: var(--accent); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .8rem; margin: 0 0 .6rem;
}
.section h2 { font-size: var(--step-h2); margin: 0; max-width: 22ch; }
.section-head p.sub { color: var(--muted); max-width: 56ch; margin: 1rem 0 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .8rem var(--gutter);
  padding-top: calc(env(safe-area-inset-top) + .8rem);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform .3s ease, opacity .3s ease,
              background .3s ease, border-color .3s ease;
}
/* Cuộn xuống thì header trượt lên trốn đi, cuộn lên thì hiện lại (main.js gắn .hide).
   Giống hành vi header của hass.vn bản WordPress. */
.site-header.hide { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Trang có hero: header nằm ĐÈ lên ảnh hero, nền chỉ là một vệt tối mờ dần.
   Chỉ số/chữ trong header phải tự sáng vì phía dưới là ảnh, không phải --bg.
   Khi đã cuộn qua hero (main.js gắn .scrolled) thì trả về nền đục như mọi trang. */
.site-header.over-hero:not(.scrolled) {
  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.over-hero:not(.scrolled) .nav a { color: rgba(255,255,255,.85); }
.site-header.over-hero:not(.scrolled) .nav a:hover { color: #fff; }
.site-header.over-hero:not(.scrolled) .theme-toggle,
.site-header.over-hero:not(.scrolled) .nav-toggle {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; }
/* Logo giữ nguyên màu vàng HASS ở CẢ hai theme — Kay chốt 29/07/2026 */
.brand img { height: 22px; width: auto; object-fit: contain; display: block; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a { color: var(--muted); font-size: .95rem; transition: color .2s; }
.nav a:hover { color: var(--text); }
.nav-toggle { display: none; }
.theme-toggle {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.05rem;
  flex: none;
}
/* Dưới 820px: link xếp thành bảng thả xuống, mở bằng nút ☰.
   Trước đây chỉ `display:none` — điện thoại không có đường nào để đi tiếp. */
@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; cursor: pointer;
    border: 1px solid var(--line); background: var(--card); color: var(--text);
    border-radius: 12px; font-size: 1.1rem;
  }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .4rem var(--gutter) 1rem;
    background: var(--bg);              /* đục hẳn — nền mờ để chữ trang dưới lòi lên */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: .95rem .2rem; font-size: 1.05rem; color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: 0; }

  /* ⚠ Link trong bảng thả xuống PHẢI lấy màu chữ của theme, không lấy màu trắng
     của header-đè-hero: bảng này có nền đục var(--bg), ở light mode là màu trắng
     nên chữ trắng thành vô hình (Kay báo 30/07/2026 — menu mở ra trống trơn,
     cuộn xuống vài dòng mới thấy chữ vì lúc đó header đã có .scrolled). */
  .site-header.over-hero:not(.scrolled) .nav-links a { color: var(--text); }
  .site-header.over-hero:not(.scrolled) .nav-links a:hover { color: var(--accent); }

  /* Menu mở thì header đục luôn, kẻo vệt gradient đen nối vào bảng trắng nhìn cắt khúc */
  .site-header.nav-open,
  .site-header.over-hero.nav-open:not(.scrolled) {
    background: var(--bg);
    border-bottom-color: var(--line);
  }
  .site-header.over-hero.nav-open:not(.scrolled) .nav-toggle,
  .site-header.over-hero.nav-open:not(.scrolled) .theme-toggle {
    background: var(--card); border-color: var(--line); color: var(--text);
  }
}

/* ---------- Hero full-bleed ---------- */
.hero {
  position: relative; min-height: min(88vh, 760px);
  display: grid; align-items: end;
  padding-block: clamp(3rem, 12vh, 7rem);
  isolation: isolate;
}
/* Kéo hero lên nằm dưới header trong suốt: ảnh chạy tới sát đỉnh màn hình,
   đồng thời chừa lại đúng chiều cao header ở phần padding để chữ không bị che. */
.hero.under-header {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3rem, 12vh, 7rem));
}
/* Chân hero theo nhịp chung, không theo 12vh: 12vh ở màn 900 ra 108px, cộng với
   nhịp trên của khối video thành khe 142px — lệch hẳn khỏi nhịp 98px của cả web. */
.hero { padding-bottom: var(--section-y); }
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Hai lớp phủ, không phải một:
   - lớp NGANG làm tối nửa trái nơi đặt chữ, tan hết trước khi tới người công nhân
     bên phải (chữ cũ nằm đè lên mũ và tấm ALC, cùng sáng nên đọc bị rối);
   - lớp DỌC lo phần đỉnh (dưới header) và chân hero (chỗ dải chỉ số). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.68) 0%, rgba(0,0,0,.56) 30%, rgba(0,0,0,.34) 52%,
      rgba(0,0,0,.14) 70%, rgba(0,0,0,0) 90%),
    linear-gradient(180deg,
      rgba(0,0,0,.45) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.76) 100%);
}
/* Cửa sổ càng hẹp, khối chữ càng chiếm nhiều phần ngang của ảnh → phủ đậm hơn */
@media (max-width: 1100px) {
  .hero::after {
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.74) 0%, rgba(0,0,0,.64) 34%, rgba(0,0,0,.46) 58%,
        rgba(0,0,0,.24) 78%, rgba(0,0,0,.06) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.45) 0%, rgba(0,0,0,.16) 38%, rgba(0,0,0,.78) 100%);
  }
}
.hero .wrap { color: #fff; }
.hero h1 {
  font-size: var(--step-hero); font-weight: 700; color: #fff;
  /* Chặn dòng chữ trước khi nó chạy sang vùng có người trong ảnh */
  max-width: 17ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 26px rgba(0,0,0,.5);
}
.hero h1 .thin { display: block; font-weight: 300; color: rgba(255,255,255,.9); }
.hero .tagline {
  font-size: var(--step-lead); color: rgba(255,255,255,.92);
  max-width: 34ch; margin: 1.2rem 0 2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 14px rgba(0,0,0,.5);
}
.hero .cta { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Chỉ số nằm trong hero: nền là ảnh chứ không phải màu nền trang, nên đường kẻ
   và chữ phụ phải dùng màu trắng trong suốt, không dùng --line/--muted.
   LUÔN 3 cột kể cả điện thoại — dải này chỉ 3 con số ngắn; để nó xếp dọc thì
   hero cao thêm gần 300px và hở hai bên trái phải (lỗi Kay báo 30/07/2026). */
.hero .stats {
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
  margin-top: var(--block-y);
  padding-block: var(--block-y);
  border-block-color: rgba(255,255,255,.25);
  gap: clamp(.7rem, 2.5vw, 2.5rem);
}
.hero .stat b {
  font-size: clamp(1.7rem, 4.6vw, 3.4rem);
  /* số vàng có lúc rơi đúng vào mảng áo vàng của công nhân trong ảnh nền —
     đổ bóng để không chìm, vì không kiểm soát được ảnh nằm dưới */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
.hero .stat span {
  color: rgba(255,255,255,.9);
  font-size: clamp(.76rem, 1.1vw + .5rem, .95rem);
  margin-top: .35rem; line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  color: #fff; background: var(--green); border: 1px solid transparent;
  transition: transform .15s ease, filter .2s ease;
  min-height: 48px;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn.ghost:hover { background: rgba(255,255,255,.2); }
.btn.outline { background: transparent; color: var(--text); border-color: var(--line); }
.link-more { color: var(--accent); font-weight: 600; }
.link-more:hover { text-decoration: underline; }

/* ---------- Dải chỉ số ---------- */
.stats {
  display: grid; gap: clamp(1rem, 3vw, 2.2rem);
  grid-template-columns: 1fr;
  border-block: 1px solid var(--line);
  padding-block: var(--block-y);       /* trước: 58px/58px viết cứng → dày 116px */
  text-align: center;
}
/* 560px chứ không phải 720px: cửa sổ rộng ~700px vẫn còn dư chỗ cho 3 cột,
   để 720 thì đúng dải đó bị xếp dọc và hở hai bên. */
@media (min-width: 560px) { .stats { grid-template-columns: repeat(3, 1fr); text-align: left; } }
.stat b {
  display: block; font-size: var(--step-stat); font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; color: var(--muted); margin-top: .6rem; font-size: 1rem; }

/* ---------- Grid chung ---------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 819px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* Riêng lưới sản phẩm (đúng 3 ô) giữ 3 cột ở dải iPad dọc — 2 cột thì ô thứ 3
     đứng lẻ nửa hàng. Chỉ nhắm khối chứa .product, không đụng lưới blog/dự án.
     Trình duyệt không hiểu :has() thì rơi về 2 cột như trên, không vỡ. */
  .grid.cols-3:has(> .product) { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Rail cuộn ngang (Lợi ích, Dự án, Cảm nhận, Blog ở trang chủ) ----------
   Mục tiêu: mỗi section vừa MỘT màn hình. Cuộn DỌC là để sang section khác;
   nội dung còn lại của section thì vuốt NGANG (điện thoại) hoặc bấm chấm dotnav
   (chuột). Vì vậy rail tuyệt đối không được xuống hàng: grid-auto-flow: column
   xếp tất cả thẻ trên đúng một hàng, tràn thì cuộn — không bao giờ cao lên. */
.rail {
  --rail-gap: clamp(1rem, 2.5vw, 1.6rem);
  display: grid;
  grid-auto-flow: column;
  /* Điện thoại: 1 thẻ + hé mép thẻ kế tiếp — tín hiệu "còn nữa, vuốt đi" */
  grid-auto-columns: min(78vw, 340px);
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* vuốt hết rail không kéo lùi cả trang */
  scroll-snap-type: x mandatory;
  /* Tràn qua gutter của .wrap: thẻ đầu vẫn thẳng hàng với tiêu đề section,
     nhưng thẻ đang trượt thì chạy sát mép khung thay vì bị cắt cụt tại gutter */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* thanh cuộn ngang nhìn thô — đã có dotnav */
}
.rail::-webkit-scrollbar { display: none; }
/* margin:0 vì figure (thẻ dự án) mang margin mặc định 1em/40px của trình duyệt */
.rail > * { scroll-snap-align: start; margin: 0; }
/* Từ 820px: đúng 3 thẻ một khung nhìn, thẻ thứ 4 trở đi nằm chờ bên phải */
@media (min-width: 820px) {
  .rail { grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3); }
}
/* Dotnav do main.js gắn sau mỗi rail: mỗi chấm một trang, bấm chấm là trượt tới
   trang đó, chấm hiện tại phình dài thành viên thuốc. Học theo dotnav của gallery
   trang iPhone 17 Pro (apple.com/vn/iphone-17-pro, Kay chỉ 01/08/2026) — số đo
   lấy từ CSS thật của Apple: chấm 8px, khe 16px, current rộng 48px (32px mobile),
   độ mờ 36%/48%/80%, nền pill bo 28px có blur. Khác một chỗ: màu theo var(--text)
   để tự ăn cả dark lẫn light, không viết cứng trắng/đen như Apple (họ có theme
   riêng từng section, mình thì đổi theme cả trang). */
.rail-dots {
  display: flex; align-items: center; justify-content: center;
  width: max-content; margin: clamp(1.2rem, 2.5vw, 1.8rem) auto 0;
  padding: 8px 12px; border-radius: 28px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rail-dots[hidden] { display: none; }
.rail-dots button {
  width: 8px; height: 8px; flex: none;
  margin-inline: 8px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--text) 36%, transparent);
  position: relative;
  transition: width .35s cubic-bezier(.3,.8,.4,1), background-color .25s ease;
}
/* Vùng bấm nới ra 24×24 quanh chấm 8px — đúng mẹo ::before của Apple */
.rail-dots button::before { content: ""; position: absolute; inset: -8px; }
.rail-dots button:hover { background: color-mix(in srgb, var(--text) 48%, transparent); }
.rail-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rail-dots button[aria-current="true"] {
  width: 32px; cursor: default;
  background: color-mix(in srgb, var(--text) 80%, transparent);
}
@media (min-width: 820px) {
  .rail-dots button[aria-current="true"] { width: 48px; }
}

/* ---------- Thẻ lợi ích ---------- */
.benefit {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
/* Ảnh minh hoạ lấy từ site cũ: nền trong suốt nên ăn theo màu thẻ ở cả hai theme.
   Khung cố định để 6 ô thẳng hàng dù ảnh gốc mỗi cái một tỉ lệ. */
.benefit-img {
  width: 100%; height: 140px; object-fit: contain; object-position: center;
  margin-bottom: 1rem;
}
.benefit b { display: block; font-size: var(--step-h3); font-weight: 600; letter-spacing: -.02em; }
.benefit span { display: block; color: var(--muted); margin-top: .5rem; font-size: .98rem; }

/* ---------- Thẻ sản phẩm ---------- */
.product {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); aspect-ratio: 3 / 4;
}
.product img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1); opacity: .85;
}
.product:hover img { transform: scale(1.06); }
.product .label {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  color: #fff;
}
.product .label b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.product .label span { font-size: .9rem; opacity: .8; }

/* ---------- Trang sản phẩm ---------- */
.product-hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .product-hero { grid-template-columns: 1.05fr .95fr; } }
.product-hero h1 {
  font-size: clamp(2.4rem, 5vw + .5rem, 4rem); font-weight: 700; margin: .3rem 0 0;
}
.product-hero .lead { color: var(--muted); font-size: var(--step-lead); margin: 1.2rem 0 0; }
.product-hero .chips { margin-top: 1.8rem; }
/* Ba sản phẩm ba tỉ lệ khác hẳn nhau (gạch 0.46 rất dọc, bao vữa 1.75 rất ngang).
   Ảnh đã được dựng sẵn trong khung vuông nền trắng nên ở đây chỉ cần ép 1:1 —
   cả ba trang có chung một khung, không cái nào to nhỏ hơn cái nào. */
.product-hero img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); margin-inline: auto;
}

/* ---------- Cụm ảnh sản phẩm (ảnh lớn + hàng ảnh nhỏ) ----------
   Ảnh chụp studio của HASS (2022), cả bộ vuông 1:1 và cùng nền be nên xếp
   cạnh nhau không lệch khung, không lệch tông. Bấm ảnh nhỏ thì đổi ảnh lớn —
   main.js lo phần đó; không có JS thì vẫn thấy đủ ảnh, chỉ là bấm không đổi. */
.product-shots { display: grid; gap: .8rem; }
.product-shots .shot-main {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card);          /* không dùng #fff: ảnh nền be, trắng sẽ loé lúc đang tải */
  margin-inline: auto;
}
/* Dưới 900px product-hero còn 1 cột: ảnh vuông tràn hết bề rộng thì cao gần
   bằng cả màn, đẩy phần thông số xuống rất xa. Chặn theo chiều cao màn hình —
   trên điện thoại hẹp (390px) thì min() vẫn cho ảnh tràn đủ như cũ. */
@media (max-width: 899px) {
  .product-shots .shot-main { max-width: min(100%, 56vh); }
  .shot-thumbs { justify-content: center; }
}
.shot-thumbs { display: flex; flex-wrap: wrap; gap: .7rem; }
.shot-thumb {
  padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  width: clamp(62px, 8vw, 84px); aspect-ratio: 1; flex: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  transition: border-color .2s ease, transform .2s ease;
}
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }
.shot-thumb:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.shot-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot-thumb[aria-pressed="true"] { border-color: var(--accent); }

/* Ứng dụng */
.use { margin: 0; }
.use img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
}
.use figcaption {
  margin-top: .8rem; font-weight: 600; text-align: center; font-size: 1.05rem;
}
.variant-img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  background: var(--bg); border-radius: 12px; margin-bottom: 1rem;
}

/* ---------- Bảng thông số ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 2rem; }
table.spec {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: .96rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
table.spec caption {
  caption-side: top; text-align: left; padding: 0 0 .8rem;
  color: var(--muted); font-size: .9rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
table.spec th, table.spec td {
  padding: .75rem .95rem; border: 1px solid var(--line); text-align: center;
  vertical-align: middle;
}
table.spec th {
  background: var(--accent); color: #111113; font-weight: 700;
  letter-spacing: -.01em;
}
table.spec td:first-child { text-align: left; font-weight: 500; }
table.spec tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 4%, transparent); }

/* ---------- Bộ lọc dự án ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filters button {
  font: inherit; font-size: .92rem; font-weight: 600;
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line); transition: all .2s;
  min-height: 40px;
}
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--green); color: #fff; border-color: transparent; }

.project {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--card);
}
.project img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.project:hover img { transform: scale(1.05); }
.project figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.1rem;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); color: #fff;
}
.project figcaption b { display: block; font-weight: 600; }
.project figcaption span { font-size: .82rem; opacity: .75; }
.project[hidden] { display: none; }

/* Số dự án trong nút lọc */
.filters button i { font-style: normal; opacity: .55; font-size: .85em; margin-left: .15em; }

/* Huy hiệu số ảnh trên thẻ dự án */
.project .count {
  position: absolute; top: .7rem; right: .7rem;
  padding: .25rem .65rem; border-radius: 999px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  color: #fff; font-size: .75rem; font-weight: 600;
}
.project[role="button"] { cursor: zoom-in; }
.project[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.empty { color: var(--muted); text-align: center; padding-block: 3rem; }
.empty[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(0,0,0,.92); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1200px; width: 100%; }
.lightbox img {
  width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: 10px; background: #000;
}
.lightbox figcaption { color: #fff; padding-top: 1rem; max-width: 78ch; }
.lightbox figcaption b { display: block; font-size: 1.25rem; font-weight: 600; }
.lightbox figcaption span {
  display: block; color: rgba(255,255,255,.72); font-size: .93rem;
  margin-top: .4rem; line-height: 1.55;
}
.lightbox figcaption em {
  display: block; font-style: normal; color: rgba(255,255,255,.5);
  font-size: .8rem; margin-top: .6rem; letter-spacing: .04em;
}
.lightbox button {
  position: absolute; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  color: #fff; cursor: pointer; border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
}
.lightbox button:hover { background: rgba(255,255,255,.22); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.1rem; }
.lb-prev  { left: clamp(.5rem, 2vw, 2rem);  top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
body.lb-open { overflow: hidden; }

/* ---------- Dải logo ---------- */
.logos {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(5, 1fr); } }
.logos img {
  max-height: 48px; width: auto; margin-inline: auto;
  filter: var(--logo-filter); opacity: .75; transition: all .3s;
}
.logos img:hover { filter: none; opacity: 1; }
.certs img { max-height: 88px; }
/* Logo chứng nhận là PNG trắng đơn sắc — light mode phải ép về đen, kể cả khi hover,
   vì filter gốc (grayscale) không đổi được màu trắng trên nền trắng.
   `.logo` (số ít) là markup riêng của /chung-nhan/ — cùng 5 file trắng đó, phải gộp vào
   đây, nếu không cả dải tàng hình đúng trên trang mang tên "Chứng nhận" */
:root[data-theme="light"] .certs img,
:root[data-theme="light"] .logo img { filter: brightness(0) opacity(.62); }
:root[data-theme="light"] .certs img:hover,
:root[data-theme="light"] .logo img:hover { filter: brightness(0); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .certs img,
  :root:not([data-theme="dark"]) .logo img { filter: brightness(0) opacity(.62); }
  :root:not([data-theme="dark"]) .certs img:hover,
  :root:not([data-theme="dark"]) .logo img:hover { filter: brightness(0); }
}

/* ---------- /hass-vua/: thẻ sản phẩm bấm được → nhảy tới bảng của nó ---------- */
.variant-pick { cursor: pointer; transition: border-color .2s, transform .15s ease; }
.variant-pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.variant-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.variant-cta {
  display: block; margin-top: .9rem; font-style: normal;
  color: var(--accent); font-weight: 600; font-size: .88rem;
}
.spec-std { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.spec-std b { color: var(--text); }
.spec-panel[hidden] { display: none; }
/* Chỉ tiêu không đổi theo cấp cường độ: nằm ngoài tab để khỏi lặp ba lần */
.spec-more { margin-top: var(--block-y); }
.spec-more h3 { font-size: var(--step-h3); margin: 0 0 1.1rem; }
.spec-more .spec-std { margin-top: -.8rem; }

/* ---------- Logo chứng nhận bấm được → mở tài liệu ---------- */
.cert-open {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; border-radius: 10px;
}
.cert-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ---------- Cửa sổ xem tài liệu (PDF chứng nhận) ---------- */
.doc-modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: rgba(0,0,0,.92); padding: clamp(.6rem, 3vw, 2rem);
}
.doc-modal[hidden] { display: none; }
.doc-panel {
  width: 100%; max-width: 1000px; height: min(92vh, 1100px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.doc-panel > header {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); flex: none;
}
.doc-panel h3 {
  flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.35;
  color: var(--text);
}
.doc-panel iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.doc-ext, .doc-close {
  flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 600;
  padding: .5rem .95rem; min-height: 40px; display: inline-flex; align-items: center;
}
.doc-close { width: 40px; padding: 0; justify-content: center; font-size: 1rem; }
.doc-ext:hover, .doc-close:hover { border-color: var(--accent); color: var(--accent); }
/* Điện thoại (nhất là iOS) thường không nhúng được PDF — luôn chừa lối mở ngoài */
.doc-fallback {
  padding: 1.2rem 1rem; color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--line); flex: none;
}
@media (max-width: 620px) {
  /* Tên chứng nhận có số hiệu nên rất dài — cắt còn 2 dòng, kẻo đầu bảng
     nuốt mất chỗ của chính tài liệu. Tên đầy đủ vẫn nằm ở thuộc tính title. */
  .doc-panel h3 {
    font-size: .9rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .doc-ext { padding: .5rem .7rem; font-size: .8rem; }
  .doc-fallback { padding: .9rem 1rem; font-size: .85rem; }
}

/* ---------- Video giới thiệu (trang chủ) ----------
   Trước đây nhúng thẳng <iframe> YouTube: nhìn thô và tự tải player của YouTube
   ngay khi vào trang. Nay là một THẺ ẢNH của mình (facade); bấm mới đổi thành
   player và phát luôn. Đổi 30/07/2026. */
/* Khối này là <section class="wrap"> chứ không phải .section nên không có nhịp dọc —
   thẻ video dán sát chân hero. Cho nó nửa nhịp ở trên, dưới để #loi-ich lo. */
.video-intro { padding-top: clamp(1.6rem, 3.5vw, 3rem); }
.video-card {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #000; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.video-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.video-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.video-card > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.video-card:hover > img { transform: scale(1.035); filter: brightness(.92); }
/* Vệt tối ở chân thẻ để dòng chữ đọc được, không phủ kín cả ảnh */
.video-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%);
}
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(58px, 8vw, 82px); height: clamp(58px, 8vw, 82px);
  border-radius: 50%; z-index: 2;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s ease, transform .3s ease;
}
/* Tam giác play vẽ bằng border, không cần file ảnh hay icon font */
.video-play::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-style: solid; border-width: .58em 0 .58em .95em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  transform: translateX(12%);
}
.video-card:hover .video-play { background: var(--accent); transform: scale(1.07); }
.video-card:hover .video-play::before { border-left-color: #111113; }
.video-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .1rem;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem);
  text-align: left; color: #fff;
}
.video-cap b { font-size: clamp(1rem, 1.4vw + .5rem, 1.35rem); font-weight: 600; letter-spacing: -.01em; }
.video-cap span { font-size: .85rem; color: rgba(255,255,255,.78); }
/* Sau khi bấm: thẻ giữ nguyên khung, ruột đổi thành iframe */
.video-card.playing { cursor: default; }
.video-card.playing::after,
.video-card.playing .video-play,
.video-card.playing .video-cap { display: none; }
.video-card iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Hệ thống quản lý nội bộ ---------- */
/* Logo HASS SYSTEM đứng cạnh tiêu đề. Logo có nền vàng sẵn nên bo góc cho hợp thẻ,
   không đổi màu theo theme. */
.system-title { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1rem); }
.system-title img {
  width: clamp(44px, 7vw, 60px); height: auto; border-radius: 12px; flex: none;
}
.system-title h2 { margin: 0; }

/* ----- Ảnh thiết bị: laptop + điện thoại đè lên góc phải -----
   Hai ảnh rời chứ không ghép sẵn thành một: đổi riêng ảnh điện thoại (ví dụ thay
   bằng ảnh chụp từ Simulator) mà không phải dựng lại cả cụm.
   Ảnh nền trong suốt nên bóng phải dùng drop-shadow (bám hình thật của máy),
   không dùng box-shadow (bám hộp chữ nhật → lộ ra là ảnh). */
.device-stack {
  position: relative; max-width: 1000px; margin: 0 auto;
  padding-bottom: 5%;              /* chỗ cho điện thoại thò xuống dưới đáy laptop */
}
.device-laptop { width: 88%; }     /* 12% còn lại là chỗ điện thoại nhô ra */
.device-phone { position: absolute; right: 0; bottom: 0; width: 21%; }
.device-stack img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .5));
}
:root[data-theme="light"] .device-stack img {
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .2));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .device-stack img {
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .2));
  }
}

/* Đổi ảnh theo theme: mặc định dark, light thì lật lại.
   Phải viết `img.shot-*` chứ không phải `.shot-*`: `.device-stack img` ở trên cũng
   là (0,1,1) nên `display:block` của nó đè mất `.shot-light{display:none}` → hiện cả
   hai ảnh chồng nhau. Đã dính đúng lỗi này một lần. */
img.shot-light { display: none; }
:root[data-theme="light"] img.shot-dark { display: none; }
:root[data-theme="light"] img.shot-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) img.shot-dark { display: none; }
  :root:not([data-theme="dark"]) img.shot-light { display: block; }
}

/* ---------- Cảm nhận ---------- */
.quote {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: 1rem;
}
.quote p { margin: 0; color: var(--text); font-size: 1rem; }
.quote footer { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote cite { font-style: normal; font-weight: 600; font-size: .95rem; }

/* ---------- Blog ---------- */
.post { display: block; }
.post .thumb {
  overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line);
  aspect-ratio: 16 / 10; margin-bottom: .9rem;
}
.post .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.post:hover .thumb img { transform: scale(1.05); }
.post h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.post:hover h3 { color: var(--accent); }

/* ---------- Giới thiệu ---------- */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 1.05fr 1fr; } }
.about img { border-radius: var(--radius); border: 1px solid var(--line); }
.about p { color: var(--muted); }
/* Tiêu đề "HASS" dùng logo gốc thay vì gõ chữ — font hệ thống không khớp wordmark */
.about-mark { line-height: 0; }
.about-mark img {
  height: clamp(2.1rem, 3.5vw + .6rem, 3.1rem);
  width: auto;
  display: block;
  border: 0;              /* huỷ viền/bo góc của .about img */
  border-radius: 0;
}

/* ---------- Liên hệ ---------- */
.contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 820px) { .contact { grid-template-columns: repeat(3, 1fr); } }
.contact h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: .7rem; }
.contact p, .contact a { color: var(--muted); }
.contact a:hover { color: var(--text); }
.contact strong { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.chip:hover { border-color: var(--accent); }

/* ---------- Trang liên hệ + form ---------- */
.contact-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.5fr 1fr; } }

.quote {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field > span { font-size: .88rem; font-weight: 600; color: var(--muted); }
.field > span b { color: var(--yellow); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem .9rem; min-height: 46px;
  width: 100%; transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field input:user-invalid, .field select:user-invalid { border-color: #e5484d; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--green); }

.quote .btn { align-self: flex-start; }
.quote .btn:disabled { opacity: .6; cursor: progress; }

/* Bẫy spam — ẩn với người, bot vẫn thấy trong DOM */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { margin: 0; font-size: .92rem; min-height: 1.2em; }
.form-msg.ok   { color: var(--accent); font-weight: 600; }
.form-msg.err  { color: #ff6b6e; font-weight: 600; }
.form-msg.warn { color: var(--yellow); }

.contact-side { display: flex; flex-direction: column; gap: 1rem; }
.info-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
.info-card h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin: 0 0 .8rem;
}
.info-card p { margin: 0 0 .9rem; color: var(--muted); line-height: 1.6; }
.info-card p:last-of-type { margin-bottom: 0; }
.info-card strong { color: var(--text); font-size: 1.05rem; }
.info-card a:hover strong { color: var(--accent); }
.info-card .chips { margin: 0; }

/* ---------- Blog: danh sách ---------- */
.post.card { display: flex; flex-direction: column; }
.post-meta {
  color: var(--muted); font-size: .82rem; margin: 0 0 .45rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.post-meta .tag {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--text);
}
.post .excerpt {
  color: var(--muted); font-size: .92rem; line-height: 1.6; margin: .5rem 0 0;
}
.empty-thumb { background: var(--card); }

/* ---------- Blog: trang bài viết ---------- */
.article { max-width: 100%; }
.article-head { max-width: 44rem; margin-inline: auto; text-align: center; }
.article-head h1 {
  font-size: clamp(2rem, 4vw + .6rem, 3.2rem); line-height: 1.12;
  letter-spacing: -.02em; margin: .4rem 0 .9rem;
}
.article-head .eyebrow a { color: inherit; }
.article-head .eyebrow a:hover { color: var(--text); }
.article-head .post-meta { justify-content: center; }
.article-hero { margin-block: clamp(2rem, 5vw, 3.5rem); padding-inline: 0; }
.article-hero img {
  width: 100%; max-height: 62vh; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
}

/* Thân bài — cột hẹp cho dễ đọc, mọi thứ bên trong ăn theo */
.prose { max-width: 44rem; margin-inline: auto; font-size: var(--step-body); }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--muted); line-height: 1.75; }
.prose strong { color: var(--text); font-weight: 600; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--text); line-height: 1.25; letter-spacing: -.01em;
  margin-top: 2.2em; margin-bottom: .1em; scroll-margin-top: 5rem;
}
.prose h2 { font-size: clamp(1.5rem, 2vw + .7rem, 2rem); }
.prose h3 { font-size: clamp(1.25rem, 1.2vw + .8rem, 1.5rem); }
.prose h4, .prose h5, .prose h6 { font-size: 1.1rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.prose a:hover { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.35rem; color: var(--muted); }
.prose li { line-height: 1.75; margin-top: .4em; }
.prose li::marker { color: var(--green); }
.prose blockquote {
  border-left: 3px solid var(--green); padding: .2rem 0 .2rem 1.2rem;
  color: var(--text); font-size: var(--step-lead); line-height: 1.5;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose figure.ph { margin-block: 2em; }
.prose figure.ph img {
  width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line);
}
.prose figure.ph.small { text-align: center; }
.faq .prose figure.ph.small { display: inline-block; margin: .5rem 1.4rem .5rem 0; }
.faq .prose figure.ph.small img { max-width: 120px; }
.prose figure.ph.small img { width: auto; max-width: min(100%, 180px); border: 0; }
.prose figure.embed { margin-block: 2em; }
.prose figure.embed iframe, .prose figure.embed video {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); background: #000;
}
.prose figcaption {
  color: var(--muted); font-size: .85rem; text-align: center; margin-top: .7rem;
}
/* Bảng trong bài rộng hơn cột chữ — cho tràn ra hai bên rồi cuộn ngang */
.prose .table-scroll { max-width: min(100%, var(--maxw)); }
.article .chips { max-width: 44rem; margin-inline: auto; margin-top: 2.5rem; }

.cta-band {
  max-width: 44rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid; gap: 1.2rem; align-items: center;
}
@media (min-width: 720px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.cta-band p { color: var(--muted); margin: 0; font-size: .95rem; }
.cta-band .chips { margin: 0; }

/* ---------- FAQ (accordion thuần CSS, không cần JS) ---------- */
/* Trang chỉ toàn khối chữ: dùng nhịp hẹp hơn --section-y để không hở một màn hình trắng */
.section.tight { padding-block: clamp(1.2rem, 2.6vw, 2.2rem); }
.section.tight .section-head { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.faq-list { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0;
  font-size: 1.05rem; font-weight: 600; color: var(--text); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--green); line-height: 1;
}
.faq[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }
.faq .prose { margin: 0 0 1.4rem; font-size: 1rem; max-width: 100%; }
.faq .prose > :first-child { margin-top: 0; }
.faq .prose img { max-width: 220px; }

/* ---------- Danh sách tài liệu tải về ---------- */
.docs { display: grid; gap: .8rem; }
@media (min-width: 700px) { .docs { grid-template-columns: repeat(2, 1fr); } }
.doc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); min-height: 56px;
}
.doc:hover { border-color: var(--green); }
.doc b { font-weight: 600; font-size: .98rem; }
.doc span {
  font-size: .72rem; letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem; flex: none;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .product img, .project img, .post .thumb img { transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); color: var(--muted);
  padding-block: 2.5rem; font-size: .88rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
/* Số phiên bản của CHÍNH file HTML đang xem — nhìn số này là biết còn dính cache
   hay không. main.js đối chiếu với /version.json để phát hiện bản cũ. */
.site-version {
  font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem;
  opacity: .75;
}
/* Khi lệch với version.json: đổi màu để đập vào mắt, kèm số bản mới ở tooltip */
.site-version.stale {
  color: #fff; background: var(--accent-2); border-color: transparent; opacity: 1;
  cursor: pointer;
}

/* ---------- /tinh-vat-lieu/: công cụ tính nhanh vật liệu ---------- */
.calc-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .calc-layout { grid-template-columns: 1.5fr 1fr; } }

.calc-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.calc-group { display: flex; flex-direction: column; gap: .7rem; }
.calc-label { font-size: .88rem; font-weight: 600; color: var(--muted); }
.calc-form .filters { margin-bottom: 0; }
.calc-form .field-row[hidden], .calc-form .field[hidden] { display: none; }

/* Kết quả dính theo màn hình ở desktop — cuộn form vẫn thấy số đổi theo */
.calc-result {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}
@media (min-width: 900px) {
  .calc-result { position: sticky; top: calc(var(--header-h) + 14px); }
}
.calc-empty { color: var(--muted); margin: 0; font-size: .95rem; }
.kq-hero { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1rem; }
.kq-hero span { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.kq-hero b {
  font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kq-list { margin: 0; border-top: 1px solid var(--line); }
.kq-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.kq-row[hidden] { display: none; }
.kq-row dt { color: var(--muted); font-size: .92rem; }
.kq-row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* "Vữa tô" + ô chọn số mặt đứng chung một hàng cho đỡ tốn chỗ */
.check-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.check-row select {
  font: inherit; font-size: .92rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: .35rem .6rem; min-height: 36px;
}
.check-row select[hidden] { display: none; }
.calc-note { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); }
.kq-cta { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.2rem; }
.kq-cta .btn { justify-content: center; text-align: center; }
.kq-cta .chips { margin-top: 0; }

/* ---------- Cờ bản nháp ---------- */
.draft-note {
  background: color-mix(in srgb, var(--yellow) 14%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--line));
  color: var(--text); font-size: .85rem; text-align: center; padding: .6rem var(--gutter);
}