/* One choice language; motion responds without moving the layout. */
button[aria-pressed]:not(.tool-controls button,.quote-ticket button),button[role=tab][aria-selected]{background:#fff!important;border:1px solid #d0dceb!important;color:#021d4a!important;transition:background-color 140ms ease-out,color 140ms ease-out,border-color 140ms ease-out,box-shadow 140ms ease-out}
button[aria-pressed=true]:not(.tool-controls button,.quote-ticket button),button[role=tab][aria-selected=true]{background:#021d4a!important;border-color:#021d4a!important;color:#fff!important;box-shadow:none!important}
button[aria-pressed]:not(.tool-controls button,.quote-ticket button) :is(span,small,strong,b),button[role=tab][aria-selected] :is(span,small,strong,b){color:inherit!important}
button[aria-pressed]:not(.tool-controls button,.quote-ticket button):hover,button[role=tab][aria-selected]:hover{box-shadow:0 0 0 2px #0764ee22!important}
:where(button,a,input,summary):focus-visible{outline:2px solid #0764ee;outline-offset:3px}
.catalogue-family{background:#fff;color:#021d4a;transition:background-color 140ms ease-out,color 140ms ease-out}
.catalogue-family:has([aria-pressed=true]){background:#021d4a;color:#fff;outline-color:#021d4a}
.catalogue-family:has([aria-pressed=true])>.text-link{color:#fff}
.catalogue-family{border-color:transparent}
.catalogue-family>button{border:1px solid #d0dceb!important;padding:12px!important;border-radius:16px!important}
.catalogue-family>button[aria-pressed=true]:not(.tool-controls button,.quote-ticket button){border-color:#021d4a!important}
.contact-section{grid-column:1/-1!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px 32px;height:auto!important;min-height:0!important;align-self:start;align-items:start}
.contact-section>.panel-head{grid-column:1;grid-row:1;margin:0}
.contact-section>.panel-head h2{font-size:var(--type-40);text-wrap:balance}
.contact-section>.quote-preview{grid-column:2;grid-row:1/span 2;min-width:0;margin:0;font-size:var(--type-14);line-height:1.6;background:#0057d8;color:#fff;border:1px solid #ffffff40;max-width:100%;white-space:pre-wrap}
.contact-section>.actions{grid-column:1;grid-row:2;margin:0;gap:12px;align-self:start}
.contact-section [aria-disabled=true]{opacity:.6;cursor:not-allowed}
.app-faq{grid-column:1/-1}
.app-guide>.app-guide-heading{list-style:none;display:block;position:relative;padding-left:0;cursor:default;outline-offset:6px}
.app-guide>.app-guide-heading::-webkit-details-marker{display:none}
.app-guide>.app-guide-heading::marker{content:''}
.app-guide>.app-guide-heading::after{content:none}
.app-guide>.app-guide-heading .eyebrow{margin-left:0}
.full-prices{scroll-margin-top:112px}
.button{transition:background-color 160ms ease-out,color 160ms ease-out,box-shadow 160ms ease-out}
.button:hover{box-shadow:0 4px 12px #021d4a15}
@media(max-width:700px){
 .contact-section{display:flex;flex-direction:column;gap:16px}
 .contact-section>.panel-head h2{font-size:var(--type-28)}
 .contact-section>.quote-preview{width:100%;font-size:var(--type-14)}
 .contact-section>.actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
 .contact-section>.actions .button{flex:1;white-space:nowrap;padding-inline:12px}
 .app-guide>.app-guide-heading{padding-right:36px;cursor:pointer;min-height:44px}
 .app-guide>.app-guide-heading::after{content:'+';position:absolute;right:0;top:12px;font-size:var(--type-28);line-height:1}
 .app-guide[open]>.app-guide-heading::after{content:'−'}
}
@media(prefers-reduced-motion:reduce){
 button,a,.catalogue-family,.button{transition:none!important}
}

/* Film swatches retain their own colour; the selection frame is shared. */
.choice-indicator{display:grid;place-items:center;flex:none;width:16px;height:16px;opacity:0;color:inherit;pointer-events:none;transition:opacity var(--choice-speed) var(--choice-ease)}
.choice-indicator>.icon{width:14px;height:14px;stroke-width:2}
button[aria-pressed=true] .choice-indicator{opacity:1}
[data-choice-group] button[aria-pressed]{transition:background-color var(--choice-speed) var(--choice-ease),border-color var(--choice-speed) var(--choice-ease),box-shadow var(--choice-speed) var(--choice-ease),color var(--choice-speed) var(--choice-ease)}
.car-tool .pane-code-pills .code-pill{display:grid;grid-template-columns:20px minmax(0,1fr) 16px;grid-template-rows:auto auto;column-gap:8px;row-gap:0;min-height:56px;height:auto;padding:8px;text-align:left;border-radius:12px}
.pane-code-pills .code-pill>.swatch{grid-row:1/3;grid-column:1}
.pane-code-pills .code-pill>b{grid-column:2;grid-row:1;font-size:var(--type-14);line-height:1.4}
.pane-code-pills .code-pill>span:not(.swatch,.choice-indicator){grid-column:2;grid-row:2;font-size:var(--type-12);line-height:1.4;color:var(--muted)}
.pane-code-pills .code-pill>.choice-indicator{grid-column:3;grid-row:1/3}
.house-tool button.house-code{grid-template-columns:20px minmax(0,1fr) auto 16px;grid-template-rows:auto auto;gap:0 8px;min-height:56px}
.house-code>i{grid-column:1;grid-row:1/3}
.house-code>b{grid-column:2;grid-row:1}
.house-code>.house-code-vlt{grid-column:2;grid-row:2;justify-self:start;font-size:var(--type-12);line-height:1.4;color:var(--muted)}
.house-code>.house-code-price{grid-column:3;grid-row:1/3;font-size:var(--type-12)}
.house-code>.choice-indicator{grid-column:4;grid-row:1/3}
@media(hover:hover){[data-choice-group] button[aria-pressed=false]:hover{border-color:var(--muted);box-shadow:0 2px 8px color-mix(in srgb,var(--navy) 8%,transparent)}}
@media(max-width:699px){.house-tool button.house-code{gap:0 6px}.car-tool .pane-code-pills .code-pill{column-gap:6px}}
@media(prefers-reduced-motion:reduce){.choice-indicator,[data-choice-group] button[aria-pressed]{transition:none}}
.house-code[aria-pressed=true]{outline:none}
.house-code:focus-visible{outline:2px solid #0764ee;outline-offset:3px}
.contact-section>.quote-preview{overflow-wrap:break-word;word-break:normal}
/* Keep catalogue navigation readable on its current card surface. */
.catalogue-family:not(:has([aria-pressed=true]))>.text-link{color:#075bd6}
@media(max-width:700px){
 .catalogue-family{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0;border:0}
 .catalogue-family>button{width:100%;min-height:104px}
 .catalogue-family>.text-link{justify-self:end;min-height:44px;padding:8px 12px}
}
@media(max-width:700px){
 body[data-path="/bao-hanh/"] #main .eyebrow,body[data-path="/bao-hanh/"] #main .app-note{font-size:var(--type-14)}
 body[data-path="/bao-hanh/"] #main .app-note a{font-size:inherit}
}

/* Drawer navigation stays reachable while its tools scroll. */
#catalogue-code-sheet{scroll-padding-top:80px}
#catalogue-code-sheet .code-sheet-heading{position:sticky;top:0;right:auto;z-index:20;margin:0 0 12px;padding-block:4px;background:inherit}
@media(max-width:699px){
 .code-sheet .tool-result{position:static}
 .is-preview-compact .tool-controls{--tool-focus-top:168px}
 .tool-header-visible .is-preview-compact .tool-controls{--tool-focus-top:238px}
}
@media(max-width:359px){
 .code-sheet .car-family-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .code-sheet .car-family-card:last-child{grid-column:1/-1}
 .code-sheet .car-tool .position-choices{height:auto}
 .code-sheet .position-choice{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"check title" ". price" ". options";gap:2px 6px}
 .code-sheet .pane-price{justify-self:end}
 .code-sheet .mobile-tool-summary .price-detail-trigger>[data-summary-price]{font-size:var(--type-20)}
 .code-sheet .mobile-tool-summary [data-summary-label]{white-space:normal;text-wrap:pretty}
 .code-sheet .mobile-tool-summary .button{font-size:var(--type-12);padding-inline:10px}
}