: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; }

/* =====================================================================
   HOMEPAGE — "Want to explore our production lines?" section, added
   after the site was fully approved. New, page-scoped classes only.
   Inserted between .sec-cta/.sec-trusted-text and the footer with 0 gap
   on both sides (matches Figma exactly) — footer's top pushed from
   4906px to 5368px (+462px, this section's own height) to make room.
   Source: Figma node 2516:3533. See BUILD_LOG.md.
   ===================================================================== */
.sec-explore-production { background: #ecf1f8; box-sizing: border-box; }
.explore-production-inner { display: flex; gap: 25px; align-items: flex-start; padding: 61px 120px; box-sizing: border-box; }
.explore-production-text { display: flex; flex-direction: column; gap: 20px; width: 588px; flex-shrink: 0; }
.explore-production-head { display: flex; flex-direction: column; gap: 12px; }
.explore-production-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.5; letter-spacing: normal; color: #050505; margin: 0; }
.explore-production-desc { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16px; color: #050505; margin: 0; }
.explore-production-link { display: inline-block; padding: 10px; }
.explore-production-photo { width: 587px; height: 340px; flex-shrink: 0; }
.explore-production-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   TRANG OUR PRODUCTION (our-production.html) — new page, client feedback.
   Source: Figma node 2509:2763 ("Trang Our Production"). Hero reuses the
   shared .about-hero-bg (same 1440x488 photo-band pattern as about.html/
   our-process.html/material-detail.html). Content column: 1200px wide,
   centered (120px side margins), 5 alternating text/image rows.
   ===================================================================== */
.prod-wrap { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.prod-intro { width: 916px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.prod-title { font-size: 28px; font-weight: 600; color: var(--heading); text-align: center; margin: 0; line-height: 1.5; }
/* Body-regular per project convention (see BUILD_LOG.md) renders at
   weight 300 even though Figma reports 400 for this role. */
.prod-desc { font-size: 14px; font-weight: 300; color: #565656; text-align: center; margin: 0; line-height: 1.5; }

.prod-steps { display: flex; flex-direction: column; gap: 64px; width: 100%; }
.prod-step { display: flex; align-items: center; gap: 24px; }
.prod-step.reverse { flex-direction: row-reverse; }
.prod-step-text { width: 586px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.prod-step-num { font-size: 18px; font-weight: 700; color: #000; margin: 0; line-height: 1.5; }
.prod-step-desc { font-size: 14px; font-weight: 300; color: #565656; margin: 0; line-height: 1.5; }
.prod-step-desc strong { font-weight: 700; }
.prod-step-media { position: relative; width: 588px; height: 330px; flex-shrink: 0; overflow: hidden; }
.prod-step-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* functional prev/next carousel arrows (autoplay 3s, see JS) — same
   transparent-PNG icons + no-background button pattern as .pd-arrow on
   product-detail.html, not a plain <img> with an opaque background */
.prod-step-arrow {
  position: absolute; top: 151px; width: 28px; height: 28px;
  background: none; border: none; padding: 0; cursor: pointer; z-index: 2;
}
.prod-step-arrow img { width: 100%; height: 100%; display: block; }
.prod-step-arrow.left { left: 0; }
.prod-step-arrow.right { right: 0; }

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

/* =====================================================================
   [THEME 2026-09-07] KHOI BO SUNG — THEM VAO CUOI, KHONG SUA DONG NAO O TREN
   ---------------------------------------------------------------------
   BUILD_LOG.md ghi ro styles.css "da chot, khong sua khi lam mobile".
   Vi vay moi thu can them khi chuyen bo HTML tinh sang website dong deu
   nam gon trong khoi nay. Xoa ca khoi nay di la ve dung ban da chot.
   ===================================================================== */

/* ---- 1. MENU DAU TRANG chuyen sang tu xep hang ----------------------
   Ban goc dat tung muc menu bang toa do cung (left:0 / 123 / 276 / 465),
   nen doi ten muc hoac them muc la cac chu dinh vao nhau. Doi sang flex
   voi khoang cach 78px — DUNG BANG khoang cach cua ban thiet ke — thi
   vi tri gan nhu khong doi ma menu lay tu CSDL bao nhieu muc cung dep. */
.hdr-nav { display: flex; align-items: center; gap: 78px; }
.hdr-nav > a { position: static; top: auto; left: auto; transform: none; }

/* Muc "WHAT WE DO": bo toa do tuyet doi cua ban goc NHUNG phai giu
   position:relative — bang menu con la position:absolute nen no can chinh o
   nay lam MOC NEO. Neu de position:static thi no se neo vao to hon (thanh
   .hdr / #stage) va nhay ra tan mep trai trang, khong voi toi duoc.
   Chieu cao o nay bang dung chieu cao dong chu, nen top:100% cua bang menu
   con roi ngay duoi chu — dung nhu yeu cau. */
.hdr-nav .dd-wrap {
  position: relative;
  top: auto; left: auto; transform: none;
  display: inline-flex;
  align-items: center;
}
.hdr-nav .dd-wrap .dd-panel { top: 100%; left: 0; }

/* ---- 2. THONG BAO mot lan (gui form xong, thieu o bat buoc...) ------
   Dat position:fixed de KHONG lam xe dich canvas toa do tuyet doi. */
.ct-thongbao {
  position: fixed; z-index: 9999;
  left: 50%; top: 16px; transform: translateX(-50%);
  max-width: 90vw; padding: 14px 44px 14px 20px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.5;
  border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.ct-thongbao-tot { background: #e8f7ef; color: #075e33; border: 1px solid #9fdcbd; }
.ct-thongbao-loi { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.ct-thongbao-dong {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: inherit; opacity: .55; padding: 4px 8px;
}
.ct-thongbao-dong:hover { opacity: 1; }

/* ---- 3. BAY BOT trong form lien he (o an, nguoi that khong thay) ---- */
.ct-bay { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---- 4. FORM khoi keu goi trang chu -------------------------------
   Ban goc de <button> NAM NGOAI <form> nen bam gui khong chay. Nay boc
   ca hai vao mot <form>; display:contents lam the form "trong suot" ve
   mat bo cuc nen .cta-form-col van xep y het truoc. */
.cta-form-flow { display: contents; }

/* ---- 5. NOI DUNG soan bang CKEditor -------------------------------
   Cac o kieu `html` sinh ra the <p> khong co lop CSS. Cho chung thua
   dung kieu chu cua khoi chua no. */
.contact-callout-body p { font-size: 14px; font-weight: 300; color: var(--text); margin: 0; line-height: 1.5; }
.contact-callout-body p + p { margin-top: 8px; }
.pd-acc-body ul, .matd-text ul, .prod-step-desc ul { list-style: disc; padding-left: 20px; margin: 8px 0 0; }
.pd-acc-body ol, .matd-text ol { list-style: decimal; padding-left: 20px; margin: 8px 0 0; }
.matd-text p + p { margin-top: 16px; }
.matd-text img { max-width: 100%; height: auto; margin: 16px 0; }
.matd-text a, .pd-acc-body a, .contact-callout-body a { color: var(--blue); text-decoration: underline; }

/* ---- 6. THE SAN PHAM / VAT LIEU gio la the <a> --------------------
   Ban goc dung <div> (bam khong duoc). Doi sang <a> de vao trang chi tiet;
   khai lai display de khong bi anh huong boi kieu mac dinh cua the <a>. */
a.product-card { display: flex; color: inherit; text-decoration: none; }
.materials-grid figure a { display: block; color: inherit; text-decoration: none; }
.materials-grid figcaption a { display: block; }

/* ---- 7. SO DIEN THOAI gio la lien ket goi duoc --------------------- */
a.hdr-phone { text-decoration: none; }

/* ---- 8. PHAN TRANG that (the <a> thay cho <button>) ---------------- */
a.page-pill { display: inline-block; text-decoration: none; }
a.page-pill:hover { color: var(--blue); }

/* ---- 9. DANH MUC cha khong co muc con thi la lien ket, khong phai nut */
a.cat-toggle { text-decoration: none; }