/* ===================== Contact page (1.9.8) ===================== */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---- hero: twinkling star field ---- */
.page-hero .hero-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero .hero-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.75); opacity: 0; animation: twinkle 3.6s ease-in-out infinite; }
.page-hero .hero-stars i::before, .page-hero .hero-stars i::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.8); transform: translate(-50%, -50%); border-radius: 2px; }
.page-hero .hero-stars i::before { width: 14px; height: 1px; } .page-hero .hero-stars i::after { width: 1px; height: 14px; }
.page-hero .hero-stars i:nth-child(1) { left: 8%; top: 22%; animation-delay: -.2s; }
.page-hero .hero-stars i:nth-child(2) { left: 18%; top: 72%; animation-delay: -1.4s; transform: scale(.7); }
.page-hero .hero-stars i:nth-child(3) { left: 27%; top: 14%; animation-delay: -2.6s; transform: scale(.5); }
.page-hero .hero-stars i:nth-child(4) { left: 36%; top: 84%; animation-delay: -.9s; }
.page-hero .hero-stars i:nth-child(5) { left: 44%; top: 32%; animation-delay: -3.1s; transform: scale(.6); }
.page-hero .hero-stars i:nth-child(6) { left: 52%; top: 66%; animation-delay: -1.9s; transform: scale(.8); }
.page-hero .hero-stars i:nth-child(7) { left: 59%; top: 12%; animation-delay: -.5s; }
.page-hero .hero-stars i:nth-child(8) { left: 64%; top: 48%; animation-delay: -2.2s; transform: scale(.5); }
.page-hero .hero-stars i:nth-child(9) { left: 70%; top: 80%; animation-delay: -3.4s; }
.page-hero .hero-stars i:nth-child(10) { left: 76%; top: 24%; animation-delay: -1.1s; transform: scale(.7); }
.page-hero .hero-stars i:nth-child(11) { left: 82%; top: 62%; animation-delay: -2.8s; }
.page-hero .hero-stars i:nth-child(12) { left: 88%; top: 16%; animation-delay: -.7s; transform: scale(.6); }
.page-hero .hero-stars i:nth-child(13) { left: 93%; top: 44%; animation-delay: -2.4s; }
.page-hero .hero-stars i:nth-child(14) { left: 4%; top: 52%; animation-delay: -1.7s; transform: scale(.5); }
.page-hero .hero-stars i:nth-child(15) { left: 48%; top: 8%; animation-delay: -3.3s; transform: scale(.4); }
.page-hero .hero-stars i:nth-child(16) { left: 30%; top: 50%; animation-delay: -.3s; transform: scale(.4); }
.page-hero .hero-stars i:nth-child(17) { left: 72%; top: 6%; animation-delay: -2s; transform: scale(.5); }
.page-hero .hero-stars i:nth-child(18) { left: 96%; top: 86%; animation-delay: -1.2s; transform: scale(.7); }
@keyframes twinkle { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
.page-hero.is-contact::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); background-size: 250% 100%; animation: heroSheen 7s ease-in-out infinite; }
@keyframes heroSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

