:root {
  --blue: #071372;
  --blue-deep: #152f82;
  --heading: #383838;
  --text: #565656;
  --text-light: #767676;
  --text-lighter: #989898;
  --border: #b5c7e3;
  --green: #00ad51;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body { font-family: var(--font-body); color: var(--text); overflow-x: hidden; }
img { max-width: none; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
/* mobile tap-response fix: without this, the browser waits ~300ms after a
   tap on any link/button to see if a second tap follows (double-tap-zoom
   detection), which reads as laggy/unresponsive and — if the user taps
   again impatiently before the first one resolves — can toggle a menu
   open/closed twice in a row, needing extra taps to catch up. Scoped to
   interactive elements only (not the whole page) so pinch-zoom still works. */
a, button { touch-action: manipulation; }

#page-outer { position: relative; width: 100%; }
#stage {
  width: 1440px;
  height: 5265px;
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  background: #fff;
}

.abs { position: absolute; }
.rect { position: absolute; }

/* ---------- shared text styles ---------- */
.h-section {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 28px;
  color: var(--heading);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.h-section.left { text-align: left; }
.sub-section {
  font-weight: 300;
  font-size: 14px;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
  margin: 16px 0 0;
}
.section-head { text-align: center; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.link-txt {
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
}

/* !important: without it, any later-defined rule that sets its own
   `display` on the same element (e.g. .cat-col{display:flex}) would win
   at equal specificity by source order and wrongly show it on desktop/
   tablet — confirmed happening with .cat-col-pd on the product detail page */
.view-mobile { display: none !important; }
.hdr-logo-mobile { display: none; }

.dots { display: flex; justify-content: center; gap: 2px; position: relative; z-index: 3; }
.dots span { width: 39px; height: 4px; background: #d9d9d9; }
.dots span.on { background: var(--blue); }

/* ---------- paginated carousel (dots = pages, click or autoplay every 3s) ---------- */
.carousel-viewport { width: 100%; overflow: hidden; position: relative; z-index: 3; }
.carousel-track { display: flex; transition: transform 0.6s cubic-bezier(.4,0,.2,1); }
.carousel-page { flex: 0 0 100%; }
.carousel-page.products-row, .carousel-page.brands-row { justify-content: center; }
.carousel-page.mat-page { display: flex; flex-direction: column; }
.dots span.dot { cursor: pointer; }

/* ================= HEADER ================= */
.hero-bg {
  position: absolute;
  left: 0; top: 0; width: 1440px; height: 810px;
  background-size: cover;
  background-position: center;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(227,233,243,0.8) 46%, rgba(227,233,243,0) 100%);
}

.hdr {
  position: absolute;
  left: 0; top: 0; width: 1440px; height: 96px;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 20;
}
.hdr-logo { position: absolute; left: 120px; top: 50%; transform: translateY(-50%); width: 147px; height: 79px; object-fit: contain; }
.hdr-nav {
  position: absolute;
  left: 331px; top: 0;
  height: 96px;
}
.hdr-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px; font-weight: 700; line-height: 1.5;
  color: var(--text-lighter); white-space: nowrap;
}
.hdr-nav a.active, .hdr-nav a:hover { color: var(--heading); }
.hdr-nav a.dd { display: inline-flex; align-items: center; gap: 4px; }
.hdr-nav a.dd img { width: 10px; }
.hdr-actions {
  position: absolute;
  left: 1012px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
.hdr-phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.16px; color: var(--blue);
  white-space: nowrap;
}
.hdr-phone img { width: 15px; }

/* WHAT WE DO dropdown — new, additive; homepage/about nav still use the
   plain a.dd (no panel markup) so this doesn't change their look */
.hdr-nav .dd-wrap { position: absolute; top: 50%; transform: translateY(-50%); }
.hdr-nav .dd-wrap a.dd { position: static; transform: none; }
.hdr-nav .dd-wrap a.dd.active { color: var(--heading); }
.hdr-nav .dd-wrap .chev { width: 10px; transition: transform .15s ease; }
.hdr-nav .dd-wrap:hover .chev { transform: scaleY(-1); }
.dd-panel {
  display: none;
  position: absolute;
  left: 0; top: 100%;
  /* no margin-top: a gap here would be a dead zone the mouse has to cross
     between the trigger and the panel — since the panel is only :hover-shown
     while the cursor is over it, crossing that gap loses hover and the
     panel closes before the cursor arrives. Extra breathing room is added
     as padding-top INSIDE the panel instead, which stays part of the same
     continuously-hoverable box. */
  background: #fff;
  flex-direction: column;
  gap: 6px;
  padding: 20px 8px 8px;
  min-width: 140px;
  box-shadow: 4px 3px 12px rgba(135,135,135,0.1), 17px 12px 21px rgba(135,135,135,0.09), 39px 28px 29px rgba(135,135,135,0.05), 69px 49px 34px rgba(135,135,135,0.01);
}
.hdr-nav .dd-wrap:hover .dd-panel { display: flex; }
.dd-panel a { position: static; font-size: 14px; font-weight: 500; color: var(--text-lighter); }
.dd-panel a.active, .dd-panel a:hover { font-weight: 700; color: var(--heading); }

/* ================= HERO TEXT ================= */
.hero-text-group { display: flex; flex-direction: column; gap: 0; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: 0.42px;
  line-height: 1.4;
  color: var(--blue);
  margin: 0;
}
.hero-desc { font-weight: 700; font-size: 22px; color: #050505; line-height: 1.5; margin-top: 8px; }
.hero-desc p { margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; }

.about-card {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-card h3 { font-size: 28px; font-weight: 600; color: var(--heading); margin: 0; line-height: 1.5; }
.about-card p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text); margin: 0; }

.stats-row { display: flex; gap: 24px; align-items: flex-start; }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 180px; text-align: center; }
.stat-item img { width: 50px; height: 50px; }
.stat-item strong { font-size: 28px; font-weight: 700; color: var(--blue); line-height: 1.5; }
.stat-item span { font-size: 14px; font-weight: 500; color: var(--text-light); line-height: 1.5; }

/* ================= PRODUCTS ================= */
.products-row { display: flex; gap: 24px; }
.product-card { display: flex; flex-direction: column; gap: 16px; width: 282px; align-items: center; }
.product-img {
  background: #fff;
  width: 100%; height: 210px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-card:hover .product-img { box-shadow: 4px 3px 12px rgba(135,135,135,0.1), 17px 12px 21px rgba(135,135,135,0.09), 39px 28px 29px rgba(135,135,135,0.05), 69px 49px 34px rgba(135,135,135,0.01); }
.product-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.product-card span { font-size: 16px; letter-spacing: 0.16px; text-align: center; color: var(--text); font-weight: 500; }
.product-card.active span, .product-card:hover span { color: #1c1c1c; font-weight: 700; }

/* ================= MATERIALS ================= */
.materials-grid { display: flex; gap: 24px; }
.materials-grid figure { margin: 0; width: 180px; display: flex; flex-direction: column; gap: 12px; }
.materials-grid img { width: 180px; height: 180px; object-fit: cover; }
.materials-grid figcaption { font-size: 16px; font-weight: 600; letter-spacing: 0.16px; line-height: 165%; text-align: center; color: var(--heading); }

/* ================= COLLABORATE ================= */
.collab-rows { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.collab-row { display: flex; gap: 24px; align-items: flex-end; width: 100%; }
.collab-card { width: 282px; display: flex; flex-direction: column; gap: 8px; }
.collab-card h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--blue);
  margin: 0;
}
.collab-card h4 .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue);
  color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.collab-body { background: #f7f7f7; height: 133px; padding: 12px; }
.collab-body p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text); margin: 0; }
.collab-pattern { width: 282px; height: 133px; background-size: cover; background-position: center; }

