/* ==========================================================================
   FIDVN — Global theme stylesheet (cleaned: single :root, no mobile overrides)
   ========================================================================= */

/* ========== 1) TOKENS / VARIABLES (single :root) ========================= */
:root{
  /* Brand palette */
  --primary: #2d4946;
  --text: #0f172a;
  --text-on-primary: #ebe4d6;
  --muted: #4b5563;
  --card: #ffffff;
  --card-border: #e6e6e6;
  --bg-soft: #f8faf9;
  --media-bg: #f1f5f9;
  --white: #ffffff;

  /* Interactive */
  --link-hover-color: #194b46;
  --hover-text-on-primary: #e6e6e6;

  /* Layout */
  --container-max: 1920px;
  --container-pad: 24px;

  /* Header */
  --header-item-h: 48px;
  --header-font-size: 16px;
  --header-pad-y: 15px;
  --header-pad-x: 48px;
  --header-safe: calc(var(--header-pad-y)*2 + (var(--header-item-h)*2/3));
  --header-font-weight: 200;

  /* Typeface */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji";

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radius */
  --radius-xs: 100px; --radius-sm: 100px; --radius-md: 100px; --radius-lg: 100px;
  --radius-xl: 18px;  --radius-2xl: 24px;  --radius-pill: 9999px;

  /* Elevation / transitions */
  --shadow-1: 0 2px 8px rgba(0,0,0,.06);
  --shadow-2: 0 6px 18px rgba(0,0,0,.25);
  --border-1: 1px solid var(--card-border);
  --ease-1: cubic-bezier(.2,.6,.2,1);
  --dur-1: .15s; --dur-2: .2s;

  /* Typography / line-heights */
  --lh-title: 1;
  --lh-h1: 1.2; --lh-h2: 1.2; --lh-h3: 1.2; --lh-h4: 1.2; --lh-h5: 1.2; --lh-h6: 1.2;
  --lh-body: 1.6;
  --lh-list: 1.6;
  --lh-header: 1;
  --lh-headline: 1.4;

  /* Lists */
  --list-pad: 18px;

  /* Site spacing */
  --site-pad: var(--container-pad);

  /* Component vars */
  /* Home — Services */
  --svc-split: 72px;
  --svc-media-h: 800px;
  --svc-rule: #e5e7eb;
  --svc-cta-d: 40px;

  /* Home — Intro */
  --split-pad: 72px;
  --intro-media-h: 600px;

  /* Footer submit button */
  --fid-submit-d: 44px;

  /* Buttons (root variants) */
  --btn-root-on-white-text: var(--text-on-primary);
  --btn-root-on-white-text-hover: var(--hover-text-on-primary);
  --btn-root-on-primary-text: var(--primary);
  --btn-root-on-primary-text-hover: color-mix(in srgb, var(--primary) 85%, #000 15%);
  --btn-root-hover-bg: color-mix(in srgb, var(--white) 10%, transparent);

  /* Services page media height (legacy token kept) */
  --services-media-h: 600px;

  /* About page */
  --about-site-pad: var(--container-pad);
  --about-split: 72px;
  --about-fixed-h: 400px;
}

/* ========== 2) BASE / TYPOGRAPHY ========================================= */
html{ font-family: var(--font-sans); scroll-padding-top: var(--header-safe); scroll-behavior: smooth; }
body{
  color: var(--text);
  background: var(--white);
  line-height: var(--lh-body);
  padding-top: var(--header-safe);
}
button, input, select, textarea{ font: inherit; }

h1, .hero-title   { font-size: clamp(28px,4vw,44px); font-weight:700; }
h2, .section-title{ font-size: clamp(40px, 6vw, 80px); color: var(--text); font-weight:400; line-height: var(--lh-title); }
h3, .card h3      { font-size: 20px; font-weight:700; line-height: var(--lh-h3); }
h4{ font-size: 18px; font-weight:700; line-height: var(--lh-h4); }
h5{ font-size: 16px; font-weight:700; line-height: var(--lh-h5); }
h6{ font-size: 14px; font-weight:700; line-height: var(--lh-h6); }

.slab-title, .f-name{ font-weight:800; }
.headline, .section-title{ color: var(--primary); }
p, li, dd, figcaption, blockquote{ line-height: var(--lh-body); }

/* Container */
.container.wrap{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--link-hover-color); }

/* Prevent horizontal overflow caused by full-bleed */
html, body { overflow-x: hidden; }

/* ========== 3) BUTTONS ==================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: calc(var(--space-3) + 2px) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration:none; font-weight:600; border:1px solid transparent;
  transition:
    transform .05s,
    box-shadow var(--dur-2) var(--ease-1),
    background-color var(--dur-2) var(--ease-1),
    color var(--dur-2) var(--ease-1),
    border-color var(--dur-2) var(--ease-1);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--primary); color: var(--text-on-primary); }
.btn-primary:hover{ box-shadow: var(--shadow-2); }
.btn-ghost{ background: var(--white); color:var(--primary); border-color:var(--primary); }
.btn-lg{ padding: var(--space-3) var(--space-5); font-size: 1.05rem; }

/* Root Button variants */
.btn-root{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: calc(var(--space-3) - 2px) var(--space-6);
  border-radius: var(--radius-md);
  font-weight:200; text-decoration:none;
  border:1px solid transparent;
  transition:
    transform .05s,
    box-shadow var(--dur-2) var(--ease-1),
    background-color var(--dur-2) var(--ease-1),
    color var(--dur-2) var(--ease-1),
    border-color var(--dur-2) var(--ease-1);
}
.btn-root:hover{ transform: translateY(-1px); }
.btn-root:active{ transform: translateY(0); }
.btn-root--lg{ padding: var(--space-3) var(--space-6); font-size:1.05rem; }
.btn-root .chev{ width:16px; height:16px; }

