/* =========================================================
   DIETMOIDANANG.VN
   CONTACT.CSS - FINAL
   Trang Liên hệ
   ========================================================= */


/* =========================================================
   1. BIẾN MÀU
   ========================================================= */

.contact-layout {
    --contact-green: #0e5739;
    --contact-green-dark: #084f2d;
    --contact-red: #c90000;
    --contact-red-dark: #a70000;

    --contact-text: #292929;
    --contact-muted: #667069;

    --contact-border: #dce6df;
    --contact-bg-soft: #f4f8f5;

    --contact-radius: 10px;
}


/* =========================================================
   2. KHUNG CHÍNH TRANG LIÊN HỆ
   Desktop: 2 cột
   ========================================================= */

body.page
.entry-content.wp-block-post-content
.contact-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 34px;

    align-items: stretch;

    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: 1180px !important;

    margin-top: 25px !important;
    margin-bottom: 35px !important;

    margin-left: 50% !important;
    margin-right: 0 !important;

    padding: 0 !important;

    transform: translateX(-50%);

    box-sizing: border-box;
}


/* Ghi đè flex mặc định của Gutenberg Columns */

body.page
.contact-layout.wp-block-columns {
    flex-wrap: unset !important;
}


body.page
.contact-layout > .wp-block-column {
    min-width: 0;

    flex-basis: auto !important;

    margin: 0 !important;
}


/* =========================================================
   3. BOX THÔNG TIN LIÊN HỆ
   ========================================================= */

.contact-info {
    height: 100%;

    margin: 0 !important;
    padding: 30px !important;

    box-sizing: border-box;

    background: #f4f8f5;

    border: 1px solid #dce6df;

    border-radius: 10px;
}


/* Tiêu đề */

.contact-info h2,
.contact-info h3,
.contact-info .wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 22px !important;

    padding-bottom: 11px !important;

    color: #084f2d !important;

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.35;

    border-bottom: 2px solid #0e5739 !important;
}


/* Nội dung */

.contact-info p {
    margin-top: 0 !important;
    margin-bottom: 15px !important;

    color: #292929;

    font-size: 16px;

    line-height: 1.7;
}


.contact-info strong,
.contact-info b {
    color: #084f2d;

    font-weight: 700;
}


/* Link */

.contact-info a {
    color: #0e5739 !important;

    font-weight: 600;

    text-decoration: none !important;
}


.contact-info a:hover {
    color: #c90000 !important;

    text-decoration: none !important;
}


/* Hotline nổi bật */

.contact-info a[href^="tel:"] {
    color: #c90000 !important;

    font-size: 18px;

    font-weight: 700;
}


.contact-info a[href^="tel:"]:hover {
    color: #a70000 !important;
}


/* Danh sách nếu sử dụng */

.contact-info ul {
    margin: 8px 0 0 !important;

    padding-left: 22px !important;
}


.contact-info li {
    margin-bottom: 10px;

    color: #292929;

    line-height: 1.65;
}


/* =========================================================
   4. BOX FORM LIÊN HỆ
   ========================================================= */

.contact-form-box {
    height: 100%;

    margin: 0 !important;
    padding: 30px !important;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dce6df;

    border-radius: 10px;

    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.055);
}


/* Tiêu đề */

.contact-form-box h2,
.contact-form-box h3,
.contact-form-box .wp-block-heading {
    margin-top: 0 !important;
    margin-bottom: 22px !important;

    padding-bottom: 11px !important;

    color: #084f2d !important;

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.35;

    border-bottom: 2px solid #0e5739 !important;
}


/* =========================================================
   5. CONTACT FORM 7
   ========================================================= */

.contact-form-box .wpcf7 {
    width: 100%;
}


.contact-form-box .wpcf7-form {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* Paragraph CF7 */

.contact-form-box .wpcf7-form p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}


/* Label */

.contact-form-box .wpcf7-form label {
    display: block;

    width: 100%;

    color: #292929;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;
}


/* Wrapper input */

.contact-form-box .wpcf7-form-control-wrap {
    display: block;

    width: 100%;

    margin-top: 7px;
}


/* =========================================================
   6. INPUT / EMAIL / TEL / TEXTAREA
   ========================================================= */

.contact-form-box
.wpcf7 input[type="text"],

.contact-form-box
.wpcf7 input[type="email"],

.contact-form-box
.wpcf7 input[type="tel"],

.contact-form-box
.wpcf7 input[type="url"],

