/* ==========================================================
   Pest Control Site - Custom Styles
   Theme: Eco green + สะอาด ไว้ใจได้
   ========================================================== */

:root {
    --pc-green: #1a7a4c;
    --pc-green-dark: #125c39;
    --pc-green-light: #e8f5ee;
    --pc-accent: #f5a623;
    --pc-dark: #1f2a24;
    --pc-gray: #6c7a72;
    font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: 'Kanit', sans-serif;
    color: var(--pc-dark);
    background: #fbfdfc;
}

a { text-decoration: none; }

/* Navbar */
.navbar-pc {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.navbar-pc .navbar-brand {
    font-weight: 700;
    color: var(--pc-green-dark) !important;
    font-size: 1.3rem;
    white-space: nowrap;
}
.navbar-pc .nav-link {
    color: var(--pc-dark) !important;
    font-weight: 500;
    padding: .5rem 1rem !important;
    white-space: nowrap;
}
/* จอ desktop: บีบระยะเมนูและย่อชื่อบริษัทให้ทุกอย่างอยู่บรรทัดเดียว ไม่ตกบรรทัด */
@media (min-width: 992px) {
    .navbar-pc .navbar-brand { font-size: 1.05rem; }
    .navbar-pc .navbar-brand img { height: 40px !important; }
    .navbar-pc .nav-link { padding: .5rem .55rem !important; font-size: .95rem; }
    .navbar-pc .navbar-nav .btn { font-size: .82rem; padding-left: .7rem !important; padding-right: .7rem !important; }
}
@media (min-width: 1400px) {
    .navbar-pc .navbar-brand { font-size: 1.2rem; }
    .navbar-pc .navbar-brand img { height: 46px !important; }
    .navbar-pc .nav-link { padding: .5rem .8rem !important; font-size: 1rem; }
}
/* ดรอปดาวน์ที่มีรายการยาว (เช่น บริการ 20+ รายการ) ให้เลื่อนได้ ไม่ล้นจอ */
.navbar-pc .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}
.navbar-pc .nav-link:hover,
.navbar-pc .nav-link.active {
    color: var(--pc-green) !important;
}
.topbar {
    background: var(--pc-green-dark);
    color: #fff;
    font-size: 0.85rem;
}
.topbar a { color: #fff; opacity: 0.9; }
.topbar a:hover { opacity: 1; }

/* Hero */
.hero {
    background: linear-gradient(120deg, var(--pc-green-dark), var(--pc-green));
    color: #fff;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}
.hero h1 { font-weight: 700; line-height: 1.3; }
.hero .btn-accent {
    background: var(--pc-accent);
    color: #1f2a24;
    font-weight: 600;
    border: none;
}
.hero .btn-accent:hover { background: #e0951b; color: #1f2a24; }
.hero .btn-outline-light:hover { color: var(--pc-green-dark); }

.hero-pattern {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0),
        linear-gradient(120deg, var(--pc-green-dark), var(--pc-green));
    background-size: 22px 22px, cover;
}

/* Hero แบบภาพถ่ายเต็มจอ (สไตล์ portfolio) */
.hero-photo {
    position: relative;
    min-height: 88vh;
    background-size: cover;
    background-position: center 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 100px 0 120px;
}
.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(15, 30, 22, 0.45), rgba(15, 30, 22, 0.55));
}
.hero-heading {
    font-family: 'Itim', 'Kanit', sans-serif;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 400;
    text-shadow: 0 3px 14px rgba(0,0,0,0.45);
    line-height: 1.25;
}
.hero-sub {
    max-width: 640px;
    font-weight: 300;
    opacity: .95;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero-cta {
    letter-spacing: .12em;
    border-radius: 4px;
}
.hero-contact a {
    color: #fff;
    font-weight: 500;
    opacity: .92;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero-contact a:hover { opacity: 1; color: var(--pc-accent); }
.hero-scroll {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.8rem;
    opacity: .85;
    animation: hero-bounce 2s infinite;
}
.hero-scroll:hover { color: #fff; opacity: 1; }
@keyframes hero-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, 10px); }
    60% { transform: translate(-50%, 5px); }
}

.trust-badges i {
    font-size: 1.8rem;
    color: var(--pc-accent);
    display: block;
    margin-bottom: .25rem;
}
.trust-badges { opacity: 0.92; }

