/* ==========================================================
   Real English 2027 – Modal & trang "Đặt lịch tư vấn"
   ========================================================== */
.cs-modal .modal-content { border: 0; border-radius: 12px; overflow: hidden; }
.cs-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 1rem; background: linear-gradient(135deg, #fff 0%, #fdeef0 100%); border-bottom: 1px solid #f6dfe2; }
.cs-modal__title { font-family: var(--hp-serif); font-weight: 800; color: var(--hp-ink); font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 0 0 .25rem; }
.cs-modal__intro { color: var(--hp-muted); font-size: .88rem; margin: 0; }
.cs-modal__context { display: inline-block; margin: .6rem 0 0; background: #fff; border: 1px solid #f3ccd2; color: var(--re-red); border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; font-weight: 600; }
.cs-modal .modal-body { padding: 1.2rem 1.5rem 1.5rem; }

.cs-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
.cs-form__field--full { grid-column: 1 / -1; }
.cs-form__field label { display: block; color: var(--hp-ink); font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.cs-form__field label span { color: var(--re-red); }
.cs-form .form-control, .cs-form .form-select { min-height: 44px; font-size: .9rem; border-color: #dfe3ec; }
.cs-form .form-control:focus, .cs-form .form-select:focus { border-color: var(--re-red); box-shadow: 0 0 0 .2rem rgba(224, 27, 36, .12); }
.cs-form textarea.form-control { min-height: 88px; }
.cs-form__consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 .4rem; font-size: .8rem; color: #4a5470; cursor: pointer; }
.cs-form__consent input { width: 18px; height: 18px; margin-top: .1rem; flex: 0 0 auto; accent-color: var(--re-red); }
.cs-form__consent input.is-invalid { outline: 2px solid var(--re-red); outline-offset: 2px; }
.cs-form__consent a { color: var(--re-red); }
.cs-form__msg { min-height: 1.4em; font-size: .84rem; margin-bottom: .6rem; }
.cs-form__msg .is-error { color: var(--re-red); }
.cs-form__submit { min-height: 48px; }
.cs-form__loading { display: none; }
.cs-form__submit.is-loading .cs-form__label { display: none; }
.cs-form__submit.is-loading .cs-form__loading { display: inline-flex; align-items: center; gap: .5rem; }
.cs-form__submit i { transform: none !important; }
.cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cs-done { text-align: center; padding: 2rem 1rem; }
.cs-done i { color: #1f8a4c; font-size: 3.2rem; line-height: 1; }
.cs-done p { color: var(--hp-ink); font-size: 1.05rem; margin: 1rem 0 0; }

/* Trang /dat-lich-tu-van */
.cs-page { padding: 1.6rem 0 3rem; background: linear-gradient(180deg, #fdf3f4 0%, #fff 60%); }
.cs-page__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: start; margin-top: 1rem; }
.cs-page__intro h1 { font-family: var(--hp-serif); font-weight: 800; color: var(--hp-ink); font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .7rem; }
.cs-page__intro > p { color: #3a4560; font-size: 1rem; }
.cs-page__intro ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.cs-page__intro li { display: flex; gap: .7rem; align-items: center; color: var(--hp-ink); margin-bottom: .7rem; }
.cs-page__intro li i { color: var(--re-red); font-size: 1.3rem; }
.cs-page__phone { font-size: .95rem; color: var(--hp-ink); }
.cs-page__phone i { color: var(--re-red); }
.cs-page__card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 14px 40px rgba(15, 30, 69, .1); }

@media (max-width: 767.98px) {
    .cs-form__grid, .cs-page__grid { grid-template-columns: 1fr; }
    .cs-modal .modal-body, .cs-modal__head { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Trang Liên hệ ---------- */
.ct-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.ct-channels { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; padding: 0; margin: 0 0 1.2rem; }
.ct-channels a { display: flex; align-items: center; gap: .8rem; height: 100%; background: #fdf3f4; border: 1px solid #f6dfe2; border-radius: 8px; padding: .8rem .9rem; color: var(--hp-ink); transition: transform .2s, box-shadow .2s; }
.ct-channels a:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow); color: var(--hp-ink); }
.ct-channels i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--re-red); color: #fff; font-size: 1.1rem; }
.ct-channels small { display: block; color: var(--hp-muted); font-size: .74rem; }
.ct-channels strong { display: block; font-size: .9rem; word-break: break-word; }
.ct-office { background: #fff; border: 1px solid var(--hp-line); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: .8rem; }
.ct-office h3 { color: var(--tr-navy, #1b2a78); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.ct-office h3 i { color: var(--re-red); }
.ct-office ul { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .88rem; color: #3a4560; }
.ct-office li { display: flex; gap: .6rem; margin-bottom: .35rem; }
.ct-office li i { color: var(--re-red); }
.ct-office a { color: inherit; }
.ct-office p { color: #3a4560; font-size: .88rem; margin: 0; }
.ct-office--hours { background: #f7f8fb; }
.ct-social { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; font-size: 1.5rem; }
.ct-social span { font-size: .86rem; font-weight: 600; color: var(--hp-ink); margin-right: .2rem; }
.ct-form { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 14px 40px rgba(15, 30, 69, .1); }
.ct-form__title { font-family: var(--hp-serif); font-weight: 800; color: var(--hp-ink); font-size: 1.35rem; margin-bottom: .3rem; }
.ct-form__text { color: var(--hp-muted); font-size: .88rem; margin-bottom: 1rem; }
.ct-map { margin-top: 2rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--hp-line); }
.ct-map iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 991.98px) { .ct-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .ct-channels { grid-template-columns: 1fr; } .ct-map iframe { height: 280px; } }
.ct-grid--form-only { grid-template-columns: minmax(0, 760px); justify-content: center; }