/* ═══════════════════════════════════════════════
   CONTACT.CSS — Contact page only
   Vietnam City Breaks
   ═══════════════════════════════════════════════ */

/* ── Hero (compact) ── */
.ct-hero{position:relative;min-height:340px;display:flex;align-items:flex-end;justify-content:center}
.ct-hero-clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.ct-hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?w=1920&q=85') center/cover no-repeat;animation:kenBurns 18s ease-in-out infinite alternate}
.ct-hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(15,15,35,.78) 0%,rgba(10,60,60,.62) 100%)}
.ct-hero-content{position:relative;z-index:2;width:100%;max-width:var(--mw);padding:4rem 1.25rem 3rem;margin:0 auto}

.ct-breadcrumb{margin-bottom:1.1rem}
.ct-breadcrumb ol{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font-size:.8rem;color:rgba(255,255,255,.65)}
.ct-breadcrumb ol li:not(:last-child)::after{content:'/';margin:0 .5rem;opacity:.5}
.ct-breadcrumb ol a{color:rgba(255,255,255,.65);transition:color .2s}
.ct-breadcrumb ol a:hover{color:#fff}
.ct-breadcrumb ol li:last-child{color:rgba(255,255,255,.9)}

.ct-hero-pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.13);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#FFD580;padding:.35rem .9rem;border-radius:20px;font-size:.78rem;font-weight:600;margin-bottom:1rem}
.ct-hero-content h1{font-family:var(--fh);color:#fff;font-size:clamp(1.75rem,4vw,2.9rem);font-weight:800;line-height:1.18;margin-bottom:.7rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.ct-hero-content p{color:rgba(255,255,255,.88);font-size:clamp(.95rem,2vw,1.1rem);max-width:60ch;line-height:1.6}

/* ── Layout: form + sidebar ── */
.ct-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}

/* Form panel */
.ct-form-panel{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-card);padding:1.75rem;border:1px solid var(--border)}
.ct-form-head h2{font-family:var(--fh);font-size:1.4rem;font-weight:800;color:var(--text-h);margin-bottom:.35rem}
.ct-form-head p{font-size:.9rem;color:var(--text-b);line-height:1.6;margin-bottom:1.4rem}
.ct-form{display:flex;flex-direction:column;gap:1.1rem}
.ct-field{display:flex;flex-direction:column;gap:.35rem}
.ct-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ct-label{font-family:var(--fh);font-size:.85rem;font-weight:700;color:var(--text-h)}
.ct-req{color:var(--primary)}
.ct-input,.ct-select,.ct-textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-btn);padding:.7rem .85rem;font-family:var(--fb);font-size:.92rem;color:var(--text-h);background:#fff;transition:border-color .2s,box-shadow .2s}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--text-m)}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,82,26,.12)}
.ct-input.invalid,.ct-select.invalid,.ct-textarea.invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.ct-textarea{resize:vertical;min-height:120px;line-height:1.6}
.ct-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238888AA' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem;cursor:pointer}
.ct-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--text-b);line-height:1.5}
.ct-consent input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--primary);cursor:pointer}
.ct-consent.invalid{color:#dc2626}
.ct-consent a{color:var(--primary);text-decoration:underline}
.ct-submit{margin-top:.3rem;width:100%;justify-content:center}
.ct-form-note{font-size:.78rem;color:var(--text-m);text-align:center;margin-top:-.3rem}

/* Success state */
.ct-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:1.5rem .5rem;gap:.6rem}
.ct-success.is-visible{display:flex}
.ct-success-ico{width:64px;height:64px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.3rem}
.ct-success h3{font-family:var(--fh);font-size:1.25rem;font-weight:800;color:var(--text-h)}
.ct-success p{font-size:.92rem;color:var(--text-b);line-height:1.6;max-width:42ch}
.ct-success .btn-outline{margin-top:.5rem}

