/* ======================================================
   SERVICES – PREMIUM SPA STYLE (CLEAN VERSION)
   Replace entire old CSS with this
====================================================== */


/* ===============================
   VARIABLES
=============================== */

.section.bg-gray-150{
    --primary:#0c1451;
    --text:#1f2937;
    --muted:#6b7280;
    --soft:#f8f9ff;
}


/* ===============================
   SECTION LAYOUT
=============================== */

.section.bg-gray-150{
    padding:90px 0;
    background:linear-gradient(135deg,#f8f9ff,#eef2ff);
}

.title{
    font-size:2rem;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--primary);
}


/* ===============================
   CATEGORY HEADINGS
=============================== */

.section h3{
    font-size:1.15rem;
    font-weight:600;
    letter-spacing:1px;
    color:var(--primary);
}

/* ===== HEADING SPACING FIX ===== */

.section .mb-3{
    margin-bottom:28px !important; /* giãn block tiêu đề + mô tả */
}

.section h3{
    margin-bottom:12px !important; /* cách title và text */
    line-height:1.35;
}

.section .text-muted{
    margin-top:6px;
    line-height:1.65;

    text-align:left;

    white-space:nowrap;     /* 🔥 không xuống dòng */
}


/* ===============================
   HORIZONTAL LIST
=============================== */

[id$="-list"]{
    display:flex;
    gap:22px;
    overflow-x:auto;
    padding:8px 10px 18px;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;
}

/* hide scrollbar clean */
[id$="-list"]::-webkit-scrollbar{
    display:none;
}
[id$="-list"]{
    scrollbar-width:none;
}


/* ===============================
   CARD
=============================== */

[id$="-list"] > a{
    flex:0 0 18rem;
    width:18rem;
    scroll-snap-align:start;
}

.card{
    border-radius:20px;
    overflow:hidden;
    border:none;
    background:#fff;

    transition:.35s ease;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

/* hover luxury */
.card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(15,23,42,.12);
}

/* image zoom */
.card img{
    transition:transform .6s ease;
}
.card:hover img{
    transform:scale(1.08);
}


/* ===============================
   CARD TEXT
=============================== */

.card-body{
    padding:16px 16px 18px;
}

.card-title{
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--primary);
}

.card-text{
    font-size:.85rem;
    color:var(--muted);
}

.small{
    font-size:.78rem;
    opacity:.85;
}


/* ===============================
   SCROLL BUTTONS
=============================== */

.position-relative{
    position:relative;
}

.scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:44px;
    height:44px;
    border-radius:50%;
    border:none;

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

    background:#fff;
    cursor:pointer;

    font-size:22px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.25s;
    z-index:10;
}

.scroll-btn:hover{
    transform:translateY(-50%) scale(1.12);
}

.scroll-left{ left:-18px; }
.scroll-right{ right:-18px; }


/* ===============================
   VIEW ALL BUTTON (Luxury Gold)
=============================== */

.btn-view{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.75rem 1.8rem;
    border-radius:999px;

    font-size:.9rem;
    font-weight:600;
    letter-spacing:.4px;

    text-decoration:none;
    color:#3b2a1f;

    background:linear-gradient(90deg,#fff,#ffd37a,#8B5E3C,#fff);
    background-size:200% auto;

    border:1px solid rgba(139,94,60,.3);

    box-shadow:0 10px 24px rgba(139,94,60,.18);
    transition:.35s;
}

.btn-view:hover{
    background-position:right center;
    transform:translateY(-5px);
}
.section .btn-view{
    margin-bottom:32px;   /* 🔥 giãn ra */
}

/* ===============================
   RESPONSIVE
=============================== */

/* large screens */
@media (min-width:1200px){
    [id$="-list"] > a{
        flex:0 0 23%;
        width:23%;
    }
}

/* tablet */
@media (max-width:991px){
    [id$="-list"] > a{
        flex:0 0 38%;
        width:38%;
    }
}

/* mobile */
@media (max-width:767px){

    .title{
        font-size:1.6rem;
    }

    [id$="-list"] > a{
        flex:0 0 82%;
        width:82%;
    }

    .scroll-btn{
        display:none;
    }

    .btn-view{
        width:100%;
        max-width:340px;
    }

    .card:hover{
        transform:none;
        box-shadow:0 6px 18px rgba(15,23,42,.06);
    }
}


/* ===============================
   REDUCED MOTION
=============================== */

@media (prefers-reduced-motion:reduce){
    *{
        transition:none !important;
        animation:none !important;
    }
}