/* On white */
.btn-root--on-white{
  background: var(--primary);
  color: var(--btn-root-on-white-text);
  border-color: var(--primary);
}
.btn-root--on-white:hover{
  color: var(--btn-root-on-white-text-hover);
  box-shadow: var(--shadow-2), 0 0 0 9999px var(--btn-root-hover-bg) inset;
}
.btn-root--on-white:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(25,75,70,.25);
}

/* On primary */
.btn-root--on-primary{
  background: var(--white);
  color: var(--btn-root-on-primary-text);
  border-color: var(--white);
}
.btn-root--on-primary:hover{
  color: var(--btn-root-on-primary-text-hover);
  box-shadow: var(--shadow-2), 0 0 0 9999px var(--btn-root-hover-bg) inset;
}
.btn-root--on-primary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

/* ========== 4) HEADER (fixed) ============================================ */
/* ==== Desktop default: ẩn hoàn toàn UI mobile ==== */
.fid-nav-toggle,
#fid-mobile-nav{
  display: none;
}

.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: var(--primary); color: var(--text-on-primary);
  padding: var(--header-pad-y) var(--header-pad-x); border-bottom: none;
  backface-visibility: hidden; will-change: transform;
}
.site-header, .site-header *{ line-height: var(--lh-header); box-sizing:border-box; }
.site-header nav, .site-header ul, .site-header li{ margin:0; padding:0; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }

/* Brand */
.brand{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height: calc(var(--header-item-h)*2/3); color: var(--text-on-primary);
}
.brand-logo{ width:100px; height:32px; object-fit:contain; }

/* Nav */
.nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.main-nav{ display:flex; align-items:center; gap:var(--space-5); list-style:none; }
.nav-item{ display:flex; align-items:center; }
.nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  height: calc(var(--header-item-h)*2/3); padding:0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-on-primary); font-size: var(--header-font-size); font-weight: var(--header-font-weight);
  transition: background-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1);
}
.nav-link:hover{ background: rgba(255,255,255,.12); color: var(--hover-text-on-primary); }
.nav-link.active{ background: transparent; font-weight:400; }

/* Language dropdown */
.lang-dropdown{ position:relative; display:flex; align-items:center; }
.lang-btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height: calc(var(--header-item-h)*2/3); padding:0 var(--space-3);
  border-radius: var(--radius-sm);
  border:1px solid var(--text-on-primary); color:var(--text-on-primary); background:transparent;
  font-size:var(--header-font-size); user-select:none;
  transition:
    background-color var(--dur-1) var(--ease-1),
    box-shadow var(--dur-2) var(--ease-1),
    color var(--dur-1) var(--ease-1),
    border-color var(--dur-1) var(--ease-1);
}
.lang-btn .chev{ width:14px; height:14px; transition: transform var(--dur-1) var(--ease-1); }
.lang-btn:hover{ background:rgba(255,255,255,.12); color:var(--hover-text-on-primary); border-color:var(--hover-text-on-primary); }

.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  width:max-content; min-width:100%; max-width:320px;
  background:var(--white); color:var(--text); border: var(--border-1); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  padding: var(--space-1); list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur-1), visibility var(--dur-1); z-index:60;
}
.lang-menu::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.lang-dropdown:hover .lang-menu,
.lang-dropdown:focus-within .lang-menu{ opacity:1; visibility:visible; pointer-events:auto; }
.lang-dropdown:hover .lang-btn .chev,
.lang-dropdown:focus-within .lang-btn .chev{ transform: rotate(180deg); }

.lang-item{
  display:block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--text); background:var(--white); white-space:nowrap;
  font-size: var(--header-font-size); font-weight:400; text-decoration:none;
}
.lang-item:hover, .lang-item:focus-visible{ background:#f4f6f8; color: var(--link-hover-color); }
.lang-item.active{ font-weight:700; }

/* ========== 5) GLOBAL CONTENT COLOR ====================================== */
main, .content, section, article, .services-page, .about-page, .contact-page { color: var(--text); }
body :where(div[class]):not(.site-header, .site-header *, .site-footer, .site-footer *) { color: var(--text); }

/* ========== 6) HOME - STATS ============================================== */
.home-stats{ padding: 32px 0 24px; }
.home-stats .stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap: 32px; padding-bottom:111px; padding-top:148px;
}
.home-stats .stat{ padding-top: 12px; }
.home-stats .stat-label{
  text-transform: uppercase; letter-spacing:.04em;
  font-size: 16px; color: var(--muted);
  border-bottom:2px solid #e5e7eb; padding-top:10px; margin-bottom: 36px; padding-bottom:8px;
}
.home-stats .stat-number{
  font-size: clamp(40px, 4vw, 80px); font-weight: 400; line-height: 1;
  color: var(--text);
}

/* ========== 7) SERVICES ONE-PAGE ========================================= */
.services-page .svc-section{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:start; grid-auto-rows:min-content;
  padding: 45px 0;
}

/* Default: text left, image right */
.services-page #pr-mkt .svc-text, .services-page #shipping-logistic .svc-text{
  grid-column:1; grid-row:1;
  padding:0 0 0 var(--site-pad);
  display:flex; flex-direction:column;
  min-height: var(--services-media-h, 480px);
  color: var(--text);
}
.services-page #operations .svc-text, .services-page #technology-integration .svc-text{
  grid-column:2; grid-row:1;
  padding:0 var(--site-pad) 0 var(--site-pad);
  display:flex; flex-direction:column;
  min-height: var(--services-media-h, 480px);
  color: var(--text);
}
.services-page .svc-media{
  grid-column:2; grid-row:1;
  padding:0 var(--site-pad) 0 var(--split-pad);
}
.services-page .svc-media img{
  width:100%; height: var(--services-media-h, 480px);
  object-fit:cover; display:block; border-radius:0;
}

