/* CSS riêng cho trang giới thiệu (landing.html). Tách khỏi styles.css
   để hai cổng chính (cư dân, ban quản lý) không phải tải phần CSS chỉ trang
   giới thiệu dùng tới.

   Lime là màu nhấn của thương hiệu, chỉ đặt trên nền xanh đậm (số thứ tự, chấm
   trạng thái, nút cổng) hoặc làm nền cho nút hành động chính. Trên nền sáng nó
   không đủ tương phản để làm chữ. */

/* Hero: nền là phối cảnh khu để xe, phủ gradient tối phía trái để chữ đọc được. */
.site-hero { position: relative; isolation: isolate; min-height: min(100svh, 900px); display: flex; flex-direction: column; overflow: clip; color: white; background: var(--brand-dark); }
.site-hero-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.site-hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 70% center; }
.site-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,34,29,.96) 0%, rgba(9,34,29,.88) 36%, rgba(9,34,29,.5) 66%, rgba(9,34,29,.3) 100%), linear-gradient(0deg, rgba(9,34,29,.9) 0%, rgba(9,34,29,0) 34%); }


.site-nav { width: min(100% - 48px, 1240px); height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); }
.site-nav .demo-brand { min-height: 44px; color: white; }
.site-nav .demo-brand small { color: var(--lime); }
.site-nav nav { display: flex; align-items: center; gap: 24px; }
.site-nav nav > a { min-height: 44px; display: inline-flex; align-items: center; color: #c0d1cc; font-size: 12px; font-weight: 800; text-decoration: none; }
.site-nav nav > a:hover { color: white; }
/* Hai cổng đăng nhập là hai lối vào ngang hàng nhau nên dùng chung một kiểu
   nút viền lime, đứng liền thành một cặp tách khỏi mấy link neo trong trang.
   Lime đặc chỉ để dành cho CTA chính "Đặt lịch khảo sát" ở hero. */
.site-portals { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; }
.site-nav nav .btn-portal { min-height: 44px; padding: 0 18px; border-radius: 12px; color: var(--lime); font-size: 12px; font-weight: 800; background: rgba(217,243,106,.1); box-shadow: inset 0 0 0 1.5px rgba(217,243,106,.42); }
.site-nav nav .btn-portal { white-space: nowrap; }
.site-portal-short { display: none; }
.site-nav nav .btn-portal:hover { color: var(--brand-dark); background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); }

