/* ==========================================================================
   Minh Hiếu Miền Nam — ngôn ngữ hình ảnh riêng cho ngành hoá chất.

   Nền mực đậm xen nền sáng, hoạ tiết lục giác (gợi cấu trúc phân tử), khối kính
   mờ trên hero, số liệu đếm, thẻ danh mục ảnh lớn, chữ thường cỡ lớn có cụm tô
   gradient. KHÔNG lấy gì từ bản Next.js (navy + condensed IN HOA + carousel +
   marquee) — hai site phải khác nhau để khách so sánh và chọn.
   ========================================================================== */

:root {
  --ink: 202 45% 9%;
  --ink-2: 201 38% 14%;
  --text: 202 25% 13%;
  --text-soft: 202 10% 42%;
  --line: 200 16% 90%;
  --paper: 0 0% 100%;
  --paper-2: 190 40% 97%;

  --teal: 184 82% 32%;
  --teal-bright: 172 76% 45%;
  --teal-dark: 187 88% 20%;
  --teal-soft: 184 55% 95%;

  --radius: 20px;
  --radius-lg: 28px;
  --shell: 82rem;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: hsl(var(--paper));
  color: hsl(var(--text));
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"], summary, label[for] { cursor: pointer; }
::selection { background: hsl(var(--teal-bright) / .25); }

/* CHỐT CHẶN: mọi icon do mh_icon() in ra đều mang class .icon và luôn có kích
   thước mặc định. SVG không khai kích thước sẽ giãn hết khung cha — đã dính
   thật một lần: CSS bản cũ còn trong cache mà HTML đã mới, icon to bằng cả màn
   hình. Các quy tắc bên dưới ghi đè khi cần. */
svg.icon { width: 1.15em; height: 1.15em; flex: none; }

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

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: hsl(var(--ink)); color: #fff; padding: .8rem 1.25rem; }
.skip-link:focus { left: 0; }

/* Hoạ tiết lục giác cho các khối tối — vẽ bằng data-uri, không thêm request. */
.hexes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 56px 64px;
}

/* ---------- Khung ---------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.5rem; }
.shell--wide { max-width: 90rem; }
.section { padding-block: 4.5rem; position: relative; }
@media (min-width: 900px) { .section { padding-block: 6.5rem; } }
.section--tint { background: hsl(var(--paper-2)); }
.section--dark { background: hsl(var(--ink)); color: #fff; position: relative; overflow: hidden; }
.section--dark .lead, .section--dark .section__head p { color: rgb(255 255 255 / .68); }
.section__hex { position: absolute; inset: 0; opacity: .8; pointer-events: none; }
.section--dark > .shell { position: relative; }

/* ---------- Chữ ---------- */

h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.028em; text-transform: none; }
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.2rem); }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em; }

p { margin: 0 0 1.1rem; }
.lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.22rem); color: hsl(var(--text-soft)); }
.muted { color: hsl(var(--text-soft)); }
.small { font-size: .875rem; }

