/* ============================================================
 *  GlassKote Design System — v2.0
 *  Skill: high-end-visual-design (Editorial Luxury archetype)
 *  Brand: Viglacera GlassKote · "Sắc màu tô điểm cuộc sống"
 * ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── Color Palette ── */
  /* Brand xanh dương #1e608f — chủ đạo UI dùng bản trầm / đậm hơn một chút */
  --gk-navy-deep: #0c2f45;
  /* Nền footer, overlay tối */
  --gk-navy: #1a5580;
  /* Chủ đạo (trầm hơn #1e608f) */
  --gk-navy-hover: #154a72;
  /* Hover nút / link đậm */
  --gk-navy-mid: #2f7398;
  /* Accent nhạt hơn */
  --gk-steel: #5289a8;
  /* Nhãn / phụ, cùng họ màu */
  --gk-glass-blue: rgba(26, 85, 128, 0.08);
  /* Glass tint */
  --gk-glass-white: rgba(255, 255, 255, 0.82);
  /* Nav glass */
  /* Panel dropdown — luôn đọc được trên hero / pill trong suốt */
  --gk-dropdown-surface: rgba(253, 251, 247, 0.98);
  --gk-dropdown-border: rgba(26, 85, 128, 0.16);
  --gk-dropdown-shadow: 0 20px 50px rgba(12, 47, 69, 0.22), 0 1px 0 rgba(255, 255, 255, 0.95) inset;

  /* ── Neutrals ── */
  --gk-cream: #FDFBF7;
  /* Warm white bg — main background */
  --gk-cream-dark: #F3F0EA;
  /* Section alt bg */
  --gk-white: #FFFFFF;
  --gk-text-main: #111111;
  /* Primary text — Consistent black */
  --gk-text-muted: #2d2d2d;
  /* Secondary / muted text — Dark grey/black */
  --gk-text-light: #555555;
  /* Placeholder / captions — Neutral medium grey */
  --gk-border: rgba(26, 85, 128, 0.1);
  /* Hairline borders */
  --gk-border-cream: rgba(253, 251, 247, 0.12);
  /* On dark bg */

  /* ── Surfaces ── */
  --gk-surface-card: rgba(255, 255, 255, 0.92);
  --gk-surface-glass: rgba(255, 255, 255, 0.72);
  --gk-surface-dark: rgba(12, 47, 69, 0.96);

  /* ── Typography ── */
  --gk-font-heading: 'SVN-Gotham', 'Montserrat', sans-serif;
  --gk-font-body: 'SVN-Gotham', 'Montserrat', sans-serif;

  /* ── Type Scale ── */
  --gk-text-xs: 0.75rem;
  /* 12px — eyebrow tags */
  --gk-text-sm: 0.875rem;
  /* 14px */
  --gk-text-base: 1rem;
  /* 16px — body */
  --gk-text-lg: 1.125rem;
  /* 18px */
  --gk-text-xl: 1.25rem;
  /* 20px */
  --gk-text-2xl: 1.5rem;
  /* 24px */
  --gk-text-3xl: 1.875rem;
  /* 30px */
  --gk-text-4xl: 2.25rem;
  /* 36px */
  --gk-text-5xl: 3rem;
  /* 48px */
  --gk-text-6xl: 3.75rem;
  /* 60px */
  --gk-text-7xl: 5rem;
  /* 80px — updated to match image_2.png largest title */

  /* ── Spacing Scale (8px base grid) ── */
  --gk-space-1: 0.5rem;
  /* 8px */
  --gk-space-2: 1rem;
  /* 16px */
  --gk-space-3: 1.5rem;
  /* 24px */
  --gk-space-4: 2rem;
  /* 32px */
  --gk-space-6: 3rem;
  /* 48px */
  --gk-space-8: 4rem;
  /* 64px */
  --gk-space-10: 5rem;
  /* 80px */
  --gk-space-12: 6rem;
  /* 96px */
  --gk-space-16: 8rem;
  /* 128px */
  --gk-space-20: 10rem;
  /* 160px */

  /* Section padding — optimized to prevent excessive spacing */
  --gk-section-py: var(--gk-space-10);
  /* 80px desktop */
  --gk-section-py-md: var(--gk-space-8);
  /* 64px mid */
  --gk-section-py-mobile: var(--gk-space-6);
  /* 48px mobile */

  /* ── Border Radius ── */
  --gk-radius-xs: 4px;
  --gk-radius-sm: 8px;
  --gk-radius-md: 12px;
  --gk-radius-lg: 20px;
  --gk-radius-xl: 28px;
  /* Cards */
  --gk-radius-2xl: 36px;
  /* Double-bezel outer shell */
  --gk-radius-pill: 9999px;
  /* Buttons, tags, nav pill */

  /* ── Shadows (ultra-diffuse, elegant) ── */
  --gk-shadow-xs: 0 1px 3px rgba(26, 85, 128, 0.04), 0 1px 2px rgba(26, 85, 128, 0.02);
  --gk-shadow-sm: 0 4px 12px rgba(26, 85, 128, 0.06), 0 2px 4px rgba(26, 85, 128, 0.03);
  --gk-shadow-md: 0 8px 24px rgba(26, 85, 128, 0.08), 0 4px 8px rgba(26, 85, 128, 0.04);
  --gk-shadow-lg: 0 20px 48px rgba(26, 85, 128, 0.10), 0 8px 16px rgba(26, 85, 128, 0.05);
  --gk-shadow-xl: 0 32px 80px rgba(26, 85, 128, 0.14), 0 16px 32px rgba(26, 85, 128, 0.07);
  --gk-shadow-inset-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --gk-shadow-nav: 0 4px 32px rgba(26, 85, 128, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;

  /* ── Transitions (Spring physics — NO linear/ease-in-out) ── */
  --gk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gk-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --gk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gk-ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --gk-duration-fast: 200ms;
  --gk-duration-base: 400ms;
  --gk-duration-slow: 700ms;
  --gk-duration-reveal: 900ms;

  /* ── Z-Index Layers (Disciplined) ── */
  --gk-z-base: 1;
  --gk-z-raised: 10;
  --gk-z-sticky: 100;
  --gk-z-overlay: 200;
  --gk-z-modal: 300;
  --gk-z-toast: 400;

  /* ── Container ── */
  --gk-container-max: 1280px;
  --gk-container-px: clamp(1rem, 5vw, 5rem);
}

@media (min-width: 1440px) {
  :root {
    --gk-container-max: 1400px;
  }
}

@media (min-width: 1700px) {
  :root {
    --gk-container-max: 1560px;
  }
}



/* ──────────────────────────────────────────────────────────────
   2. RESET & BASE STYLES
   ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-base);
  line-height: 1.6;
  color: var(--gk-text-main);
  background-color: var(--gk-cream);
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ── Film Grain Noise Overlay (Fixed — never on scroll containers) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--gk-z-toast);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.018;
}


/* ──────────────────────────────────────────────────────────────
   3. LAYOUT UTILITIES
   ────────────────────────────────────────────────────────────── */
.gk-container {
  width: 100%;
  max-width: var(--gk-container-max);
  margin-inline: auto;
  padding-inline: var(--gk-container-px);
}

/* Section wrapper — heavy whitespace per skill */
.gk-section {
  padding-top: var(--gk-section-py);
  padding-bottom: var(--gk-section-py);
}

.gk-section--sm {
  padding-top: var(--gk-space-12);
  padding-bottom: var(--gk-space-12);
}

.gk-section--alt {
  background-color: var(--gk-cream-dark);
}

.gk-section--dark {
  background-color: var(--gk-navy-deep);
  color: var(--gk-cream);
}

/* Grid utilities */
.gk-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gk-space-4);
}

.gk-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gk-space-4);
}

.gk-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gk-space-3);
}

/* Flex utilities */
.gk-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ──────────────────────────────────────────────────────────────
   4. TYPOGRAPHY
   ────────────────────────────────────────────────────────────── */
.gk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gk-steel);
  background: rgba(74, 111, 165, 0.08);
  border: 1px solid rgba(74, 111, 165, 0.18);
  border-radius: var(--gk-radius-pill);
  padding: 0.35em 1em;
  margin-bottom: var(--gk-space-3);
}

.gk-eyebrow--light {
  color: rgba(253, 251, 247, 0.7);
  background: rgba(253, 251, 247, 0.08);
  border-color: rgba(253, 251, 247, 0.15);
}

h1,
.gk-h1 {
  font-family: var(--gk-font-heading);
  font-size: clamp(var(--gk-text-4xl), 5.5vw, var(--gk-text-7xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gk-navy-deep);
  text-transform: uppercase;
}

h2,
.gk-h2 {
  font-family: var(--gk-font-heading);
  font-size: clamp(var(--gk-text-3xl), 4vw, var(--gk-text-5xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gk-navy-deep);
  text-transform: uppercase;
}

h3,
.gk-h3 {
  font-family: var(--gk-font-heading);
  font-size: clamp(var(--gk-text-xl), 2.5vw, var(--gk-text-3xl));
  font-weight: 700;
  line-height: 1.25;
  color: var(--gk-navy);
  text-transform: uppercase;
}

h4,
.gk-h4 {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--gk-navy);
}

.gk-lead {
  font-size: clamp(var(--gk-text-base), 1.5vw, var(--gk-text-lg));
  line-height: 1.7;
  color: var(--gk-text-muted);
  max-width: 60ch;
}

.gk-text-balance {
  text-wrap: balance;
}

.gk-nowrap {
  white-space: nowrap;
}

/* On dark backgrounds */
.gk-section--dark h1,
.gk-section--dark h2,
.gk-section--dark h3,
.gk-section--dark h4 {
  color: var(--gk-cream);
}

.gk-section--dark .gk-lead,
.gk-section--dark p {
  color: rgba(253, 251, 247, 0.72);
}

/* Global font family rules to systematically apply SVN-Gotham */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--gk-font-heading);
  text-wrap: balance;
}

body,
p,
span,
div,
li {
  font-family: var(--gk-font-body);
  text-wrap: pretty;
}

/* Helper classes based on user wireframe designs */
h3.overview-name {
  font-family: var(--gk-font-heading);
  font-size: 24px;
  /* Matches 24px in image_0.png */
}

p.overview-des {
  font-family: var(--gk-font-body);
  font-size: 16px;
  /* Matches 16px in image_1.png */
}



/* ──────────────────────────────────────────────────────────────
   5. BUTTONS (Button-in-Button Architecture)
   ────────────────────────────────────────────────────────────── */

/* Base button styles */
.gk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1);
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-sm);
  font-weight: 600;
  border-radius: var(--gk-radius-pill);
  padding: 0.85em 1.75em;
  transition:
    transform var(--gk-duration-base) var(--gk-ease-spring),
    box-shadow var(--gk-duration-base) var(--gk-ease-out),
    background-color var(--gk-duration-fast) var(--gk-ease-out);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.gk-btn:active {
  transform: scale(0.97);
}

/* Primary — Solid Navy */
.gk-btn-primary {
  background: var(--gk-navy);
  color: var(--gk-cream);
  box-shadow: var(--gk-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gk-btn-primary:hover {
  background: var(--gk-navy-hover);
  box-shadow: var(--gk-shadow-md);
  transform: translateY(-1px);
}

/* Secondary — Ghost outline */
.gk-btn-secondary {
  background: transparent;
  color: var(--gk-navy);
  border: 1.5px solid var(--gk-border);
  box-shadow: none;
}

.gk-btn-secondary:hover {
  background: var(--gk-glass-blue);
  border-color: var(--gk-navy);
  transform: translateY(-1px);
}

/* Light variant (on dark bg) */
.gk-btn-light {
  background: rgba(253, 251, 247, 0.12);
  color: var(--gk-cream);
  border: 1.5px solid rgba(253, 251, 247, 0.25);
}

.gk-btn-light:hover {
  background: rgba(253, 251, 247, 0.22);
  border-color: rgba(253, 251, 247, 0.5);
}

/* Button-in-Button trailing icon */
.gk-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--gk-radius-pill);
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition:
    transform var(--gk-duration-base) var(--gk-ease-bounce),
    background var(--gk-duration-fast) var(--gk-ease-out);
  font-size: 0.9em;
}

.gk-btn-primary .gk-btn-icon {
  background: rgba(255, 255, 255, 0.15);
}

.gk-btn:hover .gk-btn-icon {
  transform: translateX(2px) translateY(-1px) scale(1.08);
  background: rgba(255, 255, 255, 0.25);
}

/* ── Button sizes ── */
.gk-btn--sm {
  padding: 0.6em 1.25em;
  font-size: var(--gk-text-xs);
}

.gk-btn--lg {
  padding: 1em 2.25em;
  font-size: var(--gk-text-base);
}


/* ──────────────────────────────────────────────────────────────
   6. CARDS — Double-Bezel (Doppelrand) Architecture
   ────────────────────────────────────────────────────────────── */

/* Outer Shell */
.gk-card-shell {
  background: rgba(26, 85, 128, 0.04);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-2xl);
  padding: 6px;
  box-shadow: var(--gk-shadow-xs);
  transition:
    transform var(--gk-duration-slow) var(--gk-ease-spring),
    box-shadow var(--gk-duration-slow) var(--gk-ease-out);
}

.gk-card-shell:hover {
  transform: translateY(-4px);
  box-shadow: var(--gk-shadow-lg);
}

/* Inner Core */
.gk-card-inner {
  background: var(--gk-surface-card);
  border-radius: calc(var(--gk-radius-2xl) - 6px);
  overflow: hidden;
  box-shadow: var(--gk-shadow-inset-highlight);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Product Card Image */
.gk-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.gk-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--gk-navy);
  mix-blend-mode: color;
  opacity: 0.08;
  pointer-events: none;
  transition: opacity var(--gk-duration-base) var(--gk-ease-out);
  z-index: 1;
}

.gk-card-shell:hover .gk-card-image::after {
  opacity: 0.02;
}

.gk-card-image img {
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  max-width: none;
  object-fit: cover;
  object-position: top left;
  filter: contrast(1.03) saturate(0.9) sepia(0.06);
  transition:
    filter var(--gk-duration-base) var(--gk-ease-out),
    transform var(--gk-duration-slow) var(--gk-ease-spring);
}

.gk-card-shell:hover .gk-card-image img {
  filter: contrast(1.06) saturate(1.02) sepia(0);
  transform: scale(1.04);
}

/* Card Body */
.gk-card-body {
  padding: var(--gk-space-3) var(--gk-space-3) var(--gk-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
  flex: 1;
}

.gk-card-title {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-lg);
  font-weight: 700;
  color: var(--gk-navy);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.gk-card-desc {
  font-size: var(--gk-text-sm);
  color: var(--gk-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.gk-card-footer {
  padding: 0 var(--gk-space-3) var(--gk-space-3);
}

/* Product index — thẻ theo layout catalog (thumbnail, badge Mới, CAPS, 1 dòng, link gạch chân) */
.gk-product-grid {
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.gk-card-shell--product-tile {
  padding: 0;
  background: var(--gk-white);
  border: 1px solid rgba(28, 43, 58, 0.1);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.gk-card-shell--product-tile:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(12, 47, 69, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.gk-card-shell--product-tile .gk-card-inner {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}

.gk-card-shell--product-tile .gk-product-tile__media {
  border-radius: 0;
  aspect-ratio: 1 / 1;
}

.gk-product-tile__badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  left: auto;
  z-index: 2;
  background: rgba(248, 246, 242, 0.96);
  color: var(--gk-text-main);
  font-family: var(--gk-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35em 0.55em;
  border: 1px solid rgba(28, 43, 58, 0.12);
  border-radius: 0;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(12, 47, 69, 0.06);
}

.gk-card-shell--product-tile .gk-product-tile__body {
  padding: var(--gk-space-3) var(--gk-space-3) 0.35rem;
  gap: 0.45rem;
  flex: 1;
  min-height: 0;
  text-align: left;
  align-items: flex-start;
}

.gk-card-shell--product-tile .gk-product-tile__title {
  margin: 0;
  font-size: var(--gk-text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gk-text-main);
  line-height: 1.35;
}

.gk-card-shell--product-tile .gk-product-tile__title a {
  color: inherit;
  text-decoration: none;
}

.gk-card-shell--product-tile .gk-product-tile__title a:hover {
  color: var(--gk-navy);
}

.gk-card-shell--product-tile .gk-product-tile__desc {
  margin: 0;
  width: 100%;
  font-size: var(--gk-text-sm);
  font-weight: 400;
  color: var(--gk-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gk-card-shell--product-tile .gk-product-tile__foot {
  padding: 0.25rem var(--gk-space-3) var(--gk-space-3);
  margin-top: auto;
}

.gk-card-shell--product-tile .gk-product-tile__link {
  display: inline-block;
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-sm);
  font-weight: 500;
  color: var(--gk-text-main);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.gk-card-shell--product-tile .gk-product-tile__link:hover {
  color: var(--gk-navy);
}

/* Trang Dòng sản phẩm — lưới đầy đủ (không carousel) */
.gk-product-lines-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.gk-product-lines-grid__item {
  display: flex;
  min-width: 0;
}

.gk-product-lines-grid__item .gk-card-shell--product-tile {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

@media (max-width: 1024px) {
  .gk-product-lines-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .gk-product-lines-grid {
    grid-template-columns: 1fr;
  }
}

/* Trang Sản phẩm — Swiper (legacy carousel, nếu còn dùng ở nơi khác) */
.gk-product-carousel {
  position: relative;
}

.gk-product-carousel__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.gk-product-carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.gk-product-carousel__nav .swiper-button-prev::after,
.gk-product-carousel__nav .swiper-button-next::after {
  display: none;
}

.gk-product-carousel__btn {
  position: static;
  margin: 0;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0;
  border: 1px solid var(--gk-navy);
  background: var(--gk-navy);
  color: var(--gk-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    opacity var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-product-carousel__btn:hover:not(.swiper-button-disabled) {
  background: var(--gk-navy-hover);
  border-color: var(--gk-navy-hover);
}

.gk-product-carousel__btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.gk-product-carousel__swiper.swiper {
  overflow: hidden;
  margin-inline: 0;
  width: 100%;
  max-width: 100%;
}

.gk-product-carousel__swiper .swiper-wrapper {
  box-sizing: border-box;
}

.gk-product-carousel__slide.swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0;
}

.gk-product-carousel__slide .gk-card-shell--product-tile {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

/* ── Solution Grid Card (image-dominant, text overlay) ── */
.gk-solution-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--gk-radius-xl);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.gk-solution-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gk-duration-slow) var(--gk-ease-spring);
}

.gk-solution-card:hover img {
  transform: scale(1.06);
}

.gk-solution-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(12, 47, 69, 0.88) 0%,
      rgba(12, 47, 69, 0.2) 50%,
      transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--gk-space-3);
  transition: background var(--gk-duration-base) var(--gk-ease-out);
}

.gk-solution-card:hover .gk-solution-card__overlay {
  background: linear-gradient(to top,
      rgba(12, 47, 69, 0.96) 0%,
      rgba(12, 47, 69, 0.4) 60%,
      transparent 100%);
}

.gk-solution-card__title {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-base);
  font-weight: 700;
  color: var(--gk-cream);
  line-height: 1.25;
}

/* ── Trang chủ: Công trình nổi bật — slider full màn hình (1 ảnh / slide) ── */
.gk-works-show {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(520px, 100dvh, 1200px);
  min-height: clamp(520px, 100svh, 1200px);
  overflow: hidden;
  background: #0a0f14;
}

.gk-works-show__track {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gk-works-show__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.7s var(--gk-ease-out),
    visibility 0s linear 0.7s;
}

.gk-works-show__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.7s var(--gk-ease-out),
    visibility 0s linear 0s;
}

.gk-works-show__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gk-works-show__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  transition: transform 9s var(--gk-ease-out);
}

.gk-works-show__slide.is-active .gk-works-show__bg img {
  transform: scale(1);
}

.gk-works-show__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(8, 14, 22, 0.92) 0%,
      rgba(8, 14, 22, 0.45) 42%,
      rgba(8, 14, 22, 0.12) 68%,
      transparent 100%);
}

.gk-works-show__slide-info {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 4vw, 2.75rem);
  right: clamp(1rem, 4vw, 2.75rem);
  bottom: clamp(8.5rem, 18vh, 11.5rem);
  max-width: min(40rem, 92vw);
  pointer-events: none;
}

.gk-works-show__slide-link {
  pointer-events: auto;
  display: block;
  text-decoration: none;
  color: #fff;
  transition: opacity var(--gk-duration-base) var(--gk-ease-out);
}

.gk-works-show__slide-link:hover,
.gk-works-show__slide-link:focus-visible {
  opacity: 0.92;
}

