:root {
  /* Typography */
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem; /* 16px */
  --fs-body-hero-intro: 1.1875rem; /* 19px */
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.35rem;

  /* ========================================================
     TYPOGRAPHY SCALE SYSTEM (Desktop)
     ======================================================== */
  /* H1: Desktop 52px – Weight 700 – Line-height 1.15 (60px) */
  --fs-h1: 3.25rem;
  --lh-h1: 1.15;
  --fw-h1: 700;

  /* H2: Desktop 40px – Weight 700 – Line-height 1.2 (48px) */
  --fs-h2: 2.5rem;
  --lh-h2: 1.2;
  --fw-h2: 700;

  /* H3: Kích thước cũ (20px / 1.25rem – Weight 700 – Line-height 1.25) */
  --fs-h3: 1.25rem;
  --lh-h3: 1.25;
  --fw-h3: 700;

  /* H4: Desktop 22px – Weight 600 – Line-height 1.3 (29px) */
  --fs-h4: 1.375rem;
  --lh-h4: 1.3;
  --fw-h4: 600;

  /* Body: Desktop 16px – Weight 400 – Line-height 1.6 (26px) */
  --fs-p: 1rem;
  --lh-p: 1.6;
  --fw-p: 400;

  /* Typography Mapping Aliases */
  --fs-hero: var(--fs-h1);
  --lh-hero: var(--lh-h1);
  --fw-hero: var(--fw-h1);
  --ls-hero: -0.02em;

  --fs-h1-default: var(--fs-h1);
  --lh-h1-default: var(--lh-h1);

  --fs-h2-quote: var(--fs-h2);
  --lh-h2-quote: var(--lh-h2);
  --fw-h2-quote: var(--fw-h2);
  --ls-h2-quote: -0.01em;

  --fs-h2-process: var(--fs-h2);
  --lh-h2-process: var(--lh-h2);

  --fs-3xl: var(--fs-h2);
  --fs-2xl: var(--fs-h2);
  --fs-4xl: var(--fs-h2);
  --fs-stat: clamp(1.85rem, 3vw, 2.35rem);
  --fs-gold-xl: clamp(2.1rem, 3.6vw, 2.85rem);

  /* H3 Cards */
  --fs-h3-service: 1.25rem; /* 20px */
  --lh-h3-service: 1.25;
  --fs-h3-product: 1.125rem; /* 18px */
  --lh-h3-product: 1.3;
  --fs-h3-blog: 1.375rem; /* 22px */
  --lh-h3-blog: 1.2;
  --fs-h3-default: 1.75rem; /* 28px */
  --lh-h3-default: 2.1875rem; /* 35px */

  /* Fluid Header & Button Tokens */
  --fs-header-brand: clamp(0.95rem, 1.45vw, 1.2rem);
  --fs-header-nav: clamp(0.8125rem, 1.05vw, 0.9375rem);
  --fs-header-btn-label: clamp(0.65rem, 0.8vw, 0.75rem);
  --fs-header-btn-val: clamp(0.75rem, 1vw, 0.875rem);
  --fs-header-zalo-badge: clamp(0.65rem, 0.8vw, 0.75rem);
  --pad-header-btn-y: clamp(0.35rem, 0.6vw, 0.5rem);
  --pad-header-btn-x: clamp(0.65rem, 1.2vw, 1.125rem);
  --gap-header-inner: clamp(0.5rem, 1.5vw, 1.5rem);
  --gap-header-nav: clamp(0.875rem, 2vw, 2rem);
  --gap-header-actions: clamp(0.4rem, 0.9vw, 0.875rem);
  --gap-header-btn: clamp(0.375rem, 0.65vw, 0.625rem);
  --size-header-btn-icon: clamp(1.55rem, 2.1vw, 2rem);
  --size-header-brand-icon: clamp(1.85rem, 2.5vw, 2.5rem);
  --pad-cta-y: clamp(0.7rem, 1.1vw, 0.875rem);
  --pad-cta-x: clamp(1.25rem, 2.2vw, 2rem);
  --fs-cta-phone: clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-cta-single: clamp(0.95rem, 1.3vw, 1.1875rem);

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

  --lh-none: 1;
  --lh-tight: 1.22;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.68;

  --ls-tight: -0.015em;
  --ls-normal: 0em;
  --ls-wide: 0.03em;
  --ls-wider: 0.05em;

  /* Color Palette */
  --color-white: #ffffff;
  --color-white-glass-18: rgba(255, 255, 255, 0.18);
  --color-white-glass-22: rgba(255, 255, 255, 0.22);
  --color-white-glass-35: rgba(255, 255, 255, 0.35);

  --color-navy-950: #061a33;
  --color-navy-900: #0a2547;
  --color-navy-800: #0f3463;
  --color-blue-900: #063d78;
  --color-blue-800: #0a529e;
  --color-blue-700: #0e64bd;
  --color-blue-600: #1577d6;
  --color-blue-500: #1e88e5;
  --color-blue-400: #4ba3f5;
  --color-blue-300: #8ec5fc;
  --color-blue-200: #cbe4fd;
  --color-blue-100: #e3f1fe;
  --color-blue-50: #f1f8ff;
  --color-ice-bg: #eef6fd;
  --color-ice-alt: #e4f1fc;

  --color-cyan-light: #6ee7f9;
  --color-red-700: #b91313;
  --color-red-600: #d91b1b;
  --color-red-500: #ef2323;
  --color-red-100: #fee2e2;

  --color-gold-500: #fbbf24;
  --color-gold-400: #facc15;
  --color-gold-300: #fde047;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;

  --color-green-600: #16a34a;
  --color-green-500: #22c55e;
  --color-green-100: #dcfce7;

  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;

  /* Gradients */
  --grad-hero-bg: radial-gradient(circle at 80% 25%, #d6ecff 0%, transparent 45%), linear-gradient(180deg, #f4f9ff 0%, #e6f2fe 60%, #f5faff 100%);
  --grad-ice-section: radial-gradient(circle at 15% 20%, #dff0ff 0%, transparent 40%), linear-gradient(180deg, #edf6fe 0%, #f7fbff 50%, #eaf4fe 100%);
  --grad-blue-section: radial-gradient(circle at 50% 0%, #1976d2 0%, transparent 55%), linear-gradient(180deg, #0b5fb5 0%, #084587 55%, #063870 100%);
  --grad-footer-bg: radial-gradient(circle at 50% 0%, #1565c0 0%, transparent 50%), linear-gradient(180deg, #0b5cb0 0%, #074382 65%, #053366 100%);
  --grad-footer-bottom: linear-gradient(90deg, #042852 0%, #06366b 50%, #042852 100%);
  --grad-btn-red: linear-gradient(180deg, #ff3b30 0%, #dc1818 100%);
  --grad-btn-blue: linear-gradient(180deg, #2193f3 0%, #0d68c4 100%);
  --grad-badge-blue: linear-gradient(90deg, #0b58a8 0%, #1676d2 100%);
  --grad-gold-pill: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  --grad-gift-pill: linear-gradient(90deg, #fff6d6 0%, #ffecb3 100%);
  --grad-highlight-box: linear-gradient(90deg, #fff5cc 0%, #fffbeb 100%);
  --grad-trust-bar: linear-gradient(90deg, #dceefe 0%, #eaf5ff 50%, #dceefe 100%);

  /* Shadows */
  --shadow-header: 0 4px 20px rgba(10, 37, 71, 0.07);
  --shadow-card: 0 10px 28px rgba(10, 56, 112, 0.08);
  --shadow-card-hover: 0 16px 36px rgba(10, 56, 112, 0.14);
  --shadow-card-strong: 0 14px 34px rgba(5, 36, 74, 0.22);
  --shadow-btn-red: 0 8px 22px rgba(220, 24, 24, 0.35);
  --shadow-btn-blue: 0 8px 20px rgba(14, 100, 189, 0.22);
  --shadow-btn-outline: 0 6px 18px rgba(14, 100, 189, 0.1);
  --shadow-badge: 0 4px 12px rgba(11, 88, 168, 0.2);
  --shadow-pill: 0 2px 10px rgba(10, 56, 112, 0.08);

  /* Borders */
  --border-thin: 1px solid var(--color-blue-200);
  --border-card: 1.5px solid var(--color-blue-200);
  --border-card-white: 3px solid var(--color-white);
  --border-zalo-btn: 2px solid var(--color-blue-600);
  --border-highlight-left: 4px solid var(--color-gold-500);
  --border-table-row: 1px solid var(--color-slate-200);
  --border-footer-sep: 1px solid rgba(255, 255, 255, 0.2);
  --border-gift-pill: 1.5px solid var(--color-amber-200);

  /* Spacing & Layout */
  --container-max: 1240px;
  --container-px: clamp(1rem, 2.5vw, 2rem);
  --section-py: clamp(3.5rem, 6vw, 5.75rem);
  --section-py-md: clamp(2.75rem, 4.8vw, 4.5rem);
  --section-py-sm: clamp(2.25rem, 3.8vw, 3.5rem);

  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* Grid Templates & Column Widths */
  --grid-hero: 1.08fr 0.92fr;
  --grid-commit-layout: 0.33fr 0.67fr;
  --grid-offers-layout: 0.27fr 0.73fr;
  --grid-branches-layout: 0.28fr 0.72fr;
  --grid-footer: 0.9fr 1.1fr 1fr;
  --grid-1col: 1fr;
  --grid-2col: repeat(2, 1fr);
  --grid-3col: repeat(3, 1fr);
  --grid-4col: repeat(4, 1fr);

  --col-w-criteria: 24%;
  --col-w-freelance: 37%;
  --col-w-brand: 39%;
  --col-w-criteria-mobile: 28%;
  --col-w-freelance-mobile: 36%;
  --col-w-brand-mobile: 36%;
  --size-full: 100%;
  --pos-half: 50%;

  /* Radii */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  /* Component Sizes */
  --header-height: 5.5rem;
  --icon-xs: 1rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-xl: 2.5rem;
  --icon-box-xs: 1.625rem;
  --icon-box-sm: 2.35rem;
  --icon-box-md: 2.85rem;
  --icon-box-lg: 3.35rem;
  --icon-box-xl: 3.75rem;
  --avatar-size: 3.5rem;
  --check-dot-size: 1.25rem;
  --status-icon-size: 1.5rem;
  --status-icon-size-sm: 1.125rem;
  --arrow-circle-size: 2.25rem;
  --branch-num-size: 1.85rem;
  --srv-num-size: 2rem;
  --srv-img-h: 6.5rem;
  --srv-wide-img-w: 6rem;
  --srv-wide-img-h: 5.5rem;
  --step-img-h: 6.75rem;
  --offer-img-w: 6.5rem;
  --faq-max-w: 980px;
  --comp-max-w: 1120px;
  --comp-min-w-mobile: 35rem; /* 560px */
  --hero-visual-mobile-max-w: 27.5rem; /* 440px */
  --line-decor-h: 2px;
  --brand-divider-w: 2px;
  --brand-divider-h: 3rem;
  --underline-h: 0.35rem;
  --nav-underline-h: 3px;

  /* Transitions, Opacity & Transforms */
  --opacity-subtle: 0.9;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --z-base: 1;
  --z-card-overlay: 2;
  --z-arrow: 5;
  --z-header: 100;
  --z-modal: 1000;
  --gallery-grid-gap: var(--space-6);
  --gallery-img-h: 14.5rem;
  --gallery-img-h-mobile: 10.5rem;
  --gallery-filter-gap: var(--space-2-5);
  --color-backdrop-modal: rgba(5, 24, 48, 0.92);
  --color-overlay-badge: rgba(6, 40, 78, 0.72);
  --lightbox-max-w: 54rem;
  --lightbox-max-h: 75vh;
  --translate-hover: -4px;
  --translate-hover-subtle: -2px;
  --translate-center-y: -50%;
  --translate-center-x: -50%;
  --rotate-open: 180deg;

  /* Animation Tokens */
  --anim-duration-fast: 0.4s;
  --anim-duration-normal: 0.75s;
  --anim-duration-slow: 1.1s;
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-dist-sm: 18px;
  --anim-dist-md: 32px;
  --anim-dist-lg: 48px;
  --anim-scale-in: 0.94;
  --anim-pulse-scale: 1.03;
  --anim-float-y: -8px;
  --grad-shine-cta: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* ==================== RESET & BASE ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: var(--space-0);
  padding: var(--space-0);
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--color-navy-900);
  background-color: var(--color-white);
  line-height: var(--lh-normal);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  font-weight: var(--fw-p);
  color: var(--color-navy-900);
  background-color: var(--color-ice-bg);
  overflow-x: hidden;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
}

p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  font-weight: var(--fw-p);
}

img {
  max-width: var(--size-full);
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-fast);
}

ul {
  list-style: none;
}

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

.container {
  width: var(--size-full);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ==================== TYPOGRAPHY HELPERS ==================== */
.text-accent-red {
  color: var(--color-red-500);
}

.text-accent-red-bold {
  color: var(--color-red-500);
  font-weight: var(--fw-bold);
}

.text-gold-xl {
  color: var(--color-gold-400);
  font-size: var(--fs-gold-xl);
  font-weight: var(--fw-black);
}

.text-gold-inline {
  color: var(--color-gold-400);
}

.text-cyan-highlight {
  color: var(--color-cyan-light);
  font-weight: var(--fw-extrabold);
}

.badge-gold-highlight {
  display: inline-block;
  background: var(--grad-gold-pill);
  color: var(--color-white);
  padding: var(--space-1) var(--space-3-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-badge);
}

.underline-curve-red {
  position: relative;
  display: inline-block;
  color: var(--color-red-500);
}

.underline-curve-red::after {
  content: "";
  position: absolute;
  left: var(--space-0);
  right: var(--space-0);
  bottom: calc(var(--space-1) * -1);
  height: var(--underline-h);
  background: var(--color-gold-400);
  border-radius: var(--radius-pill);
}

.faq-spark {
  position: relative;
}

.faq-spark::before {
  content: "✦";
  position: absolute;
  top: calc(var(--space-4) * -1);
  right: calc(var(--space-6) * -1);
  color: var(--color-gold-500);
  font-size: var(--fs-xl);
  animation: pulseSpark 2.4s ease-in-out infinite alternate;
}

@keyframes pulseSpark {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.75; }
  100% { transform: scale(1.25) rotate(25deg); opacity: 1; }
}

/* ==================== SCROLL REVEAL & INTERACTIVE ENHANCEMENTS ==================== */
.reveal-init {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--anim-duration-normal);
  transition-timing-function: var(--anim-ease-out);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translateY(var(--anim-dist-md));
}

.reveal-fade {
  transform: scale(var(--anim-scale-in));
}

.reveal-left {
  transform: translateX(calc(var(--anim-dist-md) * -1));
}

.reveal-right {
  transform: translateX(var(--anim-dist-md));
}

.reveal-active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Micro-animations: Floating elements & subtle pulse */
.hero-section__visual img {
  animation: heroFloat 6s ease-in-out infinite alternate;
}

@keyframes heroFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(var(--anim-float-y)); }
}

.btn-cta--red {
  position: relative;
  overflow: hidden;
}

.btn-cta--red::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: var(--grad-shine-cta);
  transform: skewX(-25deg);
  animation: shineCta 4.5s ease-in-out infinite;
}

@keyframes shineCta {
  0%, 65% { left: -75%; }
  100% { left: 130%; }
}

/* ==================== SECTION HEADERS & BADGES ==================== */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.section-badge--blue {
  background: var(--grad-badge-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-badge);
}

.section-badge--blue-pill {
  background: var(--grad-badge-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-badge);
}

.section-badge--white {
  background: var(--color-white);
  color: var(--color-blue-800);
  box-shadow: var(--shadow-card);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  color: var(--color-navy-900);
  letter-spacing: var(--ls-h2-quote);
  margin-bottom: var(--space-3-5);
}

.process-section .section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-normal);
}

.section-title--white {
  color: var(--color-white);
}

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--color-slate-600);
  max-width: var(--faq-max-w);
  margin-inline: auto;
  line-height: var(--lh-normal);
}

