/* =========================
   BASE STYLES & RESET
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif;
}

:root {
    --gold: #d4af37;
    --dark: #111111;
    --light-dark: #1c1c1c;
    --gray: #aaaaaa;
}

body {
    background: #0f0f0f;
    color: white;
    overflow-x: hidden;
    animation: pageFade 1s ease;
}

html {
    scroll-behavior: smooth;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes pageFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatBtn {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes goldFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes popup {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes blinkDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(1.4); }
}

/* =========================
   HEADER & NAVBAR
========================= */
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212,175,55,.2);
}

.navbar {
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.logo span {
    color: #d4af37;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding: 8px 0;
    transition: all .35s ease;
}

.menu a:hover {
    color: #d4af37;
    transform: translateY(-3px) scale(1.15);
    text-shadow: 0 0 10px rgba(212,175,55,.7), 0 0 20px rgba(212,175,55,.4);
}

.menu a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    transform: translateX(-50%);
    transition: all .35s ease;
}

.menu a:hover::after, .menu a.active::after {
    width: 100%;
}

.menu a.active {
    color: #d4af37;
    font-weight: 700;
}

/* =========================
   BUTTONS (Shared & Specific)
========================= */
.line-btn, .close-btn, .primary-btn, .secondary-btn, .btn-contact {
    position: relative;
    overflow: hidden;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-block;
    text-decoration: none;
}

.line-btn, .close-btn, .primary-btn, .btn-contact {
    background: linear-gradient(135deg, #d4af37, #f7dc6f);
    color: #111;
    box-shadow: 0 5px 15px rgba(212,175,55,.35);
    animation: floatBtn 2s ease-in-out infinite;
}

.line-btn:hover, .close-btn:hover, .primary-btn:hover, .btn-contact:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 15px rgba(212,175,55,.7), 0 0 30px rgba(212,175,55,.5), 0 0 45px rgba(212,175,55,.3);
}

.line-btn:active, .close-btn:active, .primary-btn:active, .btn-contact:active {
    transform: scale(0.95);
}

/* แสงวิ่งแอนิเมชันสำหรับปุ่ม */
.line-btn::before, .close-btn::before, .btn-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transition: .6s;
}

.line-btn:hover::before, .close-btn:hover::before, .btn-contact:hover::before {
    left: 100%;
}

.secondary-btn {
    border: 1px solid var(--gold);
    color: white;
}

.secondary-btn:hover {
    background: var(--gold);
    color: black;
}

/* =========================
   HERO SECTION
========================= */
/* ===================================================
   ✨ HERO SECTION CLEAN & PERFECT CENTER
   =================================================== */

/* แสงเรืองรองมุมขวาบน */
.hero::before {
    content: '';
    position: absolute; /* เพิ่มข้อกำหนดตำแหน่งให้ถูกต้อง */
    width: 500px;
    height: 500px;
    background: rgba(212,175,55,0.1);
    border-radius: 50%;
    filter: blur(120px);
    top: -150px;
    right: -150px;
    pointer-events: none;
}

/* กล่องควบคุมเนื้อหาหลัก (บังคับตรงกลางเป๊ะ) */
.hero-content {
    max-width: 850px;         
    width: 100%;
    display: flex !important;            
    flex-direction: column !important;   
    align-items: center !important;      
    justify-content: center !important;  
    position: relative;
    z-index: 1;
    margin: 0 auto !important;           
    gap: 25px;
}

/* บล็อกข้อความ (ใช้แอนิเมชันลอยขึ้นตรง ๆ ไม่เบี้ยวเฉียงขวา/ซ้าย) */
.hero-text {
    width: 100%;
    text-align: center !important;       
    animation: fadeUp 1.2s ease-out; 
}

/* หัวข้อพาดหัวใหญ่ */
.hero-text h1 {
    font-size: 3rem;          
    line-height: 1.3;
    text-align: center !important;
    margin-bottom: 20px;
}

.hero-text h1 span {
    color: var(--gold);
}

/* คำอธิบายย่อย */
.hero-text p {
    color: #d6d6d6;
    font-size: 1.1rem;
    line-height: 1.9;
    text-align: center !important;
    margin-bottom: 15px;
}

/* โซนปุ่มกดจัดกึ่งกลาง */
.hero-buttons {
    display: flex !important;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center !important;  
    align-items: center;
    width: 100%;
}

/* กรณีที่มีกล่องการ์ดด้านล่าง ให้ลอยขึ้นมาตรงกลางสวย ๆ */
.hero-card {
    width: 100%;
    max-width: 550px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 28px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    text-align: center;
    margin-top: 20px;
    animation: fadeUp 1.4s ease-out; /* เปลี่ยนจาก slideRight เพื่อป้องกันการดึงหน้าจอให้เฉียง */
}
/* =========================
   SERVICES
========================= */
section {
    padding: 100px 40px;
}

.container {
    max-width: 1300px;
    margin: auto;
}

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title h2 {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.section-title h2 span {
    color: var(--gold);
}

.section-title p {
    color: var(--gray);
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
}

.services-service {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--light-dark);
    border-radius: 24px;
    padding: 35px;
    transition: 0.35s;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    animation: fadeUp 1s ease;
}

.service-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(212,175,55,0.08), transparent);
    transition: 0.7s;
}

.service-card:hover::before {
    top: 100%;
    left: 100%;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212,175,55,0.4);
    box-shadow: 0 20px 35px rgba(0,0,0,0.3);
}

.service-icon {
    width: 75px;
    height: 75px;
    border-radius: 18px;
    background: rgba(212,175,55,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--gold);
}

.service-card p {
    color: #cfcfcf;
    line-height: 1.8;
}

/* =========================
   ABOUT SECTION
========================= */
.about {
    background: linear-gradient(180deg, #111, #191919);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: center;
}

.about-image img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 30px;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.about-image, .about-text {
    animation: fadeUp 1s ease;
}

.about-text h2 {
    font-size: 2.8rem;
    margin-bottom: 25px;
}

.about-text h2 span {
    color: var(--gold);
}

.about-text p {
    color: #d3d3d3;
    line-height: 1.9;
    margin-bottom: 20px;
}


/* =========================
   FOOTER
========================= */
footer {
    padding: 35px 20px;
    text-align: center;
    color: #8f8f8f;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #0b0b0b;
}

/* =========================
   RESPONSIVE MEDIA QUERIES
========================= */
@media(max-width:768px) {
    .navbar { padding: 18px 20px; }
    .logo img { width: 50px; height: 50px; }
    .logo span { font-size: 1.1rem; }
    .menu { display: none; }
    .hero-text h1 { font-size: 2.4rem; }
    .section-title h2, .about-text h2 { font-size: 2rem; }
    section { padding: 80px 20px; }
    .kp-chat-box { width: 310px; }
}

/* ==========================================
   GLOBAL STYLES & VARIABLES
   ========================================== */
:root {
    --gold: #d4af37;
    --dark: #111111;
    --card: #1a1a1a;
    --bg: #0f0f0f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif;
}

body {
    background: var(--bg);
    color: white;
    animation: pageFade 1s ease;
}

/* ==========================================
   NAVBAR & FOOTER
   ========================================== */
.navbar {
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.logo span {
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding: 8px 0;
    transition: all .35s ease;
}

.menu a:hover {
    color: var(--gold);
    transform: translateY(-3px) scale(1.15);
    text-shadow: 0 0 10px rgba(212,175,55,.7), 0 0 20px rgba(212,175,55,.4);
}

.menu a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: translateX(-50%);
    transition: all .35s ease;
}

.menu a:hover::after, .menu a.active::after {
    width: 100%;
}

.menu a.active {
    color: var(--gold);
    font-weight: 700;
}

footer {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: #0b0b0b;
}

/* ==========================================
   COMMON COMPONENTS (BUTTONS & ANIMATIONS)
   ========================================== */
.btn-contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #d4af37, #f7dc6f);
    color: #111;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(212,175,55,.35);
    transition: all .3s ease;
    animation: goldFloat 2s ease-in-out infinite;
}

@keyframes goldFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.btn-contact:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 15px rgba(212,175,55,.7), 0 0 30px rgba(212,175,55,.5);
}

.btn-contact:active { transform: scale(.95); }

.btn-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform: skewX(-25deg);
    transition: .7s;
}

.btn-contact:hover::before { left: 150%; }

@keyframes pageFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   CHAT WIDGET & QR CODE MODAL
   ========================================== */
/* ===================================================
   🎯 PERFECT FIX: KP CHAT WIDGET & QR CODE MODAL
   =================================================== */

/* 1. กล่องครอบปุ่มแชททั้งหมด (ให้อยู่ชั้นบนสุดเสมอ) */
.kp-chat { 
    position: fixed !important; 
    right: 25px !important; 
    bottom: 25px !important; 
    z-index: 999999 !important; /* อยู่เหนือเนื้อหาทุกสิ่งทุกอย่าง */
}

/* 2. ปุ่มวงกลมสำหรับกดเปิดแชท */
.kp-chat-btn {
    width: 60px; 
    height: 60px; 
    border: none; 
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #f7dc6f);
    color: #111; 
    font-size: 22px; 
    cursor: pointer; 
    position: relative;
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(212,175,55,.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kp-chat-btn:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 10px 30px rgba(212,175,55,.6);
}

.kp-chat-btn:active { 
    transform: scale(0.95); 
}

/* จุดสีแดงแจ้งเตือนบนปุ่มแชท */
.chat-dot {
    position: absolute; 
    top: 2px; 
    right: 2px; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%;
    background: #ff2d55; 
    animation: blinkDot 1.2s infinite;
}

@keyframes blinkDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(1.3); }
}

