* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
            scroll-behavior: smooth;
        }

        body {
            background: #f5f7fa;
            color: #333;
        }

        /* Navbar */
        header {
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        header h1 {
            color: #4f46e5;
        }

        nav a {
            text-decoration: none;
            color: #333;
            margin-left: 25px;
            font-weight: 500;
            transition: 0.3s;
        }

        nav a:hover {
            color: #4f46e5;
        }

/* กลุ่มโลโก้ + ชื่อบริษัท */
.logo-area{
    display:flex;
    align-items:flex-end;
    gap:5px;
}

/* โลโก้ */
.logo-area img{
    height:50px;
    width:auto;
}

/* ชื่อบริษัท */
.company-name h1{
    font-size:14px;
    margin:0;
    line-height:1.2;
}

.company-name span{
    font-size:14px;
    color:#666;
}

.logo{
    font-weight:bold;
    font-size:20px;
}

nav{
    display:flex;
    gap:5px;
    transition:0.3s ease;
}

nav.active{
    max-height:300px;
}

nav a{
    text-decoration:none;
    color:#333;
    font-weight:500;
}
.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
}


        /* Hero Section */
        .hero {
            height: 30vh;
            background: linear-gradient(135deg, #4f46e5, #9333ea);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            padding: 20px;
        }

        .hero h2 {
            font-size: 30px;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .btn {
            padding: 12px 25px;
            background: white;
            color: #4f46e5;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: 0.3s;
        }

        .btn:hover {
            background: #ddd;
        }

        /* Services */
        .services {
            padding: 80px 5%;
            text-align: center;
        }

        .services h2 {
            margin-bottom: 50px;
            font-size: 32px;
        }

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

        .card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transition: 0.3s;
        }

        .card:hover {
            transform: translateY(-10px);
        }

        .card h3 {
            margin-bottom: 15px;
            color: #4f46e5;
            font-size: 15px;
        }

        /* Contact */
        .contact {
            background: #111827;
            color: black;
            padding: 60px 5%;
            text-align: center;
        }

        footer {
            background: #0f172a;
            color: #aaa;
            text-align: center;
            padding: 20px;
            font-size: 14px;
        }

/* Slider */
.slider{
    position:relative;
    width:100%;
    aspect-ratio: 16 / 6;
    overflow:hidden;
}

.slides{
    display:flex;
    height:100%;
    transition:transform 0.6s ease-in-out;
}

.slides img{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Caption */
.caption{
    position:absolute;
    top:15%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white;
    background:rgba(0,0,0,0.4);
    padding:20px 40px;
    border-radius:10px;
    text-align:center;
}

/* Buttons */
.prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:white;
    border:none;
    padding:15px;
    cursor:pointer;
    font-size:18px;
}

.prev{ left:20px; }
.next{ right:20px; }

.branches{
    padding:80px 5%;
    background:#f9fafc;
}

.branches h2{
    text-align:center;
    margin-bottom:50px;
    font-size:32px;
}

.branch-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr); /* แถวละ 3 */
    gap:30px;
}

.branch-card{
    display:flex;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s;
}

.branch-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.branch-card img{
    width:300px;
    height:220px;
    object-fit:cover;
}

.branch-content{
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.branch-content h3{
    margin-bottom:10px;
    color:#4f46e5;
}

.branch-content p{
    margin-bottom:8px;
    font-size:14px;
}

.branch-content span{
    font-size:13px;
    color:#555;
}

/*-----Certificates-------*/

.certificates{
    padding:80px 0;
    background:#E0FFFF;
    text-align:center;
    overflow:hidden;
}

.certificates h2{
    margin-bottom:40px;
    font-size:32px;
}

/* Slider */
.cert-slider{
    overflow:hidden;
    width:100%;
}

.cert-track{
    display:flex;
    gap:30px;
    overflow-x:auto;
    padding-bottom:25px;
    /*-animation: scroll 25s linear infinite;-*/
}

.cert-card{
    min-width:300px;
    background:white;
    padding:5px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    text-align:center;
}

.cert-card img{
    width:100%;
    height:400px;
    object-fit:contain;
    margin-bottom:10px;
}

.cert-card h3{
    font-size:14px;
    color:#1e3a8a;
}

.cert-card h2{
    font-size:10px;
}

/* Animation */
@keyframes scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* หยุดเมื่อเอาเมาส์วาง */
.cert-track:hover{
    animation-play-state: paused;
}
/*--------------------------*/

/*-----------------------about------------------------*/

.about-company{
    padding:80px 3%;
    background:#ffffff;
}

.about-company h2{
    text-align:center;
    font-size:32px;
    margin-bottom:10px;
}

.section-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:50px;
}