/* Sidebar — quick contact */
.ct-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:.65rem}
.ct-side-title{font-family:var(--fh);font-size:1.1rem;font-weight:800;color:var(--text-h);margin-bottom:.25rem}
.ct-channel{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:1px solid var(--border);border-radius:12px;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
a.ct-channel:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--primary)}
.ct-channel-ico{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ct-channel-ico.ct-ico-wa{background:#e7f8ef;color:#25D366}
.ct-channel-ico.ct-ico-zalo{background:#e8f1ff;color:#0068FF}
.ct-channel-body{display:flex;flex-direction:column;min-width:0}
.ct-channel-label{font-size:.74rem;color:var(--text-m);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ct-channel-val{font-family:var(--fh);font-size:.9rem;font-weight:700;color:var(--text-h);overflow-wrap:anywhere}
.ct-channel-static{cursor:default}
.ct-socials{display:flex;gap:.6rem;margin-top:.35rem}
.ct-soc{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-b);transition:background .2s,color .2s,border-color .2s}
.ct-soc svg{width:18px;height:18px}
.ct-soc:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── Map ── */
.ct-map{height:420px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-card)}
.ct-map iframe{width:100%;height:100%;border:0;display:block}

/* ── Responsive ── */
@media(max-width:1024px){
  .ct-side{position:static}
}
@media(max-width:768px){
  .ct-hero{min-height:300px}
  .ct-hero-content{padding:3.25rem 1.25rem 2.25rem}
  .ct-layout{grid-template-columns:1fr;gap:1.5rem}
  .ct-form-panel{padding:1.1rem}
  .ct-map{height:300px}
  .ct-submit{padding:.85rem 1.5rem;min-height:48px}
  .ct-channel{padding:.85rem .9rem;min-height:60px}
}
@media(max-width:480px){
  .ct-field-row{grid-template-columns:1fr;gap:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  .ct-hero-bg{animation:none}
}

/* ═══════════════════════════════════════════════
   FORMINATOR THEMING (contact form #545)
   Re-skins Forminator "basic" markup to match the .ct-* design.
   Scoped to .page-contact; !important needed because Forminator's own
   stylesheet often loads after the theme sheet.
   ═══════════════════════════════════════════════ */

/* Hide the empty render-placeholder <div> Forminator prints before the <form> */
.page-contact div.forminator-custom-form{display:none!important}

.page-contact .forminator-custom-form{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}

/* Rows + columns → mirror .ct-field-row (2-up at desktop) */
.page-contact .forminator-row{display:flex!important;flex-wrap:wrap!important;gap:1.1rem!important;margin:0 0 1.1rem!important}
.page-contact .forminator-row:last-of-type{margin-bottom:0!important}
.page-contact .forminator-col{flex:1 1 100%;padding:0!important;margin:0!important;min-width:0}
.page-contact .forminator-col-6{flex:1 1 calc(50% - .55rem)}
.page-contact .forminator-col-12{flex:1 1 100%}
.page-contact .forminator-field{margin:0!important;padding:0!important}

/* Labels */
.page-contact .forminator-label{display:block!important;font-family:var(--fh)!important;font-size:.85rem!important;font-weight:700!important;color:var(--text-h)!important;margin:0 0 .35rem!important;text-transform:none!important}
.page-contact .forminator-required{color:var(--primary)!important}

/* Text / email / phone inputs + textarea */
.page-contact .forminator-input,
.page-contact textarea.forminator-textarea,
.page-contact select.forminator-select--field{
  width:100%!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;
  padding:.7rem .85rem!important;font-family:var(--fb)!important;font-size:.92rem!important;color:var(--text-h)!important;
  background:#fff!important;box-shadow:none!important;height:auto!important;min-height:44px!important;line-height:1.45!important;transition:border-color .2s,box-shadow .2s!important}
.page-contact .forminator-input::placeholder,
.page-contact textarea.forminator-textarea::placeholder{color:var(--text-m)!important;opacity:1}
.page-contact textarea.forminator-textarea{min-height:120px!important;resize:vertical!important;line-height:1.6!important}
.page-contact .forminator-input:focus,
.page-contact textarea.forminator-textarea:focus,
.page-contact select.forminator-select--field:focus{outline:none!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(232,82,26,.12)!important}

/* Select2 dropdowns (Country / I'm interested in) → look like .ct-select.
   NOTE: Forminator renders these WITHOUT the `select2-container--default`
   theme class, so selectors must NOT depend on `--default`. */
.page-contact .select2-container{width:100%!important;height:auto!important}
.page-contact .select2-container .select2-selection{box-sizing:border-box!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;min-height:48px!important;height:48px!important;background:#fff!important;display:flex!important;align-items:center!important;box-shadow:none!important;outline:none!important}
.page-contact .select2-container .select2-selection--single{height:48px!important;line-height:normal!important}
.page-contact .select2-container .select2-selection--single .select2-selection__rendered{padding:0 2rem 0 .85rem!important;color:var(--text-h)!important;line-height:46px!important;font-size:.92rem!important}
.page-contact .select2-container .select2-selection__placeholder{color:var(--text-m)!important}
.page-contact .select2-container .select2-selection--single .select2-selection__arrow{height:46px!important;right:.7rem!important;top:0!important}
.page-contact .select2-container .select2-selection--single .select2-selection__arrow b{border-color:var(--text-m) transparent transparent transparent!important}
/* Custom caret (matches .ct-select chevron) */
.page-contact .select2-container--open .select2-selection,
.page-contact .select2-container--focus .select2-selection{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(232,82,26,.12)!important}

/* Open dropdown panel (appended to <body>, scoped to form 545) */
.select2-container--open .select2-dropdown{border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;box-shadow:var(--sh-card)!important;overflow:hidden;margin-top:4px}
.select2-results__option--highlighted[aria-selected]{background:var(--primary)!important}

/* GDPR / consent checkbox */
.page-contact .forminator-checkbox,
.page-contact .forminator-field-checkbox label,
.page-contact .forminator-gdpr label{font-size:.82rem!important;color:var(--text-b)!important;line-height:1.5!important}
.page-contact .forminator-checkbox a{color:var(--primary)!important;text-decoration:underline!important}

/* Submit button → .btn-primary full-width */
.page-contact .forminator-button-submit,
.page-contact button.forminator-button.forminator-button-submit{
  width:100%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--primary)!important;color:#fff!important;border:0!important;border-radius:var(--r-btn)!important;
  font-family:var(--fh)!important;font-weight:700!important;font-size:1rem!important;padding:.9rem 1.5rem!important;
  min-height:48px!important;cursor:pointer!important;box-shadow:0 4px 14px rgba(232,82,26,.3)!important;
  transition:background .2s,transform .2s!important;margin-top:.4rem!important}
.page-contact .forminator-button-submit:hover,
.page-contact button.forminator-button.forminator-button-submit:hover{background:var(--primary-dark)!important;transform:translateY(-2px)}

/* Validation + response messages */
.page-contact .forminator-error-message{color:#dc2626!important;font-size:.8rem!important;margin-top:.3rem!important}
.page-contact .forminator-input.forminator-has_error,
.page-contact textarea.forminator-textarea.forminator-has_error{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.1)!important}
.page-contact .forminator-response-message{border-radius:var(--r-btn)!important;font-size:.9rem!important;padding:.75rem 1rem!important;margin:0 0 1rem!important}

/* Mobile: stack all Forminator columns */
@media(max-width:600px){
  .page-contact .forminator-col-6{flex:1 1 100%}
}