.section-subtitle--light {
  color: var(--color-blue-100);
}

/* ==================== HEADER / NAVBAR ==================== */
.site-header {
  position: sticky;
  top: var(--space-0);
  z-index: var(--z-header);
  background-color: var(--color-white);
  box-shadow: var(--shadow-header);
  border-bottom: var(--border-thin);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--gap-header-inner);
  flex-wrap: nowrap;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-logo__icon {
  width: var(--size-header-brand-icon);
  height: var(--size-header-brand-icon);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-600);
}

.brand-logo__icon svg {
  width: var(--size-full);
  height: var(--size-full);
}

.brand-logo__text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand-logo__name {
  font-size: var(--fs-header-brand);
  font-weight: var(--fw-black);
  color: var(--color-blue-800);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.main-nav {
  flex-shrink: 0;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-header-nav);
  flex-wrap: nowrap;
}

.main-nav__item {
  flex-shrink: 0;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-header-nav);
  font-weight: var(--fw-semibold);
  color: var(--color-navy-900);
  padding-block: var(--space-2);
  position: relative;
  white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link--active {
  color: var(--color-blue-700);
  font-weight: var(--fw-bold);
}

.main-nav__link--active::after {
  content: "";
  position: absolute;
  left: var(--space-0);
  right: var(--space-0);
  bottom: var(--space-0);
  height: var(--nav-underline-h);
  background: var(--color-blue-700);
  border-radius: var(--radius-pill);
}

