/* The shared shell owns branding/navigation. All product presentation is scoped. */
.solid-product { --sp-radius:var(--ht-radius-card); }
.solid-product .sp-section { padding-block:64px; }
.solid-product .sp-pale { background:var(--pale); }
.solid-product .sp-heading { margin-bottom:28px; max-width:980px; }
.solid-product .sp-heading h2 { font-size:var(--public-text-h2); line-height:1.3; }
.solid-product .sp-heading p { margin-top:12px; }
.solid-product .sp-centered { margin-inline:auto; text-align:center; }
.solid-product .sp-grid { display:grid; gap:20px; }
.solid-product .sp-grid > * { min-width:0; }
.solid-product .sp-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.solid-product .sp-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.solid-product .sp-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.solid-product .sp-card { background:var(--ht-color-bg); border:1px solid var(--line); border-radius:var(--ht-radius-card); padding:24px; }
.solid-product .sp-card > .icon { color:var(--blue); width:32px; height:32px; margin-bottom:14px; }
.solid-product .sp-card h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-card p { margin-top:12px; }
.solid-product .sp-banner { display:flex; flex-wrap:wrap; align-items:center; gap:20px; background:var(--ht-color-bg-subtle); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); padding:24px; margin-top:24px; }
.solid-product .sp-banner > .icon { color:var(--blue); width:36px; height:36px; }
.solid-product .sp-banner > div { flex:1 1 380px; min-width:0; }
.solid-product .sp-banner h3 { font-size:var(--public-text-h3); }
.solid-product .sp-banner p { margin-top:10px; }
.solid-product .actions { display:flex; gap:12px; flex-wrap:wrap; }
.solid-product .sp-banner .actions { flex:0 1 auto; }
.solid-product .button { white-space:normal; text-align:center; font-weight:600; }
.solid-product .sp-note { background:var(--pale); padding:18px 22px; border-left:4px solid var(--blue); margin-top:24px; }
.solid-product .sp-rounded { border-radius:var(--sp-radius); }
.solid-product :is(.sp-card,.sp-heading,.sp-photo-card) { overflow-wrap:break-word; }

/* Section 09 only: V4 images, overlays and labels share each intrinsic ratio. */
.solid-product #huong-dan-lap-dat { background:linear-gradient(180deg,var(--ht-color-bg),var(--pale)); }
.solid-product #huong-dan-lap-dat .sp-installation-heading { max-width:970px; margin-bottom:32px; }
.solid-product #huong-dan-lap-dat .sp-installation-eyebrow { display:inline-block; padding:8px 13px; margin-bottom:18px; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg-subtle); color:var(--blue); font-size:var(--public-text-small); font-weight:700; line-height:1.6; }
.solid-product #huong-dan-lap-dat h2 { font-size:var(--public-text-h2); line-height:1.3; }
.solid-product #huong-dan-lap-dat .sp-installation-heading p { margin-top:16px; max-width:900px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #huong-dan-lap-dat .sp-installation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 20px; }
.solid-product #huong-dan-lap-dat .sp-installation-card { display:flex; flex-direction:column; min-width:0; padding:12px; background:var(--ht-color-bg); border:1px solid var(--line); border-radius:var(--ht-radius-card); box-shadow:0 5px 18px #08284b04; }
@supports(grid-template-rows:subgrid) {
  .solid-product #huong-dan-lap-dat .sp-installation-card { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; }
}
.solid-product #huong-dan-lap-dat .sp-installation-card-heading { display:flex; align-items:center; gap:12px; min-height:80px; padding:8px 0 16px; }
.solid-product #huong-dan-lap-dat .sp-installation-number { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:50%; background:var(--blue); color:var(--ht-color-bg); font-size:var(--public-text-body); font-weight:700; }
.solid-product #huong-dan-lap-dat .sp-installation-card h3 { font-size:var(--public-text-h3); line-height:1.3; overflow-wrap:break-word; }
.solid-product #huong-dan-lap-dat .sp-installation-figure { position:relative; align-self:start; width:100%; margin:0; border-radius:var(--ht-radius-card); background:var(--pale); }
.solid-product #huong-dan-lap-dat .sp-installation-figure img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; border-radius:var(--ht-radius-card); }
.solid-product #huong-dan-lap-dat :is(.sp-installation-overlay,.sp-installation-annotations,.sp-installation-label) { pointer-events:none; }
.solid-product #huong-dan-lap-dat .sp-installation-annotations { position:absolute; inset:0; }
.solid-product #huong-dan-lap-dat .sp-installation-label { position:absolute; left:var(--sp-installation-label-x); top:var(--sp-installation-label-y); transform:translate(-50%,-50%); color:var(--blue); font-size:12px; font-weight:700; line-height:1.3; text-align:center; white-space:nowrap; }
.solid-product #huong-dan-lap-dat .sp-installation-label--badge { padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#ffffffeb; }
.solid-product #huong-dan-lap-dat .sp-installation-label--white { color:#fff; font-size:27px; text-shadow:0 1px 4px #205485; transform:translate(-50%,-50%) rotate(17deg); }
.solid-product #huong-dan-lap-dat .sp-installation-label--table { width:36%; white-space:normal; line-height:1.65; }
.solid-product #huong-dan-lap-dat .sp-installation-metric { display:block; color:var(--blue); font-size:20px; line-height:1.2; }
@media(min-width:1300px) {
  .solid-product #huong-dan-lap-dat .sp-installation-label { font-size:13px; }
  .solid-product #huong-dan-lap-dat .sp-installation-label--white { font-size:27px; }
}
.solid-product #huong-dan-lap-dat .sp-installation-points { padding:16px 4px 4px 20px; margin:0; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #huong-dan-lap-dat .sp-installation-points li + li { margin-top:7px; }
.solid-product #huong-dan-lap-dat .sp-installation-points li::marker { color:var(--blue); }
.solid-product #huong-dan-lap-dat .sp-installation-points strong { color:var(--navy); }
.solid-product #huong-dan-lap-dat .sp-installation-icon { display:inline-flex; flex:none; width:22px; height:22px; color:var(--blue); }
.solid-product #huong-dan-lap-dat .sp-installation-icon::before { content:""; width:100%; height:100%; background:currentColor; mask:var(--sp-installation-icon) center / contain no-repeat; }
.solid-product #huong-dan-lap-dat .sp-installation-note { display:flex; align-items:center; gap:7px; margin:14px 0 24px; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; }
.solid-product #huong-dan-lap-dat .sp-installation-note .sp-installation-icon { width:17px; height:17px; color:inherit; }
.solid-product #huong-dan-lap-dat .sp-installation-video { display:grid; grid-template-columns:minmax(0,1fr) 200px; align-items:center; gap:30px; padding:28px; background:var(--pale); border:1px solid var(--line); border-radius:var(--ht-radius-card); }
.solid-product #huong-dan-lap-dat .sp-installation-video-heading { display:flex; align-items:center; gap:14px; }
.solid-product #huong-dan-lap-dat .sp-installation-video-heading .sp-installation-icon { width:38px; height:38px; }
.solid-product #huong-dan-lap-dat .sp-installation-video h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #huong-dan-lap-dat .sp-installation-video p { max-width:720px; margin-top:12px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #huong-dan-lap-dat .sp-installation-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.solid-product #huong-dan-lap-dat .button { min-height:48px; gap:10px; font-size:var(--public-text-button); line-height:1.4; }
.solid-product #huong-dan-lap-dat .button .sp-installation-icon { color:inherit; }
.solid-product #huong-dan-lap-dat a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
.solid-product #huong-dan-lap-dat .sp-installation-qr { width:200px; margin:0; text-align:center; }
.solid-product #huong-dan-lap-dat .sp-installation-qr img { display:block; width:200px; height:200px; object-fit:contain; background:var(--ht-color-bg); }
.solid-product #huong-dan-lap-dat .sp-installation-qr figcaption { margin-top:7px; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; }
@media(max-width:1000px) {
  .solid-product #huong-dan-lap-dat .sp-installation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .solid-product #huong-dan-lap-dat .sp-installation-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .solid-product #huong-dan-lap-dat .sp-installation-heading { margin-bottom:24px; }
  .solid-product #huong-dan-lap-dat h2 { font-size:var(--public-text-h2); line-height:1.3; }
  .solid-product #huong-dan-lap-dat .sp-installation-heading p { margin-top:14px; font-size:var(--public-text-body); }
  .solid-product #huong-dan-lap-dat .sp-installation-eyebrow { margin-bottom:14px; }
  .solid-product #huong-dan-lap-dat .sp-installation-card-heading { min-height:72px; padding:6px 0 14px; }
  .solid-product #huong-dan-lap-dat .sp-installation-number { flex-basis:38px; height:38px; font-size:var(--public-text-body); }
  .solid-product #huong-dan-lap-dat .sp-installation-points { padding:16px 4px 4px 20px; }
  .solid-product #huong-dan-lap-dat .sp-installation-video { grid-template-columns:minmax(0,1fr); padding:22px 18px; gap:22px; }
  .solid-product #huong-dan-lap-dat .sp-installation-video h3 { font-size:var(--public-text-h3); }
  .solid-product #huong-dan-lap-dat .sp-installation-video-heading { align-items:flex-start; gap:11px; }
  .solid-product #huong-dan-lap-dat .sp-installation-video-heading .sp-installation-icon { width:29px; height:29px; }
  .solid-product #huong-dan-lap-dat .button { width:100%; padding:12px; }
  .solid-product #huong-dan-lap-dat .sp-installation-qr { justify-self:center; }
}