.gk-works-show__slide-title {
  margin: 0 0 0.4rem;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.65rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.gk-works-show__slide-place {
  display: inline-block;
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

/* Chrome điều khiển dùng chung `.gk-hero-slider__*` (partial hero-slider-chrome); chỉnh bố cục trong section works */
#gk-works-show .gk-works-show__ui {
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 1rem;
  padding: clamp(5.5rem, 12vh, 7rem) clamp(1rem, 4vw, 2.5rem) max(1.25rem, env(safe-area-inset-bottom));
}

#gk-works-show .gk-hero-slider__controls {
  position: relative;
  inset: auto;
  padding: 0;
  width: 100%;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: all;
}

#gk-works-show .gk-hero-slider__controls-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 2.4rem;
}

#gk-works-show .gk-hero-slider__counter {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  min-height: 2.4rem;
}

#gk-works-show .gk-hero-slider__arrows {
  align-items: center;
}

#gk-works-show .gk-hero-slider__progress {
  width: min(11rem, 38vw);
  max-width: 200px;
  align-self: flex-end;
}

/* CTA: layer trên toàn bộ UI flex (tránh vùng trong suốt chặn click); màu chủ đạo = gk-btn-primary */
.gk-works-show__cta {
  position: relative;
  z-index: 12;
  pointer-events: auto;
  text-decoration: none;
  align-self: center;
}

@media (max-width: 767px) {
  .gk-works-show__slide-info {
    bottom: clamp(11rem, 34vh, 14rem);
    right: var(--gk-container-px);
    max-width: 100%;
  }

  .gk-works-show__slide-title {
    font-size: clamp(1.2rem, 5.5vw, 2rem);
    text-wrap: balance;
  }

  #gk-works-show .gk-works-show__ui {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    gap: 0.75rem;
  }

  #gk-works-show .gk-hero-slider__controls-row {
    justify-content: space-between;
    width: 100%;
  }

  .gk-works-show__cta {
    align-self: stretch;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }
}

/* Laptop nhỏ / viewport thấp — giữ dải tiêu đề trắng (đồng bộ Sản phẩm tiêu biểu), gọn chrome slider */
@media (max-height: 900px),
(max-width: 1440px) and (max-height: 960px) {

  .gk-home-triple-stack .gk-home-showcase-head,
  .gk-home-works-stack .gk-home-showcase-head {
    padding-block: clamp(0.65rem, 1.8vh, 1rem);
  }

  .gk-home-triple-stack .gk-journal-main-title,
  .gk-home-works-stack .gk-journal-main-title {
    font-size: clamp(1.35rem, 3.8vw, 2rem);
    line-height: 1.05;
  }

  .gk-works-show__slide-info {
    bottom: clamp(6.75rem, 26vh, 10rem);
    max-width: min(30rem, 86vw);
  }

  .gk-works-show__slide-title {
    font-size: clamp(1.05rem, 2.5vw, 1.55rem);
    margin-bottom: 0.25rem;
  }

  .gk-works-show__slide-place {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }

  #gk-works-show .gk-works-show__ui {
    padding: 0 clamp(1rem, 3vw, 2rem) max(0.65rem, env(safe-area-inset-bottom));
    gap: 0.5rem;
    padding-right: max(clamp(1rem, 3vw, 2rem), calc(3.25rem + env(safe-area-inset-right, 0px)));
  }

  #gk-works-show .gk-hero-slider__progress {
    width: min(7.5rem, 34vw);
    max-width: 160px;
  }

  #gk-works-show .gk-works-show__cta.gk-btn--lg {
    padding: 0.7em 1.35em;
    font-size: var(--gk-text-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gk-works-show__slide {
    transition: none;
  }

  .gk-works-show__bg img {
    transition: none;
    transform: none !important;
  }
}

/* ── Trang chủ: Tin tức — journal + Swiper (màu chủ đạo --gk-navy) ── */
.gk-journal-section.gk-home-news,
.gk-journal-section {
  background: #fff;
  color: var(--gk-text-main);
}

.gk-journal-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gk-space-4);
  flex-wrap: wrap;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.gk-journal-main-title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gk-navy);
  text-transform: uppercase;
}

/* Trang chủ — tiêu đề section (đồng bộ Tin tức) phía trên khối ảnh toàn chiều ngang */
.gk-home-showcase-head {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--gk-border);
  padding-block: clamp(1.25rem, 3.2vw, 2rem);
}

.gk-home-triple-stack,
.gk-home-works-stack {
  display: flex;
  flex-direction: column;
}

.gk-home-triple-stack .gk-fp-triple {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gk-home-triple-stack .gk-fp-triple__grid {
  flex: 1 1 auto;
  min-height: 0;
}

.gk-home-works-stack .gk-works-show {
  flex: 1 1 auto;
  min-height: 0;
}

.gk-journal-navigation {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  flex-shrink: 0;
}

.gk-journal-arrows {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Ẩn pseudo mũi tên mặc định của Swiper Navigation */
.gk-journal-arrows .swiper-button-prev::after,
.gk-journal-arrows .swiper-button-next::after {
  display: none;
}

.gk-journal-prev,
.gk-journal-next {
  position: static;
  margin: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--gk-navy);
  background: var(--gk-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    opacity var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-journal-prev:hover:not(.swiper-button-disabled),
.gk-journal-next:hover:not(.swiper-button-disabled) {
  background: var(--gk-navy-hover);
  border-color: var(--gk-navy-hover);
}

.gk-journal-prev.swiper-button-disabled,
.gk-journal-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.gk-journal-view-all {
  font-family: var(--gk-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gk-navy);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(26, 85, 128, 0.45);
  line-height: 1.2;
  padding-bottom: 0.1em;
}

.gk-journal-view-all:hover {
  color: var(--gk-navy-hover);
  text-decoration-color: var(--gk-navy-hover);
}

.gk-journal-slider.swiper {
  overflow: hidden;
  width: 100%;
}

.gk-journal-card.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(12, 47, 69, 0.07);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(12, 47, 69, 0.05);
  transition:
    box-shadow var(--gk-duration-base) var(--gk-ease-out),
    transform var(--gk-duration-base) var(--gk-ease-out),
    border-color var(--gk-duration-base) var(--gk-ease-out);
}

.gk-journal-card.swiper-slide:hover {
  box-shadow: 0 8px 32px rgba(12, 47, 69, 0.1);
  transform: translateY(-2px);
  border-color: rgba(26, 85, 128, 0.22);
}

.gk-journal-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(12, 47, 69, 0.06);
}

.gk-journal-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--gk-duration-slow) var(--gk-ease-spring);
}

.gk-journal-card.swiper-slide:hover .gk-journal-card-media img {
  transform: scale(1.04);
}

.gk-journal-card-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: linear-gradient(135deg,
      rgba(12, 47, 69, 0.08) 0%,
      rgba(26, 85, 128, 0.06) 100%);
}

.gk-journal-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(12, 47, 69, 0.18) 0%,
      transparent 45%);
  opacity: 0.85;
}

.gk-journal-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.35rem 1.4rem 1.5rem;
  flex: 1;
}

.gk-journal-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gk-steel);
  line-height: 1.35;
}

.gk-journal-reading-time::before {
  content: '·';
  margin-right: 0.65em;
  opacity: 0.45;
}

.gk-journal-card-title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--gk-navy);
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gk-journal-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-journal-card-title a:hover {
  color: var(--gk-navy-hover);
}

.gk-journal-card-excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--gk-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.gk-journal-read-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--gk-font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gk-navy);
  text-decoration: none;
  width: fit-content;
}

.gk-journal-read-link:hover {
  color: var(--gk-navy-hover);
}

.gk-journal-arrow-icon {
  font-size: 0.95em;
  line-height: 1;
  transition: transform var(--gk-duration-base) var(--gk-ease-spring);
}

.gk-journal-read-link:hover .gk-journal-arrow-icon {
  transform: translateX(3px);
}

.gk-journal-empty {
  margin: 0;
  text-align: center;
  color: var(--gk-text-muted);
  font-size: var(--gk-text-base);
}

/* Mobile / tablet hẹp: mũi tên sang phải (row-reverse — DOM vẫn prev → next) */
@media (max-width: 768px) {
  .gk-journal-navigation {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 540px) {
  .gk-journal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .gk-journal-navigation {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .gk-journal-main-title {
    font-size: clamp(1.25rem, 6.8vw, 1.85rem);
  }

  .gk-journal-card-content {
    padding: 1.1rem 1.15rem 1.25rem;
  }

  .gk-journal-prev,
  .gk-journal-next {
    width: 3rem;
    height: 3rem;
  }
}

.gk-card-image--placeholder {
  min-height: 200px;
  background: linear-gradient(135deg,
      rgba(12, 47, 69, 0.12) 0%,
      rgba(26, 85, 128, 0.08) 100%);
}


/* ──────────────────────────────────────────────────────────────
   7. PAGE HERO BANNER
   ────────────────────────────────────────────────────────────── */
.gk-page-hero {
  position: relative;
  /* Đủ cao cho nền ảnh; dvh ổn định hơn trên mobile Safari */
  min-height: clamp(14rem, 26vh, 20rem);
  display: flex;
  align-items: center;
  /* Changed from flex-end to center for vertical alignment */
  overflow: hidden;
  background: var(--gk-navy-deep);
}

.gk-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gk-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.gk-page-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg,
      rgba(12, 47, 69, 0.9) 0%,
      rgba(26, 85, 128, 0.6) 50%,
      rgba(12, 47, 69, 0.4) 100%);
}

.gk-page-hero__content {
  position: relative;
  z-index: 2;
  /* Symmetric padding to center the content vertically */
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  width: 100%;
}

.gk-page-hero .gk-container {
  max-width: var(--gk-container-max);
}

.gk-page-hero h1 {
  color: var(--gk-cream);
  max-width: 100%;
  margin-bottom: var(--gk-space-2);
}

.gk-page-hero .gk-lead {
  color: rgba(253, 251, 247, 0.75);
}

/* Breadcrumb */
.gk-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--gk-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(253, 251, 247, 0.55);
  margin-bottom: var(--gk-space-3);
}

.gk-breadcrumb a {
  color: rgba(253, 251, 247, 0.55);
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-breadcrumb a:hover {
  color: var(--gk-cream);
}

.gk-breadcrumb__sep {
  font-size: 0.8em;
  opacity: 0.4;
}

/* ── Trang Sản phẩm — HUB (/san-pham): 3 chương ảnh lớn + CTA (cấp 2 theo brief) ── */
.gk-san-pham-hub__intro {
  margin: clamp(1rem, 3vw, 2rem) auto clamp(1.5rem, 4vw, 2.5rem);
  max-width: min(42rem, 100%);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--gk-text-muted);
  line-height: 1.65;
}

.gk-san-pham-hub-chapter {
  position: relative;
  isolation: isolate;
  min-height: clamp(22rem, 72vh, 38rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.gk-san-pham-hub-chapter+.gk-san-pham-hub-chapter {
  border-top: 1px solid rgba(26, 85, 128, 0.08);
}

.gk-san-pham-hub-chapter__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gk-san-pham-hub-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 8s var(--gk-ease-out);
}

.gk-san-pham-hub-chapter:hover .gk-san-pham-hub-chapter__media img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .gk-san-pham-hub-chapter__media img {
    transform: none;
    transition: none;
  }
}

.gk-san-pham-hub-chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
      rgba(8, 14, 22, 0.92) 0%,
      rgba(8, 14, 22, 0.45) 50%,
      rgba(8, 14, 22, 0.12) 100%);
  pointer-events: none;
}

.gk-san-pham-hub-chapter--alt .gk-san-pham-hub-chapter__scrim {
  background: linear-gradient(to top,
      rgba(12, 47, 69, 0.94) 0%,
      rgba(12, 47, 69, 0.42) 52%,
      rgba(12, 47, 69, 0.1) 100%);
}

.gk-san-pham-hub-chapter__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
  padding-top: clamp(3rem, 12vh, 6rem);
  color: var(--gk-cream);
}

.gk-san-pham-hub-chapter__eyebrow {
  font-family: var(--gk-font-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.88;
  margin: 0 0 0.5rem;
}

.gk-san-pham-hub-chapter__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 22ch;
}

.gk-san-pham-hub-chapter__lead {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  max-width: min(36rem, 100%);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  color: rgba(253, 251, 247, 0.9);
}

/* Hub /san-pham — lưới «cột 2»: thumbnail + tiêu đề + một dòng + CTA «Xem thêm» */
.gk-sp-hub-preview {
  list-style: none;
  margin: 0 0 clamp(1.35rem, 3.2vw, 2.15rem);
  padding: 0;
  display: grid;
  gap: clamp(0.65rem, 1.8vw, 1rem);
  max-width: min(72rem, 100%);
}

.gk-sp-hub-preview--product-lines {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.25rem), 1fr));
}

.gk-sp-hub-preview--gpnt {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.25rem), 1fr));
}

.gk-sp-hub-preview__cell {
  margin: 0;
  padding: 0;
}

.gk-sp-hub-preview__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.65rem 0.7rem 0.75rem;
  border-radius: 0.35rem;
  text-decoration: none;
  color: inherit;
  background: rgba(253, 251, 247, 0.06);
  border: 1px solid var(--gk-border-cream);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition:
    background 0.22s var(--gk-ease-out),
    border-color 0.22s var(--gk-ease-out),
    transform 0.22s var(--gk-ease-out);
}

.gk-sp-hub-preview__card:hover,
.gk-sp-hub-preview__card:focus-visible {
  background: rgba(253, 251, 247, 0.11);
  border-color: rgba(253, 251, 247, 0.28);
  transform: translateY(-2px);
}

.gk-sp-hub-preview__thumb {
  display: block;
  border-radius: 0.2rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.5rem;
  background: rgba(8, 14, 22, 0.35);
}

.gk-sp-hub-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gk-sp-hub-preview__kicker {
  display: block;
  font-family: var(--gk-font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f06b5a;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.gk-sp-hub-preview__line {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(253, 251, 247, 0.82);
  flex: 1 1 auto;
}

.gk-sp-hub-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.95);
}

.gk-sp-hub-preview__cta-icon {
  font-size: 0.85em;
  opacity: 0.85;
  transition: transform 0.2s var(--gk-ease-out);
}

.gk-sp-hub-preview__card:hover .gk-sp-hub-preview__cta-icon,
.gk-sp-hub-preview__card:focus-visible .gk-sp-hub-preview__cta-icon {
  transform: translateX(3px);
}

.gk-sp-hub-tech-links {
  list-style: none;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  max-width: min(48rem, 100%);
}

.gk-sp-hub-tech-links__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gk-cream);
  background: rgba(253, 251, 247, 0.08);
  border: 1px solid var(--gk-border-cream);
  transition:
    background 0.2s var(--gk-ease-out),
    border-color 0.2s var(--gk-ease-out);
}

.gk-sp-hub-tech-links__pill:hover,
.gk-sp-hub-tech-links__pill:focus-visible {
  background: rgba(253, 251, 247, 0.14);
  border-color: rgba(253, 251, 247, 0.35);
}

@media (prefers-reduced-motion: reduce) {

  .gk-sp-hub-preview__card:hover,
  .gk-sp-hub-preview__card:focus-visible {
    transform: none;
  }

  .gk-sp-hub-preview__card:hover .gk-sp-hub-preview__cta-icon,
  .gk-sp-hub-preview__card:focus-visible .gk-sp-hub-preview__cta-icon {
    transform: none;
  }
}

/* Trang Dòng sản phẩm — breadcrumb cấp 3 */
.gk-san-pham-breadcrumb {
  padding-top: clamp(0.35rem, 1.5vw, 0.85rem);
  padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
  font-size: var(--gk-text-sm);
  color: var(--gk-text-muted);
}

.gk-san-pham-breadcrumb__link {
  color: var(--gk-navy);
  text-decoration: none;
  font-weight: 600;
}

.gk-san-pham-breadcrumb__link:hover {
  text-decoration: underline;
}

.gk-san-pham-breadcrumb__sep {
  margin: 0 0.4rem;
  opacity: 0.45;
}

.gk-san-pham-breadcrumb__current {
  color: var(--gk-text-main);
  font-weight: 600;
}

/* Khối mở đầu: hierarchy rõ, không “mồ côi” một đoạn lead */
.gk-products-intro {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.gk-products-intro__statement {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 0.15rem 0 0.15rem clamp(1rem, 2.2vw, 1.35rem);
  border-left: 3px solid var(--gk-navy-mid);
  max-width: min(48rem, 100%);
  font-family: var(--gk-font-body);
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -0.015em;
  color: var(--gk-text-main);
}

.gk-products-intro__titles {
  max-width: min(52rem, 100%);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gk-products-intro__titles h1 {
  margin-top: 0;
}

/* Trang Sản phẩm: Tăng padding top theo yêu cầu */
body.gk-page-products #phan-san-pham.gk-section {
  padding-top: 84px;
}

/* Trang Sản phẩm — scroll-snap: kéo tới sẽ bám section mosaic GPNT (1 viewport) */
html:has(body.gk-page-products) {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.gk-page-products) {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

/* Section GPNT — fullscreen mosaic 4×2 (8 ô), full-bleed; trang SP: ẩn header khi .gk-header--gpnt-hide */
body.gk-page-products .gk-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.gk-page-products #masthead.site-header {
  transition:
    opacity 0.45s var(--gk-ease-out),
    transform 0.55s var(--gk-ease-spring);
}

body.gk-page-products #masthead.site-header.gk-header--gpnt-hide {
  opacity: 0;
  transform: translate3d(0, -120%, 0);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.gk-page-products #masthead.site-header {
    transition-duration: 0.01ms;
  }
}

body.gk-page-products #phan-giai-phap-noi-that.gk-gpnt-section.gk-section {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic-wrap {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--gk-navy-deep);
  isolation: isolate;
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition:
    transform 0.65s var(--gk-ease-out),
    filter 0.55s var(--gk-ease-out);
  filter: brightness(0.88) saturate(0.95);
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(12, 47, 69, 0.82) 0%,
      rgba(12, 47, 69, 0.35) 42%,
      rgba(12, 47, 69, 0.2) 100%);
  opacity: 1;
  transition: opacity 0.5s var(--gk-ease-out);
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(0.75rem, 1.8vw, 1.35rem) clamp(0.65rem, 1.4vw, 1.1rem) clamp(0.85rem, 2vw, 1.5rem);
  transition:
    opacity 0.45s var(--gk-ease-out),
    transform 0.5s var(--gk-ease-spring);
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__title {
  margin: 0 0 0.35rem;
  font-family: var(--gk-font-heading);
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gk-cream);
  line-height: 1.25;
}

#phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__desc {
  margin: 0;
  font-family: var(--gk-font-body);
  font-size: clamp(0.65rem, 0.88vw, 0.8rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(253, 251, 247, 0.88);
  max-height: 4.6em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (hover: hover) and (pointer: fine) {
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__caption {
    opacity: 0;
    transform: translateY(10px);
  }

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:hover .gk-gpnt-mosaic__caption,
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:focus-within .gk-gpnt-mosaic__caption {
    opacity: 1;
    transform: translateY(0);
  }

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:hover .gk-gpnt-mosaic__scrim,
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:focus-within .gk-gpnt-mosaic__scrim {
    opacity: 0.38;
  }

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:hover .gk-gpnt-mosaic__img,
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__cell:focus-within .gk-gpnt-mosaic__img {
    transform: scale(1.06);
    filter: brightness(1.12) saturate(1.05);
  }
}

@media (hover: none),
(pointer: coarse) {
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__caption {
    opacity: 1;
    transform: none;
  }

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__scrim {
    opacity: 0.72;
  }

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__img {
    filter: brightness(0.92) saturate(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {

  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__img,
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__scrim,
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic__caption {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 639px) {
  #phan-giai-phap-noi-that.gk-gpnt-section .gk-gpnt-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
}

/* Công nghệ (#phan-cong-nghe): nền kem, chữ đen, nhấn mạnh xanh — đồng bộ trang Chủ / Sản phẩm */
#phan-cong-nghe.gk-section {
  background: var(--gk-cream);
}

#phan-cong-nghe .gk-section-intro {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
}

#phan-cong-nghe .gk-section-intro h2 {
  margin-bottom: 0.15rem;
  color: var(--gk-navy);
}

#phan-cong-nghe .gk-section-intro .gk-lead {
  color: #0a0a0a;
}

#phan-cong-nghe .gk-section-intro h2::after {
  display: none;
}

#phan-cong-nghe .gk-products-tech-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  max-width: none;
  width: 100%;
}

#phan-cong-nghe .gk-addikote-prose,
#phan-cong-nghe .gk-quality-prose {
  max-width: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#phan-cong-nghe .gk-quality-prose {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--gk-border);
}

#phan-cong-nghe .gk-addikote-prose__kicker,
#phan-cong-nghe .gk-quality-prose__kicker {
  display: block;
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gk-navy);
  margin: 0 0 0.35rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

#phan-cong-nghe .gk-addikote-prose__tagline,
#phan-cong-nghe .gk-quality-prose__tagline {
  margin: 0 0 1.15rem;
  font-size: var(--gk-text-sm);
  color: var(--gk-text-muted);
  font-weight: 500;
  line-height: 1.5;
}

