/* ==========================================================================
BBI Heating & Electrical — Design System
Palette: navy / blue / pastel sky / pastel mint. Deliberately restrained.
========================================================================== */
/*
Thuộc tính hidden của HTML nghĩa là "ẩn", nhưng nó chỉ là `display: none` ở mức user-agent
nên BẤT KỲ rule nào đặt display cho phần tử đó đều thắng nó. Banner cookie, popup exit
intent và panel điện thoại đều có display riêng, nên nếu thiếu dòng này chúng hiện chình
ình trên mọi trang — hoặc tệ hơn, nằm vô hình phía trên và nuốt mọi cú bấm.
Đặt ngay đầu tệp để không phải nhớ lại mỗi lần thêm một phần tử ẩn/hiện mới.
*/
[hidden] { display: none !important; }
/* ---------- 1. Tokens ---------- */
:root {
/* Brand — navy & blue core */
--navy-900: #071A2E;
--navy-800: #0A2540;
--navy-700: #123A5E;
--navy-600: #1B4C77;
--blue-600: #17629C;
--blue-500: #1E7BBF;
--blue-400: #3E96D4;
--cyan-400: #2FA8D8;
/* Pastels */
--sky-100: #EAF3FA;
--sky-200: #D6E7F4;
--sky-300: #B9D6EC;
--mint-100: #E4F1EE;
--mint-200: #CBE4DF;
--teal-600: #2E8C86;
--sand-100: #FBF1E0;
--sand-300: #F0D6A8;
--sand-700: #9A6B18;
/* Neutrals */
--ink: #0E1B29;
--ink-70: #3D4C5C;
--slate: #5D6E80;
--slate-40: #93A2B1;
--line: #DFE7EF;
--line-soft: #EDF2F7;
--paper: #FFFFFF;
--paper-alt: #F6F9FC;
/* Feedback */
--ok: #1F7A5C;
--warn: #9A6B18;
--err: #B3261E;
/* Type */
--font-head: 'Manrope', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
/* Scale (fluid) */
--fs-display: clamp(2.25rem, 1.35rem + 3.4vw, 4rem);
--fs-h1: clamp(1.95rem, 1.35rem + 2.3vw, 3.1rem);
--fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
--fs-h3: clamp(1.18rem, 1.03rem + 0.6vw, 1.5rem);
--fs-h4: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
--fs-body: 1.0625rem;
--fs-sm: 0.9375rem;
--fs-xs: 0.8125rem;
/* Space */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
/* Shape */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-pill: 999px;
/* Elevation — soft, cool-toned */
--sh-1: 0 1px 2px rgba(10, 37, 64, .06), 0 1px 3px rgba(10, 37, 64, .05);
--sh-2: 0 4px 10px rgba(10, 37, 64, .07), 0 2px 4px rgba(10, 37, 64, .05);
--sh-3: 0 14px 34px rgba(10, 37, 64, .12), 0 4px 10px rgba(10, 37, 64, .06);
--sh-focus: 0 0 0 3px rgba(47, 168, 216, .45);
--container: 1200px;
--container-narrow: 820px;
--header-h: 76px;
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Decorative offsets (the hero inset, blueprint masks) must never create a
horizontal scrollbar on small screens. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 {
font-family: var(--font-head);
color: var(--navy-800);
line-height: 1.16;
letter-spacing: -0.021em;
margin: 0 0 var(--sp-4);
font-weight: 800;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 750; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; border-radius: 4px; }
/* Blazor's FocusOnNavigate moves focus to the on every navigation. That is good
for screen-reader users but must not draw a visible box for mouse users. */
h1:focus, [tabindex="-1"]:focus { outline: none; }
::selection { background: var(--sky-300); color: var(--navy-900); }
/* ---------- 3. Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); }
.section--paper { background: var(--paper-alt); }
.section--sky { background: linear-gradient(180deg, var(--sky-100), #fff); }
.section--mint { background: var(--mint-100); }
.section--navy { background: var(--navy-800); color: #E7EFF7; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
/* Chỉ đổi màu link văn bản. Không được chạm vào nút — `.section--navy a` có độ ưu tiên
(0,1,1) cao hơn `.btn-onnavy` (0,1,0), nên nếu không loại trừ thì nút nền trắng sẽ bị
tô chữ xanh nhạt và gần như không đọc được. */
.section--navy a:not(.btn) { color: var(--sky-300); }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--navy-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
/* ---------- 4. Type helpers ---------- */
.eyebrow {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--blue-600);
display: flex; align-items: center; gap: .6rem;
margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cyan-400); border-radius: 2px; flex: none; }
.section--navy .eyebrow { color: var(--sky-300); }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--ink-70); line-height: 1.6; }
.section--navy .lead { color: #C7D8E8; }
.muted { color: var(--slate); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); font-size: .82em; letter-spacing: .01em; }
/* ---------- 5. Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-family: var(--font-head); font-weight: 750; font-size: var(--fs-sm);
line-height: 1; padding: .95rem 1.6rem; border-radius: var(--r-pill);
border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
min-height: 48px; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--navy-700); color: #fff; box-shadow: var(--sh-3); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--navy-800); }
.btn-ghost:hover { background: var(--navy-800); color: #fff; }
.btn-onnavy { background: #fff; color: var(--navy-800); }
.btn-onnavy:hover { background: var(--sky-100); color: var(--navy-900); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1rem; min-height: 54px; }
.btn-sm { padding: .6rem 1.1rem; font-size: var(--fs-xs); min-height: 38px; }
.btn-block { width: 100%; }
.link-arrow {
display: inline-flex; align-items: center; gap: .4rem;
font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
color: var(--blue-600); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
/* ---------- 6. Chips, pills, badges ---------- */
.chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .7rem; border-radius: var(--r-pill);
font-size: var(--fs-xs); font-weight: 650; font-family: var(--font-head);
background: var(--sky-100); color: var(--navy-700); border: 1px solid var(--sky-200);
}
.chip--mint { background: var(--mint-100); color: #1F6A64; border-color: var(--mint-200); }
.chip--sand { background: var(--sand-100); color: var(--sand-700); border-color: var(--sand-300); }
.chip--navy { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.chip--outline { background: transparent; border-color: var(--line); color: var(--slate); }
/* The signature element: a verifiable credential chip with its registration number */
.credential {
display: inline-flex; align-items: baseline; gap: .5rem;
padding: .4rem .8rem; border-radius: var(--r-sm);
background: #fff; border: 1px solid var(--line);
font-size: var(--fs-xs); box-shadow: var(--sh-1);
}
.credential strong { font-family: var(--font-head); color: var(--navy-800); font-weight: 800; }
.credential span { font-family: var(--font-mono); color: var(--slate); font-size: .95em; }
/* Transparent price chip — BBI publishes real prices, competitors do not */
.price-tag {
display: inline-flex; flex-direction: column; gap: .1rem;
padding: .55rem .95rem; border-radius: var(--r-sm);
background: var(--navy-800); color: #fff; box-shadow: var(--sh-2);
}
.price-tag b { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.price-tag small { font-size: .72rem; color: var(--sky-300); letter-spacing: .03em; text-transform: uppercase; }
/* ---------- 7. Cards ---------- */
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card--hover:hover { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: var(--sky-300); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card--hover:hover .card__media img { transform: scale(1.045); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-70); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
/* Service card with a left accent rule — the recurring BBI motif */
.svc-card { position: relative; }
.svc-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--cyan-400), var(--blue-600));
opacity: 0; transition: opacity .2s ease; z-index: 2;
}
.svc-card:hover::before { opacity: 1; }
.tile {
display: block; padding: var(--sp-5); background: #fff;
border: 1px solid var(--line); border-radius: var(--r-md);
text-decoration: none; color: inherit; height: 100%;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--sky-300); color: inherit; }
.tile h4 { margin: 0 0 .35rem; color: var(--navy-800); }
.tile p { margin: 0; font-size: var(--fs-sm); color: var(--slate); }
.icon-badge {
width: 44px; height: 44px; border-radius: 12px; flex: none;
display: grid; place-items: center; margin-bottom: var(--sp-3);
background: var(--sky-100); color: var(--blue-600);
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge--mint { background: var(--mint-100); color: var(--teal-600); }
.icon-badge--navy { background: var(--navy-800); color: #fff; }
/* ---------- 8. Header ---------- */
.topbar {
background: var(--navy-900); color: #B9CCDF;
font-size: var(--fs-xs); letter-spacing: .01em;
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; min-height: 38px; padding-block: .35rem; }
.topbar a { color: #DCE8F3; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__items { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.topbar svg { width: 14px; height: 14px; opacity: .8; }
@media (max-width: 34rem) { .topbar .hide-sm { display: none; } }
/* Thanh tiến trình khi chuyển trang — xem wwwroot/js/nav-progress.js.
Blazor vá DOM thay vì tải lại trang, nên vòng xoay của trình duyệt không chạy và khách
không có cách nào biết cú bấm đã ăn. Thanh này là phản hồi đó.
z-index phải trên .header (100) và trên cả banner cookie, nếu không nó nằm khuất sau
thanh điều hướng dính ở đỉnh trang. */
.navbar-progress {
position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.navbar-progress.on { opacity: 1; }
.navbar-progress span {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
box-shadow: 0 0 8px rgba(34, 211, 238, .55);
}
/* Chạy nhanh tới 70% rồi bò dần: không biết trước bao lâu thì đừng vờ như biết. Phần còn
lại để dành cho lúc trang tới thật. */
.navbar-progress.on span { animation: navbar-progress-run 12s cubic-bezier(.1, .75, .2, 1) forwards; }
.navbar-progress.done span { animation: none; width: 100%; transition: width .18s ease-out; }
@keyframes navbar-progress-run {
0% { width: 0; }
12% { width: 42%; }
35% { width: 68%; }
100% { width: 92%; }
}
/* Con trỏ báo "đang bận" trên toàn trang, cho người dùng chuột. */
.nav-loading, .nav-loading a { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
.navbar-progress.on span { animation: none; width: 60%; }
.navbar-progress { transition: none; }
}
.header {
position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { height: 44px; width: auto; }
.brand__txt { display: none; }
.nav { display: none; margin-left: auto; min-width: 0; }
.nav ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
.nav > ul > li > a, .nav__trigger {
display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
font-family: var(--font-head); font-weight: 650; font-size: .9rem;
color: var(--navy-800); text-decoration: none;
padding: .6rem .55rem; border-radius: var(--r-sm);
background: none; border: 0; cursor: pointer; line-height: 1.2;
}
.nav > ul > li > a:hover, .nav__trigger:hover,
.nav__trigger[aria-expanded="true"],
.nav__item:hover > .nav__trigger { background: var(--sky-100); color: var(--navy-900); }
.nav a.active { color: var(--blue-600); }
.nav a.active::after {
content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .15rem; height: 2px;
background: var(--cyan-400); border-radius: 2px;
}
.nav__trigger svg { width: 12px; height: 12px; transition: transform .18s ease; }
.dropdown {
--dd-gap: .4rem;
position: absolute; top: calc(100% + var(--dd-gap)); left: 0; min-width: 19rem;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
box-shadow: var(--sh-3); padding: .5rem; z-index: 120;
display: none;
}
/* Menu con đóng/mở bằng CSS, không cần runtime nào.
:focus-within lo cho bàn phím — tab tới tiêu đề là submenu bung ra, nếu không thì không
có đường nào chạm tới các mục bên trong. .nav__item--open là lối vào cho màn hình cảm ứng,
nơi không hề có hover (xem wwwroot/js/site-nav.js). */
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown,
.nav__item--open > .dropdown { display: block; }
.nav__trigger[aria-expanded="true"] svg,
.nav__item:hover > .nav__trigger svg { transform: rotate(180deg); }
/* Cầu nối vô hình lấp đúng khoảng hở giữa nút menu và menu con.
Khoảng hở đó không thuộc
nào cả: chuột vừa rời nút để đi xuống là rời luôn ,
@onmouseleave bắn và menu đóng ngay trước khi tay chạm được item đầu tiên.
Pseudo-element này là con của .dropdown nên nằm trong — khoảng cách NHÌN THẤY giữ
nguyên, chỉ vùng nhận chuột là liền mạch. Chiều cao lấy từ cùng biến với top, để sau này
đổi khoảng cách không phải nhớ sửa hai chỗ. */
.dropdown::before {
content: ""; position: absolute; left: 0; right: 0;
top: calc(var(--dd-gap) * -1); height: var(--dd-gap);
}
.dropdown ul { flex-direction: column; align-items: stretch; gap: 0; }
.dropdown a {
display: flex; flex-direction: column; gap: .1rem;
padding: .55rem .7rem; border-radius: var(--r-sm); text-decoration: none; color: var(--navy-800);
font-family: var(--font-head); font-weight: 650; font-size: .9rem;
}
.dropdown a:hover { background: var(--sky-100); }
.dropdown a span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--slate); }
.dropdown__head {
padding: .5rem .7rem .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--slate-40); font-family: var(--font-head);
}
.header__cta { display: none; gap: .5rem; align-items: center; flex: none; }
.burger {
margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
background: var(--navy-800); color: #fff; border: 0; border-radius: var(--r-pill);
padding: .6rem 1rem; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); cursor: pointer;
min-height: 42px;
}
.burger svg { width: 16px; height: 16px; }
.mobile-panel {
position: fixed; inset: 0; top: 0; z-index: 200; background: #fff;
display: flex; flex-direction: column; overflow-y: auto;
}
/* Khoá cuộn trang nền khi panel mở, nếu không thì vuốt trong menu lại kéo trang phía sau. */
.mobile-nav-open, .mobile-nav-open body { overflow: hidden; }
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.mobile-panel__body { padding: var(--sp-4) var(--sp-5) 6rem; }
.mobile-group { border-bottom: 1px solid var(--line-soft); padding-block: .35rem; }
.mobile-group > button {
width: 100%; display: flex; align-items: center; justify-content: space-between;
background: none; border: 0; padding: .85rem 0; cursor: pointer;
font-family: var(--font-head); font-weight: 750; font-size: 1.05rem; color: var(--navy-800); text-align: left;
}
.mobile-group > button svg { width: 14px; height: 14px; transition: transform .18s ease; }
.mobile-group > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-group ul { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .2rem; }
.mobile-group ul a { display: block; padding: .55rem 0; text-decoration: none; color: var(--ink-70); font-size: .95rem; }
.mobile-group ul a:hover { color: var(--blue-600); }
.mobile-link { display: block; padding: .85rem 0; text-decoration: none; font-family: var(--font-head); font-weight: 750; font-size: 1.05rem; color: var(--navy-800); border-bottom: 1px solid var(--line-soft); }
/* Sticky mobile action bar */
.action-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--line); border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
display: flex; align-items: center; justify-content: center; gap: .45rem;
padding: .95rem .5rem; text-decoration: none; background: #fff; color: var(--navy-800);
font-family: var(--font-head); font-weight: 750; font-size: .9rem; min-height: 54px;
}
.action-bar a.primary { background: var(--blue-600); color: #fff; }
.action-bar svg { width: 17px; height: 17px; }
/* ---------- 9. Hero ---------- */
.hero {
position: relative; overflow: hidden; color: #E9F1F8;
background: radial-gradient(120% 130% at 82% 0%, var(--navy-700) 0%, var(--navy-800) 42%, var(--navy-900) 100%);
}
/* Blueprint grid — BBI's visual signature */
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(90% 80% at 20% 20%, #000 30%, transparent 100%);
}
.hero__inner { position: relative; display: grid; gap: var(--sp-6); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero h1 { color: #fff; font-size: var(--fs-display); margin-bottom: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--sky-300); }
.hero p.lead { color: #BFD3E5; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14); }
.hero__proof div { min-width: 6.5rem; }
.hero__proof b { display: block; font-family: var(--font-head); font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.1; }
.hero__proof span { font-size: var(--fs-xs); color: #9FB8CE; }
.hero__media { position: relative; }
.hero__media > img { border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.35); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__media--stack { display: grid; gap: var(--sp-4); }
.hero__inset {
position: absolute; right: -14px; bottom: -26px; width: 42%; max-width: 210px;
aspect-ratio: 3 / 4;
border-radius: var(--r-md); overflow: hidden; border: 5px solid var(--navy-800);
box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.hero__inset img { border-radius: 0; box-shadow: none; width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
position: absolute; left: var(--sp-4); top: var(--sp-4); max-width: 62%;
background: rgba(7,26,46,.82); backdrop-filter: blur(6px);
color: #DCE9F5; font-size: var(--fs-xs); padding: .45rem .8rem; border-radius: var(--r-pill);
border: 1px solid rgba(255,255,255,.16);
}
/* Compact page hero for interior pages */
.pagehero {
position: relative; overflow: hidden; color: #E9F1F8;
background: linear-gradient(105deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
}
.pagehero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(100deg, #000 0%, transparent 65%);
}
.pagehero__inner { position: relative; display: grid; gap: var(--sp-6); padding-block: clamp(2rem, 1.3rem + 3vw, 3.75rem); }
.pagehero h1 { color: #fff; margin-bottom: var(--sp-3); }
.pagehero p { color: #BFD3E5; }
.pagehero__media img { border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* ---------- 10. Trust bar ---------- */
.trustbar { background: #fff; border-bottom: 1px solid var(--line); }
.trustbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-5) var(--sp-6); padding-block: var(--sp-4); }
.trustbar img { height: 40px; width: auto; object-fit: contain; filter: saturate(.9); opacity: .95; }
.trustbar .trustbar__label { font-size: var(--fs-xs); color: var(--slate); font-weight: 650; font-family: var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.badgewall { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.badgewall figure { margin: 0; text-align: center; width: 7.5rem; }
.badgewall img { height: 56px; width: auto; margin: 0 auto .4rem; object-fit: contain; }
.badgewall figcaption { font-size: var(--fs-xs); color: var(--slate); line-height: 1.35; }
/* ---------- 11. Feature rows / split ---------- */
.split { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media img { border-radius: var(--r-md); box-shadow: var(--sh-2); width: 100%; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
/* Dấu tick đặt tuyệt đối chứ KHÔNG dùng flex trên .
Với flex, mỗi thẻ inline bên trong (, ) sẽ thành một flex item riêng và bị
tách thành cột — câu "…Nhãn phần mô tả…" sẽ vỡ làm hai cột hẹp. */
.checklist li {
position: relative; padding-left: 1.8rem; margin: 0;
font-size: var(--fs-sm); line-height: 1.6;
}
.checklist li::before {
content: ""; position: absolute; left: 0; top: .2rem;
width: 20px; height: 20px; border-radius: 50%;
background: var(--mint-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232E8C86'%3E%3Cpath d='M8.1 13.3 5.2 10.4l1.1-1.1 1.8 1.8 5-5 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--navy .checklist li::before { background-color: rgba(255,255,255,.12); }
.section--navy .checklist li { color: #D5E3F0; }
.numlist { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-4); margin: 0; align-items: start; }
.numlist li::before {
content: counter(n, decimal-leading-zero);
font-family: var(--font-head); font-weight: 800; font-size: .95rem;
color: var(--blue-600); background: var(--sky-100);
width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
}
.numlist h4 { margin: 0 0 .2rem; }
.numlist p { margin: 0; font-size: var(--fs-sm); color: var(--ink-70); }
/* ---------- 12. Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
table.data caption { text-align: left; padding: var(--sp-4) var(--sp-5) 0; font-weight: 700; font-family: var(--font-head); color: var(--navy-800); }
table.data th, table.data td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data thead th { background: var(--sky-100); color: var(--navy-800); font-family: var(--font-head); font-weight: 750; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--sky-200); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--paper-alt); }
table.data td strong { color: var(--navy-800); }
/* ---------- 13. Accordion / FAQ ---------- */
.faq { display: grid; gap: .6rem; }
.faq details {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.faq details[open] { border-color: var(--sky-300); box-shadow: var(--sh-1); }
.faq summary {
cursor: pointer; padding: 1.05rem 3rem 1.05rem 1.25rem; position: relative;
font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy-800);
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; position: absolute; right: 1.15rem; top: 50%; width: 12px; height: 12px;
margin-top: -6px; transition: transform .2s ease;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2317629C'%3E%3Cpath d='M6 8.5 1 3.5 2.1 2.4 6 6.3l3.9-3.9L11 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { background: var(--sky-100); }
.faq .faq__body { padding: 0 1.25rem 1.25rem; font-size: var(--fs-sm); color: var(--ink-70); }
.faq .faq__body p { max-width: none; }
/* ---------- 14. Callouts ---------- */
.callout {
display: grid; gap: var(--sp-4); padding: var(--sp-5);
border-radius: var(--r-md); border: 1px solid var(--sky-200); background: var(--sky-100);
}
.callout--mint { background: var(--mint-100); border-color: var(--mint-200); }
.callout--sand { background: var(--sand-100); border-color: var(--sand-300); }
.callout--navy { background: var(--navy-800); border-color: var(--navy-700); color: #DCE8F3; }
.callout--navy h3, .callout--navy h4 { color: #fff; }
.callout h3, .callout h4 { margin: 0; }
.callout p { margin: 0; font-size: var(--fs-sm); }
.callout__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48rem) { .callout__grid { grid-template-columns: 1fr auto; } }
.note {
border-left: 3px solid var(--sky-300); background: var(--paper-alt);
padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: var(--fs-sm); color: var(--ink-70);
}
.note strong { color: var(--navy-800); }
/* CTA band */
.ctaband { background: linear-gradient(100deg, var(--navy-800), var(--navy-600)); color: #fff; position: relative; overflow: hidden; }
.ctaband::before {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
}
.ctaband__inner { position: relative; display: grid; gap: var(--sp-5); padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); align-items: center; }
.ctaband h2 { color: #fff; margin-bottom: .5rem; }
.ctaband p { color: #C7D8E8; margin: 0; }
@media (min-width: 56rem) { .ctaband__inner { grid-template-columns: 1fr auto; } }
/* ---------- 15. Forms ---------- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .form-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) and (max-width: 51.99rem) { .form-grid--3 { grid-template-columns: 1fr 1fr; } }
/* align-content: start — nếu không, ô nhập trong một hàng grid bị giãn ra cho vừa ô cao nhất
cùng hàng, và ô nào ít dòng chú thích hơn sẽ tụt xuống không thẳng với ô bên cạnh. */
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--navy-800); }
.field .hint { font-size: var(--fs-xs); color: var(--slate); }
.field .err { font-size: var(--fs-xs); color: var(--err); font-weight: 600; }
/*
Vùng thông báo dưới ô nhập.
Thông báo lỗi LUÔN nằm trong DOM và chỉ ẩn bằng visibility, không phải display:none. Chèn
thêm phần tử lúc validate thì cả biểu mẫu tụt xuống — đo được 151px ở bước cuối của
/free-quote, đủ để ô khách đang gõ trượt khỏi chỗ con trỏ vừa đứng.
Grid xếp chồng: gợi ý và lỗi dùng chung MỘT ô, nên chiều cao vùng này bằng cái cao nhất và
không đổi khi đổi cái đang hiện. Nhờ vậy không phải đoán trước lỗi dài mấy dòng — thứ mà
min-height cứng luôn đoán sai ở một khổ màn hình nào đó.
*/
.field__msg { display: grid; }
.field__msg > * { grid-area: 1 / 1; }
/* Ẩn mà vẫn giữ chỗ. Trình đọc màn hình cũng bỏ qua phần tử visibility:hidden, nên nội dung
lỗi không bị đọc lên khi chưa có lỗi. */
.err--off { visibility: hidden; }
/*
Danh sách này liệt kê TƯỜNG MINH từng loại input, nên thiếu một loại là loại đó
hiện ra trần trụi mà không báo lỗi gì. `password` từng bị bỏ sót: site công khai
không có ô mật khẩu nào nên khoảng trống chỉ lộ ra khi khu quản trị có trang đăng
nhập. Thêm luôn `search` và `url` để không vấp lại chuyện cũ.
*/
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
input[type=password], input[type=search], input[type=url], select, textarea {
width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--ink);
padding: .8rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
background: #fff; transition: border-color .16s ease, box-shadow .16s ease; min-height: 48px;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: var(--sh-focus); }
input::placeholder, textarea::placeholder { color: var(--slate-40); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%235D6E80'%3E%3Cpath d='M6 8.5 1 3.5 2.1 2.4 6 6.3l3.9-3.9L11 3.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px; padding-right: 2.4rem; }
.choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.choice {
position: relative; display: flex; flex-direction: column; gap: .2rem;
padding: .85rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
background: #fff; cursor: pointer; transition: all .16s ease; min-height: 56px; justify-content: center;
}
.choice:hover { border-color: var(--sky-300); background: var(--sky-100); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--navy-800); }
.choice small { font-size: var(--fs-xs); color: var(--slate); }
.choice:has(input:checked) { border-color: var(--blue-500); background: var(--sky-100); box-shadow: inset 0 0 0 1px var(--blue-500); }
.choice:has(input:focus-visible) { box-shadow: var(--sh-focus); }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-70); }
.consent input { width: 20px; height: 20px; margin-top: .18rem; flex: none; accent-color: var(--blue-600); }
.steps { display: flex; gap: .4rem; margin-bottom: var(--sp-5); }
.steps div { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .25s ease; }
.steps div.done { background: var(--blue-500); }
.steps div.current { background: var(--cyan-400); }
.step-label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .5rem; }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, .9rem + 1.4vw, 2rem); box-shadow: var(--sh-2); }
/* ==========================================================================
/free-quote — thẻ biểu mẫu
==========================================================================
Bố cục theo đúng khuôn của mọi trang khác: hero ở trên, nội dung ở dưới, trang cuộn tự nhiên.
Không khoá chiều cao theo khung nhìn — thử rồi và nó biến trang này thành ngoại lệ, khách quen
cuộn ở các trang khác sẽ khựng lại ở đây.
Cái GIỮ LẠI từ lần thử đó là phần đáng giá thật: thẻ rộng hơn hẳn, và các bước tận dụng bề
ngang để xếp hai cột. Nhờ vậy thẻ thấp hơn nhiều so với bản một cột ban đầu mà không phải bỏ
đi chữ nào.
*/
.quote-section .container { max-width: 1360px; }
.quote-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-2); display: flex; flex-direction: column;
}
.quote-card__head {
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--line);
}
.quote-card__head h2 { font-size: clamp(1.15rem, .95rem + .7vw, 1.4rem); margin-block: .1rem; }
.quote-card__head .steps { margin-bottom: .7rem; }
.quote-card__head .step-label { margin-bottom: .15rem; }
.quote-card__body { padding: var(--sp-5); }
.quote-card__foot {
display: flex; flex-wrap: wrap; gap: var(--sp-3);
justify-content: space-between; align-items: center;
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--line); background: var(--paper-alt);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.quote-card__hint { font-size: var(--fs-xs); color: var(--slate); }
/* Trên điện thoại thẻ dài hơn bốn màn hình, nên hàng nút dính đáy: đang ở giữa bước 3 vẫn bấm
Continue được ngay. Ở khổ desktop KHÔNG dính — thẻ chỉ nhỉnh hơn một khung nhìn, mà dính vào
thì nút "Send my enquiry" nổi lên ở đáy màn hình trước cả khi khách nhìn thấy biểu mẫu. */
@media (max-width: 63.99rem) {
.quote-card__foot { position: sticky; bottom: 0; z-index: 5; }
}
/*
Trần 800px cho thẻ biểu mẫu.
Bước dài nhất cao hơn 1.000px, và một thẻ cao như vậy đẩy hàng nút xuống tận đáy: khách phải
cuộn hết bước mới biết đi tiếp bằng cách nào. Chặn ở 800px thì đầu thẻ (đang ở bước nào) và
chân thẻ (nút đi tiếp) luôn cùng nằm trong một khung nhìn, phần nội dung dài hơn thì cuộn bên
trong thân — KHÔNG cắt bớt chữ nào.
Chỉ áp từ khổ desktop. Trên điện thoại, khung cuộn lồng trong trang cuộn là kiểu tương tác dễ
hỏng nhất trên cảm ứng: ngón tay kéo trúng thân thẻ thì trang đứng im, kéo trượt ra ngoài lại
nhảy cả trang. Ở đó cứ để trang cuộn một mạch, hàng nút đã dính đáy rồi.
*/
@media (min-width: 64rem) {
.quote-card { max-height: 800px; }
.quote-card__head, .quote-card__foot { flex: none; }
.quote-card__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/*
Bước 1: HAI vùng cuộn độc lập thay cho một vùng chung.
Một vùng chung thì cuộn xuống để bấm dòng cuối (EV chargers) sẽ kéo cả cột chi tiết đi
theo, và phần đầu của nó — cái chip grant, cái tiêu đề — trôi lên khỏi tầm mắt đúng vào
lúc khách vừa bấm chọn và đang muốn đọc. Tách ra thì mỗi cột giữ vị trí cuộn của riêng nó.
Thân thẻ không cuộn nữa (overflow: hidden); việc cuộn giao xuống cho từng cột.
*/
.quote-card__body--pick {
overflow: hidden;
display: flex; flex-direction: column; gap: var(--sp-4);
}
.quote-card__body--pick .quote-pick {
flex: 1 1 auto; min-height: 0; gap: var(--sp-4);
/* grid-template-rows + stretch là hai mảnh bắt buộc, thiếu mảnh nào cũng hỏng lặng lẽ:
hàng grid mặc định cao "auto" nên nó giãn theo nội dung, và align-items:start (kế thừa
từ .quote-pick) lại cho mỗi cột tự cao theo nội dung của nó. Cả hai đều dẫn tới cùng
một kết quả — cột tràn ra ngoài thay vì cuộn, và overflow-y:auto bên dưới thành vô nghĩa. */
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
}
.quote-card__body--pick .pick-list,
.quote-card__body--pick .pick-detail { overflow-y: auto; min-height: 0; }
/* Dòng chữ "Need something else…" đứng yên dưới cùng, không trôi theo cột nào. */
.quote-pick__note { flex: none; }
}
/*
Thân thẻ là một container: các khối bên trong tự xếp theo BỀ RỘNG CÒN LẠI của nó, không theo
bề rộng cửa sổ. Dùng media query thì lề trang và padding của thẻ không được tính vào, và câu
hỏi bị chia đôi ở những khổ mà mỗi cột chỉ còn vài chữ.
*/
.quote-card__body { container: quote-body / inline-size; }
/* Câu hỏi xếp hai cột khi đủ rộng: cắt đôi chiều cao, và mỗi