/* =========================================================
   Aurex Cargo AU — CONTACT page styles (demo2)
   Depends on aurex-common.css (sections, buttons, page-banner).
   ========================================================= */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.contact-card {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 32px 24px; text-align: center;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -22px rgba(3,40,54,.4); border-color: transparent; }
.cc-ico {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
    display: grid; place-items: center; background: var(--blue-deep); color: var(--gold); font-size: 22px;
}
.contact-card h3 {
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px;
    font-size: 16px; color: var(--blue-deep); margin: 0 0 10px;
}
.contact-card p { font-size: 14px; line-height: 1.7; color: var(--gray); margin: 0; }
.contact-card a:hover { color: var(--gold); }
.contact-card.cc-accent { background: var(--blue-deep); border-color: var(--blue-deep); }
.contact-card.cc-accent h3 { color: #fff; }
.contact-card.cc-accent p { color: rgba(255,255,255,.82); }
.contact-card.cc-accent .cc-ico { background: var(--gold); color: var(--blue-deep); }

.contact-card p.cc-soon { color: #98a2a9; font-style: italic; }

.ground-band { padding: 62px 0; }
.gb-head { max-width: 660px; margin: 0 auto; text-align: center; }
.gb-head .eyebrow { color: var(--gold); }
.gb-title {
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 1.7rem; color: #fff; margin: 0;
}
.gb-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 1px; background: rgba(255,255,255,.14); margin-top: 42px;
}
.gb-item { background: var(--blue-deep); padding: 28px 24px; text-align: center; }
.gb-item > i { display: block; font-size: 22px; color: var(--gold); margin-bottom: 14px; }
.gb-label {
    display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 12px; color: rgba(255,255,255,.58); margin-bottom: 7px;
}
.gb-value {
    display: block; font-size: 15px; line-height: 1.65; color: #fff;
    word-break: break-word; transition: color .25s ease;
}
a.gb-value:hover { color: var(--gold); }

.contact-map-sec .map-embed {
    height: 100%; min-height: 380px; border-radius: 10px; overflow: hidden;
    border: 1px solid #e2e7ea; box-shadow: 0 20px 40px -26px rgba(3,40,54,.4);
}
.map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(.15) contrast(1.03); }
.hours-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 34px 32px; height: 100%; }
.hours-list { list-style: none; margin: 18px 0 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.hours-list li span:first-child { color: var(--gray); }
.hours-list li span:last-child { color: var(--blue-deep); font-weight: 600; }
.hours-list li.hours-emergency span:last-child { color: var(--gold); }
.hours-list li:last-child { border-bottom: 0; }

/* Banner nền động: ảnh header upload trong admin (Contact Setting), theo thiết bị.
   Không upload -> không có class .has-custom-bg -> giữ ảnh mặc định (.page-banner::before trong aurex-common.css). */
.page-banner.has-custom-bg::before { background-image: var(--banner-pc); }
@media (max-width: 991px) {
    .page-banner.has-custom-bg::before { background-image: var(--banner-tb, var(--banner-pc)); }
}
@media (max-width: 640px) {
    .page-banner.has-custom-bg::before { background-image: var(--banner-mb, var(--banner-pc)); }
}

@media (max-width: 991px) {
    .contact-map-sec .col-7 { margin-bottom: 22px; }
    .ground-band { padding: 52px 0; }
}
@media (max-width: 900px) {
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .contact-cards { grid-template-columns: 1fr; }
}