/* Reverse: image left, text right */
.services-page .svc-section.rev .svc-media{
  grid-column:1; grid-row:1;
  padding:0 var(--split-pad) 0 var(--site-pad);
}
.services-page .svc-section.rev .svc-text{
  grid-column:2; grid-row:1;
  padding:0 var(--site-pad) 0 var(--split-pad);
}

#technology-integration.svc-section.rev { padding-bottom: 148px!important; }

/* Typography & spacing */
.services-page .headline{
  text-align: center;
  margin-bottom: var(--space-4);
  padding-top: 38px;
  padding-bottom: 0;
  color: var(--text);
  line-height: var(--lh-title);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
}
.services-page .subheadline{
  text-align: center;
  margin-bottom: var(--space-4);
  padding: 18px 0 22px 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text);
  line-height: var(--lh-body);
  font-size: 16px;
  font-weight: 400;
}
.services-page .svc-title{ margin:0 0 12px; line-height: var(--lh-headline); font-size: 68px;}
.services-page .svc-block h3{ margin:12px 0 24px; line-height: var(--lh-body); font-weight:600; }
.services-page .svc-block ul{ margin: 0; padding-left: var(--list-pad); }
.services-page .svc-block li{ margin: var(--space-1) 0; line-height: var(--lh-list); }
.services-page .svc-block p{ display:inline-block; margin-top:12px; margin-bottom:0px!important; }
.services-page .svc-block p em{ display:inline-block; margin-top:12px; margin-bottom:0px!important; }

/* Stick content block to bottom of image */
.services-page .svc-text{
  display:flex; flex-direction:column;
  min-height: var(--services-media-h);
}
.services-page .svc-title{ margin:0 0 12px; }
.services-page .svc-block{ margin-top:auto; padding-bottom:0; }

/* Ensure equal columns height */
.services-page .svc-section{ align-items:stretch; }

/* ========== 8) ABOUT ONE-PAGE (fixed height 400px) ======================= */
/* Headline */
.about-page{ padding: var(--space-5) 0 var(--space-3); }
.about-page .headline2{
  text-align: left;
  padding-left: var(--about-site-pad);
  margin-bottom: var(--space-4);
  color: var(--text);
  line-height: var(--lh-title);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
}
.about-page .headline1{
  text-align: center;
  margin-bottom: var(--space-4);
  padding-top: 38px;
  padding-bottom: 0;
  color: var(--text);
  line-height: var(--lh-title);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
}
.about-page .headline3{
  text-align: center;
  margin-bottom: var(--space-4);
  padding-top: 65px;
  padding-bottom: 61px;
  color: var(--text);
  line-height: var(--lh-title);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
}

/* Remove borders/backgrounds in About */
.about-page :where(.abt-media,.abt-text,.abt-photo,.abt-tile){
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Alternating media/text (desktop) */
.abt-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin: var(--space-6) 0;
  scroll-margin-top: var(--header-safe);
  padding-top: 48px;
  padding-bottom: 11px
}
@media (min-width:901px){
  .abt-section > *{ grid-row: 1; }
}
/* Columns */
.abt-section:not(.rev) .abt-media{
  grid-column: 1;
  padding: 0 var(--about-split) 0 var(--about-site-pad);
}
.abt-section:not(.rev) .abt-text{
  grid-column: 2;
  padding: 0 var(--about-site-pad) 0 0;
}
.abt-section.rev .abt-text{
  grid-column: 1;
  padding: 0 0 0 var(--about-site-pad);
}
.abt-section.rev .abt-media{
  grid-column: 2;
  padding: 0 var(--about-site-pad) 0 var(--about-split);
}

/* Lock heights & cover images */
.abt-media,
.abt-text{ height: var(--about-fixed-h); }
.abt-media img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Text block */
.abt-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  text-align: left;
}
.abt-title{
  margin: 0 0 10px;
  padding-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--svc-rule);
  font-size: 18px;
  line-height: var(--lh-h3);
}
.abt-block h3{ margin: 0 0 var(--space-2); font-size: 18px; font-weight: 700; line-height: var(--lh-h3); }
.abt-block ul{ margin: 0; padding-left: var(--list-pad); }
.abt-block li{ margin: var(--space-1) 0; line-height: var(--lh-list); }

/* Remove separators */
.about-page hr{ display: none !important; }

/* Team & Capabilities */
.abt-group{ margin: var(--space-5) 0; }
.abt-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0 24px;
  column-gap: 72px;
}
.abt-tile{ padding: 0 !important; }
.abt-photo{ height: 500px; overflow: hidden; }
.abt-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.abt-caption{ margin-top: var(--space-3); }
.abt-caption ul{ padding-left: var(--list-pad); }

/* Photo labels overlay */
.about-page .abt-photo.with-label{ position: relative; overflow: hidden; }
.about-page .abt-photo.with-label img{
  display:block; width:100%; height:100%; object-fit:cover; position:relative; z-index:0;
}
.about-page .abt-photo.with-label::after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.42); z-index:1;
}
.about-page .photo-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; color: var(--text-on-primary);
  text-transform:uppercase; letter-spacing:.06em; font-weight:800; text-align:center;
  font-size: clamp(22px, 3vw, 40px); pointer-events:none; user-select:none;
}

/* Headline + Subheadline grid */
.abt-headline{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: var(--space-6) 0 var(--space-4);
  padding-top: 79px;
  padding-bottom: 40px;
}
@media (min-width:901px){
  .abt-headline .headline2,
  .abt-headline .subheadline2{ grid-row: 1; }
}
.abt-headline .headline2{
  margin: 0;
  text-align: left;
  line-height: var(--lh-headline);
}
.abt-headline .subheadline2{
  margin: 0;
  text-align: left;
  line-height: var(--lh-body);
  padding-right: var(--about-site-pad)
}

