/* Product surfaces share Khung kính tokens and pill controls. */
.code-photo-card img,.quick-code-image img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.price-tile{background:#F2F6FB;border-radius:var(--tile-radius);padding:24px;display:flex;flex-direction:column;gap:8px;font-size:var(--type-14);min-width:0}
.price-tile strong{font:400 var(--type-28)/1.1 'Times New Roman','Liberation Serif',serif}
.glass-price-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.glass-price-rail article{min-width:0}
.panel.catalogue-intro{padding-block:24px}
.catalogue-intro>h1{margin-bottom:16px}
.catalogue-intro>.eyebrow{margin-bottom:8px}
.catalogue-section .catalogue-state{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.catalogue-section .catalogue-state h2{font-size:var(--type-28);flex-basis:auto}
.quick-code-image{aspect-ratio:5/3;background:white}
.quick-code-copy{display:grid;gap:16px}
.quick-code-copy>p{font-size:var(--type-14)}
.quick-code-actions{display:flex;flex-wrap:wrap;gap:12px}
.quick-code .code-stats{grid-template-columns:repeat(3,1fr);gap:8px}
.quick-code .code-stats dd{font-size:var(--type-28)}
.quick-code .code-stats>div{padding:12px}
.quick-code .code-stats dt{font-size:var(--type-14)}
.catalogue-selection-message:empty{display:none}
.code-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.code-stats>div{padding:16px;border-radius:var(--tile-radius);background:#F2F6FB;display:flex;flex-direction:column;min-width:0}
.code-stats dt{font-size:var(--type-14);order:2}
.code-stats dd{font:400 var(--type-40)/1.1 'Times New Roman','Liberation Serif',serif;margin-bottom:8px}
.code-stats dd small{font:inherit}
.stat-track{display:none}
.code-page-layout{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.product-breadcrumbs{display:flex;gap:12px;margin-bottom:32px;font-size:var(--type-14)}
.code-page-copy h1{font-size:var(--type-96);line-height:1;white-space:nowrap}
.code-page-technology{font-size:var(--type-16);margin:16px 0}
.code-meta{display:flex;gap:24px;font-size:var(--type-14);flex-wrap:wrap;margin-bottom:24px}
.code-meta p{margin:0}
.code-photo-card{position:relative;aspect-ratio:5/3;min-height:380px;background:#fff;border-radius:var(--tile-radius);padding:0 0 60px;overflow:visible}
.code-color-large{position:absolute;right:0;bottom:0;padding:8px;background:#fff;border-radius:12px;box-shadow:0 10px 24px #021d4a14}
.code-color-large .swatch{width:160px;height:200px;border-radius:12px;border:2px solid #DCE3EC}
.code-hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.code-price-list{display:grid;gap:24px}
.code-package-prices{padding:24px 0;display:grid;gap:12px;font-size:var(--type-14)}
.code-package-prices strong{display:block;font:400 var(--type-28)/1.1 'Times New Roman',serif}
.code-package-prices p{margin:0}
.code-building-price strong{font-size:var(--type-28)}
.code-sheet .quick-code-image{max-width:400px;margin:auto}
.code-sheet .quick-code-copy{padding:0 8px}
.code-sheet .text-link{margin-top:16px}
.code-sheet .code-stats dd{font-size:var(--type-28)}
.catalogue-empty{padding:24px;border-radius:var(--tile-radius);background:#fff;grid-column:1/-1}
.product-final-cta .text-button{color:inherit}
@media(max-width:1100px){
.code-page-layout{grid-template-columns:1fr 1fr;gap:24px}
.code-page-copy h1{font-size:var(--type-60)}
.code-stats dd{font-size:var(--type-28)}
}
@media(max-width:900px){.code-page-layout{grid-template-columns:1fr}
.code-photo-card{min-height:400px}
.code-page-copy h1{font-size:var(--type-96)}
}
@media(max-width:600px){.price-tile{padding:16px}
.price-tile strong{font-size:var(--type-28)}
.code-page-copy h1{font-size:var(--type-60)}
.code-page-layout{gap:32px}
.code-photo-card{min-height:300px;aspect-ratio:5/4;padding:0 0 70px}
.code-color-large .swatch{width:160px;height:200px}
.code-color-large{right:-8px;bottom:-16px;transform:scale(.7);transform-origin:right bottom}
.code-page-media>.fine-print{margin-top:24px}
.code-stats{gap:8px}
.code-stats>div{padding:12px}
.code-stats dd{font-size:var(--type-28)}
.code-stats dt{font-size:var(--type-14)}
.code-meta{gap:16px}
.product-breadcrumbs{gap:8px;font-size:var(--type-14);flex-wrap:wrap}
.code-page-technology{font-size:var(--type-16)}
.glass-price-rail{grid-template-columns:1fr 1fr;gap:12px}
.glass-price-rail strong{font-size:var(--type-28)}
.code-sheet{padding:24px;max-height:90dvh}
.code-sheet-heading h2{font-size:var(--type-28)}
}
@media(max-width:359px){.code-page-copy h1{font-size:var(--type-40);letter-spacing:-.04em}
.code-stats>div{padding:8px}
.code-stats dd{font-size:var(--type-28)}
.code-stats dt{font-size:var(--type-14)}
.glass-price-rail{grid-template-columns:1fr}
}
#ma-phim{scroll-margin-top:104px}
.code-sheet:has(.quick-code){padding:20px;background:#fff;margin:auto}
.code-sheet:has(.quick-code) .code-sheet-heading{position:absolute;z-index:2;top:12px;right:12px;margin:0}
.code-sheet:has(.quick-code) .sheet-close{background:#fff;box-shadow:0 2px 12px #021d4a12}
.code-sheet .quick-code{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center}
.code-sheet .quick-code-image{aspect-ratio:auto;width:100%;max-width:none;margin:0;height:480px;max-height:none;background:#f3f6fb}
.code-sheet .quick-code-image img{width:100%;height:100%;object-fit:contain;background:transparent}
.code-sheet .quick-code-copy{min-width:0;gap:16px;padding:36px 12px 12px 0}
.code-sheet .quick-code-heading .eyebrow{margin:0 0 8px;font-size:var(--type-14)}
.code-sheet .quick-code-heading h2{display:flex;align-items:center;gap:12px;font-size:var(--type-40);line-height:1.08}
.code-sheet .quick-code-heading .swatch{width:28px;height:28px;flex:none;border-radius:50%}
.code-sheet .quick-code .code-stats{margin:0;gap:8px}
.code-sheet .quick-code .code-stats>div{padding:12px 8px;background:#f1f5fb;border-radius:16px}
.code-sheet .quick-code .code-stats dd{font-size:var(--type-28);white-space:nowrap;margin-bottom:8px}
.code-sheet .quick-code .code-stats dt{font-size:var(--type-14)}
.code-sheet .quick-code-meta,.code-sheet .quick-code-signal{font-size:var(--type-14);line-height:1.5;margin:0;text-wrap:pretty}
.code-sheet .quick-code-copy>.text-link{justify-self:start;min-height:36px}
.code-sheet .quick-code-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.code-sheet .quick-code-actions .button{min-height:48px;padding:12px;font-size:var(--type-14);white-space:nowrap;gap:8px}
.code-sheet .quick-code-actions .button:only-child{grid-column:1/-1}
@media(max-width:700px){
 .code-sheet:has(.quick-code){padding:12px;max-height:94dvh}
 .code-sheet .quick-code{grid-template-columns:1fr;gap:16px}
 .code-sheet .quick-code-image{height:clamp(224px,30dvh,292px);border-radius:16px}
 .code-sheet .quick-code-copy{gap:12px;padding:0 4px 4px}
 .code-sheet .quick-code-heading h2{font-size:var(--type-40)}
 .code-sheet .quick-code-actions{position:sticky;bottom:0;background:#fff;padding:8px 0 0}
 .code-sheet .quick-code .code-stats dd{font-size:var(--type-28)}
}
@media(max-width:360px){
 .code-sheet .quick-code .code-stats>div{padding-inline:6px}
 .code-sheet .quick-code .code-stats dd small{font-size:var(--type-20)}
 .code-sheet .quick-code-actions{grid-template-columns:1fr}
 .code-sheet .quick-code-heading h2{font-size:var(--type-28)}
}

/* Catalogue cards own their layout; no later stylesheet changes the column count. */
.v2-code-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2-code-grid>.film-card:last-child:nth-child(3n+1){grid-column:1/-1}
.film-card{padding:0!important;border:1px solid #dce3ec;border-radius:20px;background:#fff;min-width:0;overflow:hidden}
.film-card-pick{display:grid;align-content:start;gap:12px;padding:16px;width:100%;height:100%;min-height:196px;background:transparent;border:0;color:#021d4a;text-align:left;border-radius:20px!important}
.film-card-pick:hover{background:#f3f7ff}
.film-card-top{display:flex;align-items:center;gap:8px;font-size:var(--type-16);white-space:nowrap}
.film-card-top b{font-size:inherit}
.film-card-top .swatch{width:24px;height:24px;flex:none}
.film-card-vlt{font:400 var(--type-40)/1 'Times New Roman',serif;white-space:nowrap}
.film-card-vlt small{font:var(--type-12)/1 var(--font-body);margin-left:6px}
.film-card-specs{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--type-14);line-height:1.5}
.film-card-specs>span{white-space:nowrap}
.film-card-more{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:var(--type-14);color:#075bd6;min-height:32px;margin-top:auto}
.code-pills.related-code-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;max-width:640px}
.related-code-links .code-pill{width:100%;min-width:0;justify-content:center}
#catalogue-filters-v2{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
#catalogue-filters-v2 fieldset{min-width:0;border:0;padding:0;margin:0}
#catalogue-filters-v2 legend{float:none;margin-bottom:8px;font-size:var(--type-14);font-weight:600}
#catalogue-filters-v2 .chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:0 2px 4px}
#catalogue-filters-v2 .chip{min-height:44px;flex:none}
.catalogue-more-filters>summary,.catalogue-overview>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--navy);font-size:var(--type-14);font-weight:600;list-style:none;cursor:pointer}
.catalogue-more-filters>summary{padding:4px 0}
.catalogue-more-filters>summary small{display:block;color:var(--muted);font-size:var(--type-12);font-weight:400;line-height:1.5;margin-top:4px}
:is(.catalogue-more-filters,.catalogue-overview)>summary::-webkit-details-marker{display:none}
:is(.catalogue-more-filters,.catalogue-overview)[open]>summary>.icon{transform:rotate(180deg)}
.catalogue-secondary-filters{display:grid;gap:16px;margin-top:16px}
.catalogue-overview{border-top:1px solid var(--line);padding-top:8px}
.catalogue-overview .catalogue-families{margin-top:12px}
@media(max-width:700px){
 .v2-code-grid{gap:8px}
 .film-card-pick{min-height:156px;padding:12px 8px;gap:8px}
 .film-card-top{font-size:var(--type-12);gap:4px}
 .film-card-top .swatch{width:12px;height:12px;border-width:1px}
 .film-card-vlt{font-size:var(--type-28)}
 .film-card-vlt small{font-size:var(--type-12);margin-left:2px}
 .film-card-specs{font-size:var(--type-12)}
 .catalogue-section .film-card-uv{display:none}
 .film-card-more{font-size:var(--type-12)}
 .film-card-more svg{width:16px;height:16px}
 .related-code-links{gap:8px}
 .related-code-links .code-pill{display:grid;grid-template-columns:14px minmax(0,1fr);grid-template-rows:16px 16px;gap:2px 4px;padding:6px;justify-content:start;text-align:left;white-space:nowrap}
 .related-code-links .code-pill .swatch{width:14px;height:14px;border-width:1px;grid-row:1/span 2;align-self:center}
 .related-code-links .code-pill b,.related-code-links .code-pill>span:last-child{font-size:var(--type-12)}
 #catalogue-filters-v2{grid-template-columns:1fr;gap:8px}
 #catalogue-filters-v2 .chip{padding:8px 12px}
}

@media(max-width:700px){
 .panel.catalogue-intro{padding:20px}
 .catalogue-intro>h1{font-size:var(--type-40);margin-bottom:12px}
 .catalogue-intro>.eyebrow{font-size:var(--type-12)}
 .catalogue-more-filters>summary{min-height:48px}
 .catalogue-section .catalogue-state h2{font-size:var(--type-20)}
 .code-page-root .code-house-action p{margin-bottom:12px}
}
@media(max-width:359px){.film-card-pick{padding-inline:4px}.film-card-top{gap:2px}}

/* Optional sourced help uses the existing text/border roles and native disclosure. */
.film-help{min-width:0;max-width:100%;color:var(--navy)}
.film-help>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;width:fit-content;max-width:100%;font-size:var(--type-14);font-weight:600;line-height:1.5;list-style:none;cursor:pointer}
.film-help>summary::-webkit-details-marker{display:none}
.film-help>summary>.icon{width:16px;height:16px;transition:transform .18s ease-out}
.film-help[open]>summary>.icon{transform:rotate(180deg)}
.film-help>summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.film-help-terms{display:grid;gap:12px;margin:4px 0 12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--type-14);line-height:1.5}
.film-help-terms>div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px}
.film-help-terms dt{font-weight:600}.film-help-terms dd{color:var(--muted);margin:0}
.film-help--compact>summary,.film-help--compact .film-help-terms{font-size:var(--type-12)}
.step-label>.film-help{margin-left:auto}
.step-label:has(>.film-help[open]){flex-wrap:wrap;align-items:flex-start}
.step-label>.film-help[open]{flex:1 0 100%;margin-left:0}
.catalogue-intro>.film-help{margin-bottom:8px}
.family-codes-section>.film-help{margin:-12px 0 12px}
/* A static split names its two sides and the actual mixed-code scene. */
.code-vehicle-preview .code-glass-visual{margin-bottom:12px}
.code-comparison-labels{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.code-comparison-labels>span{padding:4px 8px;background:var(--code-legend-surface,#fff);color:var(--navy);border:1px solid var(--line);border-radius:8px;font-size:var(--type-12);line-height:1.5}
.code-preview-caption{display:grid;gap:4px;margin-bottom:12px;font-size:var(--type-14);line-height:1.5}
.code-preview-caption p{margin:0}.code-preview-context{color:var(--muted);font-size:var(--type-12)}
.code-location-panel .code-valid-positions{font-size:var(--type-14);line-height:1.5}
@media(prefers-reduced-motion:reduce){.film-help>summary>.icon{transition:none}}