#phan-cong-nghe .gk-addikote-prose__display {
  font-family: var(--gk-font-heading);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
  text-transform: none;
  color: #111111;
  margin: 0 0 var(--gk-space-3);
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  text-wrap: balance;
}



#phan-cong-nghe .gk-quality-prose__display {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #111111;
  margin: 0 0 var(--gk-space-3);
  max-width: 42ch;
  text-wrap: balance;
}

#phan-cong-nghe .gk-addikote-prose__p,
#phan-cong-nghe .gk-quality-prose__p {
  margin: 0 0 1rem;
  font-size: var(--gk-text-base);
  line-height: 1.75;
  color: var(--gk-text-muted);
  font-weight: 400;
  max-width: 100%;
  text-wrap: pretty;
}

#phan-cong-nghe .gk-quality-prose__p--tight {
  margin-bottom: 0;
}

#phan-cong-nghe .gk-addikote-prose__h3,
#phan-cong-nghe .gk-quality-prose__h3 {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 800;
  color: var(--gk-navy);
  margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0.85rem;
  line-height: 1.3;
  padding: 0;
  border: none;
}

#phan-cong-nghe .gk-addikote-prose__list,
#phan-cong-nghe .gk-quality-prose__list {
  list-style: none;
  margin: 0.35rem 0 1.15rem;
  padding-left: 0;
  color: var(--gk-text-muted);
  line-height: 1.68;
}

#phan-cong-nghe .gk-addikote-prose__list li,
#phan-cong-nghe .gk-quality-prose__list li {
  margin: 0 0 0.55rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--gk-text-base);
}

#phan-cong-nghe .gk-addikote-prose__list li::before,
#phan-cong-nghe .gk-quality-prose__list li::before {
  content: "🔹";
  position: absolute;
  left: 0;
  color: var(--gk-navy);
}

#phan-cong-nghe .gk-addikote-prose__numbered {
  list-style: decimal;
  margin: 0.35rem 0 1rem;
  padding-left: 1.35rem;
  color: var(--gk-text-muted);
  line-height: 1.68;
}

#phan-cong-nghe .gk-addikote-prose__numbered li {
  margin: 0 0 0.75rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--gk-text-base);
}

#phan-cong-nghe .gk-addikote-prose__numbered li::before {
  content: none;
}

#phan-cong-nghe .gk-addikote-prose__numbered li strong,
#phan-cong-nghe .gk-quality-prose__list li strong,
#phan-cong-nghe .gk-addikote-prose strong,
#phan-cong-nghe .gk-quality-prose strong {
  color: var(--gk-navy);
  font-weight: 700;
}

#phan-cong-nghe .gk-quality-prose__list li strong {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gk-navy);
}

@media (min-width: 640px) {
  #phan-cong-nghe .gk-quality-prose__list {
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    padding-left: 0;
  }

  #phan-cong-nghe .gk-quality-prose__list li {
    break-inside: avoid;
    margin-bottom: 0.6rem;
  }
}

/* Align quote-callout text nicely with list content */
#phan-cong-nghe .gk-quality-prose__h3+.gk-quality-prose__p {
  margin-bottom: 1rem;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--gk-navy-mid);
  background: none;
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

/* Bullet list for differences section */
#phan-cong-nghe .gk-tech-diff-item {
  padding-left: 1.5rem;
  position: relative;
}

#phan-cong-nghe .gk-tech-diff-item::before {
  content: "🔹";
  position: absolute;
  left: 0;
  color: var(--gk-navy);
}

#phan-cong-nghe .gk-addikote-prose__closing {
  margin: clamp(1.15rem, 2.2vw, 1.5rem) 0 0;
  padding: clamp(1rem, 2vw, 1.25rem) 0 0;
  border-top: 1px solid var(--gk-border);
  font-size: var(--gk-text-lg);
  font-weight: 700;
  color: var(--gk-navy-deep);
  line-height: 1.55;
}

#phan-cong-nghe .gk-products-tech-cta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0;
}

#phan-cong-nghe .gk-tech-intro-grid,
#phan-cong-nghe .gk-tech-diff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  #phan-cong-nghe .gk-tech-intro-grid {
    grid-template-columns: 1.3fr 1fr;
    align-items: flex-start;
  }

  #phan-cong-nghe .gk-tech-diff-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: flex-start;
  }

  #phan-cong-nghe .gk-quality-prose,
  #phan-cong-nghe .gk-addikote-prose__display,
  #phan-cong-nghe .gk-addikote-prose__tagline,
  #phan-cong-nghe .gk-tech-diff-section>.gk-addikote-prose__h3,
  #phan-cong-nghe .gk-tech-diff-section>.gk-addikote-prose__p,
  #phan-cong-nghe .gk-addikote-prose>.gk-addikote-prose__h3,
  #phan-cong-nghe .gk-addikote-prose>.gk-addikote-prose__p,
  #phan-cong-nghe .gk-addikote-prose>.gk-addikote-prose__closing {
    max-width: 56.5%;
  }
}


/* ──────────────────────────────────────────────────────────────
   8. SECTION INTRO BLOCK
   ────────────────────────────────────────────────────────────── */
.gk-section-intro {
  max-width: 680px;
  margin-bottom: var(--gk-space-10);
}

.gk-section-intro--center {
  margin-inline: auto;
  text-align: center;
}

.gk-section-intro--center .gk-lead {
  margin-inline: auto;
}

.gk-section-intro h2 {
  margin-bottom: var(--gk-space-2);
}


/* ──────────────────────────────────────────────────────────────
   9. CTA BANNER
   ────────────────────────────────────────────────────────────── */
.gk-cta-banner {
  background: var(--gk-navy);
  border-radius: var(--gk-radius-2xl);
  padding: var(--gk-space-10) var(--gk-space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gk-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top center, rgba(47, 115, 152, 0.55) 0%, transparent 70%);
  pointer-events: none;
}

.gk-cta-banner h2 {
  color: var(--gk-cream);
  margin-bottom: var(--gk-space-2);
  position: relative;
}

.gk-cta-banner p {
  color: rgba(253, 251, 247, 0.72);
  margin-bottom: var(--gk-space-4);
  position: relative;
}

.gk-cta-banner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gk-space-2);
  flex-wrap: wrap;
  position: relative;
}


/* ──────────────────────────────────────────────────────────────
   10. SCROLL REVEAL ANIMATIONS
       (GPU-safe: only transform + opacity)
   ────────────────────────────────────────────────────────────── */
.gk-reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition:
    opacity var(--gk-duration-reveal) var(--gk-ease-out),
    transform var(--gk-duration-reveal) var(--gk-ease-spring),
    filter var(--gk-duration-slow) var(--gk-ease-out);
  will-change: transform, opacity;
}

.gk-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Staggered delays for child reveals */
.gk-reveal-stagger>* {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--gk-duration-reveal) var(--gk-ease-out),
    transform var(--gk-duration-reveal) var(--gk-ease-spring);
}

.gk-reveal-stagger.is-visible>*:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 160ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 320ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(7) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 480ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(8) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 560ms;
}

.gk-reveal-stagger.is-visible>*:nth-child(9) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 640ms;
}


/* ──────────────────────────────────────────────────────────────
   11. SITE HEADER — Floating Island Nav
   ────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--gk-z-sticky);
  pointer-events: none;
  /* allow clicks only on the pill */
  padding-top: 1.25rem;
  transition: padding-top var(--gk-duration-base) var(--gk-ease-spring), background var(--gk-duration-base) var(--gk-ease-out);
}

/* Unscrolled (normal full-width) state */
.site-header:not(.is-scrolled) {
  padding-top: 0;
  background: var(--gk-navy);
  pointer-events: all;
}

.site-header:not(.is-scrolled) .gk-nav-pill {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 1rem 0;
}

/* The floating pill itself */
.gk-nav-pill {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
  background: var(--gk-navy) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: var(--gk-radius-pill);
  box-shadow: var(--gk-shadow-nav);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  max-width: var(--gk-container-max);
  margin-inline: auto;
  transition:
    box-shadow var(--gk-duration-base) var(--gk-ease-out),
    background var(--gk-duration-base) var(--gk-ease-out),
    border-color var(--gk-duration-base) var(--gk-ease-out),
    backdrop-filter var(--gk-duration-base) var(--gk-ease-out),
    -webkit-backdrop-filter var(--gk-duration-base) var(--gk-ease-out),
    transform var(--gk-duration-base) var(--gk-ease-spring);
}

/* Scrolled state */
.site-header.is-scrolled .gk-nav-pill {
  background: var(--gk-navy) !important;
  border: none;
  box-shadow: 0 8px 40px rgba(26, 85, 128, 0.4) !important;
}

/* ── Homepage Specific: Unscrolled light text for dark hero slide readability ── */
.gk-page-home .site-header:not(.is-scrolled) .logo-text {
  color: var(--gk-cream);
  transition: color var(--gk-duration-base) var(--gk-ease-out);
}

.gk-page-home .site-header:not(.is-scrolled) .main-navigation>ul>li>a {
  color: rgba(253, 251, 247, 0.85);
  transition: color var(--gk-duration-base) var(--gk-ease-out);
}

.gk-page-home .site-header:not(.is-scrolled) .main-navigation>ul>li>a:hover,
.gk-page-home .site-header:not(.is-scrolled) .main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white);
  background: rgba(255, 255, 255, 0.15);
}

.gk-page-home .site-header:not(.is-scrolled) .gk-hamburger__line {
  background-color: var(--gk-cream);
  transition: background-color var(--gk-duration-base) var(--gk-ease-out);
}

/* Trang Dịch vụ Pretext: pill navy đặc — chữ sáng (trước đây chữ navy → gần như mất trên nền xanh) */
body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .gk-nav-pill {
  background: var(--gk-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .logo-text {
  color: var(--gk-cream);
}

body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .main-navigation>ul>li>a {
  color: rgba(253, 251, 247, 0.85);
}

body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .main-navigation>ul>li>a:hover,
body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white);
  background: rgba(255, 255, 255, 0.15);
}

body.gk-page-pretext-dynamic .site-header:not(.is-scrolled):not(.gk-header--pretext-reading) .gk-hamburger__line {
  background-color: var(--gk-cream);
}

