/* Popup theo mẫu: ảnh phối cảnh sạch bên trái, form trải nghiệm bên phải. */
html.cs-modal-open, html.cs-modal-open body { overflow: hidden !important; overscroll-behavior: none; }
.cs-modal {
  --modal-font: "Lato", sans-serif;
  position: fixed; inset: 0; width: min(960px, calc(100% - 40px)); max-width: none;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto; padding: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.9); border-radius: 23px;
  background: #fbfdfb; color: #41696c; font: 700 14px/1.5 var(--modal-font); font-synthesis: none;
  box-shadow: 0 24px 90px rgba(10,48,50,.24); scrollbar-width: thin; scrollbar-color: #a4c2bc #fbfdfb;
}
.cs-modal, .cs-modal *, .cs-modal *::before, .cs-modal *::after { box-sizing: border-box; }
.cs-modal:not([open]) { display: none; }
.cs-modal[open] { display: block; animation: cs-dialog .35s ease-out both; }
.cs-modal::backdrop { background: rgba(23,62,64,.36); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cs-modal__close-row { position: sticky; z-index: 3; top: 0; display: flex; justify-content: flex-end; height: 0; pointer-events: none; }
.cs-modal__close { display: flex; flex: 0 0 44px; justify-content: center; align-items: center; width: 44px; height: 44px; margin: 12px; padding: 11px; border: 1px solid #d9e7e2; border-radius: 50%; background: #fff; color: #187f85; cursor: pointer; pointer-events: auto; transition: background .2s,border-color .2s; }
.cs-modal__close svg { display: block; width: 20px; height: 20px; }
.cs-modal__close:hover { background: #eaf3ef; border-color: #97b9b3; }
.cs-modal :focus-visible { outline: 2px solid #187f85; outline-offset: 4px; }
.cs-modal__layout { display: grid; grid-template-columns: 41% minmax(0,1fr); min-height: 550px; }
.cs-modal__visual { position: relative; min-height: 100%; overflow: hidden; background: #c7dbe4; }
.cs-modal__visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 35% 50%; }
.cs-modal--01 .cs-modal__visual img { object-position: 64% 50%; }
.cs-modal--02 .cs-modal__visual img { object-position: 39% 50%; filter: brightness(1.12) saturate(.85); }
.cs-modal--03 .cs-modal__visual img { object-position: 36% 50%; }
.cs-modal--04 .cs-modal__visual img { object-position: 32% 50%; }
.cs-modal__content { min-width: 0; padding: 44px 48px 34px; }
.cs-modal__eyebrow { margin: 0 0 17px; padding-right: 15px; color: #668a8b; font: 700 9px/1.5 var(--modal-font); letter-spacing: .17em; text-transform: uppercase; }
.cs-modal__title { margin: 0; padding: 0; color: #187f85; font: 400 44px/1.05 "Debenhams Modern", serif; letter-spacing: 0; text-transform: none; text-align: left; }
.cs-modal__title > span { display: block; }
.cs-modal__title:focus { outline: 0; }
.cs-modal__title .cs-modal__script { margin: 2px 0 0 -3px; color: #eb565f; font: 400 44px/1.35 "NVN Motherland Signature", cursive; }
.cs-modal__description { max-width: 420px; margin: 30px 0 23px; color: #617e80; font: 700 14px/1.7 var(--modal-font); text-align: left; }
.cs-modal__form, .cs-modal__form .wpcf7, .cs-modal__form form { width: 100%; margin: 0; font: 700 14px/1.5 var(--modal-font); }
.cs-modal__form .cs-form-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; width: 100%; margin: 0; }
.cs-modal__form p { margin: 0; }
.cs-modal__form .form-group { width: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.cs-modal__form .form-group + .form-group { margin-top: 0; }
.cs-modal__form label { display: block; margin: 0; color: #426d71; font: 700 13px/1.5 var(--modal-font); letter-spacing: 0; text-transform: none; text-align: left; }
.cs-modal__form .wpcf7-form-control-wrap { display: block; margin-top: 5px; }
.cs-modal__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  display: block; width: 100%; max-width: 100%; height: 40px; min-height:40px; margin: 0; padding: 11px 15px;
  border: 1px solid #d3e3de; border-radius: 9px; background: #f4f8f5; color: #2b5d61;
  font:400 16px/1.5 var(--modal-font); box-shadow: none; transition: border-color .2s,background .2s;
}
.cs-modal__form :is(input, select, textarea):focus { outline: 0; border-color: #187f85; box-shadow: 0 0 0 2px rgba(24,127,133,.1); background: #fff; }
.cs-modal__form input::placeholder, .cs-modal__form textarea::placeholder { opacity: 1; color: #738e90; font-size: 15px; }
.cs-modal__form textarea { height: 95px; min-height: 95px; resize: vertical; }
.cs-modal__form select option { background: #fff; color: #2b5d61; }
.cs-modal__form input:is([type="checkbox"], [type="radio"]) { accent-color: #187f85; }
.cs-modal__form .wpcf7-list-item { margin: 0 12px 0 0; }
.cs-modal__form .wpcf7-list-item label { display: flex; align-items: baseline; gap: 8px; }
.cs-modal__form .wpcf7-not-valid { border-color: #c24e59; }
.cs-modal__form .wpcf7-not-valid-tip {display: block; margin: 6px 0 0; padding: 0; font: 700 12px/1.45 var(--modal-font); }
.cs-modal__form .form-action { position: relative; display: block; width: 100%; margin: 7px 0 0; padding: 0; }
.cs-modal__form :is(input[type="submit"], button[type="submit"], .form-submit) { appearance: none; display: block; width: 100%; height: auto; min-height: 50px; margin: 0; padding: 14px 32px; border: 1px solid transparent; border-radius: 9px; background: #187f85; color: #fff; font: 700 12px/1.6 var(--modal-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s,box-shadow .2s; }
.cs-modal__form :is(input[type="submit"], button[type="submit"], .form-submit):hover { background: #146b72; box-shadow: 0 5px 15px rgba(13,75,79,.13); }
.cs-modal__form :is(input[type="submit"], button[type="submit"]):disabled { opacity: .6; cursor: wait; }
.cs-modal__form .form-action .wpcf7-spinner { position: absolute; top: 13px; right: 13px; margin: 0; }
.cs-modal__form .wpcf7 form  .wpcf7-response-output { margin: 18px 0 0; padding: 11px 13px; border: 1px solid #97b9b3; border-radius: 9px; color:#dc3232; background: #eff6f2; font: 700 13px/1.6 var(--modal-font); }
@keyframes cs-dialog { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 850px) and (min-width: 641px) { .cs-modal__layout { grid-template-columns: 36% minmax(0,1fr); } .cs-modal__content { padding: 43px 30px 30px; }.cs-modal__title .cs-modal__script {  font-size: 40px;} }
@media (max-width: 640px) {
  .cs-modal { width: calc(100% - 28px); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); border-radius: 20px; }
  .cs-modal__layout { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .cs-modal__visual { height: auto; min-height: 0; }
  .cs-modal .cs-modal__visual img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; }
  .cs-modal__content { padding: 27px 26px 28px; }
  .cs-modal__title { font-size: 37px; }
  .cs-modal__title .cs-modal__script { font-size: 38px; }
  .cs-modal__description { margin: 22px 0 20px; font-size: 13px; }
  .cs-modal__form .cs-form-grid { gap: 12px; }
  .cs-modal__close { margin: 8px; }
  .cs-modal__form :is(input[type="submit"], button[type="submit"], .form-submit){font-size: 15px;line-height: 1.4;}
}
@media (max-width: 410px) {
  .cs-modal__title .cs-modal__script { font-size: 36px; }
  .cs-modal__content { padding: 27px 20px 28px; }
  .cs-modal__eyebrow{padding-right: 0;}
  .cs-modal__title .cs-modal__script { font-size: 35px; margin-left: 0; }
  .none-form{font-size: 13px !important}
}
@media (max-width: 365px) { .cs-modal__content { padding: 24px 21px 25px; } .cs-modal__title { font-size: 34px; } .cs-modal__title .cs-modal__script { font-size: 34px; }
.none-form { font-size: 12px !important; }




 }
@media (prefers-reduced-motion: reduce) { .cs-modal[open], .cs-modal * { animation: none !important; transition: none !important; } }