/* =========================================================
   Golden Label VN — Style dùng chung cho prototype tĩnh
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Be+Vietnam+Pro:wght@400;600&display=swap');

/* =========================================================
   Hệ thống font chữ thống nhất toàn site (theo yêu cầu):
   - Montserrat 800: tiêu đề banner (page-hero h1, hero-banner-content h1)
   - Montserrat 700: tiêu đề trang/khu vực (h2, section-title), hotline, số liệu nổi bật
   - Be Vietnam Pro 600: menu, nút bấm, tiêu đề card (h3/h4)
   - Be Vietnam Pro 400: nội dung mô tả (mặc định body)
   ========================================================= */

:root {
  /* Bảng màu thương hiệu:
     - Xanh chuẩn thương hiệu: #008c44 (--green) - khách chỉnh lại trực tiếp bằng mã hex này.
     - Vàng/gold theo CMYK C:0 M:60 Y:100 K:0 -> RGB(255,102,0) = #ff6600 (--orange)
     --green-dark/--green-light/--orange-dark là các sắc độ đậm/nhạt tự suy ra từ 2 màu gốc trên
     (pha đen cho bản đậm, pha trắng cho bản nhạt) để dùng cho nền tối/nhạt, nút hover... */
  --green-dark: #004d25;
  --green: #008c44;
  --green-light: #e0f1e9;
  --orange: #ff6600;
  --orange-dark: #d95700;
  --text-dark: #1f2a24;
  --text-muted: #5c6b64;
  --border: #e3e8e5;
  --bg-soft: #f7f9f8;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 4px 16px rgba(15, 61, 36, 0.08);
  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Be Vietnam Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
}

/* Tiêu đề banner (lớn nhất, đầu mỗi trang) dùng Montserrat 800 */
h1 { font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; }
/* Tiêu đề trang/khu vực (h2) dùng Montserrat 700 */
h2 { font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; }
/* Tiêu đề card/khối nhỏ (h3, h4) dùng Be Vietnam Pro 600 */
h3, h4 { font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; }

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top bar ---------- */
.top-bar {
  background: var(--green-dark);
  color: #d9ecdf;
  font-size: 13px;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}