.site-hero-body { flex: 1; width: min(100% - 48px, 1240px); margin: 0 auto; padding: 56px 0 96px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 96px); }
.site-copy .demo-live-badge { margin: 0; color: var(--lime); border-color: rgba(217,243,106,.25); background: rgba(255,255,255,.06); }
.site-copy h1 { max-width: 20ch; margin: 24px 0; font: 500 clamp(40px, 4.6vw, 64px)/1.06 Lora, Georgia, serif; letter-spacing: -.03em; text-wrap: balance; }
.site-copy h1 + p { max-width: 54ch; margin: 0; color: #c6d6d1; font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }
.site-admin-link { min-height: 44px; display: inline-flex; align-items: center; color: white; font-size: 13px; font-weight: 850; text-decoration: underline; text-underline-offset: 5px; }
.site-hero-facts { max-width: 640px; margin: 36px 0 0; padding: 22px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 30px; border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 961px) {
  .site-hero-facts { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
}
.site-hero-facts li { position: relative; padding-left: 20px; color: #dfe9e5; font-size: 13px; font-weight: 750; line-height: 1.5; }
.site-hero-facts li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(217,243,106,.14); }

/* Ảnh chụp thật màn hình cư dân, lồng trong khung điện thoại. Cắt bớt phần dưới
   để vừa hero; phần quan trọng (số kWh, tiền, nút dừng) nằm ở nửa trên. */
.site-phone { margin: 0; display: grid; justify-items: center; gap: 14px; }
.site-phone-frame { width: clamp(240px, 22vw, 296px); padding: 9px; display: block; border-radius: 44px; background: #071a16; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.45); }
.site-phone-frame img { width: 100%; height: auto; aspect-ratio: 390 / 700; display: block; object-fit: cover; object-position: top; border-radius: 35px; }
.site-phone figcaption { color: #a9bfb8; font-size: 11.5px; font-weight: 650; }

/* Dải nền xen kẽ trắng / kem / tối. */
.site-band { padding: clamp(64px, 8vw, 104px) 0; color: var(--brand-dark); background: var(--paper); }
.site-band-surface { background: var(--surface); }
.site-band-dark { color: white; background: var(--brand-dark); }
.site-inner { width: min(100% - 48px, 1240px); margin: auto; }
.site-band h2 { max-width: 30ch; margin: 0 0 44px; font: 500 clamp(28px, 2.7vw, 38px)/1.22 Lora, Georgia, serif; letter-spacing: -.022em; text-wrap: balance; }
.site-band h2:has(+ .site-lead) { margin-bottom: 16px; }
.site-lead { max-width: 60ch; margin: 0 0 52px; color: var(--muted); font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.site-band-dark .site-lead { color: #b6cac4; }
.site-band-dark .site-lead a { color: var(--lime); font-weight: 800; text-underline-offset: 4px; }

.site-grid { display: grid; gap: 40px 46px; }
.site-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 36px; }
.site-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; }
.site-grid-5 .site-point h3 { text-wrap: balance; }
.site-venues-note { margin: 44px 0 0; }
.site-point h3 { margin: 0 0 12px; font-size: 17px; font-weight: 850; letter-spacing: -.012em; }
.site-point p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.72; text-wrap: pretty; }
.site-problems svg { width: 44px; height: 44px; margin-bottom: 20px; padding: 10px; display: block; border-radius: 14px; fill: none; stroke: var(--danger); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--danger-soft); }
.site-band-dark .site-grid-4 .site-point { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.site-band-dark .site-point p { color: #b6cac4; }

/* Khối giải pháp: media lớn bo góc, thẻ chữ đè lên mép media. */
.site-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.site-feature + .site-feature { margin-top: clamp(56px, 7vw, 96px); }
.site-feature-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 28px; background: #1a453d; }
.site-feature-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.site-feature-media .site-product-photo, .site-feature-media .site-qr-photo { object-position: 75% center; }
.site-feature-media .site-car-photo { object-position: center; }
.site-chip { position: absolute; z-index: 1; left: 18px; bottom: 18px; max-width: calc(100% - 36px); display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; color: var(--brand-dark); background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 800; line-height: 1.35; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.site-chip::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); }
.site-feature-card { position: relative; z-index: 1; margin-left: -88px; padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 30px 70px rgba(18,60,53,.13); }
.site-feature-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.site-feature-flip .site-feature-media { order: 2; }
.site-feature-flip .site-feature-card { margin: 0 -88px 0 0; }
/* Khối lật có thẻ chữ đè mép trái của media, nên chip đổi sang bên phải. */
.site-feature-flip .site-chip { left: auto; right: 18px; }
.site-feature-card h3 { margin: 0 0 16px; font: 500 clamp(23px, 2.1vw, 29px)/1.22 Lora, Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.site-feature-card p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.72; text-wrap: pretty; }
.site-feature-card p:last-child { margin-bottom: 0; }
.site-checks { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-checks li { position: relative; padding-left: 30px; font-size: 14.5px; font-weight: 750; line-height: 1.5; }
.site-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--brand); font-size: 11px; font-weight: 900; }
.site-more { min-height: 44px; margin-top: 12px; display: inline-flex; align-items: center; color: var(--brand); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.site-mini-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: mini; }
.site-mini-steps li { position: relative; padding-left: 44px; counter-increment: mini; }
.site-mini-steps li::before { content: counter(mini); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: var(--brand-dark); font-size: 13px; font-weight: 900; }
.site-mini-steps strong { display: block; margin-bottom: 4px; font-size: 15px; letter-spacing: -.01em; }
.site-mini-steps span { display: block; color: var(--muted); font-size: 14px; line-height: 1.65; text-wrap: pretty; }

/* Cổng ban quản lý: ảnh chụp thật trong khung trình duyệt. */
.site-split-head { margin-bottom: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 20px 64px; }
.site-split-head h2, .site-split-head .site-lead { margin: 0; }
.site-browser { margin: 0 0 60px; overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 50px 100px rgba(0,0,0,.35); }
.site-browser-bar { height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 7px; background: #e3e9e3; }
.site-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c5cfc7; }
.site-browser-bar span { margin-left: 12px; padding: 4px 14px; border-radius: 8px; color: var(--muted); background: white; font-size: 12px; font-weight: 650; }
.site-browser img { width: 100%; height: auto; display: block; }

/* Kiểm chứng đóng cắt: bốn bước là một trình tự thật nên mới đánh số. */
.site-verify { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: clamp(40px, 6vw, 88px); }
.site-verify-steps { margin: 0; padding: 0; list-style: none; counter-reset: verify; }
.site-verify-steps li { position: relative; padding: 0 0 28px 54px; counter-increment: verify; }
.site-verify-steps li::before { content: counter(verify); position: absolute; left: 0; top: -4px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: var(--brand-dark); font-size: 14px; font-weight: 900; }
.site-verify-steps li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 2px; background: var(--line); }
.site-verify-steps strong { display: block; margin-bottom: 6px; font-size: 16.5px; letter-spacing: -.012em; }
.site-verify-steps span { display: block; max-width: 56ch; color: var(--muted); font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }
.site-log { position: sticky; top: 24px; margin: 0; padding: 28px; border-radius: 24px; color: white; background: var(--brand-dark); box-shadow: 0 40px 80px rgba(18,60,53,.22); }
.site-log figcaption { margin-bottom: 10px; color: #a3b9b3; font-size: 12.5px; font-weight: 700; }
.site-log ol { margin: 0; padding: 0; list-style: none; }
.site-log li { padding: 15px 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 3px 14px; border-top: 1px solid rgba(255,255,255,.1); }
.site-log time { grid-row: span 2; padding-top: 1px; color: #a3b9b3; font-size: 13px; font-variant-numeric: tabular-nums; }
.site-log span { font-size: 14px; font-weight: 750; line-height: 1.45; }
.site-log b { color: var(--lime); font-size: 12.5px; font-weight: 700; }

.site-contrast h2 { max-width: 22ch; margin-bottom: 30px; font-size: clamp(30px, 3vw, 42px); }
.site-contrast-lead { max-width: 30ch; margin: 0 0 34px; color: var(--lime); font: 500 clamp(21px, 2vw, 27px)/1.34 Lora, Georgia, serif; letter-spacing: -.018em; text-wrap: balance; }
.site-contrast-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; }
.site-contrast-body p { margin: 0; color: #b6cac4; font-size: 15px; line-height: 1.78; text-wrap: pretty; }
.site-contrast-body strong { color: white; }

/* Sơ đồ hộp điện. Hình svg là aria-hidden, nên danh sách bên cạnh mới là nội
   dung trình đọc màn hình đọc được — số trong hình và số trong danh sách phải
   luôn khớp nhau, sửa một bên thì sửa cả hai. */
#hop-dien h2 { margin-bottom: 14px; }
.site-anatomy-lead { max-width: 58ch; margin: 0 0 48px; color: var(--muted); font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.site-anatomy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(34px, 6vw, 80px); }
.site-anatomy-photo { margin: 0; }
.site-anatomy-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; object-fit: cover; object-position: 78% center; border-radius: 24px; }
.site-anatomy-photo figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.site-anatomy ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 27px; counter-reset: part; }
.site-anatomy li { position: relative; padding-left: 48px; counter-increment: part; }
.site-anatomy li::before { content: counter(part); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-dark); color: var(--lime); font-size: 13px; font-weight: 900; }
.site-anatomy strong { display: block; margin-bottom: 7px; font-size: 16px; letter-spacing: -.012em; }
.site-anatomy span { display: block; max-width: 52ch; color: var(--muted); font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }

/* Triển khai: dòng thời gian bốn chặng. */
.site-timeline { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: stage; }
.site-timeline li { position: relative; padding-top: 60px; counter-increment: stage; }
.site-timeline li::before { content: counter(stage); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: var(--brand-dark); font-size: 15px; font-weight: 900; }
.site-timeline li:not(:last-child)::after { content: ''; position: absolute; left: 52px; right: -20px; top: 19px; height: 2px; background: var(--line); }
.site-timeline strong { display: block; margin-bottom: 9px; font-size: 17px; letter-spacing: -.012em; }
.site-timeline span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }

/* Hỏi đáp dạng đóng/mở. Nội dung vẫn nằm sẵn trong HTML để máy tìm kiếm đọc được. */
.site-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 28px 72px; }
.site-faq-layout > h2 { position: sticky; top: 24px; margin: 0; }
.site-faq details { border-top: 1px solid var(--line); }
.site-faq details:last-child { border-bottom: 1px solid var(--line); }
.site-faq summary { min-height: 64px; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: ''; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(var(--brand-dark), var(--brand-dark)) center / 12px 2px no-repeat, linear-gradient(var(--brand-dark), var(--brand-dark)) center / 2px 12px no-repeat, var(--lime-soft); transition: transform .2s; }
.site-faq details[open] summary::after { transform: rotate(45deg); }
.site-faq summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.site-faq h3 { max-width: 46ch; margin: 0; font: 500 19px/1.38 Lora, Georgia, serif; letter-spacing: -.018em; text-wrap: pretty; }
.site-faq details p { max-width: 62ch; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.75; text-wrap: pretty; }