.main-nav__chevron {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-header-actions);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-header-btn);
  padding: var(--pad-header-btn-y) var(--pad-header-btn-x);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  flex-shrink: 0;
  white-space: nowrap;
}

.header-btn--hotline {
  background: var(--grad-btn-red);
  box-shadow: var(--shadow-btn-red);
}

.header-btn--zalo {
  background: var(--grad-btn-blue);
  box-shadow: var(--shadow-btn-blue);
}

.header-btn:hover {
  transform: translateY(var(--translate-hover));
}

.header-btn__icon {
  width: var(--size-header-btn-icon);
  height: var(--size-header-btn-icon);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white-glass-22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-btn__icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.header-btn__zalo-badge {
  background: var(--color-white);
  color: var(--color-blue-700);
  font-size: var(--fs-header-zalo-badge);
  font-weight: var(--fw-black);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: var(--lh-none);
}

.header-btn__content {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
  white-space: nowrap;
  flex-shrink: 0;
}

.header-btn__label {
  font-size: var(--fs-header-btn-label);
  opacity: var(--opacity-subtle);
  white-space: nowrap;
}

.header-btn__value {
  font-size: var(--fs-header-btn-val);
  font-weight: var(--fw-extrabold);
  white-space: nowrap;
}

.mobile-menu-toggle {
  display: none;
  color: var(--color-navy-900);
  width: var(--icon-box-sm);
  height: var(--icon-box-sm);
  flex-shrink: 0;
}

/* ==================== CTA BUTTONS (SHARED) ==================== */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.cta-group--center {
  justify-content: center;
  margin-top: var(--space-10);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3-5);
  padding: var(--pad-cta-y) var(--pad-cta-x);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-cta:hover {
  transform: translateY(var(--translate-hover));
}

.btn-cta--red {
  background: var(--grad-btn-red);
  color: var(--color-white);
  box-shadow: var(--shadow-btn-red);
}

.btn-cta--zalo-outline {
  background: var(--color-white);
  color: var(--color-blue-800);
  border: var(--border-zalo-btn);
  box-shadow: var(--shadow-btn-outline);
}

.btn-cta__icon-phone,
.btn-cta__icon-media {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white-glass-18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cta__icon-phone svg,
.btn-cta__icon-media svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.btn-cta__zalo-bubble {
  background: var(--grad-btn-blue);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-cta__chat-circle {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cta__chat-circle svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.btn-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.btn-cta__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-cta__label-dark {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-cta__phone {
  font-size: var(--fs-cta-phone);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.btn-cta__phone-blue {
  font-size: var(--fs-cta-phone);
  font-weight: var(--fw-black);
  color: var(--color-blue-700);
  white-space: nowrap;
}

.btn-cta__zalo-single,
.btn-cta__single-text {
  font-size: var(--fs-cta-single);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==================== SECTION 1: HERO ==================== */
.hero-section {
  background: var(--grad-hero-bg);
  padding-block: var(--section-py-md) var(--section-py);
}

.hero-section__grid {
  display: grid;
  grid-template-columns: var(--grid-hero);
  align-items: center;
  gap: var(--space-10);
}

.hero-section__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-hero);
  color: var(--color-navy-950);
  margin-bottom: var(--space-3-5);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-5);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3-5);
  background-color: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  transition: all var(--transition-fast);
  cursor: default;
}

.hero-tag:hover {
  border-color: var(--color-blue-400);
  transform: translateY(var(--translate-hover-subtle));
  box-shadow: var(--shadow-badge);
}

.hero-tag__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-tag__icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.hero-tag__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
  white-space: nowrap;
  letter-spacing: var(--ls-normal);
}

.hero-section__highlight-box {
  background: var(--grad-highlight-box);
  border-left: var(--border-highlight-left);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.hero-section__highlight-text {
  font-size: var(--fs-body-hero-intro);
  font-weight: var(--fw-regular);
  color: var(--color-navy-900);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4-5);
  margin-bottom: var(--space-8);
}

.hero-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.hero-features__icon {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-badge);
}

.hero-features__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.hero-features__text {
  font-size: var(--fs-base);
  color: var(--color-slate-800);
  line-height: var(--lh-normal);
}

.hero-section__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section__img {
  width: var(--size-full);
  max-width: var(--size-full);
  height: auto;
  display: block;
}

.hero-trust-bar {
  margin-top: var(--space-12);
  background: var(--grad-trust-bar);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3-5);
  text-align: center;
}

