/* XeroVN Showroom V7 — brand-aligned storefront skin.
 * Layout, product data, Three.js viewer, catalogue and filters retain V6 functionality.
 * Color values here are a visually matched reference (not an extracted official stylesheet).
 */
:root {
  --brand: #00498c;
  --brand2: #3a7bc2;
  --deep: #003a70;
  --soft: #eff5fa;
  --line: #e1e9f1;
  --ink: #112a40;
  --muted: #667e90;
  --page: #ffffff;
  --xero-primary: #00498c;
  --xero-primary-hover: #003a70;
  --xero-sky: #3a7bc2;
  --xero-surface: #f1f6fb;
  --xero-stroke: #dde9f5;
}
html {scroll-padding-top:94px}
body {color:var(--ink);background:#fff}
::selection {background:#dbe8f5;color:#003a70}
/* Corporate XeroVN-style navbar: clean white, plain links, language, strong blue CTA. */
.xero-header.site-header {
  background:#fff;
  backdrop-filter:none;
  border-bottom:1px solid #eaf0f5;
  box-shadow:0 3px 18px rgba(0,58,112,.045);
  position:sticky;
  top:0;
  z-index:40;
}
.xero-header .nav-wrap {height:88px;gap:32px;justify-content:space-between}
.xero-header .logo {flex:0 0 auto}
.xero-header .brand-logo-img {width:190px;height:auto;max-height:54px;object-fit:contain}
.xero-header .nav-links {display:flex;align-items:center;gap:6px;margin:0 auto}
.xero-header .nav-links a {
  position:relative;
  background:transparent;
  border:0;
  border-radius:0;
  padding:15px 18px;
  font-size:13px;
  font-weight:700;
  color:#2c3e50;
  white-space:nowrap;
  transition:color .22s ease;
}
.xero-header .nav-links a:hover, .xero-header .nav-links a.active {color:var(--xero-primary)}
.xero-header .nav-links a.active {box-shadow:none;background:transparent;border:0}
.xero-header .nav-links a::after {
  content:"";position:absolute;bottom:3px;left:18px;right:18px;height:2px;
  background:var(--xero-primary);transform:scaleX(0);transform-origin:center;transition:transform .22s ease;border-radius:99px;
}
.xero-header .nav-links a.active::after,.xero-header .nav-links a:hover::after{transform:scaleX(1)}
.xero-header .nav-actions {gap:21px;display:flex;align-items:center;flex:0 0 auto}
.xero-language {
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:#40586e;
  border-right:1px solid #e1e8ef;padding-right:19px;white-space:nowrap;min-height:26px;
}
.xero-language svg {height:18px;width:18px;fill:none;stroke:#00498c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xero-chevron {height:6px;width:6px;transform:rotate(45deg);border-right:1.7px solid #668396;border-bottom:1.7px solid #668396;margin:0 2px 3px 3px}
.xero-header .header-contact {
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:14px 20px;border-radius:9px;border:1px solid #00498c;
  background:#00498c;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;
  box-shadow:0 5px 13px rgba(0,73,140,.15);
  transition:background .22s,box-shadow .22s,transform .22s;
}
.xero-header .header-contact:hover {background:#003a70;box-shadow:0 7px 18px #00498c34;transform:translateY(-1px)}
.xero-header .header-contact svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.xero-header .menu-btn {display:none;place-items:center;background:#f3f8fc;border:1px solid #dde9f5;border-radius:9px;color:#00498c}
.mobile-language {font-size:12px;color:#5f7a8d;padding:12px 14px;border-top:1px solid #e6eef5}
/* A quiet white/sky brand canvas instead of neon ultra-blue decorative effects */
.hero-ambient {inset:68px 0 auto}
.ambient-light.a1 {background:radial-gradient(ellipse,#d7e6f4 0%,#f3f7fb 45%,transparent 71%);opacity:.51}
.ambient-light.a2 {background:radial-gradient(ellipse,#e4eef7 0%,transparent 71%);opacity:.42}
.showroom-shell {padding-top:31px}
.showroom-head {padding-bottom:18px}
.eyebrow {color:#00498c;letter-spacing:.16em}
.eyebrow-line {background:linear-gradient(90deg,#00498c,#93bbe0)}
.showroom-head-note {color:#65899f}
.showroom-head .green-dot{background:#1fc98a}
.product-rail {border:1px solid #e3edf7;background:#fff;box-shadow:0 8px 30px rgba(0,58,112,.055);border-radius:18px}
.rail-header {border-bottom:1px solid #e5eef6}
.rail-count {color:#003a70;background:#eef4fa}
.rail-card {border:1px solid #e8eef4;border-radius:12px;background:#fff;box-shadow:none}
.rail-card:hover {border-color:#a5c6e5;box-shadow:0 7px 19px rgba(0,73,140,.08)}
.rail-card.active {background:#f3f8fc;border-color:#00498c;box-shadow:0 5px 14px rgba(0,73,140,.095)}
.rail-card.active::before {background:#00498c}
.rail-thumb {background:linear-gradient(150deg,#ebf2f9,#fcfdfe);border:1px solid #e9f1f9}
.rail-bottom {color:#6b9ab5}
/* Preserve two-column showroom with more XeroVN-style restrained color treatment. */
.product-stage {
  border:1px solid #dae7f4;
  border-radius:19px;
  background:
    radial-gradient(ellipse at 81% 41%,#ffffff 0%,#f0f6fb 41%,#e5eef7 77%,#f6f9fc 100%);
  box-shadow:0 17px 50px rgba(0,58,112,.075),inset 0 1px 0 #fff;
}
.stage-mesh{opacity:.43; background:linear-gradient(137deg,transparent 0 61%,#d0e1f17a 61.05% 66%,transparent 66.05%),linear-gradient(137deg,transparent 0 76%,#d9e7f48a 76.05% 81%,transparent 81.05%),radial-gradient(#00498c12 .8px,transparent .8px);background-size:auto,auto,23px 23px}
.stage-glow {background:radial-gradient(circle,#fff 4%,#c7dcef80 44%,transparent 74%);filter:blur(31px)}
.stage-orbit {border-color:#3a7bc222}
.orbit-b {border-color:#3a7bc217}
.orbit-c {border-color:#00498c21}
.stage-axis {background:#3a7bc212}
.stage-corner {border-color:#00498c}
.stage-typographic {color:#00498c21}
.stage-topline .live-tag {color:#003a70}
.stage-blue-line {background:#00498c}
.stage-eyebrow {color:#003a70}
.stage-copy h1 {color:#102f49;letter-spacing:-.062em}
.stage-desc {color:#617c90}
.feature {background:#ffffffcf;border:1px solid #eaf2f9;box-shadow:0 4px 12px #00498c10;border-radius:11px}
.feature svg {color:#00498c}
.stage-price strong {background:none;color:#00498c}
.stage-stock {color:#507c90}
.btn-primary {background:#00498c;border-color:#00498c;box-shadow:0 8px 19px #00498c24}
.btn-primary:hover {background:#003a70;border-color:#003a70}
.btn-secondary {border-color:#d7e6f4;color:#003a70;background:#fff;box-shadow:none}
.btn-secondary:hover {border-color:#92badf;color:#003a70}
.stage-ground {filter:drop-shadow(0 24px 24px #00498c1e)}
.ground-glow {background:#3a7bc253}
.ground-top {background:radial-gradient(ellipse at 45% 10%,#fff 8%,#ecf3fa 49%,#c1d8ed 84%,#fff 92%);box-shadow:0 0 0 2px #c6dbef77,0 0 25px #3a7bc255}
.ground-side{background:linear-gradient(180deg,#f8fbfd,#c2d8ec 66%,#a4c1dc);border-bottom-color:#9abbd9}
.stage-product-line {background:#3a7bc2}
.stage-product-label b{color:#4e8dac}
.viewer-tools {border:1px solid #ebf2f9;box-shadow:0 8px 21px #00498c14}
.viewer-tool.active{background:#00498c;box-shadow:0 5px 12px #00498c2e}
.stage-pagination {box-shadow:0 7px 19px #00498c12}
.viewer-dock-note {color:#77a0b5}
.showroom-bottom {color:#819cac}
/* Palette continuity down the page */
.feature-strip {border-color:#e8f0f8;background:#fff}
.strip-item svg {color:#00498c;background:#eff5fa}
.strip-item strong{color:#284b63}
.catalogue-section{background:#fff}
.section-head h2 {color:#142e43}
.blue-period {color:#00498c}
.collection-count {border-color:#dae7f4;background:#f6fafd}
.collection-count b {color:#00498c}
.catalogue-design-rule{color:#7298ae;border-top-color:#e4edf6;border-bottom-color:#e4edf6}
.catalog-search {border-color:#e0ebf5;background:#fff}
.catalog-search:focus-within {border-color:#3a7bc2;box-shadow:0 0 0 4px #e2ecf6}
.catalogue-toolbar select {border-color:#e0ebf5;background:#fff}
.catalogue-toolbar select:focus {outline-color:#00498c}
.catalogue-filters {border-color:#e4ecf3;background:#fff}
.filter-head button {color:#00498c}
.check input {accent-color:#00498c}
#maxPrice {accent-color:#00498c}
.filter-help {background:#eff5fa;border-color:#e2ecf6}
.filter-help a {color:#00498c}
.card {border-color:#e4edf5;border-radius:14px;box-shadow:0 2px 11px rgba(0,58,112,.025)}
.card:hover {border-color:#b6d1ea;box-shadow:0 15px 28px rgba(0,58,112,.095)}
.card-visual {background:linear-gradient(145deg,#f9fbfd,#ecf3fa)}
.card-tag {color:#00498c}
.card-prices strong{color:#00498c}
.card-action {color:#00498c;border-color:#d7e6f4}
.card-action.blue{background:#00498c;border-color:#00498c}
.trust-band {background:#f5f9fc;border-color:#e4eef7}
.trust-icon {background:#eaf2f9;color:#00498c}
.footer-demo {background:#f3f8fc;border-color:#e2edf7}
.footer-demo span {color:#00498c}
.footer-bottom a {color:#00498c}
.float-zalo{background:#00498c}
.float-fb{background:#00498c}
/* Nav prioritizes text clarity and CTA on smaller screens. */
@media(max-width:1240px){
 .xero-header .nav-wrap{gap:20px}
 .xero-header .nav-links{gap:0}
 .xero-header .nav-links a{padding:13px 11px;font-size:12px}
 .xero-header .nav-actions{gap:12px}
 .xero-language{padding-right:12px}
}
@media(max-width:1050px){
 .xero-header .nav-links{display:none}
 .xero-header .menu-btn{display:grid;flex:none;width:42px;height:42px}
 .xero-header .nav-wrap{height:74px}
 .xero-header .nav-actions .header-contact{display:inline-flex}
}
@media(max-width:780px){
 .xero-header .nav-wrap{height:67px;padding-left:20px;padding-right:20px}
 .xero-header .brand-logo-img{width:164px;height:43px}
 .xero-language{display:none}
 .xero-header .header-contact{display:none!important}
 .xero-header .menu-btn{display:grid;flex:none;width:42px;height:42px}
 .xero-header .mobile-nav.open{display:flex;background:#fff;padding:11px 20px 19px;border-top:1px solid #e7edf3;box-shadow:0 14px 18px #003a700e}
 .xero-header .mobile-nav a{background:transparent;border-bottom:1px solid #edf2f7;border-radius:0;color:#2d4b5e}
 .xero-header .mobile-nav a:hover{color:#00498c}
 .product-stage{border-radius:16px}
 .stage-copy h1{color:#103047}
 .stage-ground{background:transparent}
}
@media(max-width:480px){
 .xero-header .nav-wrap{padding-left:15px;padding-right:15px;height:62px}
 .xero-header .brand-logo-img{width:151px;height:40px}
 .stage-copy .stage-actions a{border-radius:9px}
}