/* About / why-us section */
.about-img-wrap { position: relative; }
.about-badge-float {
    position: absolute;
    left: 1.25rem;
    bottom: -1.25rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.about-badge-float .icon-circle {
    background: var(--pc-green-light);
    color: var(--pc-green);
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.check-bullet {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--pc-green);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    margin-top: .15rem;
}

/* Pricing */
.pricing-card {
    background: #fff;
    border: 1px solid #eef2ef;
    border-radius: 20px;
    padding: 2rem;
}
.pricing-card-featured {
    background: linear-gradient(160deg, var(--pc-green), var(--pc-green-dark));
    color: #fff;
    border: none;
    position: relative;
    box-shadow: 0 20px 40px rgba(26,122,76,0.25);
}
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pc-accent);
    color: #1f2a24;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 999px;
}

/* Quick contact band */
.quick-contact-card { background: var(--pc-green-dark); }
.quick-contact-card .icon-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pc-green-light);
    color: var(--pc-green);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quick-contact-card .contact-info-item { display: flex; gap: .9rem; align-items: flex-start; }

/* Section titles */
.section-title {
    font-weight: 700;
    color: var(--pc-green-dark);
}
.section-sub {
    color: var(--pc-gray);
}
.section-eyebrow {
    color: var(--pc-accent);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Service cards */
.service-card {
    border: 1px solid #eef2ef;
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
    background: #fff;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(26,122,76,0.14);
}
.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--pc-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.service-card img.cover {
    height: 190px;
    object-fit: cover;
    width: 100%;
    border-radius: 16px 16px 0 0;
}
.cover-fallback {
    background: linear-gradient(135deg, var(--pc-green), var(--pc-green-dark));
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover-fallback span {
    font-size: 3rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.service-icon-sm {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-top: -46px;
    border: 3px solid #fff;
    position: relative;
    z-index: 2;
}

/* การ์ดบริการแบบกะทัดรัด (เรียงบรรทัดเดียวบนจอใหญ่) */
.service-card-sm img.cover,
.service-card-sm .cover { height: 120px; }
.service-card-sm .cover-fallback span { font-size: 2.2rem; }
.service-card-sm .service-icon-sm {
    width: 38px; height: 38px;
    margin-top: -40px;
    font-size: 1.1rem;
}
.service-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Why us / feature boxes */
.feature-box .icon-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--pc-green-light);
    color: var(--pc-green);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
}

/* Testimonials */
.testimonial-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef2ef;
    padding: 1.75rem;
    height: 100%;
}
.stars { color: var(--pc-accent); letter-spacing: 2px; }

/* CTA band */
.cta-band {
    background: var(--pc-green);
    color: #fff;
    border-radius: 20px;
}

/* Certificates / documents */
.certificate-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eef2ef;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.certificate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(26,122,76,0.14);
}
.certificate-card img {
    height: 190px;
    object-fit: cover;
    width: 100%;
    background: #f4f6f5;
}

