/* Green Chart Experience — WordPress / Elementor layer. gc.css (generated from the preview) holds the
 * design; this file only neutralises Elementor's wrappers, styles the Elementor Pro forms and popup
 * like the preview's .gc-form / .gc-modal, and keeps motion content visible in the editor. */

/* ---------- Elementor containers: neutral, the widgets carry the layout ---------- */
.e-con.gce-c { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --flex-wrap: nowrap; --width: 100%; --min-height: 0px; --align-items: stretch; --content-width: 100%; padding: 0; gap: 0; }
.e-con.gce-c > .elementor-element, .e-con.gce-c > .e-con-inner > .elementor-element { width: 100%; max-width: 100%; margin: 0 !important; }
.gce-c .elementor-widget-container { margin: 0; padding: 0; }
.elementor-location-header .gce-header-tpl, .elementor-location-footer .gce-footer-tpl { display: block; }

/* ---------- Editor: content revealed on scroll must stay visible while editing ---------- */
.elementor-editor-active .gc-reveal, .elementor-editor-active [data-gc-stagger] > *, .elementor-editor-active .gc-note, .elementor-editor-active .gc-hero__chart .area { opacity: 1 !important; transform: none !important; animation: none !important; }
.elementor-editor-active [data-gc-draw] .gc-d { stroke-dashoffset: 0 !important; }
.elementor-editor-active [data-gc-draw] .gc-c, .elementor-editor-active [data-gc-underline]::after { transform: none !important; }

