/* Matbich staging identity: white and light sky blue. */
:root{--hq-primary:#17649b;--hq-navy:#213e56;--hq-blue:#17649b;--hq-accent:#cce8fb;--hq-text:#2c4358;--hq-muted:#536b7e;--hq-border:#d5e5f1;--hq-alt:#f0f7fc}
body{background:#fbfdff;color:var(--hq-text)}
.hq-header{background:#fbfdff;color:#213e56;border-bottom:1px solid #d5e5f1}
.hq-utility{background:#e7f4fe;border-bottom:1px solid #d5e5f1;color:#3c617d}
.hq-header a{color:#213e56}.hq-header .hq-icon-button{color:#213e56}
.hq-brand img{filter:brightness(0);opacity:.8}
.hq-brand-words strong,.hq-brand-words small{color:#213e56!important}
.hq-header .hq-button,.hq-button{background:#17649b;border-color:#17649b;color:#fff}
.hq-button:hover{background:#10517f;border-color:#10517f;filter:none}
.hq-button-outline,.hq-button-light{background:transparent;color:#17649b;border-color:#91bfe0}
.hq-button-outline:hover,.hq-button-light:hover{background:#e2f2fd;color:#10517f}
.hq-nav-disclosure>div{background:#fff;border:1px solid #d5e5f1;box-shadow:0 8px 24px #213e5614}
.hq-demo{background:#e2f2fd;color:#3b617f;border-bottom:1px solid #c6e2f5}
.hq-hero{background-image:linear-gradient(90deg,rgba(247,252,255,.99),rgba(231,244,254,.96) 48%,rgba(218,237,252,.78)),var(--hq-hero);color:#3c617d}
.hq-hero h1,.hq-hero h2{color:#213e56}
.hq-eyebrow{color:#17649b}.hq-eyebrow span{background:#8bbde0}
.hq-hero-breadcrumb,.hq-hero-breadcrumb a{color:#17649b!important}
.hq-search button{background:#17649b;border-color:#17649b;color:#fff}
.hq-section-heading h2:after{background:#80b9e1}
.hq-card,.hq-family,.hq-document,.hq-filters{border-color:#d5e5f1;background:#fff;border-radius:8px}
.hq-card:hover{border-color:#91bfe0;box-shadow:0 5px 18px #213e560a}
.hq-image-empty{background:linear-gradient(135deg,#f0f7fc,#e2eff8);color:#536b7e}
.hq-image-empty>.hq-icon{color:#799db8}
.hq-dark,.hq-story,.hq-cta,.hq-trust{background:#e4f2fc;color:#2c4358;background-image:none}
.hq-dark h2,.hq-dark h3,.hq-cta h2{color:#213e56}
.hq-dark .hq-icon,.hq-trust .hq-icon,.hq-dark .hq-capability>.hq-icon{color:#17649b}
.hq-trust span:not(.hq-icon){color:#536b7e}.hq-trust .hq-grid>div{border-color:#c7e0f2}
.hq-footer{background:#eaf4fc;color:#3c617d;border-top:1px solid #d5e5f1}
.hq-footer h2{color:#213e56}.hq-footer a,.hq-footer .hq-muted{color:#3c617d}
.hq-footer-bottom{border-color:#c9e0f0}.hq-footer .hq-nav-disclosure>div{border:0}
.hq-badge,.hq-notice{background:#eaf5fd;color:#3b617f}
.hq-pagination [aria-current]{background:#17649b;color:#fff}
thead th{background:#e4f2fc!important;color:#213e56!important}
.hq-dialog{background:#fbfdff;color:#213e56}
input[type=checkbox]{accent-color:#17649b}
@media(max-width:780px){.hq-hero{background-image:linear-gradient(120deg,rgba(247,252,255,.97),rgba(223,240,253,.93)),var(--hq-hero)}.hq-utility{color:#3c617d}}
/* Stronger sky-blue finish while retaining the existing page structure. */
:root{--hq-primary:#1369ae;--hq-blue:#1369ae;--hq-accent:#b9dcf9}
.hq-utility{background:#dcefff;color:#315c7c}
.hq-header{box-shadow:0 4px 22px #1c568411}
.hq-desktop-nav>a:hover,.hq-nav-disclosure>summary:hover{color:#1369ae;text-decoration:none}
.hq-button,.hq-header .hq-button{background:linear-gradient(135deg,#167bc5,#155c9a);border-color:#1766a5;border-radius:7px;box-shadow:0 5px 13px #1769a525;transition:background .18s,box-shadow .18s,transform .18s}
.hq-button:hover{background:#155c9a;box-shadow:0 7px 18px #1769a535;transform:translateY(-1px)}
.hq-button-outline,.hq-button-light{background:#ffffffb8;box-shadow:none;color:#155c9a;border-color:#88b8df}
.hq-button-outline:hover,.hq-button-light:hover{background:#fff;color:#155c9a}
.hq-hero{background-image:linear-gradient(90deg,rgba(248,252,255,.99) 0%,rgba(229,243,254,.96) 42%,rgba(204,229,251,.72) 72%,rgba(186,218,246,.45) 100%),var(--hq-hero);border-bottom:1px solid #c5e1f6}
.hq-hero h1,.hq-hero h2{color:#193f63;letter-spacing:-.035em}
.hq-hero .hq-lead{color:#3c5e7b}.hq-eyebrow{color:#1369ae}.hq-eyebrow span{background:#6caee0;height:2px}
.hq-section-heading h2:after{background:#3796d6;width:64px;border-radius:2px}
.hq-card{border:1px solid #d1e5f5;box-shadow:0 4px 18px #1a527a09;transition:box-shadow .18s,border-color .18s}
.hq-card:hover{border-color:#7ab5e2;box-shadow:0 9px 25px #1a527a17}
.hq-card h3 a{color:#21557c}.hq-card .hq-text-link{color:#1369ae}
.hq-image-empty{background:linear-gradient(145deg,#f1f9ff,#d8eafb)}
.hq-cta{background:linear-gradient(115deg,#e6f4ff,#d1e8fa);border-block:1px solid #bedcf3}
.hq-cta h2{color:#193f63}.hq-footer{background:#eaf4fc}
@media(max-width:780px){.hq-hero{background-image:linear-gradient(115deg,rgba(244,250,255,.98),rgba(210,232,251,.89)),var(--hq-hero)}.hq-button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.hq-button,.hq-card{transition:none}.hq-button:hover{transform:none}}
/* Clear flange illustration: no translucent overlay on the product. */
.hq-hero-home{background:#eaf5ff;background-image:linear-gradient(110deg,#f6fbff,#dcedfc);isolation:isolate;overflow:hidden}
.hq-hero-home>.hq-container{position:relative;z-index:2}
.hq-hero-home .hq-hero-copy{max-width:55%}
.hq-hero-home h1{font-size:clamp(32px,3.5vw,49px)}
.hq-hero-home:after{content:"";position:absolute;right:3%;top:7%;width:40%;height:81%;background:#fff url('../images/matbich-hero-weld-neck.webp') center/contain no-repeat;border:1px solid #c6def2;border-radius:18px;box-shadow:0 15px 40px #1a527a15;z-index:1}
.hq-hero-home:before{content:"Mặt bích Weld Neck · Ảnh minh họa";position:absolute;right:3%;bottom:5%;width:40%;text-align:center;color:#3c617d;font-size:13px;z-index:2}
@media(max-width:780px){.hq-hero-home{background:linear-gradient(150deg,#f6fbff,#dcedfc);display:block;padding-bottom:50px}.hq-hero-home .hq-hero-copy{max-width:100%}.hq-hero-home:after{position:relative;display:block;right:auto;top:auto;width:calc(100% - 48px);height:280px;margin:28px auto 0}.hq-hero-home:before{right:24px;bottom:18px;width:calc(100% - 48px)}.hq-hero-home h1{font-size:clamp(30px,7.8vw,42px)}}
/* Full-width flange hero, with the overlay limited to the copy area. */
.hq-hero-home{background-color:#eaf5ff;background-image:linear-gradient(90deg,rgba(238,247,255,.99) 0%,rgba(231,243,254,.96) 35%,rgba(220,237,252,.6) 53%,rgba(211,231,249,.12) 76%,rgba(205,229,250,.04)),url('../images/matbich-hero-weld-neck.webp');background-size:cover,auto 145%;background-position:center,right 55%;background-repeat:no-repeat;min-height:490px;isolation:isolate;overflow:hidden}
.hq-hero-home:after{display:none;content:none}
.hq-hero-home:before{content:"Ảnh mặt bích minh họa";position:absolute;right:32px;bottom:15px;width:auto;color:#334c63;background:#ffffffe0;border-radius:3px;padding:3px 8px;font-size:12px;z-index:2}
.hq-hero-home .hq-hero-copy{max-width:57%}
@media(max-width:780px){.hq-hero-home{background-image:linear-gradient(180deg,rgba(239,248,255,.99) 0%,rgba(231,243,254,.98) 45%,rgba(216,235,252,.8) 67%,rgba(206,230,250,.18)),url('../images/matbich-hero-weld-neck.webp');background-size:cover,auto 63%;background-position:center,center bottom;min-height:720px;padding-bottom:230px}.hq-hero-home .hq-hero-copy{max-width:100%}.hq-hero-home:after{display:none;content:none}.hq-hero-home:before{right:20px;bottom:12px;width:auto}}
/* Steel-blue structure and copper accents with a full-width factory illustration. */
:root{--hq-text:#283e53;--hq-navy:#18364f;--hq-border:#bdcedd}
.hq-card,.hq-family,.hq-document,.hq-filters{border-color:#bdcedd}
.hq-card{border-top:3px solid #477eaa}.hq-card:hover{border-color:#b96836}
.hq-section-heading h2:after{background:#b96836}
.hq-eyebrow{color:#954617}.hq-eyebrow span{background:#c17a4b}
.hq-button,.hq-header .hq-button{background:linear-gradient(135deg,#b85c25,#944213);border-color:#99471d;box-shadow:0 5px 15px #9b491d24;color:#fff}
.hq-button:hover{background:#944213;box-shadow:0 7px 18px #9b491d35}
.hq-button-outline,.hq-button-light{background:#f6fbffe8;color:#175986;border-color:#7299b9;box-shadow:none}
.hq-button-outline:hover,.hq-button-light:hover{background:#fff;color:#175986}
.hq-hero-home{background-image:linear-gradient(90deg,rgba(242,249,255,.98) 0%,rgba(231,244,254,.91) 32%,rgba(219,237,252,.68) 46%,rgba(209,229,247,.12) 62%,rgba(197,222,244,0) 85%),url('../images/matbich-factory-hero.webp');background-size:cover,cover;background-position:center,center;min-height:490px}
.hq-hero-home .hq-hero-copy{max-width:52%}.hq-hero-home h1{color:#18364f;font-size:clamp(32px,3.35vw,48px)}
.hq-hero-home:before{content:"Ảnh minh họa AI · Không phải ảnh nhà xưởng thực tế";background:#ffffffe8;color:#40546a;right:20px;bottom:12px}
.hq-hero-home:after{content:none;display:none}
.hq-cta{background:linear-gradient(115deg,#eaf5fe,#d8e9f6)}
@media(max-width:780px){.hq-hero-home{background-image:linear-gradient(180deg,rgba(242,249,255,.99) 0%,rgba(231,244,254,.98) 44%,rgba(218,237,252,.92) 57%,rgba(211,231,249,.16) 76%,rgba(211,231,249,0)),url('../images/matbich-factory-hero.webp');background-size:cover,auto 55%;background-position:center,80% bottom;min-height:730px;padding-bottom:245px}.hq-hero-home .hq-hero-copy{max-width:100%}.hq-hero-home h1{font-size:clamp(30px,7.8vw,42px)}.hq-hero-home:before{max-width:calc(100% - 40px);font-size:10px}}


/* Distinct saturated steel-blue identity: matbich staging, 2026-10-13. */
:root{--hq-alt:#d4e4ef;--hq-border:#91b5ca;--hq-muted:#456578}
body,.hq-page,.wp-site-blocks{background:#185671;color:#e3eef5}
.hq-section:not(.hq-hero):not(.hq-cta):not(.hq-dark):not(.hq-trust){background:#1c607e;color:#e3eef5}
.hq-section:not(.hq-hero):not(.hq-cta):not(.hq-dark):not(.hq-trust):nth-of-type(2n+1){background:#20556e}
.hq-section:not(.hq-hero) h2,.hq-section:not(.hq-hero) h3{color:#f1f7fb}
.hq-section .hq-muted{color:#c6dfed}
.hq-section a:not(.hq-button){color:#b8e3fc}
.hq-card,.hq-family,.hq-document,.hq-filters{background:#e0ebf3;color:#25485e;border-color:#82b1cb;box-shadow:0 8px 24px #092c4433}
.hq-card-body{background:#e0ebf3;color:#25485e}
.hq-card-image,.hq-image-empty{background:#eef3f7;color:#456578}
.hq-section .hq-card h3,.hq-section .hq-card h3 a,.hq-section .hq-card .hq-text-link,.hq-section .hq-family a,.hq-section .hq-document a{color:#164a6a}
.hq-card .hq-muted,.hq-card .hq-card-meta,.hq-family .hq-muted,.hq-document .hq-muted{color:#456578}
.hq-card:hover{border-color:#b4dfff;box-shadow:0 12px 30px #092c4455}
.hq-badge,.hq-notice{background:#c8dfed;color:#264e68}
.hq-breadcrumb,.hq-anchor-bar,.hq-tabs,.hq-toc{background:#d4e4ef;color:#25485e;border-color:#91b5ca}
.hq-section :is(.hq-breadcrumb,.hq-anchor-bar,.hq-tabs,.hq-toc) a{color:#164a6a}
.hq-rfq,.hq-rfq-split aside,.hq-article-aside,.hq-filters{background:#d4e4ef;color:#25485e;border-color:#91b5ca}
.hq-section :is(.hq-rfq,.hq-rfq-split aside,.hq-article-aside,.hq-filters) :is(h2,h3,a:not(.hq-button)){color:#164a6a}
.hq-section table{background:#e0ebf3;color:#25485e}
.hq-dark,.hq-story,.hq-trust{background:#20556e;color:#e3eef5}
.hq-dark h2,.hq-dark h3{color:#f1f7fb}
.hq-trust span:not(.hq-icon){color:#c6dfed}
.hq-cta{background:linear-gradient(115deg,#164d68,#123e57);color:#e3eef5;border-color:#2d779b}
.hq-cta h2,.hq-section.hq-cta h2,.hq-cta h3{color:#f3f8fc}
.hq-cta p{color:#deebf4}
.hq-header{background:#194f6a;color:#eef6fb;border-color:#337694}
.hq-header a,.hq-header .hq-icon-button{color:#eef6fb}
.hq-header .hq-brand img,.hq-footer .hq-brand img{filter:brightness(0) invert(1);opacity:1}
.hq-header .hq-brand-words strong,.hq-header .hq-brand-words small,.hq-footer .hq-brand-words strong,.hq-footer .hq-brand-words small{color:#f2f7fa!important}
.hq-utility,.hq-demo{background:#2c708f;color:#e3eef5;border-color:#4285a4}
.hq-nav-disclosure>div{background:#20556e;border-color:#4285a4}
.hq-desktop-nav>a:hover,.hq-nav-disclosure>summary:hover{color:#c6eaff}
.hq-hero-home{background-color:#185671;background-image:linear-gradient(90deg,rgba(19,73,98,.98) 0%,rgba(22,85,111,.95) 32%,rgba(29,95,124,.72) 46%,rgba(28,86,113,.2) 66%,rgba(21, 70,99,0) 85%),url('../images/matbich-factory-hero.webp');color:#e3eef5}
.hq-hero-home h1{color:#f5faff}
.hq-hero-home .hq-lead{color:#d4e8f3}
.hq-hero-home .hq-eyebrow{color:#ffd3aa}
.hq-hero-home .hq-eyebrow span{background:#e5a169}
.hq-footer{background:#123c54;color:#e0ebf3;border-top:1px solid #317394}
.hq-footer h2,.hq-footer h3{color:#f2f7fa}
.hq-footer a,.hq-footer .hq-muted,.hq-footer small,.hq-footer p{color:#d9e8f2}
.hq-footer a:hover{color:#fff}
.hq-footer .hq-nav-disclosure>div{background:#123c54;color:#e0ebf3}
.hq-footer-bottom{border-color:#42728b;color:#d9e8f2}
@media(max-width:780px){.hq-hero-home{background-image:linear-gradient(180deg,rgba(19,73,98,.99) 0%,rgba(22,85,111,.98) 44%,rgba(29,95,124,.93) 57%,rgba(28,86,113,.18) 76%,rgba(21, 70,99,0)),url('../images/matbich-factory-hero.webp')}}

/* Complete approved palette across inner pages and quote flow. */
.hq-product-top h1,.hq-product-top h2,.hq-product-top h3{color:#f2f8fc}
.hq-product-top .hq-eyebrow{color:#ffd3aa}
.hq-product-top .hq-lead{color:#e3eef5}
.hq-hero:not(.hq-hero-home){background-image:linear-gradient(90deg,rgba(19,73,98,.97),rgba(29,95,124,.87) 50%,rgba(28,86,113,.5)),var(--hq-hero);color:#e3eef5}
.hq-hero:not(.hq-hero-home) h1,.hq-hero:not(.hq-hero-home) h2{color:#f2f8fc}
.hq-hero:not(.hq-hero-home) .hq-lead{color:#deedf6}
.hq-hero:not(.hq-hero-home) .hq-eyebrow{color:#ffd3aa}
.hq-hero-breadcrumb,.hq-hero-breadcrumb a{color:#c9e9fa!important}
.hq-breadcrumb a,.hq-anchor-bar a,.hq-tabs a,.hq-toc a{color:#174a68}
.hq-family strong,.hq-family h3,.hq-document h3,.hq-filters h3{color:#174a68}
.hq-rfq{padding:24px;border:1px solid #91b5ca;border-radius:12px}
.hq-rfq .hq-muted,.hq-rfq small,.hq-rfq figcaption{color:#405d71}
.hq-rfq :is(input,textarea,select){background:#f3f8fc;color:#213e56;border-color:#91afc3}
.hq-rfq label{color:#213e56}
.hq-rfq .hq-form-status{color:#213e56}
.hq-rfq .hq-form-status.is-error,.hq-rfq .hq-field-error{color:#a62323}
.hq-rfq :is(input,textarea,select):focus-visible{outline-color:#17649b}
.hq-table-scroll caption,.hq-section table caption{color:#dbeef9}
.hq-standard-cover{color:#174a68}
.hq-section .hq-sort-form label,.hq-section .hq-document-filters label{color:#e3eef5}
.hq-empty{color:#25485e}
@media(max-width:600px){.hq-rfq{padding:18px 14px}.hq-rfq .hq-actions{gap:10px}.hq-rfq :is(input,textarea,select){font-size:16px}}