/* Ghi đè chắc chắn: đang scrolled nhưng đã snap → vẫn pill kính (không nền trắng đặc) */
body.gk-home-scroll-snap #masthead.site-header.is-scrolled.gk-header--snap-edge .gk-nav-pill {
  background: var(--gk-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.gk-home-scroll-snap #masthead.site-header.is-scrolled.gk-header--snap-edge.gk-header--snap-light .gk-nav-pill {
  background: var(--gk-navy) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ── Trang chủ scroll-snap: mép section sát đỉnh — pill navy + chữ sáng (snap-light/dark chỉ khác nền section phía sau) ── */
body.gk-home-scroll-snap #masthead.gk-header--snap-edge .gk-nav-pill {
  background: var(--gk-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .gk-nav-pill {
  background: var(--gk-navy) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .logo-text {
  color: var(--gk-cream);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .main-navigation>ul>li>a {
  color: rgba(253, 251, 247, 0.88);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .main-navigation>ul>li>a:hover,
body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white);
  background: rgba(255, 255, 255, 0.14);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .gk-hamburger__line {
  background-color: var(--gk-cream);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .gk-hamburger {
  background: rgba(255, 255, 255, 0.12);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-dark .gk-hamburger:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Pill vẫn navy đặc → chữ sáng giống snap-dark (snap-light trước đây dùng chữ tối → khó đọc) */
body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .logo-text {
  color: var(--gk-cream);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .main-navigation>ul>li>a {
  color: rgba(253, 251, 247, 0.88);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .main-navigation>ul>li>a:hover,
body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white);
  background: rgba(255, 255, 255, 0.14);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .gk-hamburger__line {
  background-color: var(--gk-cream);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .gk-hamburger {
  background: rgba(255, 255, 255, 0.12);
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-light .gk-hamburger:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Sản phẩm tiêu biểu (full snap): pill hoàn toàn trong suốt, nền ảnh hiện rõ */
body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-pill-clear .gk-nav-pill,
body.gk-home-scroll-snap #masthead.site-header.is-scrolled.gk-header--snap-edge.gk-header--snap-pill-clear .gk-nav-pill {
  background: var(--gk-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-pill-clear.gk-header--snap-dark .gk-hamburger {
  background: transparent;
}

body.gk-home-scroll-snap #masthead.gk-header--snap-edge.gk-header--snap-pill-clear.gk-header--snap-dark .gk-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* logo / nav link transitions for scrolled state */
.logo-text,
.main-navigation ul li a,
.gk-hamburger__line {
  transition:
    color var(--gk-duration-base) var(--gk-ease-out),
    background-color var(--gk-duration-base) var(--gk-ease-out),
    background var(--gk-duration-base) var(--gk-ease-out);
}

/* ── Site Branding (Logo) ── */
.site-branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-branding img,
.site-branding .custom-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo-text {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-sm);
  font-weight: 800;
  color: var(--gk-cream);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Primary Navigation ── */
.main-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-navigation ul {
  display: flex;
  align-items: center;
  gap: var(--gk-space-1);
  list-style: none;
}

.main-navigation>ul>li>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.95rem;
  font-family: var(--gk-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gk-cream);
  border-radius: var(--gk-radius-pill);
  transition:
    color var(--gk-duration-fast) var(--gk-ease-out),
    background var(--gk-duration-fast) var(--gk-ease-out);
  white-space: nowrap;
}

.main-navigation>ul>li>a:hover,
.main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white);
  background: rgba(255, 255, 255, 0.15);
}

/* Mục có dropdown — icon caret (link đã inline-flex ở rule chung) */
.main-navigation .menu-item-has-children>a {
  gap: 0.35rem;
}

/* Cha «Sản phẩm» không dẫn tới /san-pham — chỉ mở dropdown */
.main-navigation>ul>li>a.gk-nav-parent--no-nav {
  cursor: default;
}

.main-navigation .menu-item-has-children>a::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.5;
  flex-shrink: 0;
  transition:
    opacity var(--gk-duration-fast) var(--gk-ease-out),
    transform var(--gk-duration-fast) var(--gk-ease-out);
}

.main-navigation .menu-item-has-children:hover>a::after,
.main-navigation .menu-item-has-children:focus-within>a::after {
  opacity: 0.85;
  transform: translateY(1px);
}

/* ── Nav CTA Button ── */
.gk-nav-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.gk-nav-cta .gk-btn-primary {
  background: var(--gk-cream);
  color: var(--gk-navy-deep);
}

.gk-nav-cta .gk-btn-primary:hover {
  background: var(--gk-white);
  color: var(--gk-navy);
}

/* ── Nav CTA Mobile ── */
.gk-nav-cta-mobile {
  display: none;
  flex-shrink: 0;
  align-items: center;
}

.gk-nav-cta-mobile .gk-btn-primary {
  background: var(--gk-cream);
  color: var(--gk-navy-deep);
}

.gk-nav-cta-mobile .gk-btn-primary:hover {
  background: var(--gk-white);
  color: var(--gk-navy);
}

/* ── Hamburger (Mobile) ── */
.gk-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--gk-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  gap: 5px;
  flex-shrink: 0;
  transition: background var(--gk-duration-fast) var(--gk-ease-out);
  position: relative;
}

.gk-hamburger:hover {
  background: rgba(255, 255, 255, 0.16);
}

.gk-hamburger__line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gk-cream);
  border-radius: 2px;
  transition:
    transform var(--gk-duration-base) var(--gk-ease-spring),
    opacity var(--gk-duration-fast) var(--gk-ease-out);
  transform-origin: center;
  position: absolute;
}

.gk-hamburger__line:nth-child(1) {
  transform: translateY(-4px);
}

.gk-hamburger__line:nth-child(2) {
  transform: translateY(4px);
}

/* Morph to X */
.gk-hamburger.is-open .gk-hamburger__line:nth-child(1) {
  transform: rotate(45deg);
}

.gk-hamburger.is-open .gk-hamburger__line:nth-child(2) {
  transform: rotate(-45deg);
}

/* ── Mobile Menu Overlay — editorial panel, trái-canh, nhóm rõ ── */
.gk-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--gk-z-overlay);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(165deg,
      #071824 0%,
      rgba(12, 47, 69, 0.98) 38%,
      #050f18 100%);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gk-duration-base) var(--gk-ease-out);
}

.gk-mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Vùng cuộn: căn trái, max-width để không “giãn” chữ giữa màn hình */
.gk-mobile-menu__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: min(22rem, 100%);
  margin-inline: auto;
  padding: calc(4.5rem + env(safe-area-inset-top, 0px)) var(--gk-container-px) calc(4.5rem + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gk-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  width: 100%;
}

.gk-mobile-menu__nav a {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.125rem, 3.8vw, 1.375rem);
  font-weight: 700;
  color: var(--gk-cream);
  letter-spacing: -0.02em;
  line-height: 1.25;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.65rem;
  margin: 0;
  border-radius: var(--gk-radius-md);
  text-decoration: none;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--gk-duration-slow) var(--gk-ease-out),
    transform var(--gk-duration-slow) var(--gk-ease-spring),
    color var(--gk-duration-fast) var(--gk-ease-out),
    background var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a {
  opacity: 1;
  transform: translateY(0);
}

/* Mục cha có con — cỡ chữ nổi; khoảng cách nhẹ khi đứng sau link top-level */
.gk-mobile-menu__nav a.gk-mobile-menu__has-children {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
}

/* Nhóm mới sau hàng mục con: đường phân rõ */
.gk-mobile-menu__nav a.gk-mobile-menu__sub+a.gk-mobile-menu__has-children {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(253, 251, 247, 0.12);
}

/* Sau khối mục con: tách nhẹ trước link top-level (vd. Tin tức) */
.gk-mobile-menu__nav a.gk-mobile-menu__sub+a:not(.gk-mobile-menu__sub):not(.gk-mobile-menu__has-children) {
  margin-top: 1.15rem;
}

/* Mục con: cột trái, viền accent — bỏ bullet lệch giữa màn hình */
.gk-mobile-menu__nav a.gk-mobile-menu__sub {
  font-family: var(--gk-font-body);
  font-size: clamp(0.9375rem, 3.1vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(253, 251, 247, 0.82);
  margin: 0.1rem 0 0.1rem 0.35rem;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  border-left: 2px solid rgba(47, 115, 152, 0.65);
  border-radius: 0 var(--gk-radius-sm) var(--gk-radius-sm) 0;
  position: relative;
}

.gk-mobile-menu__nav a.gk-mobile-menu__sub::before {
  content: none;
}

.gk-mobile-menu__nav .gk-mobile-menu__caret {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
  line-height: 1;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(1) {
  transition-delay: 50ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(2) {
  transition-delay: 90ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(3) {
  transition-delay: 130ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(4) {
  transition-delay: 170ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(5) {
  transition-delay: 210ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(6) {
  transition-delay: 250ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(7) {
  transition-delay: 290ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(8) {
  transition-delay: 330ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(9) {
  transition-delay: 370ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(10) {
  transition-delay: 410ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(11) {
  transition-delay: 450ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(12) {
  transition-delay: 490ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(13) {
  transition-delay: 530ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__nav a:nth-child(14) {
  transition-delay: 570ms;
}

.gk-mobile-menu__nav a:hover {
  color: var(--gk-cream);
  background: rgba(253, 251, 247, 0.06);
}

.gk-mobile-menu__nav a:focus-visible {
  outline: 2px solid rgba(253, 251, 247, 0.45);
  outline-offset: 2px;
}

.gk-mobile-menu__nav a[aria-current='page'] {
  background: rgba(253, 251, 247, 0.1);
  color: var(--gk-cream);
}

.gk-mobile-menu__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--gk-radius-pill);
  border: 1px solid rgba(253, 251, 247, 0.18);
  background: rgba(253, 251, 247, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gk-cream);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    transform var(--gk-duration-fast) var(--gk-ease-out);
  z-index: 2;
}

.gk-mobile-menu__close:hover {
  background: rgba(253, 251, 247, 0.14);
  border-color: rgba(253, 251, 247, 0.28);
}

.gk-mobile-menu__close:focus-visible {
  outline: 2px solid rgba(253, 251, 247, 0.5);
  outline-offset: 2px;
}

.gk-mobile-menu__footer {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: calc(100% - 2rem);
  max-width: 22rem;
}

.gk-mobile-menu__footer a {
  font-size: var(--gk-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.5);
  opacity: 0;
  transition: opacity var(--gk-duration-slow) var(--gk-ease-out) 520ms;
}

.gk-mobile-menu.is-open .gk-mobile-menu__footer a {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gk-mobile-menu__nav a {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* Main content offset for fixed header */
#site-content-wrap {
  padding-top: 5.25rem;
  /* Default clearance with some breathing room for normal pages (like News) */
}

#site-content-wrap:has(.gk-page-hero) {
  padding-top: 4.25rem;
  /* Flush fit for pages with a hero banner */
}

.gk-page-home #site-content-wrap,
#site-content-wrap:has(.gk-hero-slider--subpage) {
  padding-top: 0;
}

#phan-giai-phap-noi-that-grid.gk-section {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* ──────────────────────────────────────────────────────────────
   12. SITE FOOTER
   ────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--gk-navy-deep);
  color: var(--gk-white);
  position: relative;
  overflow: hidden;
}

/* Subtle top line */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gk-container-px);
  right: var(--gk-container-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 251, 247, 0.12) 30%, rgba(253, 251, 247, 0.12) 70%, transparent);
}

.footer-container {
  max-width: var(--gk-container-max);
  margin-inline: auto;
  padding-inline: var(--gk-container-px);
  padding-top: var(--gk-space-12);
  padding-bottom: var(--gk-space-6);
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1fr;
  gap: var(--gk-space-8);
  margin-bottom: var(--gk-space-8);
}

/* ── Footer Column 1: Brand ── */
.footer-brand__logo {
  margin-bottom: var(--gk-space-2);
}

.footer-brand__logo:empty {
  display: none;
}

.footer-brand__logo .custom-logo-link {
  display: inline-block;
}

.footer-brand__logo img {
  height: 44px;
  width: auto;
  max-width: min(220px, 100%);
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* Lockup đã có dòng VIGLACERA — ẩn tiêu đề trùng */
.footer-brand:has(.footer-brand__logo img) .footer-brand__title {
  display: none;
}

.footer-brand__title {
  margin: 0 0 var(--gk-space-3);
  font-family: var(--gk-font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gk-navy-mid);
  line-height: 1.2;
}

.footer-brand__logo-text {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-lg);
  font-weight: 800;
  color: var(--gk-cream);
  letter-spacing: -0.01em;
}

.footer-brand__tagline {
  font-size: var(--gk-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gk-steel);
  margin-bottom: var(--gk-space-3);
}

.footer-brand__desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--gk-white);
  max-width: min(52ch, 100%);
  margin-bottom: var(--gk-space-4);
}

/* Kênh Fanpage / Zalo / Tiktok / Gmail (dòng chữ + link) */
.footer-social-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-social-line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.footer-social-label {
  display: inline;
  font-weight: 600;
  color: var(--gk-white);
  margin-right: 0.35em;
}

.footer-social-textlink {
  color: var(--gk-white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.footer-social-textlink:hover {
  color: var(--gk-cream);
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Social Icons (legacy — giữ nếu dùng nơi khác) */
.footer-social {
  display: flex;
  gap: var(--gk-space-1);
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gk-radius-pill);
  background: rgba(253, 251, 247, 0.06);
  border: 1px solid var(--gk-border-cream);
  color: rgba(253, 251, 247, 0.7);
  font-size: 1rem;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out),
    transform var(--gk-duration-base) var(--gk-ease-bounce);
}

.footer-social__link:hover {
  background: var(--gk-navy);
  color: var(--gk-cream);
  transform: translateY(-3px);
}

/* ── Footer Column 2: Contact Info ── */
.footer-contact__heading {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gk-white);
  margin-bottom: var(--gk-space-3);
}

.footer-contact__items {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2);
}

.footer-contact__item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gk-white);
}

.footer-contact__item-icon {
  color: var(--gk-steel);
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-contact__item strong {
  display: block;
  font-weight: 600;
  color: var(--gk-white);
  font-size: var(--gk-text-xs);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.footer-contact__tel {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.footer-contact__tel:hover {
  color: var(--gk-cream);
  text-decoration: underline;
}

.footer-contact__sep {
  opacity: 0.45;
}

/* ── Footer Column 3: Map ── */
.footer-map {
  border-radius: var(--gk-radius-xl);
  overflow: hidden;
  border: 1px solid var(--gk-border-cream);
  height: 220px;
}

.footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.5) contrast(0.85);
}

/* ── Footer Bottom Bar ── */
.footer-bottom {
  border-top: 1px solid rgba(253, 251, 247, 0.07);
  padding-top: var(--gk-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gk-space-2);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--gk-text-xs);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.03em;
}

.footer-bottom-nav {
  display: flex;
  gap: var(--gk-space-3);
}

.footer-bottom-nav a {
  font-size: var(--gk-text-xs);
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.footer-bottom-nav a:hover {
  color: var(--gk-white);
}


/* ──────────────────────────────────────────────────────────────
   13. PAGE-SPECIFIC PLACEHOLDER STYLES
       (Lorem ipsum sections — replaced with real content later)
   ────────────────────────────────────────────────────────────── */
.gk-placeholder-section {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(26, 85, 128, 0.12);
  border-radius: var(--gk-radius-xl);
  background: rgba(26, 85, 128, 0.02);
  text-align: center;
  padding: var(--gk-space-8);
}

.gk-placeholder-section p {
  font-size: var(--gk-text-sm);
  color: var(--gk-text-light);
  font-style: italic;
}

/* Stats/numbers highlight */
.gk-stat-number {
  font-family: var(--gk-font-heading);
  font-size: clamp(var(--gk-text-4xl), 5vw, var(--gk-text-6xl));
  font-weight: 800;
  color: var(--gk-navy);
  line-height: 1;
  letter-spacing: -0.03em;
}

.gk-stat-label {
  font-size: var(--gk-text-sm);
  color: var(--gk-text-muted);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* ── Trang Chúng tôi — 4 section (anchor + lưới) ── */
.gk-page-about__section {
  scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

/* Một nhịp dọc giữa các section (tránh padding-top + padding-bottom chồng đôi) */
body.gk-page-about .gk-page-about__section+.gk-page-about__section {
  padding-top: 0;
}

/* Section Hồ sơ năng lực: padding trên/dưới đều, nhỏ hơn section chuẩn (rule + phía trên đã tắt padding-top) */
body.gk-page-about .gk-page-about__section.gk-about-section--capability {
  padding-top: clamp(var(--gk-space-6), 4vw, var(--gk-space-10));
  padding-bottom: clamp(var(--gk-space-6), 4vw, var(--gk-space-10));
}

/* Hero trang Chúng tôi — căn giữa dọc */
body.gk-page-about .gk-page-hero {
  min-height: clamp(16rem, 28vh, 22rem);
  align-items: center;
}

body.gk-page-about .gk-page-hero .gk-page-hero__content {
  padding-top: var(--gk-space-4);
  padding-bottom: var(--gk-space-4);
}

body.gk-page-about .gk-page-hero__bg img {
  opacity: 0.38;
  transform: scale(1.03);
}

body.gk-page-about .gk-page-hero__gradient {
  background: linear-gradient(118deg,
      rgba(12, 47, 69, 0.94) 0%,
      rgba(26, 85, 128, 0.55) 42%,
      rgba(12, 47, 69, 0.72) 100%);
}

body.gk-page-about .gk-page-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 5.2vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

body.gk-page-about .gk-page-hero .gk-lead {
  max-width: 38rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  color: rgba(253, 251, 247, 0.82);
}

/* ── Trang Dịch vụ — anchor menu (#tu-van-giai-phap …) ── */
.gk-page-services__section {
  scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

.gk-page-services .gk-service-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--gk-text-muted);
  line-height: 1.75;
  max-width: 42rem;
}

.gk-page-services .gk-service-list li+li {
  margin-top: 0.35rem;
}

.gk-page-services .gk-service-body {
  max-width: 48rem;
  margin-top: 0.25rem;
}

.gk-page-services .gk-service-body>p {
  color: var(--gk-text-muted);
  font-size: var(--gk-text-sm);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.gk-page-services .gk-service-body>p:last-child {
  margin-bottom: 0;
}

.gk-page-services .gk-service-body__heading {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gk-navy);
  line-height: 1.35;
  margin: 2rem 0 0.85rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gk-navy);
}

.gk-page-services .gk-service-body__heading:first-of-type {
  margin-top: 1.25rem;
}

.gk-page-services .gk-service-body>ul {
  list-style: disc;
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--gk-text-muted);
  font-size: var(--gk-text-sm);
  line-height: 1.75;
}

.gk-page-services .gk-service-body>ul li+li {
  margin-top: 0.35rem;
}

.gk-page-services .gk-service-body>ul li strong {
  color: var(--gk-navy);
  font-weight: 600;
}

/* Trang Dịch vụ — split ảnh / chữ + lưới danh sách (hướng dẫn design-taste-frontend: đa dạng layout, eyebrow không đánh số) */
.gk-page-services .gk-service-block--split {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.gk-page-services .gk-service-block--split .gk-service-body {
  max-width: none;
}

.gk-page-services .gk-service-block__media {
  margin: 0;
  border-radius: var(--gk-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(26, 85, 128, 0.12);
  box-shadow: 0 22px 55px rgba(22, 48, 72, 0.09);
}

.gk-page-services .gk-section--alt .gk-service-block__media {
  border-color: rgba(26, 85, 128, 0.14);
  box-shadow: 0 18px 44px rgba(22, 48, 72, 0.07);
}

.gk-page-services .gk-service-block__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (max-width: 899px) {
  .gk-page-services .gk-service-block--split .gk-service-block__media {
    order: 1;
  }

  .gk-page-services .gk-service-block--split .gk-service-body {
    order: 2;
  }

  .gk-page-services .gk-service-block--split-reverse .gk-service-body {
    order: 1;
  }

  .gk-page-services .gk-service-block--split-reverse .gk-service-block__media {
    order: 2;
  }
}

@media (min-width: 900px) {
  .gk-page-services .gk-service-block--split {
    display: grid;
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.25rem);
    align-items: start;
  }

  .gk-page-services .gk-service-block--split-reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr);
  }

  .gk-page-services .gk-service-block--split .gk-service-block__media {
    grid-column: 1;
    grid-row: 1;
  }

  .gk-page-services .gk-service-block--split .gk-service-body {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .gk-page-services .gk-service-block--split-reverse .gk-service-body {
    grid-column: 1;
  }

  .gk-page-services .gk-service-block--split-reverse .gk-service-block__media {
    grid-column: 2;
  }
}

.gk-page-services .gk-service-body__list--cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2rem;
  list-style-position: outside;
}

@media (min-width: 640px) {
  .gk-page-services .gk-service-body__list--cols {
    grid-template-columns: 1fr 1fr;
    padding-left: 1.15rem;
  }

  .gk-page-services .gk-service-body__list--cols li+li {
    margin-top: 0;
  }
}

.gk-page-services .gk-services-cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(26, 85, 128, 0.1);
}

/* ── Trang Dịch vụ: scroll snap — mỗi panel bám đầu section; proximity cho phép cuộn hết nội dung dài (zoom 125%) ── */
html.gk-html-services-snap {
  scroll-snap-type: y proximity;
  /* Căn snap theo mép trên viewport (0); header fixed chồng lên — giống trang chủ */
  scroll-padding-top: 0;
}

/* Snap cuối trang: footer toàn site (tránh mandatory “kẹt” ở section 3) */
body.gk-page-pretext-dynamic #colophon.site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* `.gk-page-services__section` có scroll-margin cho anchor menu — làm scroll-snap-align:start
   lệch mép trên (còn hở mảnh section trước). Trang snap full-viewport: tắt margin đó. */
html.gk-html-services-snap body.gk-page-pretext-dynamic .gk-page-services__section {
  scroll-margin-top: 0;
}

/* Bỏ offset wrap mặc định: hero + demo mỗi snap = đúng một khung nhìn */
body.gk-page-pretext-dynamic #site-content-wrap {
  padding-top: 0;
}

body.gk-page-pretext-dynamic .gk-page-hero .gk-page-hero__content {
  padding-top: max(6rem, clamp(1rem, 3vw, 2.25rem));
}

@media (prefers-reduced-motion: no-preference) {
  html.gk-html-services-snap {
    scroll-behavior: smooth;
  }
}

body.gk-page-pretext-dynamic .gk-page-hero {
  min-height: 100dvh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  /* Nền fallback nhạt hơn navy-deep — tránh viền tối sọc khi ảnh chưa tải */
  background: #3a4f62;
}

/* Hero Dịch vụ: ảnh sáng hơn + gradient mỏng (chủ yếu vignette trái cho chữ đọc được) */
body.gk-page-pretext-dynamic .gk-page-hero__gradient {
  background: linear-gradient(100deg,
      rgba(12, 47, 69, 0.5) 0%,
      rgba(26, 85, 128, 0.22) 32%,
      rgba(12, 47, 69, 0.06) 55%,
      transparent 72%);
}

body.gk-page-pretext-dynamic .gk-page-hero__bg img {
  opacity: 0.78;
}

body.gk-page-pretext-dynamic .gk-page-hero .gk-eyebrow--light {
  color: rgba(253, 251, 247, 0.96);
  background: rgba(26, 85, 128, 0.45);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(12, 47, 69, 0.35),
    0 10px 32px rgba(12, 47, 69, 0.22);
}

body.gk-page-pretext-dynamic .gk-page-hero h1 {
  color: #c8eaff;
  text-shadow: none;
}

body.gk-page-pretext-dynamic .gk-services-snap-footer.gk-section {
  padding-top: clamp(1.5rem, 4vh, 3rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  min-height: min(100dvh, 42rem);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(26, 85, 128, 0.07) 0%, transparent 42%), var(--gk-cream);
  border-top: 1px solid rgba(26, 85, 128, 0.14);
}