.about-grid{
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    gap:30px;
}

.about-card{
    background:#f9fafc;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s ease;
}

.about-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.about-card h3{
    margin-bottom:15px;
    color:#1e3a8a;
}

.about-card p{
    color:#555;
    line-height:1.7;
}

.about-card ul{
    padding-left:20px;
    color:#555;
    line-height:1.8;
}

.mission-card{
    padding:0;
    overflow:hidden;
}

.mission-content{
    display:flex;
    align-items:top;
}

.mission-image{
    width:50%;
}

.mission-image img{
    width:80%;
    /*height:90%;*/
    object-fit:cover;
}

.mission-text{
    width:50%;
    padding:5px;
}

.mission-text h3{
    margin-bottom:15px;
    color:#1e3a8a;
}

.mission-text ul{
    padding-left:20px;
    line-height:1.8;
}

.profile-intro{
    margin-bottom:25px;
    color:#555;
    line-height:1.6;
}

.sub-branches{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
}

.sub-branch-card{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
    transition:0.3s ease;
}

.sub-branch-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.sub-branch-card h4{
    margin-bottom:10px;
    color:#1e3a8a;
}

.sub-branch-card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* รูปด้านบน */
.branch-image{
    width:100%;
    height:150px;
    overflow:hidden;
}

.branch-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s ease;
}

.sub-branch-card:hover .branch-image img{
    transform:scale(1.08);
}

.branch-details{
    margin-top:15px;
    border-top:1px solid #eee;
    padding-top:15px;
}

.detail-item{
    display:grid;
    grid-template-columns: 140px 1fr;  /* คอลัมน์ซ้ายคงที่ ขวายืด */
    gap:10px;
    margin-bottom:10px;
    font-size:14px;
}

.detail-item .label{
    color:#777;
}

.detail-item .value{
    font-weight:600;
    color:#1e3a8a;
    word-break:break-word;
}

.history-card{
    height:450px;              /* กำหนดความสูง */
    display:flex;
    flex-direction:column;
}

.history-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:1px;
    height:90%;
    flex:1;
}

/* แต่ละสาขา */
.history-branch{
    background:#f9fafc;
    padding:20px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.history-branch h4{
    margin-bottom:15px;
    color:#1e3a8a;
}

/* พื้นที่ timeline scroll */
.history-timeline{
    overflow-y:auto;
    padding-right:10px;
}

/* timeline item */
.history-item{
    position:relative;
    padding-left:25px;
    margin-bottom:20px;
    border-left:2px solid #1e3a8a;
}

.history-item .year{
    font-weight:700;
    color:#1e3a8a;
    display:block;
    margin-bottom:5px;
}

.history-item p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/*---------------poduct---------------*/

.products-tab{
    padding:100px 20px;
    background-image: linear-gradient(to bottom right, blue, white);
}

.products-tab h2{
    text-align:center;
    margin-bottom:20px;
}

.products-tab h3{
    color:white;
}

.products-tab p{
    color:white;
}

.tab-menu{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:40px;
    flex-wrap:wrap;
}

.tab-btn{
    padding:12px 25px;
    border:none;
    background:#e5e7eb;
    cursor:pointer;
    border-radius:30px;
    transition:0.3s;
    font-weight:500;
}

.tab-btn.active{
    background:#1e3a8a;
    color:white;
}

.tab-btn:hover{
    background:#c7d2fe;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

.tab-layout{
    display:flex;
    align-items:center;
    gap:50px;
}

.tab-text{
    flex:1;
}

.tab-text h3{
    margin-bottom:15px;
    color:#1e3a8a;
}

.tab-text ul{
    padding-left:20px;
    line-height:1.8;
}

.tab-image{
    flex:1;
}

.tab-image img{
    width:100%;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}


/* ===== Product A Gallery ===== */

/* ===== Product A Layout ใหม่ ===== */

.product-a-gallery{
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding-bottom:25px;
}

.product-item{
    min-width:260px;
    background:white;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    overflow:hidden;
    transition:0.3s;
}

.product-item:hover{
    transform:translateY(6px);
}

.product-info{
    padding:15px;
}

.product-info h4{
    margin-bottom:5px;
    color:#1e3a8a;
}

.product-info p{
    font-size:14px;
    color:#555;
}

.product-item img{
    width:100%;
    height:180px;
    object-fit:cover;
}

/* scrollbar สวย ๆ */
.product-a-gallery::-webkit-scrollbar{
    height:6px;
}
.product-a-gallery::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:10px;
}


/* ===== Product B C D Layout ===== */

.product-two-card{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.product-detail-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:white;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s;
}

.product-detail-card:hover{
    transform:translateY(-6px);
}

.card-image{
}

.card-image img{
    height:200px;
    border-radius:12px;
    object-fit:cover;
}

.card-text{
    flex:1;
}

.card-text h3{
    margin-bottom:10px;
    color:#1e3a8a;
}

.card-text p{
    margin-bottom:10px;
    color:#555;
}

.card-text ul{
    padding-left:18px;
    line-height:1.8;
}


/*---------------endpoduct---------------*/

/*---------------process---------------*/

.process-section{
padding:80px 0;
background:#f5f7fb;
text-align:center;
}

.process-flow{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.process-card{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
text-align:center;
position:relative;
transition:0.3s;
}

.process-card:hover{
transform:translateY(-5px);
}

.process-number{
position:absolute;
top:-15px;
left:50%;
transform:translateX(-50%);
width:200px;
height:40px;
background:#1e3a8a;
color:white;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

.process-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:8px;
margin-top:10px;
}

.process-card h3{
margin-top:15px;
color:#1e3a8a;
}

.process-card p{
font-size:14px;
color:#555;
margin-top:10px;
}

/*---------------endprocess---------------*/



/*-------------topics-------------*/
/* ===== topics Grid Layout ===== */

#all-topics{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    margin-top:40px;
}

#home-topics{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    margin-top:40px;
}

