/* Sàn Smart City — Design System V2
 * Loaded after legacy styles so every public route shares one visual language.
 */
:root {
  --color-primary:#8f1d26; --color-primary-dark:#68131a; --color-accent:#c69a55;
  --color-text:#18212b; --color-text-muted:#66717d; --color-bg:#f7f6f3;
  --color-surface:#fff; --color-border:#e5e2dc; --color-dark:#101820;
  --font-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-xs:.5rem; --space-sm:.875rem; --space-md:1.5rem; --space-lg:2.5rem;
  --space-xl:clamp(3.5rem,7vw,6.5rem); --radius-sm:.5rem; --radius-md:1rem;
  --radius-lg:1.5rem; --shadow-sm:0 1px 3px rgba(16,24,32,.06);
  --shadow-md:0 14px 38px rgba(16,24,32,.08); --shadow-lg:0 24px 70px rgba(16,24,32,.12);
  --container-width:1180px; --reading-width:760px; --header-height:68px;
  /* Compatibility aliases while V1 templates are incrementally retired. */
  --ink:var(--color-text); --muted:var(--color-text-muted); --line:var(--color-border);
  --paper:var(--color-surface); --soft:var(--color-bg); --brand:var(--color-primary);
  --brand2:var(--color-primary-dark); --dark:var(--color-dark); --maxw:var(--container-width);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 1rem);overflow-x:clip}
