/* ps-css-sig:737d5032f3cd — file do init.php sinh tự động từ main.css, đừng sửa tay. */

/* ===== fonts.css ===== */
/* Fonts */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/themes/flatsome-child/assets/fonts/Lexend/Lexend-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  src: url("../fonts/Material_Symbols_Outlined/MaterialSymbolsOutlined-VariableFont.ttf") format("truetype");
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;

  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ===== tokens.css ===== */
/* ============================================================
   tokens.css — Design tokens + base reset
   Nguồn: references/design-specification.txt (§5, §6, §7, §12)
   Dùng chung cho toàn site. Không hard-code lại giá trị ở component.
   ============================================================ */

:root {
  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 48px;         --lh-display: 52px;
  --fs-h2: 30px;             --lh-h2: 38px;
  --fs-section-title: 22px;  --lh-section-title: 30px;
  --fs-eyebrow: 14px;        --lh-eyebrow: 20px;
  --fs-body: 16px;           --lh-body: 25px;
  --fs-card-title: 15px;     --lh-card-title: 22px;
  --fs-small: 14px;          --lh-small: 20px;
  --fs-caption: 12px;        --lh-caption: 18px;
  --fs-stat: 24px;           --lh-stat: 30px;

  /* ---------- Brand colors ---------- */
  --c-brand-950: #012348;
  --c-brand-900: #083a6e;
  --c-brand-800: #08407c;
  --c-brand-700: #0e4e98;
  --c-brand-600: #12599f;
  --c-brand-500: #176bb5;
  --c-brand-100: #e7f0f9;
  --c-brand-50:  #f3f7fb;

  /* ---------- CTA colors (xanh lá logo, dùng cho nút/CTA) ---------- */
  --c-cta: #027439;
  --c-cta-hover: #01532a;
  /* Nền nhạt cho chip/nhãn màu CTA — cùng sắc với --c-cta, độ tương phản chữ
     xanh lá trên nền này đạt 6,4:1. */
  --c-cta-soft: #eef6f1;

  /* ---------- Neutral colors ---------- */
  --c-white: #ffffff;
  --c-page: #fdfdfe;
  --c-surface-subtle: #f8fafc;

  --c-text: #17202b;
  --c-heading: #083a6e;
  --c-text-secondary: #475467;
  --c-text-muted: #667085;

  --c-border: #dce3ea;
  --c-border-strong: #c8d5e3;
  --c-divider: #e5eaf0;
  --c-icon-muted: #7890a8;

  /* ---------- Overlays ---------- */
  --hero-overlay: linear-gradient(
    90deg,
    rgba(3, 13, 25, 0.82) 0%,
    rgba(3, 13, 25, 0.57) 35%,
    rgba(3, 13, 25, 0.14) 68%,
    rgba(3, 13, 25, 0.04) 100%
  );
  --image-bottom-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(2, 18, 34, 0.78) 100%
  );

  /* ---------- Layout ---------- */
  --container-max: 1300px;
  --container-padding: 24px;
  --grid-columns: 12;
  --grid-gap: 20px;

  --header-height: 72px;
  --hero-height: 432px;

  /* ---------- Spacing scale ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-24: 96px;

  /* ---------- Radius ---------- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --r-btn: 3px; --r-project: 5px; --r-card: 6px; --r-round: 999px;

  /* ---------- Shadows ---------- */
  --sh-card: 0 3px 14px rgba(15, 35, 55, 0.07);
  --sh-card-hover: 0 10px 28px rgba(8, 58, 110, 0.15);
  --sh-stats: 0 8px 24px rgba(15, 35, 55, 0.06);
  --sh-button: 0 4px 12px rgba(8, 64, 124, 0.18);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-normal: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Aspect ratios (khóa theo spec §4/§8) ---------- */
  --ar-hero-desktop: 10 / 3;
  --ar-hero-mobile: 3 / 4;
  --ar-product: 8 / 5;
  --ar-solution: 20 / 17;
  --ar-capability: 8 / 5;
  --ar-project: 16 / 9;
  --ar-news: 4 / 3;

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-drawer: 500;
}

/* ---------- Responsive token overrides ---------- */
@media (max-width: 1199px) {
  :root {
    --container-max: 960px;
    --container-padding: 32px;
    --grid-gap: 16px;
    --header-height: 68px;
    --hero-height: 440px;
    --fs-display: 44px; --lh-display: 50px;
  }
}

@media (max-width: 991px) {
  :root {
    --container-max: 720px;
    --container-padding: 24px;
    --grid-gap: 16px;
    --hero-height: 500px;
    --fs-display: 40px; --lh-display: 46px;
  }
}

@media (max-width: 767px) {
  :root {
    --container-max: 2000px; /* > viewport: để min() luôn chọn calc(100% - 2*padding), giữ đúng lề mobile */
    --container-padding: 16px;
    --grid-columns: 4;
    --grid-gap: 12px;
    --header-height: 64px;
    --hero-height: 560px;
    --fs-display: 34px; --lh-display: 40px;
    --fs-h2: 26px; --lh-h2: 34px;
    --fs-section-title: 20px; --lh-section-title: 28px;
  }
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-page);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* triệt tiêu bleed 16px của carousel; không phá position:sticky */
}

body {
  margin: 0;
  min-width: 320px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: min(var(--container-max), calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ---------- Icon system (sprite lucide + brand glyph) ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Brand glyph (facebook/linkedin/youtube): fill thay vì stroke */
.icon--brand { fill: currentColor; stroke: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== tailwindcss_output.css ===== */
/* 
npx tailwindcss -i ./assets/css/tailwindcss.css -o ./assets/css/tailwindcss_output.css --watch 
*/

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

.kv-container {
  width: 100%
}

@media (min-width: 640px) {
  .kv-container {
    max-width: 640px
  }
}

@media (min-width: 768px) {
  .kv-container {
    max-width: 768px
  }
}

@media (min-width: 1024px) {
  .kv-container {
    max-width: 1024px
  }
}

@media (min-width: 1280px) {
  .kv-container {
    max-width: 1280px
  }
}

@media (min-width: 1536px) {
  .kv-container {
    max-width: 1536px
  }
}

.kv-static {
  position: static !important
}

.kv-absolute {
  position: absolute !important
}

.kv-relative {
  position: relative !important
}

.kv-inset-0 {
  inset: 0px !important
}

.kv-bottom-0 {
  bottom: 0px !important
}

.kv-bottom-7 {
  bottom: 1.75rem !important
}

.kv-bottom-\[-80\%\] {
  bottom: -80% !important
}

.kv-bottom-\[3\%\] {
  bottom: 3% !important
}

.kv-left-\[-10\%\] {
  left: -10% !important
}

.kv-left-\[-30\%\] {
  left: -30% !important
}

.kv-right-\[-10\%\] {
  right: -10% !important
}

.kv-right-\[-3\%\] {
  right: -3% !important
}

.kv-right-\[0\%\] {
  right: 0% !important
}

.kv-top-0 {
  top: 0px !important
}

.kv-top-\[10\%\] {
  top: 10% !important
}

.kv-top-\[25\%\] {
  top: 25% !important
}

.kv-top-\[70\%\] {
  top: 70% !important
}

.kv-z-0 {
  z-index: 0 !important
}

.kv-z-10 {
  z-index: 10 !important
}

.kv-z-50 {
  z-index: 50 !important
}

.kv-col-span-10 {
  grid-column: span 10 / span 10 !important
}

.kv-col-span-12 {
  grid-column: span 12 / span 12 !important
}

.kv-col-span-2 {
  grid-column: span 2 / span 2 !important
}

.kv-m-auto {
  margin: auto !important
}

.kv-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important
}

.kv-my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important
}

.kv-my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important
}

.kv-my-5 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important
}

.kv-mb-10 {
  margin-bottom: 2.5rem !important
}

.kv-mb-5 {
  margin-bottom: 1.25rem !important
}

.kv-mb-\[18px\] {
  margin-bottom: 18px !important
}

.kv-mt-1 {
  margin-top: 0.25rem !important
}

.kv-mt-10 {
  margin-top: 2.5rem !important
}

.kv-mt-16 {
  margin-top: 4rem !important
}

.kv-mt-2 {
  margin-top: 0.5rem !important
}

.kv-mt-4 {
  margin-top: 1rem !important
}

.kv-mt-6 {
  margin-top: 1.5rem !important
}

.kv-mt-7 {
  margin-top: 1.75rem !important
}

.kv-mt-\[18px\] {
  margin-top: 18px !important
}

.kv-block {
  display: block !important
}

.kv-flex {
  display: flex !important
}

.kv-grid {
  display: grid !important
}

.kv-hidden {
  display: none !important
}

.kv-h-7 {
  height: 1.75rem !important
}

.kv-h-\[160px\] {
  height: 160px !important
}

.kv-h-\[260px\] {
  height: 260px !important
}

.kv-h-\[430px\] {
  height: 430px !important
}

.kv-h-\[530px\] {
  height: 530px !important
}

.kv-h-\[700px\] {
  height: 700px !important
}

.kv-h-auto {
  height: auto !important
}

.kv-h-full {
  height: 100% !important
}

.kv-max-h-\[225px\] {
  max-height: 225px !important
}

.kv-min-h-\[260px\] {
  min-height: 260px !important
}

.kv-min-h-fit {
  min-height: -moz-fit-content !important;
  min-height: fit-content !important
}

.kv-w-\[226px\] {
  width: 226px !important
}

.kv-w-\[430px\] {
  width: 430px !important
}

.kv-w-\[530px\] {
  width: 530px !important
}

.kv-w-\[700px\] {
  width: 700px !important
}

.kv-w-\[90\%\] {
  width: 90% !important
}

.kv-w-full {
  width: 100% !important
}

.kv-min-w-\[400px\] {
  min-width: 400px !important
}

.kv-max-w-\[90\%\] {
  max-width: 90% !important
}

.kv-max-w-full {
  max-width: 100% !important
}

.kv-cursor-pointer {
  cursor: pointer !important
}

.kv-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important
}

.kv-flex-col {
  flex-direction: column !important
}

.kv-items-center {
  align-items: center !important
}

.kv-items-stretch {
  align-items: stretch !important
}

.kv-justify-center {
  justify-content: center !important
}

.kv-justify-between {
  justify-content: space-between !important
}

.kv-gap-x-6 {
  -moz-column-gap: 1.5rem !important;
       column-gap: 1.5rem !important
}

.kv-gap-y-7 {
  row-gap: 1.75rem !important
}

.kv-gap-y-8 {
  row-gap: 2rem !important
}

.kv-rounded {
  border-radius: 0.25rem !important
}

.kv-rounded-2xl {
  border-radius: 1rem !important
}

.kv-rounded-\[32px\] {
  border-radius: 32px !important
}

.kv-rounded-\[50\%\] {
  border-radius: 50% !important
}

.kv-rounded-full {
  border-radius: 9999px !important
}

.kv-rounded-md {
  border-radius: 0.375rem !important
}

.kv-rounded-xl {
  border-radius: 0.75rem !important
}

.kv-border {
  border-width: 1px !important
}

.kv-border-solid {
  border-style: solid !important
}

.kv-border-none {
  border-style: none !important
}

.kv-border-zinc-400 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1)) !important
}

.kv-bg-\[\#f9fafb\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}

.kv-bg-\[\#ffe81a\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 232 26 / var(--tw-bg-opacity, 1)) !important
}

.kv-bg-blue-500 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)) !important
}

.kv-bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important
}

.kv-bg-\[radial-gradient\(circle_at_center\,_\#00AB47_0\%\,_\#9CE6BB_100\%\)\] {
  background-image: radial-gradient(circle at center, #00AB47 0%, #9CE6BB 100%) !important
}

.kv-bg-\[radial-gradient\(circle_at_center\,_\#D92929_0\%\,_\#FFC6C6_100\%\)\] {
  background-image: radial-gradient(circle at center, #D92929 0%, #FFC6C6 100%) !important
}

.kv-bg-\[radial-gradient\(circle_at_center\,_\#FFECC9_0\%\,_\#F2A20C_100\%\)\] {
  background-image: radial-gradient(circle at center, #FFECC9 0%, #F2A20C 100%) !important
}

.kv-bg-cover {
  background-size: cover !important
}

.kv-bg-center {
  background-position: center !important
}

.kv-bg-no-repeat {
  background-repeat: no-repeat !important
}

.kv-object-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important
}

.kv-p-3 {
  padding: 0.75rem !important
}

.kv-p-4 {
  padding: 1rem !important
}

.kv-px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important
}

.kv-px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important
}

.kv-px-\[27px\] {
  padding-left: 27px !important;
  padding-right: 27px !important
}

.kv-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important
}

.kv-py-20 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important
}

.kv-py-7 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important
}

.kv-pb-24 {
  padding-bottom: 6rem !important
}

.kv-pt-11 {
  padding-top: 2.75rem !important
}

.kv-pt-\[180px\] {
  padding-top: 180px !important
}

.kv-pt-\[60px\] {
  padding-top: 60px !important
}

.kv-text-left {
  text-align: left !important
}

.kv-text-center {
  text-align: center !important
}

.kv-text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important
}

.kv-text-\[12px\] {
  font-size: 12px !important
}

.kv-text-\[14px\] {
  font-size: 14px !important
}

.kv-text-\[42px\] {
  font-size: 42px !important
}

.kv-text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important
}

.kv-text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important
}

.kv-text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important
}

.kv-font-bold {
  font-weight: 700 !important
}

.kv-font-medium {
  font-weight: 500 !important
}

.kv-font-normal {
  font-weight: 400 !important
}

.kv-italic {
  font-style: italic !important
}

.kv-leading-5 {
  line-height: 1.25rem !important
}

.kv-leading-6 {
  line-height: 1.5rem !important
}

.kv-leading-\[56px\] {
  line-height: 56px !important
}

.kv-text-\[\#0F71F2\] {
  --tw-text-opacity: 1 !important;
  color: rgb(15 113 242 / var(--tw-text-opacity, 1)) !important
}

.kv-text-\[\#344054\] {
  --tw-text-opacity: 1 !important;
  color: rgb(52 64 84 / var(--tw-text-opacity, 1)) !important
}

.kv-text-\[\#667085\] {
  --tw-text-opacity: 1 !important;
  color: rgb(102 112 133 / var(--tw-text-opacity, 1)) !important
}

.kv-text-\[\#98A2B3\] {
  --tw-text-opacity: 1 !important;
  color: rgb(152 162 179 / var(--tw-text-opacity, 1)) !important
}

.kv-text-gray-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

.kv-text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

.kv-opacity-25 {
  opacity: 0.25 !important
}

.kv-opacity-\[0\.03\] {
  opacity: 0.03 !important
}

.kv-shadow-\[0px_32px_120px_0px_\#1A73E80F\] {
  --tw-shadow: 0px 32px 120px 0px #1A73E80F !important;
  --tw-shadow-colored: 0px 32px 120px 0px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.kv-shadow-\[1px_8px_24px_0px_\#00000014\] {
  --tw-shadow: 1px 8px 24px 0px #00000014 !important;
  --tw-shadow-colored: 1px 8px 24px 0px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.kv-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.kv-shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.kv-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.kv-backdrop-blur-\[150px\] {
  --tw-backdrop-blur: blur(150px) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}

.kv-backdrop-blur-md {
  --tw-backdrop-blur: blur(12px) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}

.hover\:kv-bg-blue-600:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)) !important
}

@media (min-width: 768px) {
  .md\:kv-absolute {
    position: absolute !important
  }

  .md\:kv-bottom-0 {
    bottom: 0px !important
  }

  .md\:kv-bottom-\[10\%\] {
    bottom: 10% !important
  }

  .md\:kv-left-\[-30\%\] {
    left: -30% !important
  }

  .md\:kv-right-\[5\%\] {
    right: 5% !important
  }

  .md\:kv-top-\[-20\%\] {
    top: -20% !important
  }

  .md\:kv-top-\[7\%\] {
    top: 7% !important
  }

  .md\:kv-col-span-3 {
    grid-column: span 3 / span 3 !important
  }

  .md\:kv-col-span-4 {
    grid-column: span 4 / span 4 !important
  }

  .md\:kv-col-span-5 {
    grid-column: span 5 / span 5 !important
  }

  .md\:kv-col-span-6 {
    grid-column: span 6 / span 6 !important
  }

  .md\:kv-col-span-7 {
    grid-column: span 7 / span 7 !important
  }

  .md\:kv-mb-2 {
    margin-bottom: 0.5rem !important
  }

  .md\:kv-mb-6 {
    margin-bottom: 1.5rem !important
  }

  .md\:kv-mb-\[14px\] {
    margin-bottom: 14px !important
  }

  .md\:kv-mt-0 {
    margin-top: 0px !important
  }

  .md\:kv-block {
    display: block !important
  }

  .md\:kv-grid {
    display: grid !important
  }

  .md\:kv-hidden {
    display: none !important
  }

  .md\:kv-h-\[120\%\] {
    height: 120% !important
  }

  .md\:kv-min-h-full {
    min-height: 100% !important
  }

  .md\:kv-w-full {
    width: 100% !important
  }

  .md\:kv-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important
  }

  .md\:kv-gap-x-6 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important
  }

  .md\:kv-gap-x-8 {
    -moz-column-gap: 2rem !important;
         column-gap: 2rem !important
  }

  .md\:kv-gap-y-0 {
    row-gap: 0px !important
  }

  .md\:kv-gap-y-12 {
    row-gap: 3rem !important
  }

  .md\:kv-rounded-br-none {
    border-bottom-right-radius: 0px !important
  }

  .md\:kv-rounded-tr-none {
    border-top-right-radius: 0px !important
  }

  .md\:kv-p-0 {
    padding: 0px !important
  }

  .md\:kv-p-10 {
    padding: 2.5rem !important
  }

  .md\:kv-p-4 {
    padding: 1rem !important
  }

  .md\:kv-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important
  }

  .md\:kv-pb-0 {
    padding-bottom: 0px !important
  }

  .md\:kv-pt-4 {
    padding-top: 1rem !important
  }

  .md\:kv-text-\[14px\] {
    font-size: 14px !important
  }

  .md\:kv-text-\[42px\] {
    font-size: 42px !important
  }

  .md\:kv-leading-5 {
    line-height: 1.25rem !important
  }

  .md\:kv-leading-\[56px\] {
    line-height: 56px !important
  }
}
/* ===== general.css ===== */
:root {
  --primary-blue: #1773cf;
  --primary-text: #2c3e50;
  --second-text: #546e7a;
  --black-text: #111418;
}

#main {
  background-color: #fdfdfe;
}

/* Flatsome tự thêm margin-left:1.3em cho li qua rule
   ".col-inner ol li, .col-inner ul li, .entry-content ol li, .entry-content ul li,
   .entry-summary ol li, .entry-summary ul li" (flatsome.css) — reset về 0 cho
   toàn site vì các list component tự custom (profile-list, footer-list, ...)
   đã tự quản spacing bằng gap/padding riêng, không cần margin mặc định này.
   Loại trừ li trong #header vì menu (nav, mobile sidebar...) cần margin mặc
   định của Flatsome để căn khoảng cách giữa các mục menu. */
li:not(#header li) {
  margin: 0 !important;
}

/* Nút "lên đầu trang" của Flatsome (.back-to-top).

   Flatsome gắn cho nó class .z-1, mà .z-1 trong flatsome.css chỉ là z-index:21.
   Cụm "Nút liên hệ nổi" (plugin phuson-float-contact) đứng ở z-index 9990 và nằm
   đúng góc dưới bên phải — cùng chỗ với nút này — nên nút bị đè mất, bấm không được.

   Đặt 99999 để luôn nổi trên cùng. Vẫn để dưới mốc 999999 mà lightbox/modal của
   Flatsome hay dùng, tránh nút này che popup.

   Viết .back-to-top.z-1 (specificity 0,2,0) để thắng .z-1 (0,1,0) bằng độ ưu tiên
   chứ không phụ thuộc thứ tự file — khỏi cần !important. Kèm luôn .back-to-top trần
   phòng khi class .z-1 bị gỡ khỏi nút ở Customizer. */
.back-to-top,
.back-to-top.z-1 {
  z-index: 99999;
}

/* icon
   Hệ icon mask-image: mỗi .icon-<name> tô màu file SVG bằng background-color +
   mask-image, nhờ đó icon ăn theo `color` của phần tử cha (dùng <img src> thì
   không thể đổi màu bằng CSS).
   URL trỏ vào Media Library (/wp-content/uploads/2026/07/icon-<name>.svg) theo
   quy ước chung của site, không trỏ vào assets/imgs/ của theme nữa. */
.icon-chevron-right {
  display: inline-block;
  width: 20px; height: 20px;
  background-color: currentColor; /* đây là màu bạn muốn */
  -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-chevron-right.svg');
  mask-image: url('/wp-content/uploads/2026/07/icon-chevron-right.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-search,
.icon-search-x,
.icon-facebook,
.icon-linkedin,
.icon-youtube,
.icon-video,
.icon-phone,
.icon-mail,
.icon-globe,
.icon-map-pin,
.icon-chevron-down,
.icon-arrow-right,
.icon-menu,
.icon-x,
.icon-circle-check,
.icon-check,
.icon-lock-keyhole,
.icon-scale,
.icon-clipboard-check,
.icon-target,
.icon-eye,
.icon-gem,
.icon-download,
.icon-ship,
.icon-award,
.icon-briefcase,
.icon-handshake,
.icon-wrench,
.icon-layers,
.icon-zalo,
.icon-stat-calendar,
.icon-stat-factory,
.icon-stat-area,
.icon-stat-people,
.icon-stat-buildings,
.icon-calendar-days,
.icon-factory,
.icon-scan-line,
.icon-users,
.icon-building-2,
.icon-cpu,
.icon-badge-check,
.icon-truck,
.icon-headset,
.icon-warehouse,
.icon-snowflake,
.icon-flask-conical,
.icon-sun-medium,
.icon-shield-check,
.icon-file-text,
.icon-file-spreadsheet,
.icon-file-image,
.icon-file-chart-column,
.icon-book-open,
.icon-table-properties,
.icon-file-cog,
.icon-user,
.icon-heart {
  display: inline-block;
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-search { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-search.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-search.svg'); }
.icon-search-x { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-search-x.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-search-x.svg'); }
.icon-facebook { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-facebook.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-facebook.svg'); }
.icon-linkedin { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-linkedin.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-linkedin.svg'); }
.icon-youtube { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-youtube.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-youtube.svg'); }
.icon-video { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-video.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-video.svg'); }
.icon-phone { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-phone.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-phone.svg'); }
.icon-mail { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-mail.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-mail.svg'); }
.icon-globe { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-globe.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-globe.svg'); }
.icon-map-pin { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-map-pin.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-map-pin.svg'); }
.icon-chevron-down { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-chevron-down.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-chevron-down.svg'); }
.icon-arrow-right { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-arrow-right.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-arrow-right.svg'); }
.icon-menu { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-menu.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-menu.svg'); }
.icon-x { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-x.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-x.svg'); }
.icon-circle-check { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-circle-check.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-circle-check.svg'); }
.icon-check { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-check.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-check.svg'); }
.icon-lock-keyhole { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-lock-keyhole.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-lock-keyhole.svg'); }
.icon-scale { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-scale.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-scale.svg'); }
.icon-clipboard-check { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-clipboard-check.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-clipboard-check.svg'); }
.icon-target { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-target.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-target.svg'); }
.icon-eye { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-eye.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-eye.svg'); }
.icon-gem { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-gem.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-gem.svg'); }
.icon-download { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-download.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-download.svg'); }
.icon-ship { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-ship.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-ship.svg'); }
.icon-award { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-award.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-award.svg'); }
.icon-briefcase { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-briefcase.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-briefcase.svg'); }
.icon-handshake { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-handshake.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-handshake.svg'); }
.icon-wrench { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-wrench.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-wrench.svg'); }
.icon-layers { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-layers.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-layers.svg'); }
.icon-zalo { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-zalo.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-zalo.svg'); }
.icon-stat-calendar { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-stat-calendar.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-stat-calendar.svg'); }
.icon-stat-factory { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-stat-factory.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-stat-factory.svg'); }
.icon-stat-area { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-stat-area.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-stat-area.svg'); }
.icon-stat-people { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-stat-people.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-stat-people.svg'); }
.icon-stat-buildings { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-stat-buildings.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-stat-buildings.svg'); }
.icon-calendar-days { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-calendar-days.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-calendar-days.svg'); }
.icon-factory { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-factory.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-factory.svg'); }
.icon-scan-line { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-scan-line.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-scan-line.svg'); }
.icon-users { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-users.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-users.svg'); }
.icon-user { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-user.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-user.svg'); }
.icon-heart { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-heart.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-heart.svg'); }
.icon-building-2 { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-building-2.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-building-2.svg'); }
.icon-cpu { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-cpu.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-cpu.svg'); }
.icon-badge-check { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-badge-check.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-badge-check.svg'); }
.icon-truck { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-truck.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-truck.svg'); }
.icon-headset { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-headset.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-headset.svg'); }
.icon-warehouse { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-warehouse.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-warehouse.svg'); }
.icon-snowflake { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-snowflake.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-snowflake.svg'); }
.icon-flask-conical { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-flask-conical.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-flask-conical.svg'); }
.icon-sun-medium { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-sun-medium.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-sun-medium.svg'); }
.icon-shield-check { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-shield-check.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-shield-check.svg'); }
.icon-file-text { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-file-text.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-file-text.svg'); }
.icon-file-spreadsheet { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-file-spreadsheet.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-file-spreadsheet.svg'); }
.icon-file-image { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-file-image.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-file-image.svg'); }
.icon-file-chart-column { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-file-chart-column.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-file-chart-column.svg'); }
.icon-book-open { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-book-open.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-book-open.svg'); }
.icon-table-properties { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-table-properties.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-table-properties.svg'); }
.icon-file-cog { -webkit-mask-image: url('/wp-content/uploads/2026/07/icon-file-cog.svg'); mask-image: url('/wp-content/uploads/2026/07/icon-file-cog.svg'); }

/* Vùng bấm của link mũi tên trên mobile.
   Bản gốc không có padding nên chiều cao đúng bằng một dòng chữ (đo được 20px).
   WCAG 2.2 mục 2.5.8 yêu cầu tối thiểu 24x24px, mà 20px thì ngón tay bấm hay
   trượt sang link kế bên. Nới bằng padding dọc chứ không đặt min-height: link
   nằm trong dòng chữ vẫn ăn theo nhịp dòng, không đội khoảng cách lên. */
@media (max-width: 767px) {
  .link-arrow {
    padding-block: 6px;
  }
}

/* ===== header.css ===== */
/* Header */
/* Language switcher Polylang (dạng phẳng "VI | EN") */
.lang-switch ul {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--c-text-muted, #667085);
  list-style: none;
  padding: 0;
  margin: 0;
}
.lang-switch li {
  display: flex;
  align-items: center;
}
.lang-switch li a {
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
}
.lang-switch li a[aria-current="true"] {
  color: #0e4e98;
  font-weight: 600;
}
/* Thanh chắn dọc giữa VI và EN, cách đều 6px hai bên (bên trái ăn theo gap:6px của ul) */
.lang-switch li:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 6px;
  background-color: var(--c-border, #dce3ea);
  vertical-align: middle;
}

/* Nút "Nhận báo giá" trong header — theo .btn/.btn--header của thiết kế gốc */
/* #header + .header-nav để thắng độ đặc hiệu + !important để đè text-transform/underline mà class
   nav-uppercase / nav-line-bottom của Flatsome tự áp lên mọi <a> trong khu vực nav phải */
#header .header-nav a.btn--header {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px !important;
  padding: 0 18px !important;
  margin-left: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  white-space: nowrap;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  background: #027439;
  color: #fff !important;
  transition: background 0.22s cubic-bezier(0.2, 0, 0, 1);
}
#header .header-nav a.btn--header:hover {
  background: #01532a;
  color: #fff !important;
  text-decoration: none !important;
}


/* ============================================================
   Menu off-canvas trên mobile — bề rộng ngăn kéo
   ============================================================
   Flatsome điều khiển bề rộng bằng biến --drawer-width; .mfp-content lấy nó cho
   cả `width` lẫn `transform: translateX()` khi trượt ra/vào, nên chỉ cần đổi
   biến là cả hai khớp theo, không phải sửa từng rule.

   Mặc định 300px quá hẹp: menu nhiều cấp + ô tìm kiếm có hàng chip khu vực bị
   bóp lại, chữ trong ô nhập gần như dính vào hai mép. Nâng lên 90% bề ngang màn
   hình theo yêu cầu.

   !important + lặp selector: giá trị 300px do Flatsome in ra trong thẻ <style>
   sinh từ Customizer, mà khối đó nằm ở wp_head priority 100 — tức LUÔN đứng sau
   file CSS này trong <head>. Cùng specificity thì rule sau thắng, nên đây là
   cách duy nhất đè được mà không phải vào Customizer chỉnh tay. */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
  --drawer-width: 90vw !important;
}

li.custom.html_top_right_text:hover > a::before {
  content: "" !important;
  width: 0px !important;
  height: 0px !important;
  background-color: transparent !important;
}
/* ===== headerSearch.css ===== */
/* ============================================================
   Ô tìm kiếm Phú Sơn (.ps-search)

   Markup : template-parts/header/partials/ps-search-form.php   (ruột dùng chung)
            template-parts/header/partials/element-search.php   (vỏ dropdown desktop)
            template-parts/header/partials/element-search-form.php (vỏ inline mobile)
   JS     : assets/js/headerSearch.js
   Backend: hooks/header_search.php

   HAI BIẾN THỂ, MỘT BỘ RUỘT
     .ps-search--dropdown  nút icon trong header desktop, panel thả xuống, neo phải.
     .ps-search--inline    nằm sẵn trong menu off-canvas mobile, luôn mở, full width.
   Phần lớn rule bên dưới dùng chung; hai khối cuối file mới tách riêng.

   VÌ SAO KHÔNG PREFIX BẰNG #header
   Bản inline sống trong <div id="main-menu" class="mobile-sidebar"> — phần tử này
   Flatsome in ra ở CUỐI <body>, NGOÀI #header. Mọi rule viết dạng "#header .ps-search"
   sẽ không với tới nó, và đó đúng là lý do giao diện tìm kiếm trên mobile trước đây
   không ăn style nào. Nay neo bằng chính .ps-search, lặp hai class
   (.ps-search .ps-search__x = 0,2,0) là đủ thắng các rule của Flatsome nhắm vào
   `button`, `.button` hay `.nav > li > a`.

   Riêng !important vẫn giữ ở màu chữ / text-transform / text-decoration: những
   thứ đó do Flatsome in ra từ Customizer trong thẻ <style> nằm SAU file này trong
   <head> (xem ghi chú dài ở đầu assets/css/main.css), cùng specificity thì rule
   sau thắng.
   ============================================================ */

.ps-search {
  position: relative;
  display: flex;
  align-items: center;
}

/* ---------- Nút icon (chỉ bản dropdown) ---------- */

/* Nút vuông cùng chiều cao 38px với .btn--header ("Nhận báo giá") đứng cạnh,
   để hàng phần tử bên phải header thẳng đáy với nhau. */
.ps-search .ps-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--c-heading);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.ps-search .ps-search__toggle:hover {
  background: var(--c-brand-50);
  border-color: var(--c-border);
  color: var(--c-brand-700);
}

/* Trạng thái mở: giữ nút sáng để người dùng thấy panel đang thuộc về nút nào. */
.ps-search.is-open .ps-search__toggle {
  background: var(--c-brand-100);
  border-color: var(--c-border-strong);
  color: var(--c-brand-700);
}

.ps-search__toggle-icon {
  width: 20px;
  height: 20px;
}

/* ---------- Panel (chỉ bản dropdown) ---------- */

.ps-search__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--z-header) + 10);
  width: min(680px, calc(100vw - 32px));
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card-hover);
  text-align: left;
}

.ps-search__panel[hidden] { display: none; }

/* Mũi tên nhỏ nối panel với nút, dựng bằng hai hình vuông xoay 45°: lớp dưới ăn
   màu viền, lớp trên ăn màu nền và nhích xuống 1px để che đúng cạnh viền. */
.ps-search__panel::before,
.ps-search__panel::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 12px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.ps-search__panel::before { background: var(--c-border); }
.ps-search__panel::after { top: -5px; background: var(--c-white); }

/* ---------- Thanh nhập ---------- */

/* Cùng ngôn ngữ với .doc-search ở trang Tài liệu (pages.css): viền mảnh, icon
   xám, nút đặc bên phải. */
.ps-search__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* :focus-within thay cho :focus trên input — để cả khung sáng lên chứ không chỉ
   ô chữ, và outline mặc định của tokens.css bị tắt vì đã có tín hiệu này. */
.ps-search__bar:focus-within {
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}

.ps-search__bar-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-icon-muted);
}

.ps-search .ps-search__input {
  flex: 1;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-body);
  line-height: 34px;
  color: var(--c-text);
  text-transform: none;
}

.ps-search .ps-search__input:focus {
  outline: 0;
  box-shadow: none;
}

.ps-search__input::placeholder { color: var(--c-text-muted); }

/* Nút "x" mặc định của WebKit trong <input type="search"> trùng chức năng với
   .ps-search__clear và không tạo dáng được — bỏ hẳn. */
.ps-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ps-search .ps-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}
.ps-search .ps-search__clear:hover {
  background: var(--c-surface-subtle);
  color: var(--c-text);
}
.ps-search .ps-search__clear[hidden] { display: none; }
.ps-search__clear .icon { width: 15px; height: 15px; }

.ps-search .ps-search__submit {
  flex: none;
  width: auto;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-btn);
  background: var(--c-brand-700);
  color: var(--c-white) !important;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 34px;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.ps-search .ps-search__submit:hover { background: var(--c-brand-900); }

/* ---------- Chip khu vực ---------- */

.ps-search__scopes-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* Nhãn "Tìm trong": ở dropdown desktop hàng chip nằm ngay dưới ô nhập nên ngữ
   cảnh tự hiểu, nhưng trong menu mobile nó lọt giữa một cột dài toàn mục menu —
   không có nhãn thì trông như một hàng tag không rõ để làm gì. */
.ps-search__scopes-label {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.ps-search__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ps-search .ps-search__chip {
  width: auto;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
  background: var(--c-white);
  color: var(--c-text-secondary) !important;
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 26px;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.ps-search .ps-search__chip:hover {
  border-color: var(--c-border-strong);
  background: var(--c-brand-50);
  color: var(--c-brand-700) !important;
}

.ps-search .ps-search__chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-brand-700);
  color: var(--c-white) !important;
  font-weight: var(--fw-semibold);
}

/* ---------- Kết quả ---------- */

.ps-search__results:not(:empty) {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  /* Chừa chỗ cho thanh cuộn để hàng kết quả không nhảy ngang khi danh sách dài. */
  scrollbar-gutter: stable;
}

.ps-search__group + .ps-search__group { margin-top: var(--sp-4); }

.ps-search__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-divider);
}

.ps-search .ps-search__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted) !important;
}
.ps-search__group-title .icon {
  width: 15px;
  height: 15px;
  color: var(--c-brand-600);
}

.ps-search .ps-search__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 18px;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--c-brand-700) !important;
}
.ps-search .ps-search__more:hover { color: var(--c-brand-900) !important; }
.ps-search__more .icon { width: 13px; height: 13px; }

.ps-search .ps-search__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text) !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease);
}
.ps-search .ps-search__row:hover,
.ps-search .ps-search__row:focus-visible {
  background: var(--c-brand-50);
  outline: 0;
}
.ps-search .ps-search__row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c-brand-500);
}

.ps-search__thumb {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--c-surface-subtle);
}

/* Bài chưa đặt ảnh đại diện: ô nền nhạt mang icon của lĩnh vực, để chiều cao
   mọi hàng vẫn bằng nhau. */
.ps-search__thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  color: var(--c-brand-600);
}
.ps-search__thumb--icon .icon { width: 20px; height: 20px; }

.ps-search__row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* line-clamp 1 dòng thay vì text-overflow: ellipsis vì phần tử là flex item bên
   trong flex item — chiều rộng chỉ tính đúng khi có min-width:0 ở cả hai cấp. */
.ps-search__row-title,
.ps-search__row-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.ps-search__row-title {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: 22px;
  color: var(--c-heading);
}

/* Phần trùng từ khóa: đổi màu + đậm chứ không tô nền vàng như <mark> mặc định. */
.ps-search__row-title mark {
  background: transparent;
  color: var(--c-brand-700);
  font-weight: var(--fw-bold);
}

.ps-search__row-desc {
  font-size: var(--fs-caption);
  line-height: 18px;
  color: var(--c-text-muted);
}

.ps-search .ps-search__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-4);
  padding: 10px;
  border-top: 1px solid var(--c-divider);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--c-brand-700) !important;
}
.ps-search .ps-search__all:hover { color: var(--c-brand-900) !important; }
.ps-search__all .icon { width: 15px; height: 15px; }

/* ---------- Rỗng / lỗi / đang tải ---------- */

.ps-search__empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.ps-search__empty .icon {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--sp-3);
  color: var(--c-icon-muted);
}
.ps-search__empty-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.ps-search__empty-hint {
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}
.ps-search__msg {
  padding: var(--sp-5) 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Vạch tiến trình chạy dọc mép trên thanh nhập trong lúc chờ AJAX — nhẹ hơn
   spinner và không làm nội dung cũ nhảy chỗ. */
.ps-search.is-loading .ps-search__bar {
  position: relative;
  overflow: hidden;
}
.ps-search.is-loading .ps-search__bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 40%;
  background: var(--c-brand-500);
  border-radius: var(--r-round);
  animation: ps-search-progress 900ms var(--ease) infinite;
}

@keyframes ps-search-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-search.is-loading .ps-search__bar::after { animation-duration: 3s; }
}

/* ============================================================
   Biến thể INLINE — menu off-canvas trên mobile
   ============================================================
   Vỏ ở template-parts/header/partials/element-search-form.php. Không có nút bật
   tắt: form hiện sẵn, chiếm trọn bề ngang của ngăn kéo.

   Neo theo .mobile-sidebar cho các rule cần gỡ style của Flatsome, vì trong
   ngăn kéo thẻ <li> của ta là con của ul.nav.nav-sidebar.nav-vertical.nav-uppercase
   — bộ class đó áp viền ngăn cách, width 100% và VIẾT HOA lên mọi thứ bên trong.
   ============================================================ */

/* Lề ngang 30px khớp đúng .nav-sidebar.nav-vertical > li > a của Flatsome, để ô
   tìm kiếm thẳng hàng với danh sách menu ngay bên dưới thay vì thò ra hai bên. */
.ps-search--inline {
  display: block;
  width: 100%;
  padding: var(--sp-4) 30px;
}

/* Tinh chỉnh khoảng cách theo yêu cầu, viết bằng đúng chuỗi class có trên thẻ
   <li class="header-search-form ps-search ps-search--inline">.

   LƯU Ý cho người đọc sau: đây VẪN LÀ phần tử mà rule .ps-search--inline ngay
   phía trên nhắm tới — ba class cùng nằm trên một thẻ. Selector này đặc hiệu hơn
   (0,3,0 so với 0,1,0) nên `padding` ở đây thắng, khiến `padding: var(--sp-4) 30px`
   bên trên thành vô hiệu. Giữ cả hai vì bản gốc được yêu cầu để nguyên; muốn gọn
   thì xoá dòng padding của rule trên. */
.header-search-form.ps-search.ps-search--inline {
  padding: 0 15px;
  padding-top: 15px !important;
}

/* Flatsome kẻ đường ngăn giữa các mục menu dọc; ô tìm kiếm không phải một mục
   menu nên bỏ viền của chính nó, chỉ giữ một đường phía dưới ngăn với danh sách
   liên kết bên dưới. */
.mobile-sidebar .ps-search--inline {
  border: 0 !important;
  border-bottom: 1px solid var(--c-divider) !important;
}

/* nav-uppercase viết hoa toàn bộ chữ trong ngăn kéo — trả lại chữ thường cho
   riêng vùng tìm kiếm (nhãn nhóm kết quả vẫn tự viết hoa bằng rule riêng). */
.mobile-sidebar .ps-search--inline,
.mobile-sidebar .ps-search--inline * {
  text-transform: none;
  letter-spacing: normal;
}

.ps-search--inline .ps-search__form { width: 100%; }

/* Đệm trong thanh nhập rộng rãi hơn bản desktop: chỗ này ngón tay chạm trực
   tiếp, và chữ phải cách mép kính lúp/nút bấm đủ xa để không dính vào nhau.
   Trước đây bị bóp lại (gap 8, padding-left 12) vì ngăn kéo chỉ rộng 300px —
   nay ngăn kéo đã là 90vw (xem header.css) nên không cần hy sinh nữa. */
.ps-search--inline .ps-search__bar {
  gap: var(--sp-3);
  padding: 6px 6px 6px var(--sp-5);
}

/* Cao 40px cho vừa ngưỡng vùng chạm, và font 16px vì iOS tự phóng to cả trang
   khi focus vào input có cỡ chữ nhỏ hơn 16px. */
.ps-search--inline .ps-search__input {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

/* Nút submit thu còn ô vuông icon — KHÔNG đặt trong media query theo bề rộng
   màn hình như bản dropdown, vì chỗ hẹp ở đây là do ngăn kéo rộng 300px cố
   định, điện thoại màn to hay nhỏ cũng vậy. Chữ ẩn bằng font-size:0, nhãn còn
   lại nằm ở aria-label (xem ps-search-form.php). */
.ps-search--inline .ps-search__submit {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.ps-search--inline .ps-search__submit::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  background-color: var(--c-white);
  -webkit-mask: url('/wp-content/uploads/2026/07/icon-search.svg') no-repeat center / contain;
  mask: url('/wp-content/uploads/2026/07/icon-search.svg') no-repeat center / contain;
}

/* Trong ngăn kéo hẹp, "Tìm trong" nằm trên một dòng riêng để hàng chip không bị
   ép còn vài chục pixel. */
.ps-search--inline .ps-search__scopes-wrap {
  display: block;
}
.ps-search--inline .ps-search__scopes-label {
  display: block;
  margin-bottom: 8px;
  line-height: 18px;
}

/* Kết quả trong ngăn kéo: ngăn kéo tự cuộn được rồi nên không giới hạn chiều
   cao thêm lần nữa (hai vùng cuộn lồng nhau rất khó dùng bằng ngón tay). */
.ps-search--inline .ps-search__results:not(:empty) {
  max-height: none;
  overflow: visible;
}

/* ============================================================
   Biến thể DROPDOWN — responsive
   ============================================================ */

@media (max-width: 1199px) {
  .ps-search--dropdown .ps-search__panel { width: min(560px, calc(100vw - 32px)); }
}

/* Dưới 850px Flatsome ẩn cả cụm nav phải (.hide-for-medium) nên bản dropdown
   không còn xuất hiện — từ đây trở xuống mobile dùng bản inline trong ngăn kéo.
   Vẫn giữ rule neo panel theo viewport phòng khi sau này thêm "search" vào
   header mobile trong Customizer: lúc đó nút nằm sát mép, panel neo theo nút sẽ
   tràn ra ngoài màn hình. */
@media (max-width: 849px) {
  .ps-search--dropdown .ps-search__panel {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 12px;
    left: 12px;
    width: auto;
  }
  .ps-search--dropdown .ps-search__panel::before,
  .ps-search--dropdown .ps-search__panel::after { display: none; }
}

/* Màn hình rất hẹp: nút "Tìm kiếm" chữ dài chiếm quá nhiều chỗ của ô nhập —
   thu về đúng ô vuông chứa icon kính lúp như bản inline. */
@media (max-width: 400px) {
  .ps-search--dropdown .ps-search__submit {
    width: 40px;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }
  .ps-search--dropdown .ps-search__submit::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background-color: var(--c-white);
    -webkit-mask: url('/wp-content/uploads/2026/07/icon-search.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/07/icon-search.svg') no-repeat center / contain;
  }
}

/* ===== headerMenu.css ===== */
/* ============================================================
   headerMenu.css — Mega-dropdown của Main Menu (desktop)
   Markup do hooks/header_menu.php sinh ra.
   ============================================================
   VÌ SAO NHIỀU CHỖ PHẢI ĐÈ:
   flatsome.css đặt sẵn cho .nav-dropdown một bộ rule khá cứng —
   display:table, min-width:260px, padding:20px, border 2px, và
   .nav-dropdown-default còn thêm border-bottom + margin cho từng <a>.
   Vì <ul> vẫn phải giữ nguyên class .nav-dropdown (Flatsome dựa vào đó để
   mở/đóng bằng CSS), cách sạch nhất là tăng độ đặc hiệu bằng cách viết kèm
   .nav-dropdown thay vì rải !important khắp nơi. Chỉ những thuộc tính mà
   Flatsome khai với selector đặc hiệu hơn (vd. li.has-dropdown:hover > ...)
   mới phải dùng !important — có ghi chú riêng ở từng chỗ.
   ============================================================ */

/* ---------- Panel ---------- */
.nav-dropdown.ps-mega {
  display: block;
  width: 408px;
  min-width: 0;
  padding: 8px 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(8, 58, 110, 0.16), 0 2px 8px rgba(15, 35, 55, 0.06);
  overflow: hidden;
  /* Trượt lên 6px khi hiện ra. Flatsome chỉ animate opacity/visibility nên
     transform ở đây không chọi với rule nào của nó. */
  transform: translateY(6px);
  transition: opacity var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease),
              visibility var(--dur-normal);
}

.no-js li.has-dropdown:hover > .nav-dropdown.ps-mega,
li.has-dropdown:hover > .nav-dropdown.ps-mega,
li.current-dropdown > .nav-dropdown.ps-mega {
  transform: translateY(0);
}

/* Mũi tên caret của Flatsome (body.nav-dropdown-has-arrow) không có trong thiết kế
   — panel đã có bóng đổ và bo góc riêng nên caret nhọn làm gãy đường viền. */
.header-nav li.ps-has-mega:before,
.header-nav li.ps-has-mega:after {
  display: none !important;
}

/* Panel bị tràn mép phải màn hình thì neo theo mép phải của mục menu.
   !important vì Flatsome đặt left:-15px ngay trong rule mở dropdown
   (li.has-dropdown:hover > .nav-dropdown) — đặc hiệu hơn selector này. */
.nav-dropdown.ps-mega.ps-mega--flip {
  left: auto !important;
  right: -15px;
}

/* ---------- Hàng ---------- */
/* Nền tô và thanh xanh đặt trên <li> chứ không trên <a>: mục "Năng lực" còn có
   danh sách trang con bên dưới, nếu tô trên <a> thì mảng nền dừng ngang giữa
   hàng, cắt rời phần trang con ra khỏi mục cha. */
.ps-mega > li.ps-mega__row {
  position: relative;
  display: block;
  width: auto;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease);
}

.ps-mega > li.ps-mega__row:hover,
.ps-mega > li.ps-mega__row.active {
  background: var(--c-cta-soft);
}

.nav-dropdown.ps-mega > li.ps-mega__row > a.ps-mega__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto;
  margin: 0;
  padding: 13px 18px 13px 20px;
  border: 0;
  border-radius: 0;
  color: var(--c-text);
  line-height: normal;
  text-transform: none;
  transition: background var(--dur-fast) var(--ease);
}

/* Gạch phân cách giữa các hàng, thụt vào đúng bằng lề trong của hàng. */
.ps-mega > li.ps-mega__row + li.ps-mega__row > .ps-mega__link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 18px;
  height: 1px;
  background: var(--c-divider);
  transition: opacity var(--dur-fast) var(--ease);
}

/* Hàng đang tô nền thì bỏ gạch của chính nó và của hàng ngay dưới, để mảng nền
   xanh nhạt liền một khối chứ không bị cắt ngang. */
.ps-mega > li.ps-mega__row:hover > .ps-mega__link:before,
.ps-mega > li.ps-mega__row.active > .ps-mega__link:before,
.ps-mega > li.ps-mega__row:hover + li.ps-mega__row > .ps-mega__link:before,
.ps-mega > li.ps-mega__row.active + li.ps-mega__row > .ps-mega__link:before {
  opacity: 0;
}

/* Thanh xanh lá bên trái, mọc từ giữa ra khi hover/đang xem. */
.ps-mega > li.ps-mega__row:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--c-cta);
  transform: scaleY(0);
  transition: transform var(--dur-fast) var(--ease);
}

.ps-mega > li.ps-mega__row:hover:after,
.ps-mega > li.ps-mega__row.active:after {
  transform: scaleY(1);
}

/* Hàng có trang con: bớt lề dưới để tiêu đề và danh sách con thành một khối.
   .nav-dropdown-col là class Flatsome tự gắn cho mục cấp 1 có con. */
.nav-dropdown.ps-mega > li.ps-mega__row.nav-dropdown-col > a.ps-mega__link {
  padding-bottom: 6px;
}

/* ---------- Cấp 3 (vd. Thư viện > Năng lực > Xưởng sản xuất) ----------
   Flatsome đổ cấp 3 ra <ul class="nav-column"> vốn dành cho bố cục dạng cột
   (display:table-cell). Panel này xếp dọc nên chuyển về danh sách thụt lề,
   canh trái thẳng hàng với tiêu đề của mục cha (20 + 44 ô icon + 14 gap). */
.ps-mega > li.ps-mega__row > ul.nav-column {
  display: block;
  margin: 0;
  padding: 0 18px 10px 78px;
}

.ps-mega > li.ps-mega__row > ul.nav-column > li {
  display: block;
  width: auto;
  min-width: 0;
  white-space: normal;
}

.nav-dropdown.ps-mega .nav-column > li > a {
  display: block;
  position: relative;
  margin: 0;
  padding: 5px 0 5px 14px;
  border: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  text-transform: none;
  transition: color var(--dur-fast) var(--ease);
}

.nav-dropdown.ps-mega .nav-column > li > a:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--c-border-strong);
  transition: background var(--dur-fast) var(--ease);
}

.nav-dropdown.ps-mega .nav-column > li > a:hover,
.nav-dropdown.ps-mega .nav-column > li.active > a {
  color: var(--c-cta);
}

.nav-dropdown.ps-mega .nav-column > li > a:hover:before,
.nav-dropdown.ps-mega .nav-column > li.active > a:before {
  background: var(--c-cta);
}

/* ---------- Ô icon ---------- */
.ps-mega__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.ps-mega__icon .icon {
  width: 22px;
  height: 22px;
}

.ps-mega__row:hover .ps-mega__icon,
.ps-mega__row.active .ps-mega__icon {
  background: var(--c-white);
  color: var(--c-cta);
}

/* ---------- Chữ ---------- */
.ps-mega__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-mega__title {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-brand-700);
  transition: color var(--dur-fast) var(--ease);
}

.ps-mega__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
}

.ps-mega__row:hover .ps-mega__title,
.ps-mega__row.active .ps-mega__title {
  color: var(--c-cta);
}

/* ---------- Mũi tên phải ---------- */
.ps-mega__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  color: var(--c-cta);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.ps-mega__row:hover .ps-mega__arrow,
.ps-mega__row.active .ps-mega__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown.ps-mega,
  .ps-mega > li.ps-mega__row,
  .ps-mega > li.ps-mega__row:after,
  .ps-mega__icon,
  .ps-mega__arrow {
    transition: none;
  }
  .nav-dropdown.ps-mega { transform: none; }
}

/* Màn hình hẹp hơn: thu panel lại để còn chỗ cho các mục menu bên cạnh. */
@media (max-width: 1199px) {
  .nav-dropdown.ps-mega { width: 348px; }
  .nav-dropdown.ps-mega > li.ps-mega__row > a.ps-mega__link { padding: 12px 16px 12px 18px; }
  .ps-mega__icon { width: 40px; height: 40px; }
}

/* ===== footer.css ===== */
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-brand-950);
  color: rgba(255, 255, 255, 0.78);
}
/* 4 cột: thương hiệu | Liên hệ | Văn phòng & nhà máy | Liên kết.
   Cột địa chỉ rộng hơn vì nó gộp cả ba địa điểm; trước đây ba địa điểm là ba
   cột riêng, mỗi cột chỉ còn ~130px nên địa chỉ nhà máy 2 vỡ thành 5 dòng. */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.6fr 1.1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}
.footer-col {
  align-self: stretch;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: var(--sp-5);
}
.footer-brand__logo {
  display: inline-flex;
  margin-bottom: var(--sp-3);
}
.footer-brand__logo img {
  display: block;
  width: 208px;
  height: auto;
}
.footer-brand__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: var(--sp-4);
  max-width: 260px;
}
.footer-social {
  display: flex;
  gap: var(--sp-2);
}
.footer-social a {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: var(--c-white);
  transition: background var(--dur-fast) var(--ease);
}
.footer-social a:hover {
  background: var(--c-brand-600);
}
.footer-social .icon {
  width: 16px;
  height: 16px;
}

.footer-col__title {
  font-size: var(--fs-card-title);
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.footer-list {
  display: grid;
  gap: 8px;
}
.footer-list li {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(255, 255, 255, 0.72);
}
.footer-list a:hover {
  color: var(--c-white);
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
}
.footer-contact .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #9fc0e2;
}
.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom nav {
  display: flex;
  gap: var(--sp-4);
}
.site-footer__bottom a:hover {
  color: var(--c-white);
}

.absolute-footer {
    display: none;
}
/* Ba địa điểm trong cùng một cột: mỗi mục có tên in đậm ở dòng đầu để phân biệt,
   khoảng cách giữa các mục rộng hơn khoảng cách giữa các dòng trong một mục. */
.footer-places { gap: var(--sp-4); }
.footer-places b {
  display: block;
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}
.footer-places > li > span { display: block; }

/* ===== pageHero.css ===== */
/* ============================================================
   Page hero (banner + breadcrumb) — dùng chung cho các trang con
   (Giới thiệu, Sản phẩm, Giải pháp, Dự án, Năng lực, Tài liệu, Kiến thức, Liên hệ, ...)
   Lọc & chỉnh từ css/pages.css + css/tokens.css (bản HTML gốc BAN_GIAO_WORDPRESS_PHU_SON)
   cho đúng cấu trúc block HTML Flatsome:
   section.page-hero > .bg.section-bg.fill.bg-fill (Flatsome tự render ảnh nền)
                      > .section-content.relative > .container.page-hero__inner
   ============================================================ */

/* Flatsome ".section" mặc định: min-height:auto; padding:30px 0 30px.
   Ghi đè bằng selector 2 class để thắng specificity mà không cần !important.
   min-height dùng chung token --hero-height (tokens.css: 432px desktop →
   440/500/560px ở các breakpoint nhỏ hơn) để hero trang con luôn cao đúng bằng
   hero trang chủ (.hero trong styles.css cũng dùng token này). Flatsome .section
   vốn là flex + align-items:center nên nội dung tự canh giữa theo chiều dọc. */
.page-hero.section {
  min-height: var(--hero-height);
  padding: 0;
  color: var(--c-white);
  overflow: hidden;
  isolation: isolate;
}

/* Lớp phủ gradient tối đè lên ảnh nền do Flatsome render (.bg.section-bg) */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, rgba(3, 13, 25, 0.88) 0%, rgba(3, 13, 25, 0.6) 45%, rgba(3, 13, 25, 0.3) 100%);
  pointer-events: none;
}

/* .section-content đã có position:relative (nhờ class "relative" Flatsome tự thêm)
   và z-index:1 mặc định — nâng lên trên lớp phủ để chữ luôn hiển thị phía trên. */
.page-hero .section-content {
  z-index: 6;
}

.page-hero__inner {
  padding-block: var(--sp-6) 44px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  /* flex-wrap: ở 375px thanh này dài hơn khung; không cho xuống hàng thì các
     mục bị co lại và chữ gãy NGAY TRONG một mục ("Trang / chủ", "Sản / phẩm").
     Cho xuống hàng theo từng mục, còn mục cuối (tên trang, thường dài nhất)
     mới được phép gãy chữ. */
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 2px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-3);
}
.breadcrumb > a,
.breadcrumb > .icon { flex: none; white-space: nowrap; }
.breadcrumb > span:not(.icon) { min-width: 0; }
.breadcrumb a:hover { color: var(--c-white); }
/* Trong UX Builder mỗi cấp breadcrumb được render riêng nên nó tự kèm dấu chevron
   ở trước mình (xem CMS_Helpers::uxbChildSlot); cấp đầu tiên vì thế thừa một dấu.
   Ngoài frontend cả thanh do một lượt render dựng nên không có dấu thừa, quy tắc
   này chỉ có tác dụng trong trình dựng trang. */
.breadcrumb > .icon:first-child { display: none; }
/* Icon chevron giờ là <span class="icon icon-chevron-right"> (mask-image, xem general.css)
   thay vì <svg><use>; chỉnh lại kích thước 13px cho khớp thiết kế gốc. */
.breadcrumb .icon,
.breadcrumb .icon-chevron-right {
  width: 13px;
  height: 13px;
}

.page-hero__title {
  /* Khai báo color tường minh để thắng rule "h1{color:...}" mà Flatsome tự in
     ra từ Customizer > Typography > Headings (theme_mod type_headings_color) —
     nếu không, h1 sẽ bị đổi màu vì color là thuộc tính kế thừa, và bất kỳ rule
     nào match trực tiếp vào thẻ (dù specificity thấp) cũng thắng giá trị kế thừa. */
  color: var(--c-white);
  font-size: 34px;
  line-height: 42px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  /* Tên sản phẩm ghép bằng dấu "/" (ROCKWOOL/GLASSWOOL) không có chỗ ngắt dòng
     nào nên ở 375px nó chạy lố ra ngoài lề phải, đè lên cụm nút liên hệ nổi.
     break-word chỉ can thiệp khi một từ THẬT SỰ không vừa dòng. */
  overflow-wrap: break-word;
}
.page-hero__sub {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
  .page-hero__title { font-size: 26px; line-height: 32px; }
}

/* ===== pageHome.css ===== */
/* ============================================================
   TRANG CHỦ (index.html)
   ============================================================
   Toàn bộ khối của trang chủ — .hero, .stats, .products-grid, .solutions-grid,
   .capability-grid, .projects-grid, .resources-grid, .news-grid, .quote — đã có
   đủ style ở styles.css + responsive.css (bản dùng chung với mockup), nên file
   này KHÔNG định nghĩa lại gì.

   Nó chỉ chứa phần phải vá thêm khi đưa bố cục tĩnh vào Flatsome. */

/* .hero__title là thẻ <h1> nhưng styles.css không khai màu cho nó — nó trông chờ
   kế thừa "color: var(--c-white)" từ .hero__content. Có HAI rule khớp trực tiếp
   thẻ h1, mà giá trị khớp trực tiếp luôn thắng giá trị kế thừa bất kể specificity:
       flatsome.css   h1,h2,h3,h4,h5,h6 { color: #555 }
       Customizer     h1,h2,h3,h4,h5,h6 { color: #083a6e }   (thắng, in ở wp_head 100)
   Hậu quả: tiêu đề hero thành xanh navy đậm nằm trên ảnh nền tối, gần như không
   đọc được — đúng lỗi đã gặp ở .page-hero__title và .kt-consult__title.

   Không cần !important: selector class (0,1,0) đã thắng selector thẻ (0,0,1). */
.hero__title { color: var(--c-white); }

/* ------------------------------------------------------------
   SỐ CỘT CỦA LƯỚI CHỨNG CHỈ / TÀI LIỆU / DỰ ÁN
   ------------------------------------------------------------
   Ba block cho phép chỉnh số cột, nhưng KHÔNG được in grid-template-columns
   thẳng vào thuộc tính style: inline style thắng cả media query, số cột sẽ bị
   khoá cứng và bố cục mobile của responsive.css (chứng chỉ 3 cột, tài liệu 1 cột,
   dự án cuộn ngang) không bao giờ có hiệu lực. Thay vào đó block chỉ truyền một
   biến CSS: --cert-cols / --doc-cols / --proj-cols.

   Biến được ĐỌC NGAY TẠI rule gốc trong styles.css, không khai lại thành rule
   riêng ở đây. Lý do: main.css import pageHome.css TRƯỚC styles.css, nên rule
   cùng specificity đặt ở file này luôn thua rule gốc đứng sau — đó chính là lỗi
   đã làm tuỳ chọn "Số cột" của chứng chỉ/tài liệu không ăn ở desktop suốt thời
   gian qua (mobile vẫn đúng vì responsive.css import sau cùng nên đè được cả hai).
   Cách làm hiện tại giống --tabs-count của .product-tabs (sanPham.css). */

/* Ảnh nền khối "Năng lực sản xuất" đã sửa THẲNG tại rule gốc trong styles.css.
   Trước đây nó được đè ở đây và không bao giờ ăn: pageHome.css nạp TRƯỚC styles.css
   nên hai rule cùng specificity thì rule gốc đứng sau luôn thắng — cùng cái bẫy ghi
   ở đầu file này. Trang chủ không lộ ra vì block homeCapability truyền ảnh qua
   style="" nội tuyến, thắng cả hai; chỗ nào gọi block mà không truyền ảnh mới rơi
   về rule gốc. */

/* ------------------------------------------------------------
   KHỐI "NHẬN BÁO GIÁ NHANH" — tương thích Contact Form 7
   ------------------------------------------------------------
   .quote__card là lưới 3 cột "360px 1fr 180px" = giới thiệu | các trường | nút gửi.
   Bản tĩnh đặt cả ba trong cùng một <form>. Nhưng CF7 tự render <form> của nó, nên
   .quote__fields và .quote__submit bị bọc thêm một tầng và cả cụm chỉ còn là MỘT ô
   lưới — bố cục 3 cột sập thành 2.

   Cách chữa: cho <form> của CF7 chiếm hai cột cuối rồi tự chia lại lưới bên trong.
   KHÔNG dùng display:contents cho <form> — nó sẽ đẩy luôn mấy thẻ phụ trợ của CF7
   (.screen-reader-response, .wpcf7-response-output) thành ô lưới và xô lệch hàng. */
.quote__card > .wpcf7 { grid-column: 2 / -1; min-width: 0; }
.quote__card .wpcf7-form { display: grid; grid-template-columns: 1fr 180px; gap: var(--sp-8); align-items: center; }
.quote__card .wpcf7-response-output { grid-column: 1 / -1; margin: 0; padding: 6px 10px; font-size: 12px; border-radius: 3px; }

/* CF7 bọc mỗi form-tag trong <span class="wpcf7-form-control-wrap">. Span đó phải
   thành ô lưới thật (display:block), KHÔNG dùng display:contents — cùng lý do đã ghi
   ở .consult__fields (sanPham.css): contents sẽ đẩy <span class="wpcf7-not-valid-tip">
   thành ô lưới mỗi khi trường lỗi validate, làm nhảy cả hàng. */
.quote__fields .wpcf7-form-control-wrap { position: relative; display: block; min-width: 0; }
.quote__fields .wpcf7-form-control.form-control { width: 100%; }
.quote__fields .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; margin-top: 2px; font-size: 11px; line-height: 14px; color: #c0392b; }
.quote__card .wpcf7-spinner { position: absolute; }

@media (max-width: 991px) {
  /* responsive.css đã cho .quote__card về 1 cột ở khổ này; <form> phải bỏ span 2 cột
     theo, nếu không nó bám cột 2 của lưới cũ và biến mất khỏi khung. */
  .quote__card > .wpcf7 { grid-column: 1 / -1; }
  .quote__card .wpcf7-form { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ============================================================
   TIÊU CHUẨN CHẤT LƯỢNG & TÀI LIỆU KỸ THUẬT (trang chủ)
   Gộp hai khối "Chứng chỉ" và "Tài liệu" thành một thẻ hai panel
   dưới chung một tiêu đề. Hai block vẫn là hai shortcode riêng —
   khung thẻ và đường chia dựng hoàn toàn bằng CSS ở đây, xem
   chú thích trong scratchpad/home_stdz.php.
   ============================================================ */

.ps-stdz .stdz__head { margin-bottom: var(--sp-6); }
.ps-stdz .stdz__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.ps-stdz .stdz__title {
  font-size: 36px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.ps-stdz .stdz__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}

/* Khung thẻ bọc cả hai panel. Bo góc + overflow:hidden trên .row để nền
   panel phải không tràn ra ngoài góc bo. */
.ps-stdz .stdz__card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.ps-stdz .stdz__pane > .col-inner {
  height: 100%;
  padding: 28px 32px;
}
.ps-stdz .stdz__pane--doc > .col-inner {
  background: var(--c-brand-50);
  border-left: 1px solid var(--c-border);
}

/* Tiêu đề panel nhỏ hơn tiêu đề khối — nó là nhãn của một nửa thẻ,
   không phải tiêu đề section nữa. */
.ps-stdz .resource-heading {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-5);
  text-transform: none;
  letter-spacing: 0;
}

/* Panel chứng chỉ: bỏ viền/nền của .certificate-card, để 5 logo đứng trần
   trên nền trắng như bản thiết kế. */
.ps-stdz .certificates-grid { gap: var(--sp-4); align-items: center; }
.ps-stdz .certificate-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.ps-stdz .certificate-card__badge {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Panel tài liệu: 4 ô ngăn nhau bằng đường kẻ thay vì 4 thẻ rời — gọn hơn
   khi nằm trong một thẻ lớn. */
.ps-stdz .documents-grid { gap: 0; }
.ps-stdz .document-card {
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease);
}
.ps-stdz .document-card:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: none;
}
/* Kẻ ô: dùng box-shadow thay border để đường kẻ giữa hai ô không dày gấp đôi. */
.ps-stdz .documents-grid > .document-card:nth-child(odd) { box-shadow: 1px 0 0 var(--c-border) inset; }
.ps-stdz .documents-grid > .document-card { box-shadow: 0 1px 0 var(--c-border) inset; }
.ps-stdz .documents-grid > .document-card:nth-child(odd):not(:first-child) { box-shadow: 0 1px 0 var(--c-border) inset; }
.ps-stdz .documents-grid > .document-card:nth-child(even) { box-shadow: 0 1px 0 var(--c-border) inset, 1px 0 0 var(--c-border) inset; }
.ps-stdz .documents-grid > .document-card:first-child,
.ps-stdz .documents-grid > .document-card:nth-child(2) { box-shadow: none; }
.ps-stdz .documents-grid > .document-card:nth-child(2) { box-shadow: 1px 0 0 var(--c-border) inset; }

/* Icon canh theo dòng đầu của tiêu đề chứ không canh giữa cả thẻ: tiêu đề dài
   một hay hai dòng thì icon vẫn nằm ngang chữ, không bị trôi xuống giữa khoảng
   trắng giữa tiêu đề và nhãn "Tải xuống". */
.ps-stdz .document-card { align-items: flex-start; gap: var(--sp-3); }
.ps-stdz .document-card__icon {
  width: 32px;
  height: 32px;
  margin-top: 1px;
  color: var(--c-brand-600);
}
.ps-stdz .document-card__icon .icon { width: 26px; height: 26px; }
.ps-stdz .document-card__title { min-height: 0; margin-bottom: 8px; }
.ps-stdz .document-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-cta);
}
.ps-stdz .document-card__link .icon { width: 14px; height: 14px; }
.ps-stdz .document-card:hover .document-card__link { color: var(--c-cta-hover); }

/* ------------------------------------------------------------
   Chừa lề hai bên khi hàng không còn được căn giữa.
   Hàng của khối này đặt row-collapse nên Flatsome bỏ luôn 15px đệm mặc định của
   .row. Trên màn rộng vẫn ổn vì .row chỉ rộng 1300px và được căn giữa (dư 70px
   mỗi bên), nhưng từ ~1329px trở xuống hàng chạm mép màn hình và chữ dán sát
   viền — đo ở 375px thấy tiêu đề "Tiêu chuẩn chất lượng & tài liệu kỹ thuật"
   nằm ở x=0 và chạm luôn mép phải. Bù lại phần đệm đó cho đúng khổ bị ảnh hưởng.
   ------------------------------------------------------------ */
@media (max-width: 1329px) {
  .ps-stdz .stdz__head,
  .ps-stdz .stdz__card {
    padding-inline: var(--sp-4);
  }
}

@media (max-width: 849px) {
  .ps-stdz .stdz__title { font-size: 30px; line-height: 38px; }
  /* Lớp .medium-6 của Flatsome giữ hai panel cạnh nhau tới tận 849px, lúc đó
     panel chứng chỉ chỉ còn ~340px và 5 logo ISO co xuống 51px, không đọc nổi.
     Ép cả hai panel xuống hàng riêng sớm hơn. */
  .ps-stdz .stdz__card > .col {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* Xuống 1 cột thì đường chia dọc thành đường chia ngang. */
  .ps-stdz .stdz__pane--doc > .col-inner {
    border-left: 0;
    border-top: 1px solid var(--c-border);
  }
}
@media (max-width: 549px) {
  .ps-stdz .stdz__title { font-size: 26px; line-height: 34px; }
  .ps-stdz .stdz__pane > .col-inner { padding: 22px; }
}

/* ============================================================
   GÓC KỸ THUẬT PHÚ SƠN (trang chủ) — bố cục "featured"
   Bài đầu chiếm cột trái với ảnh lớn + trích dẫn; các bài sau xếp
   dọc cột phải ở dạng thẻ ngang. Bản 'grid' 3 thẻ bằng nhau vẫn
   giữ nguyên trong blocks/homeNews cho chỗ khác dùng.
   ============================================================ */

/* Tiêu đề khối này to hơn .section-title mặc định (viết hoa, 22px) vì nó mở
   đầu một mục lớn chứ không phải nhãn của một dải thẻ. */
.news-feat-head .section-eyebrow {
  color: var(--c-cta);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}
.news-feat-head .section-title {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.015em;
  text-transform: none;
}
.news-feat-head { align-items: flex-end; margin-bottom: var(--sp-6); }

.news-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.news-feat__rest {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-6);
  min-height: 0;
}

.news-feat .news-card {
  display: flex;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

/* --- Thẻ nổi bật --- */
.news-card--hero { flex-direction: column; }
.news-card--hero .news-card__media {
  aspect-ratio: 16 / 9;
  flex: none;
}
.news-card--hero .news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  gap: var(--sp-3);
}
.news-card--hero .news-card__title {
  font-size: 21px;
  line-height: 30px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
/* Trích dẫn tối đa 2 dòng — độ dài excerpt các bài rất chênh nhau. */
.news-card--hero .news-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-secondary);
}
.news-card--hero .news-card__link { margin-top: auto; }

/* --- Thẻ ngang cột phải --- */
.news-card--row { flex-direction: row; align-items: stretch; }
.news-card--row .news-card__media {
  flex: none;
  width: 42%;
  aspect-ratio: auto;
}
.news-card--row .news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--sp-5);
  gap: 6px;
}
.news-card--row .news-card__date {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}
.news-card--row .news-card__title {
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
/* Chỉ còn mũi tên, đẩy xuống đáy và sang phải như bản thiết kế. */
.news-card--row .news-card__link {
  margin-top: auto;
  align-self: flex-end;
  color: var(--c-cta);
}

.news-feat .news-card:hover { transform: none; border-color: var(--c-border-strong); box-shadow: var(--sh-card); }
.news-feat .news-card__link { color: var(--c-cta); font-weight: var(--fw-semibold); }

@media (max-width: 849px) {
  .news-feat { grid-template-columns: minmax(0, 1fr); }
  .news-feat__rest { grid-template-rows: auto; }
  .news-feat-head .section-title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 549px) {
  .news-feat-head { align-items: flex-start; flex-direction: column; gap: var(--sp-2); }
  .news-feat-head .section-title { font-size: 26px; line-height: 34px; }
  /* Thẻ ngang ở màn nhỏ: ảnh 42% còn quá bé để đọc được, chuyển thành thẻ dọc. */
  .news-card--row { flex-direction: column; }
  .news-card--row .news-card__media { width: 100%; aspect-ratio: 16 / 9; }
}

/* ============================================================
   NHẬN BÁO GIÁ — bố cục mới: một thẻ chia đôi, panel giới thiệu nền
   navy bên trái và panel form nền trắng bên phải.
   Mọi selector đều bọc thêm .quote để nâng độ đặc hiệu lên 0,2,0.
   Bắt buộc, vì main.css nạp styles.css SAU pageHome.css: viết
   ".quote__card" trần ở đây sẽ thua rule cùng tên bên styles.css dù
   nằm sau trong thứ tự đọc của người viết.
   ============================================================ */

.quote { background: var(--c-surface-subtle); border-top: 0; border-bottom: 0; }

.quote .quote__card {
  grid-template-columns: 380px 1fr;
  gap: 0;
  align-items: stretch;
  padding-block: 0;
  margin-block: var(--sp-8);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

/* --- Panel trái --- */
.quote .quote__intro {
  position: relative;
  overflow: hidden;
  padding: var(--sp-8);
  background: var(--c-heading);
}
.quote .quote__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--sp-3);
}
.quote .quote__title {
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.quote .quote__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-6);
}
.quote .quote__benefits { gap: var(--sp-3); }
.quote .quote__benefit { color: rgba(255, 255, 255, 0.92); }
.quote .quote__benefit .icon { width: 18px; height: 18px; color: #4ade80; }

/* Hình nhà xưởng nét mảnh dưới đáy panel. Đặt là phần tử riêng chứ không phải
   background của .quote__intro để không bị lặp/kéo giãn khi panel cao lên theo
   chiều cao của cột form. */
.quote .quote__deco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 120px;
  background: url("/wp-content/uploads/2026/07/deco-nha-xuong.svg") right bottom / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

/* --- Panel phải (form CF7) --- */
.quote .quote__card > .wpcf7 {
  grid-column: 2;
  min-width: 0;
  padding: var(--sp-8);
}
/* Trả <form> về luồng thường: lưới 2 cột nay nằm ở .quote__fields, còn hàng
   cuối (.quote__foot) tự canh bằng flex. */
.quote .quote__card .wpcf7-form { display: block; }
.quote .quote__fields { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.quote .field--span2 { grid-column: 1 / -1; }
.quote .quote__fields textarea.form-control { min-height: 96px; resize: vertical; }

.quote .quote__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.quote .quote__foot .quote__note { margin: 0; }
.quote .quote__foot .btn { min-height: 46px; padding-inline: var(--sp-6); }

@media (max-width: 991px) {
  .quote .quote__card { grid-template-columns: minmax(0, 1fr); }
  .quote .quote__card > .wpcf7 { grid-column: 1; padding: var(--sp-6); }
  .quote .quote__intro { padding: var(--sp-6); }
  .quote .quote__title { font-size: 24px; line-height: 32px; }
}
@media (max-width: 549px) {
  .quote .quote__fields { grid-template-columns: minmax(0, 1fr); }
  /* Nút gửi xuống hàng riêng và trải rộng — ở khổ này để cạnh dòng cam kết
     bảo mật thì cả hai đều bị bóp còn một nửa. */
  .quote .quote__foot { flex-direction: column; align-items: stretch; }
  .quote .quote__foot .btn { width: 100%; justify-content: center; }
  .quote .quote__deco { width: 200px; height: 80px; }
}

/* ===== shop.css ===== */
/* Shop page */


/* ===== product_items.css ===== */
/* Product Items */

/* ===== category.css ===== */
/* Category Page */

/* ===== singlePost.css ===== */
/* ============================================================
   SINGLE BÀI VIẾT (single.php)
   ============================================================
   Bố cục 2 cột (.kt-layout) và toàn bộ khối .art-* nằm ở pages.css — bản dùng
   chung với mockup, không lặp lại ở đây.

   File này chỉ chứa phần phải chỉnh thêm khi markup tĩnh trở thành link thật trong
   WordPress: mấy chỗ bản tĩnh dùng <span> nay là <a>, nên bị rule màu/gạch chân
   toàn cục của Flatsome (a, a:hover) đè lên giá trị thừa kế. */

/* Mục lục: pages.css đặt màu ở <li>, nhưng chữ nằm trong <a> nên nó ăn màu link
   toàn cục. Trả quyền quyết định màu về cho <li>. */
.art-toc li a { color: inherit; text-decoration: none; }
.art-toc li a:hover { color: var(--c-brand-600); text-decoration: underline; }

/* Thẻ tag: bản tĩnh là <span class="sol-tag">, ở đây là <a> trỏ sang archive tag. */
a.sol-tag { display: inline-block; color: var(--c-text-secondary); text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
a.sol-tag:hover { color: var(--c-brand-700); border-color: #b7cbe0; background: var(--c-brand-50); text-decoration: none; }

/* Nút chia sẻ — phải khai báo màu ở :hover, để trống thì nó rơi về màu link của Flatsome. */
.art-share__icons a:hover { background: var(--c-brand-700); color: var(--c-white); }

/* Link biên tập viên chèn trong thân bài. Loại trừ .btn vì đó đã là component có
   style riêng, gạch chân sẽ làm hỏng nút. */
.art-body a { color: var(--c-brand-700); text-decoration: underline; }
.art-body a:hover { color: var(--c-brand-600); }
.art-body a.btn,
.art-body a.btn:hover { text-decoration: none; }

/* ============================================================
   THÂN BÀI — LỚP DỰ PHÒNG THEO THẺ
   ============================================================
   pages.css chỉ lo h2 / p / ul cho .art-body, phần còn lại của thiết kế đều bám
   vào class (.art-imgs, .art-note, .art-quote, .art-cmp, .pd-features, .app-grid).
   Class chỉ tồn tại khi dán HTML tay; biên tập viên soạn bằng thanh công cụ thì
   chỉ ra thẻ trần, và class cũng dễ rơi rụng qua vài lần chuyển tab Visual/Text.

   Nhóm rule dưới đây phủ đúng những thẻ mà trình soạn thảo sinh ra, để một bài viết
   không có class nào vẫn đọc được và vẫn đúng ngôn ngữ thiết kế. Các khối có class
   vẫn giữ nguyên bản "xịn" của chúng ở pages.css — hai lớp bổ sung cho nhau, không
   thay thế nhau.

   LƯU Ý CASCADE: main.css nạp singlePost.css TRƯỚC styles.css/pages.css, nên khi
   trùng specificity thì pages.css thắng. Vì vậy ở đây chỉ khai báo các selector
   pages.css chưa có, không khai lại .art-body p / ul / h2. */

/* Rule gốc: wpautop đã bị tắt toàn site (functions.php) nên chữ có thể không được
   bọc <p>. Không có rule này thì đoạn text trần rơi về cỡ chữ mặc định của Flatsome. */
.art-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-secondary); }
.art-body > :first-child { margin-top: 0; }

/* Heading cấp dưới h2 — pages.css không có, mà bỏ trống thì rơi về cỡ em của
   Flatsome (h3 1.25em, h4 1.125em, h5 1em, h6 .85em) và h6 còn bị viết hoa. */
.art-body h3 { font-size: 18px; line-height: 26px; font-weight: var(--fw-bold); color: var(--c-heading); margin: var(--sp-5) 0 var(--sp-2); }
.art-body h4 { font-size: 16px; line-height: 24px; font-weight: var(--fw-semibold); color: var(--c-heading); margin: var(--sp-4) 0 var(--sp-2); }
.art-body h5 { font-size: 15px; line-height: 22px; font-weight: var(--fw-semibold); color: var(--c-heading); margin: var(--sp-4) 0 var(--sp-2); }
/* h6 phải gỡ thêm text-transform/letter-spacing: Flatsome đặt
   h6{text-transform:uppercase;letter-spacing:.05em} nên Heading 6 bị viết hoa hết. */
.art-body h6 { font-size: 14px; line-height: 20px; font-weight: var(--fw-semibold); color: var(--c-heading); margin: var(--sp-4) 0 var(--sp-2); text-transform: none; letter-spacing: normal; }

/* Danh sách đánh số — pages.css chỉ style <ul>. Dùng ::marker để giữ số thật thay
   vì đếm bằng counter, ol lồng nhau vẫn đánh số đúng. */
.art-body ol { display: grid; gap: 8px; margin: 0 0 var(--sp-4); padding-left: 20px; list-style: decimal; }
.art-body ol li { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); }
.art-body ol li::marker { color: var(--c-brand-600); font-weight: var(--fw-semibold); }

/* <blockquote> của trình soạn thảo — cho ra đúng diện mạo .art-quote của thiết kế.
   font-size/color/font-style khai tường minh để đè bản của Flatsome
   (blockquote{font-size:1.2em;color:#333;font-style:italic}) — phần nghiêng đã do
   <p> bên trong lo, để cả khối nghiêng thì dòng ký tên cũng bị nghiêng theo. */
.art-body blockquote { border-left: 3px solid var(--c-brand-600); background: var(--c-surface-subtle); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0; margin: var(--sp-4) 0; font-size: var(--fs-small); color: var(--c-text-secondary); font-style: normal; }
.art-body blockquote p { font-style: italic; font-size: var(--fs-small); color: var(--c-text); margin-bottom: 6px; }
.art-body blockquote p:last-child { margin-bottom: 0; }
/* display:block vì <cite> vốn là thẻ inline — không có nó thì dòng ký tên dính vào
   cuối đoạn trích thay vì xuống hàng riêng. */
.art-body blockquote cite { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); font-style: normal; }

/* Ảnh chèn từ Thư viện. WordPress tự gắn class "wp-image-N" và "size-N" cho ảnh nên KHÔNG
   dùng :not([class]) ở đây. Cùng specificity với .art-imgs img (0,1,1) mà pages.css
   nạp sau, nên lưới 3 ảnh của thiết kế vẫn giữ tỉ lệ riêng. */
.art-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.art-body figure { margin: var(--sp-4) 0; }
.art-body figcaption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); text-align: center; margin-top: 8px; }

/* Bảng chèn bằng nút toolbar — cho ra đúng diện mạo bảng so sánh của thiết kế
   (.art-cmp trong pages.css) mà không cần class nào trong nội dung.

   Flatsome đặt sẵn cho thẻ trần:
       td,th { font-size:.9em; line-height:1.3; padding:.5em; border-bottom:… }
       th    { text-transform:uppercase; letter-spacing:.05em; line-height:1.05 }
   Rule đó khớp trực tiếp ô nên phải khai đè từng thuộc tính, thiếu cái nào là cái
   đó lọt: font-size .9em làm chữ trong bảng nhỏ hơn phần còn lại của bài, còn
   text-transform biến mọi tiêu đề cột thành CHỮ HOA — không có trong thiết kế.
   font-size:inherit để ô lấy đúng cỡ của <table>, kể cả bản thu nhỏ ở mobile. */
.art-body table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-small); }
.art-body th,
.art-body td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--c-text-secondary); font-size: inherit; line-height: var(--lh-small); text-transform: none; letter-spacing: normal; }
.art-body thead th { background: var(--c-brand-50); color: var(--c-heading); font-weight: var(--fw-bold); }
.art-body tbody th { background: var(--c-surface-subtle); color: var(--c-heading); font-weight: var(--fw-semibold); }

/* Flatsome: li{margin-bottom:.6em}. Danh sách của thiết kế giãn dòng bằng gap của
   lưới, cộng thêm margin này là khoảng cách gấp đôi. Áp cho cả mục lục vì .art-toc
   cũng là <ol>. */
.art-body li,
.art-toc li { margin-bottom: 0; }

/* Flatsome: hr{opacity:.1} làm đường kẻ gần như tàng hình. */
.art-body hr { border: 0; border-top: 1px solid var(--c-divider); margin: var(--sp-5) 0; opacity: 1; }

@media (max-width: 767px) {
  .art-body h3 { font-size: 17px; line-height: 24px; }
  .art-body table { font-size: var(--fs-caption); }
  .art-body th,
  .art-body td { padding: 8px 10px; }

  /* Bảng so sánh 3 cột nhét vừa 313px thì cột đầu chỉ còn 60px — "Khả năng
     chống cháy" rớt mỗi từ một dòng, hàng cao gấp 4 lần nội dung. Cho bảng
     cuộn ngang thay vì bóp cột: <table> thành khối cuộn, còn thead/tbody giữ
     display:table với min-width chung nên các cột vẫn thẳng hàng nhau. */
  .art-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .art-body table > thead,
  .art-body table > tbody {
    display: table;
    width: 100%;
    min-width: 520px;
    table-layout: fixed;
  }
  .art-body table > thead { border-bottom: 0; }
}

/* ===== singleProduct.css ===== */
/* Single Product Page */
/* ===== cart.css ===== */
/* Cart Page */

/* ===== checkout.css ===== */
/* Checkout page */

/* ===== contact.css ===== */
/* ============================================================
   TRANG LIÊN HỆ — bố cục theo bản thiết kế khách gửi 20/08/2026
   ============================================================
   Thứ tự khối: hero (có thẻ báo giá bên phải) -> dải 4 kênh liên hệ đè lên
   chân hero -> văn phòng & nhà máy -> form + cột phải (phạm vi hỗ trợ, thông
   tin doanh nghiệp).

   TOÀN BỘ STYLE CỦA TRANG NẰM TRONG FILE NÀY. Trước đây cùng một bộ class
   (.contact-bar, .loc-card, .contact-form, .side-box) được khai ở CẢ pages.css
   lẫn file này; pages.css nạp SAU nên bản ở đây luôn thua, sửa mãi không thấy
   đổi. Bản trùng bên pages.css đã gỡ ngày 20/08/2026 — đừng khai lại ở đó.
   ============================================================ */

/* ---------- Hero ---------- */
.lh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: var(--sp-8);
}
.lh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6fdba0;
}
.lh-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--c-cta);
}
/* Thẻ báo giá nổi trên ảnh hero: nền mờ + viền sáng để đọc được chữ trắng dù ảnh
   phía sau sáng tối khác nhau. */
.lh-quote {
  padding: var(--sp-6);
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 12px;
  background: rgb(3 40 82 / 62%);
  backdrop-filter: blur(2px);
  color: var(--c-white);
}
.lh-quote__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 72%);
}
.lh-quote__title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 25px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.lh-quote__text {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-caption);
  line-height: 19px;
  color: rgb(255 255 255 / 80%);
}

/* ---------- Dải 4 kênh liên hệ ---------- */
/* Kéo lên đè một phần lên chân hero, đúng như bản thiết kế. */
.contact-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: -56px;
  padding: var(--sp-5);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-stats);
}
.contact-bar__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-left: 1px solid var(--c-border);
}
.contact-bar__item:first-child {
  border-left: 0;
}
/* Ô hotline được làm nổi: đây là kênh khách hay dùng nhất. */
.contact-bar__item--hot {
  border-left: 0;
  border: 1px solid #cbe7d7;
  border-radius: 12px;
  background: var(--c-cta-soft);
}
.contact-bar__item--hot + .contact-bar__item {
  border-left: 0;
}
.contact-bar__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}
.contact-bar__icon .icon {
  width: 22px;
  height: 22px;
}
.contact-bar__item--hot .contact-bar__icon {
  background: var(--c-white);
  color: var(--c-cta);
}
.contact-bar__icon--zalo {
  background: var(--c-white);
}
.contact-bar__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.contact-bar__item--hot .contact-bar__label {
  color: var(--c-cta);
}
.contact-bar__value {
  margin-top: 3px;
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  overflow-wrap: anywhere;
}
.contact-bar__value a {
  color: inherit;
}
.contact-bar__value a:hover {
  color: var(--c-brand-600);
}
.contact-bar__value--sm {
  font-size: var(--fs-small);
  line-height: 22px;
}
.contact-bar__sub {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ---------- Tiêu đề mục ---------- */
.lh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.lh-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
}
.lh-head__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--c-cta);
}
.lh-head__title {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.lh-head__note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-muted);
}

/* ---------- Thẻ cơ sở ---------- */
.loc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}
.loc-card {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.loc-card__media {
  aspect-ratio: 16 / 9;
  background: var(--c-brand-50);
}
.loc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.loc-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.loc-card__title .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-cta);
}
.loc-card__addr {
  margin: 0 0 10px;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.loc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-muted);
}
.loc-card__meta b {
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.loc-card__meta b + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--sp-3);
  border-radius: 50%;
  background: var(--c-border-strong);
  vertical-align: middle;
}

/* ---------- Form + cột phải ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--sp-6);
  align-items: start;
}
.contact-form {
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-cta);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.contact-form__title {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 34px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.contact-form__sub {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.contact-form .field--full,
.contact-form .contact-form__foot {
  grid-column: 1 / -1;
}
.contact-form .field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-small);
  line-height: 20px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.contact-form .req {
  color: #d92d20;
}
.contact-form .form-control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: none;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.contact-form textarea.form-control {
  height: auto;
  padding: 12px 14px;
  line-height: 22px;
}
.contact-form .form-control:focus {
  border-color: var(--c-brand-600);
  outline: 2px solid var(--c-brand-100);
  outline-offset: 0;
}
/* Dòng cam kết + nút gửi nằm cùng một hàng, đúng bản thiết kế. */
.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.contact-form__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 19px;
  color: var(--c-text-muted);
}
/* Ô tích chỉ để trang trí cho khớp thiết kế — KHÔNG phải input, vì bắt buộc tích
   thêm một ô nữa chỉ làm rơi tỉ lệ gửi form mà không thêm giá trị pháp lý nào. */
.contact-form__note .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--c-brand-600);
}

.lh-support {
  padding: var(--sp-6);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--c-brand-950) 0%, var(--c-brand-700) 100%);
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}
.lh-support__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 72%);
}
.lh-support__title {
  margin: 0 0 var(--sp-5);
  font-size: 19px;
  line-height: 27px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.lh-support__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-support__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgb(255 255 255 / 88%);
}
.lh-support__list .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #6fdba0;
}

.side-box {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.side-box__title {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cta);
}
.side-box__name {
  margin: 0 0 var(--sp-3);
  font-size: 17px;
  line-height: 25px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.side-box__list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.side-box__list b {
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.side-box__sub {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cta);
}
.side-box__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-box__chips li {
  padding: 6px 12px;
  border: 1px solid var(--c-brand-100);
  border-radius: var(--r-round);
  background: var(--c-brand-50);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-800);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .contact-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-bar__item {
    border-left: 0;
  }
}

@media (max-width: 991px) {
  .lh-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .lh-quote {
    max-width: 420px;
  }
  .loc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .contact-bar {
    grid-template-columns: minmax(0, 1fr);
    margin-top: -32px;
    padding: var(--sp-4);
  }
  .loc-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-form {
    padding: var(--sp-6) var(--sp-5);
  }
  .contact-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-form__foot .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== intro.css ===== */
/* Giới thiệu - TOP */
/* Phần Page hero (banner + breadcrumb) đã chuyển sang assets/css/pageHero.css
   để dùng chung cho nhiều trang (Sản phẩm, Giải pháp, Dự án, ...). */

/* ============================================================
   Stats bar nổi (đè lên hero) — <div class="container stats-bar-wrap">
   Lọc từ css/pages.css (khối "Stats bar nổi") + phần responsive tương ứng
   trong css/responsive.css (bản gioi-thieu.html gốc).
   .stat / .stat__icon / .stat__value / .stat__label / .stat__lead là component
   dùng chung, đã có sẵn trong styles.css (import global) — không khai báo lại
   ở đây, chỉ override riêng cho ngữ cảnh ".stats-bar".
   ============================================================ */
.stats-bar-wrap {
  margin-top: -52px;
  position: relative;
  z-index: 2;
  margin-bottom: var(--sp-8);
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-stats);
  min-height: 104px;
}
.stats-bar .stat { gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.stats-bar .stat__icon .icon { width: 42px; height: 42px; stroke-width: 1.65; }
.stats-bar .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 44px;
  width: 1px;
  transform: translateY(-50%);
  background: var(--c-divider);
}

@media (max-width: 1199px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar .stat { gap: var(--sp-3); padding: var(--sp-3); }
  .stats-bar .stat__icon .icon { width: 36px; height: 36px; }
  .stats-bar .stat::before { display: none; }
  .stats-bar .stat { border-top: 1px solid var(--c-divider); }
  .stats-bar .stat:nth-child(1),
  .stats-bar .stat:nth-child(2) { border-top: 0; }
  .stats-bar .stat:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   FDI — bản đồ thế giới nền mờ trong .fdi__map-panel
   Lọc từ css/pages.css:99-101 (bản gioi-thieu.html gốc).
   Bản gốc dùng <img> + filter (brightness/invert/sepia/hue-rotate...) để giả
   màu xanh — đổi sang kỹ thuật mask-image chuẩn đã dùng cho .icon-* trong
   general.css: bỏ hẳn thẻ <img>, tô màu bằng background-color + mask-image
   ngay trên .fdi__map (không cần thẻ con), vừa chính xác màu vừa dễ đổi
   theo currentColor/biến CSS thay vì dò filter gần đúng.
   ============================================================ */
.fdi__map-panel {
  position: relative;
  align-self: stretch;
  min-height: 240px;
  display: flex;
  align-items: center;
  padding-left: 36%;
  overflow: hidden;
}
.fdi__map {
  position: absolute;
  inset: 2% -16% 2% -28%;
  opacity: 0.2;
  pointer-events: none;
  background-color: var(--c-brand-600);
  -webkit-mask-image: url('../imgs/world-map-muted.svg');
  mask-image: url('../imgs/world-map-muted.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ============================================================
   Chứng chỉ & tiêu chuẩn — <div class="cert-grid">
   Lọc từ css/pages.css:114,917-919 (bản gioi-thieu.html gốc).
   .certificate-card / .certificate-card__name là component dùng chung, đã có
   sẵn trong styles.css (import global) — chỉ override riêng ngữ cảnh cert-grid.
   Bản gốc dùng "svg.certificate-card__badge" (chỉ áp dụng cho thẻ <svg>) —
   đổi thành ".certificate-card__badge.icon" vì icon giờ là <span class="icon
   icon-*"> (kỹ thuật mask-image), không còn là <svg>; .icon riêng vẫn giữ để
   không ảnh hưởng tới các <img class="certificate-card__badge"> (logo ISO...).
   ============================================================ */
.cert-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-3); }
.certificate-card { justify-content: center; min-height: 104px; padding: var(--sp-3); }
.certificate-card__badge { width: 100%; max-width: 78px; height: auto; margin: 0 auto; display: block; }
.certificate-card__badge.icon { width: 42px; height: 42px; color: var(--c-brand-600); }

/* ===== widget.css ===== */
/* Widget - Mục lục bài viết */
.widget_recent_entries {
  background-color: #fff;
  border-radius: 32px;
  padding: 24px;
  border: 1px solid #f0f2f4;
  box-shadow: 0px 2px 1px 0px #0000000d;
}

.widget_recent_entries .widget-title {
  color: #111418;
  font-size: 18px;
  line-height: 28px;
}

.widget_recent_entries .is-divider {
  height: 1px;
  width: 100%;
  max-width: 100%;
  background-color: #f3f4f6;
}

.widget_recent_entries > ul > li + li {
  border-top: none;
}

.widget_recent_entries > ul > li {
  padding-left: 20px;
}

.widget_recent_entries > ul > li a {
  color: #637588;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.widget_recent_entries > ul > li:first-child a,
.widget_recent_entries > ul > li:hover a {
  color: var(--primary-blue);
}

.widget_recent_entries > ul > li {
  position: relative;
}

.widget_recent_entries > ul > li:first-child:before,
.widget_recent_entries > ul > li:hover::before {
  content: "arrow_right";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  font-weight: normal;
  color: var(--primary-blue);

  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 468px) {
}

/* Widget - Bài viết liên quan */
.widget_custom_html .widget-title {
  display: block;
  color: #111418;
  font-size: 18px;
  line-height: 28px;

  padding-left: 8px;
  border-left: 4px solid var(--primary-blue);
  height: 100%;

  margin-bottom: 20px;
}

.widget_custom_html .is-divider {
  display: none;
}

/* UX Block CTA-1 */
.cch-cta-1 {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.cch-cta-1 .box-text {
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to top, #000000cc 0%, #00000033 90%, #00000000 100%);
}

.cch-cta-1 .box-text span {
  display: inline-block;
  width: fit-content;
  color: #000;
  background-color: #facc15;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  padding: 4px 8px;
}

.cch-cta-1 .box-text h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.cch-cta-1 .box-text h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.cch-cta-1 .box-text p {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 100%;
  font-weight: 400;
}

.cch-cta-1 .box-text a.button {
  display: block;
  width: 100%;
  background-color: var(--primary-blue);
}

.cch-cta-1 .box-text a.button span {
  display: block;
  width: 100%;
  padding: 12px 0;
  color: #fff;
  background-color: transparent;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
}

/* Product Sidebar Widget TuVan Html */
.cms-product-sidebar-widget-tuvan {
  border: 1px solid #dbeafe;
  background-color: #eff6ff;
  padding: 20px;
  border-radius: 24px;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.cms-product-sidebar-widget-tuvan .material-symbols-outlined {
  padding: 16px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px #acc6f7;
  border-radius: 9999px;

  color: var(--primary-blue);
  font-size: 24px;
}

.cms-product-sidebar-widget-tuvan h4 {
  color: var(--primary-blue);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin: 0;
}

.cms-product-sidebar-widget-tuvan p {
  color: #4b5563;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
}

.cms-product-sidebar-widget-tuvan a {
  display: block;
  width: 100%;
  text-align: center;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--primary-blue);
  padding: 12px;
  border-radius: 16px;
}

/* CSS Sold Process Bar */
.skill-set__bar {
  width: 100%;
  height: 20px;
  background: #e5e7ebcc;
  position: relative;
  border-radius: 10px;
  -webkit-box-shadow: 0 5px 15px 0 rgba(7, 33, 66, 0.15);
  box-shadow: 0 5px 15px 0 rgba(7, 33, 66, 0.15);
}

.skill-set__bar:after {
  background-image: linear-gradient(90deg, #1773cf 0%, #60a5fa 100%);
}

.skill-set_fire {
  /* background: url(fire.png) 0 no-repeat; */
  background: none;
  width: 18px;
  height: 21px;
  background-size: contain;
  position: absolute;
  left: 25%;
  top: -11%;
  z-index: 9;
}

.skill-set_fire::before {
  content: "shopping_basket";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  font-weight: normal;
  color: #fff;

  position: absolute;
}

/* Product Sidebar Widget TuVan Html */
.cms-category-sidebar-widget-email-form-section {
  border: 1px solid #dbeafe;
  background-color: #eff6ff;
  padding: 20px 15px !important;
  border-radius: 24px;
  text-align: center;
}
.cms-category-sidebar-widget-email-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cms-category-sidebar-widget-email-form .material-symbols-outlined {
  padding: 16px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px #acc6f7;
  border-radius: 9999px;

  color: var(--primary-blue);
  font-size: 24px;
}

.cms-category-sidebar-widget-email-form h4 {
  color: #111418;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin: 0;
}

.cms-category-sidebar-widget-email-form p {
  color: #4b5563;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
}

.cms-category-sidebar-widget-email-form-section .wpcf7 form {
  margin: 0;
}

.cms-category-sidebar-widget-email-form-section .wpcf7 input[type="email"] {
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid #d1d5db;
  box-shadow: unset;
  min-height: 46px;

  color: #111418;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.cms-category-sidebar-widget-email-form-section .wpcf7 input[type="email"]:focus {
  border-color: var(--primary-blue);
}

.cms-category-sidebar-widget-email-form-section .wpcf7 input[type="submit"] {
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  border-radius: 24px;
  background-color: #111418;
  min-height: 48px;
  margin: 0;
}

.cms-category-sidebar-widget-email-form-section .wpcf7 .wpcf7-spinner {
  display: none;
  position: absolute;
  bottom: 14px;
  right: -8px;
}

/* Category sidebar widget */
.blog-archive .widget_categories {
  background-color: #fff;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 1px 2px 0px #0000000d;
}

.blog-archive .widget_categories .widget-title {
  color: #111418;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.blog-archive .widget_categories ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-archive .widget_categories ul li,
.blog-archive .widget_categories ul li * {
  color: #4b5563;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.blog-archive .widget_categories ul li a {
  color: #637588;
}

.blog-archive .widget_categories ul li a:hover {
  color: var(--primary-blue);
}

/* Single product small card group widget */

.cms-single-product-widget-small-card-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.cms-single-product-widget-small-card-group .cms-item {
  width: 100%;
  border: 1px solid #f0f2f4;
  background-color: #fff;
  border-radius: 24px;
  padding: 16px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.cms-single-product-widget-small-card-group .cms-item .material-symbols-outlined {
  padding: 8px;
  border-radius: 9999px;
}

.cms-single-product-widget-small-card-group .cms-item .cms-green {
  color: #16a34a;
  background-color: #dcfce7;
}

.cms-single-product-widget-small-card-group .cms-item .cms-blue {
  color: #2563eb;
  background-color: #dbeafe;
}

.cms-single-product-widget-small-card-group .cms-item .cms-info .cms-title {
  color: #111418;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-single-product-widget-small-card-group .cms-item .cms-info .cms-subtitle {
  color: #637588;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-transform: unset;
}


/* ===== author.css ===== */
/* Author */
.single-author-breadcrumb-col {
  padding-bottom: 0px !important;
}

.single-author-breadcrumb-col .cms-single-author-breadcrumb {
}
main.single-author {
  background-color: #f6f7f8 !important;
}

main.single-author .archive-page-header {
  display: none;
}

main.single-author .col {
  border: unset !important;
}

main.single-author .cms-section {
  margin-top: 32px;
  color: #374151;
  font-size: 18px;
  line-height: 28px;
}

main.single-author .cms-section .cms-section-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

main.single-author .cms-section .cms-section-title .material-symbols-outlined {
  color: var(--primary-blue);
  font-size: 24px;
}

main.single-author .cms-section .cms-section-title h2 {
  color: #111418;
  font-size: 24px;
  line-height: 32px;
  margin: 0;
  width: max-content;
}

/* End */

.cms-author-top {
  border: 1px solid #f0f2f4;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 1px 2px 0 #0000000d;
  background-color: #fff;

  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 40px;
}

.cms-author-top .cms-img-box {
  border-radius: 16px;
  width: 256px;
  height: 256px;
  min-width: 256px;
  min-height: 256px;
  position: relative;
  padding: 4px;
  background-color: #fff;
  box-shadow:
    0 20px 25px -5px #0000001a,
    0 8px 10px -6px #0000001a;
}

.cms-author-top .cms-img-box img {
  object-fit: cover;
  border-radius: 16px;
}

.cms-author-top .cms-img-box .cms-verified {
  position: absolute;
  right: -30px;
  bottom: 0;

  color: #fff;
  background-color: var(--primary-blue);
  padding: 12px;
  border-radius: 9999px;
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 12px;
  text-transform: uppercase;
}

.cms-author-top .cms-img-box .cms-verified .cms-text {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.cms-author-top .cms-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  justify-content: flex-start;
}

.cms-author-top .cms-info .cms-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.cms-author-top .cms-info .cms-info-top .cms-left h1 {
  color: #111827;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cms-author-top .cms-info .cms-info-top .cms-left p {
  color: var(--primary-blue);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  margin: 0;
}

.cms-author-top .cms-info .cms-info-top .cms-right a {
  width: 100%;
  border-radius: 16px;
  background-color: var(--primary-blue);
  color: #fff;
  padding: 16px 32px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  transition: all 0.3s ease;
}

.cms-author-top .cms-info .cms-info-top .cms-right a:hover {
  box-shadow:
    0 10px 15px -3px #1773cf4d,
    0 4px 6px -4px #1773cf4d;
}

.cms-author-top .cms-info .cms-info-mid .cms-tochuc {
  color: var(--primary-blue);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: #f0f7ff;
  margin-right: 12px;
}

.cms-author-top .cms-info .cms-info-bottom {
  color: #4b5563;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

/* Kinh nghiệm */
.cms-author-kinhnghiem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cms-author-kinhnghiem .cms-item {
  border-radius: 24px;
  background-color: #fff;
  padding: 32px;
  margin-top: 32px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;

  width: 30%;
}

.cms-author-kinhnghiem .cms-item .material-symbols-outlined {
  font-size: 24px;
  padding: 16px;
}

.cms-author-kinhnghiem .cms-item p {
  margin: 0;
}

.cms-author-kinhnghiem .cms-item > div > .cms-title {
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

.cms-author-kinhnghiem .cms-item > div > .cms-number {
  color: #111418;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

/* Tiểu sử */

.cms-author-tieusu blockquote {
  border-left-width: 4px;
  border-color: var(--primary-blue);
  background-color: #1773cf0d;
  padding: 24px;
  border-radius: 24px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  font-size: 18px;
  line-height: 28px;
}

/* Quá trình */
.cms-author-congtac {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.cms-author-quatrinh .cms-item {
  padding-left: 32px;
  position: relative;
  margin-bottom: 16px;
}

.cms-author-quatrinh .cms-item::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--primary-blue);
  border-radius: 9999px;

  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cms-author-quatrinh .cms-item p {
  margin: 0;
}

.cms-author-quatrinh .cms-item .cms-title {
  color: #111418;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.cms-author-quatrinh .cms-item .cms-subtitle {
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Chuyên môn */
.cms-author-chuyenmon .cms-item {
  position: relative;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 24px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 #0000000d;
}

.cms-author-chuyenmon .cms-item p {
  margin: 0;
}

.cms-author-chuyenmon .cms-item .cms-title {
  color: var(--primary-blue);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.cms-author-chuyenmon .cms-item .cms-subtitle {
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Bài viết của tác giả */
.cms-author-posts {
}

.cms-author-posts .cms-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cms-author-posts .cms-section-title .cms-link {
  color: var(--primary-blue);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  width: fit-content;

  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: auto;
}

.cms-author-posts .cms-posts .cms-item {
  border: 1px solid #f0f2f4;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

.cms-author-posts .cms-posts .cms-item:hover {
  box-shadow:
    0 4px 6px -1px #0000001a,
    0 2px 4px -2px #0000001a;
}

.cms-author-posts .cms-posts .cms-item .cms-thumb {
  padding-top: 192px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.cms-author-posts .cms-posts .cms-item .cms-info {
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.cms-author-posts .cms-posts .cms-item:hover .cms-info .cms-title {
  color: var(--primary-blue);
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-info-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-verified {
  color: #15803d;
  background-color: #dcfce7;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-date {
  color: #9ca3af;
  font-size: 12px;
  line-height: 16px;
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-title,
.cms-author-posts .cms-posts .cms-item .cms-info .cms-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-title {
  color: #111418;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin: 0;
  transition: all 0.3s ease;
}

.cms-author-posts .cms-posts .cms-item .cms-info .cms-desc {
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
}

/* Thông tin liên hệ */
.cms-author-contact {
  padding: 32px;
  border-radius: 24px;
  background-color: #fff;
  border: 1px solid #f0f2f4;
}

.cms-author-contact .cms-title {
  color: #111418;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 24px;
}

.cms-author-contact .cms-list {
  margin: 0;
  padding: 0;
}

.cms-author-contact .cms-list .cms-item {
  margin: 0;
  list-style-type: none;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.cms-author-contact .cms-list .cms-item p {
  margin: 0;
}

.cms-author-contact .cms-list .cms-item > .material-symbols-outlined {
  color: var(--primary-blue);
  background-color: #eff6ff;
  padding: 16px;
  border-radius: 9999px;
}

.cms-author-contact .cms-list .cms-item > div .cms-title {
  color: #6b7280;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.cms-author-contact .cms-list .cms-item > div .cms-subtitle {
  color: #111418;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.cms-author-contact .cms-list .cms-item > div .cms-link-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.cms-author-contact .cms-list .cms-item > div .cms-link-group > .cms-link,
.cms-author-contact .cms-list .cms-item > div .cms-link-group .material-symbols-outlined {
  color: #9ca3af;
  font-size: 24px;
}

/* Form tư vấn chuyên gia */
.cms-form-tu-van-chuyen-gia-section {
  background-color: var(--primary-blue);
  border-radius: 24px;
  padding: 32px;
  color: #fff;
}

.cms-form-tu-van-chuyen-gia-section form {
  margin: 0;
}

.cms-form-tu-van-chuyen-gia-text-box p {
  color: #fffc;
  font-size: 16px;
}

.cms-form-tu-van-chuyen-gia-text-box .material-symbols-outlined {
  color: #fff;
  font-size: 36px;
}

.cms-form-tu-van-chuyen-gia-text-box h3 {
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 21px;
}



.cms-contact-form-tu-van-chuyen-gia-wrapper input {
  padding: 12px 16px;
  border-radius: 24px;
  box-shadow: unset;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  font-size: 16px;
  color: #fff;
  min-height: 50px;
}

.cms-contact-form-tu-van-chuyen-gia-wrapper input:focus {
  border-color: #fff;
  border-width: 2px;
  background-color: #ffffff1a;
}

.cms-contact-form-tu-van-chuyen-gia-wrapper input::placeholder {
  color: #fff;
  opacity: .5;
}

.cms-contact-form-tu-van-chuyen-gia-wrapper input[type="submit"] {
  background-color: #fff;
  border-radius: 9999px;
  color: var(--primary-blue);
  font-size: 16px;
  line-height: 100%;
  padding: 16px;
  display: block;
  width: 100%;
  min-height: auto;
}

.cms-contact-form-tu-van-chuyen-gia-wrapper .cms-notice {
  color: #fff9;
  font-size: 10px;
  line-height: 100%;
  text-align: center;
}

@media screen and (max-width: 468px) {
  main.single-author .cms-section {
    margin-top: 20px;
  }

  main.single-author .cms-section .cms-section-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  main.single-author .cms-section .cms-section-title h2 {
    font-size: 18px;
    line-height: 28px;
  }

  .cms-author-top {
    flex-direction: column;
  }

  .cms-author-top .cms-img-box {
    width: 100%;
    height: 100%;
  }

  .cms-author-top .cms-info .cms-info-top {
    flex-direction: column;
  }

  .cms-info-mid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cms-author-top .cms-info .cms-info-top .cms-left h1 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 4px;
  }

  .cms-author-top .cms-info .cms-info-top .cms-left p {
    font-size: 14px;
    line-height: 20px;
  }

  .cms-author-top .cms-info .cms-info-top {
    align-items: stretch;
  }

  .cms-author-top .cms-info .cms-info-bottom {
    font-size: 14px;
    line-height: 20px;
  }

  .cms-author-kinhnghiem {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cms-author-kinhnghiem .cms-item {
    width: 100%;
    border-radius: 24px;
    background-color: #fff;
    padding: 20px;
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }

  .cms-author-congtac {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cms-author-posts .cms-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== authorList.css ===== */
/* Đội ngũ chuyên gia */

/* ===== chinhSachDoiTra.css ===== */
/* Chính sách đổi trả */

/* ===== baomat.css ===== */
/* Chính sách đổi trả */

/* ===== duAn.css ===== */
/* ============================================================
   DỰ ÁN — hub (du-an.html) + chi tiết (du-an-cg-dong-van-ii.html)
   ============================================================
   File này là nơi duy nhất khai báo các component riêng của khu vực Dự án.
   Bản trùng trong pages.css / responsive.css đã xoá: main.css @import duAn.css
   TRƯỚC pages.css và responsive.css, nên một rule sót lại ở 2 file kia sẽ luôn
   thắng cascade và làm mọi chỉnh sửa tại đây trở nên vô tác dụng — kiểu lỗi rất
   khó lần vì nhìn file nào cũng thấy "đúng".

   DÙNG CHUNG, GIỮ Ở NƠI KHÁC (không kéo về đây):
     .pd-top / .pd-gallery* / .pd-thumb / .pd-title / .pd-desc  — dùng chung với
       trang chi tiết Panel PU                                    (pages.css)
     .page-hero* (pageHero.css), .page-section*, .page-section__head/__title,
     .link-arrow, .btn*                                           (pages.css, styles.css)
   Giữ ở pages.css vì chưa trang nào dùng: .pd-thumb--more, .process6*, .testi-quote*
   ============================================================ */

/* ------------------------------------------------------------
   HUB /du-an/ — dự án nổi bật
   ------------------------------------------------------------ */
.featured-project { display: grid; grid-template-columns: 5.4fr 6.6fr; gap: var(--sp-6); align-items: stretch; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--sh-card); }
.featured-project__media { border-radius: var(--r-md); overflow: hidden; min-height: 100%; }
.featured-project__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-project__body { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-content: center; padding: var(--sp-2) 0; }
.featured-project__eyebrow { display: flex; align-items: center; gap: 6px; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-brand-600); margin-bottom: 8px; }
.featured-project__eyebrow .icon { width: 16px; height: 16px; }
.featured-project__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); }
.featured-project__loc { font-size: var(--fs-small); color: var(--c-text-muted); margin: 6px 0 12px; }
.featured-project__desc { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }

/* Khối thông số dùng chung giữa hub (.fp-specs) và trang chi tiết (.projd-specs) */
.fp-specs { display: grid; gap: var(--sp-4); border-left: 1px solid var(--c-divider); padding-left: var(--sp-5); }
.fp-spec { display: flex; gap: 10px; }
.fp-spec .icon { width: 22px; height: 22px; color: var(--c-brand-600); flex: none; }
.fp-spec__icon { width: 26px; height: 26px; object-fit: contain; flex: none; }
.fp-spec b { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); font-weight: var(--fw-regular); }
.fp-spec span { font-size: var(--fs-small); color: var(--c-heading); font-weight: var(--fw-semibold); }

/* Filter bar — bản HTML tĩnh là <div>, bản WordPress là <form method="get"> để lọc
   không cần JS. Rule dưới đây match cả hai nên không phải đổi gì thêm. */
/* flex-wrap: trang Dự án có 3 ô lọc nên luôn vừa một hàng, còn trang Sản phẩm dùng
   lại đúng component này với 4 ô — cho xuống dòng thay vì tràn ra ngoài khung. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-4); }
/* width:auto BẮT BUỘC — Flatsome đặt "select{...;width:100%}" cho mọi thẻ select
   (flatsome.css, cùng nhóm selector với input/textarea) mà .form-control của theme
   con không khai báo width nên không đè được. Là flex item mang width:100%, mỗi
   select lấy flex-basis bằng trọn chiều rộng container: 3 select nuốt hết hàng và
   bóp .filter-bar__reset xuống còn min-content (chữ rớt 3 dòng).
   flex: 0 1 220px -> rộng cố định 220px, KHÔNG giãn (grow 0) nên các select dồn hết
   về trái, vẫn co được khi màn hình hẹp. min-width:0 để co không bị chặn. */
.filter-bar .form-control { flex: 0 1 220px; width: auto; min-width: 0; }
/* flex:none + nowrap: nút reset không bao giờ bị bóp, chữ luôn nằm 1 dòng.
   margin-left:auto đẩy nó về sát mép phải, tách khỏi cụm select bên trái. */
.filter-bar__reset { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; white-space: nowrap; font-size: var(--fs-small); color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.filter-bar__reset .icon { width: 15px; height: 15px; }

/* Lưới dự án dạng danh sách */
/* Dùng chung cho lưới ở hub /du-an/ và khối "Dự án liên quan" cuối trang chi tiết:
   5 cột ở desktop rộng nhất → 3 (≤1199) → 2 (≤991 và mobile).
   Trước đây khối "liên quan" có class riêng .du-cards--related ép 3 cột vì truy vấn
   chỉ lấy 3 bài; nay truy vấn lấy 5 bài (xem single-du-an.php) nên bỏ hẳn, hai lưới
   chạy chung một bộ breakpoint để không lệch nhau khi chỉnh về sau. */
.du-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); }
.du-card { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-project); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-card); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.du-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.du-card__media { aspect-ratio: var(--ar-project); overflow: hidden; }
.du-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.du-card:hover .du-card__media img { transform: scale(1.04); }
.du-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--sp-3); }
.du-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 4px; }
.du-card__meta { min-height: 48px; font-size: var(--fs-caption); line-height: 16px; color: var(--c-text-muted); }
.du-card__year { display: inline-flex; align-items: center; gap: 5px; padding-top: 6px; font-size: var(--fs-caption); color: var(--c-brand-600); margin-top: auto; }
.du-card__year .icon { width: 13px; height: 13px; }
/* Trạng thái rỗng khi bộ lọc không khớp dự án nào — bản HTML tĩnh không có vì
   luôn hiển thị đủ card, nhưng bản động thì bắt buộc phải có. */
.du-cards__empty { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); padding: var(--sp-6) 0; }
.du-cards__empty a { color: var(--c-brand-700); font-weight: var(--fw-semibold); text-decoration: underline; }

/* ------------------------------------------------------------
   CHI TIẾT DỰ ÁN /du-an/<slug>/ — single-du-an.php
   ------------------------------------------------------------ */
/* Khối thông số bên phải ảnh (biến thể đóng khung của .fp-specs) */
.projd-specs { border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); display: grid; gap: var(--sp-4); }
.projd-specs .fp-spec__icon { width: 32px; height: 32px; margin-top: 1px; }
.projd-specs .fp-spec b { font-size: var(--fs-caption); }

/* Dòng địa điểm dưới tiêu đề. Bản mockup dùng style inline trên thẻ <p> và <svg>;
   gom lại thành class để template không phải nhúng style rời rạc. */
.projd-loc { display: flex; align-items: center; gap: 6px; }
.projd-loc .icon { width: 15px; height: 15px; color: var(--c-brand-600); flex: none; }
/* Mockup đặt margin-bottom inline trên nút CTA. */
.projd-cta { margin-bottom: var(--sp-5); }
/* Đoạn mô tả trong "Tổng quan dự án" do the_content() sinh ra nên là <p> thường,
   không mang sẵn class .pd-desc như bản HTML tĩnh. */
.projd-overview-text p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-3); }
.projd-overview-text p:last-child { margin-bottom: 0; }

/* Tổng quan: text + 3 ảnh */
.overview-block { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.overview-block__imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.overview-block__imgs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); }

/* 3 cột: Nhu cầu / Giải pháp / Kết quả */
.case-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.case-col { background: #f8fbff; border: 1px solid #e4edf7; border-radius: var(--r-card); padding: 26px 28px; }
.case-col__title { display: flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-heading); margin-bottom: 22px; }
.case-col__title .icon { width: 30px; height: 30px; color: var(--c-brand-600); flex: none; }
.case-col ul { display: grid; gap: 13px; }
.case-col li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); }
/* Chấm tròn xanh sau icon check: dùng ::before với z-index âm nên .case-col li
   phải KHÔNG tạo stacking context mới, nếu không chấm sẽ chui xuống dưới nền. */
.case-col li .icon { position: relative; width: 18px; height: 18px; color: var(--c-white); flex: none; margin-top: 2px; }
.case-col li .icon::before { content: ""; position: absolute; inset: -3px; border-radius: var(--r-round); background: var(--c-brand-600); z-index: -1; }

/* ------------------------------------------------------------
   Responsive — gom tại đây để mỗi component chỉ nằm trong một file
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
  .du-cards { grid-template-columns: repeat(3, 1fr); }
  .case-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .featured-project { grid-template-columns: 1fr; }
  .featured-project__body { grid-template-columns: 1fr; }
  .fp-specs { border-left: 0; padding-left: 0; grid-template-columns: 1fr 1fr; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .form-control { min-width: 0; flex: 1 1 40%; }
  .filter-bar__reset { margin-left: 0; }
  .du-cards { grid-template-columns: repeat(2, 1fr); }
  .overview-block { grid-template-columns: 1fr; gap: var(--sp-5); }
  .case-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .du-cards { grid-template-columns: repeat(2, 1fr); }
  .fp-specs { grid-template-columns: 1fr; }
  .du-card__title { min-height: 60px; }
  .du-card__meta { min-height: 64px; }
  .overview-block__imgs { grid-template-columns: 1fr; }
  /* .du-card__year quên khai line-height nên ăn 25px của body trên chữ 12px
     (tỉ lệ 2.08) — dòng "Profile Phú Sơn 2025" giãn gấp đôi phần meta ngay trên. */
  .du-card__year { line-height: var(--lh-caption); }
}
/* Ở 375px hai cột chỉ còn 151px/thẻ, cột chữ 125px: tên dự án dài như
   "Công ty TNHH Tarpaulin Joyoung Vina" xuống 3 dòng và dòng năm cũng gãy đôi.
   Một cột cho ảnh to hơn, chữ đọc được, và min-height cũng hết cần thiết. */
@media (max-width: 479px) {
  .du-cards { grid-template-columns: 1fr; }
  .du-card__title,
  .du-card__meta { min-height: 0; }
}

/* ===== nangLuc.css ===== */
/* ============================================================
   TRANG NĂNG LỰC (nang-luc.html)
   ============================================================
   Chỉ chứa phần CSS RIÊNG của nang-luc.html. Đối chiếu bằng cách quét class
   trong <main> của cả 13 file mockup: component nào có trang khác dùng thì để
   nguyên ở file dùng chung, không kéo về đây — nếu không sẽ thành "CSS của trang
   A nằm trong file của trang B".

   Dùng chung, GIỮ Ở NƠI CŨ:
     .stats-bar / .stats-bar-wrap / .stat*     — gioi-thieu, index, lien-he  (pages.css, styles.css)
     .value-cards / .value-card*               — gioi-thieu                  (pages.css)
     .products-grid / .product-card*           — index                       (styles.css)
     .section-eyebrow-row                      — giai-phap                   (pages.css)
     .why-item / __icon / __title / __text     — giai-phap                   (pages.css)
     .section-head / .section-title / .link-arrow / .page-section*           (styles.css, pages.css)
     .page-hero*                                                             (pageHero.css)
   Giữ ở pages.css vì nang-luc.html hiện KHÔNG dùng tới (dành cho biến thể khác
   của trang): .cap-split--qc, .machine-grid, .machine-cell*, .qc-*, .network*,
   .cap4-*, .cta-image*.

   .cap-split__media không có rule ở đây lẫn trong CSS gốc của mockup — ảnh bên
   trong chỉ ăn "img{display:block;max-width:100%;height:auto}" ở tokens.css.
   Đây là hành vi đúng như bản gốc, không phải thiếu sót khi port.
   ============================================================ */

/* Khối "Dây chuyền & thiết bị": 2 cột nội dung / ảnh */
.cap-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.cap-split__h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: var(--sp-3); }
.cap-split__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }

/* Lưới 2 cột các mục "vì sao chọn" nằm trong .cap-split */
.feat2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.feat2 .why-item__text { min-height: 72px; }
/* Biến thể icon dạng ảnh raster của .why-item — chỉ nang-luc.html dùng, các trang
   khác dùng .why-item__icon với icon mask-image. Chuyển từ pages.css sang đây. */
.why-item__img { width: 30px; height: 30px; object-fit: contain; flex: none; }

/* Responsive
   Media query của các component RIÊNG để luôn ở file này (không rải sang
   responsive.css) để một component chỉ nằm trong một file duy nhất. Bản trùng
   trong pages.css/responsive.css đã xoá — pages.css import SAU file này nên nếu
   còn sót, bản ở đó sẽ âm thầm đè lên và mọi sửa đổi tại đây thành vô tác dụng. */
@media (max-width: 991px) {
  .cap-split { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 767px) {
  .feat2 { grid-template-columns: 1fr; }
  .feat2 .why-item__text { min-height: 0; }
}

/* ============================================================
   LĨNH VỰC NĂNG LỰC — 8 lĩnh vực theo profile tr.32-51
   Markup sinh trong [ux_html] của trang Năng lực (page 18).
   ============================================================ */

/* padding="0px" của [section] sinh rule theo #id nên khoảng thở đặt ở lớp trong. */
.ps-fields { background: var(--c-white); }
.lvn { padding-block: var(--sp-16) 0; }

/* ---------- Đầu mục ---------- */
.lvn__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.lvn__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.lvn__dash { width: 28px; height: 3px; border-radius: 2px; background: var(--c-cta); }
.lvn__title {
  font-size: 40px;
  line-height: 50px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.lvn__lead {
  max-width: 76ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.lvn__badge {
  min-width: 220px;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.lvn__badgetitle {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.lvn__badgeline {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}

/* ---------- Dải điều hướng 8 lĩnh vực ---------- */
.lvn__nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sp-6) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
  margin-bottom: var(--sp-12);
}
/* Vạch xanh mép trên trái — cùng dấu nhận với các thẻ khác trên trang. */
.lvn__nav::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 320px;
  height: 4px;
  border-radius: 12px 0 0 0;
  background: var(--c-cta);
}
.lvn__navitem {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-left: 1px solid var(--c-border);
  color: inherit;
  text-decoration: none;
}
.lvn__navitem:nth-child(4n + 1) { border-left: 0; }
.lvn__navitem:nth-child(n + 5) { margin-top: var(--sp-5); }
.lvn__navno {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-cta-soft);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  color: var(--c-cta);
}
.lvn__navbody { display: block; min-width: 0; }
.lvn__navname {
  display: block;
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.lvn__navsub {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text-muted);
}
.lvn__navtag {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
}
.lvn__navitem:hover .lvn__navname { color: var(--c-cta); }

/* ---------- Từng lĩnh vực ---------- */
.lvn__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: center;
  /* Dải nền chạy hết bề ngang màn hình dù .lvn nằm trong container. */
  padding-block: var(--sp-12);
  scroll-margin-top: 90px;
}
/* Hàng chẵn đảo bên và tô nền xanh nhạt để phân tách nhịp đọc. */
.lvn__row--flip { direction: rtl; }
.lvn__row--flip > * { direction: ltr; }
.lvn__row--flip {
  background: var(--c-brand-50);
  box-shadow: -50vw 0 0 var(--c-brand-50), 50vw 0 0 var(--c-brand-50);
}
.lvn__body { display: flex; gap: var(--sp-5); }
.lvn__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--c-brand-900);
  font-size: 18px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
  color: var(--c-white);
}
.lvn__text { min-width: 0; }
.lvn__kicker {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.lvn__h3 {
  font-size: 32px;
  line-height: 42px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.lvn__lead2 {
  font-size: var(--fs-small);
  line-height: 25px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-5);
}
.lvn__list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.lvn__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: 7px;
  font-size: var(--fs-small);
  line-height: 23px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
/* Dấu tích vẽ bằng CSS: chỉ là một ký hiệu lặp lại, không đáng thêm file ảnh. */
.lvn__tick {
  flex: none;
  position: relative;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 2px solid var(--c-cta);
  border-radius: 50%;
}
.lvn__tick::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4.5px;
  width: 6px;
  height: 10px;
  border: solid var(--c-cta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lvn__more { margin-bottom: 0; }
.lvn__more .link-arrow { color: var(--c-cta); }

/* Khối ảnh: 1 ảnh lớn bên trái + 2 ảnh nhỏ xếp dọc bên phải. */
.lvn__media {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--sp-4);
  margin: 0;
}
.lvn__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  object-fit: cover;
}
.lvn__media img:first-child { grid-row: 1 / 3; }
.lvn__media figcaption {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}
/* Lĩnh vực chỉ có một ảnh tư liệu (phụ kiện): cho ảnh chiếm cả khung. */
.lvn__media--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.lvn__media--1 img:first-child { grid-row: auto; aspect-ratio: 16 / 10; }

/* ---------- Dải kêu gọi ---------- */
.lvn__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: var(--sp-12) 0 var(--sp-16);
  padding: var(--sp-6) var(--sp-8);
  border-radius: 12px;
  background: var(--c-brand-900);
}
.lvn__ctaicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 34%);
  color: var(--c-white);
}
.lvn__ctatitle {
  font-size: var(--fs-body);
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: 2px;
}
.lvn__ctasub {
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgb(255 255 255 / 78%);
  margin-bottom: 0;
}
.lvn__ctabtn {
  flex: none;
  margin-left: auto;
  padding: 14px var(--sp-6);
  border-radius: 6px;
  background: var(--c-cta);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white);
  text-decoration: none;
}
.lvn__ctabtn:hover { background: var(--c-cta-hover); color: var(--c-white); }

@media (max-width: 1099px) {
  .lvn__title { font-size: 34px; line-height: 44px; }
  .lvn__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvn__navitem:nth-child(4n + 1) { border-left: 1px solid var(--c-border); }
  .lvn__navitem:nth-child(odd) { border-left: 0; }
  .lvn__navitem:nth-child(n + 3) { margin-top: var(--sp-5); }
  .lvn__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .lvn__h3 { font-size: 28px; line-height: 38px; }
  .lvn__media { grid-template-rows: repeat(2, 150px); }
}
@media (max-width: 849px) {
  .lvn__head { grid-template-columns: minmax(0, 1fr); }
  .lvn__badge { min-width: 0; }
  .lvn__cta { flex-wrap: wrap; }
  .lvn__ctabtn { margin-left: 0; }
}
@media (max-width: 549px) {
  .lvn { padding-block: var(--sp-12) 0; }
  .lvn__title { font-size: 28px; line-height: 38px; }
  .lvn__h3 { font-size: 24px; line-height: 32px; }
  .lvn__h3 br { display: none; }
  .lvn__nav { grid-template-columns: minmax(0, 1fr); }
  .lvn__navitem { border-left: 0 !important; }
  .lvn__navitem:nth-child(n + 2) { margin-top: var(--sp-4); }
  .lvn__body { flex-direction: column; gap: var(--sp-4); }
  .lvn__media { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .lvn__media img { aspect-ratio: 16 / 10; height: auto; }
  .lvn__media img:first-child { grid-row: auto; }
  .lvn__cta { padding: var(--sp-5); margin-bottom: var(--sp-12); }
}

/* ============================================================
   NĂNG LỰC NHÂN SỰ — bản thiết kế mới (profile tr.28-29)
   Markup sinh trong [ux_html] của trang Năng lực (page 18).
   Biểu đồ tròn vẽ bằng conic-gradient nên không cần JS; số liệu
   vẫn nằm ở phần chú giải dạng chữ để đọc được và index được.
   ============================================================ */

/* padding="0px" của [section] sinh rule theo #id nên khoảng thở đặt ở lớp trong. */
.ps-hr { background: var(--c-brand-50); }
.hrs { padding-block: var(--sp-16); }

/* ---------- Đầu mục ---------- */
.hrs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.hrs__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.hrs__dash { width: 28px; height: 3px; border-radius: 2px; background: var(--c-cta); }
/* Tiêu đề mục này để xanh lá: đây là câu chủ đề về con người, không phải
   tiêu đề mục kỹ thuật như các phần khác của trang. */
.hrs__title {
  font-size: 40px;
  line-height: 50px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.hrs__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.hrs__badge {
  min-width: 230px;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.hrs__badgetitle {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.hrs__badgeline {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}

/* ---------- Ba thẻ ---------- */
.hrs__cards {
  display: grid;
  /* Thẻ đầu rộng hơn: nó chứa ô số, trích dẫn và ảnh, không chỉ một biểu đồ. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  margin-bottom: var(--sp-12);
}
.hrs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
}
/* Vạch xanh ngắn ở mép trên trái — cùng dấu nhận với các thẻ mục tài chính. */
.hrs__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 84px;
  height: 4px;
  border-radius: 12px 0 0 0;
  background: var(--c-cta);
}
.hrs__kicker {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.hrs__cardtitle {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: 0;
}

/* Thẻ 1: con số quy mô + trích dẫn + ảnh mũ bảo hộ */
.hrs__scale {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
/* Vạch dọc ngăn ô số với phần chữ, như bản thiết kế. */
.hrs__scale > div {
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-border);
}
.hrs__big {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 132px;
  padding: var(--sp-5) var(--sp-3);
  border-radius: 12px;
  background: var(--c-cta-soft);
  font-size: 40px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: var(--c-cta);
  margin-bottom: 0;
}
.hrs__big sup { font-size: 21px; top: 0; vertical-align: baseline; }
.hrs__tags {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text-muted);
}
.hrs__quote {
  margin: var(--sp-6) 0;
  padding: 0 0 0 var(--sp-5);
  border: 0;
  border-left: 3px solid var(--c-cta);
  font-size: var(--fs-small);
  line-height: 24px;
  font-style: italic;
  color: var(--c-text-secondary);
}
.hrs__helmets {
  display: block;
  width: 100%;
  /* Ảnh tỉ lệ 3,23:1 — để cao tự nhiên, cắt cover sẽ mất mất chiếc mũ ngoài cùng. */
  height: auto;
  margin-top: auto;
  border-radius: 10px;
}

/* Thẻ 2-3: biểu đồ tròn */
.hrs__donut {
  position: relative;
  width: 176px;
  height: 176px;
  margin: var(--sp-6) auto;
}
.hrs__ring {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ring);
  /* Khoét lõi bằng mask thay vì đắp hình tròn trắng lên trên: thẻ có thể đổi
     nền mà lõi vẫn trong suốt đúng. */
  -webkit-mask: radial-gradient(circle, transparent 0 56px, #000 56px);
  mask: radial-gradient(circle, transparent 0 56px, #000 56px);
}
.hrs__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.hrs__center b {
  font-size: 26px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
}
.hrs__center span {
  font-size: 11.5px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.hrs__legend {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
.hrs__legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 9px;
}
.hrs__dot { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.hrs__dot--1 { background: #027439; }
.hrs__dot--2 { background: #35a86a; }
.hrs__dot--3 { background: #a5d8bd; }
.hrs__legend b {
  flex: none;
  min-width: 52px;
  font-size: 15px;
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--c-heading);
}
.hrs__legend span:last-child {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ---------- Hình ảnh thực tế ---------- */
.hrs__peoplehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.hrs__ptitle {
  font-size: 30px;
  line-height: 40px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin-bottom: 0;
}
.hrs__pnote {
  flex: none;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text-muted);
  margin-bottom: 0;
}
.hrs__shots {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
}
.hrs__shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
}
.hrs__shot img {
  display: block;
  width: 100%;
  height: 268px;
  object-fit: cover;
}
.hrs__shot--wide img { height: 268px; }
/* Lớp phủ chuyển màu để chữ chú thích đọc được trên mọi vùng ảnh. */
.hrs__shot figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, rgb(2 20 43 / 0%), rgb(2 20 43 / 78%));
}
.hrs__shotname {
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.hrs__shotsub {
  font-size: 12px;
  line-height: 18px;
  color: rgb(255 255 255 / 78%);
}
.hrs__chip {
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--c-cta);
  font-size: 11.5px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hrs__foot {
  margin: var(--sp-5) 0 0;
  font-size: 12px;
  line-height: var(--lh-caption);
  font-style: italic;
  color: var(--c-text-muted);
}

@media (max-width: 1099px) {
  .hrs__title { font-size: 34px; line-height: 44px; }
  .hrs__cards { grid-template-columns: minmax(0, 1fr); }
  .hrs__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrs__shot--wide { grid-column: 1 / -1; }
}
@media (max-width: 849px) {
  .hrs__head { grid-template-columns: minmax(0, 1fr); }
  .hrs__badge { min-width: 0; }
  .hrs__lead br { display: none; }
  .hrs__peoplehead { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 549px) {
  .hrs { padding-block: var(--sp-12); }
  .hrs__title { font-size: 28px; line-height: 38px; }
  .hrs__ptitle { font-size: 24px; line-height: 32px; }
  .hrs__card { padding: var(--sp-5); }
  .hrs__scale { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .hrs__big { min-width: 0; align-self: stretch; }
  .hrs__shots { grid-template-columns: minmax(0, 1fr); }
  .hrs__shot img, .hrs__shot--wide img { height: 220px; }
}

/* ============================================================
   NĂNG LỰC TÀI CHÍNH — bản thiết kế mới
   Biểu đồ vẽ bằng CSS thuần: chỉ 4 điểm dữ liệu nên không cần
   thư viện chart, và số liệu vẫn nằm ở dạng chữ nên đọc/index được.
   ============================================================ */

/* Flatsome sinh rule theo #id cho thuộc tính padding="0px" của [section], thắng
   mọi selector class — nên khoảng thở phải đặt ở lớp bọc bên trong. */
.ps-fin { background: var(--c-white); }
.fin {
  --fin-hairline: #e6edf4;
  padding-block: var(--sp-16);
}

/* --- Đầu mục: tiêu đề bên trái, hộp nguồn dữ liệu bên phải --- */
.fin__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.fin__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.fin__dash { width: 28px; height: 3px; border-radius: 2px; background: var(--c-cta); }
.fin__title {
  font-size: 40px;
  line-height: 50px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.fin__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.fin__source {
  min-width: 260px;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.fin__srctitle {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.fin__srcline {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.fin__srcline--muted { font-size: 13px; color: var(--c-text-muted); }

/* --- Ba thẻ chỉ số --- */
.fin__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.fin__stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
/* Vạch xanh ngắn ở mép trên trái — dấu nhận của bản thiết kế. */
.fin__stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 84px;
  height: 4px;
  border-radius: var(--r-card) 0 0 0;
  background: var(--c-cta);
}
.fin__stat-icon {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 12px;
  border-radius: 14px;
  background: var(--c-brand-100);
  object-fit: contain;
}
.fin__stat-val {
  font-size: 38px;
  line-height: 1.1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
  margin-bottom: 2px;
}
.fin__stat-name {
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 2px;
}
.fin__stat-sub {
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text-muted);
  margin-bottom: 0;
}

/* --- Hai bảng dữ liệu --- */
.fin__panels {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.fin__panel {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.fin__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.fin__kicker {
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.fin__panel-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: 0;
}
.fin__chip {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--c-brand-50);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

/* --- Biểu đồ cột --- */
.fin__plot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--sp-3);
  margin-top: auto;
}
/* Trục dọc: 4 mốc chia đều, thẳng hàng với các đường kẻ nền của vùng cột. */
.fin__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  text-align: right;
  /* Nhích nửa dòng chữ để mỗi số nằm giữa đường kẻ tương ứng. */
  transform: translateY(-5px);
}
.fin__bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: end;
  height: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Ba đường kẻ ngang tại 300 / 200 / 100 + đường đáy. */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--fin-hairline) 0 1px,
    transparent 1px 76.667px
  );
}
.fin__bars::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--c-border-strong);
}
.fin__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-inline: 19%;
}
/* Nhãn số nằm tuyệt đối ngay trên đầu cột: nếu để trong luồng thì nó ăn mất
   ~28px chiều cao, cột 300 không chạm được đường kẻ 300 của trục. */
.fin__barval {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--h) + 10px);
  font-size: 18px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--c-heading);
  text-align: center;
}
.fin__col {
  height: var(--h);
  border-radius: 8px 8px 0 0;
  background: var(--c-brand-700);
}
/* Bốn cột bốn sắc thái: hai năm đầu tông xanh dương, 2022 xanh lá,
   2023 xanh lá kẻ sọc vì là số dự kiến chứ không phải số quyết toán. */
.fin__bar--a .fin__col { background: linear-gradient(180deg, #1e73c0, #0b4f96); }
.fin__bar--b .fin__col { background: linear-gradient(180deg, #0f5299, #093f78); }
.fin__bar--c .fin__col { background: linear-gradient(180deg, #14a05a, #067a3d); }
.fin__bar--est .fin__col {
  background:
    repeating-linear-gradient(-45deg, var(--c-cta) 0 7px, transparent 7px 15px),
    var(--c-white);
  box-shadow: inset 0 0 0 2px var(--c-cta);
}
.fin__year {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  font-size: 13px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  text-align: center;
}
.fin__est {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 28px);
  font-size: 11px;
  line-height: 1;
  font-style: italic;
  color: var(--c-text-muted);
  text-align: center;
}
.fin__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* Chừa chỗ cho nhãn năm và chữ "Dự kiến" nằm tuyệt đối dưới cột. */
  margin: 56px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text-muted);
}
.fin__swatch {
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--c-cta);
  background:
    repeating-linear-gradient(-45deg, var(--c-cta) 0 5px, transparent 5px 10px),
    var(--c-white);
}

/* --- Cơ cấu doanh thu --- */
.fin__stack {
  display: flex;
  overflow: hidden;
  height: 34px;
  border-radius: 8px;
  margin-bottom: var(--sp-6);
}
.fin__seg {
  flex: 0 0 var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.fin__seg--1 { background: var(--c-brand-900); }
.fin__seg--2 { background: #14a05a; }
.fin__seg--3 { background: #6ba7de; }
.fin__seg--4 { background: #c8d5e3; }
.fin__mix {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fin__mix li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 13px;
  border-bottom: 1px solid var(--fin-hairline);
}
.fin__mix li:first-child { padding-top: 0; }
.fin__dot { flex: none; width: 11px; height: 11px; border-radius: 3px; }
.fin__dot--1 { background: var(--c-brand-900); }
.fin__dot--2 { background: #14a05a; }
.fin__dot--3 { background: #6ba7de; }
.fin__dot--4 { background: #c8d5e3; }
.fin__mixname {
  flex: 1 1 auto;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.fin__mixpct {
  flex: none;
  font-size: 16px;
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--c-heading);
}
.fin__mixnote {
  margin: auto 0 0;
  padding: var(--sp-5);
  border-radius: 10px;
  background: var(--c-surface-subtle);
  font-size: 13px;
  line-height: 21px;
  color: var(--c-text-secondary);
}

.fin__foot {
  margin: var(--sp-5) 0 0;
  font-size: 12px;
  line-height: var(--lh-caption);
  font-style: italic;
  color: var(--c-text-muted);
}

@media (max-width: 1099px) {
  .fin__title { font-size: 34px; line-height: 44px; }
  .fin__panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 849px) {
  .fin__head { grid-template-columns: minmax(0, 1fr); }
  .fin__source { min-width: 0; }
  .fin__lead br { display: none; }
  .fin__stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 549px) {
  .fin { padding-block: var(--sp-12); }
  .nlsys { padding-block: var(--sp-12); }
  .fin__title { font-size: 28px; line-height: 38px; }
  .fin__panel { padding: var(--sp-5); }
  .fin__panel-head { flex-direction: column; }
  .fin__axis, .fin__bars { height: 180px; }
  .fin__bars { background-image: repeating-linear-gradient(to bottom, var(--fin-hairline) 0 1px, transparent 1px 59.667px); gap: var(--sp-3); }
  .fin__barval { font-size: 15px; }
  .fin__bar { padding-inline: 8%; }
  /* Hai nhãn nhỏ nhất bị bóp quá hẹp — giấu đi, danh sách bên dưới đã ghi đủ. */
  .fin__seg--3, .fin__seg--4 { font-size: 0; }
  .fin__mixnote br { display: none; }
}

/* ============================================================
   TRANG NĂNG LỰC — 4 khối đầu, bản thiết kế mới
   Hero có 2 nút + câu slogan · dải 4 số liệu đè lên hero ·
   khối "Hệ thống sản xuất" · khối "Nền tảng phục vụ dự án".
   ============================================================ */

/* ---------- Hero ---------- */
.nl-hero .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(6 42 82 / 96%) 0%, rgb(6 42 82 / 90%) 32%, rgb(6 42 82 / 48%) 66%, rgb(6 42 82 / 12%) 100%);
}
.nlh { position: relative; padding-block: var(--sp-10) 110px; }
.nlh__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: var(--sp-3);
}
/* Nhãn dùng lại trên nền sáng ở hai khối dưới — đổi màu, bỏ gạch dẫn. */
.nlh__eyebrow--dark { color: var(--c-cta); }
.nlh__title { max-width: 16ch; font-size: 54px; line-height: 64px; }
.nlh__sub { max-width: 52ch; }
.nlh__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
/* Tên lớp riêng, KHÔNG dùng .btn (Flatsome nạp sau và ghi đè viền/bo góc). */
.nlh__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 15px var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nlh__btn .icon { width: 18px; height: 18px; }
.nlh__btn--solid { background: var(--c-cta); color: var(--c-white); border: 1px solid var(--c-cta); }
.nlh__btn--solid:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-white); }
.nlh__btn--ghost { background: rgb(255 255 255 / 8%); color: var(--c-white); border: 1px solid rgb(255 255 255 / 55%); }
.nlh__btn--ghost:hover { background: rgb(255 255 255 / 18%); border-color: var(--c-white); color: var(--c-white); }
/* Slogan neo góc phải, cùng hàng với dải nút. */
/* Phương châm của công ty: trước đây là dòng chữ nhỏ nghiêng nằm đè lên vùng
   sáng của ảnh nền nên gần như không đọc được. Đổi thành khối trích dẫn có nền
   mờ và vạch xanh, chữ đủ lớn để đọc rõ trên mọi vùng ảnh. */
.nlh__quote {
  position: absolute;
  right: 0;
  bottom: 96px;
  width: min(360px, 34vw);
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid #22c55e;
  border-radius: 0 10px 10px 0;
  background: rgb(2 20 43 / 46%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nlh__qmark {
  display: block;
  font-size: 46px;
  line-height: 0.6;
  font-weight: var(--fw-extrabold);
  color: #22c55e;
  margin-bottom: var(--sp-2);
}
.nlh__qtext {
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
  text-shadow: 0 2px 10px rgb(1 16 34 / 45%);
}
.nlh__qsrc {
  font-size: 11px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 72%);
}

/* ---------- Dải 4 số liệu ---------- */
.nls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: -74px;
  position: relative;
  z-index: 2;
  padding: var(--sp-6) var(--sp-4);
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-stats);
}
.nls__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
}
/* Vạch ngăn là gạch NGẮN canh giữa, không phải border chạy suốt chiều cao ô. */
.nls__item { position: relative; }
.nls__item + .nls__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: var(--c-cta);
}
.nls__icon { width: 56px; height: 56px; flex: none; object-fit: contain; }
.nls__value {
  font-size: 34px;
  line-height: 1.1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: var(--c-brand-900);
}
.nls__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-secondary);
}

/* ---------- Hệ thống sản xuất ---------- */
/* padding="0px" của [section] sinh rule theo #id, thắng mọi class — khoảng thở
   phải đặt ở lớp bọc bên trong. */
.ps-nlsys { padding-block: 0; }
.nlsys { padding-block: var(--sp-16); }
.nlsys {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}
.nlsys__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: visible;
}
.nlsys__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
.nlsys__cap {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  padding: 10px var(--sp-4);
  border-radius: var(--r-sm);
  background: rgb(4 26 52 / 88%);
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
/* Thẻ trắng nhô ra khỏi mép ảnh — chi tiết nhận diện của bản thiết kế. */
.nlsys__chip {
  position: absolute;
  /* Nhô ra khỏi cả mép phải lẫn mép dưới: nằm hẳn trong ảnh thì nó đè lên dòng
     chú thích ở góc dưới trái. */
  right: calc(var(--sp-8) * -1);
  bottom: -26px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-card-hover);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  white-space: nowrap;
}
.nlsys__chip img { width: 22px; height: 22px; }
.nlsys__chip i { font-style: normal; color: var(--c-cta); }

.nlsys__title {
  font-size: 34px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.nlsys__text {
  font-size: var(--fs-body);
  line-height: 28px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-6);
}
.nlf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.nlf__item { display: flex; gap: var(--sp-4); }
.nlf__item img { width: 46px; height: 46px; flex: none; object-fit: contain; }
.nlf__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 2px;
}
.nlf__text { font-size: var(--fs-small); line-height: 22px; color: var(--c-text-muted); }

/* ---------- Nền tảng phục vụ dự án ---------- */
/* Dải nền xanh nhạt tách hẳn khỏi hai mục trắng kề bên, đúng bản thiết kế. */
.ps-nlb { background: var(--c-brand-100); }
/*
 * Bốn cột bằng nhau: giới thiệu + ba thẻ, khe hẹp 12px đúng như bản thiết kế.
 * Thẻ chỉ ~310px nên số/vạch/icon phải sát nhau, cột chữ mới đủ ~155px.
 */
.nlb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  padding-block: var(--sp-16);
}
.nlb__intro { align-self: center; padding-right: var(--sp-4); }
.nlb__cards { display: contents; }
.nlb__title {
  font-size: 32px;
  line-height: 42px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.nlb__text { font-size: var(--fs-small); line-height: 24px; color: var(--c-text-secondary); }

/*
 * Bố cục một thẻ theo bản thiết kế: [số] │ [icon] [tiêu đề] trên CÙNG một hàng,
 * mô tả nằm ở cột 3 nên thụt vào thẳng hàng với tiêu đề, còn liên kết trải hết
 * bề ngang ở đáy.
 */
.nlb__card {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: var(--sp-4);
  align-content: start;
  align-items: center;
  /* Chừa chỗ cho liên kết ghim ở đáy thẻ. */
  padding: 20px 20px 54px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
}
/* Thẻ đội ngũ tô navy: nó là con người, không phải địa điểm — khác nhóm với hai thẻ nhà máy. */
.nlb__card--accent { background: var(--c-brand-900); border-color: var(--c-brand-900); color: var(--c-white); }
.nlb__num {
  grid-row: 1;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
  margin-bottom: 0;
}
.nlb__card--accent .nlb__num { color: #6ee7a8; }
/* Vạch dọc ngăn số với icon — chi tiết "01 │ icon" của bản thiết kế. */
.nlb__sep {
  grid-row: 1;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  background: var(--c-border-strong);
}
.nlb__card--accent .nlb__sep { background: rgb(255 255 255 / 34%); }
.nlb__icon { grid-row: 1; width: 38px; height: 38px; object-fit: contain; margin-bottom: 0; }
.nlb__name {
  grid-row: 1;
  grid-column: 4;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: 0;
}
.nlb__card--accent .nlb__name { color: var(--c-white); }
.nlb__desc {
  /* Cột 4 = thẳng hàng với tiêu đề, không thụt theo số hay icon. */
  grid-column: 4;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.nlb__card--accent .nlb__desc { color: rgb(255 255 255 / 82%); }
/*
 * Ghim tuyệt đối chứ không đặt vào một hàng lưới: thẻ 1 và 2 có hai đoạn mô tả,
 * ép chúng vào cùng một hàng thì chữ chồng lên nhau.
 */
.nlb__card .link-arrow {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: var(--c-cta);
}
/* Thẻ navy: chữ liên kết màu trắng, vạch xanh chỉ gạch dưới đúng bề ngang chữ. */
.nlb__card--accent .link-arrow { color: var(--c-white); }
.nlb__card--accent .link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  /* Xanh sáng chứ không phải --c-cta: nền navy nuốt mất sắc xanh đậm. */
  background: #22c55e;
}

/* Chừa lề hai bên khi hàng không còn được căn giữa — xem ghi chú cùng nội dung ở
   pageHome.css (.ps-stdz). Khối này cũng nằm trong row-collapse nên từ 1329px trở
   xuống, tiêu đề "Sản xuất trực tiếp, chủ động quy cách và tiến độ" và đoạn mô tả
   dán sát cả hai mép màn hình. */
@media (max-width: 1329px) {
  .nlsys {
    padding-inline: var(--sp-4);
  }
}

@media (max-width: 1099px) {
  .nlh__title { font-size: 40px; line-height: 50px; }
  .nlh__quote { position: static; width: auto; max-width: 460px; margin-top: var(--sp-6); }
  .nls { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .nls__item:nth-child(odd)::before { display: none; }
  .nlsys { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .nlsys__chip { position: static; margin-top: var(--sp-4); }
  /* [row style="collapse"] bỏ máng hai bên, ở khổ hẹp thẻ chạm sát mép màn hình. */
  .nlb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); padding-inline: 15px; }
  .nlb__intro { grid-column: 1 / -1; padding-right: 0; }
  .nlb__desc { font-size: var(--fs-small); line-height: 22px; }
}
@media (max-width: 599px) {
  .nlh__title { font-size: 30px; line-height: 40px; }
  .nlh__sub br { display: none; }
  .nlh__qtext { font-size: 19px; line-height: 28px; }
  .nlh__qtext br { display: none; }
  .nlh__cta { flex-direction: column; align-items: stretch; }
  .nlh__btn { justify-content: center; }
  .nls { grid-template-columns: minmax(0, 1fr); margin-top: -46px; }
  .nls__item::before { display: none !important; }
  .nlf { grid-template-columns: minmax(0, 1fr); }
  .nlb { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-12); }
  /* Thẻ chỉ còn ~320px: giữ hàng "01 │ icon │ tiêu đề" nhưng thả mô tả ra hết bề ngang,
     nếu để thụt theo tiêu đề thì cột chữ chỉ còn ~150px. */
  .nlb__desc { grid-column: 1 / -1; }
  .nlsys__title { font-size: 26px; line-height: 36px; }
  .nlb__title { font-size: 26px; line-height: 34px; }
  .nlb__title br { display: none; }
}

/* ===== taiLieu.css ===== */
/* ============================================================
   TRANG TÀI LIỆU (tai-lieu.html)
   ============================================================
   .btn--ghost dùng chung nhiều trang, .doc-request chưa được trang nào
   dùng tới — cả hai vẫn giữ ở pages.css, không lặp lại ở đây. */
/* Không đổ box-shadow cho ô tìm kiếm: nó nằm ngay dưới hero, bóng đổ làm khối này
   nổi ngang hàng với các thẻ nội dung phía dưới trong khi vai trò của nó chỉ là
   thanh công cụ. Viền là đủ. */
.doc-search { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); }
.doc-search__icon { color: var(--c-icon-muted); flex: none; }
.doc-search__icon .icon { width: 20px; height: 20px; }
.doc-search input { flex: 1; border: 0; outline: 0; font-size: var(--fs-body); background: transparent; }
/* Flatsome đặt "box-shadow: inset 0 1px 2px rgba(0,0,0,.1)" cho mọi input (và một
   bản đậm hơn ở :focus) nên ô tìm kiếm vẫn lõm xuống dù đã bỏ border ở rule trên.
   Selector gắn thêm [type="search"] để đạt specificity 0,2,1 — thắng chắc
   "input[type=search]" (0,1,1) của Flatsome bất kể thứ tự nạp file CSS.
   margin-bottom: Flatsome cũng thêm khoảng cách dưới cho input, ở đây input là
   flex item nên phải gỡ mới canh giữa được với icon và nút hai bên. */
.doc-search input[type="search"],
.doc-search input[type="search"]:focus { box-shadow: none; margin-bottom: 0; }
.doc-search input::placeholder { color: var(--c-text-muted); }
.doc-search__adv { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-brand-700); white-space: nowrap; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.doc-search__adv .icon { width: 15px; height: 15px; }
/* Form lọc bọc ngoài ô tìm kiếm. position:relative để .doc-adv__panel neo vào đây
   (thả xuống hết chiều ngang ô tìm kiếm) thay vì neo vào .doc-search — panel là
   absolute nên không đẩy thanh tab bên dưới xuống mỗi lần bung ra. */
.doc-filter { position: relative; }
/* <details> làm nút "Tìm kiếm nâng cao" — nút duy nhất của thanh tìm kiếm, đúng như
   bản thiết kế. Mở/đóng không cần JS; bỏ tam giác marker mặc định của cả Firefox
   (list-style) lẫn WebKit (::-webkit-details-marker). */
.doc-adv { flex: none; position: static; }
.doc-adv > summary { list-style: none; cursor: pointer; }
.doc-adv > summary::-webkit-details-marker { display: none; }
.doc-adv[open] > summary { background: var(--c-brand-50); border-color: var(--c-brand-600); }
.doc-adv__panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--sh-card-hover); }
.doc-adv__field { display: grid; gap: 6px; flex: 0 1 220px; min-width: 0; }
.doc-adv__field > span { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-secondary); }
.doc-adv__field > span em { font-style: normal; font-weight: var(--fw-regular); color: var(--c-text-muted); }
/* Select nhiều lựa chọn: hiện hết danh sách thay vì cuộn trong khung 2 dòng, và bỏ
   mũi tên/chiều cao 1 dòng mà Flatsome đặt cho mọi thẻ select. */
.doc-adv__multi { height: auto; padding: 6px; background-image: none; }
.doc-adv__multi option { padding: 3px 6px; }
/* width:auto BẮT BUỘC — Flatsome đặt "select{...;width:100%}" cho mọi thẻ select mà
   .form-control của theme con không khai báo width nên không đè được (xem chú thích
   dài ở .filter-bar trong duAn.css). */
.doc-adv__field .form-control { width: 100%; min-width: 0; margin-bottom: 0; }
.doc-adv__actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.doc-adv__reset { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-brand-600); }
.doc-adv__reset .icon { width: 15px; height: 15px; }

.doc-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.doc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-text-secondary); }
.doc-tab:hover { border-color: #b7cbe0; color: var(--c-brand-700); }
.doc-tab[aria-current="true"] { background: var(--c-brand-700); border-color: var(--c-brand-700); color: var(--c-white); }
.doc-tab__count { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--c-surface-subtle); color: var(--c-text-muted); }
.doc-tab[aria-current="true"] .doc-tab__count { background: rgba(255,255,255,0.22); color: var(--c-white); }

.doccat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); }
.doccat-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 14px; padding: var(--sp-5); box-shadow: var(--sh-card); text-align: left; transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.doccat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.doccat-card__head { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.doccat-card__icon { width: 176px; height: 176px; flex-shrink: 0; color: var(--c-brand-700); display: grid; place-items: center; }
.doccat-card__icon .icon { width: 30px; height: 30px; }
.doccat-card__icon-img { width: 176px; height: 176px; object-fit: contain; display: block; }
.doccat-card__badge { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 12px; font-weight: var(--fw-semibold); background: var(--c-surface-subtle); color: var(--c-text-secondary); padding: 4px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(15, 35, 55, 0.1); }
.doccat-card__title { min-height: 44px; font-size: 16px; line-height: 22px; font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 8px; }
.doccat-card__desc { min-height: 54px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); margin-bottom: 14px; }
.doccat-card__fmt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: 16px; }
.doccat-card__fmt .icon { width: 14px; height: 14px; color: #c0392b; }
.doccat-card .btn { margin-top: auto; align-self: flex-start; }

/* Ô sắp xếp ở đầu lưới tài liệu — thay cho dòng chữ tĩnh "Sắp xếp: Mới nhất" của
   bản thiết kế, giữ nguyên kích cỡ/màu chữ phụ để không nặng hơn tiêu đề bên cạnh. */
.doc-sort { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.doc-sort label { font-size: var(--fs-small); color: var(--c-text-muted); white-space: nowrap; }
.doc-sort .form-control { width: auto; min-width: 0; margin-bottom: 0; font-size: var(--fs-small); }

/* Thẻ tài liệu con dùng lại nguyên .doccat-card ở trên; .doc-item chỉ thêm phần
   khác biệt: cả thẻ là một <a> (thay vì <div> có nút bên trong) nên phải tự khai
   báo màu chữ và bỏ gạch chân — Flatsome có rule a:hover{color:...} và các rule
   gạch chân trong menu, đều thắng giá trị thừa kế. Ảnh đầu thẻ vẫn là icon nhóm
   vuông nên dùng nguyên .doccat-card__icon-img (object-fit:contain), không đè. */
.doc-item { text-decoration: none; color: inherit; }
.doc-item:hover { text-decoration: none; }
.doc-item .doccat-card__title { color: var(--c-heading); }
/* Định dạng và năm tách thành hai mục riêng, mỗi mục một icon — giống
   .featured-doc__meta. margin-bottom chuyển lên hàng bọc để hai mục không cộng dồn
   khoảng cách dưới, và icon lịch dùng màu brand thay vì màu đỏ của icon tệp
   (.doccat-card__fmt .icon cùng độ ưu tiên nên rule đứng sau này thắng). */
.doc-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-4); margin-bottom: 16px; }
.doc-item__meta .doccat-card__fmt { margin-bottom: 0; }
.doc-item__year .icon { color: var(--c-brand-600); }
.doc-item:hover .doccat-card__title { color: var(--c-brand-700); }
/* Nút bên trong là <span> (không lồng được <a> trong <a>) nên không có con trỏ
   pointer mặc định; toàn thẻ đã là link nên trả lại pointer cho khớp cảm giác bấm. */
.doc-item .btn { cursor: pointer; }

.featured-doc { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: center; background: var(--c-brand-50); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 24px; }
.featured-doc__media { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); aspect-ratio: 16/10; }
.featured-doc__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-doc__body { min-width: 0; }
.featured-doc__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-brand-600); margin-bottom: 8px; }
.featured-doc__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 10px; }
.featured-doc__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }
.featured-doc__meta { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.featured-doc__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--c-text-muted); }
.featured-doc__meta .icon { width: 15px; height: 15px; color: var(--c-brand-600); }
.featured-doc__meta span:first-child .icon { color: #d23b32; }
.featured-doc__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ------------------------------------------------------------
   TRANG CHI TIẾT TÀI LIỆU (single-tai-lieu.php)
   ------------------------------------------------------------
   Không có trong bản bàn giao tĩnh; dựng theo ngôn ngữ thiết kế của trang chi tiết
   dự án. .pd-title / .pd-desc dùng lại từ pages.css nên không lặp ở đây. */
.docd-top { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
/* Khung bìa theo tỉ lệ A4 dọc (1:1,414) vì bìa là ảnh trang 1 của chính file PDF.
   object-fit: contain để không cắt mất tiêu đề trên bìa — vài tài liệu là A4 ngang
   (vd. catalogue keo Juhuan) nên sẽ có viền trắng hai bên, chấp nhận được. */
.docd-cover { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-card); aspect-ratio: 1 / 1.414; }
.docd-cover img { width: 100%; height: 100%; object-fit: contain; }
.docd-cover__fmt { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--c-white); color: var(--c-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); box-shadow: 0 2px 6px rgba(15, 35, 55, 0.12); }
.docd-cover__fmt .icon { width: 14px; height: 14px; color: #c0392b; }
.docd-info { min-width: 0; }
.docd-cat { display: inline-flex; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: var(--c-brand-50); color: var(--c-brand-700); font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-decoration: none; }
.docd-cat:hover { background: var(--c-brand-700); color: var(--c-white); text-decoration: none; }
.docd-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.docd-note { display: flex; gap: 8px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.docd-note .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-brand-600); }
/* Biến thể đóng khung của .fp-specs (duAn.css) nhưng 2 cột vì mỗi dòng rất ngắn. */
.docd-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); }
.docd-meta__row { display: flex; gap: 10px; }
.docd-meta__row .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--c-brand-600); }
.docd-meta__row b { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); font-weight: var(--fw-regular); }
.docd-meta__row span:not(.icon) { font-size: var(--fs-small); color: var(--c-heading); font-weight: var(--fw-semibold); }

.docd-body-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: start; }
/* Chỉ có khối "Nội dung chính", không có bài giới thiệu — cho nó chiếm trọn hàng. */
.docd-body-grid--solo { grid-template-columns: 1fr; }
.docd-body { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); }
.docd-body > * + * { margin-top: var(--sp-3); }
/* tokens.css chỉ có --fs-h2/--lh-h2; h3 trong nội dung soạn thảo dùng cỡ trung gian
   cố định. color khai báo tường minh vì Flatsome in ra rule chung h1..h6{color:...}. */
.docd-body h3 { font-size: 18px; line-height: 26px; font-weight: var(--fw-bold); color: var(--c-heading); }
.docd-body ul { list-style: disc; padding-left: 1.2em; }
.docd-points { border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-brand-50); padding: var(--sp-5); }
.docd-points__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: var(--sp-3); }
.docd-points__title .icon { width: 18px; height: 18px; color: var(--c-brand-600); }
.docd-points ul { display: grid; gap: 10px; }
.docd-points li { display: flex; gap: 8px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }
.docd-points li .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-brand-600); }

/* FAQ */
/* Bản vá cũ "#faq-title + .link-arrow { width:100%; justify-content:flex-end }"
   đã gỡ: nó chữa triệu chứng bằng cách đẩy link xuống hẳn một hàng riêng (khác
   thiết kế gốc - mockup để tiêu đề và link cùng hàng), lại dùng selector có ID
   nên specificity 1,1,0 luôn thắng mọi rule .link-arrow dùng chung dù đặt ở đâu.
   Nguyên nhân gốc (link-arrow bị flex-shrink bóp lại) nay đã xử lý ngay tại
   .link-arrow trong styles.css nên trang này không cần rule riêng nữa. */
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.faq-item { border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--sh-card); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item__plus { width: 22px; height: 22px; border-radius: 999px; background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; flex: none; font-size: 16px; line-height: 1; }
.faq-item[open] .faq-item__plus { transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.faq-item__body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); }

/* Responsive */
@media (max-width: 1199px) {
  .doccat-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .doccat-cards { grid-template-columns: repeat(2, 1fr); }
  .featured-doc { grid-template-columns: 1fr; min-height: 0; }
  .faq-grid { grid-template-columns: 1fr; }
  .docd-top,
  .docd-body-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 767px) {
  .doc-search { flex-wrap: wrap; }
  .doc-search input { flex: 1 1 100%; order: 3; }
  /* Panel nâng cao bỏ absolute ở mobile: màn hẹp thì lớp phủ che gần hết nội dung
     phía dưới và người dùng mất ngữ cảnh. Cho nó chảy theo dòng ngay dưới ô tìm kiếm. */
  .doc-adv { position: relative; flex: 1 1 100%; order: 4; }
  .doc-adv__panel { position: static; margin-top: var(--sp-3); }
  .doc-adv__field { flex: 1 1 100%; }
  .doc-adv__actions { width: 100%; margin-left: 0; justify-content: space-between; }
  .doccat-cards { grid-template-columns: 1fr; }
  .featured-doc { gap: 20px; padding: 18px; }
  .featured-doc__meta { flex-wrap: wrap; gap: 10px 18px; }
  .featured-doc__actions .btn { flex: 1 1 140px; }
  .doccat-card__title,
  .doccat-card__desc { min-height: 0; }
  .docd-meta { grid-template-columns: 1fr; padding: var(--sp-4); }
  .docd-actions .btn { flex: 1 1 160px; }
}

/* ============================================================
   LƯỚI BẢN VẼ BIÊN DẠNG (trong .docd-body của single-tai-lieu)
   Markup do post_content sinh ra ở scripts import, xem 5 tài liệu
   "Bản vẽ biên dạng ..." — mỗi hình mở lightbox của Flatsome.
   Bản vẽ là line-art nền trắng nên để nguyên nền, chỉ thêm viền
   cho tách khỏi nền trang.
   ============================================================ */

.docd-drawings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.docd-drawing {
  margin: 0;
}
.docd-drawing a {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.docd-drawing a:hover {
  border-color: var(--c-cta);
  box-shadow: var(--sh-card);
}
.docd-drawing img {
  display: block;
  width: 100%;
  height: auto;
}
.docd-drawing figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

@media (max-width: 649px) {
  .docd-drawings {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .docd-drawing a {
    transition: none;
  }
}

/* ===== kienThuc.css ===== */
/* ============================================================
   TRANG KIẾN THỨC (kien-thuc.html)
   ============================================================
   .kt-layout / .kt-main / .kt-side / .kt-featured* / .kt-badge / .kt-cards /
   .kt-card* / .kt-box* / .kt-mini* / .side-doc* / .kt-consult* / .process-box /
   .product-tabs* dùng chung với kien-thuc-panel-cach-nhiet.html và/hoặc
   kien-thuc-panel-pu-pir.html (và san-pham.html, giai-phap.html) — vẫn khai
   báo ở pages.css, không định nghĩa lại ở đây. File này chỉ chứa phần thật sự
   riêng của kien-thuc.html: override ".kt-docs" cho khối "Tài liệu nổi bật" và
   khối "Khám phá" (".kt-explore-box" / ".kt-explore"). */
.kt-docs .kt-box__title { color: var(--c-brand-800); }
.kt-docs .side-doc { min-height: 62px; padding: 11px 0; gap: 12px; }
.kt-docs .side-doc__icon { width: 32px; height: 38px; color: var(--c-brand-700); }
.kt-docs .side-doc__icon .icon { width: 25px; height: 25px; }
.kt-docs .side-doc__body { display: grid; gap: 2px; min-width: 0; }
.kt-docs .side-doc__title { display: block; line-height: 18px; }
.kt-docs .side-doc__download { display: block; font-size: var(--fs-caption); line-height: 16px; color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.kt-docs .side-doc:hover .side-doc__title { color: var(--c-brand-700); }

.kt-explore-box { display: grid; grid-template-columns: minmax(400px, 1.2fr) minmax(0, 2fr); align-items: center; gap: 28px; padding: 26px 30px; background: #f5f9fd; border-color: #c6dcef; }
.kt-explore-box__title { font-size: 27px; line-height: 34px; font-weight: var(--fw-bold); color: var(--c-brand-900); margin-bottom: 10px; }
.kt-explore-box__text { max-width: 560px; font-size: var(--fs-body); line-height: 25px; color: var(--c-text-secondary); }
.kt-explore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.kt-explore__card { display: flex; align-items: stretch; min-width: 0; min-height: 132px; gap: 0; border: 1px solid #e3ebf3; border-radius: var(--r-card); padding: 0 18px 0 0; overflow: hidden; background: var(--c-white); box-shadow: 0 4px 16px rgba(13,61,105,0.06); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.kt-explore__card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.kt-explore__thumb { width: 132px; min-height: 130px; overflow: hidden; flex: none; }
.kt-explore__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kt-explore__thumb--icon { display: grid; place-items: center; background: #eef6fd; }
.kt-explore__thumb--icon .icon { width: 58px; height: 58px; color: var(--c-brand-700); }
.kt-explore__content { align-self: center; display: grid; gap: 8px; min-width: 0; padding: 16px 14px; }
.kt-explore__label { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-brand-600); }
.kt-explore__title { display: block; font-size: 20px; line-height: 26px; font-weight: var(--fw-bold); color: var(--c-heading); }
.kt-explore__card .kt-explore__arrow { align-self: center; flex: none; width: 24px; height: 24px; color: var(--c-brand-600); margin-left: auto; }

/* ============================================================
   TRANG DANH MỤC BÀI VIẾT (category.php)
   ============================================================
   Bổ sung khi đưa bố cục kien-thuc.html vào WordPress. Ba nhóm vấn đề mà bản
   HTML tĩnh không gặp: sidebar do widget dựng, Flatsome đè màu link, và inline
   style trong mockup phải chuyển thành class. */

/* Sidebar dựng bằng widget: before_widget của sidebar "sidebar-category" bọc mỗi
   khối trong <div class="widget kt-box|kt-consult">. Flatsome cho .widget
   margin-bottom:1.5em, cộng dồn với gap của .kt-side thành khoảng cách đôi. */
.kt-side .widget { margin-bottom: 0; }

/* Toàn bộ khối trong bố cục này là thẻ <a>. Flatsome in ra rule toàn cục
   "a:hover{color:...}" từ Customizer > Link Hover Color; rule đó khớp trực tiếp
   phần tử nên thắng cả màu kế thừa lẫn class đơn (a:hover = 0,1,1). Phải khai
   báo lại màu ở trạng thái hover, nếu không chữ trắng trên nền tối sẽ đổi màu. */
.kt-featured,
.kt-featured:hover { color: var(--c-white); }
/* .kt-featured__title là thẻ <h2>: màu trắng kế thừa từ .kt-featured ở trên bị
   rule "h1..h6{color:#083a6e}" của Customizer đè (khớp trực tiếp thẻ luôn thắng
   giá trị kế thừa) — chữ xanh đậm trên ảnh nền tối. Cùng lỗi với .hero__title. */
.kt-featured__title { color: var(--c-white); }
/* Bản tĩnh dùng inline style="color:#fff" cho link này — template không rải
   inline style nên chuyển thành rule. */
.kt-featured .link-arrow,
.kt-featured:hover .link-arrow { color: var(--c-white); }
.kt-consult__button:hover { color: var(--c-brand-900); background: var(--c-white); }

/* Widget "Hộp tư vấn" — tiêu đề là thẻ <h3> nên dính hai rule toàn cục mà Flatsome
   in ra từ Customizer > Typography (flatsome/inc/functions/function-custom-css.php):
       h1,h2,h3,h4,h5,h6,.heading-font { color: #083a6e }        (dòng 203)
       h1,h2,h3,h4,h5,h6,.heading-font { font-family: Inter }     (dòng 265)
   Rule đó KHỚP TRỰC TIẾP thẻ h3, mà giá trị khớp trực tiếp luôn thắng giá trị kế
   thừa bất kể specificity: .kt-consult__title không tự khai màu nên màu trắng kế
   thừa từ .kt-consult bị thay bằng #083a6e — chữ xanh đậm nằm trên nền ảnh tối.

   Phần font-family của cùng rule đó đã xử lý tập trung ở main.css (khai lại
   --font-sans cho h1–h6), nên ở đây chỉ còn phải chữa màu. */
.kt-consult__title { color: var(--c-white); }

/* Phân trang của Flatsome (ul.page-numbers.nav-pagination) — thiết kế gốc không
   có UI này vì chỉ demo 3 bài. */
.kt-main .nav-pagination { margin-top: var(--sp-6); }

/* Responsive */
@media (max-width: 991px) {
  .kt-explore-box { grid-template-columns: 1fr; gap: 20px; }
  .kt-explore { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kt-explore-box { padding: 22px 18px; }
  .kt-explore-box__title { font-size: 22px; line-height: 28px; }
  .kt-explore-box__text { font-size: var(--fs-small); line-height: 21px; }
  .kt-explore__card { min-height: 110px; padding-right: 14px; }
  .kt-explore__thumb { width: 100px; min-height: 108px; }
  .kt-explore__thumb--icon .icon { width: 46px; height: 46px; }
  .kt-explore__content { padding: 12px; }
  .kt-explore__title { font-size: 17px; line-height: 22px; }
}
/* Ở 375px thẻ chỉ rộng 263px: ảnh 100px + đệm + mũi tên 24px ăn hết, cột chữ
   còn đúng 99px nên "Panel & Tấm lợp cách nhiệt" vỡ thành 3 dòng. Thu ảnh và
   bỏ mũi tên (cả thẻ đã là một liên kết, mũi tên chỉ để trang trí). */
@media (max-width: 479px) {
  .kt-explore__thumb { width: 76px; min-height: 100px; }
  .kt-explore__thumb--icon .icon { width: 38px; height: 38px; }
  .kt-explore__card { padding-right: 10px; }
  .kt-explore__content { padding: 10px; }
  .kt-explore__card .kt-explore__arrow { display: none; }
}

/* ===== sanPham.css ===== */
/* ============================================================
   TRANG SẢN PHẨM (/san-pham) — chuyển từ my_notes/.../san-pham.html
   ============================================================
   Base rule của toàn bộ component trên trang, tách khỏi pages.css (pages.css
   được @import SAU file này trong main.css, nên bản copy cũ ở đó sẽ luôn thắng
   cascade và vô hiệu hoá mọi chỉnh sửa tại đây — đã xoá hẳn bên đó).
   Media query responsive vẫn nằm ở responsive.css (mục "Trang Sản phẩm"),
   đúng kiến trúc "responsive.css phải @import cuối cùng" ghi trong main.css. */

/* Tabs sản phẩm
   Số cột mặc định 6 (trang /san-pham). Nơi nào có số tab khác thì truyền
   style="--tabs-count: N" trên chính .product-tabs — dùng biến CSS chứ không đặt
   grid-template-columns inline, vì inline style thắng cả media query và sẽ phá
   bố cục 3 cột / 2 cột ở tablet, mobile (xem responsive.css). */
.product-tabs { display: grid; grid-template-columns: repeat(var(--tabs-count, 6), minmax(0, 1fr)); border-bottom: 1px solid var(--c-border); padding-bottom: 8px; }
.product-tabs--5 { grid-template-columns: repeat(5, 1fr); }
.product-tab { position: relative; display: flex; min-height: 78px; align-items: center; justify-content: center; gap: 12px; padding: 12px 10px; border-radius: var(--r-md); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); text-align: center; line-height: 18px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.product-tab + .product-tab::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 48px; transform: translateY(-50%); background: var(--c-divider); }
.product-tab .icon { width: 48px; height: 48px; color: var(--c-brand-600); flex: none; stroke-width: 1.55; }
/* Icon tab dạng ảnh raster (đã cắt nền trong suốt) — không dùng currentColor */
.product-tab__icon { width: auto; height: 44px; max-width: 56px; object-fit: contain; flex: none; }
.product-tab:hover { color: var(--c-brand-700); }
.product-tab[aria-current="true"] { background: var(--c-white); color: var(--c-brand-700); border: 1px solid #dce7f1; box-shadow: var(--sh-card); }
.product-tab[aria-current="true"]::before,
.product-tab[aria-current="true"] + .product-tab::before { display: none; }

/* Intro toàn diện + 4 lợi ích */
.prod-intro { display: grid; grid-template-columns: 1.4fr 1.6fr; gap: var(--sp-8); align-items: center; }
.prod-intro__head { display: flex; gap: var(--sp-5); align-items: center; }
.prod-intro__badge { width: 104px; height: 104px; border-radius: var(--r-round); background: var(--c-brand-50); color: var(--c-brand-600); display: grid; place-items: center; flex: none; }
.prod-intro__badge .icon { width: 34px; height: 34px; }
.prod-intro__badge img { width: 100%; height: 100%; object-fit: contain; }
.prod-intro__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 8px; }
.prod-intro__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); }
.prod-intro__benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.prod-benefit { position: relative; text-align: center; padding-left: var(--sp-5); }
.prod-benefit::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 56px; transform: translateY(-50%); background: var(--c-divider); }
.prod-benefit__icon { height: 46px; margin: 0 auto 12px; display: grid; place-items: center; }
.prod-benefit__icon img { width: auto; height: 46px; max-width: 60px; object-fit: contain; }
.prod-benefit__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }

/* Card sản phẩm có thông số
   Số cột mặc định 6 như bản thiết kế tĩnh. Trang nào render số thẻ khác (lưới lọc
   ở /san-pham/, khối "Sản phẩm liên quan" 5 thẻ) thì truyền style="--cards-count: N"
   trên chính .spec-cards — cùng lý do với --tabs-count ở trên: biến CSS bị media
   query ghi đè được, còn grid-template-columns inline thì không, và sẽ phá bố cục
   3 cột / 2 cột ở tablet, mobile (xem responsive.css). */
.spec-cards { display: grid; grid-template-columns: repeat(var(--cards-count, 6), minmax(0, 1fr)); gap: var(--grid-gap); }
.spec-card { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3); box-shadow: var(--sh-card); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.spec-card:hover { transform: translateY(-4px); border-color: #b7cbe0; box-shadow: var(--sh-card-hover); }
.spec-card__media { aspect-ratio: var(--ar-product); background: var(--c-white); border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; margin-bottom: var(--sp-3); }
.spec-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-normal) var(--ease); }
.spec-card:hover .spec-card__media img { transform: scale(1.04); }
.spec-card__title { min-height: 44px; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 4px; }
.spec-card__desc { min-height: 60px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); margin-bottom: 10px; }
.spec-card__list { display: grid; gap: 4px; margin-bottom: 12px; }
.spec-card__list li { font-size: 13px; line-height: 18px; color: var(--c-text-secondary); position: relative; padding-left: 10px; }
.spec-card__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border-radius: 999px; background: var(--c-brand-600); }
.spec-card__list b { color: var(--c-heading); font-weight: var(--fw-semibold); }
.spec-card .btn { margin-top: auto; }

/* Thông số kỹ thuật chính (bảng + sơ đồ) */
.spec-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.spec-table tr:not(:last-child) { border-bottom: 1px solid var(--c-divider); }
.spec-table th { text-align: left; vertical-align: middle; padding: 16px 20px; width: 240px; border-right: 1px solid var(--c-divider); }
.spec-table th span { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-heading); line-height: 1.3; }
.spec-table__icon { width: 30px; height: 30px; object-fit: contain; flex: none; }
/* --lh-body (25px) là giãn dòng cho đoạn văn 16px; đặt lên ô 14px thành 1.79,
   trong khi cột nhãn bên cạnh chạy 1.3 — hai cột cùng hàng trông lệch hẳn nhau
   và hàng bị cao gấp rưỡi. Dùng --lh-small cho khớp cỡ chữ. */
.spec-table td { padding: 16px 22px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); vertical-align: middle; }
.spec-diagram { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); }
.spec-diagram__media { margin-bottom: 0; border-radius: var(--r-sm); overflow: hidden; }
.spec-diagram__media img { width: 100%; height: auto; display: block; }
.spec-diagram__labels { display: grid; gap: 10px; }
.spec-label { display: flex; gap: 10px; }
.spec-label__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c-brand-600); flex: none; margin-top: 4px; }
.spec-label b { display: block; font-size: var(--fs-small); color: var(--c-heading); }
.spec-label span { font-size: var(--fs-caption); color: var(--c-text-muted); }

/* Ô so sánh */
/* Ảnh nền: bản gốc trong mockup trỏ ../public/assets/demo/... — đường dẫn không tồn
   tại trong theme. Đổi sang URL tuyệt đối của Media Library (không dùng đường dẫn
   tương đối, vì gốc tương đối là assets/css/ chứ không phải web root). */

/* ============================================================
   FORM TƯ VẤN NHANH (.consult) — san-pham.html
   ============================================================
   Component này cũng được san-pham-panel-pu.html tái sử dụng (thêm class
   phụ ".product-pu-consult" đè lên) — style riêng cho ".product-pu-consult"
   vẫn giữ ở pages.css/responsive.css, không lặp lại ở đây. */
.consult {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(12, 75, 139, 0.42);
  border-radius: 8px;
  background: #063666;
  color: var(--c-white);
  isolation: isolate;
}
.consult::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 45, 91, 0.98) 0%, rgba(4, 54, 103, 0.94) 46%, rgba(5, 57, 107, 0.5) 68%, rgba(5, 57, 107, 0.08) 100%);
}
.consult__media {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 44%;
  overflow: hidden;
}
.consult__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.6, 1.32);
  transform-origin: right center;
}
.consult__content {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  padding: 18px 0 17px 28px;
}
.consult__title {
  color: var(--c-white);
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  margin-bottom: 3px;
}
.consult__sub {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 9px;
}
.consult__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1.12fr;
  gap: 7px;
}
.consult .form-control {
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(222, 234, 247, 0.82);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--c-text);
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(2, 25, 54, 0.16);
}
.consult textarea.form-control {
  min-height: 33px;
  padding-top: 8px;
  resize: auto;
}
.consult .form-control::placeholder {
  color: #98a2b3;
}
.consult .form-control:focus {
  border-color: var(--c-brand-700);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  background: var(--c-white);
}
.consult select.form-control option {
  color: var(--c-text);
}
.consult__message {
  grid-column: span 2;
}
.consult__footer {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 11px;
}
.consult__actions {
  display: flex;
}
.consult__actions .btn {
  width: 190px;
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  box-shadow: none;
  margin: 0;
}
.consult__actions .btn .icon {
  width: 14px;
  height: 14px;
}
.consult__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.consult__note .icon {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Contact Form 7 compatibility — CF7 wraps every form-tag in
   <span class="wpcf7-form-control-wrap" data-name="...">. That span becomes
   the real .consult__fields grid item (its .form-control child just needs to
   fill it), NOT display:contents — contents would also promote CF7's
   validation-error <span class="wpcf7-not-valid-tip"> into its own grid item
   the moment a field fails validation, silently shifting the whole grid. */
.consult__fields .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.consult__fields .wpcf7-form-control-wrap[data-name="noi-dung"] {
  grid-column: span 2;
}
.consult .wpcf7-form-control.form-control {
  width: 100%;
}
.consult .wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 14px;
  color: #ffb4b4;
}
.consult .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 3px;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.consult .wpcf7-spinner {
  position: absolute;
}

/* Nội dung soạn thảo tự do ở trang chi tiết sản phẩm (the_content).
   Bản thiết kế tĩnh không có khối này nên không có sẵn style; dùng đúng thang chữ
   của .pd-desc để đoạn văn dài không lệch nhịp với phần còn lại của trang. */
.pd-body p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-3); }
.pd-body p:last-child { margin-bottom: 0; }
.pd-body ul, .pd-body ol { margin: 0 0 var(--sp-3) var(--sp-4); }
.pd-body li { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); }

/* Responsive */
@media (max-width: 991px) {
  .consult {
    min-height: 238px;
  }
  .consult__media {
    right: 0;
    width: 40%;
  }
  .consult__content {
    width: calc(100% - 31%);
    padding-right: 20px;
  }
  .consult__fields {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .consult {
    min-height: 0;
    background-position: 62% center;
  }
  .consult::before {
    background: linear-gradient(90deg, rgba(3, 45, 91, 0.97), rgba(4, 54, 103, 0.91));
  }
  .consult__media {
    right: 0;
    width: 66%;
    opacity: 0.22;
  }
  .consult__content {
    width: auto;
    padding: 20px;
  }
  .consult__title {
    font-size: 18px;
  }
  .consult__fields {
    grid-template-columns: 1fr;
  }
  .consult__message {
    grid-column: auto;
  }
  .consult__fields .wpcf7-form-control-wrap[data-name="noi-dung"] {
    grid-column: auto;
  }
  .consult__footer {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .consult__note {
    justify-content: flex-start;
    white-space: normal;
  }
}

/* ============================================================
   BẢNG MÀU TÔN TIÊU CHUẨN (trong khối Thông số của single-san-pham)
   Dải 7 màu in ở cuối mọi trang sản phẩm trong Catalogue 2026.
   Mã màu lấy trực tiếp từ ô màu trong file PDF.
   ============================================================ */

.spec-colors {
  grid-column: 1 / -1;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.spec-colors__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin-bottom: var(--sp-5);
}
.spec-colors__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec-color {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  text-align: center;
}
.spec-color__chip {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
}
.spec-color__chip--img {
  background-size: cover;
  background-position: center;
}
.spec-color b {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.spec-color span {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-style: italic;
  color: var(--c-text-muted);
}
.spec-colors__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-secondary);
}

@media (max-width: 849px) {
  .spec-colors__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 499px) {
  .spec-colors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
}

/* ============================================================
   DANH MỤC SẢN PHẨM Ở ĐẦU TRANG /san-pham/
   Thay cho .product-tabs cũ — thanh đó ép mọi sản phẩm thành các
   cột bằng nhau trên một hàng; tới 21 sản phẩm thì mỗi cột còn
   ~65px và tên vỡ thành mỗi dòng một từ.
   Nay là bốn thẻ theo đúng nhóm danh mục của Catalogue 2026.
   ============================================================ */

.pgroups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.pgroup {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pgroup:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}

/* --- Đầu thẻ: icon + tên nhóm + số sản phẩm --- */
.pgroup__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-brand-50);
  border-bottom: 1px solid var(--c-border);
}
.pgroup__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.pgroup__icon .icon {
  width: 21px;
  height: 21px;
  color: var(--c-cta);
}
.pgroup__title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pgroup__title b {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  transition: color var(--dur-fast) var(--ease);
}
.pgroup__title span {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.pgroup__head:hover b { color: var(--c-cta); }

/* --- Danh sách sản phẩm trong nhóm --- */
.pgroup__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  flex: 1;
}
.pgroup__list li { margin: 0; }
.pgroup__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Mũi tên chỉ hiện khi trỏ vào — để danh sách ở trạng thái tĩnh vẫn gọn. */
.pgroup__list a .icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--c-cta);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pgroup__list a:hover {
  color: var(--c-heading);
  background: var(--c-surface-subtle);
}
.pgroup__list a:hover .icon,
.pgroup__list a:focus-visible .icon {
  opacity: 1;
  transform: translateX(0);
}
.pgroup__list a[aria-current="page"] {
  font-weight: var(--fw-semibold);
  color: var(--c-brand-700);
  background: var(--c-brand-50);
}

@media (max-width: 1199px) {
  .pgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .pgroups { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .pgroup,
  .pgroup__list a,
  .pgroup__list a .icon { transition: none; }
}

/* ============================================================
   DANH MỤC SẢN PHẨM Ở ĐẦU TRANG /san-pham/
   Bốn thẻ theo nhóm của Catalogue 2026, mỗi thẻ nêu 3 sản phẩm
   tiêu biểu rồi dẫn vào trang danh mục.

   Trước đây khối này in TẤT CẢ sản phẩm thành các cột bằng nhau
   trên một hàng; tới 21 sản phẩm thì mỗi cột còn ~65px, tên vỡ
   thành mỗi dòng một từ. Bản kế tiếp liệt kê đủ 5-7 mục nên bốn
   thẻ cao lệch hẳn nhau.
   ============================================================ */

.pcat {
  padding-block: var(--sp-12) var(--sp-10);
  background: var(--c-surface-subtle);
}

.pcat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.pcat__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.pcat__title {
  font-size: 36px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.pcat__sub {
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.pcat__all { flex: none; }

/* ---------- Lưới thẻ ---------- */

.pcat__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pcard:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card-hover);
  transform: translateY(-2px);
}

/* Ảnh đại diện nhóm — tỷ lệ 16:7, cao khoảng 145-165px ở lưới 4 cột. */
.pcard__media {
  display: block;
  aspect-ratio: 16 / 7;
  /* Ở lưới 4 cột trên container 1300px, thẻ rộng ~313px nên 16:7 ra ~137px.
     min-height giữ ảnh trong khoảng 145-165px của bản thiết kế. */
  min-height: 148px;
  background: var(--c-surface-subtle);
  overflow: hidden;
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }

/* Ruột thẻ: đẩy CTA xuống đáy để bốn thẻ luôn thẳng chân. */
.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.pcard__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.pcard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--c-brand-50);
}
.pcard__icon .icon {
  width: 19px;
  height: 19px;
  color: var(--c-cta);
}
.pcard__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pcard__name b {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  transition: color var(--dur-fast) var(--ease);
}
.pcard__name span {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.pcard__head:hover b { color: var(--c-cta); }

.pcard__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  flex: 1;
}
.pcard__list li { margin: 0; }
.pcard__list a {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 5px 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.pcard__list a .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--c-border-strong);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pcard__list a:hover { color: var(--c-heading); }
.pcard__list a:hover .icon {
  color: var(--c-cta);
  transform: translateX(2px);
}

/* CTA cố định ở đáy thẻ */
.pcard__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}
.pcard__more .icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.pcard__more:hover { color: var(--c-cta-hover); }
.pcard__more:hover .icon { transform: translateX(3px); }

@media (max-width: 1199px) {
  .pcat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcat__title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 599px) {
  .pcat__grid { grid-template-columns: minmax(0, 1fr); }
  .pcat__head { align-items: flex-start; }
  .pcat__title { font-size: 26px; line-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard__media img,
  .pcard__list a .icon,
  .pcard__more .icon { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__media img { transform: none; }
}

/* ============================================================
   DANH SÁCH SẢN PHẨM /san-pham/ — 3 cột
   Thay cho .spec-cards 6 cột: ở 6 cột mỗi thẻ chỉ còn ~200px nên
   ảnh và chữ đều quá nhỏ, lại thêm mô tả dài, nhiều dòng thông số
   và 21 nút xanh giống nhau. Nay 3 cột, mô tả tối đa 2 dòng, giữ
   3 thông số, "Xem chi tiết" là liên kết nhẹ thay vì nút.
   JS: assets/js/sanPhamList.js
   ============================================================ */

.plist__head { margin-bottom: var(--sp-6); }
.plist__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.plist__title {
  font-size: 36px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.plist__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* ---------- Thanh lọc + tìm kiếm ---------- */

.plist__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.plist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.plist__chip {
  padding: 9px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
  background: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.plist__chip:hover {
  color: var(--c-heading);
  border-color: var(--c-border-strong);
}
.plist__chip.is-active {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
}

.plist__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* flex-basis 260px + grow: cùng hàng với chip thì ăn nốt chỗ trống bên phải,
     khi chip đã đủ dài đẩy ô xuống hàng riêng thì nó chiếm trọn hàng — thay vì
     nằm lọt thỏm 260px ở góc trái. */
  flex: 1 1 260px;
  padding: 0 var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
  transition: border-color var(--dur-fast) var(--ease);
}
.plist__search:focus-within { border-color: var(--c-cta); }
.plist__search .icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--c-icon-muted);
}
.plist__search input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.plist__search input:focus { outline: none; }

/* ---------- Lưới thẻ sản phẩm ---------- */

.plist__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.pitem.is-hidden { display: none; }

.pitem {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pitem:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}

/* Ảnh sản phẩm rất lệch tỉ lệ nhau (render panel rất ngang, ảnh kho lạnh
   gần vuông) nên dùng contain trên khung cố định — cover sẽ cắt mất biên
   dạng, thứ khách cần nhìn nhất. */
.pitem__media {
  display: block;
  /* flex:none + min-height:0 — nếu để mặc định, min-height:auto của flex item
     lấy chiều cao nội tại của ảnh làm sàn, nên ảnh gần vuông (kho lạnh, phuy
     hoá chất) đội khung cao hơn hẳn ảnh panel 800x192 và khung mất đồng đều. */
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: var(--sp-4);
  background: var(--c-surface-subtle);
  border-bottom: 1px solid var(--c-border);
}
.pitem__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pitem__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.pitem__cat {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.pitem__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.pitem__title a { color: inherit; }
.pitem__title a:hover { color: var(--c-cta); }

/* Mô tả tối đa 2 dòng — độ dài excerpt rất chênh nhau giữa các sản phẩm. */
.pitem__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}

.pitem__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  flex: 1;
  align-content: flex-start;
}
.pitem__specs li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--c-text);
}
.pitem__specs .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--c-brand-600);
}
.pitem__specname {
  display: block;
  color: var(--c-text-muted);
}

/* "Xem chi tiết" là liên kết nhẹ, không phải nút — 21 nút xanh giống nhau
   trên một trang làm mất hẳn trọng tâm. */
.pitem__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}
.pitem__more .icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.pitem__more:hover { color: var(--c-cta-hover); }
.pitem__more:hover .icon { transform: translateX(3px); }

/* ---------- Trạng thái rỗng + nút xem thêm ---------- */

.plist__empty {
  padding: var(--sp-10) 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text-secondary);
}
.plist__clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--c-cta);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: underline;
}
.plist__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}
.plist__foot .icon { width: 16px; height: 16px; }

@media (max-width: 991px) {
  .plist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plist__title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 599px) {
  .plist__grid { grid-template-columns: minmax(0, 1fr); }
  .plist__title { font-size: 26px; line-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pitem,
  .plist__chip,
  .pitem__more .icon { transition: none; }
}

/* ============================================================
   GIẢI PHÁP THEO NHU CẦU — thay hai khối "Thông số kỹ thuật chính"
   và "So sánh sản phẩm" ở cuối trang /san-pham/.
   Lưới: 4 thẻ ứng dụng (2x2) bên trái + 1 ảnh dự án lớn bên phải.
   ============================================================ */

.gpn__head { margin-bottom: var(--sp-8); }
.gpn__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.gpn__title {
  font-size: 36px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.gpn__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* Cột ảnh hẹp hơn cột thẻ (1fr : 0.78fr) để hai thẻ mỗi hàng vẫn đủ rộng cho
   tiêu đề hai từ không bị ngắt dòng lẻ. */
.gpn {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.gpn__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.gpn-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gpn-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}
.gpn-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-5);
}
.gpn-card__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.gpn-card__desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.gpn-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.gpn-card__chips li {
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: var(--c-cta-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-cta);
  font-weight: var(--fw-medium);
}
.gpn-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}
.gpn-card__more .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.gpn-card__more:hover { color: var(--c-cta-hover); }
.gpn-card__more:hover .icon { transform: translateX(3px); }

/* Ảnh phủ kín nửa trên, khối chữ nền navy dính đáy — ảnh dự án là ảnh ngang
   nên object-fit: cover ở đây an toàn, không cắt vào chi tiết cần đọc. */
.gpn__feature {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-heading);
}
.gpn__feature-img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
}
.gpn__feature-body { padding: 28px; }
.gpn__feature-title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}
.gpn__feature-sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-5);
}
.gpn__feature-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
}
.gpn__feature-link .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.gpn__feature-link:hover { color: var(--c-white); border-bottom-color: var(--c-white); }
.gpn__feature-link:hover .icon { transform: translateX(3px); }

@media (max-width: 991px) {
  /* Ảnh xuống dưới 4 thẻ, cao cố định để không kéo dài trang. */
  .gpn { grid-template-columns: minmax(0, 1fr); }
  .gpn__feature-img { flex: none; height: 260px; }
  .gpn__title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 599px) {
  .gpn__grid { grid-template-columns: minmax(0, 1fr); }
  .gpn-card { padding: 22px; }
  .gpn__feature-body { padding: 22px; }
  .gpn__feature-img { height: 200px; }
  .gpn__title { font-size: 26px; line-height: 34px; }
  .gpn__sub br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gpn-card,
  .gpn-card__more .icon,
  .gpn__feature-link .icon { transition: none; }
}

/* ============================================================
   DẢI CHUYỂN NHÁNH TRÊN TRANG DANH MỤC (.prodsub)
   Chỉ hiện khi danh mục có danh mục con — Panel (vách trong / vách ngoài) và
   Tấm lợp (1 lớp / 3 lớp). Xem taxonomy-nhom-san-pham.php.
   ============================================================ */
.prodsub {
  padding-block: var(--sp-8) 0;
}
.prodsub .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.prodsub__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.prodsub__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.prodsub__list li {
  margin: 0;
}
.prodsub__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
/* Flatsome in "a:hover { color: <Link Hover Color> }" sau file này nên phải khai
   lại màu ở trạng thái hover. */
.prodsub__list a:hover {
  border-color: var(--c-brand-500);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
}
.prodsub__list b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-round);
  background: var(--c-brand-50);
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-brand-600);
}
.prodsub__list a:hover b {
  background: var(--c-white);
}

/* ===== giaiPhap.css ===== */
/* ============================================================
   TRANG GIẢI PHÁP (giai-phap.html)
   ============================================================
   Chỉ chứa phần CSS RIÊNG của giai-phap.html. Cách xác định: quét class trong
   <main> của cả 13 file mockup (my_notes/BAN_GIAO_WORDPRESS_PHU_SON/*.html);
   class nào có trang khác dùng thì để nguyên ở file dùng chung, không kéo về đây
   — nếu không sẽ thành "CSS của trang A nằm trong file của trang B".

   Dùng chung, GIỮ Ở NƠI CŨ:
     .page-hero / __inner / __title / __sub / .breadcrumb                (pageHero.css)
     .page-section / --tight / __head / __title / .link-arrow / .btn     (styles.css)
     .section-eyebrow-row       — nang-luc                               (pages.css)
     .why-item / __icon / __title / __text  — nang-luc                   (pages.css)
     .sol-tag                   — kien-thuc-panel-pu-pir, san-pham-panel-pu (pages.css)
     .process-box               — kien-thuc                              (pages.css)
     .cta-banner* / --navy      — du-an, lien-he, tai-lieu               (pages.css)

   Hai rule .why-block .why-item__icon và .why-grid .why-item__text nằm ở đây (dù
   .why-item* là component dùng chung) vì chúng được scope bằng class cha chỉ
   giai-phap.html mới có. Specificity (0,2,0) cao hơn rule gốc (0,1,0) ở pages.css
   nên vẫn thắng dù file này import TRƯỚC pages.css.

   Media query của các component RIÊNG để luôn trong file này, không rải sang
   responsive.css, để một component chỉ nằm trong một file duy nhất. Bản trùng
   trong pages.css/responsive.css đã xoá — hai file đó import SAU file này nên
   nếu còn sót, bản ở đó sẽ âm thầm đè lên và mọi sửa ở đây thành vô tác dụng.

   Ngoại lệ có chủ ý — vẫn nằm ở responsive.css:
     block "Inner-page mobile grids" (@max-width:767px) gom .proj-cards/.proj-card
     chung selector với .products-grid, .spec-cards, .app-grid... của trang khác.
     Rule đó dùng !important và import sau cùng nên vẫn thắng carousel bên dưới —
     tách ra sẽ phải nhân bản cả nhóm, lợi bất cập hại.
   ============================================================ */

/* Badge dưới tiêu đề hero — chỉ giai-phap.html dùng, phần page-hero còn lại ở pageHero.css */
.page-hero__badges { display: flex; gap: var(--sp-6); margin-top: var(--sp-4); flex-wrap: wrap; }
.page-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.92); }
.page-hero__badge .icon { width: 18px; height: 18px; color: #cfe0f2; }

/* Tiêu đề section kiểu "eyebrow + h2 + lead" (eyebrow dùng chung nên ở pages.css) */
.section-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); }
.section-lead { font-size: var(--fs-small); color: var(--c-text-secondary); margin-top: 6px; }

/* Card giải pháp lớn (ảnh + icon + tag) */
.sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.sol-card { border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); background: var(--c-white); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
/* Cả card là thẻ <a>. Reset "a{text-decoration:none}" ở tokens.css có specificity
   rất thấp nên rule hover của Flatsome (nhiều class/combinator hơn) đè được và
   gạch chân toàn bộ chữ trong card — khai báo tường minh ở đây cho chắc.
   Cùng lý do đã ghi ở .btn (styles.css) và .doc-item (taiLieu.css). */
.sol-card, .sol-card:hover { text-decoration: none; }
.sol-card__media { aspect-ratio: 16/9; overflow: hidden; }
.sol-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.sol-card:hover .sol-card__media img { transform: scale(1.04); }
.sol-card__body { padding: var(--sp-4); }
/* margin-top âm kéo cụm icon + tiêu đề đè lên mép dưới ảnh; z-index để icon nổi trên ảnh */
.sol-card__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; margin-top: -34px; }
.sol-card__icon { width: 44px; height: 44px; border-radius: var(--r-round); background: var(--c-brand-700); color: var(--c-white); display: grid; place-items: center; box-shadow: var(--sh-card); flex: none; }
.sol-card__icon .icon { width: 22px; height: 22px; }
.sol-card__title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--c-heading); padding-top: 20px; }
.sol-card__desc { min-height: 60px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); margin-bottom: 12px; }
.sol-card__tags-label { font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: 8px; }
.sol-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Quy trình triển khai — 4 bước xen kẽ mũi tên (.process-box dùng chung với kien-thuc) */
.process-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.process-step { display: flex; gap: 12px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); }
.process-step__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; flex: none; }
.process-step__icon .icon { width: 22px; height: 22px; }
.process-step__icon img { width: 30px; height: 30px; object-fit: contain; }
.process-step__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 3px; }
.process-step__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }
.process-arrow { color: var(--c-icon-muted); display: grid; place-items: center; }
.process-arrow .icon { width: 20px; height: 20px; }

/* Vì sao chọn (tiêu đề trái + 4 lợi ích phải) */
.why-block { display: grid; grid-template-columns: 0.85fr 2.15fr; gap: var(--sp-8); align-items: center; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
/* Badge tròn cho icon ảnh — chỉ trong khối "Vì sao chọn" của trang này */
.why-block .why-item__icon { width: 46px; height: 46px; border-radius: var(--r-round); background: var(--c-brand-50); display: grid; place-items: center; }
.why-block .why-item__icon img { width: 28px; height: 28px; object-fit: contain; }
/* Ghim chiều cao mô tả để 4 ô cùng hàng thẳng chân nhau */
.why-grid .why-item__text { min-height: 54px; }

/* Card dự án (có category + link) */
.proj-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.proj-card { border: 1px solid var(--c-border); border-radius: var(--r-project); overflow: hidden; box-shadow: var(--sh-card); background: var(--c-white); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.proj-card__media { aspect-ratio: var(--ar-project); overflow: hidden; }
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.proj-card:hover .proj-card__media img { transform: scale(1.04); }
.proj-card__body { padding: var(--sp-3); }
.proj-card__cat { font-size: var(--fs-caption); color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.proj-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin: 3px 0; }
.proj-card__meta { font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: 8px; }

/* Responsive */
@media (max-width: 991px) {
  .sol-cards { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-arrow { display: none; }
  .why-block { grid-template-columns: 1fr; gap: var(--sp-5); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .page-hero__badges { gap: var(--sp-4); }
  .sol-cards { grid-template-columns: 1fr; }
  /* Một cột thì bỏ chiều cao ghim, tránh khoảng trống thừa dưới mô tả */
  .sol-card__desc { min-height: 0; }
  .process-steps { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid .why-item__text { min-height: 0; }
  .proj-cards { display: flex; overflow-x: auto; gap: var(--grid-gap); scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); }
  .proj-card { flex: 0 0 250px; scroll-snap-align: start; }
}

/* ===== timeline.css ===== */
/* ============================================================
   TIMELINE "LỊCH SỬ HÌNH THÀNH" — block Click Custom
   ============================================================
   Dựng theo hai ảnh tham chiếu khách gửi. Màu do UX Builder bơm vào bằng biến CSS
   trên chính .cms-timeline (xem blocks/timeline/templates/index.php), nên file này
   chỉ khai giá trị dự phòng.

   MỘT BỘ MARKUP, HAI BỐ CỤC:
     - từ 768px trở lên: trục năm nằm ngang, chỉ hiện panel của năm đang chọn;
     - dưới 768px      : ẩn trục, bung hết panel thành cột dọc có đường trục bên trái.
   Vì mobile hiện tất cả nên .cms-timeline__panel[hidden] phải được ghi đè bằng
   display:block ở dải mobile — thuộc tính hidden của HTML mạnh hơn class thường. */

.cms-timeline {
  --tl-line: #d7e2ed;
  --tl-node: #9db6cd;
  --tl-active: #12599f;
  --tl-year: #083a6e;
  --tl-title: #083a6e;
  --tl-text: #4a5b6d;
}

.cms-timeline__head { margin-bottom: var(--sp-5, 24px); }
.cms-timeline__title {
  font-size: var(--fs-h2, 28px);
  line-height: 1.25;
  font-weight: var(--fw-bold, 700);
  color: var(--tl-title);
  margin: 0;
}

/* ------------------------------------------------ KHUNG CHI TIẾT (panel) */
.cms-timeline__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-6, 32px);
  align-items: start;
}
.cms-timeline__panel:not(.is-active) { display: none; }

/* Nhãn năm to chỉ dùng cho bố cục dọc ở mobile. */

.cms-timeline__media {
  border-radius: var(--r-card, 6px);
  overflow: hidden;
  background: var(--c-white, #fff);
  box-shadow: var(--sh-card, 0 3px 14px rgba(15, 35, 55, 0.07));
}
.cms-timeline__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.cms-timeline__entries { display: grid; gap: var(--sp-5, 24px); }

.cms-timeline__entry-title {
  font-size: var(--fs-h4, 22px);
  line-height: 1.3;
  font-weight: var(--fw-semibold, 600);
  color: var(--tl-title);
  margin: 0 0 6px;
}
.cms-timeline__entry-sub {
  font-size: var(--fs-small, 15px);
  line-height: 1.4;
  font-weight: var(--fw-semibold, 600);
  color: var(--tl-title);
  margin: 0 0 8px;
}
/* Ảnh minh hoạ riêng của một sự kiện — nhỏ, nằm trong mục, khác hẳn ảnh đại diện
   năm ở cột trái. Giới hạn bề rộng để không cạnh tranh với ảnh lớn. */
.cms-timeline__entry-media {
  max-width: 260px;
  margin: 0 0 10px;
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
  background: var(--c-white, #fff);
}
.cms-timeline__entry-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cms-timeline__entry-body,
.cms-timeline__entry-body p {
  font-size: var(--fs-small, 15px);
  line-height: var(--lh-body, 1.7);
  color: var(--tl-text);
}
.cms-timeline__entry-body p:last-child { margin-bottom: 0; }
/* Dòng dịch tiếng Anh dưới mỗi mốc, đúng cách trình bày của bản infographic gốc:
   nhỏ hơn, nhạt hơn để không cạnh tranh với câu tiếng Việt. */
.cms-timeline__en {
  font-size: 0.92em;
  opacity: 0.72;
  margin-top: 6px;
}
.cms-timeline__entry-body ul,
.cms-timeline__entry-body ol { margin: 0 0 12px 20px; }

/* ---------------------------------------------------------- TRỤC NĂM */
.cms-timeline__axis {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--sp-6, 32px);
}

.cms-timeline__track {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 0;
}
.cms-timeline__track::-webkit-scrollbar { display: none; }

.cms-timeline__year {
  position: relative;
  /* Chia đều chiều ngang cho các mốc: grow 1 nên còn bao nhiêu chỗ trống là các năm
     ăn hết, dù có 2 năm hay 12 năm. shrink 0 + basis 84px giữ mốc không bị bóp lại
     khi quá nhiều năm — lúc đó thanh trục chuyển sang cuộn ngang thay vì chữ dính nhau. */
  flex: 1 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 10px 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tl-year);
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  line-height: 1;
  /* Kéo chấm mốc lên nằm đúng trên đường trục. */
  margin-top: -7px;
}
.cms-timeline__node {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--tl-node);
  box-shadow: 0 0 0 3px var(--c-white, #fff);
  transition: background 0.18s ease, transform 0.18s ease;
}
.cms-timeline__year-label { transition: color 0.18s ease; }

.cms-timeline__year:hover .cms-timeline__node { background: var(--tl-active); }
.cms-timeline__year.is-active .cms-timeline__node {
  background: var(--tl-active);
  transform: scale(1.35);
}
.cms-timeline__year.is-active .cms-timeline__year-label {
  color: var(--tl-active);
  font-weight: var(--fw-bold, 700);
}
.cms-timeline__year:focus-visible {
  outline: 2px solid var(--tl-active);
  outline-offset: 2px;
  border-radius: 4px;
}

.cms-timeline__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--tl-active);
  border-radius: 999px;
  background: var(--c-white, #fff);
  color: var(--tl-active);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 35, 55, 0.1);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* Đảo nền/chữ khi rê chuột cho tương phản rõ, thay vì chỉ đổi màu viền như trước —
   nút 30px viền mảnh trước đây nhìn mờ và khó bấm. */
.cms-timeline__arrow:hover:not(:disabled) {
  background: var(--tl-active);
  color: var(--c-white, #fff);
  box-shadow: 0 4px 12px rgba(15, 35, 55, 0.18);
}
.cms-timeline__arrow:focus-visible { outline: 2px solid var(--tl-active); outline-offset: 3px; }
.cms-timeline__arrow .icon { width: 22px; height: 22px; }
/* Mũi tên trái = icon-chevron-right xoay ngược, xem ghi chú trong template. */
.cms-timeline__arrow--prev .icon { transform: rotate(180deg); }
/* Đang ở năm đầu / năm cuối dải: mờ đi và không bấm được. */
.cms-timeline__arrow:disabled { opacity: 0.35; cursor: default; }

/* ------------------------------------------------- BỐ CỤC DỌC (mobile) */
@media (max-width: 767px) {
  /* Trục ngang không còn ý nghĩa khi mỗi năm là một khối xếp dọc. */
  .cms-timeline__axis { display: none; }

  .cms-timeline__panels {
    position: relative;
    padding-left: 26px;
  }
  /* Đường trục dọc chạy suốt chiều cao danh sách năm. */
  .cms-timeline__panels::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--tl-line);
  }

  /* [hidden] mạnh hơn class nên phải ghi đè tường minh, nếu không mobile chỉ thấy
     đúng một năm. */
  .cms-timeline__panel,
  .cms-timeline__panel[hidden],
  .cms-timeline__panel:not(.is-active) {
    display: block;
  }
  .cms-timeline__panel {
    position: relative;
    margin-bottom: var(--sp-6, 32px);
  }
  .cms-timeline__panel:last-child { margin-bottom: 0; }
  .cms-timeline__panel::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--tl-active);
    box-shadow: 0 0 0 3px var(--c-white, #fff);
  }

  .cms-timeline__media { margin-bottom: 16px; }
  .cms-timeline__entries { gap: 18px; }
  .cms-timeline__entry-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-timeline__node,
  .cms-timeline__year-label,
  .cms-timeline__arrow { transition: none; }
}

/* ============================================================
   BỐ CỤC MỚI THEO BẢN THIẾT KẾ
   Trục năm lên trên · khung chi tiết thành thẻ trắng · năm cỡ lớn
   có bản mờ làm nền · nút điều hướng nằm trong thẻ · thanh tiến
   trình dưới đáy. Khối này nằm CUỐI file nên đè các rule cùng tên.
   ============================================================ */

.cms-timeline { --tl-progress: 0%; }

/* ---------- Trục năm ---------- */
.cms-timeline__axis {
  display: block;
  position: relative;
  padding-top: 38px;      /* chỗ cho nhãn "Mốc đang xem" + quầng sáng quanh nút */
  margin-bottom: var(--sp-6, 32px);
}

/*
 * Vạch trục thụt vào đúng NỬA MỘT CỘT ở mỗi đầu, vì mỗi nút năm chiếm 1/n bề
 * ngang và tâm nút nằm giữa cột đó. Nhờ vậy hai đầu vạch trùng tâm nút đầu và
 * nút cuối, và --tl-progress (0% ở mốc đầu, 100% ở mốc cuối) đo theo đúng
 * chiều dài này mà không cần tính bù.
 */
/* Toạ độ do JS đo từ tâm nút thật rồi bơm vào (xem syncRail trong index.js).
   Giá trị dự phòng dùng công thức hình học, chỉ đúng khi mọi cột đều nhau —
   nó chỉ để trục không vỡ trong khoảnh khắc trước khi JS chạy. */
.cms-timeline__rail {
  position: absolute;
  top: calc(var(--tl-rail-top, 49px) - 1px);
  left: var(--tl-rail-left, calc(50% / var(--tl-count, 8)));
  right: var(--tl-rail-right, calc(50% / var(--tl-count, 8)));
  height: 2px;
  background: var(--c-border-strong, #c8d5e3);
  border-radius: 2px;
}
.cms-timeline__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tl-progress);
  background: var(--c-cta, #027439);
  border-radius: 2px;
  transition: width 0.45s ease;
}
.cms-timeline__nowlabel {
  position: absolute;
  bottom: 24px;
  left: var(--tl-progress);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--fs-caption, 12px);
  line-height: 1;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta, #027439);
  transition: left 0.45s ease;
}

.cms-timeline__track {
  display: flex;
  gap: 0;
  overflow: visible;
  padding: 0;
  /* Đường trục cũ vẽ bằng border-top của chính track đã bỏ — nay có .cms-timeline__rail
     riêng. Để lại sẽ thành hai đường: một gạch đứt chạy suốt bề ngang và một
     đường liền thụt vào hai đầu. */
  border-top: 0;
}
/*
 * Hàng đầu cao CỐ ĐỊNH 22px (bằng nút lớn nhất) và canh giữa: nếu để hàng tự co
 * theo nội dung thì nút thường 18px và nút đang chọn 22px cùng dính mép trên,
 * tâm hai loại lệch nhau 2px nên vòng tròn trắng không nằm giữa vạch trục.
 */
.cms-timeline__year {
  flex: 1;
  /* min-width:0 là bắt buộc: flex item mặc định min-width:auto nên không co xuống
     dưới bề rộng nội dung. Nhãn năm đang xem in 21px rộng hơn các nhãn 15px, cột
     đó phình ra và các cột khác teo lại — khoảng cách giữa các mốc hết đều, tâm
     nút không còn trùng hai đầu vạch trục và % tiến trình cũng lệch theo. */
  min-width: 0;
  display: grid;
  /* Bỏ margin-top:-7px của bản cũ — hồi đó đường trục là border-top của track nên
     phải kéo chấm lên cho khớp. Nay trục là phần tử riêng đặt theo toạ độ, còn
     giữ margin âm thì cả cụm nút bị nhấc lên 7px so với vạch. */
  margin-top: 0;
  padding: 0;
  grid-template-rows: 22px auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
/* Nút rỗng viền — mốc đã qua tô viền xanh, mốc đang xem tô đặc và to hơn. */
.cms-timeline__year .cms-timeline__node {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--c-white, #fff);
  border: 2px solid var(--c-brand-900, #083a6e);
  box-shadow: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.cms-timeline__year.is-done .cms-timeline__node { border-color: var(--c-cta, #027439); }
.cms-timeline__year.is-active .cms-timeline__node {
  width: 22px;
  height: 22px;
  background: var(--c-cta, #027439);
  border-color: var(--c-cta, #027439);
  /* Quầng sáng quanh mốc đang xem — cùng màu CTA pha loãng. */
  box-shadow: 0 0 0 7px rgb(2 116 57 / 16%);
}
.cms-timeline__year:hover .cms-timeline__node { background: rgb(2 116 57 / 12%); }
.cms-timeline__year.is-active:hover .cms-timeline__node { background: var(--c-cta, #027439); }

.cms-timeline__year .cms-timeline__year-label {
  font-size: var(--fs-small, 15px);
  line-height: 1.2;
  font-weight: var(--fw-semibold, 600);
  color: var(--c-text-muted, #667085);
}
.cms-timeline__year.is-active .cms-timeline__year-label {
  font-size: 21px;
  font-weight: var(--fw-extrabold, 800);
  color: var(--c-cta, #027439);
}

/* ---------- Thẻ chi tiết ---------- */
.cms-timeline__panels {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #dce3ea);
  border-radius: var(--r-card, 14px);
  box-shadow: var(--sh-card, 0 3px 14px rgb(15 35 55 / 7%));
  overflow: hidden;
}
.cms-timeline__panel {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.cms-timeline__media {
  position: relative;
  margin: 0;
  border-radius: 0;
  min-height: 400px;
}
.cms-timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dải chú thích: nền navy, vạch xanh lá dẫn đầu. */
.cms-timeline__caption {
  position: absolute;
  left: 0;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 10px 18px 10px 14px;
  background: var(--c-brand-900, #083a6e);
  color: var(--c-white, #fff);
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  font-weight: var(--fw-semibold, 600);
  border-radius: 0 4px 4px 0;
}
.cms-timeline__caption::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: #4ade80;
  flex: none;
}

.cms-timeline__body {
  display: flex;
  flex-direction: column;
  padding: 46px 48px 36px;
  min-width: 0;
}
.cms-timeline__counter {
  font-size: var(--fs-caption, 12px);
  line-height: 1;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta, #027439);
  margin-bottom: var(--sp-4, 20px);
}
.cms-timeline__counter b { font-weight: var(--fw-extrabold, 800); }
.cms-timeline__counter i { font-style: normal; margin: 0 6px; opacity: 0.55; }

/* Năm cỡ lớn: bản mờ làm nền, bản đặc chồng lên và lệch sang trái cho lộ đuôi
   bản mờ — đúng cách bản thiết kế xử lý. */
.cms-timeline__yearbig {
  position: relative;
  margin-bottom: var(--sp-5, 24px);
  line-height: 1;
}
/*
 * Bản mờ canh TRÙNG mép trái với bản đặc rồi tràn dài sang phải, nét mảnh và rất
 * nhạt — nó là tiếng vọng của con số chứ không phải một con số thứ hai. Bản đầu
 * đặt lệch phải 22px làm hai con số cùng độ đậm nằm cạnh nhau, nhìn thành số bị
 * in đúp.
 */
.cms-timeline__yearghost {
  position: absolute;
  left: 0;
  top: -22px;
  font-size: 130px;
  line-height: 1;
  font-weight: var(--fw-extrabold, 800);
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(8 58 110 / 9%);
  pointer-events: none;
  user-select: none;
}
.cms-timeline__yearsolid {
  position: relative;
  font-size: 68px;
  line-height: 1;
  font-weight: var(--fw-extrabold, 800);
  letter-spacing: -0.03em;
  color: var(--c-brand-900, #083a6e);
}

.cms-timeline__entries { gap: var(--sp-4, 20px); }
.cms-timeline__entry-month {
  font-size: var(--fs-caption, 12px);
  line-height: 1;
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted, #667085);
  margin-bottom: 8px;
}
/* Vạch xanh dẫn trước tiêu đề mốc. */
.cms-timeline__entry-title {
  position: relative;
  padding-left: 16px;
  font-size: 21px;
  line-height: 30px;
  font-weight: var(--fw-bold, 700);
  color: var(--c-brand-900, #083a6e);
  margin-bottom: 12px;
}
.cms-timeline__entry-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--c-cta, #027439);
}
.cms-timeline__entry-body,
.cms-timeline__entry-body p {
  font-size: var(--fs-small, 15px);
  line-height: 26px;
  color: var(--c-text-secondary, #475467);
}

/* Nút điều hướng trong thẻ, góc dưới bên phải. */
.cms-timeline__nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--sp-5, 24px);
}
.cms-timeline__nav .cms-timeline__arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--c-brand-900, #083a6e);
  background: var(--c-white, #fff);
  color: var(--c-brand-900, #083a6e);
}
.cms-timeline__nav .cms-timeline__arrow:hover:not(:disabled) {
  background: var(--c-brand-900, #083a6e);
  color: var(--c-white, #fff);
}
.cms-timeline__nav .cms-timeline__arrow .icon { width: 18px; height: 18px; }

/* ---------- Thanh tiến trình đáy thẻ ---------- */
/* padding-top tách thanh tiến trình khỏi đáy ảnh — để 0 thì vạch chạy sát mép
   dưới tấm ảnh, nhìn như bị dính vào ảnh chứ không phải một dải riêng. */
.cms-timeline__progress { padding: 22px 48px 30px; }
.cms-timeline__progress-track {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--c-divider, #e5eaf0);
}
.cms-timeline__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tl-progress);
  background: var(--c-cta, #027439);
  border-radius: 4px;
  transition: width 0.45s ease;
}
.cms-timeline__progress-fill::after {
  /* Chấm tròn ở đầu vạch, đánh dấu vị trí hiện tại. */
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--c-cta, #027439);
  border: 3px solid var(--c-white, #fff);
  box-shadow: 0 0 0 1px var(--c-cta, #027439);
}
.cms-timeline__progress-start,
.cms-timeline__progress-now {
  position: absolute;
  top: 14px;
  font-size: var(--fs-caption, 12px);
  line-height: 1;
  font-weight: var(--fw-bold, 700);
  color: var(--c-cta, #027439);
  white-space: nowrap;
}
.cms-timeline__progress-start { left: 0; transform: translateX(-50%); color: var(--c-text-muted, #667085); }
.cms-timeline__progress-now { left: var(--tl-progress); transform: translateX(-50%); transition: left 0.45s ease; }

@media (max-width: 1099px) {
  .cms-timeline__panel { grid-template-columns: minmax(0, 1fr); }
  .cms-timeline__media { min-height: 260px; }
  .cms-timeline__body { padding: 32px 28px 26px; }
  .cms-timeline__progress { padding: 18px 28px 24px; }
  .cms-timeline__yearghost { font-size: 84px; top: -26px; }
  .cms-timeline__yearsolid { font-size: 48px; }
}

@media (max-width: 767px) {
  /* Bố cục dọc: trục, nút điều hướng và thanh tiến trình đều vô nghĩa khi mọi
     mốc đã bung sẵn thành một cột. */
  .cms-timeline__axis,
  .cms-timeline__nav,
  .cms-timeline__progress,
  .cms-timeline__yearghost { display: none; }

  .cms-timeline__panels {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .cms-timeline__media { min-height: 0; border-radius: var(--r-card, 14px); overflow: hidden; }
  .cms-timeline__body { padding: 16px 0 0; }
  .cms-timeline__counter { display: none; }
  .cms-timeline__yearbig { margin-bottom: 12px; }
  .cms-timeline__yearsolid { font-size: 30px; color: var(--c-cta, #027439); }
  .cms-timeline__entry-title { font-size: 18px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-timeline__rail-fill,
  .cms-timeline__nowlabel,
  .cms-timeline__progress-fill,
  .cms-timeline__progress-now,
  .cms-timeline__node { transition: none; }
}

/* ===== gioiThieu.css ===== */
/* ============================================================
   gioiThieu.css — CỤM 4 TRANG "GIỚI THIỆU"

   Dùng chung cho cả bốn template:
     page-gioi-thieu.php                 /gioi-thieu/
     page-gioi-thieu-he-sinh-thai.php    /gioi-thieu/he-sinh-thai/
     page-gioi-thieu-so-do-to-chuc.php   /gioi-thieu/so-do-to-chuc/
     page-gioi-thieu-van-hoa.php         /gioi-thieu/van-hoa/
   Bốn trang dùng chung khung .gt-section / .gt-head / .gt-title / .gt-toc nên
   sửa một chỗ là cả cụm đồng bộ. Riêng block "Sơ đồ tổ chức" có file riêng
   assets/css/orgChart.css vì nó là element UX Builder, thả được ở mọi trang.

   Toàn bộ class ở đây mang tiền tố .gt- để KHÔNG đụng vào bất kỳ
   component dùng chung nào (.about-grid, .value-cards, .factory-card...
   của pages.css).

   Chỉ tái sử dụng các component đã chuẩn hoá của site:
     .container, .page-hero* (pageHero.css), .breadcrumb,
     .btn / .btn--primary / .btn--outline-light, .link-arrow (styles.css),
     .icon-<name> (general.css — hệ mask-image),
     .cta-banner--navy (pages.css).

   Màu, cỡ chữ, khoảng cách, bo góc, đổ bóng: lấy từ tokens.css,
   không hard-code lại giá trị.

   LƯU Ý CASCADE (Flatsome):
   1. Flatsome in ra "h1,h2,h3,h4,h5,h6 { color: <Customizer color> }" ở
      wp_head priority 100 — tức là SAU file này. Vì color là thuộc tính
      kế thừa, mọi rule khớp trực tiếp thẻ heading đều thắng giá trị kế
      thừa từ cha. => mọi tiêu đề bên dưới đều khai báo `color` tường minh.
   2. Flatsome cũng in "h1..h6 { width: 100% }" nên heading là flex item
      sẽ đòi trọn chiều rộng. => heading nằm trong flex phải đặt width:auto.
   3. "a:hover { color: <Link Hover Color> }" có specificity cao hơn class
      đơn => link/nút đổi màu khi hover phải khai báo color ở trạng thái hover.
   ============================================================ */

/* ============================================================
   0. NỀN & KHUNG CHUNG
   ============================================================ */

.gt-page {
  background: var(--c-white);
}

/* Khoảng cách dọc giữa các khối lớn. Dùng riêng thay vì .page-section để
   trang demo có nhịp thoáng hơn (--sp-8 của .page-section hơi chật với
   layout 2 cột nhiều chữ ở đây). */
.gt-section {
  padding-block: var(--sp-16);
}
.gt-section--tight {
  padding-block: var(--sp-12);
}
.gt-section--alt {
  background: var(--c-brand-50);
}

/* Đầu mỗi khối: eyebrow + tiêu đề + mô tả, canh giữa hoặc canh trái. */
.gt-head {
  max-width: 760px;
  margin-bottom: var(--sp-10);
}
.gt-head--center {
  margin-inline: auto;
  text-align: center;
}
.gt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.gt-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-cta);
  flex: none;
}
.gt-head--center .gt-eyebrow::before {
  display: none;
}

.gt-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* Dòng link "xem thêm" đặt cuối một khối. Flex + gap vì có chỗ đặt hai link cạnh
   nhau (trang Giới thiệu: sơ đồ tổ chức + năng lực sản xuất); để inline thường thì
   hai link dính sát nhau đọc như một cụm. */
.gt-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.gt-more--center {
  justify-content: center;
  text-align: center;
}

/* ============================================================
   1. THANH ĐIỀU HƯỚNG GIỮA 4 TRANG CON
   Markup: template-parts/gioi-thieu/subnav.php
   ============================================================ */

.gt-toc {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-white);
}
.gt-toc__list {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Trên màn hẹp, thanh này trượt ngang thay vì xuống dòng lộn xộn.
     -webkit-overflow-scrolling để đà trượt mượt trên iOS. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gt-toc__list::-webkit-scrollbar {
  display: none;
}
.gt-toc__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 56px;
  padding-inline: var(--sp-4);
  white-space: nowrap;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease);
}
.gt-toc__link:hover {
  color: var(--c-brand-700);
  border-bottom-color: var(--c-cta);
}
/* Trang đang xem. Khai riêng cả :hover để rê chuột lên mục đang mở không làm nó
   nhạt đi như một mục thường — "a:hover { color }" của Flatsome thắng class đơn. */
.gt-toc__link.is-active,
.gt-toc__link.is-active:hover {
  color: var(--c-brand-900);
  border-bottom-color: var(--c-cta);
}
.gt-toc__link .icon {
  width: 17px;
  height: 17px;
  color: var(--c-brand-600);
}

/* ============================================================
   2. DẢI SỐ LIỆU NĂNG LỰC (dưới hero)
   ============================================================ */

.gt-stats {
  display: grid;
  /* 8 ô: 4 cột x 2 hàng. Trước đây 6 ô/6 cột — đổi khi bổ sung
     "+500 khách hàng doanh nghiệp" và "64 tỉnh thành" từ profile tr.14-15. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-stats);
  /* Kéo lên đè một phần lên hero cho liền mạch với các trang khác của site. */
  margin-top: -44px;
  position: relative;
  z-index: 2;
}
.gt-stat {
  background: var(--c-white);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.gt-stat__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto var(--sp-2);
  color: var(--c-brand-600);
}
.gt-stat__value {
  display: block;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-extrabold);
  color: var(--c-brand-900);
  letter-spacing: -0.02em;
}
.gt-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ============================================================
   3. VỀ PHÚ SƠN
   ============================================================ */

.gt-about {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--sp-12);
  align-items: start;
}
.gt-about__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.gt-about__body p:last-of-type {
  margin-bottom: 0;
}
.gt-about__body strong {
  color: var(--c-heading);
  font-weight: var(--fw-semibold);
}

/* Danh sách lĩnh vực hoạt động */
.gt-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.gt-field {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  transition: border-color var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease);
}
.gt-field:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}
.gt-field .icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--c-cta);
}
.gt-field__title {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin-bottom: 2px;
}
.gt-field__text {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* Cột phải: ảnh nhà máy + bảng hồ sơ pháp lý */
.gt-about__aside {
  display: grid;
  gap: var(--sp-5);
  /* Bám theo khi cuộn để cột chữ dài bên trái không tạo khoảng trắng lớn. */
  position: sticky;
  top: calc(var(--header-height) + var(--sp-5));
}
.gt-figure {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.gt-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-product);
  object-fit: cover;
}
.gt-figure figcaption {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-brand-900);
  color: rgb(255 255 255 / 88%);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.gt-profile {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-profile__title {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-heading);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-divider);
}
.gt-profile__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-profile__item {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text);
}
.gt-profile__item .icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--c-brand-600);
}
.gt-profile__item b {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Thư ngỏ Giám đốc */
.gt-quote {
  margin: var(--sp-12) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-cta);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gt-quote__mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  flex: none;
}
.gt-quote__mark .icon {
  width: 26px;
  height: 26px;
}
.gt-quote__text {
  font-size: 19px;
  line-height: 31px;
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--c-heading);
}
.gt-quote__author {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
}
.gt-quote__author span {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
}
.gt-quote__motto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.gt-quote__motto b {
  padding: 5px 14px;
  border-radius: var(--r-round);
  background: var(--c-cta);
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   3b. LỊCH SỬ HÌNH THÀNH
   Nội dung là UX Block "Lịch sử hình thành" — chính element timeline của
   theme (blocks/timeline). Toàn bộ style của nó nằm ở assets/css/timeline.css
   và màu do UX Builder bơm vào bằng biến --tl-* inline.

   Ở đây CHỈ tạo khung chứa, cố tình không đụng vào bất kỳ class .cms-timeline*
   nào: sửa ở đây sẽ ảnh hưởng mọi trang khác đang dùng block đó. Trường hợp
   duy nhất phải chạm tới là rút bớt chiều cao ảnh ở màn hình thấp (xem
   gioiThieuDemo2.css) — và cũng được giới hạn trong phạm vi trang demo.
   ============================================================ */
/*
 * KHÔNG bọc thẻ trắng ở đây. Từ bản thiết kế mới, chính timeline đã tự dựng thẻ
 * trắng cho khung chi tiết (.cms-timeline__panels), còn trục năm thì cố ý nằm
 * trên nền sáng của section. Để nguyên viền + nền + padding cũ sẽ thành thẻ
 * trắng lồng trong thẻ trắng, và trục năm bị hút vào trong thẻ.
 */
.gt-history { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* ============================================================
   4. TẦM NHÌN — SỨ MỆNH  (dải nền navy)
   ============================================================ */

.gt-vm {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-brand-950);
  color: var(--c-white);
}
.gt-vm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/wp-content/uploads/2026/07/nang-luc-day-chuyen-san-xuat-panel.webp")
    center / cover no-repeat;
  opacity: 0.16;
}
.gt-vm .gt-eyebrow {
  color: #7fb2e6;
}
.gt-vm .gt-title {
  color: var(--c-white);
}
.gt-vm .gt-lead {
  color: rgb(255 255 255 / 78%);
}

.gt-vm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.gt-vm__card {
  padding: var(--sp-8);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 6%);
  /* backdrop-filter chỉ là lớp tô điểm; trình duyệt không hỗ trợ vẫn đọc tốt
     nhờ nền rgb(255 255 255 / 6%) ở trên. */
  backdrop-filter: blur(2px);
}
.gt-vm__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-cta);
  color: var(--c-white);
  margin-bottom: var(--sp-5);
}
.gt-vm__icon .icon {
  width: 28px;
  height: 28px;
}
.gt-vm__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.gt-vm__text {
  font-size: 17px;
  line-height: 28px;
  color: rgb(255 255 255 / 84%);
}

/* 5 lợi thế cạnh tranh cốt lõi — toàn bộ style nay nằm ở khối
   "ĐỊNH HƯỚNG PHÁT TRIỂN — bản thiết kế mới" cuối file. Nhóm rule cũ ở đây dựng
   cho bản nền navy (viền trắng mờ, nền rgb(2 20 42/45%)) đã xoá: nó không đặt lại
   background/border nên trên nền sáng thẻ vẫn bị phủ một lớp xám xanh. */

/* ============================================================
   5. GIÁ TRỊ CỐT LÕI
   ============================================================ */

.gt-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
/* Nhóm rule .gt-value cũ (thẻ rời có vạch xanh 4px ở mép trên, số đặt tuyệt đối
   góc phải) đã xoá — bản mới là ba DÒNG trong một thẻ chung, style ở khối
   "GIÁ TRỊ CỐT LÕI — bản thiết kế mới" cuối file. Để lại thì ::before vẽ vạch
   xanh dày ngang mỗi dòng thay cho kẻ ngăn mảnh. */
.gt-value__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.gt-value__en {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.gt-value__text {
  font-size: var(--fs-small);
  line-height: 23px;
  color: var(--c-text-secondary);
}

/* Dải slogan chốt hạ khối giá trị cốt lõi */
.gt-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding: var(--sp-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-card);
  background: var(--c-white);
  text-align: center;
}
.gt-slogan .icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--c-cta);
}
.gt-slogan p {
  font-size: 20px;
  line-height: 30px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-slogan p span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
}

/* ============================================================
   6. BAN LÃNH ĐẠO
   ============================================================ */

.gt-lead-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-12);
  align-items: start;
}

.gt-leader {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-leader__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-capability);
  object-fit: cover;
}
.gt-leader__body {
  padding: var(--sp-6);
}
.gt-leader__name {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-leader__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gt-leader__role .icon {
  width: 14px;
  height: 14px;
}
.gt-leader__quote {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  font-size: var(--fs-small);
  line-height: 23px;
  font-style: italic;
  color: var(--c-text-secondary);
}

.gt-lead-note {
  font-size: 17px;
  line-height: 28px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-6);
}
.gt-lead-note b {
  color: var(--c-heading);
  font-weight: var(--fw-semibold);
}

/* Sơ đồ tổ chức rút gọn */
.gt-org {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-org__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  transition: border-color var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease);
}
.gt-org__item:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}
.gt-org__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-surface-subtle);
  color: var(--c-brand-700);
}
.gt-org__icon .icon {
  width: 22px;
  height: 22px;
}
.gt-org__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 3px;
}
.gt-org__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-secondary);
}

/* ============================================================
   7. VĂN HÓA DOANH NGHIỆP
   ============================================================ */

/* ------------------------------------------------------------
   Bố cục theo bản thiết kế khách gửi 20/08/2026:
   hàng 1 = thẻ đôi "triết lý nền tảng" (nền navy) + "bốn trụ cột" (nền trắng);
   hàng 2 = hai thẻ "hướng nội bộ" / "hướng cộng đồng" có vạch màu trên đỉnh;
   khép lại bằng một dải chữ căn giữa.

   Bố cục cũ (.gt-philosophy + .gt-rings 4 huy hiệu tròn) đã bỏ hẳn, không giữ lại
   rule nào — chính hai bộ rule cùng tên .gt-ring nằm rải trong file này là thứ đã
   làm hỏng trang hôm nay.
   ------------------------------------------------------------ */

.gt-head--accent .gt-eyebrow {
  color: var(--c-cta);
}
/* Bản thiết kế giữ vạch xanh trước chữ ở cả tiêu đề căn giữa, khác mặc định của
   .gt-head--center nên bật lại đúng trong phạm vi mục này. */
.gt-head--accent.gt-head--center .gt-eyebrow::before {
  display: block;
}

/* ---------- Hàng 1: triết lý + bốn trụ cột ---------- */
.gt-cul__top {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-stats);
  margin-bottom: var(--sp-8);
}

.gt-cul__quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-10);
  background: linear-gradient(115deg, var(--c-brand-950) 0%, var(--c-brand-700) 100%);
  color: var(--c-white);
}
/* Dấu ngoặc kép trang trí: đặt absolute để không chiếm dòng và không bị trình đọc
   màn hình đọc thành nội dung. */
.gt-cul__quote::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: var(--sp-8);
  font-size: 96px;
  line-height: 1;
  color: rgb(255 255 255 / 16%);
  pointer-events: none;
}
.gt-cul__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 82%);
}
.gt-cul__label::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--c-cta);
}
.gt-cul__text {
  margin: 0;
  font-size: 21px;
  line-height: 34px;
  font-weight: var(--fw-medium);
  font-style: italic;
}
.gt-cul__motto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 22%);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 78%);
}
/* Chấm xanh ngăn giữa ba từ — dùng ::before của từ thứ 2 trở đi để khi xuống dòng
   ở khổ hẹp không còn chấm mồ côi ở đầu hàng. */
.gt-cul__motto span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--sp-4);
  border-radius: 50%;
  background: var(--c-cta);
  vertical-align: middle;
}

.gt-pillars {
  padding: var(--sp-10) var(--sp-8);
  background: var(--c-white);
}
.gt-pillars__title {
  margin: 0 0 var(--sp-6);
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-pillars__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-pillar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-brand-100);
  border-radius: 12px;
  background: var(--c-brand-50);
}
.gt-pillar__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-brand-600);
}
.gt-pillar__icon .icon {
  width: 20px;
  height: 20px;
}
.gt-pillar b {
  display: block;
  font-size: var(--fs-small);
  line-height: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-heading);
}
.gt-pillar span:last-child {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ---------- Hàng 2: hai hướng hoạt động ---------- */
/* Số 01, 02 trên thẻ văn hóa đánh bằng bộ đếm CSS, cùng lý do với .gt-rule__num:
   trong UX Builder mỗi thẻ được render riêng nên PHP không biết thẻ đứng thứ mấy. */
.gt-culture { counter-reset: gt-culture; }
.gt-culture__card { counter-increment: gt-culture; }
.gt-culture__num::before { content: counter(gt-culture, decimal-leading-zero); }

.gt-culture {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}
.gt-culture__card {
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  /* Vạch màu trên đỉnh thẻ: đặt bằng border-top dày thay vì phần tử giả để bo góc
     trên vẫn ăn theo border-radius của thẻ. */
  border-top: 4px solid var(--c-cta);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-culture__card--out {
  border-top-color: var(--c-brand-700);
}
.gt-culture__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-6);
}
.gt-culture__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}
.gt-culture__icon .icon {
  width: 24px;
  height: 24px;
}
.gt-culture__head .gt-eyebrow {
  margin-bottom: 2px;
  color: var(--c-cta);
}
.gt-culture__card--out .gt-culture__head .gt-eyebrow {
  color: var(--c-brand-600);
}
.gt-culture__head .gt-eyebrow::before {
  display: none;
}
.gt-culture__title {
  margin: 0;
  font-size: 19px;
  line-height: 27px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-culture__num {
  align-self: start;
  padding: 4px 12px;
  border-radius: var(--r-round);
  background: var(--c-cta-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  color: var(--c-cta);
}
.gt-culture__card--out .gt-culture__num {
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}

/* Danh sách hoạt động nội bộ: mốc tròn nối bằng một đường dọc. */
.gt-track {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-track__item {
  position: relative;
  padding-left: 30px;
}
.gt-track__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--c-cta);
  border-radius: 50%;
  background: var(--c-white);
}
.gt-track__item:first-child::before {
  background: var(--c-cta);
}
/* Đường nối kéo từ mốc này tới mốc kế; mốc cuối không vẽ để đường không thừa đuôi. */
.gt-track__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: calc(var(--sp-5) * -1);
  width: 2px;
  background: var(--c-border);
}
.gt-track__item b {
  display: block;
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-track__item span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--c-text-muted);
}

/* Danh sách hoạt động cộng đồng: một dòng, dấu tích xanh. */
.gt-checks {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-checks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.gt-checks .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--c-cta);
}

/* ---------- Ba nguyên tắc vận hành (trang Sơ đồ tổ chức) ---------- */
/*
 * Từ bản thiết kế 23/08/2026: ba thẻ rời gộp thành MỘT thẻ trắng chia ba cột.
 * Trên đầu là đường ray ngang chạy suốt thẻ, vòng tròn rỗng đặt ở TÂM mỗi cột và
 * mũi tên đặt ở RANH GIỚI giữa hai cột — khác cách neo của .vh-act (chấm ở tâm ô
 * icon) nên hai khối không dùng chung biến được.
 */
.gt-rules {
  --gt-rules-gap: var(--sp-10);
  --gt-rules-pad: var(--sp-10);
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-rules__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gt-rules-gap);
  align-items: stretch;
  margin: 0;
  padding: var(--gt-rules-pad) var(--gt-rules-pad) var(--sp-8);
  list-style: none;
  counter-reset: gt-rule;
}
.gt-rule {
  counter-increment: gt-rule;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
/* Kẻ dọc ngăn cột, bắt đầu DƯỚI hàng ray để ray không bị cắt thành ba đoạn. */
.gt-rule + .gt-rule::before {
  content: "";
  position: absolute;
  left: calc(var(--gt-rules-gap) / -2);
  top: calc(16px + var(--sp-6));
  bottom: 0;
  border-left: 1px solid var(--c-divider);
}

/* ---- Đường ray ---- */
.gt-rule__node {
  position: relative;
  display: block;
  height: 16px;
  margin-bottom: var(--sp-8);
}
/* Vạch ngang: mỗi cột vẽ đoạn của mình cộng nửa khe hai bên nên ba đoạn khít nhau
   thành một đường; cột đầu và cột cuối kéo ra sát mép trong của thẻ. */
.gt-rule__node::after {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(var(--gt-rules-gap) / -2);
  right: calc(var(--gt-rules-gap) / -2);
  border-top: 1px solid var(--c-border-strong);
}
.gt-rule:first-child .gt-rule__node::after {
  left: calc(var(--gt-rules-pad) * -1);
}
.gt-rule:last-child .gt-rule__node::after {
  right: calc(var(--gt-rules-pad) * -1);
}
/* Vòng tròn RỖNG (viền xanh lá, ruột trắng) ở tâm cột, đè lên vạch. */
.gt-rule__node::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-cta);
  border-radius: 50%;
  background: var(--c-white);
}
.gt-rule:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(100% + var(--gt-rules-gap) / 2 - 4px);
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1.5px solid var(--c-border-strong);
  border-right: 1.5px solid var(--c-border-strong);
  transform: rotate(45deg);
}

/* ---- Đầu cột: icon tròn + số + vạch nhấn ---- */
.gt-rule__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.gt-rule__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-brand-600);
}
.gt-rule__icon .icon {
  width: 26px;
  height: 26px;
}
.gt-rule__numwrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 92px;
}
/* Số 01-03 đánh bằng bộ đếm CSS chứ không in sẵn trong HTML: trong UX Builder mỗi
   thẻ được render bằng một lời gọi riêng nên PHP không biết thẻ đang đứng thứ mấy
   (xem CMS_Helpers::uxbChildSlot). Để CSS đếm thì số luôn đúng ở cả frontend lẫn
   trình dựng trang, và tự đánh lại ngay khi kéo đổi thứ tự thẻ. */
.gt-rule__num {
  font-size: 46px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-border-strong);
}
.gt-rule__num::before {
  content: counter(gt-rule, decimal-leading-zero);
}
.gt-rule__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--c-brand-600);
}

.gt-rule__title {
  margin: 0 0 var(--sp-3);
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-rule__text {
  margin: 0 0 var(--sp-6);
  font-size: 15px;
  line-height: 26px;
  color: var(--c-text-secondary);
}

/* Dải tóm tắt luôn bị đẩy xuống đáy cột để chân ba cột thẳng hàng dù đoạn mô tả
   dài ngắn khác nhau. */
.gt-rule__chip {
  display: flex;
  /* nowrap + span bọc chữ: để wrap thì ở khổ hẹp chấm xanh bị đẩy lên một dòng
     riêng, chữ tụt hẳn xuống dưới. */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: auto 0 0;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--c-cta-soft);
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.gt-rule__chip > span {
  flex: 1;
  min-width: 0;
}
.gt-rule__chip::before {
  content: "";
  width: 8px;
  height: 8px;
  /* 7px = (line-height 22 - 8) / 2, cho chấm ngang tâm DÒNG ĐẦU chứ không phải
     tâm cả khối chữ khi chữ xuống hai dòng. */
  margin-top: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-cta);
}
/* Dải quy trình: các bước ngăn nhau bằng mũi tên, không có chấm mở đầu. */
.gt-rule__chip--flow {
  flex-wrap: wrap;
  align-items: center;
  /* Cỡ chữ và giãn chữ nhỏ hơn dải chấm: bốn bước "Tư vấn → Sản xuất → QC →
     Giao hàng" phải nằm gọn MỘT dòng thì chân ba cột mới thẳng hàng, mà cột ở
     khung 1250px hẹp hơn bản thiết kế. */
  gap: var(--sp-2);
  padding: 12px 14px;
  background: var(--c-brand-50);
  font-size: var(--fs-caption);
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--c-brand-800);
  white-space: nowrap;
}
.gt-rule__chip--flow::before {
  display: none;
}
.gt-rule__chip--flow span + span::before {
  content: "\2192";
  margin-right: var(--sp-2);
  color: var(--c-brand-500);
}
/* Ở khổ hẹp thì cho phép xuống dòng, giữ nowrap là dải bị tràn khỏi cột. */
@media (max-width: 767px) {
  .gt-rule__chip--flow {
    white-space: normal;
  }
}

/* ---- Dải navy tóm tắt dưới chân thẻ ---- */
.gt-rules__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0 var(--sp-5) var(--sp-5);
  padding: var(--sp-5) var(--sp-8);
  border-radius: 10px;
  background: var(--c-brand-950);
}
.gt-rules__strip span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
}
.gt-rules__strip span + span::before {
  content: "\2014";
  color: rgb(255 255 255 / 45%);
}

/* ---------- Dải kết ---------- */
.gt-cul__note {
  display: flex;
  justify-content: center;
  margin: var(--sp-8) 0 0;
}
.gt-cul__note span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 22px;
  border-radius: var(--r-round);
  background: var(--c-cta-soft);
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  text-align: center;
}
.gt-cul__note span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c-cta);
}

/* ============================================================
   CAM KẾT SỨC KHỎE, AN TOÀN, MÔI TRƯỜNG — profile tr.54-57
   ============================================================ */
.hse__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}
.hse__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.hse__dash { width: 28px; height: 3px; border-radius: 2px; background: var(--c-cta); }
.hse__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
  margin-bottom: 6px;
}
.hse__en {
  font-size: var(--fs-small);
  line-height: 22px;
  font-style: italic;
  color: var(--c-text-muted);
  margin-bottom: 0;
}
/* Khẩu hiệu treo khắp nhà máy - profile in nó rất lớn, giữ đúng trọng lượng đó. */
.hse__slogan {
  flex: none;
  font-size: 22px;
  line-height: 30px;
  font-weight: var(--fw-extrabold);
  color: var(--c-heading);
  margin-bottom: 0;
}
.hse__slogan span { color: #ed7d31; }
.hse__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.hse__intro p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.hse__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.hse__ppe {
  display: flex;
  flex-direction: column;
}
/* Cột phải cao hơn nên thẻ này bị kéo giãn — dồn danh sách ra giữa phần thừa
   thay vì để một khoảng trống lớn ở đáy. */
.hse__ppelist { flex: 1 1 auto; align-content: center; }

.hse__ppe,
.hse__env,
.hse__stat {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.hse__h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-extrabold);
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.hse__h3 i {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
}
.hse__note {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-5);
}
.hse__ppelist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hse__ppelist li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
/* Icon cam đặt trong vòng tròn viền cam - đúng cách profile trình bày, nhưng
   vòng tròn vẽ bằng CSS nên icon tách nền dùng lại được ở kích thước bất kỳ. */
.hse__ppelist img {
  flex: none;
  width: 62px;
  height: 62px;
  padding: 13px;
  border: 2px solid #ed7d31;
  border-radius: 50%;
  object-fit: contain;
}
.hse__ppelist b {
  display: block;
  font-size: var(--fs-small);
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.hse__ppelist i {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text-muted);
}
.hse__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.hse__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hse__statval {
  font-size: 38px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.hse__statval sup { font-size: 20px; top: -0.5em; }
.hse__statval span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-heading);
}
.hse__statlabel {
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text-secondary);
  margin-bottom: 4px;
}
.hse__staten {
  font-size: 12px;
  line-height: 18px;
  font-style: italic;
  color: var(--c-text-muted);
  margin-bottom: 0;
}
.hse__env { flex: 1 1 auto; }
.hse__env p {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.hse__env p:last-child { margin-bottom: 0; }
.hse__pccc { margin-top: var(--sp-10); }
.hse__shots { margin-top: var(--sp-5); }

@media (max-width: 1099px) {
  .hse__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 849px) {
  .hse__head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .hse__intro { grid-template-columns: minmax(0, 1fr); }
  .hse__ppelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
  .hse__ppelist { grid-template-columns: minmax(0, 1fr); }
  .hse__stats { grid-template-columns: minmax(0, 1fr); }
  .hse__ppe, .hse__env, .hse__stat { padding: var(--sp-5); }
}

/* ============================================================
   8. DẢI LIÊN KẾT 3 TRANG CÒN LẠI (cuối trang /gioi-thieu/)
   ============================================================ */

.gt-cluster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.gt-cluster__card {
  display: block;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease);
}
.gt-cluster__card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}
.gt-cluster__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  margin-bottom: var(--sp-4);
}
.gt-cluster__icon .icon {
  width: 24px;
  height: 24px;
}
.gt-cluster__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.gt-cluster__text {
  font-size: var(--fs-small);
  line-height: 23px;
  color: var(--c-text-secondary);
}
.gt-cluster__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}
.gt-cluster__more .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-normal) var(--ease);
}
.gt-cluster__card:hover .gt-cluster__more .icon {
  transform: translateX(4px);
}

/* ============================================================
   9. HỆ SINH THÁI — bốn đơn vị thành viên
   Template: page-gioi-thieu-he-sinh-thai.php
   ============================================================ */

/* Biến thể 4 cột của .gt-fields (mặc định 2 cột cho cột chữ hẹp ở trang chính). */
.gt-fields--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.gt-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  counter-reset: gt-member;
}
/* Số thứ tự 01, 02… đánh bằng bộ đếm CSS, cùng lý do với .gt-rule__num ở trên:
   trong UX Builder mỗi thẻ được render riêng nên PHP không biết thẻ đứng thứ mấy. */
.gt-member {
  counter-increment: gt-member;
}
.gt-member__index::before {
  content: counter(gt-member, decimal-leading-zero);
}
.gt-member {
  display: grid;
  grid-template-columns: 200px 1fr;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease);
}
.gt-member:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card-hover);
}

.gt-member__media {
  position: relative;
  background: var(--c-brand-900);
}
.gt-member__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ô logo: nền sáng và contain, khác hẳn ô ảnh (nền navy, cover) — logo bị cắt
   hoặc đặt trên nền tối là hỏng nhận diện của đơn vị thành viên. */
.gt-member__media--logo {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: var(--sp-6);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}
.gt-member__logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  object-fit: contain;
}
/* Chưa có ảnh thật của đơn vị: khối icon trên nền brand thay cho ảnh, để không
   phải mượn ảnh nhà máy Phú Sơn gán cho công ty khác. */
.gt-member__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 180px;
  height: 100%;
  color: rgb(255 255 255 / 55%);
  background: linear-gradient(
    145deg,
    var(--c-brand-800) 0%,
    var(--c-brand-950) 100%
  );
}
.gt-member__glyph .icon {
  width: 44px;
  height: 44px;
}
.gt-member__index {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 72%);
}

.gt-member__body {
  padding: var(--sp-6);
}
.gt-member__name {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-member__text {
  font-size: var(--fs-small);
  line-height: 23px;
  color: var(--c-text-secondary);
}
/* Dòng "đang cập nhật": nhạt và in nghiêng để người duyệt nội dung nhìn phát
   biết ngay đây là chỗ còn thiếu chữ, không phải nội dung chính thức. */
.gt-member__text--empty {
  font-style: italic;
  color: var(--c-text-muted);
}
.gt-member__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.gt-member__tags li {
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   SƠ ĐỒ HỆ SINH THÁI — trang /gioi-thieu/he-sinh-thai/
   Cây phân cấp dọc: nút gốc Phú Sơn Group -> cấp đối tác song hành -> cấp đối tác
   chiến lược. Mọi đường nối vẽ bằng ::before/::after, markup không có thẻ rỗng nào.
   ============================================================ */

.eco-tree {
  --eco-gap: var(--sp-6);
  --eco-drop: var(--sp-10);
  padding: var(--sp-10);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}

/* ---------- Nút gốc ---------- */
.eco-hub {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-10);
  border-radius: 16px;
  background: var(--c-brand-950);
  text-align: center;
}
.eco-hub__logo {
  display: block;
  width: auto;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
/*
 * Gạch ngang giữa logo và tên chạy hết bề ngang nút gốc nên không đặt được lên
 * chính thẻ <img> (viền của ảnh chỉ dài bằng ảnh). Đặt lên phần tử LIỀN SAU logo
 * để nút gốc chưa có logo thì không thừa ra một vạch treo lơ lửng.
 */
.eco-hub__logo + .eco-hub__name {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgb(255 255 255 / 20%);
}
.eco-hub__name {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.eco-hub__text {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgb(255 255 255 / 76%);
}

/* ---------- Một cấp ---------- */
.eco-tier {
  position: relative;
  /* Chừa đúng --eco-drop cho đường nối dọc chạy từ cấp trên xuống. */
  margin-top: var(--eco-drop);
  padding-top: var(--eco-drop);
}
/* Đường nối dọc từ cấp trên xuống nhãn cấp. */
.eco-tier::before {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) * -1);
  left: 50%;
  width: 0;
  height: var(--eco-drop);
  border-left: 1px solid var(--c-border-strong);
}
/*
 * Chấm tròn ở đầu đường nối, ngay mép dưới khối phía trên. Vẽ bằng ::after của
 * chính cấp đang xét (::before đã dùng cho đoạn đường dọc) nên không cần thẻ rỗng.
 */
.eco-tier::after {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) * -1 - 4px);
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-cta);
  transform: translateX(-50%);
}
.eco-tier__label {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 0 var(--eco-drop);
}
/* Đoạn nối từ nhãn cấp xuống thanh ngang (thanh nằm ở nửa khe phía trên các nút). */
.eco-tier__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: calc(var(--eco-drop) / 2);
  border-left: 1px solid var(--c-border-strong);
}
.eco-tier__label span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 20px;
  border: 1px solid var(--c-cta);
  border-radius: var(--r-round);
  background: var(--c-cta-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta-hover);
}
.eco-nodes {
  position: relative;
  display: grid;
  gap: var(--eco-gap);
}
/*
 * Cấp chỉ có một nút thì thu thẻ về ĐÚNG bề ngang nút gốc (720px). Để tràn hết
 * khổ, thẻ rộng gần gấp bốn thẻ đối tác chiến lược — đọc như thể đơn vị này lớn
 * hơn cả ba đơn vị kia cộng lại, mà nửa trái lại chỉ có mỗi cái icon.
 */
.eco-tier--1 .eco-nodes {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin-inline: auto;
}
.eco-tier--2 .eco-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-tier--3 .eco-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eco-tier--4 .eco-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Cấp nhiều nút: thanh ngang bắc từ TÂM nút đầu tới TÂM nút cuối, rồi mỗi nút thả
 * một đoạn dọc xuống. Với lưới n cột đều nhau và khe G, tâm cột đầu nằm ở
 * (100% - (n-1)G) / 2n, nên toạ độ tính thẳng từ hai biến đó — đổi số cột hay khe
 * là thanh tự khớp, không phải chỉnh tay.
 */
.eco-tier--2 .eco-nodes { --eco-half: calc(25% - var(--eco-gap) / 4); }
.eco-tier--3 .eco-nodes { --eco-half: calc(16.6667% - var(--eco-gap) / 3); }
.eco-tier--4 .eco-nodes { --eco-half: calc(12.5% - var(--eco-gap) * 3 / 8); }
.eco-nodes::before {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) / -2);
  left: var(--eco-half);
  right: var(--eco-half);
  border-top: 1px solid var(--c-border-strong);
}
.eco-tier--1 .eco-nodes::before {
  display: none;
}
.eco-node::before {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) / -2);
  left: 50%;
  width: 0;
  height: calc(var(--eco-drop) / 2);
  border-left: 1px solid var(--c-border-strong);
}
/* Chấm tại điểm rẽ của từng nút trên thanh ngang. Cấp một nút không có thanh
   ngang nên cũng không có điểm rẽ để đánh dấu. */
.eco-tier:not(.eco-tier--1) .eco-node::after {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) / -2 - 4px);
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-cta);
  transform: translateX(-50%);
}


/* ---------- Thẻ một đối tác ---------- */
.eco-node {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
/*
 * Bố cục mặc định của thẻ: logo nằm trên, gạch ngang, rồi tên căn giữa. Ô logo cố
 * ý KHÔNG có khung viền — logo đối tác đã là ảnh nền trắng, lồng thêm khung nữa
 * thành hai lớp viền chồng nhau.
 */
.eco-node__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.eco-node__logo {
  /* Chiều cao ô logo đi qua biến để ảnh bên trong chặn được bằng ĐÚNG con số đó:
     max-height:100% của ảnh trong ô grid không phải lúc nào cũng quy ra được px,
     logo tràn ra ngoài đè lên tên đơn vị. */
  --eco-logo-h: 104px;
  flex: none;
  display: grid;
  place-items: center;
  height: var(--eco-logo-h);
  color: var(--c-brand-600);
}
.eco-node__logo img {
  display: block;
  max-width: 100%;
  max-height: var(--eco-logo-h);
  width: auto;
  height: auto;
  object-fit: contain;
}
.eco-node__logo .icon {
  width: 56px;
  height: 56px;
}
.eco-node__id {
  min-width: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-divider);
  text-align: center;
}
.eco-node__name {
  /* width:auto vì Flatsome in "h1..h6 { width: 100% }" sau file này. */
  width: auto;
  /* Chừa sẵn hai dòng: tên Coretech dài hơn nên vắt hai dòng, tên hai đơn vị kia
     một dòng — không chừa thì dòng thông tin của ba thẻ lệch nhau một dòng. */
  min-height: 48px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.eco-node__short {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.eco-node__text {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.eco-node__meta {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eco-node__empty {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 22px;
  font-style: italic;
  text-align: center;
  color: var(--c-text-muted);
}
.eco-node__meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.eco-node__meta .icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--c-brand-500);
}
.eco-node__meta b {
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.eco-node__meta b::after {
  content: ":";
  margin-right: 4px;
}
.eco-node__meta a {
  color: var(--c-cta);
  text-decoration: none;
  text-underline-offset: 2px;
  word-break: break-word;
}
/* Flatsome in "a:hover { color: <Link Hover Color> }" sau file này nên phải khai
   lại màu ở trạng thái hover, xem ghi chú cascade đầu file. */
.eco-node__meta a:hover {
  color: var(--c-cta-hover);
  text-decoration: underline;
}
/* margin-top:auto đẩy đường dẫn xuống đáy để chân các thẻ cùng cấp thẳng hàng. */
.eco-node__link {
  margin: auto 0 0;
  padding-top: var(--sp-6);
}
.eco-node__link .link-arrow {
  font-size: var(--fs-small);
  word-break: break-word;
}

/* ---------- Thẻ đối tác song hành: một nút, chia đôi theo chiều ngang ----------
 * Chỉ có một nút nên thẻ rộng gấp ba thẻ thường; xếp dọc thì logo bé tí nằm giữa
 * một vùng trắng mênh mông. Đổi sang lưới hai cột: logo bên trái, phần chữ bên
 * phải, gạch phân cách quay dọc.
 *
 * display:contents nhấc .eco-node__logo và .eco-node__id ra khỏi .eco-node__head
 * để cả hai thành ô của lưới — markup dùng chung với thẻ thường nên không thể
 * tách sẵn hai cột trong PHP.
 */
.eco-tier--1 .eco-node {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  /* Cột phải nhiều nhất bốn phần (tên, giới thiệu, thông tin, đường dẫn); khai đủ
     bốn hàng để logo bắc được từ hàng đầu tới hàng cuối. Khe chỉ khai theo cột nên
     thiếu phần nào thì hàng đó cao 0, không để lại khoảng hở. */
  grid-template-rows: repeat(4, auto);
  column-gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8);
}
.eco-tier--1 .eco-node__head {
  display: contents;
}
.eco-tier--1 .eco-node__logo {
  --eco-logo-h: 112px;
  grid-column: 1;
  grid-row: 1 / -1;
  /* Kéo hết chiều cao thẻ để gạch phân cách chạy suốt: align-items:center của lưới
     làm ô này chỉ cao bằng cái logo, gạch hoá ra ngắn ngủn giữa thẻ. */
  align-self: stretch;
  height: auto;
  min-height: var(--eco-logo-h);
  padding-right: var(--sp-8);
  border-right: 1px solid var(--c-divider);
}
.eco-tier--1 .eco-node__logo .icon {
  width: 60px;
  height: 60px;
}
.eco-tier--1 .eco-node__id {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0;
  border-top: 0;
  text-align: left;
}
.eco-tier--1 .eco-node__name {
  font-size: 18px;
  line-height: 28px;
  min-height: 0;
}
.eco-tier--1 .eco-node__text {
  grid-column: 2;
  grid-row: 2;
  margin: var(--sp-3) 0 0;
}
.eco-tier--1 .eco-node__meta,
.eco-tier--1 .eco-node__empty {
  grid-column: 2;
  grid-row: 3;
  margin-top: var(--sp-4);
  text-align: left;
}
.eco-tier--1 .eco-node__link {
  grid-column: 2;
  grid-row: 4;
  margin: 0;
}

@media (max-width: 549px) {
  /* Thẻ chỉ còn ~260px: cột logo không còn chỗ, trả về xếp dọc như thẻ thường. */
  .eco-tier--1 .eco-node {
    display: flex;
    /* Trả align-items về stretch, nếu không mọi phần trong thẻ co lại bằng bề
       ngang chữ rồi nằm giữa — đường dẫn lệch hẳn so với các thẻ còn lại. */
    align-items: stretch;
    padding: var(--sp-6);
  }
  .eco-tier--1 .eco-node__head {
    display: flex;
  }
  .eco-tier--1 .eco-node__logo {
    --eco-logo-h: 88px;
    min-height: 0;
    height: var(--eco-logo-h);
    padding-right: 0;
    border-right: 0;
  }
  .eco-tier--1 .eco-node__id {
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-divider);
    text-align: center;
  }
  .eco-tier--1 .eco-node__name {
    font-size: 16px;
    line-height: 24px;
  }
  .eco-tier--1 .eco-node__text {
    margin: 0 0 var(--sp-5);
  }
  .eco-tier--1 .eco-node__meta,
  .eco-tier--1 .eco-node__empty {
    margin-top: 0;
  }
  .eco-tier--1 .eco-node__empty {
    text-align: center;
  }
  .eco-tier--1 .eco-node__link {
    margin: auto 0 0;
    padding-top: var(--sp-6);
  }
  .eco-node__logo {
    --eco-logo-h: 84px;
  }
}

/* ============================================================
   10. RESPONSIVE
   Khớp đúng 3 breakpoint đang dùng toàn site (tokens.css):
   1199px (laptop nhỏ) — 991px (tablet) — 767px (mobile).
   ============================================================ */

/* ---------- ≤ 1199px: laptop nhỏ / tablet ngang ---------- */
@media (max-width: 1199px) {
  .gt-section {
    padding-block: var(--sp-12);
  }
  .gt-section--tight {
    padding-block: var(--sp-10);
  }
  .gt-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gt-about,
  .gt-lead-grid {
    gap: var(--sp-8);
  }
  .gt-adv__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gt-cul__quote,
  .gt-pillars {
    padding: var(--sp-8) var(--sp-6);
  }
  .gt-cul__text {
    font-size: 19px;
    line-height: 31px;
  }
  .gt-fields--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gt-member {
    grid-template-columns: 160px 1fr;
  }
}

/* ---------- ≤ 991px: tablet dọc — chuyển hết về 1 cột ---------- */
@media (max-width: 991px) {
  .gt-about,
  .gt-lead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  /* Bỏ sticky khi đã xếp dọc: cột phải nằm dưới nên "dính" chỉ gây giật. */
  .gt-about__aside {
    position: static;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  /* Trên tablet, ảnh nhà máy và bảng hồ sơ đứng cạnh nhau cho đỡ dài trang. */
  .gt-figure img {
    aspect-ratio: var(--ar-project);
  }

  .gt-vm__grid,
  .gt-values,
  .gt-culture {
    grid-template-columns: minmax(0, 1fr);
  }
  .gt-values {
    gap: var(--sp-4);
  }
  .gt-value {
    padding: var(--sp-6);
  }

  /* Hai nửa của thẻ triết lý xếp dọc; ô trụ cột vẫn giữ 2 cột vì mỗi ô chỉ có
     một dòng nhãn và một dòng mô tả ngắn. */
  .gt-cul__top {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ba cột thành một cột: kẻ dọc chuyển thành kẻ ngang, ray ngang bỏ hẳn (vòng
     tròn giữ lại làm mốc từng nguyên tắc). */
  .gt-rules {
    --gt-rules-gap: var(--sp-6);
    --gt-rules-pad: var(--sp-6);
  }
  .gt-rules__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .gt-rule + .gt-rule {
    margin-top: var(--sp-8);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--c-divider);
  }
  .gt-rule + .gt-rule::before {
    display: none;
  }
  .gt-rule__node::after,
  .gt-rule:not(:last-child)::after {
    display: none;
  }
  .gt-rule__node {
    height: 16px;
    margin-bottom: var(--sp-5);
  }
  .gt-rule__node::before {
    left: 0;
  }
  .gt-culture__head {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  /* Cây hệ sinh thái: mọi cấp về một cột, bỏ thanh ngang, giữ đường nối dọc. */
  .eco-tree {
    padding: var(--sp-6);
  }
  .eco-tier--2 .eco-nodes,
  .eco-tier--3 .eco-nodes,
  .eco-tier--4 .eco-nodes {
    grid-template-columns: minmax(0, 1fr);
  }
  .eco-nodes::before {
    display: none;
  }
  /* Bỏ luôn chấm điểm rẽ: không còn thanh ngang thì không còn chỗ nào để rẽ. */
  .eco-node::before,
  .eco-tier:not(.eco-tier--1) .eco-node::after {
    display: none;
  }
  .eco-node + .eco-node {
    margin-top: 0;
  }
  /* Một cột thì không còn thẻ nào để thẳng hàng cùng — bỏ chỗ chừa hai dòng tên. */
  .eco-node__name {
    min-height: 0;
  }
  .gt-cluster,
  .gt-members {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- ≤ 767px: mobile ---------- */
@media (max-width: 767px) {
  .gt-section {
    padding-block: var(--sp-10);
  }
  .gt-section--tight {
    padding-block: var(--sp-8);
  }
  .gt-head {
    margin-bottom: var(--sp-6);
  }

  /* Dải số liệu: 2 cột, không đè lên hero nữa (hero mobile cao hơn nhiều,
     kéo âm sẽ che mất phụ đề). */
  .gt-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    border-radius: 0;
    border-inline: 0;
  }
  .gt-stat {
    padding: var(--sp-4) var(--sp-3);
  }

  .gt-toc__link {
    height: 48px;
    padding-inline: var(--sp-3);
  }

  .gt-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .gt-about__aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .gt-figure img {
    aspect-ratio: var(--ar-product);
  }

  /* Thư ngỏ: bỏ cột icon, dồn về 1 cột cho đỡ chật. */
  .gt-quote {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-top: var(--sp-8);
  }
  .gt-quote__text {
    font-size: 17px;
    line-height: 27px;
  }

  .gt-vm__card {
    padding: var(--sp-6);
  }
  .gt-vm__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .gt-adv {
    margin-top: var(--sp-8);
  }
  .gt-adv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .gt-value__num {
    font-size: 36px;
    top: var(--sp-4);
    right: var(--sp-5);
  }
  .gt-slogan {
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding: var(--sp-5);
  }
  .gt-slogan p {
    font-size: 17px;
    line-height: 26px;
  }

  .gt-cul__quote,
  .gt-pillars {
    padding: var(--sp-6) var(--sp-5);
  }
  .gt-rule__num {
    font-size: 36px;
  }
  .gt-rule__numwrap {
    min-width: 74px;
  }
  .gt-rule__icon {
    width: 48px;
    height: 48px;
  }
  .gt-rules__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
  }
  .gt-rules__strip span + span::before {
    display: none;
  }
  .gt-cul__text {
    font-size: 17px;
    line-height: 28px;
  }
  .gt-cul__quote::before {
    font-size: 72px;
    left: var(--sp-5);
  }
  .gt-pillars__list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Số thứ tự nhảy xuống hàng dưới để tiêu đề còn đủ chỗ. */
  .gt-culture__head {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .gt-culture__num {
    grid-column: 2;
    justify-self: start;
  }

  .gt-culture__card {
    padding: var(--sp-5);
  }
  .gt-org__item {
    grid-template-columns: 38px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .gt-org__icon {
    width: 38px;
    height: 38px;
  }

  .gt-fields--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Thẻ đơn vị thành viên: ảnh/khối icon lên trên, chữ xuống dưới. Giữ 2 cột ở
     bề ngang mobile thì cột chữ chỉ còn ~150px, tên công ty vỡ 5-6 dòng. */
  .gt-member {
    grid-template-columns: minmax(0, 1fr);
  }
  .gt-member__media img {
    aspect-ratio: var(--ar-project);
    height: auto;
  }
  .gt-member__glyph {
    min-height: 120px;
  }
  .gt-member__body {
    padding: var(--sp-5);
  }
  .gt-cluster__card {
    padding: var(--sp-5);
  }
}

/* ---------- Tôn trọng cấu hình giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  .gt-value,
  .gt-adv__item,
  .gt-field,
  .gt-org__item,
  .gt-cluster__card,
  .gt-cluster__more .icon,
  .gt-member {
    transition: none;
  }
  .gt-value:hover,
  .gt-adv__item:hover,
  .gt-cluster__card:hover {
    transform: none;
  }
  .gt-cluster__card:hover .gt-cluster__more .icon {
    transform: none;
  }
}

/* ============================================================
   THƯ VIỆN ẢNH HOẠT ĐỘNG (trang /gioi-thieu/van-hoa/)
   Ảnh nguồn cắt từ profile in nên tỉ lệ lệch nhau; ô cố định
   tỉ lệ 4/3 + object-fit:cover để hàng thẻ thẳng nhau.
   ============================================================ */

.gt-gallery__title {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}

.gt-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0 0 var(--sp-12);
  padding: 0;
}
.gt-gallery__item {
  margin: 0;
}
.gt-gallery__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gt-gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease);
}
.gt-gallery__link:hover img,
.gt-gallery__link:focus-visible img {
  transform: scale(1.04);
}
.gt-gallery__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-round);
  background: var(--c-cta);
  color: var(--c-white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gt-gallery__zoom .icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.gt-gallery__link:hover .gt-gallery__zoom,
.gt-gallery__link:focus-visible .gt-gallery__zoom {
  opacity: 1;
  transform: translateY(0);
}
.gt-gallery__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-secondary);
}

@media (max-width: 849px) {
  .gt-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 549px) {
  .gt-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-gallery__link img,
  .gt-gallery__zoom {
    transition: none;
  }
  .gt-gallery__link:hover img {
    transform: none;
  }
}

/* ============================================================
   TRIẾT LÝ KINH DOANH + HỆ THỐNG CHI NHÁNH
   Nguồn: Catalogue Phú Sơn Group 2026 tr.34
   ============================================================ */

.gt-philo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gt-philo__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-6);
  background: var(--c-brand-50);
  border-radius: var(--r-card);
}
/* .gt-philo__icon cũ (span bọc .icon) đã bỏ — markup nay dùng <img>. */
.gt-philo__vi {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.gt-philo__en {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-style: italic;
  color: var(--c-text-muted);
}

.gt-branch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.gt-branch__lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.gt-branch__lead b {
  color: var(--c-heading);
}
.gt-branch__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gt-branch__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  background: var(--c-brand-50);
  border-radius: var(--r-round);
}
.gt-branch__list .icon {
  width: 15px;
  height: 15px;
  color: var(--c-cta);
}

@media (max-width: 991px) {
  .gt-philo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 549px) {
  .gt-philo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sứ mệnh sinh tồn "Chất lượng - Giá cả - Uy tín" (Catalogue 2026 tr.2).
   Đặt giữa hai thẻ Tầm nhìn/Sứ mệnh và dải 5 lợi thế như bố cục bản in. */
.gt-motto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-cta);
  text-align: center;
}
.gt-motto i {
  font-style: normal;
  color: var(--c-border-strong);
  font-weight: var(--fw-regular);
}
@media (max-width: 549px) {
  .gt-motto { font-size: var(--fs-section-title); gap: var(--sp-3); }
}

/* Câu tiêu đề lớn trích nguyên văn từ hồ sơ in (profile tr.58-59). */
.gt-slogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin: var(--sp-12) 0 var(--sp-10);
  font-size: var(--fs-display);
  line-height: 1.15;
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  text-align: center;
}
.gt-slogan b {
  font-weight: var(--fw-extrabold);
  color: var(--c-cta);
}
.gt-slogan span {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Khối mạng lưới đại lý — bố cục theo catalogue tr.34: con số lớn bên trái,
   danh sách chi nhánh bên phải. Thay cho dòng chữ nhỏ trước đây. */
.gt-network {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-8);
  align-items: center;
  margin-top: var(--sp-10);
  padding: var(--sp-8);
  background: var(--c-brand-50);
  border-radius: var(--r-card);
}
.gt-network__figure {
  text-align: center;
}
.gt-network__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  font-size: clamp(56px, 8vw, 92px);
  line-height: 0.9;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  color: var(--c-cta);
}
.gt-network__num sup {
  font-size: 0.42em;
  line-height: 1;
  margin-top: 0.1em;
}
.gt-network__unit {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-heading);
}
.gt-network__lead {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.gt-network__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-muted);
}

@media (max-width: 767px) {
  .gt-network {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-6);
  }
  .gt-network__figure { text-align: left; }
  .gt-network__num { justify-content: flex-start; }
}

/* ============================================================
   BỔ SUNG THEO PROFILE 2025 (tr.4, tr.6, tr.7)
   - Thư ngỏ + chân dung giám đốc trong khung tròn viền kép
   - Ảnh tập thể CBCNV chiếm trọn bề ngang
   - Chuỗi 5 lợi thế dạng mắt xích nối nhau
   - Sơ đồ vòng tròn 3 giá trị cốt lõi
   ============================================================ */

/* ---------- Ảnh tập thể CBCNV (profile tr.6) ---------- */
.gt-team {
  margin: var(--sp-10) 0 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.gt-team img {
  display: block;
  width: 100%;
  height: auto;
}
.gt-team__caption {
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-heading);
  color: rgb(255 255 255 / 82%);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* ---------- Thư ngỏ (profile tr.4) ---------- */
.gt-letter {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}
.gt-letter__aside { text-align: center; }

/* Khung tròn viền kép cam - xanh của profile. Dùng hai vòng gradient chồng nhau
   qua padding + background-clip thay vì hai phần tử lồng, để ảnh vẫn là <img>
   thật (giữ alt và srcset) chứ không thành background. */
.gt-portrait {
  width: 260px;
  height: 260px;
  margin: 0 auto var(--sp-5);
  padding: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef7f1a 0%, #ef7f1a 45%, var(--c-cta) 55%, var(--c-cta) 100%);
}
.gt-portrait__frame {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--c-white);
}
/*
 * Ảnh gốc 2328x1404 chụp ngang cả bàn làm việc; cắt vuông mặc định sẽ lấy trọn
 * chiều cao nên bảng hiệu trên tường chiếm hết nửa khung tròn.
 * Khung mong muốn: ô vuông cạnh 0,62 chiều cao ảnh, tâm tại (44%, 60%).
 *   - object-position X 34,8% kéo cửa sổ cắt về đúng tâm ngang 1024px;
 *   - scale 1,61 = 1404/870 thu về đúng cạnh 870px;
 *   - transform-origin 50%/60% giữ tâm phóng đúng vào người.
 */
.gt-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34.8% center;
  transform-origin: 50% 60%;
  transform: scale(1.61);
}
/*
 * Khung nay là 4:3 chứ không còn 1:1 nên vùng cắt phải tính lại. Ảnh gốc
 * 2328x1404 phủ khung 4:3 sẽ lộ cửa sổ 1872x1404. Khung ngắm mong muốn là
 * 1071x803 quanh người, tâm (1024, 927):
 *   - object-position X 19% đưa cửa sổ nền về đúng tâm ngang 1024;
 *   - scale 1,75 = 1872/1071 thu về đúng bề rộng khung ngắm;
 *   - transform-origin 50%/66% hạ tâm phóng xuống mặt người, nếu để 59% như
 *     bản đầu thì khung dừng ở bảng hiệu trên tường và cắt mất đỉnh đầu.
 */
.gt-portrait .gt-portrait__frame img {
  object-position: 19% center;
  transform-origin: 50% 66%;
  transform: scale(1.75);
}
.gt-portrait__name {
  font-size: 21px;
  line-height: 30px;
  color: var(--c-text);
  margin-bottom: 2px;
}
.gt-portrait__name b { color: var(--c-cta); font-weight: var(--fw-bold); }
.gt-portrait__role {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-5);
}
.gt-portrait__role span { font-style: italic; color: var(--c-text-muted); }
.gt-portrait__quote {
  position: relative;
  margin: 0;
  padding-left: var(--sp-6);
  text-align: left;
  border: 0;
}
.gt-portrait__quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 46px;
  line-height: 1;
  color: var(--c-cta);
  font-family: Georgia, serif;
}
.gt-portrait__quote p {
  font-size: var(--fs-small);
  line-height: 1.6;
  font-style: italic;
  color: var(--c-text-secondary);
  margin: 0;
}

.gt-letter__eyebrow { color: var(--c-cta); }
.gt-letter__text { margin-top: var(--sp-5); }
.gt-letter__text p {
  font-size: 17px;
  line-height: 30px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.gt-letter__text b { color: var(--c-heading); font-weight: var(--fw-semibold); }
.gt-letter__mission { margin-bottom: var(--sp-3) !important; }
.gt-letter__motto {
  font-size: 26px;
  line-height: 34px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-6);
}
.gt-letter__motto i { font-style: normal; margin: 0 8px; opacity: 0.5; }
.gt-letter__sign {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.gt-letter__sign span {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  margin-left: 8px;
}
.gt-letter__foot {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

/* ---------- Nhãn tiếng Anh cho Tầm nhìn / Sứ mệnh ---------- */
.gt-vm__en {
  display: inline-block;
  margin-left: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
  vertical-align: middle;
}

/* ---------- Chuỗi 5 lợi thế (profile tr.7) ---------- */
.gt-adv__chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-adv__link {
  position: relative;
  margin: 0;
  padding-top: 20px;
}
/* Mắt xích: dấu nối giữa hai ô, vẽ bằng ::after của ô trước để không cần thẻ rỗng. */
.gt-adv__link:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% + 10px);
  right: calc(var(--sp-5) * -1);
  width: var(--sp-5);
  height: 2px;
  background: repeating-linear-gradient(to right, var(--c-cta) 0 4px, transparent 4px 8px);
}
.gt-adv__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: var(--c-cta);
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  margin-bottom: 0;
}
.gt-adv__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  border: 2px solid var(--c-cta);
  border-radius: 22px;
  background: rgb(2 20 42 / 45%);
  text-align: center;
  transition: background var(--dur-normal) var(--ease);
}
.gt-adv__link:hover .gt-adv__box { background: rgb(2 116 57 / 30%); }
.gt-adv__en {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.45;
  font-style: italic;
  color: rgb(255 255 255 / 58%);
}

/* ---------- Sơ đồ vòng tròn 3 giá trị cốt lõi (profile tr.7) ---------- */
/* ĐỔI TÊN .gt-ring -> .gt-cvring ngày 20/08/2026. Khối này trùng tên với vòng giá
   trị 128px của trang /gioi-thieu/van-hoa/ (.gt-rings > .gt-ring, khai ở ~dòng 764)
   và vì nằm SAU trong cùng file nên nó thắng: 4 huy hiệu tròn của trang Văn hóa bị
   kéo thành 4 khung 500x500 kèm nền SVG mũi tên, tràn ra ngoài khung xanh; ở khổ
   <=549px còn bị display:none nên biến mất hẳn.
   Hiện KHÔNG markup nào dùng khối này (đã tra template PHP, post_content và option
   — 0 kết quả). Giữ lại vì phần toạ độ nút ăn khớp với deco-vong-gia-tri.svg, dựng
   lại sẽ mất công; muốn gọn file thì xoá cả cụm .gt-cvring* là an toàn. */
/* Hình học: 3 nút đặt trên đường tròn bán kính 170 quanh tâm (250,250) của
   khung 500x500, ở các góc 0° / 120° / 240° tính theo chiều kim đồng hồ.
   File deco-vong-gia-tri.svg vẽ 3 cung mũi tên nối chúng theo ĐÚNG hệ toạ độ
   đó — đổi kích thước khung hay bán kính thì phải sinh lại file SVG. */
.gt-cvring {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto var(--sp-8);
  background: url("/wp-content/uploads/2026/07/deco-vong-gia-tri.svg") center / contain no-repeat;
}
.gt-cvring__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--c-white);
  border: 3px solid var(--c-cta);
  box-shadow: var(--sh-card);
  z-index: 1;
}
.gt-cvring__hub img { width: 88px; height: auto; }
.gt-cvring__node {
  position: absolute;
  display: grid;
  place-content: center;
  gap: 2px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--c-cta);
  color: var(--c-white);
  text-align: center;
  padding: var(--sp-3);
}
/* left/top = tâm nút trừ nửa đường kính (78). Tâm: 0°=(250,80),
   120°=(397,335), 240°=(103,335). */
.gt-cvring__node--1 { left: 172px; top: 2px; }
.gt-cvring__node--2 { left: 319px; top: 257px; }
.gt-cvring__node--3 { left: 25px; top: 257px; }
.gt-cvring__node b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #ef7f1a;
  font-size: 13px;
  line-height: 1;
}
.gt-cvring__vi {
  font-size: var(--fs-card-title);
  line-height: 20px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.gt-cvring__en {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgb(255 255 255 / 72%);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 1099px) {
  .gt-adv__chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-6); }
  /* Xuống 3 cột thì dấu nối ngang không còn đúng mạch, bỏ đi. */
  .gt-adv__link:not(:last-child)::after { display: none; }
}
@media (max-width: 849px) {
  .gt-letter { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .gt-letter__aside { max-width: 420px; margin: 0 auto; }
  .gt-adv__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Thu nhỏ bằng transform chứ không đổi width: mọi toạ độ nút và file SVG mũi
     tên đều tính theo khung 500px, sửa từng con số sẽ lệch mạch ngay. */
  .gt-cvring {
    transform: scale(0.72);
    transform-origin: top center;
    margin-bottom: calc(var(--sp-8) - 140px);
  }
}
@media (max-width: 549px) {
  .gt-adv__chain { grid-template-columns: minmax(0, 1fr); }
  .gt-letter__motto { font-size: 21px; line-height: 30px; }
  .gt-portrait { width: 210px; height: 210px; }
  /* Dưới khổ này vòng tròn bị bóp còn quá nhỏ để đọc chữ bên trong — ẩn sơ đồ,
     ba thẻ giá trị ngay dưới đã nói đủ nội dung. */
  .gt-cvring { display: none; }
}

/* ============================================================
   BỐ CỤC MỚI PHẦN ĐẦU TRANG GIỚI THIỆU
   Hero có CTA · dải 4 số liệu · câu chuyện thương hiệu · hệ sinh
   thái 4 lĩnh vực · thẻ hồ sơ doanh nghiệp toàn chiều ngang.
   Khối này nằm CUỐI file nên đè lên các rule cùng tên phía trên.
   ============================================================ */

/* ---------- Hero ---------- */
.gt-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: var(--sp-3);
}
/* Gạch ngang dẫn trước chữ — cùng ngôn ngữ với .gt-eyebrow ở thân trang. */
.gt-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.gt-hero__title {
  /* 15ch cũ bó tiêu đề còn 344px trong khi dòng mô tả dưới nó rộng ~590px,
     nhìn như hai khối lệch nhau. Đặt theo px để tiêu đề vắt đúng 2 dòng
     ("...vật liệu" / "công nghiệp bền vững") như bản thiết kế. */
  max-width: 660px;
  font-size: 42px;
  line-height: 52px;
  text-wrap: balance;
}
/* 46ch để "kho lạnh" không bị tách đôi qua hai dòng; rộng hơn nữa là chữ
   "kho" rơi lại cuối dòng trên. */
.gt-hero__sub { max-width: 46ch; }
.gt-hero__cta { margin-top: var(--sp-6); }
/* Đặt tên lớp riêng, KHÔNG dùng .btn: Flatsome có bộ rule .btn riêng nạp sau
   main.css của theme con, nó ghi đè border/border-radius/padding nên nút ghost
   trên ảnh hero bị trả về nút trắng bo 3px. */
.gt-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-6);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--r-round);
  background: rgb(255 255 255 / 10%);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  backdrop-filter: blur(2px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gt-hero__btn:hover {
  background: rgb(255 255 255 / 20%);
  border-color: var(--c-white);
  color: var(--c-white);
}
.gt-hero__btn .icon { width: 16px; height: 16px; }

/* ---------- Dải 4 số liệu ---------- */
.gt-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--c-white);
  margin-top: -58px;
  padding: var(--sp-2) 0;
}
/* Vạch ngăn bằng border thay vì khe gap 1px trên nền xám: 4 ô một hàng thì
   khe nền chạy suốt từ trên xuống dưới thẻ, trông như thẻ bị cắt rời. */
.gt-stat { padding: var(--sp-5) var(--sp-4); }
.gt-stat + .gt-stat { border-left: 1px solid var(--c-divider); }
.gt-stat__icon { width: 30px; height: 30px; color: var(--c-cta); }

/* ---------- Câu chuyện thương hiệu ---------- */
.gt-about { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
/* Bỏ sticky: cột phải nay ngắn hơn cột chữ nên bám cuộn sẽ tạo khoảng trống
   lớn dưới ảnh thay vì tiết kiệm chỗ như bố cục cũ. */
.gt-about__aside { position: static; gap: var(--sp-4); align-content: start; }
.gt-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(to top, rgb(8 58 110 / 92%), rgb(8 58 110 / 0%));
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.gt-figure { position: relative; }

.gt-reach {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-reach__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.gt-reach__item .icon { width: 26px; height: 26px; flex: none; color: var(--c-cta); }
.gt-reach__item b {
  display: block;
  font-size: 24px;
  line-height: 30px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-brand-900);
}
.gt-reach__item span span {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ---------- Hệ sinh thái: 4 lĩnh vực ---------- */
.gt-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-field {
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.gt-field + .gt-field { border-left: 1px solid var(--c-divider); }
.gt-field:hover { border-color: transparent; box-shadow: none; background: var(--c-brand-50); }
/* Phải viết .gt-field .gt-field__icon: rule .gt-field .icon ở đầu file có độ
   đặc hiệu 0,2,0, cao hơn .gt-field__icon một mình nên icon vẫn bị ép về 22px. */
.gt-field .gt-field__icon { width: 30px; height: 30px; }
.gt-field__title { font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: var(--fw-bold); margin-bottom: 0; }
.gt-field__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-secondary); }
/* Mũi tên đẩy xuống đáy để 4 thẻ có chân bằng nhau dù mô tả dài ngắn khác nhau. */
.gt-field__more {
  margin-top: auto;
  color: var(--c-cta);
  transition: transform var(--dur-fast) var(--ease);
}
.gt-field__more .icon { width: 18px; height: 18px; }
.gt-field:hover .gt-field__more { transform: translateX(3px); }

/* ---------- Thẻ hồ sơ doanh nghiệp ---------- */
.gt-profile { margin-top: var(--sp-6); padding: 0; overflow: hidden; }
.gt-profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-divider);
}
.gt-profile__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: 0;
  text-transform: none;
  padding-bottom: 0;
  margin-bottom: 2px;
  border-bottom: 0;
}
.gt-profile__sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
  margin: 0;
}
/* Cùng lý do như .gt-hero__btn — tránh hẳn tên lớp .btn. */
.gt-profile__dl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  border: 1px solid var(--c-cta);
  border-radius: var(--r-round);
  background: var(--c-white);
  color: var(--c-cta);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gt-profile__dl:hover { background: var(--c-cta); color: var(--c-white); }
.gt-profile__dl .icon { width: 16px; height: 16px; }

/* Lưới 3 cột, vạch ngăn liền mạch: dùng gap 1px trên nền viền để không phải
   tính border cho từng ô theo vị trí hàng/cột. */
.gt-profile__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-divider);
}
.gt-profile__item {
  align-items: flex-start;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
}
/* 7 mục trên lưới 3 cột (hoặc 2 cột ở tablet) luôn thừa ô ở hàng cuối, và vì
   vạch ngăn dựng bằng gap trên nền màu nên ô thừa hiện ra thành mảng xám.
   Cho mục cuối chiếm trọn hàng là hết, không phụ thuộc số cột. */
.gt-profile__item:last-child { grid-column: 1 / -1; }
.gt-profile__item .icon { color: var(--c-brand-600); }

@media (max-width: 1099px) {
  .gt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-field:nth-child(odd) { border-left: 0; }
  .gt-field:nth-child(n + 3) { border-top: 1px solid var(--c-divider); }
  .gt-profile__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 849px) {
  .gt-about { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .gt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -32px; }
  .gt-stat:nth-child(odd) { border-left: 0; }
  .gt-stat:nth-child(n + 3) { border-top: 1px solid var(--c-divider); }
}
@media (max-width: 549px) {
  .gt-fields { grid-template-columns: minmax(0, 1fr); }
  .gt-field { border-left: 0 !important; }
  .gt-field + .gt-field { border-top: 1px solid var(--c-divider); }
  .gt-profile__list { grid-template-columns: minmax(0, 1fr); }
  .gt-reach { grid-template-columns: minmax(0, 1fr); }
  .gt-hero__cta .gt-hero__btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   MÀU CHỮ & CỠ ICON — soát lại theo bản thiết kế
   ------------------------------------------------------------ */

/* Nhãn eyebrow: bản thiết kế dùng XANH LÁ (màu CTA) cho mọi mục, không phải
   xanh dương. Riêng mục nằm trên nền navy đậm (.gt-vm) dùng xanh lá sáng để
   còn đọc được. */
.gt-page .gt-eyebrow { color: var(--c-cta); }
/* Khối .gt-vm nay là nền SÁNG nên eyebrow dùng xanh CTA như mọi mục khác.
   Xanh nhạt #6ee7a8 là màu của bản nền navy cũ, để lại thì chữ bạc trắng ra. */
.gt-page .gt-vm .gt-eyebrow { color: var(--c-cta); }
/* "Câu chuyện thương hiệu" nằm trong .gt-about__body, bị rule đặt màu cho <p>
   của khối đó (độ đặc hiệu 0,2,1) kéo về xám. Nâng độ đặc hiệu để thắng lại. */
.gt-page .gt-about__body .gt-eyebrow { color: var(--c-cta); }

/* Liên kết mũi tên trong trang này dùng xanh lá theo thiết kế; các trang khác
   vẫn giữ xanh dương của .link-arrow gốc. */
.gt-page .link-arrow { color: var(--c-cta); }
.gt-page .link-arrow:hover { color: var(--c-cta-hover); }

/* Cỡ icon — bản cũ nhiều chỗ để 13-16px, nhỏ hơn hẳn thiết kế và khó nhận
   dạng hình. Nâng lên mức đọc được, giữ nguyên những chỗ vốn đã đủ lớn
   (số liệu 30px, độ phủ 26px, giá trị cốt lõi 27px). */
.gt-page .gt-profile__item .icon { width: 19px; height: 19px; }
.gt-page .link-arrow .icon { width: 17px; height: 17px; }
.gt-page .gt-cluster__more .icon { width: 18px; height: 18px; }
.gt-page .breadcrumb .icon { width: 15px; height: 15px; }
.gt-page .dt-country .icon { width: 17px; height: 17px; }

@media (max-width: 849px) {
  .gt-hero__title { font-size: 32px; line-height: 40px; }
}
@media (max-width: 549px) {
  .gt-hero__title { font-size: 27px; line-height: 35px; }
}
/* Icon địa điểm chi nhánh vẫn ở 15px, nâng cho dễ nhận. */
.gt-page .gt-branch__list .icon { width: 17px; height: 17px; }

/* ============================================================
   ĐỊNH HƯỚNG PHÁT TRIỂN — bản thiết kế mới
   Đổi hẳn từ dải nền navy đậm sang nền sáng: ảnh nhà máy thành thẻ
   bên trái, Tầm nhìn / Sứ mệnh thành hai thẻ trắng bên phải, 5 lợi
   thế thành một thẻ 5 cột có tranh minh hoạ.
   Khối nằm CUỐI file nên đè các rule .gt-vm* phía trên.
   ============================================================ */

.gt-vm {
  background: var(--c-surface-subtle);
  color: var(--c-text);
}
/* Ảnh nền mờ của bản navy cũ — bỏ hẳn, nền sáng không cần lớp phủ nào. */
.gt-vm::before { content: none; }
.gt-vm .gt-title { color: var(--c-heading); }
.gt-vm .gt-title i { font-style: normal; margin: 0 10px; color: var(--c-cta); }
.gt-vm .gt-lead { color: var(--c-text-secondary); }

.gt-vm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
  margin-bottom: var(--sp-10);
}

/* ---------- Thẻ ảnh + phương châm ---------- */
.gt-vm__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 430px;
}
.gt-vm__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gt-vm__motto {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--sp-8) var(--sp-8);
  /* Phần chứa chữ phủ navy gần đặc rồi mới tan dần lên trên. Bản đầu để dải
     chuyển kéo dài tới 100% nên chữ nằm trên vùng ảnh còn sáng, đọc không ra. */
  background: linear-gradient(to top, rgb(4 26 52 / 97%) 0%, rgb(4 26 52 / 96%) 74%, rgb(4 26 52 / 0%) 100%);
  padding-top: 110px;
  color: var(--c-white);
}
.gt-vm__motto-label {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 88%);
  margin-bottom: var(--sp-3);
}
.gt-vm__motto-main {
  display: block;
  font-size: 32px;
  line-height: 42px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.gt-vm__motto-main i { font-style: normal; margin: 0 8px; color: #6ee7a8; }
/* Gạch xanh ngăn phương châm với dòng chú giải. */
.gt-vm__motto-note {
  display: block;
  position: relative;
  padding-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgb(255 255 255 / 76%);
}
.gt-vm__motto-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: #6ee7a8;
}

/* ---------- Hai thẻ Tầm nhìn / Sứ mệnh ---------- */
.gt-vm__cards {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-6);
  min-height: 0;
}
.gt-vm__card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--sp-5);
  /* align-items:start để icon thẳng hàng với dòng nhãn "TẦM NHÌN" như bản thiết
     kế. align-content:center của bản trước đẩy icon xuống giữa thẻ, lệch hẳn
     khỏi khối chữ bên cạnh. */
  align-items: start;
  align-content: center;
  overflow: hidden;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: none;
}
/* Số thứ tự cỡ lớn làm nền ở mép phải. Chỉ là nét viền rất nhạt nên không
   tranh chỗ với chữ, và aria-hidden vì nó không mang thông tin. */
/*
 * Số thứ tự phải NHÌN THẤY rõ, không phải một vệt mờ nấp sau chữ. Vì vậy nó có
 * chỗ riêng bên phải (padding-right 104px) và nét đậm hơn hẳn bản trước
 * (1,5px/10% -> 2,5px/22%).
 *
 * Chỗ trống cho số chỉ chừa ở ĐOẠN THÂN (.gt-vm__text), không chừa ở cả thẻ.
 * Chừa cả thẻ thì tiêu đề cũng bị bóp theo và vỡ hai dòng ở khổ 1280; tiêu đề vốn
 * ngắn nên nó gần như không bao giờ chạm tới số, mà có chạm thì số nằm dưới
 * (z-index 0) nên vẫn đọc bình thường.
 */
.gt-vm__card { padding-right: var(--sp-8); }
.gt-vm__text { padding-right: 92px; }
.gt-vm__card > div { position: relative; z-index: 1; }
/* ============================================================
   SỐ THỨ TỰ ĐÁNH BẰNG BỘ ĐẾM CSS
   Trong UX Builder mỗi thẻ con được render bằng một lời gọi riêng nên PHP không
   biết thẻ đang đứng thứ mấy (xem CMS_Helpers::uxbChildSlot). Để CSS đếm thì số
   luôn đúng ở cả frontend lẫn trình dựng trang, và tự đánh lại ngay khi kéo đổi
   thứ tự mà không phải tải lại trang.
   ============================================================ */
.gt-vm__cards { counter-reset: gt-vm; }
.gt-vm__card { counter-increment: gt-vm; }
.gt-vm__num::before { content: counter(gt-vm, decimal-leading-zero); }

.gt-adv__grid { counter-reset: gt-adv; }
.gt-adv__item { counter-increment: gt-adv; }
.gt-adv__num::before { content: counter(gt-adv, decimal-leading-zero); }

.gt-philo__grid { counter-reset: gt-philo; }
.gt-philo__item { counter-increment: gt-philo; }
.gt-philo__num::before { content: counter(gt-philo, decimal-leading-zero); }

.gt-values__list { counter-reset: gt-value; }
.gt-value { counter-increment: gt-value; }
.gt-value__num::before { content: counter(gt-value, decimal-leading-zero); }
/* Dòng kicker in lại chính con số đó rồi mới tới dấu chấm giữa và chữ "Giá trị". */
.gt-value__kicker::before { content: counter(gt-value, decimal-leading-zero) " "; }

.gt-cluster { counter-reset: gt-cluster; }
.gt-cluster__card { counter-increment: gt-cluster; }
.gt-cluster__num::before { content: counter(gt-cluster, decimal-leading-zero); }

.gt-vm__num {
  position: absolute;
  z-index: 0;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 78px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2.5px rgb(8 58 110 / 22%);
  pointer-events: none;
  user-select: none;
}
.gt-vm__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--c-cta-soft);
  margin-bottom: 0;
}
.gt-vm__icon img { width: 42px; height: 42px; object-fit: contain; }
.gt-vm__kicker {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: 6px;
}
.gt-vm__title {
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-vm__text {
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--c-text-secondary);
}
.gt-vm__text b { color: var(--c-heading); font-weight: var(--fw-semibold); }

/* ---------- 5 lợi thế ---------- */
.gt-adv { margin-top: 0; }
.gt-adv__head { margin-bottom: var(--sp-6); }
.gt-adv__title {
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.gt-adv__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  overflow: hidden;
}
.gt-adv__item {
  position: relative;
  margin: 0;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  text-align: center;
}
.gt-adv__item + .gt-adv__item { border-left: 1px solid var(--c-divider); }
.gt-adv__num {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-cta);
  color: var(--c-white);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
}
/* Bộ icon PNG mới là ô vuông 256x256 (bộ SVG cũ tỉ lệ 64x56). Đặt khung vuông
   để 5 icon cùng chiếm một khoảng như nhau, khỏi cái cao cái thấp. */
.gt-adv__icon {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin: 0 auto var(--sp-4);
}
.gt-adv__name {
  font-size: var(--fs-card-title);
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-adv__desc {
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--c-text-muted);
}

@media (max-width: 1099px) {
  .gt-vm__grid { grid-template-columns: minmax(0, 1fr); }
  .gt-vm__figure { min-height: 320px; }
  .gt-vm__num { font-size: 74px; }
  .gt-adv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gt-adv__item:nth-child(3n + 1) { border-left: 0; }
  .gt-adv__item:nth-child(n + 4) { border-top: 1px solid var(--c-divider); }
}
@media (max-width: 767px) {
  .gt-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-adv__item { border-left: 0 !important; }
  .gt-adv__item:nth-child(even) { border-left: 1px solid var(--c-divider) !important; }
  .gt-adv__item:nth-child(n + 3) { border-top: 1px solid var(--c-divider); }
  .gt-vm__motto-main { font-size: 26px; line-height: 34px; }
}
@media (max-width: 549px) {
  .gt-vm__card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
  .gt-vm__num { font-size: 52px; right: var(--sp-4); }
  /* Thẻ chỉ còn 271px: giữ lề 92px là đoạn văn mất một phần ba bề rộng, chữ vỡ
     vụn. Thu lề theo cỡ số đã nhỏ lại ở khổ này. */
  .gt-vm__text { padding-right: 56px; }
  .gt-adv__grid { grid-template-columns: minmax(0, 1fr); }
  .gt-adv__item { border-left: 0 !important; }
  .gt-adv__item + .gt-adv__item { border-top: 1px solid var(--c-divider); }
  .gt-vm__motto { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .gt-vm__motto-main { font-size: 23px; line-height: 31px; }
}

/* ============================================================
   TRIẾT LÝ KINH DOANH — bản thiết kế mới
   Thẻ navy chứa phương châm + lưới 2x2 bốn mệnh đề, dưới là dải
   mạng lưới phân phối ba phần. Khối nằm CUỐI file nên đè các rule
   .gt-philo* / .gt-network* phía trên.
   ============================================================ */

.gt-philo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--sp-6);
  align-items: stretch;
  margin-bottom: var(--sp-6);
}

/* ---------- Thẻ phương châm ---------- */
.gt-motto-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: var(--sp-8);
  display: flex;
  align-items: center;
  border-radius: var(--r-card);
  background: var(--c-brand-900);
  color: var(--c-white);
}
/* Hình tuyến vận chuyển mờ ở nửa phải — dùng lại chính icon xe phân phối, phóng
   to và hạ độ mờ, khỏi phải thêm một file trang trí riêng. */
.gt-motto-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -18px;
  width: 260px;
  height: 260px;
  background: url("/wp-content/uploads/2026/07/tl-xe-phan-phoi.png") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.gt-motto-card figcaption { position: relative; z-index: 1; }
.gt-motto-card__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: var(--sp-5);
}
/* Dấu nháy mở cỡ lớn đặt bằng ::before để không phải nhét ký tự vào HTML —
   nó là hình trang trí, trình đọc màn hình bỏ qua được. */
.gt-motto-card__quote {
  position: relative;
  padding-top: var(--sp-8);
  font-size: 38px;
  line-height: 50px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}
.gt-motto-card__quote::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 0;
  font-family: Georgia, serif;
  font-size: 76px;
  line-height: 1;
  color: #6ee7a8;
}
.gt-motto-card__note {
  position: relative;
  padding-bottom: var(--sp-6);
  font-size: var(--fs-body);
  line-height: 28px;
  color: rgb(255 255 255 / 80%);
}
.gt-motto-card__note::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78px;
  height: 3px;
  border-radius: 3px;
  background: #6ee7a8;
}

/* ---------- Lưới 4 mệnh đề ---------- */
.gt-philo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-philo__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  text-align: left;
  transition: border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.gt-philo__item:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-card); }
/* Số và icon cùng một hàng: số neo trái, icon đẩy vào giữa phần còn lại để bốn
   thẻ nhìn cân dù icon rộng hẹp khác nhau. */
.gt-philo__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
}
.gt-philo__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-cta);
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
}
.gt-philo__icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  justify-self: center;
}
.gt-philo__vi {
  display: block;
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}

/* ---------- Dải mạng lưới phân phối ---------- */
.gt-network {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 1fr;
  gap: 0;
  align-items: center;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gt-network > * { padding: var(--sp-8) var(--sp-6); }
.gt-network__route,
.gt-network__export { border-left: 1px solid var(--c-border); }

.gt-network__figure { text-align: center; }
.gt-network__num {
  font-size: 58px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.gt-network__num sup { font-size: 0.55em; top: -0.45em; }
.gt-network__unit {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: 6px;
}
.gt-network__sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

.gt-network__title {
  font-size: var(--fs-card-title);
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-5);
  text-align: center;
}

/* Tuyến đường: các chặng chia đều, vạch đứt nối giữa hai chặng vẽ bằng ::after
   của chặng trước — không cần thẻ rỗng và tự co giãn theo bề ngang. */
.gt-route {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-route > li {
  position: relative;
  flex: 1;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}
.gt-route > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--c-cta) 0 6px, transparent 6px 12px);
}
.gt-route img { position: relative; z-index: 1; width: 30px; height: 30px; object-fit: contain; }
.gt-route span {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  text-align: center;
}
.gt-route__end .icon { width: 20px; height: 20px; color: var(--c-cta); margin-top: 5px; }

.gt-network__export {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}
.gt-network__export .gt-network__title { text-align: left; margin-bottom: 6px; }
.gt-network__globe { width: 66px; height: 66px; object-fit: contain; }
.gt-network__note {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-3);
}

@media (max-width: 1099px) {
  .gt-philo { grid-template-columns: minmax(0, 1fr); }
  .gt-network { grid-template-columns: minmax(0, 1fr); }
  .gt-network__route,
  .gt-network__export { border-left: 0; border-top: 1px solid var(--c-border); }
  .gt-motto-card__quote { font-size: 32px; line-height: 42px; }
}
@media (max-width: 599px) {
  .gt-philo__grid { grid-template-columns: minmax(0, 1fr); }
  .gt-motto-card { padding: var(--sp-6); }
  .gt-motto-card__quote { font-size: 27px; line-height: 36px; }
  .gt-network > * { padding: var(--sp-6) var(--sp-5); }
  .gt-network__num { font-size: 46px; }
  /* Ba chặng ở khổ hẹp: bỏ vạch nối, xếp dọc cho tên thành phố không dính nhau. */
  .gt-route { flex-direction: column; gap: var(--sp-4); }
  .gt-route > li:not(:last-child)::after { display: none; }
  .gt-network__export { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .gt-philo__item { transition: none; }
}

/* ============================================================
   GIÁ TRỊ CỐT LÕI — bản thiết kế mới
   Thẻ chia đôi: nửa navy mang slogan, nửa trắng là ba dòng giá trị.
   Khối nằm CUỐI file nên đè các rule .gt-value* / .gt-values phía trên.
   ============================================================ */

.gt-values {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}

/* ---------- Nửa navy ---------- */
.gt-values__aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-10) var(--sp-8);
  background: var(--c-brand-900);
  color: var(--c-white);
}
/* Viên kim cương mờ ở góc trên phải — dùng lại icon-gem của theme qua mask nên
   không phải thêm file trang trí nào. */
.gt-values__aside::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 34px;
  width: 132px;
  height: 132px;
  background: rgb(255 255 255 / 8%);
  -webkit-mask: url("/wp-content/uploads/2026/07/icon-gem.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/07/icon-gem.svg") center / contain no-repeat;
  pointer-events: none;
}
.gt-values__aside > * { position: relative; z-index: 1; }

.gt-values__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7a8;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 3px solid #6ee7a8;
  /* Gạch dưới chỉ dài bằng một đoạn, không kéo hết cột. */
  width: fit-content;
  padding-right: var(--sp-10);
}
.gt-values__slogan {
  font-size: 34px;
  line-height: 48px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}
.gt-values__note {
  font-size: var(--fs-small);
  line-height: 26px;
  color: rgb(255 255 255 / 76%);
  margin-bottom: var(--sp-8);
}

/* Ba nhãn nối nhau bằng vạch ngang, vẽ bằng ::after của nhãn trước. */
.gt-values__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-values__chips li {
  position: relative;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgb(110 231 168 / 55%);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  white-space: nowrap;
}
.gt-values__chips li:not(:last-child) { margin-right: 30px; }
.gt-values__chips li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 30px;
  height: 1px;
  background: rgb(110 231 168 / 55%);
}

/* ---------- Nửa trắng: ba dòng giá trị ---------- */
.gt-values__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-value {
  display: grid;
  grid-template-columns: 96px 84px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  margin: 0;
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-6);
  /* Bỏ mọi thứ của bản thẻ cũ: nay là dòng trong một thẻ chung, không phải thẻ rời. */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.gt-value + .gt-value { border-top: 1px solid var(--c-divider); }
.gt-value:hover { transform: none; box-shadow: none; }

.gt-value__num {
  position: static;
  font-size: 58px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--c-border-strong);
  text-align: center;
}
.gt-value__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: var(--c-cta-soft);
  border: 1px solid rgb(2 116 57 / 14%);
}
.gt-value__icon img { width: 48px; height: 48px; object-fit: contain; }

/* Nhãn "01 · GIÁ TRỊ" kèm vạch xanh chạy tới hết dòng bên phải. */
.gt-value__kicker {
  display: flex;
  align-items: center;
  /* 8px: gap 16px của bản trước đẩy "01", dấu chấm và "GIÁ TRỊ" rời hẳn nhau,
     đọc thành ba mảnh chứ không phải một nhãn. */
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-2);
}
.gt-value__kicker i { font-style: normal; opacity: 0.6; }
.gt-value__kicker::after {
  content: "";
  flex: 1;
  /* 3px chứ không phải 2px: vạch 2px rơi vào toạ độ lẻ nên trình duyệt khử răng
     cưa mỗi dòng một kiểu, dòng 02 nhìn mảnh hơn hai dòng kia. */
  height: 3px;
  background: var(--c-cta);
  max-width: 74px;
  margin-left: auto;
}
.gt-value__title {
  font-size: 23px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-value__text {
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--c-text-secondary);
}

@media (max-width: 1099px) {
  .gt-values { grid-template-columns: minmax(0, 1fr); }
  .gt-values__aside { padding: var(--sp-8); }
  .gt-values__slogan { font-size: 28px; line-height: 40px; }
  .gt-value { grid-template-columns: 74px 72px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-6); }
  .gt-value__num { font-size: 46px; }
  .gt-value__icon { width: 72px; height: 72px; }
}
@media (max-width: 599px) {
  /* Số cỡ lớn chiếm gần một phần ba bề ngang ở khổ này mà không mang thông tin
     gì thêm — ẩn đi, nhãn "01 · GIÁ TRỊ" đã nói đủ thứ tự. */
  .gt-value { grid-template-columns: 62px minmax(0, 1fr); }
  .gt-value__num { display: none; }
  .gt-value__icon { width: 62px; height: 62px; border-radius: 14px; }
  .gt-value__icon img { width: 32px; height: 32px; }
  .gt-values__slogan { font-size: 24px; line-height: 34px; }
  .gt-values__chips li:not(:last-child) { margin-right: 14px; }
  .gt-values__chips li:not(:last-child)::after { width: 14px; }
  .gt-value__title { font-size: 20px; line-height: 28px; }
}

/* ============================================================
   THƯ NGỎ — bản thiết kế mới
   Một thẻ trắng: cột navy chứa chân dung bên trái, toàn văn lá thư
   bên phải, dải "Định hướng điều hành" + 2 nút chạy dưới đáy.
   Khối nằm CUỐI file nên đè các rule .gt-letter* / .gt-portrait*
   phía trên.
   ============================================================ */

.gt-letter {
  /* display:block BẮT BUỘC: rule .gt-letter cũ là grid 2 cột (340px | 1fr). Không
     đặt lại thì .gt-letter__main và .gt-letter__foot bị xếp thành hai CỘT cạnh
     nhau, cột thư co còn vài chục pixel và chữ vỡ mỗi dòng một từ. */
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gt-letter__main {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

/* ---------- Cột navy: chân dung ---------- */
.gt-letter__aside {
  max-width: none;
  margin: 0;
  padding: var(--sp-8);
  background: var(--c-brand-900);
  color: var(--c-white);
  text-align: left;
}
/* Khung ảnh chữ nhật bo góc viền xanh — bản trước là khung TRÒN viền kép
   cam/xanh theo profile in; bản thiết kế mới dùng khung chữ nhật. */
.gt-portrait {
  width: 100%;
  height: auto;
  margin: 0 0 var(--sp-5);
  padding: 6px;
  border-radius: 12px;
  background: none;
  border: 2px solid #6ee7a8;
}
.gt-portrait__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  overflow: hidden;
  border: 0;
}
.gt-portrait__name {
  font-size: 23px;
  line-height: 32px;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-bottom: 2px;
}
.gt-portrait__name b { color: #6ee7a8; font-weight: var(--fw-bold); }
.gt-portrait__role {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgb(255 255 255 / 72%);
  margin-bottom: var(--sp-6);
}
.gt-portrait__quote { padding-left: var(--sp-6); text-align: left; }
.gt-portrait__quote::before {
  content: "\201C";
  top: -4px;
  font-size: 40px;
  color: #6ee7a8;
}
.gt-portrait__quote p {
  font-size: var(--fs-small);
  line-height: 25px;
  font-style: italic;
  color: rgb(255 255 255 / 82%);
}

/* ---------- Cột trắng: lá thư ---------- */
.gt-letter__body { padding: var(--sp-8) var(--sp-10); }
/* Nhãn nhỏ có gạch xanh dẫn dưới — dùng chung cho "Thư ngỏ" và
   "Định hướng điều hành" ở dải chân thẻ. */
.gt-letter__eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cta);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--c-cta);
}
.gt-letter__text { margin-top: 0; }
.gt-letter__text p {
  font-size: var(--fs-body);
  line-height: 30px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-5);
}
.gt-letter__text b { color: var(--c-heading); font-weight: var(--fw-bold); }

/* Khối cam kết: nền xanh nhạt, chữ căn giữa. */
.gt-letter__pledge {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-cta-soft);
  border: 1px solid rgb(2 116 57 / 12%);
  text-align: center;
  margin-bottom: var(--sp-6);
}
.gt-letter__pledge-label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.gt-letter__motto {
  font-size: 30px;
  line-height: 40px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: 0;
}
.gt-letter__motto i { font-style: normal; margin: 0 12px; color: var(--c-cta); }

/* Chữ ký căn phải. */
.gt-letter__sign {
  text-align: right;
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--c-text-secondary);
}
.gt-letter__sign b {
  display: block;
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.gt-letter__sign span { display: block; color: var(--c-text-muted); }

/* ---------- Dải chân thẻ ---------- */
.gt-letter__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-8);
  align-items: center;
  margin-top: 0;
  padding: var(--sp-8);
  border-top: 1px solid var(--c-divider);
}
.gt-letter__foot .gt-lead-note {
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.gt-letter__links {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}
/* Nút viền, KHÔNG dùng tên lớp .btn — Flatsome có bộ rule .btn nạp sau CSS của
   theme con và sẽ ghi đè border/bo góc/padding. */
.gt-letter__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gt-letter__links a:hover { border-color: var(--c-cta); color: var(--c-cta); }
.gt-letter__links .icon { width: 17px; height: 17px; color: var(--c-cta); }

@media (max-width: 1099px) {
  .gt-letter__main { grid-template-columns: minmax(0, 1fr); }
  .gt-letter__aside { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
  .gt-portrait { margin-bottom: 0; }
  .gt-letter__body { padding: var(--sp-8); }
  .gt-letter__foot { grid-template-columns: minmax(0, 1fr); }
  .gt-letter__links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .gt-letter__aside { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-6); }
  .gt-letter__body { padding: var(--sp-6); }
  .gt-letter__foot { padding: var(--sp-6); }
  .gt-letter__links { grid-template-columns: minmax(0, 1fr); }
  .gt-letter__motto { font-size: 22px; line-height: 32px; }
  .gt-letter__motto i { margin: 0 6px; }
}

/* ============================================================
   TIẾP TỤC KHÁM PHÁ + CTA — bản thiết kế mới
   Thẻ trắng 3 cột chia bằng vạch dọc, dưới là dải CTA navy.
   Khối nằm CUỐI file nên đè các rule .gt-cluster* phía trên.
   ============================================================ */

.gt-cluster__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}
.gt-cluster__head .gt-title { font-size: 36px; line-height: 46px; margin-bottom: var(--sp-2); }
.gt-cluster__head .gt-lead { margin-bottom: 0; }
.gt-cluster__top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  padding-bottom: var(--sp-2);
}
.gt-cluster__top img { width: 22px; height: 22px; }
.gt-cluster__top:hover { color: var(--c-cta); }

/* ---------- Ba thẻ ---------- */
.gt-cluster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
  margin-bottom: var(--sp-6);
}
.gt-cluster__card {
  display: block;
  padding: var(--sp-8);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: background var(--dur-normal) var(--ease);
}
.gt-cluster__card + .gt-cluster__card { border-left: 1px solid var(--c-divider); }
.gt-cluster__card:hover { background: var(--c-brand-50); transform: none; box-shadow: none; }

/* Icon bên trái, số mờ cỡ lớn bên phải, cùng một hàng. */
.gt-cluster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.gt-cluster__icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 16px;
  background: var(--c-cta-soft);
  color: inherit;
}
.gt-cluster__icon img { width: 40px; height: 40px; object-fit: contain; }
.gt-cluster__num {
  font-size: 52px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--c-border-strong);
}
.gt-cluster__title {
  font-size: 21px;
  line-height: 30px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-cluster__text {
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-5);
}
.gt-cluster__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}
.gt-cluster__more img { width: 22px; height: 22px; transition: transform var(--dur-fast) var(--ease); }
.gt-cluster__card:hover .gt-cluster__more img { transform: translateX(4px); }

/* ---------- Dải CTA navy ---------- */
.gt-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 300px;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-10) var(--sp-8);
  border-radius: var(--r-card);
  background: var(--c-brand-900);
  color: var(--c-white);
}
.gt-cta__icon { width: 180px; height: 180px; flex: none; }
.gt-cta__eyebrow {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: var(--sp-3);
}
.gt-cta__title {
  font-size: 30px;
  line-height: 40px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.gt-cta__text {
  font-size: var(--fs-body);
  line-height: 28px;
  color: rgb(255 255 255 / 80%);
  margin-bottom: var(--sp-5);
}
/* Ba cam kết ngăn nhau bằng vạch dọc mảnh. */
.gt-cta__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-cta__points li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0 var(--sp-6);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgb(255 255 255 / 92%);
}
.gt-cta__points li:first-child { padding-left: 0; }
.gt-cta__points li + li { border-left: 1px solid rgb(255 255 255 / 22%); }
.gt-cta__points img { width: 22px; height: 22px; }

.gt-cta__actions { display: grid; gap: var(--sp-4); }
/* Tên lớp riêng, KHÔNG dùng .btn — Flatsome có bộ rule .btn nạp sau CSS theme
   con và sẽ ghi đè viền/bo góc/padding. */
.gt-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 16px var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-align: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gt-cta__btn img { width: 20px; height: 20px; flex: none; }
.gt-cta__btn--solid { background: var(--c-cta); color: var(--c-white); border: 1px solid var(--c-cta); }
.gt-cta__btn--solid:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-white); }
.gt-cta__btn--ghost { background: none; color: var(--c-white); border: 1px solid rgb(255 255 255 / 45%); }
.gt-cta__btn--ghost:hover { border-color: var(--c-white); color: var(--c-white); }

@media (max-width: 1099px) {
  .gt-cluster { grid-template-columns: minmax(0, 1fr); }
  .gt-cluster__card + .gt-cluster__card { border-left: 0; border-top: 1px solid var(--c-divider); }
  .gt-cta { grid-template-columns: 120px minmax(0, 1fr); padding: var(--sp-8); }
  .gt-cta__icon { width: 120px; height: 120px; }
  .gt-cta__actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .gt-cta__title { font-size: 26px; line-height: 36px; }
}
@media (max-width: 599px) {
  .gt-cluster__head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .gt-cluster__head .gt-title { font-size: 27px; line-height: 36px; }
  .gt-cta { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-6); }
  .gt-cta__icon { width: 92px; height: 92px; }
  .gt-cta__actions { grid-template-columns: minmax(0, 1fr); }
  .gt-cta__title { font-size: 23px; line-height: 32px; }
  /* Ba cam kết xếp dọc: ở khổ này vạch ngăn dọc và chữ chen nhau không đọc được. */
  .gt-cta__points { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .gt-cta__points li { padding: 0; }
  .gt-cta__points li + li { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-cluster__card, .gt-cluster__more img, .gt-cta__btn { transition: none; }
  .gt-cluster__card:hover .gt-cluster__more img { transform: none; }
}

/* Chiến lược phát triển bền vững — profile tr.61 */
.gt-sds {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-6) var(--sp-10);
  align-items: center;
  margin-top: var(--sp-8);
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gt-sds__head { grid-column: 1; }
.gt-sds__eyebrow { margin-bottom: 4px; }
.gt-sds__en {
  font-size: 13px;
  line-height: 20px;
  font-style: italic;
  color: var(--c-text-muted);
  margin-bottom: 0;
}
.gt-sds__text {
  grid-column: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
/* Slogan chiếm trọn cột phải: profile in nó như một tuyên ngôn riêng chứ không
   phải một câu nằm trong đoạn văn. */
.gt-sds__slogan {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
  padding: 0 0 0 var(--sp-6);
  border: 0;
  border-left: 3px solid var(--c-cta);
  font-size: 24px;
  line-height: 34px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
}
.gt-sds__slogan i { color: var(--c-cta); font-style: normal; }
.gt-sds__slogan span {
  display: block;
  margin-top: var(--sp-3);
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--c-text-muted);
}

@media (max-width: 849px) {
  .gt-sds { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .gt-sds__head, .gt-sds__text { grid-column: 1; }
  .gt-sds__slogan { grid-column: 1; grid-row: auto; font-size: 20px; line-height: 30px; }
}

/* Sự kiện ngành: một khối riêng trong mục Văn hóa, tách khỏi gallery hoạt động
   nội bộ vì đây là hoạt động đối ngoại và có mốc thời gian cụ thể. */
.gt-event {
  margin-top: var(--sp-10);
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gt-event__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}
.gt-event__title {
  font-size: 24px;
  line-height: 33px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gt-event__text {
  max-width: 78ch;
  font-size: var(--fs-small);
  line-height: 25px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}
.gt-event__date {
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  padding: var(--sp-4) var(--sp-2);
  border-radius: 10px;
  background: var(--c-cta);
  color: var(--c-white);
  text-align: center;
  margin-bottom: 0;
}
.gt-event__date b {
  font-size: 32px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}
.gt-event__date span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.gt-event__shots { margin-bottom: 0; }

@media (max-width: 849px) {
  .gt-event { padding: var(--sp-5); }
  .gt-event__head { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-4); }
  .gt-event__title { font-size: 20px; line-height: 28px; }
}

/* ============================================================
   TUYÊN NGÔN VĂN HÓA — 4 GIÁ TRỊ · 3 NGUYÊN TẮC · 1 CAM KẾT
   Chỉ dùng ở /gioi-thieu/van-hoa/, tiền tố .vh- để không đụng vào nhánh .gt-
   đang dùng chung cho cả bốn trang Giới thiệu.

   Ba nguyên tắc hành động KHÔNG có rule riêng ở đây: chúng dùng lại element
   "Trang · Lưới thẻ nguyên tắc" (.gt-rules/.gt-rule, mục 7) vì đó đã đúng là
   component "nguyên tắc" của theme — thêm một biến thể nữa chỉ tổ lệch nhịp.

   Mọi tiêu đề khai `color` tường minh (xem ghi chú cascade ở đầu file).
   ============================================================ */

/* ---------- Khối mở đầu: văn xuôi + công thức 4-3-1 ---------- */
.vh-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}
.vh-intro__body p {
  margin: 0 0 var(--sp-4);
  font-size: 17px;
  line-height: 30px;
  color: var(--c-text-secondary);
}
.vh-intro__body p:last-child {
  margin-bottom: 0;
}
.vh-intro__body b,
.vh-intro__body strong {
  font-weight: var(--fw-bold);
  color: var(--c-brand-600);
}

.vh-intro__quote {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-8);
  /* flatsome.css nạp trước merged.css và có rule blockquote{border-left:2px;
     padding:0 1.25em 0 1.875em} — phải tắt tường minh, xem .vh-fin__quote. */
  border: 0;
  border-radius: 14px;
  background: var(--c-surface-subtle);
  font-style: normal;
}
.vh-intro__quote-mark {
  display: block;
  width: 66px;
  height: 66px;
  margin-bottom: var(--sp-5);
}
/* Phải kèm .vh-intro__body: rule `.vh-intro__body p` ở trên có specificity
   0-1-1, cao hơn một class nên nuốt mất font-size/line-height của nhãn này
   (đo được 17px/30px thay vì 15px/22px — chữ hoa nghiêng mà giãn dòng 2.0). */
.vh-intro__body p.vh-intro__quote-label,
.vh-intro__quote-label {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-bold);
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-900);
}
/* Vạch ngắn ngăn nhãn với đoạn trích, vẽ bằng ::after để markup khỏi thêm thẻ rỗng. */
.vh-intro__quote-label::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin: var(--sp-4) 0;
  background: var(--c-border-strong);
}
.vh-intro__body p.vh-intro__quote-text,
.vh-intro__quote-text {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-style: italic;
  color: var(--c-text-secondary);
}

/* ---------- Thẻ công thức 4 - 3 - 1 ---------- */
.vh-formula {
  padding: var(--sp-10) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.vh-formula__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Khoảng cách này CHÍNH LÀ chiều dài nét nối: .vh-formula__item::after lấy
     width bằng đúng var(--vh-gap) rồi đặt left:100%. Đổi một chỗ là cả hai theo. */
  --vh-gap: var(--sp-12);
  column-gap: var(--vh-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.vh-formula__item {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}
/* Nét đứt nối hai nút, ngang tâm vòng tròn icon (104px / 2 = 52px). */
.vh-formula__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 58px;
  left: 100%;
  width: var(--vh-gap);
  border-top: 2px dashed var(--c-border-strong);
}
/* Mũi tên nằm giữa nét đứt, dùng lại icon-chevron-right của theme qua mask nên
   không phải thêm tệp trang trí nào. */
.vh-formula__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50px;
  left: calc(100% + var(--vh-gap) / 2 - 8px);
  width: 16px;
  height: 16px;
  background: var(--c-brand-600);
  -webkit-mask: url("../imgs/icon-chevron-right.svg") center / contain no-repeat;
  mask: url("../imgs/icon-chevron-right.svg") center / contain no-repeat;
}
.vh-formula__icon {
  display: block;
  margin: 0 auto var(--sp-5);
}
.vh-formula__icon img {
  display: block;
  /* Bộ icon mới nét mảnh hơn bản đầu (tỉ lệ nét/đường kính 2,1% thay vì 3,6%)
     nên phóng to một chút cho đủ trọng lượng thị giác ở cỡ hiển thị này. */
  width: 116px;
  height: 116px;
  margin: 0 auto;
}
.vh-formula__num {
  display: block;
  font-size: 62px;
  line-height: 68px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-brand-950);
}
.vh-formula__rule {
  display: block;
  width: 54px;
  height: 3px;
  margin: var(--sp-3) auto var(--sp-4);
  background: var(--c-brand-950);
}
.vh-formula__label {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-brand-950);
}
.vh-formula__text {
  display: block;
  font-size: var(--fs-body);
  line-height: 24px;
  color: var(--c-text-secondary);
}
/* Ba nút đi từ nền tảng (navy đậm) tới hành động (xanh lá) — cùng dải màu với
   .vh-fin__recap ở lời kết để hai chỗ đọc ra là một công thức. */
.vh-formula__item:nth-child(2) .vh-formula__num,
.vh-formula__item:nth-child(2) .vh-formula__label {
  color: var(--c-brand-600);
}
.vh-formula__item:nth-child(2) .vh-formula__rule {
  background: var(--c-brand-600);
}
.vh-formula__item:nth-child(3) .vh-formula__num,
.vh-formula__item:nth-child(3) .vh-formula__label {
  color: var(--c-cta);
}
.vh-formula__item:nth-child(3) .vh-formula__rule {
  background: var(--c-cta);
}

/* ---------- Dải ghi chú chạy hết bề ngang ---------- */
.vh-intro__note {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-brand-50);
}
.vh-intro__note-icon {
  flex: none;
  width: 72px;
  height: 72px;
}
.vh-intro__note-text {
  /* Chừa chỗ cho hình bóng nhà máy ở mép phải; ở khổ hẹp hình bị ẩn nên trả lại 0. */
  padding-right: 360px;
}
.vh-intro__note-text p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body);
  line-height: 28px;
  color: var(--c-text-secondary);
}
.vh-intro__note-text p:last-child {
  margin-bottom: 0;
}
.vh-intro__note-text b,
.vh-intro__note-text strong {
  font-weight: var(--fw-bold);
  color: var(--c-brand-600);
}
.vh-intro__note-deco {
  position: absolute;
  right: var(--sp-6);
  bottom: 6px;
  width: 330px;
  height: auto;
  pointer-events: none;
}

/* ---------- Bốn giá trị cốt lõi ---------- */
/*
 * Một THẺ TRẮNG chung chứa bốn DÒNG, không phải bốn thẻ rời: số thứ tự · trục dọc
 * có chấm · icon + tên · thẻ câu nhấn · đoạn diễn giải. Trục dọc và chấm vẽ bằng
 * ::before/::after của từng dòng nên nối liền nhau mà markup không cần thẻ rỗng.
 */
.vh-core {
  --vh-num-col: 88px;
  --vh-col-gap: var(--sp-8);
  /* Trục dọc nằm giữa khoảng cách sau cột số; đổi hai biến trên là trục tự theo. */
  --vh-rail: calc(var(--vh-num-col) + var(--vh-col-gap) / 2);
  margin: 0;
  padding: var(--sp-4) var(--sp-10);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
  list-style: none;
  counter-reset: vh-core;
}
.vh-core__item {
  counter-increment: vh-core;
  position: relative;
  display: grid;
  grid-template-columns:
    var(--vh-num-col) minmax(0, 296px) minmax(0, 296px) minmax(0, 1fr);
  grid-template-areas: "num id lead text";
  column-gap: var(--vh-col-gap);
  align-items: center;
  margin: 0;
  padding: var(--sp-8) 0;
}
.vh-core__item + .vh-core__item {
  border-top: 1px solid var(--c-divider);
}

/* Trục dọc: mỗi dòng vẽ một đoạn, nối lại thành một đường liền. Dòng đầu bắt đầu
   từ chấm, dòng cuối kết thúc ở chấm — không thò ra ngoài thẻ. */
.vh-core__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--vh-rail);
  border-left: 2px dashed var(--c-border);
}
.vh-core__item:first-child::before {
  top: 50%;
}
.vh-core__item:last-child::before {
  bottom: 50%;
}
.vh-core__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--vh-rail) - 5px);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--c-cta);
  /* Vòng trắng để chấm che hẳn nét đứt chạy phía sau. */
  box-shadow: 0 0 0 5px var(--c-white);
}

/* Số 01-04 đánh bằng bộ đếm CSS: trong UX Builder mỗi dòng render riêng nên PHP
   không biết dòng đang đứng thứ mấy. */
.vh-core__num {
  grid-area: num;
  font-size: 54px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-border-strong);
}
.vh-core__num::before {
  content: counter(vh-core, decimal-leading-zero);
}

.vh-core__id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-right: var(--sp-5);
  border-right: 1px solid var(--c-divider);
}
.vh-core__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--c-brand-50);
}
.vh-core__icon img {
  display: block;
  /* Ảnh đã được cắt SÁT NÉT rồi mới đóng khung vuông (xem uploads/2026/07/
     vh-core-*.png), nên con số này chính là bề ngang nét thật — để nguyên khung
     gốc còn ~18% lề trống thì icon nhìn bé hơn hẳn bản thiết kế. */
  width: 42px;
  height: 42px;
}
.vh-core__mono {
  /* width:auto vì Flatsome in "h1..h6 { width: 100% }" sau file này, heading nằm
     trong flex sẽ đòi trọn chiều rộng và đẩy phụ đề xuống. */
  width: auto;
  margin: 0 0 2px;
  font-size: 26px;
  line-height: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-900);
}
.vh-core__title {
  display: block;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}

.vh-core__lead {
  grid-area: lead;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  border-radius: 12px;
  background: var(--c-brand-100);
}
.vh-core__lead-icon {
  flex: none;
  width: 32px;
  height: 32px;
}
.vh-core__lead p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-brand-900);
}

.vh-core__text {
  grid-area: text;
}
.vh-core__text p {
  margin: 0 0 var(--sp-4);
  font-size: 15px;
  line-height: 25px;
  color: var(--c-text-secondary);
}
.vh-core__text p:last-child {
  margin-bottom: 0;
}

/* Nhãn nhỏ của riêng khối này có gạch ở CẢ HAI đầu, đúng bản thiết kế. Khoanh trong
   .vh-core-sec để ba trang Giới thiệu còn lại giữ nguyên kiểu một gạch. */
.vh-core-sec .gt-head--center .gt-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-left: var(--sp-3);
  vertical-align: middle;
  background: var(--c-cta);
}

/* ---------- Ba nguyên tắc hành động ---------- */
/*
 * Một thẻ trắng chia BA CỘT bằng đường kẻ dọc, trên đầu mỗi cột có một chấm xanh
 * nằm trên đường ray ngang chạy suốt thẻ. Ray và mũi tên vẽ bằng ::before/::after
 * của từng cột nên nối liền nhau mà markup không cần thẻ rỗng.
 */
.vh-act {
  --vh-act-gap: var(--sp-10);
  --vh-act-num: 74px;
  --vh-act-sq: 72px;
  --vh-act-head-gap: var(--sp-4);
  /* Tâm ô icon tính từ mép trái cột — chấm xanh và đầu ray neo theo biến này nên
     đổi bề rộng cột số hay ô icon là ray tự đi theo, không phải chỉnh tay. */
  --vh-act-node-x: calc(
    var(--vh-act-num) + var(--vh-act-head-gap) + var(--vh-act-sq) / 2
  );
  padding: var(--sp-10);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.vh-act__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--vh-act-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vh-act;
}
.vh-act__item {
  counter-increment: vh-act;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.vh-act__item + .vh-act__item {
  padding-left: var(--vh-act-gap);
  margin-left: calc(var(--vh-act-gap) * -1);
}
/* Kẻ dọc vẽ bằng ::before và bắt đầu DƯỚI hàng ray, không dùng border-left của
   chính cột: để border thì nó cắt ngang đường ray, nhìn thành ba đoạn rời. */
.vh-act__item + .vh-act__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14px + var(--sp-6));
  bottom: 0;
  border-left: 1px solid var(--c-divider);
}

/* Đường ray: chấm + vạch ngang. Cột cuối vạch chạy hết mép thẻ, hai cột trước
   vạch băng qua khe rồi kết bằng mũi tên chỉ sang chấm kế tiếp. */
.vh-act__node {
  position: relative;
  display: block;
  height: 14px;
  margin-bottom: var(--sp-8);
}
.vh-act__node::before {
  content: "";
  position: absolute;
  top: 1px;
  left: calc(var(--vh-act-node-x) - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-cta);
}
.vh-act__node::after {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(var(--vh-act-node-x) + 12px);
  right: 0;
  border-top: 2px solid var(--c-brand-900);
}
/*
 * Hai cột đầu: vạch chạy XUYÊN QUA khe và cả cột kế tiếp để dừng ngay sát chấm
 * của cột đó — chấm cách nhau đúng (bề ngang cột + khe), nên phần thò ra khỏi cột
 * là (khe + toạ độ chấm) trừ đi khoảng hở 12px chừa cho chấm.
 */
.vh-act__item:not(:last-child) .vh-act__node::after {
  right: calc(12px - var(--vh-act-gap) - var(--vh-act-node-x));
}
.vh-act__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(
    100% + var(--vh-act-gap) + var(--vh-act-node-x) - 22px
  );
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--c-brand-900);
  border-right: 2px solid var(--c-brand-900);
  transform: rotate(45deg);
}

.vh-act__head {
  display: grid;
  grid-template-columns: var(--vh-act-num) var(--vh-act-sq) minmax(0, 1fr);
  gap: var(--vh-act-head-gap);
  align-items: center;
  margin-bottom: var(--sp-6);
}
/* Số 01-03 đánh bằng bộ đếm CSS: trong UX Builder mỗi cột render riêng nên PHP
   không biết cột đang đứng thứ mấy. */
.vh-act__num {
  font-size: 46px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-border-strong);
}
.vh-act__num::before {
  content: counter(vh-act, decimal-leading-zero);
}
.vh-act__icon {
  display: grid;
  place-items: center;
  width: var(--vh-act-sq);
  height: var(--vh-act-sq);
  border-radius: 16px;
  background: var(--c-brand-50);
}
.vh-act__icon img {
  display: block;
  /* Ảnh đã cắt sát nét rồi mới đóng khung vuông nên con số này là bề ngang nét thật. */
  width: 50px;
  height: 50px;
}
.vh-act__mono {
  /* width:auto vì Flatsome in "h1..h6 { width: 100% }" sau file này. */
  width: auto;
  margin: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-brand-600);
}

.vh-act__title {
  margin: 0 0 var(--sp-3);
  font-size: 17px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.vh-act__text p {
  margin: 0 0 var(--sp-3);
  font-size: 15px;
  line-height: 25px;
  color: var(--c-text-secondary);
}
.vh-act__text p:last-child {
  margin-bottom: 0;
}

/* Dải quy trình luôn bị đẩy xuống đáy cột (margin-top:auto) để chân ba cột thẳng
   hàng dù đoạn diễn giải dài ngắn khác nhau. */
.vh-act__flow {
  --vh-step-gap: var(--sp-4);
  /* Mũi tên giữa hai bước neo theo nửa chiều cao icon, khai một chỗ cho khỏi lệch. */
  --vh-step-icon: 36px;
  display: flex;
  align-items: flex-start;
  gap: var(--vh-step-gap);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) var(--sp-3);
  border-radius: 12px;
  background: var(--c-brand-50);
  list-style: none;
}
.vh-act__item > .vh-act__flow {
  margin-top: auto;
}
.vh-act__step {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
.vh-act__step img {
  display: block;
  width: var(--vh-step-icon);
  height: var(--vh-step-icon);
  margin: 0 auto var(--sp-3);
}
.vh-act__step span {
  display: block;
  font-size: var(--fs-caption);
  line-height: 17px;
  font-weight: var(--fw-bold);
  /* 0.02em chứ không 0.04em: cột hẹp hơn bản thiết kế nên giãn chữ rộng hơn là
     nhãn bốn bước của cột TỐC vỡ thành ba dòng. */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-heading);
}
/* Mũi tên giữa hai bước: ::before là thân, ::after là đầu — cùng nằm ngang tâm
   hàng icon (30px / 2 = 15px). */
.vh-act__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--vh-step-icon) / 2);
  left: calc(100% + var(--vh-step-gap) / 2 - 11px);
  width: 20px;
  border-top: 2px solid var(--c-brand-500);
}
.vh-act__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--vh-step-icon) / 2);
  left: calc(100% + var(--vh-step-gap) / 2 + 3px);
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 2px solid var(--c-brand-500);
  border-right: 2px solid var(--c-brand-500);
  transform: rotate(45deg);
}

/* ---------- Dải ba ý chốt dưới thẻ ---------- */
.vh-act__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4) 0;
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
}
.vh-act__note {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0 var(--sp-10);
}
.vh-act__note + .vh-act__note {
  border-left: 1px solid var(--c-border);
}
.vh-act__note img {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}
.vh-act__note b {
  font-size: 17px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}

/* ---------- Cam kết tương lai: dải navy tràn hết bề ngang ---------- */
.gt-section.vh-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-brand-950);
}
.vh-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/wp-content/uploads/2026/07/nang-luc-day-chuyen-san-xuat-panel.webp")
    center / cover no-repeat;
  opacity: 0.14;
}

.vh-commit {
  display: grid;
  gap: var(--sp-8);
}
.vh-commit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ee7a8;
}
.vh-commit__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #6ee7a8;
}
.vh-commit__title {
  /* width:auto vì Flatsome in "h1..h6 { width: 100% }" sau file này. */
  width: auto;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-white);
}
.vh-commit__text {
  max-width: 880px;
}
.vh-commit__text p {
  margin: 0 0 var(--sp-3);
  font-size: 17px;
  line-height: 30px;
  color: rgb(255 255 255 / 82%);
}
.vh-commit__text p:last-child {
  margin-bottom: 0;
}

.vh-commit__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vh-commit__item {
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 6%);
}
.vh-commit__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: 12px;
  background: var(--c-cta);
  color: var(--c-white);
}
.vh-commit__icon .icon {
  width: 24px;
  height: 24px;
}
.vh-commit__item b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.vh-commit__item > span:last-child {
  display: block;
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgb(255 255 255 / 72%);
}
.vh-commit__foot {
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid #6ee7a8;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgb(255 255 255 / 7%);
  font-size: 17px;
  line-height: 28px;
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

/* ---------- Lời kết ---------- */
/*
 * Một thẻ chia bốn BĂNG xếp dọc: dẫn nhập 2 cột · dải trích dẫn nền navy tràn hết
 * bề ngang thẻ · công thức 4-3-1 · thương hiệu và chữ ký. overflow:hidden để dải
 * navy và hình nhà máy ở đáy bám đúng bo góc của thẻ.
 */
.vh-fin {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}

/* ----- Băng 1: dẫn nhập ----- */
.vh-fin__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-10);
}
.vh-fin__points {
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vh-fin__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}
.vh-fin__point-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-border-strong);
  border-radius: 14px;
}
.vh-fin__point-icon img {
  display: block;
  width: 30px;
  height: 30px;
}
.vh-fin__point p {
  margin: 0 0 var(--sp-2);
  font-size: 16px;
  line-height: 27px;
  color: var(--c-text-secondary);
}
.vh-fin__point p:last-child {
  margin-bottom: 0;
}
.vh-fin__point b,
.vh-fin__point strong {
  font-weight: var(--fw-bold);
  color: var(--c-brand-600);
}

.vh-fin__figure {
  position: relative;
  margin: 0;
}
/* Khung nét mảnh lệch lên phải, đúng nét trang trí của bản thiết kế. */
.vh-fin__figure::before {
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  bottom: 14px;
  left: 14px;
  border: 1px solid var(--c-brand-100);
  border-radius: 16px;
}
.vh-fin__photo {
  position: relative;
  display: block;
  width: 100%;
  /* Ép khung 4:3 + object-fit: ảnh nhà máy thật là ảnh ngang, để nguyên tỉ lệ gốc
     thì cột phải hụt hẳn so với cột chữ bên trái. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

/* ----- Băng 2: dải trích dẫn ----- */
.vh-fin__quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  margin: 0;
  padding: var(--sp-10);
  /* flatsome.css nạp trước merged.css và có rule blockquote{border-left:2px;
     padding:0 1.25em 0 1.875em} — phải tắt tường minh. */
  border: 0;
  font-style: normal;
  background: var(--c-brand-950) center / cover no-repeat;
}
.vh-fin__quote-mark {
  flex: none;
  width: 62px;
  height: 62px;
}
.vh-fin__quote p {
  max-width: 760px;
  margin: 0;
  padding-left: var(--sp-8);
  border-left: 2px solid rgb(255 255 255 / 32%);
  font-size: 22px;
  line-height: 36px;
  font-style: italic;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

/* ----- Băng 3: công thức 4-3-1 ----- */
.vh-fin__recap {
  --vh-fin-arrow-gap: var(--sp-12);
  display: flex;
  align-items: stretch;
  gap: var(--vh-fin-arrow-gap);
  padding: var(--sp-10) var(--sp-10) var(--sp-8);
}
.vh-fin__step {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
}
.vh-fin__step--accent {
  border-color: rgb(2 116 57 / 40%);
}
/* Mũi tên giữa hai vế: ảnh truyền từ PHP qua biến --vh-fin-arrow (xem
   templates/vhFinRecap.php) nên không phải thêm thẻ <img> rỗng vào markup. */
.vh-fin__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--vh-fin-arrow-gap) / 2 - 18px);
  width: 36px;
  height: 36px;
  margin-top: -18px;
  background: var(--vh-fin-arrow) center / contain no-repeat;
}
.vh-fin__badge {
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
}
.vh-fin__step-body {
  flex: 1;
  min-width: 0;
}
.vh-fin__step-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.vh-fin__step-value {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.vh-fin__step--accent .vh-fin__step-value {
  color: var(--c-cta);
}
.vh-fin__step-icon {
  flex: none;
  display: block;
  width: 34px;
  height: 34px;
}

/* ----- Băng 4: thương hiệu & chữ ký ----- */
.vh-fin__sign {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-10) var(--sp-18);
  background: var(--c-brand-50);
}
.vh-fin__sign::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: var(--vh-fin-deco) center bottom / 100% auto no-repeat;
  pointer-events: none;
}
.vh-fin__brand,
.vh-fin__by {
  position: relative;
}
.vh-fin__brand {
  margin: 0;
  font-size: 30px;
  line-height: 38px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-900);
  text-align: right;
}
.vh-fin__brand span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.28em;
  color: var(--c-cta);
}
.vh-fin__by {
  padding-left: var(--sp-12);
  border-left: 1px solid var(--c-border-strong);
  text-align: center;
}
.vh-fin__by-lead {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-muted);
}
.vh-fin__by-sign {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
  margin: var(--sp-2) auto;
}
.vh-fin__by-name {
  margin: var(--sp-3) 0 0;
  font-size: 19px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.vh-fin__by-role {
  margin: 2px 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-secondary);
}

@media (max-width: 1099px) {
  .vh-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .vh-formula {
    padding: var(--sp-8) var(--sp-6);
  }
  .vh-formula__list {
    --vh-gap: var(--sp-5);
  }
  .vh-formula__num {
    font-size: 48px;
    line-height: 54px;
  }
  .vh-formula__icon img {
    width: 92px;
    height: 92px;
  }
  .vh-formula__item:not(:last-child)::after {
    top: 46px;
  }
  .vh-formula__item:not(:last-child)::before {
    top: 38px;
  }
  /* Hình bóng nhà máy chiếm gần nửa dải ở khổ này mà không mang thông tin gì —
     ẩn đi và trả lại chỗ cho chữ. */
  .vh-intro__note-deco {
    display: none;
  }
  .vh-intro__note-text {
    padding-right: 0;
  }
  /* Ba cột nội dung xếp dọc, cột số + trục dọc giữ nguyên bên trái. */
  .vh-core {
    --vh-num-col: 76px;
    --vh-col-gap: var(--sp-6);
    padding: var(--sp-2) var(--sp-6);
  }
  .vh-core__item {
    grid-template-columns: var(--vh-num-col) minmax(0, 1fr);
    grid-template-areas:
      "num id"
      ".   lead"
      ".   text";
    row-gap: var(--sp-5);
    align-items: start;
  }
  .vh-core__num {
    font-size: 42px;
  }
  .vh-core__id {
    padding-right: 0;
    border-right: 0;
  }
  /* Ba khối xếp dọc nên giữa dòng rơi vào giữa thẻ câu nhấn — kéo chấm lên ngang
     tâm ô icon (padding 32px + nửa ô 32px) cho khớp với dòng tên giá trị. */
  .vh-core__item::after {
    top: 64px;
  }
  .vh-core__item:first-child::before {
    top: 64px;
  }
  .vh-core__item:last-child::before {
    top: 0;
    bottom: auto;
    height: 64px;
  }
  /* Ba cột thành một cột: đường kẻ dọc chuyển thành kẻ ngang, ray ngang chuyển
     thành ray dọc chạy qua tâm ô icon. */
  .vh-act {
    --vh-act-gap: var(--sp-6);
    --vh-act-num: 62px;
    padding: var(--sp-6);
  }
  .vh-act__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .vh-act__item + .vh-act__item {
    margin-left: 0;
    padding-left: 0;
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
    border-top: 1px solid var(--c-divider);
  }
  .vh-act__item + .vh-act__item::before {
    display: none;
  }
  .vh-act__node {
    height: 12px;
    margin-bottom: var(--sp-6);
  }
  .vh-act__node::after,
  .vh-act__item:not(:last-child)::after {
    display: none;
  }
  .vh-act__num {
    font-size: 40px;
  }
  .vh-commit__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Băng dẫn nhập và băng chữ ký xếp dọc; công thức 4-3-1 vẫn ba vế ngang. */
  .vh-fin__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding: var(--sp-6);
  }
  .vh-fin__figure::before {
    display: none;
  }
  .vh-fin__quote {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-8) var(--sp-6);
  }
  .vh-fin__quote p {
    padding-left: var(--sp-5);
    font-size: 19px;
    line-height: 32px;
  }
  .vh-fin__recap {
    --vh-fin-arrow-gap: var(--sp-8);
    flex-direction: column;
    padding: var(--sp-6);
  }
  /* Ba vế xếp dọc thì mũi tên chuyển xuống khe giữa hai thẻ. */
  .vh-fin__step:not(:last-child)::after {
    top: auto;
    bottom: calc(var(--vh-fin-arrow-gap) / -2 - 15px);
    left: 50%;
    margin: 0 0 0 -15px;
    width: 30px;
    height: 30px;
    transform: rotate(90deg);
  }
  .vh-fin__sign {
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-6) var(--sp-16);
  }
  .vh-fin__brand {
    text-align: center;
  }
  .vh-fin__by {
    padding: var(--sp-6) 0 0;
    border-left: 0;
    border-top: 1px solid var(--c-border-strong);
  }
}

@media (max-width: 767px) {
  .vh-commit__list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Dải quy trình xếp dọc: mũi tên xoay xuống, nhãn về canh trái cạnh icon. */
  .vh-act__flow {
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-5);
  }
  .vh-act__step {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    text-align: left;
  }
  .vh-act__step img {
    margin: 0;
    flex: none;
  }
  .vh-act__step:not(:last-child)::before {
    top: auto;
    bottom: calc(var(--sp-6) * -1);
    left: calc(var(--vh-step-icon) / 2 - 1px);
    width: 0;
    height: var(--sp-6);
    border-top: 0;
    border-left: 2px solid var(--c-brand-500);
  }
  .vh-act__step:not(:last-child)::after {
    top: auto;
    /* Giữa KHE dưới bước (khe = --sp-6) chứ không phải trong lòng bước, nếu không
       mũi tên nằm đè lên nhãn. */
    bottom: calc(var(--sp-6) / -2 - 3px);
    left: calc(var(--vh-step-icon) / 2 - 4px);
    margin-top: 0;
    transform: rotate(135deg);
  }
  .vh-act__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .vh-act__note {
    padding: 0;
  }
  .vh-act__note + .vh-act__note {
    border-left: 0;
  }
  /* Ba nút xếp dọc: nét nối chuyển từ ngang sang dọc, mũi tên xoay xuống. */
  .vh-formula__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-8);
  }
  .vh-formula__item:not(:last-child)::after {
    top: auto;
    bottom: calc(var(--sp-8) * -1);
    left: 50%;
    width: 0;
    height: var(--sp-8);
    border-top: 0;
    border-left: 2px dashed var(--c-border-strong);
  }
  .vh-formula__item:not(:last-child)::before {
    top: auto;
    bottom: calc(var(--sp-8) / 2 * -1 - 9px);
    left: calc(50% - 9px);
    transform: rotate(90deg);
  }
  .vh-intro__note {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-6);
  }
  .vh-intro__quote {
    padding: var(--sp-6);
  }
  .vh-intro__quote-text {
    font-size: 15px;
    line-height: 26px;
  }
  /* Cột số và trục dọc chiếm gần một phần ba bề ngang ở khổ này mà không mang
     thông tin gì thêm — bỏ hẳn, giống cách xử lý .gt-value__num. */
  .vh-core__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "id"
      "lead"
      "text";
    padding: var(--sp-6) 0;
  }
  .vh-core__num,
  .vh-core__item::before,
  .vh-core__item::after {
    display: none;
  }
  .vh-core__lead {
    padding: var(--sp-4) var(--sp-5);
  }
  .vh-core__mono {
    font-size: 24px;
    line-height: 30px;
  }
  .vh-commit__title {
    font-size: 26px;
    line-height: 34px;
  }
  .vh-fin__brand {
    font-size: 24px;
    line-height: 32px;
  }
  .vh-fin__quote p {
    font-size: 17px;
    line-height: 29px;
  }
  .vh-fin__quote-mark {
    width: 46px;
    height: 46px;
  }
  /* Thẻ chỉ còn rộng ~260px: bỏ icon phụ và thu giãn chữ để nhãn khỏi vỡ ba dòng. */
  .vh-fin__step-icon {
    display: none;
  }
  .vh-fin__step-label {
    letter-spacing: 0.06em;
  }
}

/* ===== orgChart.css ===== */
/* ============================================================
   SƠ ĐỒ TỔ CHỨC (block orgChart) — .cms-org*
   ============================================================
   Bố cục cây phân cấp theo bản thiết kế khách gửi 20/08/2026:

        [ logo ]
           |
     [ cấp lãnh đạo ]        dải ngang: đầu khối navy + 3 ô vai trò
        |   |   |
      [ ] [ ] [ ]            các khối chức năng, xếp hàng cột

   Màu do UX Builder bơm vào bằng biến --org-* trên phần tử gốc (xem
   blocks/orgChart/templates/index.php), nên file này giữ nguyên và vẫn cache được.

   ĐƯỜNG NỐI VẼ BẰNG PHẦN TỬ GIẢ, KHÔNG PHẢI SVG: số khối do biên tập viên quyết
   định trong admin nên hình vẽ phải tự co giãn. Đoạn kẻ ngang là ::after của TỪNG
   khối nối liền nhau (khối đầu cắt nửa trái, khối cuối cắt nửa phải) — nhờ vậy
   3 khối hay 5 khối đều ra một đường liền, không cần biết trước số lượng.
   ============================================================ */

.cms-org {
  position: relative;
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-cta);
  border-radius: 16px;
  background: var(--c-white);
  box-shadow: var(--sh-stats);
  text-align: center;
}

/* Nhãn góc trên bên trái */
.cms-org__tag {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-6);
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: var(--c-cta-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cta);
}

.cms-org__inner {
  display: block;
  margin-top: var(--sp-6);
}

/* ---------- Đỉnh: logo tập đoàn ---------- */
.cms-org__crown {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 16px 28px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--org-bg-from) 0%, var(--org-bg-to) 100%);
  color: var(--c-white);
}
.cms-org__logo img {
  display: block;
  width: auto;
  height: 30px;
}
.cms-org__crown-text {
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Đoạn nối logo -> cấp lãnh đạo ---------- */
.cms-org__link--crown {
  display: block;
  width: 10px;
  height: 34px;
  margin: 0 auto;
  /* Chấm tròn ở đáy + đoạn kẻ phía trên nó, gộp trong một phần tử để không phải
     thêm thẻ chỉ để vẽ cái chấm. */
  background:
    linear-gradient(var(--org-line), var(--org-line)) 50% 0 / 2px 24px no-repeat,
    radial-gradient(circle 5px at 50% 29px, var(--org-accent) 99%, transparent 100%);
}

/* ---------- Cấp lãnh đạo ---------- */
.cms-org__lead {
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
  text-align: left;
}
.cms-org__lead-name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 14px 22px;
  background: linear-gradient(100deg, var(--org-bg-from) 0%, var(--org-bg-to) 100%);
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
}
.cms-org__lead-name a { color: inherit; }
.cms-org__lead-name .icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.cms-org__roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cms-org__role {
  padding: 14px 18px;
  border-left: 1px solid var(--c-border);
}
.cms-org__role:first-child {
  border-left: 0;
}
.cms-org__role b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--org-branch);
}
.cms-org__role b::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--org-accent);
}
.cms-org__role span {
  display: block;
  margin-top: 3px;
  padding-left: 14px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ---------- Hàng khối chức năng ---------- */
.cms-org__units {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: 0;
  padding-top: 62px;
  text-align: left;
}
/* Đoạn kẻ dọc rơi từ đáy khối lãnh đạo xuống đúng đường kẻ ngang. */
.cms-org__units::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 32px;
  background: var(--org-line);
}
.cms-org__unit {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
/* Chấm tròn nằm trên đường ngang + đoạn kẻ dọc thả xuống đầu khối. */
.cms-org__unit::before {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  top: -37px;
  width: 10px;
  height: 37px;
  background:
    linear-gradient(var(--org-line), var(--org-line)) 50% 100% / 2px 27px no-repeat,
    radial-gradient(circle 5px at 50% 5px, var(--org-accent) 99%, transparent 100%);
}
/* Nửa trái + nửa phải của đường ngang. Khoảng hở giữa hai khối là var(--sp-6) nên
   mỗi bên nhô ra một nửa khoảng đó thì hai đoạn chạm nhau thành một đường liền. */
.cms-org__unit::after {
  content: "";
  position: absolute;
  top: -32px;
  left: calc(var(--sp-6) / -2);
  right: calc(var(--sp-6) / -2);
  height: 2px;
  background: var(--org-line);
}
.cms-org__unit:first-child::after { left: 50%; }
.cms-org__unit:last-child::after { right: 50%; }

.cms-org__unit-name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
  border-radius: 11px 11px 0 0;
  background: var(--c-brand-50);
  font-size: var(--fs-small);
  line-height: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--org-branch);
}
.cms-org__unit-name a { color: inherit; }
.cms-org__unit-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--c-white);
  color: var(--c-brand-600);
}
.cms-org__unit-icon .icon {
  width: 18px;
  height: 18px;
}
.cms-org__items {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  list-style: none;
}
.cms-org__item {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--org-item);
}
.cms-org__item::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--org-accent);
}
.cms-org__item a {
  color: inherit;
}
.cms-org__item a:hover {
  color: var(--c-brand-600);
}

.cms-org__note {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .cms-org__units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 62px;
  }
  /* Xuống 2 cột thì đường ngang không còn nối đúng mạch giữa các hàng — bỏ hết
     đường nối, chỉ giữ chấm tròn đầu mỗi khối để vẫn thấy đây là nhánh con. */
  .cms-org__units::before,
  .cms-org__unit::after {
    display: none;
  }
  .cms-org__unit::before {
    top: -22px;
    height: 22px;
    background:
      linear-gradient(var(--org-line), var(--org-line)) 50% 100% / 2px 12px no-repeat,
      radial-gradient(circle 5px at 50% 5px, var(--org-accent) 99%, transparent 100%);
  }
}

@media (max-width: 767px) {
  .cms-org {
    padding: var(--sp-10) var(--sp-4) var(--sp-6);
  }
  .cms-org__tag {
    left: var(--sp-4);
  }
  .cms-org__crown {
    padding: 12px 18px;
  }
  .cms-org__logo img {
    height: 24px;
  }
  .cms-org__roles {
    grid-template-columns: minmax(0, 1fr);
  }
  .cms-org__role {
    border-left: 0;
    border-top: 1px solid var(--c-border);
  }
  .cms-org__role:first-child {
    border-top: 0;
  }
  .cms-org__units {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== giaiPhapDemo1.css ===== */
/* ============================================================
   giaiPhapDemo1.css — 5 trang giải pháp, bản Demo 1 "kỹ thuật"
   Template: page-giai-phap-demo-1.php
   Dữ liệu : template-parts/giai-phap/solutions.php

   Mọi class mang tiền tố .gpd1- nên độc lập hoàn toàn với giaiPhap.css
   (đang phục vụ trang /giai-phap/ hiện tại) và với hai bản demo Giới thiệu.

   Tái sử dụng component đã chuẩn hoá của site:
     .container, .page-hero* (pageHero.css), .breadcrumb,
     .page-hero__badges / .page-hero__badge (giaiPhap.css),
     .btn / .btn--primary / .btn--ghost, .link-arrow (styles.css),
     .cta-banner--navy (pages.css), .icon-<name> (general.css).

   LƯU Ý CASCADE (Flatsome) — lý do mọi tiêu đề dưới đây đều khai `color`:
   Flatsome in "h1..h6{color:<Customizer>}" ở wp_head priority 100, tức SAU
   file này; rule khớp thẳng thẻ luôn thắng màu kế thừa từ cha. Ngoài ra
   Flatsome còn in "h1..h6{width:100%}" nên heading nằm trong flex phải đặt
   width:auto.
   ============================================================ */

.gpd1 {
  background: var(--c-white);
}

/* ============================================================
   0. KHUNG SECTION & TIÊU ĐỀ
   ============================================================ */

.gpd1-section {
  padding-block: var(--sp-16);
}
.gpd1-section--tight {
  padding-block: var(--sp-10);
}
.gpd1-section--alt {
  background: var(--c-brand-50);
}

.gpd1-head {
  max-width: 780px;
  margin-bottom: var(--sp-10);
}

.gpd1-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.gpd1-eyebrow .icon {
  width: 18px;
  height: 18px;
  color: var(--c-cta);
}

.gpd1-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.gpd1-subtitle {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.gpd1-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.gpd1-para {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.gpd1-note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}
.gpd1-more {
  margin-top: var(--sp-5);
}

/* ============================================================
   1. THANH CHUYỂN GIỮA 5 GIẢI PHÁP
   ============================================================ */

.gpd1-switch {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-white);
}
.gpd1-switch__list {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Màn hẹp: trượt ngang thay vì xuống dòng lộn xộn. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gpd1-switch__list::-webkit-scrollbar {
  display: none;
}
.gpd1-switch__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 54px;
  padding-inline: var(--sp-4);
  white-space: nowrap;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease);
}
.gpd1-switch__link .icon {
  width: 18px;
  height: 18px;
  color: var(--c-brand-600);
}
.gpd1-switch__link:hover {
  color: var(--c-brand-700);
  border-bottom-color: var(--c-border-strong);
}
.gpd1-switch__link.is-current {
  color: var(--c-heading);
  border-bottom-color: var(--c-cta);
}
.gpd1-switch__link.is-current .icon {
  color: var(--c-cta);
}

/* ============================================================
   2. TỔNG QUAN + YÊU CẦU KỸ THUẬT
   ============================================================ */

.gpd1-overview {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-12);
  align-items: start;
}

.gpd1-criteria {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-cta);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.gpd1-criteria__title {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-heading);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
}
.gpd1-criteria__list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gpd1-criterion {
  display: flex;
  gap: var(--sp-3);
}
.gpd1-criterion__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}
.gpd1-criterion__icon .icon {
  width: 19px;
  height: 19px;
}
.gpd1-criterion b {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin-bottom: 2px;
}
.gpd1-criterion span {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   3. VẬT LIỆU ĐỀ XUẤT — KHỐI THÔNG SỐ
   ============================================================ */

.gpd1-materials {
  display: grid;
  gap: var(--sp-5);
}
.gpd1-material {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.gpd1-material__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-brand-900);
}
.gpd1-material__name {
  /* Flex item — trả width về auto để không dính "h3{width:100%}" của Flatsome. */
  width: auto;
  min-width: 0;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.gpd1-material__use {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: rgb(255 255 255 / 76%);
}

/* Lưới thông số: dùng <dl> nên nhãn và giá trị luôn đi cặp, kể cả khi
   xuống 1 cột ở mobile — khác hẳn <table> phải nhờ data-label mới đọc được. */
.gpd1-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--c-divider);
  border-top: 1px solid var(--c-divider);
}
.gpd1-spec {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
}
.gpd1-spec dt {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.gpd1-spec dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* ============================================================
   4. BẢNG PHỤ (cửa kho lạnh, cụm máy...)
   ============================================================ */

/* Khung cuộn ngang riêng cho bảng: bảng rộng thì CHÍNH NÓ cuộn, thân trang
   không bao giờ bị đẩy tràn ngang. */
.gpd1-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gpd1-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 22px;
  /* Bảng thông số nhiều cột — không cho bóp cột xuống quá hẹp. */
  min-width: 720px;
}
.gpd1-table th,
.gpd1-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-divider);
}
.gpd1-table thead th {
  position: sticky;
  top: 0;
  background: var(--c-brand-900);
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gpd1-table tbody th {
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  white-space: nowrap;
}
.gpd1-table tbody td {
  color: var(--c-text-secondary);
}
.gpd1-table tbody tr:last-child th,
.gpd1-table tbody tr:last-child td {
  border-bottom: 0;
}
.gpd1-table tbody tr:nth-child(even) th,
.gpd1-table tbody tr:nth-child(even) td {
  background: var(--c-surface-subtle);
}

/* ============================================================
   5. HẠNG MỤC ÁP DỤNG
   ============================================================ */

.gpd1-scope {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--sp-12);
  align-items: center;
}
.gpd1-checklist {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.gpd1-checklist li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 25px;
  color: var(--c-text-secondary);
}
.gpd1-checklist .icon {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--c-cta);
}
.gpd1-figure {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.gpd1-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-project);
  object-fit: cover;
}

/* ============================================================
   6. QUY TRÌNH 4 BƯỚC
   ============================================================ */

.gpd1-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.gpd1-step {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
/* Số 01-04 của các bước đánh bằng bộ đếm CSS: trong UX Builder mỗi bước được render
   riêng nên PHP không biết bước đứng thứ mấy (xem CMS_Helpers::uxbChildSlot). Để CSS
   đếm thì kéo đổi thứ tự là số tự đánh lại ngay. */
.gpd1-steps { counter-reset: gpd1-step; }
.gpd1-step { counter-increment: gpd1-step; }
.gpd1-step__num::before { content: counter(gpd1-step, decimal-leading-zero); }

.gpd1-step__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-size: 34px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  color: var(--c-brand-100);
  pointer-events: none;
}
.gpd1-step__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-cta);
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.gpd1-step__icon .icon {
  width: 23px;
  height: 23px;
}
.gpd1-step__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.gpd1-step__text {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   7. DỰ ÁN THAM CHIẾU
   ============================================================ */

.gpd1-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-6);
}
.gpd1-project {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.gpd1-project__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-project);
  object-fit: cover;
}
.gpd1-project__body {
  padding: var(--sp-5);
}
.gpd1-project__name {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.gpd1-project__meta {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}
.gpd1-project__meta > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--sp-3);
}
.gpd1-project__meta dt {
  font-size: var(--fs-caption);
  line-height: 20px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.gpd1-project__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--c-text);
}

/* ============================================================
   8. RESPONSIVE — bám đúng 3 breakpoint của tokens.css
   ============================================================ */

/* ---------- ≤ 1199px ---------- */
@media (max-width: 1199px) {
  .gpd1-section {
    padding-block: var(--sp-12);
  }
  .gpd1-overview,
  .gpd1-scope {
    gap: var(--sp-8);
  }
  .gpd1-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gpd1-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- ≤ 991px ---------- */
@media (max-width: 991px) {
  .gpd1-overview,
  .gpd1-scope {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ảnh minh hoạ xuống dưới phần chữ khi đã xếp dọc. */
  .gpd1-figure {
    order: 2;
  }
  .gpd1-head {
    margin-bottom: var(--sp-6);
  }
}

/* ---------- ≤ 767px ---------- */
@media (max-width: 767px) {
  .gpd1-section {
    padding-block: var(--sp-10);
  }
  .gpd1-section--tight {
    padding-block: var(--sp-8);
  }
  .gpd1-switch__link {
    height: 48px;
    padding-inline: var(--sp-3);
  }
  .gpd1-criteria,
  .gpd1-step,
  .gpd1-project__body {
    padding: var(--sp-5);
  }
  .gpd1-specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .gpd1-material__head {
    padding: var(--sp-4) var(--sp-5);
  }
  .gpd1-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .gpd1-projects {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Nhãn - giá trị của dự án xếp chồng cho dễ đọc ở khổ hẹp. */
  .gpd1-project__meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  /* thead sticky vô nghĩa khi bảng đang cuộn ngang trong khung nhỏ. */
  .gpd1-table thead th {
    position: static;
  }
}

/* ============================================================
   9. GIẢM CHUYỂN ĐỘNG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gpd1-switch__link {
    transition: none;
  }
}

/* ===== tuyenDung.css ===== */
/* ============================================================
   tuyenDung.css — Trang Tuyển dụng (/tuyen-dung/)
   Template: page-tuyen-dung.php
   JS      : assets/js/tuyenDung.js
   Form    : Contact Form 7 "Tuyển dụng - Ứng tuyển" (ID 583)

   Mọi class mang tiền tố .td- nên độc lập với các trang khác.

   Tái sử dụng: .container, .page-hero* (pageHero.css),
   .page-hero__badges / .page-hero__badge (giaiPhap.css), .breadcrumb,
   .btn / .btn--primary / .btn--block, .link-arrow (styles.css),
   .icon-<name> (general.css).

   LƯU Ý CASCADE (Flatsome): Flatsome in "h1..h6{color:<Customizer>}" ở
   wp_head priority 100 — SAU file này — và rule khớp thẳng thẻ luôn thắng
   màu kế thừa, nên mọi tiêu đề bên dưới đều khai `color` tường minh.
   Flatsome cũng in "h1..h6{width:100%}": heading trong flex đặt width:auto.
   ============================================================ */

.td {
  background: var(--c-white);
}

/* ============================================================
   0. KHUNG SECTION & TIÊU ĐỀ
   ============================================================ */

.td-section {
  padding-block: var(--sp-16);
}
.td-section--alt {
  background: var(--c-brand-50);
}

.td-head {
  max-width: 780px;
  margin-bottom: var(--sp-10);
}
.td-head--center {
  margin-inline: auto;
  text-align: center;
}

.td-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.td-eyebrow--light {
  color: #8fbde9;
}

.td-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.td-title--light {
  color: var(--c-white);
}
.td-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* ============================================================
   1. DẢI SỐ LIỆU (đè lên hero)
   ============================================================ */

.td-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: -44px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 2;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-stats);
}
.td-stat {
  background: var(--c-white);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.td-stat__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto var(--sp-2);
  color: var(--c-brand-600);
}
.td-stat__value {
  display: block;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-brand-900);
}
.td-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ============================================================
   2. VÌ SAO CHỌN PHÚ SƠN
   ============================================================ */

.td-reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.td-reason {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.td-reason:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}
.td-reason__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  margin-bottom: var(--sp-4);
}
.td-reason__icon .icon {
  width: 26px;
  height: 26px;
}
.td-reason__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.td-reason__text {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* Triết lý nền tảng */
.td-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin: var(--sp-10) 0 0;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-cta);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.td-quote__mark {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}
.td-quote__mark .icon {
  width: 26px;
  height: 26px;
}
.td-quote__text {
  font-size: 19px;
  line-height: 31px;
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--c-heading);
}
.td-quote__src {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

/* ============================================================
   3. PHÚC LỢI & MÔI TRƯỜNG
   ============================================================ */

.td-split {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--sp-12);
  align-items: center;
}
.td-checklist {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.td-checklist li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 25px;
  color: var(--c-text-secondary);
}
.td-checklist .icon {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--c-cta);
}
.td-figure {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.td-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-project);
  object-fit: cover;
}

.td-env {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}
.td-env__card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.td-env__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-cta);
  color: var(--c-white);
}
.td-env__icon .icon {
  width: 22px;
  height: 22px;
}
.td-env__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 3px;
}
.td-env__text {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   4. VỊ TRÍ ĐANG TUYỂN
   ============================================================ */

.td-jobs {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-cta);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur-normal) var(--ease);
}
.td-job:hover {
  box-shadow: var(--sh-card-hover);
}
.td-job__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.td-job__desc {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.td-job__meta {
  display: grid;
  gap: var(--sp-2);
}
.td-job__meta span {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--c-text-secondary);
}
.td-job__meta .icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--c-brand-600);
}
.td-job__apply {
  flex: none;
  white-space: nowrap;
}

/* ============================================================
   5. QUY TRÌNH
   ============================================================ */

.td-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-step {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
/* Số 01-04 của các bước đánh bằng bộ đếm CSS: trong UX Builder mỗi bước được render
   riêng nên PHP không biết bước đứng thứ mấy (xem CMS_Helpers::uxbChildSlot). */
.td-steps { counter-reset: td-step; }
.td-step { counter-increment: td-step; }
.td-step__num::before { content: counter(td-step, decimal-leading-zero); }

.td-step__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-size: 34px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  color: var(--c-brand-100);
  pointer-events: none;
}
.td-step__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-cta);
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.td-step__icon .icon {
  width: 23px;
  height: 23px;
}
.td-step__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.td-step__text {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   6. KHỐI ỨNG TUYỂN + FORM CF7
   ============================================================ */

.td-apply {
  background: linear-gradient(
    100deg,
    var(--c-brand-950) 0%,
    var(--c-brand-800) 100%
  );
  color: var(--c-white);
}
.td-apply__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-12);
  align-items: start;
}
.td-apply__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgb(255 255 255 / 82%);
  margin-bottom: var(--sp-8);
}
.td-apply__subtitle {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 70%);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.td-locations {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-locations li {
  display: flex;
  gap: var(--sp-3);
}
.td-locations .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: #7fd3a3;
}
.td-locations b {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.td-locations span span {
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgb(255 255 255 / 74%);
}
.td-apply__more {
  margin-top: var(--sp-6);
}
/* Khai màu ở CẢ trạng thái hover: "a:hover{color:...}" mà Flatsome in ra từ
   Customizer có specificity cao hơn class đơn nên sẽ đổi màu link nếu không đè. */
.td-apply__more .link-arrow,
.td-apply__more .link-arrow:hover {
  color: var(--c-white);
}

/* ---------- Khung form ---------- */
.td-form {
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card-hover);
}
.td-form__missing {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Lưới trường — markup do form CF7 quy định (xem nội dung form trong admin:
   Contact Form 7 > "Tuyển dụng - Ứng tuyển"). */
.td-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.td-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.td-form .field--full,
.td-form__note {
  grid-column: 1 / -1;
}
.td-form .field__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.td-form .req {
  color: #d1584f;
}
.td-form .field__hint {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* CF7 bọc mỗi tag trong <span class="wpcf7-form-control-wrap"> — span mặc định
   là inline nên input bên trong không ăn width:100%. Ép về block trước. */
.td-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Đặt lại style input của Flatsome/WooCommerce (bo góc, đổ bóng trong, chiều
   cao lệch nhau giữa input và select) để cả bộ trường trông như một. */
.td-form input[type="text"],
.td-form input[type="tel"],
.td-form input[type="email"],
.td-form input[type="file"],
.td-form select,
.td-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-btn);
  background: var(--c-white);
  box-shadow: none;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text);
}
.td-form textarea {
  min-height: 96px;
  resize: vertical;
}
.td-form input:focus,
.td-form select:focus,
.td-form textarea:focus {
  border-color: var(--c-brand-500);
  outline: 2px solid rgb(23 107 181 / 22%);
  outline-offset: 0;
}
/* Ô chọn tệp: nút "Browse" của trình duyệt không canh giữa được theo chiều dọc
   nếu giữ padding như input chữ — giảm padding trên/dưới cho cân. */
.td-form input[type="file"] {
  padding: 9px 12px;
  cursor: pointer;
}

.td-form__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}
.td-form__note .icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--c-cta);
}
.td-form__submit {
  margin-top: var(--sp-5);
}

/* ---------- Thông báo & lỗi của CF7 ---------- */
.td-form .wpcf7-not-valid-tip {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #d1584f;
}
.td-form input.wpcf7-not-valid,
.td-form select.wpcf7-not-valid,
.td-form textarea.wpcf7-not-valid {
  border-color: #d1584f;
}
.td-form .wpcf7-response-output {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-btn);
  border-width: 1px;
  font-size: var(--fs-small);
  line-height: 22px;
}
.td-form form.sent .wpcf7-response-output {
  border-color: var(--c-cta);
  background: rgb(2 116 57 / 8%);
  color: var(--c-cta-hover);
}
.td-form form.invalid .wpcf7-response-output,
.td-form form.failed .wpcf7-response-output {
  border-color: #d1584f;
  background: rgb(209 88 79 / 8%);
  color: #a33a32;
}
/* Vòng quay lúc đang gửi — CF7 tự chèn, mặc định lệch khỏi nút. */
.td-form .wpcf7-spinner {
  vertical-align: middle;
}

/* ============================================================
   7. RESPONSIVE — bám đúng 3 breakpoint của tokens.css
   ============================================================ */

/* ---------- ≤ 1199px ---------- */
@media (max-width: 1199px) {
  .td-section {
    padding-block: var(--sp-12);
  }
  .td-reasons,
  .td-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .td-split,
  .td-apply__grid {
    gap: var(--sp-8);
  }
  /* Cột meta bóp lại để tiêu đề vị trí còn chỗ thở. */
  .td-job {
    grid-template-columns: minmax(0, 1fr) 220px auto;
    gap: var(--sp-4);
  }
}

/* ---------- ≤ 991px ---------- */
@media (max-width: 991px) {
  .td-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .td-split,
  .td-apply__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ảnh xuống dưới phần chữ khi đã xếp dọc. */
  .td-figure {
    order: 2;
  }
  .td-env {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-6);
  }
  /* Thẻ vị trí: meta và nút xuống dưới phần mô tả. */
  .td-job {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
  .td-job__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .td-job__apply {
    justify-self: start;
  }
  .td-head {
    margin-bottom: var(--sp-6);
  }
}

/* ---------- ≤ 767px ---------- */
@media (max-width: 767px) {
  .td-section {
    padding-block: var(--sp-10);
  }
  /* Dải số liệu không đè lên hero nữa: hero mobile cao hơn nhiều, kéo âm
     sẽ che mất phụ đề. */
  .td-stats {
    margin-top: 0;
    border-radius: 0;
    border-inline: 0;
  }
  .td-stat {
    padding: var(--sp-4) var(--sp-3);
  }
  .td-reasons,
  .td-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .td-reason,
  .td-step,
  .td-job,
  .td-form {
    padding: var(--sp-5);
  }
  /* Thư ngỏ: bỏ cột icon, dồn 1 cột cho đỡ chật. */
  .td-quote {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-top: var(--sp-6);
  }
  .td-quote__text {
    font-size: 17px;
    line-height: 27px;
  }
  .td-job__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .td-job__apply {
    width: 100%;
  }
  /* Form về 1 cột: 2 cột ở khổ này khiến label viết hoa bị ngắt dòng xấu. */
  .td-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   8. GIẢM CHUYỂN ĐỘNG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .td-reason,
  .td-job {
    transition: none;
  }
  .td-reason:hover {
    transform: none;
  }
}

/* ===== chungChi.css ===== */
/* ============================================================
   chungChi.css — Trang Chứng chỉ & giải thưởng (/chung-chi/)
   Template: page-chung-chi.php

   Mọi class mang tiền tố .cc- nên độc lập với .cert-grid/.certificate-card
   trong pages.css (đang phục vụ khối chứng chỉ thu nhỏ ở trang Giới thiệu).

   Tái sử dụng: .container, .page-hero* (pageHero.css), .breadcrumb,
   .product-tabs (sanPham.css), .btn / .link-arrow (styles.css),
   .cta-banner--navy (pages.css), .icon-<name> (general.css).

   LƯU Ý CASCADE (Flatsome): Flatsome in "h1..h6{color:<Customizer>}" ở
   wp_head priority 100 — SAU file này — và rule khớp thẳng thẻ luôn thắng
   màu kế thừa, nên mọi tiêu đề bên dưới đều khai `color` tường minh.
   ============================================================ */

.cc {
  background: var(--c-white);
}

/* ============================================================
   0. KHUNG SECTION & TIÊU ĐỀ
   ============================================================ */

.cc-section {
  padding-block: var(--sp-16);
}
.cc-section--tight {
  padding-block: var(--sp-10);
}
.cc-section--alt {
  background: var(--c-brand-50);
}

.cc-head {
  max-width: 800px;
  margin-bottom: var(--sp-10);
}
.cc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.cc-eyebrow .icon {
  width: 18px;
  height: 18px;
  color: var(--c-cta);
}
.cc-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.cc-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.cc-more {
  margin-top: var(--sp-5);
  text-align: center;
}

/* ============================================================
   1. CHỨNG NHẬN HỆ THỐNG QUẢN LÝ
   ============================================================ */

.cc-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.cc-cert {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.cc-cert:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}
/* Nền xám nhạt phía sau ảnh chứng chỉ: file gốc nền trắng, đặt thẳng lên card
   trắng thì mất viền, không rõ đâu là mép tờ chứng chỉ. */
.cc-cert__media {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--c-surface-subtle);
  border-bottom: 1px solid var(--c-divider);
}
.cc-cert__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 132px;
  object-fit: contain;
}
.cc-cert__body {
  padding: var(--sp-5);
  flex: 1;
}
.cc-cert__name {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 4px;
}
.cc-cert__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.cc-cert__note {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ---------- Dấu công nhận (accreditation) ---------- */
.cc-accred {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
}
.cc-accred__title {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}
.cc-accred__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-accred__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.cc-accred__item img {
  width: 64px;
  height: auto;
  flex: none;
  object-fit: contain;
}
.cc-accred__item b {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.cc-accred__item span {
  font-size: var(--fs-small);
  line-height: 21px;
  color: var(--c-text-secondary);
}

/* ============================================================
   2. SÁNG CHẾ & BẰNG ĐỘC QUYỀN
   ============================================================ */

.cc-patent {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sp-8);
  align-items: start;
}

/* Khối số lớn bên trái */
.cc-patent__count {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-card);
  background: linear-gradient(
    150deg,
    var(--c-brand-950) 0%,
    var(--c-brand-700) 100%
  );
  color: var(--c-white);
  text-align: center;
  box-shadow: var(--sh-card);
}
.cc-patent__num {
  font-size: 84px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.05em;
  color: var(--c-white);
}
.cc-patent__label {
  font-size: var(--fs-small);
  line-height: 21px;
  font-weight: var(--fw-semibold);
  color: rgb(255 255 255 / 84%);
}
.cc-patent__brand {
  margin-top: var(--sp-2);
  padding: 5px 16px;
  border-radius: var(--r-round);
  background: var(--c-cta);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-patent__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-4);
}
.cc-patent__body strong {
  color: var(--c-heading);
  font-weight: var(--fw-semibold);
}
.cc-patent__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-patent__list li {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.cc-patent__icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}
.cc-patent__icon .icon {
  width: 21px;
  height: 21px;
}
.cc-patent__list b {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: 3px;
}
.cc-patent__year {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}
.cc-patent__list span {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   3. GIẢI THƯỞNG & DANH HIỆU
   ============================================================ */

.cc-awards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-award {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-cta);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
.cc-award__icon {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  /* Vàng đồng cho huy chương/danh hiệu — khác hẳn xanh thương hiệu để mắt
     phân biệt ngay đây là khối giải thưởng. */
  background: #f6efdd;
  color: #a97c2b;
}
.cc-award__icon .icon {
  width: 24px;
  height: 24px;
}
.cc-award__year {
  grid-column: 2;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  color: var(--c-cta);
}
.cc-award__name {
  grid-column: 2;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}

.cc-note {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}
.cc-note .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--c-brand-600);
}

/* ============================================================
   4. RESPONSIVE — bám đúng 3 breakpoint của tokens.css
   ============================================================ */

/* ---------- ≤ 1199px ---------- */
@media (max-width: 1199px) {
  .cc-section {
    padding-block: var(--sp-12);
  }
  .cc-awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cc-patent {
    gap: var(--sp-6);
  }
  .cc-patent__num {
    font-size: 68px;
  }
}

/* ---------- ≤ 991px ---------- */
@media (max-width: 991px) {
  .cc-certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Khối số lớn nằm ngang phía trên phần chữ cho đỡ chiếm chiều cao. */
  .cc-patent {
    grid-template-columns: minmax(0, 1fr);
  }
  .cc-patent__count {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: var(--sp-2) var(--sp-6);
    padding: var(--sp-6);
    text-align: left;
  }
  .cc-patent__num {
    grid-row: 1 / 3;
    font-size: 64px;
  }
  .cc-head {
    margin-bottom: var(--sp-6);
  }
}

/* ---------- ≤ 767px ---------- */
@media (max-width: 767px) {
  .cc-section {
    padding-block: var(--sp-10);
  }
  .cc-section--tight {
    padding-block: var(--sp-8);
  }
  .cc-certs,
  .cc-awards,
  .cc-accred__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .cc-cert__body,
  .cc-accred,
  .cc-award {
    padding: var(--sp-5);
  }
  .cc-cert__media {
    padding: var(--sp-5);
  }
  .cc-cert__media img {
    height: 112px;
  }
  .cc-patent__list li {
    padding: var(--sp-4);
  }
  .cc-patent__count {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .cc-patent__num {
    grid-row: auto;
    font-size: 56px;
  }
}

/* ============================================================
   1B. BẢN SCAN CHỨNG NHẬN - GIẢI THƯỞNG
   Ảnh cắt từ profile in nên tỉ lệ không đồng nhất (dọc A4 và ngang A5).
   Ô ảnh cố định chiều cao + object-fit:contain trên nền trắng để hàng thẻ
   thẳng nhau mà không cắt mất nội dung giấy tờ.
   ============================================================ */

.cc-scan__group {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin-bottom: var(--sp-5);
}
.cc-scan__group + .cc-scans {
  margin-bottom: var(--sp-10);
}

.cc-scans {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-scan {
  margin: 0;
}
.cc-scan__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cc-scan__link:hover,
.cc-scan__link:focus-visible {
  border-color: var(--c-cta);
  box-shadow: var(--sh-card-hover);
}
.cc-scan__link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Nút kính lúp — chỉ hiện khi hover/focus, giống .pd-gallery__zoom ở trang dự án. */
.cc-scan__zoom {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--c-cta);
  color: var(--c-white);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cc-scan__zoom .icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.cc-scan__link:hover .cc-scan__zoom,
.cc-scan__link:focus-visible .cc-scan__zoom {
  opacity: 1;
  transform: translateY(0);
}

.cc-scan__name {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.cc-scan__meta {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-secondary);
}

@media (max-width: 1199px) {
  .cc-scans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 849px) {
  .cc-scans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cc-scan__link {
    height: 180px;
  }
}
@media (max-width: 549px) {
  .cc-scans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .cc-scan__link {
    height: 165px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-scan__link,
  .cc-scan__zoom {
    transition: none;
  }
}

/* ============================================================
   5. GIẢM CHUYỂN ĐỘNG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cc-cert {
    transition: none;
  }
  .cc-cert:hover {
    transform: none;
  }
}

/* ============================================================
   PHIẾU KIỂM ĐỊNH & VĂN BẰNG BẢN GỐC
   Khác .cc-scans (lưới ảnh thuần): mỗi tài liệu ở đây có số hiệu, đơn vị
   cấp, kết luận và link tải PDF nên cần bố cục ảnh - chữ nằm ngang.
   ============================================================ */
.cc-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-doc {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
}
.cc-doc__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface-subtle);
}
.cc-doc__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* Giấy tờ luôn dọc: khung 3:4 giữ được đầu trang có dấu và tiêu đề. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}
.cc-doc__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(2 20 43 / 74%);
  color: var(--c-white);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease);
}
.cc-doc__thumb:hover .cc-doc__zoom,
.cc-doc__thumb:focus-visible .cc-doc__zoom { opacity: 1; }
.cc-doc__meta {
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: 6px;
}
.cc-doc__name {
  font-size: 17px;
  line-height: 25px;
  font-weight: var(--fw-extrabold);
  color: var(--c-heading);
  margin-bottom: 4px;
}
.cc-doc__issuer {
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-3);
}
.cc-doc__detail {
  font-size: 13px;
  line-height: 21px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-3);
}
/* Giấy đã hết hiệu lực: viền vàng + dòng cảnh báo, không trưng như còn hạn. */
.cc-doc--warn { border-color: #e0b44c; }
.cc-doc__warn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdf6e5;
  font-size: 12px;
  line-height: 19px;
  color: #8a6212;
  margin-bottom: var(--sp-3);
}
.cc-doc__warn .icon { flex: none; margin-top: 2px; }
.cc-doc__dl { margin-bottom: 0; }
.cc-doc__dl .link-arrow { color: var(--c-cta); }

@media (max-width: 1099px) {
  .cc-docs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 549px) {
  .cc-doc { grid-template-columns: minmax(0, 1fr); }
  .cc-doc__thumb img { aspect-ratio: 4 / 3; }
}

/* ===== xuongSanXuat.css ===== */
/* ============================================================
   TRANG XƯỞNG SẢN XUẤT  (/nang-luc/xuong-san-xuat/)
   Dựng từ profile tr.30-31. Dùng lại .gt-* của trang Giới thiệu
   cho hero, tiêu đề mục và dải CTA; phần riêng của trang này
   mang tiền tố .xs-.
   ============================================================ */

/* Nhóm .xs-stats / .xs-intro cũ đã bỏ — phần đầu trang nay dựng lại theo bản
   thiết kế mới với tiền tố .xf-, xem cuối file. */

/* ---------- Thư viện ảnh ---------- */
.xs-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.xs-gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-brand-900);
}
/* Ảnh đầu chiếm 2 cột x 2 hàng làm điểm nhấn của dải. */
.xs-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
.xs-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease);
}
.xs-gallery__item:not(.xs-gallery__item--wide) { aspect-ratio: 3 / 2; }
.xs-gallery__item:hover img { transform: scale(1.04); }
.xs-gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgb(4 26 52 / 92%), rgb(4 26 52 / 0%));
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

@media (max-width: 1099px) {
  .xs-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .xs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .xs-gallery { grid-template-columns: minmax(0, 1fr); }
  /* Ảnh nhấn về đúng một ô như các ảnh khác, span 2 ở lưới 1 cột là vô nghĩa. */
  .xs-gallery__item--wide { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; }
}

/* Nhóm .xs-table* và .xs-quote* cũ đã bỏ — khối thông số cơ sở nay dựng lại
   theo bản thiết kế mới với tiền tố .fp-, xem cuối file. */

/* ============================================================
   PHẦN ĐẦU TRANG — bản thiết kế mới
   Hero có 2 nút + gợi ý cuộn · dải 3 số liệu đè lên hero ·
   khối giới thiệu có gạch đầu dòng và ảnh gắn nhãn ·
   dải 4 bước quy trình vận hành.
   ============================================================ */

/* ---------- Hero ---------- */
/* Lớp phủ chuyển từ navy đặc bên trái sang trong suốt bên phải: chữ đọc rõ mà
   vẫn thấy dây chuyền phía sau. Đặt trên .bg của Flatsome nên không cần thêm thẻ. */
.xf-hero .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(6 42 82 / 96%) 0%, rgb(6 42 82 / 88%) 34%, rgb(6 42 82 / 45%) 68%, rgb(6 42 82 / 15%) 100%);
}
.xf-hero .page-hero__inner { padding-block: var(--sp-12) 120px; }
/* 16ch bó tiêu đề còn ~430px nên nó vỡ hai dòng; đặt theo px để nằm gọn một
   dòng ở desktop, các khổ nhỏ đã có bước thu cỡ chữ bên dưới. */
.xf-hero__title { max-width: 660px; font-size: 52px; line-height: 62px; text-wrap: balance; }
.xf-hero__sub { max-width: 46ch; }
.xf-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
/* Tên lớp riêng, KHÔNG dùng .btn — Flatsome nạp bộ rule .btn sau CSS theme con
   và sẽ ghi đè viền/bo góc/padding. */
.xf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 15px var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.xf-btn img { width: 20px; height: 20px; flex: none; }
.xf-btn--solid { background: var(--c-cta); color: var(--c-white); border: 1px solid var(--c-cta); }
.xf-btn--solid:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-white); }
.xf-btn--ghost { background: rgb(255 255 255 / 8%); color: var(--c-white); border: 1px solid rgb(255 255 255 / 55%); }
.xf-btn--ghost:hover { background: rgb(255 255 255 / 18%); border-color: var(--c-white); color: var(--c-white); }

.xf-hero__scroll {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 78%);
}
.xf-hero__scroll img { width: 26px; height: 26px; }

/* ---------- Dải 3 số liệu ---------- */
.xf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: -78px;
  position: relative;
  z-index: 2;
  background: var(--c-white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-stats);
}
/* KHÔNG dùng var(--sp-7): thang token nhảy từ --sp-6 (24px) sang --sp-8 (32px),
   biến đó không tồn tại nên trình duyệt HUỶ CẢ khai báo padding — ô về padding 0,
   icon dính góc trên bên trái và đè lên gạch xanh. */
.xf-stat { position: relative; padding: var(--sp-6); text-align: center; }
.xf-stat + .xf-stat { border-left: 1px solid var(--c-divider); }
/*
 * Gạch xanh ngắn nằm TRONG ô, phía trên icon — để nó theo luồng thường thay vì
 * neo tuyệt đối vào top:0. Neo ở mép trên thì .xf-stats có overflow:hidden cắt
 * mất một nửa, gạch chỉ còn là một vệt mờ dính vào viền thẻ.
 */
.xf-stat::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--c-cta);
  margin: 0 auto var(--sp-5);
}
.xf-stat__icon { display: block; width: 62px; height: 62px; margin: 0 auto var(--sp-4); }
.xf-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 46px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.035em;
  color: var(--c-brand-900);
  margin-bottom: var(--sp-2);
}
.xf-stat__value span {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--c-cta);
}
.xf-stat__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* ---------- Giới thiệu ---------- */
.xf-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.05fr;
  gap: var(--sp-10);
  align-items: center;
}
.xf-checks {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  padding: 0;
  list-style: none;
}
.xf-checks li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text);
}
.xf-checks img { width: 24px; height: 24px; flex: none; }

.xf-figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.xf-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Hai nhãn nằm đè đáy ảnh: một navy đặc bên trái, một trắng bên phải. */
.xf-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.xf-figure__tag {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-brand-900);
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-semibold);
}
.xf-figure__note {
  padding: 12px var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-heading);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}
.xf-figure__note i { font-style: normal; margin: 0 6px; color: var(--c-cta); }

/* ---------- 4 bước quy trình ---------- */
/*
 * Nền xanh rất nhạt ngả tím thay cho --c-surface-subtle (xám trung tính): dải
 * này nằm giữa hai vùng trắng nên cần một sắc nền đủ khác để tách ra, mà vẫn
 * không cướp chú ý của icon.
 *
 * Bỏ viền: nền đã đủ tách khối, thêm viền thành hai đường ranh giới chồng nhau.
 */
.xf-steps {
  padding: var(--sp-10);
  border-radius: var(--r-card);
  background: #f2f5fb;
  border: 0;
}
/*
 * gap ngang cố định + vạch nối tràn đúng bằng gap: bốn cột rộng bằng nhau, lề
 * trái phải của cả dải cân nhau, mà mạch vạch vẫn chạy liền từ mốc 01 tới 04.
 * Bản trước dùng padding-right cho ba cột đầu nên cột cuối rộng hơn ba cột kia.
 */
.xf-steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-8);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
.xf-step { position: relative; margin: 0; }
/*
 * Vạch nối vẽ bằng ::after của từng bước, chạy từ mép phải chấm số sang chấm kế.
 * Bước CUỐI không có vạch: cho nó chạy tiếp ra mép dải thì đoạn đó không dẫn tới
 * đâu và bị mép thẻ cắt cụt.
 */
.xf-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 58px;
  right: calc((var(--sp-8) + 18px) * -1);
  height: 2px;
  background: var(--c-border);
}
.xf-step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(var(--sp-8) * -1);
  right: calc(100% - 18px);
  height: 2px;
  background: var(--c-border);
}
/* Mốc đầu không có vạch dẫn vào — mạch bắt đầu từ chính chấm 01. */
.xf-step:first-child::before { display: none; }
.xf-step:nth-child(4)::before { background: var(--c-cta); }
.xf-step:last-child::before { right: calc(100% - 18px); }
/* Số thứ tự đánh bằng bộ đếm CSS: trong UX Builder mỗi bước / mỗi cơ sở được render
   riêng nên PHP không biết nó đứng thứ mấy (xem CMS_Helpers::uxbChildSlot). */
.xf-steps__list { counter-reset: xf-step; }
.xf-step { counter-increment: xf-step; }
.xf-step__num::before { content: counter(xf-step, decimal-leading-zero); }
.fp-list { counter-reset: fp-item; }
.fp-item { counter-increment: fp-item; }
.fp-item__num::before { content: counter(fp-item, decimal-leading-zero); }

.xf-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-brand-900);
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
  /* Lệch trái 18px = (icon 76 - chấm 40) / 2. Đo thực tế: 20px cho lệch +2,
     16px cho lệch -2, 18px đúng tâm. Chữ vẫn canh trái theo mép icon. */
  margin: 0 0 var(--sp-5) 18px;
}
/* Bước kiểm định dùng icon xanh lá nên chấm số cũng xanh cho khớp, và đoạn nối
   ĐI RA từ bước đó cũng xanh — mạch xanh dẫn từ khâu kiểm định sang thành phẩm. */
.xf-step:nth-child(3) .xf-step__num { background: var(--c-cta); }
.xf-step:nth-child(3)::after { background: var(--c-cta); }
.xf-step__icon { display: block; width: 76px; height: 76px; margin: 0 0 var(--sp-4); }
.xf-step__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.xf-step:nth-child(3) .xf-step__title { color: var(--c-cta); }
.xf-step__text {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--c-text-secondary);
}

@media (max-width: 1099px) {
  .xf-hero__title { font-size: 40px; line-height: 50px; }
  .xf-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .xf-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
  /* Xuống 2 cột thì vạch nối chỉ còn đúng ở cột đầu mỗi hàng. */
  .xf-step:nth-child(even)::after { display: none; }
  .xf-step:nth-child(odd)::before { display: none; }
}
@media (max-width: 767px) {
  .xf-stats { grid-template-columns: minmax(0, 1fr); margin-top: -48px; }
  .xf-stat + .xf-stat { border-left: 0; border-top: 1px solid var(--c-divider); }
  .xf-hero .page-hero__inner { padding-block: var(--sp-8) 90px; }
}
@media (max-width: 599px) {
  .xf-hero__title { font-size: 30px; line-height: 40px; }
  .xf-hero__sub br { display: none; }
  .xf-hero__cta { flex-direction: column; align-items: stretch; }
  .xf-btn { justify-content: center; }
  .xf-stat__value { font-size: 36px; }
  .xf-steps { padding: var(--sp-6); }
  .xf-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .xf-step::after,
  .xf-step::before { display: none !important; }
  .xf-figure figcaption { flex-direction: column; align-items: stretch; }
  .gt-title br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xf-btn { transition: none; }
}

/* ============================================================
   THÔNG SỐ CƠ SỞ + CAM KẾT ĐẦU TƯ — bản thiết kế mới
   Danh sách 3 dòng thay cho thẻ <table>, kèm dải trích dẫn navy.
   ============================================================ */

.fp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.fp-head .gt-title { margin-bottom: 0; }
.fp-head__note {
  flex: 1 1 320px;
  max-width: 560px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  text-align: right;
  margin-bottom: 0;
}

/* ---------- Danh sách 3 cơ sở ---------- */
.fp-list {
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
}
/*
 * Lưới cố định thay vì <table>: cùng canh cột giữa ba dòng nhưng ở khổ hẹp có
 * thể đổi thành xếp dọc, không phải cuộn ngang như bảng.
 */
.fp-item {
  display: grid;
  grid-template-columns: 64px 96px minmax(160px, 0.9fr) minmax(0, 2fr) minmax(150px, 0.85fr);
  gap: var(--sp-5);
  align-items: center;
  margin: 0;
  padding: var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-5);
}
.fp-item + .fp-item { border-top: 1px solid var(--c-divider); }
/* Dòng cuối khác kiểu đo (đếm dây chuyền, không phải m²) nên tô nền và kẻ dọc. */
.fp-item--accent {
  background: #f2f9f5;
  box-shadow: inset 4px 0 0 var(--c-cta);
}

.fp-item__num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  font-size: var(--fs-body);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.fp-item--accent .fp-item__num { background: #e2f2e8; color: var(--c-cta); }

.fp-item__icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: #eef4fd;
}
.fp-item--accent .fp-item__icon { background: #e6f5ec; }
.fp-item__icon img { width: 60px; height: 60px; object-fit: contain; }

.fp-item__name b {
  display: block;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: 2px;
}
.fp-item--accent .fp-item__name b { color: var(--c-cta); }
.fp-item__name i,
.fp-item__addr i {
  display: block;
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-muted);
}

/* Vạch dọc ngăn tên - địa chỉ - con số, thay cho đường kẻ của bảng. */
.fp-item__addr,
.fp-item__num-value {
  position: relative;
  padding-left: var(--sp-6);
}
.fp-item__addr::before,
.fp-item__num-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 62px;
  background: var(--c-divider);
}
.fp-item--accent .fp-item__addr::before,
.fp-item--accent .fp-item__num-value::before { background: rgb(2 116 57 / 20%); }

.fp-item__addr {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--c-text);
}
.fp-item__num-value { text-align: center; }
.fp-item__num-value b {
  display: block;
  font-size: 30px;
  line-height: 38px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
}
.fp-item__num-value i {
  display: block;
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-cta);
}

/* ---------- Dải cam kết đầu tư ---------- */
.fp-quote {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin: 0;
  padding: var(--sp-10);
  border-radius: var(--r-card);
  background: var(--c-brand-900);
  color: var(--c-white);
}
/* Ảnh xưởng mờ ở nửa phải làm nền, không chen vào vùng chữ bên trái. */
.fp-quote::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  background: url("/wp-content/uploads/2026/07/xuong-day-chuyen-panel.webp") center / cover no-repeat;
  opacity: 0.16;
  /* Tan dần về bên trái để không có đường cắt dọc cứng giữa ảnh và nền navy. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  pointer-events: none;
}
.fp-quote > * { position: relative; z-index: 1; }
.fp-quote__mark { width: 72px; height: 72px; opacity: 0.55; }
/* Vạch xanh dẫn dọc bên trái khối chữ. */
.fp-quote__body { padding-left: var(--sp-6); border-left: 3px solid #4ade80; }
.fp-quote__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ee7a8;
  margin-bottom: var(--sp-4);
}
.fp-quote blockquote {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
  max-width: 60ch;
  font-size: 24px;
  line-height: 38px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--c-white);
}
.fp-quote figcaption {
  font-size: var(--fs-small);
  line-height: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
}
.fp-quote figcaption span {
  display: block;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: rgb(255 255 255 / 74%);
}
/* Nút neo ở góc dưới phải dải. Tên lớp riêng, KHÔNG dùng .btn (Flatsome nạp sau
   và ghi đè viền/bo góc/padding). */
.fp-quote__btn {
  position: absolute;
  right: var(--sp-10);
  bottom: var(--sp-10);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-6);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--r-sm);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fp-quote__btn:hover { background: rgb(255 255 255 / 14%); border-color: var(--c-white); color: var(--c-white); }
.fp-quote__btn img { width: 20px; height: 20px; }

@media (max-width: 1099px) {
  .fp-item {
    grid-template-columns: 52px 80px minmax(0, 1fr) minmax(120px, 0.7fr);
    row-gap: var(--sp-4);
  }
  /* Địa chỉ xuống hàng riêng, trải hết bề ngang dòng. */
  .fp-item__addr { grid-column: 1 / -1; padding-left: 0; }
  .fp-item__addr::before { display: none; }
  .fp-item__icon { width: 80px; height: 80px; }
  .fp-item__icon img { width: 50px; height: 50px; }
  /* .fp-item__addr trải 1/-1 nên auto-placement đẩy con số (.fp-item__num-value)
     xuống hàng mới, rơi đúng cột 1 rộng 52px: "5.161,3 m²" tràn hẳn ra ngoài ô.
     Ghim nó về cột 4 hàng 1 đúng như thiết kế. (Ở ≤599px lưới chỉ còn 2 cột nên
     rule 1/-1 bên dưới mới là cái có tác dụng.) */
  .fp-item__num-value { grid-column: 4; grid-row: 1; }
  .fp-quote blockquote { font-size: 20px; line-height: 32px; }
  /* Cùng lỗi: bỏ position:absolute thì nút rơi vào cột dấu ngoặc kép rộng 72px,
     "Xem hồ sơ năng lực" xuống 5 dòng. Đưa về cột nội dung. */
  .fp-quote__btn { position: static; margin-top: var(--sp-6); align-self: start; grid-column: 2; justify-self: start; }
  .fp-quote::after { width: 34%; }
}
@media (max-width: 767px) {
  .fp-head { flex-direction: column; align-items: flex-start; }
  .fp-head__note { text-align: left; }
}
@media (max-width: 599px) {
  .fp-item {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: var(--sp-5);
  }
  /* Trước đây icon để grid-column:1/-1; auto-placement đẩy TÊN nhà máy về cột 1
     rộng đúng 52px nên "NHÀ MÁY SỐ 1 - NGỌC HỒI" rớt mỗi từ một dòng. Để icon
     nằm cạnh số thứ tự (cột 2) và cho tên trải hết bề ngang. */
  .fp-item__icon { grid-column: 2; justify-self: start; }
  .fp-item__name { grid-column: 1 / -1; }
  /* grid-row: auto để huỷ rule ghim hàng 1 của khối ≤1099px bên trên — ở đây
     lưới chỉ còn 2 cột và con số phải nằm cuối thẻ chứ không phải trên cùng. */
  .fp-item__num-value { grid-column: 1 / -1; grid-row: auto; padding-left: 0; text-align: left; }
  .fp-item__num-value::before { display: none; }
  .fp-quote { grid-template-columns: minmax(0, 1fr); padding: var(--sp-6); }
  .fp-quote__mark { width: 52px; height: 52px; }
  .fp-quote blockquote { font-size: 18px; line-height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-quote__btn { transition: none; }
}

/* ===== doiTac.css ===== */
/* ============================================================
   doiTac.css — Block "Đối tác - Khách hàng"
   Block: blocks/homePartners/ (shortcode cms_home_partners_shortcode)

   Dùng ở trang chủ (UX Builder) và trang Giới thiệu (gọi qua do_shortcode).
   Mọi class mang tiền tố .dt- để không đụng .partner-* hay .cert-* có sẵn.

   LƯU Ý CASCADE (Flatsome): Flatsome in "h1..h6{color:<Customizer>}" ở
   wp_head priority 100 — SAU file này — nên .dt-title/.dt-group khai màu
   tường minh.
   ============================================================ */

/* Chỉ section tự bọc mới có padding/nền riêng. Khi block đặt trong một cột
   hoặc trong .gt-section (trang Giới thiệu), template in ra <div class="dt-section">
   và phần padding do khối cha lo — nếu không sẽ chồng padding hai lớp. */
section.dt-section {
  padding-block: var(--sp-16);
  background: var(--c-white);
}

/* ---------- Tiêu đề khối ---------- */

.dt-head {
  max-width: 820px;
  margin-bottom: var(--sp-10);
}
.dt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.dt-eyebrow .icon {
  width: 18px;
  height: 18px;
  color: var(--c-cta);
}
.dt-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.dt-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}

/* ---------- Nhãn từng nhóm ---------- */

.dt-group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin-bottom: var(--sp-5);
}
.dt-group__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-round);
  background: var(--c-cta);
}
.dt-group:not(:first-of-type) {
  margin-top: var(--sp-12);
}

/* ---------- Lưới logo ----------
   Logo nguồn có tỉ lệ lệch nhau nhiều nên ô cố định chiều cao,
   ảnh contain ở giữa. Nền trắng + viền mảnh để logo nhiều màu không bị trôi. */

.dt-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-logos--bank {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 760px;
}

.dt-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: var(--sp-4);
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dt-logo:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card);
}
.dt-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Quốc gia xuất khẩu ---------- */

.dt-countries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-country {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  background: var(--c-brand-50);
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
}
.dt-country .icon {
  width: 15px;
  height: 15px;
  color: var(--c-cta);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .dt-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  section.dt-section {
    padding-block: var(--sp-12);
  }
  .dt-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dt-logo {
    height: 88px;
  }
}
@media (max-width: 549px) {
  .dt-logos,
  .dt-logos--bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .dt-logo {
    height: 76px;
    padding: var(--sp-3);
  }
  .dt-group:not(:first-of-type) {
    margin-top: var(--sp-10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-logo {
    transition: none;
  }
}

/* ============================================================
   BỐ CỤC RÚT GỌN CHO TRANG CHỦ — .dtc-*
   Template: blocks/homePartners/templates/compact.php

   Vì sao tách hẳn tiền tố .dtc- thay vì modifier của .dt-: hai bố cục gần như
   không dùng chung rule nào (bản full là các lưới logo rời xếp dọc, bản compact
   là 2 cột "logo | bản đồ" + dải ngân hàng). Trộn vào .dt-* sẽ phải override
   ngược gần hết.

   Logo chuẩn hoá theo CHIỀU CAO (46px), width:auto — ép cùng chiều rộng sẽ làm
   logo ngang (Bluescope Zacs) bé tí còn logo vuông (Hoà Phát) phình to.
   ============================================================ */

/* Nền xám nhạt để các thẻ trắng bên trong nổi lên. Phải khai ở
   "section.dtc-section" (không phải ".dtc-section") vì section cha do UX Builder
   sinh ra thường có bg trắng, và bản full .dt-section cũng khai nền trắng ở dạng
   element+class — cùng độ ưu tiên thì rule sau thắng. */
.dtc-section,
section.dtc-section {
  background: var(--c-surface-subtle);
}
section.dtc-section {
  padding-block: var(--sp-16);
}

/* ---------- Đầu khối: chữ bên trái, 3 con số bên phải ---------- */

.dtc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-bottom: var(--sp-8);
}
.dtc-head__text {
  max-width: 620px;
}
.dtc-eyebrow {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-3);
}
.dtc-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.dtc-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin: 0;
}

.dtc-stats {
  display: flex;
  gap: var(--sp-10);
  flex: none;
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 0 0;
}
.dtc-stat {
  margin: 0;
  text-align: center;
}
.dtc-stat__num {
  display: block;
  font-size: 40px;
  line-height: 44px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-brand-800);
}
.dtc-stat__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-muted);
}

/* ---------- Hai cột: logo 62% | bản đồ 38% ---------- */

.dtc-main {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--sp-5);
  align-items: stretch;
}

.dtc-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
.dtc-card__title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  margin: 0;
}
.dtc-card__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-text-muted);
  margin: var(--sp-1) 0 0;
}

.dtc-card--partners {
  display: flex;
  flex-direction: column;
}
.dtc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* ---------- Lưới logo dùng CHUNG một khung ----------
   gap 1px + nền xám tạo đường kẻ mảnh giữa các ô, thay vì 12 thẻ viền rời. */

.dtc-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--c-divider);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dtc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  margin: 0;
  /* Lề ngang 8px chứ không 12px: mỗi ô lưới chỉ rộng ~162px, nới ra 8px là logo
     bẹt (Thái Bình Xanh, Poshaco...) đứng được ở chiều cao 56px mà chưa chạm
     max-width — nếu chạm thì nó thấp hơn hẳn các logo vuông, lệch cả hàng. */
  padding: var(--sp-4) var(--sp-2);
  background: var(--c-white);
}
.dtc-logo img {
  width: auto;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  /* Hiện ĐỦ MÀU ngay, không giảm màu chờ rê chuột: các ô này không phải link nên
     hầu như không ai rê vào, để mờ là khách không đọc được tên đối tác. Bản cũ
     dùng filter: grayscale(0.55) + opacity: 0.88 cho đỡ "đánh nhau" với phần còn
     lại của trang chủ — bỏ vì đọc được tên đối tác quan trọng hơn. */
}

/* ---------- Panel bản đồ thị trường ---------- */

.dtc-card--map {
  display: flex;
  flex-direction: column;
  background: var(--c-brand-900);
  border-color: var(--c-brand-900);
  color: var(--c-white);
}
.dtc-card--map .dtc-card__title { color: var(--c-white); }
.dtc-card--map .dtc-card__sub { color: rgba(255, 255, 255, 0.72); }

/* Khung bản đồ giữ đúng tỉ lệ file SVG (950x620) để toạ độ % của các chấm
   khớp với hình. Đổi ảnh bản đồ thì phải đổi cả aspect-ratio này. */
.dtc-map {
  position: relative;
  width: 100%;
  aspect-ratio: 950 / 620;
  margin: var(--sp-5) 0;
}
.dtc-map__base {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.28);
  -webkit-mask-image: url('../imgs/world-map-muted.svg');
  mask-image: url('../imgs/world-map-muted.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* Chấm nhỏ + quầng mảnh: 5 thị trường Đông Nam Á chỉ cách nhau vài px ở kích
   thước hiển thị, chấm to hơn là dính thành một vệt. */
.dtc-map__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: var(--r-round);
  background: #7ed957;
  box-shadow: 0 0 0 2px rgba(126, 217, 87, 0.2);
}
/* Việt Nam vẽ dạng vòng rỗng để phân biệt "trụ sở" với "thị trường xuất khẩu"
   và để không che các chấm sát bên. */
.dtc-map__dot--home {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: transparent;
  border: 2px solid var(--c-white);
  box-shadow: none;
}

.dtc-markets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dtc-market {
  position: relative;
  margin: 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgba(255, 255, 255, 0.92);
}
.dtc-market::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-round);
  background: #7ed957;
}
.dtc-markets__more {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: #9fe37e;
}

/* .link-arrow (styles.css) được @import SAU doiTac.css nên phải tăng độ ưu tiên
   bằng cách gắn thêm .dtc-card--map, nếu không chữ vẫn ra xanh brand-700 trên
   nền navy (gần như đọc không nổi). */
.dtc-card--map .dtc-link-light {
  margin-top: auto;
  padding-top: var(--sp-5);
  color: var(--c-white);
}
.dtc-card--map .dtc-link-light:hover { color: #9fe37e; }

/* ---------- Dải ngân hàng ---------- */

.dtc-banks {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-5);
  padding-block: var(--sp-4);
}
.dtc-banks__text { flex: none; }
.dtc-banks__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dtc-logo--bank {
  min-height: 72px;
  border-left: 1px solid var(--c-divider);
}
.dtc-logo--bank img { height: 48px; }

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .dtc-stats { gap: var(--sp-6); }
  .dtc-stat__num { font-size: 34px; line-height: 40px; }
  .dtc-logo { min-height: 92px; }
  .dtc-logo img { height: 50px; }
}

@media (max-width: 991px) {
  section.dtc-section { padding-block: var(--sp-12); }
  .dtc-head {
    flex-direction: column;
    gap: var(--sp-6);
  }
  .dtc-stats {
    gap: var(--sp-10);
    padding-top: 0;
  }
  .dtc-stat { text-align: left; }
  /* Bản đồ xuống dưới khối logo. */
  .dtc-main { grid-template-columns: minmax(0, 1fr); }
  .dtc-map { max-width: 520px; }
  .dtc-markets { max-width: 520px; }
  .dtc-banks {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-5);
  }
  .dtc-logo--bank:nth-child(1) { border-left: 0; }
}

@media (max-width: 767px) {
  .dtc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 549px) {
  .dtc-stats {
    /* gap 20px chỉ chừa 91px/cột, thiếu vài pixel để "TRONG NƯỚC" nằm gọn một
       dòng nên nhãn đầu tiên xuống 3 dòng trong khi hai nhãn kia 2 dòng — hàng
       số liệu nhìn so le. Thu khoảng cách xuống 10px là đủ cả ba đều 2 dòng. */
    gap: 10px;
    justify-content: space-between;
  }
  /* Mặc định flex co theo tỉ lệ nội dung nên ô "ĐỐI TÁC TRONG NƯỚC" chỉ được
     81px và xuống 3 dòng trong khi hai ô kia 2 dòng. Chia đều ba cột. */
  .dtc-stat { flex: 1 1 0; min-width: 0; }
  .dtc-stat__num { font-size: 28px; line-height: 34px; }
  .dtc-card { padding: var(--sp-4); }
  .dtc-card__head { flex-wrap: wrap; }
  /* Logo 2 cột, ngân hàng 2 x 2. */
  .dtc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtc-banks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtc-logo { min-height: 84px; }
  .dtc-logo--bank { min-height: 76px; }
  .dtc-logo--bank:nth-child(odd) { border-left: 0; }
  .dtc-logo--bank:nth-child(n + 3) { border-top: 1px solid var(--c-divider); }
  .dtc-markets { grid-template-columns: minmax(0, 1fr); }
}

/* ===== video.css ===== */
/* ============================================================
   video.css — Trang Thư viện video (/video/)
   Template: page-video.php   ·   JS: assets/js/video.js

   Mọi class mang tiền tố .vd- nên độc lập với các trang khác.

   Tái sử dụng: .container, .page-hero* (pageHero.css), .breadcrumb,
   .product-tabs (sanPham.css), .btn / .link-arrow (styles.css),
   .cta-banner--navy (pages.css), .icon-<name> (general.css).

   LƯU Ý CASCADE (Flatsome): Flatsome in "h1..h6{color:<Customizer>}" ở
   wp_head priority 100 — SAU file này — nên mọi tiêu đề khai `color` tường minh.
   ============================================================ */

.vd {
  background: var(--c-white);
}

/* ============================================================
   0. KHUNG SECTION & TIÊU ĐỀ
   ============================================================ */

.vd-section {
  padding-block: var(--sp-16);
}
.vd-section--tight {
  padding-block: var(--sp-10);
}
.vd-section--alt {
  background: var(--c-brand-50);
}

.vd-head {
  max-width: 800px;
  margin-bottom: var(--sp-8);
}
.vd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: var(--sp-3);
}
.vd-eyebrow .icon {
  width: 18px;
  height: 18px;
  color: var(--c-cta);
}
.vd-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-heading);
  margin-bottom: var(--sp-3);
}
.vd-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
}
.vd-more {
  margin-top: var(--sp-5);
  text-align: center;
}

/* ============================================================
   1. LƯỚI VIDEO
   ============================================================ */

.vd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.vd-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.vd-card:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}

/* ---------- Mặt tiền video (ảnh + nút play) ----------
   Khoá tỉ lệ 16:9 ngay từ CSS để ô video KHÔNG đổi chiều cao khi JS thay <a>
   bằng <iframe> — không có thì cả lưới nhảy một nhịp lúc bấm play (layout
   shift, đúng thứ Core Web Vitals trừ điểm). */
.vd-card__play,
.vd-card__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.vd-card__play {
  position: relative;
  background: var(--c-brand-950);
  cursor: pointer;
  /* Mặt tiền video self-host là <button>, cần gỡ style nút mặc định của trình duyệt. */
  padding: 0;
  appearance: none;
  font: inherit;
  color: inherit;
}
/* Thời lượng clip — chỉ video self-host mới biết trước, video YouTube thì không. */
.vd-card__len {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgb(2 20 43 / 78%);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
}
/* Thumbnail YouTube gốc là 4:3 (hqdefault) — object-fit cắt phần viền đen
   trên/dưới để lấp đầy khung 16:9. */
.vd-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-normal) var(--ease);
}
.vd-card__play:hover .vd-card__thumb {
  opacity: 0.82;
}

/* Nút play vẽ bằng CSS: một hình tròn + tam giác dựng bằng border, không cần
   thêm file ảnh hay icon nào. */
.vd-card__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: var(--r-round);
  background: rgb(2 20 42 / 62%);
  border: 2px solid rgb(255 255 255 / 88%);
  transition: background var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.vd-card__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Dịch phải 2px vì tam giác nhìn lệch trái khi canh giữa theo hộp bao. */
  transform: translate(-42%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--c-white);
}
.vd-card__play:hover .vd-card__btn,
.vd-card__play:focus-visible .vd-card__btn {
  background: var(--c-cta);
  transform: translate(-50%, -50%) scale(1.08);
}

.vd-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1;
}
.vd-card__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  margin-bottom: var(--sp-2);
}
.vd-card__desc {
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

/* ============================================================
   2. RESPONSIVE — bám đúng 3 breakpoint của tokens.css
   ============================================================ */

/* ---------- ≤ 1199px ---------- */
@media (max-width: 1199px) {
  .vd-section {
    padding-block: var(--sp-12);
  }
  .vd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- ≤ 991px ---------- */
@media (max-width: 991px) {
  .vd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vd-head {
    margin-bottom: var(--sp-6);
  }
}

/* ---------- ≤ 767px ---------- */
@media (max-width: 767px) {
  .vd-section {
    padding-block: var(--sp-10);
  }
  .vd-section--tight {
    padding-block: var(--sp-8);
  }
  /* Một cột: 2 cột ở khổ 360px làm ô video quá nhỏ để nhìn được nội dung. */
  .vd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vd-card__body {
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }
  .vd-card__btn {
    width: 50px;
    height: 50px;
  }
}

/* ============================================================
   3. GIẢM CHUYỂN ĐỘNG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vd-card,
  .vd-card__thumb,
  .vd-card__btn {
    transition: none;
  }
  .vd-card:hover {
    transform: none;
  }
  .vd-card__play:hover .vd-card__btn,
  .vd-card__play:focus-visible .vd-card__btn {
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   KHỐI VIDEO TRANG CHỦ
   Đặt ở đây chứ không phải pageHome.css: nó dùng lại .vd-card__play,
   .vd-card__thumb, .vd-card__btn của file này, mà video.css được @import
   SAU pageHome.css nên rule đặt bên kia sẽ bị đè ở cùng độ đặc hiệu.
   ============================================================ */
.ps-hvid { background: var(--c-white); }
.hvid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: center;
  padding-block: var(--sp-16);
}
.hvid__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: var(--sp-4);
}
.hvid__dash { width: 28px; height: 3px; border-radius: 2px; background: var(--c-cta); }
.hvid__title {
  font-size: 36px;
  line-height: 46px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
.hvid__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-6);
}
.hvid__meta {
  display: flex;
  gap: var(--sp-8);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.hvid__meta b {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-cta);
}
.hvid__meta span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--c-text-secondary);
}
.hvid__more { margin-bottom: 0; }
.hvid__play {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.hvid__play .vd-card__len { right: 14px; bottom: 14px; font-size: 13px; }

@media (max-width: 1099px) {
  .hvid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .hvid__title { font-size: 30px; line-height: 40px; }
}
@media (max-width: 549px) {
  .hvid { padding-block: var(--sp-12); }
  .hvid__title { font-size: 26px; line-height: 34px; }
  .hvid__title br { display: none; }
  .hvid__meta { gap: var(--sp-5); }
  .hvid__meta b { font-size: 22px; }
}

/* ===== searchPage.css ===== */
/* ============================================================
   Trang kết quả tìm kiếm (/?s=...) — search.php

   Anh em với assets/css/headerSearch.css (dropdown ở header): dùng chung bộ khu
   vực và cùng ngôn ngữ thị giác, nhưng ở đây là thẻ kết quả đầy đủ chứ không
   phải dòng gợi ý rút gọn nên tách file riêng cho dễ đọc.
   ============================================================ */

/* ---------- Ô tìm lại ---------- */

/* Cùng khuôn với .doc-search ở trang Tài liệu (pages.css) để hai ô tìm kiếm
   trong site không phải hai thiết kế khác nhau. */
.sr-form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.sr-form:focus-within {
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}

.sr-form__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-icon-muted);
}

.sr-form__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  font-size: var(--fs-body);
  color: var(--c-text);
}
.sr-form__input:focus { outline: 0; }
.sr-form__input::placeholder { color: var(--c-text-muted); }
.sr-form__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.sr-form__submit {
  flex: none;
  height: 40px;
  min-height: 0;
  margin: 0 !important;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-btn);
  background: var(--c-brand-700);
  color: var(--c-white) !important;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 40px;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.sr-form__submit:hover { background: var(--c-brand-900); }

/* ---------- Tab khu vực ---------- */

.sr-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-divider);
}

.sr-scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-round);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.sr-scope .icon { width: 16px; height: 16px; color: var(--c-brand-600); }

a.sr-scope:hover {
  border-color: var(--c-border-strong);
  background: var(--c-brand-50);
  color: var(--c-brand-700) !important;
}

.sr-scope[aria-current="true"] {
  border-color: transparent;
  background: var(--c-brand-700);
  color: var(--c-white) !important;
  font-weight: var(--fw-semibold);
}
.sr-scope[aria-current="true"] .icon { color: var(--c-white); }

/* Khu vực 0 kết quả: hiện để hàng tab không nhảy chỗ mỗi lần đổi từ khóa, nhưng
   làm mờ và bỏ con trỏ để thấy ngay là không bấm được (thẻ <span>, không phải <a>). */
.sr-scope.is-empty {
  opacity: 0.5;
  cursor: default;
}

.sr-scope__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-round);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 20px;
}
.sr-scope[aria-current="true"] .sr-scope__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--c-white);
}

/* ---------- Danh sách kết quả ---------- */

.sr-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.sr-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
}
.sr-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-card-hover);
  transform: translateY(-2px);
}

/* Cả thẻ là một <a> để vùng bấm rộng bằng cả khối; các "nút" bên trong chỉ là
   chữ có tạo dáng, không phải link lồng nhau (HTML không cho phép <a> trong <a>). */
.sr-card__link {
  display: flex;
  align-items: stretch;
  gap: var(--sp-5);
  padding: var(--sp-4);
  color: var(--c-text) !important;
  text-decoration: none !important;
}

.sr-card__thumb {
  width: 200px;
  flex: none;
  align-self: stretch;
  aspect-ratio: var(--ar-news);
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface-subtle);
}

.sr-card__thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  color: var(--c-brand-600);
}
.sr-card__thumb--icon .icon { width: 40px; height: 40px; }

.sr-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 4px;
}

.sr-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 18px;
}
.sr-card__badge .icon { width: 14px; height: 14px; }

/* !important: Flatsome in ra rule màu heading riêng từ Customizer > Typography
   (xem ghi chú dài ở đầu assets/css/main.css) và rule đó nằm SAU file này trong
   <head>, nên không có !important thì h2 mất màu brand. */
.sr-card__title {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-section-title);
  color: var(--c-heading) !important;
}
.sr-card:hover .sr-card__title { color: var(--c-brand-700) !important; }

.sr-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 22px;
  color: var(--c-text-secondary);
}

.sr-card__body .link-arrow { margin-top: auto; }

/* ---------- Không có kết quả ---------- */

.sr-empty {
  margin-top: var(--sp-8);
  padding: var(--sp-12) var(--sp-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-card);
  background: var(--c-surface-subtle);
  text-align: center;
}
.sr-empty .icon-search-x {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--sp-4);
  color: var(--c-icon-muted);
}
.sr-empty__title {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-section-title);
  color: var(--c-heading) !important;
}
.sr-empty__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.sr-empty__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.sr-empty__links a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-btn);
  background: var(--c-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-700) !important;
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.sr-empty__links a:hover {
  background: var(--c-brand-50);
  border-color: var(--c-brand-500);
}

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

.sr-list + .nav-pagination,
.sr-list ~ .page-numbers { margin-top: var(--sp-8); }

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .sr-form { flex-wrap: wrap; }
  .sr-form__input { flex: 1 1 100%; order: 3; height: 36px; }
  .sr-form__submit { margin-left: auto !important; }

  .sr-card__link {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .sr-card__thumb {
    width: 100%;
    aspect-ratio: var(--ar-project);
  }
  .sr-card__title { font-size: var(--fs-card-title); line-height: var(--lh-card-title); }
}

/* ===== styles.css ===== */
/* ============================================================
   styles.css — Component styles cho trang chủ Phú Sơn Group
   Đọc kèm tokens.css. Desktop-first (viewport tham chiếu 1440px).
   ============================================================ */

/* ---------- Nút dùng chung ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
  /* Reset gốc "a{text-decoration:none}" (tokens.css) có specificity rất thấp,
     bị rule hover của menu Flatsome (nhiều class/combinator hơn) đè mất khi
     .btn nằm trong menu (vd. item "Custom HTML" ở header) — ép !important để
     .btn không bao giờ bị gạch chân dù đặt ở đâu. */
  text-decoration: none !important;
  /* Ba thuộc tính dưới đây KHÔNG có trong bản thiết kế gốc — thêm vào để trung hoà
     rule mà Flatsome đặt cho thẻ <button> trần:
         .button, button, input[type=submit] {
           text-transform: uppercase; letter-spacing: .03em; margin-right: 1em; }
     Thẻ <a class="btn"> không dính vì selector không khớp, nhưng mọi nút submit
     thật (nút gửi của các form Contact Form 7, nút "Lọc"/"Áp dụng" ở trang danh mục)
     đều là <button> nên bị viết HOA, giãn chữ và thừa 1em lề phải — trông như sai
     cỡ chữ dù font-size vẫn đúng 14px ở trên.
     Không cần !important: .btn (0,1,0) đã thắng selector thẻ (0,0,1). */
  text-transform: none;
  letter-spacing: normal;
  margin-right: 0;
  transition: background var(--dur-normal) var(--ease),
    color var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn--primary {
  background: var(--c-cta);
  color: var(--c-white);
  box-shadow: var(--sh-button);
}
.btn--primary:hover {
  /* Khai báo color tường minh để thắng rule "a:hover{color:var(--fs-experimental-link-color-hover)}"
     mà Flatsome tự in ra từ Customizer > Link Hover Color — nếu không, nút <a>
     sẽ bị đổi màu chữ vì "a:hover" có specificity cao hơn ".btn--primary" (hoà
     ở cột pseudo-class, nhưng "a:hover" có thêm 1 type-selector "a"). */
  color: var(--c-white);
  background: var(--c-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 116, 57, 0.24);
}
.btn--header {
  height: 38px;
  background: var(--c-cta);
  color: var(--c-white);
}
.btn--header:hover { color: var(--c-white); background: var(--c-cta-hover); }
.btn--outline-light {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.65);
}
.btn--outline-light:hover {
  color: var(--c-brand-900);
  background: var(--c-white);
  border-color: var(--c-white);
}
.btn--block { width: 100%; }

/* ---------- Link mũi tên ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-small);
  color: var(--c-brand-700);
  /* .link-arrow hầu như luôn nằm trong một flex container (.page-section__head,
     .section-head) nên mặc định nhận flex-shrink:1 và bị bóp lại cạnh <h2>, làm
     chữ ngắt dòng giữa cụm ("Xem tất cả dự / án"). flex:none khoá không cho co,
     nowrap chặn nốt trường hợp nó là item của flex container khác.
     Khi thật sự hết chỗ, 2 head đã có flex-wrap nên link rớt xuống hàng riêng
     thay vì tràn khỏi container. Ngoài flex container thì flex:none vô hại. */
  flex: none;
  white-space: nowrap;
}
.link-arrow .icon { width: 15px; height: 15px; transition: transform var(--dur-normal) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Section heading ---------- */
.section-head {
  display: flex;
  /* flex-wrap: ghi chú ở .link-arrow bên trên đã trông chờ head có wrap ("link
     rớt xuống hàng riêng") nhưng thực tế chưa khai. Không có nó thì ở 375px
     tiêu đề bị bóp còn 105px, "SẢN PHẨM CHỦ LỰC" xếp thành 3 dòng cạnh một
     link nowrap rộng 160px. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  row-gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: var(--c-heading);
  text-transform: uppercase;
}
/* Cùng lý do như .page-section__head .page-section__title trong pages.css:
   Flatsome đặt "h1..h6{width:100%}" nên <h2> đòi trọn chiều rộng và đẩy
   .link-arrow xuống hàng dưới. Trả về auto + cho co để hai phần luôn cùng hàng. */
.section-head .section-title { width: auto; min-width: 0; }
.section-eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-600);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-divider);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { display: block; width: 220px; height: auto; }

.desktop-nav { display: flex; align-items: center; gap: 22px; margin-inline: auto; }
.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--c-text);
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--c-brand-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-normal) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--c-brand-700); }
.nav-link[aria-current="page"] { font-weight: var(--fw-semibold); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-right { display: flex; align-items: center; gap: var(--sp-4); }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-text-muted); }
.lang-switch button { background: none; border: 0; cursor: pointer; color: var(--c-text-muted); padding: 0; }
.lang-switch button[aria-pressed="true"] { color: var(--c-brand-700); font-weight: var(--fw-semibold); }
.lang-switch span { color: var(--c-border-strong); }

.menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  cursor: pointer; color: var(--c-heading);
}
.menu-trigger .icon { width: 22px; height: 22px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: var(--hero-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--hero-overlay);
}
.hero__inner { width: min(var(--container-max), calc(100% - 2 * var(--container-padding))); }
.hero__content { max-width: 640px; color: var(--c-white); padding-block: var(--sp-8) 56px; }
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.hero__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Dải lợi ích hero */
.hero-benefits {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(2, 15, 30, 0) 0%, rgba(2, 15, 30, 0.55) 100%);
}
.hero-benefits__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-block: 14px;
  flex-wrap: wrap;
}
.hero-benefit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.hero-benefit .icon { width: 18px; height: 18px; color: #cfe0f2; }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: var(--c-surface-subtle);
  border-bottom: 1px solid var(--c-divider);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  min-height: 112px;
}
.stat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  height: 44px; width: 1px;
  transform: translateY(-50%);
  background: var(--c-divider);
}
.stat__icon { color: var(--c-brand-600); }
.stat__icon .icon { width: 30px; height: 30px; stroke-width: 1.7; }
.stat__value { display: block; font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-heading); }
.stat__label { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-muted); }
.stat__lead { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }

/* ============================================================
   SECTION chung (khối trắng có padding)
   ============================================================ */
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  box-shadow: var(--sh-card);
  transition: transform var(--dur-normal) var(--ease),
    box-shadow var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: #b7cbe0;
  box-shadow: var(--sh-card-hover);
}
.product-card__media {
  aspect-ratio: var(--ar-product);
  background: var(--c-white);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-3);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--dur-normal) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__title { min-height: 44px; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: var(--sp-1); }
.product-card__desc { min-height: 80px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }
.product-card__link { margin-top: auto; }

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.solution-card {
  position: relative;
  aspect-ratio: var(--ar-solution);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sp-4);
  color: var(--c-white);
}
.solution-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease);
}
.solution-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Nhãn nằm GIỮA thẻ, nhưng lớp phủ cũ mới đậm dần về đáy nên chỗ có chữ chỉ
     được ~0.33. Đo thực tế thẻ "Kho lạnh, kho mát" (ảnh trần kho sáng trắng):
     nền rgb(129,139,156) → tương phản với chữ trắng chỉ 3.44:1, dưới ngưỡng
     WCAG AA 4.5:1 cho chữ 15px. Thêm điểm dừng ở giữa để vùng có chữ đủ đậm. */
  background: linear-gradient(180deg, rgba(2, 18, 34, 0.30) 0%, rgba(2, 18, 34, 0.46) 50%, rgba(2, 18, 34, 0.62) 100%);
  transition: background var(--dur-normal) var(--ease);
}
.solution-card:hover img { transform: scale(1.05); }
.solution-card:hover::after { background: linear-gradient(180deg, rgba(2, 18, 34, 0.40) 0%, rgba(2, 18, 34, 0.56) 50%, rgba(2, 18, 34, 0.70) 100%); }
.solution-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-brand-700);
  display: grid; place-items: center;
  margin-bottom: var(--sp-3);
  transition: transform var(--dur-normal) var(--ease);
}
.solution-card__icon .icon { width: 22px; height: 22px; }
.solution-card:hover .solution-card__icon { transform: translateY(-3px); }
.solution-card__label { display: grid; min-height: 44px; place-items: center; font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-semibold); text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.35); }

/* ============================================================
   CAPABILITY
   ============================================================ */
.capability-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sp-8);
  align-items: stretch;
}
.capability__content { align-self: center; }
.capability__eyebrow { margin-bottom: var(--sp-1); }
.capability__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--c-heading); margin-bottom: var(--sp-3); }
.capability__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-4); max-width: 420px; }
.capability__list { display: grid; gap: 7px; margin-bottom: var(--sp-5); }
.capability__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text); }
.capability__item .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--c-brand-600);
}

.capability__media {
  display: grid;
  grid-template-columns: 51% 25% 24%;
  align-items: stretch;
  background: #083a6e url("/wp-content/uploads/2026/07/nang-luc-day-chuyen-san-xuat-panel.webp") center / cover no-repeat;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 360px;
}
.capability__factory { min-width: 0; }
/* Ba biến thể theo hai công tắc "Hiện bản đồ Việt Nam" / "Hiện cột chỉ số" trong
   UX Builder. Lưới gốc là 51% ảnh · 25% bản đồ · 24% chỉ số; tắt phần nào thì phần
   đất của nó dồn cho ảnh, các cột còn lại giữ nguyên bề ngang để khỏi căn lại chữ. */
.capability__media--nomap {
  grid-template-columns: 76% 24%;
}
.capability__media--nometrics {
  grid-template-columns: 75% 25%;
}
/* Tắt cả hai: chỉ còn ảnh, chiếm trọn ô. */
.capability__media--nomap.capability__media--nometrics {
  grid-template-columns: 100%;
}
/* Khối bản đồ + overlay marker (vừa ô, căn giữa dọc) */
.capability__mapwrap {
  position: relative;
  width: 100%;
  max-width: 210px;
  aspect-ratio: 712 / 992;
  align-self: center;
  justify-self: center;
}
.capability__mapwrap .vn-map {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(120, 180, 255, 0.35));
  opacity: 0.97;
}
.capability__mapwrap .vn-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.capability__metrics {
  color: var(--c-white);
  padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-2);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-4);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.capability__metrics-title { font-size: var(--fs-small); line-height: var(--lh-small); color: #bcd3ea; margin-bottom: var(--sp-1); }
.metric__value { font-size: 26px; line-height: 30px; font-weight: var(--fw-bold); }
.metric__label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: #a9c2dc; }

/* ============================================================
   PROJECTS
   ============================================================ */
/* Số cột nhận từ block "Dự án tiêu biểu" qua biến CSS --proj-cols (block in
   style="--proj-cols: N" ngay trên .projects-grid). Giá trị dự phòng 6 = đúng bản
   thiết kế gốc, nên trang nào không truyền biến vẫn y như cũ.
   Biến phải đọc ngay tại rule NÀY chứ không tách ra rule riêng ở pageHome.css:
   styles.css import SAU pageHome.css nên rule ở đó cùng specificity sẽ thua và
   thành vô tác dụng — đúng lỗi --cert-cols/--doc-cols đã mắc phải và vừa sửa
   theo cách này ở hai rule bên dưới.
   Vẫn KHÔNG in grid-template-columns thẳng vào thuộc tính style: inline style
   thắng cả media query, sẽ khoá cứng số cột và phá bố cục mobile ở responsive.css. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(var(--proj-cols, 6), minmax(0, 1fr));
  gap: var(--grid-gap);
}
.project-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-project);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.project-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.project-card__media { aspect-ratio: var(--ar-project); overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
/* flex-column + flex:1 để .project-card__link đẩy được xuống đáy bằng margin-top:auto.
   Bản mockup index.html không cần vì thẻ dự án ở trang chủ không có dòng "Xem chi
   tiết"; dòng đó là của thẻ .proj-card bên giai-phap.html, nay block dựng chung một
   markup cho cả hai trang nên phải bù phần bố cục này. Không đổi padding gốc. */
.project-card__body { padding: 10px var(--sp-3) var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.project-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: var(--sp-1); transition: color var(--dur-fast) var(--ease); }
.project-card:hover .project-card__title { color: var(--c-brand-700); }
.project-card__meta { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
/* margin-top:auto ghim liên kết xuống đáy thẻ để các thẻ cùng hàng thẳng chân nhau
   dù tiêu đề dài ngắn khác nhau — cùng cách của .product-card__link/.news-card__link. */
.project-card__link { margin-top: auto; padding-top: var(--sp-2); }

/* ============================================================
   RESOURCES (Chứng chỉ + Tài liệu)
   ============================================================ */
.resources-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-8);
  align-items: start;
}
.resource-heading {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-heading);
  margin-bottom: var(--sp-4);
}
/* Cùng cơ chế --proj-cols ở trên: đọc biến ngay tại rule gốc. Trước đây biến được
   khai ở pageHome.css nhưng file đó import TRƯỚC styles.css nên rule này (cùng
   specificity, đứng sau) luôn thắng — tuỳ chọn "Số cột" của block chứng chỉ/tài
   liệu vì thế không có tác dụng ở desktop. */
.certificates-grid { display: grid; grid-template-columns: repeat(var(--cert-cols, 5), minmax(0, 1fr)); gap: var(--sp-3); }
.certificate-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-project);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  background: var(--c-white);
}
.certificate-card__icon { width: 30px; height: 30px; color: var(--c-brand-600); }
.certificate-card__icon .icon { width: 30px; height: 30px; }
.certificate-card__name { font-size: 12px; line-height: 16px; font-weight: var(--fw-bold); color: var(--c-heading); }
.certificate-card__sub { font-size: 12px; line-height: 16px; color: var(--c-text-muted); }

.documents-grid { display: grid; grid-template-columns: repeat(var(--doc-cols, 4), minmax(0, 1fr)); gap: var(--sp-3); }
.document-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-project);
  padding: var(--sp-3);
  background: var(--c-white);
  transition: transform var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
}
.document-card:hover { border-color: #7da9d1; background: var(--c-brand-50); transform: translateY(-2px); }
.document-card__icon {
  width: 34px; height: 34px; flex: none;
  color: var(--c-brand-600);
  display: grid; place-items: center;
}
.document-card__icon .icon { width: 30px; height: 30px; }
.document-card__title { display: block; min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
.document-card__link { font-size: 12px; line-height: 16px; color: var(--c-brand-600); font-weight: var(--fw-semibold); }

/* ============================================================
   NEWS
   ============================================================ */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.news-card {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-card);
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.news-card__media { aspect-ratio: var(--ar-news); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news-card__date { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.news-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); transition: color var(--dur-fast) var(--ease); }
.news-card:hover .news-card__title { color: var(--c-brand-700); }
.news-card__link { margin-top: auto; }

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote {
  background: var(--c-brand-50);
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
}
.quote__card {
  display: grid;
  grid-template-columns: 360px 1fr 180px;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-5) var(--sp-6);
}
.quote__title { font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: var(--fw-bold); color: var(--c-heading); text-transform: uppercase; margin-bottom: var(--sp-2); }
.quote__desc { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }
.quote__benefits { display: grid; gap: 7px; }
.quote__benefit { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--c-text); }
.quote__benefit .icon { width: 16px; height: 16px; color: var(--c-brand-600); }

.quote__fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field--span2 { grid-column: span 2; }
.field__label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--c-text-secondary); }
.field__label .req { color: #c0392b; }
.form-control {
  height: 40px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 0 12px;
  font-size: var(--fs-small);
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.form-control { height: auto; min-height: 40px; padding: 10px 12px; resize: vertical; }
.form-control::placeholder { color: #98a2b3; }
.form-control:hover { border-color: #9ab8d6; }
.form-control:focus { outline: none; border-color: var(--c-brand-700); box-shadow: 0 0 0 3px rgba(14, 78, 152, 0.14); }
.quote__note { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--c-text-muted); }
.quote__note .icon { width: 13px; height: 13px; }
.quote__submit { display: flex; align-items: stretch; }
.quote__submit .btn { width: 100%; height: 100%; min-height: 44px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--c-brand-950); color: rgba(255, 255, 255, 0.78); }
/* 4 cột: thương hiệu | Liên hệ | Văn phòng & nhà máy | Liên kết.
   Cột địa chỉ rộng hơn vì gộp cả ba địa điểm. Trước đây ba địa điểm là ba cột
   riêng, mỗi cột chỉ còn ~130px nên địa chỉ nhà máy 2 vỡ thành 5 dòng.
   LƯU Ý: footer.css cũng khai đúng khối này. main.css nạp styles.css SAU
   footer.css nên bản ở đây mới là bản có tác dụng — sửa một file là không đủ. */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.6fr 1.1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}
.footer-col {
  align-self: stretch;
  border-left: 1px solid rgba(255,255,255,0.14);
  padding-left: var(--sp-5);
}
.footer-brand__logo {
  display: inline-flex;
  margin-bottom: var(--sp-3);
}
.footer-brand__logo img { display: block; width: 208px; height: auto; }
.footer-brand__desc { font-size: var(--fs-small); line-height: var(--lh-small); color: rgba(255,255,255,0.66); margin-bottom: var(--sp-4); max-width: 260px; }
.footer-social { display: flex; gap: var(--sp-2); }
.footer-social a {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.10);
  display: grid; place-items: center;
  color: var(--c-white);
  transition: background var(--dur-fast) var(--ease);
}
.footer-social a:hover { background: var(--c-brand-600); }
.footer-social .icon { width: 16px; height: 16px; }

.footer-col__title { font-size: var(--fs-card-title); line-height: 20px; font-weight: var(--fw-bold); color: var(--c-white); margin-bottom: var(--sp-3); }
.footer-list { display: grid; gap: 8px; }
.footer-list li { font-size: var(--fs-small); line-height: var(--lh-small); color: rgba(255,255,255,0.72); }
.footer-list a:hover { color: var(--c-white); }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; }
.footer-contact .icon { width: 15px; height: 15px; margin-top: 2px; color: #9fc0e2; }
.footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: rgba(255,255,255,0.55);
}
.site-footer__bottom nav { display: flex; gap: var(--sp-4); }
.site-footer__bottom a:hover { color: var(--c-white); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(4, 14, 26, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease), visibility var(--dur-normal) var(--ease);
}
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 1);
  width: min(360px, 86vw);
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease);
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  overflow-y: auto;
}
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
body.drawer-open .mobile-drawer { transform: translateX(0); }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.mobile-drawer__head img { width: min(220px, calc(100% - 52px)); height: auto; }
.mobile-drawer__close { width: 40px; height: 40px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: none; display: grid; place-items: center; cursor: pointer; color: var(--c-heading); }
.mobile-nav { display: grid; gap: 2px; margin-bottom: var(--sp-4); }
.mobile-nav a {
  padding: 12px 8px; font-size: 15px; font-weight: var(--fw-medium);
  color: var(--c-text); border-radius: var(--r-sm);
  border-bottom: 1px solid var(--c-divider);
}
.mobile-nav a[aria-current="page"] { color: var(--c-brand-700); font-weight: var(--fw-semibold); }
.mobile-drawer__cta { display: grid; gap: 10px; }
.mobile-lang { display: inline-flex; gap: 8px; justify-content: center; padding-top: var(--sp-2); font-size: 14px; color: var(--c-text-muted); }
.mobile-lang button { background: none; border: 0; cursor: pointer; color: inherit; }
.mobile-lang button[aria-pressed="true"] { color: var(--c-brand-700); font-weight: var(--fw-semibold); }

/* ===== pages.css ===== */
/* ============================================================
   pages.css — Component dùng cho các trang con (Giới thiệu, …)
   Kế thừa token từ tokens.css. Không hard-code lại giá trị.
   ============================================================ */

/* ---------- Page hero (banner + breadcrumb) ----------
   Đã chuyển sang assets/css/pageHero.css (bản chỉnh cho đúng cấu trúc
   Flatsome, dùng chung nhiều trang) — không định nghĩa lại ở đây để tránh
   xung đột z-index khi 2 file cùng match .page-hero::before. */

/* ---------- Stats bar nổi (đè lên hero) ---------- */
.stats-bar-wrap { margin-top: -52px; position: relative; z-index: 2; margin-bottom: var(--sp-8); }
.stats-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-stats); min-height: 104px;
}
.stats-bar .stat { gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.stats-bar .stat__icon .icon { width: 42px; height: 42px; stroke-width: 1.65; }
.stats-bar .stat + .stat::before { content: ""; position: absolute; left: 0; top: 50%; height: 44px; width: 1px; transform: translateY(-50%); background: var(--c-divider); }

/* ---------- Section title chung cho trang con ---------- */
.page-section { padding-block: var(--sp-8); }
.page-section--tight { padding-block: var(--sp-6); }
.section-divider { height: 1px; border: 0; margin: 0; background: var(--c-divider); }
.page-section__title { font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-heading); letter-spacing: 0.01em; }
/* NGUYÊN NHÂN GỐC của việc .link-arrow bị rớt dòng trong head: Flatsome in ra
   "h1,h2,h3,h4,h5,h6{...;width:100%}" (flatsome.css), nên <h2> ở đây là flex item
   đòi trọn chiều rộng container — link bị đẩy xuống hàng dưới (hoặc bị bóp vỡ chữ
   nếu head không cho wrap). Trả width về auto để h2 chỉ rộng theo nội dung, và
   min-width:0 cho phép nó co lại khi hẹp; phần co dồn hết vào tiêu đề, còn link
   giữ nguyên nhờ flex:none (xem .link-arrow trong styles.css).
   Nhờ vậy tiêu đề và link LUÔN nằm cùng một hàng, canh space-between. */
.page-section__head .page-section__title { width: auto; min-width: 0; }
/* KHÔNG dùng flex-wrap ở đây: tiêu đề và .link-arrow phải luôn ở cùng một hàng.
   Việc chống vỡ chữ đã xử lý bằng flex:none trên .link-arrow + width:auto/min-width:0
   trên tiêu đề (xem rule ngay dưới .page-section__title) — khi hẹp thì tiêu đề tự
   xuống dòng bên trong nó, link vẫn nguyên vẹn ở mép phải. */
/* flex-wrap vì lý do y hệt .section-head trong styles.css: link "Xem tất cả"
   là nowrap, không cho xuống hàng thì nó bóp tiêu đề bên cạnh vỡ vụn ở mobile. */
.page-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-4); row-gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* ---------- Về Phú Sơn Group ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-10); align-items: start; }
.about-intro__title { font-size: var(--fs-section-title); line-height: var(--lh-section-title); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-heading); margin-bottom: var(--sp-4); }
.about-intro p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-3); }
.about-intro .btn { margin-top: var(--sp-2); }
.profile-box { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: var(--sh-card); }
.profile-group__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-heading); margin-bottom: var(--sp-4); }
.profile-list { display: grid; gap: var(--sp-3); }
.profile-item { display: flex; gap: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text); }
.profile-item .icon { width: 16px; height: 16px; color: var(--c-brand-600); flex: none; margin-top: 1px; }
.profile-item b { color: var(--c-heading); font-weight: var(--fw-semibold); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-4); padding-top: 26px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--c-divider); }
.timeline__item { position: relative; text-align: center; padding-inline: 4px; }
.timeline__item::before { content: ""; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 999px; background: var(--c-brand-700); box-shadow: 0 0 0 3px var(--c-brand-100); }
.timeline__year { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 4px; }
.timeline__text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); }

/* ---------- Sứ mệnh / Tầm nhìn / Giá trị ---------- */
.value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.value-card { display: flex; align-items: flex-start; gap: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); }
.value-card__icon { flex: none; width: 50px; height: 50px; color: var(--c-brand-700); display: grid; place-items: center; }
.value-card__icon .icon { width: 46px; height: 46px; stroke-width: 1.65; }
.value-card__body { min-width: 0; }
.value-card__title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-heading); margin-bottom: 6px; letter-spacing: 0.02em; }
.value-card__text { min-height: 100px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); }

/* ---------- Hệ thống nhà máy ---------- */
.factory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.factory-card { display: grid; grid-template-columns: 236px 1fr; gap: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3); box-shadow: var(--sh-card); transition: border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.factory-card:hover { border-color: #b7cbe0; box-shadow: var(--sh-card-hover); }
.factory-card__media { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16/10; }
.factory-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.factory-card:hover .factory-card__media img { transform: scale(1.04); }
.factory-card__body { display: flex; flex-direction: column; justify-content: center; }
.factory-card__title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 8px; }
.factory-card__list { display: grid; min-height: 100px; gap: 5px; margin-bottom: 10px; }
.factory-card__list li { display: flex; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }
.factory-card__list .icon { width: 13px; height: 13px; color: var(--c-brand-600); flex: none; margin-top: 1px; }

/* ---------- Năng lực xuất khẩu & FDI ---------- */
.fdi { border: 1px solid #b8c9dc; border-radius: var(--r-card); padding: var(--sp-6) var(--sp-5); background: #f8fbff; overflow: hidden; }
.fdi__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(210px, .72fr) minmax(300px, 1fr); gap: var(--sp-8); align-items: center; }
.fdi__title { font-size: var(--fs-section-title); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-heading); margin-bottom: var(--sp-3); }
.fdi__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-4); }
.fdi__list { display: grid; gap: 7px; margin-bottom: var(--sp-4); }
.fdi__list li { display: flex; gap: 8px; font-size: var(--fs-small); color: var(--c-text); }
.fdi__list .icon { width: 16px; height: 16px; color: var(--c-brand-600); flex: none; margin-top: 1px; }
.fdi__media { align-self: stretch; min-height: 240px; overflow: hidden; }
.fdi__media img { width: 100%; height: 100%; object-fit: cover; }
.fdi__map-panel { position: relative; align-self: stretch; min-height: 240px; display: flex; align-items: center; padding-left: 36%; overflow: hidden; }
.fdi__map { position: absolute; inset: 2% -16% 2% -28%; opacity: .2; pointer-events: none; }
.fdi__map img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(47%) sepia(85%) saturate(1026%) hue-rotate(179deg) brightness(96%) contrast(98%); }
.fdi__pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--c-brand-600); box-shadow: 0 0 0 4px rgba(22, 101, 191, .12); }
.fdi__pin--america { left: 39%; top: 34%; }
.fdi__pin--europe { left: 57%; top: 28%; }
.fdi__pin--asia { left: 68%; top: 40%; }
.fdi__pin--australia { left: 76%; top: 68%; }
.fdi__stats { position: relative; z-index: 1; display: grid; gap: var(--sp-4); }
.fdi__stat { display: flex; align-items: center; gap: var(--sp-3); }
.fdi__stat .icon { width: 30px; height: 30px; color: var(--c-brand-600); }
.fdi__stat-value { font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: var(--fw-bold); color: var(--c-heading); }
.fdi__stat-label { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }

/* ---------- Chứng chỉ ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-3); }

/* ---------- CTA cuối (tải hồ sơ + liên hệ) ---------- */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #9bbce0; border-radius: var(--r-card); overflow: hidden; background: var(--c-white); box-shadow: 0 2px 5px rgba(20, 64, 112, .04); }
.cta-box { position: relative; display: flex; min-height: 148px; padding: 22px 34% 18px 36px; background: #fbfdff; overflow: hidden; }
.cta-box + .cta-box { border-left: 1px solid #c6d7e8; }
.cta-box__content { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; max-width: 315px; }
.cta-box__icon { position: absolute; left: 0; top: 0; width: 42px; height: 42px; color: var(--c-brand-700); display: grid; place-items: center; }
.cta-box__icon .icon { width: 40px; height: 40px; stroke-width: 1.8; }
.cta-box__title { padding-left: 62px; min-height: 22px; font-size: var(--fs-card-title); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-heading); margin-bottom: 6px; }
.cta-box__text { padding-left: 62px; min-height: 35px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); margin-bottom: 16px; }
.cta-box .btn { align-self: flex-start; min-width: 176px; justify-content: center; margin-top: auto; }
.cta-box__visual { position: absolute; z-index: 1; pointer-events: none; }
.cta-box--profile .cta-box__visual { right: 30px; top: 18px; width: 176px; height: 116px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(16, 63, 119, .16)); }
.cta-box--consult { padding-right: 45%; }
.cta-box--consult .cta-box__visual { right: 0; top: 0; width: 45%; height: 100%; object-fit: cover; object-position: right center; }
.cta-box--consult::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fbfdff 0%, #fbfdff 45%, rgba(251, 253, 255, .72) 61%, rgba(251, 253, 255, 0) 78%); }

/* ============================================================
   TRANG SẢN PHẨM
   ============================================================
   Toàn bộ component của trang /san-pham (.product-tabs, .prod-intro,
   .spec-cards, .spec-block, .quality-note, .compare, .consult) đã chuyển
   sang assets/css/sanPham.css — không định nghĩa lại ở đây.
   Media query responsive của chúng vẫn nằm ở responsive.css (mục "Trang Sản phẩm").
   ============================================================ */

/* Form tư vấn nhanh */
/* .consult / .consult__* (form "Tư vấn nhanh") đã chuyển sang
   assets/css/sanPham.css — không định nghĩa lại ở đây. */

/* Banner tư vấn riêng cho trang chi tiết Panel PU */
.product-pu-consult { min-height: 214px; border-color: #b5cfe8; border-radius: 5px; background: #f8fbff; color: var(--c-text); box-shadow: 0 2px 9px rgba(17, 70, 121, 0.08); }
.product-pu-consult::before { display: none; }
.product-pu-consult__media { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 43%; overflow: hidden; }
.product-pu-consult__media::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #f8fbff 0%, rgba(248, 251, 255, 0.92) 19%, rgba(248, 251, 255, 0.24) 55%, rgba(248, 251, 255, 0) 84%); }
.product-pu-consult__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.product-pu-consult__content { position: relative; z-index: 2; width: 76%; padding: 18px 0 16px 26px; }
.product-pu-consult__title { margin: 0 0 3px; color: #164e8d; font-size: 20px; line-height: 26px; font-weight: var(--fw-bold); }
.product-pu-consult__sub { margin: 0 0 10px; color: #60758c; font-size: 14px; line-height: 20px; }
.product-pu-consult__form-row { display: grid; grid-template-columns: minmax(0, 1fr) 196px; align-items: start; gap: 14px; }
.product-pu-consult__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product-pu-consult .form-control { height: 40px; min-width: 0; padding: 0 11px; border: 1px solid #d8e2ec; border-radius: 3px; background: rgba(255, 255, 255, 0.96); color: var(--c-text); font-size: 14px; box-shadow: 0 1px 3px rgba(24, 67, 108, 0.06); }
.product-pu-consult .form-control::placeholder { color: #9aa8b7; }
.product-pu-consult .form-control:focus { border-color: #4e8bc9; box-shadow: 0 0 0 2px rgba(83, 144, 205, 0.16); }
.product-pu-consult__actions { display: grid; gap: 9px; }
.product-pu-consult__actions .btn { width: 100%; height: 45px; padding-inline: 11px; border-radius: 3px; font-size: 14px; box-shadow: 0 2px 6px rgba(8, 58, 110, 0.22); }
.product-pu-consult__actions .btn .icon { width: 14px; height: 14px; }
.product-pu-consult__note { display: flex; align-items: flex-start; gap: 5px; margin: 0; color: #687b8e; font-size: 12px; line-height: 17px; }
.product-pu-consult__note .icon { width: 11px; height: 11px; flex: none; margin-top: 1px; color: #54799d; }

/* Tương thích Contact Form 7 — cùng lý do đã ghi ở .consult__fields trong
   sanPham.css: CF7 bọc mỗi form-tag trong <span class="wpcf7-form-control-wrap">,
   span đó phải trở thành grid item thật (display:block), KHÔNG dùng display:contents
   vì contents sẽ đẩy luôn <span class="wpcf7-not-valid-tip"> thành grid item khi
   field lỗi validate, làm xô lệch cả lưới.
   Khác với .consult (nền xanh đậm, chữ trắng), banner này nền sáng nên phải khai báo
   lại màu cho tip lỗi và response output, nếu không chữ trắng kế thừa từ .consult
   sẽ mất hút trên nền #f8fbff. */
.product-pu-consult__fields .wpcf7-form-control-wrap { position: relative; display: block; min-width: 0; }
.product-pu-consult .wpcf7-form-control.form-control { width: 100%; }
.product-pu-consult .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; margin-top: 2px; font-size: 11px; line-height: 14px; color: #c0392b; }
.product-pu-consult .wpcf7-response-output { margin: 8px 0 0; padding: 6px 10px; font-size: 12px; border-radius: 3px; color: var(--c-text); }
.product-pu-consult .wpcf7-spinner { position: absolute; }

/* ============================================================
   TRANG GIẢI PHÁP
   ============================================================
   Phần CSS RIÊNG của giai-phap.html (.page-hero__badge, .section-h2,
   .section-lead, .sol-card, .process-step, .process-arrow, .why-block,
   .why-grid, .proj-card ... và biến thể __ của chúng) đã chuyển sang
   assets/css/giaiPhap.css — không định
   nghĩa lại ở đây để tránh xung đột thứ tự import (pages.css import SAU
   giaiPhap.css nên bản còn sót ở đây sẽ âm thầm đè lên file kia).
   Bên dưới chỉ giữ những component mà TRANG KHÁC cũng dùng. */
.section-eyebrow-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-brand-600); margin-bottom: 6px; }
.section-eyebrow-row .icon { width: 16px; height: 16px; }

/* Tag gợi ý sản phẩm — dùng chung với kien-thuc-panel-pu-pir, san-pham-panel-pu */
.sol-tag { font-size: 12px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-text-secondary); background: var(--c-surface-subtle); }

/* Khung bọc "Quy trình triển khai" — dùng chung với kien-thuc */
.process-box { background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-6); }

/* Mục lợi ích — dùng chung với nang-luc */
.why-item { display: flex; gap: 12px; }
.why-item__icon { color: var(--c-brand-600); flex: none; }
.why-item__icon .icon { width: 26px; height: 26px; }
/* .why-item__img đã chuyển sang assets/css/nangLuc.css (chỉ nang-luc.html dùng);
   biến thể badge tròn .why-block .why-item__icon đã chuyển sang giaiPhap.css. */
.why-item__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 3px; }
.why-item__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }

/* CTA banner */
.cta-banner { display: flex; align-items: center; gap: var(--sp-5); background: var(--c-brand-50); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); }
.cta-banner__icon { width: 108px; height: 108px; border-radius: var(--r-round); background: var(--c-white); color: var(--c-brand-700); display: grid; place-items: center; flex: none; box-shadow: var(--sh-card); }
.cta-banner__icon .icon { width: 26px; height: 26px; }
.cta-banner__icon-img { width: 80px; height: 80px; object-fit: contain; display: block; }
.cta-banner__title { font-size: var(--fs-section-title); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 3px; }
.cta-banner__text { font-size: var(--fs-small); color: var(--c-text-secondary); }
.cta-banner .btn { margin-left: auto; white-space: nowrap; }

/* ============================================================
   TRANG DỰ ÁN (du-an.html)
   ============================================================ */
/* Đã chuyển sang assets/css/duAn.css (file riêng cho trang du-an.html) —
   không định nghĩa lại ở đây để tránh xung đột thứ tự import với duAn.css. */

/* Phạm vi dự án */
/* Hai khối .coverage và .network dưới đây là mã chết chép nguyên từ bộ mockup bàn
   giao — không template hay trang nào dùng (đã tra cả PHP, post_content và option;
   khối "mạng lưới" thật trên /gioi-thieu/ dùng namespace .gt-network). Giữ lại để
   đối chiếu bố cục, nhưng ĐÃ GỠ ảnh nền: cả hai trỏ vào bản đồ AI
   network-vietnam-factories-v1 / project-coverage-v1 — bản đồ này thiếu Hoàng Sa -
   Trường Sa và ghi sai vị trí nhà máy nên đã bị loại khỏi site. Đừng trỏ lại; bản
   đồ đúng là assets/imgs/vietnam-map-hs-ts.svg. */
.coverage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(330px, 1.36fr) minmax(190px, .88fr) minmax(245px, .76fr); gap: 28px; align-items: center; min-height: 390px; overflow: hidden; background: linear-gradient(90deg, #f6faff 0%, #f8fbff 58%, #f4f8fe 100%); border: 1px solid #d8e4f1; border-radius: var(--r-card); padding: 30px 36px; box-shadow: 0 8px 24px rgb(23 65 122 / 5%); }
.coverage::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.coverage__intro, .coverage__map-space, .coverage__regions { position: relative; z-index: 1; }
.coverage__intro { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.coverage__title { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.18; font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 12px; }
.coverage__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand-600); margin-bottom: 8px; }
.coverage__text { max-width: 455px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: 28px; }
.coverage__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 510px; }
.coverage__stat { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 18px; border-left: 1px solid #dce6f1; }
.coverage__stat:first-child { padding-left: 0; border-left: 0; }
.coverage__stat:last-child { padding-right: 0; }
.coverage__stat .icon { flex: 0 0 auto; width: 35px; height: 35px; color: #256fe0; stroke-width: 1.65; }
.coverage__stat-value { font-size: 29px; line-height: 1; font-weight: var(--fw-bold); color: #1154b8; }
.coverage__stat-label { display: block; margin-top: 5px; font-size: var(--fs-caption); line-height: 1.25; color: #3a5f9a; white-space: nowrap; }
.coverage__map-space { align-self: stretch; min-height: 255px; }
.coverage__regions { position: relative; display: grid; align-content: center; gap: 20px; padding-left: 29px; }
.coverage__regions::before { content: ""; position: absolute; top: 23px; bottom: 24px; left: 8px; width: 1px; background: #b6cbe7; }
.coverage__region { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.coverage__region-dot { position: relative; z-index: 1; display: block; width: 17px; height: 17px; margin-top: 3px; border: 4px solid #fff; border-radius: 50%; background: #1265d3; box-shadow: 0 0 0 2px #c3d8f4; }
.coverage__region b { display: block; margin-bottom: 4px; font-size: var(--fs-small); color: #1555ad; }
.coverage__region div > span { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }

/* Cảm nhận khách hàng */
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--c-white); }
.testi-card { display: grid; grid-template-columns: clamp(100px, 10vw, 150px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.1vw, 30px); min-height: 124px; padding: 16px clamp(18px, 2.4vw, 34px); background: var(--c-white); }
.testi-card + .testi-card { border-left: 1px solid var(--c-divider); }
.testi-card__logo { display: flex; align-items: center; justify-content: center; }
.testi-card__logo img { display: block; width: 100%; max-width: 136px; max-height: 50px; }
.testi-card__quote { margin-bottom: 10px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); font-style: italic; }
.testi-card__author { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-heading); }

/* CTA banner navy */
.cta-banner--navy { position: relative; isolation: isolate; min-height: 154px; gap: clamp(24px, 3.2vw, 52px); overflow: hidden; padding: 28px clamp(30px, 4.2vw, 62px); background: #073665 url("/wp-content/uploads/2026/07/hero-xuong-panel.webp") center 47% / cover no-repeat; border-color: #0c477f; color: var(--c-white); box-shadow: 0 7px 18px rgb(17 50 89 / 14%); }
.cta-banner--navy::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(2 47 96 / 96%) 0%, rgb(3 53 104 / 91%) 47%, rgb(3 50 96 / 74%) 100%); }
.cta-banner--navy > * { position: relative; z-index: 1; }
.cta-banner--navy > div { flex: 1; min-width: 0; }
.cta-banner--navy .cta-banner__icon { width: 82px; height: 82px; border: 1px solid rgb(255 255 255 / 58%); background: rgb(12 76 145 / 40%); color: var(--c-white); box-shadow: inset 0 0 0 7px rgb(255 255 255 / 4%); }
.cta-banner--navy .cta-banner__icon .icon { width: 36px; height: 36px; }
.cta-banner--navy .cta-banner__title { margin-bottom: 8px; font-size: clamp(24px, 2vw, 32px); line-height: 1.18; color: var(--c-white); }
.cta-banner--navy .cta-banner__text { font-size: 16px; color: rgb(255 255 255 / 84%); }
.cta-banner--navy .btn { min-height: 64px; padding-inline: 30px; background: var(--c-cta); color: var(--c-white); box-shadow: 0 3px 10px rgb(0 21 50 / 16%); }
.cta-banner--navy .btn:hover { background: var(--c-cta-hover); color: var(--c-white); box-shadow: 0 5px 14px rgb(0 21 50 / 24%); transform: translateY(-1px); }

/* ============================================================
   TRANG NĂNG LỰC
   ============================================================ */
/* .cap-split / .cap-split__h2 / .cap-split__text / .feat2 (bản nang-luc.html)
   đã chuyển sang assets/css/nangLuc.css — không định nghĩa lại ở đây.
   .cap-split--qc vẫn giữ ở đây vì chưa có trang nào dùng tới. */
.cap-split--qc { grid-template-columns: 1fr 1.08fr; gap: var(--sp-6); }
/* mosaic dây chuyền */
.machine-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 1fr; gap: var(--sp-3); }
.machine-cell { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; }
.machine-cell--big { grid-row: span 2; aspect-ratio: auto; }
.machine-cell img { width: 100%; height: 100%; object-fit: cover; }
.machine-cell__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: var(--fs-caption); color: var(--c-white); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(2,18,34,0.82) 100%); }
.machine-cell--overlay { display: flex; align-items: center; }
.machine-cell--overlay::after { content: ""; position: absolute; inset: 0; background: rgba(8,58,110,0.72); }
.machine-cell__note { position: relative; z-index: 1; color: var(--c-white); padding: var(--sp-4); }
.machine-cell__note b { display: block; font-size: var(--fs-card-title); font-weight: var(--fw-bold); margin-bottom: 4px; }
.machine-cell__note span { font-size: var(--fs-caption); color: rgba(255,255,255,0.85); }

/* QC steps */
.qc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-2); }
.qc-step { text-align: center; }
.qc-step__icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--r-round); background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; }
.qc-step__icon .icon { width: 22px; height: 22px; }
.qc-step__img { width: 38px; height: 38px; object-fit: contain; }
.qc-step__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }
.qc-standards { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; align-items: center; padding: 27px 28px; background: #edf6ff; border: 1px solid #d8e8f7; border-radius: 6px; }
.qc-standards__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: #214f83; margin-bottom: 17px; }
.qc-standards ul { display: grid; gap: 13px; }
.qc-standards li { display: flex; gap: 9px; font-size: var(--fs-small); line-height: 1.35; color: #3d5872; }
.qc-standards__code { color: #1766ad; font-weight: var(--fw-semibold); }
.qc-standards .icon { width: 16px; height: 16px; color: #3077c4; flex: none; margin-top: 1px; }
.qc-standards__media { align-self: stretch; overflow: hidden; border: 1px solid #d6e2ef; border-radius: 4px; aspect-ratio: 4 / 3; background: #dceaf6; }
.qc-standards__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }

/* Mạng lưới (navy full block) */
.network { position: relative; overflow: hidden; background: #073575; border: 1px solid #0d5ab2; border-radius: var(--r-card); padding: 27px 30px; color: var(--c-white); }
.network__grid { display: grid; grid-template-columns: minmax(0, 54%) minmax(165px, 14%); justify-content: space-between; gap: var(--sp-6); align-items: center; min-height: 228px; }
.network__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: #bcd3ea; margin-bottom: 6px; }
.network__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.network__text { max-width: 470px; font-size: var(--fs-small); line-height: var(--lh-body); color: rgba(255,255,255,0.88); margin-bottom: 17px; }
.network__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 19px; }
.network__metric { display: flex; align-items: center; gap: 8px; }
.network__metric .icon { width: 20px; height: 20px; color: #a8d4ff; }
.network__metric-icon { width: 26px; height: 26px; object-fit: contain; flex: none; }
.network__metric b { display: block; font-size: 16px; line-height: 1.15; font-weight: var(--fw-bold); white-space: nowrap; }
.network__metric span { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.82); white-space: nowrap; }
.network__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.network__actions .btn { min-height: 38px; padding: 8px 14px; box-shadow: none; }
.network__actions .icon { width: 16px; height: 16px; }
.network__export { justify-self: end; width: 100%; }
.network__export b { display: block; font-size: var(--fs-small); color: #d4e9ff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.network__export ul { display: grid; gap: 7px; }
.network__export li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: rgba(255,255,255,0.85); }
.network__export .icon { width: 14px; height: 14px; color: #9fc0e2; }

/* 4 năng lực */
.cap4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.cap4-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 182px; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 26px 24px; box-shadow: var(--sh-card); }
.cap4-card__icon { color: var(--c-brand-600); padding-top: 5px; }
.cap4-card__icon .icon { width: 32px; height: 32px; }
.cap4-card__img { width: 40px; height: 40px; object-fit: contain; display: block; }
.cap4-card__content { min-width: 0; }
.cap4-card__label { font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-brand-700); margin-bottom: 7px; }
.cap4-card__value { font-size: 20px; line-height: 24px; font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 9px; }
.cap4-card__text { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); }
.cap4-card__text span { display: block; }
.cap4-card__text span + span { margin-top: 10px; }

.cta-image { position: relative; isolation: isolate; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: center; min-height: 176px; background: #fbfcfe; border: 1px solid #d3dce7; border-radius: var(--r-card); padding: 20px 32px; overflow: hidden; }
.cta-image::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #fbfcfe 0%, #fbfcfe 54%, rgba(251, 252, 254, .92) 66%, rgba(251, 252, 254, .16) 86%, rgba(251, 252, 254, 0) 100%); pointer-events: none; }
.cta-image__body { position: relative; z-index: 1; }
.cta-image__title { max-width: 360px; font-size: 21px; line-height: 27px; font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 5px; }
.cta-image__text { max-width: 360px; font-size: 15px; line-height: 22px; color: var(--c-text-secondary); margin: 0; }
.cta-image__actions { position: relative; z-index: 1; display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.cta-image__secondary { background: transparent; color: var(--c-brand-700); border-color: #bfd1e4; }
.cta-image__secondary:hover { color: var(--c-brand-900); background: var(--c-white); border-color: #8eafd0; }
.cta-image__media { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 47%; overflow: hidden; }
.cta-image__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* ============================================================
   TRANG LIÊN HỆ
   ============================================================ */


.side-doc { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-divider); }
.side-doc:first-of-type { border-top: 0; }
.side-doc__icon { width: 30px; height: 30px; color: var(--c-brand-600); display: grid; place-items: center; flex: none; }
.side-doc__icon .icon { width: 22px; height: 22px; }
.side-doc__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
.side-doc__link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); color: var(--c-brand-600); font-weight: var(--fw-semibold); white-space: nowrap; }
.side-doc__link .icon { width: 14px; height: 14px; }


/* Quy trình 5 bước */
.process5 { display: flex; align-items: center; gap: var(--sp-2); }
.process5__step { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.process5__icon { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; flex: none; }
.process5__icon .icon { width: 20px; height: 20px; }
.process5__icon-img { width: 46px; height: 46px; object-fit: contain; display: block; }
.process5__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 2px; }
.process5__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }
.process5__arrow { display: grid; place-items: center; color: var(--c-icon-muted); }
.process5__arrow .icon { width: 18px; height: 18px; }

/* ============================================================
   TRANG TÀI LIỆU
   ============================================================ */
/* .doc-search / .doc-tabs / .doc-tab / .doccat-cards / .doccat-card /
   .featured-doc / .faq-grid / .faq-item đã chuyển sang assets/css/taiLieu.css
   — không định nghĩa lại ở đây. .btn--ghost dùng chung nhiều trang, .doc-request
   chưa có trang nào dùng tới nên vẫn giữ ở đây. */
.btn--ghost { background: var(--c-white); color: var(--c-cta); border-color: var(--c-border-strong); }

.doc-request { display: grid; grid-template-columns: 56px minmax(0, 1fr) 205px auto; gap: 24px; align-items: center; min-height: 120px; padding: 20px 24px; }
.doc-request__body { min-width: 0; }
.doc-request__list { display: grid; gap: 6px; min-width: 205px; }
.doc-request__list li { white-space: nowrap; }
.doc-request__button { margin-left: 0 !important; min-height: 40px; }

/* ============================================================
   TRANG KIẾN THỨC
   ============================================================ */
.kt-layout { display: grid; grid-template-columns: 8fr 4fr; gap: var(--sp-8); align-items: start; }
.kt-main { display: grid; gap: var(--sp-8); min-width: 0; }
.kt-main > * { min-width: 0; }
.kt-side { display: grid; gap: var(--grid-gap); }

/* Bài viết nổi bật lớn */
.kt-featured { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; isolation: isolate; color: var(--c-white); }
.kt-featured img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kt-featured::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2,18,34,0.15) 0%, rgba(2,18,34,0.55) 45%, rgba(2,18,34,0.92) 100%); }
.kt-featured__body { padding: var(--sp-6); }
.kt-badge { display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-semibold); background: var(--c-brand-700); color: var(--c-white); padding: 4px 12px; border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.kt-featured__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); margin-bottom: 10px; }
.kt-featured__desc { font-size: var(--fs-small); line-height: var(--lh-body); color: rgba(255,255,255,0.85); margin-bottom: var(--sp-4); max-width: 620px; }
.kt-featured__foot { display: flex; align-items: center; gap: var(--sp-5); }
.kt-featured__date { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: rgba(255,255,255,0.8); }
.kt-featured__date .icon { width: 14px; height: 14px; }

/* Latest cards */
.kt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.kt-card { border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-card); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.kt-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.kt-card__media { aspect-ratio: var(--ar-news); overflow: hidden; }
.kt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.kt-card:hover .kt-card__media img { transform: scale(1.04); }
.kt-card__body { padding: var(--sp-3); }
.kt-card__date { font-size: var(--fs-caption); color: var(--c-text-muted); }
.kt-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin: 4px 0 6px; }
.kt-card:hover .kt-card__title { color: var(--c-brand-700); }
.kt-card__desc { min-height: 54px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); margin-bottom: 8px; }

/* Sidebar box */
.kt-box { border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); }
.kt-box__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-heading); margin-bottom: var(--sp-4); }
.kt-mini { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-divider); }
.kt-mini:first-of-type { border-top: 0; padding-top: 0; }
.kt-mini__thumb { width: 72px; height: 54px; border-radius: var(--r-sm); overflow: hidden; flex: none; }
.kt-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kt-mini__title { font-size: var(--fs-small); line-height: 17px; font-weight: var(--fw-semibold); color: var(--c-heading); }
.kt-mini:hover .kt-mini__title { color: var(--c-brand-700); }
.kt-mini__date { font-size: 12px; color: var(--c-text-muted); margin-top: 3px; }
.kt-box__more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-brand-700); }
.kt-box__more .icon { width: 15px; height: 15px; }

/* .kt-docs* / .kt-explore-box* / .kt-explore* (riêng kien-thuc.html) đã
   chuyển sang assets/css/kienThuc.css — không định nghĩa lại ở đây. */

.kt-consult { position: relative; min-height: 238px; border: 1px solid rgba(126,181,235,0.45); border-radius: var(--r-card); overflow: hidden; color: var(--c-white); isolation: isolate; box-shadow: var(--sh-card); }
.kt-consult__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kt-consult::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,34,65,0.08) 0%, rgba(3,34,65,0.02) 54%, rgba(3,34,65,0) 72%); pointer-events: none; }
.kt-consult__body { width: 61%; padding: 24px 0 22px 22px; }
.kt-consult__title { font-size: 20px; line-height: 26px; font-weight: var(--fw-bold); margin-bottom: 10px; }
.kt-consult__text { max-width: 220px; font-size: var(--fs-small); line-height: 20px; color: rgba(255,255,255,0.84); margin-bottom: 18px; }
.kt-consult__button { min-height: 40px; padding-inline: 15px; background: var(--c-white); color: var(--c-brand-900); }

/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM
   ============================================================ */
.pd-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
/* Gallery dạng slider: 2 instance Flickity do behavior "slider" của Flatsome tự
   khởi tạo (xem data-flickity-options trong page-san-pham-panel-pu.php). */
.pd-gallery__main { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-white); aspect-ratio: 4/3; overflow: hidden; box-shadow: var(--sh-card); }
/* position:relative BẮT BUỘC: sau khi Flickity chạy, các cell được chuyển vào
   .flickity-slider (position:absolute). Nếu cell không tự làm containing block thì
   .pd-gallery__zoom của cả 5 cell sẽ neo vào .flickity-slider và chồng lên nhau ở
   cùng một góc phải trên. */
.pd-gallery__cell { position: relative; width: 100%; aspect-ratio: 4/3; }
/* Ảnh phải position:absolute + inset:0, KHÔNG dùng grid + place-items:center.
   Với grid center, ảnh không stretch nên "height:100%" rơi về auto và cell bị ảnh
   dựng đứng (vd. 1360x1156) kéo cao hơn tỷ lệ 4/3 — Flickity lấy chiều cao cell cao
   nhất làm chiều cao .flickity-viewport, khiến slider tràn khỏi khung .pd-gallery__main
   (overflow:hidden) và ảnh bị cắt. inset:0 neo vào containing block có chiều cao xác
   định từ aspect-ratio nên mọi cell luôn đúng 4/3, bất kể tỷ lệ ảnh gốc. */
.pd-gallery__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pd-gallery__zoom { position: absolute; z-index: 2; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: var(--r-round); background: var(--c-white); border: 1px solid var(--c-border); display: grid; place-items: center; color: var(--c-brand-700); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pd-gallery__cell:hover .pd-gallery__zoom { background: var(--c-brand-700); color: var(--c-white); border-color: var(--c-brand-700); }
.pd-gallery__zoom .icon { width: 16px; height: 16px; }

/* Thumbs: không gắn class .slider của Flatsome vì rule
   ".slider:not(.flickity-enabled){position:absolute!important}" sẽ kéo cả hàng thumb
   ra khỏi luồng trong lúc chờ Flickity lazy-load. Chỉ cần data-flickity-options là
   behavior "slider" đã nhận. Khoảng cách giữa thumb dùng margin chứ không dùng gap:
   sau khi init, cell nằm trong .flickity-slider chứ không còn là flex item nữa. */
.pd-gallery__thumbs { position: relative; margin-top: 12px; white-space: nowrap; }
/* width + margin-right phải cộng lại đúng 20%: Flickity tính kích thước cell theo
   outer width (đã gồm margin), nên calc(20% - 10px) + 10px = tròn 5 thumb/khung,
   không dư khoảng trống cũng không tạo scroll thừa. */
.pd-thumb { display: inline-block; width: calc(20% - 10px); margin-right: 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--c-white); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Trạng thái "đang chọn". Chỉ .is-nav-selected — class duy nhất Flickity tự gỡ khỏi
   thumb cũ và gắn sang thumb mới (tuỳ chọn asNavFor). KHÔNG dùng [aria-current] ở đây:
   attribute đó do PHP in ra tĩnh, Flickity không đụng tới, nên thumb đầu sẽ sáng
   vĩnh viễn kể cả khi người dùng đã chọn thumb khác.
   :first-child chỉ là fallback cho lúc Flickity chưa init (lazy-load theo viewport),
   nên phải khoá trong :not(.flickity-enabled) để init xong là nhả ra ngay. */
.pd-thumb.is-nav-selected,
.pd-gallery__thumbs:not(.flickity-enabled) .pd-thumb:first-child { border-color: var(--c-brand-700); box-shadow: 0 0 0 2px var(--c-brand-100); }
/* Hover cho cùng hiệu ứng. Khoá trong @media (hover:hover) vì trên thiết bị cảm ứng
   :hover dính lại sau khi chạm, làm thumb vừa chạm và thumb đang chọn cùng sáng. */
@media (hover: hover) {
  .pd-thumb:hover { border-color: var(--c-brand-700); box-shadow: 0 0 0 2px var(--c-brand-100); }
}

.pd-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 10px; }
.pd-desc { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-5); }
.pd-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.pd-feature { text-align: center; }
.pd-feature__icon { width: 40px; height: 40px; margin: 0 auto 6px; color: var(--c-brand-600); display: grid; place-items: center; }
.pd-feature__icon .icon { width: 24px; height: 24px; }
.pd-feature__icon--photo { width: 56px; height: 56px; }
.pd-feature__icon--photo img { width: 44px; height: 44px; object-fit: contain; }
.pd-feature__text { min-height: 36px; font-size: 13px; line-height: 18px; color: var(--c-text-secondary); }
.pd-tags-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin-bottom: 10px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.pd-actions .btn { height: 48px; }

.pd-specbar { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.pd-specbar__item { display: flex; gap: 10px; padding: var(--sp-4); position: relative; }
.pd-specbar__item + .pd-specbar__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 40px; width: 1px; background: var(--c-divider); }
.pd-specbar__icon { color: var(--c-brand-600); flex: none; }
.pd-specbar__icon .icon { width: 24px; height: 24px; }
.pd-specbar__label { font-size: 12px; line-height: var(--lh-caption); color: var(--c-text-muted); }
.pd-specbar__value { min-height: 30px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-heading); line-height: 15px; }

/* Biến thể icon ảnh (thay sprite SVG), to và rõ hơn — xem hình tham chiếu 04-San-pham-chi-tiet */
.pd-specbar--photo .pd-specbar__item { align-items: center; padding-block: 18px; }
.pd-specbar--photo .pd-specbar__icon { width: 36px; height: 36px; display: grid; place-items: center; }
.pd-specbar--photo .pd-specbar__icon img { width: 36px; height: 36px; object-fit: contain; }
.pd-specbar--photo .pd-specbar__value { font-size: 14px; line-height: 18px; }
.pd-specbar--photo .pd-specbar__item + .pd-specbar__item::before { height: 48px; }

.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.adv-card { display: flex; gap: 12px; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--sh-card); }
.adv-card__icon { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; flex: none; }
.adv-card__icon .icon { width: 20px; height: 20px; }
.adv-card__title { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 3px; }
.adv-card__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-secondary); }

/* Biến thể 1 hàng 6 cột với icon ảnh (thay sprite SVG) — xem hình tham chiếu 04-San-pham-chi-tiet */
.adv-grid.adv-grid--photo { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.adv-grid--photo .adv-card { flex-direction: column; padding: 16px 14px; gap: 10px; }
.adv-grid--photo .adv-card__icon { width: 32px; height: 32px; background: none; border-radius: 0; }
.adv-grid--photo .adv-card__icon img { width: 32px; height: 32px; object-fit: contain; }

.app-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); }
.app-card { border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-card); }
.app-card__media { aspect-ratio: 4/3; overflow: hidden; }
.app-card__media img { width: 100%; height: 100%; object-fit: cover; }
.app-card__body { padding: var(--sp-3); }
.app-card__title { min-height: 40px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-brand-700); margin-bottom: 3px; }
.app-card__text { min-height: 36px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }

.pd-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.pd-info__title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: var(--sp-3); }
.pd-info__list { display: grid; gap: 7px; }
.pd-info__list li { font-size: var(--fs-caption); line-height: 16px; color: var(--c-text-secondary); position: relative; padding-left: 12px; }
.pd-info__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border-radius: 999px; background: var(--c-brand-600); }
.pd-acc-list { display: grid; gap: 8px; }
.pd-acc-list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--c-text-secondary); }
.pd-acc-list .icon { width: 15px; height: 15px; color: var(--c-brand-600); flex: none; }
.pd-doc { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); padding: 7px 0; border-bottom: 1px solid var(--c-divider); }
.pd-doc a { color: var(--c-heading); font-weight: var(--fw-medium); }
.pd-doc span { color: var(--c-text-muted); white-space: nowrap; }
.pd-faq li { padding: 8px 0; border-bottom: 1px solid var(--c-divider); }
.pd-faq a { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); color: var(--c-text); }
.pd-faq .icon { width: 14px; height: 14px; color: var(--c-brand-600); flex: none; }

/* ============================================================
   TRANG CHI TIẾT DỰ ÁN
   ============================================================ */
/* .projd-specs* / .overview-block* / .case-cols / .case-col* đã chuyển sang
   assets/css/duAn.css cùng single-du-an.php — không định nghĩa lại ở đây, kể cả
   trong các nhóm media query bên dưới. duAn.css được @import TRƯỚC file này nên
   một bản sót lại ở đây sẽ âm thầm đè lên và vô hiệu hoá mọi sửa đổi bên đó.
   .pd-thumb--more / .process6* / .testi-quote* vẫn giữ ở đây vì chưa trang nào dùng. */
.pd-thumb--more { position: relative; display: grid; place-items: center; background: var(--c-brand-900); color: var(--c-white); font-weight: var(--fw-bold); font-size: var(--fs-card-title); }

.process6 { display: flex; align-items: flex-start; gap: 4px; }
.process6__step { flex: 1; text-align: center; }
.process6__icon { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: var(--r-round); background: var(--c-brand-700); color: var(--c-white); display: grid; place-items: center; }
.process6__icon .icon { width: 22px; height: 22px; }
.process6__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
.process6__text { font-size: var(--fs-caption); color: var(--c-text-muted); }
.process6__arrow { flex: none; align-self: center; margin-top: -18px; color: var(--c-icon-muted); }
.process6__arrow .icon { width: 18px; height: 18px; }

.testi-quote { position: relative; min-height: 234px; overflow: hidden; border: 1px solid #d9e6f3; border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--sh-card); }
.testi-quote::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.97) 39%, rgba(255, 255, 255, 0.72) 54%, rgba(255, 255, 255, 0.08) 73%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.testi-quote__body { position: relative; z-index: 2; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; width: min(62%, 730px); padding: 32px 0 28px 40px; }
.testi-quote__mark { font-size: 76px; line-height: 0.82; color: #5d90d8; font-family: Georgia, serif; font-weight: var(--fw-bold); }
.testi-quote__content { min-width: 0; }
.testi-quote__text { max-width: 620px; margin: 0 0 22px; font-size: var(--fs-body); line-height: 1.52; color: var(--c-text); font-style: normal; }
.testi-quote__author b { display: block; font-size: var(--fs-small); color: var(--c-brand-700); }
.testi-quote__author span { display: block; margin-top: 3px; font-size: var(--fs-caption); color: var(--c-brand-700); }
.testi-quote__logo { position: absolute; right: 10px; bottom: 29px; width: 150px; height: auto; }
.testi-quote__media { position: absolute; inset: 0; z-index: 0; }
.testi-quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ============================================================
   TRANG KIẾN THỨC — DANH MỤC (card ngang)
   ============================================================ */
.kt-filter { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kt-filter .form-control { min-width: 160px; }
.kt-hcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.kt-hcard { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-card); transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease); }
.kt-hcard:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.kt-hcard__media { overflow: hidden; }
.kt-hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-normal) var(--ease); }
.kt-hcard:hover .kt-hcard__media img { transform: scale(1.04); }
.kt-hcard__body { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; display: flex; flex-direction: column; }
.kt-hcard__date { font-size: var(--fs-caption); color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.kt-hcard__date .icon { width: 13px; height: 13px; }
.kt-hcard__title { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--c-heading); margin: 4px 0 5px; }
.kt-hcard:hover .kt-hcard__title { color: var(--c-brand-700); }
.kt-hcard__desc { min-height: 54px; font-size: 13px; line-height: 18px; color: var(--c-text-secondary); margin-bottom: 8px; }
.kt-hcard__link { margin-top: auto; }
/* Explore bottom row: a single split CTA panel. */
.kt-explore2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; border: 1px solid #c8def1; border-radius: var(--r-card); background: #f7fbff; box-shadow: 0 4px 16px rgba(13, 61, 105, 0.05); }
.kt-explore2__box { position: relative; display: grid; align-items: center; min-width: 0; min-height: 212px; padding: 25px 38px; overflow: hidden; }
.kt-explore2__box + .kt-explore2__box { border-left: 1px solid #d6e5f3; }
.kt-explore2__box--product { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.82fr); gap: 12px; }
.kt-explore2__content { position: relative; z-index: 1; min-width: 0; }
.kt-explore2__box .btn { margin-top: 16px; }
.kt-explore2__title { min-height: 58px; max-width: 340px; font-size: 23px; line-height: 29px; font-weight: var(--fw-bold); color: var(--c-brand-800); margin-bottom: 10px; }
.kt-explore2__text { min-height: 63px; max-width: 330px; font-size: var(--fs-small); line-height: 21px; color: var(--c-text-secondary); }
.kt-explore2__visual { display: block; min-width: 0; }
.kt-explore2__visual img { display: block; width: 100%; height: 100%; }
.kt-explore2__visual--panel { align-self: center; }
.kt-explore2__visual--panel img { object-fit: contain; mix-blend-mode: multiply; }
.kt-explore2__box--consult { padding-right: min(38px, 4vw); }
.kt-explore2__box--consult .kt-explore2__content { width: min(61%, 330px); }
.kt-explore2__visual--engineer { position: absolute; z-index: 0; top: 0; right: 0; width: 42%; height: 100%; }
.kt-explore2__visual--engineer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #f7fbff 0%, rgba(247, 251, 255, 0.92) 10%, rgba(247, 251, 255, 0) 53%); pointer-events: none; }
.kt-explore2__visual--engineer img { object-fit: cover; object-position: right center; }

/* ============================================================
   TRANG BÀI VIẾT CHI TIẾT
   ============================================================ */
.art-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-divider); margin-bottom: var(--sp-5); }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--c-text-muted); }
.art-meta .icon { width: 15px; height: 15px; color: var(--c-brand-600); }
.art-hero-img { border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--sp-5); }
.art-hero-img img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.art-toc { background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.art-toc__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-heading); margin-bottom: var(--sp-3); }
.art-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; gap: var(--sp-6); }
.art-toc li { font-size: var(--fs-small); color: var(--c-brand-700); padding: 4px 0; }
.art-body h2 { font-size: var(--fs-section-title); font-weight: var(--fw-bold); color: var(--c-heading); margin: var(--sp-6) 0 var(--sp-3); }
.art-body h2:first-child { margin-top: 0; }
.art-body p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-secondary); margin-bottom: var(--sp-3); }
.art-body .pd-feature__text { min-height: 125px; }
.art-body ul { display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.art-body ul li { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); position: relative; padding-left: 16px; }
.art-body ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 999px; background: var(--c-brand-600); }
.art-body ul li b { color: var(--c-heading); }
.art-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: 8px; }
.art-imgs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); }
.art-caption { font-size: var(--fs-caption); color: var(--c-text-muted); text-align: center; margin-bottom: var(--sp-5); }
.art-note { display: flex; gap: 10px; background: var(--c-brand-50); border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-4) 0; }
.art-note .icon { width: 20px; height: 20px; color: var(--c-brand-600); flex: none; }
.art-note span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-secondary); }
.art-quote { border-left: 3px solid var(--c-brand-600); background: var(--c-surface-subtle); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0; margin: var(--sp-4) 0; }
.art-quote p { font-style: italic; font-size: var(--fs-small); color: var(--c-text); margin-bottom: 6px; }
.art-quote cite { font-size: var(--fs-caption); color: var(--c-text-muted); font-style: normal; }
.art-cta { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; background: var(--c-brand-50); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-5); margin-top: var(--sp-6); }
.art-cta__title { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-bold); color: var(--c-heading); margin-bottom: 3px; }
.art-cta__text { font-size: var(--fs-caption); color: var(--c-text-secondary); }
.art-cta__benefits { display: flex; gap: var(--sp-5); }
.art-cta__benefit { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--c-text-secondary); }
.art-cta__benefit .icon { width: 18px; height: 18px; color: var(--c-brand-600); }
.art-cta .btn { margin-left: auto; }
.art-share { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) 0; border-top: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider); margin: var(--sp-6) 0; }
.art-share__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-heading); }
.art-share__icons { display: flex; gap: 8px; }
.art-share__icons a { width: 32px; height: 32px; border-radius: var(--r-round); background: var(--c-brand-50); color: var(--c-brand-700); display: grid; place-items: center; }
.art-share__icons .icon { width: 15px; height: 15px; }
.art-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.art-cmp { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-small); }
.art-cmp th, .art-cmp td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.art-cmp thead th { background: var(--c-brand-50); color: var(--c-heading); font-weight: var(--fw-bold); }
.art-cmp tbody th { background: var(--c-surface-subtle); color: var(--c-heading); font-weight: var(--fw-semibold); width: 160px; }
.art-cmp td { color: var(--c-text-secondary); }

/* Con dấu chứng chỉ (SVG đồng nhất) thay cho icon đơn */
.certificate-card { justify-content: center; min-height: 104px; padding: var(--sp-3); }
.certificate-card__badge { width: 100%; max-width: 78px; height: auto; margin: 0 auto; display: block; }
svg.certificate-card__badge { width: 42px; height: 42px; color: var(--c-brand-600); stroke-width: 1.7; }


/* Responsive fixes for content-heavy inner pages. */
@media (max-width: 1199px) {
  .stats-bar,
  .stats-bar[style] { grid-template-columns: repeat(2, 1fr) !important; }
  .value-cards,

  .pd-specbar { grid-template-columns: repeat(3, 1fr); }
  .pd-info { grid-template-columns: repeat(2, 1fr); }
  .product-tabs,
  .product-tabs--5 { grid-template-columns: repeat(3, 1fr); }
  .spec-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kt-cards,
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  /* .cap-split đã bỏ khỏi nhóm này — rule tương ứng nằm ở nangLuc.css. Để lại đây
     thì pages.css (import sau nangLuc.css) sẽ đè và làm bản trong nangLuc.css thành
     vô nghĩa, đúng kiểu duplicate ngầm khó lần ra. */
  .about-grid,
  .pd-top,
  .kt-layout,


  .spec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process6 { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-4); }
  .process6__arrow { display: none; }
  .kt-explore-box,
  .kt-explore2 { grid-template-columns: 1fr; }
  .kt-explore2__box + .kt-explore2__box { border-left: 0; border-top: 1px solid #d6e5f3; }
}

@media (max-width: 767px) {
  .stats-bar,
  .stats-bar[style],
  .value-cards,

  .product-tabs,
  .product-tabs--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-cards { grid-template-columns: 1fr !important; }
  .pd-actions { grid-template-columns: 1fr; }
  .process6 { grid-template-columns: 1fr; }
  .kt-explore { grid-template-columns: 1fr; }
  .kt-hcard { grid-template-columns: 96px minmax(0, 1fr); }

  .art-toc ol { columns: 1; }
  .art-cta .btn,
  .art-tags { margin-left: 0; }
}

/* ===== responsive.css ===== */
/* ============================================================
   responsive.css — Breakpoint overrides (spec §10)
   1199 / 991 / 767 px. Token cơ bản đã đổi trong tokens.css.
   ============================================================ */

/* Footer accordion: mặc định (desktop) luôn mở, summary không tương tác */
.footer-col > summary { list-style: none; cursor: default; }
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary .footer-acc-chevron { display: none; }
.footer-col:not([open]) > .footer-list,
.footer-col:not([open]) > .footer-contact { display: grid; }

/* ============================================================
   ≤ 1199px  (tablet ngang / desktop nhỏ)
   ============================================================ */
@media (max-width: 1199px) {
  .desktop-nav { display: none; }
  .header-right .lang-switch { display: none; }
  .menu-trigger { display: flex; }
  .brand-logo { margin-inline-end: auto; }

  .products-grid,
  .solutions-grid,
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Footer còn 4 cột nên ở khổ này chia 2 cột là vừa; 3 cột sẽ để lại một ô
     lẻ trống ở hàng dưới. */
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  /* Ở 2 cột thì cột đầu mỗi hàng bỏ vạch ngăn bên trái. Trước đây nhắm
     nth-child(2) và (5) theo bố cục 6 cột cũ — nay footer chỉ còn 4 cột nên
     nth-child(5) không tồn tại và cột trái hàng 2 vẫn còn vạch thừa. */
  .footer-col:nth-child(2),
  .footer-col:nth-child(4) { border-left: 0; padding-left: 0; }
}

/* ============================================================
   ≤ 991px  (~768px)
   ============================================================ */
@media (max-width: 991px) {
  .products-grid,
  .solutions-grid,
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* align-items:stretch (giá trị mặc định của grid) đè lại "align-items:center" mà
     styles.css đặt cho .stats__grid. Ở desktop chỉ có MỘT hàng nên center vô hại,
     nhưng từ 991px trở xuống lưới xuống nhiều hàng và các ô bắt đầu có border-top:
     với align-items:center mỗi ô chỉ cao bằng nội dung của nó rồi canh giữa trong
     hàng, nên ô 2 dòng chữ và ô 3 dòng chữ có mép trên ở hai độ cao khác nhau —
     đường kẻ ngang gãy khúc, so le nhau. Cho ô kéo giãn hết chiều cao hàng thì các
     border-top nằm đúng trên một đường thẳng.
     Nội dung vẫn canh giữa theo chiều dọc nhờ "align-items:center" của chính .stat
     (nó là flex row), không cần thêm gì. Áp dụng cho cả breakpoint 767px bên dưới. */
  .stats__grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .stat:nth-child(3n+1)::before { display: none; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--c-divider); }

  .capability-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .capability__text { max-width: none; }

  .resources-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .news-grid { grid-template-columns: 1fr; }
  .documents-grid { grid-template-columns: repeat(2, 1fr); }

  .quote__card { grid-template-columns: 1fr; gap: var(--sp-5); }
  .quote__submit .btn { width: auto; align-self: start; padding-inline: 28px; }

  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col { border-left: 0; padding-left: 0; }
  .footer-col:nth-child(odd) { border-left: 1px solid rgba(255,255,255,0.14); padding-left: var(--sp-5); }
}

/* ============================================================
   ≤ 767px  (mobile ~390px)
   ============================================================ */
@media (max-width: 767px) {
  /* CTA header chuyển vào drawer (spec §390) */
  .header-right .btn--header { display: none; }
  .brand-logo img { width: 190px; }

  /* Products & Projects: carousel cuộn ngang */
  .products-grid,
  .projects-grid {
    display: flex;
    overflow-x: auto;
    gap: var(--grid-gap);
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-3);
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
  }
  .product-card { flex: 0 0 260px; scroll-snap-align: start; }
  .project-card { flex: 0 0 250px; scroll-snap-align: start; }

  /* Solutions: 2 cột */
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Stats: 2 cột, item cuối tràn hàng */
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  /* 24px của bản thiết kế là cho 5 cột trên desktop. Ở 2 cột mobile, ô rộng chỉ còn
     ~180px nên "40.000 m²" không đủ chỗ, phải vắt xuống dòng thứ hai và đội chiều cao
     ô lên, kéo lệch cả hàng. Hạ còn 20px để mỗi số liệu nằm gọn một dòng.
     Đặt cho .stat__value nói chung (không bó trong .stats__grid) để dải .stats-bar
     của các trang con — dùng lại đúng component .stat này — cũng được như nhau. */
  .stat__value { font-size: 20px; line-height: 26px; }
  .stat::before { display: none !important; }
  .stat { border-top: 1px solid var(--c-divider); }
  .stat:nth-child(1), .stat:nth-child(2) { border-top: 0; }
  .stat:last-child { grid-column: 1 / -1; }

  /* Certificates 3 cột; documents/news 1 cột */
  .certificates-grid { grid-template-columns: repeat(3, 1fr); }
  .documents-grid { grid-template-columns: 1fr; }

  /* Capability media: xếp dọc */
  .capability__media { grid-template-columns: 1fr; min-height: 0; }
  /* Ô media không có chiều cao riêng — nó cao được là nhờ bản đồ và cột chỉ số
     bên trong, còn min-height 360px của bản gốc đã bị bỏ ngay dòng trên. Tắt cả
     hai (hai công tắc trong UX Builder) thì bên trong chỉ còn một div rỗng, ô sập
     xuống 0 và ẢNH NHÀ MÁY BIẾN MẤT trên điện thoại. Cho ô ảnh một tỉ lệ khung để
     tự đứng được. */
  .capability__media--nomap.capability__media--nometrics .capability__factory {
    aspect-ratio: 16 / 10;
  }
  .capability__map { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .capability__metrics { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); flex-direction: row; flex-wrap: wrap; gap: var(--sp-5); }

  /* Hero: nút xếp dọc, benefit cuộn ngang */
  .hero__content { padding-block: var(--sp-6); }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .hero-benefits__list { flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-5); -webkit-overflow-scrolling: touch; }
  .hero-benefit { white-space: nowrap; }

  /* Quote form dọc, input cao 44px */
  .quote__fields { grid-template-columns: 1fr; }
  .field--span2 { grid-column: 1 / -1; }
  .form-control { height: 44px; }
  .quote__submit .btn { width: 100%; }

  /* Footer: 1 cột + accordion */
  .site-footer__top { grid-template-columns: 1fr; gap: 0; }
  .footer-brand { padding-bottom: var(--sp-4); }
  .footer-col {
    border-top: 1px solid rgba(255,255,255,0.10);
    border-left: 0;
    padding-block: var(--sp-3);
    padding-left: 0;
  }
  .footer-col > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0;
  }
  .footer-col > summary .footer-acc-chevron { display: block; width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
  .footer-col[open] > summary .footer-acc-chevron { transform: rotate(180deg); }
  .footer-col:not([open]) > .footer-list,
  .footer-col:not([open]) > .footer-contact { display: none; }
  .footer-col[open] > .footer-list,
  .footer-col[open] > .footer-contact { margin-top: var(--sp-3); }
  .footer-links-grid { grid-template-columns: 1fr 1fr; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* Ẩn scrollbar carousel cho gọn (tuỳ chọn) */
@media (max-width: 767px) {
  .products-grid::-webkit-scrollbar,
  .projects-grid::-webkit-scrollbar { height: 5px; }
  .products-grid::-webkit-scrollbar-thumb,
  .projects-grid::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 999px; }
}

/* ============================================================
   Trang con (pages.css) — responsive
   ============================================================ */
@media (max-width: 991px) {
  .factory-grid { grid-template-columns: 1fr; }
  .factory-card__list,
  .loc-card__list,
  .kt-hcard__desc,
  .kt-explore2__title,
  .kt-explore2__text { min-height: 0; }
  .cert-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  /* Đầu section: bỏ bố cục 2 cột "tiêu đề | link" của desktop.
     .page-section__head cố tình KHÔNG cho wrap (xem chú thích ở pages.css) để tiêu
     đề và .link-arrow luôn cùng hàng — hợp lý ở desktop, nhưng dưới 767px thì
     .link-arrow (flex:none, không co) chiếm gần nửa chiều ngang, ép tiêu đề vào một
     cột hẹp và vỡ thành 3–4 dòng. Ở mobile xếp dọc: tiêu đề dùng trọn chiều ngang,
     link nằm dưới, canh trái theo lề nội dung.
     Dùng flex-direction thay vì flex-wrap để không phụ thuộc vào việc phần tử có
     đủ rộng để tự đẩy xuống hàng hay không. */
  .page-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar .stat { gap: var(--sp-3); padding: var(--sp-3); }
  .stats-bar .stat__icon .icon { width: 36px; height: 36px; }
  .stats-bar .stat::before { display: none !important; }
  .stats-bar .stat { border-top: 1px solid var(--c-divider); }
  .stats-bar .stat:nth-child(1), .stats-bar .stat:nth-child(2) { border-top: 0; }
  .stats-bar .stat:last-child { grid-column: 1 / -1; }

  .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .profile-box { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Timeline chuyển dọc */
  .timeline { grid-template-columns: 1fr; gap: var(--sp-4); padding-top: 0; padding-left: 22px; }
  .timeline::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline__item { text-align: left; padding-inline: 0; }
  .timeline__item::before { top: 3px; left: -22px; transform: none; }

  .value-cards { grid-template-columns: 1fr; }
  .value-card { padding: var(--sp-4); }
  .value-card__icon { width: 44px; height: 44px; }
  .value-card__icon .icon { width: 40px; height: 40px; }
  /* .sol-card__desc và .why-grid .why-item__text đã tách sang giaiPhap.css cùng
     rule gốc của chúng — bỏ khỏi nhóm này để mỗi component chỉ nằm ở một file. */
  .value-card__text,
  .document-card__title { min-height: 0; }
  .fdi { padding: var(--sp-5); }
  .fdi__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .fdi__media { min-height: 0; aspect-ratio: 16 / 10; }
  .fdi__map-panel { grid-column: auto; min-height: 210px; padding-left: 42%; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-box { min-height: 0; padding-right: var(--sp-5); }
  .cta-box__title, .cta-box__text { padding-left: 56px; }
  .cta-box + .cta-box { border-top: 1px solid #c6d7e8; border-left: 0; }
  .cta-box__visual { display: none; }
  .factory-card { grid-template-columns: 1fr; }
  .factory-card__media { aspect-ratio: 16/9; }
  .page-hero__title { font-size: 26px; line-height: 32px; }
}
/* Khổ 375–430px: ở 26px, từ ghép dài nhất trong kho sản phẩm
   ("ROCKWOOL/GLASSWOOL") rộng 325px trong khi khung chỉ 313px nên bị
   overflow-wrap cắt đôi thành "…GLASSWOO / L 5 SÓNG". Hạ một nấc cỡ chữ là
   vừa, khỏi phải chèn <wbr> vào tiêu đề ở 8 template khác nhau.
   Phải đặt ở đây (responsive.css nạp sau pageHero.css) vì rule 767px bên trên
   lặp lại trong file này và sẽ đè nếu khai ở pageHero.css. */
@media (max-width: 479px) {
  .page-hero__title { font-size: 24px; line-height: 30px; }
}

/* Trang Sản phẩm */
@media (max-width: 1199px) {
  .spec-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .product-tabs { grid-template-columns: repeat(3, 1fr); }
  .prod-intro { grid-template-columns: 1fr; gap: var(--sp-6); }
  .prod-intro__benefits { padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
  .prod-benefit:first-child::before { content: none; }
  .spec-cards { grid-template-columns: repeat(2, 1fr); }
  .spec-block { grid-template-columns: 1fr; gap: var(--sp-6); }
  .compare { grid-template-columns: 1fr 1.12fr; gap: 0; }
  .compare__intro, .compare__visual, .compare__list, .compare__balance { padding: 24px; }
  .compare__visual { padding-inline: 18px; }
  .compare__panel { height: 128px; }
  .compare__list { border-top: 1px solid #d7e2ed; border-left: 0; }
  .compare__balance { border-top: 1px solid #d7e2ed; }
}
@media (max-width: 767px) {
  .product-tabs { grid-template-columns: repeat(2, 1fr); }
  /* Ở 2 cột (157px/tab) icon 48px nằm CẠNH nhãn chỉ chừa ~85px cho chữ, nhãn
     "Tin ngành & thị trường" xuống 3 dòng và lệch hẳn sang phải. Xếp icon lên
     trên, nhãn xuống dưới để nhãn dùng trọn bề ngang tab. */
  .product-tab { flex-direction: column; gap: 6px; padding: 12px 8px; }
  .product-tab .icon { width: 36px; height: 36px; }
  .product-tab__icon { height: 34px; max-width: 44px; }
  /* Huy hiệu 104px không co (flex:none) nên cột chữ bên cạnh chỉ còn 189px:
     tiêu đề 26px vỡ thành 4 dòng ("Giải pháp / panel & tấm / lợp cách nhiệt /
     toàn diện"). Ở khổ hẹp xếp dọc để tiêu đề dùng trọn bề ngang. */
  .prod-intro__head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .prod-intro__badge { width: 72px; height: 72px; }
  .prod-intro__badge .icon { width: 26px; height: 26px; }
  .prod-intro__benefits { grid-template-columns: repeat(2, 1fr); }
  .prod-benefit:nth-child(odd)::before { content: none; }
  .spec-cards { display: flex; overflow-x: auto; gap: var(--grid-gap); scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); }
  .compare { grid-template-columns: 1fr; }
  .compare__intro, .compare__visual, .compare__list, .compare__balance { padding: 26px; }
  .compare__visual, .compare__list, .compare__balance { border-top: 1px solid #d7e2ed; border-left: 0; }
  .compare__visual { padding-inline: 26px; }
  .compare__panel { height: 148px; }
  .compare__balance { min-height: 116px; }
  .spec-card { flex: 0 0 250px; scroll-snap-align: start; }
  .spec-table th { width: 120px; padding: 12px 12px; }
  .spec-table td { padding: 12px 12px; }
  .spec-table th span { gap: 8px; }
  .spec-table__icon { width: 24px; height: 24px; }
}
/* Bảng thông số ở khổ điện thoại: hai cột ăn nhau chỉ còn 95px cho cột nhãn,
   "Khả năng chống cháy" xuống 4 dòng, "Ốp góc trong (Inner corner cover)" xuống
   5 dòng. Xếp chồng nhãn trên / giá trị dưới để mỗi phần dùng trọn bề ngang.
   Đo trên /san-pham-panel-pu/ và 30 trang chi tiết sản phẩm. */
@media (max-width: 599px) {
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: auto;
  }
  /* display:block làm border-collapse hết tác dụng, nên đường kẻ dưới mà
     Flatsome đặt cho th/td (#ececec) hiện thành vạch thừa giữa nhãn và giá trị.
     Chỉ giữ một đường phân cách ở <tr>. */
  .spec-table th,
  .spec-table td { border-bottom: 0; }
  .spec-table th {
    border-right: 0;
    padding: 14px 16px 2px;
  }
  .spec-table td {
    padding: 0 16px 14px 40px;   /* thụt bằng bề ngang icon + gap để thẳng với nhãn */
  }
}

/* Trang Giải pháp */
/* .sol-cards / .process-steps / .process-arrow / .why-block / .why-grid /
   .proj-cards / .proj-card / .page-hero__badges đã chuyển sang
   assets/css/giaiPhap.css (nằm cùng file với rule gốc) — không định nghĩa lại ở
   đây. Bên dưới chỉ còn .cta-banner*, component dùng chung với du-an, lien-he,
   tai-lieu nên vẫn thuộc pages.css + responsive.css. */
@media (max-width: 991px) {
  .cta-banner { flex-wrap: wrap; }
  .cta-banner .btn { margin-left: 0; }
  .cta-banner--navy { min-height: 0; }
  .cta-banner--navy .cta-banner__icon { width: 64px; height: 64px; }
}
@media (max-width: 767px) {
  /* flex-wrap giữ icon 64px NẰM CÙNG HÀNG với khối chữ, nên khối chữ chỉ còn
     179px: tiêu đề "Muốn xem tận mắt dây chuyền sản xuất?" xuống 4 dòng trong
     khi đoạn mô tả ngay dưới lại rộng hơn — hai khối lệch nhau trông rất kỳ.
     Xếp dọc: icon một hàng, chữ một hàng, nút một hàng. */
  .cta-banner { flex-direction: column; }
  .cta-banner > * { width: 100%; }
  .cta-banner__icon { width: 64px; flex: none; }
  .cta-banner--navy { align-items: flex-start; padding: 26px 22px; background-position: 62% center; }
  .cta-banner--navy .cta-banner__title { font-size: 24px; }
  .cta-banner--navy .cta-banner__text { font-size: var(--fs-small); }
  .cta-banner--navy .btn { width: 100%; }
}

/* Trang Dự án */
/* .du-cards / .featured-project / .fp-specs / .filter-bar đã chuyển sang
   assets/css/duAn.css — không định nghĩa lại ở đây. */
@media (max-width: 991px) {
  .coverage { grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr); padding: 28px; }
  .coverage__map-space { display: none; }
  .coverage__regions { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding-left: 0; }
  .coverage__regions::before { display: none; }
  .testi-grid { grid-template-columns: 1fr; border-top: 1px solid var(--c-divider); }
  .testi-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 0; padding: 20px 0; }
  .testi-card + .testi-card { border-top: 1px solid var(--c-divider); border-left: 0; }
  .testi-card__logo img { max-width: 96px; max-height: 40px; }
}
@media (max-width: 767px) {
  .coverage { grid-template-columns: 1fr; padding: 26px 22px; }
  .coverage::before { background-position: 62% center; background-size: auto 100%; }
  .coverage__regions { grid-column: auto; grid-template-columns: 1fr; gap: 18px; padding-left: 29px; }
  .coverage__regions::before { display: block; }
  .coverage__stats { max-width: none; }
}

/* Trang Năng lực */
/* .cap-split / .feat2 (bản nang-luc.html) đã chuyển sang assets/css/nangLuc.css. */
@media (max-width: 991px) {
  .machine-grid { grid-template-columns: 1fr 1fr; }
  .machine-cell--big { grid-row: auto; aspect-ratio: 16/10; }
  .qc-steps { grid-template-columns: repeat(2, 1fr); }
  .qc-standards { grid-template-columns: 1.12fr .88fr; }
  .network { background-position: 62% center; }
  .network__grid { grid-template-columns: 1fr; gap: var(--sp-5); min-height: 0; }
  .network__export { justify-self: start; max-width: 270px; }
  .cap4-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-image { grid-template-columns: 1fr; gap: var(--sp-5); min-height: 0; }
  .cta-image::before { display: none; }
  .cta-image__media { position: relative; z-index: 0; inset: auto; order: 3; width: 100%; height: auto; aspect-ratio: 16 / 7; border-radius: var(--r-md); }
}
@media (max-width: 767px) {
  .machine-grid { grid-template-columns: 1fr; }
  .qc-steps { grid-template-columns: repeat(2, 1fr); }
  .qc-standards { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .qc-standards__media { width: 100%; }
  /* .network là mã chết từ mockup — xem ghi chú ở pages.css; ảnh bản đồ AI đã gỡ. */
  .network { padding: 24px 22px; background-image: linear-gradient(90deg, rgba(3, 36, 84, .95), rgba(3, 36, 84, .7)); background-position: 60% center; }
  .network__metrics { grid-template-columns: 1fr 1fr; gap: 14px; }
  .network__actions { display: grid; grid-template-columns: 1fr; }
  .network__actions .btn { justify-content: space-between; }
  .cap4-grid { grid-template-columns: 1fr; }
  .cta-image { padding: var(--sp-5); }
  .cta-image__title, .cta-image__text { max-width: none; }
  .cta-image__actions { display: grid; grid-template-columns: 1fr; }
  .cta-image__actions .btn { width: 100%; justify-content: space-between; }
}

/* Trang Liên hệ */
@media (max-width: 991px) {
  .contact-bar { grid-template-columns: repeat(2, 1fr); }
  .contact-bar__item:nth-child(odd)::before { display: none; }
  .contact-bar__item:nth-child(n+3) { border-top: 1px solid var(--c-divider); }
  .loc-cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .locmap { grid-template-columns: 1fr; }
  .process5 { flex-wrap: wrap; }
  .process5__step { flex: 1 1 45%; }
  .process5__arrow { display: none; }
}
@media (max-width: 767px) {
  .contact-bar { grid-template-columns: 1fr; }
  .contact-bar__item::before { display: none !important; }
  .contact-bar__item:nth-child(n+2) { border-top: 1px solid var(--c-divider); }
  .contact-form__fields { grid-template-columns: 1fr; }
  .process5__step { flex: 1 1 100%; }
}

/* Trang Tài liệu */
/* .doccat-cards / .featured-doc / .faq-grid / .doc-search (bản tai-lieu.html)
   đã chuyển sang assets/css/taiLieu.css. .doc-request chưa có trang nào dùng
   tới nên vẫn giữ ở đây. */
@media (max-width: 991px) {
  .doc-request { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .doc-request__list { display: none; }
}
@media (max-width: 767px) {
  .doc-request { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .doc-request .cta-banner__icon { width: 48px; height: 48px; }
  .doc-request__button { grid-column: 1 / -1; width: 100%; justify-content: space-between; }
}

/* Trang Kiến thức */
/* .kt-explore-box* / .kt-explore* (riêng kien-thuc.html) đã chuyển sang
   assets/css/kienThuc.css. */
@media (max-width: 991px) {
  .kt-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .kt-cards { grid-template-columns: repeat(2, 1fr); }
  .kt-consult { min-height: 300px; }
  .kt-consult__body { width: 55%; padding: 34px 0 30px 30px; }
}
@media (max-width: 767px) {
  .kt-cards { grid-template-columns: 1fr; }
  .kt-featured__title { font-size: var(--fs-section-title); line-height: var(--lh-section-title); }
  .kt-consult { min-height: 270px; }
  .kt-consult__image { object-position: 58% center; }
  .kt-consult__body { width: 64%; padding: 24px 0 22px 20px; }
  .kt-consult__title { font-size: 18px; line-height: 23px; }
  .kt-consult__text { font-size: var(--fs-caption); line-height: 18px; }
}

/* Trang chi tiết sản phẩm */
@media (max-width: 991px) {
  .pd-top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pd-specbar { grid-template-columns: repeat(3, 1fr); }
  .pd-specbar__item:nth-child(3n+1)::before { display: none; }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  /* Biến thể 6 cột (.adv-grid--photo) có specificity 0-2-0 nên rule .adv-grid
     một class ở trên KHÔNG đè được — phải khai lại đúng bằng hai class. Thiếu
     dòng này thì ở 375px mỗi thẻ chỉ còn ~40px, chữ rớt mỗi từ một dòng và tràn
     ra ngoài viền thẻ (đo trên /san-pham-panel-pu/ và 8 trang chi tiết sản phẩm). */
  .adv-grid.adv-grid--photo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-grid { grid-template-columns: repeat(3, 1fr); }
  .pd-info { grid-template-columns: repeat(2, 1fr); }
  .product-pu-consult__content { width: 80%; }
  .product-pu-consult__media { width: 37%; }
  .product-pu-consult__form-row { grid-template-columns: minmax(0, 1fr) 178px; gap: 10px; }
  .product-pu-consult__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pd-features { grid-template-columns: repeat(3, 1fr); }
  .pd-actions { grid-template-columns: 1fr; }
  /* 5 thumb trên 1 hàng quá nhỏ ở mobile nên còn 3. Ghi chú cũ nói "phần dư kéo
     ngang được nhờ Flickity" — KHÔNG đúng: không có dòng JS nào khởi tạo Flickity
     cho .pd-gallery__thumbs (chỉ khung ảnh lớn .pd-gallery__cell mới có). Kết quả
     là với white-space:nowrap của thẻ cha, thumb thứ 4 trở đi nằm ngoài khung,
     không cuộn tới được và cũng không bấm được — đo ở 375px thấy thumb cuối kết
     thúc ở x=452 trong khi khung chỉ rộng 313px. Đây thường là ô "+N ảnh" nên
     người dùng mất luôn lối vào phần ảnh còn lại.
     Cho xuống hàng thay vì cuộn: mobile không có thanh cuộn ngang để ra hiệu là
     còn nội dung bên phải. */
  .pd-gallery__thumbs { white-space: normal; display: flex; flex-wrap: wrap; gap: 10px; }
  .pd-thumb { width: calc(33.333% - 7px); margin-right: 0; }
  .pd-specbar { grid-template-columns: repeat(2, 1fr); }
  .pd-specbar__item::before { display: none !important; }
  /* Ở 375px hai cột chỉ chừa 78px cho chữ: "1000 – 1150 mm" xuống 2 dòng,
     "Theo tiêu chuẩn kỹ thuật dự án" xuống 4 dòng, và ô nào ngắn thì để lại
     một mảng trắng to. Một cột lại NGẮN hơn (mỗi mục 1–2 dòng) và dễ đọc hơn. */
  .pd-specbar { grid-template-columns: 1fr; }
  .pd-specbar__item { align-items: center; }
  .pd-specbar__item + .pd-specbar__item { border-top: 1px solid var(--c-divider); }
  .pd-specbar__value { min-height: 0; }
  .adv-grid { grid-template-columns: 1fr; }
  .adv-grid.adv-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid { display: flex; overflow-x: auto; gap: var(--grid-gap); scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); }
  .app-card { flex: 0 0 200px; scroll-snap-align: start; }
  .pd-info { grid-template-columns: 1fr; }
  .consult__fields { grid-template-columns: 1fr; }
  .product-pu-consult { min-height: 0; }
  .product-pu-consult__media { inset: auto 0 0; width: 100%; height: 146px; opacity: 0.28; }
  .product-pu-consult__media::before { background: linear-gradient(90deg, #f8fbff 0%, rgba(248, 251, 255, 0.8) 48%, rgba(248, 251, 255, 0.2) 100%); }
  .product-pu-consult__content { width: auto; padding: 20px; }
  .product-pu-consult__title { font-size: 18px; line-height: 24px; }
  .product-pu-consult__form-row { grid-template-columns: 1fr; gap: 12px; }
  .product-pu-consult__fields { grid-template-columns: 1fr; }
  .product-pu-consult__actions .btn { height: 42px; }
  .product-pu-consult__note { justify-content: center; }
}

/* Trang chi tiết dự án
   .overview-block / .case-cols / .overview-block__imgs / .du-cards đã chuyển sang
   assets/css/duAn.css — không định nghĩa lại ở đây. */
@media (max-width: 991px) {
  .process6 { flex-wrap: wrap; gap: var(--sp-4); }
  .process6__step { flex: 1 1 30%; }
  .process6__arrow { display: none; }
  .testi-quote { min-height: 220px; }
  .testi-quote__body { width: 72%; padding-left: var(--sp-5); }
}
@media (max-width: 767px) {
  .testi-quote { min-height: 0; display: grid; grid-template-columns: 1fr; }
  .testi-quote::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.95) 65%, rgba(255, 255, 255, 0.2) 100%); }
  .testi-quote__body { width: 100%; min-height: 258px; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: var(--sp-5); }
  .testi-quote__mark { font-size: 58px; }
  .testi-quote__text { margin-bottom: 18px; }
  .testi-quote__logo { right: var(--sp-5); bottom: 22px; width: 112px; }
  .testi-quote__media { position: relative; min-height: 180px; grid-row: 2; }
  .testi-quote__media img { position: absolute; inset: 0; }
  .process6__step { flex: 1 1 45%; }
}

/* Trang Kiến thức danh mục */
@media (max-width: 991px) {
  .kt-hcards { grid-template-columns: 1fr; }
  .kt-explore2__box { padding: 22px 24px; }
  .kt-explore2__title { font-size: 20px; line-height: 25px; }
}
@media (max-width: 767px) {
  .kt-hcard { grid-template-columns: 100px 1fr; }
  .kt-filter { flex-wrap: wrap; }
  .kt-explore2 { grid-template-columns: 1fr; }
  .kt-explore2__box { min-height: 202px; padding: 22px 20px; }
  .kt-explore2__box + .kt-explore2__box { border-top: 1px solid #d6e5f3; border-left: 0; }
  .kt-explore2__box--product { grid-template-columns: minmax(0, 1.15fr) minmax(128px, 0.85fr); gap: 4px; }
  .kt-explore2__box--consult .kt-explore2__content { width: 58%; }
  .kt-explore2__visual--engineer { width: 47%; }
  .kt-explore2__title { font-size: 19px; line-height: 24px; margin-bottom: 7px; }
  .kt-explore2__text { font-size: var(--fs-caption); line-height: 18px; }
  .kt-explore2__box .btn { margin-top: 13px; }
}

/* Trang bài viết chi tiết */
@media (max-width: 991px) {
  .art-cta { flex-direction: column; align-items: flex-start; }
  .art-cta__benefits { flex-wrap: wrap; }
  .art-cta .btn { margin-left: 0; }
  .art-tags { margin-left: 0; }
}
@media (max-width: 767px) {
  .art-toc ol { columns: 1; }
  .art-imgs { grid-template-columns: 1fr; }
  .art-body .pd-features { grid-template-columns: repeat(2, 1fr) !important; }
  .art-body .app-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .art-cmp { font-size: var(--fs-caption); }
  .art-cmp tbody th { width: auto; }
}

/* Inner-page mobile grids: keep content pages styled as grids instead of homepage-style carousels. */
@media (max-width: 767px) {
  main .page-section .products-grid,
  main .page-section .spec-cards,
  main .page-section .app-grid,
  main .page-section .proj-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }

  main .page-section .product-card,
  main .page-section .spec-card,
  main .page-section .app-card,
  main .page-section .proj-card {
    flex: initial !important;
    scroll-snap-align: none !important;
  }

  /* Khi chỉ còn một cột, dùng chiều cao nội dung tự nhiên để tránh khoảng trống. */
  main .page-section .spec-card__title,
  main .page-section .spec-card__desc,
  main .page-section .app-card__title,
  main .page-section .app-card__text,
  .kt-card__title,
  .kt-card__desc {
    min-height: 0;
  }
}

/* ============================================================
   VÙNG CHẠM TỐI THIỂU TRÊN CẢM ỨNG
   ------------------------------------------------------------
   Đo ở 375px: các liên kết dạng chữ ("Xem chi tiết", "Chính sách
   bảo mật", link tài liệu trong .pd-doc…) chỉ cao 18–25px, dưới
   ngưỡng ~32px nên rất dễ bấm trượt.

   Nới bằng ::after phủ trong suốt chứ KHÔNG tăng padding/min-height:
   mấy link này nằm trong flex/grid có gạch chân hoặc căn theo baseline,
   đổi hộp là xô cả cụm. ::after chỉ mở rộng vùng nhận chạm, giao diện
   giữ nguyên từng pixel.

   Không đụng .breadcrumb: nó nằm trong hero, nới ra sẽ đội chiều cao
   banner ở mọi trang — chữ nhỏ trong breadcrumb là quy ước quen thuộc.
   ============================================================ */
@media (max-width: 767px) {
  /* Breadcrumb: nới bằng padding chứ không phải ::after — các mục xuống hàng
     cách nhau chỉ 2px, dùng ::after inset âm thì vùng chạm hai hàng chồng lên
     nhau và hàng dưới nuốt mất phần đáy của hàng trên. Bù lại row-gap về 0. */
  .breadcrumb { row-gap: 0; }
  .breadcrumb > a,
  .breadcrumb > span:not(.icon) { padding-block: 4px; }

  .site-footer__bottom nav a,
  .pitem__more,
  .gpn-card__more,
  .gpn__feature-link,
  .pd-doc > a,
  .pd-faq li > a,
  .filter-bar__reset {
    position: relative;
  }
  .site-footer__bottom nav a::after,
  .pitem__more::after,
  .gpn-card__more::after,
  .gpn__feature-link::after,
  .pd-doc > a::after,
  .pd-faq li > a::after,
  .filter-bar__reset::after {
    content: "";
    position: absolute;
    inset: -7px -6px;
  }
}

/* Nhãn micro 11px của trang Năng lực (.fin__chip, .fin__est, .nlh__qsrc): trên
   màn hình cầm tay 11px là dưới ngưỡng đọc thoải mái, nhất là khi đã in hoa +
   giãn chữ. Nâng lên 12px — cả ba đều là nhãn một dòng nên không xô bố cục. */
@media (max-width: 767px) {
  .fin__chip,
  .fin__est,
  .nlh__qsrc { font-size: 12px; }
}

/* ===== mobileMenu.css ===== */
/* ============================================================
   mobileMenu.css — Ngăn kéo menu off-canvas trên mobile (#main-menu)
   ------------------------------------------------------------
   Dựng lại theo bản thiết kế khách gửi 28/08/2026:
     · thanh đầu: logo bên trái + nút X bên phải
     · ô tìm kiếm lớn + hàng chip "Tìm nhanh"
     · danh sách cấp 1 in hoa, mục đang mở có thanh xanh bên trái + nền xanh nhạt
     · mục con là THẺ: ô icon bo góc + tiêu đề xanh + một dòng mô tả
     · cuối ngăn kéo: nút "Nhận báo giá" xanh lá, rồi hàng VI|EN — mạng xã hội

   Markup do đâu sinh ra:
     .ps-mnav__head          hooks/header_menu.php::sidebar_head()
     .ps-msub__*             hooks/header_menu.php::card_html()
     .toggle / .has-child    Flatsome tự chèn bằng JS (behavior "toggle")
     .mfp-close              Magnific Popup tự chèn — ở đây chỉ kéo về đúng chỗ

   File này PHẢI được @import SAU responsive.css trong main.css: gần hết các rule
   dưới đây phải thắng bộ .nav / .nav-sidebar / .nav-uppercase của Flatsome, vốn
   nạp qua flatsome.css ở đầu <head>.
   ============================================================ */

/* ------------------------------------------------------------
   1. Khung ngăn kéo
   ------------------------------------------------------------ */

/* Nền trắng đặc: mặc định Flatsome để trong suốt, nhìn xuyên thấy nội dung trang
   phía dưới trong lúc ngăn kéo trượt ra. */
#main-menu.mobile-sidebar {
  background: var(--c-white);
}

/* Flatsome chừa sẵn 30px trên đầu .sidebar-menu cho nút đóng nổi ở góc. Bỏ đi:
   nút đóng nay nằm THẲNG HÀNG với logo trong .ps-mnav__head, còn 30px kia chỉ
   đẩy logo tụt xuống khỏi nút. */
#main-menu .sidebar-menu {
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Nút liên hệ nổi (plugin phuson-float-contact, z-index 9990) nằm đè lên ngăn
   kéo và che mất cột mục menu bên phải. Ẩn trong lúc có lớp phủ đang mở. */
body.body-scroll-lock--active #psfc {
  display: none;
}

/* ------------------------------------------------------------
   2. Thanh đầu: logo + nút đóng
   ------------------------------------------------------------ */

.ps-mnav__head {
  display: flex;
  align-items: center;
  min-height: 72px;
  /* Chừa 64px bên phải cho nút X (position:absolute, xem mục kế) để logo dài
     không chạy xuống dưới nút. */
  padding: 14px 64px 14px 16px;
  background: var(--c-white);
}

.ps-mnav__logo {
  display: block;
  line-height: 0;
}

.ps-mnav__logo img {
  width: auto;
  height: 34px;
  max-width: 100%;
}

/* Nút đóng của Magnific Popup: mặc định là chữ "×" mờ, dính sát góc trên bên
   phải của .mfp-content. Kéo vào thẳng hàng với logo và tô lại thành icon X nét
   mảnh như thiết kế.

   Vì sao đặt được bằng top/right: .mfp-close là con position:absolute của
   .mfp-content — chính là khối cuộn của ngăn kéo — nên toạ độ tính từ mép trên
   của NỘI DUNG, tức đúng vùng thanh đầu. */
#main-menu .mfp-close,
.off-canvas .mfp-close {
  /* !important là bắt buộc: Flatsome khai `.mfp-close-btn-in .mfp-close{top:0!important}`.
     Không đè được thì nút nằm sát mép trên, lệch hẳn khỏi hàng logo. */
  top: 14px !important;
  right: 8px;
  /* Bản gốc dùng mix-blend-mode:difference để nút "×" trắng luôn nổi trên mọi
     ảnh nền lightbox. Trong ngăn kéo nền đã cố định là trắng, để nguyên thì màu
     xanh navy bị lật thành màu cam nhạt. */
  mix-blend-mode: normal;
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 1;
  color: var(--c-brand-950);
  background: none;
  font-size: 0; /* nuốt ký tự "×" của bản mặc định, icon vẽ bằng ::after */
}

#main-menu .mfp-close svg {
  display: none;
}

#main-menu .mfp-close::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: url('/wp-content/uploads/2026/07/icon-x.svg') no-repeat center / contain;
  mask: url('/wp-content/uploads/2026/07/icon-x.svg') no-repeat center / contain;
}

/* ------------------------------------------------------------
   3. Danh sách: chuyển sang flex để xếp lại thứ tự khối cuối
   ------------------------------------------------------------
   Thứ tự Flatsome in ra do Customizer quyết định (tìm kiếm → menu → newsletter →
   mạng xã hội → ngôn ngữ → nút báo giá). Thiết kế cần: tìm kiếm → menu → nút báo
   giá → hàng [VI|EN | mạng xã hội].

   Sắp lại bằng `order` chứ không chép đè overlay-menu.php: template đó gọi
   flatsome_header_elements() theo đúng cấu hình Customizer, chép đè là đóng băng
   danh sách phần tử vào code, thêm/bớt một phần tử trong Customizer sẽ không còn
   tác dụng. */
#main-menu ul.nav-sidebar {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

#main-menu ul.nav-sidebar > li {
  width: 100%;
  order: 2; /* mặc định: nằm cùng nhóm với các mục menu */
}

#main-menu ul.nav-sidebar > li.header-search-form { order: 1; }
#main-menu ul.nav-sidebar > li.html_top_right_text { order: 3; }

/* Hai khối cuối đứng CÙNG MỘT HÀNG: ngôn ngữ bên trái, mạng xã hội bên phải.
   Bắt buộc lặp lại `#main-menu ul.nav-sidebar > li` chứ không viết gọn
   `#main-menu li.html_topbar_right` — rule width:100% ở trên đặc hiệu hơn
   (1,1,2 so với 1,1,1) nên bản viết gọn thua.

   Không chia đôi cứng 50/50: site có BỐN thứ tiếng (VI/EN/KO/ZH) trong khi bản
   thiết kế chỉ vẽ VI|EN, chia đôi thì cụm ngôn ngữ tràn ra ngoài và đè lên hàng
   icon. Cụm ngôn ngữ lấy đúng bề ngang nó cần, cụm icon ăn phần còn lại và dồn
   phải; máy quá hẹp thì hàng icon tự xuống dòng thay vì chồng lên chữ. */
#main-menu ul.nav-sidebar > li.html_topbar_right,
#main-menu ul.nav-sidebar > li.header-social-icons {
  display: flex;
  align-items: center;
  padding: 20px 16px 24px;
  border: 0;
}

#main-menu ul.nav-sidebar > li.html_topbar_right {
  order: 4;
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-start;
  padding-right: 0;
}

/* flex-basis 0: kích thước "giả định" của khối icon bằng 0 nên nó KHÔNG BAO GIỜ
   tự đẩy mình xuống dòng, chỉ nở ra chiếm phần còn lại của hàng rồi dồn phải. */
#main-menu ul.nav-sidebar > li.header-social-icons {
  order: 5;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}

/* Không có trong thiết kế: ô đăng ký nhận tin, và mục "Tài khoản" của
   WooCommerce (site không cài Woo — xem template-parts/header/partials/element-account-sidebar.php). */
#main-menu ul.nav-sidebar > li.header-newsletter-item,
#main-menu ul.nav-sidebar > li.account-item {
  display: none;
}

/* ------------------------------------------------------------
   4. Ô tìm kiếm
   ------------------------------------------------------------
   Ruột form dùng chung với desktop (headerSearch.css). Ở đây chỉ phóng to cho
   khớp thiết kế: thanh nhập cao 60px, nút submit là ô vuông xanh đậm bo góc. */
#main-menu .header-search-form.ps-search.ps-search--inline {
  padding: 4px 16px 18px !important;
  border-bottom: 1px solid var(--c-divider) !important;
}

/* <form> mang margin-bottom mặc định ~21px, cộng vào đệm dưới của <li> thành
   một khoảng trống lớn giữa hàng chip và mục menu đầu tiên. */
#main-menu .ps-search--inline .ps-search__form {
  margin: 0;
}

#main-menu .ps-search--inline .ps-search__bar {
  gap: var(--sp-3);
  height: 60px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-white);
}

#main-menu .ps-search--inline .ps-search__bar-icon {
  width: 22px;
  height: 22px;
  color: var(--c-icon-muted);
}

#main-menu .ps-search--inline .ps-search__input {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
}

#main-menu .ps-search--inline .ps-search__submit {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--c-brand-800);
}

#main-menu .ps-search--inline .ps-search__submit::after {
  width: 22px;
  height: 22px;
}

#main-menu .ps-search--inline .ps-search__scopes-label {
  margin: 16px 0 10px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

/* Một hàng ngang cuộn được thay vì xuống dòng thành hai hàng: thiết kế vẽ đúng
   một hàng chip, và cuộn ngang giữ được cả 6 lĩnh vực mà không đội cao khối tìm
   kiếm lên. Lề âm + đệm bù để chip đầu/cuối vẫn thẳng hàng với ô nhập trong khi
   vùng cuộn chạy hết bề ngang ngăn kéo. */
#main-menu .ps-search--inline .ps-search__scopes {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

#main-menu .ps-search--inline .ps-search__scopes::-webkit-scrollbar {
  display: none;
}

#main-menu .ps-search--inline .ps-search__chip {
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-round);
  font-size: 14px;
  font-weight: var(--fw-medium);
}

/* ------------------------------------------------------------
   5. Mục cấp 1
   ------------------------------------------------------------ */

#main-menu li.ps-mnav__item {
  position: relative;
  border-top: 1px solid var(--c-divider);
}

/* Đường kẻ trên của mục đầu tiên trùng với đường kẻ dưới của khối tìm kiếm. */
#main-menu ul.nav-sidebar > li.ps-mnav__item:first-of-type {
  border-top: 0;
}

#main-menu li.ps-mnav__item > a {
  display: flex;
  align-items: center;
  min-height: 56px;
  /* 60px bên phải: chừa chỗ cho nút mũi tên .toggle, để tiêu đề dài không chui
     xuống dưới nó. */
  padding: 10px 60px 10px 16px;
  border: 0;
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--c-heading);
}

/* Thanh xanh dọc bên trái — chỉ hiện ở mục đang mở hoặc đang xem. */
#main-menu li.ps-mnav__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--c-brand-700);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

#main-menu li.ps-mnav__item.active::before,
#main-menu li.ps-mnav__item.current-menu-item::before,
#main-menu li.ps-mnav__item.current-menu-ancestor::before {
  opacity: 1;
}

/* Nền xanh nhạt + chữ xanh cho mục đang mở / đang xem.
   Chỉ tô phần HÀNG CHA (> a) chứ không tô cả <li>: khi mở ra, danh sách con nằm
   trong cùng <li> và thiết kế để nó trên nền trắng. */
#main-menu li.ps-mnav__item.active > a,
#main-menu li.ps-mnav__item.current-menu-item > a,
#main-menu li.ps-mnav__item.current-menu-ancestor > a {
  background: var(--c-brand-50);
  color: var(--c-brand-700);
}

/* Nút mũi tên do Flatsome chèn: kéo về mép phải, phóng vùng chạm lên 56x56 và
   lật lên khi mở. */
#main-menu li.ps-mnav__item > .toggle {
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-heading);
  opacity: 1;
}

#main-menu li.ps-mnav__item > .toggle i {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  font-size: 0;
  line-height: 0;
}

/* Mũi tên vẽ BẰNG BORDER (không dùng hệ icon mask-image như các chỗ khác), và
   lúc đóng/mở chỉ ĐỔI MÀU BORDER — hình vuông giữ nguyên transform: rotate(45deg):
     đóng: hiện cạnh phải + cạnh dưới  -> đỉnh nhọn chìa xuống
     mở  : hiện cạnh trái  + cạnh trên -> đỉnh nhọn chìa lên
   Bốn cạnh luôn dày 2px (hai cạnh để trong suốt) nên kích thước hộp không đổi,
   và cả lúc chuyển trạng thái cũng không đụng tới transform hay mask.

   Cố ý chọn cách này thay vì xoay 180° một mũi tên duy nhất: trên trình duyệt
   xem trước dùng khi dựng, mọi thay đổi transform/mask-image bắt nguồn từ class
   .active (do JS của Flatsome gắn động lên <li>) đều KHÔNG được vẽ lại bên trong
   ngăn kéo off-canvas — computed style đọc ra đúng mà màn hình vẫn giữ mũi tên
   quay xuống. Đổi màu thì luôn ăn. Kiểm tra lại bằng cách đọc computed style của
   ::before khi bấm mở/đóng, đừng chỉ nhìn ảnh chụp màn hình. */
#main-menu li.ps-mnav__item > .toggle i::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  border-bottom-right-radius: 2px;
  transform: rotate(45deg);
  transition: border-color var(--dur-fast) var(--ease);
}

#main-menu li.ps-mnav__item.active > .toggle i::before {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: currentColor;
  border-left-color: currentColor;
  border-bottom-right-radius: 0;
  border-top-left-radius: 2px;
}

#main-menu li.ps-mnav__item.active > .toggle {
  color: var(--c-brand-700);
}


/* ------------------------------------------------------------
   6. Mục con — thẻ icon + tiêu đề + mô tả
   ------------------------------------------------------------ */

#main-menu ul.ps-msub {
  margin: 0;
  padding: 0;
  background: var(--c-white);
}

#main-menu li.ps-msub__row {
  position: relative;
  border: 0;
}

/* Gạch phân cách THỤT VÀO hai đầu như thiết kế (bắt đầu ngang mép trái ô icon),
   nên vẽ bằng ::before của <li> chứ không dùng border — border thì luôn kéo hết
   bề ngang. Mục đầu tiên không kẻ: ngay trên nó đã là hàng cấp 1 đang mở. */
#main-menu li.ps-msub__row + li.ps-msub__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 24px;
  height: 1px;
  background: var(--c-divider);
}

#main-menu a.ps-msub__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 24px;
  border: 0;
}

#main-menu .ps-msub__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--c-brand-100);
  color: var(--c-brand-700);
}

#main-menu .ps-msub__icon .icon {
  width: 26px;
  height: 26px;
}

#main-menu .ps-msub__body {
  display: block;
  min-width: 0;
}

#main-menu .ps-msub__title {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--c-brand-700);
}

#main-menu .ps-msub__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: var(--fw-regular);
  line-height: 18px;
  letter-spacing: normal;
  color: var(--c-text-muted);
}

/* Cấp 3 (vd. "Xưởng sản xuất" nằm dưới "Năng lực"): thẻ cấp 2 vẫn có nút mũi
   tên riêng, neo vào mép phải của chính hàng thẻ đó. */
#main-menu li.ps-msub__row > .toggle {
  position: absolute;
  top: 12px;
  right: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-brand-700);
  opacity: 1;
}

#main-menu li.ps-msub__row > .toggle i {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  font-size: 0;
  line-height: 0;
}

/* Cùng cách vẽ như mũi tên cấp 1 — xem ghi chú ở mục 5. */
#main-menu li.ps-msub__row > .toggle i::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  border-bottom-right-radius: 2px;
  transform: rotate(45deg);
  transition: border-color var(--dur-fast) var(--ease);
}

#main-menu li.ps-msub__row.active > .toggle i::before {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: currentColor;
  border-left-color: currentColor;
  border-bottom-right-radius: 0;
  border-top-left-radius: 2px;
}

/* Vì có nút mũi tên đè lên góc phải, thẻ cấp 2 nào CÓ con phải chừa lề phải. */
#main-menu li.ps-msub__row.has-child > a.ps-msub__link {
  padding-right: 56px;
}

/* Cấp 3 canh trái thẳng cột tiêu đề của thẻ cha (24 lề + 52 ô icon + 14 khoảng
   cách = 90px). Phải khai text-align: Flatsome canh giữa mọi link cấp sâu trong
   ngăn kéo. */
#main-menu ul.ps-msub ul.sub-menu > li > a {
  padding: 10px 16px 10px 90px;
  border: 0;
  text-align: left;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

/* ------------------------------------------------------------
   7. Nút "Nhận báo giá"
   ------------------------------------------------------------ */

#main-menu li.html_top_right_text {
  padding: 20px 16px 0;
  border-top: 1px solid var(--c-divider);
}

#main-menu li.html_top_right_text > a.btn--header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--c-cta);
  font-size: 16px;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-white) !important;
}

/* ------------------------------------------------------------
   8. Hàng cuối: VI|EN — mạng xã hội
   ------------------------------------------------------------ */

/* Site có BỐN thứ tiếng (VI/EN/KO/ZH) trong khi bản thiết kế chỉ vẽ VI|EN, nên
   cỡ chữ và khoảng cách phải nhỏ hơn để cả bốn nằm gọn trong nửa bề ngang. */
#main-menu .lang-switch ul {
  gap: 6px;
  font-size: 13px;
}

#main-menu .lang-switch li:not(:first-child)::before {
  height: 12px;
  margin-right: 6px;
}

/* Gỡ đệm mà .nav-sidebar của Flatsome áp cho mọi <a> bên trong ngăn kéo — để
   nguyên thì cụm bốn thứ tiếng rộng hơn 200px và đẩy hàng icon xuống dòng. */
#main-menu .lang-switch li a {
  padding: 0;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--c-text-muted);
}

#main-menu .lang-switch li a[aria-current="true"] {
  color: var(--c-brand-700);
}

/* Icon mạng xã hội: vòng tròn viền xanh, glyph xanh — thay cho icon xám phẳng
   mặc định của Flatsome. */
#main-menu .social-icons {
  display: flex;
  gap: 8px;
}

#main-menu .social-icons a.icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--c-brand-700);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-brand-700) !important;
  opacity: 1;
}

#main-menu .social-icons a.icon i {
  font-size: 17px;
  line-height: 1;
  color: inherit;
}

/* ===== textWrap.css ===== */
/* ============================================================
   NGẮT DÒNG — chống "rơi 1 chữ xuống dòng cuối"
   ------------------------------------------------------------
   Vấn đề: ở khổ mobile (375–430px) rất nhiều tiêu đề và nhãn bị
   đẩy đúng MỘT từ xuống dòng cuối ("Cách nhiệt vượt / trội",
   "Tiết kiệm năng / lượng", "KHỐI ĐIỀU HÀNH VĂN / PHÒNG"…).
   Đo bằng Range.getBoundingClientRect trên 142 URL: 812 chỗ.

   Cách sửa: để trình duyệt tự cân dòng thay vì chèn &nbsp; hay
   <br> vào nội dung — nội dung trong DB giữ nguyên nên bản EN/KO/ZH
   và SEO không bị ảnh hưởng, và không phải canh tay theo từng khổ máy.

   - text-wrap: pretty  → dồn lại vài dòng cuối để dòng cuối không
     còn trơ một từ. Kế thừa được nên đặt ở body là đủ cho body text.
   - text-wrap: balance → chia đều độ dài các dòng, hợp với tiêu đề
     và nhãn ngắn (Chrome chỉ áp dụng khi khối ≤ 6 dòng nên không
     ảnh hưởng đoạn văn dài).

   Trình duyệt chưa hỗ trợ sẽ bỏ qua, không có fallback nào hỏng.
   File này @import SAU responsive.css trong main.css.
   ============================================================ */

body {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6,
blockquote,
figcaption,
legend,
dt,
th,
.btn, .button,
[class*="__title"],
[class*="__heading"],
[class*="__name"],
[class*="__label"],
[class*="__eyebrow"],
[class*="__caption"],
[class*="__subtitle"],
[class*="__lead"],
[class*="__value"],
[class*="__chip"],
[class*="__badge"],
[class*="__tag"],
[class*="__btn"],
[class*="__cta"],
[class*="-title"],
[class*="-label"],
[class*="-name"] {
  text-wrap: balance;
}

/* Bảng thông số: ô <th>/<td> hẹp, cân dòng làm chữ nhảy lung tung
   giữa các hàng nên giữ cách ngắt mặc định, chỉ chống rơi chữ. */
table th,
table td {
  text-wrap: pretty;
}

/* ===== uppercase.css ===== */
/* ============================================================
   VIẾT HOA TIÊU ĐỀ
   ------------------------------------------------------------
   Khách chốt 24/08/2026: mọi TIÊU ĐỀ viết in hoa, riêng nội dung
   mô tả/chi tiết giữ nguyên chữ thường.

   Làm bằng text-transform thay vì sửa chữ trong database, vì:
   - chữ gốc trong DB vẫn đúng chính tả → alt/title/SEO, bản EN và
     kết quả tìm kiếm không bị hỏng;
   - đổi lại chỉ cần xoá file này khỏi main.css.

   File này PHẢI được @import CUỐI CÙNG trong main.css (sau
   responsive.css) thì mới thắng được các rule cùng specificity.
   ============================================================ */

/* --- 1. Mega menu: tiêu đề mục con (chữ xanh) --------------- */
/* Giữ .ps-mega__desc chữ thường — đó là dòng mô tả. */
.ps-mega__title {
  text-transform: uppercase;
}

/* --- 2. Tên sản phẩm ở mọi nơi hiển thị --------------------- */
.product-card__title,          /* thẻ "Sản phẩm chủ lực" trang chủ   */
.pitem__title,                 /* danh sách sản phẩm /san-pham/      */
.pitem__title a,
.spec-card__title,             /* thẻ sản phẩm cùng nhóm             */
.spec-card__title a,
.pd-title,                     /* tiêu đề trang chi tiết sản phẩm    */
body.single-san-pham .page-hero__title,
body.tax-nhom-san-pham .page-hero__title {
  text-transform: uppercase;
}

/* --- 3. Khối "Danh mục sản phẩm" (/san-pham/) ---------------- */
.pcard__name b,                /* tên nhóm: PANEL, TẤM LỢP, PHỤ KIỆN... */
.pcard__list a span:not(.icon) /* tên sản phẩm liệt kê trong nhóm      */ {
  text-transform: uppercase;
}
/* Dòng đếm "7 sản phẩm" nằm trong .pcard__name nhưng là chú thích
   → trả lại chữ thường. */
.pcard__name > span {
  text-transform: none;
}

/* --- 4. Menu mobile (off-canvas) ---------------------------- */
/* Cấp 1 đã in hoa sẵn nhờ class .nav-uppercase của Flatsome, nhưng
   cấp 2 thì không — trên mobile mega menu rơi về .nav-sidebar nên
   phải khai riêng, nếu không mobile lệch hẳn so với desktop. */
.nav-sidebar .sub-menu > li > a {
  text-transform: uppercase;
}
/* Dòng mô tả trong thẻ mục con (hooks/header_menu.php::card_html) là câu
   mô tả chứ không phải tiêu đề — trả lại chữ thường. Phải khai Ở ĐÂY chứ
   không phải trong mobileMenu.css: file này nạp sau cùng nên rule
   text-transform ngay bên trên mới là rule đang thắng. */
.ps-msub__desc {
  text-transform: none;
}

/* --- 5. Box số liệu (icon + con số + nhãn) ------------------ */
/* Khách chốt: mọi box dạng này viết hoa cả con số lẫn nhãn, trên
   TOÀN BỘ trang. Mỗi trang có một họ class riêng nên phải liệt kê
   đủ — thêm trang mới có box số liệu thì bổ sung vào đây.
   Dòng phụ tiếng Anh (.hse__staten) và ghi chú (.fin__stat-sub)
   vẫn để chữ thường, vì đó là câu mô tả chứ không phải nhãn. */
.stat__lead, .stat__value, .stat__label,                 /* trang chủ            */
.gt-stat__value, .gt-stat__label,                        /* giới thiệu           */
.td-stat__value, .td-stat__label,                        /* tuyển dụng           */
.xf-stat__value, .xf-stat__label,                        /* xưởng sản xuất       */
.nls__value, .nls__label,                                /* năng lực - hero      */
.fin__stat-val, .fin__stat-name,                         /* năng lực - tài chính */
.hrs__big, .hrs__kicker,                                 /* năng lực - nhân sự   */
.hse__statval, .hse__statlabel,                          /* văn hóa - an toàn    */
.dtc-stat__num, .dtc-stat__label,                        /* đối tác              */
.cc-patent__num, .cc-patent__count, .cc-patent__label,   /* chứng chỉ            */
.fp-item__name b, .fp-item__num-value b                  /* bảng cơ sở           */ {
  text-transform: uppercase;
}

/* --- 6. Đơn vị đo giữ nguyên chữ thường --------------------- */
/* m² viết hoa thành M² là sai ký hiệu SI, nên tách riêng ra.
   .xf-stat__value đã có sẵn <span> bọc đơn vị; các chỗ còn lại
   dùng <span class="u"> do ps_split_unit() sinh ra. */
.u,
.xf-stat__value span {
  text-transform: none;
}

/* ===== mobile.css ===== */
/* ============================================================
   mobile.css — Phần đầu trang trên điện thoại (28/08/2026)
   ------------------------------------------------------------
   Vì sao có file này thay vì viết thêm vào responsive.css:
   responsive.css là bảng quy đổi bố cục desktop → khổ hẹp (5 cột
   thành 2, 3 cột thành 1…). Còn ở đây bản mobile KHÁC HẲN bản
   desktop chứ không phải bản desktop thu nhỏ: tiêu đề đổi câu,
   dải cam kết đổi từ 4 ô thành 2, nút phụ đổi từ nút viền thành
   dòng chữ. Trộn vào responsive.css thì mỗi lần sửa một bên phải
   dò xem có đụng bên kia không.

   File này PHẢI @import CUỐI CÙNG trong main.css — sau
   responsive.css và uppercase.css — thì mới thắng được các rule
   cùng specificity ở hai file đó.

   Khách chốt 28/08/2026 (kèm ảnh thiết kế): bản mobile phải đọc
   ra một tập đoàn sản xuất chứ không phải một trang bán hàng, nên
   mỗi màn hình chỉ giữ MỘT việc để làm.

   Nhịp màn hình đầu:
       Header → nhãn thương hiệu → tiêu đề 3 dòng → mô tả →
       1 CTA chính + 1 liên kết chữ → 2 lợi thế → thống kê 2×2
   ============================================================ */

/* ============================================================
   0. CẶP THẺ desktop / mobile
   ------------------------------------------------------------
   Vài chỗ ở hero có hai phiên bản chữ nằm sẵn trong cùng một
   trang, CSS chọn bản nào hiện (xem blocks/homeHero/templates/).
   Không chọn bằng PHP vì trang chủ đi qua cache trang: bản HTML
   dựng cho người xem đầu tiên sẽ được phát lại cho mọi người sau
   đó, chọn theo user-agent là điện thoại có thể nhận bản desktop.

   Chỗ nào KHÔNG có bản mobile riêng thì template in ra thẻ trần
   không mang class nào, nên không rule nào bên dưới chạm tới —
   đó là lý do phải có cặp class chứ không phải một class.
   ============================================================ */
.ps-alt--m { display: none; }

/* Hai khối CHỈ CÓ ở bản mobile, in sẵn trong trang nhưng phải câm ở
   mọi khổ khác:
   - dải cam kết 2 ô (bản desktop dùng dải 4 ô .hero-benefits__list--d)
   - nhãn "Năng lực Phú Sơn" trên khối số liệu (bản desktop dải số
     liệu là một thanh ngang mảnh, thêm tiêu đề vào là đội cao nó lên)
   Khai ở đây chứ không khai trong @media vì @media chỉ BẬT chúng
   lên; không có hai dòng này thì desktop hiện cả hai. */
.hero-benefits__list--m,
.stats__eyebrow { display: none; }

/* ============================================================
   1. HEADER — logo trái, hamburger phải
   ------------------------------------------------------------
   Chặn ở 849px chứ không phải 767px: đó là ngưỡng Flatsome đổi
   sang bộ .show-for-medium (hiện hamburger, giấu menu ngang).
   Dừng ở 767px thì khoảng 768–849px vẫn còn logo nằm giữa hai ô
   trống — đúng cái bố cục đang phải sửa.
   ============================================================ */
@media (max-width: 849px) {
  /* Cao 66px theo yêu cầu (64–68).
     !important vì 70px là do Customizer của Flatsome in ra trong một
     thẻ <style> ở wp_head priority 100 — tức LUÔN nằm sau file CSS
     này trong <head>. Cùng specificity thì nó thắng, nên đây là cách
     duy nhất đè được mà không phải vào Customizer chỉnh tay (cùng lý
     do đã ghi ở header.css cho --drawer-width). */
  #header #masthead { height: 66px !important; }
  #header .header-inner { min-height: 66px; }

  /* Bỏ 15px đệm riêng của .header-inner: cộng với 16px lề của
     .container thành 31px, logo lùi vào quá sâu so với mọi khối nội
     dung bên dưới (đều thẳng hàng ở 16px). */
  #header .header-inner { padding-inline: 0; }

  /* Flatsome xếp 3 ô bằng thuộc tính order: hamburger 1, logo 2,
     ô phải 3. Đảo order của hai ô đầu là xong, không phải đụng
     vào markup của theme cha. */
  #header .header-inner > .flex-col.logo { order: 1; }
  #header .header-inner > .flex-col.show-for-medium.flex-left { order: 3; }

  /* Ô mobile-nav bên phải đang RỖNG (không có mục nào) nhưng vẫn
     chiếm 41px — chính nó làm logo lệch khỏi tâm và trông như bị
     kẹp. Không còn ai đứng ở đó nữa thì bỏ hẳn. */
  #header .header-inner > .flex-col.show-for-medium.flex-right { display: none; }

  /* margin-right:auto đẩy hamburger sang sát mép phải; text-align
     đè "medium-logo-center" của Flatsome. */
  #header .header-inner > .flex-col.logo {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }
  #header #logo { text-align: left; }
  /* min() để ở máy hẹp (360px) logo vẫn chừa đủ chỗ cho hamburger. */
  #header #logo img {
    width: min(215px, 58vw);
    max-height: 42px;
    margin: 0;
  }

  /* Hamburger: bỏ cái "ô trắng lửng" — thật ra là border-bottom +
     border-radius mà rule .mobile-nav a (dành cho danh sách trong
     ngăn kéo) quét trúng luôn nút này ở header. Đồng thời nới
     vùng chạm lên 44×44 theo khuyến nghị tối thiểu. */
  #header .mobile-nav > li.nav-icon > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--c-heading);
  }
  #header .mobile-nav > li.nav-icon > a .icon-menu {
    width: 26px;
    height: 26px;
  }
  /* Ô chứa hamburger canh phải, không để lề thừa của Flatsome. */
  #header .mobile-nav.nav-left { justify-content: flex-end; }
}

/* ============================================================
   2. HERO
   ============================================================ */
@media (max-width: 767px) {
  /* --- Cặp thẻ desktop/mobile ---------------------------------
     Đặt Ở ĐẦU khối chứ không ở cuối: mấy rule component bên dưới
     (.hero__eyebrow chẳng hạn) cần quyền đổi lại display, mà hai
     bên cùng specificity nên rule đứng sau mới thắng. */
  .ps-alt--d { display: none; }
  .ps-alt--m { display: inline; }
  /* Tiêu đề và mô tả là khối riêng một dòng, không phải chữ chạy
     trong câu — để inline thì hai bản dính liền nhau khi cả hai
     cùng hiện lúc CSS chưa nạp xong. */
  h1.hero__title > .ps-alt--m,
  p.hero__desc > .ps-alt--m { display: block; }

  :root {
    /* 560px cũ là vì bản desktop nhồi nguyên tiêu đề 3 dòng + mô
       tả 5 dòng + 2 nút to xuống khổ hẹp. Nội dung đã rút gọn nên
       hero thấp lại, và quan trọng hơn: dải cam kết bên dưới giờ
       KHÔNG còn đè lên ảnh nữa nên nó cộng thêm chiều cao. */
    --hero-height: 430px;

    /* Lớp phủ NGANG: tối cột trái nơi có chữ, mở dần sang phải cho
       lộ hẳn ảnh (theo đúng ảnh thiết kế khách gửi).
       Phủ tối đều cả khung thì đọc được chữ nhưng mất luôn manh mối
       "đây là ảnh gì" — người xem chỉ thấy một mảng xanh đậm. Phủ
       theo chiều dọc (chừa dải sáng ở đỉnh) cũng không đúng: nó cắt
       ảnh làm hai băng ngang chứ không cho thấy trọn cảnh nhà xưởng.

       Mốc % ăn theo BỀ NGANG hero, khớp với cột chữ rộng
       --hero-text-w bên dưới: đậm hết cột chữ (0–45%), nhạt dần ở
       rìa phải cột chữ (68%), gần như trong suốt từ 88% trở đi. */
    --hero-overlay: linear-gradient(
      90deg,
      rgba(3, 22, 46, 0.90) 0%,
      rgba(3, 22, 46, 0.85) 45%,
      rgba(3, 22, 46, 0.48) 68%,
      rgba(3, 22, 46, 0.14) 88%,
      rgba(3, 22, 46, 0.08) 100%
    );

    /* Bề ngang cột chữ. Ảnh thiết kế bó chữ vào ~2/3 màn hình để
       chừa hẳn một mảng ảnh bên phải — cũng chính vì bó lại mà tiêu
       đề rơi thành 3 dòng "GIẢI PHÁP / VẬT LIỆU / CÔNG NGHỆ CAO"
       đúng như mẫu, không phải gõ thêm dấu | nào. */
    --hero-text-w: 250px;
  }

  .hero__content {
    max-width: none;
    padding-block: 84px 34px;
  }

  /* --- Nhãn thương hiệu ---------------------------------------
     Logo ở header đã nói tên công ty rồi, nên trên mobile tên
     công ty lùi xuống thành nhãn nhỏ và nhường chỗ tiêu đề cho
     thông điệp. Gạch chân bằng border chứ không phải ::after để
     nó luôn dài đúng bằng chữ. */
  .hero__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
  }

  /* 30px (không phải 34px): đo trên ảnh thiết kế ra đúng cỡ này, và
     đó cũng là cỡ lớn nhất mà "CÔNG NGHỆ CAO" còn nằm gọn một dòng
     trong cột chữ 250px. */
  .hero__title {
    max-width: var(--hero-text-w);
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 16px;
  }
  .hero__desc {
    max-width: var(--hero-text-w);
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 26px;
  }

  /* --- CTA -----------------------------------------------------
     Hai nút kéo hết chiều ngang xếp chồng nhau thì cả hai cùng
     mất trọng lượng — nhìn ra hai thanh chứ không ra "cái nào là
     việc chính". Nút chính co lại vừa chữ, nút phụ xuống thành
     một dòng chữ có gạch chân. */
  .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hero__actions .btn { width: auto; }
  .hero__actions .btn--primary { gap: 6px; }
  .hero__actions .btn--primary {
    height: 46px;
    padding-inline: 18px;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .hero__actions .btn--primary .icon-arrow-right {
    width: 15px;
    height: 15px;
  }
  .hero__actions .btn--outline-light {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
  }
  /* border-bottom chứ không phải text-decoration: .btn khai
     "text-decoration: none !important" (styles.css) nên gạch chân
     kiểu thường không bao giờ ăn. */
  .hero__actions .btn--outline-light .ps-alt,
  .hero__actions .btn--outline-light .btn__label {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  }
}

/* Mũi tên của nút phụ CHỈ có ở bản mobile: bản desktop là nút
   viền "Yêu cầu báo giá", thêm mũi tên vào là đổi cả giao diện PC
   mà khách đang thấy ổn. */
.hero__actions .btn--outline-light .icon-arrow-right { display: none; }
@media (max-width: 767px) {
  .hero__actions .btn--outline-light .icon-arrow-right { display: inline-block; }
}

/* ============================================================
   3. DẢI CAM KẾT dưới hero
   ------------------------------------------------------------
   Bản desktop: 4 ô nằm ĐÈ lên đáy ảnh hero.
   Bản mobile: 2 ô, thành một dải nền xanh đậm ĐỨNG RIÊNG dưới
   ảnh. Bốn ô ở khổ 375px phải cuộn ngang và luôn hở một ô bị cắt
   mất đuôi chữ — thấy rõ trên ảnh khách gửi ("Chất lượng ổn đị|").
   ============================================================ */
@media (max-width: 767px) {
  .hero-benefits {
    position: static;
    background: var(--c-brand-950);
    border-top: 0;
  }
  .hero-benefits__list--d { display: none; }

  .hero-benefits__list--m {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding-block: 16px;
    /* responsive.css cho .hero-benefits__list cuộn ngang (bản 4 ô
       desktop cần vậy). Ở đây chỉ có 2 ô đứng yên, để nguyên thì
       trình duyệt vẽ thêm một thanh cuộn xám vắt ngang dải xanh. */
    overflow: visible;
  }

  .hero-benefit--m {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 8px;
    /* responsive.css khoá .hero-benefit ở white-space:nowrap để bản
       4 ô cuộn ngang không gãy dòng. Ô ở đây rộng cố định nửa màn
       hình nên phải cho xuống dòng, không thì "HỖ TRỢ KỸ THUẬT 24/7"
       bị cắt cụt ở mép phải. */
    white-space: normal;
  }
  /* Vạch ngăn giữa hai ô. Đặt trên ô thứ hai và chừa 4px trên
     dưới để vạch ngắn hơn nội dung, đúng như bản thiết kế. */
  .hero-benefit--m + .hero-benefit--m {
    padding-left: 18px;
  }
  .hero-benefit--m + .hero-benefit--m::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
  }

  /* flex:none — không có nó thì ô chữ dài kéo icon bẹp lại. */
  .hero-benefit--m .icon {
    flex: none;
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.9);
  }
  .hero-benefit__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .hero-benefit__value {
    font-size: 22px;
    line-height: 28px;
    font-weight: var(--fw-bold);
    color: var(--c-white);
  }
  .hero-benefit__text {
    font-size: 12px;
    line-height: 17px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
  }
}

/* ============================================================
   4. THỐNG KÊ — lưới 2×2 + một dòng ngang riêng
   ------------------------------------------------------------
   Năm ô chia 2 cột thì ô thứ 5 luôn lẻ ra. Bốn số mạnh nhất vào
   lưới 2×2, còn "Hàng ngàn công trình" (số duy nhất không phải
   con số) tách thành một dải riêng bên dưới.
   ============================================================ */
@media (max-width: 767px) {
  /* !important vì UX Builder in padding:0px vào một rule #section_…
     (selector ID) — không có cách nào thắng bằng specificity. */
  .stats { padding-block: 28px 24px !important; }

  /* Nhãn mục — chỉ có ở bản mobile. Bản desktop dải số liệu là
     một thanh ngang mảnh chạy sát dưới hero, thêm tiêu đề vào là
     đội cao thanh đó lên. */
  .stats__eyebrow {
    display: block;
    position: relative;
    margin: 0 16px 20px;
    padding-bottom: 11px;
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-heading);
  }
  .stats__eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--c-brand-600);
  }

  .stats__grid { padding-inline: 16px; }

  /* Icon lên trên, chữ canh giữa — bố cục ngang (icon trái) ở khổ
     hẹp làm hai cột so le nhau vì ô 2 dòng và ô 3 dòng không bao
     giờ bằng nhau. */
  .stat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 8px;
  }
  .stat__icon .icon { width: 34px; height: 34px; }
  .stat__value { font-size: 26px; line-height: 32px; }
  .stat__label,
  .stat__lead {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.04em;
  }

  /* Ô "Thành lập 2009" khai nhãn TRƯỚC con số trong HTML (bản
     desktop cần vậy), ba ô còn lại thì ngược lại. order đưa nhãn
     xuống dưới cho cả bốn ô giống nhau, khỏi phải sửa HTML và
     làm hỏng bản desktop. */
  .stat > span:not(.stat__icon) {
    display: flex;
    flex-direction: column;
  }
  .stat__lead { order: 2; }

  /* Vạch ngăn dọc giữa hai cột — responsive.css tắt hết bằng
     !important nên ở đây phải bật lại cũng bằng !important. */
  .stat + .stat::before {
    display: block !important;
    top: 16px;
    bottom: 16px;
    height: auto;
    transform: none;
  }
  .stat:nth-child(odd)::before { display: none !important; }

  /* --- Dòng "Hàng ngàn công trình" --------------------------- */
  .stat:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 12px;
    border: 1px solid var(--c-divider);
    border-top: 1px solid var(--c-divider);
    border-radius: var(--r-lg);
    background: var(--c-white);
  }
  .stat:last-child::before { display: none !important; }
  .stat:last-child .stat__icon .icon { width: 26px; height: 26px; }
  /* "Hàng ngàn" + "công trình trên toàn quốc" gộp thành MỘT câu
     nằm ngang, cùng cỡ chữ — tách hai tầng như bốn ô kia thì
     "Hàng ngàn" đứng một mình không nói lên gì. */
  .stat:last-child > span:not(.stat__icon) {
    flex-direction: row;
    /* Vẫn để wrap làm lưới an toàn: ở máy hẹp hơn 360px câu này không
       thể nằm một dòng, thà xuống dòng còn hơn tràn ra khỏi ô. */
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  /* 12px: ở khổ 375px cả câu "HÀNG NGÀN CÔNG TRÌNH TRÊN TOÀN QUỐC"
     vừa đúng MỘT dòng (đo được 271px chỗ trống, câu dài ~263px). Từ
     13px trở lên là rớt xuống dòng thứ hai và ô cao gấp đôi. */
  .stat:last-child .stat__value,
  .stat:last-child .stat__label {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.02em;
    font-weight: var(--fw-semibold);
    color: var(--c-brand-700);
  }
}

/* ===== i18n.css ===== */
/* ============================================================
   ĐA NGÔN NGỮ — chỉnh chữ cho EN / KO / ZH
   ------------------------------------------------------------
   File này PHẢI @import CUỐI CÙNG trong main.css (sau mobile.css)
   vì nó phải thắng được uppercase.css và textWrap.css.

   Mọi rule ở đây đều khoá bằng thuộc tính lang trên thẻ <html>
   (header.php dòng 12 gọi language_attributes(), Polylang điền
   lang="vi" / "en-US" / "ko-KR" / "zh-CN"), nên bản tiếng Việt
   KHÔNG bị đụng tới một dòng nào.
   ============================================================ */

/* --- 1. Font cho 한국어 / 中文 -------------------------------
   Inter (assets/fonts/Inter) không có glyph CJK — để nguyên thì
   trình duyệt tự rơi về font dự phòng khác nhau trên từng máy,
   chữ Hàn/Trung cao thấp lộn xộn giữa các khối.

   Dùng font hệ thống thay vì tự host Noto Sans KR/SC vì bộ CJK
   đầy đủ nặng 5-8 MB mỗi thứ tiếng — gấp nhiều lần toàn bộ CSS
   + JS của site cộng lại. Font hệ thống hiển thị đúng chuẩn bản
   địa trên cả macOS, Windows, Android, iOS và không tốn byte nào.
   Vẫn để Inter đứng ĐẦU chuỗi: chữ Latin và chữ số trong câu
   tiếng Hàn/Trung (tên riêng "Phú Sơn Group", "JAVTA", số liệu
   "35,000 m²") giữ đúng typeface của thương hiệu.               */

html[lang^="ko"] {
  --font-sans: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
               "Nanum Gothic", "Helvetica Neue", Arial, sans-serif;
}

html[lang^="zh"] {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
               "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

/* --- 2. Tắt viết hoa tiêu đề cho CJK -------------------------
   uppercase.css viết hoa mọi tiêu đề (khách chốt 24/08/2026).
   text-transform: uppercase không có tác dụng gì với 한국어/中文
   — chữ Hán và Hangul không có chữ hoa/thường — nhưng nó VẪN
   viết hoa phần chữ Latin lẫn trong câu, biến "Phú Sơn Group"
   thành "PHÚ SƠN GROUP" giữa một câu tiếng Hàn, nhìn như đang
   hét. Trả về none cho ko/zh; bản EN giữ nguyên viết hoa vì
   tiếng Anh có chữ hoa thật.                                     */

html[lang^="ko"] [class],
html[lang^="zh"] [class] {
  text-transform: none;
}

/* --- 3. Ngắt dòng CJK ----------------------------------------
   textWrap.css dùng text-wrap: balance / pretty và các mẹo chống
   rơi một chữ xuống dòng cuối — những mẹo đó tính theo TỪ, mà
   tiếng Hàn/Trung không có dấu cách giữa từ nên trình duyệt ngắt
   sai chỗ (giữa một danh từ ghép).

   line-break: strict + word-break: normal để trình duyệt áp luật
   cấm ngắt của CJK (không mở đầu dòng bằng dấu câu, không kết
   thúc dòng bằng dấu mở ngoặc).                                  */

html[lang^="ko"] body,
html[lang^="zh"] body,
html[lang^="ko"] body *,
html[lang^="zh"] body * {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

html[lang^="ko"] h1, html[lang^="ko"] h2, html[lang^="ko"] h3,
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 {
  text-wrap: normal;
}

/* CJK không có dấu cách nên chữ dày hơn Latin ở cùng cỡ chữ —
   nới hàng lên một nhịp cho dễ đọc, nhất là các đoạn mô tả dài. */
html[lang^="ko"] p,
html[lang^="zh"] p {
  line-height: 1.85;
}

/* --- 4. Tiếng Anh --------------------------------------------
   Nhãn nút tiếng Anh dài hơn tiếng Việt trung bình ~15% ("Xem
   thêm" 8 ký tự -> "Learn more" 10). Cho phép nút xuống dòng
   thay vì tràn ra ngoài khung. Rà lại bằng mắt ở bước QA. */

html[lang^="en"] .btn {
  white-space: normal;
}

/* ===== main.css (rule riêng) ===== */
/* Fonts */

/*  */

/* Design tokens (biến CSS dùng chung cho header.css, footer.css, styles.css, pages.css...) */


/* Tailwind (bản build, không import tailwindcss.css vì đó là file nguồn) */


/* Header */






/* Component dùng chung nhiều trang */


































/* Design system (component dùng chung theo bản BAN_GIAO_WORDPRESS_PHU_SON) */



/* Responsive overrides — phải nằm cuối cùng */


/* Ngăn kéo menu mobile — phải nằm SAU responsive.css để đè các rule .nav-sidebar
   của Flatsome và phần responsive chung */


/* Ngắt dòng đẹp (chống rơi 1 chữ xuống dòng cuối) — sau responsive.css */


/* Viết hoa tiêu đề — phải nằm SAU responsive.css */


/* Bản điện thoại của phần đầu trang (header, hero, dải cam kết, thống kê).
   PHẢI nằm CUỐI CÙNG: nó đè lại một số rule của responsive.css và uppercase.css. */


/* Đa ngôn ngữ (EN/KO/ZH) — @import CUỐI CÙNG: nó phải thắng uppercase.css
   (tắt text-transform cho ko/zh), textWrap.css và mobile.css.
   Bản tiếng Việt không bị đụng tới vì mọi rule đều khoá theo html[lang].
   Xem assets/css/i18n.css. */


/* CSS Here */

/* ============================================================
   FONT CHỮ TOÀN SITE
   ============================================================
   Nguồn duy nhất là --font-sans trong tokens.css:
       "Inter", "Helvetica Neue", Arial, sans-serif
   đúng stack của bản bàn giao (my_notes/BAN_GIAO_WORDPRESS_PHU_SON/css/tokens.css).
   Cả Inter lẫn font dự phòng đều self-host tại assets/fonts/.

   Vì sao phải khai lại ở đây thay vì để tokens.css lo:
   tokens.css đặt font ở thẻ <html> và trông chờ mọi thứ kế thừa xuống. Nhưng
   Flatsome in ra hai rule từ Customizer > Typography
   (flatsome/inc/functions/function-custom-css.php dòng 239 và 265):
       body { font-family: <Body Text font> }
       h1,h2,h3,h4,h5,h6,.heading-font { font-family: <Headings font> }
   Cả hai khớp TRỰC TIẾP phần tử nên thắng giá trị kế thừa từ <html>, bất kể
   specificity. Riêng rule heading còn in ra tên font TRẦN ("Inter"), không kèm
   font dự phòng nào.

   Vì sao cần !important: flatsome_custom_css() gắn vào wp_head priority 100, còn
   thẻ <link> stylesheet in ra ở priority 8 — nghĩa là <style> của Flatsome LUÔN
   nằm sau file này trong <head>. Cùng specificity thì nó thắng, nên đây là cách
   duy nhất để đè mà không phải sửa Customizer.

   Hệ quả trước khi có rule heading bên dưới: mọi h1–h6 chạy Inter còn phần chữ
   còn lại chạy font của body — hai typeface xen kẽ ngay trong một khối nội dung. */
body,
.wp-block-post-title {
  font-family: var(--font-sans) !important;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
  font-family: var(--font-sans) !important;
}