/* ==========================================================================
   GIAO DIỆN CHI TIẾT DỊCH VỤ (SINGLE SERVICE) - BẢN OPTIMIZED CLEARED
   ========================================================================== */

/* ==========================================================================
   1. RESET & KHÓA TRỤC NGANG (CHỐNG VỠ KHUNG TOÀN CỤC)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ap-service-detail {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #ffffff;
    color: #111;
    padding-bottom: 100px;
}

/* Ép tất cả các phần tử con dùng border-box để không phình to khi có padding */
.ap-service-detail *, 
.ap-service-detail *::before, 
.ap-service-detail *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Vô hiệu hóa lệnh ép width mặc định của Gutenberg */
.ap-service-detail .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

/* ==========================================================================
   2. KHUNG BỐ CỤC CHUNG (CONTAINERS & LAYOUTS)
   ========================================================================== */
.sv-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 40px;
}

.sv-module {
    padding: 80px 0; 
}

/* Bố cục chia đôi chung */
.split-layout {
    display: flex !important;
    justify-content: space-between !important;
    gap: 80px !important; 
}
.split-left { flex: 0 0 24% !important; }
.split-right { flex: 1 !important; }

/* Tùy chỉnh riêng cho khối 1 Ảnh + 1 Chữ */
.sv-text-1img .split-layout {
    align-items: center !important; 
    gap: 8% !important; 
}
.sv-text-1img .split-left { flex: 0 0 35% !important; }
.sv-text-1img .split-left .module-text { padding-top: 0 !important; }
.sv-text-1img .split-right { flex: 0 0 57% !important; }

.sv-text-1img .split-right img,
.sv-text-1img .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 650px !important; 
    object-fit: cover !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   3. CÁC MODULE CHI TIẾT (HERO, GRID ẢNH, FAQ)
   ========================================================================== */

