/* =====================================================================
   LỚP THIẾT KẾ v3 – "Sang trọng": đen onyx · vàng champagne · giấy ngà
   Nạp SAU app.css. Quy tắc màu: nền vàng ⇒ chữ đen onyx; nền onyx ⇒ chữ ngà/vàng nhạt; nền ngà ⇒ chữ onyx.
   ===================================================================== */
:root {
  --o-1: #EAD6A6; --o-2: #CDAA63; --o-3: #B48D4C; --o-4: #8F6B33; --o-5: #6B4F24;
  --gold-grad: linear-gradient(135deg, #F3E3B9 0%, #D6B46F 42%, #B08745 100%);
  --gold-grad-h: linear-gradient(135deg, #F7EBCB 0%, #DEBE7C 42%, #BD9450 100%);
  --espresso: #0E0D0B; --espresso-2: #1A1814; --onyx: #0E0D0B; --onyx-2: #171512; --onyx-3: #23201B;
  --ink: #16130F; --ink-2: #3D362D; --muted: #6E655A; --paper: #F8F5EF; --sand: #F1EBE0; --line: #E6DDCD; --line-2: #D9CCB5;
  --navy: var(--ink); --teal: var(--o-4); --teal-2: var(--o-5); --brand: var(--o-2); --brand-2: var(--o-3); --teal-soft: #F5EEDF;
  --earth: #9C7A3C; --earth-soft: #F6EFE0;
  --bg: var(--paper); --surface: #FFFFFF;
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sh-1: 0 1px 2px rgba(22,19,15,.05), 0 2px 10px rgba(22,19,15,.04);
  --sh-2: 0 2px 6px rgba(22,19,15,.06), 0 18px 40px rgba(22,19,15,.10);
  --sh-o: 0 10px 26px rgba(176,135,69,.35);
  --radius: 16px;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: #EBD9AE; color: var(--ink); }
:focus-visible { outline: 3px solid #D6B46F; }
a { color: var(--o-5); }
a:hover { color: var(--ink); }

/* ---- Chữ: tiêu đề có chân, phần còn lại không chân ---- */
h1, h2, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; }
h1 { line-height: 1.08; }
h2 { line-height: 1.15; font-size: clamp(1.6rem, 3.2vw, 2.45rem); }
h1 em, h2 em { font-style: italic; font-weight: 500; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.kicker { text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; font-weight: 700; color: var(--o-4); gap: 14px; }
.kicker::before { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--o-3)); }
.kicker-dark, .section-dark .kicker { color: #D9BC80; }

/* ---- Nút: vàng champagne / onyx / viền mảnh ---- */
.btn, a.btn, a.btn:visited { background: var(--gold-grad); color: #17120A; border: 1px solid #B08745; border-radius: 999px; font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(110,80,30,.25); }
.btn:hover, a.btn:hover { background: var(--gold-grad-h); color: #17120A; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--sh-o); }
.btn:active { box-shadow: inset 0 2px 5px rgba(110,80,30,.35); }
.btn-ghost, a.btn-ghost, a.btn-ghost:visited, .btn-ghost:hover, a.btn-ghost:hover { background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.btn-ghost:hover, a.btn-ghost:hover { border-color: var(--o-3); color: var(--o-5); background: rgba(214,180,111,.08); }
.btn-dark, a.btn-dark, a.btn-dark:visited { background: var(--onyx); color: #F3E3B9; border-color: var(--onyx); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn-dark:hover, a.btn-dark:hover { background: var(--onyx-3); color: #F7EBCB; }
.btn-earth, a.btn-earth, a.btn-earth:visited { background: var(--onyx); color: #F3E3B9; border-color: var(--onyx); }
.btn-earth:hover, a.btn-earth:hover { background: var(--onyx-3); color: #F7EBCB; }
.btn-danger, a.btn-danger { background: #8E2A22; border-color: #7A231C; color: #fff; }
.btn-danger:hover { background: #7A231C; color: #fff; }
.btn-sm { border-radius: 999px; }
.text-link { color: var(--o-5); }
.text-link:hover { color: var(--ink); }

/* ---- Thanh đầu trang ---- */
.site-header { background: rgba(248,245,239,.86); border-bottom: 1px solid rgba(214,180,111,.28); }
.site-header.scrolled { background: rgba(248,245,239,.95); box-shadow: 0 8px 30px rgba(22,19,15,.07); }
.brand span { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; letter-spacing: 0; }
.brand small { font-family: var(--font); color: var(--o-4); letter-spacing: .22em; font-size: .6rem; font-weight: 700; margin-top: 2px; }
.nav a, .nav button.linklike { color: var(--ink-2); font-weight: 500; }
.nav a:hover { color: var(--o-5); }
.nav a[aria-current="page"] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--o-3); border-radius: 0; }
.nav a.btn, .nav a.btn:hover { color: #17120A; }
.announce { background: var(--onyx); color: #E9D7AB; letter-spacing: .02em; }

/* ---- Hero ---- */
.hero { background: radial-gradient(900px 560px at 82% 18%, rgba(214,180,111,.16), transparent 62%), radial-gradient(700px 460px at -5% 110%, rgba(214,180,111,.10), transparent 70%), linear-gradient(180deg, #0B0A09, #14120F); color: #E8E1D3; padding: 96px 0 104px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(214,180,111,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(214,180,111,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.hero::after { background: linear-gradient(90deg, transparent, rgba(214,180,111,.7), transparent); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #F7F1E4; font-size: clamp(2.5rem, 5.6vw, 4.6rem); max-width: 14ch; font-weight: 600; }
.hero p.lead { color: #BDB3A2; font-size: 1.12rem; }
.hero-eyebrow { color: #D9BC80; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 14px; }
.hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #D6B46F); }
.hero-search { background: rgba(255,255,255,.06); border: 1px solid rgba(214,180,111,.38); border-radius: 999px; padding: 7px 7px 7px 50px; box-shadow: 0 24px 60px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-search .hs-ic { color: #D6B46F; left: 20px; }
.hero-search input, .hero-search input:hover, .hero-search input:focus { color: #F7F1E4; }
.hero-search input::placeholder { color: #9C9383; }
.hero-search .btn { padding-inline: 26px; }
.hero-proof { color: #A79D8C; }
.hero-proof b { color: #F3E3B9; font-weight: 600; }
.hero-proof li::before { background: #D6B46F; box-shadow: 0 0 0 4px rgba(214,180,111,.18); }
.hero-plate { border-radius: 26px; padding: 12px; background: linear-gradient(160deg, rgba(214,180,111,.14), rgba(255,255,255,.02)); border: 1px solid rgba(214,180,111,.28); box-shadow: 0 50px 110px rgba(0,0,0,.6); }
.hero-map { background: #12100D; border-radius: 16px; }
.hm-grid { stroke: rgba(214,180,111,.06); }
.hm-road { fill: #211D17; }
.hm-roadline { stroke: rgba(214,180,111,.32); }
.hm-parcel { stroke: rgba(214,180,111,.30); fill: rgba(243,227,185,.02); }
.hm-sel { fill: rgba(214,180,111,.22); stroke: #E9D3A0; filter: drop-shadow(0 0 12px rgba(214,180,111,.75)); }
.hm-dim rect { fill: #0E0D0B; stroke: #D6B46F; }
.hm-dim text { fill: #F3E3B9; }
.hm-route { stroke: #E9D3A0; filter: drop-shadow(0 0 6px rgba(214,180,111,.8)); }
.hm-poi circle { fill: #1F3B57; stroke: #F3E3B9; }
.hm-tag rect { fill: rgba(248,245,239,.97); }
.hm-tag .t1 { fill: #16130F; } .hm-tag .t2 { fill: #6E655A; }
.hm-scale path { stroke: #A79D8C; } .hm-scale text { fill: #A79D8C; }

/* Dải giá trị ngay dưới hero */
.trust { background: var(--onyx); border-top: 1px solid rgba(214,180,111,.18); border-bottom: 1px solid rgba(214,180,111,.18); color: #BDB3A2; }
.trust ul { list-style: none; margin: 0 auto; padding: 22px 16px; max-width: 1180px; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }
.trust li { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 1px solid rgba(214,180,111,.28); }
.trust b { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: #F3E3B9; letter-spacing: 0; }
.trust span { font-size: .82rem; letter-spacing: .02em; }

/* ---- Khối nội dung ---- */
.section { padding: 96px 0; }
.section-alt { background: #FFFDF9; border-block: 1px solid var(--line); }
.section-sub { color: #A79D8C; }
.section-dark { background: radial-gradient(800px 420px at 12% 0%, rgba(214,180,111,.12), transparent 62%), radial-gradient(700px 400px at 100% 100%, rgba(214,180,111,.08), transparent 65%), var(--onyx); color: #BDB3A2; }
.section-dark h2 { color: #F7F1E4; }
.bx { background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(214,180,111,.16); border-radius: 22px; }
.bx::after { background: radial-gradient(320px 170px at var(--mx, 80%) 0%, rgba(214,180,111,.14), transparent 70%); }
.bx:hover { border-color: rgba(214,180,111,.45); }
.bx h3 { color: #F7F1E4; }
.bx p { color: #A79D8C; }
.bx-ic { stroke: #E3C688; background: rgba(214,180,111,.10); box-shadow: inset 0 0 0 1px rgba(214,180,111,.25); }
.bx-hero { background: linear-gradient(150deg, rgba(214,180,111,.16), rgba(255,255,255,.02) 55%); border-color: rgba(214,180,111,.32); }
.bx-hero h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.bx-facts li { color: #D6CDBD; background: rgba(0,0,0,.35); border-color: rgba(214,180,111,.24); }
.bx-facts b { color: #E3C688; }
.bx-viz svg { filter: drop-shadow(0 0 26px rgba(214,180,111,.30)); }
.bx-big { fill: #F7F1E4; font-family: var(--serif); font-weight: 600; }
.bx-small { fill: #A79D8C; }

.steps-h li { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; box-shadow: var(--sh-1); }
.steps-h li::before { content: counter(s, upper-roman); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.6rem; width: auto; height: auto; display: block; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; box-shadow: none; border-radius: 0; margin-bottom: 14px; line-height: 1; }
.steps-h li h3 { font-size: 1.12rem; }
.card { border-radius: 20px; border-color: var(--line); box-shadow: var(--sh-1); }
.gallery figure { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px; }
.gallery figcaption { font-weight: 600; color: var(--ink); padding: 10px 6px 4px; }
.price-card .price { font-family: var(--serif); font-weight: 600; font-size: 2rem; }
.price-card.featured { background: linear-gradient(#fff, #fff) padding-box, var(--gold-grad) border-box; border: 1.5px solid transparent; box-shadow: 0 24px 60px rgba(176,135,69,.22); position: relative; }
details.faq { border-radius: 16px; border-color: var(--line); background: #fff; }
details.faq[open] { border-color: var(--line-2); }
details.faq summary { font-weight: 600; }
details.faq summary::after { border-color: var(--o-3); }
.cta-band { background: radial-gradient(600px 280px at 88% 0%, rgba(214,180,111,.22), transparent 62%), var(--onyx); border: 1px solid rgba(214,180,111,.3); border-radius: 28px; padding: 48px; box-shadow: 0 30px 70px rgba(14,13,11,.35); }
.cta-band h2 { color: #F7F1E4; }
.cta-band p { color: #A79D8C; }
.cta-band .btn, .cta-band a.btn, .cta-band a.btn:visited, .cta-band .btn:hover, .cta-band a.btn:hover { background: var(--gold-grad); color: #17120A; border-color: #B08745; }
.layer-fact { background: #F5EEDF; color: var(--o-5); }
.layer-interpretation { background: #EEF1F4; color: #2C3E52; }
.layer-recommendation { background: #F1EBE0; color: #5E4A2C; }
.chip-co_nguon { color: #8F6B33; }
.site-footer { background: var(--onyx); border-top: 1px solid rgba(214,180,111,.35); color: #A79D8C; }
.site-footer h4 { color: #F3E3B9; font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
.site-footer a { color: #D6CDBD; }
.site-footer a:hover { color: #F3E3B9; }
.legal-line { border-top-color: rgba(214,180,111,.18); }

/* ---- Khối giới thiệu video điện ảnh (trang chủ) ---- */
.showcase { background: radial-gradient(900px 520px at 75% 40%, rgba(214,180,111,.13), transparent 65%), linear-gradient(180deg, #121110, #0B0A09); color: #BDB3A2; overflow: hidden; }
.showcase h2 { color: #F7F1E4; max-width: 18ch; }
.showcase-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .showcase-grid { grid-template-columns: .9fr 1.1fr; } }
.showcase .lead { color: #BDB3A2; font-size: 1.08rem; max-width: 46ch; }
.feat-list { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; }
.feat-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: #D6CDBD; }
.feat-list li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--gold-grad); -webkit-mask: radial-gradient(circle, #000 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 9px, #000 9.5px 11px, transparent 11.5px); mask: radial-gradient(circle, #000 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 9px, #000 9.5px 11px, transparent 11.5px); }
.feat-list b { color: #F3E3B9; font-weight: 600; }
.phones { position: relative; height: 560px; }
.phone { position: absolute; width: 228px; aspect-ratio: 9 / 19.5; border-radius: 38px; padding: 9px; background: linear-gradient(160deg, #3A352D, #121110 40%, #2A2621); box-shadow: 0 0 0 1px rgba(214,180,111,.35), 0 40px 80px rgba(0,0,0,.6); }
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 12px; background: #050505; z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; display: block; }
.phone.p1 { left: 4%; top: 60px; transform: rotate(-7deg); z-index: 1; }
.phone.p2 { left: 50%; top: 0; transform: translateX(-50%); z-index: 3; width: 252px; }
.phone.p3 { right: 4%; top: 60px; transform: rotate(7deg); z-index: 2; }
.phones-note { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .75rem; color: #7E7567; }
@media (max-width: 700px) { .phones { height: 430px; } .phone { width: 170px; } .phone.p2 { width: 190px; } .phone.p1 { left: -2%; } .phone.p3 { right: -2%; } }
@media (prefers-reduced-motion: no-preference) {
  .phone.p2 { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty { 50% { translate: 0 -10px; } }
}

.showcase .btn-ghost, .showcase a.btn-ghost, .showcase a.btn-ghost:visited { color: #F3E3B9; border-color: rgba(214,180,111,.45); }
.showcase .btn-ghost:hover, .showcase a.btn-ghost:hover { color: #F7EBCB; border-color: #D6B46F; background: rgba(214,180,111,.10); }

/* ---- Trình tạo hồ sơ ---- */
.page-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 4px 0 6px; }
.page-lead { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
.stepper { gap: 0; margin-bottom: 26px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px; width: fit-content; max-width: 100%; box-shadow: var(--sh-1); }
.stepper li { border: 0; box-shadow: none; background: transparent; border-radius: 999px; padding: 7px 16px 7px 7px; color: var(--muted); font-weight: 500; }
.stepper li .n { background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-family: var(--serif); font-style: italic; font-weight: 600; }
.stepper li.active { background: var(--onyx); color: #F3E3B9; }
.stepper li.active .n { background: var(--gold-grad); border-color: transparent; color: #17120A; }
.stepper li.done { color: var(--ink); }
.stepper li.done .n { background: var(--sand); border-color: var(--line-2); color: var(--o-5); }
#map { border-radius: 22px; border: 1px solid var(--line-2); box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line), var(--sh-2); }
.map-layout { gap: 26px; }
.map-tools { margin-top: 18px; gap: 8px; }
.map-tools .btn-sm { min-height: 40px; padding-inline: 16px; }
.map-layout .card { padding: 24px; border-radius: 24px; box-shadow: var(--sh-2); }
.map-layout .card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.gcn-cta { position: relative; overflow: hidden; background: radial-gradient(360px 160px at 100% 0%, rgba(214,180,111,.25), transparent 70%), var(--onyx); border: 1px solid rgba(214,180,111,.35); color: #D6CDBD; border-radius: 20px; padding: 18px 18px 18px 20px; }
.gcn-cta b { color: #F7F1E4; }
.gcn-cta > div > b:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: .005em; }
.gcn-cta .small b { color: #E3C688; }
.kv dt { color: var(--muted); font-size: .86rem; }
.kv dd { color: var(--ink); }
fieldset { border-color: var(--line); border-radius: 20px; padding: 20px 22px 6px; background: #fff; }
legend { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink); padding: 0 8px; }
label { font-weight: 600; color: var(--ink-2); }
input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=date], select, textarea { background: #FFFEFB; border-color: var(--line-2); border-radius: 12px; }
input:hover, select:hover, textarea:hover { border-color: #C9B48D; }
input:focus, select:focus, textarea:focus { border-color: var(--o-3); box-shadow: 0 0 0 4px rgba(214,180,111,.22); }
.check input { accent-color: #8F6B33; }
.note-info { background: #F7F1E4; border-color: #E6D7B5; }
.note-warn { background: #FBF3E2; border-color: #E9D3A0; }
.sticky-cta { background: linear-gradient(transparent, var(--paper) 35%); }
.progress-steps li.running .dot { border-color: var(--o-3); border-top-color: transparent; }
.progress-steps li.done .dot { background: var(--o-3); border-color: var(--o-3); }
.gcn-place { background: #FBF6EA; border-color: var(--o-3); box-shadow: 0 8px 22px rgba(176,135,69,.2); }
.gcn-place input[type=range] { accent-color: #8F6B33; }
.gcn-up { border-color: #D9C497; background: #FFFDF8; }
#ward-hint { color: #7A5A1E; }
.dlg { border-radius: 22px; }
.dlg-head h2 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
.legend { color: var(--ink-2); }
.toast { background: var(--onyx); color: #F3E3B9; border: 1px solid rgba(214,180,111,.35); }
.tabs [aria-selected="true"], .tabs a.active { border-bottom-color: var(--o-3); }
.tpl[aria-pressed="true"] { border-color: var(--o-3); box-shadow: 0 0 0 3px rgba(214,180,111,.25); }
.admin-nav a.active, .admin-nav a:hover { background: #F1EBE0; color: var(--ink); }
.thumbs button[aria-selected="true"] { border-color: var(--o-3); }
.copy { border-color: var(--o-3); background: #F7F1E4; color: var(--o-5); }
.opt-card:has(input:checked) { border-color: var(--o-3); background: #FBF6EA; }

@media (max-width: 520px) {
  .hero { padding: 64px 0 72px; }
  .hero-search { border-radius: 22px; padding: 8px; }
  .hero-search .btn { border-radius: 16px; }
  .section { padding: 68px 0; }
  .cta-band { padding: 30px 24px; }
  .stepper { width: 100%; border-radius: 18px; }
  .stepper li { flex: 1 1 auto; font-size: .82rem; }
}

/* ---- Tinh chỉnh tương phản & bố cục ---- */
/* chữ nghiêng vàng trên nền sáng: dùng vàng đồng đậm để đủ tương phản */
.section:not(.section-dark):not(.showcase) h2 em, .page-title em, .page h1 em, .cta-band h2 em { background: linear-gradient(135deg, #A9813F 0%, #8A6630 55%, #6B4F24 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band h2 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }
.steps-h li::before { background: linear-gradient(135deg, #B48D4C, #6B4F24); -webkit-background-clip: text; background-clip: text; }
.hero-search input[type=text], .hero-search input[type=text]:hover, .hero-search input[type=text]:focus { background: transparent; border: 0; box-shadow: none; }
.page-title { margin-bottom: 8px; }
.gcn-cta { flex-direction: column; align-items: stretch; gap: 14px; }
.gcn-cta .btn { align-self: flex-start; padding-inline: 20px; }
.map-tools #btn-cad, .map-tools #btn-locate { background: #fff; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.map-tools #btn-cad:hover, .map-tools #btn-locate:hover { border-color: var(--o-3); color: var(--o-5); }
.map-tools .check { font-size: .88rem; color: var(--ink-2); }
.hero h1 em, h1 em, h2 em { font-style: italic; }

/* Ô chọn kèm liên kết: chữ chảy liền mạch (không tách thành nhiều cột) */
.check { display: block; position: relative; padding-left: 30px; line-height: 1.5; }
.check > input[type=checkbox], .check > input[type=radio] { position: absolute; left: 0; top: 1px; margin: 0; }
.check a { white-space: normal; }
.legend .check, .map-tools .check { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; }
.map-tools .check > input, .legend .check > input { position: static; }

/* ---- Tiện ích xung quanh – hiện hữu & quy hoạch ---- */
.sur { margin: 22px 0 8px; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, #FFFDF8 0%, #FBF7EE 100%); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.sur h3 { font-family: var(--serif); font-size: 1.35rem; margin-top: 2px; }
.sur h4 { font-size: 1rem; margin-bottom: 6px; }
.sur-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sur-scores { display: flex; align-items: center; gap: 8px; }
.sur-score { background: var(--onyx); color: #F3E3B9; border-radius: 14px; padding: 8px 14px; min-width: 104px; text-align: center; }
.sur-score span { display: block; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: #CDBB95; }
.sur-score b { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; }
.sur-score.fut { background: var(--gold-grad); color: var(--ink); }
.sur-score.fut span { color: #4B3A1C; }
.sur-arrow { color: var(--o-3); font-size: 1.3rem; }
.sur-map-wrap { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #fff; }
.sur-map { height: 420px; }
.sur-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.sur-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: .8rem; cursor: pointer; color: var(--ink-2); min-height: 32px; }
.sur-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sur-chip:not(.on) { opacity: .45; text-decoration: line-through; }
.sur-key { margin-left: auto; }
.sur-key i { display: inline-block; width: 14px; height: 9px; vertical-align: middle; margin: 0 2px 0 6px; }
.sur-key .k-zone { background: rgba(31,157,85,.3); border: 2px solid #1F9D55; }
.sur-key .k-new { border: 2px dashed #1F9D55; }
.sur-key .k-pt { width: 10px; height: 10px; border-radius: 50%; background: #1F9D55; border: 2px solid #fff; box-shadow: 0 0 0 1px #1F9D55; }
.sur-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-grad); border: 3px solid var(--onyx); box-shadow: 0 0 0 6px rgba(201,162,39,.25); }
.sur-table td { vertical-align: top; }
.sur-table .num { text-align: center; white-space: nowrap; }
.sur .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: none; }
.sur-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.sur-list li { display: flex; align-items: flex-start; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sur-list li .dot { margin-top: 6px; }
.st { display: inline-block; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
.st-keep { background: #E7F3EC; color: #17663B; }
.st-new { background: #FFF1D6; color: #8A5A13; }
.st-plan { background: #EEF0F6; color: #3C4A6B; }
.sur-nui { background: #FBF3F0; border: 1px solid #EBD4CB; border-radius: 12px; padding: 12px 14px; }
.sur-nui ul { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }
@media (max-width: 640px) {
  .sur { padding: 16px; }
  .sur-map { height: 320px; }
  .sur-scores { width: 100%; }
  .sur-score { flex: 1; min-width: 0; }
  .sur-key { margin-left: 0; }
}
.card > .sur { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.sur-map-wrap { position: relative; isolation: isolate; z-index: 0; }
.sur-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sur-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.sur-card-h { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.sur-count { margin-left: auto; font-size: .78rem; color: var(--muted); }
.sur-items { list-style: none; margin: 8px 0 0; padding: 0; font-size: .86rem; }
.sur-items li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.sur-items li:last-child { border-bottom: 0; }
.sur-items li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sur-items li b { white-space: nowrap; font-weight: 600; }
.sur-plan { margin-top: 8px; font-size: .84rem; line-height: 1.45; }

/* ---- Bước 1: đặt / di chuyển thửa ---- */
.base-switch { display: flex; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); overflow: hidden; }
.base-switch button { border: 0; background: #fff; padding: 8px 12px; font: 600 .82rem/1 inherit; color: var(--ink-2); cursor: pointer; min-height: 36px; }
.base-switch button.on { background: var(--onyx); color: #F3E3B9; }
.gcn-place { display: grid; gap: 10px; }
.gcn-place .gp-head { display: flex; flex-direction: column; gap: 2px; }
.gcn-place .gp-head b { font-size: 1rem; }
.gcn-place .gp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gcn-place .gp-rot { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; }
.gcn-place .gp-rot input { flex: 1; min-width: 100px; }
.gcn-place .gp-nudge, .gcn-place .gp-act { display: flex; gap: 6px; }
.gcn-place .gp-act { margin-left: auto; }
.gcn-place .btn-sm { min-height: 40px; min-width: 40px; }
body.placing #map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 650; pointer-events: none;
  background: linear-gradient(#B4232A, #B4232A) center/2px 100% no-repeat, linear-gradient(#B4232A, #B4232A) center/100% 2px no-repeat; opacity: .8; }
body.placing #map { outline: 3px solid var(--o-3); outline-offset: -3px; cursor: grab; }
.map-steps { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); }
.map-steps li { margin: 3px 0; }
@media (max-width: 640px) {
  /* điện thoại: bảng điều khiển là "tấm" cố định ở đáy màn hình, bản đồ chiếm phần còn lại */
  .gcn-place { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; margin: 0; border-radius: 18px 18px 0 0; border-width: 2px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .gcn-place .gp-head span { font-size: .78rem; }
  .gcn-place .gp-tools { gap: 6px; }
  .gcn-place .gp-rot { flex: 1 1 100%; }
  .gcn-place .gp-nudge { flex: 1; }
  .gcn-place .gp-act { margin-left: 0; flex: 1 1 100%; } .gcn-place .gp-act .btn { flex: 1; }
  body.placing #map { height: calc(100vh - 250px) !important; height: calc(100dvh - 250px) !important; }
  body.placing .site-header, body.placing header { display: none; }
}