/* ---- connect: photos + ways to reach ---- */
.connect-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.connect-photos { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; width: 100%; justify-self: center; }
.connect-photos .cp { position: absolute; margin: 0; border-radius: 26px; overflow: hidden; background: #dbe4f5; box-shadow: 0 30px 60px -25px rgba(11,31,58,.45), 0 0 0 6px rgba(255,255,255,.9); }
.connect-photos .cp img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.connect-photos:hover .cp img { transform: scale(1.12); }
.connect-photos .cp-1 { left: 6%; top: 10%; width: 66%; height: 74%; z-index: 2; animation: cpFloat 8s ease-in-out infinite; }
.connect-photos .cp-2 { right: 0; top: 0; width: 40%; height: 38%; z-index: 3; animation: cpFloat 9s ease-in-out infinite -3s; }
.connect-photos .cp-3 { right: 4%; bottom: 2%; width: 44%; height: 42%; z-index: 3; animation: cpFloat 10s ease-in-out infinite -6s; }
.connect-photos .cp-empty { display: grid; place-items: center; color: var(--cobalt); background: linear-gradient(135deg, #E3EAFB, #fff); }
.connect-photos .cp-empty svg { width: 64px; height: 64px; }
@keyframes cpFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: .6deg; } }
.connect-photos .cp-glow { position: absolute; inset: 8% 4% 4% 0; z-index: 0; border-radius: 50%; filter: blur(50px); opacity: .55;
  background: conic-gradient(from var(--spin), #1F4FD8, #22D3EE, #A855F7, #F472B6, #1F4FD8); animation: spin 14s linear infinite; }
.connect-photos .cp-ring { position: absolute; left: 0; top: 4%; width: 78%; aspect-ratio: 1; z-index: 1; border-radius: 50%; border: 2px dashed rgba(31,79,216,.35); animation: ringRot 40s linear infinite; }
.connect-photos .cp-ring::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #1F4FD8; top: 50%; left: -8px; box-shadow: 0 0 0 6px rgba(31,79,216,.18), 0 0 18px #1F4FD8; }
@keyframes spin { to { --spin: 360deg; } }
@keyframes ringRot { to { transform: rotate(360deg); } }
.connect-photos .cp-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 16px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 40px -18px rgba(11,31,58,.45); font-size: .85rem; color: var(--ink); }
.connect-photos .cp-badge small { display: block; color: var(--mute); font-size: .75rem; }
.connect-photos .cp-badge-reply { left: -2%; bottom: 8%; animation: cpFloat 7s ease-in-out infinite -2s; }
.connect-photos .cp-badge-loc { left: 30%; top: 0; animation: cpFloat 8s ease-in-out infinite -4s; font-weight: 700; }
.connect-photos .cp-badge-loc svg { width: 18px; height: 18px; color: #E11D48; }
.live-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: livePing 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes livePing { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.cp-spark { position: absolute; z-index: 5; width: 22px; height: 22px; pointer-events: none; animation: sparkPop 3.2s ease-in-out infinite; }
.cp-spark::before, .cp-spark::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 4px; transform: translate(-50%, -50%); background: linear-gradient(#fff, #FDE68A); box-shadow: 0 0 10px #FDE68A; }
.cp-spark::before { width: 22px; height: 3px; } .cp-spark::after { width: 3px; height: 22px; }
.cp-spark.s1 { left: 4%; top: 6%; } .cp-spark.s2 { right: 44%; top: 40%; animation-delay: -1s; transform: scale(.7); }
.cp-spark.s3 { right: 2%; bottom: 46%; animation-delay: -2s; } .cp-spark.s4 { left: 46%; bottom: 0; animation-delay: -.5s; transform: scale(.6); }
@keyframes sparkPop { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 90deg; } }

.connect-info .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cobalt); }
.connect-info .eyebrow i { width: 28px; height: 2px; background: linear-gradient(90deg, var(--cobalt), #22D3EE); border-radius: 2px; }
.connect-title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; margin: .6rem 0 .8rem;
  background: linear-gradient(90deg, var(--ink) 0%, var(--cobalt) 45%, #7C3AED 70%, var(--ink) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textFlow 9s ease-in-out infinite; }
@keyframes textFlow { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.connect-lead { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 1.5rem; max-width: 560px; }

.reach-list { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.reach { --c: var(--cobalt); position: relative; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 18px; text-decoration: none; color: var(--ink); isolation: isolate;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--line), var(--line)) border-box; border: 1.5px solid transparent;
  box-shadow: 0 10px 30px -18px rgba(11,31,58,.35); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; overflow: hidden; }
.reach::before { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--spin), var(--c), #22D3EE, #A855F7, var(--c)); animation: spin 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.reach::after { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; }
a.reach:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--c) 55%, transparent); }
a.reach:hover::before, a.reach:hover::after { opacity: 1; }
.reach-ic { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); box-shadow: 0 10px 20px -8px var(--c); }
.reach-ic svg { width: 22px; height: 22px; }
.reach-ic::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--c); opacity: 0; animation: icPulse 2.8s ease-out infinite; }
.reach:nth-child(2) .reach-ic::after { animation-delay: .7s; } .reach:nth-child(3) .reach-ic::after { animation-delay: 1.4s; } .reach:nth-child(4) .reach-ic::after { animation-delay: 2.1s; }
@keyframes icPulse { 0% { opacity: .6; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
.reach-tx { min-width: 0; display: flex; flex-direction: column; }
.reach-tx small { color: var(--mute); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.reach-tx b { font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.reach-go { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .35s; }
.reach-go svg { width: 16px; height: 16px; }
a.reach:hover .reach-go { transform: translateX(4px) rotate(-45deg); }

.quick-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.quick-actions .qa { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem; }
.quick-actions .qa svg { width: 18px; height: 18px; }
.quick-actions .qa::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: btnShine 4.5s ease-in-out infinite; pointer-events: none; }
.quick-actions .qa:nth-child(2)::after { animation-delay: .6s; } .quick-actions .qa:nth-child(3)::after { animation-delay: 1.2s; } .quick-actions .qa:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes btnShine { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }
.qa-zalo { background: #0068FF; color: #fff; }
.qa-zalo:hover { background: #0052cc; color: #fff; }
.zalo-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; color: #0068FF; font-weight: 900; font-size: .8rem; }
button.qa { font: inherit; cursor: pointer; }

/* ---- map ---- */
.map-frame { position: relative; border-radius: 28px; overflow: hidden; height: clamp(320px, 42vw, 440px); isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(11,31,58,.5);
  background: radial-gradient(circle at 30% 40%, #DCE7FB, transparent 60%), radial-gradient(circle at 75% 70%, #F3E8FF, transparent 55%), #EEF3FB; }
.map-frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--spin), #1F4FD8, #22D3EE, #A855F7, #F472B6, #1F4FD8); animation: spin 8s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85) contrast(1.02); transition: filter .5s; }
.map-frame:hover iframe { filter: none; }
.map-card { position: absolute; z-index: 3; left: clamp(.8rem, 3vw, 2rem); bottom: clamp(.8rem, 3vw, 2rem); display: flex; align-items: center; gap: 1rem; max-width: min(520px, calc(100% - 1.6rem));
  padding: 1rem 1.2rem; border-radius: 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -20px rgba(11,31,58,.5); border: 1px solid rgba(255,255,255,.9); }
.map-card > div { min-width: 0; display: flex; flex-direction: column; }
.map-card b { font-size: 1rem; } .map-card span { color: var(--ink-soft); font-size: .88rem; }
.map-card .btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; } .map-card .btn svg { width: 15px; height: 15px; }
.map-pin { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #E11D48, #F472B6); box-shadow: 0 10px 20px -6px #E11D48; }
.map-pin svg { width: 22px; height: 22px; animation: pinBounce 2.4s ease-in-out infinite; }
.map-pin i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #E11D48; animation: livePing 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- CTA cards with aurora ---- */
.cta-glow .cta-card { position: relative; overflow: hidden; isolation: isolate; min-height: 230px; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.cta-glow .cta-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -25px rgba(11,31,58,.6); }
.cta-glow .cta-card > * { position: relative; z-index: 1; }
.cta-glow .cta-aurora { position: absolute !important; inset: -40%; z-index: 0 !important; opacity: .55; filter: blur(40px); pointer-events: none;
  background: conic-gradient(from var(--spin) at 70% 30%, transparent 0deg, #22D3EE 60deg, transparent 120deg, #A855F7 200deg, transparent 260deg, #F472B6 320deg, transparent 360deg); animation: spin 12s linear infinite; }
.cta-glow .is-media .cta-aurora { animation-direction: reverse; opacity: .45; }
.cta-glow .cta-float { position: absolute !important; right: 1.4rem; top: 1.2rem; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); animation: cpFloat 6s ease-in-out infinite; }
.cta-glow .cta-float svg { width: 44px; height: 44px; color: #fff; opacity: .95; }
.cta-glow .cta-card h3, .cta-glow .cta-card p { max-width: calc(100% - 110px); }
.cta-glow .cta-card .btn { display: inline-flex; align-items: center; gap: .4rem; }
.cta-glow .cta-card .btn svg { width: 16px; height: 16px; transition: transform .3s; }
.cta-glow .cta-card .btn:hover svg { transform: translateX(4px); }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .connect-grid { grid-template-columns: 1fr; }
  .connect-photos { max-width: 480px; }
}
@media (max-width: 760px) {
  .reach-list { grid-template-columns: 1fr; }
  .connect-photos { max-width: 360px; margin-bottom: .5rem; }
  .connect-photos .cp { border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(11,31,58,.45), 0 0 0 4px rgba(255,255,255,.9); }
  .connect-photos .cp-badge { font-size: .78rem; padding: .55rem .75rem; }
  .connect-photos .cp-badge-reply { left: 0; }
  .quick-actions .qa { flex: 1 1 calc(50% - .7rem); justify-content: center; }
  .map-frame { height: 380px; border-radius: 20px; }
  .map-card { flex-wrap: wrap; right: .8rem; gap: .7rem; padding: .85rem; }
  .map-card > div { flex: 1 1 0; }
  .map-pin { width: 40px; height: 40px; }
  .reach-tx b { font-size: .9rem; }
  .map-card .btn { width: 100%; justify-content: center; }
  .cta-glow .cta-float { width: 64px; height: 64px; border-radius: 18px; right: 1rem; top: 1rem; }
  .cta-glow .cta-float svg { width: 30px; height: 30px; }
  .cta-glow .cta-card h3, .cta-glow .cta-card p { max-width: calc(100% - 76px); }
  .cta-glow .cta-card p { max-width: none; }
  .page-hero .hero-stars i:nth-child(n+10) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-photos *, .reach *, .reach::before, .map-frame::before, .cta-glow * { animation: none !important; }
}