/* ===================== Dựng nhà 3D — giao diện mở rộng (giấy phép MIT) ===================== */
:root { --amber: #e4ad6f; --violet: #6a3fb5; --ease: cubic-bezier(.2, .8, .2, 1); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex: 0 0 auto; }
.draw-tool .ic { width: 17px; height: 17px; margin-right: 3px; }
.nav-link .ic { width: 21px; height: 21px; }
.icon-btn .ic { width: 22px; height: 22px; }
.canvas-controls button { display: grid; place-items: center; }
.small-plus { display: grid; place-items: center; padding: 0; }
.small-plus .ic { width: 16px; height: 16px; }
.side-action { display: flex; align-items: center; justify-content: center; gap: 6px; }
.top-export { display: inline-flex; align-items: center; gap: 6px; }
.tool-mini, .text-button, .light-button, .outline-button, .primary-button, .danger-link { display: inline-flex; align-items: center; gap: 6px; }
.tool-sep { width: 1px; height: 24px; background: #dce9e2; margin: 0 4px; flex: 0 0 auto; }
.draw-tool.icon-only { padding: 8px 9px; }
.draw-tool { transition: background .18s var(--ease), color .18s; }
.draw-tool:not(.active):not(:disabled):hover { background: #eef7f2; }
.draw-tool:active:not(:disabled), .primary-button:active, .outline-button:active, .side-action:active { transform: scale(.97); }

/* Logo động: nét nhà tự vẽ, khối 3D bật lên, tia quét lướt qua */
.brand-mark { width: 46px; height: 46px; padding: 3px; overflow: hidden; flex: 0 0 auto; }
.logo { width: 100%; height: 100%; overflow: visible; }
.lg-bg { fill: #d5f1df; }
.lg-house { fill: none; stroke: #1d6059; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 110; stroke-dashoffset: 0; animation: lgDraw 1.2s .15s var(--ease) both; }
.lg-cube { transform-box: fill-box; transform-origin: 50% 100%; animation: lgPop .55s 1s var(--ease) both; }
.lg-cube-top { fill: #6fcfb1; }
.lg-cube-l { fill: #2c8b79; }
.lg-cube-r { fill: #43b29c; }
.lg-sun { fill: var(--amber); transform-box: fill-box; transform-origin: center; animation: lgPop .45s 1.25s var(--ease) both; }
.lg-scan { fill: #2fc39b; opacity: 0; animation: lgScan 2.2s 1.6s ease-in-out 2; }
.brand:hover .lg-scan { animation: lgScan2 1.6s ease-in-out 1; }
@keyframes lgDraw { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
@keyframes lgPop { from { opacity: 0; transform: translateY(5px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lgScan { 0% { opacity: 0; transform: translateY(0); } 15%, 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes lgScan2 { 0% { opacity: 0; transform: translateY(0); } 15%, 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(16px); } }

/* Màn hình chào: tự ẩn bằng CSS kể cả khi JavaScript lỗi */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1d4649, #0c2226); color: #e9f5f0; animation: splashOut .45s 1.9s forwards; }
.splash.hide { animation: splashOut .4s forwards; }
.splash-inner { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px; }
.logo-xl { width: 112px; height: 112px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }
.splash strong { font-size: 30px; letter-spacing: .3px; animation: fadeUp .6s .5s var(--ease) both; }
.splash span { font: 12px Arial, sans-serif; letter-spacing: 1.6px; color: #9fd0bd; text-transform: uppercase; animation: fadeUp .6s .75s var(--ease) both; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Chuyển cảnh và phản hồi */
.view.active { animation: viewIn .32s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stat { animation: fadeUp .5s var(--ease) both; }
.stat:nth-child(2) { animation-delay: .05s; }
.stat:nth-child(3) { animation-delay: .1s; }
.stat:nth-child(4) { animation-delay: .15s; }
.camera-viewport.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: flash .45s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.survey-state.live, #aiState.live { color: #1f8f74; }
.survey-state.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fc39b; margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Tắt hiệu ứng: người dùng tắt, hệ thống giảm chuyển động hoặc đang tiết kiệm năng lượng */
body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation: none !important; transition: none !important; }
body.no-motion .splash { display: none; }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

/* Cài đặt trong thanh bên */
.side-toggle { display: flex; align-items: center; gap: 8px; color: #b2c9c0; font-size: 13px; margin-top: 12px; cursor: pointer; }
.side-toggle input, .toggle-label input { accent-color: #2c8b79; width: 16px; height: 16px; }
.sidebar .field-label { display: flex; gap: 6px; align-items: center; }
.field-label .ic { width: 15px; height: 15px; }
#powerStatus:empty { display: none; }

/* Thanh tỷ lệ, chú giải, lớp */
.scale-box { display: flex; align-items: flex-end; gap: 6px; background: #ffffffd9; padding: 3px 7px; border-radius: 5px; }
.scale-box i { display: inline-block; height: 7px; border: 2px solid #4b6f64; border-top: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 19px 12px; font: 11px Arial, sans-serif; color: #7a8f88; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; margin-right: 5px; vertical-align: middle; }
.legend .lg-ok { border-color: #22735f; }
.legend .lg-est { border-color: #b06442; border-top-style: dashed; }
.legend .lg-track { border-color: #1f8f74; border-top-style: dotted; }
.layer-toggles { display: flex; flex-wrap: wrap; gap: 12px; }
.toggle-label { cursor: pointer; }
.toggle-label.block { display: flex; margin-top: 12px; font-size: 14px; }
.wall-done { position: absolute; top: 54px; left: 16px; background: #246d62; color: #fff; border: 0; border-radius: 9px; padding: 9px 13px; font-weight: 700; box-shadow: 0 8px 20px #0c493a33; display: inline-flex; gap: 6px; align-items: center; animation: fadeUp .25s var(--ease) both; }

/* Bảng thuộc tính */
.insp-illustration { display: block; width: 100%; height: auto; border: 0; background: none; margin-bottom: 8px; }
.insp-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; }
.insp-actions .danger-link { margin-top: 0; }
.badge { display: inline-block; font: 700 11px Arial, sans-serif; border-radius: 20px; padding: 5px 9px; margin: 2px 0 4px; }
.badge.ok { background: #dff4ea; color: #1e6c58; }
.badge.est { background: #f7ecd9; color: #8a5d26; }
.advice { border-radius: 9px; padding: 10px 12px; font-size: 13px; line-height: 1.55; margin: 10px 0; }
.advice.ok { background: #e8f6ee; color: #23614f; }
.advice.warn { background: #fbf0dd; color: #85561c; }
.chip-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip { border: 1px solid #d2e5da; background: #f5faf7; color: #3f6c60; border-radius: 20px; padding: 5px 10px; font-size: 12px; }
.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row .form-control { flex: 1; }
.insp-thumb img { width: 100%; border-radius: 9px; aspect-ratio: 4/3; object-fit: cover; background: #eef3f0; }
input[type=range] { width: 100%; accent-color: #2c8b79; }

/* Máy ảnh khảo sát, quét AI (màn hình dùng lâu: bản đồ nền tối) */
.cam-col { display: grid; gap: 16px; min-width: 0; }
.camera-placeholder img { width: 180px; height: auto; }
.camera-pos { position: absolute; left: 18px; bottom: 16px; background: #0f272cd0; color: #d5f2e5; font: 12px Arial, sans-serif; padding: 6px 10px; border-radius: 7px; }
.survey-state { font: 700 11px Arial, sans-serif; letter-spacing: .5px; color: #7f948d; white-space: nowrap; }
.survey-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
.survey-map-wrap { position: relative; border-radius: 11px; overflow: hidden; min-height: 260px; background: #0f272c; touch-action: manipulation; }
.survey-map-wrap canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; cursor: crosshair; }
.survey-map-hint { position: absolute; left: 10px; bottom: 8px; font: 11px Arial, sans-serif; color: #8fb8aa; pointer-events: none; }
.survey-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.survey-stats div { background: #f4f8f5; border-radius: 9px; padding: 9px 11px; }
.survey-stats span { display: block; font: 700 10px Arial, sans-serif; letter-spacing: 1px; color: #8aa098; text-transform: uppercase; }
.survey-stats b { font-size: 19px; color: #1e4a42; }
.survey-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.survey-actions button { font-size: 13px; padding: 9px 12px; }
.danger-text { color: #b94845 !important; }
.cal-box { margin-top: 10px; background: #f4f8f5; border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.cal-box p { margin: 0 0 6px; }
.beta { font: 700 10px Arial, sans-serif; letter-spacing: 1px; background: #efe6fb; color: var(--violet); border-radius: 20px; padding: 3px 8px; vertical-align: 3px; margin-left: 4px; text-transform: uppercase; }
.ai-load { display: flex; gap: 18px; align-items: center; padding: 18px; }
.ai-load img { width: 170px; height: auto; flex: 0 0 auto; }
.progress { height: 6px; background: #e3ede8; border-radius: 6px; overflow: hidden; margin-top: 12px; max-width: 320px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #2c8b79, #6fcfb1); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.progress-pct { font: 11px Arial, sans-serif; color: #6f877f; }
.ai-work { padding: 14px 16px 16px; }
.ai-top { display: flex; gap: 12px; align-items: center; }
.ai-dial { width: 92px; height: 92px; flex: 0 0 auto; }
.ai-depth { width: 69px; height: 92px; border-radius: 8px; background: #0f272c; flex: 0 0 auto; }
.ai-stats { font-size: 14px; min-width: 0; }
.ai-stats .help-text { margin: 4px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.ai-manual { margin-top: 10px; font-size: 14px; color: #4f6d66; }
.ai-manual summary { cursor: pointer; font-weight: 700; }

/* Nhập mô hình */
.drop-zone img { width: 150px; height: auto; }
.import-options { padding: 0 20px; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.import-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }

/* Ảnh khảo sát */
.photo-card img { cursor: zoom-in; display: block; }
.empty-state img { width: 220px; height: auto; margin: 0 auto 10px; }
.photo-modal { width: min(760px, 100%); padding: 0; overflow: hidden; }
.photo-modal img { width: 100%; max-height: 62vh; object-fit: contain; background: #0f272c; display: block; }
.photo-modal-body { padding: 16px 20px 18px; }
.photo-modal-body h3 { margin: 0 0 4px; }
.modal-actions { flex-wrap: wrap; }

/* Hướng dẫn và điều khoản */
body[data-page=help] .stats, body[data-page=terms] .stats { display: none; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.doc-card { padding: 22px 24px; line-height: 1.6; }
.doc-card.quick { grid-column: 1 / -1; }
.doc-card h3 { margin-top: 0; }
.doc-card li { margin: 6px 0; }
.quick-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quick-step img { width: 100%; height: auto; border-radius: 12px; background: #f4f8f5; }
.quick-step b { display: block; font-size: 18px; margin: 10px 0 4px; }
.quick-step p { margin: 0; color: #5f746d; font-size: 15px; }
.doc-illus { float: right; width: 190px; height: auto; margin: 0 0 8px 12px; }
.kbd-table, .ref-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kbd-table td { padding: 6px 4px; border-bottom: 1px solid #eef2ef; }
.ref-table th, .ref-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eef2ef; vertical-align: top; }
.ref-table th { font: 700 11px Arial, sans-serif; letter-spacing: 1px; color: #8aa098; text-transform: uppercase; }
kbd { font: 12px Arial, sans-serif; background: #f2f6f4; border: 1px solid #d5e2db; border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.check-list { list-style: none; padding: 0; }
.check-list li::before { content: "☐ "; color: #2c8b79; }
.legal { max-width: 920px; margin: 0 auto; }
.legal-head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.legal-head img { width: 130px; height: auto; flex: 0 0 auto; }
.legal-head h2 { margin: 0 0 4px; font-size: 26px; }
.legal h3 { font-size: 18px; margin: 22px 0 6px; }
.legal-sign { margin-top: 26px; font-weight: 700; color: #2c5a50; }
.site-footer a { color: #4d8c74; }

/* Tiết kiệm năng lượng */
body.power-save .three-wrap, body.power-save .imported-wrap { background: #f3f7f5; }

/* Màn hình hẹp: khung vẽ lên trên, thống kê gọn */
@media (max-width: 1090px) {
  .survey-body { grid-template-columns: 1fr; }
  .survey-map-wrap { min-height: 240px; }
  .doc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .hero-row p, .hero-chip { display: none; }
  .hero-row { margin-bottom: 12px; }
  h1 { font-size: 24px; margin: 0; }
  .eyebrow { margin-bottom: 4px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .stat { min-height: 0; padding: 8px 9px; border-radius: 10px; }
  .stat > span { font-size: 8px; letter-spacing: .6px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat strong { font-size: 19px; }
  .stat strong em { font-size: 11px; }
  .stat small { display: none; }
  .tool-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tool-strip::-webkit-scrollbar { display: none; }
  .draw-tool { flex: 0 0 auto; }
  .legend { padding: 0 12px 10px; gap: 10px; }
  .layer-toggles { gap: 10px; }
  .quick-steps { grid-template-columns: 1fr; }
  .doc-illus { float: none; display: block; margin: 0 auto 8px; }
  .ai-load { flex-direction: column; text-align: center; }
  .ai-load .progress { margin-left: auto; margin-right: auto; }
  .legal-head { flex-direction: column; align-items: flex-start; }
  .camera-viewport { aspect-ratio: 3/4; }
  .wall-done { top: auto; bottom: 64px; left: 50%; transform: translateX(-50%); animation: none; }
  .doc-card { padding: 18px 16px; }
  .import-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .survey-actions button { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .ai-depth { display: none; }
}

/* Thanh trên cùng luôn hiện để mở menu, sao lưu khi đang cuộn */
.topbar { position: sticky; top: 0; z-index: 15; }
@media (max-width: 780px) { .topbar { padding-top: env(safe-area-inset-top); height: calc(61px + env(safe-area-inset-top)); } }

/* Quét bằng video */
.video-scan { border: 1px solid #e3dcf3; background: #faf8fe; border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; }
.vs-head { display: flex; align-items: center; gap: 6px; color: #4b3384; }
.video-scan .help-text { margin: 6px 0 0; }
.vs-progress { margin-top: 10px; }
.vs-progress .progress { max-width: none; margin-top: 0; }
.vs-or { text-align: center; font: 700 10px Arial, sans-serif; letter-spacing: 1.4px; color: #9aa8a3; text-transform: uppercase; margin: 4px 0 10px; }