/* Section 2 — Sản xuất: cùng engine layout Pretext (services-editorial), không cuộn nội bộ */
body.gk-page-pretext-dynamic .gk-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.gk-page-pretext-dynamic .gk-editorial-font-probe {
  font-weight: 450;
  font-size: 20px;
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-pretext-demo-root.gk-services-snap-production,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-pretext-demo-root.gk-services-snap-production {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100dvh;
  min-height: 100svh;
  height: auto;
  max-height: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-y: auto;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  cursor: default;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-pretext-demo-root.gk-services-snap-production[data-gk-editorial-variant="production"] {
  --paper: var(--gk-cream);
  --ink: #14110d;
  --accent: var(--gk-navy);
  box-shadow: inset 0 4px 0 0 var(--gk-navy);
}

body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-pretext-demo-root.gk-services-snap-production[data-gk-editorial-variant="install"] {
  --paper: #f6f4f1;
  --ink: #16120e;
  --accent: var(--gk-navy);
  box-shadow: inset 0 4px 0 0 var(--gk-navy);
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-pretext-demo-root .gk-editorial-spread,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-pretext-demo-root .gk-editorial-spread {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100svh;
  height: auto;
}

/* Fallback đọc được khi JS lỗi / chậm; ẩn khi editorial vẽ xong (.gk-editorial-spread--ready) */
body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(4.5rem, 10vw) max(1.25rem, 4vw) max(2rem, 5vh);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__subtitle,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__subtitle {
  margin: 0 0 0.5rem;
  font-size: clamp(0.7rem, 1.1vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 85, 128, 0.82);
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__headline,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__headline {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
  color: var(--gk-navy);
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__body,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__body {
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.55;
  max-width: 52rem;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__body p,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__body p {
  margin: 0 0 1em;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-editorial-spread--ready .gk-services-editorial-fallback,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-editorial-spread--ready .gk-services-editorial-fallback {
  display: none;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__headline,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__headline {
  position: absolute;
  margin: 0;
  font: inherit;
  user-select: text;
  z-index: 4;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__headline-line,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__headline-line {
  position: absolute;
  white-space: pre;
  color: var(--gk-navy);
  cursor: text;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__subtitle,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__subtitle {
  position: absolute;
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(26, 85, 128, 0.82);
  user-select: text;
  cursor: text;
  z-index: 4;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__visual,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__visual {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  z-index: 1;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__visual--a,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__visual--a {
  filter: drop-shadow(0 26px 34px rgba(16, 16, 12, 0.14));
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__visual--b,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__visual--b {
  filter: drop-shadow(0 24px 32px rgba(140, 86, 52, 0.18));
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-line,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-line {
  position: absolute;
  white-space: pre;
  color: var(--ink);
  font-weight: 450;
  letter-spacing: 0.002em;
  user-select: text;
  cursor: text;
  transition: color 120ms ease;
  z-index: 4;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-line .gk-editorial-em,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-line .gk-editorial-em {
  color: var(--gk-navy);
  font-weight: 650;
}

body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-line:hover,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-line:hover,
body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-line:hover .gk-editorial-em,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-line:hover .gk-editorial-em {
  color: var(--accent);
}

@media (max-width: 760px) {

  body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__subtitle,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__subtitle {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

/* Trang Dịch vụ Pretext: chế độ đọc — 1 FAB góc phải; morph thanh→tròn dùng FLIP trong theme.js */
body.gk-page-pretext-dynamic #masthead.site-header.gk-header--pretext-reading {
  padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
  pointer-events: none;
  transition: padding-top 0.4s var(--gk-ease-out);
}

body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .gk-container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
}

body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .gk-nav-pill {
  pointer-events: all;
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  gap: 0;
  margin-inline: 0;
  margin-left: auto;
  border-radius: 50%;
  max-width: none;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: var(--gk-navy) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* transform: FLIP (theme.js) — không transition transform ở đây */
  transition:
    box-shadow 0.4s var(--gk-ease-out),
    background 0.35s var(--gk-ease-out),
    border-color 0.35s var(--gk-ease-out);
}

body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading.is-scrolled .gk-nav-pill {
  background: var(--gk-navy) !important;
  border-color: transparent !important;
}

body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .site-branding,
body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .main-navigation,
body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .gk-nav-cta,
body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .gk-nav-cta-mobile {
  display: none !important;
}

body.gk-page-pretext-dynamic #masthead.gk-header--pretext-reading .gk-hamburger {
  display: flex;
  width: 2.65rem;
  height: 2.65rem;
  margin: 0;
  border-radius: 50%;
}

/* ── Trang chủ: thu gọn pill khi tiêu đề section trắng chạm header — pill tròn + hiệu ứng ── */
body.gk-page-home #masthead .gk-nav-pill .site-branding,
body.gk-page-home #masthead .gk-nav-pill .main-navigation,
body.gk-page-home #masthead .gk-nav-pill .gk-nav-cta,
body.gk-page-home #masthead .gk-nav-pill .gk-nav-cta-mobile {
  transition:
    opacity 0.32s var(--gk-ease-out),
    transform 0.45s var(--gk-ease-spring),
    max-width 0.42s var(--gk-ease-out),
    margin 0.35s var(--gk-ease-out),
    padding 0.35s var(--gk-ease-out);
}

body.gk-page-home #masthead .gk-nav-pill .gk-hamburger {
  transition:
    opacity 0.35s var(--gk-ease-out),
    transform 0.5s var(--gk-ease-spring);
}

body.gk-page-home #masthead.site-header.gk-header--home-compact {
  padding-top: max(clamp(0.75rem, calc(5.95vw - 1.625rem), 2.25rem), env(safe-area-inset-top, 0px));
  pointer-events: none;
  transition: padding-top 0.35s var(--gk-ease-out);
}

body.gk-page-home #masthead.gk-header--home-compact .gk-container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
}

body.gk-page-home #masthead.site-header.gk-header--home-compact .gk-nav-pill {
  pointer-events: all;
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
  min-height: 3.25rem;
  max-height: 3.25rem;
  padding: 0;
  gap: 0;
  margin-inline: 0;
  margin-left: auto;
  border-radius: 50%;
  max-width: none;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: var(--gk-navy) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 32px rgba(26, 85, 128, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform-origin: 50% 50%;
  animation: gk-home-compact-pill-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s var(--gk-ease-out),
    background 0.3s var(--gk-ease-out),
    border-radius 0.35s var(--gk-ease-out);
}

body.gk-page-home #masthead.site-header.gk-header--home-compact.is-scrolled .gk-nav-pill {
  background: var(--gk-navy) !important;
  border-color: transparent !important;
}

body.gk-page-home #masthead.gk-header--home-compact .site-branding,
body.gk-page-home #masthead.gk-header--home-compact .main-navigation,
body.gk-page-home #masthead.gk-header--home-compact .gk-nav-cta,
body.gk-page-home #masthead.gk-header--home-compact .gk-nav-cta-mobile {
  opacity: 0;
  transform: translateX(-18px) scale(0.97);
  visibility: hidden;
  max-width: 0;
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  border: none !important;
}

body.gk-page-home #masthead.gk-header--home-compact .gk-hamburger {
  display: flex !important;
  width: 2.65rem;
  height: 2.65rem;
  margin: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transform: scale(1);
  animation: gk-home-compact-hamburger-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

body.gk-page-home #masthead.gk-header--home-compact .gk-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.gk-page-home #masthead.gk-header--home-compact .gk-hamburger__line {
  background-color: var(--gk-cream);
}

@keyframes gk-home-compact-pill-in {
  0% {
    transform: scale(0.82);
    opacity: 0.88;
    box-shadow: 0 4px 16px rgba(26, 85, 128, 0.12);
  }

  55% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 10px 32px rgba(26, 85, 128, 0.38);
  }
}

@keyframes gk-home-compact-hamburger-in {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-8deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Ghi đè scroll-snap (box-shadow none) khi đang compact */
body.gk-page-home.gk-home-scroll-snap #masthead.site-header.gk-header--home-compact .gk-nav-pill,
body.gk-page-home.gk-home-scroll-snap #masthead.site-header.gk-header--home-compact.gk-header--snap-edge .gk-nav-pill {
  box-shadow: 0 12px 40px rgba(26, 85, 128, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.gk-page-home #masthead.site-header.gk-header--home-compact {
    transition: none;
  }

  body.gk-page-home #masthead.site-header.gk-header--home-compact .gk-nav-pill {
    transition: none;
    animation: none;
  }

  body.gk-page-home #masthead .gk-nav-pill .site-branding,
  body.gk-page-home #masthead .gk-nav-pill .main-navigation,
  body.gk-page-home #masthead .gk-nav-pill .gk-nav-cta,
  body.gk-page-home #masthead .gk-nav-pill .gk-hamburger {
    transition: none;
  }

  body.gk-page-home #masthead.gk-header--home-compact .gk-hamburger {
    animation: none;
  }
}

/* Trang Dịch vụ — clone layout/CSS demo Pretext Dynamic Layout (chenglou.me/pretext/dynamic-layout/) */
body.gk-page-pretext-dynamic #gk-pretext-demo-root.gk-pretext-demo-root[data-gk-editorial-variant="consulting"] {
  --paper: var(--gk-cream);
  --ink: #11100d;
  --muted: #3d5a73;
  --accent: var(--gk-navy);
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100dvh;
  min-height: 100svh;
  height: auto;
  max-height: none;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-y: auto;
  isolation: isolate;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  cursor: default;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-shadow: inset 0 4px 0 0 var(--gk-navy);
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root.gk-pretext-demo-root.page--mobile[data-gk-editorial-variant="consulting"] {
  min-height: 100dvh;
  min-height: 100svh;
  height: auto;
  max-height: none;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .atmosphere,
body.gk-page-pretext-dynamic #san-xuat-cung-cap .atmosphere,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .atmosphere {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Bỏ lớp atmosphere (gradient xanh dương) — nền chỉ còn --paper */
body.gk-page-pretext-dynamic #gk-pretext-demo-root[data-gk-editorial-variant="consulting"] .atmosphere--left,
body.gk-page-pretext-dynamic #gk-pretext-demo-root[data-gk-editorial-variant="consulting"] .atmosphere--right,
body.gk-page-pretext-dynamic #san-xuat-cung-cap[data-gk-editorial-variant="production"] .atmosphere--left,
body.gk-page-pretext-dynamic #san-xuat-cung-cap[data-gk-editorial-variant="production"] .atmosphere--right,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien[data-gk-editorial-variant="install"] .atmosphere--left,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien[data-gk-editorial-variant="install"] .atmosphere--right {
  background: none;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .stage,
body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread__stage,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread__stage {
  position: relative;
  /* Chiều cao pixel do Pretext JS — không height:100% (tránh co panel khi snap + zoom) */
  min-height: 100svh;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root.page--mobile .stage,
body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-pretext-demo-root.page--mobile .gk-editorial-spread__stage,
body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-pretext-demo-root.page--mobile .gk-editorial-spread__stage {
  min-height: 100svh;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .headline {
  position: absolute;
  margin: 0;
  font: inherit;
  user-select: text;
  z-index: 4;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .headline-line {
  position: absolute;
  white-space: pre;
  color: var(--gk-navy);
  cursor: text;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .credit {
  position: absolute;
  margin: 0;
  font: 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(26, 85, 128, 0.82);
  user-select: text;
  cursor: text;
  z-index: 4;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .logo {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  z-index: 1;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .logo--openai {
  filter: drop-shadow(0 26px 34px rgba(16, 16, 12, 0.14));
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .logo--claude {
  filter: drop-shadow(0 24px 32px rgba(140, 86, 52, 0.18));
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .line {
  position: absolute;
  white-space: pre;
  color: var(--ink);
  font-weight: 450;
  letter-spacing: 0.002em;
  user-select: text;
  cursor: text;
  transition: color 120ms ease;
  z-index: 4;
}

body.gk-page-pretext-dynamic #gk-pretext-demo-root .line:hover {
  color: var(--accent);
}

/* Trang Dịch vụ — chặn tràn ngang do 100vw tính cả scrollbar (Windows, zoom 125%) */
body.gk-page-pretext-dynamic #page {
  overflow-x: clip;
}

/* body overflow-x: hidden (global) tạo scroll context → kết hợp html scroll-snap → 2 scrollbar + hỏng snap.
   Đổi thành visible để body không làm scroll container, giữ 1 scrollbar duy nhất và phục hồi snap.
   #page đã có overflow-x: clip lo việc chặn tràn ngang. */
body.gk-page-pretext-dynamic {
  overflow-x: visible;
}

/* ── Trang /dich-vu/ — responsive mobile ── */
@media (max-width: 768px) {

  /* Full-bleed 100vw + margin âm hay gây tràn ngang trên mobile */
  body.gk-page-pretext-dynamic #gk-pretext-demo-root.gk-pretext-demo-root[data-gk-editorial-variant="consulting"],
  body.gk-page-pretext-dynamic #san-xuat-cung-cap.gk-pretext-demo-root.gk-services-snap-production,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien.gk-pretext-demo-root.gk-services-snap-production {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.gk-page-pretext-dynamic .gk-page-hero .gk-page-hero__content {
    padding-top: max(4.25rem, env(safe-area-inset-top, 0px) + 3.25rem);
    padding-bottom: var(--gk-space-8);
  }

  body.gk-page-pretext-dynamic .gk-page-hero h1 {
    max-width: none;
    font-size: clamp(1.45rem, 5.8vw, 1.95rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  body.gk-page-pretext-dynamic .gk-page-hero .gk-lead {
    font-size: clamp(0.9rem, 3.4vw, 1.05rem);
    line-height: 1.55;
    max-width: 100%;
  }

  body.gk-page-pretext-dynamic .gk-services-snap-footer.gk-section {
    min-height: 0;
    padding-inline: var(--gk-container-px);
    padding-top: var(--gk-section-py-mobile);
    padding-bottom: calc(var(--gk-section-py-mobile) + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }

  body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback {
    padding: max(3.75rem, env(safe-area-inset-top, 0px) + 2.75rem) var(--gk-container-px) max(2rem, 6vh);
  }

  body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__headline,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__headline {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
  }

  body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-services-editorial-fallback__body,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-services-editorial-fallback__body {
    font-size: clamp(0.9375rem, 3.8vw, 1.0625rem);
  }

  /* Ẩn minh họa SVG / logo (Pretext + editorial) — mobile gọn, bớt nặng layout */
  body.gk-page-pretext-dynamic #gk-pretext-demo-root img[src*=".svg"],
  body.gk-page-pretext-dynamic #gk-pretext-demo-root .logo,
  body.gk-page-pretext-dynamic #gk-pretext-demo-root .stage svg,
  body.gk-page-pretext-dynamic #san-xuat-cung-cap img[src*=".svg"],
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien img[src*=".svg"],
  body.gk-page-pretext-dynamic #san-xuat-cung-cap .gk-editorial-spread svg,
  body.gk-page-pretext-dynamic #lap-dat-hoan-thien .gk-editorial-spread svg {
    display: none !important;
  }

  body.gk-page-pretext-dynamic #gk-pretext-demo-root .credit {
    font-size: 10px;
    letter-spacing: 0.1em;
    white-space: normal;
    max-width: min(18rem, calc(100% - 1.5rem));
  }

  @media (prefers-reduced-motion: reduce) {
    html.gk-html-services-snap {
      scroll-snap-type: none;
    }
  }
}

.gk-page-services .gk-pretext-root {
  display: block;
  text-wrap: balance;
}

.gk-page-services .gk-pretext-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.gk-page-services .gk-pretext-line__inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease;
  will-change: transform, opacity;
}

.gk-page-services .gk-pretext-root--inview .gk-pretext-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: calc(var(--gk-line-i, 0) * 0.06s);
}

@media (prefers-reduced-motion: reduce) {
  .gk-page-services .gk-pretext-line__inner {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ═══ Trang Chúng tôi — layout mới (câu chuyện / bento / đội ngũ) ═══ */

/* --- Lịch sử: lưới editorial + ảnh sticky --- */
.gk-about-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.gk-about-story__title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--gk-navy);
  max-width: min(48rem, 100%);
  text-wrap: balance;
}

.gk-about-story__figure {
  margin: 0;
  position: sticky;
  top: clamp(4.5rem, 11vh, 6.25rem);
}

.gk-about-story__figure-frame {
  position: relative;
  border-radius: var(--gk-radius-lg);
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(12, 47, 69, 0.14),
    0 0 0 1px rgba(26, 85, 128, 0.08);
}

.gk-about-story__figure-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, transparent 38%, rgba(12, 47, 69, 0.08) 100%);
}

/* Checkpoint scroll (trang Chúng tôi — đổi ảnh theo bước scroll) */
.gk-about-story__scroll-cp {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  pointer-events: none;
}

.gk-about-story__figure-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: inherit;
}

.gk-about-story__figure-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: opacity, transform;
}

.gk-about-story__figure-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gk-about-story__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.gk-about-story__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: clamp(0.5rem, 2vw, 1rem);
  border-right: 1px solid rgba(26, 85, 128, 0.12);
}

.gk-about-story__stat:last-child {
  border-right: none;
  padding-right: 0;
}

.gk-about-story__stat-num {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gk-navy);
  line-height: 1;
}

.gk-about-story__stat-label {
  font-size: var(--gk-text-xs);
  font-weight: 600;
  color: var(--gk-text-muted);
  line-height: 1.45;
  max-width: 12rem;
}

/* --- Tầm nhìn: header + bento --- */
body.gk-page-about .gk-about-section--pillars .gk-about-pillars-head {
  padding-top: clamp(1.35rem, 3.25vw, 2.5rem);
}

/* Tầm nhìn + Đội ngũ trong một section — giảm padding dưới, neo #doi-ngu */
body.gk-page-about .gk-about-alt-stack {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

body.gk-page-about .gk-about-alt-stack__team {
  margin-top: clamp(1rem, 2.25vw, 1.75rem);
}

body.gk-page-about #doi-ngu {
  scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

.gk-about-pillars-head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: min(72rem, 100%);
}

.gk-about-pillars-head__title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.3rem, 2.15vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--gk-navy);
}

@media (min-width: 640px) {
  .gk-about-pillars-head__title {
    white-space: nowrap;
  }
}

.gk-about-pillars-head__lead {
  margin: 1rem 0 0;
  font-size: var(--gk-text-base);
  line-height: 1.7;
  color: var(--gk-text-muted);
  max-width: 40rem;
}

.gk-about-linear-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(4.5rem, 8vw, 6.5rem);
  max-width: 88rem;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.gk-about-linear-block {
  border-top: 1px solid rgba(26, 85, 128, 0.15);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .gk-about-linear-block {
    display: grid;
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .gk-about-linear-block h3 {
    margin-bottom: 0;
  }
}

.gk-about-linear-block:first-child {
  border-top: none;
  padding-top: 0;
}

.gk-about-linear-block h3 {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--gk-navy);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}

.gk-about-linear-block p {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.25rem);
  color: var(--gk-text-main);
  line-height: 1.8;
  font-weight: 450;
}

.gk-about-linear-block .gk-about-pillar-ol {
  margin-top: 0.5rem;
  column-count: 1;
}

.gk-about-linear-block .gk-about-pillar-list,
.gk-about-linear-block .gk-about-pillar-ol {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.gk-about-linear-block .gk-about-pillar-list li,
.gk-about-linear-block .gk-about-pillar-ol li {
  display: block;
  position: relative;
  padding-left: 2.65rem;
  font-size: clamp(1.15rem, 2vw, 1.25rem);
  color: var(--gk-text-main);
  line-height: 1.6;
}

.gk-about-linear-block .gk-about-pillar-list li::before,
.gk-about-linear-block .gk-about-pillar-ol li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--gk-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.5' stroke='%23ffffff' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 55% 55%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 12px rgba(26, 85, 128, 0.15);
}

/* --- Đội ngũ: vỏ card gọn, không rail dọc --- */
.gk-about-team-shell {
  border-radius: var(--gk-radius-lg);
  border: 1px solid rgba(26, 85, 128, 0.12);
  background: linear-gradient(180deg, #fff 0%, rgba(253, 251, 247, 0.92) 100%);
  box-shadow: var(--gk-shadow-xs);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.gk-about-team-shell__head {
  margin-bottom: 0.75rem;
}

.gk-about-team-shell__title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gk-navy);
}

.gk-about-team-intro {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  max-width: 62rem;
  font-size: var(--gk-text-base);
  line-height: 1.78;
  color: var(--gk-text-main);
}

.gk-about-team-body {
  display: grid;
  grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.gk-about-team-list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  color: var(--gk-text-muted);
  line-height: 1.75;
}

.gk-about-team-list li {
  margin-bottom: 0.35rem;
}

.gk-about-team-structure__label {
  margin: 0 0 0.65rem;
  font-weight: 700;
  font-size: var(--gk-text-base);
  color: var(--gk-navy);
}

.gk-about-team-structure__list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--gk-text-muted);
  font-size: var(--gk-text-sm);
  line-height: 1.75;
}

.gk-about-team-structure__list li {
  margin-bottom: 0.4rem;
}

.gk-about-team-structure__list li:last-child {
  margin-bottom: 0;
}

.gk-about-team-chart {
  position: relative;
  margin: 0;
  border-radius: var(--gk-radius-md);
  overflow: hidden;
  background: var(--gk-navy-deep);
}

/* Figcaption ẩn — mô tả cho trình đọc màn hình */
.gk-about-team-chart .gk-org-chart__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Sơ đồ tổ chức (HTML/CSS, trang Chúng tôi) ── */
.gk-org-chart {
  --gk-org-line: rgba(253, 251, 247, 0.55);
  --gk-org-pad: clamp(0.85rem, 2.2vw, 1.35rem);
  padding: var(--gk-org-pad);
  background: linear-gradient(165deg, #0e3552 0%, var(--gk-navy-deep) 42%, #081c2e 100%);
  color: rgba(253, 251, 247, 0.96);
  font-size: clamp(0.62rem, 1.05vw, 0.78rem);
  line-height: 1.3;
  text-align: center;
}

.gk-org-chart__headline {
  display: inline-block;
  margin: 0 auto 0.65rem;
  padding: 0.35em 1.25em 0.4em;
  font-family: var(--gk-font-heading);
  font-size: clamp(0.68rem, 1.15vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 2px;
  background: linear-gradient(180deg, #f08a2e 0%, #d45a18 55%, #b84a12 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.gk-org-chart__ceo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.15rem;
}

.gk-org-chart__join {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(44rem, 100%);
}

.gk-org-chart__join-stem {
  display: block;
  width: 2px;
  height: 12px;
  margin-top: 2px;
  background: var(--gk-org-line);
}

.gk-org-chart__join-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--gk-org-line);
}

.gk-org-chart__join-drops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.gk-org-chart__join-drop {
  display: block;
  width: 2px;
  height: 11px;
  margin: 0 auto;
  background: var(--gk-org-line);
}

.gk-org-chart__regions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  align-items: start;
}

.gk-org-chart__region {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}

.gk-org-chart__node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  hyphens: auto;
  word-break: break-word;
}