.hero-trust-bar__icon {
  color: var(--color-blue-700);
  display: flex;
  align-items: center;
}

.hero-trust-bar__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.hero-trust-bar__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-navy-900);
}

/* ==================== SECTION 2: 6 CAM KẾT VÀNG ==================== */
.commitments-section {
  background: var(--grad-ice-section);
  padding-block: var(--section-py);
}

.commitments-section__layout {
  display: grid;
  grid-template-columns: var(--grid-commit-layout);
  align-items: center;
  gap: var(--space-9);
}

.commitments-section__photo-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.commitments-section__photo {
  width: var(--size-full);
  max-width: var(--size-full);
  height: auto;
  display: block;
}

.commitments-grid {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--space-6);
}

.commitment-card {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.commitment-card:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-card-hover);
}

.commitment-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  margin-bottom: var(--space-3-5);
}

.commitment-card__icon {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.commitment-card__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.commitment-card__title {
  font-size: var(--fs-h3-service);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
  line-height: var(--lh-h3-service);
  letter-spacing: var(--ls-normal);
}

.commitment-card__desc {
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-normal);
}

/* ==================== SECTION 3: 7 DỊCH VỤ CỐT LÕI ==================== */
.services-section {
  background: var(--grad-blue-section);
  padding-block: var(--section-py);
}

.services-grid-top {
  display: grid;
  grid-template-columns: var(--grid-4col);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.services-grid-bottom {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--space-6);
}

.service-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast);
}

.service-card:hover {
  transform: translateY(var(--translate-hover));
}

.service-card__media {
  height: var(--srv-img-h);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4-5);
  background: var(--color-blue-50);
  border-radius: var(--radius-lg);
  padding: var(--space-2-5);
}

.service-card__img {
  max-height: var(--size-full);
  object-fit: contain;
}