/* Section 03 only: shared, content-sized rows align comparison cards. */
.solid-product .sp-thickness .sp-thickness-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.solid-product .sp-thickness .sp-thickness-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); overflow-wrap:break-word; }
@supports (grid-template-rows:subgrid) {
  .solid-product .sp-thickness .sp-thickness-card { display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; }
}
.solid-product .sp-thickness .sp-thickness-head { padding:18px; background:var(--group-color); border-radius:9px 9px 0 0; }
.solid-product .sp-thickness .sp-thickness-head h3 { color:var(--ht-color-bg); font-size:var(--public-text-h3); line-height:1.3; letter-spacing:0; }
.solid-product .sp-thickness .sp-thickness-head p { margin-top:8px; color:var(--ht-color-bg); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-thickness .sp-thickness-badges { display:flex; flex-wrap:wrap; align-content:start; gap:6px; list-style:none; margin:0; padding:18px 18px 12px; }
.solid-product .sp-thickness .sp-thickness-badges li { padding:5px 8px; border-radius:var(--ht-radius-card); background:var(--group-tint); color:var(--group-color); font-size:var(--public-text-body); font-weight:700; line-height:1.5; white-space:nowrap; }
.solid-product .sp-thickness .sp-thickness-figure { margin:0; padding:0 8px 16px; background:linear-gradient(var(--ht-color-bg),var(--group-tint)); }
.solid-product .sp-thickness .sp-thickness-figure img { width:100%; height:auto; aspect-ratio:var(--ht-card-image-ratio); object-fit:contain; }
.solid-product .sp-thickness .sp-thickness-figure figcaption { padding-inline:10px; text-align:center; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; }
.solid-product .sp-thickness .sp-thickness-features { display:grid; align-content:start; gap:18px; margin:0; padding:20px 18px; list-style:none; }
.solid-product .sp-thickness .sp-thickness-features li { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:start; gap:10px; }
.solid-product .sp-thickness .sp-thickness-features h4 { margin:0 0 5px; color:var(--navy); font-size:var(--public-text-body); font-weight:700; line-height:1.6; }
.solid-product .sp-thickness .sp-thickness-features p { color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-thickness .sp-thickness-icon { display:inline-flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--group-color,var(--blue)); background:var(--group-tint,var(--ht-color-bg-subtle)); }
.solid-product .sp-thickness .sp-thickness-icon::before { content:""; display:block; width:20px; height:20px; background-color:currentColor; mask:var(--sp-thickness-icon) center / contain no-repeat; }
.solid-product .sp-thickness .sp-thickness-icon--shared::before { content:none; }
.solid-product .sp-thickness .sp-thickness-icon--shared > svg { width:20px; height:20px; }
.solid-product .sp-thickness .sp-thickness-table { align-self:end; width:calc(100% - 36px); margin:auto 18px 18px; color:var(--navy); font-size:var(--ht-text-table); line-height:1.5; }
.solid-product .sp-thickness .sp-thickness-table caption { color:var(--group-color); font-size:var(--public-text-small); line-height:1.5; padding:8px 0 12px; font-weight:700; }
.solid-product .sp-thickness .sp-thickness-table caption .sp-thickness-icon { float:left; width:24px; height:24px; margin-right:6px; background:none; }
.solid-product .sp-thickness .sp-thickness-table th, .solid-product .sp-thickness .sp-thickness-table td { padding:10px 0; }
.solid-product .sp-thickness .sp-thickness-table td { padding-left:8px; }
.solid-product .sp-thickness .sp-thickness-table thead { color:var(--muted); font-size:var(--ht-text-table); }
.solid-product .sp-thickness .sp-thickness-note { margin-top:24px; padding:18px 20px; border-left:3px solid var(--blue); background:var(--pale); }
.solid-product .sp-thickness .sp-thickness-note h3 { margin-top:14px; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-thickness .sp-thickness-note p { margin-top:6px; font-size:var(--public-text-small); line-height:1.6; }
.solid-product .sp-thickness .sp-thickness-note > p:first-child { margin-top:0; }
.solid-product .sp-thickness .sp-thickness-cta { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:24px; padding:24px; border:1px solid var(--ht-color-control-border); border-radius:var(--ht-radius-control); background:var(--ht-color-bg-subtle); }
.solid-product .sp-thickness .sp-thickness-cta-copy { display:flex; align-items:start; gap:14px; flex:1 1 450px; min-width:0; }
.solid-product .sp-thickness .sp-thickness-cta-copy > .sp-thickness-icon { width:44px; height:44px; }
.solid-product .sp-thickness .sp-thickness-cta-copy > .sp-thickness-icon::before { width:26px; height:26px; }
.solid-product .sp-thickness .sp-thickness-cta-copy > .sp-thickness-icon--shared > svg { width:26px; height:26px; }
.solid-product .sp-thickness .sp-thickness-cta h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-thickness .sp-thickness-cta p { margin-top:8px; font-size:var(--public-text-body); line-height:var(--public-leading-body); }
.solid-product .sp-thickness .sp-thickness-actions { gap:12px; }
.solid-product .sp-thickness .sp-thickness-actions .sp-thickness-icon { width:20px; height:20px; background:none; color:inherit; }
.solid-product .sp-thickness .sp-thickness-actions a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
@media(max-width:1100px) {
  .solid-product .sp-thickness .sp-thickness-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .solid-product .sp-thickness .sp-thickness-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .solid-product .sp-thickness .sp-thickness-figure img { max-width:420px; margin-inline:auto; }
  .solid-product .sp-thickness .sp-thickness-features p { font-size:var(--public-text-body); }
  .solid-product .sp-thickness .sp-thickness-cta { padding:20px; gap:20px; }
  .solid-product .sp-thickness .sp-thickness-actions { flex-direction:column; width:100%; }
  .solid-product .sp-thickness .sp-thickness-actions .button { min-height:48px; width:100%; }
}

/* Section 02: transparent supplied illustrations and content-sized cards. */
.solid-product .sp-buying { background:radial-gradient(ellipse at 50% 8%,var(--ht-color-bg),var(--ht-color-bg) 57%,var(--ht-color-bg-subtle)); }
.solid-product .sp-buying .sp-buying-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.solid-product .sp-buying .sp-buying-card { display:grid; grid-template-columns:40% minmax(0,1fr); align-items:center; gap:10px; padding:22px 16px 22px 8px; background:linear-gradient(145deg,#ffffffea,#f6fbffdd); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); box-shadow:0 5px 15px #174e7f06; }
.solid-product .sp-buying .sp-buying-illustration { display:block; width:100%; height:auto; object-fit:contain; }
.solid-product .sp-buying .sp-buying-content { min-width:0; }
.solid-product .sp-buying h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-buying .sp-buying-card h3 { display:flex; align-items:center; gap:8px; }
.solid-product .sp-buying .sp-buying-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--ht-color-bg-subtle); color:var(--blue); }
.solid-product .sp-buying .icon, .solid-product .sp-buying .sp-buying-icon-mask { display:block; width:24px; height:24px; }
.solid-product .sp-buying .sp-buying-icon-mask { background:currentColor; mask:var(--sp-buying-icon) center / contain no-repeat; }
.solid-product .sp-buying .sp-buying-main { margin-top:12px; color:var(--navy); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-buying .sp-buying-value { white-space:nowrap; }
.solid-product .sp-buying .sp-buying-condition { margin-top:10px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-buying .sp-buying-bulk { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.65fr) minmax(0,.9fr); gap:24px; align-items:center; margin-top:24px; padding:28px; background:linear-gradient(115deg,var(--ht-color-bg-subtle),var(--ht-color-bg-subtle)); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); }
.solid-product .sp-buying .sp-buying-bulk > * { min-width:0; }
.solid-product .sp-buying .sp-buying-bulk-copy { grid-column:1; grid-row:1; }
.solid-product .sp-buying .sp-buying-label { display:inline-block; margin-bottom:12px; padding:6px 12px; background:var(--ht-color-bg-subtle); color:var(--ht-color-primary); border-radius:var(--ht-radius-card); font-size:var(--public-text-body); font-weight:700; line-height:1.6; }
.solid-product .sp-buying .sp-buying-bulk h3 { font-size:var(--public-text-h3); }
.solid-product .sp-buying .sp-buying-link { margin-top:16px; min-height:48px; }
.solid-product .sp-buying .sp-buying-link:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
.solid-product .sp-buying .sp-buying-bulk-visual { grid-column:2; grid-row:1; }
.solid-product .sp-buying .sp-buying-highlights { grid-column:3; grid-row:1; display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.solid-product .sp-buying .sp-buying-highlights li { display:flex; align-items:center; gap:10px; padding:12px; background:#ffffffb8; border-radius:var(--ht-radius-card); color:var(--navy); font-size:var(--public-text-body); font-weight:700; line-height:1.6; }
@media(max-width:1100px) {
  .solid-product .sp-buying .sp-buying-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solid-product .sp-buying .sp-buying-bulk { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solid-product .sp-buying .sp-buying-highlights { grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .solid-product .sp-buying .sp-buying-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .solid-product .sp-buying .sp-buying-card { grid-template-columns:32% minmax(0,1fr); padding:20px 16px 20px 8px; gap:10px; }
  .solid-product .sp-buying .sp-buying-bulk { grid-template-columns:minmax(0,1fr); padding:22px 20px; gap:20px; }
  .solid-product .sp-buying .sp-buying-bulk h3 { font-size:var(--public-text-h3); }
  .solid-product .sp-buying .sp-buying-highlights { grid-column:1; grid-row:2; grid-template-columns:minmax(0,1fr); }
  .solid-product .sp-buying .sp-buying-bulk-visual { grid-column:1; grid-row:3; max-width:340px; width:100%; margin-inline:auto; }
}

/* Hero only: source order follows the mobile reading/focus order. */
.solid-product .sp-hero { background:var(--ht-color-bg-subtle); }
.solid-product .sp-hero .sp-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-areas:"breadcrumb image" "title image" "intro image" "benefits image" "actions image" "note image"; column-gap:40px; padding-block:36px; align-items:start; }
.solid-product .sp-hero .sp-hero-grid > * { min-width:0; }
.solid-product .sp-hero .sp-breadcrumb { grid-area:breadcrumb; display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:var(--public-text-small); line-height:1.6; margin-bottom:28px; }
.solid-product .sp-hero .sp-breadcrumb a { color:var(--blue); display:inline-flex; align-items:center; min-height:24px; position:relative; }
/* Extend the breadcrumb hit area without creating an extra visual gap. */
.solid-product .sp-hero .sp-breadcrumb a::after { content:""; position:absolute; inset:-10px 0; }
.solid-product .sp-hero h1 { grid-area:title; font-size:var(--public-text-h1); line-height:1.25; text-wrap:balance; margin-bottom:22px; }
.solid-product .sp-hero .sp-intro { grid-area:intro; max-width:58ch; font-size:var(--public-text-body); font-weight:400; color:var(--ht-color-text-muted); line-height:1.6; margin-bottom:30px; }
.solid-product .sp-hero .sp-hero-image { grid-area:image; position:relative; align-self:stretch; }
.solid-product .sp-hero .sp-hero-image img { position:absolute; inset:-32px 0; width:100%; height:calc(100% + 64px); object-fit:contain; mix-blend-mode:multiply; }
/* Feather only the empty image perimeter; keep all four sheets and edges visible. */
.solid-product .sp-hero .sp-hero-image::after { content:""; position:absolute; inset:-32px 0; pointer-events:none; background:linear-gradient(90deg,var(--ht-color-bg-subtle),transparent 7%,transparent 93%,var(--ht-color-bg-subtle)),linear-gradient(0deg,var(--ht-color-bg-subtle),transparent 9%,transparent 91%,var(--ht-color-bg-subtle)); }
.solid-product .sp-hero .sp-hero-benefits { grid-area:benefits; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 30px; padding:0; list-style:none; font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-hero .sp-hero-benefits li { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.solid-product .sp-hero .sp-hero-benefits li > span:last-child { max-width:20ch; text-wrap:balance; }
.solid-product .sp-hero .sp-hero-benefit-icon { display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:var(--ht-color-bg-subtle); flex:none; }
.solid-product .sp-hero .sp-hero-benefits .icon { width:30px; height:30px; color:var(--blue); }
.solid-product .sp-hero .sp-hero-actions { grid-area:actions; flex-wrap:nowrap; gap:16px; }
.solid-product .sp-hero .sp-hero-actions .button { min-height:52px; padding-inline:24px; }
.solid-product .sp-hero .sp-hero-note { grid-area:note; margin:14px 0 0; font-size:var(--public-text-small); line-height:1.6; font-weight:400; color:var(--ht-color-text-muted); }
@media (hover:hover) and (pointer:fine) {
.solid-product .sp-hero .primary:hover { background:var(--ht-button-bg, var(--ht-color-primary)); color:var(--ht-color-bg); } }
@media (hover:hover) and (pointer:fine) {
.solid-product .sp-hero .secondary:hover { background:var(--ht-control-bg, var(--ht-color-bg-subtle)); border-color:var(--ht-control-border, var(--blue)); } }
.solid-product .sp-hero a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }

.solid-product .sp-purlin-card { border:1px solid var(--line); border-radius:var(--ht-radius-card); overflow:hidden; background:var(--ht-color-bg); --group-color:#0764ad; }
.solid-product .sp-tone-teal { --group-color:#006b68; }
.solid-product .sp-tone-orange { --group-color:#b04a00; }
.solid-product .sp-tone-purple { --group-color:#6439a7; }
.solid-product .sp-purlin-card > h3 { background:var(--group-color); color:var(--ht-color-bg); padding:18px; font-size:var(--public-text-h3); }
.solid-product .sp-diagram { display:block; width:100%; height:auto; background:#f5faff; border-radius:8px; font-family:var(--ht-font-family); }
.solid-product .sp-roof { border-radius:0; }
.solid-product .sp-table { width:calc(100% - 24px); margin:0 12px 16px; border-collapse:collapse; font-size:var(--ht-text-table); color:var(--ink); table-layout:fixed; }
.solid-product .sp-table caption { text-align:left; padding:12px 0; font-weight:700; color:var(--group-color); }
.solid-product .sp-table th, .solid-product .sp-table td { text-align:left; padding:10px 6px; vertical-align:top; border-bottom:1px solid var(--line); }
/* Section 04 only: V9 source geometry, shared labels and same-image magnifier. */
.solid-product .sp-dimensions { background:var(--ht-color-bg); }
.solid-product .sp-dimensions .sp-dimensions-diagram { margin:0 0 24px; }
.solid-product .sp-dimensions .sp-dimensions-stage { position:relative; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); }
.solid-product .sp-dimensions .sp-dimensions-visual { position:relative; aspect-ratio:1200/650; }
.solid-product .sp-dimensions .sp-dimensions-background { position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.solid-product .sp-dimensions .sp-dimensions-background img { display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--sp-radius); }
.solid-product .sp-dimensions .sp-dimensions-art { position:absolute; inset:0 auto auto 0; width:100%; aspect-ratio:1200/610; }
.solid-product .sp-dimensions .sp-dimensions-image { position:absolute; left:1.6667%; top:1.6393%; display:block; width:81.6667%; height:auto; aspect-ratio:1672/941; object-fit:contain; filter:drop-shadow(0 6px 7px #23456520); }
.solid-product .sp-dimensions .sp-dimensions-measurements { position:absolute; inset:0; width:100%; height:100%; color:var(--ht-color-primary); pointer-events:none; }
.solid-product .sp-dimensions .sp-dimensions-corner { position:absolute; left:86.6667%; top:47.541%; width:12.5%; aspect-ratio:1; border:5px solid var(--ht-color-bg); border-radius:50%; background:var(--ht-color-bg-subtle); box-shadow:0 0 0 1px #c9dcec,0 4px 16px #08284b12; overflow:hidden; }
.solid-product .sp-dimensions .sp-dimensions-corner img { position:absolute; max-width:none; width:836%; height:auto; left:-745%; top:-252.5%; display:block; }
.solid-product .sp-dimensions .sp-dimensions-annotation { position:absolute; min-width:0; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); overflow-wrap:break-word; box-shadow:0 3px 12px #254c7312; }
.solid-product .sp-dimensions .sp-dimensions-annotation h3 { margin:0; padding:10px 14px; border-radius:8px 8px 0 0; background:var(--ht-color-primary); color:var(--ht-color-bg); font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-dimensions .sp-dimensions-label-body { padding:12px 14px; }
.solid-product .sp-dimensions .sp-dimensions-annotation p { margin:0; color:var(--navy); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-dimensions .sp-dimensions-annotation p + p { margin-top:8px; }
.solid-product .sp-dimensions .sp-buying-value { white-space:nowrap; }
.solid-product .sp-dimensions .sp-dimensions-annotation .sp-dimensions-detail { color:var(--muted); font-size:var(--public-text-body); }
.solid-product .sp-dimensions .sp-dimensions-thickness { left:2%; top:4.3%; width:20.4%; }
.solid-product .sp-dimensions .sp-dimensions-width { left:22.0833%; top:71.6923%; width:49.5833%; }
.solid-product .sp-dimensions .sp-dimensions-length { left:74.5833%; top:4.3%; width:23.75%; }
.solid-product .sp-dimensions .sp-dimensions-surface { left:75%; top:71.6923%; width:23.3333%; }
.solid-product .sp-dimensions .sp-dimensions-diagram > figcaption { margin-top:10px; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; text-align:center; }
.solid-product .sp-dimensions .sp-dimensions-corner-guide-mobile { display:none; }
.solid-product .sp-dimensions .sp-dimensions-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.solid-product .sp-dimensions .sp-dimensions-feature { display:flex; align-items:start; gap:16px; padding:22px 20px; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); }
.solid-product .sp-dimensions .sp-dimensions-feature > div { min-width:0; }
.solid-product .sp-dimensions .sp-dimensions-feature h3 { margin:0 0 8px; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-dimensions .sp-dimensions-feature p { color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product .sp-dimensions .sp-dimensions-feature .sp-dimensions-fee { margin-top:10px; color:var(--navy); font-size:var(--public-text-body); }
.solid-product .sp-dimensions .sp-dimensions-icon { display:block; flex:0 0 60px; width:60px; height:60px; }
.solid-product .sp-dimensions .sp-dimensions-note { margin-top:20px; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; }
.solid-product .sp-dimensions .sp-dimensions-cta h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-dimensions .sp-dimensions-cta p { font-size:var(--public-text-body); line-height:var(--public-leading-body); }
.solid-product .sp-dimensions .sp-dimensions-cta a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
@media(max-width:75em) {
  .solid-product .sp-dimensions .sp-dimensions-visual { aspect-ratio:1200/620; }
  .solid-product .sp-dimensions .sp-dimensions-corner { left:81%; top:64.59%; width:18%; border-width:3px; }
  .solid-product .sp-dimensions .sp-dimensions-label-guides, .solid-product .sp-dimensions .sp-dimensions-corner-guide { display:none; }
  .solid-product .sp-dimensions .sp-dimensions-corner-guide-mobile { display:block; }
  .solid-product .sp-dimensions .sp-dimensions-annotations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; padding:16px; }
  .solid-product .sp-dimensions .sp-dimensions-annotation { position:static; width:auto; text-align:left; }
  .solid-product .sp-dimensions .sp-dimensions-features { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:37.5em) {
  .solid-product .sp-dimensions .sp-dimensions-annotations { gap:10px; padding:12px; }
  .solid-product .sp-dimensions .sp-dimensions-annotation h3 { padding:10px 11px; font-size:var(--public-text-h3); }
  .solid-product .sp-dimensions .sp-dimensions-label-body { padding:11px; }
  .solid-product .sp-dimensions .sp-dimensions-annotation p { font-size:var(--public-text-body); }
  .solid-product .sp-dimensions .sp-dimensions-annotation .sp-dimensions-detail { font-size:var(--public-text-body); }
  .solid-product .sp-dimensions .sp-dimensions-corner { border-width:2px; }
  .solid-product .sp-dimensions .sp-dimensions-feature { padding:18px 16px; gap:14px; }
  .solid-product .sp-dimensions .sp-dimensions-icon { flex-basis:52px; width:52px; height:52px; }
  .solid-product .sp-dimensions .sp-dimensions-cta .actions, .solid-product .sp-dimensions .sp-dimensions-cta .button { width:100%; }
}
@media(max-width:22.5em) {
  .solid-product .sp-dimensions .sp-dimensions-annotations { grid-template-columns:minmax(0,1fr); }
}
/* Section 05 only: v2 color benefits, supplied SVGs and compact consultation. */
.solid-product #chon-mau { --sp-color-navy:#0b3f86; background:linear-gradient(180deg,var(--ht-color-bg),var(--pale)); }
.solid-product #chon-mau .sp-heading p { max-width:850px; margin-inline:auto; font-size:var(--public-text-body); line-height:1.6; }
.solid-product #chon-mau .sp-colors-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.solid-product #chon-mau .sp-color-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); box-shadow:0 5px 20px #08284b05; overflow-wrap:break-word; }
@supports (grid-template-rows:subgrid) {
  .solid-product #chon-mau .sp-color-card { display:grid; grid-template-rows:subgrid; grid-row:span 8; row-gap:0; }
}
.solid-product #chon-mau .sp-color-product { border-radius:9px 9px 0 0; overflow:hidden; }
.solid-product #chon-mau .sp-color-product img { width:100%; height:auto; aspect-ratio:var(--ht-card-image-ratio); object-fit:contain; }
.solid-product #chon-mau .sp-color-card h3 { padding:22px 20px 14px; font-size:var(--public-text-h3); line-height:1.3; text-transform:uppercase; }
.solid-product #chon-mau .sp-color-transmission { align-self:start; margin:0 20px 14px; padding:12px 14px; border-radius:var(--ht-radius-card); background:var(--pale); }
.solid-product #chon-mau .sp-color-transmission span { display:block; font-size:var(--public-text-body); line-height:1.6; color:var(--muted); }
.solid-product #chon-mau .sp-color-transmission strong { display:block; margin-top:4px; font-size:var(--public-text-body); line-height:1.6; color:var(--blue); }
.solid-product #chon-mau :is(.sp-color-feature,.sp-color-application) { display:flex; align-items:start; gap:12px; padding:0 20px 20px; }
.solid-product #chon-mau .sp-color-feature { padding-bottom:12px; }
.solid-product #chon-mau :is(.sp-color-feature,.sp-color-application) > :is(div,h4) { min-width:0; }
.solid-product #chon-mau .sp-color-card h4 { margin:0; color:var(--navy); font-size:var(--public-text-body); line-height:1.6; font-weight:700; }
.solid-product #chon-mau :is(.sp-color-description,.sp-color-application p) { font-size:var(--public-text-body); line-height:1.6; color:var(--muted); }
.solid-product #chon-mau .sp-color-description { padding:0 20px 20px; }
.solid-product #chon-mau .sp-color-application p { margin-top:6px; }
.solid-product #chon-mau .sp-color-icon { display:block; width:32px; height:32px; flex:0 0 32px; color:var(--sp-color-navy); }
.solid-product #chon-mau .sp-color-roof { width:100%; align-self:end; margin-top:auto; padding:0 14px 16px; }
.solid-product #chon-mau .sp-color-roof img { width:100%; height:auto; aspect-ratio:1672/941; object-fit:contain; border-radius:var(--ht-radius-card); }
.solid-product #chon-mau .sp-color-roof figcaption { margin-top:8px; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; }
.solid-product #chon-mau .sp-colors-bottom { display:grid; grid-template-columns:minmax(0,.35fr) minmax(0,.65fr); align-items:start; gap:20px; margin-top:24px; }
.solid-product #chon-mau :is(.sp-colors-note,.sp-colors-cta) { display:flex; align-items:start; min-width:0; gap:16px; padding:20px; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); overflow-wrap:break-word; }
.solid-product #chon-mau :is(.sp-colors-note,.sp-colors-cta) > div { min-width:0; }
.solid-product #chon-mau .sp-colors-bottom > * > .sp-color-icon { width:48px; height:48px; flex-basis:48px; }
.solid-product #chon-mau .sp-colors-note h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #chon-mau .sp-colors-cta { flex-wrap:wrap; background:var(--ht-color-bg-subtle); }
.solid-product #chon-mau .sp-colors-cta > .sp-color-icon { color:var(--ht-color-primary); }
.solid-product #chon-mau .sp-colors-cta > div { flex:1 1 220px; }
.solid-product #chon-mau .sp-colors-cta h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #chon-mau .sp-colors-bottom p { margin-top:8px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #chon-mau .button { flex:0 0 196px; align-self:center; min-height:64px; border-radius:var(--ht-radius-control); color:var(--ht-color-bg); font-size:var(--public-text-button); gap:14px; }
.solid-product #chon-mau .sp-color-cta-label { min-width:0; }
.solid-product #chon-mau .sp-color-cta-label > span { display:block; }
.solid-product #chon-mau .button .sp-color-icon { width:28px; height:28px; flex-basis:28px; color:inherit; }
.solid-product #chon-mau .button:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
@media(max-width:1100px) {
  .solid-product #chon-mau .sp-colors-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solid-product #chon-mau .sp-colors-bottom { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .solid-product #chon-mau .wrap { padding-inline:var(--ht-gutter); }
  .solid-product #chon-mau .sp-heading { text-align:left; }
  .solid-product #chon-mau .sp-heading p { font-size:var(--public-text-body); }
  .solid-product #chon-mau .sp-colors-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .solid-product #chon-mau .sp-colors-bottom { gap:16px; }
  .solid-product #chon-mau :is(.sp-colors-note,.sp-colors-cta) { padding:20px; gap:14px; }
  .solid-product #chon-mau .sp-colors-cta { display:grid; grid-template-columns:48px minmax(0,1fr); }
  .solid-product #chon-mau .sp-colors-cta h3 { font-size:var(--public-text-h3); }
  .solid-product #chon-mau .button { grid-column:1 / -1; width:100%; padding:12px 19px; }
}

/* Section 06 only: reasons first, equal proof photos, one consultation CTA. */
.solid-product #vi-sao-chon-huyen-trang { background:var(--ht-color-bg); }
.solid-product #vi-sao-chon-huyen-trang :is(figure,.sp-reason-card,.sp-reason-copy,.sp-reasons-cta-copy) { min-width:0; }
.solid-product #vi-sao-chon-huyen-trang figure { margin:0; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); overflow:hidden; background:var(--ht-color-bg); }
.solid-product #vi-sao-chon-huyen-trang figure img { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; }
.solid-product #vi-sao-chon-huyen-trang figcaption { padding:16px; color:var(--ink); line-height:1.6; overflow-wrap:break-word; }
.solid-product #vi-sao-chon-huyen-trang figcaption strong { display:block; font-size:var(--public-text-small); }
.solid-product #vi-sao-chon-huyen-trang figcaption span { display:block; margin-top:6px; color:var(--muted); font-size:var(--public-text-small); }
.solid-product #vi-sao-chon-huyen-trang .sp-reasons-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.solid-product #vi-sao-chon-huyen-trang .sp-reason-card { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:start; gap:14px; padding:22px; background:var(--ht-color-bg); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); overflow-wrap:break-word; }
.solid-product #vi-sao-chon-huyen-trang .sp-reason-card h3 { font-size:var(--public-text-h3); line-height:1.3; margin:0 0 10px; }
.solid-product #vi-sao-chon-huyen-trang :is(.sp-reason-card,.sp-reasons-cta) p { font-size:var(--public-text-body); line-height:1.6; color:var(--muted); }
.solid-product #vi-sao-chon-huyen-trang strong { color:var(--ink); }
.solid-product #vi-sao-chon-huyen-trang .sp-reason-icon { display:block; width:56px; height:56px; object-fit:contain; }
.solid-product #vi-sao-chon-huyen-trang .sp-reasons-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:28px; }
.solid-product #vi-sao-chon-huyen-trang .sp-reasons-cta { display:flex; align-items:center; gap:24px; padding:26px 28px; margin-top:28px; background:var(--ht-color-bg-subtle); border:1px solid var(--line); border-radius:var(--ht-radius-control); }
.solid-product #vi-sao-chon-huyen-trang .sp-reasons-cta-copy { flex:1; }
.solid-product #vi-sao-chon-huyen-trang .sp-reasons-cta h3 { font-size:var(--public-text-h3); line-height:1.3; margin-bottom:8px; }
.solid-product #vi-sao-chon-huyen-trang .button { min-height:48px; flex-shrink:0; padding:14px 20px; font-size:var(--public-text-button); }
.solid-product #vi-sao-chon-huyen-trang .button:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
@media(max-width:1099px) {
  .solid-product #vi-sao-chon-huyen-trang :is(.sp-reasons-cards,.sp-reasons-gallery) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .solid-product #vi-sao-chon-huyen-trang .sp-heading { text-align:left; }
  .solid-product #vi-sao-chon-huyen-trang .sp-heading p { font-size:var(--public-text-body); }
  .solid-product #vi-sao-chon-huyen-trang .sp-reasons-cards { grid-template-columns:minmax(0,1fr); }
  .solid-product #vi-sao-chon-huyen-trang .sp-reason-card { grid-template-columns:48px minmax(0,1fr); gap:12px; padding:18px; }
  .solid-product #vi-sao-chon-huyen-trang .sp-reason-icon { width:48px; height:48px; }
  .solid-product #vi-sao-chon-huyen-trang .sp-reasons-gallery { grid-template-columns:minmax(0,1fr); gap:24px; }
  .solid-product #vi-sao-chon-huyen-trang .sp-reasons-cta { flex-direction:column; align-items:stretch; padding:22px; gap:16px; }
  .solid-product #vi-sao-chon-huyen-trang .sp-reasons-cta h3 { font-size:var(--public-text-h3); }
  .solid-product #vi-sao-chon-huyen-trang .button { width:100%; }
}

.solid-product .sp-photo-card { background:var(--ht-color-bg); border:1px solid var(--line); border-radius:var(--ht-radius-card); overflow:hidden; }
.solid-product .sp-photo-card img { width:100%; height:auto; }
.solid-product .sp-photo-card > div { padding:24px; }
.solid-product .sp-photo-card h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product .sp-photo-card p { margin-top:12px; }
/* Section 07 only: approved design-kit v2 illustrations, benefits and consultation. */
.solid-product #ung-dung { --sp-radius:var(--ht-radius-card); padding-top:48px; }
.solid-product #ung-dung .sp-application-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); align-items:center; gap:40px; margin-bottom:32px; }
.solid-product #ung-dung .sp-heading { min-width:0; margin:0; }
.solid-product #ung-dung .sp-application-label { display:inline-block; margin-bottom:20px; padding:8px 14px; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); background:var(--ht-color-bg-subtle); color:var(--blue); font-size:var(--public-text-body); font-weight:700; line-height:1.6; }
.solid-product #ung-dung .sp-heading h2 { font-size:var(--public-text-h2); line-height:1.3; }
.solid-product #ung-dung .sp-heading p { margin-top:18px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #ung-dung .sp-application-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; list-style:none; margin:26px 0 0; padding:0; }
.solid-product #ung-dung .sp-application-benefits li { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; text-align:center; }
.solid-product #ung-dung .sp-application-benefits img { width:58px; height:58px; flex-shrink:0; }
.solid-product #ung-dung .sp-application-benefits span { max-width:120px; font-size:var(--public-text-body); font-weight:700; line-height:1.6; }
.solid-product #ung-dung .sp-application-lead-photo { min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); }
.solid-product #ung-dung :is(.sp-application-lead-photo,.sp-application-card) > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.solid-product #ung-dung .sp-application-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.solid-product #ung-dung .sp-application-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); }
.solid-product #ung-dung .sp-application-content { padding:18px 20px 20px; text-align:left; overflow-wrap:break-word; }
.solid-product #ung-dung .sp-application-content h3 { margin:0 0 8px; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #ung-dung .sp-application-content p { margin:0; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #ung-dung .sp-application-caption { color:var(--muted); font-size:var(--public-text-small); line-height:1.6; margin-top:14px; }
.solid-product #ung-dung .sp-application-cta { display:flex; align-items:center; gap:20px; margin-top:28px; padding:24px; border:1px solid var(--ht-color-control-border); border-radius:var(--ht-radius-control); background:var(--ht-color-bg-subtle); }
.solid-product #ung-dung .sp-application-cta > div { flex:1; min-width:0; overflow-wrap:break-word; }
.solid-product #ung-dung .sp-application-cta h3 { margin:0; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #ung-dung .sp-application-cta p { margin:8px 0 0; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #ung-dung .sp-application-chat { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border-radius:var(--ht-radius-card); background:var(--blue); color:var(--ht-color-bg); }
.solid-product #ung-dung .sp-application-icon { width:24px; height:24px; flex:0 0 24px; }
.solid-product #ung-dung .sp-application-chat .sp-application-icon { width:27px; height:27px; }
.solid-product #ung-dung .button { flex-shrink:0; min-height:48px; max-width:100%; padding:13px 18px; border-radius:var(--ht-radius-control); gap:10px; font-size:var(--public-text-button); line-height:1.4; }
.solid-product #ung-dung .button:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
@media(max-width:1100px) {
  .solid-product #ung-dung .sp-application-intro { gap:28px; }
  .solid-product #ung-dung .sp-heading p { font-size:var(--public-text-body); }
  .solid-product #ung-dung .sp-application-benefits { gap:8px; }
  .solid-product #ung-dung .sp-application-benefits img { width:52px; height:52px; }
  .solid-product #ung-dung .sp-application-cta { flex-wrap:wrap; }
  .solid-product #ung-dung .button { margin-left:68px; }
}
@media(max-width:1023px) {
  .solid-product #ung-dung .sp-application-intro { grid-template-columns:minmax(0,1fr); align-items:start; gap:28px; }
  .solid-product #ung-dung .sp-application-benefits { max-width:620px; gap:20px; }
  .solid-product #ung-dung .sp-application-benefits img { width:58px; height:58px; }
  .solid-product #ung-dung .sp-application-lead-photo { width:100%; max-width:760px; }
  .solid-product #ung-dung .sp-application-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:639px) {
  .solid-product #ung-dung { padding-block:40px; }
  .solid-product #ung-dung .wrap { padding-inline:var(--ht-gutter); }
  .solid-product #ung-dung .sp-application-label { margin-bottom:16px; }
  .solid-product #ung-dung .sp-heading h2 { font-size:var(--public-text-h2); }
  .solid-product #ung-dung .sp-heading p { font-size:var(--public-text-body); }
  .solid-product #ung-dung .sp-application-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; margin-top:24px; }
  .solid-product #ung-dung .sp-application-benefits li { flex-direction:row; text-align:left; }
  .solid-product #ung-dung .sp-application-benefits img { width:48px; height:48px; }
  .solid-product #ung-dung .sp-application-benefits span { font-size:var(--public-text-body); }
  .solid-product #ung-dung .sp-application-intro { margin-bottom:24px; }
  .solid-product #ung-dung .sp-application-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .solid-product #ung-dung .sp-application-content { padding:16px; }
  .solid-product #ung-dung .sp-application-content h3 { font-size:var(--public-text-h3); }
  .solid-product #ung-dung .sp-application-cta { flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
  .solid-product #ung-dung .sp-application-chat { align-self:flex-start; }
  .solid-product #ung-dung .sp-application-cta h3 { font-size:var(--public-text-h3); }
  .solid-product #ung-dung .button { width:100%; margin-left:0; padding-inline:16px; }
}
.solid-product .sp-step { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--blue); color:white; font-size:var(--public-text-body); font-weight:700; margin-bottom:14px; }
.solid-product .sp-process { margin:24px 0; padding:20px; border-top:1px solid var(--ht-color-border); border-bottom:1px solid var(--ht-color-border); font-weight:700; line-height:1.6; }

/* Section 08 only: approved v2 copy, cover photos and supplied blue-circle icons. */
.solid-product #giao-hang { --sp-radius:var(--ht-radius-card); background:linear-gradient(135deg,var(--ht-color-bg),var(--ht-color-bg)); }
.solid-product #giao-hang .sp-delivery-heading { position:relative; isolation:isolate; max-width:none; padding-block:24px; overflow:hidden; }
.solid-product #giao-hang .sp-delivery-heading::before { content:""; position:absolute; inset:0 0 0 45%; z-index:-1; background:linear-gradient(90deg,var(--ht-color-bg),#ffffffd9 40%,#ffffffb3),var(--sp-delivery-background) center 38% / cover no-repeat; }
.solid-product #giao-hang .sp-delivery-heading p { max-width:980px; }
.solid-product #giao-hang .sp-delivery-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.solid-product #giao-hang .sp-delivery-step { min-width:0; background:var(--ht-color-bg); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); overflow:hidden; overflow-wrap:break-word; }
.solid-product #giao-hang .sp-delivery-photo { aspect-ratio:16 / 9; overflow:hidden; }
.solid-product #giao-hang .sp-delivery-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.solid-product #giao-hang .sp-delivery-step-content { display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:20px; text-align:left; }
.solid-product #giao-hang .sp-delivery-number { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--ht-color-primary); color:var(--ht-color-bg); font-size:var(--public-text-body); font-weight:700; }
.solid-product #giao-hang h3 { font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #giao-hang .sp-delivery-step h3 { font-size:var(--public-text-h3); }
.solid-product #giao-hang p { font-size:var(--public-text-body); line-height:1.6; overflow-wrap:break-word; }
.solid-product #giao-hang .sp-delivery-step p { margin-top:8px; }
.solid-product #giao-hang .sp-delivery-step .sp-delivery-fee { margin-top:12px; color:var(--navy); }
.solid-product #giao-hang .sp-delivery-preparation { margin-top:28px; padding:24px; background:var(--ht-color-bg-subtle); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); }
.solid-product #giao-hang .sp-delivery-panel-heading { display:flex; align-items:center; gap:14px; }
.solid-product #giao-hang .sp-delivery-panel-heading .sp-delivery-icon { width:56px; height:56px; }
.solid-product #giao-hang .sp-delivery-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:20px; }
.solid-product #giao-hang .sp-delivery-group { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; }
.solid-product #giao-hang h4 { margin:0 0 8px; color:var(--navy); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #giao-hang .sp-delivery-icon { display:block; width:40px; height:40px; flex:none; }
.solid-product #giao-hang .sp-delivery-urgent { margin-top:20px; padding-top:20px; border-top:1px solid var(--ht-color-border); }
.solid-product #giao-hang .sp-delivery-cta p { margin-top:9px; }
.solid-product #giao-hang .sp-delivery-flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; list-style:none; margin:28px 0; padding:0; }
.solid-product #giao-hang .sp-delivery-flow li { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:var(--public-text-body); line-height:1.6; min-width:0; }
.solid-product #giao-hang .sp-delivery-flow .sp-delivery-icon { width:44px; height:44px; }
.solid-product #giao-hang .sp-delivery-flow li:not(:last-child)::after { content:""; position:absolute; top:17px; right:-14px; width:10px; height:10px; border-top:2px solid var(--ht-color-border); border-right:2px solid var(--ht-color-border); transform:rotate(45deg); }
.solid-product #giao-hang .sp-delivery-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:24px; background:var(--ht-color-bg-subtle); border:1px solid var(--ht-color-control-border); border-radius:var(--ht-radius-control); }
.solid-product #giao-hang .sp-delivery-cta > div { min-width:0; }
.solid-product #giao-hang .sp-delivery-cta .button { flex:none; min-height:48px; }
.solid-product #giao-hang .sp-delivery-cta a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
@media(max-width:900px) {
  .solid-product #giao-hang .sp-delivery-steps { gap:20px; }
  .solid-product #giao-hang .sp-delivery-step-content { grid-template-columns:40px minmax(0,1fr); gap:10px; padding:18px; }
  .solid-product #giao-hang .sp-delivery-number { width:40px; height:40px; }
  .solid-product #giao-hang .sp-delivery-flow { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:24px; }
  .solid-product #giao-hang .sp-delivery-flow li::after { display:none; }
  .solid-product #giao-hang .sp-delivery-cta { flex-direction:column; align-items:flex-start; }
}
@media(max-width:639px) {
  .solid-product #giao-hang .wrap { padding-inline:var(--ht-gutter); }
  .solid-product #giao-hang .sp-delivery-heading { padding-block:0; }
  .solid-product #giao-hang .sp-delivery-heading::before { display:none; }
  .solid-product #giao-hang .sp-delivery-steps { grid-template-columns:minmax(0,1fr); }
  .solid-product #giao-hang .sp-delivery-photo { aspect-ratio:16 / 10; }
  .solid-product #giao-hang :is(.sp-delivery-preparation,.sp-delivery-cta) { padding:20px; }
  .solid-product #giao-hang .sp-delivery-groups { grid-template-columns:minmax(0,1fr); gap:20px; }
  .solid-product #giao-hang .sp-delivery-flow { margin:24px 0; }
  .solid-product #giao-hang .sp-delivery-cta { gap:18px; align-items:stretch; }
  .solid-product #giao-hang .sp-delivery-cta .button { width:100%; }
}
@media(max-width:360px) {
  .solid-product #giao-hang .wrap { padding-inline:var(--ht-gutter); }
}

.solid-product .sp-installation .sp-card { display:flex; flex-direction:column; }
.solid-product .sp-installation h3 { min-height:3em; margin-bottom:18px; }
.solid-product .sp-installation-diagram { margin-bottom:16px; }
.solid-product .sp-installation ol { margin:0; padding-left:24px; color:var(--muted); font-size:var(--public-text-body); }
.solid-product .sp-installation li { margin:10px 0; padding-left:3px; }
.solid-product .sp-qr { width:160px; height:auto; aspect-ratio:1; object-fit:contain; background:var(--ht-color-bg); padding:8px; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); flex:none; }
.solid-product .sp-video > div { flex:1 1 400px; }
/* Section 10 only: one readable column, native and enhanced states. */
.solid-product #cau-hoi-thuong-gap .wrap { max-width:var(--ht-container-width); }
.solid-product #cau-hoi-thuong-gap .sp-faq-list { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.solid-product #cau-hoi-thuong-gap .sp-faq { background:var(--ht-color-bg); border:1px solid var(--line); border-radius:var(--ht-radius-card); }
.solid-product #cau-hoi-thuong-gap .sp-faq h3 { margin:0; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #cau-hoi-thuong-gap summary { list-style:none; cursor:pointer; border-radius:var(--ht-radius-card); }
.solid-product #cau-hoi-thuong-gap summary::-webkit-details-marker { display:none; }
.solid-product #cau-hoi-thuong-gap summary h3,
.solid-product #cau-hoi-thuong-gap .sp-faq-button { display:flex; align-items:center; gap:16px; padding:20px 24px; min-height:64px; color:var(--navy); font-weight:700; }
.solid-product #cau-hoi-thuong-gap .sp-faq-button { appearance:none; border:0; background:none; width:100%; font:inherit; font-weight:600; text-align:left; cursor:pointer; border-radius:var(--ht-radius-control); }
@media (hover:hover) and (pointer:fine) {
.solid-product #cau-hoi-thuong-gap :is(summary,.sp-faq-button):hover { background:var(--ht-color-bg); } }
.solid-product #cau-hoi-thuong-gap :is(summary,.sp-faq-button):focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
.solid-product #cau-hoi-thuong-gap .sp-faq-number { color:var(--blue); flex:0 0 28px; font-size:var(--public-text-body); }
.solid-product #cau-hoi-thuong-gap .sp-faq-question { flex:1; min-width:0; overflow-wrap:break-word; }
.solid-product #cau-hoi-thuong-gap .sp-faq-sign { flex:0 0 24px; width:24px; height:24px; color:var(--blue); }
.solid-product #cau-hoi-thuong-gap .sp-faq-sign svg { display:block; width:24px; height:24px; }
.solid-product #cau-hoi-thuong-gap .sp-faq-sign .sp-faq-minus { display:none; }
.solid-product #cau-hoi-thuong-gap :is(details[open],button[aria-expanded="true"]) .sp-faq-plus { display:none; }
.solid-product #cau-hoi-thuong-gap :is(details[open],button[aria-expanded="true"]) .sp-faq-minus { display:block; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer { padding:0 64px 24px 68px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer[hidden] { display:none; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer p { margin:0 0 14px; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer p:last-child { margin-bottom:0; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer strong { color:var(--navy); }
.solid-product #cau-hoi-thuong-gap .sp-faq-formula { padding:12px 16px; background:var(--pale); border-radius:var(--ht-radius-card); }
.solid-product #cau-hoi-thuong-gap .sp-faq-cases { display:grid; gap:12px; margin-bottom:16px; }
.solid-product #cau-hoi-thuong-gap .sp-faq-case { border:1px solid var(--line); background:var(--pale); padding:16px; border-radius:var(--ht-radius-card); }
.solid-product #cau-hoi-thuong-gap .sp-faq-case p { margin-bottom:8px; }
.solid-product #cau-hoi-thuong-gap .sp-faq-answer a { margin-top:12px; color:var(--blue); display:inline-flex; align-items:center; min-height:48px; }
@media(max-width:600px) {
  .solid-product #cau-hoi-thuong-gap :is(summary h3,.sp-faq-button) { padding:16px; gap:10px; }
  .solid-product #cau-hoi-thuong-gap .sp-faq-number { flex-basis:24px; font-size:var(--public-text-body); }
  .solid-product #cau-hoi-thuong-gap .sp-faq-answer { padding:0 16px 20px; }
  .solid-product #cau-hoi-thuong-gap .sp-faq-list { gap:10px; }
  .solid-product #cau-hoi-thuong-gap .sp-faq-case { padding:14px; }
}

.solid-product :is(button,summary):focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }

@media(max-width:1100px) {
  .solid-product .sp-section { padding-block:52px; }
  .solid-product .sp-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solid-product .sp-reasons-layout { grid-template-columns:minmax(0,1fr); }
  .solid-product .sp-reasons-layout > img { max-width:650px; margin:auto; }
  .solid-product .sp-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .solid-product .sp-section { padding-block:40px; }
  .solid-product .sp-heading { margin-bottom:23px; }
  .solid-product .sp-heading h2 { font-size:var(--public-text-h2); line-height:1.3; }
  .solid-product :is(.sp-two,.sp-three,.sp-four,.sp-reasons-layout) { grid-template-columns:minmax(0,1fr); }
  .solid-product .sp-grid { gap:16px; }
  .solid-product .sp-card, .solid-product .sp-photo-card > div { padding:22px; }
  .solid-product .sp-banner { padding:22px; gap:16px; }
  .solid-product .sp-banner > .icon { width:28px; height:28px; }
  .solid-product .sp-banner .actions { display:grid; width:100%; }
  .solid-product .sp-installation h3 { min-height:0; }
}
@media(max-width:360px) {
  .solid-product .sp-card { padding:18px; }
}

@media(max-width:1100px) {
  .solid-product .sp-hero .sp-hero-grid { column-gap:28px; padding-block:32px; }
  .solid-product .sp-hero h1 { font-size:var(--public-text-h1); }
  .solid-product .sp-hero .sp-hero-benefits { gap:12px; }
  .solid-product .sp-hero .sp-hero-actions { gap:12px; }
  .solid-product .sp-hero .sp-hero-actions .button { padding-inline:18px; }
}
@media(max-width:900px) {
  .solid-product .sp-hero .sp-hero-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"breadcrumb" "title" "intro" "actions" "note" "image" "benefits"; padding-block:28px 36px; }
  .solid-product .sp-hero h1 { font-size:var(--public-text-h1); }
  .solid-product .sp-hero .sp-hero-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:0; }
  .solid-product .sp-hero .sp-hero-note { margin-bottom:24px; }
  .solid-product .sp-hero .sp-hero-benefit-break { display:none; }
  .solid-product .sp-hero .sp-hero-image { margin-bottom:24px; }
  .solid-product .sp-hero .sp-hero-image img { position:static; width:100%; height:auto; max-width:560px; margin-inline:auto; }
  .solid-product .sp-hero .sp-hero-image::after { inset:0; }
  .solid-product .sp-hero .sp-hero-benefits { grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:0; }
  .solid-product .sp-hero .sp-hero-benefits li { flex-direction:row; gap:14px; text-align:left; }
  .solid-product .sp-hero .sp-hero-benefits li > span:last-child { max-width:none; text-wrap:pretty; }
  .solid-product .sp-hero .sp-hero-benefit-icon { width:48px; height:48px; }
  .solid-product .sp-hero .sp-hero-benefits .icon { width:26px; height:26px; }
}
@media(max-width:600px) {
  .solid-product .sp-hero h1 { font-size:var(--public-text-h1); }
  .solid-product .sp-hero .sp-breadcrumb { gap:8px; margin-bottom:24px; }
  .solid-product .sp-hero .sp-intro { font-size:var(--public-text-body); margin-bottom:28px; }
}
@media(max-width:360px) {
  .solid-product .sp-hero h1 { font-size:var(--public-text-h1); }
}

/* Section 11 only: approved v2 guidance and contact. */
.solid-product #nhan-bao-gia { padding-block:56px; background:radial-gradient(ellipse at 50% 42%,#eef8ff80,transparent 75%),var(--ht-color-bg); }
.solid-product #nhan-bao-gia .wrap { max-width:var(--ht-container-width); padding-inline:var(--ht-gutter); }
.solid-product #nhan-bao-gia .sp-heading { max-width:none; margin-bottom:28px; text-align:left; }
.solid-product #nhan-bao-gia .sp-heading h2 { font-size:var(--public-text-h2); line-height:1.3; }
.solid-product #nhan-bao-gia .sp-heading p { max-width:1160px; font-size:var(--public-text-body); line-height:1.6; }
.solid-product #nhan-bao-gia .sp-contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.solid-product #nhan-bao-gia .sp-contact-card { min-width:0; padding:26px 24px; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); background:var(--ht-color-bg); box-shadow:0 12px 28px #17385e0b; overflow-wrap:break-word; }
.solid-product #nhan-bao-gia .sp-contact-known { order:1; background:linear-gradient(135deg,var(--ht-color-bg),var(--ht-color-bg-subtle)); border-color:var(--ht-color-border); }
.solid-product #nhan-bao-gia .sp-contact-advice { order:2; background:linear-gradient(135deg,#f0fbf7,#eaf8f3); border-color:var(--ht-color-border); }
.solid-product #nhan-bao-gia .sp-final-contact { order:3; }
.solid-product #nhan-bao-gia .sp-contact-card-head { display:flex; align-items:center; gap:14px; min-height:80px; margin-bottom:20px; }
.solid-product #nhan-bao-gia h3 { min-width:0; margin:0; font-size:var(--public-text-h3); line-height:1.3; }
.solid-product #nhan-bao-gia .sp-contact-advice h3 { color:#16604b; }
.solid-product #nhan-bao-gia .sp-contact-main-icon { width:76px; height:76px; flex:none; }
.solid-product #nhan-bao-gia .sp-contact-group ul { display:grid; gap:17px; list-style:none; margin:0; padding:0; }
.solid-product #nhan-bao-gia .sp-contact-group li { display:flex; align-items:center; gap:12px; min-width:0; font-size:var(--public-text-body); line-height:1.6; }
.solid-product #nhan-bao-gia .sp-contact-check-icon { width:30px; height:30px; flex:none; }
.solid-product #nhan-bao-gia .sp-final-actions { display:flex; flex-direction:column; gap:12px; width:100%; }
.solid-product #nhan-bao-gia .sp-final-actions .button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:13px 12px; font-size:var(--public-text-button); line-height:1.4; }
.solid-product #nhan-bao-gia .sp-final-actions .button span { min-width:0; overflow-wrap:break-word; }
.solid-product #nhan-bao-gia .sp-final-actions .primary { background:var(--ht-button-bg, var(--ht-color-primary)); border:1px solid var(--ht-color-primary); box-shadow:none; }
.solid-product #nhan-bao-gia .sp-final-actions .secondary { border:1px solid var(--ht-color-control-border); background:var(--ht-control-bg, var(--ht-color-bg)); box-shadow:0 2px 5px #17385e08; }
@media (hover:hover) and (pointer:fine) {
.solid-product #nhan-bao-gia .sp-final-actions .button:hover { filter:brightness(.96); } }
.solid-product #nhan-bao-gia .button:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
.solid-product #nhan-bao-gia .sp-contact-icon { display:inline-flex; flex:0 0 24px; width:24px; height:24px; }
.solid-product #nhan-bao-gia .sp-contact-icon::before { content:""; width:100%; height:100%; background:currentColor; mask:var(--sp-contact-icon) center / contain no-repeat; }
.solid-product #nhan-bao-gia .sp-contact-hours { margin:12px 0 0; color:var(--muted); font-size:var(--public-text-small); line-height:1.6; text-align:center; }
.solid-product #nhan-bao-gia .sp-contact-qr { margin:16px 0 0; text-align:center; }
.solid-product #nhan-bao-gia .sp-contact-qr img { display:block; width:176px; height:176px; max-width:100%; margin-inline:auto; background:var(--ht-color-bg); border-radius:var(--ht-radius-card); object-fit:contain; box-shadow:0 3px 13px #17385e08; }
.solid-product #nhan-bao-gia .sp-contact-qr figcaption { margin-top:8px; font-size:var(--public-text-small); font-weight:700; line-height:1.6; }
.solid-product #nhan-bao-gia .sp-contact-helper { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:var(--public-text-body); line-height:1.6; margin:22px 0 0; }
.solid-product #nhan-bao-gia .sp-contact-helper-icon { width:36px; height:36px; flex:none; }
@media(max-width:1099px) {
  .solid-product #nhan-bao-gia .sp-heading h2 { font-size:var(--public-text-h2); }
  .solid-product #nhan-bao-gia .sp-contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solid-product #nhan-bao-gia .sp-final-contact { order:0; grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 200px; column-gap:28px; align-items:center; }
  .solid-product #nhan-bao-gia .sp-final-contact .sp-contact-card-head { grid-column:1; min-height:65px; margin-bottom:10px; }
  .solid-product #nhan-bao-gia .sp-contact-content { grid-column:1; }
  .solid-product #nhan-bao-gia .sp-contact-qr { grid-column:2; grid-row:1/3; margin:0; }
  .solid-product #nhan-bao-gia .sp-final-contact .sp-contact-main-icon { width:64px; height:64px; }
}
@media(max-width:600px) {
  .solid-product #nhan-bao-gia { padding-block:36px; }
  .solid-product #nhan-bao-gia .wrap { padding-inline:var(--ht-gutter); }
  .solid-product #nhan-bao-gia .sp-heading { margin-bottom:20px; }
  .solid-product #nhan-bao-gia .sp-heading h2 { font-size:var(--public-text-h2); }
  .solid-product #nhan-bao-gia .sp-heading p { font-size:var(--public-text-body); }
  .solid-product #nhan-bao-gia .sp-contact-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .solid-product #nhan-bao-gia .sp-contact-card { padding:20px 18px; border-radius:var(--ht-radius-card); }
  .solid-product #nhan-bao-gia .sp-final-contact { display:block; grid-column:auto; }
  .solid-product #nhan-bao-gia .sp-contact-card-head { min-height:64px; margin-bottom:14px; gap:12px; }
  .solid-product #nhan-bao-gia :is(.sp-contact-main-icon,.sp-final-contact .sp-contact-main-icon) { width:60px; height:60px; }
  .solid-product #nhan-bao-gia h3 { font-size:var(--public-text-h3); }
  .solid-product #nhan-bao-gia .sp-contact-group ul { gap:12px; }
  .solid-product #nhan-bao-gia .sp-contact-group li { gap:10px; font-size:var(--public-text-body); }
  .solid-product #nhan-bao-gia .sp-contact-check-icon { width:26px; height:26px; }
  .solid-product #nhan-bao-gia .sp-final-actions .button { padding-inline:10px; gap:8px; }
  .solid-product #nhan-bao-gia .sp-contact-icon { width:20px; height:20px; flex-basis:20px; }
  .solid-product #nhan-bao-gia .sp-contact-qr { display:none; }
  .solid-product #nhan-bao-gia .sp-contact-helper { align-items:flex-start; margin-top:18px; font-size:var(--public-text-body); }
  .solid-product #nhan-bao-gia .sp-contact-helper-icon { width:30px; height:30px; margin-top:2px; }
}

/* One published price source, two desktop groups and one complete mobile table. */
.solid-product #bang-gia { margin-top:40px; padding:32px; background:var(--ht-color-bg); border:1px solid var(--line); border-radius:var(--ht-radius-card); scroll-margin-top:140px; }
.solid-product #bang-gia .sp-pricing-date { margin-top:8px; color:var(--muted); font-size:var(--public-text-body); }
.solid-product #bang-gia .sp-pricing-desktop { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.solid-product #bang-gia .sp-pricing-mobile { display:none; }
.solid-product #bang-gia .sp-pricing-table { min-width:0; border:1px solid var(--line); border-radius:var(--ht-radius-card); overflow:hidden; }
.solid-product #bang-gia table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:var(--public-text-body); line-height:1.5; }
.solid-product #bang-gia :is(th,td) { padding:14px 20px; text-align:left; }
.solid-product #bang-gia thead { background:var(--blue); color:var(--ht-color-bg); }
.solid-product #bang-gia tbody th { font-weight:600; }
.solid-product #bang-gia tbody tr + tr { border-top:1px solid var(--line); }
.solid-product #bang-gia :is(th,td):last-child { text-align:right; font-variant-numeric:tabular-nums; }
.solid-product #bang-gia .sp-pricing-highlight { background:var(--pale); }
.solid-product #bang-gia .sp-pricing-footer { margin-top:24px; text-align:center; }
.solid-product #bang-gia .sp-pricing-footer p { margin-bottom:16px; }
.solid-product #bang-gia a:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
.solid-product .sp-hero .sp-price-link { border-color:var(--blue); color:var(--blue); }
.solid-product .sp-hero .sp-hero-actions { flex-wrap:wrap; }
@media(max-width:600px) {
  .solid-product #bang-gia { padding:24px 16px; margin-top:28px; }
  .solid-product #bang-gia .sp-pricing-desktop { display:none; }
  .solid-product #bang-gia .sp-pricing-mobile { display:block; }
  .solid-product #bang-gia .sp-heading h2 { font-size:var(--public-text-h2); }
  .solid-product #bang-gia :is(th,td) { padding:13px 14px; }
  .solid-product #bang-gia .button { width:100%; }
}
@media(min-width:901px) and (max-width:1100px) {
  .solid-product .sp-hero .sp-hero-actions { gap:8px; }
  .solid-product .sp-hero .sp-hero-actions .button { padding-inline:8px; }
}

@supports (grid-template-rows:subgrid) {
  .solid-product #chon-mau .sp-color-roof { display:grid; grid-template-rows:subgrid; grid-row:span 2; align-self:stretch; }
}

/* Application card frames follow the shared ratio; the lead photo keeps its focal layout. */
.solid-product #ung-dung .sp-application-card > img { aspect-ratio:var(--ht-card-image-ratio); }

/* Approved handoff crops already include the full application subject. */
.solid-product #ung-dung .sp-application-card > img.sp-application-approved-frame { aspect-ratio:4/3; object-position:center; }