.top-bar .socials { display: flex; gap: 8px; }
.top-bar .socials a {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: #fff;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
/* Đã thử nới khung header rộng hơn nội dung chính nhưng gây lệch với menu/nội dung bên dưới
   (đều dùng khung 1180px) - quay lại dùng chung 1 khung để logo/hotline thẳng hàng với menu. */
.header-main {
  display: grid;
  /* 2 cột ngoài dùng 1fr (chia đều phần dư 2 bên) thay vì "auto" (co theo đúng nội dung) -
     giúp logo bên trái và khối tìm-kiếm/hotline bên phải cân bằng nhau, tên công ty ở giữa
     luôn được canh đúng tâm thay vì lệch theo bên nào rộng hơn. Cột giữa "auto" (co theo
     đúng độ dài tên công ty) để nhường tối đa không gian còn lại cho 2 bên. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 30px 0;
}
.brand-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  width: 100px; height: 100px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--orange), var(--green), var(--orange));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 38px;
  flex-shrink: 0;
}
.brand-logo-img {
  height: 110px; width: auto; max-width: 260px;
  object-fit: contain; flex-shrink: 0;
}
.brand-center {
  text-align: center;
  min-width: 0;
}
.brand-center .company {
  margin: 0;
  font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.25;
}
.brand-center .slogan {
  margin: 6px 0 0;
  font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: .4px;
  font-style: italic;
}
@media (max-width: 640px) {
  .brand-center .company { font-size: 18px; letter-spacing: .5px; }
  .brand-center .slogan { font-size: 12px; }
  .brand-logo { width: 60px; height: 60px; }
  .brand-logo-img { height: 74px; max-width: 170px; }
}
.header-tools { display: flex; align-items: center; gap: 18px; justify-self: end; }
.search-box {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  width: 150px;
  transition: width .25s ease, border-color .25s ease;
}
.search-box:focus-within {
  width: 260px;
  border-color: var(--green);
}
.search-box input {
  border: none; outline: none; font-size: 13px; flex: 1; background: transparent; min-width: 0;
}
.hotline { display: flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.hotline .icon-circle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--green);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.hotline .num { color: var(--orange); font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 15px; margin-left: 4px; }
.hotline .label { font-size: 12px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.header-tools-row1 { display: contents; }
@media (min-width: 981px) {
  /* Desktop: hàng trên = tìm kiếm + chuyển ngôn ngữ, hàng dưới = hotline (căn phải) */
  .header-tools {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .header-tools-row1 {
    display: flex;
    align-items: center;
    gap: 18px;
  }
}
.lang-switch {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 5px 12px;
  transition: border-color .2s ease, background .2s ease;
}
.lang-switch:hover { border-color: var(--green); background: var(--green-light); }
.lang-switch .flag { font-size: 15px; line-height: 1; }
.lang-switch .flag-icon { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.lang-switch .code { letter-spacing: .5px; }

/* ---------- Nav ---------- */
.main-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.main-nav .container { display: flex; align-items: center; }
.main-nav ul { display: flex; flex: 1; }
.main-nav li { position: relative; }
/* Hotline hiện trong menu xanh - CHỈ hiện sau khi đã kéo trang qua khỏi header chính (JS
   nav-toggle.js thêm class "is-stuck" cho .main-nav khi đó), tránh trùng lặp với hotline đã
   hiện sẵn ở header lúc mới vào trang. Ẩn ở mobile (xem media query dưới) vì lúc đó menu
   chuyển thành off-canvas trượt, không còn là 1 hàng ngang phù hợp để chèn thêm. */
.main-nav-hotline { display: none; align-items: center; gap: 6px; flex-shrink: 0;
  color: var(--text-dark); font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px; font-weight: 700; white-space: nowrap; padding: 0 4px 0 14px;
}
.main-nav.is-stuck .main-nav-hotline { display: flex; }
.main-nav-hotline:hover { color: var(--green-dark); }
.main-nav-hotline svg { width: 16px; height: 16px; flex-shrink: 0; }
.main-nav-hotline-label { color: var(--orange); font-weight: 700; }
.main-nav a.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 15px 13px;
  color: var(--text-dark);
  font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.main-nav li.active > a.nav-link,
.main-nav a.nav-link:hover {
  background: var(--green-light);
  color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}
.main-nav li.home > a.nav-link { padding: 15px 18px; }
.dropdown-panel {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 200px;
  box-shadow: var(--shadow);
  border-radius: 0 0 8px 8px;
  z-index: 20;
}
/* Không dùng overflow:hidden ở đây (dù để bo góc đẹp hơn) vì nó sẽ cắt luôn menu con cấp 2
   (.dropdown-subpanel) xổ ra bên phải — kể cả khi overflow:hidden được đặt trên chính item
   cuối cùng (.dropdown-cat cuối), nó vẫn cắt luôn flyout của chính item đó (bug từng gặp với
   "Nhãn Mác", rồi lặp lại với "Ép foil" khi thứ tự danh mục thay đổi). Thay vào đó bo góc trực
   tiếp trên phần tử có thể hover (link/nút) của item cuối, không cần overflow:hidden ở container. */
.dropdown-panel > a:last-child { border-radius: 0 0 8px 8px; }
.dropdown-panel > .dropdown-cat:last-child .dropdown-cat-link { border-radius: 0 0 0 8px; }
.dropdown-panel > .dropdown-cat:last-child .subcat-toggle { border-radius: 0 0 8px 0; }
.main-nav li:hover .dropdown-panel { display: block; }
.dropdown-panel a {
  display: block; padding: 10px 16px; font-size: 13px; color: var(--text-dark);
  border-bottom: 1px solid var(--border);
}
.dropdown-panel a:hover { background: var(--green-light); color: var(--green-dark); }

/* Menu danh mục sản phẩm 2 cấp: cấp 1 (vd: Ép Foil, Nhãn Mác) xổ ra cấp 2 bên phải khi hover.
   Tên danh mục (dropdown-cat-link) và nút mũi tên (subcat-toggle) tách riêng: bấm vào TÊN sẽ
   đi thẳng tới trang lọc sản phẩm (xem tất cả sp trong danh mục, gồm cả danh mục con), bấm vào
   MŨI TÊN mới xổ danh mục con ra — để mobile luôn có cách "xem tất cả" chứ không chỉ xổ menu. */
.dropdown-cat { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.dropdown-panel .dropdown-cat:last-child { border-bottom: none; }
.dropdown-cat-link { flex: 1; border-bottom: none !important; }
.subcat-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 42px; flex-shrink: 0;
  border: none;
  background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 12px;
}
.subcat-toggle:hover { background: var(--green-light); color: var(--green-dark); }
.subcat-toggle .caret { display: inline-block; transition: transform .2s ease; }
.dropdown-cat.subcat-open > .subcat-toggle .caret { transform: rotate(90deg); }
.dropdown-subpanel {
  display: none;
  position: absolute; top: 0; left: 100%;
  background: #fff; min-width: 190px;
  box-shadow: var(--shadow);
  border-radius: 8px;
  overflow: hidden;
  z-index: 21;
}
.dropdown-cat:hover .dropdown-subpanel { display: block; }
.dropdown-subpanel-viewall { font-weight: 700; color: var(--green-dark); background: var(--green-light); }
.dropdown-subpanel a {
  display: block; padding: 10px 16px; font-size: 13px; color: var(--text-dark);
  border-bottom: 1px solid var(--border);
}
.dropdown-subpanel a:hover { background: var(--green-light); color: var(--green-dark); }

/* ---------- Nội dung do trình soạn thảo Admin (TinyMCE) tạo ra ----------
   Áp dụng cho mọi nơi hiển thị nội dung bài viết/mô tả (Tin tức, Sản phẩm, Trang tĩnh,
   Tuyển dụng, Giới thiệu công ty, Thư ngõ...). Ảnh chèn vào bài viết có thể mang sẵn kích
   thước gốc (do TinyMCE gắn width/height hoặc style width/height khi người dùng kéo resize
   trong lúc soạn), nên phải ép max-width/height auto (kèm !important để thắng inline style)
   để ảnh luôn tự co giãn theo khung, không tràn ra ngoài hay to quá cỡ trên di động. */
.rich-content img { max-width: 100% !important; height: auto !important; border-radius: 6px; }
.rich-content table { max-width: 100%; }
.rich-content { overflow-x: auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--green); font-weight: 600; }
.breadcrumb .sep { margin: 0 6px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--bg-soft);
  padding: 40px 0;
}
.page-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.eyebrow {
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.page-hero h1 {
  font-size: 34px;
  color: var(--green-dark);
  margin: 8px 0 14px;
  line-height: 1.25;
}
.page-hero p { color: var(--text-muted); max-width: 480px; }
.hero-underline {
  width: 60px; height: 3px; background: var(--orange); margin: 14px 0;
}
.ph-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- Trang chủ: Banner tràn viền, mép sóng lượn ---------- */
.hero-banner {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background: #fff;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: #fff;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  z-index: 1;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-banner-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
/* Khi banner có ảnh nền (upload trong admin), làm mờ (blur thật) + phủ trắng nhẹ ở bên trái
   (nơi đặt chữ) để chữ tối vẫn đọc rõ, trong khi bên phải giữ ảnh sắc nét, rõ nét hoàn toàn.
   Dùng backdrop-filter:blur thay vì chỉ phủ lớp trắng mờ như trước, kết hợp mask-image để
   độ blur giảm dần từ trái sang phải. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.12) 58%, rgba(0,0,0,0) 82%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.12) 58%, rgba(0,0,0,0) 82%);
  z-index: 0;
}
.hero-slide > .container { position: relative; z-index: 2; width: 100%; }
.hero-banner-content {
  max-width: 560px;
  padding: 64px 0 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-banner-content .tag {
  align-self: flex-start;
}
.hero-banner-content h1 {
  color: var(--green-dark);
  font-size: 42px;
  margin: 0;
  line-height: 1.18;
}
.hero-banner-content h1 span { color: var(--orange); }
.hero-banner-content .hero-sub {
  color: var(--text-muted);
  font-size: 17px;
  margin: 0;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}
.hero-badges span {
  background: var(--green-light);
  border: 1px solid var(--green-light);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.hero-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green-light);
  border: 1px solid var(--green);
}
.hero-dots span.active {
  background: var(--orange);
  width: 24px;
  border-radius: 6px;
}
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: 80px;
  z-index: 2;
  display: block;
  pointer-events: none;
}
@media (max-width: 640px) {
  .hero-banner { min-height: 420px; }
  .hero-banner-content { padding: 50px 0 80px; }
  .hero-banner-content h1 { font-size: 30px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline-green { border-color: var(--green); color: var(--green); background: #fff; }
.btn-outline-green:hover { background: var(--green); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline-white {
  background: #fff;
  color: var(--green-dark);
  border-color: var(--green);
}
.btn-outline-white:hover { background: var(--green); color: #fff; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }

.product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.product-actions .btn { flex: 1 1 118px; justify-content: center; white-space: nowrap; }

/* ---------- Section ---------- */
.section { padding: 56px 0; }
.section.soft { background: var(--bg-soft); }
.section-title { text-align: center; margin-bottom: 34px; }
.section-title h2 {
  color: var(--green-dark);
  font-size: 26px;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.section-title h2 span { color: var(--orange); }
.section-title p { color: var(--text-muted); font-size: 14px; }
.section-title .hero-underline { margin: 10px auto 0; }

/* ---------- Khối Video giới thiệu: tiêu đề nằm chung cột với nội dung ---------- */
.video-points-title {
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.video-points-title::after {
  content: '';
  display: block;
  width: 46px; height: 3px;
  background: var(--orange);
  margin-top: 12px;
}
.video-points {
  font-family: 'Be Vietnam Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
}
.video-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-dark);
}
.video-points li:last-child { margin-bottom: 0; }
.video-grid { grid-template-columns: 2.1fr 1fr; align-items: center; gap: 30px; }
.products-layout { grid-template-columns: 260px 1fr; align-items: start; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.icon-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 18px;
  box-shadow: var(--shadow);
}
.icon-card .ic {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 32px;
}
/* Icon SVG dùng width/height cố định ngay trong file (vd 28x28px) nên không tự lớn theo
   khung .ic ở trên - ép về cỡ to hơn tại đây để icon rõ, cân đối với khung tròn 72px. */
.icon-card .ic svg { width: 34px !important; height: 34px !important; }
.icon-card .ic img { width: 34px; height: 34px; object-fit: contain; }
.icon-card h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-dark); }
.icon-card p { font-size: 14px; color: var(--text-muted); margin: 0; }

.product-card, .news-card, .service-card, .job-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ph-16x10 {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--green-light), #d7ecdd);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
}
.product-card .ph-16x10, .news-card .ph-16x10, .service-card .ph-16x10, .job-card .ph-16x10 { background: #fff; color: var(--text-muted); padding: 1px; }
.product-card .body, .news-card .body { padding: 16px; }
.product-card h3 { font-size: 15px; margin: 0 0 6px; color: var(--text-dark); }
.product-card .view-link, .news-card .view-link {
  color: var(--orange); font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.news-card .meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
}
.news-card .meta-row .news-date { font-size: 12px; font-weight: 700; color: var(--green); }

/* Khối "Sản phẩm Golden Label VN" trang chủ: thẻ danh mục ảnh + thanh tên màu xanh,
   toàn bộ thẻ là 1 link (bấm/chạm vào đâu cũng vào trang danh mục), không có nút "Xem chi tiết" riêng. */
.home-category-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(15, 61, 36, .18);
}
.home-category-card-img {
  aspect-ratio: 16/10;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 1px;
}
.home-category-card-label {
  background: #fff;
  color: var(--green);
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 14px 10px;
  border-top: 1px solid var(--border);
}
.home-category-card:hover .home-category-card-label { color: var(--orange); }

/* Trang danh sách sản phẩm: rê chuột vào ảnh thumbnail để xem ảnh to hơn + thông tin cơ bản
   (xem product-quickview.js). Icon kính lúp mờ dần hiện ra để gợi ý có thể xem thêm. */