.service-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.service-card__num {
  width: var(--srv-num-size);
  height: var(--srv-num-size);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-card__title {
  font-size: var(--fs-h3-service);
  font-weight: var(--fw-bold);
  color: var(--color-blue-800);
  line-height: var(--lh-h3-service);
  letter-spacing: var(--ls-normal);
}

.service-card__wide-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4-5);
  background: var(--color-blue-50);
  padding: var(--space-3-5);
  border-radius: var(--radius-lg);
}

.service-card__wide-img {
  width: var(--srv-wide-img-w);
  height: var(--srv-wide-img-h);
  object-fit: contain;
  flex-shrink: 0;
}

.service-card__wide-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1-5);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
  margin-bottom: var(--space-0);
  flex-grow: 1;
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-normal);
}

.check-dot {
  width: var(--check-dot-size);
  height: var(--check-dot-size);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-green-500);
  color: var(--color-white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-1);
}

.service-card__footer {
  text-align: center;
}

.btn-service-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: var(--space-2-5) var(--space-6);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-badge);
}

.btn-service-detail:hover {
  background: var(--color-blue-800);
}

/* ==================== SECTION 4: BẢNG SO SÁNH ==================== */
.comparison-section {
  background: var(--grad-ice-section);
  padding-block: var(--section-py);
}

.comparison-table-wrap {
  max-width: var(--comp-max-w);
  margin-inline: auto;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  border: var(--border-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: var(--size-full);
  border-collapse: collapse;
}

.comparison-table__th {
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  text-align: left;
}

.comparison-table__th--criteria {
  background: var(--color-blue-600);
  color: var(--color-white);
  text-align: center;
  width: var(--col-w-criteria);
}

.comparison-table__th--freelance {
  background: var(--color-slate-200);
  color: var(--color-navy-900);
  width: var(--col-w-freelance);
}

.comparison-table__th--brand {
  background: var(--color-blue-800);
  color: var(--color-white);
  width: var(--col-w-brand);
}

.comparison-table__th-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.comparison-table__th-icon {
  width: var(--icon-box-sm);
  height: var(--icon-box-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comparison-table__th-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.comparison-table tbody tr {
  border-bottom: var(--border-table-row);
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--color-blue-50);
}

.comparison-table__td {
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-base);
  vertical-align: middle;
}

.comparison-table__td--criteria {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  color: var(--color-navy-900);
}

.criteria-icon {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.criteria-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comparison-table__td--bad,
.comparison-table__td--good {
  position: relative;
}

.status-icon {
  width: var(--status-icon-size);
  height: var(--status-icon-size);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--color-white);
  margin-right: var(--space-2-5);
}

.status-icon--cross {
  background: var(--color-red-500);
}

.status-icon--check {
  background: var(--color-green-500);
}

/* ==================== SECTION 5: QUY TRÌNH 6 BƯỚC ==================== */
.process-section {
  background: var(--grad-blue-section);
  padding-block: var(--section-py);
}

.process-grid {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--space-8);
}

.process-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.process-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.process-card__badge-icon {
  width: var(--icon-box-xl);
  height: var(--icon-box-xl);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  border: var(--border-card-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-badge);
}

.process-card__badge-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.process-card__step-tag {
  display: inline-block;
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  padding: var(--space-1) var(--space-3-5);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-1);
}

.process-card__title {
  font-size: var(--fs-h3-service);
  font-weight: var(--fw-bold);
  color: var(--color-blue-800);
  line-height: var(--lh-h3-service);
  letter-spacing: var(--ls-normal);
}

.process-card__desc {
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-5);
}

.process-card__img {
  height: var(--step-img-h);
  max-width: var(--size-full);
  object-fit: contain;
  margin-inline: auto;
  display: block;
}

.process-card__arrow {
  position: absolute;
  top: var(--pos-half);
  right: calc(var(--space-7) * -1);
  transform: translateY(var(--translate-center-y));
  width: var(--arrow-circle-size);
  height: var(--arrow-circle-size);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-blue-700);
  border: var(--border-card);
  box-shadow: var(--shadow-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  z-index: var(--z-arrow);
}

/* ==================== SECTION 6: GÓI TRỢ GIÁ & QUÀ TẶNG ==================== */
.offers-section {
  background: var(--grad-ice-section);
  padding-block: var(--section-py);
}

.offers-section__layout {
  display: grid;
  grid-template-columns: var(--grid-offers-layout);
  align-items: center;
  gap: var(--space-8);
}

.offers-section__tech-frame {
  background: var(--color-white);
  padding: var(--space-3-5);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  border: var(--border-card);
}

.offers-section__tech-img {
  width: var(--size-full);
  border-radius: var(--radius-xl);
}

.offers-grid {
  display: grid;
  grid-template-columns: var(--grid-2col);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.offer-card {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--space-4-5);
  transition: transform var(--transition-fast);
}

.offer-card:hover {
  transform: translateY(var(--translate-hover));
}

.offer-card__icon-wrap {
  width: var(--offer-img-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer-card__img {
  width: var(--size-full);
  object-fit: contain;
}

.offer-card__title {
  font-size: var(--fs-h3-product);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
  line-height: var(--lh-h3-product);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-2);
}

.offer-card__desc {
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-normal);
}

.offers-section__cta {
  justify-content: center;
  margin-bottom: var(--space-6);
}

.offers-section__gift-bar {
  display: flex;
  justify-content: center;
}

.gift-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--grad-gift-pill);
  border: var(--border-gift-pill);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}

.gift-pill__icon {
  color: var(--color-red-500);
  display: flex;
  align-items: center;
}

.gift-pill__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.gift-pill__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
}

/* ==================== SECTION 7: THƯƠNG HIỆU UY TÍN ==================== */
.trust-section {
  background: var(--grad-blue-section);
  padding-block: var(--section-py);
}

.stats-grid {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-strong);
  text-align: center;
}

.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3-5);
}

.stat-card__icon {
  width: var(--icon-box-xl);
  height: var(--icon-box-xl);
  border-radius: var(--radius-pill);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.stat-card__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-card__number {
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  color: var(--color-red-500);
  line-height: var(--lh-none);
  margin-bottom: var(--space-1);
}

.stat-card__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--color-navy-900);
}