.topics-container{
    padding:80px 10%;
    text-align:center;
    color: white;
    overflow:hidden;
    background-image: linear-gradient(blue, white);
}

.topics-container h2{
    margin-bottom:40px;
    font-size:32px;
}

.topics-container a {
     text-decoration: none;
     color: #333;
     font-weight: 500;
     transition: 0.3s;
     font-size:16px;
}

.more-btn{
    padding:10px 20px;
    border:none;
    background:#e5e7eb;
    cursor:pointer;
    border-radius:30px;
    transition:0.3s;
    font-weight:500;
}

.more-btn.active{
    background:#1e3a8a;
    color:white;
}

.more-btn:hover{
    background:#c7d2fe;
}


.topics-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s;
    display:flex;
    flex-direction:column;
}

.topics-card:hover{
    transform:translateY(-6px);
}

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

.topics-card h3{
    padding:15px 15px 5px 15px;
    color:#1e3a8a;
}

.topics-card p{
    padding:0 15px 20px 15px;
    font-size:14px;
    color:#555;
}

/*-----------------------------------------------*/




/*-------------Activities-------------*/
/* ===== Activities Grid Layout ===== */

#all-activities{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    margin-top:40px;
}

#home-activities{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    margin-top:40px;
}

.activities-container{
    padding:80px 10%;
    text-align:center;
    overflow:hidden;
    background-image: linear-gradient(white, blue);
}

.activities-container h2{
    margin-bottom:40px;
    font-size:32px;
}

.activities-container a {
     text-decoration: none;
     color: #333;
     font-weight: 500;
     transition: 0.3s;
     font-size:16px;
}

.more-btn{
    padding:10px 20px;
    border:none;
    background:#e5e7eb;
    cursor:pointer;
    border-radius:30px;
    transition:0.3s;
    font-weight:500;
}

.more-btn.active{
    background:#1e3a8a;
    color:white;
}

.more-btn:hover{
    background:#c7d2fe;
}


.activity-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s;
    display:flex;
    flex-direction:column;
}

.activity-card:hover{
    transform:translateY(-6px);
}

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

.activity-card h3{
    padding:15px 15px 5px 15px;
    color:#1e3a8a;
}

.activity-card p{
    padding:0 15px 20px 15px;
    font-size:14px;
    color:#555;
}

/* ===== Modal ===== */

/* ===== GLOBAL MODAL ===== */

.modal{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    padding:100px 5px;
    overflow:auto;
}

.modal-content{
    background:white;
    width:100%;
    max-width:850px;
    max-height:70vh;
    margin:auto;
    padding:5px;
    border-radius:15px;
    position:relative;
    overflow-y:auto;
}

/* ปุ่มปิด */

.modal-close{
    position:absolute;
    right:20px;
    top:15px;
    font-size:24px;
    cursor:pointer;
}

.modal-close-btn{
    background:#1e3a8a;
    color:white;
    border:none;
    padding:10px 30px;
    border-radius:25px;
    cursor:pointer;
    font-size:14px;
    transition:0.3s;
}

.modal-footer{
    text-align:center;
    margin-top:25px;
}

.modal-close-btn:hover{
    background:#162c63;
}

/* รูปใน modal */

