@charset "UTF-8";

/* ============================================================
   Saigon Light — Sub-page shared styles
   Matches home-demo visual language (maroon / gold / cinematic)
   ============================================================ */

:root{
  --maroon:#8B1A1F;
  --maroon-deep:#5A0E10;
  --maroon-soft:#A52929;
  --gold:#E8C465;
  --gold-soft:#F2D88E;
  --gold-bright:#FFE9AB;
  --gold-deep:#B8923A;
  --gold-rgb:232,196,101;
  --gold-shine:linear-gradient(135deg, #B8923A 0%, #E8C465 28%, #FFE9AB 50%, #E8C465 72%, #B8923A 100%);
  --dark:#0E0606;
  --darker:#050202;
  --night:#1A0A0B;
  --cream:#F7F1E8;
  --surface-glass:rgba(255,255,255,.03);
  --surface-glass-hover:rgba(255,255,255,.05);
  --surface-glass-border:rgba(232,196,101,.18);
  --surface-glass-border-hover:rgba(232,196,101,.5);
  --surface-glass-input:rgba(255,255,255,.04);
  --surface-glass-input-focus:rgba(255,255,255,.06);

  --font-display:'Oswald', sans-serif;
  --font-body:'Montserrat', sans-serif;
  --font-mono:'Montserrat', monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
em, i, address, cite, dfn, var { font-style:normal; }
html{ scroll-behavior:smooth; }
body{
  margin:0; padding:0;
  font:400 16px/1.7 var(--font-body);
  color:#2A0A0C;
  background:var(--darker);
  overflow-x:hidden;
  min-height:100vh;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--maroon); color:#2A0A0C; }

/* Ambient bg */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 40% at 12% 18%, rgba(139,26,31,.10), transparent 70%),
    radial-gradient(55% 38% at 88% 32%, rgba(232,196,101,.07), transparent 70%),
    radial-gradient(50% 35% at 30% 78%, rgba(232,196,101,.05), transparent 70%),
    radial-gradient(55% 40% at 80% 92%, rgba(139,26,31,.08), transparent 70%);
  background-attachment:fixed;
}

/* ============ NAV (sync với home-demo) ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 5vw;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .4s var(--ease);
}
.nav.scrolled{
  background:rgba(14,6,6,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,196,101,.15); padding:14px 5vw;
}
.logo{ display:inline-flex; align-items:center; color:#2A0A0C; text-decoration:none; }
.logo-img{ height:46px; width:auto; display:block; object-fit:contain; transition:opacity .25s ease; }
.logo:hover .logo-img{ opacity:.85; }

.nav-menu{ display:flex; gap:32px; list-style:none; padding:0; margin:0; }
.nav-menu a{
  color:rgba(42,10,12,.85); text-decoration:none;
  font:500 13px/1.15 var(--font-body); letter-spacing:.06em; text-transform:uppercase;
  position:relative; padding:8px 4px; transition:color .25s ease;
  display:inline-block;
}
.nav-menu a:hover{ color:#2A0A0C; }
.nav-menu a.active{ color:var(--gold); }
.nav-menu li > a:not(.active):hover::before{
  content:''; position:absolute; left:4px; right:4px; bottom:2px;
  height:1px; background:var(--gold);
}

.nav-menu .has-submenu{ position:relative; }
/* Invisible hover-bridge between parent link and submenu so mouse can travel */
.nav-menu .has-submenu::after{
  content:''; position:absolute; top:100%; left:-12px; right:-12px; height:16px;
}
.nav-menu .submenu{
  position:absolute; top:calc(100% + 14px); left:-14px;
  list-style:none; margin:0; padding:8px;
  min-width:260px;
  background:rgba(14,6,6,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(232,196,101,.2);
  border-radius:12px;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top left;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  z-index:100;
}
.nav-menu .has-submenu:hover .submenu,
.nav-menu .has-submenu:focus-within .submenu{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.nav-menu .submenu li{ padding:0; margin:0; }
.nav-menu .submenu a{
  display:block;
  padding:10px 14px;
  font:500 12px/1.4 var(--font-body); letter-spacing:.06em; text-transform:none;
  color:rgba(42,10,12,.85);
  border-radius:8px;
  transition:background .2s ease, color .2s ease;
}
.nav-menu .submenu a:hover{ background:rgba(232,196,101,.08); color:var(--gold); }
.nav-menu .submenu a.active{ color:var(--gold); background:rgba(232,196,101,.06); }
.nav-menu .submenu a::before{ display:none !important; }

.nav-cta{
  background:var(--gold-shine); background-size:200% 200%; background-position:0% 50%;
  color:var(--dark);
  padding:10px 22px; border-radius:4px;
  font:700 11px/1.15 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:background-position .6s var(--ease), transform .3s ease;
}
.nav-cta:hover{
  background-position:100% 50%;
  transform:translateY(-2px);
}

/* Hamburger button (mobile only) */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:0;
  padding:0; cursor:pointer;
  position:relative; z-index:101;
}
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:24px; height:2px;
  background:#fff;
  border-radius:2px;
  transform-origin:center;
  transition:transform .35s var(--ease), opacity .25s ease, background .25s ease;
}
.nav-toggle span:nth-child(1){ transform:translate(-50%, -7px); }
.nav-toggle span:nth-child(2){ transform:translate(-50%, 0); }
.nav-toggle span:nth-child(3){ transform:translate(-50%, 7px); }
.nav-toggle.open span{ background:var(--gold); }
.nav-toggle.open span:nth-child(1){ transform:translate(-50%, 0) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translate(-50%, 0) rotate(-45deg); }