.product-thumb-hover { position: relative; cursor: zoom-in; }
.product-thumb-hover .zoom-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 61, 36, .25);
  opacity: 0;
  transition: opacity .18s ease;
}
.product-thumb-hover:hover .zoom-hint { opacity: 1; }
.product-thumb-hover .zoom-hint img {
  width: 34px; height: 34px; padding: 8px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.product-thumb-hover template { display: none; }

.product-quickview-panel {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.product-quickview-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.product-quickview-panel .qv-image { aspect-ratio: 1/1; background: var(--bg-soft); }
.product-quickview-panel .qv-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-quickview-panel .qv-image-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--green); font-size: 12px; text-align: center; padding: 10px;
}
.product-quickview-panel .qv-body { padding: 14px 16px; }
.product-quickview-panel h4 { margin: 0 0 6px; font-size: 14.5px; color: var(--green-dark); }
.product-quickview-panel .qv-code, .product-quickview-panel .qv-cat {
  font-size: 11.5px; color: var(--text-muted); margin: 0 0 4px;
}
.product-quickview-panel .qv-specs { list-style: none; margin: 8px 0; padding: 0; font-size: 12px; color: var(--text-dark); }
.product-quickview-panel .qv-specs li { margin-bottom: 3px; }
.product-quickview-panel .qv-stock { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; }

/* Process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.process-steps::before {
  content: "";
  position: absolute; top: 30px; left: 60px; right: 60px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; }
.process-step .num {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; font-size: 22px; font-weight: 800;
}
.process-step:nth-child(odd) .num { background: var(--orange); }
.process-step h4 { font-size: 14px; margin: 0 0 4px; }
.process-step p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Trang Giới thiệu: khối "Hoạt động chính" - ảnh vuông bên trái, khung bo tròn viền cam bên phải
   với số thứ tự đè lên góc trên-trái khung (giống bố cục file hồ sơ năng lực gốc của công ty) */
.activity-row {
  display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center;
  margin-bottom: 30px;
}
.activity-thumb { border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow); }
.activity-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-box {
  position: relative; border-radius: 22px; padding: 16px 22px 16px 26px;
  border: 1.5px solid transparent;
  /* Viền gradient: đậm ở đầu (cạnh số thứ tự), mờ dần về cuối khung - giống bố cục ảnh gốc.
     Kỹ thuật 2 lớp background: lớp trong (padding-box) tô nền trắng, lớp ngoài (border-box)
     tô gradient - cách duy nhất để có viền gradient mà vẫn giữ được bo góc (border-image
     không hỗ trợ border-radius). */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, var(--orange), rgba(247, 121, 31, 0.18)) border-box;
}
.activity-num {
  position: absolute; top: -18px; left: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 0; color: #fff;
  background: linear-gradient(to right, var(--orange), var(--orange-dark));
  font-weight: 800; font-size: 18px; box-shadow: var(--shadow);
}
.activity-desc { color: var(--text-dark); font-size: 14px; line-height: 1.6; margin: 0; padding-top: 4px; }
@media (max-width: 640px) {
  .activity-row { grid-template-columns: 90px 1fr; gap: 14px; }
  .activity-box { padding: 14px 16px 14px 20px; border-radius: 16px; }
}

/* Trang Giới thiệu: tiêu đề dạng khung pill bo tròn, gradient cam mờ dần - dùng cho khối
   "Sơ đồ tổ chức" thay vì tiêu đề h2 chuẩn, giống banner trong file hồ sơ năng lực gốc */
.section-banner {
  display: inline-block; padding: 12px 44px; border-radius: 30px;
  background: linear-gradient(to right, rgba(247, 121, 31, 0.6), rgba(247, 121, 31, 0.06));
  color: var(--orange-dark); font-weight: 800; font-size: 16px; letter-spacing: .4px;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .section-banner { padding: 10px 26px; font-size: 14px; }
}

/* Trang Giới thiệu: khối "Thư ngỏ" có ảnh banner cắt chéo + logo đè lên, giống bố cục trang
   thư ngỏ trong file hồ sơ năng lực gốc (ảnh trụ sở phía trên, thư ngỏ phía dưới) */
.letter-card { padding: 0; overflow: hidden; }
.letter-banner {
  position: relative; aspect-ratio: 21 / 8; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}