.modal-images{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.modal-images img{
    width:100%;
    border-radius:5px;
}


/*-------------endModel-------------------*/

/* GLOBAL */

.global-section{
padding:80px 10%;
background:#f5f7fb;
}

.country-tabs{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:40px;
flex-wrap:wrap;
}

.country-btn{
padding:10px 20px;
border:none;
background:#e5e7eb;
border-radius:30px;
cursor:pointer;
transition:0.3s;
}

.country-btn.active{
background:#1e3a8a;
color:white;
}

.global-card{
display:flex;
gap:20px;
background:white;
border-radius:12px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
margin-bottom:30px;
}

.global-card img{
width:250px;
height:180px;
object-fit:cover;
border-radius:10px;
}

.global-info{
flex:1;
}

.global-info h3{
color:#1e3a8a;
margin-bottom:10px;
}

.global-info p{
margin-bottom:15px;
color:#555;
}

.map-container iframe{
width:100%;
height:200px;
border:0;
border-radius:10px;
}

.branch-card{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;

  border:1px solid #ddd;
  padding:20px;
  margin:20px 0;
  border-radius:10px;
  align-items:center;
}

/* รูป */
.global-branch-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:8px;
}

/* google map */
.branch-map iframe{
  width:100%;
  height:180px;
  border:0;
  border-radius:8px;
}

/* ข้อมูล */
.branch-info h3{
  margin:0;
  font-size:20px;
}

.branch-info p{
  margin-top:10px;
  color:#555;
}

/*----------floating-menu-----------*/

.floating-menu{
position:fixed;
bottom:25px;
left:25px;
z-index:999;
}

.floating-toggle{
width:55px;
height:55px;
border-radius:50%;
background:#1e3a8a;
color:white;
border:none;
font-size:24px;
cursor:pointer;
box-shadow:0 6px 15px rgba(0,0,0,0.2);
}

.floating-items{
display:none;
flex-direction:column;
margin-bottom:10px;
}

.floating-items a{
background:white;
padding:8px 14px;
margin-bottom:8px;
border-radius:20px;
text-decoration:none;
color:#333;
font-size:13px;
box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.floating-items a:hover{
background:#1e3a8a;
color:white;
}


/*-------------cookie--------------------*/

.cookie-banner{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#1e293b;
color:white;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
z-index:9999;
}

.cookie-banner p{
margin:0;
font-size:14px;
}

.cookie-banner a{
color:#38bdf8;
text-decoration:none;
}

.cookie-buttons{
display:flex;
gap:10px;
}

.cookie-buttons button{
border:none;
padding:8px 18px;
border-radius:5px;
cursor:pointer;
}

#accept-cookie{
background:#22c55e;
color:white;
}

#reject-cookie{
background:#ef4444;
color:white;
}



/*-----------------------------------------------*/

@media(max-width: 768px){
    .hero h2 {
     font-size: 32px;
            }

    nav{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:20px 0;
        display:none;
        box-shadow:0 5px 10px rgba(0,0,0,0.1);
    }

    nav.active{
        display:flex;
    }
    .menu-toggle{
        display:block;
    }

    .logo-area img{
        height:40px;
    }

    .company-name h1{
        font-size:12px;
    }

    .company-name span{
        font-size:12px;
    }

    .branch-card{
        flex-direction:column;
    }

    .branch-card img{
        width:100%;
        height:200px;
    }

    .about-grid{
        grid-template-columns: 1fr;
    }

    .mission-content{
        flex-direction:column;
    }

    .mission-image,
    .mission-text{
        width:100%;
    }

    .mission-image img{
        height:100%;
    }

    .sub-branches{
        grid-template-columns:1fr;
    }

    .detail-item{
        grid-template-columns: 1fr; /* เรียงบนลงล่าง */
    }

    .detail-item .label{
        font-weight:600;
    }

    .history-columns{
        grid-template-columns:1fr;
    }

    .history-card{
        height:750px;
    }

    .history-timeline{
        max-height:250px;
    }

    .tab-layout{
        flex-direction:column;
    }

    .product-detail-card{
        flex-direction:column;
    }

    #all-activities{
        grid-template-columns: 1fr;
    }

    #home-activities{
        grid-template-columns: 1fr;
    }

    #all-topics{
        grid-template-columns: 1fr;
    }

    #home-topics{
        grid-template-columns: 1fr;
    }

   .global-card{
   flex-direction:column;
   }

   .global-card img{
   width:100%;
   height:200px;
   }

   .branch-card{
    grid-template-columns: 1fr; /* เปลี่ยนเป็น 1 column */
    }

    .branch-image img,
    .branch-map iframe{
     height:180px;
    }

.process-flow{
grid-template-columns:1fr;
}

.process-card{
text-align:left;
}

}