.contact-form-box
.wpcf7 input[type="number"],

.contact-form-box
.wpcf7 select,

.contact-form-box
.wpcf7 textarea {
    display: block;

    width: 100% !important;

    margin: 0 !important;

    padding: 12px 14px !important;

    box-sizing: border-box;

    color: #292929;

    background: #ffffff;

    border: 1px solid #cfdad3 !important;

    border-radius: 6px !important;

    outline: none;

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-size: 15px !important;
    font-weight: 400;

    line-height: 1.5;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Input chiều cao */

.contact-form-box
.wpcf7 input[type="text"],

.contact-form-box
.wpcf7 input[type="email"],

.contact-form-box
.wpcf7 input[type="tel"],

.contact-form-box
.wpcf7 input[type="url"],

.contact-form-box
.wpcf7 input[type="number"],

.contact-form-box
.wpcf7 select {
    min-height: 48px;
}


/* Textarea */

.contact-form-box
.wpcf7 textarea {
    min-height: 145px;

    resize: vertical;
}


/* Focus */

.contact-form-box
.wpcf7 input[type="text"]:focus,

.contact-form-box
.wpcf7 input[type="email"]:focus,

.contact-form-box
.wpcf7 input[type="tel"]:focus,

.contact-form-box
.wpcf7 input[type="url"]:focus,

.contact-form-box
.wpcf7 input[type="number"]:focus,

.contact-form-box
.wpcf7 select:focus,

.contact-form-box
.wpcf7 textarea:focus {
    border-color: #0e5739 !important;

    box-shadow:
        0 0 0 3px rgba(14, 87, 57, 0.10) !important;
}


/* Placeholder */

.contact-form-box
.wpcf7 input::placeholder,

.contact-form-box
.wpcf7 textarea::placeholder {
    color: #8a918d;

    opacity: 1;
}


/* =========================================================
   7. NÚT GỬI
   ========================================================= */

.contact-form-box
.wpcf7 input[type="submit"] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 160px;
    min-height: 48px;

    margin: 3px 0 0 !important;

    padding: 11px 24px !important;

    box-sizing: border-box;

    color: #ffffff !important;

    background: #c90000 !important;

    border: 1px solid #c90000 !important;

    border-radius: 6px !important;

    cursor: pointer;

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.4;

    text-align: center;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.contact-form-box
.wpcf7 input[type="submit"]:hover {
    color: #ffffff !important;

    background: #a70000 !important;

    border-color: #a70000 !important;

    transform: translateY(-1px);
}


/* Khi nút bị disabled */

.contact-form-box
.wpcf7 input[type="submit"]:disabled {
    cursor: not-allowed;

    opacity: 0.65;

    transform: none;
}


/* =========================================================
   8. LOADING SPINNER
   ========================================================= */

.contact-form-box
.wpcf7 .wpcf7-spinner {
    vertical-align: middle;

    margin-left: 10px;
}


/* =========================================================
   9. THÔNG BÁO CONTACT FORM 7
   ========================================================= */

.contact-form-box
.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0 !important;

    padding: 12px 15px !important;

    border-radius: 6px;

    font-size: 14px;

    line-height: 1.55;
}


/* Thành công */

.contact-form-box
.wpcf7 form.sent
.wpcf7-response-output {
    color: #0b5135;

    background: #eef8f1;

    border: 1px solid #9ccaae;
}


/* Lỗi */

.contact-form-box
.wpcf7 form.invalid
.wpcf7-response-output,

.contact-form-box
.wpcf7 form.failed
.wpcf7-response-output,

.contact-form-box
.wpcf7 form.aborted
.wpcf7-response-output {
    color: #8f0000;

    background: #fff1f1;

    border: 1px solid #e4a7a7;
}


/* Lỗi ngay dưới trường */

.contact-form-box
.wpcf7-not-valid-tip {
    display: block;

    margin-top: 5px;

    color: #c90000;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;
}


/* Field lỗi */

.contact-form-box
.wpcf7 .wpcf7-not-valid {
    border-color: #c90000 !important;
}


/* =========================================================
   10. GOOGLE MAP TITLE
   Nếu H2 phía trên Map gắn class: contact-map-title
   ========================================================= */