.site-cta .site-inner { max-width: 660px; text-align: center; }
.site-cta h2 { max-width: none; margin: 0 auto 20px; }
.site-cta p { margin: 0 auto 34px; color: #b6cac4; font-size: 15px; line-height: 1.75; text-wrap: pretty; }
.site-cta .btn { min-height: 56px; padding: 0 30px; font-size: 15px; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.site-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* .site-cta .btn đặt lại box-shadow nên nút viền phải ghép lại viền inset của chính nó. */
.site-cta .btn-ghost-light { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), 0 14px 34px rgba(0,0,0,.25); }

.demo-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.demo-brand .brand-mark { width: 42px; height: 42px; }
.demo-brand strong, .demo-brand small { display: block; }
.demo-brand strong { font-size: 18px; letter-spacing: -.04em; }
.demo-brand small { margin-top: 3px; color: var(--brand); font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.demo-live-badge { width: fit-content; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(30,115,95,.18); border-radius: 999px; color: var(--brand); background: rgba(255,255,255,.55); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.demo-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(145,181,41,.13); }
.demo-hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 32px; }
.demo-hero-actions .btn { min-height: 54px; padding: 0 23px; box-shadow: 0 12px 30px rgba(161,190,54,.23); }

/* Footer nhiều cột. Khối pháp nhân là thông tin doanh nghiệp bắt buộc công bố:
   chữ đọc được, không uppercase, không bị ẩn ở mobile. */
.demo-footer { padding: 64px max(24px, calc((100vw - 1240px) / 2)) 48px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 40px; color: white; background: #0d302a; }
.demo-footer .brand-mark { width: 38px; height: 38px; }
.demo-footer .demo-brand small { color: #8ca49d; }
.demo-footer h2 { margin: 0 0 12px; color: white; font-size: 13.5px; font-weight: 800; letter-spacing: -.005em; }
.site-footer-brand p { max-width: 34ch; margin: 18px 0 0; color: #8ca49d; font-size: 13px; line-height: 1.65; }
.site-footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer-links a, .site-legal a { min-height: 44px; display: inline-flex; align-items: center; color: #b6cac4; font-size: 13.5px; text-decoration: none; }
.site-footer-links a:hover, .site-legal a:hover { color: var(--lime); }
.site-legal p { margin: 0 0 6px; color: #8ca49d; font-size: 13px; line-height: 1.6; }
.site-legal p:has(> a) { margin: 0; }
.site-legal .site-legal-name { color: #d5e4de; font-weight: 800; }

/* Focus bàn phím phải thấy được trên cả nền video, nền xanh đậm và nền sáng:
   viền trắng cho nền tối, vòng xanh bên ngoài cho nền sáng. */
.site-hero a:focus-visible, .site-band a:focus-visible, .demo-footer a:focus-visible, .site-contact :is(a, button):focus-visible { outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 0 6px var(--brand); }

/* Widget liên hệ nổi của trang giới thiệu (landing.html).
   Container không nhận chuột để phần nền trống không chặn nội dung phía dưới. */
.site-contact { position: fixed; z-index: 250; right: max(24px, var(--edge-right)); bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.site-contact > * { pointer-events: auto; }
.site-contact-fab { min-height: 56px; padding: 0 22px 0 18px; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 30px; color: var(--brand-dark); background: var(--lime); font-size: 14px; font-weight: 850; box-shadow: 0 16px 38px rgba(18,60,53,.3); transition: transform .15s; }
.site-contact-fab:hover { transform: translateY(-2px); }
.site-contact-fab svg { width: 22px; height: 22px; flex: 0 0 auto; }
.site-contact-fab .site-contact-close, .site-contact.is-open .site-contact-fab .site-contact-open { display: none; }
.site-contact.is-open .site-contact-fab .site-contact-close { display: block; }
.site-contact-panel { width: min(340px, calc(100vw - 32px)); overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: 0 28px 70px rgba(18,60,53,.32); animation: sheet-up .2s ease; }
.site-contact-head { padding: 19px 22px; display: flex; align-items: center; gap: 12px; color: white; background: var(--brand-dark); }
.site-contact-head .brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.site-contact-head strong { display: block; font-size: 17px; letter-spacing: -.025em; }
.site-contact-head small { display: block; margin-top: 3px; color: #a9c0b9; font-size: 11px; }
.site-contact-info { margin: 0; padding: 17px 22px; display: grid; gap: 11px; border-bottom: 1px solid var(--line); }
.site-contact-info > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.site-contact-info dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.site-contact-info dd { margin: 0; font-size: 13px; line-height: 1.5; }
.site-contact-actions { padding: 16px 22px 20px; display: grid; gap: 9px; }
.site-contact-actions .btn { justify-content: flex-start; gap: 12px; padding: 0 16px; }
.site-contact-actions .btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.site-contact-actions .btn span { display: grid; gap: 2px; text-align: left; }
.site-contact-actions .btn small { font-size: 10px; font-weight: 700; opacity: .7; }

@media (max-width: 960px) {
  .site-hero-body { padding: 40px 0 72px; grid-template-columns: 1fr; }
  .site-copy h1 { max-width: 18ch; }
  .site-phone { justify-self: center; }
  .site-hero-media::after { background: linear-gradient(180deg, rgba(9,34,29,.9) 0%, rgba(9,34,29,.82) 55%, rgba(9,34,29,.94) 100%); }
  .site-grid-3, .site-grid-4, .site-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-feature, .site-feature-flip { grid-template-columns: 1fr; }
  .site-feature-flip .site-feature-media { order: 0; }
  .site-feature-card, .site-feature-flip .site-feature-card { margin: -56px 20px 0; }
  .site-split-head, .site-verify, .site-faq-layout { grid-template-columns: 1fr; }
  .site-log, .site-faq-layout > h2 { position: static; }
  .site-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .site-timeline li::after { display: none; }
  .site-contrast-body { grid-template-columns: 1fr; }
  .site-anatomy { grid-template-columns: 1fr; gap: 38px; }
  .site-anatomy-lead { margin-bottom: 34px; }
  .demo-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Điện thoại: gọn hơn hẳn desktop. Nhóm thẻ song song (.site-swipe) thành một
   hàng vuốt ngang, thẻ sau ló ra mép phải để người xem biết còn nữa; chi tiết
   phụ đã có ở chỗ khác thì ẩn. Mọi chữ vẫn nằm trong HTML. */
@media (max-width: 560px) {
  .site-nav { width: calc(100% - 32px); height: auto; min-height: 70px; padding: 14px 0; gap: 10px; }
  .site-nav nav { flex-wrap: wrap; gap: 14px; }
  .site-nav nav > a { display: none; }
  .site-portals { gap: 8px; margin-left: 0; }
  /* Nhãn ngắn để logo và hai cổng vừa một hàng. Không ẩn cổng nào: cư dân mở
     trang trên điện thoại để đăng nhập chính là trường hợp thường gặp nhất. */
  .site-portal-long { display: none; }
  .site-portal-short { display: inline; }
  .site-nav nav .btn-portal { min-height: 44px; padding: 0 12px; font-size: 11px; }

  .site-hero-body { width: calc(100% - 32px); padding: 28px 0 48px; gap: 32px; }
  .site-copy h1 { max-width: none; margin: 18px 0; font-size: 34px; }
  .site-copy h1 + p { font-size: 15px; line-height: 1.7; }
  .demo-hero-actions { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 4px; }
  .demo-hero-actions .btn { width: 100%; }
  .site-admin-link { align-self: center; }
  .site-hero-facts { display: none; }
  .site-phone-frame { width: 200px; padding: 7px; border-radius: 34px; }
  .site-phone-frame img { aspect-ratio: 390 / 560; border-radius: 28px; }

  .site-band { padding: 48px 0; }
  .site-inner { width: calc(100% - 32px); }
  .site-band h2 { margin-bottom: 24px; font-size: 26px; }
  .site-band h2:has(+ .site-lead) { margin-bottom: 12px; }
  .site-lead { margin-bottom: 28px; font-size: 15px; }
  .site-venues-note { margin: 28px 0 0; }
  .site-grid { gap: 24px; }
  .site-grid-3, .site-grid-4, .site-grid-5 { grid-template-columns: 1fr; }

  .site-feature + .site-feature { margin-top: 40px; }
  .site-feature-media { aspect-ratio: 16 / 10; border-radius: 20px; }
  .site-feature-card, .site-feature-flip .site-feature-card { margin: 12px 0 0; padding: 22px 20px; border-radius: 18px; }
  .site-feature-card h3 { margin-bottom: 12px; font-size: 21px; }
  .site-chip, .site-feature-flip .site-chip { left: 12px; right: auto; top: 12px; bottom: auto; padding: 7px 12px; font-size: 11.5px; }
  .site-mini-steps { gap: 12px; }
  .site-mini-steps span, #o-to .site-feature-card p + p, #moi-cho-do .site-feature-card > p { display: none; }
  .site-checks { margin-top: 0; }

  .site-split-head { margin-bottom: 24px; }
  .site-browser { margin-bottom: 28px; border-radius: 12px; }
  .site-browser-bar { height: 30px; }
  .site-browser-bar span { font-size: 11px; }
  .site-log { display: none; }
  .site-contrast h2 { margin-bottom: 18px; }
  .site-contrast-lead { margin-bottom: 20px; font-size: 19px; }
  .site-contrast-body p + p { display: none; }
  .site-anatomy { gap: 24px; }
  .site-anatomy-photo { width: 100%; max-width: 420px; margin: auto; }
  .site-anatomy-lead { margin-bottom: 24px; font-size: 15px; }
  .site-faq summary { min-height: 56px; padding: 14px 0; }
  .site-faq h3 { font-size: 17px; }

  .site-swipe { margin: 0 -16px; padding: 2px 16px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 300px); grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .site-swipe::-webkit-scrollbar { display: none; }
  .site-swipe > li, .site-swipe > article { scroll-snap-align: start; padding: 20px; border-radius: 18px; background: var(--paper); }
  .site-band-surface .site-swipe > * { background: var(--paper); }
  .site-band:not(.site-band-surface):not(.site-band-dark) .site-swipe > * { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .site-band-dark .site-swipe > * { background: rgba(255,255,255,.07); }
  .site-band-dark .site-grid-4.site-swipe .site-point { padding-top: 20px; border-top: 0; }
  .site-problems svg { margin-bottom: 14px; }
  .site-point h3 { font-size: 16px; }
  .site-point p { font-size: 14px; line-height: 1.65; }
  /* Số thứ tự đứng trên đầu thẻ thay vì treo bên trái như bản dọc. */
  .site-verify-steps.site-swipe li, .site-timeline.site-swipe li { padding: 20px; }
  .site-verify-steps li::before, .site-timeline li::before { position: static; margin-bottom: 12px; }
  .site-verify-steps li::after, .site-timeline li::after { display: none; }
  .site-verify-steps span, .site-timeline span { font-size: 14px; }
  .site-anatomy ol.site-swipe li { padding: 20px 20px 20px 62px; }
  .site-anatomy li::before { left: 20px; top: 17px; }
  .site-anatomy span { font-size: 14px; }

  .demo-brand .brand-mark { width: 36px; height: 36px; }
  /* Chừa chỗ cho nút liên hệ nổi, nếu không nó đè lên hàng hotline/email cuối footer. */
  .demo-footer { padding: 40px 16px 96px; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer-brand, .site-legal { grid-column: 1 / -1; }
  .site-contact { left: max(16px, var(--edge)); right: max(16px, var(--edge-right)); bottom: 16px; }
  .site-contact-panel { width: 100%; }
  .site-contact-info > div { grid-template-columns: 76px minmax(0, 1fr); }
}

@media (max-width: 400px) {
  .site-nav .demo-brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-contact-panel { animation: none; }
  .btn, .site-contact-fab, .site-faq summary::after { transition: none; }
  .btn:hover, .site-contact-fab:hover { transform: none; }
}