/* --- Global & Container --- */
.golf-page-wrapper {
    padding: 10px 0;
    background: linear-gradient(180deg, #f4f9f5 0%, #fcfdfc 100%);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.golf-container { 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box; }

/* --- Headline & Services Grid --- */
.services-section { 
    margin-bottom: 20px; 
    text-align: center; }
.services-section h2 { 
    font-size: clamp(28px, 4vw, 40px);  
    font-weight: bold; 
    background: linear-gradient(to bottom, #11aa44, #ffff00); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    filter: 
    drop-shadow(1px 0px 0px #ff0000) 
    drop-shadow(-1px 0px 0px #ff0000) 
    drop-shadow(0px 1px 0px #ff0000) 
    drop-shadow(0px -1px 0px #ff0000) 
    drop-shadow(2px 2px 0px #000000); }
.section-headline { 
    font-size: 2.2rem; 
    color: #0f2d16; 
    margin-bottom: 10px; 
    font-weight: 800; }
.section-subline { 
    color: #4a5568; 
    max-width: 750px; 
    margin: 0 auto 45px; 
    font-size: 1rem; 
    line-height: 1.6; }

.services-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; }
.service-card { 
    background: #fff; 
    padding: 10px 10px; 
    border-radius: 16px; 
    border: 1px solid #e2ebd5;
    box-shadow: 0 10px 25px rgba(24,58,30,0.04); 
    transition: 0.3s; 
    text-align: left;
}
.service-card:hover { 
    transform: translateY(-8px); 
    border-color: #b68a36; }
.service-icon { 
    font-size: 2rem; 
    margin-bottom: 15px; 
    display: inline-block; }
.service-card h4 { 
    font-size: 1.1rem; 
    color: #0f2d16; 
    margin-bottom: 10px; 
    font-weight: 700; }
.service-card p { 
    color: #5a6578; 
    font-size: 12px; 
    line-height: 1.5; }

/* --- Booking Process (Steps 01-04) --- */
.booking-process-wrapper { 
    margin: 20px 0; background: #fff; border-radius: 16px; padding: 30px; 
    border: 1px solid #e2ebd5; box-shadow: 0 10px 25px rgba(0,0,0,0.02); 
}
.process-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: left; }
.process-step { background: #f8faf8; border-radius: 12px; padding: 10px; border-left: 4px solid #b68a36; text-align: left; }
.step-num { font-size: 0.8rem; font-weight: 800; color: #b68a36; margin-bottom: 5px; text-align: left; }
.process-step h5 { font-size: 1rem; color: #0f2d16; margin-bottom: 8px; font-weight: 700; }
.process-step p, .process-step li { color: #5a6578; font-size: 0.85rem; line-height: 1.6; margin: 0; }
.process-step ul { 
    list-style: none; 
    padding: 0; 
    margin-top: 10px; 
}

.process-step li { 
    color: #5a6578; 
    font-size: 0.85rem; 
    line-height: 1.6; 
    margin-bottom: 6px; 
    
    /* การจัดวางข้อความ */
    text-align: left;      /* บังคับชิดซ้าย */
    padding-left: 10px;    /* เว้นระยะห่างจากขอบซ้ายเพื่อให้มีที่สำหรับจุด Bullet */
    position: relative;    /* สำหรับกำหนดตำแหน่งจุด Bullet แบบคงที่ */
}

.process-step li::before { 
    content: "•"; 
    color: #23923d; 
    font-weight: bold;
    
    /* จัดตำแหน่งจุด Bullet ให้คงที่ ไม่ขยับตามจำนวนบรรทัดข้อความ */
    position: absolute;
    left: 4px;             /* ระยะจุด Bullet จากขอบกล่องด้านซ้าย */
    top: 0;                /* อยู่ระดับเดียวกับบรรทัดแรกของข้อความ */
}
/* Step 04 (LINE) ปรับให้ดูเด่นและสะอาด */
.line-highlight { 
    background: #eef9f0; 
    border-left-color: #06c755; 
    grid-column: span 3; 
    text-align: left; 
    margin-top: 10px;
    padding: 25px;
}.line-btn { 
    display: inline-block; background: #06c755; color: #fff !important; padding: 8px 20px; 
    border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 10px; 
}
    .table-guide-box {
        font-size: 26px; /* ขนาดปกติบนคอมพิวเตอร์ */
        font-weight: bold; 
        color: #0056b3; 
        background-color: #e6f0fa; 
        display: inline-block; 
        padding: 10px 20px; 
        border-radius: 5px; 
        border-left: 4px solid #0056b3; 
        margin: 0;
        text-align: left;
    }
/* --- Masonry Tables --- */
.table-masonry-container { column-count: 2; column-gap: 30px; margin-top: 40px; }
.table-item { 
    background: #fff; border-radius: 16px; padding: 25px; border: 1px solid #f0f4f0; 
    display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 30px; box-sizing: border-box; 
}
.table-title { font-size: 1.25rem; font-weight: 800; color: #0f2d16; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.table-title::before { content: ""; width: 5px; height: 20px; background: linear-gradient(#b68a36, #e7c37a); border-radius: 3px; }

.table-item table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-item th { background: #f4f8f4; padding: 12px; font-size: 0.9rem; border-bottom: 2px solid #cedecd; }
.table-item td { border-bottom: 1px solid #f3f7f3; padding: 12px; font-size: 0.9rem; vertical-align: middle; }
.price-col-wd { color: #23923d; font-weight: 700; text-align: center; }
.price-col-we { color: #a37627; font-weight: 700; text-align: center; }
.btn-contact-company { 
    background: #1a202c; color: #fff !important; padding: 6px 15px; 
    border-radius: 20px; text-decoration: none; font-size: 0.8rem; display: inline-block;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
    .process-timeline { display: flex; flex-direction: column; gap: 15px; }
    .line-highlight { 
        grid-column: auto !important; 
        text-align: left; 
    }
    .table-guide-box {
            font-size: 16px; /* ลดขนาดฟอนต์ลงเหลือ 16px บนมือถือเพื่อไม่ให้ล้นจอ */
            padding: 8px 15px; /* ปรับช่องไฟรอบๆ ให้กระชับขึ้น */
            border-left-width: 3px; /* ลดความหนาของเส้นขอบซ้าย */
        }
    .table-masonry-container { 
        column-count: 1 !important; 
    }
    
    .table-item {
        padding: 15px;
        margin-bottom: 20px;
        border: 1.5px solid #d1dfd1; /* เพิ่มความชัดของเส้นขอบกล่องนอก */
    }

    .table-item table thead { 
        display: none; 
    }

    /* ปรับแต่งแถว (Row) ให้ชื่อและราคาเรียงกัน */
    .table-item tr {
        display: flex !important;
        align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
        border: 1px solid #b6c7b6 !important; /* เส้นขอบระหว่างแถวให้ชัดขึ้น */
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
        background-color: #fff;
    }

    /* ชื่อสนามกอล์ฟ (ฝั่งซ้าย) */
    .table-item td:first-child {
        flex: 2; /* ให้พื้นที่ชื่อสนามมากกว่าราคา */
        width: auto !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 10px;
        font-size: 0.9rem;
        line-height: 1.3;
    }

    /* กลุ่มราคา (ฝั่งขวา) */
    .table-item td.price-col-wd, 
    .table-item td.price-col-we {
        flex: 1; /* แบ่งพื้นที่ราคาคนละส่วน */
        width: auto !important;
        text-align: center;
        border-left: 1px solid #eee; /* เส้นแบ่งกั้นระหว่างชื่อกับราคา */
        padding: 2px 5px !important;
    }

    /* หัวข้อราคาตัวเล็กด้านบนตัวเลข */
    .table-item td.price-col-wd::before { content: "平日"; font-size: 0.65rem; color: #666; font-weight: normal; }
    .table-item td.price-col-we::before { content: "土/日"; font-size: 0.65rem; color: #666; font-weight: normal; }

    /* กรณีปุ่ม Member ให้ขยายเต็มแถว */
    .member-full-width {
        flex: 3 !important; /* ให้ปุ่มขยายเต็มพื้นที่ที่เหลือ */
        border-left: 1px solid #eee;
        padding: 5px 0 !important;
    }
    .member-full-width .btn-contact-company {
        width: 100%;
        padding: 8px 5px;
        font-size: 0.75rem;
    }