/* ==========================================================================
   CONTACT PAGE STYLE - SECTION LIENHE-MAIN (Modular Midori Decor)
   ========================================================================== */

/* Khung bọc chống che khuất bởi Fixed Header, giữ nền trong suốt hoàn toàn */
.site-lienhe {
    padding-top: clamp(120px, 12vw, 150px);
    background-color: transparent !important;
}

.midori-contact-page {
    padding: 20px 0 80px 0;
    background-color: transparent !important;
}

/* Container chuẩn 1200px cùng padding co giãn cho Mobile & Tablet */
.midori-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-page-title {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--midori-dark, var(--color-dark, #2B2B2B));
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0;
}

/* Bố cục 2 cột phẳng dẹt */
.contact-layout-row {
    display: flex;
    gap: 50px;
    margin-top: 50px;
}

.contact-col-left,
.contact-col-right {
    flex: 1;
}

/* --- CỘT TRÁI: HỘP THÔNG TIN --- */
.contact-info-box {
    border: 1px solid #777777; 
    padding: 50px;
    background-color: var(--midori-white, var(--color-white, #ffffff));
    text-align: left;
    height: 100%;
    box-sizing: border-box;
}

.info-box-title {
    font-family: var(--font-sans);
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 500;
    color: var(--midori-dark, var(--color-dark, #2B2B2B));
    margin-bottom: 35px;
}

/* Danh sách thông tin */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 45px 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.info-text {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s, 16px) !important;
    color: var(--midori-gray, var(--color-gray, #777777));
    font-weight: 400;
    text-decoration: none;
    transition: var(--transition-smooth);
}

a.info-text:hover {
    color: var(--midori-olive, var(--color-primary, #4B5E40));
}

/* Icon Vector SVG mã hóa nhúng */
.info-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

.icon-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.15 15.15 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27 11.72 11.72 0 003.7 1.18 1 1 0 01.88 1V21a1 1 0 01-1 1A19 19 0 012 3a1 1 0 011-1h3.5a1 1 0 011 .88 11.72 11.72 0 001.18 3.7 1 1 0 01-.27 1.1l-2.2 2.2z'/%3E%3C/svg%3E"); }
.icon-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E"); }
.icon-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }

/* Nút liên kết MXH dạng tròn */
.social-connect-section {
    border-top: 1px solid var(--midori-border, var(--color-border, #E2E2E2));
    padding-top: 30px;
}

.social-title {
    font-family: var(--font-sans);
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--midori-dark, var(--color-dark, #2B2B2B));
}

.social-icons-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-circle-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #cccccc;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    transition: var(--transition-smooth);
    display: inline-block;
}

.social-circle-icon:hover {
    border-color: var(--midori-olive, var(--color-primary, #4B5E40));
    background-color: var(--midori-olive-light, rgba(75, 94, 64, 0.1));
    transform: translateY(-2px);
}

/* SVG MXH */
.icon-ig { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4.162 4.162 0 110-8.324A4.162 4.162 0 0112 16zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E"); }
.icon-fb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z'/%3E%3C/svg%3E"); }
.icon-threads { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.46 13.14c-.66.09-1.32-.23-1.63-.82l-.12-.22a3.832 3.832 0 01-.65.26c-.34.09-.7.13-1.06.13-.88 0-1.62-.28-2.11-.8-.44-.48-.67-1.14-.67-1.92 0-.82.26-1.5.76-2 .54-.53 1.3-.81 2.18-.81.65 0 1.25.12 1.74.34l.11-1.1c-.03-.31.29-.53.6-.5.31.03.53.29.5.6l-.37 3.7c-.11 1.07.18 1.49.52 1.49.33 0 .54-.3.57-1 .09-.94.01-1.89-.25-2.8a5.952 5.952 0 00-4.04-4.14c-.81-.25-1.65-.33-2.5-.22-.3.04-.57-.17-.61-.47-.04-.3.17-.57.47-.61.99-.13 1.99-.04 2.95.25.96.29 1.83.84 2.51 1.58.55.6 1.01 1.34 1.34 2.16.29.73.45 1.52.46 2.31 0 1.51-.76 2.39-1.81 2.39-.41.01-.81-.13-1.11-.4zm-3.08-4.22c-.41 0-.74.12-.96.34-.23.23-.34.56-.34.92 0 .39.1.72.31.91.21.19.55.29.95.29.23 0 .46-.04.68-.13.23-.09.43-.22.61-.39l.11-1.1c-.26-.11-.58-.17-.89-.17h-.47z'/%3E%3C/svg%3E"); }
.icon-yt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M23.498 6.163a3.003 3.003 0 00-2.11-2.11C19.517 3.545 12 3.545 12 3.545s-7.517 0-9.388.508a3.003 3.003 0 00-2.11 2.11C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 002.11 2.11c1.871.508 9.388.508 9.388.508s7.517 0 9.388-.508a3.003 3.003 0 002.11-2.11C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.icon-tiktok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.01.08 1.53.63 3.02 1.59 4.17.94 1.13 2.27 1.9 3.73 2.19v3.83c-1.63-.05-3.2-.62-4.51-1.63-.26-.2-.5-.42-.72-.66v5.89c0 2.3-.92 4.43-2.58 6.01-1.67 1.59-3.92 2.37-6.22 2.18-2.61-.22-4.9-1.89-5.91-4.29-1.01-2.4-.48-5.2 1.34-7.05 1.63-1.66 4.02-2.31 6.27-1.68v3.89c-.93-.32-1.97-.1-2.68.58-.69.69-.9 1.77-.52 2.66.38.88 1.28 1.41 2.24 1.31 1.05-.11 1.81-1.02 1.81-2.08V0c-.01.01-.01.01 0 .02z'/%3E%3C/svg%3E"); }

/* --- CỘT PHẢI: ĐỊA CHỈ & MAPS --- */
.address-card-box {
    border: 1px solid #777777; 
    padding: 30px;
    background-color: var(--midori-white, var(--color-white, #ffffff));
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.address-title {
    font-family: var(--font-sans);
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 500;
    color: var(--midori-dark, var(--color-dark, #2B2B2B));
    margin-bottom: 20px;
}

.address-content-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.address-text {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s, 16px) !important;
    color: var(--midori-gray, var(--color-gray, #777777));
    margin: 0;
    font-weight: 400;
}

/* Icon ghim địa chỉ */
.address-pin-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

/* Khung tiêu đề Maps và Iframe */
.map-section-wrapper {
    margin-top: 25px;
}

.map-title {
    font-family: var(--font-sans);
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 500;
    color: var(--midori-dark, var(--color-dark, #2B2B2B));
    text-align: left;
    margin-top: 0;
    margin-bottom: 18px;
}

.google-map-iframe-container {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

/* RESPONSIVE DI ĐỘNG VÀ TABLET */
@media (max-width: 991px) {
    .midori-container {
        padding: 0 15px;
    }

    .contact-layout-row {
        flex-direction: column;
        gap: 30px;
        margin-top: 30px;
    }

    .contact-info-box {
        padding: 35px 20px;
    }

    .address-card-box {
        padding: 25px 20px;
    }

    .contact-page-title {
        font-size: 2.2rem;
    }
}