/* ==========================================================================
   BBI Heating & Electrical — Design System (static SSR pages, port of v1 app.css)
   Palette: navy + the two logo greens of BbiTheme (plan D6). Font: Inter only.
   Bright green #00A050 (3.4:1 on white) is decoration only — never text.
   ========================================================================== */

/*
   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 core (BbiTheme.Navy / NavyDark / NavyLight) */
    --navy-900: #071A2E;
    --navy-800: #0A2540;
    --navy-700: #123A5E;
    --navy-600: #1B4C77;

    /* Brand — the two logo greens (BbiTheme.Green / GreenBright) and their tints.
       Text contrast: green-700 on white 6.2:1, white on green-700 6.2:1, green-900 on mint-100 7.2:1,
       green-300 on navy-800 9.0:1. green-500 (3.4:1) is ONLY for rules, rings and fills. */
    --green-900: #005A33;
    --green-700: #007040;
    --green-500: #00A050;
    --green-300: #8FD3B0;

    /* Pastels */
    --mint-50: #F1F8F5;
    --mint-100: #E4F1EE;
    --mint-200: #CBE4DF;
    --mint-300: #A8D5C2;
    --sand-100: #FBF1E0;
    --sand-300: #F0D6A8;
    /* Text on sand-100 (grant chips, warn alerts): #9A6B18 was 4.2:1 there, below AA; this is 6.0:1 (same as .calc-sand__eyebrow). */
    --sand-700: #7A5512;

    /* Neutrals */
    --ink: #0E1B29;
    --ink-70: #3D4C5C;
    --slate: #5D6E80;
    --slate-40: #93A2B1;
    --line: #DFE7EF;
    --line-soft: #EDF2F7;
    --paper: #FFFFFF;
    --paper-alt: #F6F9FC;

    /* Feedback */
    --ok: #007040;
    --warn: #7A5512;
    --err: #B3261E;

    /* Type */
    --font-head: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    /* Inter is the only web font (plan D6): IBM Plex Mono was never loaded, so it only showed on machines that had it installed. */
    --font-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(0, 160, 80, .4);

    --container: 1200px;
    --container-narrow: 820px;
    --header-h: 76px;
    /* Chiều cao phần khung site phía trên một công cụ toàn màn hình (quote): header + viền.
       app.css của Client đọc biến này. */
    --chrome-h: 77px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(0, 112, 64, .12); }
/* 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;
    letter-spacing: normal; /* MudBlazor's body rule sets one on island pages */
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(img, svg, video):not(:where(.island *)) { max-width: 100%; height: auto; display: block; }

:where(h1, h2, h3, h4, h5):not(:where(.island *)) {
    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;
}

:where(h1):not(:where(.island *)) { font-size: var(--fs-h1); }
:where(h2):not(:where(.island *)) { font-size: var(--fs-h2); }
:where(h3):not(:where(.island *)) { font-size: var(--fs-h3); font-weight: 750; }
:where(h4):not(:where(.island *)) { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }
/* Card titles are h3 under the section's h2 (no skipped levels, WCAG 1.3.1) but keep the h4 look v1 gave them. */
.h3 { font-size: var(--fs-h3); font-weight: 750; }
.h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }

:where(p):not(:where(.island *)) { margin: 0 0 var(--sp-4); max-width: 68ch; }
:where(p:last-child):not(:where(.island *)) { margin-bottom: 0; }

/* `a` (0,0,1), not :where(a): pages with a WASM island also load MudBlazor, whose global `a { color; text-decoration: none }`
   would otherwise strip link colour and underline from the SSR page. Any class rule still overrides it. */
a:not(:where(.island *)) { color: var(--green-700); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(a):not(:where(.island *)):hover { color: var(--green-900); }

:where(ul, ol):not(:where(.island *)) { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
:where(li):not(:where(.island *)) { margin-bottom: var(--sp-2); }

:where(hr):not(:where(.island *)) { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

/* Blazor's FocusOnNavigate moves focus to the <h1> 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(--mint-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--tint { background: linear-gradient(180deg, var(--mint-50), #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(--green-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(--green-700);
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--green-500); border-radius: 2px; flex: none; }
/* On navy the dark green eyebrow is only 2.5:1: use the light green (9:1). */
.section--navy .eyebrow, .hero .eyebrow, .pagehero .eyebrow, .ctaband .eyebrow, .callout--navy .eyebrow { color: var(--green-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(--green-700); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--green-900); 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(--mint-50); 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(--green-700); 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(--mint-50); color: var(--navy-700); border: 1px solid var(--mint-200);
}
.chip--mint { background: var(--mint-100); color: var(--green-900); 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(--green-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(--mint-300); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mint-50); }
.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(--green-500), var(--green-700));
    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(--mint-300); color: inherit; }
.tile :is(h3, 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(--mint-50); color: var(--green-700);
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge--mint { background: var(--mint-100); color: var(--green-700); }
.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; }
/* v1 left the icons of the plain <span> items stacked above their text (svg is display:block). */
.topbar__items > span { display: inline-flex; align-items: center; gap: .4rem; }
.topbar svg { width: 14px; height: 14px; opacity: .8; flex: none; }
@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(--green-700), var(--green-500));
    box-shadow: 0 0 8px rgba(0, 160, 80, .5);
}

