/* SAPAMEFA V9.5 — Contact route; Page Hero owned by sapamefa-hero.css. */
.sapamefa-contact-page {
  
  
  
  
  
  
  color: var(--smf-color-text);
  background: var(--smf-color-surface);
  font-family:var(--smf-font-sans);
}
.sapamefa-contact-page *,
.sapamefa-contact-page *::before,
.sapamefa-contact-page *::after { box-sizing: border-box; }
.sapamefa-contact-page a { text-decoration: none; }
.sapamefa-contact-page .contact-container { width: min(var(--smf-container-content), calc(100% - var(--smf-gutter) * 2)); margin: 0 auto; }
.sapamefa-contact-page .contact-main { padding: 76px 0 0; background: var(--smf-color-surface); }
.sapamefa-contact-page .contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 54px; align-items: start; }
.sapamefa-contact-page .contact-eyebrow { display: block; margin-bottom: 10px; color: var(--smf-color-teal); font-size: var(--smf-font-size-2xs); line-height: var(--smf-line-title); font-weight:var(--smf-font-weight-bold); letter-spacing: var(--smf-tracking-eyebrow); text-transform: uppercase; }
.sapamefa-contact-page .contact-company h2 { margin: 0 0 18px; color: var(--smf-color-deep); font-size: var(--smf-section-heading-title-size); line-height: var(--smf-line-section); font-weight:var(--smf-font-weight-bold); }
.sapamefa-contact-page .contact-company__intro { margin: 0; font-size: var(--smf-font-size-md); line-height: var(--smf-line-body); color: var(--smf-color-text-muted); }
.sapamefa-contact-page .contact-info { margin-top: var(--smf-space-8); padding-top: 26px; border-top: var(--smf-border-width-hairline) solid var(--smf-color-border); display: grid; gap: var(--smf-space-5); }
.sapamefa-contact-page .contact-info__item { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 15px; align-items: start; }
.sapamefa-contact-page .contact-info__icon { width: 46px; height: 46px; border-radius:var(--smf-radius-control); display: inline-flex; align-items: center; justify-content: center; color: var(--smf-color-teal); background: var(--smf-color-teal-10);  }
.sapamefa-contact-page .contact-info__item h3 { margin: 2px 0 5px; color: var(--smf-color-deep); font-size: var(--smf-font-size-2xs); line-height: var(--smf-line-title); font-weight:var(--smf-font-weight-bold); letter-spacing: var(--smf-tracking-normal); }
.sapamefa-contact-page .contact-info__item p,
.sapamefa-contact-page .contact-info__item a { margin: 0; color: var(--smf-color-text-muted); font-size: var(--smf-font-size-sm); line-height: var(--smf-line-body); }
.sapamefa-contact-page .contact-info__item a:hover { color: var(--smf-color-teal); }
.sapamefa-contact-page .contact-form-card { max-width: 720px; border: var(--smf-border-width-hairline) solid var(--smf-color-border); border-radius:var(--smf-radius-feature); padding: 34px; background: var(--smf-color-surface-soft);  }
.sapamefa-contact-page .contact-form-card h2 { margin: 0 0 9px; color: var(--smf-color-deep); font-size: var(--smf-font-size-xl); line-height: var(--smf-line-heading); font-weight:var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-wide); text-transform: uppercase; text-align: center; }
.sapamefa-contact-page .contact-form-card__intro { margin: 0 0 var(--smf-space-6); color: var(--smf-color-text-muted); font-size: var(--smf-font-size-xs); line-height: var(--smf-line-body); text-align: center; }
.sapamefa-contact-page .contact-form-success { margin-bottom: var(--smf-space-5); border-radius:var(--smf-radius-control); padding: 14px var(--smf-space-4); color: var(--smf-color-success); background: var(--smf-color-success-soft); border: var(--smf-border-width-hairline) solid var(--smf-color-success); font-size: var(--smf-font-size-sm); line-height: var(--smf-line-body); }
.sapamefa-contact-page .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.sapamefa-contact-page .contact-field { margin-bottom: 17px; }
.sapamefa-contact-page .contact-field label { display: block; margin-bottom: 7px; color: var(--smf-color-text-muted); font-size: var(--smf-font-size-2xs); line-height: var(--smf-line-compact); font-weight:var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-eyebrow); text-transform: uppercase; }
.sapamefa-contact-page .contact-field input,
.sapamefa-contact-page .contact-field select,
.sapamefa-contact-page .contact-field textarea { width: 100%; border: var(--smf-border-width-hairline) solid var(--smf-color-border); border-radius:var(--smf-radius-control); background: var(--smf-color-surface); color: var(--smf-neutral-800); font: inherit; font-size: var(--smf-font-size-sm); line-height: var(--smf-line-compact); padding: var(--smf-space-3) 14px; outline: none; transition:border-color var(--smf-motion-fast) var(--smf-ease-standard), background var(--smf-motion-fast) var(--smf-ease-standard); }
.sapamefa-contact-page .contact-field textarea { min-height: 126px; resize: vertical; }
.sapamefa-contact-page .contact-field input:focus,
.sapamefa-contact-page .contact-field select:focus,
.sapamefa-contact-page .contact-field textarea:focus { border-color: var(--smf-color-teal);  }
.sapamefa-contact-page .contact-submit { width: 100%; border: 0; border-radius:var(--smf-radius-control); padding: 15px 22px; cursor: pointer; color: var(--smf-color-white); background: var(--smf-color-brand-teal); font-size: var(--smf-font-size-xs); line-height: var(--smf-line-compact); font-weight:var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-eyebrow); text-transform: uppercase;  transition:transform var(--smf-motion-fast) var(--smf-ease-standard), color var(--smf-motion-fast) var(--smf-ease-standard); }
.sapamefa-contact-page .contact-submit:hover { color: var(--smf-color-deep); background: var(--smf-color-bright); transform: none;  }
.sapamefa-contact-page .contact-privacy { max-width: 94%; margin: 14px auto var(--smf-space-4); color: var(--smf-color-teal); font-size: var(--smf-font-size-2xs); line-height: var(--smf-line-compact); font-style: normal; text-align: center; }
.sapamefa-contact-page .contact-map { width: 100%; height: 504px; margin-top: 62px; overflow: hidden; border-top: var(--smf-border-width-hairline) solid var(--smf-color-border); background: var(--smf-color-light); }
.sapamefa-contact-page .contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 1023px) {
  .sapamefa-contact-page .contact-layout { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 767px) {
  .sapamefa-contact-page .contact-container { width: min(var(--smf-container-content), calc(100% - var(--smf-gutter) * 2)); }
  .sapamefa-contact-page .contact-main { padding: 54px 0 0; }
  .sapamefa-contact-page .contact-form-card { padding: var(--smf-space-6) 18px; border-radius:var(--smf-radius-feature); }
  .sapamefa-contact-page .contact-form-grid { grid-template-columns: 1fr; gap: 0; }
  .sapamefa-contact-page .contact-map { height: 408px; margin-top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .sapamefa-contact-page *, .sapamefa-contact-page *::before, .sapamefa-contact-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* V8.01B 4H — canonical contact-page layer */
.sapamefa-contact-page{font-family:var(--smf-font-sans);color:var(--smf-color-text);background:var(--smf-color-surface);}
.sapamefa-contact-page .contact-container{width:min(var(--smf-container-wide),calc(100% - var(--smf-gutter) * 2));margin-inline: auto;}
.sapamefa-contact-main{padding-block: var(--smf-section-standard);background:var(--smf-color-surface);}
.sapamefa-contact-company{min-width:0;}
.sapamefa-contact-info{display:grid;gap: var(--smf-space-3);}
.sapamefa-contact-map{margin-top: var(--smf-section-compact);background:var(--smf-color-surface-soft);}
@media(max-width:639px){.sapamefa-contact-main{padding-block: var(--smf-section-standard);}.sapamefa-contact-map{margin-top: var(--smf-section-compact);}}

.sapamefa-form-errors{margin-block:var(--smf-space-4);padding:var(--smf-space-4);border:var(--smf-border-width-hairline) solid var(--smf-color-danger,#b42318);border-radius:var(--smf-radius-control);color:var(--smf-color-danger,#b42318);background:var(--smf-color-surface);}
.sapamefa-form-errors:focus-visible{outline:var(--smf-border-width-emphasis) solid var(--smf-color-focus);outline-offset:var(--smf-space-1);}

/* CHUNG-10 — privacy consent checkbox, shared across home/contact/product-modal.
   The checkbox is one text-em high and stays directly before the original
   privacy sentence. Context-specific rules below restore the original
   privacy font size and color while overriding generic field-label/input rules. */
.sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  letter-spacing:normal;
  text-transform:none;
}
.sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent-copy{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:normal;
  text-align:inherit;
  text-transform:none;
  cursor:pointer;
}
.sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent-copy a{
  color:inherit;
  text-decoration:underline;
}
.sapamefa-contact-page .sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent.contact-privacy{
  max-width:94%;
  margin:14px auto var(--smf-space-4);
  color:var(--smf-color-teal);
  font-size:var(--smf-font-size-2xs);
  font-style:normal;
  font-weight:var(--smf-font-weight-medium,normal);
  line-height:var(--smf-line-compact);
  text-align:center;
}
.sapamefa-product-modal .sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent.contact-privacy{
  max-width:94%;
  margin:12px auto calc(var(--smf-space-4) * 0.88);
  color:var(--smf-color-teal);
  font-size:calc(var(--smf-font-size-2xs) * 0.88);
  font-style:normal;
  font-weight:var(--smf-font-weight-medium,normal);
  line-height:var(--smf-line-compact);
  text-align:center;
}
.sapamefa-contact-page .sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent input[type="checkbox"],
.sapamefa-product-modal .sapamefa-form-consent-field.sapamefa-form-field .sapamefa-form-consent input[type="checkbox"]{
  appearance:auto;
  flex:0 0 1em;
  width:1em;
  min-width:1em;
  max-width:1em;
  height:1em;
  min-height:1em;
  margin:.08em 0 0;
  padding:0;
  border-radius:2px;
  background:transparent;
  cursor:pointer;
}
.sapamefa-form-consent input[type="checkbox"]:focus-visible{
  outline:var(--smf-border-width-emphasis) solid var(--smf-color-focus);
  outline-offset:var(--smf-space-1);
}
.contact-submit:disabled,
.sapamefa-form-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.contact-privacy a{
  color:inherit;
  text-decoration:underline;
}

/* ND34 — Product Modal form restored to the Trang Liên hệ form's own
   component/markup/styling (background, radius, typography, structure),
   uniformly scaled to ~88% (12% smaller) so the same visual language fits
   the modal's right column. Every rule below mirrors the
   .sapamefa-contact-page .contact-form-card block above 1:1, values
   multiplied by 0.88 (via calc() for design tokens, so the scale-down tracks
   whatever those tokens resolve to) — no new visual language introduced.
   Scope strictly limited to .sapamefa-product-modal; the
   .sapamefa-contact-page rules above (Trang Liên hệ) are untouched. */
.sapamefa-product-modal .contact-form-card { border: var(--smf-border-width-hairline) solid var(--smf-color-border); border-radius: var(--smf-radius-feature); background: var(--smf-color-surface-soft); box-sizing: border-box; padding: 5mm; }
.sapamefa-product-modal .contact-form-card h2 { margin: 0 0 8px; color: var(--smf-color-deep); font-size: calc(var(--smf-font-size-xl) * 0.88); line-height: var(--smf-line-heading); font-weight: var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-wide); text-transform: uppercase; text-align: center; }
.sapamefa-product-modal .contact-form-card__intro { margin: 0 0 calc(var(--smf-space-6) * 0.88); color: var(--smf-color-text-muted); font-size: calc(var(--smf-font-size-xs) * 0.88); line-height: var(--smf-line-body); text-align: center; }
.sapamefa-product-modal .contact-form-success { margin-bottom: calc(var(--smf-space-5) * 0.88); border-radius: var(--smf-radius-control); padding: 12px calc(var(--smf-space-4) * 0.88); color: var(--smf-color-success); background: var(--smf-color-success-soft); border: var(--smf-border-width-hairline) solid var(--smf-color-success); font-size: calc(var(--smf-font-size-sm) * 0.88); line-height: var(--smf-line-body); }
.sapamefa-product-modal .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sapamefa-product-modal .contact-field { margin-bottom: 15px; }
.sapamefa-product-modal .contact-field label { display: block; margin-bottom: 6px; color: var(--smf-color-text-muted); font-size: calc(var(--smf-font-size-2xs) * 0.88); line-height: var(--smf-line-compact); font-weight: var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-eyebrow); text-transform: uppercase; }
.sapamefa-product-modal .contact-field input,
.sapamefa-product-modal .contact-field select,
.sapamefa-product-modal .contact-field textarea { width: 100%; border: var(--smf-border-width-hairline) solid var(--smf-color-border); border-radius: var(--smf-radius-control); background: var(--smf-color-surface); color: var(--smf-neutral-800); font: inherit; font-size: calc(var(--smf-font-size-sm) * 0.88); line-height: var(--smf-line-compact); padding: calc(var(--smf-space-3) * 0.88) 12px; outline: 0; transition: border-color var(--smf-motion-fast) var(--smf-ease-standard); }
.sapamefa-product-modal .contact-field textarea { min-height: 111px; resize: vertical; }
.sapamefa-product-modal .contact-field input:focus,
.sapamefa-product-modal .contact-field select:focus,
.sapamefa-product-modal .contact-field textarea:focus { border-color: var(--smf-color-teal); }
.sapamefa-product-modal .contact-field input[readonly] { background: var(--smf-color-surface-soft); color: var(--smf-color-text-muted); cursor: default; }
.sapamefa-product-modal .contact-submit { display: block; width: 100% !important; max-width: none !important; margin: 0; flex: none; border: 0; border-radius: var(--smf-radius-control); padding: 13px 19px; cursor: pointer; color: var(--smf-color-white); background: var(--smf-color-brand-teal); font-size: calc(var(--smf-font-size-xs) * 0.88); line-height: var(--smf-line-compact); font-weight: var(--smf-font-weight-extrabold); letter-spacing: var(--smf-tracking-eyebrow); text-transform: uppercase; text-align: center; }
.sapamefa-product-modal .contact-submit:hover { color: var(--smf-color-deep); background: var(--smf-color-bright); }
.sapamefa-product-modal .contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.sapamefa-product-modal .contact-privacy { max-width: 94%; margin: 12px auto calc(var(--smf-space-4) * 0.88); color: var(--smf-color-teal); font-size: calc(var(--smf-font-size-2xs) * 0.88); line-height: var(--smf-line-compact); font-style: normal; text-align: center; }
/* ND34 mục 7.1.3 — belt-and-braces hide for the native submit target iframe,
   independent of the `hidden` attribute already on it. */
.sapamefa-product-modal [data-sapamefa-product-modal-submit-target] { display: none; }
@media (max-width: 767px) {
  .sapamefa-product-modal .contact-form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* SAPAMEFA_V3.42 — contact company role mapping. */
.sapamefa-contact-page .contact-eyebrow{
  color:var(--smf-color-brand-teal);
  font-size:var(--smf-role-label-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-title);
  letter-spacing:var(--smf-tracking-eyebrow);
}
.sapamefa-contact-page .contact-company h2{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-section-heading-size);
  font-weight:var(--smf-font-weight-bold);
  line-height:var(--smf-line-display);
  letter-spacing:var(--smf-tracking-display);
}
.sapamefa-contact-page .contact-company__intro{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-section-description-size);
  line-height:var(--smf-line-lead);
}
.sapamefa-contact-page .contact-info__icon{
  color:var(--smf-color-brand-teal);
  font-size:var(--smf-role-card-title-size);
}
.sapamefa-contact-page .contact-info__item h3{
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-label-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-title);
}
.sapamefa-contact-page .contact-info__item :is(p,a){
  color:var(--smf-color-text-strong);
  font-size:var(--smf-role-section-description-size);
  font-weight:var(--smf-font-weight-semibold);
  line-height:var(--smf-line-lead);
}


/* SAPAMEFA_V3.42 — contact company heading split locked by markup. */
.sapamefa-contact-page .sapamefa-contact-company__name > span {
  display: block;
}