/* 3. กล่องหน้าต่างแชท (Chat Box) */
.kp-chat-box {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 320px;
    height: 450px; /* ล็อกความสูงกล่องใหญ่ไว้ตามเดิม */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    display: none; /* เริ่มต้นซ่อนไว้ */
    flex-direction: column; /* เรียงจากบนลงล่าง Header -> Body -> Footer */
    z-index: 9999;
    overflow: hidden; /* 🌟 สำคัญที่สุด: บังคับห้ามเนื้อหาใดๆ ทะลุกล่องใหญ่ออกมาเด็ดขาด */
}
/* ถ้าหน้าเว็บคุณใช้คลาส active ในการเปิดแชท ให้ใส่ display: flex */
.kp-chat-box.active {
    display: flex;
}
@keyframes showChat {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ส่วนหัวกล่องแชท */
.kp-chat-header {
    background: linear-gradient(135deg, #111, #2a2a2a); 
    color: white;
    padding: 18px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.kp-chat-header strong { color: #d4af37; display: block; font-size: 15px; }
.kp-chat-header small { color: #ddd; font-size: 12px; }
.kp-chat-header button { border: none; background: none; color: white; font-size: 18px; cursor: pointer; transition: 0.2s; }
.kp-chat-header button:hover { color: #ff2d55; }

/* ส่วนเนื้อหาข้อความแชท */
.kp-chat-body {
    padding: 15px;
    flex: 1; /* บังคับให้พื้นที่แชทยืดหดสัดส่วนตามพื้นที่กล่องใหญ่ที่เหลือ */
    overflow-y: auto; /* เปิดให้เลื่อน scroll ขึ้นลงได้เวลาข้อความล้น */
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.kp-msg { padding: 12px 15px; border-radius: 15px; margin-bottom: 12px; line-height: 1.6; max-width: 85%; font-size: 14px; }
.kp-msg.bot { background: white; color: #333; box-shadow: 0 5px 15px rgba(0,0,0,.05); border-bottom-left-radius: 2px; }
.kp-msg.user { background: #d4af37; color: #111; margin-left: auto; border-bottom-right-radius: 2px; }

/* ส่วนท้ายปุ่มกดแอดไลน์ */
.kp-chat-footer { padding: 15px; background: #fff; }
.kp-line-btn {
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px;
    background: #06c755; 
    color: white; 
    padding: 12px; 
    border: none; 
    border-radius: 12px;
    font-weight: 700; 
    font-size: 16px; 
    cursor: pointer; 
    transition: .3s;
}
.kp-line-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(6,199,85,0.4); }

/* 4. หน้าต่าง QR Code Modal ป๊อปอัปตรงกลางหน้าจอ */
.qr-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    display: none; /* เปิด-ปิดผ่าน JS */
    justify-content: center;
    align-items: center;
    z-index: 2000000 !important; /* อยู่ชั้นบนสุดเหนือทุกสิ่งทุกอย่างบนหน้าเว็บ */
}
.qr-box {
    background: #1a1a1a;
    padding: 35px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgba(212,175,55,0.3);
    max-width: 340px;
    width: 90%;
    animation: popup .35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popup { 
    from { opacity: 0; transform: scale(.8); } 
    to { opacity: 1; transform: scale(1); } 
}
.qr-box h3 { color: #d4af37; margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; }
.qr-box img { width: 100%; height: auto; border-radius: 15px; border: 4px solid #fff; box-sizing: border-box; }

.close-btn {
    background: #333; color: #fff; border: none; padding: 12px 30px;
    border-radius: 50px; cursor: pointer; font-weight: 600; margin-top: 20px;
    transition: 0.3s;
}
.close-btn:hover { background: #d4af37; color: #000; transform: translateY(-2px); }

/* ซ่อนเมนูคอมพิวเตอร์ในโหมดมือถือ */
@media(max-width:768px){
    .kp-chat-box { width: 300px; right: -10px; }
}

/* GLOBAL SETTINGS */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Prompt', sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#0f0f0f;
    color:white;
    overflow-x:hidden;
    animation:fadePage 1s ease;
}

@keyframes fadePage {
    from { opacity: 0; }
    to { opacity: 1; }
}

:root{
    --gold:#d4af37;
    --dark:#111;
    --card:#1a1a1a;
}

/* NAVBAR */
.navbar{
    max-width:1300px;
    margin:0 auto;
    padding:15px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
}

.logo img{
    width:60px;
    height:60px;
    object-fit:contain;
}

.logo span{
    color:#d4af37;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:1px;
}

.menu{
    display:flex;
    align-items:center;
    gap:30px;
}

.menu a{
    color:white;
    text-decoration:none;
    font-size:1rem;
    font-weight:500;
    position:relative;
    display:inline-block;
    padding:8px 0;
    transition:all .35s ease;
}

.menu a:hover{
    color:#d4af37;
    transform:translateY(-3px) scale(1.15);
    text-shadow: 0 0 10px rgba(212,175,55,.7), 0 0 20px rgba(212,175,55,.4);
}

.menu a::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0;
    height:3px;
    border-radius:20px;
    background:linear-gradient(90deg, transparent, #d4af37, transparent);
    transform:translateX(-50%);
    transition:all .35s ease;
}

.menu a:hover::after{ width:100%; }
.menu a.active{ color:#d4af37; font-weight:700; }
.menu a.active::after{ width:100%; }

/* FOOTER */
footer{
    text-align:center;
    padding:35px;
    border-top:1px solid rgba(255,255,255,0.08);
    color:#888;
    background:#0b0b0b;
}

/* CHAT WIDGET */
.kp-chat{ position:fixed; right:25px; bottom:25px; z-index:99999; }
.kp-chat-btn{
    width:60px; height:60px; border:none; border-radius:50%;
    background:linear-gradient(135deg,#d4af37,#f7dc6f);
    color:#111; font-size:22px; cursor:pointer; transition:all .3s ease;
}
.kp-chat-btn:hover{
    transform:scale(1.2) rotate(8deg);
    box-shadow: 0 10px 30px rgba(212,175,55,.5), 0 0 20px rgba(212,175,55,.6);
}
.kp-chat-btn:active{ transform:scale(1.05); }

.kp-chat-box{
    width:340px; background:#fff; border-radius:25px; overflow:hidden;
    position:absolute; right:0; bottom:100px; display:none;
    box-shadow: 0 20px 60px rgba(0,0,0,.25); animation:showChat .35s ease;
}

@keyframes showChat{
    from{ opacity:0; transform:translateY(25px); }
    to{ opacity:1; transform:translateY(0); }
}

.kp-chat-header{
    background:linear-gradient(135deg, #111, #2a2a2a); color:white;
    padding:18px 20px; display:flex; justify-content:space-between; align-items:center;
}
.kp-chat-header strong{ color:#d4af37; display:block; }
.kp-chat-header small{ color:#ddd; }
.kp-chat-header button{ border:none; background:none; color:white; font-size:18px; cursor:pointer; }
.kp-chat-body{ padding:20px; background:#f5f7fb; }
.kp-msg{ padding:12px 15px; border-radius:15px; margin-bottom:12px; line-height:1.6; max-width:85%; }
.kp-msg.bot{ background:white; color:#333; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.kp-msg.user{ background:#d4af37; color:#111; margin-left:auto; }
.kp-chat-footer{ padding:18px; }

.kp-line-btn{
    width:100%; display:flex; justify-content:center; align-items:center; gap:10px;
    background:#06c755; color:white; padding:14px; border:none; border-radius:12px;
    font-weight:700; font-size:16px; cursor:pointer; transition:.3s;
}
.kp-line-btn:hover{ transform:translateY(-3px); }

.chat-dot{
    position:absolute; top:5px; right:5px; width:12px; height:12px;
    background:#ff3b30; border-radius:50%; animation:blink 1.2s infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* QR CODE MODAL */
.qr-modal{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
    backdrop-filter:blur(5px); z-index:999999; justify-content:center; align-items:center;
}
.qr-box{ width:320px; background:#1a1a1a; padding:30px; border-radius:25px; text-align:center; animation:popup .35s ease; }
@keyframes popup{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
.qr-box h3{ color:#d4af37; margin-bottom:20px; }
.qr-box img{ width:240px; background:#fff; padding:10px; border-radius:15px; }
.close-btn{
    margin-top:20px; padding:12px 30px; border:none; border-radius:50px;
    background:linear-gradient(135deg,#d4af37,#f7dc6f); color:#111; font-weight:700; cursor:pointer;
}

/* RESPONSIVE NAVBAR */
@media(max-width:768px){
    .menu{ display:none; }
}

/* HERO BANNER */
/* HERO BANNER - แก้ไขใหม่เพื่อให้เห็นภาพเต็มใบ */
.hero {
    width: 100%;                /* แผ่เต็มความกว้างหน้าจอ */
    
    /* 🎯 รักษาอัตราส่วน Widescreen 16:9 */
    aspect-ratio: 16 / 9;       
    
    /* ตั้งความสูงสูงสุดไม่ให้ล้นจอ */
    max-height: 85vh;           

    /* 🎯 ปรับปรุงส่วน Background */
    background: 
        /* linear-gradient(rgba(19, 19, 19, 0.6), rgba(19, 19, 19, 0.6)),  */
        url('img/newhero/hero23.jpg') no-repeat;
    background-size: cover;

    /* 🚀 ไม้ตายแก้อาการรูปภาพลอย/จม: ปรับความสูงต่ำของรูปตึกตรงนี้ได้เลย!
       - ตัวเลขแรก 50% คือให้อยู่กึ่งกลางแนวนอน (ซ้าย-ขวา)
       - ตัวเลขที่สอง 65% คือตำแหน่งแนวตั้ง (สูง-ต่ำ) ยิ่งตัวเลขมาก รูปจะยิ่งเลื่อนขึ้นโชว์ฐานตึก/ป้ายชัดขึ้น! */
    background-position: 50% 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

.hero h1{ font-size:60px; color:#fff; }
.hero span{ color:var(--gold); }

/* NEWS SECTION & GRID */
.news-section{
    max-width:1200px;
    margin:auto;
    padding:80px 20px;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    align-items:stretch;
    gap:30px;
}

.news-card{
    min-height:450px;
    background:#111;
    border-radius:20px;
    overflow:hidden;
    transition:.3s;
    border:1px solid rgba(212,175,55,.2);
    display:flex;
    flex-direction:column;
}

.news-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
}

.news-card img{
    width:100%;
    height:220px;
    object-fit:contain;
}

.news-content{
    padding:25px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.news-date{
    color:#1f1d1d;
    /* color:var(--gold); */
    font-size:14px;
    margin-bottom:10px;
}

.news-content h3{
    color:#1f1d1d;
    margin-bottom:15px;
    font-size:22px;
}

.news-content p{
    color:#1f1d1d;
    line-height:1.7;
    margin-bottom: 15px;
}

/* READ MORE BUTTON WITH EFFECT */
.read-more{
    display:inline-block;
    margin-top:auto;
    padding:10px 20px;
    background:var(--gold);
    color:#000;
    border:none;
    cursor:pointer;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    position:relative;
    overflow:hidden;
    text-align: center;
}

.read-more::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform:skewX(-25deg);
    transition:.7s;
}

.read-more:hover::before{
    left:150%;
}

/* NEWS MODAL POPUP */
.news-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:99999;
    justify-content:center;
    align-items:center;
}

.news-popup{
    width:90%;
    max-width:800px;
    background:#111;
    color:white;
    border-radius:20px;
    overflow:hidden;
    padding:30px;
    position:relative;
    max-height:90vh;
    overflow-y:auto;
}

.news-popup img{
    width:100%;
    border-radius:15px;
    margin-bottom:20px;
}

.news-popup h2{
    color:var(--gold);
    margin-bottom:15px;
}

.news-popup p{
    line-height:1.9;
    color:#ddd;
}

.close-news{
    position:absolute;
    top:15px;
    right:20px;
    font-size:35px;
    cursor:pointer;
    color:white;
}

@keyframes popupBounce{
    0%{ opacity:0; transform:scale(.7); }
    70%{ transform:scale(1.05); }
    100%{ opacity:1; transform:scale(1); }
}

.news-modal.show .news-popup{
    animation:popupBounce .4s ease;
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero h1{ font-size:40px; }
    .news-grid { grid-template-columns: 1fr; }
}







/* ================= PDPA & COOKIE BANNER ================= */
.pdpa-banner {
    position: fixed;
    bottom: -100%; /* ซ่อนไว้ใต้หน้าจอก่อน */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    background: #1a1a1a; /* สีการ์ดเดิมของคุณ */
    border: 1px solid rgba(212, 175, 55, 0.3); /* ขอบทองจางๆ */
    border-radius: 20px;
    padding: 22px 30px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
    z-index: 999999; /* อยู่ชั้นบนสุด เหนือทุกอย่างรวมถึงปุ่มแชท */
    transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* คลาสที่จะสั่งให้เด้งขึ้นมา */
.pdpa-banner.show {
    bottom: 25px; 
}

.pdpa-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pdpa-text p {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.pdpa-text a {
    color: #d4af37; /* สีทองสว่าง */
    text-decoration: underline;
    transition: 0.3s;
}

.pdpa-text a:hover {
    color: #f7dc6f;
}

.pdpa-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0; /* ป้องกันปุ่มบีบตัว */
}

/* ปุ่มของระบบ PDPA */
.pdpa-btn {
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.pdpa-btn.accept {
    background: linear-gradient(135deg, #d4af37, #f7dc6f);
    color: #111;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.pdpa-btn.accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.pdpa-btn.decline {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.pdpa-btn.decline:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ปรับแต่งหน้าจอขนาดเล็ก (Mobile) */
@media (max-width: 768px) {
    .pdpa-banner {
        width: 95%;
        padding: 20px;
    }
    .pdpa-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .pdpa-buttons {
        width: 100%;
        justify-content: center;
    }
    .pdpa-btn {
        flex: 1;
        padding: 12px 15px;
    }
}

/* ================= MAIN FOOTER DESIGN (DARK GOLD) ================= */
.main-footer {
    /* 1. ใส่ที่อยู่ไฟล์รูปภาพของคุณแทนคำว่า '2.png' */
    background-image: url('img/footer/4.png');
    
    /* 2. จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง และให้ขยายครอบคลุมพื้นที่ */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* โค้ดเดิมของคุณ */
    color: #ffffff;
    padding: 60px 0 20px 0;
    font-family: 'Prompt', sans-serif;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.8fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col h4 {
    text-align: left;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
}

.footer-col h5 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
}

/* ส่วนโลโก้ */
/* 🎯 ส่วนโลโก้และข้อความชื่อบริษัท (จัดให้อยู่กึ่งกลางร่วมกัน) */
.footer-logo-area {
    display: flex;
    flex-direction: column;   /* เรียงโลโก้ไว้บน ข้อความไว้ล่าง */
    align-items: center;      /* 👑 หมัดเด็ด: บังคับทุกอย่างในกล่องนี้ให้อยู่กึ่งกลางเป๊ะ ๆ */
    text-align: center;       /* บังคับตัวหนังสือให้จัดบาลานซ์อยู่ตรงกลาง */
    width: 100%;
}

/* 🦢 ส่วนการควบคุมสเกลรูปภาพโลโก้ */
.footer-logo {
    max-width: 90px;
    height: auto;
    margin-bottom: 15px;
    margin-left: auto;        /* 🎯 เคลียร์ระยะเยื้องซ้าย-ขวา เพื่อล็อกให้อยู่กึ่งกลาง */
    margin-right: auto;
    display: block;
}

/* หัวข้อชื่อบริษัท */
.footer-logo-area h3 {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;              /* ให้ข้อความกางเต็มพื้นที่เพื่อคำนวณเซนเตอร์ได้แม่นยำ */
}

/* ส่วนลิงก์เมนู */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 15px;
}

.footer-links a:hover {
    color: #d4af37; /* ชี้แล้วเปลี่ยนเป็นสีทอง */
    padding-left: 6px;
}

/* ส่วนข้อมูลติดต่อ */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    color: #a0a0a0;
    font-size: 14px;
    line-height: 1.8;
}

.footer-contact li {
    margin-bottom: 12px;
    text-align: left;
}

/* ปุ่มโซเชียลมีเดียใต้ข้อมูลติดต่อ */
.footer-socials {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.social-icon:hover {
    background: #d4af37; /* กลายเป็นสีทองตอนชี้ */
    color: #111111;
    transform: translateY(-3px);
}

/* แถบลิขสิทธิ์ล่างสุด */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 20px;
    margin-top: 20px;
}

.footer-bottom-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 16px;
    color: #666666;
}

.footer-bottom-links a {
    color: #666666;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: #d4af37;
}

/* ปรับแต่งหน้าจอขนาดเล็กสำหรับมือถือ */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* ยุบรวมเหลือ 1 คอลัมน์ยาวลงมา */
        gap: 35px;
        text-align: center;
    }
    .footer-logo-area {
        align-items: center;
    }
    .footer-socials {
        justify-content: center;
    }
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}


/* กำหนดสถานะเริ่มต้นของกล่องเนื้อหา */
#app-content {
    opacity: 1;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: translateY(0);
}

/* ตอนกดลิงก์: ให้เนื้อหาค่อยๆ จางหายไปและเลื่อนลงเล็กน้อย */
#app-content.page-out {
    opacity: 0;
    transform: translateY(20px);
}

/* ตอนหน้าใหม่มาถึง: ให้เตรียมพร้อมแบบจางและเยื้องขึ้นบน */
#app-content.page-in {
    opacity: 0;
    transform: translateY(-20px);
}

/* ==========================================================================
   AJAX PAGE TRANSITION STYLES (ควบคุมกล่องเนื้อหาตอนสลับหน้า)
   ========================================================================== */

/* สภาวะปกติของกล่องเนื้อหา: ให้พร้อมสำหรับการสลับหน้า มีความลื่นไหล (Transition) */
#app-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    width: 100%;
}

/* สภาวะจังหวะที่กดลิงก์ (กำลังจะเปลี่ยนหน้า): ให้หน้าเก่าค่อยๆ โปร่งแสงและขยับลงด้านล่างเล็กน้อย */
#app-content.page-out {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none; /* ป้องกันผู้ใช้กดเบิ้ลระหว่างโหลด */
}

/* คอนเทนต์หลักในสถานะปกติ */
#app-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    width: 100%;
}

/* จังหวะที่กำลังโหลดเปลี่ยนหน้า (จะโปร่งแสงและเยื้องลงล่างเพื่อเตรียมนิ่งและจัดโครงสร้าง) */
#app-content.page-out {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
}

/* ===================================================
    FORCE FIXED: จัดข้อความกึ่งกลางหน้าจอแบบสมบูรณ์
   =================================================== */

/* 1. บังคับยืดส่วนหัวให้เต็มจอ และจัดเนื้อหาลงกึ่งกลางแนวตั้งและนอน */
.hero {
    min-height: 100vh !important;       /* บังคับให้ความสูงยืดเต็มหน้าจอ */
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;     /* ดันเนื้อหาลงมากึ่งกลางแนวตั้ง */
    justify-content: center !important;   /* จัดกึ่งกลางแนวนอน */
    padding: 140px 20px 80px !important; /* เว้นระยะเผื่อแถบเมนูบาร์ด้านบน */
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
}

/* 2. จัดกล่องเนื้อหาหลักไม่ให้ยาวไปติดขอบซ้ายขวา */
.hero-content {
    max-width: 850px !important;         /* จำกัดความกว้างให้อ่านง่าย */
    width: 100% !important;
    display: flex !important;            
    flex-direction: column !important;   /* เรียงหัวข้อ คำอธิบาย ปุ่ม จากบนลงล่าง */
    align-items: center !important;      /* สั่งให้ทุกอย่างวิ่งเข้าศูนย์กลาง */
    justify-content: center !important;
    margin: 0 auto !important;           /* ดันกล่องให้อยู่ตรงกลางของหน้าจอ */
    gap: 20px !important;                /* เพิ่มระยะห่างระหว่างบรรทัด */
}

/* 3. จัดการบล็อกข้อความและแอนิเมชันลอยขึ้นสวย ๆ */
.hero-text {
    width: 100% !important;
    text-align: center !important;
    animation: fadeUp 1.2s ease-out !important; /* เปลี่ยนมาใช้ลอยขึ้นตรงๆ เพื่อไม่ให้เบี้ยวซ้ายขวา */
}

/* 4. ขยายข้อความหัวข้อใหญ่ให้เด่นขึ้น ไม่จมติดกัน */
.hero-text h1 {
    font-size: 3.2rem !important;        /* ขนาดกำลังสวยเต็มตา */
    line-height: 1.4 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* 5. จัดคำอธิบาย */
.hero-text p {
    font-size: 1.15rem !important;
    line-height: 1.9 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}

/* 6. จัดปุ่มกดให้อยู่ตรงกลางเสมอ */
.hero-buttons {
    display: flex !important;
    justify-content: center !important;  /* ดันปุ่มเข้ากึ่งกลาง */
    gap: 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 📦 ตัวคลุมไอคอน (ปรับสไตล์ให้เป็นกล่องสี่เหลี่ยมมน ๆ ตามแบบเดิมของคุณ) */
.service-icon-wrapper {
    width: 70px;         /* ปรับขนาดความกว้างของกล่องตามต้องการ */
    height: 70px;        /* ปรับขนาดความสูงของกล่องตามต้องการ */
    background-color: #2b2415; /* สีพื้นหลังกล่องไอคอนเดิม */
    border-radius: 16px; /* ความโค้งมนของกล่อง */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto; /* จัดกล่องให้อยู่ตรงกลางและเว้นระยะห่างจากข้อความด้านล่าง */
}

/* 🪙 ปรับแต่งรูปภาพทองที่เรานำมาใส่แทนไอคอน */
.custom-service-img {
    width: 75%;          /* บีบขนาดรูปภาพให้พอดีและเหลือช่องไฟรอบข้างภายในกล่อง */
    height: 75%;
    object-fit: contain; /* ป้องกันไม่ให้รูปภาพบิดเบี้ยวหรือเสียสัดส่วน */
}

/* ================= FIX MENU ALIGNMENT (LEFT) ================= */

/* 🎯 ดึงคอลัมน์ที่ 3 (กล่องเมนูหลัก) ให้บล็อกดีดมาทางซ้าย */
.footer-container > .footer-col:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* บังคับให้หัวข้อและข้อมูลภายในเริ่มจากซ้าย */
    text-align: left;
}

/* บังคับหัวข้อ h5 (คำว่า เมนูหลัก) ให้ชิดซ้าย 100% */
.footer-col h5 {
    text-align: left !important;
    width: 100%;
}

/* จัดแนวทางให้รายการลิงก์สไลด์ชิดซ้ายขนานเท่ากับฝั่งติดต่อเรา */
.footer-links {
    width: 100%;
    text-align: left;
}

.footer-links li {
    text-align: left;
}

/* ================= FIXED: NEWS MODAL INITIAL HIDDEN ================= */

/* 🎯 1. ล้างสไตล์ลิงก์ของตัวกล่อง บังคับให้ใช้สีเดิมและเอาเส้นใต้ ออก */
.services-grid a.service-card {
    text-decoration: none !important; /* ลบเส้นใต้ลิงก์ออกให้หมด */
    color: inherit !important;        /* บังคับให้ใช้สีของตัวหนังสือตามธีมเดิม */
    display: flex;
    flex-direction: column;
}

/* 🎯 2. ล้างสไตล์ของหัวข้อ (H3) และข้อความ (P) ด้านในไม่ให้กลายเป็นสีน้ำเงิน */
.services-grid a.service-card h3,
.services-grid a.service-card p {
    text-decoration: none !important; /* มั่นใจว่าไม่มีเส้นใต้โผล่มาที่ข้อความ */
    /* ถ้าต้องการล็อกสีหัวข้อให้เป็นสีทองเหมือนเดิม ใส่บรรทัดด้านล่างนี้ได้ครับ */
    /* color: #e5c158 !important; */ 
}

/* 🎯 3. ล้างสไตล์ของไอคอน FontAwesome (i) ไม่ให้เปลี่ยนเป็นสีน้ำเงิน */
.services-grid a.service-card .service-icon i {
    color: inherit !important; /* บังคับให้ไอคอนใช้สีเดิมของสหาย */
    text-decoration: none !important;
}


/* 🎯 คุมขนาดรูปภาพภายในช่อง service-icon ให้แสดงผลได้พอดี */
.service-icon .custom-service-img {
    width: 40px;          /* ปรับความกว้างของรูปภาพตามใจชอบ (แนะนำ 40px - 50px) */
    height: 40px;         /* ปรับความสูงให้เท่ากับความกว้าง */
    object-fit: contain;  /* สั่งให้รูปปรับสัดส่วนอัตโนมัติ ไม่ให้รูปเบี้ยวหรือบดบัง */
    display: block;
    margin: 0 auto;       /* จัดรูปภาพให้อยู่กึ่งกลางช่องพอดี */
}

/* ตั้งค่ากล่องไอคอนเผื่อไว้ให้จัดกึ่งกลางนุ่มๆ */
.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;          /* ขนาดของกล่องสี่เหลี่ยมมนสีทอง */
    height: 60px;
    margin-bottom: 20px;  /* ระยะห่างระหว่างรูปภาพกับหัวข้อ H3 */
}

/* ล้างค่าเริ่มต้นของ ul ในเมนู */
.navbar ul.menu {
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* กำหนดให้ li ของเมนูหลักเป็นฐานในการเล็งตำแหน่ง */
.navbar .menu > li {
    position: relative;
}

/* สไตล์ปุ่มเมนูหลัก */
.navbar .menu > li > a {
    display: block;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}

/* 🔒 ซ่อนกล่องเมนูย่อย (Dropdown Box) ไว้ก่อนในสถานะปกติ */
.navbar .dropdown-menu {
    position: absolute;
    top: 100%; /* ให้กล่องย่อยโผล่ต่อลงมาจากด้านล่างเมนูหลักพอดี */
    left: 0;
    background-color: #1a1a1a; /* ตั้งสีพื้นหลังกล่องย่อย (ปรับเปลี่ยนตามชอบได้ครับ) */
    border-top: 3px solid #b39211; /* เพิ่มเส้นขอบสีทองด้านบนให้ดูหรูหราแบบภาพตัวอย่าง */
    min-width: 240px; /* กำหนดความกว้างขั้นต่ำของกล่องย่อยไม่ให้ตัวหนังสือเบียดกัน */
    list-style: none;
    padding: 5px 0;
    margin: 0;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5); /* ใส่เงาให้กล่องดูลอยมีมิติ */
    
    /* ท่าไม้ตายซ่อนแบบนุ่มนวล */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

/* สไตล์ของลิงก์เมนูย่อยด้านใน */
.navbar .dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
    text-align: left; /* บังคับชิดซ้าย */
}

/* 🌟 เมื่อเอาเมาส์ไปชี้ที่เมนูย่อย ให้เปลี่ยนเป็นสีทองหรือสีที่เราต้องการ */
.navbar .dropdown-menu li a:hover {
    background-color: #b39211; /* สีพื้นหลังตอนชี้เมาส์ */
    color: #fff; /* สีตัวอักษรตอนชี้เมาส์ */
}

/* 🔥 คีย์เวิร์ดแอคชัน: เมื่อเอาเมาส์ชี้ที่ li.dropdown ให้กล่องDropdownแสดงตัวออกมาทันที */
.navbar .menu li.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ==========================================================================
   🚨 CRITICAL FIX: ซ่อนองค์ประกอบโทรศัพท์ไม่ให้โผล่มาบนหน้าจอคอมพิวเตอร์
   ========================================================================== */

/* สั่งซ่อนปุ่มสามขีดบนหน้าจอคอม */
.menu-toggle-mobile {
    display: none !important;
}

/* สั่งซ่อนม่านลิสต์เมนูของมือถือ ไม่ให้โผล่มาเด็ดขาดถ้าจอยังกว้างอยู่ */
.menu-mobile {
    display: none !important;
}
/* ล็อกหน้าจอคอมพิวเตอร์: สั่งซ่อนองค์ประกอบของมือถือทุกชนิดเมื่อจอใหญ่ */
@media screen and (min-width: 769px) {
    .menu-toggle-mobile,
    .menu-mobile {
        display: none !important;
    }
}


/* ==========================================================================
   🎯 KHUNPU LAYOUT FIXES (แก้ไขปัญหาระเบียบบนจอใหญ่และการ์ดเรียง 4)
   ========================================================================== */

/* ล็อกความกว้างของเนื้อหาทั้งหมด ไม่ให้ดีดกระจายเวลาเจอจอใหญ่กว่า 1200px */
.services, .pricing {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   🎯 LAYOUT FIX: จัดการการ์ดบริการให้เรียงหน้ากระดาน 4 กล่องแนวนอนแถวเดียวเป๊ะ
   ========================================================================== */
.services-grid.services-grid {
    display: grid !important;
    /* บังคับแบ่งเป็น 4 คอลัมน์เท่ากันในแถวเดียวเด็ดขาด */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;               /* ระยะห่างระหว่างกล่อง */
    max-width: 1300px !important;       /* ควบคุมความกว้างรวมให้พอดีกับ 4 กล่อง */
    margin: 0 auto !important;
    width: 100% !important;
}

/* กำหนดให้การ์ดแต่ละใบยืดขยายเต็มช่องของตัวเอง */
.services-grid a.service-card {
    text-decoration: none !important; 
    color: inherit !important;        
    display: flex;
    flex-direction: column;
    width: 100% !important;             /* ให้การ์ดกว้างเต็มช่อง Grid */
}

/* ==========================================================================
   📱 RESPONSIVE (ระบบยุบแถวอัตโนมัติเมื่อดูบนแท็บเล็ตและมือถือ)
   ========================================================================== */
@media (max-width: 1024px) {
    .services-grid.services-grid {
        /* บนหน้าจอแท็บเล็ต เปลี่ยนเป็นหักลงมาแถวละ 2 กล่อง (กลายเป็น 2 บรรทัดพอดี) */
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .services-grid.services-grid {
        /* บนหน้าจอมือถือ เปลี่ยนเป็นเรียงเดี่ยวแนวตั้งลงมา เพื่อไม่ให้ตัวหนังสือบีบจนพัง */
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   📱 RESPONSIVE (ระบบปรับขนาดอัตโนมัติสำหรับแท็บเล็ตและมือถือ)
   ========================================================================== */
@media (max-width: 1024px) {
    .services-grid a.service-card {
        /* บนหน้าจอแท็บเล็ต เปลี่ยนเป็นแถวละ 2 กล่อง (กว้างใบละ 50%) */
        flex: 0 1 calc(50% - 15px) !important;
    }
}

@media (max-width: 768px) {
    .services-grid a.service-card {
        /* บนหน้าจอมือถือ เปลี่ยนเป็นเรียงเดี่ยวแนวดิ่ง (กว้างใบละ 100%) เพื่อให้อ่านง่าย */
        flex: 0 1 100% !important;
    }
}

/* ==========================================================================
   🎯 ปรับแต่งหน้าแรก (Index) ให้บริการเรียงหน้ากระดาน 4 กล่องในแถวเดียวกัน
   ========================================================================== */
.services-index {
    display: grid !important;
    /* สั่งให้แบ่งช่องเป็น 4 คอลัมน์เท่าๆ กันอย่างเด็ดขาด */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;       /* ระยะห่างระหว่างกล่องกำลังดี ไม่ชิดและไม่ห่างเกินไป */
    max-width: 1300px;         /* ขยายความกว้างรวมของกลุ่มกล่องให้กว้างขึ้นเพื่อรองรับ 4 ช่อง */
    margin: 40px auto 0 auto;
    width: 100%;
}

/* 📱 แถม: ระบบ Responsive ควบคุมหน้าจอมือถือและแท็บเล็ตไม่ให้พัง */
@media (max-width: 1024px) {
    .services-index {
        /* บนแท็บเล็ตให้แบ่งเป็นแถวละ 2 กล่อง */
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .services-index {
        /* บนมือถือให้เรียงเดี่ยวแนวดิ่งลงมากล่องละแถวเพื่อให้อ่านง่าย */
        grid-template-columns: 1fr !important;
    }
}

/* 📱 แถม: สำหรับหน้าจอมือถือ/แท็บเล็ต ถ้าปล่อยให้เรียง 5 กล่องจะตัวหนังสือพังและดูไม่รู้เรื่อง */
@media (max-width: 1024px) {
    .services-grid {
        /* หน้าจอแท็บเล็ต ให้เรียงแถวละ 2 หรือ 3 กล่องแทน */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }
}
/* ปรับการ์ดแผนที่ให้อยู่ตรงกลางอย่างสง่างาม ไม่โย้ไปข้างใดข้างหนึ่ง */
.map-card {
    max-width: 800px;
    margin: 40px auto 0 auto; /* จัดกึ่งกลางแนวนอน */
    text-align: center;
}

.map-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ปรับราคาแพ็กเกจ 3 อันให้อยู่ตรงกลางสมมาตรกับด้านบน */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* ==========================================================================
   📱 RESPONSIVE (สำหรับจอมือถือและแท็บเล็ตให้ยุบแถวตามความเหมาะสมอัตโนมัติ)
   ========================================================================== */
@media (max-width: 1024px) {
    /* หน้าจอแท็บเล็ต ปรับการ์ดบริการเป็น 2 บรรทัด แถวละ 2 กล่อง */
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* หน้าจอมือถือ ให้เรียงแถวเดี่ยวแนวดิ่งยาวลงมาเพื่อให้อ่านง่าย ไม่เบียดกัน */
    .services-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .pricing-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================================
   👑 PREMIUM CONTAINER BOXES (เพิ่มกล่องครอบแบบหรูหรา)
   ========================================================================== */

/* กล่องครอบใหญ่สำหรับโซนบริการ */
.services-container-box {
    background: #111111;                       /* สีพื้นหลังกล่องเข้มกว่าพื้นหลังเว็บ */
    border: 1px solid rgba(241, 196, 15, 0.15); /* ตัดขอบทองจางๆ เพิ่มความหรูหรา */
    border-radius: 16px;                        /* ทำมุมมน */
    padding: 40px 30px;                         /* เว้นระยะห่างข้างในกล่อง */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* ใส่เงามีมิติ */
    margin-bottom: 40px;                        /* เว้นระยะห่างด้านล่าง */
}

/* ปรับแต่งบริการ Grid ด้านในกล่อง */

/* กล่องครอบแผนที่ประเทศไทยแบบใหม่ (ให้ดูเด่นและคลีนขึ้น) */
.map-container-box {
    background: linear-gradient(145deg, #111111, #161616);
    border: 1px solid rgba(241, 196, 15, 0.15);
    border-radius: 16px;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 900px;
    margin: 0 auto; /* จัดกึ่งกลางหน้าจอ */
}

/* จัดสัดส่วนรูปแผนที่ด้านใน */
.map-image img {
    max-width: 100%;
    height: auto;
    max-height: 500px; /* คุมความสูงไม่ให้ยาวเกินไป */
    object-fit: contain;
    margin-top: 20px;
}

/* ==========================================================================
   📱 RESPONSIVE (ปรับแต่งการแสดงผลบนมือถือ)
   ========================================================================== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .services-container-box, .map-container-box {
        padding: 25px 15px; /* ลดขนาด Padding บนมือถือไม่ให้บีบตัวหนังสือเกินไป */
    }
    .services-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}
/* ==========================================================================
   🎯 COMPLETE FIXED LAYOUT (ชุดแก้บัคจัดแถวและการ์ดไม่ยอมเปลี่ยน)
   ========================================================================== */

/* 1. บังคับให้การ์ดบริการเรียง 4 ใบหน้ากระดานเสมอ ไม่ว่าจะซูมเท่าไหร่ */

/* 2. สไตล์ของกล่องครอบขนาดใหญ่สำหรับโซนบริการ */
.services-container-box {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.15) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. จัดการแผนที่ให้อยู่ตรงกลาง ไม่ชิดซ้าย ไม่เด้งทะลุจอ */
.map-container-box, .map-card {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.15) !important;
    border-radius: 16px !important;
    padding: 40px 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
    max-width: 900px !important; /* บล็อกความกว้างจอใหญ่ */
    margin: 30px auto !important; /* ดันซ้ายขวาให้อยู่กึ่งกลางเป๊ะ */
    box-sizing: border-box !important;
}

/* ปรับรูปแผนที่ให้พอดีกล่อง */
.map-image img, .map-card img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    margin: 20px auto 0 auto !important;
    display: block !important;
}

/* ==========================================================================
   📱 RESPONSIVE (สำหรับจอมือถือและแท็บเล็ต)
   ========================================================================== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* จอมืดถือขนาดกลาง/แท็บเล็ตหักเป็น 2x2 */
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* จอมือถือเล็กเรียงแถวเดี่ยว */
    }
    .services-container-box, .map-container-box, .map-card {
        padding: 20px 15px !important;
    }
}

/* ==========================================================================
   👑 PREMIUM MAP SECTION DESIGN (กล่องครอบสถิติ หัวข้อสีทอง และแผนที่ขนาดใหญ่)
   ========================================================================== */

/* กล่องครอบหลักภายนอกสุดของโซนแผนที่ */
.map-premium-box {
    width: 100% !important;
    max-width: 1100px !important;    /* คุมไม่ให้กว้างล้นจอคอมพิวเตอร์ขนาดใหญ่ */
    margin: 50px auto !important;     /* จัดวางให้อยู่กึ่งกลางหน้าจอเดสก์ท็อปเป๊ะๆ */
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 1. กล่องครอบสถิติ 700 บริษัท (เน้นความพรีเมียม แยกเลเยอร์เด่นชัด) */
.map-stats-card {
    background: linear-gradient(145deg, #161616, #111111) !important;
    border: 1px solid rgba(241, 196, 15, 0.25) !important; /* ตัดขอบทองจางๆ เพิ่มมิติ */
    border-radius: 16px !important;
    padding: 35px 25px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; /* เงาด้านล่างแบบนุ่มนวล */
    max-width: 650px !important;      /* บล็อกความกว้างกล่องข้อความให้กระชับน่าอ่าน */
    margin: 0 auto 35px auto !important; /* จัดกึ่งกลาง และเว้นระยะห่างจากแผนที่ด้านล่าง */
}

/* 2. ปรับแต่งหัวข้อให้เป็นสีทองอร่ามแมตช์กับตัวแบรนด์ */
.map-gold-title {
    color: #f1c40f !important;        /* สีทองหรูหรา */
    font-size: 1.6rem !important;     /* ขยายขนาดหัวข้อให้เด่นขึ้น */
    margin-bottom: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* ป้าย Badge แสดงจำนวน 700+ บริษัท */
.map-badge-gold {
    display: inline-block !important;
    background: #f1c40f !important;   /* พื้นหลังป้ายสีทอง */
    color: #000000 !important;        /* ตัวอักษรสีดำเข้มตัดกัน */
    font-weight: 700 !important;
    padding: 6px 20px !important;
    border-radius: 50px !important;   /* ทำมุมมนทรงแคปซูล */
    font-size: 1.15rem !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3) !important;
}

/* คำอธิบายใต้ป้ายสถิติ */
.map-desc {
    color: #cccccc !important;        /* สีขาวเทาเพื่อให้สบายตาอ่านง่าย */
    font-size: 1.05rem !important;
    margin: 0 !important;
}

/* 3. กล่องแสดงภาพแผนที่ และการปรับขนาดให้ใหญ่ขึ้น */
.map-large-display {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* บังคับจัดรูปให้อยู่กึ่งกลางเสมอ */
    align-items: center !important;
}

/* คำสั่งขยายขนาดรูปภาพแผนที่ */
.map-large-display img {
    width: 100% !important;
    max-width: 850px !important;     /* 🚀 ปรับขยายขนาดเพิ่มขึ้นจากเดิม เพื่อให้เห็นรายละเอียดชัดเจน */
    height: auto !important;          /* รักษาสัดส่วนรูปภาพไม่ให้บิดเบี้ยว */
    object-fit: contain !important;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7)) !important; /* เพิ่มเงาหนุนหลังให้รูปภาพแผนที่ดูลอยมีมิติ */
    display: block !important;
}

/* ==========================================================================
   📱 RESPONSIVE (ปรับแต่งการแสดงผลเมื่อเปิดดูบนโทรศัพท์มือถือ)
   ========================================================================== */
@media (max-width: 768px) {
    .map-stats-card {
        padding: 25px 15px !important; /* ลดขนาด padding ลงเล็กน้อยบนจอมือถือ */
        margin-bottom: 25px !important;
    }
    .map-gold-title {
        font-size: 1.3rem !important;  /* ย่อขนาดหัวข้อลงมาให้พอดีกับหน้าจอมือถือ */
    }
    .map-badge-gold {
        font-size: 1rem !important;
    }
    .map-large-display img {
        max-width: 100% !important;   /* สั่งให้แผนที่ยืดขยายเต็มหน้าจอสมาร์ตโฟน */
    }
}

/* ==========================================================================
   👑 SEPARATED PREMIUM CARDS (แยกสองกล่อง: กล่องสถิติสีทอง + กล่องแผนที่ใหญ่)
   ========================================================================== */

/* 📦 สไตล์กล่องที่ 1: ครอบส่วนหัวข้อและสถิติ */
.stats-premium-card {
    background: #111111 !important;           /* พื้นหลังดำเข้มยกระดับมิติ */
    border: 1px solid rgba(241, 196, 15, 0.2) !important; /* ขอบทองบางๆ สวยงาม */
    border-radius: 16px !important;            /* ขอบมน */
    padding: 35px 20px !important;
    text-align: center !important;
    max-width: 750px !important;               /* คุมความกว้างไม่ให้ย้วย */
    margin: 0 auto 30px auto !important;       /* จัดกึ่งกลางจอ และเว้นห่างจากกล่องแผนที่ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ปรับแต่งหัวข้อข้อความสีทองอร่าม */
.gold-text-header {
    color: #f1c40f !important;                 /* สีทองแบรนด์คุณปุ๊ */
    font-size: 1.65rem !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* ป้ายแคปซูลสถิติตรงกลาง */
.gold-capsule-badge {
    display: inline-block !important;
    background: #f1c40f !important;            /* พื้นสีทอง */
    color: #000000 !important;                 /* ตัวหนังสือดำตัดกันชัดเจน */
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    padding: 6px 24px !important;
    border-radius: 50px !important;            /* รูปทรงโค้งมนแคปซูล */
    margin-bottom: 15px !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3) !important;
}

/* คำอธิบายสถิติด้านล่างสุด */
.stats-sub-desc {
    color: #cccccc !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}

/* 📦 สไตล์กล่องที่ 2: ครอบตัวแผนที่ขนาดใหญ่แยกส่วน */
.map-large-container {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.15) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    max-width: 950px !important;               /* 🚀 ปรับเพิ่มพื้นที่กล่องเพื่อรองรับรูปขนาดใหญ่ */
    margin: 0 auto 50px auto !important;       /* จัดให้อยู่ตรงกลางของคอมพิวเตอร์หน้าจอใหญ่ */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

/* ตัวห่อหุ้มรูปภาพเพื่อบังคับเซ็นเตอร์ */
.map-image-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 🚀 ตัวเร่งขนาดภาพแผนที่ให้ใหญ่ขึ้นคมชัด */
.map-image-wrapper img {
    width: 100% !important;
    max-width: 900px !important;               /* 🚀 สั่งขยายภาพแผนที่ประเทศไทยให้กว้างเต็มกล่อง */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   📱 Responsive จัดการขนาดเมื่อดูผ่านมือถือ
   ========================================================================== */
@media (max-width: 768px) {
    .stats-premium-card {
        padding: 25px 15px !important;
    }
    .gold-text-header {
        font-size: 1.3rem !important;          /* ย่อหัวข้อลงเล็กน้อยเวลาอยู่บนจอมือถือ */
    }
    .map-large-container {
        padding: 10px !important;              /* ลดขอบหนาบนมือถือให้เหลือพื้นที่เห็นแผนที่เยอะๆ */
    }
}

/* ==========================================================================
   👑 KHUNPU SPECIAL CONTACT STYLE (แยกคลาสอิสระ ป้องกันการทับซ้อนกับหน้าอื่น)
   ========================================================================== */

/* ควบคุมขอบเขตและระยะห่างของเซกชันติดต่อทั้งหมด */
.kp-cnt-section {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 50px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 🎯 หัวข้อหลักจัดให้อยู่กึ่งกลางหน้าจอ และปรับเป็นสีทองอร่าม */
.kp-cnt-main-header {
    text-align: center !important;
    margin-bottom: 35px !important;
}
.kp-cnt-main-header h2 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
.kp-cnt-main-header h2 span {
    color: #f1c40f !important; /* บังคับอักษรคำว่า "ติดต่อเรา" เป็นสีทอง */
    margin-left: 8px;
}

/* 🎯 กล่องใหญ่ครอบเนื้อหา แบ่งสัดส่วนฝั่งซ้ายและฝั่งขวา (50/50) */
.kp-cnt-premium-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* แบ่งครึ่งเท่ากันซ้ายขวา */
    gap: 30px !important;                       /* ช่องไฟตรงกลางระหว่างคอลัมน์ */
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* 🌟 จัดการสีไอคอนในกล่องช่องทางติดต่อทั้งหมดให้เป็นสีทอง */
.kp-cnt-gold-icon {
    color: #f1c40f !important; /* สีทองพรีเมียม */
}

/* ==========================================
   🏢 สไตล์ฝั่งซ้าย (กลุ่มสำนักงานใหญ่ - สาขา 3)
   ========================================== */
.kp-cnt-left-column {
    width: 100% !important;
}

/* กล่องครอบพรีเมียมของฝั่งสำนักงาน */
.kp-cnt-address-card {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    height: 100% !important; /* ยืดให้ความสูงเท่ากับฝั่งขวาอัตโนมัติ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* เว้นระยะห่างระหว่างสาขาให้ดูโปร่งอ่านง่าย */
    box-sizing: border-box !important;
}

.kp-cnt-info-item {
    text-align: left !important; /* บังคับชิดซ้าย */
}
/* โค้ดใหม่ที่แก้ไขเป็นสีทองเรียบร้อยแล้ว 🚀 */
.kp-cnt-info-item strong {
    color: #f1c40f !important;   /* ✨ เปลี่ยนเป็นสีทองรหัสเดียวกับตัวแบรนด์คุณปุ๊ */
    font-size: 1.15rem !important;
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important; /* เพิ่มความห่างตัวอักษรนิดนึงให้ดูหรูขึ้น */
}
.kp-cnt-info-item strong i {
    margin-right: 8px !important;
}
.kp-cnt-info-item p {
    color: #cccccc !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ==========================================
   📞 สไตล์ฝั่งขวา (กลุ่มการติดต่อ + แบบฟอร์ม)
   ========================================== */
.kp-cnt-right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* ระยะห่างระหว่างกล่องติดต่อกับกล่องแบบฟอร์ม */
    width: 100% !important;
}

/* 1. กล่องครอบส่วนข้อมูลการติดต่อ (โทร, อีเมล, ไลน์) */
.kp-cnt-methods-card {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    text-align: left !important; /* บังคับข้อมูลด้านในชิดซ้าย */
    box-sizing: border-box !important;
}

.kp-cnt-method-sub-item {
    margin-bottom: 20px !important;
}
.kp-cnt-method-sub-item strong {
    color: #f1c40f !important;
    font-size: 1.1rem !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.kp-cnt-method-sub-item strong i {
    margin-right: 8px !important;
}
.kp-cnt-method-sub-item p {
    color: #ffffff !important;
    font-size: 1.2rem !important; /* ขยายขนาดเบอร์/ไลน์ให้เห็นชัดๆ */
    font-weight: 500 !important;
    margin: 0 !important;
}

/* ปุ่มแสดง QR Code ดีไซน์ใหม่ */
.kp-cnt-line-btn {
    background: #f1c40f !important;
    color: #000000 !important;
    border: none !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    margin-top: 5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.25) !important;
}
.kp-cnt-line-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px) !important;
}

/* 2. กล่องครอบส่วนแบบฟอร์มติดต่อเรา */
.kp-cnt-form-card {
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    text-align: center !important; /* จัดกลุ่มแบบฟอร์มให้อยู่กึ่งกลางกล่องย่อยเพื่อความสวยงาม */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
}
.kp-cnt-form-icon-wrap {
    margin-bottom: 12px !important;
}
.kp-cnt-form-card h3 {
    color: #f1c40f !important;
    font-size: 1.3rem !important;
    margin: 0 0 6px 0 !important;
}
.kp-cnt-form-card p {
    color: #aaaaaa !important;
    font-size: 0.95rem !important;
    margin: 0 0 20px 0 !important;
}

/* ปุ่มลิงก์คลิกกรอกแบบฟอร์มกูเกิล */
.kp-cnt-form-click-btn {
    display: inline-block !important;
    background: transparent !important;
    color: #bb86fc !important; /* สีม่วงพาสเทลสว่างเด่นบนพื้นดำ */
    border: 1px solid #bb86fc !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}
.kp-cnt-form-click-btn:hover {
    background: #bb86fc !important;
    color: #000000 !important;
}

/* ==========================================================================
   📱 RESPONSIVE LAYOUT (จัดระเบียบบนหน้าจอโทรศัพท์มือถือ)
   ========================================================================== */
@media (max-width: 992px) {
    .kp-cnt-premium-box {
        grid-template-columns: 1fr !important; /* ยุบจากสองฝั่งเรียงแถวเดี่ยวดิ่งลงมาเมื่อจอเล็กลง */
        gap: 25px !important;
    }
    .kp-cnt-address-card {
        padding: 30px 20px !important;
    }
}

@media (max-width: 576px) {
    .kp-cnt-main-header h2 {
        font-size: 1.7rem !important;
    }
    .kp-cnt-address-card, .kp-cnt-methods-card, .kp-cnt-form-card {
        padding: 25px 15px !important; /* ลด padding แถบข้างขอบบนมือถือเล็ก */
    }
}


/* ==========================================================================
   📐 PREMIUM LAYOUT MATCHING & MAP RE-SIZE (คุณปุ๊การบัญชี)
   ========================================================================== */

/* 1. จัดการความสูงกล่อง X (ฝั่งซ้าย) ให้เท่ากับ 2 กล่องฝั่งขวารวมกันแบบพอดีเป๊ะ */
.kp-cnt-premium-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    align-items: stretch !important; /* บังคับให้ฝั่งซ้าย-ขวา ยืดส่วนสูงเท่ากันอัตโนมัติ */
    margin-bottom: 40px !important;
}

.kp-cnt-left-column {
    display: flex !important;
    flex-direction: column !important;
}

.kp-cnt-address-card {
    height: 100% !important; /* ขยายกล่อง X ให้เต็มพื้นที่ความสูงฝั่งขวา */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* กระจายระยะห่างแต่ละสาขาให้สวยงามเต็มกล่อง */
    background: #111111 !important;
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    box-sizing: border-box !important;
}

/* 2. จัดการตัวแปรความยาวแผ่นที่ Y (ไม่ให้ยาวลึกเกินไปตามบรีฟ) */
.contact-map-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    height: 380px !important; /* 📍 ควบคุมความยาวแกน Y ให้กระชับพอดีตา ไม่ยาวลึกเกินไป */
    margin: 0 auto 50px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(241, 196, 15, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.contact-map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* รองรับ Responsive บนมือถือ */
@media (max-width: 992px) {
    .kp-cnt-premium-box {
        grid-template-columns: 1fr !important; /* บนมือถือยุบเป็นแถวเดี่ยวเรียงกัน */
    }
    .contact-map-wrapper {
        height: 280px !important; /* ลดความยาว Y บนหน้าจอมือถือลงอีกเพื่อให้กระชับ */
    }
}

/* ==========================================================================
   🔒 [โค้ดเฉพาะทาง] จัดแถวเรียง 4 กล่องหน้ากระดาน และล้างสี/เส้น ใต้ไอคอน สำหรับหน้าแรกเท่านั้น 
   ========================================================================== */

/* 1. สั่งให้กล่องในหน้าแรกเรียงเป็น 4 คอลัมน์แถวเดียวกัน */
.services-index {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* แบ่ง 4 ช่องเท่ากันเป๊ะ */
    gap: 20px !important;                             /* ระยะห่างระหว่างกล่อง */
    max-width: 1300px !important;                      /* ความกว้างรวมของเซกชัน */
    margin: 40px auto 0 auto !important;
    width: 100% !important;
}

/* 2. บังคับความสูงของการ์ดบริการในหน้าแรกให้สูงเท่ากันทั้งหมดในแถว */
.services-index .service-card {
    background: #161616 !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    text-decoration: none !important;      /* 🎯 ล้างเส้นใต้กล่องที่บราวเซอร์แอบใส่มา */
    color: white !important;               /* 🎯 บังคับให้หัวข้อและข้อความคงสีขาว ไม่เป็นสีน้ำเงิน */
    
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.4s ease !important;
}

/* ==========================================================================
   🔒 [โค้ดเฉพาะทาง] จัดแถวเรียง 4 กล่องหน้ากระดาน และบังคับไอคอนเป็นสีขาว (หน้าแรกเท่านั้น)
   ========================================================================== */

/* 1. สั่งให้กลุ่มกล่องในหน้าแรกเรียงเป็น 4 คอลัมน์แถวเดียวกัน */
.services-index {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* แบ่ง 4 ช่องเท่ากันเป๊ะ */
    gap: 20px !important;                             /* ระยะห่างระหว่างกล่อง */
    max-width: 1300px !important;                      /* ความกว้างรวมของเซกชัน */
    margin: 40px auto 0 auto !important;
    width: 100% !important;
}

/* 2. บังคับโครงสร้างการ์ดบริการในหน้าแรกให้สูงเท่ากันทั้งหมดในแถว และล้างเส้นใต้ */
.services-index .service-card {
    background: #161616 !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    text-decoration: none !important;      /* เอาเส้นใต้กล่องที่บราวเซอร์แอบใส่มาออก */
    color: white !important;               /* บังคับหัวข้อและข้อความให้คงสีขาว ไม่เป็นสีน้ำเงิน */
    
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.4s ease !important;
}

/* 3. 🎯 จุดแก้ไขสำคัญ: บังคับไอคอน (FontAwesome) ในกล่องหน้าแรกให้เป็นสีขาวล้วน */
.services-index .service-card .service-icon i,
.services-index .service-card i {
    color: #ffffff !important;             /* ล็อกไอคอนเป็นสีขาวตามต้องการ ไม่ใช่สีน้ำเงินและสีทอง */
    text-decoration: none !important;      /* ป้องกันไม่ให้เกิดเส้นขีดฆ่าหลอนๆ ใต้ไอคอน */
    font-size: 2.2rem !important;          /* คงขนาดความใหญ่ของไอคอนให้สวยงามเด่นชัด */
    margin-bottom: 15px !important;
}

/* 4. ควบคุมขนาดตัวหนังสือคำอธิบายให้อ่านง่ายขึ้นเมื่อกล่องแคบลง */
.services-index .service-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #aaaaaa !important;             /* สีเทาอ่อนสวยงามตามธีมเว็บ */
}

/* 5. ควบคุมสไตล์ตอนเอาเมาส์ไปชี้ (Hover) ไม่ให้เส้นใต้โผล่มา */
.services-index .service-card:hover h3,
.services-index .service-card:hover p {
    text-decoration: none !important;      /* เอาเมาส์ชี้ก็ห้ามขึ้นเส้นใต้ */
}

/* 📱 6. ระบบ Responsive ล็อกหน้าจอมือถือ/แท็บเล็ตให้แสดงผลสวยงามอัตโนมัติ */
@media (max-width: 1024px) {
    .services-index {
        grid-template-columns: repeat(2, 1fr) !important; /* แท็บเล็ตเรียงแถวละ 2 กล่อง */
    }
}
@media (max-width: 600px) {
    .services-index {
        grid-template-columns: 1fr !important;            /* มือถือเรียงดิ่งแถวละ 1 กล่อง */
    }
}

/* ==========================================================================
   ✨ PREMIUM UPGRADE - ABOUT FEATURES (ตกแต่งกล่องฟีเจอร์หน้าเกี่ยวกับเรา)
   ========================================================================== */

/* 1. คุมระยะห่างกล่องข้อความภาพรวม */
.about-text h2 {
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 25px !important;
}

.about-text p {
    color: #cccccc !important;
    line-height: 1.8 !important;
    margin-bottom: 20px;
}

/* 2. เปลี่ยนโครงสร้างบล็อกฟีเจอร์ให้เรียงเป็น 2 คอลัมน์คู่ */
.about-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่งฝั่งซ้าย-ขวา */
    gap: 20px !important;                             /* ระยะห่างระหว่างกล่อง */
    margin-top: 35px !important;
    width: 100%;
}

/* 3. ตกแต่งการ์ดฟีเจอร์ย่อย (Feature Box) */
.about-features .feature-box {
    background: #161616 !important;                    /* พื้นหลังสีดำสว่างกว่า Body เล็กน้อยเพื่อให้มีมิติ */
    padding: 22px 25px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative;
    overflow: hidden;
}

/* 4. สไตล์หัวข้อและข้อความในกล่องฟีเจอร์ */
.about-features .feature-box h4 {
    color: var(--gold, #d4af37) !important;           /* สีทองประกายตามธีมหลัก */
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-features .feature-box p {
    color: #aaaaaa !important;                         /* สีเทาอ่อนเพื่อให้อ่านง่ายและไม่กวนสายตา */
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;                       /* ล้าง Margin ตัวล่างสุดป้องกันกล่องเบี้ยว */
    line-height: 1.5 !important;
}

/* 5. เอฟเฟกต์หรูหราตอนเอาเมาส์ไปชี้ (Hover Effect) */
.about-features .feature-box:hover {
    transform: translateY(-5px) !important;            /* กล่องลอยขึ้นเล็กน้อย */
    background: #1c1c1c !important;                    /* เปลี่ยนสีพื้นหลังให้สว่างขึ้นนิดหน่อย */
    border-color: rgba(212, 175, 55, 0.3) !important;  /* เส้นขอบสีทองเรืองแสงบางๆ */
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.08) !important; /* รัศมีแสงสีทองนุ่มๆ ด้านล่าง */
}

/* 📱 6. ระบบ Responsive รองรับการแสดงผลบนหน้าจอมือถือ */
@media (max-width: 600px) {
    .about-features {
        grid-template-columns: 1fr !important;          /* บนหน้าจอมือถือที่แคบ ให้ดีดกลับมาเรียงเดี่ยวแนวตั้ง */
        gap: 15px !important;
    }
    .about-text h2 {
        font-size: 1.9rem !important;                     /* ปรับขนาดหัวข้อใหญ่ลงเล็กน้อยเพื่อไม่ให้ล้นจอมือถือ */
    }
}

/* ==========================================================================
   🎯 [โค้ดเฉพาะทาง] จัดไอคอนในกล่องบริการหน้าแรก (.services-index) ให้อยู่ตรงกลางเป๊ะ 
   ========================================================================== */

/* ควบคุมกล่องวงกลมที่หุ้มไอคอน ให้จัดสิ่งของภายในเป็นแบบกึ่งกลาง 100% */
.services-index .service-card .service-icon {
    display: flex !important;
    align-items: left !important;       /* จัดกึ่งกลางแนวตั้ง */
    justify-content: center !important;    /* จัดกึ่งกลางแนวนอน */
    margin: 0 auto 20px auto !important;  /* จัดตัวกล่องวงกลมให้อยู่ตรงกลางการ์ด */
    
    /* ล้างค่า padding หรือความสูงบรรทัดเก่าที่อาจจะดันไอคอนให้เบี้ยว */
    padding: 0 !important;
    line-height: 1 !important;
}

/* ล็อกตัวไอคอน FontAwesome ด้านในให้แสดงผลแบบ inline-flex เพื่อล้างค่าดีฟอลต์ฟอนต์ที่ชอบทำให้เบี้ยว */
.services-index .service-card .service-icon i {
    display: inline-flex !important;
    align-items: left !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ==========================================================================
   🎯 [โค้ดอัปเดต] 3 กล่องอยู่ตรงกลางจอ + ย้ายไอคอนไปชิดซ้ายสุดของการ์ด
   ========================================================================== */

/* 1. คุมให้กลุ่มบริการหน้าแรกเรียงเป็น 3 กล่องตั้งอยู่ตรงกลางหน้าจอ */
.services-index {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* แบ่ง 3 ช่องเท่ากันเป๊ะ */
    gap: 25px !important;                             /* ระยะห่างระหว่างกล่อง */
    max-width: 1150px !important;                      /* บีบความกว้างรวมเพื่อให้ 3 กล่องอยู่ตรงกลาง */
    margin: 40px auto 0 auto !important;               /* ดึงกลุ่มกล่องมาไว้ตรงกลางจอ */
    width: 100% !important;
}

/* 2. จัดโครงสร้างภายในการ์ดบริการ (ขยับไอคอนชิดซ้าย) */
.services-index .service-card {
    background: #161616 !important;
    padding: 35px 30px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    text-decoration: none !important;
    color: rgb(255, 255, 255) !important;
    
    /* 🎯 จัดองค์ประกอบการ์ดให้เนื้อหาไหลจากบนลงล่าง และสั่งชิดซ้ายทั้งหมด */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* บังคับให้ไอคอน หัวข้อ และข้อความ "ชิดซ้ายสุด" */
    text-align: left !important;         /* สั่งให้ตัวหนังสือจัดชิดซ้ายทั้งหมด */
    height: 100% !important;
    transition: all 0.4s ease !important;
}

/* 3. จัดการกล่องวงกลมที่หุ้มไอคอนให้ชิดซ้ายและเคลียร์ค่ากึ่งกลางเดิม */
.services-index .service-card .service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;   /* ตัวไอคอนยังอยู่กลางวงกลมตัวเอง */
    margin: 0 0 20px 0 !important;        /* 🎯 เปลี่ยน Margin ฝั่งซ้ายเป็น 0 เพื่อให้วงกลมวิ่งไปชิดซ้ายสุดของการ์ด */
    padding: 0 !important;
    line-height: 1 !important;
}

/* 4. บังคับตัวไอคอนสีขาวภายในวงกลมให้อยู่ตรงกลางของวงกลมตัวเองเป๊ะๆ ไม่เบี้ยว */
.services-index .service-card .service-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: #ffffff !important;            /* ล็อกไอคอนเป็นสีขาวตามบรีฟก่อนหน้า */
}

/* 5. ควบคุมขนาดและระยะห่างของข้อความให้สวยงาม */
.services-index .service-card h3 {
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
    color: white !important;
}

.services-index .service-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #aaaaaa !important;
    margin: 0 !important;
}

/* 📱 6. ระบบ Responsive ควบคุมหน้าจอขนาดเล็ก */
@media (max-width: 992px) {
    .services-index {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .services-index {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   🎯 แบนเนอร์หน้าบริการ (เวอร์ชันล้างสไตล์เก่า + ดันหลบ Navbar สมบูรณ์แบบ)
   ========================================================================== */
/* ==========================================================================
   🎯 แบนเนอร์หน้าบริการ (เวอร์ชันสัดส่วนจริง 100% ไม่ยืด ไม่เบี้ยว ไม่กินขอบ)
   ========================================================================== */
/* ==========================================================================
   🎯 แบนเนอร์หน้าบริการ (เวอร์ชันสัดส่วนจริง 100% ไม่ยืด ไม่เบี้ยว ไม่กินขอบ)
   ========================================================================== */
.hero-service {
    width: 100% !important;
    
    /* 🚀 1. ดันตัวแบนเนอร์ลงมาจากขอบบน เพื่อหลบใต้ท้อง Navbar */
    margin-top: 90px !important; 

    /* 🚀 2. ใช้ aspect-ratio เพื่อคำนวณความสูงออโต้ตามสัดส่วนภาพจริง (1400/415)
            วิธีนี้ไม่ว่าจะเปิดบนคอมหรือมือถือ สัดส่วนกล่องจะขยับตามรูปภาพเป๊ะๆ ไม่บีบแบน */
    aspect-ratio: 1920 / 240 !important;
    
    /* 🚀 3. ปลดล็อกความสูงตายตัวออก เพื่อให้ระบบปรับความสูงตามอัตราส่วนของภาพจริง */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* 🚀 4. เรียกใช้รูปภาพพื้นหลังตรงๆ */
    background-image: url('img/newbanner/1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    /* 🚀 5. ไม้ตายแสดงสัดส่วนจริง: บังคับรักษาอัตราส่วนภาพดั้งเดิมไว้ ห้ามยืดเด็ดขาด */
    background-size: contain !important;

    /* 🚀 6. เคลียร์สเปซภายในกล่อง */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.hero-contact {
    width: 100% !important;
    
    /* 🚀 1. ดันตัวแบนเนอร์ลงมาจากขอบบน เพื่อหลบใต้ท้อง Navbar */
    margin-top: 90px !important; 

    /* 🚀 2. ใช้ aspect-ratio เพื่อคำนวณความสูงออโต้ตามสัดส่วนภาพจริง (1400/415)
            วิธีนี้ไม่ว่าจะเปิดบนคอมหรือมือถือ สัดส่วนกล่องจะขยับตามรูปภาพเป๊ะๆ ไม่บีบแบน */
    aspect-ratio: 1920 / 240 !important;
    
    /* 🚀 3. ปลดล็อกความสูงตายตัวออก เพื่อให้ระบบปรับความสูงตามอัตราส่วนของภาพจริง */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* 🚀 4. เรียกใช้รูปภาพพื้นหลังตรงๆ */
    background-image: url('img/newbanner/3.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    /* 🚀 5. ไม้ตายแสดงสัดส่วนจริง: บังคับรักษาอัตราส่วนภาพดั้งเดิมไว้ ห้ามยืดเด็ดขาด */
    background-size: contain !important;

    /* 🚀 6. เคลียร์สเปซภายในกล่อง */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.hero-about {
    width: 100% !important;
    
    /* 🚀 1. ดันตัวแบนเนอร์ลงมาจากขอบบน เพื่อหลบใต้ท้อง Navbar */
    margin-top: 90px !important; 

    /* 🚀 2. ใช้ aspect-ratio เพื่อคำนวณความสูงออโต้ตามสัดส่วนภาพจริง (1400/415)
            วิธีนี้ไม่ว่าจะเปิดบนคอมหรือมือถือ สัดส่วนกล่องจะขยับตามรูปภาพเป๊ะๆ ไม่บีบแบน */
    aspect-ratio: 1920 / 240 !important;
    
    /* 🚀 3. ปลดล็อกความสูงตายตัวออก เพื่อให้ระบบปรับความสูงตามอัตราส่วนของภาพจริง */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* 🚀 4. เรียกใช้รูปภาพพื้นหลังตรงๆ */
    background-image: url('img/newbanner/2.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    /* 🚀 5. ไม้ตายแสดงสัดส่วนจริง: บังคับรักษาอัตราส่วนภาพดั้งเดิมไว้ ห้ามยืดเด็ดขาด */
    background-size: contain !important;

    /* 🚀 6. เคลียร์สเปซภายในกล่อง */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.hero-news {
    width: 100% !important;
    
    /* 🚀 1. ดันตัวแบนเนอร์ลงมาจากขอบบน เพื่อหลบใต้ท้อง Navbar */
    margin-top: 90px !important; 

    /* 🚀 2. ใช้ aspect-ratio เพื่อคำนวณความสูงออโต้ตามสัดส่วนภาพจริง (1400/415)
            วิธีนี้ไม่ว่าจะเปิดบนคอมหรือมือถือ สัดส่วนกล่องจะขยับตามรูปภาพเป๊ะๆ ไม่บีบแบน */
    aspect-ratio: 1920 / 240 !important;
    
    /* 🚀 3. ปลดล็อกความสูงตายตัวออก เพื่อให้ระบบปรับความสูงตามอัตราส่วนของภาพจริง */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* 🚀 4. เรียกใช้รูปภาพพื้นหลังตรงๆ */
    background-image: url('img/newbanner/newbest.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    /* 🚀 5. ไม้ตายแสดงสัดส่วนจริง: บังคับรักษาอัตราส่วนภาพดั้งเดิมไว้ ห้ามยืดเด็ดขาด */
    background-size: contain !important;

    /* 🚀 6. เคลียร์สเปซภายในกล่อง */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

#index111 {
    scroll-margin-top: 140px; /* ปรับตัวเลขนี้เพิ่ม-ลดได้ตามความสูงของ Navbar คุณ */
}

/* บังคับซ่อนกล่องแบนเนอร์มือถือ ไม่ให้โผล่มาบนจอคอม */
.hero-about-mobile {
    display: none !important;
}
.hero-service-mobile {
    display: none !important;
}
.hero-contact-mobile {
    display: none !important;
}
.hero-index-mobile {
    display: none !important;
}
.hero-news-mobile {
    display: none !important;
}

/* ==========================================
   ส่วนที่เพิ่มใหม่สำหรับระบบ Chat Auto Reply 
   ========================================== */
.kp-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
    padding: 0; /* เอา padding ออกเพื่อไม่ให้ดันขอบ */
    width: 100%; 
    box-sizing: border-box; /* บังคับให้อยู่ในขอบเขตกล่อง */
    margin-bottom: 10px;
}
.kp-quick-replies button {
    background-color: #f0f2f5;
    border: 1px solid #e4e6eb;
    padding: 10px 14px;
    border-radius: 18px;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    
    /* เพิ่ม 2 บรรทัดนี้เพื่อห้ามปุ่มดันทะลุขอบ */
    width: 100%;
    box-sizing: border-box; 
}
.kp-quick-replies button:hover {
    background-color: #00b900;
    color: white;
    border-color: #00b900;
}
.kp-msg.user {
    align-self: flex-end;
    background: #00b900;
    color: white;
    border-radius: 15px 15px 2px 15px;
    margin-left: auto;
}

/* ==========================================================
   ปรับแต่งโครงสร้าง NEWS SECTION ให้แสดงผลทันที ไม่ต้องรอเอฟเฟกต์
   ========================================================== */

.section-title {
    text-align: center;
    margin-bottom: 40px;
    /* เอา animation: fadeInUp ... ออก */
    opacity: 1 !important;
    transform: none !important;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* เหลือไว้เฉพาะตอนเอาเมาส์ชี้ (Hover) พอ */
    
    /* เคลียร์ค่าที่ทำให้ตัวการ์ดจางหรือซ่อนอยู่ตอนแรก */
    opacity: 1 !important;
    transform: none !important;
}

/* ตอนเอาเมาส์ชี้ให้ขยับนิดๆ พอสวยงาม ไม่รบกวนตอนโหลดหน้า */
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}