/* 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(--mint-50); color: var(--navy-900); }
.nav a.active { color: var(--green-700); }
.nav a.active::after {
    content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .15rem; height: 2px;
    background: var(--green-500); 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; }
/* Esc closed it (site-nav.js): stays shut while focus/pointer remain on this item. */
.nav__item--closed > .dropdown { display: none !important; }
.nav__item--closed > .nav__trigger svg { transform: none !important; }

.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 <li> nào cả: chuột vừa rời nút để đi xuống là rời luôn <li>,
   @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 <li> — 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(--mint-50); }
.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); 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(--green-700); }
.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(--green-700); color: #fff; }
.action-bar a.primary:hover { background: var(--green-900); }
.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(--green-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; }
/* Portrait photos (1200×1600) would otherwise make the row ~1000px tall: crop them to a sane height. */
.split__media img { border-radius: var(--r-md); box-shadow: var(--sh-2); width: 100%; max-height: min(36rem, 80vh); object-fit: cover; }

.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 <li>.
   Với flex, mỗi thẻ inline bên trong (<strong>, <a>) sẽ thành một flex item riêng và bị
   tách thành cột — câu "…<strong>Nhãn</strong> 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='%23007040'%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(--green-700); background: var(--mint-50);
    width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
}
.numlist :is(h3, 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(--mint-50); 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(--mint-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(--mint-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='%23007040'%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(--mint-50); }
.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(--mint-200); background: var(--mint-50);
}
.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 :is(h2, h3, h4) { color: #fff; }
.callout :is(h2, h3, 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(--mint-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ũ.
*/
:where(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):not(:where(.island *)) {
    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;
}
:where(textarea):not(:where(.island *)) { min-height: 8rem; resize: vertical; }
:where(input, select, textarea):not(:where(.island *)):focus { outline: none; border-color: var(--green-500); box-shadow: var(--sh-focus); }
:where(input, textarea):not(:where(.island *))::placeholder { color: var(--slate); }
:where(select):not(:where(.island *)) { 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(--mint-300); background: var(--mint-50); }
.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(--green-700); background: var(--mint-50); box-shadow: inset 0 0 0 1px var(--green-700); }
.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(--green-700); }

.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(--green-700); }
.steps div.current { background: var(--green-500); }
.step-label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); 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); }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-5); }

