/* Composite category: decision-led UX for humid, corrosive and livestock environments. */
.composite-page { --cw:#f5f8fa; --cn:#071e3b; --cg:#f4b91f; --ct:#17425d; --cm:#5b7181; --cl:#dbe6ec; background:#fff; }
.composite-page .composite-hero { position:relative; overflow:hidden; padding:50px 0 52px; background:radial-gradient(circle at 84% 22%,rgba(53,122,159,.38),transparent 35%),linear-gradient(120deg,#061e3a 0%,#093d61 58%,#0c4e73 100%); color:#fff; }
.composite-page .composite-hero:before { content:""; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:46px 46px; pointer-events:none; }
.composite-page .composite-hero .c { position:relative; z-index:1; }
.composite-page .crumb { margin-bottom:22px; }
.composite-page .composite-hgrid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr); gap:52px; align-items:center; }
.composite-page .composite-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; color:#ffd56a; font-size:12px; font-weight:900; line-height:1.35; letter-spacing:.13em; }
.composite-page .composite-eyebrow:before { content:""; width:28px; height:2px; background:currentColor; }
.composite-page h1 { max-width:680px; margin:0; color:#fff; font-size:clamp(42px,5vw,64px); line-height:1.02; letter-spacing:-.055em; }
.composite-page .composite-lead { max-width:650px; margin:19px 0 0; color:#d7e7ef; font-size:19px; line-height:1.58; }
.composite-page .hero-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:27px 0 28px; }
.composite-page .hero-proof span { min-height:86px; padding:13px 13px 13px 15px; border:1px solid rgba(255,255,255,.2); border-left:3px solid var(--cg); color:#dceaf1; font-size:12px; line-height:1.45; background:rgba(4,31,54,.2); }
.composite-page .hero-proof b { display:block; margin:0 0 4px; color:#fff; font-size:13px; }
.composite-page .composite-actions { display:flex; gap:12px; flex-wrap:wrap; }
.composite-page .composite-actions .btn { min-height:50px; border-radius:2px; }
.composite-page .composite-actions .btn.secondary { border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
.composite-page .composite-actions .btn.secondary:hover { background:#fff; color:var(--cn); }
.composite-page .composite-art { position:relative; min-height:420px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); background:linear-gradient(145deg,#fdfefe 0%,#e8f1f5 100%); box-shadow:0 26px 54px rgba(0,13,31,.33); }
.composite-page .composite-art:after { content:""; position:absolute; width:70%; height:14%; bottom:11%; left:15%; border-radius:50%; background:rgba(10,48,75,.16); filter:blur(17px); }
.composite-page .composite-art img { position:relative; z-index:1; display:block; width:100%; height:100%; max-height:420px; object-fit:contain; padding:18px; }
.composite-page .composite-art small { position:absolute; z-index:2; left:16px; bottom:16px; padding:7px 10px; background:var(--cg); color:var(--cn); font-size:10px; font-weight:900; letter-spacing:.075em; }
.composite-page .section { padding:84px 0; }
.composite-page .section.soft { background:linear-gradient(180deg,#f7fafb 0%,#eff5f7 100%); }
.composite-page .section.navy { background:var(--cn); color:#fff; }
.composite-page .section-head { max-width:790px; margin:0 0 31px; }
.composite-page .section-kicker { margin:0 0 9px; color:#9c6900; font-size:11px; font-weight:900; letter-spacing:.13em; }
.composite-page .section-head h2, .composite-page .section-title { margin:0; color:var(--cn); font-size:clamp(30px,3.4vw,45px); line-height:1.12; letter-spacing:-.04em; }
.composite-page .section-head p { max-width:760px; margin:13px 0 0; color:var(--cm); font-size:16px; }
.composite-page .fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.composite-page .fit-card { min-height:100%; padding:30px; border:1px solid var(--cl); background:#fff; box-shadow:0 10px 30px rgba(10,49,82,.05); }
.composite-page .fit-card.alert { border-top:4px solid var(--cg); }
.composite-page .fit-card h3 { margin:0; font-size:24px; line-height:1.22; color:var(--cn); letter-spacing:-.025em; }
.composite-page .fit-card > p { margin:10px 0 20px; color:var(--cm); }
.composite-page .fit-list { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--cl); }
.composite-page .fit-list li { position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--cl); font-size:14px; color:var(--ct); }
.composite-page .fit-list li:before { content:"✓"; position:absolute; left:1px; color:#ab7200; font-weight:900; }
.composite-page .fit-card.alert .fit-list li:before { content:"!"; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; top:12px; border-radius:50%; background:#fff0be; color:#7e5600; font-size:12px; }
.composite-page .choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.composite-page .choice-card { display:flex; flex-direction:column; min-height:244px; padding:23px; border:1px solid var(--cl); background:#fff; color:var(--cn); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.composite-page .choice-card:hover { transform:translateY(-3px); border-color:#d8a323; box-shadow:0 16px 35px rgba(10,49,82,.11); }
.composite-page .choice-card small { color:#9c6900; font-size:10px; font-weight:900; letter-spacing:.12em; }
.composite-page .choice-card h3 { margin:11px 0 8px; font-size:24px; line-height:1.17; letter-spacing:-.03em; }
.composite-page .choice-card p { margin:0; color:var(--cm); font-size:14px; }
.composite-page .choice-card b { margin-top:auto; padding-top:18px; color:#875700; font-size:14px; }
.composite-page .model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.composite-page .model-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--cl); background:#fff; color:var(--cn); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.composite-page .model-card:hover { transform:translateY(-3px); border-color:#d9a522; box-shadow:0 18px 40px rgba(10,49,82,.12); }
.composite-page .model-picture { position:relative; aspect-ratio:1.28/1; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#fff 0%,#ebf2f6 100%); border-bottom:1px solid var(--cl); }
.composite-page .model-picture img { width:100%; height:100%; object-fit:contain; padding:12px; }
.composite-page .model-code { position:absolute; left:13px; top:13px; padding:6px 8px; background:var(--cn); color:#fff; font-size:10px; font-weight:900; letter-spacing:.1em; }
.composite-page .model-copy { display:flex; flex:1; flex-direction:column; padding:20px; }
.composite-page .model-copy h3 { margin:9px 0 10px; font-size:21px; line-height:1.2; letter-spacing:-.025em; }
.composite-page .model-copy > p { margin:0 0 16px; color:var(--cm); font-size:13px; line-height:1.5; }
.composite-page .model-suitable { display:inline-block; color:#9b6800; font-size:11px; font-weight:800; line-height:1.45; }
.composite-page .model-specs { display:grid; grid-template-columns:1fr 1fr; margin-top:auto; border-top:1px solid var(--cl); border-bottom:1px solid var(--cl); }
.composite-page .model-specs span { min-height:61px; padding:10px 9px; color:var(--cm); font-size:10px; }
.composite-page .model-specs span + span { border-left:1px solid var(--cl); }
.composite-page .model-specs b { display:block; margin-top:3px; color:var(--cn); font-size:13px; line-height:1.25; }
.composite-page .model-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 0; color:#875700; font-size:13px; font-weight:900; }
.composite-page .model-link strong { font-size:21px; line-height:1; }
.composite-page .compare-wrap { overflow-x:auto; border:1px solid var(--cl); background:#fff; box-shadow:0 10px 28px rgba(10,49,82,.05); }
.composite-page .compare-table { min-width:920px; width:100%; border-collapse:collapse; text-align:left; }
.composite-page .compare-table th { padding:15px 16px; background:var(--cn); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; }
.composite-page .compare-table td { padding:14px 16px; border-top:1px solid var(--cl); color:var(--ct); font-size:13px; vertical-align:middle; }
.composite-page .compare-table td:first-child { color:var(--cn); font-weight:900; }
.composite-page .compare-table tr:nth-child(even) td { background:#f7fafb; }
.composite-page .compare-table a { color:#875700; font-weight:900; text-decoration:none; }
.composite-page .install-grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr); gap:30px; align-items:center; }
.composite-page .install-copy h2 { margin:0; color:#fff; font-size:clamp(31px,3.5vw,44px); line-height:1.12; letter-spacing:-.04em; }
.composite-page .install-copy > p { max-width:710px; margin:13px 0 0; color:#c7dbe5; font-size:16px; }
.composite-page .four-list { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:27px 0 0; }
.composite-page .four-list div { min-height:92px; padding:14px 16px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.06); }
.composite-page .four-list b { display:block; color:#ffd15c; font-size:12px; }
.composite-page .four-list span { display:block; margin-top:5px; color:#e7f0f4; font-size:13px; line-height:1.4; }
.composite-page .install-card { padding:28px; border:1px solid rgba(255,255,255,.26); background:#fff; color:var(--cn); box-shadow:0 20px 42px rgba(0,0,0,.17); }
.composite-page .install-card .section-kicker { margin-bottom:8px; }
.composite-page .install-card h3 { margin:0; font-size:27px; line-height:1.16; letter-spacing:-.03em; }
.composite-page .install-card p { margin:10px 0 19px; color:var(--cm); font-size:14px; }
.composite-page .install-card .btn { width:100%; min-height:51px; }
.composite-page .application-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.composite-page .application-card { padding:24px; border:1px solid var(--cl); background:#fff; }
.composite-page .application-card small { color:#9c6900; font-size:10px; font-weight:900; letter-spacing:.1em; }
.composite-page .application-card h3 { margin:10px 0 8px; color:var(--cn); font-size:22px; line-height:1.2; }
.composite-page .application-card p { margin:0; color:var(--cm); font-size:14px; }
.composite-page .principle { margin-top:20px; padding:23px 25px; border-left:4px solid var(--cg); background:#fff6dc; color:#3d596a; }
.composite-page .principle b { color:var(--cn); }
.composite-page .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.composite-page .faq-grid details { padding:0 18px; border:1px solid var(--cl); background:#fff; }
.composite-page .faq-grid summary { position:relative; padding:18px 28px 18px 0; cursor:pointer; color:var(--cn); font-size:15px; font-weight:900; line-height:1.38; }
.composite-page .faq-grid summary:after { content:"+"; position:absolute; top:14px; right:0; color:#9b6800; font-size:23px; font-weight:400; }
.composite-page .faq-grid details[open] summary:after { content:"−"; }
.composite-page .faq-grid p { margin:0; padding:0 0 18px; color:var(--cm); font-size:14px; line-height:1.6; }
.composite-page .final-cta { padding:54px 0; background:linear-gradient(120deg,#eaf1f4,#fdfdfc); }
.composite-page .final-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; }
.composite-page .final-grid h2 { margin:0; color:var(--cn); font-size:clamp(29px,3.4vw,42px); line-height:1.13; letter-spacing:-.04em; }
.composite-page .final-grid p { max-width:720px; margin:10px 0 0; color:var(--cm); }
.composite-page .final-actions { display:flex; gap:10px; flex-wrap:wrap; }
.composite-page .final-actions .btn { min-height:50px; white-space:nowrap; }
@media(max-width:960px){ .composite-page .composite-hgrid,.composite-page .install-grid{grid-template-columns:1fr;gap:30px}.composite-page .composite-art{max-width:620px; width:100%; margin:auto}.composite-page .model-grid{grid-template-columns:repeat(2,1fr)}.composite-page .choice-grid,.composite-page .application-grid{grid-template-columns:1fr 1fr}.composite-page .final-grid{grid-template-columns:1fr}.composite-page .final-actions{margin-top:2px} }
@media(max-width:640px){ .composite-page .composite-hero{padding:33px 0 40px}.composite-page .crumb{margin-bottom:17px}.composite-page h1{font-size:41px}.composite-page .composite-lead{font-size:17px}.composite-page .hero-proof,.composite-page .fit-grid,.composite-page .choice-grid,.composite-page .model-grid,.composite-page .application-grid,.composite-page .faq-grid,.composite-page .four-list{grid-template-columns:1fr}.composite-page .hero-proof span{min-height:auto}.composite-page .composite-actions .btn,.composite-page .final-actions .btn{width:100%}.composite-page .composite-art{min-height:310px}.composite-page .composite-art img{max-height:310px;padding:13px}.composite-page .section{padding:57px 0}.composite-page .section-head{margin-bottom:24px}.composite-page .section-head h2,.composite-page .section-title{font-size:31px}.composite-page .fit-card{padding:23px}.composite-page .choice-card{min-height:190px}.composite-page .model-copy{padding:18px}.composite-page .model-copy h3{font-size:20px}.composite-page .install-card{padding:23px}.composite-page .four-list div{min-height:auto}.composite-page .compare-wrap{margin:0 -14px;border-left:0;border-right:0}.composite-page .compare-table th,.composite-page .compare-table td{padding:13px 14px}.composite-page .final-cta{padding:42px 0} }

/* Composite conversion refinements: shorter navigation, richer technical comparison, quiet contact controls. */
.composite-page .model-specs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.composite-page .model-specs span { min-height:68px; }
.composite-page .model-specs span + span { border-left:1px solid var(--cl); }
.composite-page .model-specs b { overflow-wrap:anywhere; }
.composite-page .composite-mini-section { padding:34px 0; background:#fff; border-top:1px solid var(--cl); border-bottom:1px solid var(--cl); }
.composite-page .mini-guide { display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; align-items:center; }
.composite-page .mini-guide .section-kicker { margin-bottom:5px; }
.composite-page .mini-guide h2 { margin:0; color:var(--cn); font-size:24px; line-height:1.16; letter-spacing:-.03em; }
.composite-page .mini-guide-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--cl); }
.composite-page .mini-guide-links a { min-height:64px; padding:12px 16px; border-left:1px solid var(--cl); color:var(--cn); text-decoration:none; }
.composite-page .mini-guide-links a:first-child { border-left:0; }
.composite-page .mini-guide-links a:hover { background:#f5f8fa; }
.composite-page .mini-guide-links b { display:block; font-size:13px; }
.composite-page .mini-guide-links span { display:block; margin-top:4px; color:#896000; font-size:12px; font-weight:800; }
.composite-page .fit-cta { display:inline-flex; align-items:center; margin-top:22px; color:#875700; font-size:14px; font-weight:900; text-decoration:none; }
.composite-page .fit-cta:hover { color:#0b416e; text-decoration:underline; text-underline-offset:4px; }
.composite-page .compare-note { margin:-11px 0 13px; color:#637789; font-size:12px; }
@media(min-width:681px) {
  body.composite-page .qmfc-floating { top:74%; right:12px; gap:8px; }
  body.composite-page .qmfc-floating > a { justify-content:center; width:56px; min-height:56px; padding:8px; border-radius:50%; }
  body.composite-page .qmfc-floating > a > span:last-child { display:none; }
  body.composite-page .qmfc-floating > a:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(3,24,47,.38); }
}
@media(max-width:960px) { .composite-page .mini-guide { grid-template-columns:1fr; gap:15px; } }
@media(max-width:640px) {
  .composite-page .model-specs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .composite-page .model-specs span { min-height:70px; padding:10px 7px; font-size:8px; }
  .composite-page .model-specs b { font-size:11px; }
  .composite-page .composite-mini-section { padding:28px 0; }
  .composite-page .mini-guide-links { grid-template-columns:1fr; }
  .composite-page .mini-guide-links a,.composite-page .mini-guide-links a:first-child { min-height:0; border-left:0; border-top:1px solid var(--cl); }
  .composite-page .mini-guide-links a:first-child { border-top:0; }
  .composite-page .fit-cta { line-height:1.5; }
}

/* Match the composite model CTA with the yellow full-width action used on the main fan category. */
.composite-page .model-card .model-link { min-height:50px; margin:16px -20px -20px; padding:12px 14px 12px 16px; background:var(--cg); color:var(--cn); font-size:12px; }
.composite-page .model-card:hover .model-link { background:#ffca34; }
.composite-page .model-card .model-link strong { color:inherit; font-size:20px; }
@media(max-width:640px) { .composite-page .model-card .model-link { min-height:56px; margin:16px -18px -18px; padding:15px 18px; font-size:14px; } .composite-page .model-card .model-link strong { font-size:21px; } }


/* Final expert UX pass: direct section navigation, safer dimension context, mobile comparison and real support links. */
.composite-page #model,.composite-page #kiem-tra-lap-dat,.composite-page #faq-title,.composite-page #compare-title { scroll-margin-top:145px; }
.composite-page .composite-anchor-nav { position:sticky; top:86px; z-index:40; border-bottom:1px solid var(--cl); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }
.composite-page .composite-anchor-nav .c { display:flex; align-items:center; gap:0; overflow-x:auto; }
.composite-page .composite-anchor-nav a { flex:1 0 auto; padding:14px 22px; border-left:1px solid var(--cl); color:#466275; font-size:13px; font-weight:900; line-height:1.25; text-align:center; text-decoration:none; white-space:nowrap; }
.composite-page .composite-anchor-nav a:first-child { border-left:0; }
.composite-page .composite-anchor-nav a:hover,.composite-page .composite-anchor-nav a:focus-visible { color:var(--cn); background:#f4f8fa; outline:0; }
.composite-page .mini-guide-in-model { grid-template-columns:235px minmax(0,1fr); margin:0 0 21px; padding:16px 18px; border:1px solid var(--cl); background:#f8fafb; }
.composite-page .mini-guide-in-model h3 { margin:0; color:var(--cn); font-size:21px; line-height:1.18; letter-spacing:-.025em; }
.composite-page .mini-guide-in-model .mini-guide-links { background:#fff; }
.composite-page .model-footnote { max-width:870px; margin:18px 0 0; padding:13px 15px; border-left:3px solid var(--cg); background:#fff8e6; color:#536d7b; font-size:13px; line-height:1.55; }
.composite-page .model-footnote strong { color:var(--cn); }
.composite-page .compare-wrap { position:relative; }
.composite-page .compare-table th:first-child,.composite-page .compare-table td:first-child { position:sticky; left:0; z-index:2; }
.composite-page .compare-table th:first-child { z-index:4; background:#071e3b; box-shadow:7px 0 12px rgba(6,30,56,.13); }
.composite-page .compare-table td:first-child { background:#fff; box-shadow:7px 0 12px rgba(8,42,73,.08); }
.composite-page .compare-table tr:nth-child(even) td:first-child { background:#f7fafb; }
.composite-page .composite-trust { padding-top:74px; padding-bottom:74px; }
.composite-page .trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.composite-page .trust-card { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr) 17px; gap:12px; min-height:142px; padding:19px; border:1px solid var(--cl); background:#fff; color:var(--cn); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.composite-page .trust-card:hover { transform:translateY(-3px); border-color:#d5a322; box-shadow:0 16px 35px rgba(10,49,82,.1); }
.composite-page .trust-icon { display:grid; place-items:center; align-self:start; width:32px; height:32px; background:#f6ba1f; color:#071e3b; font-size:10px; font-weight:900; }
.composite-page .trust-card b { display:block; font-size:16px; line-height:1.28; }
.composite-page .trust-card p { margin:7px 0 0; color:var(--cm); font-size:12px; line-height:1.55; }
.composite-page .trust-card>strong { align-self:center; color:#916300; font-size:21px; font-weight:500; }
@media(max-width:960px) { .composite-page .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .composite-page .mini-guide-in-model { grid-template-columns:1fr; } }
@media(max-width:640px) { .composite-page #model,.composite-page #kiem-tra-lap-dat,.composite-page #faq-title,.composite-page #compare-title { scroll-margin-top:122px; } .composite-page .composite-anchor-nav { top:70px; } .composite-page .composite-anchor-nav .c { width:100%; } .composite-page .composite-anchor-nav a { flex:0 0 auto; padding:12px 14px; font-size:12px; } .composite-page .mini-guide-in-model { padding:15px; margin-bottom:16px; } .composite-page .mini-guide-in-model h3 { font-size:20px; } .composite-page .model-footnote { margin-top:14px; font-size:12px; } .composite-page .trust-grid { grid-template-columns:1fr; } .composite-page .trust-card { min-height:0; padding:17px; } .composite-page .composite-trust { padding-top:56px; padding-bottom:56px; } }


/* Model-card specs: keep core metrics side by side and give the long physical dimension its own full-width row. */
.composite-page .model-specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.composite-page .model-specs span:nth-child(3) { grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; min-height:46px; padding:10px 12px; border-top:1px solid var(--cl); border-left:0; }
.composite-page .model-specs span:nth-child(3) b { display:inline; margin:0; font-size:13px; }
@media(max-width:640px) { .composite-page .model-specs { grid-template-columns:1fr 1fr; } .composite-page .model-specs span:nth-child(3) { min-height:48px; padding:11px 12px; font-size:9px; } .composite-page .model-specs span:nth-child(3) b { font-size:12px; } }


/* Composite thumbnails use the supplied square product renders edge-to-edge without an inner matte. */
.composite-page .model-picture { height:auto; aspect-ratio:1 / 1; background:#e7f0f6; }
.composite-page .model-picture img { width:100%; height:100%; padding:0; object-fit:cover; object-position:center; }


/* Composite product detail: square supplied renders fill the hero image stage without an inner matte or crop. */
.composite-detail-page .dhero .dgrid { grid-template-columns:minmax(0,1fr) minmax(400px,520px); gap:58px; }
.composite-detail-page .dhero .dart { justify-self:end; width:100%; max-width:520px; min-height:0; aspect-ratio:1 / 1; overflow:hidden; background:#e5eff7; }
.composite-detail-page .dhero .dart img { padding:0; object-fit:cover; object-position:center; }
.composite-detail-page .dhero .dart small { bottom:18px; left:18px; }
@media(max-width:900px) { .composite-detail-page .dhero .dgrid { grid-template-columns:1fr; gap:30px; } .composite-detail-page .dhero .dart { justify-self:start; max-width:600px; } }
@media(max-width:560px) { .composite-detail-page .dhero .dart { max-width:none; } .composite-detail-page .dhero .dart small { bottom:14px; left:14px; } }

@media(min-width:681px) {
  body.composite-detail-page .qmfc-floating { top:74%; right:12px; gap:8px; }
  body.composite-detail-page .qmfc-floating > a { justify-content:center; width:56px; min-height:56px; padding:8px; border-radius:50%; }
  body.composite-detail-page .qmfc-floating > a > span:last-child { display:none; }
  body.composite-detail-page .qmfc-floating > a:hover { transform:translateY(-3px); }
}


/* The composite catalogue now includes two roof-mounted TPM models. */
.composite-page .mini-guide-in-model .mini-guide-links { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:960px) { .composite-page .mini-guide-in-model .mini-guide-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* Keep the two roof-mounted TPM products balanced as a paired final row on desktop. */
@media(min-width:961px) {
  .composite-page .model-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .composite-page .model-card { grid-column:span 2; }
  .composite-page .model-card.tpm-model-card { grid-column:span 3; }
}
@media(max-width:960px) { .composite-page .model-card,.composite-page .model-card.tpm-model-card { grid-column:span 1; } }


/* Composite category typography: preserve hierarchy while reducing visual weight in the hero and section headings. */
.composite-page h1 { font-size:clamp(40px,4.1vw,58px); line-height:1.06; }
.composite-page .section-head h2,.composite-page .section-title { font-size:clamp(28px,3vw,40px); line-height:1.16; }
@media(max-width:640px) { .composite-page h1 { font-size:40px; line-height:1.07; } .composite-page .section-head h2,.composite-page .section-title { font-size:30px; line-height:1.17; } }

/* Composite final UX refinement: faster scanning, earlier product proof on mobile, and compact touch navigation. */
@media (min-width: 961px) {
  body.composite-page .qmfc-brand { width: 170px; }
  body.composite-page .qmfc-nav { gap: 31px; }

  .composite-page .hero-proof { margin: 24px 0 25px; }
  .composite-page .hero-proof span { min-height: 78px; padding: 12px 12px 12px 14px; background: rgba(4,31,54,.14); }
}

@media (max-width: 640px) {
  .composite-page .composite-hgrid { display: grid; gap: 18px; }
  .composite-page .composite-hgrid > div { display: contents; }
  .composite-page .composite-eyebrow,
  .composite-page .composite-hgrid h1,
  .composite-page .composite-lead { order: 1; }
  .composite-page .composite-art { order: 2; margin-top: 3px; }
  .composite-page .hero-proof { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
  .composite-page .hero-proof span { min-height: 0; padding: 12px 11px 12px 13px; font-size: 11px; }
  .composite-page .hero-proof span:nth-child(3) { grid-column: 1 / -1; }
  .composite-page .composite-actions { order: 4; gap: 9px; }
  .composite-page .composite-art { min-height: 0; aspect-ratio: 1 / 1; }
  .composite-page .composite-art img { max-height: none; height: 100%; padding: 12px; }

  .composite-page .composite-anchor-nav .c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .composite-page .composite-anchor-nav a { min-height: 43px; display: flex; align-items: center; justify-content: center; padding: 9px 8px; border-top: 1px solid var(--cl); border-left: 1px solid var(--cl); font-size: 12px; white-space: normal; }
  .composite-page .composite-anchor-nav a:nth-child(odd) { border-left: 0; }
  .composite-page .composite-anchor-nav a:nth-child(-n+2) { border-top: 0; }

  body.composite-page { padding-bottom: 54px; }
  body.composite-page .qmfc-floating > a { min-height: 54px; padding: 7px 10px; }
  body.composite-page .qmfc-float-icon { flex-basis: 31px; width: 31px; height: 31px; font-size: 16px; }
  body.composite-page .qmfc-floating small { font-size: 8px; }
  body.composite-page .qmfc-floating b { font-size: 12px; }
}@media (min-width: 961px) {
  body.composite-page .qmfc-brand img { transform: scale(1.34); }
}

/* TPM roof fans are presented only in the dedicated roof-fan category. */
.composite-page .mini-guide-in-model .mini-guide-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 960px) { .composite-page .mini-guide-in-model .mini-guide-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .composite-page .mini-guide-in-model .mini-guide-links { grid-template-columns:1fr; } }
/* Roof product detail: installation confidence, quote scope and qualified lead capture. */
.roof-product-detail #thong-so,.roof-product-detail #kiem-tra-lap-dat,.roof-product-detail #phu-hop,.roof-product-detail #pham-vi-bao-gia,.roof-product-detail #bao-gia { scroll-margin-top:124px; }
.roof-product-detail .anchors .c { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.roof-product-detail .anchors a { min-width:0; padding:14px 12px; border-left:1px solid var(--l); text-align:center; }
.roof-product-detail .anchors a:first-child { border-left:0; }
.roof-product-detail .roof-detail-preflight { background:#fff; }
.roof-product-detail .roof-detail-preflight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.roof-product-detail .roof-detail-preflight-grid article { position:relative; min-width:0; padding:24px 22px 22px; border:1px solid var(--l); border-top:4px solid var(--n); background:#fff; }
.roof-product-detail .roof-detail-preflight-grid article>span { display:grid; width:34px; height:34px; place-items:center; margin-bottom:17px; background:var(--g); color:var(--n); font-size:10px; font-weight:900; }
.roof-product-detail .roof-detail-preflight-grid article>small { color:#a76a00; font-size:10px; font-weight:900; letter-spacing:.11em; }
.roof-product-detail .roof-detail-preflight-grid h3 { margin:9px 0 8px; color:var(--n); font-size:20px; line-height:1.22; }
.roof-product-detail .roof-detail-preflight-grid p { margin:0; color:var(--m); font-size:13px; line-height:1.62; }
.roof-product-detail .roof-detail-preflight-note { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; margin-top:14px; padding:16px 18px; border-left:4px solid var(--g); background:#fff8e2; color:#526d7e; font-size:12px; line-height:1.5; }
.roof-product-detail .roof-detail-preflight-note>b { color:var(--n); font-size:10px; letter-spacing:.1em; }
.roof-product-detail .roof-detail-preflight-note a { color:#875700; font-weight:900; text-decoration:none; white-space:nowrap; }
.roof-product-detail .roof-detail-quote-scope { background:var(--p); }
.roof-product-detail .roof-detail-scope-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.roof-product-detail .roof-detail-scope-grid article { min-width:0; min-height:170px; padding:20px 18px; border:1px solid var(--l); background:#fff; }
.roof-product-detail .roof-detail-scope-grid article>b { display:block; color:#a76a00; font-size:10px; letter-spacing:.1em; }
.roof-product-detail .roof-detail-scope-grid h3 { margin:9px 0 7px; color:var(--n); font-size:18px; line-height:1.22; }
.roof-product-detail .roof-detail-scope-grid p { margin:0; color:var(--m); font-size:12px; line-height:1.58; }
.roof-product-detail .roof-detail-scope-note { margin:14px 0 0; padding:13px 15px; border-left:3px solid var(--g); background:#fff8e2; color:#526d7e; font-size:13px; line-height:1.55; }
.roof-product-detail .roof-detail-scope-note b { color:var(--n); }
.roof-product-detail .roof-detail-form { gap:12px; }
.roof-product-detail .roof-detail-form label { display:grid; gap:6px; color:#d5e3eb; font-size:11px; font-weight:800; line-height:1.35; }
.roof-product-detail .roof-detail-form input,.roof-product-detail .roof-detail-form select,.roof-product-detail .roof-detail-form textarea { min-height:48px; border-color:#cbdbe3; color:var(--i); background:#fff; font-size:14px; }
.roof-product-detail .roof-detail-form textarea { min-height:100px; resize:vertical; }
.roof-product-detail .roof-detail-form .roof-form-full { grid-column:1 / -1; }
.roof-product-detail .roof-detail-form input:focus,.roof-product-detail .roof-detail-form select:focus,.roof-product-detail .roof-detail-form textarea:focus { border-color:var(--g); outline:3px solid rgba(246,186,31,.22); }
@media (max-width:900px) {
  .roof-product-detail .roof-detail-preflight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-product-detail .roof-detail-preflight-grid article:last-child { grid-column:1 / -1; }
  .roof-product-detail .roof-detail-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .roof-product-detail .anchors .c { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .roof-product-detail .anchors a { border-top:1px solid var(--l); border-left:1px solid var(--l); font-size:11px; }
  .roof-product-detail .anchors a:nth-child(odd) { border-left:0; }
  .roof-product-detail .anchors a:nth-child(-n+2) { border-top:0; }
  .roof-product-detail .roof-detail-preflight-grid,.roof-product-detail .roof-detail-scope-grid { grid-template-columns:1fr; }
  .roof-product-detail .roof-detail-preflight-grid article:last-child { grid-column:auto; }
  .roof-product-detail .roof-detail-preflight-note { grid-template-columns:1fr; gap:7px; }
  .roof-product-detail .roof-detail-preflight-note a { white-space:normal; }
  .roof-product-detail .roof-detail-scope-grid article { min-height:0; }
  .roof-product-detail .roof-detail-form { grid-template-columns:1fr; }
  .roof-product-detail .roof-detail-form .roof-form-full { grid-column:auto; }
}