/* --- KHỐI HERO (BANNER TRÀN VIỀN) --- */
.sv-hero {
    padding-top: 0 !important; 
    position: relative;
}
.sv-hero .sv-container {
    display: block !important; 
    max-width: 100% !important; 
    padding: 0 !important; 
}
.sv-hero .hero-image {
    width: 100% !important;
    margin: 0 !important;
}
.sv-hero .hero-image img, 
.sv-hero .wp-block-image img {
    width: 100vw !important;
    height: 85vh !important; 
    object-fit: cover !important;
    display: block;
}
.sv-hero .hero-content {
    position: absolute !important;
    top: 55% !important; 
    left: max(40px, calc((100vw - 1400px) / 2 + 40px)) !important;
    transform: translateY(-50%) !important;
    max-width: 600px !important;
    z-index: 10;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- LƯỚI 2 ẢNH CỘT PHẢI --- */
.img-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
}
.img-grid-2 img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 15px;
}
.img-box h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    color: #111 !important;
    text-transform: none !important;
}
.img-box p { font-size: 14px !important; color: #555 !important; line-height: 1.6 !important; }

/* --- KHỐI FAQ ACCORDION (NATIVE DETAILS OPTIMIZED) --- */
.ap-service-detail .faq-title {
    text-align: center !important;
    font-size: 2rem !important;
    font-weight: 200 !important;
    text-transform: uppercase !important;
    color: #666 !important;
    margin-bottom: 50px !important;
    letter-spacing: 1px !important;
}

/* Khung bao bọc danh sách câu hỏi */
.ap-service-detail .sv-accordion-native {
    max-width: 1100px !important;
    margin: 0 auto !important;
    border-top: 1px solid #e0e0e0 !important;
	padding: 0 10px 0 10px;
}

/* Reset toàn bộ style mặc định xấu xí của trình duyệt/theme */
.ap-service-detail .sv-accordion-native details {
    border-bottom: 1px solid #e0e0e0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ẩn mũi tên tam giác và xóa nền xám của thẻ summary */
.ap-service-detail .sv-accordion-native details summary {
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.ap-service-detail .sv-accordion-native details summary::-webkit-details-marker {
    display: none !important;
}

/* Định hình lại thanh Tiêu đề câu hỏi cho sang trọng */
.ap-service-detail .sv-accordion-native details summary {
    width: 100% !important;
    text-align: left !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    padding: 10px 0 !important;
    color: #111 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Tạo dấu + nghệ thuật bên phải */
.ap-service-detail .sv-accordion-native details summary::after {
    content: "+" !important;
    font-size: 24px !important;
    font-weight: 200 !important;
    color: #888 !important;
}

/* Khi bấm mở ra: Tự động đổi dấu + thành dấu - */
.ap-service-detail .sv-accordion-native details[open] summary::after {
    content: "-" !important;
}

/* Khu vực hiển thị câu trả lời bên trong */
.ap-service-detail .sv-accordion-native details p {
    padding-top: 5px !important;
    padding-bottom: 30px !important;
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   4. TYPOGRAPHY & BUTTONS (FONT CHỮ)
   ========================================================================== */
.sv-hero .hero-title {
    font-size: 4.5rem; font-weight: 100; line-height: 1.1; margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: -1px;
}
.sv-hero .hero-title em { font-family: 'Times New Roman', Times, serif; font-style: italic; font-weight: 300; letter-spacing: 2px; }
.sv-hero .hero-desc { font-size: 14px; color: #555; max-width: 450px; line-height: 1.6; }

.module-title, .split-left .module-title {
    font-size: 1.8rem !important; font-weight: 200 !important; color: #666 !important; 
    letter-spacing: 1px !important; margin-bottom: 40px !important; line-height: 1.2 !important;
}
.sv-accordion-wrapper .module-title, .sv-module h2[style*="text-transform:uppercase"] {
    padding-bottom: 40px !important; font-weight: 300 !important; text-transform: uppercase !important;
}
.module-text p, .split-left .module-text p {
    font-size: 20px !important; color: #111 !important; line-height: 1.6 !important; margin-bottom: 25px !important;
}

/* Nút Xem chi tiết chuẩn AP */
.sv-read-more { margin-top: 35px !important; margin-bottom: 0 !important; }
.sv-read-more a {
    display: inline-flex !important; align-items: center !important; font-size: 13px !important;
    font-weight: 700 !important; color: #111 !important; text-decoration: none !important;
    text-transform: none !important; transition: color 0.3s ease !important;
}
.sv-read-more a::before {
    content: "" !important; display: inline-block !important; width: 45px !important; height: 1px !important;
    background-color: #111 !important; margin-right: 15px !important;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease !important;
}
.sv-read-more a:hover { color: #555 !important; }
.sv-read-more a:hover::before { width: 65px !important; background-color: #555 !important; }


/* ==========================================================================
   5. MOBILE RESPONSIVE (TỐI ƯU MÀN HÌNH DƯỚI 991PX)
   ========================================================================== */
@media (max-width: 991px) {
    
    /* Reset Khung chứa Mobile */
    .ap-service-detail .sv-container { padding: 0 0px !important; }
    .sv-module { padding: 40px 0 !important; }

    /* Fix Gutenberg Columns (Bẻ dọc toàn bộ) */
    .ap-service-detail .wp-block-columns {
        display: flex !important; flex-direction: column !important;
        gap: 30px !important; margin: 0 !important; padding: 0 !important; width: 100% !important;
    }
    .ap-service-detail .wp-block-column {
        flex-basis: 100% !important; width: 100% !important; 
        margin: 0 !important; padding: 10px !important;
    }

    /* Đảo ngược thứ tự cơ bản: Ảnh luôn lên trên, Chữ xuống dưới */
    .ap-service-detail .split-right { order: -1 !important; }
    .ap-service-detail .split-left { order: 1 !important; }

    /* --- MOBILE HERO --- */
    .sv-hero { position: relative !important; display: block !important; }
    .sv-hero .hero-image img, .sv-hero .wp-block-image img {
        height: 65vh !important; width: 100% !important; 
        object-fit: cover !important; object-position: center top !important; display: block !important;
    }
    .sv-hero .hero-content {
        position: absolute !important; top: auto !important; bottom: 50px !important; left: 0 !important;
        transform: none !important; padding: 0 25px !important; width: 100% !important;
        margin: 0 !important; z-index: 10 !important;
    }
    .sv-hero .hero-title {
        font-size: 2.2rem !important; margin-bottom: 10px !important; word-wrap: break-word !important; 
        text-shadow: 0 2px 15px rgba(255,255,255,0.7) !important; 
    }

    /* --- MOBILE: KHỐI 2 ẢNH (SLIDER LƯỚT NGANG) --- */
    .ap-service-detail .sv-text-2img .split-left {
        order: -1 !important; /* Chữ nằm trên */
        margin-bottom: 10px !important; 
    }
    .ap-service-detail .sv-text-2img .split-right {
        order: 1 !important;  /* Slider nằm dưới */
    }
    .img-grid-2 {
        display: flex !important; flex-direction: row !important; overflow-x: auto !important;
        scroll-snap-type: x mandatory !important; gap: 10px !important; padding-bottom: 20px !important; 
        margin-right: -20px !important; scrollbar-width: none !important; width: 100% !important;
    }
    .img-grid-2::-webkit-scrollbar { display: none !important; }
    .img-grid-2 .img-box {
        flex: 0 0 85% !important; scroll-snap-align: start !important;
    }
    .img-grid-2 .img-box img {
        width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important;
        border-radius: 4px; padding-left: 10px;
    }

    /* --- MOBILE: FONT CHỮ --- */
    .module-title, .split-left .module-title {
        font-size: 1.5rem !important; margin-bottom: 15px !important; word-wrap: break-word !important;
    }
    .sv-read-more a { font-size: 12px !important; }
    .sv-read-more a::before { width: 30px !important; }
}