/* Calculator output */
.results { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.result {
    padding: var(--sp-4); border-radius: var(--r-md); background: var(--mint-50); border: 1px solid var(--mint-200);
}
.result b { display: block; font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; color: var(--navy-800); line-height: 1.1; }
.result span { font-size: var(--fs-xs); color: var(--slate); }
.result--mint { background: var(--mint-100); border-color: var(--mint-200); }
.result--sand { background: var(--sand-100); border-color: var(--sand-300); }

.rangewrap { display: grid; gap: .3rem; }
:where(input[type=range]):not(:where(.island *)) { width: 100%; accent-color: var(--green-700); height: 44px; }

/* ---------- 16. Breadcrumbs ---------- */
.crumbs { font-size: var(--fs-xs); color: var(--slate); padding-block: var(--sp-3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--slate-40); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--green-700); text-decoration: underline; }
.pagehero .crumbs, .pagehero .crumbs a { color: #9FB8CE; }
.pagehero .crumbs a:hover { color: #fff; }

/* ---------- 17. Gallery ---------- */
.masonry { columns: 1; column-gap: var(--sp-4); }
@media (min-width: 40rem) { .masonry { columns: 2; } }
@media (min-width: 64rem) { .masonry { columns: 3; } }
.masonry figure { break-inside: avoid; margin: 0 0 var(--sp-4); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.masonry img { width: 100%; }
.masonry figcaption { padding: .6rem .85rem; font-size: var(--fs-xs); color: var(--slate); }

/* ---------- 18. Footer ---------- */
.footer { background: var(--navy-900); color: #A9C0D6; font-size: var(--fs-sm); }
.footer__top { padding-block: var(--sp-7); display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer h2 { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: #A9C0D6; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* Bản logo nền trong suốt, chữ trắng — không còn cần hộp trắng bọc ngoài. */
.footer__brand img { height: 48px; width: auto; margin-bottom: var(--sp-4); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--sp-5); font-size: var(--fs-xs); color: #7E97AE; display: grid; gap: var(--sp-3); }
@media (min-width: 56rem) { .footer__legal { grid-template-columns: 1fr auto; align-items: center; } }
.footer__social { display: flex; gap: .6rem; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.footer__social a:hover { background: var(--green-700); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- 19. Utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
/* Pages with a WASM island (body.has-island) also load MudBlazor, whose same-named utilities are !important with other
   values (mt-5 = 20px, mt-6 = 24px). Put the site's values back on the SSR content; inside the island MudBlazor's apply.
   (mt-4 is 16px in both.) */
.has-island .mt-5:not(:where(.island *)) { margin-top: var(--sp-5) !important; }
.has-island .mt-6:not(:where(.island *)) { margin-top: var(--sp-6) !important; }
.maxw { max-width: 60ch; }
.nowrap { white-space: nowrap; }
.pb-safe { padding-bottom: 5rem; }

/* ---------- 20. Responsive switches ---------- */
@media (min-width: 30rem) and (max-width: 65.99rem) {
    .brand__txt { display: block; }
    .brand__txt b { display: block; font-family: var(--font-head); font-weight: 800; font-size: .98rem; color: var(--navy-800); line-height: 1.1; letter-spacing: -.01em; }
    .brand__txt span { font-size: .68rem; color: var(--slate); letter-spacing: .05em; text-transform: uppercase; }
}

@media (min-width: 64rem) {
    .hero__inner { grid-template-columns: 1.08fr .92fr; align-items: center; }
    .pagehero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide-media { grid-template-columns: .85fr 1.15fr; }
}

@media (min-width: 66rem) {
    .nav { display: block; }
    .header__cta { display: flex; }
    .header__cta .btn-ghost { display: none; }   /* phone lives in the top bar at this width */
    .burger { display: none; }
    .action-bar { display: none; }
    body { padding-bottom: 0 !important; }
}

@media (min-width: 85rem) {
    .header__cta .btn-ghost { display: inline-flex; }
}

@media (max-width: 65.99rem) {
    body { padding-bottom: 3.6rem; }
}

@media print {
    .header, .topbar, .action-bar, .ctaband, .footer__social { display: none !important; }
    body { color: #000; }
    a::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* ---------- 21. Section head (heading + trailing action) ---------- */
.sectionhead { display: grid; gap: var(--sp-4); align-items: end; }
.sectionhead__action { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (min-width: 56rem) {
    .sectionhead { grid-template-columns: minmax(0, 1fr) auto; }
    .sectionhead__action { justify-content: flex-end; }
}
.sectionhead h2 { margin-bottom: var(--sp-3); }
.sectionhead p { margin-bottom: 0; }


/* ---------- 22. Cookie consent ---------- */
.cookiebar {
    position: fixed; z-index: 300;
    left: var(--sp-4); right: var(--sp-4); bottom: calc(3.6rem + var(--sp-4));
    animation: cookiebar-in .28s cubic-bezier(.2,.7,.3,1);
}
@media (min-width: 40rem) {
    .cookiebar { right: auto; max-width: 30rem; }
}
@media (min-width: 66rem) {
    /* No sticky action bar at this width, so sit on the page floor — on the RIGHT: every hero puts
       its call to action in the left column, and v1's bottom-left banner sat right on top of it. */
    .cookiebar { bottom: var(--sp-5); left: auto; right: var(--sp-5); }
}
@keyframes cookiebar-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cookiebar { animation: none; }
}

.cookiebar__inner {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--green-700);
    border-radius: var(--r-md);
    box-shadow: 0 18px 44px rgba(10, 37, 64, .22), 0 4px 12px rgba(10, 37, 64, .1);
    padding: var(--sp-5);
    display: grid; gap: var(--sp-4);
}
.cookiebar__title {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1rem; margin: 0 0 .5rem; color: var(--navy-800);
}
.cookiebar__title svg { color: var(--green-700); flex: none; }
.cookiebar__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-70); max-width: none; }
.cookiebar__body p + p { margin-top: var(--sp-3); }

.cookiebar__detail {
    list-style: none; padding: 0; margin: var(--sp-4) 0 0;
    display: grid; gap: .6rem;
    border-top: 1px solid var(--line-soft); padding-top: var(--sp-4);
}
.cookiebar__detail li { margin: 0; font-size: var(--fs-xs); color: var(--ink-70); line-height: 1.55; }
.cookiebar__detail strong { color: var(--navy-800); }

.cookiebar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cookiebar__actions .btn { flex: 1 1 8rem; }
.cookiebar__more {
    flex: 1 1 100%;
    background: none; border: 0; padding: .25rem 0; cursor: pointer;
    font-family: var(--font-body); font-size: var(--fs-xs); color: var(--slate);
    text-align: left; text-decoration: underline; text-underline-offset: 2px;
}
.cookiebar__more:hover { color: var(--green-700); }

/* Footer "Cookie settings" trigger */
.linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-decoration: none;
}
.linkbtn:hover { color: #fff; text-decoration: underline; }


/* ---------- 23. Anti-spam honeypot ---------- */
/* Moved off-screen rather than display:none — more bots fill an off-screen field. */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto; width: 1px; height: 1px;
    overflow: hidden;
}

/* ---------- 24. Submit states ---------- */
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.spinner {
    width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.alert {
    display: grid; gap: .5rem;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    border-left: 3px solid;
}
.alert p { margin: 0; max-width: none; }
.alert--error { background: #FDF3F2; border-color: var(--err); color: #7A1B15; }
.alert--warn  { background: var(--sand-100); border-color: var(--sand-300); color: var(--sand-700); }
.alert strong { display: block; }

.reference {
    display: inline-flex; align-items: baseline; gap: .6rem;
    padding: .7rem 1.1rem; border-radius: var(--r-sm);
    background: var(--navy-800); color: #fff;
}
.reference span { font-size: var(--fs-xs); color: var(--green-300); text-transform: uppercase; letter-spacing: .06em; }
.reference b { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .04em; }


/* ---------- 25. Reviews wall ---------- */
/* Chỉ hiển thị khi ReviewCatalog có dữ liệu thật — xem ReviewCatalog.cs */
.rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: var(--sp-2); }
.rating__stars { display: inline-flex; gap: .1rem; align-self: center; }
.rating b { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; color: var(--navy-800); }

.star { color: var(--line); fill: var(--line); }
.star--on { color: #E3A008; fill: #E3A008; }

.review {
    margin: 0; padding: var(--sp-5);
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.review__stars { display: flex; gap: .1rem; }
.review blockquote {
    margin: 0; font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.6;
}
.review blockquote::before { content: "C"; }
.review blockquote::after  { content: "D"; }
.review figcaption { margin-top: auto; font-size: var(--fs-xs); color: var(--navy-800); }

/* ---------- 25b. Pulled-out quotation ----------
   Dùng bởi khối "Quote" trong trình soạn thảo và bởi lời khách trên trang dự án. Trước đây
   lớp này được dựng ra nhưng chưa có khai báo nào, nên mọi trích dẫn trong bài viết hiện ra
   y hệt một đoạn văn thường — mất hẳn ý nghĩa của việc đánh dấu nó là trích dẫn. */
.pullquote {
    margin: 0; padding: var(--sp-5) var(--sp-6);
    border-left: 3px solid var(--navy-600);
    background: var(--paper-alt); border-radius: 0 var(--r-md) var(--r-md) 0;
    max-width: 46rem;
}
.pullquote p {
    margin: 0; font-size: var(--fs-h4); line-height: 1.55; color: var(--navy-900);
}
.pullquote cite {
    display: block; margin-top: var(--sp-3);
    font-size: var(--fs-sm); font-style: normal; color: var(--ink-70);
}
.pullquote cite::before { content: "— "; }

/* ---------- 26. Featured case study ---------- */
.featured {
    display: grid; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--sh-2);
}
@media (min-width: 56rem) {
    .featured { grid-template-columns: 1.05fr .95fr; }
    /* Ảnh dự án phần lớn là ảnh dọc; khoá tỉ lệ để khối không bị cao lêu nghêu
       và cột chữ không thừa ra một mảng trống lớn. */
    .featured__media { aspect-ratio: 4 / 3; min-height: 0; }
}
.featured__media { position: relative; min-height: 16rem; }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__tag {
    position: absolute; top: var(--sp-4); left: var(--sp-4);
    background: rgba(7,26,46,.85); backdrop-filter: blur(6px); color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
    padding: .4rem .8rem; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.18);
}
.featured__body { padding: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); display: flex; flex-direction: column; gap: var(--sp-4); }
.featured__body h3 { margin: 0; }
.featured__quote {
    margin: 0; padding-left: var(--sp-4); border-left: 3px solid var(--green-500);
    font-size: var(--fs-sm); color: var(--ink-70); font-style: italic;
}
.featured__quote footer { margin-top: .4rem; font-style: normal; font-size: var(--fs-xs); color: var(--slate); }


/* ---------- 27. Exit intent ---------- */
/* Chỉ dựng trên desktop (chặn trong exit-intent.js). Trên mobile, overlay che nội dung
   bị Google coi là intrusive interstitial. */
.exitintent { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--sp-5); }
.exitintent__backdrop { position: absolute; inset: 0; background: rgba(7,26,46,.62); backdrop-filter: blur(3px); }
.exitintent__panel {
    position: relative; width: min(34rem, 100%);
    background: #fff; border-radius: var(--r-lg);
    border-top: 4px solid var(--green-700);
    box-shadow: 0 30px 70px rgba(7,26,46,.4);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    animation: exit-in .22s cubic-bezier(.2,.7,.3,1);
    max-height: 90vh; overflow-y: auto;
}
@keyframes exit-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .exitintent__panel { animation: none; } }
.exitintent__panel h2 { font-size: var(--fs-h3); }
.exitintent__close {
    position: absolute; top: .75rem; right: .75rem;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--mint-50); color: var(--navy-700);
    border: 0; cursor: pointer;
}
.exitintent__close:hover { background: var(--mint-200); }

/* ---------- Khối văn xuôi soạn bằng trình soạn thảo trực quan ----------
   HTML từ trình soạn thảo không mang class nào, nên khoảng cách phải đặt theo thẻ. Các con
   số dưới đây khớp đúng với khối dựng sẵn (h2 = mt-6, h3/ul = mt-4), để một bài trộn cả hai
   loại khối vẫn có nhịp giãn đều chứ không lộ chỗ nối. */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { margin: var(--sp-4) 0; max-width: 68ch; }
.prose ol { padding-left: 1.35rem; }
.prose ol li { margin-bottom: .5rem; }
.prose ol li::marker { color: var(--green-700); }

/* Danh sách chấm mượn nguyên hình thức của .checklist.
   Khối Bullet list dựng sẵn render kèm class="checklist" và ra dấu tick tròn màu bạc hà; HTML
   từ trình soạn thảo trực quan không mang class nào. Không có đoạn này thì gộp khối cũ sang
   rich text sẽ đổi hình thức trang — cùng một câu chữ nhưng bỗng thành chấm tròn mặc định. */
.prose ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.prose ul li {
    position: relative; padding-left: 1.8rem; margin: 0;
    font-size: var(--fs-sm); line-height: 1.6;
}
.prose ul 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='%23007040'%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;
}
.prose blockquote {
    margin: var(--sp-5) 0; padding-left: 1.1rem;
    border-left: 3px solid var(--green-700);
    font-size: 1.06em; color: var(--ink-70);
}

/* ==========================================================================
   v2 additions
   ========================================================================== */

/* Full-screen tool pages (quote): only the header sits above the tool, so app.css can size the
   panes as 100vh - var(--chrome-h). No action bar here, so no bottom padding for it. */
.app-shell { padding-bottom: 0 !important; }
/* site.css now loads after MudBlazor (see App.razor): keep the quote tool's grey page behind its white panes. */
body.app-shell { background: var(--paper-alt); }
/* The quote's mobile price bar (z-index 1100) owns the bottom of the screen: lift the cookie
   banner above it rather than hiding the price under the banner. */
@media (max-width: 65.99rem) {
    .app-shell .cookiebar { bottom: calc(96px + var(--sp-4)); z-index: 1200; }
}
@media (min-width: 66rem) {
    /* On the quote tool the right pane's foot holds the Continue button: sit bottom-left instead. */
    .app-shell .cookiebar { right: auto; left: var(--sp-5); }
}

/* While the cookie banner is open, site-widgets.js puts the strip it covers at the bottom of the viewport in
   --cookiebar-space (action bar / price bar included). Reserve it, so whatever sits at the bottom — the quote's
   Continue/Back on a screen that never scrolls, a short form's submit — can still be seen and reached (WCAG 2.4.11),
   and so focus scrolled into view lands above the banner. */
html.has-cookiebar { scroll-padding-bottom: var(--cookiebar-space, 0px); }
html.has-cookiebar body { padding-bottom: var(--cookiebar-space, 0px) !important; }
/* Without the banner, focused elements must not land under the mobile action bar either. */
@media (max-width: 65.99rem) {
    html:not(.has-cookiebar) { scroll-padding-bottom: 3.6rem; }
}

@media (max-width: 39.99rem) {
    /* Phone: keep the banner short so the page behind it (and the action bar below it) stays usable. */
    .cookiebar__inner { padding: var(--sp-4); gap: var(--sp-3); }
    .cookiebar__title { margin-bottom: .25rem; }
    .cookiebar__body p { font-size: var(--fs-xs); line-height: 1.5; }
    .cookiebar__actions .btn { min-height: 44px; padding-block: .7rem; }
}

/* Phase 2B. In-page anchors (#calculator) land below the sticky header, not under it. */
html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }
/* Secondary note in a navy page hero (v1 inline style="color:#9FB8CE"). */
.pagehero__note { color: #9FB8CE; margin-top: var(--sp-3); }
/* Text links inside a navy callout: the default dark green link is 2.5:1 on navy, unreadable
   (grants guide "MCS certified register"). Same light green as links in .section--navy. */
.callout--navy a:not(.btn) { color: var(--green-300); }
.callout--navy a:not(.btn):hover { color: #fff; }
/* Island pages load MudBlazor, whose `a:focus-visible` / `button:focus` remove the outline (0,1,1). Restore the
   site focus ring for SSR links and buttons; MudBlazor controls inside an island keep their own focus styling. */
a:not(:where(.island *)):focus-visible, button:not(:where(.island *)):focus-visible {
    outline: 2px solid var(--green-500); outline-offset: 2px;
}
/* MudBlazor (island pages) gives every button `line-height: inherit`; keep the browser default the SSR chrome was built on. */
button:not(:where(.island *)) { line-height: normal; display: inline-block; }

/* ===================================================================   Phase 3: quote picker (/quote) and the quote page shell (/quote/{key})
   ========================================================================== */
/* The choices are the point of /quote: a short hero so the first services show above the fold. */
.pagehero__inner.quote-picker__hero { padding-block: .75rem clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.quote-picker__postcode { display: flex; align-items: center; gap: .4rem; margin-top: var(--sp-4); }
.pagehero .quote-picker__postcode strong { color: #fff; }
.quote-picker__group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.quote-tile { display: flex; flex-direction: column; }
.quote-tile h3 { font-size: var(--fs-h4); margin: 0 0 .35rem; color: var(--navy-800); }
.quote-tile p { flex: 1 1 auto; }
.quote-tile__cta { margin-top: var(--sp-4); font-weight: 700; color: var(--green-700); }

/* SSR H1 + intro above the funnel island: compact, so the three panes keep most of the screen. */
.quote-intro { background: #fff; border-bottom: 1px solid var(--line); }
.quote-intro__inner { padding: 0 16px 12px; }
.quote-intro .crumbs { padding-block: 10px 4px; }
.quote-intro h1 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.75rem); margin: 0 0 .2rem; }
.quote-intro__text p { margin: 0; font-size: var(--fs-sm); color: var(--ink-70); max-width: 100ch; }
.quote-intro__text p + p { margin-top: .35rem; }

/* Desktop: header + intro + funnel fill exactly one screen (flex column), so the funnel's panes scroll on their own and
   the window never does (ux-quote-funnel). Heights follow the real header/intro instead of a fixed --chrome-h. */
@media (min-width: 960px) {
    body.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: clip; }
    body.app-shell > * { flex: none; }
    body.app-shell > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .app-shell main > .island { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .app-shell .quote-page { flex: 1 1 auto; min-height: 0; height: auto; display: flex; flex-direction: column; }
    .app-shell .quote-shell { flex: 1 1 auto; min-height: 0; height: auto; }
}

/* ---------- Phase 5: lỗi kiểm tra của form SSR (/contact) ---------- */
:where(input, select, textarea)[aria-invalid="true"]:not(:where(.island *)) { border-color: var(--err); }
.form-panel .alert ul { margin: .5rem 0 0; }