.appointment-form{position:relative;box-sizing:border-box;container-type:inline-size}
.appointment-form--inline{padding:60px 0;background:#608b56 url(../images/bg-dang-ky-dat-hen.jpg) center/cover no-repeat}
.appointment-form__container{box-sizing:border-box;width:100%;max-width:1170px;margin:0 auto;padding:0 15px}
.appointment-form--sidebar,.appointment-form--modal{width:100%;padding:36px 30px 40px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(rgba(5,30,27,.68),rgba(5,30,27,.68)),#608b56 url(../images/bg-dang-ky-dat-hen.jpg) center/cover no-repeat;box-shadow:0 16px 40px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.appointment-form--sidebar[data-placement="sidebar"]{margin-bottom:40px}
.appointment-form--inline .appointment-form__surface{padding:36px 30px 40px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(5,30,27,.68);box-shadow:0 16px 40px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.appointment-form .appointment-form__title{margin:0 auto 12px;color:#fff;font-size:30px;line-height:1.3;text-align:center;text-transform:uppercase;font-weight:700}
.appointment-form__description{margin:0 auto 24px;color:#fff;text-align:center}
.appointment-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start}
.appointment-form__field,.appointment-form__field label{display:block;min-width:0;margin:0}
.appointment-form__label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.appointment-form .appointment-form__control{display:block;box-sizing:border-box;width:100%;min-height:48px;margin:0;border:1px solid rgba(255,255,255,.38);border-radius:10px;padding:10px 15px;background:rgba(255,255,255,.24);color:#fff;font:inherit;line-height:1.4;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.appointment-form .appointment-form__control::placeholder{color:#fff;opacity:1}
.appointment-form textarea.appointment-form__control{height:auto;min-height:48px;max-height:150px;resize:vertical}
.appointment-form .appointment-form__control:focus{border-color:#fff;background:rgba(255,255,255,.34);box-shadow:0 0 0 3px rgba(255,255,255,.18);outline:0}
.appointment-form input[type=datetime-local].appointment-form__control{color-scheme:dark;cursor:pointer}
.appointment-form__datetime,.appointment-form__datetime .wpcf7-form-control-wrap{display:block}
.appointment-form__datetime .wpcf7-form-control-wrap{position:relative}
.appointment-form__datetime--show-placeholder .wpcf7-form-control-wrap::after{content:var(--appointment-datetime-placeholder);position:absolute;z-index:1;top:0;left:15px;right:48px;height:48px;display:flex;align-items:center;overflow:hidden;color:#fff;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.appointment-form__datetime--show-placeholder input[type=datetime-local].appointment-form__control{color:transparent}
.appointment-form__datetime--show-placeholder input[type=datetime-local]::-webkit-datetime-edit{color:transparent}
.appointment-form__actions{grid-column:1/-1;text-align:center}
.appointment-form .appointment-form__submit{min-width:190px;margin:2px 0 0;border:0;border-radius:10px;padding:11px 35px 9px;background:#fff;color:#608b56;font:inherit;font-size:18px;font-weight:700;text-align:center;text-transform:uppercase;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.appointment-form .appointment-form__submit:hover,.appointment-form .appointment-form__submit:focus{background:#608b56;color:#fff;outline:2px solid #fff;outline-offset:2px}
.appointment-form .appointment-form__submit:disabled{cursor:wait;opacity:.65}
.appointment-form__honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.appointment-form .wpcf7-not-valid-tip{position:static!important;display:block;margin:6px 2px 0;color:#ffe0b2;font-size:14px;line-height:1.35;text-align:left}
.appointment-form .wpcf7-response-output{margin:20px 0 0!important;padding:10px 14px!important;border-radius:8px;color:#fff!important;text-align:center}
.appointment-form .wpcf7-response-output{border-color:#ffa444!important}
.appointment-form .wpcf7-spinner{position:static!important;margin:8px 0 0 10px;vertical-align:middle}
.appointment-form__status{padding:12px 16px;border-radius:8px;background:#fff3cd;color:#664d03;text-align:center}
body.appointment-modal-open{overflow:hidden}
body.appointment-modal-open .zalo-chat-widget{display:none}
.appointment-modal:not([open]){display:none}
.appointment-modal{width:min(920px,calc(100% - 30px));max-width:920px;max-height:calc(100% - 56px);padding:0;border:0;border-radius:18px;background:transparent;color:#fff;overflow:auto}
.appointment-modal::backdrop{background:rgba(0,0,0,.9)}
.appointment-modal__dialog{position:relative;width:100%;padding:0;overflow:hidden;background:#608b56;border-radius:18px}
.appointment-form--modal{min-height:100%;border:0}
.appointment-modal__close{position:absolute;z-index:12;top:12px!important;right:12px!important;width:38px!important;height:38px;padding:7px;border:0;border-radius:50%;background:rgba(0,0,0,.42);cursor:pointer;transition:background-color .2s ease,transform .2s ease}
.appointment-modal__close:hover,.appointment-modal__close:focus{background:#07593c;transform:scale(1.06);outline:2px solid #fff;outline-offset:2px}
.appointment-modal__close img{display:block;width:100%;height:100%}

@container (max-width:620px){
	.appointment-form__grid{grid-template-columns:1fr;gap:13px}
	.appointment-form__actions{grid-column:auto}
}

@media screen and (max-width:767px){
	.appointment-form__grid{grid-template-columns:1fr;gap:13px}
	.appointment-form__actions{grid-column:auto}
	.appointment-form .appointment-form__control{min-height:44px;padding:9px 12px}
	.appointment-form__datetime--show-placeholder .wpcf7-form-control-wrap::after{left:12px;height:44px}
	.appointment-form textarea.appointment-form__control{min-height:74px}
	.appointment-form--inline{padding:50px 0}
	.appointment-form--inline .appointment-form__surface,.appointment-form--sidebar{padding:28px 15px 32px;border-radius:14px}
	.appointment-form .appointment-form__title{font-size:22px}
	.appointment-form__description{margin-bottom:18px;font-size:14px;line-height:1.5}
	.appointment-modal{width:calc(100% - 24px);max-height:calc(100% - 20px);border-radius:14px}
	.appointment-modal__dialog{border-radius:14px}
	.appointment-form--modal{padding:48px 20px 24px;border-radius:14px}
	.appointment-modal__close{top:8px!important;right:8px!important}
}

@media (prefers-reduced-motion:reduce){
	.appointment-form .appointment-form__control,.appointment-form .appointment-form__submit,.appointment-modal__close{transition:none}
}