.letter-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.letter-banner-logo {
  position: absolute; left: 24px; bottom: 10px;
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.94); padding: 6px 14px; border-radius: 10px;
  box-shadow: var(--shadow);
}
.letter-banner-logo img { height: 32px; width: auto; display: block; }
.letter-body { padding: 24px; }
@media (max-width: 640px) {
  .letter-banner { aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
  .letter-body { padding: 18px; }
}

/* Partners */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.partner-logo {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 10px;
  text-align: center;
  font-weight: 800;
  color: var(--text-muted);
}

/* CTA band - dùng đúng màu xanh thương hiệu (--green, giống tên công ty/logo) thay vì
   xanh đậm gần đen (--green-dark) như trước. */
.cta-band {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow);
}
.cta-band h3 { margin: 0 0 4px; font-size: 18px; color: var(--green-dark); }
.cta-band p { margin: 0; color: var(--text-muted); font-size: 13px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #fff;
  color: var(--text-dark);
  padding-top: 44px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 26px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.footer-grid > div:nth-child(1) { max-width: 300px; }
.footer-grid > div:nth-child(2) { max-width: 170px; }
.footer-grid > div:nth-child(3) { max-width: 300px; }
.footer-grid > div:nth-child(4) { max-width: 170px; }
.footer-grid h4 {
  color: var(--green-dark);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
  padding-bottom: 6px;
}
.footer-grid li { margin-bottom: 8px; font-size: 13px; }
.footer-grid a { color: var(--text-dark); }
.footer-grid .foot-brand + p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
  max-width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footer-grid a:hover { color: var(--orange); }
.footer-grid .foot-brand { display: flex; align-items: center; margin-bottom: 16px; }
.footer-grid .foot-brand .brand-logo { width: 72px; height: 72px; font-size: 28px; }
.footer-grid .foot-brand .foot-logo-img {
  height: 100px; width: auto; max-width: 100%; object-fit: contain;
}
.footer-fanpage { margin-top: 16px; max-width: 240px; }
.footer-fanpage .fb-page, .footer-fanpage iframe { max-width: 100%; }
.footer-social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer-social-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.footer-social-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.footer-contact li { display: flex; gap: 8px; align-items: flex-start; }
.footer-location { margin-top: 14px; }
.footer-location-title {
  margin: 0 0 6px; color: var(--green-dark); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
}
.footer-location .footer-contact li { font-size: 12.5px; margin-bottom: 6px; }
.footer-legal-info { margin-top: 14px; }
.footer-legal-info li { font-size: 12.5px; }
.footer-legal-info strong { font-weight: 700; }
.footer-bottom-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.footer-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-badges img { height: 42px; width: auto; max-width: 120px; object-fit: contain; }
/* Logo Giải thưởng - Chứng nhận trong cột "Chứng nhận" ở footer: hiển thị to hơn hẳn badge nhỏ
   (Bộ Công Thương/an toàn mạng) ở cuối trang, vì đây là điểm nhấn uy tín chính của cột này. */
.footer-grid .footer-badges { gap: 14px; }
.footer-grid .footer-badges img { height: 72px; max-width: 160px; }
.footer-legal-links {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.footer-legal-links a {
  display: inline-block;
  background: #fff;
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
}
.footer-legal-links a:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Trang gộp Điều khoản / Điều kiện / Chính sách bảo mật — điều hướng dạng tag */
.legal-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.legal-tab-btn {
  display: inline-block;
  background: var(--bg-soft);
  color: var(--green-dark);
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}
.legal-tab-btn:hover { background: var(--green-light); }
.legal-tab-btn.active { background: var(--orange); color: #fff; }
.legal-tab-panel { display: none; }
.legal-tab-panel.active { display: block; }
.copyright {
  text-align: center;
  background: #fff;
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 0;
  margin-top: 20px;
  border-top: 1px solid var(--border);
}
.copyright a { color: var(--orange); text-decoration: underline; }
.copyright a:hover { color: var(--orange-dark); }

/* ---------- Chat widget ---------- */
.chat-widget {
  position: fixed;
  left: 16px; bottom: 90px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 999;
}
.chat-btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; box-shadow: var(--shadow);
  position: relative;
  border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.chat-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.chat-btn.ai { background: var(--green); }
.chat-btn.zalo { background: #0068ff; }
.chat-btn.phone { background: var(--orange); }
.chat-btn .dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; background: #4ade80; border-radius: 50%;
  border: 2px solid #fff;
}
.chat-btn .tip {
  position: absolute; left: 62px; top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--text-dark); font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 6px; box-shadow: var(--shadow);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.chat-btn:hover .tip { opacity: 1; }
.chat-btn .label { display: none; } /* nhãn chữ dưới icon: chỉ hiện trên taskbar mobile, xem media query */

/* ---------- Nút "Lên đầu trang" nổi ----------
   Đặt đối xứng bên phải với chat-widget (bên trái) để không đè lên nhau. Ẩn mặc định
   (opacity/visibility), JS (nav-toggle.js) thêm class .show khi cuộn xuống quá 1 khoảng
   và bấm để cuộn mượt lên đầu trang. */
.back-to-top {
  position: fixed;
  right: 16px; bottom: 90px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dark); color: #f5c518; /* Icon màu vàng gold, đồng bộ màu logo Golden Label VN */
  border: 0; padding: 0; cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease, color .15s ease;
  z-index: 999;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--orange); color: #fff; }
.back-to-top svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Khung chat AI nổi (mở khi bấm nút "Chat AI") ---------- */
.ai-chat-panel {
  position: fixed;
  left: 16px; bottom: 160px;
  width: 328px; max-width: calc(100vw - 32px);
  max-height: 460px;
  background: #fff; border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.97);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}
.ai-chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ai-chat-panel .ai-chat-head {
  background: var(--green); color: #fff;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.ai-chat-panel .ai-chat-close {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 2px 4px; display: flex; align-items: center;
}
.ai-chat-panel .ai-chat-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: #f7faf8;
}
.ai-chat-msg { max-width: 84%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.ai-chat-msg.bot { align-self: flex-start; background: #fff; color: var(--text-dark); box-shadow: 0 1px 2px rgba(0,0,0,.08); border-bottom-left-radius: 4px; }
.ai-chat-msg.user { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-msg.typing { color: var(--text-muted); font-style: italic; }
.ai-chat-products { display: flex; flex-direction: column; gap: 4px; margin-top: -2px; }
.ai-chat-products a { font-size: 12px; color: var(--green-dark); text-decoration: underline; }
.ai-chat-panel .ai-chat-input {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.ai-chat-panel .ai-chat-input input {
  flex: 1; border: 1px solid var(--border); border-radius: 20px;
  padding: 8px 14px; font-size: 13px; outline: none; min-width: 0;
}
.ai-chat-panel .ai-chat-input button {
  background: var(--green); color: #fff; border: none; border-radius: 50%;
  width: 36px; height: 36px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-chat-panel .ai-chat-input button:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .ai-chat-panel { left: 8px; right: 8px; bottom: 78px; width: auto; max-height: 60vh; }
  /* Cỡ chữ ô nhập phải >=16px trên mobile, nếu không Safari/Chrome sẽ tự zoom cả trang
     khi bấm vào ô nhập (nhìn như "form chat bị mở rộng") — đây là hành vi mặc định của
     trình duyệt di động với input có font-size < 16px, không phải lỗi layout. */
  .ai-chat-panel .ai-chat-input input { font-size: 16px; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.form-field label .req { color: var(--orange); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit; outline: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--green);
}
.step-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--green-dark);
  margin: 26px 0 16px;
}
.step-title .step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.upload-box {
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
/* Dòng checkbox "Tôi đồng ý..." trong form Yêu cầu báo giá: checkbox và chữ căn theo
   dòng đầu tiên của chữ (align-items:flex-start) thay vì mặc định, để không bị lệch
   khi chữ xuống 2 dòng trên màn hình hẹp. */
.quote-consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.6; margin: 16px 0; color: var(--text-muted);
}
.quote-consent input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.quote-consent a { color: var(--green); }
.side-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}
.side-card h4 { margin: 0 0 14px; color: var(--green-dark); font-size: 15px; }

/* Trang Liên hệ: tên công ty phía trên khối địa chỉ */
.contact-company-name {
  margin: 0; color: var(--orange); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .4px;
}
/* Trang Liên hệ: mỗi dòng label + giá trị nằm chung 1 hàng, không ép xuống dòng riêng */
.contact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.contact-line strong { color: var(--green-dark); white-space: nowrap; }
.contact-line span { color: var(--text-muted); font-size: 13px; }
/* Mỗi dòng chỉ có 1 câu ngắn nên rút gọn padding/margin của .side-card lại cho gọn,
   tránh khoảng cách quá rộng giữa các dòng địa chỉ/điện thoại/email/giờ làm việc */
.contact-line.side-card { padding: 12px 18px; margin-bottom: 8px; }
/* Trang Liên hệ: nút chọn địa điểm (Văn phòng làm việc / Chi nhánh / Nhà máy) */
.contact-location-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.contact-location-tab {
  border: 1px solid var(--border); background: #fff; color: var(--text-muted);
  border-radius: 18px; padding: 7px 16px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.contact-location-tab:hover { border-color: var(--green); color: var(--green-dark); }
.contact-location-tab.active { background: var(--green); border-color: var(--green); color: #fff; }
/* Trang Liên hệ: khung bản đồ Google Maps nhúng thật theo địa điểm đang chọn */
.contact-map-frame { aspect-ratio: 16/10; }
.contact-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; color: var(--text-muted); }

/* Utility */
.text-center { text-align: center; }
.mt-30 { margin-top: 30px; }
.tag {
  display: inline-block; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer-grid > div:first-child .foot-brand { justify-content: center; }
  .footer-grid > div:first-child .footer-social-links { justify-content: center; }
  .footer-grid > div:nth-child(4) { grid-column: 1 / -1; max-width: none; text-align: center; }
  .footer-grid .footer-badges { justify-content: center; flex-wrap: nowrap; }
  .footer-grid .footer-badges img { height: 56px; max-width: 120px; }
  .footer-bottom-row { justify-content: center; text-align: center; }
  .footer-bottom-row .footer-badges { justify-content: center; }
  .footer-legal-links { justify-content: center; }
  .process-steps { grid-template-columns: repeat(1, 1fr); }
  .process-steps::before { display: none; }
  .page-hero .hero-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-card .body, .news-card .body { padding: 12px; }
  .product-card h3 { font-size: 13px; }
  .product-card .view-link, .news-card .view-link { font-size: 12px; }
  /* Thẻ tin tức quá hẹp khi xếp 2 cột trên mobile — "Đọc tiếp" + ngày đăng không đủ chỗ nằm
     cùng 1 hàng, chữ "Đọc tiếp" bị tách dòng lệch giữa "Đọc" và "tiếp" nhìn rất xấu. Giữ
     nguyên cùng 1 hàng (không xuống dòng) nhưng thu nhỏ cỡ chữ + khoảng cách để đủ chỗ. */
  .news-card .meta-row { gap: 6px; }
  .news-card .view-link, .news-card .meta-row .news-date { font-size: 11px; white-space: nowrap; }
  .home-category-card-label { font-size: 13px; padding: 10px 8px; }
  .header-main { flex-wrap: wrap; }
  .main-nav ul { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer-grid > div:first-child .foot-brand { justify-content: center; }
  .footer-grid > div:first-child .footer-social-links { justify-content: center; }
  /* Chứng nhận: chiếm trọn hàng để 2 logo nằm cùng 1 hàng ngang thay vì xếp chồng dọc */
  .footer-grid > div:nth-child(4) { grid-column: 1 / -1; max-width: none; text-align: center; }
  .footer-grid .footer-badges { justify-content: center; flex-wrap: nowrap; }
  .footer-grid .footer-badges img { height: 56px; max-width: 120px; }
  .footer-bottom-row { justify-content: center; text-align: center; }
  .footer-bottom-row .footer-badges { justify-content: center; }
  .footer-legal-links { justify-content: center; }
  .partner-strip { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  /* Mục Video giới thiệu: video full-width phía trên, danh sách điểm nổi bật xếp bên dưới */
  .video-grid { grid-template-columns: 1fr; gap: 16px; }
  .video-points-col { margin-top: 4px; }
  .video-points-title { font-size: 17px; margin-bottom: 10px; }
  .video-points-title::after { width: 32px; height: 2px; margin-top: 8px; }
  .video-points li { font-size: 13.5px; line-height: 1.45; gap: 8px; margin-bottom: 10px; }
  .video-points li img { width: 18px !important; height: 18px !important; }
  .products-layout { grid-template-columns: 1fr; }
  /* Trang Sản phẩm: thẻ đã full-width 1 cột nên đủ chỗ để 2 nút "Xem chi tiết" / "Đặt hàng" nằm cùng 1 hàng */
  .products-layout .grid-3 { grid-template-columns: 1fr; }
  .products-layout .product-actions .btn { flex: 1 1 0; }

  /* Trang Chi tiết sản phẩm: ảnh / thông tin / sản phẩm liên quan xếp 1 cột trên mobile
     (mặc định là grid 3 cột 1.1fr 1.3fr 0.9fr — quá chật trên điện thoại) */
  .product-detail-layout { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Trang Tin tức: danh sách bài viết + sidebar xếp 1 cột trên mobile
     (mặc định là grid 2 cột 2fr 1fr — quá chật trên điện thoại) */
  .news-index-layout { grid-template-columns: 1fr !important; margin-top: 20px !important; }
  .news-index-item { flex-direction: column !important; gap: 10px !important; }
  .news-index-thumb { width: 100% !important; aspect-ratio: 16/9 !important; }

  /* Trang Chi tiết tin tức: nội dung bài viết + "Bài viết liên quan" xếp 1 cột trên mobile */
  .news-show-layout { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Trang Yêu cầu báo giá: form + khối liên hệ xếp 1 cột; đủ chỗ để 2 nút Đặt lại/Gửi nằm cùng 1 hàng */
  .quote-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
  .quote-form-actions { flex-wrap: nowrap !important; }
  .quote-form-actions .btn { flex: 1 1 0 !important; padding-left: 8px !important; padding-right: 8px !important; }

  /* Trang Chi tiết vị trí tuyển dụng: mô tả công việc + form ứng tuyển xếp 1 cột trên mobile
     (mặc định là grid 2 cột 2fr 1fr — form bị bóp quá chật, input/textarea khó bấm) */
  .recruitment-detail-layout { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Header mobile: ẩn tên công ty/slogan + hotline, logo canh giữa, nút menu bên phải.
     min-height đủ chỗ cho logo 74px (không bị cắt trên/dưới như trước). */
  .brand-center { display: none; }
  .hotline { display: none; }
  .header-main {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0;
    min-height: 92px;
  }
  .header-main .brand-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   BỔ SUNG: Menu di động (hamburger) + fix chồng lấn mobile
   (đã duyệt qua bản demo tĩnh demo-responsive/index.html)
   ========================================================= */

/* Nút hamburger — ẩn trên desktop */
.nav-toggle {
  display: none;
  width: 40px; height: 34px;
  border: none; background: transparent;
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block; width: 26px; height: 2.5px; background: var(--green-dark);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.nav-toggle span:nth-child(2) { width: 19px; }
.nav-toggle.active span { width: 26px; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Overlay tối phía sau menu mobile khi mở */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 61, 36, 0.45);
  z-index: 40;
}
.nav-overlay.open { display: block; }

/* Nút đóng menu trượt — chỉ hiện trên mobile/tablet (xem media query bên dưới) */
.nav-close { display: none; }

@media (max-width: 980px) {
  /* Header: logo trái, hamburger phải; ẩn search/hotline dài để đỡ chật */
  .header-tools { gap: 10px; }
  .header-tools .search-box { display: none; }
  .header-tools .lang-switch { display: none; }
  .nav-toggle { display: flex; }

  /* Nav chính chuyển thành menu trượt (off-canvas) từ bên phải */
  .main-nav { background: transparent; }
  .main-nav .container { padding: 0; }
  .main-nav-hotline, .main-nav.is-stuck .main-nav-hotline { display: none; }
  .main-nav ul {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 78%; max-width: 320px;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0,0,0,.25);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 50;
    padding: 70px 0 20px;
    overflow-y: auto;
  }
  .main-nav ul.open { transform: translateX(0); }
  .main-nav li { width: 100%; }
  .main-nav a.nav-link {
    width: 100%;
    padding: 14px 22px;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border);
  }
  .main-nav li.home { display: none; } /* icon-home trùng logo, ẩn trong menu mobile */

  /* Dropdown con: hiện dạng xổ xuống ngay trong danh sách (accordion), không hover nữa */
  .dropdown-panel {
    display: none;
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: #f5f8f6;
  }
  .main-nav li:hover .dropdown-panel { display: none; }
  .main-nav li.dropdown-open > .dropdown-panel { display: block; }
  .dropdown-panel a { color: var(--text-dark); border-bottom: 1px solid var(--border); }
  .dropdown-panel a:hover { background: var(--green-light); color: var(--green-dark); }

  /* Danh mục cấp 2 trên mobile: tên danh mục bấm để đi thẳng tới trang lọc (xem tất cả),
     nút mũi tên riêng để xổ accordion — không hover-flyout nữa */
  .dropdown-cat { border-bottom: 1px solid var(--border); }
  .subcat-toggle { color: var(--text-dark); }
  .subcat-toggle:hover, .subcat-toggle:active { background: var(--green-light); color: var(--green-dark); }
  .dropdown-cat:hover .dropdown-subpanel { display: none; }
  .dropdown-cat.subcat-open > .dropdown-subpanel { display: block; }
  .dropdown-subpanel {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: #f5f8f6;
  }
  .dropdown-subpanel a { color: var(--text-dark); border-bottom: 1px solid var(--border); padding-left: 30px; }
  .dropdown-subpanel a:hover { background: var(--green-light); color: var(--green-dark); }
  .dropdown-subpanel-viewall { background: var(--green-light); color: var(--green-dark) !important; }

  /* Nút đóng ở đầu menu trượt — chỉ hiện khi menu thực sự mở (xem .open ở JS) */
  .nav-close {
    display: none;
    align-items: center; justify-content: center;
    position: fixed; top: 16px; right: 18px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--green-light); color: var(--green-dark);
    font-size: 18px; cursor: pointer; z-index: 51;
  }
  .nav-close.open { display: flex; }
}

@media (max-width: 640px) {
  /* Top-bar: xuống dòng gọn, không tràn */
  .top-bar .container { flex-wrap: wrap; gap: 6px; justify-content: center; text-align: center; }

  /* Thanh cố định dưới cùng: gộp gọi điện / chat Zalo / chat AI / chuyển ngôn ngữ vào
     chung 1 taskbar (thay cho icon chat nổi giữa màn hình đè lên nội dung). Nút chuyển
     ngôn ngữ được JS (chat-widget.js) chuyển từ header xuống đây khi màn hình <=640px.
     3 icon bên trái dạng svg-màu + nhãn chữ, giãn cách rộng rãi; nút ngôn ngữ đẩy sát phải. */
  body { padding-bottom: 66px; }
  .chat-widget {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    background: #fff;
    padding: 8px 18px;
    box-shadow: 0 -2px 12px rgba(0,0,0,.12);
    z-index: 998;
  }
  .chat-btn {
    width: auto; height: auto;
    flex-direction: column;
    gap: 3px;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    color: var(--text-muted);
  }
  .chat-btn svg { width: 22px; height: 22px; }
  .chat-btn.phone { color: var(--green); }
  .chat-btn.zalo { color: #0068ff; }
  .chat-btn.ai { color: #7c3aed; }
  .chat-btn .dot { display: none; }
  .chat-btn .tip { display: none; }
  .chat-btn .label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1px; }

  /* Nút chuyển ngôn ngữ khi nằm trong taskbar dưới cùng: đẩy sát mép phải, tách biệt
     khỏi nhóm 3 icon bên trái bằng margin-left:auto. */
  .chat-widget .lang-switch {
    display: flex;
    position: static;
    margin-left: auto;
    background: var(--bg-soft);
    border-color: var(--border);
    padding: 0 10px;
    height: 36px;
    font-size: 11px;
    z-index: auto;
  }
  .chat-widget .lang-switch .flag-icon { width: 15px; height: 15px; }
  .chat-widget .lang-switch .code { font-size: 11px; }

  /* Header: ẩn hẳn nút chuyển ngôn ngữ ở đây trên mobile — đã chuyển xuống taskbar. */
  .header-tools .lang-switch { display: none; }

  /* Nút "Lên đầu trang" trên mobile: đẩy lên trên taskbar cố định dưới cùng (cao 66px),
     thu nhỏ lại một chút cho gọn. */
  .back-to-top { right: 14px; bottom: 78px; width: 42px; height: 42px; }
  .back-to-top svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   Nhóm trang "Giới thiệu" + "Năng lực" - banner đầu trang, tab-bar, và các
   component riêng cho từng trang con (Tổng quan, Hoạt động chính, Tầm nhìn-
   Sứ mệnh-Giá trị, Sơ đồ tổ chức, Năng lực cạnh tranh/máy móc/sản phẩm).
   ========================================================================== */

/* Banner đầu trang dùng chung: ảnh nền phủ mờ + tiêu đề + breadcrumb trắng đè lên */
.capability-hero {
  position: relative; min-height: 240px; display: flex; align-items: center;
  background: linear-gradient(135deg, var(--green-dark), var(--green)) center/cover;
  background-size: cover; background-position: center; padding: 60px 0 26px;
}
.capability-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 61, 36, 0.82) 10%, rgba(15, 61, 36, 0.35) 100%);
}
/* .capability-hero là flex container (align-items:flex-end) nên .container bên trong bị co
   lại theo nội dung rồi margin:auto canh giữa nó thay vì giữ chiều rộng chuẩn như .container
   dùng ở header/tab-bar bên dưới - khiến tiêu đề bị lệch vào giữa thay vì thẳng hàng bên trái
   với phần còn lại của trang. Ép width:100% để nó rộng full và margin:auto canh giữa đúng như
   .container thường (không co lại theo chữ). */
.capability-hero .container { position: relative; z-index: 1; width: 100%; }
.capability-hero h1 { color: #fff; font-size: 30px; margin: 0 0 10px; text-transform: uppercase; }
.capability-breadcrumb { color: rgba(255, 255, 255, 0.85); font-size: 13px; }
.capability-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.capability-breadcrumb a:hover { text-decoration: underline; }
.capability-breadcrumb .sep { margin: 0 6px; opacity: .7; }
.capability-breadcrumb strong { color: var(--orange); font-weight: 700; }

/* Nền xám nhạt bao trùm toàn bộ nội dung 1 trang tab (Giới thiệu/Năng lực) - để các khối
   ".content-card" trắng nổi lên rõ ràng thành từng hạng mục riêng biệt, thay vì các section
   nối liền nhau không phân tách. */
.tabpage-bg { background: var(--bg-soft); padding: 8px 0 10px; }
.tabpage-bg .section { padding: 22px 0; }
.content-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px;
}
@media (max-width: 640px) {
  .content-card { padding: 22px 18px; }
}
@media (max-width: 640px) {
  .capability-hero { min-height: 190px; padding: 40px 0 20px; }
  .capability-hero h1 { font-size: 22px; }
}

/* Tab-bar dùng chung: khung trắng bo tròn, đè lên mép dưới banner */
.about-tabbar-wrap { margin-top: -26px; position: relative; z-index: 2; margin-bottom: 10px; }
/* 7 tab (thêm "Giải thưởng - Chứng nhận") không còn đủ chỗ để giữ nguyên padding/cỡ chữ cũ
   (vốn tính cho 6 tab) - thu gọn padding/gap/cỡ chữ 1 chút để cả 7 tab vừa đủ 1 hàng, không
   cần cuộn ngang lẫn không xuống dòng. */
.about-tabbar {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto;
}
.about-tab {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 14px 4px; font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-decoration: none; text-align: center; white-space: nowrap; border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.about-tab svg { flex-shrink: 0; width: 14px !important; height: 14px !important; }
.about-tab:hover { color: var(--green-dark); }
.about-tab.active { color: var(--green-dark); border-bottom-color: var(--green); }
@media (max-width: 900px) {
  .about-tabbar { border-radius: 10px; }
}
/* Từ tablet nhỏ tới điện thoại (~1050px trở xuống): dù đã thu cỡ chữ hết mức, 7 tab vẫn cần
   tối thiểu ~950px mới vừa 1 hàng - dưới ngưỡng đó luôn buộc phải cuộn ngang nếu giữ 1 hàng
   (đúng thứ user đã từng yêu cầu tránh, "không muốn kéo thanh trượt"). Thay vì cuộn, cho
   tab-bar tự xuống dòng thành lưới 2 cột (4 hàng: 2-2-2-1), không cuộn ngang nữa. */
@media (max-width: 1050px) {
  .about-tabbar { flex-wrap: wrap; overflow-x: visible; }
  .about-tab {
    flex: 1 1 50%; white-space: normal; line-height: 1.3; padding: 12px 6px;
    border-bottom: none; border-right: 1px solid var(--border); border-top: 1px solid var(--border);
  }
  .about-tab:nth-child(-n+2) { border-top: none; }
  .about-tab:nth-child(even) { border-right: none; }
  .about-tab.active { border-bottom: none; background: var(--green-light, #eef7f0); }
}

/* Mini badges (icon + số liệu ngắn) - dùng ở Tổng quan, Hoạt động chính */
.mini-badges { display: flex; flex-wrap: wrap; gap: 16px 22px; font-size: 13px; color: var(--text-muted); }
/* Ở Hoạt động chính: 2 mục đầu (10+, 100%) nằm ngang hàng nhau thành lưới 2 cột, mục thứ 3
   (Phục vụ khách hàng) chiếm trọn hàng dưới - đúng theo mockup, khác với 1 cột dọc trước đó. */
.mini-badges.mini-badges-col {
  display: grid; grid-template-columns: repeat(2, auto); gap: 16px 36px; min-width: 260px;
}
.mini-badges.mini-badges-col .mini-badge:nth-child(3) { grid-column: 1 / -1; }
/* Icon nằm bên trái chữ (2 dòng: giá trị đậm + nhãn mờ), không icon-lên-trên như mini-badges
   thường - đúng theo mockup riêng của khối Hoạt động chính. */
.mini-badges.mini-badges-col .mini-badge {
  flex-direction: row; align-items: center; text-align: left; gap: 10px;
}
.mini-badges.mini-badges-col .mini-badge-text { align-items: flex-start; }
/* Mỗi mini-badge (ở Tổng quan): icon bên trái, canh giữa theo chiều dọc với 2 dòng chữ bên
   phải - có đường kẻ dọc ngăn cách giữa từng cụm, thay vì icon nằm trên/chữ dưới như trước. */
.mini-badge { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 8px; }
.mini-badge svg { color: var(--green); flex-shrink: 0; width: 26px; height: 26px; }
.mini-badge-text { display: flex; flex-direction: column; line-height: 1.3; align-items: flex-start; }
.mini-badge-text strong { color: var(--text-dark); font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mini-badge-text em { color: var(--text-muted); font-size: 11.5px; font-style: normal; white-space: nowrap; }
.mini-badges:not(.mini-badges-col) .mini-badge:not(:first-child) { border-left: 1px solid var(--border); padding-left: 22px; }

/* Khung ảnh minh hoạ "Giới thiệu công ty" - nền trắng (thay vì màu gradient placeholder
   mặc định dùng chung toàn site), giống 1 khung ảnh có viền trắng bao quanh. */
.product-photo-frame { background: #fff; color: var(--text-muted); padding: 1px; }
.intro-photo-frame .ph-16x10 { background: #fff; padding: 4px; color: var(--text-muted); }
.intro-photo-frame .ph-16x10 img { border-radius: 4px; }
/* Khung ảnh minh hoạ banner đầu trang Liên hệ / Tuyển dụng / Dịch vụ - nền trắng thay vì màu
   gradient placeholder mặc định dùng chung toàn site, giống khung ảnh "Giới thiệu công ty". */
.hero-photo-frame-white .ph-16x10 { background: #fff; padding: 4px; color: var(--text-muted); }
.hero-photo-frame-white .ph-16x10 img { border-radius: 4px; }

/* Quote-card: khối "Thư ngõ" dạng thẻ với dấu ngoặc kép lớn */
.quote-card {
  background: var(--bg-soft, #f7f5ee); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 30px; position: relative; text-align: left;
}
.quote-card-mark {
  font-size: 60px; line-height: 1; color: var(--orange); font-family: Georgia, serif;
  position: absolute; top: 14px; left: 24px; opacity: .5;
}
.quote-card-subtitle { color: var(--text-muted); font-size: 12.5px; margin: 0 0 14px; font-style: italic; }
.quote-card-signature { text-align: right; margin-top: 16px; font-weight: 700; color: var(--green-dark); font-size: 13px; }

/* Sơ đồ tổ chức - cây HTML thật (ul/li lồng nhau + đường nối bằng pseudo-element).
   Tràn hết chiều rộng màn hình (thoát khỏi giới hạn .container 1180px) để có nhiều chỗ
   hơn, tránh phải kéo thanh trượt ngang trên các màn hình desktop thông thường. */
.org-chart-scroll {
  overflow-x: auto; padding-bottom: 10px;
}
.org-chart { display: inline-flex; justify-content: center; min-width: 100%; text-align: center; }
.org-chart ul { display: flex; padding-top: 22px; position: relative; }
.org-chart > ul { padding-top: 0; }
.org-chart li {
  display: flex; flex-direction: column; align-items: center; list-style: none; position: relative;
  padding: 22px 6px 0;
}
.org-chart > ul > li { padding-top: 0; }
.org-chart li::before, .org-chart li::after {
  content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--border); width: 50%; height: 22px;
}
.org-chart li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.org-chart li:only-child::before, .org-chart li:only-child::after { display: none; }
.org-chart li:only-child { padding-top: 0; }
.org-chart li:first-child::before { border: 0 none; }
.org-chart li:last-child::after { border: 0 none; }
.org-chart li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.org-chart li:first-child::after { border-radius: 6px 0 0 0; }
.org-chart > ul > li::before, .org-chart > ul > li::after { display: none; }
.org-chart ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--border); width: 0; height: 22px;
}
.org-node {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; line-height: 1.25;
  white-space: normal; max-width: 118px; border: 1px solid var(--border); background: #fff; color: var(--text-dark);
}
.org-node-depth-0 { background: var(--green-dark); color: #fff; border-color: var(--green-dark); font-size: 13.5px; max-width: none; }
.org-node-depth-1 { background: var(--orange); color: #fff; border-color: var(--orange); }
.org-node-depth-2 { background: #fff; color: var(--text-dark); }
.org-node-depth-3 { background: var(--bg-soft, #f7f5ee); color: var(--text-dark); font-weight: 600; font-size: 11.5px; }

/* Từ Phòng xuống Bộ phận: xếp dọc thẳng xuống (không toả ngang) - 1 trục dọc bên trái +
   nhánh ngang ngắn nối vào từng ô, giống bố cục mẫu thay vì kiểu cây toả ngang phía trên. */
.org-vertical-children {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin: 22px 0 0; padding-left: 22px;
}
.org-vertical-children::before {
  content: ''; position: absolute; top: -22px; bottom: 12px; left: 0;
  border-left: 2px solid var(--border);
}
.org-vertical-item { position: relative; }
.org-vertical-item::before {
  content: ''; position: absolute; top: 50%; left: -22px; width: 22px; height: 0;
  border-top: 2px solid var(--border);
}
@media (max-width: 900px) {
  /* Màn hình nhỏ vẫn không đủ chỗ dù đã nén - cho phép kéo ngang trong trường hợp này. */
  .org-node { max-width: 96px; font-size: 11px; padding: 6px 8px; }
}

/* Dải uy tín dùng chung (4 mục) */
/* Dải mỏng nền trắng, có đường kẻ dọc phân cách giữa 4 mục - khớp bố cục mẫu, thay vì
   nền tô màu không phân cách như trước. */
.trust-badges-strip {
  display: flex; flex-wrap: wrap; gap: 10px 0;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 8px;
}
.trust-badge { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; padding: 2px 20px; border-left: 1px solid var(--border); }
.trust-badge:first-child { border-left: none; }
.trust-badge-icon { color: var(--green); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.trust-badge-icon svg { width: 28px; height: 28px; }
.trust-badge strong { display: block; font-size: 13px; color: var(--text-dark); margin-bottom: 3px; white-space: nowrap; }
.trust-badge p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) {
  .trust-badge { flex: 1 1 45%; border-left: none; }
}
@media (max-width: 640px) { .trust-badge { flex: 1 1 100%; } }

/* Giá trị cốt lõi - dải mỏng nền trắng, tiêu đề bên trái + đường kẻ dọc phân cách giữa
   tiêu đề và các mục, cũng như giữa 5 mục với nhau - khớp bố cục mẫu.
   Nằm gọn trong khung .container bình thường (không cần tràn viền) - tổng chiều rộng nội
   dung (~990px) vốn đã nhỏ hơn khung container (~1140px), không cần kéo ngang. */
.core-value-row {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  background: #fff; box-shadow: var(--shadow); border-radius: var(--radius); padding: 26px 30px;
  overflow-x: auto;
}
.core-value-heading { flex-shrink: 0; padding-right: 26px; margin-right: 24px; border-right: 1px solid var(--border); }
.core-value-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: var(--green-dark); white-space: nowrap; }
.core-value-heading .hero-underline { width: 38px; height: 3px; }
.core-value-strip { display: flex; flex-wrap: nowrap; gap: 0; flex: 1; }
/* Icon nằm bên trái chữ (không còn xếp trên-dưới), và cỡ đồng đều giữa 5 icon khác nhau
   (icon-star/handshake/bulb/user/chart-bar vốn có kích thước gốc lệch nhau trong file SVG).
   Icon + chữ phóng to hơn để lấp đầy khung, cân đối với chiều cao dải thay vì nhỏ lọt thỏm. */
.core-value-item {
  display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; flex-shrink: 0;
  padding: 0 20px; border-left: 1px solid var(--border);
}
.core-value-item:first-child { border-left: none; }
.core-value-icon { color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.core-value-icon svg { width: 34px; height: 34px; }
.core-value-text { display: flex; flex-direction: column; gap: 3px; }
.core-value-title { font-size: 13.5px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; white-space: nowrap; }
.core-value-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; }
@media (max-width: 900px) {
  .core-value-row { padding: 18px; flex-wrap: wrap; overflow-x: visible; }
  .core-value-heading { border-right: none; padding-right: 0; margin-right: 0; width: 100%; margin-bottom: 12px; }
  .core-value-strip { flex-wrap: wrap; overflow-x: auto; }
  .core-value-item { border-left: none; }
}
/* Mobile hẹp: "white-space:nowrap" (chống xuống dòng trên desktop) khiến chữ tràn ngang khi
   khung quá hẹp - cho phép xuống dòng lại, xếp mỗi mục full-width có kẻ ngang ngăn cách. */
@media (max-width: 640px) {
  .core-value-title, .core-value-desc { white-space: normal; }
  .core-value-strip { flex-direction: column; flex-wrap: nowrap; gap: 12px; width: 100%; }
  .core-value-item {
    flex-shrink: 1; width: 100%; padding: 12px 0 0; border-top: 1px solid var(--border);
  }
  .core-value-item:first-child { padding-top: 0; border-top: none; }
}
/* Icon nhà máy trước tiêu đề "Giới thiệu công ty" - tiêu đề dài, nằm cạnh ảnh trong lưới 2
   cột nên chỉ có nửa chiều rộng khối thẻ; giảm cỡ chữ 1 chút so với section-title mặc định
   (26px) để "GIỚI THIỆU GOLDEN LABEL VIỆT NAM" vừa 1 dòng, không bị xuống dòng giữa chừng. */
.intro-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.intro-heading h2 svg { color: var(--green-dark); flex-shrink: 0; }
@media (max-width: 900px) {
  .core-value-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .core-value-strip { justify-content: center; width: 100%; }
}

/* Hoạt động chính - card giới thiệu đầu trang */
.activities-intro-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  background: var(--bg-soft, #f7f5ee); border-radius: var(--radius); padding: 26px; margin-bottom: 30px;
}
/* Icon to, khung tròn nền cam nhạt, đặt riêng làm cột bên trái - đúng theo mockup thật của
   khối "Sản xuất đồng bộ" (khác với các khối nhỏ dùng icon trần kiểu Giá trị cốt lõi). */
.activities-intro-icon {
  width: 92px; height: 92px; border-radius: 50%; background: #fdf1e6; color: var(--orange);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.activities-intro-icon svg { width: 42px; height: 42px; }
.activities-intro-body h3 { margin: 0 0 8px; color: var(--green-dark); font-size: 17px; text-transform: uppercase; }
.activities-intro-body div { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .activities-intro-card { grid-template-columns: 1fr; text-align: center; }
  .activities-intro-icon { margin: 0 auto; }
  .mini-badges.mini-badges-col { justify-content: center; margin: 0 auto; }
}
/* Mobile hẹp: chữ "white-space:nowrap" (chống xuống dòng trên desktop) lại gây tràn ngang khi
   khung quá hẹp - cho phép xuống dòng bình thường trở lại + gộp mini-badges-col về 1 cột và
   bỏ min-width để không bị tràn khung .content-card. */
@media (max-width: 640px) {
  .mini-badge-text strong, .mini-badge-text em,
  .trust-badge strong, .trust-badge p,
  .core-value-title, .core-value-desc { white-space: normal; }
  .mini-badges.mini-badges-col { grid-template-columns: 1fr; min-width: 0; width: 100%; gap: 12px; }
  .mini-badges:not(.mini-badges-col) {
    flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;
  }
  .mini-badges:not(.mini-badges-col) .mini-badge {
    width: 100%;
  }
  .mini-badges:not(.mini-badges-col) .mini-badge:not(:first-child) {
    border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 10px;
  }
}

/* Hoạt động chính - timeline dọc: ảnh trái, số vuông + đường nối, tiêu đề + mô tả phải */
.activity-timeline { position: relative; max-width: 860px; margin: 0 auto; }
.activity-timeline-item {
  display: grid; grid-template-columns: 170px 40px 1fr; gap: 20px; align-items: center;
  margin-bottom: 8px;
}
.activity-timeline-thumb { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.activity-timeline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-timeline-marker {
  display: flex; flex-direction: column; align-items: center; align-self: stretch; position: relative;
}
.activity-timeline-marker::before {
  content: ''; position: absolute; top: 0; bottom: -8px; left: 50%; width: 2px; background: var(--border);
  transform: translateX(-50%);
}
.activity-timeline-item:last-child .activity-timeline-marker::before { display: none; }
.activity-timeline-num {
  position: relative; z-index: 1; width: 34px; height: 34px; background: var(--orange); color: #fff;
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.activity-timeline-body h4 { margin: 0 0 6px; color: var(--green-dark); font-size: 14.5px; text-transform: uppercase; }
.activity-timeline-body p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 640px) {
  .activity-timeline-item { grid-template-columns: 90px 30px 1fr; gap: 12px; }
  .activity-timeline-thumb { aspect-ratio: 1/1; }
}

/* Tầm nhìn - Sứ mệnh - Giá trị cốt lõi: 3 card đầy đủ chiều rộng, màu khác nhau */
.pillar-card {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  border-radius: var(--radius); padding: 24px 28px; margin-bottom: 18px;
}
/* Icon trần bên trái chữ, cỡ đồng đều - cùng kiểu với Giá trị cốt lõi (không còn khung tròn
   nền màu to như trước, đổi màu icon theo từng biến thể thay vì trắng-trên-nền-màu). */
.pillar-card-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pillar-card-icon svg { width: 30px; height: 30px; }
.pillar-card-body h3 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .4px; }
.pillar-card-body div { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }
.pillar-card-green { background: var(--green-light); }
.pillar-card-green .pillar-card-icon { color: var(--green); }
.pillar-card-green h3 { color: var(--green-dark); }
.pillar-card-orange { background: #fdf1e6; }
.pillar-card-orange .pillar-card-icon { color: var(--orange); }
.pillar-card-orange h3 { color: var(--orange-dark); }
.pillar-card-blue { background: #eaf1fd; }
.pillar-card-blue .pillar-card-icon { color: #2f6fed; }
.pillar-card-blue h3 { color: #1d4ed8; }
@media (max-width: 640px) {
  .pillar-card { grid-template-columns: 1fr; text-align: center; }
  .pillar-card-icon { margin: 0 auto; }
}

/* Ảnh + câu trích dẫn (Tầm nhìn - Sứ mệnh - Giá trị): nền trắng (thay vì mảng xanh phủ mờ),
   chữ quote màu vàng đồng bộ, không còn khung nền trắng riêng bọc chữ - chữ nằm thẳng trên
   nền trắng chung của banner. */
.pillar-quote-banner {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px;
  display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 0 24px 26px;
  background: #fff center/cover; margin-top: 10px;
}
.pillar-quote-overlay { display: none; }
.pillar-quote-box { position: relative; z-index: 1; padding: 14px 34px; max-width: 92%; }
.pillar-quote-banner p { margin: 0; font-size: 17px; font-weight: 700; font-style: italic; color: #c9a227; }
.pillar-quote-mark { color: #c9a227; font-size: 20px; font-weight: 800; font-style: normal; }
.pillar-quote-highlight-a { color: #c9a227; }
.pillar-quote-highlight-b { color: #c9a227; }
@media (max-width: 640px) {
  .pillar-quote-box { padding: 12px 18px; }
  .pillar-quote-banner p { font-size: 13.5px; white-space: normal; }
}

/* Năng lực cạnh tranh: card đơn sắc + gallery + dải số liệu 5 mục */
.competitive-card {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 16px; box-shadow: var(--shadow);
}
/* Icon trần bên trái chữ, cỡ đồng đều - cùng kiểu với Giá trị cốt lõi (không còn khung tròn
   nền màu to như trước). */
.competitive-card-icon {
  color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.competitive-card-icon svg { width: 28px; height: 28px; }
.competitive-card-body h3 { margin: 0 0 6px; color: var(--green-dark); font-size: 15px; text-transform: uppercase; }
.competitive-card-body div { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.competitive-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
.competitive-gallery-item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.competitive-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stats-row-5 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; text-align: center;
  background: var(--green-light); border-radius: var(--radius); padding: 22px 10px;
}
.stats-row-item { display: flex; flex-direction: column; gap: 4px; }
.stats-row-item strong { font-size: 18px; color: var(--green-dark); }
.stats-row-item span { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 900px) {
  .competitive-card { grid-template-columns: 1fr; text-align: center; }
  .competitive-card-icon { margin: 0 auto; }
  .competitive-gallery { grid-template-columns: repeat(2, 1fr); }
  .stats-row-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Năng lực máy móc - thiết bị: thẻ ảnh + tên + số lượng */
.machine-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.machine-card-body { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.machine-card-body svg { color: var(--orange); flex-shrink: 0; }
.machine-card-body strong { display: block; font-size: 13.5px; color: var(--text-dark); }
.machine-card-body span { font-size: 12px; color: var(--text-muted); }

/* Năng lực sản phẩm: lưới ảnh nhỏ + tên */
.product-capability-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.product-capability-item { text-align: center; }
.product-capability-thumb {
  aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--bg-soft, #f7f5ee);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); margin-bottom: 8px;
}
.product-capability-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-capability-item p { margin: 0; font-size: 12.5px; color: var(--text-dark); }
@media (max-width: 900px) { .product-capability-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .product-capability-grid { grid-template-columns: repeat(2, 1fr); } }