/* =====================================================
   contact.css — trang Liên hệ
   Dữ liệu render từ bảng site_config (SiteModel).
   Bố cục: header + grid card (hotline/email/địa chỉ/giờ làm việc)
   + dải chip mạng xã hội. Chỉ hiển thị item có dữ liệu trong DB.
   ===================================================== */

.contact {
    padding: var(--stc-space-16, 64px) 0 var(--stc-space-20, 80px);
    min-height: 60vh;
    background:
        radial-gradient(900px 380px at 85% -8%, var(--stc-primary-a08, rgba(39, 164, 242, .08)), transparent 62%),
        var(--stc-page, #f5fafd);
}

/* Tự quản chiều ngang — bề ngang đúng container chuẩn của site */
.contact__inner {
    width: 100%;
    max-width: var(--stc-container, 1200px);
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

/* ---------- Header ---------- */
.contact__head {
    text-align: center;
    margin-bottom: var(--stc-space-10, 40px);
}

.contact__eyebrow {
    font-size: var(--stc-text-xs, 11px);
    font-weight: var(--stc-weight-semibold, 600);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stc-primary, #27a4f2);
    margin-bottom: var(--stc-space-2, 8px);
}

.contact__title {
    font-size: var(--stc-text-4xl, 36px);
    font-weight: var(--stc-weight-extrabold, 800);
    color: var(--stc-text-strong, #16324a);
    line-height: var(--stc-leading-tight, 1.25);
    margin: 0 0 var(--stc-space-3, 12px);
}

.contact__subtitle {
    font-size: var(--stc-text-lg, 16px);
    color: var(--stc-text-muted, #6b93b1);
    max-width: 640px;
    margin-inline: auto;
    line-height: var(--stc-leading-normal, 1.55);
}

/* ---------- Grid card ---------- */
.contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--stc-space-5, 20px);
    margin-bottom: var(--stc-space-10, 40px);
}

.contact-card {
    background: var(--stc-surface, #ffffff);
    border: 1px solid var(--stc-border, #d9e8f3);
    border-radius: var(--stc-radius-lg, 20px);
    padding: var(--stc-space-6, 24px);
    box-shadow: var(--stc-shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--stc-space-2, 8px);
    transition: transform var(--stc-duration-normal, 220ms) var(--stc-ease),
                box-shadow var(--stc-duration-normal, 220ms) var(--stc-ease);
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--stc-shadow-md);
}

.contact-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stc-radius-sm, 10px);
    background: var(--stc-primary-soft, #e8f5fe);
    color: var(--stc-primary, #27a4f2);
    margin-bottom: var(--stc-space-2, 8px);
}

.contact-card__title {
    font-size: var(--stc-text-lg, 16px);
    font-weight: var(--stc-weight-bold, 700);
    color: var(--stc-text-strong, #16324a);
    margin: 0;
}

.contact-card__value {
    font-size: var(--stc-text-xl, 18px);
    font-weight: var(--stc-weight-semibold, 600);
    color: var(--stc-primary, #27a4f2);
    word-break: break-word;
    margin: 0;
    line-height: var(--stc-leading-normal, 1.55);
}

.contact-card__desc {
    font-size: var(--stc-text-sm, 12px);
    color: var(--stc-text-muted, #6b93b1);
    line-height: var(--stc-leading-normal, 1.55);
    margin: 0;
}

.contact-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stc-space-2, 8px);
    margin-top: var(--stc-space-3, 12px);
}

/* ---------- Mạng xã hội ---------- */
.contact-social {
    background: var(--stc-surface, #ffffff);
    border: 1px solid var(--stc-border, #d9e8f3);
    border-radius: var(--stc-radius-lg, 20px);
    padding: var(--stc-space-8, 32px);
    text-align: center;
    box-shadow: var(--stc-shadow-xs);
}

.contact-social__title {
    font-size: var(--stc-text-2xl, 22px);
    font-weight: var(--stc-weight-bold, 700);
    color: var(--stc-text-strong, #16324a);
    margin: 0 0 var(--stc-space-2, 8px);
}

.contact-social__desc {
    font-size: var(--stc-text-base, 14px);
    color: var(--stc-text-muted, #6b93b1);
    margin: 0 0 var(--stc-space-5, 20px);
}

.contact-social__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--stc-space-4, 16px);
}

/* Nút icon-only: vuông bo góc → tròn khi hover, thả xuống + nhãn nổi phía trên */
.social-icon-btn {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stc-radius-sm, 10px);
    color: var(--stc-white, #ffffff);
    text-decoration: none;
    box-shadow: var(--stc-shadow-sm);
    transition: transform .5s var(--stc-ease, ease),
                border-radius .5s var(--stc-ease, ease),
                box-shadow .3s var(--stc-ease, ease);
}

/* Vòng halo lan tỏa quanh nút khi hover (ẩn mặc định) */
.social-icon-btn::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--stc-white, #ffffff);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--stc-ease, ease),
                transform .55s var(--stc-ease, ease);
}

.social-icon-btn:hover,
.social-icon-btn:focus-visible {
    transform: translateY(12px);
    border-radius: 50%;
    box-shadow:
        0 0 0 6px var(--stc-primary-a25, rgba(39, 164, 242, .25)),
        0 0 22px 4px var(--stc-primary-a40, rgba(39, 164, 242, .40)),
        var(--stc-shadow-md);
    /* Giữ icon trắng: a:hover trong base.css (specificity 0,1,1) sẽ đè màu nếu không ghi đè */
    color: var(--stc-white, #ffffff);
}

/* Halo: vòng tròn mở rộng và nhịp nhàng lan ra khi hover */
.social-icon-btn:hover::after,
.social-icon-btn:focus-visible::after {
    animation: stc-social-pulse 1.6s var(--stc-ease, ease) infinite;
}

@keyframes stc-social-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.65); opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
}

.social-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.social-icon-btn__glyph {
    font-size: var(--stc-text-xl, 18px);
    font-weight: var(--stc-weight-extrabold, 800);
    line-height: 1;
}

/* Nhãn tên kênh — hiện + trượt lên khi hover/focus */
.social-icon-btn__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 8px);
    padding: 4px 10px;
    border-radius: var(--stc-radius-xs, 8px);
    background: var(--stc-text-strong, #16324a);
    color: var(--stc-white, #ffffff);
    font-size: var(--stc-text-sm, 12px);
    font-weight: var(--stc-weight-semibold, 600);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--stc-ease, ease),
                transform .35s var(--stc-ease, ease);
}

.social-icon-btn:hover .social-icon-btn__tip,
.social-icon-btn:focus-visible .social-icon-btn__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Màu thương hiệu */
.social-icon-btn--facebook  { background: #1877f2; }
.social-icon-btn--zalo      { background: #0068ff; }
.social-icon-btn--youtube   { background: #cd201f; }
.social-icon-btn--tiktok    { background: #010101; }
.social-icon-btn--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

@media (prefers-reduced-motion: reduce) {
    .social-icon-btn,
    .social-icon-btn__tip,
    .social-icon-btn::after {
        transition: none;
        animation: none;
    }
    .social-icon-btn:hover,
    .social-icon-btn:focus-visible {
        transform: none;
    }
    .social-icon-btn:hover::after,
    .social-icon-btn:focus-visible::after {
        opacity: .4;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .contact {
        padding: var(--stc-space-10, 40px) 0 var(--stc-space-16, 64px);
    }
    .contact__title {
        font-size: var(--stc-text-3xl, 28px);
    }
    .contact-social {
        padding: var(--stc-space-6, 24px);
    }
}