/* ========== 9) PARTNERS =================================================== */
.partners{ margin: var(--space-2) 0 var(--space-3); }
.partners .partner-row{
  display:flex; flex-wrap:wrap; gap:50px;
  justify-content:center; align-items:center; margin-top: var(--space-3);
  padding-bottom: 133px;
}
.partners .partner-row img{
  height:40px; max-height:40px; width:auto; object-fit:contain; display:block; opacity:.95;
}

/* ========== 10) HOME FULL-BLEED BANNER =================================== */
.home-banner{
  position: relative; height: 500px;
  width: 100vw; left: 50%; transform: translateX(-50%);
  overflow: hidden; background: #e5e7eb; max-width: none !important;
  background-image: var(--banner); background-size: cover; background-position: center; background-repeat: no-repeat;
}
@supports (width: 100dvw) { .home-banner{ width: 100dvw; } }

body.page-home .title,
body.page-home .page-title,
body.page-home h1.title { display:none; }
body.page-home { padding-top: 0 !important; }
body.page-home #content { margin-top: var(--header-safe) !important; }
body.page-home .home-banner{ margin-top: calc(-1 * var(--header-safe)) !important; }

/* ========== 11) HOME — SERVICES ========================================== */
.home-services{ padding: 48px 0 40px; }
.home-services .services-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: var(--svc-media-h);
  gap: 0;
  align-items: stretch;
  padding-top:100px;
}
.home-services .services-media{
  grid-column: 1; grid-row: 1 / span 2;
  padding: 0 var(--svc-split) 0 var(--site-pad);
  margin: 0;
}
.home-services .services-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.home-services .services-panel{
  grid-column: 2 / span 2; grid-row: 1 / span 2;
  padding: 0 var(--site-pad) 0 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: var(--svc-media-h);
  color: var(--text);
}
.home-services .services-title{
  margin: 0 0 20px;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--text);
}
.home-services .services-items{
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 100px;
  align-items: stretch;
}
.home-services .service-item{ display: flex; flex-direction: column; margin: 0; }
.home-services .service-item-link{ margin-top: auto; }
.home-services .service-item-title{
  margin: 0 0 10px;
  padding-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--svc-rule);
  font-size: 18px;
  line-height: var(--lh-h3);
}
.home-services .service-item-desc{
  margin: 10px 0 16px;
  color: var(--text);
  font-size: 16px;
  line-height: var(--lh-body);
}
.home-services .service-item-link{
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; color: var(--text); text-decoration: none;
}
.home-services .service-item-link::before{
  content: "";
  display: inline-block;
  width: var(--svc-cta-d);
  height: var(--svc-cta-d);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23194B47%22/%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M23.7397%2017.2621C24.0868%2016.9333%2024.0868%2016.4001%2023.7397%2016.0712L18.9989%2011.58C18.6518%2011.2511%2018.089%2011.2511%2017.7418%2011.58C17.3947%2011.9088%2017.3947%2012.442%2017.7418%2012.7709L20.9651%2015.8246H8.88889C8.39797%2015.8246%208%2016.2016%208%2016.6667C8%2017.1317%208.39797%2017.5088%208.88889%2017.5088H20.9651L17.7418%2020.5624C17.3947%2020.8913%2017.3947%2021.4245%2017.7418%2021.7534C18.089%2022.0822%2018.6518%2022.0822%2018.9989%2021.7534L23.7397%2017.2621Z%22%20fill%3D%22%23EAE5D7%22/%3E%20%3C/svg%3E");
}
.home-services .service-item-link:hover{ color: var(--link-hover-color); }

/* ========== 12) HOME — INTRO ============================================ */
.home-intro .intro-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:start; grid-auto-rows:min-content;
  padding-top: 86px;
}
.home-intro .intro-media{
  grid-column:2; grid-row:1;
  padding:0 var(--site-pad) 0 var(--split-pad);
}
.home-intro .intro-media img{
  width:100%; height:var(--intro-media-h); object-fit:cover; display:block; border-radius:0;
}
.home-intro .intro-panel{
  grid-column:1; grid-row:1;
  padding:0 0 0 var(--site-pad);
  display:flex; flex-direction:column; min-height:var(--intro-media-h); color:var(--text);
}
.home-intro .intro-title{ margin:0 0 12px; line-height:var(--lh-h1); white-space: pre-line; }
.home-intro .intro-text:first-of-type{ margin-top:auto; }
.home-intro .intro-text{ margin:12px 0 0; line-height:var(--lh-body); }
.home-intro .intro-text + .intro-text{ margin-top:12px; }
.home-intro .intro-actions{ margin-top:12px; padding-top:16px; }

/* ========== 13) FINAL FONT PATCH (kept minimal) ========================== */
html, body, button, input, select, textarea { font-family: var(--font-sans) !important; }
:where(h1,h2,h3,h4,h5,h6,p,li,a,span,small,strong,em,
       th,td,caption,label,
       .btn,.button,[class*="btn-"],
       .nav-link,.lang-btn,
       .card,.section-title,.page-title,.post-title,.entry-title){
  font-family: inherit !important;
}
[class*="icon"], .fa, .fas, .far, .fal, .fab,
.material-icons, i, svg, code, pre, kbd, samp { font-family: initial !important; }
*::before, *::after { font-family: inherit; }

/* ========== 14) CONTACT PAGE ============================================ */
.contact-page{
  padding: var(--space-5) 0 var(--space-3);
}

/* Headings */
.contact-page .headline,
.contact-page .contact-section > .section-title{
  text-align: center;
  margin-bottom: var(--space-4);
  padding: 38px 0;
  padding-bottom: 64px;
  color: var(--text);
  line-height: var(--lh-title);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
}
.contact-page .contact-section{
  margin: 0 0 var(--space-6);
  padding-bottom:50px;
}

/* Card */
.contact-page .contact-card{
  width: 100%;
  max-width: 760px !important;
  margin: 0 auto;
  padding: var(--space-4);
  box-sizing: border-box;
  text-align: initial !important;
}