body.nav-open{ overflow:hidden; }

/* ============ SUB PAGE HERO ============ */
.sub-hero{
  position:relative;
  min-height:360px;
  padding:140px 5vw 60px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.sub-hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  opacity:1;
  transform:scale(1.04);
  animation:subHeroZoom 14s ease-out forwards;
}
@keyframes subHeroZoom{ to{ transform:scale(1); } }
.sub-hero::after{
  content:none;
}
/* `.sub-hero-inner` width cap now lives in assets/css/utils/layout.css
 * (canonical `.container` at 1380px, aliased here). */
.sub-hero-crumb{
  font:600 11px/1.15 var(--font-mono); letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
  display:inline-flex; align-items:center; gap:12px;
}
.sub-hero-crumb::before{ content:''; width:36px; height:1px; background:var(--gold); }
.sub-hero-title{
  font:500 clamp(48px, 7vw, 100px)/1.15 var(--font-display);
  letter-spacing:-0.01em; margin:0;
  color:#2A0A0C;
  max-width:18ch;
}
.sub-hero-title em{
  font-weight:400;
  background:var(--gold-shine); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
@keyframes goldShimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.sub-hero-lead{
  margin-top:28px;
  font:300 17px/1.65 var(--font-body);
  color:rgba(42,10,12,.85);
  max-width:62ch;
}

/* ============ SECTION ============ */
.section{ padding:clamp(48px,5.5vw,84px) 5vw; position:relative; }
/* `.section-inner` width cap now lives in assets/css/utils/layout.css
 * (canonical `.container` at 1380px, aliased here). */
/* .section-head margin-bottom removed per user — each section partial controls its own head spacing */
.section-head.center{ text-align:center; }
.section-head .section-eyebrow,
.projects-head .section-eyebrow,
.cta-banner-inner .section-eyebrow,
.vision-vm-commit .section-eyebrow,
.section-eyebrow--center{
  display:inline-flex; align-items:center; gap:14px;
  font:600 12px/1.15 var(--font-mono); letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:18px;
  opacity:1; animation:none;
}
.section-head:not(.center) .section-eyebrow::before,
.projects-head .section-eyebrow::before{
  content:''; width:60px; height:1px; background:var(--gold-deep);
}
.section-head.center .section-eyebrow::before,
.section-head.center .section-eyebrow::after,
.cta-banner-inner .section-eyebrow::before,
.cta-banner-inner .section-eyebrow::after,
.vision-vm-commit .section-eyebrow::before,
.vision-vm-commit .section-eyebrow::after,
.section-eyebrow--center::before,
.section-eyebrow--center::after{
  content:''; width:30px; height:1px; background:var(--gold-deep);
}
.overline{
  font:600 11px/1.15 var(--font-mono); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:12px;
}
.section-head:not(.center) .overline::before{ content:''; width:30px; height:1px; background:var(--gold); }
.section-head.center .overline::before,
.section-head.center .overline::after{ content:''; width:30px; height:1px; background:var(--gold); }
.section-title{
  font:500 clamp(34px, 4.4vw, 64px)/1.08 var(--font-display);
  letter-spacing:-0.005em; margin:0 0 14px; color:#2A0A0C;
}
.section-title em{
  font-weight:400;
  background:var(--gold-shine); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.section-sub{
  font:300 17px/1.65 var(--font-body); color:rgba(42,10,12,.82);
  max-width:62ch; margin:14px 0 0;
}
.section-head.center .section-sub{ margin:14px auto 0; }

/* Circle arrow — CSS only (tránh WordPress chuyển → thành emoji SVG) */
.icon-circle-arrow{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(232,196,101,.3);
  background:transparent;
  color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0; line-height:0;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.icon-circle-arrow::before{
  content:'';
  display:block;
  width:8px; height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-1px, 1px);
}

/* ============ STATS GRID — shared homepage + about ============ */
.stats-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid rgba(232,196,101,.2);
  border-bottom:1px solid rgba(232,196,101,.2);
  padding:50px 0;
}
.stat-card{
  position:relative; padding:0 20px;
  text-align:left;
}
.stat-card:not(:last-child){ border-right:1px solid rgba(232,196,101,.15); }
.stat-num{
  font:500 clamp(56px, 7vw, 110px)/1.05 var(--font-display);
  background:linear-gradient(180deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:flex; align-items:flex-start; gap:2px;
  margin-bottom:12px;
}
.stat-num em{ -webkit-text-fill-color:var(--gold); font-style:normal; font-size:.55em; padding-top:.3em; font-weight:400; }
.stat-label{
  font:500 11px/1.5 var(--font-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(42,10,12,.72);
}
.about-stats-band .section-head{ margin-bottom:clamp(28px,4vw,44px); }
.about-stats-band .stats-grid{ margin-top:0; }

/* ============ STATS INTRO BOX — shared homepage + about ============ */
.stats-intro{ margin-bottom:clamp(40px,5vw,64px); }
.stats-intro-box{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0;
  align-items:stretch;
  min-height:clamp(320px,36vw,440px);
  padding:0;
  border:1px solid var(--surface-glass-border);
  border-radius:12px;
  background:var(--surface-glass);
  overflow:hidden;
}
.stats-intro-content{
  display:flex; flex-direction:column; justify-content:center;
  min-width:0;
  padding:clamp(36px,4.5vw,56px) clamp(32px,4vw,52px);
}
.stats-intro-title{
  font:500 clamp(32px,4.2vw,52px)/1.08 var(--font-display);
  letter-spacing:-0.005em; margin:0 0 18px; color:#2A0A0C;
  max-width:18ch;
}
.stats-intro-title em{
  font-weight:400;
  background:var(--gold-shine); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.stats-intro-body{
  font:300 17px/1.75 var(--font-body);
  color:rgba(42,10,12,.85);
  max-width:54ch;
}
.stats-intro-body p{ margin:0 0 14px; }
.stats-intro-body p:last-child{ margin-bottom:0; }
.stats-intro-body em{ color:var(--gold-deep); font-style:normal; font-weight:500; }
.stats-intro-cta{ margin-top:clamp(24px,3vw,32px); }
.stats-intro-media{
  position:relative; min-height:100%;
  align-self:stretch;
  border-radius:0;
  overflow:hidden;
  background-size:cover; background-position:center;
  border:0;
}
.stats-intro-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(247,241,232,.22) 0%, transparent 28%);
  pointer-events:none;
}
.about-intro-stats .stats-grid{ margin-top:0; }

@media (max-width:900px){
  .stats-intro-box{ grid-template-columns:1fr; }
  .stats-intro-content{ padding:clamp(28px,5vw,40px); }
  .stats-intro-media{ min-height:clamp(220px,42vw,320px); order:-1; }
  .stats-intro-title{ max-width:none; }
}

/* ============ BUTTONS — legacy block REMOVED 2026-06 v17 ============
 *
 * Was: solid-gold `.btn-gold` body + solid-maroon `.btn-primary` body +
 * shine-sweep `::before` overlay. These rules had higher specificity
 * than the canonical glass `.btn` system (the `a.btn-gold` / `button.btn-gold`
 * selectors add an element token) and were painting the buttons a flat
 * yellow ("vàng khè"). Stripped so the canonical liquid glass recipe in
 * `wp-content/themes/monatheme-child/assets/css/cinematic-2026.css §6`
 * is what actually renders. */

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* ============ SURFACE CARD — glass panel (review-card pattern) ============ */
.surface-card{
  position:relative;
  background:var(--surface-glass);
  border:1px solid var(--surface-glass-border);
  border-radius:16px;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.surface-card:hover{
  border-color:var(--surface-glass-border-hover);
  background:var(--surface-glass-hover);
}

/* ============ QUOTE MARKS — đồng bộ dấu nháy ============ */
.quote-decor{
  position:absolute;
  top:8px;
  left:28px;
  font:500 90px/1.15 var(--font-display);
  color:var(--maroon-soft);
  opacity:.7;
  pointer-events:none;
  line-height:1;
}
.quote-decor::before{
  content:"\201C";
}
.quote-decor-sm{
  flex-shrink:0;
  font:700 24px/1 var(--font-display);
  color:var(--gold);
  line-height:1;
}
.quote-decor-sm::before{
  content:"\201C";
}
.quote-inline{
  quotes:none;
}
.quote-inline::before{
  content:"\201C";
  color:var(--gold);
  margin-right:.12em;
}
.quote-inline::after{
  content:"\201D";
  color:var(--gold);
  margin-left:.12em;
}

/* ============ CARDS — generic ============ */
.card-grid{
  display:grid; gap:24px;
}
.card-grid-2{ grid-template-columns:1fr 1fr; }
.card-grid-3{ grid-template-columns:repeat(3, 1fr); }
.card-grid-4{ grid-template-columns:repeat(4, 1fr); }

.card{
  position:relative;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.card:hover{
  border-color:rgba(232,196,101,.4);
  background:rgba(255,255,255,.04);
  transform:translateY(-3px);
}
.card-img{
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  position:relative;
}
.card-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(14,6,6,.7) 100%);
}
.card-tag{
  position:absolute; top:14px; left:18px; z-index:2;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  padding:4px 10px;
  background:rgba(14,6,6,.55);
  backdrop-filter:blur(8px);
  border-radius:4px;
}
.card-body{ padding:24px 26px; display:flex; flex-direction:column; gap:10px; }
.card-eyebrow{ font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.card-title{ font:500 22px/1.25 var(--font-display); color:#2A0A0C; margin:0; }
.card-title em{ color:var(--gold); font-weight:400; }
.card-desc{ font:300 14px/1.6 var(--font-body); color:rgba(42,10,12,.78); margin:0; }
.card-link{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}

/* ============ BREADCRUMB ============ */
.crumbs{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font:600 11px/1.15 var(--font-mono); letter-spacing:.32em; text-transform:uppercase;
  color:rgba(42,10,12,.72); margin-bottom:22px;
}
.crumbs a{ color:var(--gold); transition:color .25s ease; }
.crumbs a:hover{ color:var(--gold-bright); }
.crumbs .sep{ color:rgba(42,10,12,.55); }

/* ============ DETAIL OVERVIEW (service / project) ============ */
.detail-overview{
  display:grid; grid-template-columns:1.9fr 1fr; gap:clamp(40px,6vw,96px);
  align-items:start;
}
.detail-overview-text p{ font:300 17px/1.75 var(--font-body); color:rgba(42,10,12,.85); margin:0 0 18px; max-width:56ch; }
.detail-meta-card{
  background:linear-gradient(160deg, rgba(139,26,31,.16) 0%, rgba(232,196,101,.04) 80%, transparent);
  border:1px solid rgba(232,196,101,.22);
  border-radius:14px;
  padding:28px 26px;
  display:flex; flex-direction:column; gap:0;
}
.detail-meta-card .row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  gap:16px;
}
.detail-meta-card .row:last-child{ border-bottom:0; }
.detail-meta-card .k{ font:600 10px/1.2 var(--font-mono); letter-spacing:.28em; text-transform:uppercase; color:rgba(42,10,12,.72); }
.detail-meta-card .v{ font:500 24px/1.15 var(--font-display); color:var(--gold-soft); text-align:right; }

/* ============ INCLUSIONS LIST (service detail) ============ */
.incl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; }
.incl-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.incl-check{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(140deg, rgba(232,196,101,.22), rgba(139,26,31,.18));
  border:1px solid rgba(232,196,101,.4);
  display:grid; place-items:center;
  color:var(--gold);
}
.incl-check svg{ width:14px; height:14px; }
.incl-item .ctxt{ display:flex; flex-direction:column; gap:4px; }
.incl-item h4{ font:500 17px/1.25 var(--font-display); color:#2A0A0C; margin:0; }
.incl-item p{ font:300 13px/1.55 var(--font-body); color:rgba(42,10,12,.78); margin:0; }

/* ============ RELATED GRID (3 cards) ============ */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.related-card{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
  display:block;
}
.related-card:hover{ border-color:rgba(232,196,101,.45); transform:translateY(-4px); }
.related-card .ri{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  transition:transform .55s var(--ease);
}
.related-card:hover .ri{ transform:scale(1.04); }
.related-card .rb{ padding:22px 24px 24px; }
.related-card .rm{ font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.related-card .rt{ font:500 19px/1.3 var(--font-display); color:#2A0A0C; margin:0; }
.related-card .rt em{ color:var(--gold); font-weight:400; }

/* ============ CTA STRIP ============ */
.cta-strip{
  margin-top:60px;
  background:linear-gradient(160deg, rgba(139,26,31,.28) 0%, rgba(232,196,101,.06) 80%, transparent);
  border:1px solid rgba(232,196,101,.25);
  border-radius:16px;
  padding:clamp(36px,5vw,56px) clamp(28px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-strip h3{ font:500 clamp(22px,3vw,34px)/1.2 var(--font-display); color:#2A0A0C; margin:0; max-width:30ch; }
.cta-strip h3 em{ color:var(--gold); font-weight:400; }
.cta-strip-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============ ARTICLE BODY (news detail) ============ */
.article-body{
  max-width:760px; margin:0 auto;
  font:400 17px/1.85 var(--font-body); color:rgba(42,10,12,.88);
}
.article-body h2{
  font:500 clamp(26px,3vw,36px)/1.2 var(--font-display);
  color:#2A0A0C; margin:48px 0 18px;
}
.article-body h2 em{ color:var(--gold); font-weight:400; }
.article-body h3{
  font:500 22px/1.25 var(--font-display); color:#2A0A0C; margin:36px 0 12px;
}
.article-body p{ margin:0 0 20px; }
.article-body img, .article-body .figure{
  margin:36px 0; width:100%; border-radius:12px;
  background-size:cover; background-position:center;
  aspect-ratio:16/9;
}
.article-body figcaption{
  font:600 10px/1.4 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(42,10,12,.62); margin-top:10px;
}
.article-body blockquote{
  margin:36px 0; padding:24px 28px;
  border-left:3px solid var(--gold);
  background:rgba(232,196,101,.05);
  font:400 italic 22px/1.5 var(--font-display);
  color:#2A0A0C;
}
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:24px; }
.article-body li{ margin-bottom:8px; }
.article-body strong{ color:#2A0A0C; }
.article-body a{ color:var(--gold); border-bottom:1px solid rgba(232,196,101,.4); }

.article-head{ text-align:center; max-width:760px; margin:0 auto 48px; }
.article-meta{
  display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(42,10,12,.68); margin-bottom:18px;
}
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); }

/* ============ PROJECT DETAIL — IMAGE GALLERY ============ */
.detail-gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.detail-gallery .gi{
  aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.detail-gallery .gi:hover{ transform:scale(1.02); border-color:rgba(232,196,101,.4); }
.detail-gallery .gi.big{ grid-column:span 2; aspect-ratio:21/9; }

@media (max-width:900px){
  .detail-overview{ grid-template-columns:1fr; }
  .incl-grid{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:1fr 1fr; }
  .detail-gallery{ grid-template-columns:1fr 1fr; }
  .detail-gallery .gi.big{ grid-column:auto; aspect-ratio:16/10; }
}
@media (max-width:600px){
  .related-grid{ grid-template-columns:1fr; }
  .detail-gallery{ grid-template-columns:1fr; }
  .cta-strip{ flex-direction:column; align-items:flex-start; }
}

/* ============ CONTACT FORM (shared) ============ */
.contact-form{ display:grid; gap:28px; }
.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.contact-field{
  background:transparent; border:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:14px 0 10px;
  color:#2A0A0C; font-family:var(--font-body); font-size:16px;
  width:100%; outline:none;
  transition:border-color .35s ease;
}
.contact-field::placeholder{ color:rgba(42,10,12,.55); }
.contact-field:focus{ border-bottom-color:var(--maroon-soft); }
.contact-form label{ display:block; }
.contact-form label .label{
  display:block; margin-bottom:8px;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(42,10,12,.72);
}
.contact-form textarea.contact-field{ resize:vertical; min-height:90px; }
.contact-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.contact-chip{
  font:500 11px/1.15 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:transparent;
  color:rgba(42,10,12,.78);
  transition:all .25s ease;
}
.contact-chip:hover{ color:#2A0A0C; border-color:rgba(232,196,101,.45); }
.contact-chip.on{ border-color:var(--maroon); background:var(--maroon); color:#2A0A0C; }
.contact-submit{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; gap:16px; flex-wrap:wrap;
}
.contact-submit .label-note{
  font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(42,10,12,.6);
}
.contact-success{ padding:40px 0; display:none; }
.contact-success.show{ display:block; }
.contact-success p{ font:400 28px/1.3 var(--font-display); max-width:20ch; margin:14px 0 28px; }

/* ============ FOOTER ============
 * Legacy footer block removed in the 2026-06 footer remake (same purge
 * that cleared homepage.css). Footer is now owned by the child theme —
 * see wp-content/themes/monatheme-child/footer.php +
 *     wp-content/themes/monatheme-child/assets/css/child-theme.css §FOOTER.
 * The legacy `.footer-grid` / `.footer-meta` carried `max-width:1280px;
 * margin:0 auto` that the new layout intentionally rejects in favour of
 * the canonical `.container` utility (assets/css/utils/layout.css). */

/* ============ FCTA (back-to-top + hotline + zalo) ============ */
.fcta-wrap{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fcta{
  display:inline-flex; align-items:center;
  background:rgba(14,6,6,.92); color:#2A0A0C;
  border:1px solid rgba(255,255,255,.12);
  padding:7px;
  border-radius:999px;
  font:500 11px/1.15 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease, padding .35s ease, border-color .25s ease;
}
.fcta:hover{ padding:7px 18px 7px 7px; }
.fcta-call:hover{ background:var(--maroon); }
.fcta-zalo:hover, .fcta-top:hover{ background:rgba(14,6,6,.7); }
.fcta-icon{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0;
}
.fcta-call .fcta-icon{ background:var(--maroon); }
.fcta-zalo .fcta-icon{
  font:700 14px/1.15 var(--font-display);
  color:#1a1411;
}
.fcta-top .fcta-icon{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#2A0A0C;
}
.fcta-text{
  max-width:0; margin-left:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .4s ease, opacity .3s ease, margin .35s ease;
}
.fcta:hover .fcta-text{ max-width:260px; margin-left:10px; margin-right:4px; opacity:1; }
.fcta-top{
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background .25s ease, padding .35s ease;
}
.fcta-top.show{ opacity:1; pointer-events:auto; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .nav{ gap:12px; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ margin-left:auto; padding:8px 14px; font-size:10px; }

  /* Convert nav-menu to slide-down drawer */
  .nav-menu{
    position:fixed; top:0; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(8,4,4,.98);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:96px 32px 40px;
    max-height:100vh; overflow-y:auto;
    opacity:0; transform:translateY(-100%); pointer-events:none;
    transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
    z-index:99;
    border-bottom:1px solid rgba(232,196,101,.18);
  }
  .nav-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-menu li{ width:100%; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav-menu li:last-child{ border-bottom:0; }
  .nav-menu a{
    display:block; width:100%; padding:18px 0;
    font-size:18px; letter-spacing:.04em;
  }
  .nav-menu li > a:not(.active):hover::before{ display:none; }
  .nav-menu .has-submenu::after{ display:none; }
  .nav-menu .submenu{
    position:static; opacity:1; transform:none; pointer-events:auto;
    background:transparent; backdrop-filter:none;
    border:0; border-radius:0; padding:0 0 18px 18px;
    min-width:auto;
  }
  .nav-menu .submenu li{ border:0; }
  .nav-menu .submenu a{ padding:10px 0; font-size:14px; color:rgba(42,10,12,.75); }
  .nav-menu .submenu a:hover{ color:var(--gold); background:transparent; }

  .card-grid-2, .card-grid-3, .card-grid-4{ grid-template-columns:1fr 1fr; }
  .contact-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-card:not(:last-child){ border-right:0; }
}
@media (max-width: 600px){
  .nav{ padding:14px 5vw; }
  .logo-img{ height:36px; }
  .nav-cta{ padding:8px 12px; font-size:10px; gap:4px; }
  .card-grid-2, .card-grid-3, .card-grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .fcta-wrap{ right:14px; bottom:14px; gap:8px; }
  .sub-hero{ min-height:auto; padding:140px 5vw 60px; }
  .crumbs{ font-size:10px; letter-spacing:.24em; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
}