.stat-card__desc {
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-normal);
}

.reviews-grid {
  display: grid;
  grid-template-columns: var(--grid-3col);
  gap: var(--space-6);
}

.review-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-strong);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  margin-bottom: var(--space-4);
  position: relative;
}

.review-card__avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: var(--border-card);
}

.review-card__meta {
  flex: 1;
}

.review-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--color-navy-900);
}

.review-card__loc {
  font-size: var(--fs-xs);
  color: var(--color-slate-600);
  margin-block: var(--space-1);
}

.review-card__stars {
  color: var(--color-gold-500);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
}

.review-card__quote {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: var(--color-blue-400);
  line-height: var(--lh-none);
}

.review-card__text {
  font-size: var(--fs-p);
  font-style: italic;
  color: var(--color-slate-700);
  line-height: var(--lh-relaxed);
}

/* ==================== SECTION 7B: 8 CHI NHÁNH ==================== */
.branches-section {
  background: var(--grad-ice-section);
  padding-block: var(--section-py);
}

.branches-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.branches-section__line {
  flex: 1;
  height: var(--line-decor-h);
  background: var(--color-blue-200);
}

.branches-section__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
}

.branches-section__icon {
  width: var(--icon-box-lg);
  height: var(--icon-box-lg);
  border-radius: var(--radius-pill);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.branches-section__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.branches-section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  color: var(--color-navy-900);
}

.branches-layout {
  display: grid;
  grid-template-columns: var(--grid-branches-layout);
  gap: var(--space-6);
  align-items: stretch;
}

.hq-card {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hq-card__media {
  position: relative;
  margin-bottom: var(--space-6);
}

.hq-card__img {
  width: var(--size-full);
  border-radius: var(--radius-lg);
}

.hq-card__badge {
  position: absolute;
  left: var(--pos-half);
  bottom: calc(var(--space-3-5) * -1);
  transform: translateX(var(--translate-center-x));
  background: var(--grad-btn-red);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  padding: var(--space-1-5) var(--space-4-5);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-btn-red);
}

.hq-card__address {
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.hq-card__note {
  font-size: var(--fs-xs);
  color: var(--color-slate-600);
}

.branches-grid {
  display: grid;
  grid-template-columns: var(--grid-4col);
  gap: var(--space-4-5);
}

.branch-card {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4-5);
  box-shadow: var(--shadow-card);
}

.branch-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-2-5);
}

.branch-card__num {
  width: var(--branch-num-size);
  height: var(--branch-num-size);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-btn-blue);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.branch-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-normal);
  color: var(--color-blue-800);
}

.branch-card__streets {
  font-size: var(--fs-xs);
  color: var(--color-navy-900);
  margin-bottom: var(--space-1-5);
  line-height: var(--lh-snug);
}

.branch-card__area {
  font-size: var(--fs-2xs);
  font-style: italic;
  color: var(--color-slate-600);
}

/* ==================== SECTION 7C: HÌNH ẢNH THỰC TẾ ==================== */
.gallery-section {
  background: var(--color-white);
  padding-block: var(--section-py);
  border-top: var(--border-thin);
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gallery-filter-gap);
  margin-bottom: var(--space-8);
}

.gallery-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4-5);
  background: var(--color-blue-50);
  color: var(--color-navy-900);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gallery-filter-btn:hover {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  border-color: var(--color-blue-300);
  transform: translateY(var(--translate-hover-subtle));
}

.gallery-filter-btn.is-active {
  background: var(--grad-btn-blue);
  color: var(--color-white);
  border-color: var(--color-blue-600);
  box-shadow: var(--shadow-btn-blue);
}

.gallery-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0) var(--space-2);
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-blue-200);
  color: var(--color-blue-900);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
}

.gallery-filter-btn.is-active .gallery-filter-count {
  background: var(--color-white-glass-22);
  color: var(--color-white);
}

/* Unique Masonry Mosaic Layout */
.gallery-mosaic {
  column-count: 4;
  column-gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  border: var(--border-card);
  background: var(--color-blue-50);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.gallery-item:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-blue-300);
}

.gallery-item.is-hidden {
  display: none !important;
}

.gallery-item__frame {
  position: relative;
  width: var(--size-full);
  display: block;
  overflow: hidden;
  line-height: var(--lh-none);
}

.gallery-item__img {
  width: var(--size-full);
  height: auto;
  display: block;
  transition: transform var(--transition-normal);
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.05);
}

.gallery-item__overlay {
  position: absolute;
  inset: var(--space-0);
  background: var(--color-overlay-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity var(--transition-fast);
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__zoom-icon {
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  border-radius: var(--radius-pill);
  background: var(--color-white-glass-35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border: var(--border-card-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-badge);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.gallery-item:hover .gallery-item__zoom-icon {
  transform: scale(1.1);
  background: var(--color-white);
  color: var(--color-blue-700);
}

.gallery-item__zoom-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Load more button */
.gallery-more-wrap {
  text-align: center;
  margin-bottom: var(--space-10);
}

.gallery-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3-5) var(--space-7);
  background: var(--color-white);
  color: var(--color-blue-700);
  border: var(--border-blue-outline);
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-fast);
}

.gallery-more-btn:hover {
  background: var(--color-blue-600);
  color: var(--color-white);
  border-color: var(--color-blue-600);
  transform: translateY(var(--translate-hover-subtle));
  box-shadow: var(--shadow-btn-blue);
}

.gallery-more-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--transition-fast);
}

.gallery-more-btn:hover svg {
  transform: translateY(2px);
}

/* CTA Banner inside Gallery */
.gallery-cta-banner {
  background: var(--grad-ice-section);
  border-radius: var(--radius-2xl);
  border: var(--border-card);
  padding: var(--space-7) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  box-shadow: var(--shadow-card);
}

