/*
 * Page stylesheet for Lien he (Contact).
 * Ports the two page-scoped inline <style> blocks from template/contact.html
 * (#vcn-globe-banner + #vcn-contact) — the shared style.css does not carry these.
 */

/* ===== Global footprint banner (was #vcn-globe-banner) ===== */
.globe-banner{position:relative;width:100%;background:#05070d;overflow:visible;}
.globe-banner:has(.gmark:hover),.globe-banner:has(.gmark:focus-within){z-index:1200;}
.globe-banner__media{position:relative;width:100%;aspect-ratio:1920/748;
  background:radial-gradient(120% 130% at 50% 34%,rgba(22,28,44,.6) 0%,rgba(5,7,13,0) 62%),#05070d;}
.globe-banner__media>img.globe-banner__map{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;opacity:.85;}
.globe-banner__cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  padding:clamp(20px,4vw,56px) clamp(20px,5vw,80px);
  background:linear-gradient(0deg,rgba(3,5,10,.82) 0%,rgba(3,5,10,0) 100%);pointer-events:none;}
.globe-banner__cap h2{color:#fff;font-size:clamp(20px,3.2vw,40px);line-height:1.12;font-weight:600;margin:0;letter-spacing:.2px;}
.globe-banner__lead{color:rgba(255,255,255,.74);font-size:clamp(12px,1.1vw,14px);line-height:1.6;max-width:380px;margin:0 90px 4px auto;text-align:right;pointer-events:auto;}
.globe-banner__sub{background:#05070d;padding:14px clamp(20px,5vw,80px) 14px;text-align:right;margin-top:32px;}
.globe-banner__sub p{color:rgba(255,255,255,.74);font-size:clamp(12px,1.1vw,14px);line-height:1.6;max-width:380px;margin:0 0 0 auto;}
/* markers — flag chip pinned at true geographic coordinate */
.gmark{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;z-index:2;line-height:0;}
.gmark::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(216,154,78,.5);animation:gpulse 2.4s ease-out infinite;z-index:-1;}
@keyframes gpulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.7;}70%,100%{transform:translate(-50%,-50%) scale(3);opacity:0;}}
.gmark__flag{display:block;width:26px;height:17px;border-radius:3px;overflow:hidden;background:#15171d;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 3px 9px rgba(0,0,0,.7);transition:transform .2s var(--ease,ease);}
.gmark__flag img{width:100%;height:100%;object-fit:cover;display:block;}
.gmark:hover{z-index:9;}
.gmark:hover .gmark__flag,.gmark:focus-visible .gmark__flag{transform:scale(1.18);}
/* tooltip — restyled (T211 M3) */
.gtip{position:absolute;bottom:178%;left:50%;transform:translateX(-50%) translateY(10px) scale(.97);
  width:272px;background:linear-gradient(158deg,rgba(27,29,40,.985),rgba(12,13,19,.985));
  border:1px solid rgba(236,198,119,.30);border-radius:14px;padding:14px 16px;overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,.62),0 2px 0 rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform-origin:bottom center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease,ease),transform .24s var(--ease,ease);text-align:left;}
.gtip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#D89A4E,#ECC677,#D89A4E);z-index:1;}
.gmark--l .gtip{left:0;transform:translateX(0) translateY(10px) scale(.97);transform-origin:bottom left;}
.gmark--r .gtip{left:auto;right:0;transform:translateX(0) translateY(10px) scale(.97);transform-origin:bottom right;}
.gtip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:rgba(13,14,20,.985);
  filter:drop-shadow(0 1px 0 rgba(236,198,119,.18));}
.gmark--l .gtip::after{left:16px;}
.gmark--r .gtip::after{left:auto;right:16px;transform:none;}
.gmark:hover .gtip,.gmark:focus-within .gtip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}
.gmark--l:hover .gtip,.gmark--l:focus-within .gtip{transform:translateX(0) translateY(0) scale(1);}
.gmark--r:hover .gtip,.gmark--r:focus-within .gtip{transform:translateX(0) translateY(0) scale(1);}
.gtip__head{display:flex;align-items:center;gap:10px;margin:-14px -16px 12px;padding:12px 16px;
  background:linear-gradient(90deg,rgba(216,154,78,.18),rgba(216,154,78,.04));
  border-bottom:1px solid rgba(236,198,119,.20);}
.gtip__head img{width:34px;height:24px;object-fit:cover;border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.22);}
.gtip__co{color:#fff;font-weight:700;font-size:15px;letter-spacing:.2px;}
.gtip__office{display:block;color:var(--gold,#ECC677);font-weight:600;font-size:12.5px;margin-bottom:9px;letter-spacing:.2px;}
.gtip__line{display:flex;gap:9px;align-items:flex-start;color:rgba(255,255,255,.85);font-size:12px;line-height:1.5;margin-top:7px;}
.gtip__line svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--gold,#D89A4E);}
@media(max-width:720px){
  /* VSXTM-87: trên mobile, đưa tiêu đề + đoạn mô tả XUỐNG DƯỚI bản đồ
   * (thay vì overlay lên) để tránh bị các flag/tooltip che nội dung. */
  .globe-banner__cap{position:static;flex-direction:column;align-items:flex-start;gap:10px;
    padding:16px clamp(16px,4vw,32px);background:#05070d;pointer-events:auto;}
  .gmark__flag{width:20px;height:13px;}
  .gtip{width:240px;}
  .globe-banner__sub{text-align:left;padding:10px clamp(16px,4vw,32px);margin-top:0;}
  .globe-banner__sub p{max-width:100%;margin:0;}
  .globe-banner__lead{text-align:left;max-width:100%;margin:0;font-size:12px;}
}

/* ===== Contact form + map (was #vcn-contact) ===== */
.contact-outer{display:grid;grid-template-columns:2fr 3fr;gap:24px;align-items:stretch;margin-top:8px;margin-bottom:15px;}
.contact-map-col{border-radius:18px;overflow:hidden;height:100%;}
.contact-map-col iframe{width:100%;border:0;display:block;height:100%;min-height:300px;}
.contact-grid{display:flex;flex-direction:column;gap:0;padding-bottom:0;
  border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.02));}
.contact-grid .cform{padding:clamp(10px,1.4vw,16px) !important;display:flex;flex-direction:column;gap:10px;margin:0;}
.contact-grid .cinfo{padding:clamp(12px,1.6vw,18px);display:flex;flex-direction:column;gap:10px;margin:0;
  border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);}
.contact-grid .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.contact-grid .cform label{display:block;margin-bottom:8px;font-size:11px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.02em;}
.contact-grid .cform input,.contact-grid .cform textarea{width:100%;box-sizing:border-box;padding:8px 11px;font-size:14px;}
.contact-grid .cform textarea{min-height:60px;resize:vertical;}
.contact-grid .cinfo .cinfo__block{margin-bottom:0;}
.contact-grid .cinfo .cinfo__block h3{margin-bottom:5px;font-size:14px;}
.contact-grid .cinfo .cinfo__row{padding:2px 0;font-size:13px;}
@media(max-width:760px){
  .contact-outer{grid-template-columns:1fr;}
  .contact-map-col{min-height:480px;}
}
main.plp.mona-contact-page{padding-bottom:15px;}
@media(max-width:480px){
  .contact-grid .cform .row2{grid-template-columns:1fr;}
}