/*
 * Child theme main stylesheet
 * Page-specific or component-specific CSS should live here first.
 */

.mona-about-page {
    display: block;
}

/*
 * Service listing: the page renders one .service-inner block per service
 * category, so add vertical spacing between consecutive category blocks
 * (the original single-block design had no inter-block gap).
 */
.service-main .service-inner + .service-inner {
    margin-top: 6.4rem;
}

@media screen and (max-width: 768px) {
    .service-main .service-inner + .service-inner {
        margin-top: 4rem;
    }

    /* DXM-20: Ẩn pagination bullets của slider "Dịch vụ" trên trang chủ
       (bảng điện thoại) — khách không muốn hiển thị dãy chấm phía dưới slide. */
    .js-hm-service .swiper-pagination {
        display: none !important;
    }

    /* DXM-21: Ẩn pagination bullets của slider "Danh mục dịch vụ" (.js-cate-slide)
       trên trang /dich-vu/ ở bảng điện thoại — khách không muốn hiển thị. */
    .js-cate-slide .swiper-pagination {
        display: none !important;
    }
}

/*
 * Auto-generated table of contents (filled into the theme's .toc-box slot).
 */
.toc-box:empty {
    display: none;
}

.toc-box_title {
    margin-bottom: 1.2rem;
    color: #481E0B;
    font-family: var(--font-sec);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc-item {
    line-height: 1.45;
}

.toc-item.toc-level-3 {
    padding-left: 1.6rem;
}

.toc-link {
    display: inline-block;
    color: #5b4636;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.toc-link:hover,
.toc-link.is-active {
    color: #481E0B;
    font-weight: 600;
}

/* Offset anchor targets so sticky-header doesn't cover the heading. */
.mona-content :is(h2, h3)[id] {
    scroll-margin-top: 12rem;
}

/*
 * Contact Form 7 — match the theme. The response box uses a solid background so
 * it stays readable on any context (dark footer or light form sections).
 */
.wpcf7 {
    position: relative;
}

.wpcf7-response-output {
    margin: 1.2rem 0 0 !important;
    padding: 0.9rem 1.4rem !important;
    border-width: 1px !important;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output {
    display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #f0b4b4 !important;
    background: #fdecec;
    color: #b3261e;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #b7e0bd !important;
    background: #eaf7ec;
    color: #1f7a33;
}

.wpcf7-not-valid-tip {
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    display: inline-block;
    border-radius: 0.4rem;
    background: #fdecec;
    color: #b3261e;
    font-size: 1.25rem;
    line-height: 1.4;
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: #e0a0a0 !important;
}

.wpcf7-spinner {
    margin: 0 0 0 0.8rem;
}

/* Fix: khi đang ở trang liên kết trực tiếp với menu-item dropdown (current-menu-item),
   CSS cascade làm toàn bộ .menu-link con bị màu nâu #A65B2F!important từ rule parent.
   (1) Reset child items về màu chữ chuẩn khi dropdown mở nhưng không hover.
   (2) Giữ white khi hover để đồng bộ với các trang khác. */
@media screen and (min-width: 1201px) {
    .child .menu-item .menu-link {
        color: #333333 !important;
    }
    .child .menu-item:hover .menu-link {
        color: white !important;
    }
}

/* DXM-25: 4 icon mạng xã hội (Facebook / YouTube / TikTok / Instagram) ở
   footer đang là 24×24px, khách muốn to gấp đôi cho nổi bật + dễ bấm.
   Áp cả desktop lẫn mobile. Tăng gap cho không dính khi icon to hơn. */
.footer-box .ss-list img {
    width: 48px;
    height: 48px;
}
.footer-box .ss-list {
    gap: 1.2rem;
}

/* DXM-28: Khách yêu cầu trả lại khung nổi "Liên hệ" về kích thước gốc — gỡ
   block phóng to gấp đôi (DXM-26) đã thêm trước đó. Không đụng phần khác. */

/* DXM-29: CHỈ phóng to gấp đôi menu popup xổ ra (danh sách 6 kênh
   Email/Điện thoại/Chỉ đường/Chat/Zalo/Messenger) khi khách bấm nút
   "Liên hệ ngay" — không đụng kích thước nút chính. Dùng transform scale(2)
   với origin bottom-right để popup phóng sang trái + lên trên, giữ mép phải
   cách nút cố định (69.875px) → không đè lên nút, không lệch bố cục. */
.sticker-ct .st-ct-list {
    transform: scale(2);
    transform-origin: 100% 100%;
}

/* common.css ẩn mọi <br> dưới 980px (trick cho tiêu đề desktop tự chảy trên
   mobile) — nhưng footer render nội dung admin nhập qua nl2br (giới thiệu,
   Số CCHN/GPHĐ, copyright) nên cần giữ xuống hàng ở mọi kích thước màn hình. */
@media screen and (max-width: 980px) {
    .footer br {
        display: inline;
    }
}

/* Popup gallery khách hàng: khi mục có "Thư viện ảnh (popup)", modal
   .frame-compare chứa slider .fc-slider (Swiper) — slide 1 là khối so sánh
   Trước/Sau, các slide sau là ảnh thư viện. Điều hướng bằng 2 mũi tên tròn
   + bullets; giữ khung vuông 1:1 và bo góc 1.2rem đồng bộ với compare. */
.fc-inner .fc-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1.2rem;
}

.fc-slider .swiper-slide {
    overflow: hidden;
    border-radius: 1.2rem;
}

.fc-photo {
    position: relative;
    padding-top: 100%;
    background: #1c120c;
}

.fc-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(72, 30, 11, 0.55);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
}

.fc-nav:hover {
    background: #a65b2f;
}

.fc-prev {
    left: 1.2rem;
}

.fc-next {
    right: 1.2rem;
}

.fc-nav.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* common.css đặt .swiper-pagination position:relative cho slider inline —
   trong popup cần absolute đè lên ảnh, không thì bị đẩy xuống dưới khung
   (overflow hidden cắt mất). */
.fc-slider .swiper-pagination {
    position: absolute;
    top: auto; /* common.css đặt top:0 → absolute sẽ giãn hết chiều cao khung */
    left: 0;
    right: 0;
    bottom: 1rem;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 6;
}

.fc-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
}

.fc-slider .swiper-pagination-bullet-active {
    background: #a65b2f;
    opacity: 1;
}

@media screen and (max-width: 576px) {
    .fc-nav {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.3rem;
    }

    .fc-prev {
        left: 0.8rem;
    }

    .fc-next {
        right: 0.8rem;
    }
}