body.page
.entry-content.wp-block-post-content
.contact-map-title {
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: 1180px !important;

    margin-top: 38px !important;
    margin-bottom: 18px !important;

    margin-left: 50% !important;

    padding-bottom: 10px !important;

    transform: translateX(-50%);

    color: #084f2d !important;

    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;

    font-size: 27px;
    font-weight: 700;

    line-height: 1.35;

    border-bottom: 2px solid #e0e9e3 !important;
}


/* =========================================================
   11. GOOGLE MAP
   ========================================================= */

body.page
.entry-content.wp-block-post-content
.contact-map {
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: 1180px !important;

    margin: 0 0 45px !important;
    margin-left: 50% !important;

    padding: 0 !important;

    overflow: hidden;

    transform: translateX(-50%);

    border: 1px solid #dce6df;

    border-radius: 10px;

    box-sizing: border-box;
}


/* iframe Google Maps */

.contact-map iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: 420px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* Custom HTML block */

.contact-map .wp-block-html {
    width: 100%;

    margin: 0 !important;
}


/* =========================================================
   12. LINK / ACCESSIBILITY
   ========================================================= */

.contact-layout a:focus-visible,
.contact-map a:focus-visible {
    outline: 2px solid #c90000;

    outline-offset: 3px;
}


/* =========================================================
   13. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    body.page
    .entry-content.wp-block-post-content
    .contact-layout {
        width: calc(100vw - 36px) !important;

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 24px;
    }


    .contact-info,
    .contact-form-box {
        padding: 24px !important;
    }


    .contact-info h2,
    .contact-form-box h2,
    .contact-info .wp-block-heading,
    .contact-form-box .wp-block-heading {
        font-size: 22px;
    }


    body.page
    .entry-content.wp-block-post-content
    .contact-map,

    body.page
    .entry-content.wp-block-post-content
    .contact-map-title {
        width: calc(100vw - 36px) !important;
    }

}


/* =========================================================
   14. MOBILE <= 767px
   Hai cột chuyển thành một cột
   ========================================================= */

@media (max-width: 767px) {

    body.page
    .entry-content.wp-block-post-content
    .contact-layout {
        display: grid !important;

        grid-template-columns: 1fr;

        width: calc(100vw - 30px) !important;

        gap: 22px;

        margin-top: 18px !important;
        margin-bottom: 30px !important;
    }


    .contact-info,
    .contact-form-box {
        height: auto;

        padding: 22px !important;
    }


    .contact-info h2,
    .contact-info h3,
    .contact-info .wp-block-heading,

    .contact-form-box h2,
    .contact-form-box h3,
    .contact-form-box .wp-block-heading {
        margin-bottom: 18px !important;

        font-size: 22px;
    }


    .contact-info p {
        font-size: 15px;
    }


    .contact-form-box
    .wpcf7 input[type="submit"] {
        width: 100%;

        min-height: 48px;
    }


    body.page
    .entry-content.wp-block-post-content
    .contact-map-title {
        width: calc(100vw - 30px) !important;

        margin-top: 30px !important;

        font-size: 23px;
    }


    body.page
    .entry-content.wp-block-post-content
    .contact-map {
        width: calc(100vw - 30px) !important;

        margin-bottom: 35px !important;
    }


    .contact-map iframe {
        height: 330px !important;
    }

}


/* =========================================================
   15. MOBILE NHỎ <= 480px
   ========================================================= */

@media (max-width: 480px) {

    body.page
    .entry-content.wp-block-post-content
    .contact-layout {
        width: calc(100vw - 24px) !important;
    }


    .contact-info,
    .contact-form-box {
        padding: 18px !important;
    }


    .contact-info h2,
    .contact-info h3,
    .contact-info .wp-block-heading,

    .contact-form-box h2,
    .contact-form-box h3,
    .contact-form-box .wp-block-heading {
        font-size: 20px;
    }


    .contact-form-box
    .wpcf7 input[type="text"],

    .contact-form-box
    .wpcf7 input[type="email"],

    .contact-form-box
    .wpcf7 input[type="tel"],

    .contact-form-box
    .wpcf7 select,

    .contact-form-box
    .wpcf7 textarea {
        font-size: 16px !important;
    }


    body.page
    .entry-content.wp-block-post-content
    .contact-map-title,

    body.page
    .entry-content.wp-block-post-content
    .contact-map {
        width: calc(100vw - 24px) !important;
    }


    .contact-map iframe {
        height: 290px !important;
    }

}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-form-box input,
    .contact-info a {
        transition: none !important;
    }

}

.contact-map iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: 420px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/* =========================================================
   END CONTACT.CSS
   ========================================================= */