body{margin:0;color:var(--color-text);background:var(--color-surface);font-family:var(--font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto} a{color:inherit;text-underline-offset:.18em} button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--color-text);letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.15rem,5vw,4rem);line-height:1.08} h2{font-size:clamp(1.65rem,3.2vw,2.7rem);line-height:1.18} h3{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.3}
p{max-width:72ch} small,.caption,figcaption{font-size:.8125rem;color:var(--color-text-muted)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.container,.shell,.khung,.wrap,.le{width:min(var(--container-width),calc(100% - 40px));max-width:var(--container-width);margin-inline:auto;padding-inline:0}
.section,section{padding-block:var(--space-xl)} .section-heading,.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.section-surface,.market{background:var(--color-bg)}
.section-heading>*,.section-head>*{margin-block:0}.section-heading p,.section-head p{color:var(--color-text-muted)}
.button,.btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.15rem;border:1px solid transparent;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;cursor:pointer}
.button-primary,.btn-primary{color:#fff;background:var(--color-primary)}.button-primary:hover,.btn-primary:hover{background:var(--color-primary-dark)}
.button-secondary,.btn-ghost{color:var(--color-text);background:transparent;border-color:var(--color-border)}
.card,.property-card,.article-card,.project-card,.card-le{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.card:hover,.property-card:hover,.article-card:hover,.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.badge,.tag,.eyebrow{display:inline-flex;color:var(--color-primary);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--color-text-muted);font-size:.875rem;margin-bottom:var(--space-md)}
.breadcrumb a:hover{color:var(--color-primary)}

/* Shared application shell */
.site-header{position:sticky;inset-block-start:0;z-index:100;height:var(--header-height);background:rgba(255,255,255,.96);border-bottom:1px solid var(--color-border);backdrop-filter:blur(14px)}
.site-header__inner{height:100%;display:flex;align-items:center;gap:1.5rem}.site-brand{display:flex;align-items:center;gap:.7rem;min-width:0;font-weight:800;text-decoration:none;white-space:nowrap}
.site-brand__mark{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;color:#fff;background:var(--color-primary);font-family:Georgia,serif}
.site-nav{display:flex;align-items:center;gap:1.35rem;margin-left:auto}.site-nav a{position:relative;padding:.45rem 0;color:#4e5964;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-primary)}.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary)}
.site-nav .site-nav__cta{padding:.65rem 1rem;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff}.site-nav .site-nav__cta::after{display:none}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--color-border);border-radius:50%;background:#fff;align-items:center;justify-content:center}.menu-toggle svg{width:20px}
.site-menu-backdrop{display:none}.site-footer{padding:4rem 0 2rem;background:var(--color-dark);color:#cbd0d5}.site-footer .site-brand{color:#fff}.site-footer__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2.5rem}.site-footer h2{font-size:1rem;color:#fff;letter-spacing:0}.site-footer a{display:block;margin:.55rem 0;color:#cbd0d5;text-decoration:none;font-size:.875rem}.site-footer a:hover{color:#fff}.site-footer p{color:#aeb6bf;font-size:.875rem}.site-footer__legal{border-top:1px solid #ffffff1f;margin-top:2.5rem;padding-top:1.25rem;font-size:.78rem;color:#929ca6}

/* Page, project and article patterns */
.page-hero,.project-hero,.article-hero,.sub-hero,.listing-hero{padding-block:clamp(3.5rem,8vw,7rem);background:var(--color-bg)}
.page-hero p,.project-hero p,.article-hero p,.sub-hero p,.listing-hero p,.lead{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--color-text-muted);line-height:1.75;max-width:68ch}
.profile-hero,.hero-le{min-height:min(620px,75vh);display:flex;align-items:flex-end;padding:var(--space-xl) 0;background:var(--color-dark);color:#fff}.profile-hero h1,.hero-le h1,.profile-hero p,.hero-le p{color:#fff}
.stats,.fact-row,.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm)}
.stat-item,.fact-row>div,.fact{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.hero-le .fact{border-color:#ffffff30;background:#ffffff0d}.stat-item strong,.fact b{display:block;font-size:clamp(1.25rem,3vw,1.75rem)}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-sm)}.gallery img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-md)}
.cta-panel,.cta,.cta-le{padding:clamp(1.4rem,4vw,2.5rem);margin-block:var(--space-lg);border-radius:var(--radius-lg);background:#f5eeec;border:1px solid #eadbd8}
.table-wrapper{max-width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md)}table{width:100%;border-collapse:collapse}th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--color-border)}th{background:var(--color-bg)}
.article,.article-content{width:min(var(--reading-width),calc(100% - 40px));max-width:var(--reading-width);margin-inline:auto;padding-block:var(--space-lg) var(--space-xl)}
.article article{padding:0;background:transparent;border:0;box-shadow:none}.article-content p,.article-content li,.article p,.article li,.content p,.content li{font-size:clamp(1rem,1.3vw,1.075rem);line-height:1.85;color:#35414d}.article h2,.article-content h2,.content h2{margin:2.75rem 0 1rem}.article figure,.seo-media{margin:2rem 0}.article figure img,.seo-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md)}
.note,.callout{padding:1.25rem 1.4rem;margin:1.75rem 0;border-left:3px solid var(--color-accent);background:var(--color-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.related-content{padding-top:var(--space-lg);border-top:1px solid var(--color-border)}
.section-le{padding-block:var(--space-xl)}.section-le:nth-of-type(even){background:var(--color-bg)}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm)}.type{padding:var(--space-md);border-radius:var(--radius-md);background:var(--color-bg)}

@media(max-width:1050px){.site-nav{gap:.85rem}.site-nav a{font-size:.8rem}.site-footer__grid{grid-template-columns:2fr repeat(2,1fr)}.cards,.listing-grid,.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.site-nav{position:fixed;z-index:102;top:0;right:0;width:min(88vw,360px);height:100dvh;padding:5.25rem 1.25rem 2rem;display:flex;align-items:stretch;flex-direction:column;gap:.15rem;background:#fff;box-shadow:var(--shadow-lg);transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility .22s}.site-nav.is-open{transform:none;visibility:visible}.site-nav a{padding:.85rem;border-bottom:1px solid var(--color-border);font-size:1rem}.site-nav .site-nav__cta{margin-top:.75rem;text-align:center}.menu-toggle{display:flex;position:relative;z-index:103}.site-menu-backdrop.is-open{display:block;position:fixed;inset:0;z-index:101;background:#10182099}.site-footer__grid{grid-template-columns:1fr 1fr}.section-heading,.section-head{display:block}.section-heading p,.section-head p{margin-top:1rem}.stats,.fact-row,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.article-grid{grid-template-columns:1fr}.side-card{position:static}}
@media(max-width:560px){:root{--header-height:64px}.container,.shell,.khung,.wrap,.le,.article,.article-content{width:min(100% - 28px,var(--container-width))}.site-brand{font-size:.92rem}.site-footer__grid{grid-template-columns:1fr;gap:1.4rem}.cards,.listing-grid,.profile-grid,.story-grid,.utility-grid,.type-grid,.grid2,.types{grid-template-columns:1fr}.stats,.fact-row,.facts{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr}.hero h1{font-size:clamp(2.15rem,11vw,3rem)}section,.section,.section-le{padding-block:3.5rem}}