/* =============================
   Services Page
============================= */

/* -----------------------------
   Service detail cards
------------------------------ */
.service-list {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
}

.service-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    /* หัวการ์ด (ไอคอน + ชื่อบริการ + คำอธิบาย) กินเต็มความกว้าง
       แล้วค่อยแยกเป็นรูป+ปุ่ม กับรายละเอียด ด้านล่าง */
    grid-template-areas:
        "head head"
        "intro body";
    align-items: start;
    gap: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 52px);
    padding: clamp(26px, 3vw, 40px);
    border-radius: var(--radius-xl);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4);
    backdrop-filter: blur(var(--blur-md)) saturate(1.4);
    box-shadow: var(--shadow-md), var(--shadow-inset-glass);
    transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.service-detail:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg), var(--shadow-inset-glass);
}

/* รูปประกอบบริการ — เป็นโปสเตอร์ที่มีข้อความในภาพ จึงแสดงเต็มใบ ไม่ crop */
.service-detail-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.service-detail-media img {
    display: block;
    width: 100%;
    height: auto;
}

.service-detail-head {
    grid-area: head;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 22px;
    padding-bottom: clamp(18px, 2vw, 26px);
    border-bottom: 1px solid var(--border);
}

.service-detail-head .icon-box {
    flex: none;
}

/* กินพื้นที่ที่เหลือ และตั้ง flex-basis ไว้ พอที่ไม่พอปุ่มจะตกบรรทัดเองแทนการบีบข้อความ */
.service-detail-head-text {
    flex: 1 1 320px;
}

/* margin-left:auto ดันปุ่มไปชิดขวาเฉพาะตอนที่อยู่บรรทัดเดียวกับหัวข้อ */
.service-detail-head .btn {
    flex: none;
    margin-left: auto;
}

.service-detail-head h2 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

.service-detail-head p {
    margin: 0;
    max-width: 68ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.service-detail-intro {
    grid-area: intro;
    display: grid;
    align-content: start;
    gap: 18px;
}

.service-detail-body {
    grid-area: body;
}

/* ตัวเลขสำคัญของแต่ละบริการ */
.detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-stats div {
    flex: 1 1 140px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    border: 1px solid var(--border);
}

.detail-stats b {
    display: block;
    color: var(--primary-dark);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

.detail-stats span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.service-detail-body {
    display: grid;
    gap: 20px;
    align-content: start;
}


.detail-block h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-dark);
}

.detail-block h3 svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.detail-list {
    display: grid;
    gap: 9px;
}

.detail-list li {
    position: relative;
    padding-left: 26px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.detail-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
}

.detail-steps {
    counter-reset: dstep;
    display: grid;
    gap: 9px;
}

.detail-steps li {
    counter-increment: dstep;
    position: relative;
    padding-left: 34px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.detail-steps li::before {
    content: counter(dstep);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--primary-light);
    border: 1px solid var(--border);
    color: var(--primary-dark);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1;
}

/* -----------------------------
   Interactive tabs
------------------------------ */
.tabs-wrap {
    display: grid;
    gap: clamp(22px, 3vw, 32px);
}

.tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.tab-btn {
    flex: 1 1 auto;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--glass-tint);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition:
        background-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.tab-btn:hover {
    color: var(--primary-dark);
    background: var(--primary-light);
    border-color: rgba(255, 106, 0, 0.35);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tab-btn[aria-selected="true"] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--white);
    font-weight: 600;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.tab-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--radius-lg);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md), var(--shadow-inset-glass);
    animation: tabFade var(--dur-base) var(--ease-out);
}

.tab-panel[hidden] {
    display: none;
}

@keyframes tabFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.tab-panel h3 {
    margin-bottom: 12px;
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
}

.tab-panel p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.tab-panel .btn {
    margin-top: 20px;
}

.tab-suggest {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 22px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    border: 1px solid var(--border);
}

.tab-suggest strong {
    color: var(--primary-dark);
    font-weight: 500;
}

.tab-suggest ul {
    display: grid;
    gap: 8px;
}

.tab-suggest li {
    display: flex;
    gap: 10px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.tab-suggest li svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: var(--primary);
}

/* -----------------------------
   Prepare / notice strip
------------------------------ */
.notice-strip {
    display: flex;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: var(--glass-tint);
    border: 1px dashed var(--border-strong);
}

.notice-strip svg {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.notice-strip p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0;
}

.notice-strip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-weight: 500;
}

/* =============================
   แถบเมนูลัดไปยังบริการ (sticky)
============================= */
.svc-nav {
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 10;
    display: flex;
    gap: 10px;
    margin-bottom: clamp(26px, 3vw, 40px);
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.svc-nav::-webkit-scrollbar { display: none; }

.svc-chip {
    flex: 1 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--glass-tint);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.svc-chip .chip-icon {
    width: 15px;
    height: 15px;
    color: var(--primary);
    transition: transform var(--dur-base) var(--ease-out);
}

.svc-chip:hover,
.svc-chip:focus-visible {
    background: var(--primary-light);
    border-color: rgba(255, 106, 0, 0.35);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.svc-chip:hover .chip-icon {
    transform: translateY(2px);
}

.svc-chip.is-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--white);
    font-weight: 600;
    box-shadow: var(--shadow-primary);
}

.svc-chip.is-active .chip-icon {
    color: var(--white);
}

/* =============================
   ตารางเปรียบเทียบบริการ
============================= */
.compare-wrap {
    /* ตารางกว้างกว่าจอมือถือแน่นอน ให้เลื่อนในกล่องตัวเอง ไม่ดันทั้งหน้าให้เลื่อนแนวนอน */
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.compare-table thead th {
    padding: 16px 18px;
    text-align: left;
    font-weight: 500;
    color: var(--white);
    background: var(--gradient-primary);
    white-space: nowrap;
}

.compare-table tbody th,
.compare-table tbody td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 300;
}

.compare-table tbody th {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.compare-table tbody th a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.compare-table tbody tr:hover {
    background: var(--primary-light);
}

.compare-table b {
    color: var(--primary-dark);
    font-weight: 500;
}

.compare-note {
    margin-top: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* =============================
   รายละเอียดบริการ — สลับซ้าย/ขวาให้มีจังหวะ
============================= */
.service-detail:nth-of-type(even) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
        "head head"
        "body intro";
}

/* แถบลัดเป็น sticky อยู่ใต้ header ตอนกดลิงก์ต้องเผื่อความสูงของทั้งสองอัน
   ไม่งั้นหัวข้อบริการจะไปหลบอยู่ใต้แถบ (ค่าใน global.css เผื่อไว้แค่ header) */
.service-detail {
    scroll-margin-top: calc(var(--header-height) + 90px);
}

/* การ์ดที่ยังไม่มีรูปประกอบ — ไม่ต้องกันคอลัมน์ซ้ายไว้ให้ว่าง
   ให้รายละเอียดกินเต็มความกว้าง แล้ววางปุ่มไว้ท้ายการ์ด */
.service-detail--no-media,
.service-detail--no-media:nth-of-type(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "head"
        "body";
}

.service-detail--no-media .service-detail-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px 32px;
}