/* ---------- Fallback form extras ---------- */
.gce-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gce-consent label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .88rem; line-height: 1.45; }
.gce-consent input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: .1rem 0 0; flex: none; accent-color: var(--gc-c-accent); }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-consent input[type="checkbox"] { accent-color: var(--gc-c-link); }
.gce-consent a { color: inherit; }
.gce-form-msg { grid-column: 1 / -1; border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; background: #fde8ea; color: #6b1922; box-shadow: inset 0 0 0 1px #e3a3aa; font-weight: 500; }

/* ---------- Elementor Pro forms (lead band, course fee card, enrol landing, popup) ---------- */
.gce-pro-form .elementor-form-fields-wrapper, .gce-popup .elementor-form-fields-wrapper { margin: 0 -.5rem; row-gap: 1rem; }
.gce-pro-form .elementor-field-group, .gce-popup .elementor-field-group { padding: 0 .5rem; margin-bottom: 0; }
.gce-pro-form .elementor-field-label, .gce-popup .elementor-field-label { font-size: .9rem; font-weight: 500; margin-bottom: .35rem; color: inherit; }
.gce-pro-form .elementor-field-group .elementor-field-textual,
.gce-pro-form .elementor-field-group select,
.gce-popup .elementor-field-group .elementor-field-textual,
.gce-popup .elementor-field-group select { width: 100%; font: inherit; font-size: 1rem; padding: .8rem .95rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; min-height: 48px; }
.gce-pro-form .elementor-field-textual::placeholder, .gce-popup .elementor-field-textual::placeholder { color: rgba(255,255,255,.7); }
.gce-pro-form .elementor-field-group select option, .gce-popup .elementor-field-group select option { color: var(--gc-c-ink); }
.gce-pro-form .elementor-field-textual:focus, .gce-pro-form select:focus, .gce-popup .elementor-field-textual:focus, .gce-popup select:focus { outline: none; border-color: var(--gc-c-accent); box-shadow: 0 0 0 3px rgba(0,224,64,.25); }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form .elementor-field-textual,
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form select { background: #fff; border-color: #b9c8bd; color: var(--gc-c-ink); }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form .elementor-field-textual::placeholder { color: #5d7068; }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form .elementor-field-textual:focus,
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form select:focus { border-color: var(--gc-c-link); box-shadow: 0 0 0 3px rgba(10,107,61,.2); }
:is(.gc-paper, .gc-paper-2) :is(.gc-ground, .gc-ground-cmt, .gc-ground-deep) .gce-pro-form .elementor-field-textual { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }
.gce-pro-form .elementor-field-type-acceptance label, .gce-popup .elementor-field-type-acceptance label { font-size: .88rem; line-height: 1.45; }
.gce-pro-form .elementor-field-type-acceptance input, .gce-popup .elementor-field-type-acceptance input { width: 20px; height: 20px; accent-color: var(--gc-c-accent); }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form .elementor-field-type-acceptance input { accent-color: var(--gc-c-link); }
.gce-pro-form .elementor-field-type-acceptance a, .gce-popup .elementor-field-type-acceptance a { color: inherit; text-decoration: underline; }
.gce-pro-form .e-form__buttons, .gce-popup .e-form__buttons { margin-top: .4rem; }
.gce-pro-form .elementor-button, .gce-popup .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .75em 1.35em; border-radius: 999px; border: 0; background: var(--gc-c-accent); color: #0b2a1d; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,224,64,.55); }
.gc-course--cmt .gc-enrol-card .gce-pro-form .elementor-button { background: var(--gc-c-cmt); color: #fff; box-shadow: 0 10px 26px -14px rgba(138,34,45,.8); }
.gce-pro-form .elementor-message, .gce-popup .elementor-message { border-radius: 10px; padding: .9rem 1rem; margin-top: 1rem; font-weight: 500; }
.gce-pro-form .elementor-message.elementor-message-success, .gce-popup .elementor-message.elementor-message-success { background: rgba(0,224,64,.14); box-shadow: inset 0 0 0 1px rgba(0,224,64,.5); color: inherit; }
:is(.gc-paper, .gc-paper-2, .gc-enrol-card) .gce-pro-form .elementor-message-success { background: #dcebdf; box-shadow: inset 0 0 0 1px #9cc7a8; }
.gce-pro-form .elementor-message::before, .gce-popup .elementor-message::before { display: none; }
.gce-pro-form .elementor-field-group .elementor-message.elementor-help-inline { padding: .3rem 0 0; margin: 0; background: none; box-shadow: none; font-size: .85rem; }
.gce-pro-form [hidden] { display: none !important; }

/* ---------- Popup "Đăng ký tư vấn" (Elementor Pro popup, looks like the preview's .gc-modal) ---------- */
.gce-popup-doc .dialog-widget-content { background: var(--gc-ground-deep) !important; color: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.12) !important; }
.gce-popup-doc .dialog-close-button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: rgba(255,255,255,.12); font-size: 18px; }
.gce-popup-doc .dialog-close-button:hover, .gce-popup-doc .dialog-close-button:focus-visible { background: rgba(255,255,255,.24); }
.gce-popup-doc .dialog-close-button svg { fill: #fff; width: 18px; height: 18px; }
.e-con.gce-popup { font-family: var(--gc-font); color: #fff; }
.e-con.gce-popup .gc-eyebrow { margin-bottom: .2rem; }
@media (prefers-reduced-motion: reduce) { .gce-popup-doc .dialog-widget-content { animation: none !important; } }

/* ---------- 0.4.2: thank-you popup (widget gce-thanks inside "Green Chart – Popup Cảm ơn") ---------- */
/* 0.4.3: the layout padding lives on .gc-thanks-pop (gc.css), so the Elementor container adds none at any width
   (0.4.2: at ~800 px the "Trong lúc chờ" card touched the popup edges). Centred dialog with 16 px side margins on
   every screen — never a full-width bottom sheet. */
.e-con.gce-popup--thanks { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0 !important; }
.elementor-popup-modal.gce-thanks-doc { align-items: center !important; justify-content: center !important; }
.gce-thanks-doc .dialog-widget-content { width: min(540px, calc(100vw - 2rem)) !important; max-width: calc(100vw - 2rem) !important; }
.gce-thanks-doc .dialog-widget-content { margin: 1rem !important; max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 18px !important; }
.gce-thanks-doc .dialog-message { width: 100% !important; max-width: 100%; max-height: none; overflow: visible; padding: 0; }
@media (max-width: 600px) { .gce-thanks-doc .dialog-close-button { width: 36px; height: 36px; top: 8px !important; right: 8px !important; } }
/* Forms that open the thank-you popup: the inline success note would repeat it — hide it visually only, so
   Elementor's role="alert" message is still announced by screen readers. */
.gce-form--thanks .elementor-message.elementor-message-success { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none; }
/* 0.4.7 (audit D1): the post body is Elementor Pro's Post Content widget wrapped in the article layout. Elementor gives
   that widget the kit's global "Text" typography / colour; the article inherits the page styles as before. */
.gce-c .elementor-element.elementor-widget-theme-post-content.gce-post-body { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; }
.gce-c .elementor-widget-theme-post-content.gce-post-body > .elementor-widget-container { margin: 0; padding: 0; }