/* Cụm chữ tô gradient — điểm nhấn chính của tiêu đề */
.grad {
  background: linear-gradient(96deg, hsl(var(--teal-bright)) 0%, hsl(190 90% 55%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad--dark { background: linear-gradient(96deg, hsl(var(--teal)) 0%, hsl(var(--teal-dark)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section__head { max-width: 46rem; margin-bottom: 2.75rem; }
.section__head p { color: hsl(var(--text-soft)); margin: 0; }
.section__head--between { max-width: none; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; }

/* ---------- Nút ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid {
  color: #fff;
  background: linear-gradient(96deg, hsl(var(--teal)) 0%, hsl(var(--teal-bright)) 100%);
  box-shadow: 0 14px 30px -14px hsl(var(--teal) / .9);
}
.btn--solid:hover { box-shadow: 0 20px 38px -14px hsl(var(--teal) / .95); }
.btn--dark { background: hsl(var(--ink)); color: #fff; }
.btn--dark:hover { background: hsl(var(--ink-2)); }
.btn--outline { border-color: hsl(var(--line)); background: #fff; }
.btn--outline:hover { border-color: hsl(var(--ink)); }
.btn--glass { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .38); backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgb(255 255 255 / .22); }
.btn--white { background: #fff; color: hsl(var(--ink)); }
.btn--sm { padding: .62rem 1.2rem; font-size: .9rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: hsl(var(--teal)); }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: hsl(var(--teal-bright)); }

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

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: hsl(var(--paper) / .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.masthead.is-stuck { border-bottom-color: hsl(var(--line)); background: hsl(var(--paper) / .95); }
.masthead .shell { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.brand__name { font-weight: 800; letter-spacing: -.035em; font-size: 1.12rem; line-height: 1.1; }
.brand__name span { color: hsl(var(--teal)); }
.brand__sub { display: block; font-size: .7rem; font-weight: 600; color: hsl(var(--text-soft)); letter-spacing: .02em; }

.nav { margin-inline: auto; }
.nav ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav a {
  display: block; padding: .55rem .8rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: hsl(var(--text-soft)); white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: hsl(var(--text)); background: hsl(var(--paper-2)); }
.nav .current-menu-item > a, .nav .current_page_item > a,
.nav .current-menu-parent > a, .nav .current-menu-ancestor > a { color: hsl(var(--teal-dark)); background: hsl(var(--teal-soft)); }

.nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: .4rem; vertical-align: middle;
  width: .36rem; height: .36rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav .sub-menu {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + .4rem);
  min-width: 17rem; background: #fff; border: 1px solid hsl(var(--line));
  border-radius: 16px; box-shadow: 0 30px 60px -30px hsl(var(--ink) / .45);
  padding: .5rem; display: none; flex-direction: column; z-index: 70;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display: flex; }
.nav .sub-menu a { font-size: .92rem; padding: .55rem .75rem; border-radius: 10px; }

.masthead__tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.masthead__phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; }
.masthead__phone svg { color: hsl(var(--teal)); }

.icon-btn {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid hsl(var(--line)); border-radius: 999px; background: #fff; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.icon-btn:hover { border-color: hsl(var(--ink)); transform: translateY(-1px); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }

.menu-toggle { display: none; }

@media (max-width: 1149px) {
  .nav, .masthead__phone, .masthead__tools .btn { display: none; }
  .menu-toggle { display: grid; }
  .masthead .shell { justify-content: space-between; }
}

/* Lớp tìm kiếm */
.search-layer { position: fixed; inset: 0; z-index: 90; display: none; background: hsl(var(--ink) / .96); padding-top: 20vh; color: #fff; }
.search-layer[open] { display: block; }
.search-layer form { display: flex; gap: .75rem; align-items: center; max-width: 44rem; margin-inline: auto; padding-inline: 1.5rem; }
.search-layer input {
  flex: 1; border: 0; border-bottom: 2px solid rgb(255 255 255 / .25); background: transparent; color: #fff;
  padding: .9rem .25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
}
.search-layer input::placeholder { color: rgb(255 255 255 / .45); }
.search-layer input:focus { outline: none; border-bottom-color: hsl(var(--teal-bright)); }
.search-layer .icon-btn { background: transparent; border-color: rgb(255 255 255 / .3); color: #fff; }
.search-layer p { text-align: center; color: rgb(255 255 255 / .5); font-size: .9rem; margin-top: 1.5rem; }

/* Panel menu mobile */
.mobile-panel { position: fixed; inset: 0; z-index: 95; display: none; }
.mobile-panel[open] { display: block; }
.mobile-panel__backdrop { position: absolute; inset: 0; background: hsl(var(--ink) / .45); border: 0; width: 100%; }
.mobile-panel__body {
  position: absolute; inset: 0 0 auto 0; background: #fff; padding: 1.25rem 1.5rem 2rem;
  border-radius: 0 0 26px 26px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mobile-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-panel > ul > li + li { border-top: 1px solid hsl(var(--line)); }
.mobile-panel a { display: block; padding: .8rem 0; font-weight: 700; font-size: 1.05rem; }
.mobile-panel .sub-menu a { padding: .45rem 0 .45rem 1rem; font-weight: 500; font-size: .95rem; color: hsl(var(--text-soft)); }

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

.hero { position: relative; background: hsl(var(--ink)); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: brightness(1.05); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 5% 0%, hsl(var(--teal-dark) / .8) 0%, transparent 55%),
    radial-gradient(85% 70% at 100% 100%, hsl(var(--teal) / .42) 0%, transparent 62%),
    linear-gradient(180deg, hsl(var(--ink) / .5) 0%, hsl(var(--ink) / .93) 100%);
}
.hero__hex { position: absolute; inset: 0; pointer-events: none; }
.hero__inner { position: relative; padding-block: 4.5rem 4rem; display: grid; gap: 3rem; }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: 1.2fr .8fr; align-items: center; padding-block: 6.5rem 5.5rem; gap: 4rem; }
}

.hero h1 { max-width: 16ch; margin-bottom: 1.4rem; }
.hero p { max-width: 48ch; color: rgb(255 255 255 / .78); font-size: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem; border-radius: 999px;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
  font-size: .82rem; font-weight: 600; color: rgb(255 255 255 / .9);
  backdrop-filter: blur(6px); margin-bottom: 1.5rem;
}
.pill .dot { width: .5rem; height: .5rem; border-radius: 999px; background: hsl(var(--teal-bright)); box-shadow: 0 0 0 4px hsl(var(--teal-bright) / .22); }

/* Khối kính: tra cứu nhanh + số liệu */
.glass {
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  padding: 1.75rem;
  box-shadow: 0 40px 80px -50px #000;
}
.glass h2 { font-size: 1.22rem; margin-bottom: .3rem; }
.glass > p { color: rgb(255 255 255 / .62); font-size: .92rem; margin: 0; }

.quick-search { display: flex; gap: .5rem; margin: 1.25rem 0 1rem; }
.quick-search input {
  flex: 1; min-width: 0; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08);
  color: #fff; border-radius: 999px; padding: .8rem 1.15rem; font-size: .95rem;
}
.quick-search input::placeholder { color: rgb(255 255 255 / .5); }
.quick-search input:focus { outline: none; border-color: hsl(var(--teal-bright)); background: rgb(255 255 255 / .14); }
.quick-search button { border: 0; border-radius: 999px; padding-inline: 1.15rem; font-weight: 700; color: #fff; background: linear-gradient(96deg, hsl(var(--teal)) 0%, hsl(var(--teal-bright)) 100%); }

.suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.suggest a {
  font-size: .82rem; padding: .35rem .75rem; border-radius: 999px;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .82);
}
.suggest a:hover { background: rgb(255 255 255 / .18); color: #fff; }

.glass__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .14); }
.glass__facts b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.glass__facts span { font-size: .75rem; color: rgb(255 255 255 / .6); line-height: 1.35; display: block; }

/* Dải ngành phục vụ nối tiếp hero */
.industries { background: hsl(var(--ink-2)); color: rgb(255 255 255 / .7); }
.industries__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; padding-block: 1.15rem; font-size: .9rem; font-weight: 600; }
.industries__row .label { color: hsl(var(--teal-bright)); }
.industries__row a:hover { color: #fff; }

/* ---------- Số liệu đếm ---------- */

.counters { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { position: relative; padding-left: 1.25rem; }
.counter::before { content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, hsl(var(--teal-bright)), hsl(var(--teal-dark))); }
.counter b {
  display: block; font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  background: linear-gradient(170deg, hsl(var(--teal)) 0%, hsl(var(--teal-dark)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.counter span { display: block; margin-top: .5rem; color: hsl(var(--text-soft)); font-size: .95rem; }

/* ---------- Khối xen kẽ ---------- */

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; } .split--flip .split__media { order: 2; } }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; filter: brightness(1.08) contrast(1.04) saturate(1.05); }
.split__badge {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  background: rgb(255 255 255 / .94); backdrop-filter: blur(8px);
  border-radius: 16px; padding: .9rem 1.15rem; box-shadow: 0 24px 40px -28px #000;
}
.split__badge b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: hsl(var(--teal-dark)); }
.split__badge span { font-size: .78rem; color: hsl(var(--text-soft)); }

.checklist { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.checklist li { display: flex; gap: .85rem; align-items: flex-start; }
.checklist .tick {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center;
  background: hsl(var(--teal-soft)); color: hsl(var(--teal-dark)); margin-top: .15rem;
}
.checklist .tick svg { width: .95rem; height: .95rem; }
.checklist strong { display: block; font-weight: 700; }
.checklist .desc { color: hsl(var(--text-soft)); font-size: .95rem; }
.section--dark .checklist .tick { background: rgb(255 255 255 / .12); color: hsl(var(--teal-bright)); }
.section--dark .checklist .desc { color: rgb(255 255 255 / .65); }

/* ---------- Thẻ danh mục ảnh lớn ---------- */

.cat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 13.5rem; display: flex; align-items: flex-end; color: #fff;
  background: hsl(var(--ink-2)); isolation: isolate;
}
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(1.05); transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, hsl(var(--ink) / .1) 0%, hsl(var(--ink) / .88) 100%);
  transition: background .3s ease;
}
.cat:hover img { transform: scale(1.07); }
.cat:hover::after { background: linear-gradient(180deg, hsl(var(--teal-dark) / .4) 0%, hsl(var(--ink) / .92) 100%); }
.cat__body { padding: 1.15rem 1.25rem; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.cat__name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.015em; display: block; }
.cat__count { font-size: .8rem; color: rgb(255 255 255 / .65); }
.cat__go { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgb(255 255 255 / .16); display: grid; place-items: center; transition: background .25s ease, transform .25s ease; }
.cat:hover .cat__go { background: hsl(var(--teal-bright)); transform: translateX(3px); }

/* ---------- Thẻ sản phẩm / bài viết ---------- */

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (min-width: 1100px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: hsl(var(--teal) / .5); box-shadow: 0 28px 50px -32px hsl(var(--ink) / .55); }
.card__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, hsl(var(--paper-2)) 0%, #fff 100%); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 1.1rem; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.card:hover .card__media img { transform: scale(1.06); }
.card__formula {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  background: hsl(var(--teal-soft)); color: hsl(var(--teal-dark));
  font-size: .74rem; font-weight: 800; padding: .28rem .6rem; border-radius: 999px;
}
.card__body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; display: block; }
.card:hover .card__title { color: hsl(var(--teal-dark)); }
.card__excerpt { font-size: .9rem; color: hsl(var(--text-soft)); margin: 0; }
.card__foot { margin-top: auto; padding-top: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card__price { font-weight: 800; font-size: .98rem; color: hsl(var(--teal-dark)); letter-spacing: -.015em; }
.card__go { font-size: .85rem; font-weight: 700; color: hsl(var(--text-soft)); display: inline-flex; align-items: center; gap: .3rem; }
.card:hover .card__go { color: hsl(var(--teal)); }
.card__date { font-size: .8rem; color: hsl(var(--text-soft)); }
.card--article .card__media { aspect-ratio: 16 / 10; }
.card--article .card__media img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.card__placeholder { display: grid; place-items: center; height: 100%; color: hsl(var(--teal) / .3); }
.card__placeholder svg { width: 2.75rem; height: 2.75rem; }

/* ---------- Quy trình ---------- */

.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.step {
  position: relative; padding: 2rem 1.5rem 1.75rem;
  border-radius: var(--radius); border: 1px solid rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .04); overflow: hidden;
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; right: .9rem; top: .1rem;
  font-size: 4.5rem; font-weight: 800; letter-spacing: -.06em;
  color: rgb(255 255 255 / .08); line-height: 1;
}
.step h3, .step p { position: relative; }
.step p { margin: 0; color: rgb(255 255 255 / .68); font-size: .95rem; }
.step__icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: hsl(var(--teal) / .25); color: hsl(var(--teal-bright)); margin-bottom: 1rem; position: relative; }
.step__icon svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Chip ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border: 1px solid hsl(var(--line)); border-radius: 999px;
  font-size: .9rem; font-weight: 600; background: #fff;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.chip:hover { border-color: hsl(var(--teal)); color: hsl(var(--teal-dark)); transform: translateY(-1px); }
