/* =========================================================
   THẾ GIỚI GIẤY — Trang Liên hệ
   Extends assets/css/style.css — new components only
   ========================================================= */

/* Textarea to match .form-field input/select treatment */
.form-field textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;
  font-family:var(--font-body);color:var(--ink-900);background:var(--surface-alt);transition:.2s;
  resize:vertical;min-height:96px;line-height:1.5;
}
.form-field textarea:focus{outline:none;border-color:var(--blue-600);background:#fff;}

/* =========================================================
   CONTACT CLEAN SECTION (tham khảo cách trình bày yanyen.vn/lien-he)
   Nền sáng, tối giản, danh sách thông tin phẳng — thay cho khối navy-gradient nặng
   ========================================================= */
.contact-clean-grid{display:grid;grid-template-columns:1fr .95fr;gap:64px;align-items:start;}

.contact-clean-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.contact-clean-brand strong{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--navy-900);letter-spacing:.02em;}

.contact-clean-info h1{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px;}
.contact-clean-intro{
  color:var(--ink-500);font-size:15px;line-height:1.75;padding-bottom:22px;
  border-bottom:1px solid var(--line);margin-bottom:26px;
}

.contact-clean-list{display:flex;flex-direction:column;gap:18px;margin-bottom:26px;}
.contact-clean-list li{display:flex;align-items:flex-start;gap:14px;}
.contact-clean-ico{
  flex:none;width:38px;height:38px;border-radius:10px;background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
}
.contact-clean-ico svg{width:19px;height:19px;}
.contact-clean-list li div{display:flex;flex-direction:column;gap:2px;}
.contact-clean-list li strong{font-size:12.5px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.03em;}
.contact-clean-list li span{font-size:15px;font-weight:600;color:var(--navy-900);}
.contact-clean-list li a{color:var(--blue-600);}
.contact-clean-list li a:hover{text-decoration:underline;}

.contact-clean-certs{display:flex;gap:10px;flex-wrap:wrap;}
.cert-badge-sm{
  padding:7px 14px;border-radius:999px;background:var(--blue-50);border:1px solid var(--blue-100);
  font-size:12.5px;font-weight:700;color:var(--navy-800);
}

.contact-clean-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-md);
}
.contact-clean-form h3{font-size:20px;font-weight:800;color:var(--navy-900);}
.contact-clean-form-sub{color:var(--ink-500);font-size:13.5px;margin:6px 0 22px;}

@media (max-width:1080px){
  .contact-clean-grid{grid-template-columns:1fr;gap:40px;}
}

/* =========================================================
   STORE LOCATOR (tham khảo cách trình bày shop.elmich.vn/he-thong-cua-hang)
   Dropdown lọc khu vực + danh sách chi nhánh + bản đồ Google Maps thật (không cần API key)
   ========================================================= */
.locator{display:grid;grid-template-columns:400px 1fr;gap:28px;align-items:start;}

.locator-select-label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.locator-select{
  width:100%;padding:12px 40px 12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--navy-900);background:#fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="%235b6b82" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center;
  background-size:16px;appearance:none;cursor:pointer;margin-bottom:16px;
}
.locator-select:focus{outline:none;border-color:var(--blue-600);}

.locator-list{
  display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding-right:6px;
}
.locator-item{
  position:relative;display:block;width:100%;text-align:left;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;
  transition:.18s ease;cursor:pointer;
}
.locator-item:hover{border-color:var(--blue-500);}
.locator-item.is-active{border-color:var(--navy-800);background:var(--blue-50);box-shadow:var(--shadow-sm);}
.locator-item h3{font-size:15px;font-weight:800;color:var(--navy-900);margin-bottom:4px;}
.locator-item p{font-size:13px;color:var(--ink-500);line-height:1.5;}
.locator-tag{
  display:inline-block;background:var(--orange-500);color:var(--gold-ink);font-size:10.5px;font-weight:800;
  padding:3px 10px;border-radius:999px;letter-spacing:.02em;margin-bottom:8px;
}
.locator-item.is-factory{border-style:dashed;}
.locator-tag.is-factory-tag{background:var(--navy-800);color:#fff;}
.locator-item[data-city="hidden"]{display:none;}
.locator-item.is-filtered-out{display:none;}

.locator-map-col{position:sticky;top:100px;}
.locator-map{
  width:100%;height:520px;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.locator-map-cta{margin-top:14px;}

@media (max-width:1080px){
  .locator{grid-template-columns:1fr;}
  .locator-map-col{position:static;}
  .locator-list{max-height:none;}
  .locator-map{height:360px;}
}