/* Form */
.contact-page .contact-form{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  justify-items: stretch; /* giữ nguyên logic hiện tại */
}
.contact-page .contact-form .btn{ justify-self: start; }

/* Label & control spacing */
.contact-page .form-label{
  display:block;
  margin: 0 0 var(--space-1);
  text-align: left;
}
.contact-page .form-control{
  width: 100%;
  max-width: 720px;
  margin: 0 0 var(--space-3);
  text-align: left;
  box-sizing: border-box;
}

/* Rounded controls like .btn */
.contact-page .form-control,
.contact-page select.form-control,
.contact-page textarea.form-control{
  border-radius: var(--btn-radius, var(--radius-btn, var(--radius, 9999px)));
  border: 1px solid var(--card-border, #e6e6e6);
  background: var(--card, #fff);
  padding: 12px 16px;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Heights */
.contact-page input.form-control,
.contact-page select.form-control{ min-height: 44px; }

.contact-page textarea.form-control{
  min-height: 120px;
  resize: vertical;
}

/* Hover/Focus */
.contact-page .form-control:hover{
  border-color: color-mix(in srgb, var(--primary, #194b46) 30%, #0000);
}
.contact-page .form-control:focus{
  outline: none;
  border-color: var(--primary, #194b46);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #194b46) 20%, #0000);
}

/* Disabled */
.contact-page .form-control:disabled{
  background: var(--bg-soft, #f8faf9);
  color: var(--muted, #4b5563);
  cursor: not-allowed;
}

/* Select caret */
.contact-page select.form-control{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* File input */
.contact-page input[type="file"].form-control{ padding: 10px 16px; }

/* Branch grid */
.branch-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0 24px;
  column-gap: 72px;
}
.branch-card .section-title{ margin-top: 0; font-size: 40px; color: var(--text); }
.branch-card .slab-lines{ color: var(--text); margin: 0 0 var(--space-3); padding-bottom: 18px; }
.branch-card .slab-lines li{ margin: var(--space-2) 0; line-height: var(--lh-list); }
.branch-card .map-embed{ margin-top: var(--space-3); padding-bottom: 36px; }

/* SPECIFIC: Nhu cầu (need) — radius 32px */
#need.form-control,
.form-control.need-control{
  border-radius: 32px !important;
}
.contact-page .contact-form > p{ margin:0; }
.contact-page .contact-form > p:empty{ display:none; }

/* ========== 15) FOOTER ==================================================== */
.site-footer{ background: var(--primary); color: var(--text-on-primary); }
.site-footer a{ color: var(--text-on-primary); }
.site-footer a:hover{ color: var(--hover-text-on-primary); }

/* CTA block */
.site-footer .fid-footer-cta{ background: var(--primary); color: var(--text-on-primary); }
.site-footer .fid-footer-cta__inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px; padding: 28px 0 20px;
}
.site-footer .fid-footer-cta__title{
  margin:0; padding-top: 68px; text-transform:uppercase; letter-spacing:.02em;
  line-height:1.05; color: var(--text-on-primary);
  font-size: clamp(28px, 5vw, 100px);
}
.site-footer .fid-footer-cta__sub{
  display:block; margin-top:6px; font-size:.36em; letter-spacing:.08em; opacity:.96;
  padding-top: 24px; padding-bottom: 8px;
}
.site-footer .fid-footer-cta__btn{
  margin-top:6px; color: var(--primary);
  background: var(--text-on-primary); border-color: var(--text-on-primary);
}
.site-footer .fid-footer-cta__btn:hover{ filter: brightness(0.95); transform: translateY(-1px); }

/* Slab 4 cols */
.site-footer .footer-slab{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7); padding: var(--space-8) 0; align-items:stretch;
}
.site-footer .brand-col{
  grid-column: 1 / span 2;
  display:flex; align-items:center; justify-content:flex-start; gap: var(--space-4);
  min-width:0;
}
.site-footer .f-brand{ display:flex; align-items:center; gap: var(--space-4); color: var(--text-on-primary); text-decoration:none; }
.site-footer .f-logo{ width: 680px; height:180px; padding-left: 72px; object-fit:contain; flex:0 0 auto; }
.site-footer .f-name{ display:flex; flex-direction:column; gap:2px; line-height:1.1; color: var(--text-on-primary); }
.site-footer .f-line1{ font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing:.02em; }
.site-footer .f-line2{ font-size: clamp(18px, 1.9vw, 26px); font-weight: 700; letter-spacing:.01em; opacity:.95; }

.site-footer .slab-title{
  margin:0 0 var(--space-3); font-size: clamp(16px,1.6vw,24px);
  color: var(--text-on-primary); letter-spacing:.08em; text-transform:uppercase; line-height: var(--lh-title);
  padding-bottom: 16px;
}
.site-footer .slab-subtitle{
  margin:0 0 var(--space-2); text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-on-primary); line-height: var(--lh-h5);
}
.site-footer .slab-group{ margin: 0 0 var(--space-4); }

/* List + icons */
.site-footer{ --icon-size: 18px; --icon-gap: 10px; }
.site-footer .slab-lines{ list-style:none; margin:0; padding-left:0; }
.site-footer .slab-lines li{
  display:flex; align-items:flex-start; gap: var(--icon-gap); margin:6px 0;
}
.site-footer .slab-lines li::before{
  content:""; flex:0 0 var(--icon-size); height: var(--icon-size);
  margin-top:2px; background: currentColor;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}

/* Address icon only first line */
.site-footer .slab-lines--addr li::before{
  background:none; -webkit-mask-image:none; mask-image:none;
}
.site-footer .slab-lines--addr li:first-child::before{
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 21s7-7.03 7-12a7 7 0 1 0-14 0c0 4.97 7 12 7 12z'/>\
<circle cx='12' cy='9' r='2.5' fill='none' stroke='black' stroke-width='2.2'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M12 21s7-7.03 7-12a7 7 0 1 0-14 0c0 4.97 7 12 7 12z'/>\
<circle cx='12' cy='9' r='2.5' fill='none' stroke='black' stroke-width='2.2'/>\
</svg>");
}

/* Contact icons by line */
.site-footer .slab-lines--contact li.is-email::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<rect x='3' y='5' width='18' height='14' rx='2' ry='2' fill='none' stroke='black' stroke-width='2.2'/>\
<path d='M4 7.5L12 12.5L20 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<rect x='3' y='5' width='18' height='14' rx='2' ry='2' fill='none' stroke='black' stroke-width='2.2'/>\
<path d='M4 7.5L12 12.5L20 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}
.site-footer .slab-lines--contact li.is-phone::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 10.7a15.8 15.8 0 0 0 6.8 6.8l2.2-2.2a1 1 0 0 1 1-.25c1.2.36 2.4.55 3.6.57a1 1 0 0 1 1 1v3.4a1 1 0 0 1-1 1A18 18 0 0 1 3 6.9a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c.02 1.2.21 2.4.57 3.6a1 1 0 0 1-.25 1l-2.22 2.2z'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 10.7a15.8 15.8 0 0 0 6.8 6.8l2.2-2.2a1 1 0 0 1 1-.25c1.2.36 2.4.55 3.6.57a1 1 0 0 1 1 1v3.4a1 1 0 0 1-1 1A18 18 0 0 1 3 6.9a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c.02 1.2.21 2.4.57 3.6a1 1 0 0 1-.25 1l-2.22 2.2z'/>\
</svg>");
}

/* Copyright */
.site-footer .footer-bottom{
  background: var(--primary); padding: var(--space-3) 0; padding-left: 48px; font-size:14px;
}
.site-footer .footer-bottom span{
  color: color-mix(in srgb, var(--text-on-primary) 75%, #000 25%);
}

/* Footer CTA: Email form */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.site-footer .fid-footer-cta__form{ width: min(680px, 100%); }
.site-footer .fid-input-wrap{ display:flex; align-items:center; gap: 8px; padding-bottom: 120px; }
.site-footer .fid-input-wrap input[type="email"]{
  flex:1 1 auto; min-width: 0; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--text-on-primary) 55%, transparent);
  background: transparent; color: var(--text-on-primary); font-size: 16px; outline: none;
}
.site-footer .fid-input-wrap input[type="email"]::placeholder{
  color: color-mix(in srgb, var(--text-on-primary) 70%, transparent);
}
.site-footer .fid-input-wrap input[type="email"]:focus{
  border-color: var(--text-on-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-on-primary) 25%, transparent);
}
.site-footer .fid-submit{
  flex:0 0 auto; width: var(--fid-submit-d); height: var(--fid-submit-d);
  border:none; border-radius:50%; cursor:pointer;
  background-repeat:no-repeat; background-size:100% 100%; background-position:center;
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23EAE5D7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.7397 17.2621C24.0868 16.9333 24.0868 16.4001 23.7397 16.0712L18.9989 11.58C18.6518 11.2511 18.089 11.2511 17.7418 11.58C17.3947 11.9088 17.3947 12.442 17.7418 12.7709L20.9651 15.8246H8.88889C8.39797 15.8246 8 16.2016 8 16.6667C8 17.1317 8.39797 17.5088 8.88889 17.5088H20.9651L17.7418 20.5624C17.3947 20.8913 17.3947 21.4245 17.7418 21.7534C18.089 22.0822 18.6518 22.0822 18.9989 21.7534L23.7397 17.2621Z' fill='%232D4946'/%3E%3C/svg%3E");
  transition: transform .12s var(--ease-1), filter .12s var(--ease-1);
}
.site-footer .fid-submit:hover{ transform: translateY(-1px); filter: brightness(0.97); }
.site-footer .fid-submit:active{ transform: translateY(0); }

/* ===== MOBILE (≤900px) — Clean & Merge ===== */
@media (max-width: 900px){

  /* ---- Root + fluid type ---- */
  :root{
    --container-pad: 8px;
    --space-6: 12px;

    --fs-base: clamp(14px, 3.6vw, 16px);
    --fs-hero: clamp(28px, 9vw, 44px);
    --fs-section: clamp(28px, 8vw, 40px);
    --fs-h1: clamp(26px, 7.5vw, 36px);
    --fs-h2: clamp(24px, 7vw, 32px);
    --fs-h3: clamp(18px, 5.6vw, 24px);
    --fs-h4: clamp(16px, 5vw, 20px);
    --fs-h5: clamp(15px, 4.6vw, 18px);
    --fs-h6: clamp(14px, 4.2vw, 16px);

    --fs-sub: clamp(14px, 4vw, 16px);
    --fs-svc-title: clamp(18px, 5.6vw, 26px);
    --fs-svc-item-title: clamp(14px, 4.6vw, 18px);
    --fs-svc-item-desc: clamp(14px, 4vw, 16px);
    --fs-stat-number: clamp(22px, 12vw, 28px);
  }
  html, body{ overflow-x:hidden; }
  html{ font-size: var(--fs-base); }
  body{ padding-top: 56px !important; }                 /* header fixed */

  /* ---- Ẩn banner Home trên mobile ---- */
  body.page-home .home-banner{ display:none !important; }
  body.page-home #content{ margin-top: 0 !important; }

  /* ---- Typography fluid ---- */
  body, p, li, dd, figcaption, blockquote{ font-size:1rem; line-height: var(--lh-body,1.6); }
  h1, .hero-title{ font-size: var(--fs-hero) !important; line-height: var(--lh-h1,1.2) !important; }
  h2, .section-title,
  .services-page .headline,
  .about-page .headline1,
  .about-page .headline2,
  .about-page .headline3,
  .home-services .services-title{
    font-size: var(--fs-section) !important; line-height:1.4 !important; margin:0!important; padding:0!important;
  }
  .about-page .headline3{
    padding-top:20px!important;
  }
  h3, .card h3{ font-size: var(--fs-h3) !important; line-height: var(--lh-h3,1.2) !important; }
  h4{ font-size: var(--fs-h4) !important; line-height: var(--lh-h4,1.2) !important; }
  h5{ font-size: var(--fs-h5) !important; line-height: var(--lh-h5,1.2) !important; }
  h6{ font-size: var(--fs-h6) !important; line-height: var(--lh-h6,1.2) !important; }
  .services-page .subheadline,
  .abt-headline .subheadline2{ font-size: var(--fs-sub) !important; }
  .services-page .subheadline{
    text-align: center;
    margin-bottom: var(--space-4);
    padding: 0 8px 0 8px;
  }
  .services-page .svc-title{ font-size: var(--fs-svc-title) !important; line-height:1.25 !important; }
  .home-services .service-item-title,
  .abt-title, .abt-block h3{ font-size: var(--fs-svc-item-title) !important; }
  .home-services .service-item-desc{ font-size: var(--fs-svc-item-desc) !important; }
  .home-stats .stat-number{ font-size: var(--fs-stat-number) !important; line-height:1 !important; }
  .home-services .service-item-title{
    padding-top:20px!important;
  }
  /* ---- Header (fixed) + ẩn nav desktop ---- */
  .site-header{
    position: fixed !important; top:0; left:0; right:0; z-index:1000;
    background: var(--primary) !important; color: var(--text-on-primary) !important;
    padding:12px 8px !important; border-bottom:none;
  }
  .brand-logo{ width:88px; height:28px; object-fit:contain; margin-left:8px}
  .nav, .main-nav, .site-header .lang-dropdown{ display:none !important; }

  /* Hamburger (căn giữa theo chiều dọc) */
  .fid-nav-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    position:absolute; right:16px; top:50%; transform: translateY(-50%);
    width:40px; height:40px; border:0; background:transparent; color:var(--text-on-primary); z-index:1100;
  }
  .fid-nav-toggle:active{ transform: translateY(calc(-50% + 1px)); }
  .fid-burger{ display:block; }

  /* ---- Off-canvas mobile nav ---- */
  #fid-mobile-nav{
    display:block; position:fixed; inset:0 0 0 30%;
    background: var(--text-on-primary); color: var(--primary);
    transform: translateX(100%); transition: transform var(--dur-2,.2s) var(--ease-1,cubic-bezier(.2,.6,.2,1));
    box-shadow:-6px 0 24px rgba(0,0,0,.1); z-index:1200;
  }
  body.fid-menu-open #fid-mobile-nav{ transform: translateX(0); }
  body.fid-menu-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1190; }
  .fid-mobile-brand{ display:none !important; }
  .fid-mobile-nav__inner{ display:flex; flex-direction:column; height:100%; padding:20px 16px 24px; gap:12px; overflow:auto; color:var(--primary); }
  .fid-mobile-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
  .fid-nav-close{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; color:var(--primary); }
  .fid-mobile-menu{ list-style:none; margin:6px 0 0; padding:0; }
  .fid-mobile-menu li{ border-bottom:1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
  .fid-mobile-menu a{ display:block; padding:14px 4px; text-decoration:none; color:var(--primary); font-weight:600; }
  .fid-mobile-menu a:hover{ color: color-mix(in srgb, var(--primary) 85%, #000 15%); }

  /* Dropdown ngôn ngữ trong mobile panel */
  .fid-mobile-lang{ display:flex; padding-top:8px; }
  .fid-mobile-lang .lang-dropdown{ display:flex !important; position:relative; align-items:center; }
  .fid-mobile-lang .lang-btn{
    display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
    border-radius: var(--radius-sm); border:1px solid var(--primary); background:transparent; color:var(--primary);
    font-size:16px; user-select:none;
    transition: background-color var(--dur-1,.15s) var(--ease-1), color var(--dur-1,.15s) var(--ease-1), border-color var(--dur-1,.15s) var(--ease-1);
  }
  .fid-mobile-lang .lang-btn .chev{ width:14px; height:14px; transition: transform var(--dur-1,.15s) var(--ease-1); }
  .fid-mobile-lang .lang-btn:hover{ background: color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); border-color:var(--primary); }
  .lang-dropdown--mobile .lang-menu{
    position:absolute; right:0; top:calc(100% + 6px);
    width:max-content; min-width:100%; max-width:320px; background:var(--white); color:var(--text);
    border: var(--border-1); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.1);
    padding:4px; margin:0; list-style:none; opacity:0; visibility:hidden; pointer-events:none; z-index:1300;
    transition: opacity var(--dur-1,.15s), visibility var(--dur-1,.15s);
  }
  .lang-dropdown--mobile.is-open .lang-menu{ opacity:1; visibility:visible; pointer-events:auto; }
  .lang-dropdown--mobile.is-open .lang-btn .chev{ transform: rotate(180deg); }
  .lang-dropdown--mobile .lang-item{ display:block; padding:8px 12px; border-radius:10px; color:var(--text); background:var(--white); white-space:nowrap; font-size:16px; }
  .lang-dropdown--mobile .lang-item:hover,
  .lang-dropdown--mobile .lang-item:focus-visible{ background:#f4f6f8; color: var(--link-hover-color); }
  .lang-dropdown--mobile .lang-item.active{ font-weight:700; }

  /* ---- One-column grid chung ---- */
  .home-intro .intro-grid,
  .home-services .services-grid,
  .home-services .services-items,
  .services-page .svc-section,
  .abt-section, .abt-2col,
  .branch-grid,
  .site-footer .footer-slab{
    display:grid !important;
    grid-template-columns: 1fr!important;   /* fix: 1 column */
    grid-template-rows: auto !important;
    gap: 16px !important;
  }
  .services-page #technology-integration.svc-section{
    padding-bottom:80px!important;

  }
  .abt-2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin: var(--space-3) 0 var(--space-4);
    padding: 0 8px;
    column-gap: 72px;
  }
  .home-stats .stats-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr!important;
    grid-template-rows: auto !important;
    gap: 16px !important;
    row-gap: 0!important;
  }

  .container.wrap{ padding: 0 var(--container-pad) !important; }

  /* ---- Home Intro: IMG trên / TEXT dưới (200px) ---- */
  .home-intro .intro-media{ grid-column:1 !important; grid-row:1 !important; padding:0 var(--site-pad) !important; }
  .home-intro .intro-panel{ grid-column:1 !important; grid-row:2 !important; padding:0 var(--site-pad) !important; min-height:auto !important; }
  .home-intro .intro-media img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; }

  /* ---- Services page: IMG trên / TEXT dưới (200px) ---- */
  .services-page .svc-media{ grid-column:1 !important; grid-row:1 !important; padding:0 var(--site-pad) !important; }
  .services-page .svc-text{ grid-column:1 !important; grid-row:2 !important; padding:0 var(--site-pad) !important; min-height:auto !important; }
  .services-page .svc-media img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; }

  /* ---- Home Services ---- */
  .home-services .services-grid{ padding-top:20px !important; }
  .home-services .services-media{ grid-column:1 !important; grid-row:1 !important; padding:0 var(--site-pad) !important; margin:0 !important; }
  .home-services .services-panel{ grid-column:1 !important; grid-row:2 !important; padding:0 var(--site-pad) !important; min-height:auto !important; display:block !important; }
  .home-services .services-items{ grid-template-columns:1fr !important; row-gap:16px !important; column-gap:16px !important; }
  .home-services .services-media img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; }
  .home-services .service-item-link::before{
    width: calc(var(--svc-cta-d) * .8);
    height: calc(var(--svc-cta-d) * .8);
  }
  .home-services .service-item-link{
    padding-bottom:20px!important;
  }
  /* ---- Home Stats ---- */
  .home-stats{ padding-top: 240px; }
  .home-stats .stats-grid{ padding-top:180px !important; padding-bottom:40px !important; }
  .home-stats .stat-label{ margin-bottom:10px !important; font-size:12px !important; padding-bottom:0 !important; }

  /* ---- About page ---- */
  .abt-headline{
    display:grid; grid-template-columns:1fr; align-items:center;
    margin: var(--space-6) 0 var(--space-4); padding:40px 6px 20px!important;
    row-gap: 12px;
  }
  .abt-headline .headline2{ margin:0; text-align:left; line-height:var(--lh-headline); grid-row:1; }
  .abt-headline .subheadline2{ margin:0; text-align:left; line-height:var(--lh-body); grid-row:2; }

  .abt-section{ padding-top:20px !important; }
  .abt-section .abt-media{
    grid-column:1 !important; grid-row:1 !important; padding:0 var(--about-site-pad) !important; height:200px !important;
  }
  .abt-section .abt-text{
    grid-column:1 !important; grid-row:2 !important; padding:0 var(--about-site-pad) !important; height:auto !important; gap:0 !important;
  }
  .abt-title{ margin:0 0 6px !important; padding-bottom:6px !important; }
  .abt-photo{ height:200px !important; overflow:hidden !important; }
  .abt-photo img, .abt-media img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; }

  .partners .partner-row{
    display:flex; flex-wrap:wrap; gap:20px; padding-bottom:60px!important; padding-top:10px!important;
  }
  .partners .partner-row img{
    height:20px; max-height:30px; 
  }
  .partner{height:40px!important}
  .contact-page .contact-section{
    padding-bottom:20px!important;
    padding-top: 40px!important;
  }
  .contact-page #consulting-form.contact-section{
    padding-left: 8px!important;
    padding-right: 8px!important;
  }
  /* ---- Contact branches ---- */
  .branch-grid{ grid-template-columns:1fr !important; padding:0 var(--site-pad) !important; }
  .branch-card .map-embed iframe,
  .branch-card .map-embed img{ width:100% !important; height:200px !important; display:block !important; }

  /* ---- Footer 1 cột + logo lên trên CTA ---- */
  .site-footer .footer-slab{
    grid-template-columns:1fr !important; gap:24px !important;
    padding: 0 24px !important; padding-bottom:30px !important;
  }
  .site-footer .footer-slab > *{ grid-column:1 !important; }
  .site-footer .brand-col{ grid-column:1 !important; justify-content:center !important; }
  .site-footer .f-brand{ justify-content:center !important; }
  .site-footer .slab-group{ margin:0 !important; }
  .site-footer .slab-title{ padding-bottom:8px !important; }

  /* Ẩn logo trong slab, chèn logo lên trên CTA title */
  .site-footer .f-logo{ display:none !important; }
  .site-footer .fid-footer-cta__inner::before{
    content:""; display:block; width:min(360px,80vw); height:90px; aspect-ratio:17/4.5;
    margin: 30px auto 12px; background:url("/img/FID-03.png") center/contain no-repeat;
  }
  .site-footer .fid-footer-cta__title{
    margin:0; padding-top:0; text-transform:uppercase; letter-spacing:.02em;
    line-height:1.05; color:var(--text-on-primary);
    font-size: clamp(22px, 5vw, 30px) !important; padding:0 8px!important;
  }
  .site-footer .fid-footer-cta__sub{ padding-top:8px !important; padding-bottom:4px !important; font-size:clamp(12px,5vw,16px) !important; }
  .site-footer .fid-footer-cta__inner{ gap:6px !important; }
  .site-footer .fid-input-wrap{ gap:8px; padding:0 16px !important; padding-bottom:20px !important; }

  .site-footer .footer-bottom{
    padding-left:16px !important; padding-right:16px !important; text-align:center !important;
  }
}