.gk-org-chart__node--ceo {
  padding: 0.45em 1.1em;
  max-width: 16rem;
  font-family: var(--gk-font-heading);
  font-weight: 800;
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c2438;
  border-radius: 2px;
  background: linear-gradient(180deg, #d8e8f2 0%, #9ebccf 48%, #7aa3c4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.gk-org-chart__node--deputy {
  padding: 0.42em 0.55em;
  min-height: 2.85em;
  font-family: var(--gk-font-heading);
  font-weight: 700;
  font-size: clamp(0.62rem, 1vw, 0.74rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #0c2438;
  border-radius: 2px;
  background: linear-gradient(180deg, #e8eef5 0%, #b9ccde 45%, #8fafc9 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.gk-org-chart__depts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.25rem, 0.8vw, 0.45rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gk-org-chart__dept {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.gk-org-chart__node--dept {
  flex: 1 1 auto;
  min-height: 3.6em;
  padding: 0.35em 0.28em;
  font-weight: 700;
  font-size: clamp(0.55rem, 0.88vw, 0.68rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #1c2b3a;
  border-radius: 2px;
  background: linear-gradient(180deg, #f4f6f9 0%, #dce3eb 40%, #c5d0dc 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.gk-org-chart__subs {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gk-org-chart__node--sub {
  padding: 0.32em 0.2em;
  min-height: 2.15em;
  font-weight: 600;
  font-size: clamp(0.52rem, 0.82vw, 0.64rem);
  line-height: 1.2;
  color: #1c2b3a;
  border-radius: 2px;
  background: linear-gradient(180deg, #eef2f6 0%, #d5dde6 55%, #bcc8d4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

@media (max-width: 720px) {

  .gk-org-chart__join-bar,
  .gk-org-chart__join-drops {
    display: none;
  }

  .gk-org-chart__join-stem {
    height: 8px;
  }
}

@media (max-width: 900px) {
  .gk-about-team-body {
    grid-template-columns: 1fr;
  }

  .gk-about-team-chart {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gk-org-chart {
    min-width: min(100%, 34rem);
  }

  .gk-org-chart__regions {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .gk-org-chart__depts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gk-about-story__layout {
    grid-template-columns: 1fr;
  }

  .gk-about-story__figure {
    position: static;
    order: -1;
    max-width: min(36rem, 100%);
    margin-inline: auto;
  }

  .gk-about-story__title {
    max-width: none;
  }


}

@media (max-width: 420px) {
  .gk-org-chart__depts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gk-about-story__stats {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding-top: 1.15rem;
  }

  .gk-about-story__stat {
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0 0 0.85rem;
    border-right: none;
    border-bottom: 1px solid rgba(26, 85, 128, 0.12);
  }

  .gk-about-story__stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.gk-about-section--capability {
  position: relative;
  overflow: hidden;
  /* Căn khối nội dung theo trục dọc khi section cao (tránh cảm giác lệch trên / trống dưới) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(28rem, 64vh, 52rem);
}

.gk-about-section--capability::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 80% 55% at 100% 0%, rgba(47, 115, 152, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(26, 85, 128, 0.25) 0%, transparent 50%);
}

.gk-about-section--capability .gk-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.gk-about-capability {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

/* Căn khối CTA trong nửa phải (tránh khoảng trống lệch một bên trên desktop) */
.gk-about-capability__cta {
  justify-self: center;
  width: 100%;
  max-width: 26rem;
}

.gk-about-capability__title {
  margin: 0;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--gk-cream);
}

.gk-about-capability__lead {
  margin: 1rem 0 0;
  font-size: var(--gk-text-base);
  line-height: 1.75;
  color: rgba(253, 251, 247, 0.82);
  max-width: 40rem;
}

.gk-about-capability__note {
  margin: 1.25rem 0 0;
  font-size: var(--gk-text-sm);
  line-height: 1.6;
  color: rgba(253, 251, 247, 0.55);
}

.gk-about-capability__card {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--gk-radius-lg);
  border: 1px solid rgba(253, 251, 247, 0.14);
  background: rgba(253, 251, 247, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

@supports not (backdrop-filter: blur(14px)) {
  .gk-about-capability__card {
    background: rgba(26, 85, 128, 0.35);
  }
}

.gk-about-capability__card-text {
  margin: 0 0 1.25rem;
  font-size: var(--gk-text-sm);
  line-height: 1.65;
  color: rgba(253, 251, 247, 0.88);
}

.gk-about-capability__btn {
  width: 100%;
  justify-content: center;
}

.gk-about-capability-list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: rgba(253, 251, 247, 0.88);
}

.gk-about-capability-list li {
  margin-bottom: 0.35rem;
}

.gk-about-subhead {
  margin: 0.5rem 0 0;
  font-size: var(--gk-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gk-steel);
}

.gk-about-prose {
  margin-top: 1.25rem;
}

.gk-about-prose>p {
  margin: 0 0 1rem;
  color: var(--gk-text-muted);
  line-height: 1.78;
  font-size: var(--gk-text-base);
  font-weight: 400;
}

.gk-about-prose>p.gk-lead {
  color: var(--gk-text-main);
  font-size: var(--gk-text-lg);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  font-weight: 500;
}

/* Nhấn mạnh: xanh brand rõ hơn (--gk-navy dễ bị nhầm với đen trên nền kem) */
body.gk-page-about .gk-about-prose strong,
body.gk-page-about .gk-about-prose b {
  color: var(--gk-navy-mid);
  font-weight: 700;
}

.gk-about-prose .gk-about-brand-tagline {
  margin: 1.75rem 0 0 !important;
  padding-top: 1.35rem;
  border-top: 1px solid var(--gk-border);
  font-family: var(--gk-font-heading);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gk-navy-mid);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  body.gk-page-about .gk-page-hero {
    min-height: clamp(14rem, 26vh, 20rem);
  }

  .gk-about-board-card--philosophy .gk-about-pillar-ol {
    column-count: 1;
  }

  .gk-about-capability {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .gk-about-section--capability {
    min-height: unset;
    justify-content: flex-start;
  }

  .gk-about-capability__cta {
    justify-self: stretch;
    max-width: none;
    margin-top: 0.5rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   14. RESPONSIVE BREAKPOINTS
       Mobile-first overrides
   ────────────────────────────────────────────────────────────── */

/* ── Tablet: 768px ── */
@media (max-width: 1024px) {
  :root {
    --gk-section-py: var(--gk-section-py-md);
  }

  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gk-space-6);
  }

  .footer-map {
    grid-column: 1 / -1;
    height: 200px;
  }

  .gk-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .main-navigation {
    display: none;
    /* replaced by hamburger on tablet */
  }

  .gk-nav-cta-mobile {
    display: flex;
    margin-left: auto;
  }

  .gk-hamburger {
    display: flex;
    margin-left: 0;
  }

  .gk-nav-cta.desktop-only {
    display: none;
  }
}

/* ── Mobile: 768px ── */
@media (max-width: 768px) {
  :root {
    --gk-section-py: var(--gk-section-py-mobile);
    --gk-container-px: 1.25rem;
  }

  /* All col-spans reset to 1 column */
  .gk-grid-2,
  .gk-grid-3,
  .gk-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--gk-space-3);
  }

  /* Use min-h DVH instead of h-screen to avoid iOS safari jump */
  .gk-page-hero {
    min-height: clamp(12rem, 24vh, 18rem);
  }

  .gk-nav-pill {
    margin-inline: var(--gk-container-px);
  }

  #site-content-wrap {
    padding-top: 4.5rem;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: var(--gk-space-6);
  }

  .footer-map {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gk-space-2);
  }

  .gk-cta-banner {
    padding: var(--gk-space-8) var(--gk-space-4);
    border-radius: var(--gk-radius-xl);
  }

  .gk-page-hero__content {
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
  }

  /* Remove rotations/overlaps for touch safety */
  .gk-z-axis-card {
    transform: none !important;
    margin: 0 !important;
  }
}

/* ── Small Mobile: 480px ── */
@media (max-width: 480px) {
  .gk-cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gk-btn--lg {
    width: 100%;
    justify-content: center;
  }
}


/* ──────────────────────────────────────────────────────────────
   15. SUPPLEMENTARY COMPONENT STYLES
   ────────────────────────────────────────────────────────────── */

/* ── Card Image Tag Overlay ── */
.gk-card-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--gk-navy);
  color: var(--gk-cream);
  font-size: var(--gk-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.75em;
  border-radius: var(--gk-radius-pill);
}

/* ── Solution Card Description ── */
.gk-solution-card__desc {
  font-size: var(--gk-text-xs);
  color: rgba(253, 251, 247, 0.65);
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* ── Contact page reuse of footer-contact__item on white bg ── */
.gk-contact-page__items .footer-contact__item {
  font-size: var(--gk-text-base);
  line-height: 1.65;
  color: var(--gk-text-main);
}

.gk-contact-page__items .footer-contact__item-icon {
  color: var(--gk-navy);
  font-size: 1.35rem;
  margin-top: 0.1rem;
}

.gk-contact-page__items .footer-contact__item strong {
  font-size: var(--gk-text-base);
  margin-bottom: 0.4rem;
  color: var(--gk-navy);
  letter-spacing: 0.02em;
}

.gk-contact-page__items .footer-contact__tel {
  color: var(--gk-text-main);
  font-weight: 400;
}

/* Trang Liên hệ: H1 ẩn (đã bỏ hero — vẫn một H1 cho SEO / a11y) */
body.gk-page-contact .gk-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Trụ sở + chi nhánh: hai cột cân đối (mobile xuống 1 cột qua .gk-grid-2) */
.gk-page-contact .gk-contact-page__offices.gk-grid-2 {
  align-items: start;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

.gk-page-contact .gk-contact-office__title {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gk-navy);
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 85, 128, 0.12);
}

.gk-page-contact .gk-contact-page__items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gk-page-contact .gk-contact-address-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  color: var(--gk-text-main);
  font-size: var(--gk-text-base);
  line-height: 1.7;
}

.gk-page-contact .gk-contact-address-list li {
  font-weight: 400;
}

.gk-page-contact .gk-contact-address-list li+li {
  margin-top: 0.45rem;
}

/* Responsive grid for offices to prevent wrapping */
@media (max-width: 1100px) {
  .gk-page-contact .gk-contact-page__offices.gk-grid-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Contact page: Google Maps — lưới 4 cơ sở (2x2) */
.gk-page-contact .gk-contact-page__maps {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gk-page-contact .gk-contact-page__maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.gk-page-contact .gk-contact-map-card {
  display: flex;
  flex-direction: column;
  background: var(--gk-white);
  border-radius: var(--gk-radius-xl);
  border: 1px solid rgba(26, 85, 128, 0.14);
  box-shadow: 0 10px 40px rgba(12, 47, 69, 0.06);
  overflow: hidden;
  min-height: 0;
}

.gk-page-contact .gk-contact-map-card__head {
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1rem, 2.5vw, 1.35rem) clamp(0.65rem, 1.5vw, 0.85rem);
  border-bottom: 1px solid rgba(26, 85, 128, 0.08);
}

.gk-page-contact .gk-contact-map-card__title {
  margin: 0 0 0.45rem;
  font-family: var(--gk-font-heading);
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gk-navy);
  line-height: 1.25;
}

.gk-page-contact .gk-contact-map-card__address {
  margin: 0 0 0.65rem;
  font-size: var(--gk-text-sm);
  line-height: 1.55;
  color: var(--gk-text-muted);
}

.gk-page-contact .gk-contact-map-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--gk-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gk-navy-mid);
  text-decoration: none;
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-page-contact .gk-contact-map-card__link:hover {
  color: var(--gk-navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.gk-page-contact .gk-contact-map-card__link-icon {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.85;
}

.gk-page-contact .gk-contact-map-card__frame {
  flex: 1;
  min-height: clamp(220px, 32vw, 320px);
  position: relative;
  background: rgba(12, 47, 69, 0.04);
}

.gk-page-contact .gk-contact-map-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.2);
}

/* Contact page: social media grid layout */
.gk-page-contact .gk-contact-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gk-space-4);
  margin-top: var(--gk-space-4);
}

.gk-page-contact .gk-contact-social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gk-space-6) var(--gk-space-4);
  background: var(--gk-surface-card);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-xl);
  text-decoration: none;
  color: var(--gk-text-main);
  box-shadow: var(--gk-shadow-sm);
  transition:
    transform var(--gk-duration-base) var(--gk-ease-spring),
    box-shadow var(--gk-duration-base) var(--gk-ease-spring),
    border-color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-page-contact .gk-contact-social-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gk-shadow-md);
  border-color: var(--gk-navy);
}

.gk-page-contact .gk-contact-social-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gk-glass-blue);
  color: var(--gk-navy);
  font-size: 2rem;
  margin-bottom: var(--gk-space-3);
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-page-contact .gk-contact-social-card:hover .gk-contact-social-card__icon-wrap {
  background: var(--gk-navy);
  color: var(--gk-white);
}

.gk-page-contact .gk-contact-social-card__title {
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-lg);
  font-weight: 700;
  color: var(--gk-navy-deep);
  margin-bottom: 0.35rem;
}

.gk-page-contact .gk-contact-social-card__desc {
  font-size: var(--gk-text-sm);
  color: var(--gk-text-muted);
  line-height: 1.5;
  margin-bottom: var(--gk-space-4);
  max-width: 22ch;
  flex-grow: 1;
}

.gk-page-contact .gk-contact-social-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--gk-text-sm);
  font-weight: 700;
  color: var(--gk-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gk-page-contact .gk-contact-social-card__action i {
  font-size: 1rem;
  transition: transform var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-page-contact .gk-contact-social-card:hover .gk-contact-social-card__action i {
  transform: translate(2px, -2px);
}

/* ── Navigation Sub-menus (WordPress dropdown) ── */
/* Không dùng padding-bottom trên <li>: làm ô menu cao hơn → align-items:center kéo chữ lệch dòng.
   Cầu nối hover: ::after tuyệt đối, không tăng chiều cao layout. */
.main-navigation>ul>li.menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.65rem;
  z-index: calc(var(--gk-z-raised) - 2);
}

.main-navigation .sub-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  background: var(--gk-dropdown-surface);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--gk-dropdown-border);
  border-radius: var(--gk-radius-xl);
  box-shadow: var(--gk-dropdown-shadow);
  padding: 0.625rem 0.5rem 0.5rem;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity var(--gk-duration-base) var(--gk-ease-out),
    transform var(--gk-duration-base) var(--gk-ease-spring);
  z-index: var(--gk-z-raised);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: stretch;
}

.main-navigation li:hover>.sub-menu,
.main-navigation li:focus-within>.sub-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.main-navigation .sub-menu li a {
  border-radius: var(--gk-radius-md);
  padding: 0.6rem 1rem;
  display: block;
  font-size: var(--gk-text-sm);
  white-space: nowrap;
  color: var(--gk-text-main);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  transition:
    color var(--gk-duration-fast) var(--gk-ease-out),
    background var(--gk-duration-fast) var(--gk-ease-out);
}

.main-navigation .sub-menu li a:hover,
.main-navigation .sub-menu li.current-menu-item>a {
  color: var(--gk-navy);
  background: rgba(26, 85, 128, 0.08);
}

/* Dropdown «Sản phẩm» — mega lưới thẻ (thumbnail + mô tả rút + «Tìm hiểu thêm») */
.main-navigation ul.menu li ul.sub-menu.gk-mega-sub--product-cards,
.main-navigation ul li ul.sub-menu.gk-mega-sub--product-cards,
.main-navigation .sub-menu.gk-mega-sub--product-cards,
ul.sub-menu.gk-mega-sub--product-cards {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem 1rem !important;
  padding: 15px 20px !important;
  min-height: 0 !important;
  height: auto !important;
  /* panel width: compact on zoomed screens, moderate on desktop */
  min-width: clamp(36rem, 50vw, 56rem) !important;
  max-width: calc(100vw - 4rem) !important;
  align-items: stretch !important;
  
  /* Fix: Elegant Border & Shadow */
  border: 1px solid #eaeaea !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;

  /* Fix: Absolute Positioning */
  position: absolute !important;
  top: 100% !important;
  left: 50% !important; /* Căn giữa theo li cha */
  z-index: 999 !important;
  transform: translateX(-50%) !important; /* Kéo ngược lại 50% để vào chính giữa */
}

/* Fix: Make sure parent li is relative for correct absolute positioning */
.main-navigation li.menu-item-has-children {
  position: relative !important;
}

/* Fix: Responsive Layout for Mobile/Tablet */
@media (max-width: 992px) {
  .main-navigation ul.menu li ul.sub-menu.gk-mega-sub--product-cards,
  .main-navigation ul li ul.sub-menu.gk-mega-sub--product-cards,
  .main-navigation .sub-menu.gk-mega-sub--product-cards,
  ul.sub-menu.gk-mega-sub--product-cards {
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    padding: 1rem !important;
  }
}

.main-navigation ul.menu li ul.sub-menu.gk-mega-sub--product-cards.gk-mega-sub--2-cards,
.main-navigation ul li ul.sub-menu.gk-mega-sub--product-cards.gk-mega-sub--2-cards,
.main-navigation .sub-menu.gk-mega-sub--product-cards.gk-mega-sub--2-cards,
ul.sub-menu.gk-mega-sub--product-cards.gk-mega-sub--2-cards {
  min-width: clamp(25rem, 34vw, 40rem) !important;
  padding: 15px 20px !important;
}

.main-navigation .sub-menu.gk-mega-sub--product-cards>.gk-nav-dropdown-card {
  flex: 1 1 11rem;
  min-width: 9rem;
  max-width: clamp(14rem, 17vw, 20rem);
  list-style: none;
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 0.5rem; /* Reduced from 0.65rem 0.65rem 0.95rem */
  border-radius: var(--gk-radius-lg);
  background: transparent;
  white-space: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gk-text-main);
  text-decoration: none;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out);
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__link:hover {
  color: var(--gk-navy-deep);
  background: rgba(26, 85, 128, 0.07);
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--gk-radius-md);
  background: rgba(12, 47, 69, 0.06);
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gk-navy-deep);
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid rgba(26, 85, 128, 0.12);
  border-radius: var(--gk-radius-sm);
  box-shadow: 0 1px 4px rgba(12, 47, 69, 0.08);
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__title {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gk-navy-deep);
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__excerpt {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gk-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.main-navigation .sub-menu.gk-mega-sub--product-cards .gk-nav-dropdown-card__cta {
  margin-top: 0.4rem;
  font-size: var(--gk-text-sm);
  font-weight: 600;
  color: var(--gk-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.main-navigation>ul>li {
  position: relative;
}

/* ── WordPress wp_nav_menu compat ── */
.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── WordPress Alignment Blocks ── */
.wp-block-image img {
  border-radius: var(--gk-radius-md);
}

/* ── Post Navigation ── */
.posts-navigation,
.post-navigation {
  margin-top: var(--gk-space-8);
  padding-top: var(--gk-space-4);
  border-top: 1px solid var(--gk-border);
}

/* ── Page content wp_the_content ── */
.entry-content p {
  line-height: 1.7;
  margin-bottom: var(--gk-space-2);
  color: var(--gk-text-main);
}

.entry-content h2,
.entry-content h3 {
  margin-top: var(--gk-space-4);
  margin-bottom: var(--gk-space-2);
}

/* ── Skip to content (Accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--gk-navy);
  color: var(--gk-cream);
  padding: 0.5rem 1rem;
  border-radius: var(--gk-radius-sm);
  font-size: var(--gk-text-sm);
  z-index: var(--gk-z-modal);
  transition: top var(--gk-duration-fast) var(--gk-ease-out);
}

.skip-link:focus {
  top: 1rem;
}


/* ──────────────────────────────────────────────────────────────
   16. HERO SLIDER — Cinematic Fullscreen Slideshow
       Extracted from user reference image:
       · Fullscreen 100dvh
       · Bottom-left: large bold title + location tag (màu thương hiệu)
       · Bottom-right: "01 / 04" counter + hairline arrow circles
       · Horizontal progress bar above controls
       · Dot nav (right side, vertical)
       · Crossfade transition between slides
   ────────────────────────────────────────────────────────────── */

.gk-hero-slider {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--gk-navy-deep);
}

/* ── Slides Track ── */
.gk-hero-slider__track {
  position: absolute;
  inset: 0;
}

.gk-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* GPU-safe: only opacity animated */
  transition: opacity 1000ms var(--gk-ease-out);
  will-change: opacity;
}

.gk-hero-slider__slide.is-active {
  opacity: 1;
}

/* ── Background Image ── */
.gk-hero-slider__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gk-hero-slider__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Ken Burns subtle zoom per active slide */
  transform: scale(1.04);
  transition: transform 7000ms var(--gk-ease-out);
}

.gk-hero-slider__slide.is-active .gk-hero-slider__bg img {
  transform: scale(1);
}

/* ── Gradient Overlay — extracted from reference:
       transparent → deep dark at bottom 45% ── */
.gk-hero-slider__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(10, 18, 30, 0.88) 0%,
      rgba(10, 18, 30, 0.55) 30%,
      rgba(10, 18, 30, 0.15) 55%,
      transparent 75%),
    linear-gradient(to right,
      rgba(10, 18, 30, 0.4) 0%,
      transparent 50%);
  pointer-events: none;
}

/* ── UI Layer (over all slides) ── */
.gk-hero-slider__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* only interactive children get pointer-events */
  z-index: 10;
}

/* Trang chủ — hero: CTA + điều khiển slider (đồng bộ section Công trình nổi bật) */
#gk-hero-slider .gk-hero-slider__ui--home {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 1rem;
  padding: 0 var(--gk-container-px) max(1.25rem, env(safe-area-inset-bottom));
}

#gk-hero-slider .gk-hero-slider__ui--home .gk-hero-slider__controls {
  position: relative;
  inset: auto;
  align-self: flex-end;
  padding: 0;
  min-width: 0;
}

#gk-hero-slider .gk-hero-slider__cta {
  position: relative;
  z-index: 12;
  pointer-events: auto;
  text-decoration: none;
  align-self: center;
}

@media (max-width: 767px) {
  #gk-hero-slider .gk-hero-slider__ui--home {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    gap: 0.75rem;
  }

  #gk-hero-slider .gk-hero-slider__ui--home .gk-hero-slider__controls-row {
    justify-content: space-between;
    width: 100%;
  }

  #gk-hero-slider .gk-hero-slider__cta {
    align-self: stretch;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }
}

@media (max-height: 900px),
(max-width: 1440px) and (max-height: 960px) {
  #gk-hero-slider .gk-hero-slider__ui--home {
    gap: 0.5rem;
    padding: 0 clamp(1rem, 3vw, 2rem) max(0.65rem, env(safe-area-inset-bottom));
    padding-right: max(clamp(1rem, 3vw, 2rem), calc(3.25rem + env(safe-area-inset-right, 0px)));
  }

  #gk-hero-slider .gk-hero-slider__cta.gk-btn--lg {
    padding: 0.7em 1.35em;
    font-size: var(--gk-text-sm);
  }
}

/* ──────────────────────
   BOTTOM-LEFT: Title Info
   ────────────────────── */
.gk-hero-slider__info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 var(--gk-container-px) 3.5rem;
  pointer-events: all;
  max-width: 60%;
}

.gk-hero-slider__info-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Left accent line — extracted from reference image */
.gk-hero-slider__accent-line {
  width: 2px;
  height: 100%;
  min-height: 4rem;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  border-radius: 2px;
}

/* Text container — stacked slides, only .is-active visible */
.gk-hero-slider__text {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.gk-hero-slider__text.is-active {
  display: flex;
  animation: slideTextIn 700ms var(--gk-ease-spring) forwards;
}

@keyframes slideTextIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title — large bold uppercase, extracted: ~2.2–2.8rem */
.gk-hero-slider__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--gk-cream);
  margin: 0;
}

.gk-hero-slider__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-hero-slider__title-link:hover {
  color: rgba(253, 251, 247, 0.78);
}

/* Location tag — pill cùng họ màu brand (thay amber vàng) */
.gk-hero-slider__location-tag {
  display: inline-block;
  font-family: var(--gk-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gk-cream);
  background: rgba(26, 85, 128, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--gk-radius-pill);
  padding: 0.3em 0.9em;
  width: fit-content;
}

/* ──────────────────────
   BOTTOM-RIGHT: Controls
   ────────────────────── */
.gk-hero-slider__controls {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 var(--gk-container-px) 3.5rem;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.875rem;
  min-width: 140px;
}

/* Progress bar — thin horizontal line above controls */
.gk-hero-slider__progress {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.gk-hero-slider__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: width 100ms linear;
}

/* Controls row: counter + arrows */
.gk-hero-slider__controls-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Counter "01 / 04" */
.gk-hero-slider__counter {
  font-family: var(--gk-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}

.gk-hero-slider__counter-current {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.gk-hero-slider__counter-sep {
  opacity: 0.4;
}

/* Arrow buttons — hairline circle, extracted from reference */
.gk-hero-slider__arrows {
  display: flex;
  gap: 0.5rem;
}

.gk-hero-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--gk-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    background var(--gk-duration-fast) var(--gk-ease-out),
    transform var(--gk-duration-base) var(--gk-ease-spring);
}

.gk-hero-slider__arrow:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.06);
}

.gk-hero-slider__arrow:active {
  transform: scale(0.96);
}

/* ── Pause indicator (optional, accessibility) ── */
.gk-hero-slider[data-paused] .gk-hero-slider__progress-bar {
  animation-play-state: paused;
}

