/* about.html — "Where we build" (7/10/2026): danh sách khu vực bên TRÁI + bản đồ dự án bên PHẢI.
   Bản đồ dùng cùng nền, cùng ghim logo và cùng dữ liệu (assets/vgc-projects.js) với bản đồ trang chủ;
   hành vi nằm ở assets/area-map.js. Rê chuột / bấm vào một khu vực trong danh sách thì bản đồ bay tới khu vực đó.
   File này nạp SAU service-content.css + content-type.css nên các luật dưới đây thắng kiểu ô thẻ mặc định của .sc-tags. */

.ab-where{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.8rem,3.6vw,3.4rem);
  align-items:stretch; margin-top:clamp(1.8rem,3.4vw,2.8rem);
  scroll-margin-top:4rem; }   /* mục "Service Areas" trong menu nhảy tới #areas: chừa chỗ cho logo + nút MENU cố định */

/* ================= danh sách khu vực: mục lục kiểu tạp chí thay cho các ô thẻ ================= */
.ab-where .sc-tags.ab-areas{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; background:none; border:0; border-radius:0;
  border-top:1px solid rgba(180,136,77,.4); }
.ab-where .ab-areas > li{ position:relative; background:none;
  padding:clamp(1.5rem,2.5vw,2.1rem) 0 clamp(1.5rem,2.5vw,2.1rem) clamp(3rem,4.6vw,4.2rem);
  border-bottom:1px solid rgba(180,136,77,.22); }