.gallery-cta-banner__title {
  font-size: var(--fs-h3-service);
  font-weight: var(--fw-black);
  color: var(--color-navy-900);
  margin-bottom: var(--space-1-5);
}

.gallery-cta-banner__desc {
  font-size: var(--fs-sm);
  color: var(--color-slate-600);
}

/* Lightbox Modal (Pure Photo View) */
.gallery-lightbox {
  position: fixed;
  inset: var(--space-0);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.gallery-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: var(--space-0);
  background: var(--color-backdrop-modal);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gallery-lightbox__dialog {
  position: relative;
  z-index: 1;
  max-width: var(--lightbox-max-w);
  width: 92%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card-strong);
}

.gallery-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: var(--icon-box-sm);
  height: var(--icon-box-sm);
  border-radius: var(--radius-pill);
  background: var(--color-white-glass-35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border: var(--border-card-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.gallery-lightbox__close:hover {
  background: var(--color-red-500);
  transform: scale(1.1);
}

.gallery-lightbox__close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--icon-box-md);
  height: var(--icon-box-md);
  border-radius: var(--radius-pill);
  background: var(--color-white-glass-35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  border: var(--border-card-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.gallery-lightbox__nav:hover {
  background: var(--color-blue-600);
  transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox__nav svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.gallery-lightbox__nav--prev {
  left: var(--space-4);
}

.gallery-lightbox__nav--next {
  right: var(--space-4);
}

.gallery-lightbox__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-full);
}

.gallery-lightbox__img {
  max-width: var(--size-full);
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-strong);
}

/* ==================== SECTION 8: FAQ ==================== */
.faq-section {
  background: var(--grad-hero-bg);
  padding-block: var(--section-py);
}

.faq-list {
  max-width: var(--faq-max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4-5);
}

.faq-item {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-item__trigger {
  width: var(--size-full);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4-5);
  padding: var(--space-5) var(--space-6);
  text-align: left;
}

.faq-item__icon {
  width: var(--icon-box-lg);
  height: var(--icon-box-lg);
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.vat-badge-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  border: var(--border-zalo-btn);
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-xs);
}

.faq-item__content {
  flex: 1;
}

.faq-item__question {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  color: var(--color-navy-900);
  line-height: var(--lh-h4);
}

.faq-item__answer {
  display: none;
  margin-top: var(--space-3-5);
  font-size: var(--fs-p);
  color: var(--color-slate-700);
  line-height: var(--lh-relaxed);
}

.faq-item--open .faq-item__answer {
  display: block;
}

.faq-item__chevron {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-blue-700);
  transition: transform var(--transition-fast);
  margin-top: var(--space-1);
}

.faq-item--open .faq-item__chevron {
  transform: rotate(var(--rotate-open));
}

/* ==================== SECTION 9: FOOTER ==================== */
.site-footer {
  background: var(--grad-footer-bg);
  color: var(--color-white);
  padding-top: var(--section-py-md);
}

.site-footer__brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-footer-sep);
  margin-bottom: var(--space-10);
}

.site-footer__snow-icon {
  width: var(--icon-box-xl);
  height: var(--icon-box-xl);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__snow-icon svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.site-footer__brand-divider {
  width: var(--brand-divider-w);
  height: var(--brand-divider-h);
  background: var(--color-white-glass-35);
}

.site-footer__brand-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
}

.site-footer__brand-subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--color-gold-400);
  margin-top: var(--space-1);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: var(--grid-footer);
  gap: var(--space-8);
  padding-bottom: var(--section-py-md);
}

.site-footer__col {
  padding-right: var(--space-4);
}

.site-footer__col:not(:last-child) {
  border-right: var(--border-footer-sep);
}

.footer-col-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-4);
}

.footer-col-heading__icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-white);
  display: inline-flex;
}

.footer-col-heading__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
}

.footer-info-block__text {
  font-size: var(--fs-p);
  color: var(--color-blue-100);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-7);
}

.footer-col-sep {
  border: none;
  border-top: var(--border-footer-sep);
  margin-block: var(--space-6);
}

.footer-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}

.footer-service-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  font-size: var(--fs-p);
  color: var(--color-blue-50);
}

.footer-contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-contact-card {
  background: var(--color-white);
  color: var(--color-navy-900);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  box-shadow: var(--shadow-card-strong);
}

.footer-contact-card__icon {
  width: var(--icon-box-lg);
  height: var(--icon-box-lg);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.footer-contact-card__icon--red {
  background: var(--grad-btn-red);
}

.footer-contact-card__icon--red svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.footer-contact-card__icon--zalo {
  background: var(--grad-btn-blue);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
}

.footer-contact-card__icon--clock {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.footer-contact-card__icon--clock svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.footer-contact-card__body {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-snug);
}

.footer-contact-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-navy-900);
}

.footer-contact-card__value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--color-red-500);
}

.footer-contact-card__sub {
  font-size: var(--fs-2xs);
  color: var(--color-slate-600);
}

.site-footer__bottom {
  background: var(--grad-footer-bottom);
  padding-block: var(--space-4-5);
  border-top: var(--border-footer-sep);
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  text-align: center;
}

.site-footer__bottom-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-blue-300);
  display: inline-flex;
}

.site-footer__bottom-text {
  font-size: var(--fs-p);
  color: var(--color-blue-100);
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 1080px) {
  .hero-section__grid,
  .commitments-section__layout,
  .offers-section__layout,
  .branches-layout {
    grid-template-columns: var(--grid-1col);
  }

  .services-grid-top,
  .branches-grid {
    grid-template-columns: var(--grid-2col);
  }

  .services-grid-bottom,
  .process-grid,
  .stats-grid,
  .reviews-grid,
  .site-footer__grid {
    grid-template-columns: var(--grid-1col);
  }

  .gallery-mosaic {
    column-count: 3;
    column-gap: var(--space-3-5);
  }

  .services-grid-bottom,
  .process-grid,
  .stats-grid,
  .reviews-grid,
  .site-footer__grid {
    grid-template-columns: var(--grid-1col);
  }

  .gallery-cta-banner {
    flex-direction: column;
    text-align: center;
  }

  .process-card__arrow {
    display: none;
  }

  .site-footer__col:not(:last-child) {
    border-right: none;
    border-bottom: var(--border-footer-sep);
    padding-bottom: var(--space-6);
  }
}

