/* Thoát hoàn toàn khỏi giới hạn .site-container nếu Layout hoặc cache cũ còn bọc trang. */
.site-main:has(.contact-page) { width:100%; max-width:none; margin:0; padding:0; background:#f5f9fb; }
.contact-page { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); --contact-ink:#10243d; --contact-muted:#5e7188; --contact-teal:#0d8c7b; --contact-cyan:#49d4ca; --contact-violet:#635bff; --contact-line:rgba(23,59,92,.12); color:var(--contact-ink); background:#f5f9fb; overflow:hidden; }
.contact-hero { position:relative; isolation:isolate; width:min(1180px,calc(100% - 48px)); margin:24px auto 0; overflow:hidden; padding:clamp(5rem,8vw,8.5rem) 0 clamp(4.5rem,7vw,7rem); border:1px solid rgba(113,242,220,.18); border-radius:24px; background:linear-gradient(118deg,#08283d 0%,#075c68 54%,#0b837a 100%); box-shadow:0 22px 55px rgba(5,38,57,.18); color:#fff; }
.contact-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.48; background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:68px 68px; mask-image:linear-gradient(90deg,#000,transparent 85%); }
.contact-hero::after { content:""; position:absolute; width:40rem; height:40rem; right:-16rem; top:-18rem; border:1px solid rgba(118,247,224,.35); border-radius:50%; box-shadow:0 0 0 5rem rgba(96,232,213,.035),0 0 0 10rem rgba(96,232,213,.025); z-index:-1; }
.contact-hero-orbit { position:absolute; border:1px solid rgba(145,255,234,.2); border-radius:50%; z-index:-1; }
.orbit-one { width:32rem; height:32rem; bottom:-25rem; left:34%; }.orbit-two { width:9rem; height:9rem; top:10%; right:30%; border-style:dashed; animation:contact-spin 24s linear infinite; }
.contact-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr); gap:clamp(2.5rem,7vw,8rem); align-items:center; }
.contact-eyebrow,.contact-section-heading>span,.contact-form-heading>span { display:inline-flex; gap:.55rem; align-items:center; font-size:.71rem; font-weight:800; letter-spacing:.145em; }.contact-eyebrow { color:#a7f6e4; }.contact-eyebrow i { font-size:.95rem; }
.contact-hero h1 { max-width:760px; margin:1.25rem 0 1.35rem; color:#fff; font-size:clamp(2.65rem,5vw,5.45rem); font-weight:760; line-height:1.05; letter-spacing:-.055em; text-wrap:balance; }
.contact-hero-copy>p { max-width:650px; margin:0; color:rgba(237,255,252,.78); font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.75; }
.contact-hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }.contact-primary-action,.contact-secondary-action { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:52px; padding:.85rem 1.15rem; border-radius:13px; font-size:.9rem; font-weight:750; text-decoration:none; transition:transform .25s ease,background .25s ease,color .25s ease; }.contact-primary-action { color:#07393d; background:#a9f6e1; }.contact-secondary-action { color:#fff; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.07); }.contact-primary-action:hover,.contact-secondary-action:hover { transform:translateY(-3px); color:inherit; }
.contact-trust-line { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:2rem; color:rgba(255,255,255,.74); font-size:.8rem; }.contact-trust-line i { color:#9af6dc; margin-right:.32rem; }
.contact-hero-panel { position:relative; padding:1.1rem; border:1px solid rgba(179,255,239,.25); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045)); box-shadow:0 30px 70px rgba(0,20,31,.3); backdrop-filter:blur(13px); transform:rotate(2deg); }
.contact-panel-top { display:flex; align-items:center; justify-content:space-between; padding:.4rem .4rem 1.15rem; }.contact-panel-brand { font-size:1.08rem; font-weight:850; letter-spacing:.08em; }.contact-panel-live { display:inline-flex; align-items:center; gap:.4rem; font-size:.64rem; font-weight:800; letter-spacing:.12em; color:#aff7e6; }.contact-panel-live i { width:.45rem; height:.45rem; border-radius:50%; background:#8cf4d1; box-shadow:0 0 0 .25rem rgba(140,244,209,.14); }
.contact-panel-message { min-height:178px; padding:1.55rem; border-radius:17px; background:linear-gradient(145deg,rgba(176,255,235,.19),rgba(255,255,255,.06)); }.contact-panel-message i { color:#aef6e4; font-size:1.45rem; }.contact-panel-message p { margin:1.55rem 0 0; font-size:1.2rem; font-weight:620; line-height:1.45; letter-spacing:-.02em; }
.contact-panel-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:.75rem; }.contact-panel-steps>div { min-height:76px; padding:.8rem; border-radius:13px; background:rgba(0,28,43,.23); }.contact-panel-steps b { display:block; color:#9bf7e1; font-size:.68rem; letter-spacing:.08em; }.contact-panel-steps span { display:block; margin-top:.45rem; font-size:.77rem; font-weight:700; }
.contact-main-section { padding:clamp(4.5rem,8vw,8.5rem) 0; background:radial-gradient(circle at 10% 0,#e2f9f5 0,transparent 32%),#f5f9fb; }.contact-main-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(380px,1.05fr); gap:clamp(2.4rem,6vw,7rem); align-items:start; }
.contact-section-heading>span { color:var(--contact-teal); }.contact-section-heading h2,.contact-form-heading h2,.contact-map-placeholder h2 { margin:1rem 0; font-size:clamp(2rem,3.1vw,3.45rem); line-height:1.09; font-weight:760; letter-spacing:-.055em; text-wrap:balance; }.contact-section-heading p,.contact-form-heading>p { max-width:520px; margin:0; color:var(--contact-muted); line-height:1.75; }
.contact-info-list { display:grid; gap:.85rem; margin-top:2rem; }.contact-info-card { display:grid; grid-template-columns:52px minmax(0,1fr) 32px; align-items:center; gap:1rem; padding:1.15rem; border:1px solid var(--contact-line); border-radius:18px; background:rgba(255,255,255,.78); box-shadow:0 12px 28px rgba(32,73,104,.045); transition:transform .25s ease,box-shadow .25s ease; }.contact-info-card:hover { transform:translateX(5px); box-shadow:0 17px 38px rgba(32,73,104,.1); }.contact-info-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:15px; font-size:1.25rem; }.icon-teal { color:#087f70; background:#d9f7ef; }.icon-violet { color:#5d50d7; background:#ecebff; }.icon-orange { color:#dc6f26; background:#fff0df; }.contact-info-card small { display:block; color:#6f8295; font-size:.63rem; font-weight:850; letter-spacing:.105em; }.contact-info-card h3 { margin:.3rem 0; font-size:1rem; font-weight:760; overflow-wrap:anywhere; }.contact-info-card p { margin:0; color:var(--contact-muted); font-size:.82rem; line-height:1.5; }.contact-info-card>a { display:grid; place-items:center; width:31px; height:31px; color:#0d8176; border-radius:50%; background:#e4f7f3; text-decoration:none; }.contact-info-card>a:hover { color:#fff; background:var(--contact-teal); }
.contact-form-card { position:relative; padding:clamp(1.35rem,3vw,2.35rem); border:1px solid rgba(15,95,113,.17); border-radius:25px; background:#fff; box-shadow:0 26px 55px rgba(25,62,94,.12); }.contact-form-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; border-radius:25px 25px 0 0; background:linear-gradient(90deg,#0e9788,#50d8cf,#635bff); }.contact-form-heading>span { color:var(--contact-teal); }.contact-form-heading h2 { margin:.75rem 0 .5rem; font-size:clamp(1.8rem,2.5vw,2.45rem); }.contact-form-heading>p { font-size:.88rem; }.contact-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.7rem; }.contact-field { display:grid; gap:.42rem; }.contact-field-full { grid-column:1 / -1; }.contact-field label { color:#385069; font-size:.78rem; font-weight:740; }.contact-field label b { color:#df4f54; }.contact-field input,.contact-field select,.contact-field textarea { width:100%; border:1px solid #d7e1e8; border-radius:10px; outline:none; color:var(--contact-ink); background:#fbfdfe; padding:.78rem .85rem; font:inherit; font-size:.9rem; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }.contact-field textarea { resize:vertical; }.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { border-color:#20a798; background:#fff; box-shadow:0 0 0 3px rgba(32,167,152,.12); }.contact-field span,.contact-validation-summary { color:#c7474b; font-size:.76rem; }.contact-validation-summary ul { margin:.5rem 0 0; padding-left:1rem; }.contact-success { display:flex; align-items:flex-start; gap:.7rem; margin-top:1.25rem; padding:.85rem 1rem; color:#086e60; border:1px solid #a9e8d9; border-radius:12px; background:#edfff8; }.contact-success>i { font-size:1.25rem; }.contact-success strong,.contact-success span { display:block; }.contact-success strong { font-size:.88rem; }.contact-success span { margin-top:.15rem; font-size:.8rem; line-height:1.45; }.contact-honeypot { position:absolute!important; left:-10000px!important; opacity:0!important; pointer-events:none!important; }.contact-consent { display:flex; gap:.55rem; align-items:flex-start; margin:1rem 0 1.1rem; color:#5c7185; font-size:.77rem; line-height:1.45; cursor:pointer; }.contact-consent input { margin-top:.15rem; accent-color:var(--contact-teal); }.contact-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:53px; padding:.8rem 1rem 0.8rem 1.2rem; border:0; border-radius:12px; color:#fff; background:linear-gradient(110deg,#087f70,#137f97); font:inherit; font-size:.9rem; font-weight:800; box-shadow:0 13px 21px rgba(4,114,107,.2); transition:transform .2s ease,box-shadow .2s ease; }.contact-submit i { font-size:1.25rem; }.contact-submit:hover { transform:translateY(-2px); box-shadow:0 17px 25px rgba(4,114,107,.27); }
.contact-map-section { padding:0 0 clamp(4rem,7vw,7rem); background:#f5f9fb; }.contact-map-shell { overflow:hidden; border:1px solid var(--contact-line); border-radius:26px; background:#e8f3f1; box-shadow:0 20px 45px rgba(33,72,102,.08); }.contact-map-shell iframe { display:block; width:100%; min-height:360px; border:0; }.contact-map-placeholder { position:relative; min-height:360px; display:grid; place-items:center; overflow:hidden; padding:2rem; background:linear-gradient(135deg,#e8fbf6,#eef2ff 54%,#dff3fc); }.contact-map-placeholder::before { content:""; position:absolute; inset:0; opacity:.4; background:linear-gradient(45deg,transparent 48%,#75c9bf 49%,transparent 51%),linear-gradient(-45deg,transparent 48%,#a7b9ee 49%,transparent 51%); background-size:45px 45px; }.contact-map-placeholder>div { position:relative; max-width:585px; padding:clamp(1.2rem,3vw,2rem); text-align:center; border:1px solid rgba(23,89,100,.12); border-radius:20px; background:rgba(255,255,255,.72); box-shadow:0 16px 35px rgba(51,91,113,.1); backdrop-filter:blur(7px); }.contact-map-placeholder span { color:var(--contact-teal); font-size:.72rem; font-weight:850; letter-spacing:.1em; }.contact-map-placeholder h2 { margin:.75rem 0; font-size:clamp(1.55rem,2.5vw,2.6rem); }.contact-map-placeholder p { margin:0; color:var(--contact-muted); line-height:1.6; }.contact-map-placeholder a { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; color:#087b72; font-size:.84rem; font-weight:800; text-decoration:none; }.contact-map-pin { position:absolute; left:clamp(8%,20vw,28%); top:25%; color:#e36a5d; font-size:2.1rem; filter:drop-shadow(0 6px 5px rgba(136,44,44,.22)); animation:contact-pin 2s ease-in-out infinite; }
@keyframes contact-spin { to { transform:rotate(360deg); } } @keyframes contact-pin { 50% { transform:translateY(-8px); } }
@media (max-width:991.98px) { .contact-hero-grid,.contact-main-grid { grid-template-columns:1fr; }.contact-hero-panel { max-width:470px; transform:none; }.contact-main-grid { gap:3rem; }.contact-information { max-width:750px; } }
@media (max-width:575.98px) { .contact-hero { width:calc(100% - 28px); margin-top:14px; padding-top:4.5rem; border-radius:18px; }.contact-hero h1 { font-size:2.55rem; }.contact-hero-actions>* { width:100%; }.contact-trust-line { flex-direction:column; gap:.6rem; }.contact-form-grid { grid-template-columns:1fr; }.contact-field-full { grid-column:auto; }.contact-info-card { grid-template-columns:45px minmax(0,1fr); gap:.8rem; }.contact-info-card>a { display:none; }.contact-info-icon { width:45px; height:45px; }.contact-map-shell,.contact-form-card { border-radius:18px; }.contact-map-placeholder { min-height:310px; }.contact-map-pin { display:none; } }