/*!
 * Theme newnet-v2 — Trang Liên hệ. Prefix: ct-
 * Nội dung: data/contact.php → page · View: vendor/contact/web/contact/content.blade.php. Chỉ dùng token var(--nn-*), không viết mã màu cứng.
 */

/* ============================== HERO + KÊNH LIÊN HỆ ============================== */
.ct-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(var(--nn-space-8), 1.5rem + 2vw, var(--nn-space-14)) 0 clamp(var(--nn-space-10), 2rem + 2vw, var(--nn-space-16));
    background: var(--nn-deep-950); color: rgba(255, 255, 255, .74);
}
.ct-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ct-hero__bg::before {
    content: ""; position: absolute; inset: 0; opacity: .7;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 25%, transparent 80%);
}
.ct-hero__bg span { position: absolute; border-radius: var(--nn-radius-round); filter: blur(100px); animation: ct-drift 20s ease-in-out infinite alternate; }
.ct-hero__bg span:first-child { width: 560px; height: 560px; left: -180px; top: -220px; background: var(--nn-brand); opacity: .55; }
.ct-hero__bg span:last-child { width: 480px; height: 480px; right: -140px; bottom: -200px; background: var(--nn-accent); opacity: .28; animation-delay: -8s; }
@keyframes ct-drift { to { transform: translate(60px, 40px) scale(1.1); } }

.ct-hero__copy { max-width: 760px; margin-top: clamp(var(--nn-space-8), 1.5rem + 2vw, var(--nn-space-12)); }
.ct-pill {
    display: inline-flex; align-items: center; gap: var(--nn-space-2-5); padding: var(--nn-space-1-5) var(--nn-space-3-5) var(--nn-space-1-5) var(--nn-space-3);
    border-radius: var(--nn-radius-pill); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-semibold); color: #fff;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.ct-pill i { width: 8px; height: 8px; border-radius: var(--nn-radius-round); background: var(--nn-success-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nn-success-400) 25%, transparent); animation: ct-blink 2s infinite; }
@keyframes ct-blink { 50% { opacity: .35; } }
.ct-hero__title {
    margin: var(--nn-space-5) 0; color: #fff; text-wrap: balance;
    font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem); font-weight: var(--nn-weight-extrabold); line-height: 1.08; letter-spacing: -.035em;
}
.ct-hero__title span {
    padding-bottom: .08em;
    background: linear-gradient(90deg, var(--nn-glow-soft), var(--nn-accent-300));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ct-hero__lead { max-width: 620px; margin: 0; font-size: var(--nn-text-lg); line-height: var(--nn-leading-relaxed); }

.ct-channels { margin-top: clamp(var(--nn-space-8), 1.5rem + 2vw, var(--nn-space-12)); }
.ct-channels .nn-contact-card { padding: var(--nn-space-4); border-color: transparent; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6); }
@media (min-width: 992px) { .ct-channels .nn-contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nn-space-4); } }
/* Mobile: 2 cột, icon trên chữ dưới để form không bị đẩy quá xa */
@media (max-width: 575.98px) {
    .ct-hero__title span { display: block; }
    .ct-channels .nn-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-channels .nn-contact-card { flex-direction: column; align-items: flex-start; padding: var(--nn-space-3-5); }
}

/* ============================== FORM + VĂN PHÒNG ============================== */
.ct-main { display: grid; gap: var(--nn-space-6); align-items: start; }
.ct-main > * { min-width: 0; }
@media (min-width: 992px) { .ct-main { grid-template-columns: 7fr 5fr; gap: var(--nn-space-8); } }

.ct-form {
    padding: clamp(var(--nn-space-6), 1rem + 2vw, var(--nn-space-11)); border-radius: var(--nn-radius-2xl);
    background: #fff; border: 1px solid var(--nn-border); box-shadow: var(--nn-shadow-lg);
    scroll-margin-top: calc(var(--nn-header-h) + var(--nn-space-5));
}
.ct-form__head { margin-bottom: var(--nn-space-7); }
.ct-form__head h2 { margin: 0 0 var(--nn-space-2); font-size: var(--nn-h3); }
.ct-form__head p { margin: 0; color: var(--nn-muted); }
.ct-needs legend { float: none; width: 100%; margin-bottom: var(--nn-space-2-5); }
.ct-needs { margin-bottom: var(--nn-space-1); }
.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nn-space-3) var(--nn-space-5); margin-top: var(--nn-space-2); }
.ct-form__foot p { display: inline-flex; align-items: center; gap: var(--nn-space-2); margin: 0; font-size: var(--nn-text-sm); color: var(--nn-muted); }
.ct-form__foot p .nn-icon { flex: none; font-size: var(--nn-icon-sm); color: var(--nn-success); }
@media (max-width: 575.98px) { .ct-form__foot .nn-btn { width: 100%; } }