.chip.is-active { background: hsl(var(--ink)); border-color: hsl(var(--ink)); color: #fff; }
.chip small { opacity: .55; font-size: .8em; }

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

.cta {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); color: #fff;
  padding: 3.25rem 2rem; text-align: center;
  background: linear-gradient(120deg, hsl(var(--teal-dark)) 0%, hsl(var(--ink)) 58%, hsl(var(--teal) / .9) 135%);
}
.cta > *:not(.cta__hex) { position: relative; }
.cta__hex { position: absolute; inset: 0; opacity: .85; }
.cta h2 { margin-bottom: .75rem; }
.cta p { color: rgb(255 255 255 / .74); max-width: 52ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
@media (min-width: 900px) { .cta { padding: 4.5rem 3rem; } }

/* ---------- Trang trong ---------- */

.page-hero { position: relative; background: hsl(var(--ink)); color: #fff; overflow: hidden; padding-block: 3rem 3.25rem; }
.page-hero__hex { position: absolute; inset: 0; opacity: .75; }
.page-hero > .shell { position: relative; }
.page-hero h1 { margin-bottom: .5rem; }
.page-hero p { color: rgb(255 255 255 / .7); margin: 0; max-width: 60ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: rgb(255 255 255 / .6); margin-bottom: 1rem; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-hidden] { opacity: .4; }

.content-narrow { max-width: 48rem; margin-inline: auto; }

.prose { font-size: 1.03rem; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { margin: 2.2rem 0 .8rem; letter-spacing: -.02em; }
.prose h2 { font-size: 1.65rem; } .prose h3 { font-size: 1.32rem; } .prose h4 { font-size: 1.12rem; }
.prose a { color: hsl(var(--teal-dark)); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); margin: 1.75rem auto; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose blockquote { margin: 1.75rem 0; padding: .35rem 0 .35rem 1.5rem; border-left: 3px solid hsl(var(--teal)); color: hsl(var(--text-soft)); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin-bottom: 1.5rem; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid hsl(var(--line)); padding: .7rem .8rem; text-align: left; }
.prose th { font-weight: 700; background: hsl(var(--paper-2)); }
.prose iframe { max-width: 100%; border-radius: var(--radius); }

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

.product { display: grid; gap: 2.5rem; align-items: start; }
.product > * { min-width: 0; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }

.product__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, hsl(var(--paper-2)) 0%, #fff 100%); border: 1px solid hsl(var(--line));
}
.product__media img { width: 100%; height: 100%; object-fit: contain; padding: 1.75rem; mix-blend-mode: multiply; }
.product__thumbs { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.product__thumbs button { width: 4.5rem; height: 4.5rem; border-radius: 14px; border: 1px solid hsl(var(--line)); background: #fff; padding: .35rem; overflow: hidden; transition: border-color .15s ease; }
.product__thumbs button[aria-current="true"] { border-color: hsl(var(--teal)); }
.product__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product__price { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: 1.25rem 0 .3rem; color: hsl(var(--teal-dark)); }
.product__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 2rem; }

.specs { border-top: 1px solid hsl(var(--line)); margin: 1.5rem 0 0; }
.specs div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid hsl(var(--line)); font-size: .96rem; }
.specs dt { color: hsl(var(--text-soft)); margin: 0; }
.specs dd { margin: 0; font-weight: 700; }

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

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: block; position: relative; }
.field input, .field textarea {
  width: 100%; padding: .95rem 1.15rem;
  border: 1px solid hsl(var(--line)); border-radius: 14px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: hsl(var(--teal)); box-shadow: 0 0 0 4px hsl(var(--teal) / .12); }
.field input::placeholder, .field textarea::placeholder { color: hsl(var(--text-soft) / .85); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.notice { border-radius: 14px; padding: .95rem 1.15rem; font-size: .95rem; display: flex; gap: .65rem; align-items: flex-start; }
.notice--ok { background: hsl(var(--teal-soft)); color: hsl(var(--teal-dark)); }
.notice--err { background: hsl(8 80% 96%); color: hsl(8 65% 38%); }
.notice svg { width: 1.2rem; height: 1.2rem; margin-top: .15rem; }

.form-card { background: #fff; border: 1px solid hsl(var(--line)); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: 0 40px 70px -50px hsl(var(--ink) / .6); }
@media (min-width: 700px) { .form-card { padding: 2.25rem; } }

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

.contact { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.contact-list .row-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list .tick { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 14px; background: hsl(var(--teal-soft)); color: hsl(var(--teal-dark)); display: grid; place-items: center; }
.contact-list dt { font-size: .82rem; color: hsl(var(--text-soft)); }
.contact-list dd { margin: 0; font-weight: 700; }
.map-frame { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); margin-top: 2rem; }

/* ---------- Footer tối ---------- */

.footer { background: hsl(var(--ink)); color: rgb(255 255 255 / .68); padding-block: 4rem 2rem; position: relative; overflow: hidden; }
.footer__hex { position: absolute; inset: 0; opacity: .6; }
.footer > .shell { position: relative; }
.footer h3 { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.35fr; } }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.footer a:hover { color: hsl(var(--teal-bright)); }
.footer .brand__name { color: #fff; font-size: 1.2rem; }
.footer .brand__name span { color: hsl(var(--teal-bright)); }
.footer__about { font-size: .95rem; max-width: 36ch; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .85rem; color: rgb(255 255 255 / .5); }

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

.quick { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; display: grid; justify-items: end; gap: .6rem; }
.quick__options { display: grid; gap: .5rem; justify-items: end; }
.quick__options[hidden] { display: none; }
.quick__option {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid hsl(var(--line)); border-radius: 999px;
  padding: .6rem 1.1rem; font-size: .92rem; font-weight: 700;
  box-shadow: 0 20px 34px -22px hsl(var(--ink) / .8);
}
.quick__option svg { color: hsl(var(--teal)); }
.quick__option:hover { border-color: hsl(var(--teal)); }
.quick__toggle {
  position: relative;
  width: 3.5rem; height: 3.5rem; border-radius: 999px; border: 0; color: #fff; display: grid; place-items: center;
  background: linear-gradient(140deg, hsl(var(--teal)) 0%, hsl(var(--teal-bright)) 100%);
  box-shadow: 0 20px 34px -14px hsl(var(--teal) / .9);
}
.quick__toggle svg { width: 1.45rem; height: 1.45rem; }
.quick__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 hsl(var(--teal-bright) / .5); animation: ping 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 hsl(var(--teal-bright) / .5); } 70%, 100% { box-shadow: 0 0 0 18px hsl(var(--teal-bright) / 0); } }

/* ---------- Phân trang ---------- */

.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 3.5rem; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 2.7rem; height: 2.7rem; padding-inline: .75rem;
  border-radius: 999px; font-size: .95rem; font-weight: 700; color: hsl(var(--text-soft)); border: 1px solid transparent;
}
.pagination .page-numbers:hover { border-color: hsl(var(--line)); color: hsl(var(--text)); }
.pagination .current { background: hsl(var(--ink)); color: #fff; }

/* ---------- Chuyển động ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Tiện ích ---------- */

.stack { display: grid; gap: 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.empty { padding: 4rem 1.5rem; text-align: center; color: hsl(var(--text-soft)); border: 1px dashed hsl(var(--line)); border-radius: var(--radius); }