@media (max-width: 1024px) {
  :root {
    /* Tablet Scale */
    /* H1: 42px – Weight 700 – Line-height 1.15 (48px) */
    --fs-h1: 2.625rem;
    --lh-h1: 1.15;
    --fw-h1: 700;

    /* H2: 34px – Weight 700 – Line-height 1.2 (41px) */
    --fs-h2: 2.125rem;
    --lh-h2: 1.2;
    --fw-h2: 700;

    /* H3: Kích thước cũ (20px / 1.25rem – Weight 700 – Line-height 1.25) */
    --fs-h3: 1.25rem;
    --lh-h3: 1.25;
    --fw-h3: 700;

    /* H4: 20px – Weight 600 – Line-height 1.3 (26px) */
    --fs-h4: 1.25rem;
    --lh-h4: 1.3;
    --fw-h4: 600;

    /* Body: 16px – Weight 400 – Line-height 1.6 (26px) */
    --fs-p: 1rem;
    --lh-p: 1.6;
    --fw-p: 400;
  }
}

@media (max-width: 768px) {
  :root {
    /* Mobile Scale */
    /* H1: 32px – Weight 700 – Line-height 1.2 (38px) */
    --fs-h1: 2rem;
    --lh-h1: 1.2;
    --fw-h1: 700;

    /* H2: 28px – Weight 700 – Line-height 1.25 (35px) */
    --fs-h2: 1.75rem;
    --lh-h2: 1.25;
    --fw-h2: 700;

    /* H3: Kích thước cũ (18px / 1.125rem – Weight 700 – Line-height 1.25) */
    --fs-h3: 1.125rem;
    --lh-h3: 1.25;
    --fw-h3: 700;

    --fs-h3-service: 1.125rem; /* 18px */

    /* H4: 18px – Weight 600 – Line-height 1.3 (23px) */
    --fs-h4: 1.125rem;
    --lh-h4: 1.3;
    --fw-h4: 600;

    /* Body: 16px – Weight 400 – Line-height 1.65 (26px) */
    --fs-p: 1rem;
    --lh-p: 1.65;
    --fw-p: 400;

    --fs-body-hero-intro: 1rem;
  }

  .main-nav,
  .site-header__actions {
    display: none;
  }

  .site-header--menu-open .main-nav {
    display: block;
    position: absolute;
    top: var(--header-height);
    left: var(--space-0);
    right: var(--space-0);
    background: var(--color-white);
    padding: var(--space-4) var(--container-px);
    box-shadow: var(--shadow-card);
    border-bottom: var(--border-thin);
  }

  .site-header--menu-open .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .commitments-grid,
  .services-grid-top,
  .offers-grid,
  .branches-grid {
    grid-template-columns: var(--grid-1col);
  }

  /* Hero Mobile Layout: Ảnh hiển thị trước Highlight Box, toàn bộ văn bản căn lề trái */
  .hero-section__grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-0);
  }

  .hero-section__content {
    display: contents;
    text-align: left;
  }

  .hero-section__content.reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-section__content > .section-badge {
    order: 1;
    align-self: flex-start;
  }

  .hero-section__title {
    order: 2;
    text-align: left;
    margin-bottom: var(--space-3);
  }

  .hero-tags {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    justify-content: flex-start;
    text-align: left;
  }

  .hero-section__visual {
    order: 4;
    align-self: center;
    width: var(--size-full);
    max-width: var(--hero-visual-mobile-max-w);
    margin-inline: auto;
    margin-bottom: var(--space-5);
  }

  .hero-section__highlight-box {
    order: 5;
    text-align: left;
    margin-bottom: var(--space-6);
  }

  .hero-features {
    order: 6;
    text-align: left;
  }

  .hero-section__cta {
    order: 7;
    align-self: flex-start;
  }

  /* ==================== SECTION 4: BẢNG SO SÁNH (MOBILE) ==================== */
  .comparison-table {
    min-width: var(--comp-min-w-mobile);
  }

  .comparison-table__th,
  .comparison-table__td {
    padding: var(--space-3) var(--space-2-5);
  }

  .comparison-table__th {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  .comparison-table__th--criteria {
    width: var(--col-w-criteria-mobile);
  }

  .comparison-table__th--freelance {
    width: var(--col-w-freelance-mobile);
  }

  .comparison-table__th--brand {
    width: var(--col-w-brand-mobile);
  }

  .comparison-table__th-inner {
    flex-direction: column;
    gap: var(--space-1-5);
    text-align: center;
  }

  .comparison-table__th-icon {
    width: var(--icon-box-xs);
    height: var(--icon-box-xs);
  }

  .comparison-table__th-icon svg {
    width: var(--icon-xs);
    height: var(--icon-xs);
  }

  .comparison-table__td {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  .comparison-table__td--criteria {
    gap: var(--space-2);
  }

  .criteria-icon {
    width: var(--icon-box-xs);
    height: var(--icon-box-xs);
  }

  .criteria-icon svg {
    width: var(--icon-xs);
    height: var(--icon-xs);
  }

  .status-icon {
    width: var(--status-icon-size-sm);
    height: var(--status-icon-size-sm);
    font-size: var(--fs-2xs);
    margin-right: var(--space-1-5);
    flex-shrink: 0;
  }

  /* Gallery Mobile */
  .gallery-mosaic {
    column-count: 2;
    column-gap: var(--space-2-5);
  }

  .gallery-item {
    margin-bottom: var(--space-2-5);
    border-radius: var(--radius-lg);
  }

  .gallery-filter-btn {
    font-size: var(--fs-xs);
    padding: var(--space-2) var(--space-3);
  }

  .gallery-lightbox__nav {
    width: var(--icon-box-sm);
    height: var(--icon-box-sm);
  }

  .gallery-lightbox__nav svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
}