/* ================= CERTS + MAP ================= */
.certs-box { display: flex; flex-direction: column; background: #fff; }
.certs-head { padding: 40px 32px 4px; display: flex; flex-direction: column; gap: 16px; }
.certs-intro { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.5; margin: 0; }
.certs-list { padding: 4px 32px 20px; display: flex; flex-direction: column; gap: 8px; }
.certs-list li { display: flex; gap: 20px; align-items: center; }
.certs-list img { width: 36px; height: 36px; flex-shrink: 0; }
.certs-list p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text); margin: 0; }
.certs-list strong { font-weight: 600; color: var(--text); }

.map-box { overflow: hidden; }
.map-img { width: 708px; height: 422px; object-fit: cover; }

/* ================= BRANDS ================= */
.brands-row { display: flex; gap: 24px; align-items: center; }
.brand-logo { background: #fff; width: 282px; height: 147px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brand-logo img { max-width: 80%; max-height: 70%; object-fit: contain; }

/* ================= CTA + TRUSTED ================= */
.cta-navy { background-size: cover; background-position: center; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
  letter-spacing: 0.42px;
  color: #fff;
  margin: 0;
}
.cta-subtitle { font-size: 22px; font-weight: 600; color: #fff; margin: 8px 0 0; line-height: 1.5; }
.cta-desc { font-size: 16px; font-weight: 500; letter-spacing: 0.16px; color: #fff; line-height: 1.5; margin-top: 20px; }

.cta-form-col { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.cta-form {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.cta-form label { display: flex; flex-direction: column; gap: 4px; }
.f-label { font-size: 16px; font-weight: 700; letter-spacing: 0.16px; color: #050505; }
.cta-form input {
  border: none;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  font-size: 14px;
  font-family: inherit;
  color: rgba(0,0,0,0.6);
  outline: none;
  background: transparent;
}
.send-btn { padding: 10px 24px; }

.green { color: var(--green); }

/* ================= FOOTER ================= */
.footer { background: #000; color: #050505; overflow: hidden; }
.footer-photo {
  position: absolute;
  left: 0; top: 0; width: 1440px; height: 322px;
  background-size: cover; background-position: center;
}
.footer-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(240,246,255,0.8);
}
.footer-cols {
  position: absolute;
  left: 120px; top: 53px;
  display: flex;
  gap: 25px;
}
.footer-col-main { width: 588px; display: flex; flex-direction: column; gap: 24px; }
.footer-col-main h3 { font-size: 28px; font-weight: 800; color: var(--blue); margin: 0; line-height: 1.5; }
.footer-tag { font-size: 14px; font-weight: 500; color: #050505; margin-top: 2px; }
.footer-col-main h4, .footer-col-links h4, .footer-col-loc h4 {
  font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 8px;
}
.footer-col-main p, .footer-col-loc p { font-size: 14px; font-weight: 500; color: #050505; line-height: 1.5; margin: 0 0 8px; }
.footer-col-main a, .footer-col-links a { color: #050505; text-decoration: underline; font-size: 14px; font-weight: 500; }
.footer-col-links { width: 179px; display: flex; flex-direction: column; gap: 8px; }
.footer-col-links a { display: block; }
.footer-col-loc { width: 381px; }
.footer-col-loc strong, .footer-col-main strong { font-weight: 700; }

.footer-bottom {
  position: absolute;
  left: 0; top: 322px; width: 1440px; height: 37px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 120px;
}
.social-icons { display: flex; gap: 4px; }
.social-icons img { width: 18px; height: 18px; }
.footer-bottom span { font-size: 14px; font-weight: 500; color: #fff; }

/* ================= MOBILE MENU (hidden on tablet/desktop) ================= */
.hdr-burger {
  display: none;
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: none; border: none; padding: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  z-index: 30;
}
.hdr-burger span { display: block; width: 26px; height: 2px; background: var(--blue); transition: transform .25s ease, opacity .25s ease; }
.hdr-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity: 0; }
.hdr-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 60px; left: 0; width: 100vw;
  background: #fff;
  flex-direction: column;
  padding: 16px 20px 24px;
  gap: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  z-index: 29;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a { font-size: 15px; font-weight: 700; color: var(--text-lighter); padding: 4px 0; }
.mobile-menu a.active, .mobile-menu a:hover { color: var(--heading); }
.mobile-menu .hdr-phone { font-size: 15px; padding: 8px 0; border-top: 1px solid #eee; }
.mobile-menu .btn-primary { width: 100%; padding: 12px; }

/* WHAT WE DO — expandable submenu inside the mobile fullscreen menu.
   New, additive; only products.html's mobile-menu currently uses it. */
.mm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-lighter); text-align: left;
}
/* only bold/dark when this page IS "What We Do" (e.g. products.html gives
   its own .mm-toggle the .active class) — was previously hardcoded dark on
   every page regardless, which wrongly showed 2 bold items on Trang chủ */
.mm-toggle.active, .mm-toggle:hover { color: var(--heading); }
.mm-toggle .chev { width: 10px; flex-shrink: 0; transition: transform .15s ease; }
.mm-item.open .mm-toggle .chev { transform: scaleY(-1); }
.mm-sublist { display: none; flex-direction: column; gap: 12px; padding: 12px 0 0 16px; }
.mm-item.open .mm-sublist { display: flex; }
.mm-sublist a { font-size: 14px; font-weight: 500; color: var(--text-lighter); padding: 0; }
.mm-sublist a.active { font-weight: 700; color: var(--heading); }

/* =====================================================================
   ABOUT PAGE ("Giới thiệu") — all classes below are NEW and page-scoped
   (unique names, not reused by index.html), so they cannot affect the
   approved homepage CSS above. Shared components (header, footer, dots,
   carousel, h-section, sub-section, btn-primary, brand-logo, etc.) are
   reused as-is from the homepage rules above — no changes there.
   Source: Figma node 2428:1034. See BUILD_LOG.md.
   ===================================================================== */
.about-hero-bg {
  position: absolute;
  left: 0; top: 0; width: 1440px; height: 488px;
  background-size: cover;
  background-position: center bottom;
}
.about-hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(227,233,243,0.35); }

.about-hero-card { background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 16px; z-index: 2; }
.about-hero-card h3 { font-size: 28px; font-weight: 600; color: var(--heading); margin: 0; line-height: 1.5; }
.about-hero-card p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text); margin: 0; }

.journey-block { display: flex; flex-direction: column; gap: 16px; }
.journey-title { font-weight: 800; font-size: 28px; color: var(--blue); margin: 0; line-height: 1.5; }
.journey-text { font-weight: 300; font-size: 14px; color: #383838; margin: 0; line-height: 1.5; }

.factory-col { display: flex; flex-direction: column; gap: 16px; }
.factory-head { display: flex; flex-direction: column; gap: 24px; }
.factory-cards { display: flex; gap: 24px; align-items: stretch; }
.factory-card { border-left: 5px solid var(--blue); padding: 10px; display: flex; flex-direction: column; gap: 7px; width: 282px; }
.factory-card .f-title { font-size: 16px; font-weight: 700; letter-spacing: 0.16px; color: var(--text); margin: 0; line-height: 1.5; }
.factory-card .f-desc { font-size: 14px; font-weight: 500; color: var(--text); margin: 0; line-height: 1.5; }
.factory-desc { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.factory-desc p { margin: 0; }

.cert-carousel-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cert-stage { position: relative; width: 588px; height: 494px; overflow: hidden; }
.cert-page { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cert-page img { width: 555px; height: 428px; object-fit: cover; object-position: top; }
.cert-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 51px; height: 51px; cursor: pointer; z-index: 4; background: none; border: none; padding: 0; }
.cert-arrow img { width: 100%; height: 100%; display: block; }
.cert-arrow.prev { left: 16px; }
.cert-arrow.next { right: 16px; }

.badges-row { display: flex; gap: 24px; align-items: center; }
.badge-box { background: #fff; width: 180px; height: 116px; display: flex; align-items: center; justify-content: center; }
.badge-box img { max-width: 70%; max-height: 70%; object-fit: contain; }

.factory-photo { position: absolute; left: 121px; top: 1586px; width: 1199px; height: 675px; object-fit: cover; }

.values-section { background: #ecf1f8; padding: 426px 0 96px; margin-top: 1913px; }
.values-row { display: flex; gap: 24px; align-items: flex-start; width: 1321px; }
.map-col { width: 402px; height: 931px; overflow: hidden; position: relative; flex-shrink: 0; }
.map-col img { width: 100%; height: 100%; object-fit: cover; }
.values-col { display: flex; flex-direction: column; gap: 40px; width: 895px; }
.values-intro { font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.values-intro p { margin: 0 0 21px; }
.values-intro p:last-child { margin-bottom: 0; }
.values-group { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.values-title { font-weight: 800; font-size: 22px; letter-spacing: 1px; color: var(--blue); text-align: center; margin: 0; line-height: 1.5; }
.values-cols { display: flex; gap: 24px; width: 100%; }
.value-col { display: flex; flex-direction: column; gap: 24px; width: 282px; }
.value-col-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.value-col-title { font-weight: 600; font-size: 16px; color: #5774ae; text-align: center; margin: 0; line-height: 1.5; }
.value-col-head img { width: 50px; height: 50px; }
.value-list { list-style: disc; padding-left: 21px; margin: 0; display: flex; flex-direction: column; gap: 0; font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.value-list li { margin: 0; }

.about-bottom { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 1440px; margin: 0 auto; padding: 96px 0 0; }
.brands-wrap { width: 1200px; }

/* =====================================================================
   PRODUCTS PAGE ("Trang sản phẩm") — new, page-scoped classes only.
   Product card markup/styling (.product-card, .product-img, .products-row)
   is inherited as-is from the homepage rules above, per explicit request —
   nothing in this section redefines them, only wraps them. Source: Figma
   node 2458:1777. See BUILD_LOG.md.
   ===================================================================== */
.search-bar { display: flex; align-items: center; justify-content: space-between; background: #ecf1f8; padding: 32px 48px; box-sizing: border-box; }
.search-title { font-weight: 800; font-size: 28px; color: var(--blue); margin: 0; line-height: 1.5; width: 286px; }
.search-form { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 310px; border-bottom: 1px solid #b5c7e3; padding-bottom: 4px; }
.search-form input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.6px; color: var(--text); flex: 1; min-width: 0; }
.search-form input::placeholder { color: var(--text); opacity: 1; }
.search-form button { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.search-form button img { width: 15px; height: 15px; }
.search-form:focus-within { border-bottom-color: var(--blue); }

.cat-col { display: flex; flex-direction: column; gap: 32px; }
.cat-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cat-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 17px;
  width: 100%; background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-light); text-align: left;
}
.cat-toggle .chev { width: 10px; flex-shrink: 0; transition: transform .15s ease; }
/* the chevron icon must never intercept the tap — it should always land on
   the button itself (a mis-hit here is a likely cause of "needs 2 taps") */
.chev { pointer-events: none; }
.cat-item.open .cat-toggle, .cat-toggle:hover { font-weight: 700; color: var(--text); }
.cat-item.open .cat-toggle .chev { transform: scaleY(-1); }
.cat-sublist { display: none; flex-direction: column; gap: 4px; padding: 7px 0 0 34px; font-size: 14px; }
.cat-item.open .cat-sublist { display: flex; }
.cat-sublist a { color: var(--text-light); font-weight: 500; line-height: 1.5; }
.cat-sublist a:hover { font-weight: 700; color: var(--text); }
.cat-sublist a.active { color: var(--text); font-weight: 700; }

.products-grid-wrap { display: flex; flex-direction: column; }
.products-grid-wrap .products-row { padding-bottom: 19px; border-bottom: 1px solid #ececec; margin-bottom: 15px; }
.products-grid-wrap .products-row.last { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.pagination { display: flex; justify-content: center; align-items: center; margin-top: 54px; }
.page-pill {
  background: none; border: none; cursor: pointer;
  padding: 6px 12px; border-radius: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.6px;
  color: #bbb;
}
.page-pill.on { background: #ecf1f8; color: var(--blue); }

/* =====================================================================
   PRODUCT DETAIL PAGE ("Trang chi tiết sản phẩm") — new, page-scoped
   classes only. "You may also like" reuses .h-section/.section-head/
   .carousel*/.products-row/.product-card/.dots as-is (no redefinition),
   per explicit reuse request. Source: Figma node 2462:1319. See BUILD_LOG.md.
   ===================================================================== */
.pd-gallery { display: flex; flex-direction: column; gap: 8px; }
.pd-main { background: #fff; height: 482px; position: relative; overflow: hidden; }
.pd-main img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 91%; max-height: 100%; object-fit: contain; }
.pd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 51px; height: 51px; background: none; border: none; padding: 0; cursor: pointer; z-index: 2;
}
.pd-arrow img { width: 100%; height: 100%; display: block; }
.pd-arrow.prev { left: 27px; }
.pd-arrow.next { right: 27px; }
.pd-thumbs { display: flex; gap: 7px; }
.pd-thumb { width: 142px; height: 142px; background: #fff; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.pd-thumb.active { border-color: #bbb; }
.pd-thumb img { max-width: 89%; max-height: 81%; object-fit: contain; }

.pd-info { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }
.pd-info-main { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; }
.pd-title-block { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
.pd-title { font-weight: 600; font-size: 28px; color: var(--blue); margin: 0; line-height: 1.5; }
.pd-desc { font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.5; margin: 0; }
.pd-desc p { margin: 0 0 21px; }
.pd-desc p:last-child { margin-bottom: 0; }
.pd-desc strong { font-weight: 500; }

.pd-accordion { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pd-acc-item { border-bottom: 1px solid #e0e0e0; }
.pd-acc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 33px;
  width: 100%; background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.16px; color: var(--heading); text-align: left;
}
.pd-acc-item.open .pd-acc-toggle { color: #00a33b; }
.pd-acc-toggle .icon { width: 15px; height: 15px; flex-shrink: 0; }
.pd-acc-toggle .icon-minus { display: none; }
.pd-acc-item.open .icon-plus { display: none; }
.pd-acc-item.open .icon-minus { display: block; }
.pd-acc-body { display: none; font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.5; padding-bottom: 12px; }
.pd-acc-item.open .pd-acc-body { display: block; }

.pd-contact-row { display: flex; gap: 24px; align-items: center; }

.pd-related { display: flex; flex-direction: column; gap: 32px; align-items: center; }

/* =====================================================================
   OUR MATERIAL PAGE ("Trang Our Material") — new, page-scoped classes
   only. The material grid reuses .materials-grid/figure/figcaption as-is
   from the homepage (same 12 materials + 3 new ones), and the section
   title reuses .section-head/.h-section/.sub-section — nothing redefined,
   per the explicit reuse request. Source: Figma node 2469:1764. See
   BUILD_LOG.md.
   ===================================================================== */
/* z-index needed because .material-cta comes later in DOM — positioned
   elements paint in DOM order by default, so without this the decorative
   gradient band would paint OVER the material grid wherever the two
   absolutely-positioned boxes happen to overlap (confirmed happening:
   real grid content is taller than the Figma-estimated top offset) */
.material-grid-wrap { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; z-index: 2; }

.material-cta { background: linear-gradient(to top, #d9e2f1 36.691%, #fff 100%); z-index: 1; }
.material-cta-inner { display: flex; gap: 229px; align-items: center; z-index: 2; }
.material-cta-text { display: flex; flex-direction: column; gap: 8px; width: 690px; }
.material-cta-title { font-weight: 600; font-size: 36px; letter-spacing: 0.36px; color: #1c1c1c; margin: 0; line-height: 1.5; }
.material-cta-desc { font-size: 14px; font-weight: 300; color: #1c1c1c; margin: 0; line-height: 1.5; }
.material-cta-actions { display: flex; gap: 24px; align-items: center; flex-shrink: 0; }

/* =====================================================================
   OUR MATERIAL — ARTICLE DETAIL PAGE ("Trang chi tiết bài viết Our
   Material") — new, page-scoped classes only. .pd-contact-row reused
   as-is for the phone+button rows. Source: Figma node 2481:2777
   (get_metadata gave exact pixel positions — used those directly instead
   of estimating). See BUILD_LOG.md.
   ===================================================================== */
.matd-card { display: flex; gap: 24px; align-items: flex-start; background: #ecf1f8; padding: 32px 24px; box-sizing: border-box; }
.matd-card-img { width: 486px; height: 324px; object-fit: cover; flex-shrink: 0; }
.matd-card-body { display: flex; flex-direction: column; gap: 32px; align-items: flex-end; width: 642px; }
.matd-card-text { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; width: 100%; }
.matd-title { font-weight: 600; font-size: 28px; color: var(--blue); margin: 0; line-height: 1.5; }
.matd-desc { display: flex; flex-direction: column; gap: 21px; font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.matd-desc p { margin: 0; }

.matd-body { display: flex; flex-direction: column; gap: 24px; }
.matd-text { display: flex; flex-direction: column; gap: 21px; font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.matd-text p { margin: 0; }
.matd-gallery { display: flex; }
.matd-gallery img { width: 417.314px; height: 374.686px; object-fit: cover; }
.matd-gallery img + img { width: 374.686px; }
.matd-note { font-size: 14px; font-weight: 300; color: var(--text); line-height: 1.5; }
.matd-note p { margin: 0 0 8px; }
.matd-note p:last-child { margin-bottom: 0; }
.matd-note strong { font-weight: 700; }

/* =====================================================================
   OUR PROCESS PAGE ("Trang quy trình") — new, page-scoped classes only.
   Reuses .section-head/.h-section/.sub-section, .pd-accordion/.pd-acc-*
   (same FAQ interaction as product-detail.html — only the open-state
   color differs, see .faq-list override), .material-cta-text/-title/
   -desc/-actions, .hdr-phone, .btn-primary and .pd-contact-row as-is.
   Source: Figma node 2483:3048. See BUILD_LOG.md.
   ===================================================================== */
/* no position:relative here — .abs already gives position:absolute, which
   is a sufficient containing block for .proc-hero-bg's inset:0 child, and
   overriding to relative would silently opt this element BACK into normal
   document flow (equal-specificity, declared later than .abs), pushing
   every element after it down by this box's own height */
.proc-hero { height: 188px; overflow: hidden; }
.proc-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.proc-hero-inner { position: relative; z-index: 1; display: flex; gap: 65px; align-items: flex-start; padding: 57px 0 0 120px; box-sizing: border-box; }
.proc-hero-title { width: 242px; font-weight: 600; font-size: 28px; color: #fff; margin: 0; line-height: 1.5; }
.proc-hero-desc { width: 689px; font-weight: 300; font-size: 14px; color: #fff; margin: 0; line-height: 1.5; }

.proc-wrap { display: flex; flex-direction: column; align-items: center; gap: 88px; }
.proc-steps-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.proc-steps { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.proc-row { display: flex; gap: 24px; align-items: flex-start; width: 100%; }
.proc-step { width: 384px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.proc-icon { width: 45px; height: 45px; }
.proc-step-text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.proc-step-title { font-size: 14px; font-weight: 700; color: #050505; text-align: center; margin: 0; line-height: 1.5; }
/* min-height matches the tallest of the 6 boxes' real rendered content
   ("Know each other", 243px measured) so all six line up evenly instead of
   each hugging its own (uneven) text length — mobile stays auto-height,
   stacked in one column where uneven heights don't read as misaligned */
.proc-step-body { background: #f7f7f7; padding: 12px; width: 100%; min-height: 243px; box-sizing: border-box; font-size: 14px; color: var(--text); line-height: 1.5; }
.proc-step-body p { font-weight: 300; margin: 0 0 8px; }
.proc-step-body ul { margin: 0; padding-left: 18px; list-style: disc; }
.proc-step-body li { font-weight: 300; margin-bottom: 4px; }
.proc-step-body li:last-child { margin-bottom: 0; }
.proc-step-body strong { font-weight: 700; }

.proc-faq-wrap { display: flex; flex-direction: column; gap: 24px; align-items: start; width: 792px; }
/* scoped override — product-detail.html's accordion (.pd-acc-toggle base
   font-weight:500) must stay untouched, so these only apply inside .faq-list */
.faq-list .pd-acc-toggle { font-weight: 400; }
.faq-list .pd-acc-item.open .pd-acc-toggle { color: #00ad51; font-weight: 500; }
.faq-list .pd-acc-toggle .icon { width: 13px; height: 13px; }
/* smooth expand/collapse — product-detail.html's plain display:none/block
   toggle stays untouched; this page uses the grid-template-rows 0fr→1fr
   trick instead, which animates cleanly without knowing the content's
   real height up front */
.faq-list .pd-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  overflow: hidden;
  transition: grid-template-rows 0.25s ease, padding-bottom 0.25s ease;
}
.faq-list .pd-acc-item.open .pd-acc-body {
  grid-template-rows: 1fr;
  padding-bottom: 12px;
}
.faq-list .pd-acc-body > p { min-height: 0; margin: 0; overflow: hidden; }

.proc-cta { background: #ecf1f8; box-sizing: border-box; }
.proc-cta-inner { display: flex; gap: 220px; align-items: center; padding: 57px 129px 59px 120px; box-sizing: border-box; }

/* =====================================================================
   CONTACT PAGE ("Trang liên hệ") — new, page-scoped classes only.
   .contact-callout is shared between the "Prefer to see it in person?"
   box (wrapped with its VISIT US button in .contact-callout-wrap) and
   the plain "What happens after..." box — same visual, one has a button.
   The Figma map image is replaced with a real Google Maps embed per user
   request (google-maps-embed.md is unrelated — just a plain iframe).
   Source: Figma node 2483:3326. See BUILD_LOG.md.
   ===================================================================== */
.contact-bg { background: #ecf1f8; }

.contact-content { display: flex; flex-direction: column; gap: 24px; }
.contact-row { display: flex; gap: 64px; align-items: flex-start; width: 100%; }

.contact-locations { width: 547px; display: flex; flex-direction: column; gap: 4px; }
.contact-title { font-size: 28px; font-weight: 800; color: #050505; margin: 0; line-height: 1.5; }
.contact-locations-body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.contact-block { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.contact-label { font-size: 18px; font-weight: 700; color: #383838; margin: 0; line-height: 1.5; }
.contact-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #565656; }
.contact-text p { margin: 0; font-weight: 300; line-height: 1.5; }
.contact-text a { color: inherit; }
.contact-text strong { font-weight: 800; }

.contact-callout-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; width: 587px; flex-shrink: 0; }
.contact-callout { border-left: 4px solid var(--blue); padding-left: 24px; display: flex; flex-direction: column; gap: 8px; width: 587px; box-sizing: border-box; flex-shrink: 0; }
.contact-callout-title { font-size: 18px; font-weight: 600; color: #050505; margin: 0; line-height: 1.5; }
.contact-callout-text { font-size: 14px; font-weight: 300; color: #565656; margin: 0; line-height: 1.5; }

.contact-message-intro { width: 547px; display: flex; flex-direction: column; gap: 4px; }
.contact-message-text { font-size: 14px; font-weight: 300; color: #565656; margin: 0; line-height: 1.5; }

.contact-form-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; width: 564px; }
.contact-form-card { background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 24px; width: 100%; box-sizing: border-box; }
.contact-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.contact-field label { font-size: 16px; font-weight: 700; color: #050505; letter-spacing: 0.16px; }
.contact-field input, .contact-field textarea {
  border: none; border-bottom: 1px solid rgba(0,0,0,0.15); background: transparent;
  font-family: inherit; font-size: 14px; color: #050505; padding: 0 0 8px; width: 100%;
  outline: none; resize: none; box-sizing: border-box;
}
.contact-field input:focus, .contact-field textarea:focus { border-bottom-color: var(--blue); }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(0,0,0,0.6); }
.contact-form-wrap button.btn-primary { border: none; cursor: pointer; }

.contact-map-wrap { z-index: 1; }
.contact-map { width: 100%; height: 100%; border: 0; display: block; }
/* the form floats over the map's top-left corner (matches Figma exactly —
   form bottom edge sits 297px into the map's 598px height) — needs a real
   stacking order since both are .abs (position:absolute already, from the
   .abs class — z-index alone is enough here; redeclaring position:relative
   would win the cascade (same specificity, declared later) and silently
   opt this element back into normal document flow, pushing the footer
   down by its own full height. Confirmed this exact bug already once on
   .proc-hero in our-process.html — see BUILD_LOG.md) */
.contact-content { z-index: 2; }

/* Phone-only layout (<=767px) lives entirely in mobile.css — see that file
   and BUILD_LOG.md. Nothing below this line targets max-width:767px. */