.ab-where .ab-areas > li[data-area]{ cursor:pointer; outline:none; }
/* chỉ vàng chạy dọc đáy mục khi khu vực đó đang được xem trên bản đồ */
.ab-where .ab-areas > li[data-area]::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,#F5D9A8,#B4884D); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.ab-where .ab-areas > li[data-area].is-active::after,
.ab-where .ab-areas > li[data-area]:focus-visible::after{ width:100%; }
/* số thứ tự nghiêng ở lề trái */
.ab-area-no{ position:absolute; left:0; top:clamp(1.75rem,2.9vw,2.45rem);
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500; font-size:1.3rem; line-height:1;
  letter-spacing:.04em; color:#E8C284; }
/* tên bang: chữ Marcellus lớn; sang vàng kim khi đang được chọn */
.ab-where .ab-areas h3{ margin:0 0 .95rem; font-family:'Marcellus','Playfair Display',serif; font-weight:400; text-transform:none;
  font-size:clamp(1.9rem,3.1vw,2.7rem); line-height:1.05; letter-spacing:.005em; color:var(--cream);
  transition:color .45s ease; }
.ab-where .ab-areas > li[data-area].is-active h3,
.ab-where .ab-areas > li[data-area]:focus-visible h3{ color:#F5D9A8; }
/* các thành phố: chữ in hoa giãn, ngăn nhau bằng hạt hình thoi vàng (cùng họ với dấu ✦ của site) */
.sc .ab-areas .ab-cities{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 0; margin:0;
  font-family:'Archivo',Arial,sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.22em; line-height:1.4;
  text-transform:uppercase; color:rgba(245,241,232,.8); }
.ab-cities span{ display:inline-flex; align-items:center; white-space:nowrap; }
/* hạt ngăn đi theo tên ĐỨNG TRƯỚC nó → nếu phải xuống dòng thì dòng mới không mở đầu bằng một hạt lẻ */
.ab-cities span:not(:last-child)::after{ content:''; width:5px; height:5px; margin:0 1em 0 .78em; background:#E8C284; transform:rotate(45deg); opacity:.9; }

/* ---- "Not on the list?" ---- */
.ab-where .ab-areas > li.ab-ask{ border-bottom:0; padding-bottom:0; }
.ab-where .ab-areas .ab-ask h3{ margin-bottom:.8rem; font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(1.6rem,2.5vw,2.1rem); line-height:1.1; color:#E8C284; }
.sc .ab-where .ab-areas .ab-ask p{ white-space:normal; max-width:46ch; font-size:1rem; line-height:1.7; color:rgba(245,241,232,.74); }
/* nút: bản vàng kim có khung chỉ lệch (.sc-btn--solid) — khung thò ra 8px nên cần lề trên rộng hơn */
.ab-where .ab-ask .sc-btn{ margin-top:2rem; padding:1.02rem 2rem; font-size:.72rem; letter-spacing:.26em; }

/* ================= bản đồ ================= */
.ab-map-frame{ position:relative; min-height:clamp(440px,46vw,620px); }
/* khung chỉ vàng lệch xuống-phải phía sau bản đồ */
.ab-map-frame::before{ content:''; position:absolute; inset:16px -16px -16px 16px; border:1px solid rgba(180,136,77,.45); pointer-events:none; }
.ab-map{ position:absolute; inset:0; z-index:1; background:#16233f; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.ab-map-frame::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(180,136,77,.4); }
/* nền bản đồ: cùng bộ lọc navy dịu như bản đồ trang chủ (chỉ phủ lên tile, không ảnh hưởng ghim / popup) */
.ab-map .leaflet-tile-pane{ filter:brightness(1.5) contrast(.9) sepia(.55) hue-rotate(182deg) saturate(1.9); }
.ab-map .leaflet-control-attribution{ font-size:8px; line-height:1.4; padding:0 5px; color:rgba(245,241,232,.4); background:rgba(13,23,48,.5); }
.ab-map .leaflet-control-attribution a{ color:inherit; }
/* nhãn khu vực đang xem (góc trên-trái) */
.ab-map-tag{ position:absolute; z-index:2; left:clamp(.9rem,1.8vw,1.4rem); top:clamp(.9rem,1.8vw,1.4rem); pointer-events:none;
  display:flex; align-items:center; gap:.8rem; padding:.6em 1em .6em .9em;
  font-size:.62rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; line-height:1; color:#F5F1E8;
  background:rgba(13,23,48,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(232,194,132,.4); }
.ab-map-tag::before{ content:''; width:1.6rem; height:1px; background:#E8C284; }
/* chú thích màu ghim + lời nhắc, đè lên mép dưới bản đồ */
.ab-map-bar{ position:absolute; z-index:2; left:0; right:0; bottom:0; pointer-events:none;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.4rem;
  padding:2.4rem clamp(.9rem,1.8vw,1.4rem) .95rem;
  font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,241,232,.86);
  background:linear-gradient(180deg,rgba(13,23,48,0),rgba(13,23,48,.86) 72%); }
.ab-map-bar span{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
.ab-map-bar .lg{ gap:1.4rem; }
.ab-map-bar i{ width:11px; height:11px; border-radius:50%; background:#14213D; border:2px solid #E8C284; box-sizing:border-box; }
.ab-map-bar i.c{ border-color:#6E93C9; }
.ab-map-bar .hint{ opacity:.7; }

/* ghim = logo VGC trong hình tròn (giống trang chủ); viền vàng = nhà ở, viền xanh thép = thương mại */
.ab-map .vgc-pin{ background:none; border:none; }
.ab-map .pin-badge{ display:block; width:38px; height:38px; border-radius:50%; box-sizing:border-box;
  background:url('logo-mark.png') center / 135% no-repeat #14213D;
  border:3px solid #E8C284; box-shadow:0 3px 8px rgba(6,10,22,.55),0 0 0 1px rgba(6,10,22,.3);
  transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.ab-map .pin-commercial{ border-color:#6E93C9; }
.ab-map .vgc-pin:hover .pin-badge{ transform:scale(1.14); }
/* popup theo tông thương hiệu */
.ab-map .leaflet-popup-content-wrapper{ border-radius:10px; padding:2px; box-shadow:0 18px 44px rgba(6,10,22,.45); }
.ab-map .leaflet-popup-content{ margin:13px 15px; font-family:'Archivo',Arial,sans-serif; }
.ab-map .leaflet-popup-content img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:7px; margin-bottom:.6rem; }
.ab-map .leaflet-popup-content .t{ font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#B4884D; margin-bottom:.35rem; }
.ab-map .leaflet-popup-content h4{ margin:0; font-family:'Marcellus',serif; font-weight:400; font-size:1.05rem; line-height:1.2; color:#14213D; }
.ab-map .leaflet-container a.leaflet-popup-close-button{ color:rgba(20,33,61,.5); }

@media(max-width:900px){
  .ab-where{ grid-template-columns:1fr; }
  .ab-map-frame{ min-height:clamp(340px,92vw,520px); }
  .ab-map-frame::before{ display:none; }
  .ab-map-bar .hint{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .ab-where .ab-areas > li[data-area]::after,.ab-where .ab-areas h3,.ab-map .pin-badge{ transition:none; }
}