.page-hero{padding:85px 0;background:#171717;color:#fff}.page-hero.compact{padding:58px 0}.page-hero h1{font-size:clamp(38px,6vw,66px);margin:10px 0}.page-hero p:last-child{color:#ccc}
.service-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.service-filter button{border:1px solid #ddd;background:#fff;border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:700}.service-filter button.active{background:#d5a84f;border-color:#d5a84f}
.service-public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.service-public-grid.related{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-public-card{background:#fff;border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05)}.service-image{height:250px;background:linear-gradient(135deg,#1b1b1b,#59432e);display:grid;place-items:center;color:#fff;font-size:24px;font-weight:900}.service-image img{width:100%;height:100%;object-fit:cover}.service-card-body{padding:22px}.service-card-body small{color:#a7782d;font-weight:800}.service-card-body h2,.service-card-body h3{margin:9px 0}.service-card-body p{color:#666;line-height:1.7}.service-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eee;padding-top:15px;margin-top:15px}.service-meta strong{font-size:20px}.service-meta span{color:#777}
.service-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:35px;align-items:start}.service-detail-image{width:100%;max-height:560px;object-fit:cover;border-radius:14px}.service-rich-content{font-size:17px;line-height:1.85}.service-rich-content img{max-width:100%;height:auto}.service-rich-content table{width:100%;border-collapse:collapse}.service-rich-content td,.service-rich-content th{border:1px solid #ddd;padding:10px}.service-booking-card{position:sticky;top:105px;background:#171717;color:#fff;border-radius:14px;padding:28px}.service-booking-card p{color:#d5d5d5;line-height:1.7}.detail-price{display:flex;gap:12px;align-items:center;margin:22px 0}.detail-price strong{font-size:28px;color:#d5a84f}.detail-price s{color:#aaa}.btn.full{display:flex;width:100%;margin-top:10px;justify-content:center}
@media(max-width:950px){.service-public-grid,.service-public-grid.related{grid-template-columns:repeat(2,minmax(0,1fr))}.service-detail-layout{grid-template-columns:1fr}.service-booking-card{position:static}}
@media(max-width:620px){.service-public-grid,.service-public-grid.related{grid-template-columns:1fr}.service-image{height:220px}}


/* V3.1.4 - Ổn định bố cục dịch vụ và hiển thị nội dung trên mobile */
.service-public-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
}

.service-public-card .service-image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden !important;
    flex: 0 0 auto;
    background: #171717;
}

.service-public-card .service-image img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.service-public-card .service-card-body {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px !important;
    background: #fff !important;
    color: #211e1b !important;
    z-index: auto !important;
}

.service-public-card .service-card-body small,
.service-public-card .service-card-body h2,
.service-public-card .service-card-body h3,
.service-public-card .service-card-body p,
.service-public-card .service-meta {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
}

.service-public-card .service-card-body h2,
.service-public-card .service-card-body h3 {
    font-size: 24px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.service-public-card .service-card-body h2 a,
.service-public-card .service-card-body h3 a {
    color: #211e1b !important;
    text-shadow: none !important;
}

.service-public-card .service-card-body p {
    color: #666 !important;
    overflow-wrap: anywhere;
}

/* frontend-v230.js gắn data-reveal cho .section; ép khu vực dịch vụ luôn hiển thị */
.section:has(.service-detail-layout),
.section:has(.service-public-grid),
.section[data-reveal]:has(.service-detail-layout),
.section[data-reveal]:has(.service-public-grid) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.service-detail-layout,
.service-detail-layout > div,
.service-rich-content,
.service-booking-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.service-rich-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #27231f !important;
    background: #fff;
    overflow-wrap: anywhere;
}

.service-rich-content > *:first-child { margin-top: 0; }
.service-rich-content > *:last-child { margin-bottom: 0; }
.service-rich-content img,
.service-rich-content video,
.service-rich-content iframe {
    max-width: 100% !important;
}

@media (max-width: 620px) {
    .page-hero.compact {
        padding: 46px 0 !important;
    }

    .page-hero.compact h1 {
        font-size: clamp(36px, 11vw, 54px) !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere;
    }

    .section:has(.service-detail-layout) {
        padding: 34px 0 110px !important;
        min-height: 1px !important;
    }

    .service-detail-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .service-detail-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 3;
        object-fit: cover !important;
        margin: 0 0 20px !important;
    }

    .service-rich-content {
        display: block !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .service-booking-card {
        display: block !important;
        position: static !important;
        width: 100% !important;
        padding: 22px !important;
    }

    .service-public-grid,
    .service-public-grid.related {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .service-public-card .service-image {
        aspect-ratio: 16 / 10;
    }

    .service-public-card .service-card-body {
        padding: 16px !important;
    }

    .service-public-card .service-card-body h2,
    .service-public-card .service-card-body h3 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    .service-meta {
        flex-wrap: wrap;
        gap: 8px 14px;
    }
}