/* 
 * LadiPage Services (Dịch vụ) Custom Styles
 * 
 * Focus on premium aesthetics, smooth animations, and zero dependency conflicts.
 */

:root {
    --services-primary: #006eb2;
    --services-secondary: #0D2A38;
    --services-accent: #5cb32e;
    --services-light: #f9fbff;
    --services-text: #5D7285;
    --services-heading: #0D2A38;
}

.services-ladipage {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: #ffffff;
    font-size: 18px;
}

.services-ladipage p {
    font-size: 18px;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* Typography & General */
.services-ladipage h1, .services-ladipage h2, .services-ladipage h3, .services-ladipage h4, .services-ladipage h5, .services-ladipage h6 {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-weight: 700;
}

/* ==================================================
   Hero Section
================================================== */
/* Chiều cao lấy từ biến --banner-height (style.css) để bằng đúng banner trang chủ.
   Khối này chỉ chứa ảnh nền (không có chữ) nên chiều cao do min-height quyết định. */
.services-hero {
    position: relative;
    min-height: var(--banner-height);
    display: flex;
    align-items: center;
    padding: 0;
}

.services-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.services-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.services-hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

.services-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.services-title-main {
    color: var(--color-navy) !important;
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    text-shadow: none;
}

/* ==================================================
   Sections General
================================================== */
.services-section {
    padding: 6rem 0;
    position: relative;
}

.services-intro-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* ==================================================
   Services Grid Section
================================================== */
.services-grid-section {
    background-color: #f9fbff;
    padding: 4rem 0;
}

.services-swiper {
    padding: 20px 5px 60px 5px; /* Add bottom padding for pagination */
    margin: 0;
}

.service-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: auto;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.service-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
}

.service-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-card-img {
    transform: scale(1.05);
}

/* Bấm vào ẢNH hoặc TÊN dịch vụ để mở link đã nhập trong quản trị.
   Thẻ liên kết bọc ảnh phải phủ kín khung ảnh, nếu không ảnh sẽ bị lệch/mất. */
.service-card-img-wrap .service-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.service-card-title .service-card-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-card-title .service-card-link:hover {
    color: var(--services-primary);
}

.service-card-title {
    padding: 20px;
    margin: 0;
    font-size: 20px;
    text-align: center;
    color: var(--services-heading);
    background: #ffffff;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================================================
   Swiper Customization
================================================== */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #dbe4ec;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
    width: 32px;
    background-color: var(--services-primary);
    border-radius: 12px;
}

/* Position Navigation Arrows Outside */
.services-grid-section .swiper-button-prev,
.services-grid-section .swiper-button-next {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    top: calc(50% - 20px);
    margin-top: 0;
}

.services-grid-section .swiper-button-prev:after,
.services-grid-section .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}

.services-grid-section .swiper-button-prev {
    left: -20px;
}

.services-grid-section .swiper-button-next {
    right: -20px;
}

/* Responsive */
@media (max-width: 991px) {
    .services-swiper {
        padding: 20px 5px 60px 5px;
    }
}
@media (max-width: 768px) {
    .services-grid-section .swiper-button-prev {
        left: 0px;
    }
    .services-grid-section .swiper-button-next {
        right: 0px;
    }
}

/* ==================================================
   Banner trên điện thoại: hiện TRỌN 100% tấm ảnh
   --------------------------------------------------
   Bình thường ảnh banner nằm ở lớp nền tuyệt đối (position:absolute) nên
   KHÔNG tự tạo ra chiều cao — nếu để chiều cao "auto" khối banner sẽ sập
   về 0px. Ở khổ điện thoại ta cho ảnh chạy theo luồng bình thường để chính
   tấm ảnh quyết định chiều cao, nhờ vậy ảnh hiện đầy đủ, không bị cắt.
================================================== */
@media (max-width: 575px) {
    .services-hero {
        display: block;
        padding: 0;
    }
    .services-hero-bg {
        position: static;
        width: 100%;
    }
    .services-hero-img {
        height: auto;
    }
}