/* Articles */
.article-card img { height: 170px; object-fit: cover; width: 100%; border-radius: 14px 14px 0 0; }
.article-card { border-radius: 14px; overflow: hidden; border: 1px solid #eef2ef; height: 100%; }

/* เนื้อหาบทความ/หลักการทำงาน — จัดหัวข้อและย่อหน้าให้อ่านง่าย */
.article-content { line-height: 1.75; color: #384740; }
.article-content h4 {
    color: var(--pc-green-dark);
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: .75rem;
    padding-left: .75rem;
    border-left: 4px solid var(--pc-accent);
}
.article-content h4:first-child { margin-top: 0; }
.article-content p { margin-bottom: 1rem; }
.article-content ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.article-content li { margin-bottom: .5rem; }
.article-content b { color: var(--pc-dark); }

/* Footer */
footer.site-footer {
    background: var(--pc-dark);
    color: #cfd8d3;
}
footer.site-footer a { color: #cfd8d3; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer h5 { color: #fff; font-weight: 600; }

/* Contact page */
.contact-info-item { display:flex; gap:.9rem; align-items:flex-start; }
.contact-info-item .icon-circle { flex-shrink:0; }

/* Gallery */
.gallery-thumb {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.gallery-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.gallery-thumb:hover img { transform: scale(1.06); }

/* Breadcrumb / page header */
.page-header {
    background: var(--pc-green-light);
    padding: 50px 0;
}

/* Admin */
.admin-sidebar {
    background: var(--pc-dark);
    min-height: 100vh;
    color: #cfd8d3;
}
.admin-sidebar a { color: #cfd8d3; display:block; padding: .6rem 1rem; border-radius:8px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.08); color:#fff; }
/* เมนูกลุ่มแบบกดสไลด์ลง (accordion) */
.admin-sidebar .sidebar-group-toggle { text-decoration: none; }
.admin-sidebar .sidebar-chevron { transition: transform .2s ease; }
.admin-sidebar .sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.admin-sidebar .collapse .ps-4, .admin-sidebar .collapsing .ps-4 { font-size: .92rem; }
.admin-sidebar .collapse a.active { background: rgba(255,255,255,0.14); }
.admin-topbar { background:#fff; border-bottom:1px solid #eee; }
.stat-card { border-radius: 14px; border:1px solid #eef2ef; }

/* ตารางแบบอ่านง่าย: เว้นระยะห่างมากขึ้น ตัวหนังสือใหญ่ขึ้นเล็กน้อย ไม่อึดอัด */
.table-comfortable th, .table-comfortable td { padding: .85rem 1rem; font-size: .95rem; }
.table-comfortable th { white-space: nowrap; }

/* หลังบ้าน: เมนูข้างพับเก็บได้บนแท็บเล็ต/มือถือ (เปิดทับเนื้อหาแทนการดันบีบ) */
.admin-sidebar-toggle { display: none; }
.admin-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .admin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #fff;
        flex-shrink: 0;
    }
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1040;
    }
    .admin-sidebar-backdrop.show { display: block; }
    .admin-topbar h5 { font-size: 1rem; }
}
@media (max-width: 575.98px) {
    .admin-sidebar { width: 82vw !important; max-width: 300px; }
    .admin-topbar { padding-left: .75rem !important; padding-right: .75rem !important; }
    .p-4 { padding: 1rem !important; }
    .table-responsive table { font-size: .85rem; }
}

/* ==========================================================
   ตารางข้อมูลบนมือถือ — แปลงเป็นการ์ดทีละแถว
   ----------------------------------------------------------
   ตารางรายการในหลังบ้านมี 5-10 คอลัมน์ ถ้าย่อลงจอ 375px
   ความกว้างต่อคอลัมน์จะเหลือ ~40px จนข้อความไทยถูกตัดทีละตัวอักษร
   (เช่น ชื่อบริษัทยาวๆ จะกลายเป็นเสาผอมสูงอ่านไม่รู้เรื่อง)
   จึงพลิกให้แต่ละแถวกลายเป็นการ์ด แล้วเอาหัวตารางมาเป็นป้ายกำกับหน้าค่าแทน

   คลาส .table-stack กับ data-label ถูกใส่ให้อัตโนมัติโดย assets/js/responsive-table.js
   หน้าไหนไม่อยากให้แปลง ใส่ data-no-stack ที่ <table>
   ========================================================== */
@media (max-width: 767.98px) {
    /* กรอบเลื่อนแนวนอนไม่จำเป็นแล้วเมื่อแถวถูกพลิกเป็นการ์ด */
    .table-responsive:has(> table.table-stack) { overflow-x: visible; }

    table.table-stack { border: 0; background: transparent; }
    table.table-stack thead { display: none; }
    table.table-stack tbody,
    table.table-stack tr,
    table.table-stack td { display: block; width: 100%; }

    table.table-stack tr {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .75rem;
        background: #fff;
        padding: .5rem .75rem;
        margin-bottom: .5rem;
    }
    table.table-stack tr:last-child { margin-bottom: 0; }

    /*
     * จงใจไม่ใช้ display:flex/grid ที่ตัว td
     * เพราะหลายช่องมีลูกหลายตัว (ชื่อลูกค้า + เบอร์โทร + คำอธิบาย) ถ้าทำให้ td เป็น flex
     * ลูกพวกนั้นจะกลายเป็นคอลัมน์เรียงข้างกันแทนที่จะซ้อนลงมาตามปกติ แล้วข้อความจะทับกัน
     * จึงเว้นที่ว่างด้านซ้ายด้วย padding แล้ววางป้ายกำกับแบบ absolute ทับลงไปแทน
     * — ลูกในช่องยังไหลตามปกติทุกอย่าง ไม่ต้องแก้ HTML เดิมสักหน้า
     */
    table.table-stack td {
        position: relative;
        border: 0 !important;
        padding: .3rem 0 .3rem 36% !important;
        min-height: 1.6rem;
        text-align: left !important;
        white-space: normal !important;
    }
    table.table-stack td + td { border-top: 1px dashed #eef1f0 !important; }

    table.table-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: .35rem;
        width: 33%;
        color: #6c757d;
        font-size: .78rem;
        line-height: 1.45;
        word-break: break-word;
    }

    /* คอลัมน์ที่หัวตารางว่าง (ปุ่มจัดการ) ไม่ต้องมีป้าย ให้กินเต็มความกว้างและชิดขวา */
    table.table-stack td[data-label=""] {
        padding-left: 0 !important;
        padding-top: .5rem !important;
        text-align: right !important;
    }
    table.table-stack td[data-label=""]::before { display: none; }

    /* แถวสถานะว่าง ("ไม่พบข้อมูล") ที่ใช้ colspan ปล่อยให้แสดงเต็มแถวตามเดิม */
    table.table-stack td[colspan] { padding-left: 0 !important; text-align: center !important; }
    table.table-stack td[colspan]::before { display: none; }

    /* แถวที่โครงไม่ตรงกับหัวตาราง (เช่นแถวสรุปยอดรวม) ไม่ต้องแปลง */
    table.table-stack tr.tbl-nostack { display: table; table-layout: fixed; }
    table.table-stack tr.tbl-nostack td { display: table-cell; width: auto; }
    table.table-stack tr.tbl-nostack td::before { display: none; }

    /*
     * กลุ่มปุ่มกรองที่มีตั้งแต่ 4 ปุ่มขึ้นไป — ปล่อยให้ตกบรรทัดได้
     * Bootstrap ตั้ง .btn-group เป็น nowrap พอมี 6 ปุ่มในจอ 375px แต่ละปุ่มเหลือกว้าง ~50px
     * ข้อความไทยเลยถูกบีบจนเรียงเป็นเสาผอมสูง (เช่น "ลูกค้าเลื่อน" กลายเป็น 4 บรรทัด)
     * กลุ่มที่มี 2-3 ปุ่มไม่แตะ เพราะยังพอดีจออยู่แล้วและอยากคงขอบปุ่มที่เชื่อมกันไว้
     */
    .btn-group:has(> .btn:nth-child(4)) { flex-wrap: wrap; gap: .25rem; }
    .btn-group:has(> .btn:nth-child(4)) > .btn {
        border-radius: .375rem !important;
        margin-left: 0 !important;
        flex: 0 1 auto;
    }
}

.badge-status-new { background:#f5a623; }
.badge-status-contacted { background:#3b82f6; }
.badge-status-done { background:#1a7a4c; }

@media (max-width: 767px) {
    .hero { padding: 50px 0 70px; text-align:center; }
}

/* ฟีด Facebook หน้าแรก — ให้ยืดเต็มความกว้างบนมือถือ */
.fb-feed-wrap { max-width: 100%; }
.fb-feed-wrap .fb-page,
.fb-feed-wrap .fb-page span,
.fb-feed-wrap .fb-page iframe { max-width: 100% !important; }

/* ==========================================================
   ไทม์ไลน์ผลงานประจำวัน (หน้าแรก ข้างฟีด Facebook)
   ========================================================== */
.work-timeline {
    position: relative;
    padding-left: 22px;
}
/* เส้นแนวตั้งของไทม์ไลน์ */
.work-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(26, 122, 76, .25);
}
.work-timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .2s, box-shadow .2s;
}
.work-timeline-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    color: inherit;
}
.work-timeline-item:last-child { margin-bottom: 0; }
/* จุดวงกลมบนเส้นไทม์ไลน์ */
.work-timeline-dot {
    position: absolute;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pc-green);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(26, 122, 76, .2);
}
.work-timeline-item img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
}
.work-timeline-body {
    min-width: 0;   /* ให้ text-overflow ทำงานในกล่อง flex */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.work-timeline-date {
    font-size: .75rem;
    color: var(--pc-green);
    font-weight: 600;
}
.work-timeline-title {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.work-timeline-meta {
    font-size: .8rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   ปุ่มสลับภาษา + ซ่อนแถบ Google Translate
   ========================================================== */
.lang-switch button {
    background: none;
    border: none;
    color: #fff;
    opacity: .75;
    font-size: .85rem;
    padding: 0 2px;
    font-family: inherit;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button.active {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* ซ่อนแถบเครื่องมือของ Google Translate ไม่ให้ดันหน้าเว็บ */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* ==========================================================
   แชทบอทลอยมุมขวาล่าง
   ========================================================== */
#tp-chat { position: fixed; right: 20px; bottom: 20px; z-index: 1050; }
#tp-chat-btn {
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--pc-green);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(26,122,76,0.4);
    transition: transform .15s ease;
}
#tp-chat-btn:hover { transform: scale(1.08); background: var(--pc-green-dark); }
#tp-chat-panel {
    position: absolute;
    right: 0; bottom: 72px;
    width: min(350px, calc(100vw - 40px));
    height: 480px;
    max-height: calc(100vh - 130px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#tp-chat-panel.d-none { display: none !important; }
.tp-chat-header {
    background: var(--pc-green-dark);
    color: #fff;
    padding: .7rem .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.tp-chat-header #tp-chat-close {
    background: none; border: none; color: #fff; opacity: .8; font-size: 1rem;
}
.tp-chat-header #tp-chat-close:hover { opacity: 1; }
.tp-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; margin-right: 2px;
}
.tp-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: .9rem;
    background: #f4f7f5;
}
.tp-msg {
    max-width: 85%;
    padding: .55rem .8rem;
    border-radius: 14px;
    margin-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.45;
    word-wrap: break-word;
}
.tp-msg-bot { background: #fff; border: 1px solid #e5ece8; border-bottom-left-radius: 4px; }
.tp-msg-user {
    background: var(--pc-green);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.tp-msg-admin {
    background: #fff7e6;
    border: 1px solid #f5d98a;
    border-bottom-left-radius: 4px;
}
.tp-admin-label {
    font-size: .72rem;
    font-weight: 600;
    color: #b8860b;
    margin-bottom: .2rem;
}
.tp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.tp-chip {
    background: #fff;
    border: 1.5px solid var(--pc-green);
    color: var(--pc-green);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .82rem;
    font-family: inherit;
}
.tp-chip:hover { background: var(--pc-green); color: #fff; }
.tp-cta {
    display: inline-block;
    background: var(--pc-green);
    color: #fff !important;
    border-radius: 8px;
    padding: .35rem .7rem;
    font-size: .8rem;
    text-decoration: none;
}
.tp-cta-line { background: #06c755; }
.tp-cta:hover { opacity: .9; }
/* คิวอาร์โค้ด LINE ในแชท — ให้ลูกค้าที่เปิดจากคอมพิวเตอร์สแกนจากจอได้เลย */
.tp-qr-box {
    background: #fff;
    border: 1px solid #e5ece8;
    border-radius: 10px;
    padding: .5rem;
    text-align: center;
    max-width: 160px;
}
.tp-qr-box img { width: 100%; height: auto; display: block; }
.tp-qr-cap { font-size: .7rem; color: #6b7b72; margin-top: .25rem; }
.tp-link { color: var(--pc-green); font-weight: 500; }
.tp-chat-input {
    display: flex;
    border-top: 1px solid #e5ece8;
    background: #fff;
}
.tp-chat-input input {
    flex: 1;
    border: none;
    padding: .7rem .9rem;
    font-family: inherit;
    font-size: .875rem;
    outline: none;
}
#tp-chat-send {
    border: none;
    background: none;
    color: var(--pc-green);
    font-size: 1.1rem;
    padding: 0 1rem;
}

/* ==========================================================
   หน้าเกี่ยวกับเรา — ไทม์ไลน์ / ผลงานก่อน-หลัง / บล็อกการรับประกัน
   ========================================================== */

/* ไทม์ไลน์ประวัติบริษัท */
.timeline {
    position: relative;
    padding-left: 2rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--pc-green);
    opacity: .35;
}
.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pc-green);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--pc-green);
}
.timeline-year {
    color: var(--pc-accent);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .03em;
}

/* ผลงานก่อน-หลัง */
.ba-card { transition: transform .2s ease, box-shadow .2s ease; }
.ba-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,122,76,0.14); }
.ba-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    color: #fff;
}
.ba-badge-before { background: rgba(31, 42, 36, 0.75); }
.ba-badge-after { background: var(--pc-green); }

/* บล็อกการรับประกัน */
.guarantee-block {
    background: linear-gradient(135deg, var(--pc-green), var(--pc-green-dark));
    box-shadow: 0 20px 40px rgba(26,122,76,0.2);
}
.guarantee-block i.bi-check-circle-fill { color: var(--pc-accent); }

/* เขตพื้นที่ให้บริการ (หน้าติดต่อเรา) — ป้ายคำค้นสำหรับ SEO ท้องถิ่น */
.area-pill {
    display: inline-block;
    background: var(--pc-green-light);
    color: var(--pc-dark);
    font-size: .78rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
}
.service-area-block { transition: box-shadow .2s ease; }
.service-area-block:hover { box-shadow: 0 10px 24px rgba(26,122,76,0.1); }

/* ซ่อน input[type=date] ตัวจริงไว้ (ใช้เก็บค่า/เปิดปฏิทินเท่านั้น) แล้วโชว์ค่าวันที่แบบไทย (พ.ศ.) แทนด้วย input คู่กันข้างหน้า */
.thai-date-native-hidden { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; }