.gk-hero-slider--subpage {
  height: clamp(30rem, 68dvh, 52rem);
  min-height: clamp(30rem, 68dvh, 52rem);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gk-hero-slider--subpage {
    height: clamp(24rem, 54dvh, 40rem);
    min-height: clamp(24rem, 54dvh, 40rem);
  }

  .gk-hero-slider {
    height: 100dvh;
    height: 100svh;
    min-height: 28rem;
  }

  /* Xếp chồng info → controls, tránh hai khối absolute đè nhau ở mép dưới */
  .gk-hero-slider__ui {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-inline: var(--gk-container-px);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    gap: 1rem;
  }

  .gk-hero-slider__info {
    position: relative;
    inset: auto;
    max-width: 100%;
    padding: 0;
  }

  .gk-hero-slider__info-inner {
    gap: 0.75rem;
  }

  .gk-hero-slider__accent-line {
    min-height: 2.75rem;
  }

  .gk-hero-slider__title {
    font-size: clamp(1.05rem, 5.2vw, 1.75rem);
    text-wrap: balance;
  }

  .gk-hero-slider__controls {
    position: relative;
    inset: auto;
    align-self: stretch;
    padding: 0;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .gk-hero-slider__progress {
    width: 100%;
    max-width: none;
  }

  .gk-hero-slider__controls-row {
    justify-content: space-between;
    width: 100%;
  }

  /* On mobile: gradient heavier at bottom for text legibility */
  .gk-hero-slider__gradient {
    background:
      linear-gradient(to top,
        rgba(10, 18, 30, 0.95) 0%,
        rgba(10, 18, 30, 0.65) 35%,
        rgba(10, 18, 30, 0.2) 60%,
        transparent 80%);
  }
}

@media (max-width: 480px) {
  .gk-hero-slider__location-tag {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .gk-hero-slider__arrow {
    width: 2.65rem;
    height: 2.65rem;
    /* vùng chạm thoải mái hơn */
  }
}

/* ──────────────────────────────────────────────────────────────
   16. SECTION 2: BRAND STORY — EDITORIAL 2-COLUMN SPLIT
   ────────────────────────────────────────────────────────────── */
.gk-brand-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--gk-space-12);
  /* 6rem gap for elegant breathing room */
  align-items: start;
}

.gk-brand-story__left {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-4);
  position: sticky;
  top: 8rem;
  /* sticky effect when scrolling on desktop */
}

.gk-brand-story__title {
  font-size: clamp(var(--gk-text-3xl), 4vw, var(--gk-text-5xl)) !important;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gk-navy);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Cùng màu xanh trầm chủ đạo (--gk-navy #1a5580), không gradient xám–xanh */
.gk-brand-story__title .gk-gradient-text {
  color: var(--gk-navy);
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: var(--gk-navy);
}

.gk-brand-story__cta-wrapper {
  margin-top: var(--gk-space-4);
}

.gk-brand-story__right {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-6);
  /* spacious padding between paragraphs */
  color: var(--gk-text-muted);
  font-size: var(--gk-text-base);
  line-height: 1.75;
}

.gk-brand-story__right p {
  margin: 0;
}

.gk-brand-story__right p strong {
  color: var(--gk-navy);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
  .gk-brand-story-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--gk-space-8);
  }

  .gk-brand-story__left {
    position: static;
  }
}

@media (max-width: 768px) {
  .gk-brand-story-grid {
    grid-template-columns: 1fr;
    gap: var(--gk-space-6);
  }

  .gk-brand-story__title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    text-wrap: balance;
  }

  .gk-brand-story__cta-wrapper .gk-btn {
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }
}

/* ──────────────────────────────────────────────────────────────
   17. SẢN PHẨM TIÊU BIỂU — 3 cột, một ảnh nền, overlay tối
   ────────────────────────────────────────────────────────────── */

.gk-fp-triple {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(300px, 52vw, 560px);
  overflow: hidden;
}

/* Ba lớp ảnh full-bleed — mặc định ẩn; chỉ hiện khi hover/focus cột hoặc mobile data-mobile-bg (idle: dùng .gk-fp-triple__row-bg) */
.gk-fp-triple__bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--gk-ease-out);
}

.gk-fp-triple__bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.65s var(--gk-ease-out);
  pointer-events: none;
}

/* Mặc định: ảnh cột 1 phủ full (cả 3 ô) */
.gk-fp-triple__bg-slide--1 {
  opacity: 1;
  z-index: 1;
}

/* Hover / focus cột 2 → ảnh 2 full (.gk-fp-triple__row bọc từng ô — mobile dùng nút + data-mobile-bg) */
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(2) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--1,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(2) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--1 {
  opacity: 0;
  z-index: 0;
}

.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(2) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--2,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(2) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--2 {
  opacity: 1;
  z-index: 2;
}

/* Hover / focus cột 3 → ảnh 3 full */
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--1,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--1,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--2,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--2 {
  opacity: 0;
  z-index: 0;
}

.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--3,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(3) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--3 {
  opacity: 1;
  z-index: 2;
}

/* Hover lại cột 1: chỉ slide 1 (slide 2/3 đã opacity 0 mặc định) */
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--2,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--2,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--3,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--3 {
  opacity: 0;
  z-index: 0;
}

.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:hover) .gk-fp-triple__bg-slide--1,
.gk-fp-triple:has(.gk-fp-triple__grid > .gk-fp-triple__row:nth-of-type(1) .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-slide--1 {
  opacity: 1;
  z-index: 2;
}

.gk-fp-triple__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--gk-ease-out);
}

/* Stack hiện → overlay phủ ảnh full (đồng bộ với opacity stack) */
.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__overlay,
.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__overlay,
#san-pham-tieu-bieu[data-mobile-bg] .gk-fp-triple__overlay {
  opacity: 1;
}

/* Idle: mỗi ô một ảnh — tương tác: ẩn row-bg, hiện stack */
.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__bg-stack,
.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-stack,
#san-pham-tieu-bieu[data-mobile-bg] .gk-fp-triple__bg-stack {
  opacity: 1;
}

.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__row-bg,
.gk-fp-triple:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__row-bg,
#san-pham-tieu-bieu[data-mobile-bg] .gk-fp-triple__row-bg {
  opacity: 0;
}

.gk-fp-triple__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: clamp(300px, 52vw, 560px);
}

.gk-fp-triple__row {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  height: 100%;
}

/* Nền riêng từng ô — idle; ẩn khi stack full bật */
.gk-fp-triple__row-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: opacity 0.45s var(--gk-ease-out);
}

.gk-fp-triple__row-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Nút xem nền — chỉ hiện mobile (touch); desktop ẩn, vẫn dùng hover */
.gk-fp-triple__peek {
  display: none;
  position: relative;
  z-index: 4;
  flex: 0 0 3.25rem;
  min-width: 3.25rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  font: inherit;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-fp-triple__peek:hover {
  background: rgba(255, 255, 255, 0.18);
}

.gk-fp-triple__peek:focus-visible {
  outline: 2px solid var(--gk-white);
  outline-offset: -4px;
  z-index: 4;
}

.gk-fp-triple__peek-icon {
  display: flex;
  transition: transform var(--gk-duration-base) var(--gk-ease-spring);
}

.gk-fp-triple__peek[aria-expanded="true"] .gk-fp-triple__peek-icon {
  transform: rotate(45deg);
}

.gk-fp-triple__col {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 3.75rem) clamp(1.25rem, 3.5vw, 2.75rem);
  text-decoration: none;
  color: var(--gk-white);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  transition: color var(--gk-duration-base) var(--gk-ease-out);
  min-height: 0;
}

.gk-fp-triple__row:last-child .gk-fp-triple__col {
  border-right: none;
}

/* ==========================================================================
   FEATURED WORKS GRID LAYOUT (MOCKUP ADJUSTED)
   ========================================================================== */

.gk-home-showcase-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.gk-home-works-container {
  max-width: 1360px !important;
  /* Adjusted max-width to fit 2-card layout height constraint inside viewport */
  width: 100% !important;
}

.gk-home-works-grid-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.gk-home-works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns for Dự án & Dân dụng */
  gap: 0;
  margin-top: 0;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
}

.gk-home-works-card {
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  aspect-ratio: unset !important;
  height: 100%;
  background: var(--gk-navy-deep);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  text-decoration: none;
  transition: transform 0.8s var(--gk-ease-spring), box-shadow 0.8s var(--gk-ease-spring);
  box-shadow: var(--gk-shadow-sm);
}

@media (min-width: 992px) {
  .gk-home-works-card {
    height: 100%;
    aspect-ratio: unset !important;
  }
}

.gk-home-works-card:hover {
  box-shadow: var(--gk-shadow-xl);
}

.gk-home-works-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.gk-home-works-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--gk-ease-spring);
}

.gk-home-works-card__media::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewY(-25deg);
  transition: transform 0.8s var(--gk-ease-spring);
  z-index: 3;
  pointer-events: none;
}

.gk-home-works-card:hover .gk-home-works-card__media::after {
  transform: translateY(-250%) skewY(-25deg);
}

.gk-home-works-card__img-normal {
  z-index: 1;
}

.gk-home-works-card__img-hover {
  z-index: 2;
  transform: translateY(100%);
  bottom: -2px;
  height: calc(100% + 4px) !important;
}

.gk-home-works-card:hover .gk-home-works-card__img-normal {
  transform: scale(1.05);
}

.gk-home-works-card:hover .gk-home-works-card__img-hover {
  transform: translateY(0);
}

.gk-home-works-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 47, 69, 0.1) 0%, rgba(12, 47, 69, 0.5) 50%, rgba(12, 47, 69, 0.8) 100%);
  z-index: 2;
  opacity: 0.75;
  transition: opacity 0.8s var(--gk-ease-spring);
}

.gk-home-works-card:hover .gk-home-works-card__overlay {
  opacity: 0.9;
}

.gk-home-works-card__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(12px);
  transition: transform 0.8s var(--gk-ease-spring);
}

.gk-home-works-card:hover .gk-home-works-card__content {
  transform: translateY(0);
}

.gk-home-works-card__title {
  color: var(--gk-cream);
  font-family: var(--gk-font-heading);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  transform: translateY(8px);
  opacity: 0.9;
  transition: transform 0.8s var(--gk-ease-spring), opacity 0.8s var(--gk-ease-spring);
}

.gk-home-works-card:hover .gk-home-works-card__title {
  transform: translateY(0);
  opacity: 1;
}

.gk-home-works-card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.gk-home-works-card__tag {
  color: var(--gk-cream);
  font-family: var(--gk-font-heading);
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--gk-ease-spring), transform 0.8s var(--gk-ease-spring);
}

.gk-home-works-card:hover .gk-home-works-card__tag {
  opacity: 1;
  transform: translateY(0);
}

.gk-home-works-card__arrow-btn {
  width: clamp(2.75rem, 4.5vw, 3.5rem);
  height: clamp(2.75rem, 4.5vw, 3.5rem);
  border-radius: var(--gk-radius-sm);
  background: linear-gradient(135deg, #f08a2e 0%, #d45a18 100%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 4px 15px rgba(212, 90, 24, 0.3);
  opacity: 0.85;
  transition: transform 0.8s var(--gk-ease-spring), background 0.8s var(--gk-ease-spring), opacity 0.8s var(--gk-ease-spring);
}

.gk-home-works-card:hover .gk-home-works-card__arrow-btn {
  transform: rotate(-45deg) scale(1.05);
  opacity: 1;
}

.gk-home-works-card__arrow-icon {
  line-height: 1;
}

body.gk-home-scroll-snap .gk-home-works-stack .gk-home-works-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: calc(100dvh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
  min-height: calc(100svh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
}

@media (max-height: 900px),
(max-width: 1440px) and (max-height: 960px) {
  body.gk-home-scroll-snap .gk-home-works-stack .gk-home-works-content {
    min-height: calc(100dvh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
    min-height: calc(100svh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
  }
}

@media (max-width: 991px) {
  .gk-home-showcase-head__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  body.gk-home-scroll-snap .gk-home-works-stack.gk-snap-section {
    min-height: auto;
    padding-top: var(--gk-space-8);
    padding-bottom: var(--gk-space-8);
  }

  body.gk-home-scroll-snap .gk-home-works-stack .gk-home-works-content {
    min-height: auto;
  }

  .gk-home-works-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .gk-home-works-card {
    aspect-ratio: 16 / 10;
    height: auto;
    border-radius: 0 !important;
  }

  .gk-home-works-card__media {
    height: 100% !important;
  }

  .gk-home-works-card__overlay {
    opacity: 1 !important;
  }

  .gk-home-works-card__tag {
    opacity: 1;
    transform: translateY(0);
  }
}

.gk-fp-triple__col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  transition: background var(--gk-duration-base) var(--gk-ease-out);
  pointer-events: none;
}

.gk-fp-triple__col:hover::after {
  background: rgba(255, 255, 255, 0.06);
}

/* Desktop: tắt hover full-bleed — giữ ảnh riêng từng cột (mobile vẫn dùng nút peek) */
@media (hover: hover) and (min-width: 769px) {

  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__overlay,
  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__overlay,
  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__bg-stack,
  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__bg-stack {
    opacity: 0;
  }

  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:hover) .gk-fp-triple__row-bg,
  .gk-fp-triple--no-hover:has(.gk-fp-triple__grid .gk-fp-triple__col:focus-within) .gk-fp-triple__row-bg {
    opacity: 1;
  }

  .gk-fp-triple--no-hover .gk-fp-triple__col:hover::after,
  .gk-fp-triple--no-hover .gk-fp-triple__col:focus-within::after {
    background: transparent;
  }
}

.gk-fp-triple__col:focus-visible {
  outline: 2px solid var(--gk-white);
  outline-offset: -6px;
  z-index: 3;
}

.gk-fp-triple__num {
  position: relative;
  z-index: 1;
  font-family: var(--gk-font-heading);
  font-size: var(--gk-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 0.45rem;
}

.gk-fp-triple__title {
  position: relative;
  z-index: 1;
  font-family: var(--gk-font-heading);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {

  .gk-fp-triple__bg-slide,
  .gk-fp-triple__bg-stack,
  .gk-fp-triple__overlay,
  .gk-fp-triple__row-bg {
    transition: none;
  }
}

@media (max-width: 768px) {

  /* Một màn hình, ba hàng bằng nhau (1/3 viewport mỗi hàng) */
  .gk-fp-triple {
    min-height: 100dvh;
    min-height: 100svh;
    height: 100dvh;
    height: 100svh;
  }

  /* Có dải tiêu đề phía trên — tránh chồng quá 100vh */
  .gk-home-triple-stack .gk-fp-triple {
    min-height: calc(100dvh - clamp(4.75rem, 20vw, 8rem));
    min-height: calc(100svh - clamp(4.75rem, 20vw, 8rem));
    height: calc(100dvh - clamp(4.75rem, 20vw, 8rem));
    height: calc(100svh - clamp(4.75rem, 20vw, 8rem));
  }

  .gk-fp-triple__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    min-height: 0;
    width: 100%;
  }

  .gk-fp-triple__row {
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .gk-fp-triple__row:last-child {
    border-bottom: none;
  }

  .gk-fp-triple__col {
    min-width: 0;
    min-height: 0;
    flex: 1 1 0%;
    border-right: none;
    padding: clamp(0.75rem, 3vw, 1.25rem) clamp(0.75rem, 3vw, 1.1rem);
    overflow: hidden;
  }

  .gk-fp-triple__peek {
    display: flex;
    align-self: stretch;
    flex: 0 0 3.25rem;
    min-width: 3.25rem;
  }

  .gk-fp-triple__row.is-mobile-bg-active .gk-fp-triple__col {
    background: rgba(255, 255, 255, 0.05);
  }

  .gk-fp-triple__title {
    font-size: clamp(0.85rem, 3.5vw, 1.15rem);
    white-space: nowrap;
  }

  /* Ưu tiên hơn :has(hover) — chọn nền bằng nút mở rộng */
  #san-pham-tieu-bieu[data-mobile-bg="1"] .gk-fp-triple__bg-slide--1 {
    opacity: 1;
    z-index: 2;
  }

  #san-pham-tieu-bieu[data-mobile-bg="1"] .gk-fp-triple__bg-slide--2,
  #san-pham-tieu-bieu[data-mobile-bg="1"] .gk-fp-triple__bg-slide--3 {
    opacity: 0;
    z-index: 0;
  }

  #san-pham-tieu-bieu[data-mobile-bg="2"] .gk-fp-triple__bg-slide--1 {
    opacity: 0;
    z-index: 0;
  }

  #san-pham-tieu-bieu[data-mobile-bg="2"] .gk-fp-triple__bg-slide--2 {
    opacity: 1;
    z-index: 2;
  }

  #san-pham-tieu-bieu[data-mobile-bg="2"] .gk-fp-triple__bg-slide--3 {
    opacity: 0;
    z-index: 0;
  }

  #san-pham-tieu-bieu[data-mobile-bg="3"] .gk-fp-triple__bg-slide--1,
  #san-pham-tieu-bieu[data-mobile-bg="3"] .gk-fp-triple__bg-slide--2 {
    opacity: 0;
    z-index: 0;
  }

  #san-pham-tieu-bieu[data-mobile-bg="3"] .gk-fp-triple__bg-slide--3 {
    opacity: 1;
    z-index: 2;
  }
}

/* ──────────────────────────────────────────────────────────────
   18. TRANG CHỦ — Scroll snap full viewport (chỉ khi body.gk-home-scroll-snap)
   ────────────────────────────────────────────────────────────── */

html:has(body.gk-home-scroll-snap) {
  scroll-snap-type: y proximity;
  /* Căn snap theo mép trên viewport (0); header fixed chồng lên — không dùng scroll-padding dưới header */
  scroll-padding-top: 0;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.gk-home-scroll-snap) {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

body.gk-home-scroll-snap .gk-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-sizing: border-box;
  min-height: 100dvh;
  min-height: 100svh;
}

body.gk-home-scroll-snap .gk-section.gk-snap-section {
  min-height: auto;
  padding-bottom: var(--gk-section-py);
}

/* Hero đã full viewport — giữ snap, tránh flex can thiệp layout slider */
body.gk-home-scroll-snap #gk-hero-slider.gk-snap-section {
  min-height: 100dvh;
  min-height: 100svh;
}

/* Căn giữa theo chiều dọc khi nội dung thấp hơn một màn hình */
body.gk-home-scroll-snap .gk-snap-section:not(#gk-hero-slider):not(.gk-fp-triple):not(.gk-home-triple-stack):not(.gk-home-works-stack):not(#gk-works-show) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.gk-home-scroll-snap .gk-snap-section:not(#gk-hero-slider):not(.gk-fp-triple):not(.gk-home-triple-stack):not(.gk-home-works-stack):not(#gk-works-show)>.gk-container {
  width: 100%;
}

body.gk-home-scroll-snap .gk-home-works-stack.gk-snap-section {
  height: 100dvh;
  height: 100svh;
  min-height: 100dvh;
  min-height: 100svh;
  padding-top: 0;
  overflow: hidden;
}

body.gk-home-scroll-snap .gk-home-triple-stack.gk-snap-section {
  height: 100dvh;
  height: 100svh;
  min-height: 100dvh;
  min-height: 100svh;
  padding-top: 0;
  overflow: hidden;
}

body.gk-home-scroll-snap .gk-home-triple-stack .gk-home-showcase-head,
body.gk-home-scroll-snap .gk-home-works-stack .gk-home-showcase-head {
  padding-top: calc(5.5rem + clamp(1.25rem, 3.2vw, 2rem));
}