/* Trạng thái gửi thành công (thay cho form) */
.ct-done { display: grid; justify-items: center; gap: var(--nn-space-3); padding-block: var(--nn-space-8); text-align: center; outline: 0; }
.ct-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--nn-radius-round); font-size: 30px; color: var(--nn-success); background: var(--nn-success-soft); box-shadow: 0 0 0 8px color-mix(in srgb, var(--nn-success) 6%, transparent); }
.ct-done h3 { margin: var(--nn-space-3) 0 0; }
.ct-done p { max-width: 440px; margin: 0 0 var(--nn-space-3); color: var(--nn-muted); }
.ct-done p a { font-weight: var(--nn-weight-semibold); white-space: nowrap; }

.ct-aside { display: grid; gap: var(--nn-space-6); }
.ct-office { padding: clamp(var(--nn-space-6), 1rem + 1.5vw, var(--nn-space-9)); border-radius: var(--nn-radius-2xl); background: #fff; border: 1px solid var(--nn-border); }
.ct-office h2 { margin: 0 0 var(--nn-space-6); font-size: var(--nn-text-2xl); text-wrap: balance; }
.ct-office dl { display: grid; gap: var(--nn-space-5); margin: 0; }
.ct-office dl > div { display: flex; align-items: flex-start; gap: var(--nn-space-4); }
.ct-office dt { flex: none; }
.ct-office .nn-icon-tile { width: 44px; height: 44px; border-radius: var(--nn-radius-md); }
.ct-office .nn-icon-tile .nn-icon { font-size: 20px; }
.ct-office dd { margin: 0; min-width: 0; font-size: var(--nn-text-md); font-weight: var(--nn-weight-semibold); line-height: var(--nn-leading-snug); color: var(--nn-ink); overflow-wrap: anywhere; }
.ct-office dd small { display: block; margin-bottom: var(--nn-space-0-5); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-regular); color: var(--nn-muted); }
.ct-office dd a { color: inherit; }
.ct-office dd a:hover { color: var(--nn-primary); }

.ct-next {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(var(--nn-space-6), 1rem + 1.5vw, var(--nn-space-9)); border-radius: var(--nn-radius-2xl);
    background: var(--nn-bg-brand); color: rgba(255, 255, 255, .76);
}
.ct-next::after {
    content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: var(--nn-radius-round);
    background: radial-gradient(circle, color-mix(in srgb, var(--nn-glow) 45%, transparent), transparent 70%);
}
.ct-next h2 { margin: 0 0 var(--nn-space-6); color: #fff; font-size: var(--nn-text-xl); }
.ct-next ol { display: grid; gap: var(--nn-space-5); list-style: none; margin: 0; padding: 0; counter-reset: ct-step; }
.ct-next li { position: relative; display: grid; gap: var(--nn-space-0-5); padding-left: var(--nn-space-12); counter-increment: ct-step; }
.ct-next li::before {
    content: counter(ct-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: var(--nn-radius-round);
    display: grid; place-items: center; font-size: var(--nn-text-sm); font-weight: var(--nn-weight-bold); color: #fff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
}
.ct-next li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: calc(var(--nn-space-5) * -1 + 6px); width: 1px; background: rgba(255, 255, 255, .18); }
.ct-next strong { color: #fff; font-size: var(--nn-text-md); }
.ct-next span { font-size: var(--nn-text-sm); line-height: var(--nn-leading-normal); }

/* ============================== BẢN ĐỒ ============================== */
.ct-map { position: relative; border-radius: var(--nn-radius-2xl); overflow: hidden; border: 1px solid var(--nn-border); background: var(--nn-surface-2); }
.ct-map iframe { display: block; width: 100%; height: clamp(320px, 36vw, 460px); border: 0; }
.ct-map__card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nn-space-4); padding: var(--nn-space-5); background: #fff; border-top: 1px solid var(--nn-border); }
.ct-map__card > div { display: grid; flex: 1 1 220px; min-width: 0; line-height: var(--nn-leading-snug); }
.ct-map__card strong { color: var(--nn-ink); font-size: var(--nn-text-md); }
.ct-map__card div span { font-size: var(--nn-text-sm); color: var(--nn-muted); }
.ct-map__card .nn-icon-tile { width: 44px; height: 44px; border-radius: var(--nn-radius-md); }
.ct-map__card .nn-icon-tile .nn-icon { font-size: 20px; }
@media (min-width: 768px) {
    .ct-map__card {
        position: absolute; left: var(--nn-space-6); bottom: var(--nn-space-6); max-width: 460px; flex-wrap: nowrap;
        border: 1px solid var(--nn-border); border-radius: var(--nn-radius-xl); box-shadow: var(--nn-shadow-lg);
    }
    .ct-map__card > div { flex-basis: auto; }
    .ct-map__card .nn-btn { flex: none; }
}
@media (max-width: 575.98px) { .ct-map__card .nn-btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) { .ct-hero__bg span, .ct-pill i { animation: none; } }