/* Khối 3 cột và khối slider: phần ảnh co giãn trong snap (đã trừ dải tiêu đề và header) */
body.gk-home-scroll-snap .gk-home-triple-stack .gk-fp-triple__grid {
  min-height: calc(100dvh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
  min-height: calc(100svh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
}

body.gk-home-scroll-snap .gk-home-works-stack .gk-works-show {
  min-height: calc(100dvh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
  min-height: calc(100svh - 5.5rem - clamp(5.25rem, 16vw, 9rem));
}

@media (max-height: 900px),
(max-width: 1440px) and (max-height: 960px) {
  body.gk-home-scroll-snap .gk-home-works-stack .gk-works-show {
    min-height: calc(100dvh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
    min-height: calc(100svh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
  }

  body.gk-home-scroll-snap .gk-home-triple-stack .gk-fp-triple__grid {
    min-height: calc(100dvh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
    min-height: calc(100svh - 5.5rem - clamp(3.5rem, 10vh, 5.5rem));
  }

  body.gk-home-scroll-snap .gk-home-triple-stack .gk-home-showcase-head,
  body.gk-home-scroll-snap .gk-home-works-stack .gk-home-showcase-head {
    padding-top: calc(5.5rem + clamp(0.65rem, 1.8vh, 1rem));
  }
}

/* ──────────────────────────────────────────────────────────────
   19. FAB DOCK — mép phải: rail nút vuông + handle vuông (không pill/tròn)
   ────────────────────────────────────────────────────────────── */

.gk-fab-dock {
  position: fixed;
  right: 0;
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  padding-right: env(safe-area-inset-right, 0px);
  z-index: calc(var(--gk-z-sticky) - 1);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}

.gk-fab-dock__panel,
.gk-fab-dock__handle {
  pointer-events: auto;
}

.gk-fab-dock__panel {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 1px;
  width: 2.875rem;
  max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 2px);
  padding: 0;
  margin: 0;
  background: rgba(26, 85, 128, 0.22);
  border: 1px solid rgba(26, 85, 128, 0.22);
  border-right: none;
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform var(--gk-duration-base) var(--gk-ease-out),
    opacity var(--gk-duration-base) var(--gk-ease-out);
}

.gk-fab-dock--collapsed .gk-fab-dock__panel {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.gk-fab-dock__handle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.875rem;
  height: 2.875rem;
  min-width: 2.875rem;
  min-height: 2.875rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(26, 85, 128, 0.22);
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--gk-navy);
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: none;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-fab-dock__handle:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(26, 85, 128, 0.32);
}

.gk-fab-dock__handle:focus-visible {
  outline: 2px solid var(--gk-navy-mid);
  outline-offset: 2px;
}

.gk-fab-dock__handle-icon {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--gk-duration-base) var(--gk-ease-spring);
}

.gk-fab-dock:not(.gk-fab-dock--collapsed) .gk-fab-dock__handle-icon {
  transform: rotate(180deg);
}

/* Chỉ hiển thị icon; chữ dùng cho SR (kèm aria-label trên nút) */
.gk-fab-dock__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gk-fab-dock__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 2.875rem;
  min-height: 2.875rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  font-family: var(--gk-font-body);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  color: var(--gk-navy);
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: none;
  transition:
    background var(--gk-duration-fast) var(--gk-ease-out),
    border-color var(--gk-duration-fast) var(--gk-ease-out),
    color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-fab-dock__btn:hover {
  background: rgba(255, 255, 255, 1);
}

.gk-fab-dock__btn:focus-visible {
  outline: 2px solid var(--gk-navy-mid);
  outline-offset: -2px;
}

.gk-fab-dock__btn i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.gk-fab-dock__btn--phone {
  color: var(--gk-white);
  background: var(--gk-navy);
}

.gk-fab-dock__btn--phone:hover {
  color: var(--gk-white);
  background: var(--gk-navy-hover);
}

.gk-fab-dock__btn--mail {
  color: var(--gk-navy);
}

.gk-fab-dock__btn--top {
  color: var(--gk-text-main);
  background: rgba(255, 255, 255, 0.98);
}

.gk-fab-dock__btn--top:hover {
  color: var(--gk-navy);
  background: var(--gk-white);
}

.gk-fab-dock__btn[hidden] {
  display: none !important;
}

/* Mobile: Chỉ hiện nút Lên đầu trang (Scroll to Top) dưới dạng nút tròn floating */
@media (max-width: 768px) {
  .gk-fab-dock {
    display: block !important;
    position: fixed !important;
    right: 1.25rem !important;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: var(--gk-z-sticky) !important;
    pointer-events: none !important;
  }

  .gk-fab-dock__handle {
    display: none !important;
  }

  .gk-fab-dock__panel {
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    pointer-events: none !important;
  }

  .gk-fab-dock__panel>*:not(#gk-fab-scroll-top) {
    display: none !important;
  }

  #gk-fab-scroll-top.gk-fab-dock__btn {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    border-radius: 50% !important;
    background: var(--gk-navy) !important;
    color: var(--gk-cream) !important;
    box-shadow: 0 8px 24px rgba(26, 85, 128, 0.32) !important;
    transition:
      transform var(--gk-duration-base) var(--gk-ease-spring),
      background var(--gk-duration-fast) var(--gk-ease-out),
      box-shadow var(--gk-duration-fast) var(--gk-ease-out) !important;
  }

  #gk-fab-scroll-top.gk-fab-dock__btn:active {
    transform: scale(0.92) !important;
  }

  #gk-fab-scroll-top .gk-fab-dock__label {
    display: none !important;
  }

  #gk-fab-scroll-top i {
    font-size: 1.45rem !important;
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gk-fab-dock__panel {
    transition: none;
  }

  .gk-fab-dock__handle,
  .gk-fab-dock__handle-icon {
    transition: none;
  }

  .gk-fab-dock__handle:hover {
    transform: none;
  }

  .gk-fab-dock__btn {
    transition: none;
  }

  .gk-fab-dock__btn:hover {
    transform: none;
  }
}

@media print {
  .gk-fab-dock {
    display: none !important;
  }
}

/* ==========================================================================
   HEADER — Full-width fixed bar, 3-part flex layout
   Logo (left) | Navigation (center, grows) | Actions (right)
   ========================================================================== */

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--gk-z-sticky) !important;
  pointer-events: all !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--gk-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(12, 47, 69, 0.15) !important;
}

.site-header .gk-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* ─── Nav Pill wrapper ─── */
.site-header .gk-nav-pill,
.site-header:not(.is-scrolled) .gk-nav-pill,
.site-header.is-scrolled .gk-nav-pill {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  /* horizontal padding scales with viewport, min 12px, max 40px */
  padding: 0.7rem clamp(0.75rem, 2.5vw, 2.5rem) !important;
  /* gap between logo / nav / actions */
  gap: clamp(0.5rem, 1.5vw, 1.5rem) !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
}

/* ─── Logo: fixed width, never shrinks ─── */
.site-header .site-branding {
  flex: 0 0 auto !important;
}

.site-header .site-branding img,
.site-header .site-branding .custom-logo {
  /* logo height scales with viewport */
  height: clamp(28px, 2.5vw, 38px) !important;
  width: auto !important;
  display: block !important;
}

/* ─── Primary nav: fills the middle, items centered ─── */
.site-header .main-navigation {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
}

.site-header .main-navigation ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(0rem, 0.5vw, 0.75rem) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nav link text + padding scales with viewport */
.site-header .main-navigation>ul>li>a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-size: clamp(0.72rem, 1.1vw, 1.1rem) !important;
  padding: 0.5rem clamp(0.4rem, 1.1vw, 1.4rem) !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  color: var(--gk-cream) !important;
  border-radius: var(--gk-radius-pill, 999px) !important;
  transition: background 0.2s, color 0.2s !important;
}

.site-header .main-navigation>ul>li>a:hover,
.site-header .main-navigation>ul>li.current-menu-item>a {
  color: var(--gk-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Keep global logo-text color */
.logo-text {
  color: var(--gk-cream) !important;
}

/* ─── Action group: lang switcher + CTA, never shrinks ─── */
.site-header .gk-nav-cta.desktop-only {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 1vw, 1rem) !important;
}

/* ─── Mobile/Tablet ≤ 900px → show hamburger ─── */
@media (max-width: 900px) {
  .site-header .main-navigation {
    display: none !important;
  }

  .gk-nav-cta-mobile {
    display: flex !important;
    margin-left: auto;
  }

  .gk-hamburger {
    display: flex !important;
    margin-left: 0;
  }

  .gk-nav-cta.desktop-only {
    display: none !important;
  }

  .site-header .gk-nav-pill,
  .site-header:not(.is-scrolled) .gk-nav-pill,
  .site-header.is-scrolled .gk-nav-pill {
    gap: 0.75rem !important;
    padding: 0.6rem 4% !important;
  }
}

/* ============================================================
   PREMIUM LANGUAGE SWITCHER STYLES (EN / VI)
   ============================================================ */
.gk-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--gk-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--gk-radius-pill);
  padding: 0.25rem 0.5rem;
  box-shadow: var(--gk-shadow-xs);
  transition: background var(--gk-duration-fast) var(--gk-ease-out), border-color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-lang-switcher:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.gk-lang-switcher .gk-lang-btn {
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color var(--gk-duration-fast) var(--gk-ease-out), transform var(--gk-duration-fast) var(--gk-ease-spring);
  position: relative;
  line-height: 1.2;
}

.gk-lang-switcher .gk-lang-btn:hover {
  color: var(--gk-white);
}

.gk-lang-switcher .gk-lang-btn.is-active {
  color: var(--gk-white);
  font-weight: 700;
}

.gk-lang-switcher .gk-lang-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--gk-cream);
}

.gk-lang-switcher .gk-lang-divider {
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  font-size: 0.75rem;
}

/* Mobile Language Switcher inside menu overlay */
.gk-mobile-lang-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity var(--gk-duration-slow) var(--gk-ease-out) 480ms;
}

.gk-mobile-menu.is-open .gk-mobile-lang-switcher {
  opacity: 1;
}

.gk-mobile-lang-switcher .gk-lang-btn {
  color: rgba(253, 251, 247, 0.5);
  background: none;
  border: none;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  font-size: var(--gk-text-xs);
  font-weight: 600;
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
  position: relative;
}

.gk-mobile-lang-switcher .gk-lang-btn:hover {
  color: var(--gk-cream);
}

.gk-mobile-lang-switcher .gk-lang-btn.is-active {
  color: var(--gk-cream);
  font-weight: 700;
}

.gk-mobile-lang-switcher .gk-lang-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--gk-cream);
}

.gk-mobile-lang-switcher .gk-lang-divider {
  color: rgba(253, 251, 247, 0.2);
  pointer-events: none;
}

/* ── Hide Google Translate UI Elements ── */
body {
  top: 0px !important;
}

.skiptranslate {
  display: none !important;
}

iframe.goog-te-banner-frame {
  display: none !important;
}

.goog-te-gadget {
  display: none !important;
}

.goog-te-balloon-frame {
  display: none !important;
}

#goog-gt-tt {
  display: none !important;
  visibility: hidden !important;
}

.goog-tooltip {
  display: none !important;
}

.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* ──────────────────────────────────────────────────────────────
   8. CUSTOM PROJECTS / CONG TRINH PAGE STYLING
   ────────────────────────────────────────────────────────────── */
.gk-cong-trinh-page {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background-color: var(--gk-cream);
}

/* Tabs/Filters on root cong-trinh */
.gk-cong-trinh-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}

.gk-filter-tab {
  padding: 0.65rem 1.35rem;
  font-family: var(--gk-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gk-navy);
  background: transparent;
  border: 1px solid rgba(26, 85, 128, 0.15);
  border-radius: 999px;
  transition: all var(--gk-duration-base) var(--gk-ease-out);
}

.gk-filter-tab:hover {
  background: rgba(26, 85, 128, 0.05);
  border-color: var(--gk-navy);
}

.gk-filter-tab.is-active {
  color: var(--gk-cream);
  background: var(--gk-navy);
  border-color: var(--gk-navy);
  box-shadow: 0 4px 12px rgba(12, 47, 69, 0.15);
}

/* Section Title */
.gk-cong-trinh-section-title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--gk-navy-deep);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 2px solid rgba(26, 85, 128, 0.1);
  padding-bottom: 0.5rem;
}

/* Grid layout for categories */
.gk-cong-trinh-cat-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.gk-cong-trinh-cat-card-item {
  margin: 0;
  padding: 0;
}

/* Subcategory Card style */
.gk-cong-trinh-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--gk-surface-card);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-xl);
  overflow: hidden;
  box-shadow: var(--gk-shadow-sm), var(--gk-shadow-inset-highlight);
  transition:
    transform var(--gk-duration-slow) var(--gk-ease-spring),
    border-color var(--gk-duration-base) var(--gk-ease-out),
    box-shadow var(--gk-duration-slow) var(--gk-ease-out);
}

.gk-cong-trinh-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 85, 128, 0.2);
  box-shadow: var(--gk-shadow-lg);
}

.gk-cong-trinh-cat-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gk-navy-deep);
}

.gk-cong-trinh-cat-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--gk-navy);
  mix-blend-mode: color;
  opacity: 0.08;
  pointer-events: none;
  transition: opacity var(--gk-duration-base) var(--gk-ease-out);
  z-index: 1;
}

.gk-cong-trinh-cat-card:hover .gk-cong-trinh-cat-card__thumb::after {
  opacity: 0.02;
}

.gk-cong-trinh-cat-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.9) sepia(0.06);
  transition:
    filter var(--gk-duration-base) var(--gk-ease-out),
    transform var(--gk-duration-slow) var(--gk-ease-spring);
}

.gk-cong-trinh-cat-card:hover .gk-cong-trinh-cat-card__thumb img {
  filter: contrast(1.06) saturate(1.02) sepia(0);
  transform: scale(1.05);
}

.gk-cong-trinh-cat-card__count {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  font-family: var(--gk-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gk-cream);
  background: rgba(12, 47, 69, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gk-cong-trinh-cat-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gk-cong-trinh-cat-card__kicker {
  font-family: var(--gk-font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gk-steel);
  margin-bottom: 0.35rem;
}

.gk-cong-trinh-cat-card__title {
  font-family: var(--gk-font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--gk-navy);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  transition: color var(--gk-duration-fast) var(--gk-ease-out);
}

.gk-cong-trinh-cat-card:hover .gk-cong-trinh-cat-card__title {
  color: var(--gk-navy-hover);
}

.gk-cong-trinh-cat-card__lead {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gk-text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.gk-cong-trinh-cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--gk-font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gk-navy);
  margin-top: auto;
}

.gk-cong-trinh-cat-card__cta-icon {
  transition: transform 0.2s var(--gk-ease-out);
}

.gk-cong-trinh-cat-card:hover .gk-cong-trinh-cat-card__cta-icon {
  transform: translateX(4px);
}

/* Detail view pagination and lists */
.gk-cong-trinh-pagination {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.gk-cong-trinh-pagination .navigation {
  display: flex;
  justify-content: center;
}

/* Detail view sub nav / back button and siblings list */
.gk-cong-trinh-sub-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(26, 85, 128, 0.08);
}

.gk-cong-trinh-sibling-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gk-sibling-link {
  padding: 0.45rem 0.95rem;
  font-family: var(--gk-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gk-text-muted);
  border: 1px solid transparent;
  background: rgba(26, 85, 128, 0.04);
  border-radius: 999px;
  transition: all var(--gk-duration-base) var(--gk-ease-out);
}

.gk-sibling-link:hover {
  background: rgba(26, 85, 128, 0.08);
  color: var(--gk-navy);
}

.gk-sibling-link.is-active {
  background: var(--gk-navy-deep);
  color: var(--gk-cream);
  box-shadow: 0 2px 6px rgba(12, 47, 69, 0.12);
}

.gk-cong-trinh-empty {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: rgba(26, 85, 128, 0.02);
  border-radius: 8px;
  border: 1px dashed rgba(26, 85, 128, 0.15);
  color: var(--gk-text-muted);
}

@media (max-width: 768px) {
  .gk-cong-trinh-sub-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .gk-cong-trinh-sibling-links {
    justify-content: flex-start;
  }
}

/* ──────────────────────────────────────────────────────────────
   13. PRODUCT DETAIL & RELATED SOLUTIONS STYLES
   ────────────────────────────────────────────────────────────── */
.gk-product-detail {
  background-color: var(--gk-cream, #FDFBF7);
  padding: clamp(4rem, 8vw, 7rem) 0 0 0;
  color: var(--gk-text-main, #111);
}



/* Split: description and media card */
.gk-pd-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: stretch;
  margin-bottom: clamp(5rem, 10vw, 8rem);
}

@media (min-width: 900px) {
  .gk-pd-intro {
    grid-template-columns: 7fr 5fr;
  }
}

.gk-pd-content__desc {
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  line-height: 1.85;
  color: var(--gk-text-muted, #5A6E84);
  margin-bottom: 2.5rem;
  text-wrap: pretty;
}

.gk-pd-content__desc p {
  margin-bottom: 1.5rem;
}

.gk-pd-content__desc p:last-child {
  margin-bottom: 0;
}

.gk-pd-content__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--gk-navy, #1a5580);
  margin-bottom: 1.5rem;
}

.gk-pd-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gk-pd-benefits li {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--gk-text-main, #111);
  padding-left: 2rem;
  position: relative;
}

.gk-pd-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235289a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Image Card */
.gk-pd-media {
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  min-height: 300px;
  box-shadow: var(--gk-shadow-md);
}

@media (max-width: 899px) {
  .gk-pd-media {
    aspect-ratio: 4/3;
    height: auto;
  }
}

.gk-pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--gk-duration-slow) var(--gk-ease-out);
}

.gk-pd-media:hover img {
  transform: scale(1.03);
}

/* Specifications Table */
.gk-pd-specs {
  background-color: var(--gk-cream-dark, #F3F0EA);
  border-radius: 6px;
  padding: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(5rem, 10vw, 8rem);
}

.gk-pd-specs__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--gk-navy, #1a5580);
  margin-bottom: 2rem;
  text-align: center;
}

.gk-pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.gk-pd-table tr {
  border-bottom: 1px solid rgba(26, 85, 128, 0.12);
}

.gk-pd-table tr:last-child {
  border-bottom: none;
}

.gk-pd-table th,
.gk-pd-table td {
  padding: 1.25rem 1rem;
  text-align: left;
  vertical-align: top;
}

.gk-pd-table th {
  font-weight: 700;
  color: var(--gk-navy, #1a5580);
  width: clamp(150px, 30%, 300px);
}

.gk-pd-table td {
  color: var(--gk-text-muted, #5A6E84);
}

@media (max-width: 600px) {
  .gk-pd-table tr {
    display: block;
    padding: 1rem 0;
  }

  .gk-pd-table th,
  .gk-pd-table td {
    display: block;
    width: 100%;
    padding: 0.25rem 0;
  }

  .gk-pd-table th {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* CTA Banner */
.gk-pd-cta {
  background-color: var(--gk-navy-deep, #0c2f45);
  color: #fff;
  border-radius: 6px;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  margin-bottom: clamp(5rem, 10vw, 8rem);
}

.gk-pd-cta__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.gk-pd-cta__desc {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(223, 230, 237, 0.8);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

/* Related Products Grid */
.gk-pd-related__title {
  font-family: var(--gk-font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--gk-navy, #1a5580);
  margin-bottom: 3rem;
  text-align: center;
}

.gk-pd-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 600px) {
  .gk-pd-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .gk-pd-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gk-pd-related__card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--gk-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform var(--gk-duration-medium) var(--gk-ease-out), box-shadow var(--gk-duration-medium) var(--gk-ease-out);
}

.gk-pd-related__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gk-shadow-md);
}

.gk-pd-related__thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}

.gk-pd-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gk-pd-related__info {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gk-pd-related__name {
  font-family: var(--gk-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gk-navy, #1a5580);
  margin-bottom: 0.75rem;
}

.gk-pd-related__text {
  font-size: 0.92rem;
  color: var(--gk-text-muted, #5A6E84);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.gk-pd-related__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gk-steel, #5289a8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.gk-pd-related__link:hover {
  color: var(--gk-navy, #1a5580);
}

/* ── Product & Solution Detail Pages Layout (Full-width alignment) ── */
.gk-gpnt-hero-wrap .gk-page-hero,
.gk-product-hero-wrap .gk-page-hero {
  min-height: clamp(16rem, 32vh, 24rem);
}

.gk-gpnt-hero-wrap .gk-page-hero__bg img,
.gk-product-hero-wrap .gk-page-hero__bg img {
  opacity: 0.5;
  object-position: center 40%;
}

.gk-gpnt-hero-wrap .gk-page-hero .gk-container,
.gk-product-hero-wrap .gk-page-hero .gk-container {
  max-width: 100% !important;
  padding-inline: clamp(2rem, 5vw, 6rem) !important;
}

@media (min-width: 1600px) {

  .gk-gpnt-hero-wrap .gk-page-hero .gk-container,
  .gk-product-hero-wrap .gk-page-hero .gk-container {
    padding-inline: 8rem !important;
  }
}

@media (max-width: 768px) {

  .gk-gpnt-hero-wrap .gk-page-hero .gk-container,
  .gk-product-hero-wrap .gk-page-hero .gk-container {
    padding-inline: 1.25rem !important;
  }
}

/* Page body wrapping container */
.gk-gpnt-wrap,
.gk-product-detail .gk-container {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

@media (min-width: 1600px) {

  .gk-gpnt-wrap,
  .gk-product-detail .gk-container {
    padding-inline: 8rem !important;
  }
}

@media (max-width: 899px) {
  .gk-product-detail .gk-container {
    padding-inline: 1.25rem !important;
  }
}

/* ── Services Page Layout (Full-width alignment & Image Stretch Sync) ── */
.gk-sv1__wrap,
.gk-sv2__wrap,
.gk-sv3__wrap {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

@media (min-width: 1600px) {

  .gk-sv1__wrap,
  .gk-sv2__wrap,
  .gk-sv3__wrap {
    padding-inline: 8rem !important;
  }
}

@media (max-width: 899px) {

  .gk-sv1__wrap,
  .gk-sv2__wrap,
  .gk-sv3__wrap {
    padding-inline: 1.25rem !important;
  }
}

.gk-sv1__hero,
.gk-sv2__hero,
.gk-sv3__hero {
  align-items: stretch !important;
}

.gk-sv1__img,
.gk-sv2__img,
.gk-sv3__img {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 300px !important;
}

@media (max-width: 899px) {

  .gk-sv1__img,
  .gk-sv2__img,
  .gk-sv3__img {
    aspect-ratio: 4/3 !important;
    height: auto !important;
  }
}

.gk-sv1__img img,
.gk-sv2__img img,
.gk-sv3__img img {
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Center and limit content grids on Services page without breaking global wrappers ── */
.gk-sv1__hero,
.gk-sv1__features,
.gk-sv2__hero,
.gk-sv2__grid,
.gk-sv3__hero,
.gk-sv3__blocks {
  max-width: var(--gk-container-max) !important;
  margin-inline: auto !important;
}