/* 1. Global Variables & Reset */
:root {
    --video-bg-color: #ffffff; /* ปรับสีพื้นหลังวิดีโอตรงนี้ */
    --section-padding: 60px 0;
    --primary-color: #3498db;
    --dark-color: #cc0000;
}

/* เจาะจงเฉพาะตัวเลขราคาขาย */
#display-sale-price {
    font-family: impact, "Trebuchet MS", arial, sans-serif;
    font-size: 22px;       /* ปรับขนาดให้ใหญ่สะดุดตา */
    color: #cc0000;       /* สีแดงสดตามธีมของคุณ */
    letter-spacing: 1px;  /* เพิ่มระยะห่างตัวอักษรให้ดูอ่านง่ายขึ้นในฟอนต์ Impact */
    font-weight: normal;  /* Impact หนาอยู่แล้ว ไม่ต้องใส่ bold เพิ่ม */
}

/* เพิ่มเติม: ถ้าต้องการให้หน่วย "บาท" ด้านหลังเป็นฟอนต์ปกติ */
.sale-price {
    font-size: 1.1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    background-color: #ffffff;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Banner Section */
.banner {
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
                url('https://via.placeholder.com') no-repeat center center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.banner h1 { font-size: 3rem; margin-bottom: 10px; }

.logo img {
    height: 50px;           /* ปรับขนาดโลโก้ให้พอดีกับแถวเมนู */
    width: auto;
    display: block;
}

/* 1.1 Main Menu Container */
.main-menu {
    background: var(--dark-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 5px 0;
    width: 100%;
}

/* --- 1. จัดโครงสร้างหลัก (Desktop & Mobile) --- */
.nav-wrapper {
    display: flex;
    justify-content: space-between; /* ล็อก Logo ซ้าย - เมนู/Toggle ขวา */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    height: 70px;
    position: relative;
}
/* จัดเมนูและช่องค้นหาให้รวมกันอยู่กึ่งกลาง */
.nav-list {
    display: flex;
    justify-content: center; /* กึ่งกลางแนวนอน */
    align-items: center;     /* กึ่งกลางแนวตั้ง */
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    flex-wrap: wrap;         /* ถ้ายาวเกินให้ขึ้นบรรทัดใหม่ได้ */
}

.nav-list > li {
    display: flex;
    align-items: center;
}

.nav-list a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: block;
}

.nav-list a:hover {
    color: var(--primary-color);
}
/* active สีเมนูเมื่ออยู่ในหน้านั้นๆ */
.nav-list a.active, 
.nav-list li.active > a {
    color: var(--primary-color) !important; /* หรือสีเหลือง/ทองตามดีไซน์ */
    font-weight: bold;
}
/* เมื่อตัวลูก active ให้ตัวพ่อที่เป็น li ติดสีด้วย */
.nav-list li.open > a, 
.nav-list li.active > a,
.nav-list a.active {
    color: #FFFFFF !important; /* สีแดงหลัก */
    font-weight: bold;
}
    .nav-list li.open > .submenu, 
    .nav-list li.open > .grandchild-menu {
        display: block !important; /* สั่งให้แสดงผล */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
/* 1.4 ปุ่ม Toggle สำหรับมือถือ (ซ่อนในหน้าจอคอม) */
.menu-toggle {
    display: none; /* ซ่อนใน PC */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
}
.menu-toggle .bar {
    width: 30px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
    transform-origin: center;
}
/* เอฟเฟกต์หมุนเป็น X ให้เป๊ะกึ่งกลาง */
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* 2.1 Submenu (เมนูชั้นที่ 2) */
.has-submenu {
    position: relative;
}

.nav-list .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background-color: var(--dark-color);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    border-top: 3px solid var(--primary-color); /* เส้นสีหลักด้านบนเพิ่มความพรีเมียม */
    
    /* เอฟเฟกต์การซ่อนแบบสมบูรณ์ */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 999;
}

/* แสดง Submenu เมื่อ Hover */
.has-submenu:hover > .submenu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2.2 รายการใน Submenu */
.submenu li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.submenu li:last-child {
    border-bottom: none;
}

.submenu li a {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.submenu li a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
    padding-left: 25px; /* เอฟเฟกต์ดันไปทางขวา */
}

/* 2.3 Grandchild Menu (เมนูชั้นที่ 3) */
.has-grandchild {
    position: relative;
}

.grandchild-menu {
    position: absolute;
    top: -10px; /* ให้หัวแถวตรงกับรายการที่ชี้ */
    left: 100%; /* เด้งออกไปทางขวา */
    min-width: 230px;
    background-color: var(--dark-color);
    list-style: none;
    padding: 10px 0;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.3);
    border-left: 1px solid rgba(255,255,255,0.1);
    
    /* การซ่อนชั้นที่ 3 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: all 0.3s ease;
}

/* แสดง Grandchild เมื่อ Hover */
.has-grandchild:hover > .grandchild-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* --- ตั้งค่าลูกศรพื้นฐาน --- */
.arrow {
    display: inline-block;
    font-size: 9px;            /* ลดขนาดลงเล็กน้อยเพื่อให้ดูแพงและไม่เด่นกว่าชื่อสินค้า */
    margin-left: 6px;          /* ปรับระยะห่างให้พอดี ไม่ห่างเกินไป */
    vertical-align: 1px;       /* ปรับยกตัวลูกศรขึ้นเล็กน้อยเพื่อให้กึ่งกลางบรรทัดพอดี */
    
    /* ความเข้มของสีลูกศร */
    color: inherit;            /* ให้ใช้สีเดียวกับตัวอักษรเมนู */
    opacity: 0.6;              /* ปรับให้จางลง 40% เพื่อให้ชื่อสินค้าดูเด่นกว่า */
    
    transition: all 0.3s ease; /* ให้ทั้งสีและองศาหมุนนุ่มนวล */
    transform: rotate(90deg);  /* เริ่มต้นชี้ลง */
}
/* --- เมื่อเอาเมาส์วาง (Hover) หรือเมนู Active --- */
.has-submenu:hover > a .arrow,
.has-grandchild:hover > a .arrow,
.nav-list li.active > a .arrow {
    opacity: 1;                /* กลับมาเข้ม 100% เมื่อใช้งาน */
    transform: rotate(-90deg); /* พลิกชี้ขึ้น */
    color: var(--primary-color); /* เปลี่ยนเป็นสีแดง/สีธีมหลัก */
}

/* ปรับแต่งสำหรับเมนูชั้นที่ 2 (Submenu) ให้ลูกศรเล็กลงอีกนิดเพื่อแยกชั้น */
.submenu .arrow {
    font-size: 8px;
    margin-left: 4px;
}
.arrow-right {
    display: inline-block;
    font-size: 8px;            /* เล็กกว่าชั้นแรกเล็กน้อยเพื่อแยกลำดับชั้น */
    margin-left: auto;         /* ดันไปทางขวาสุดของแถว */
    opacity: 0.5;              /* จางลงเพื่อให้ชื่อเมนูเด่น */
    transition: all 0.3s ease;
    transform: rotate(0deg);   /* ค่าเริ่มต้นคือชี้ไปทางขวาตามรูป ▶ */
    vertical-align: middle;
}

/* เมื่อ Hover เมนูชั้นที่ 2 ให้ลูกศรเด่นขึ้นและขยับเล็กน้อย */
.has-grandchild:hover > a .arrow-right {
    opacity: 1;
    color: var(--primary-color);
    transform: translateX(3px); /* ขยับไปทางขวา 3px แทนการหมุน */
}
/* 4. Service Section */
.services { padding: 50px 0; background: white; text-align: center; }

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

.service-item {
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: 0.3s;
}

.service-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* 5. Product Sections & Tables */
.product-section { padding: var(--section-padding); }

h2 { text-align: center; margin-bottom: 40px; position: relative; }
h2::after { content: ''; width: 50px; height: 3px; background: var(--primary-color); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-top: 20px;
}

th, td { padding: 15px; border-bottom: 1px solid #ddd; text-align: center; }
th { background: var(--primary-color); color: white; }

.prod-img { width: 80px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.prod-img:hover { transform: scale(1.1); }

/* กล่องหุ้มวิดีโอเพื่อรักษาAspectRatio 16:9 */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* อัตราส่วน 16:9 (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
    border-radius: 8px; /* เพิ่มความโค้งมนให้สวยงาม */
}

/* บังคับให้ iframe ยืดเต็มกล่องหุ้ม */
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* หากคุณต้องการให้วิดีโอกว้างไม่เกิน 900px (เท่ารูปภาพหลัก) */
.desc-content .video-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 6. Video Section  (แก้ไขจุดที่ทับซ้อนแล้ว) */
.video-section { 
    padding: var(--section-padding); 
    background-color: var(--video-bg-color); 
    text-align: center; 
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.video-card {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    transition: 0.3s;
}

.video-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.video-item {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.video-item iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: none;
}

.video-title {
    margin-top: 15px;
    font-weight: bold;
    font-size: 1rem;
    color: #444;
}

/* 7. Footer */
.main-footer {
    background: var(--dark-color);
    color: white;
    padding: 40px 0;
    text-align: center;
}

.social-links a { color: var(--primary-color); margin: 0 10px; text-decoration: none; }

.bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    position: absolute; /* บังคับตำแหน่ง */
    left: 0;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}

/* จัดตำแหน่งเริ่มต้นของ 3 เส้น */
.bar:nth-child(1) { top: 5px; }  /* เส้นบน */
.bar:nth-child(2) { top: 14px; } /* เส้นกลาง */
.bar:nth-child(3) { top: 23px; } /* เส้นล่าง */

/* --- Banner Slide Styles --- */
.banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.slider-wrapper {
    display: flex; /* บังคับให้ภาพเรียงแนวนอน */
    width: 100%;
    overflow-x: hidden; /* เปลี่ยนจาก auto เป็น hidden เพื่อซ่อนแถบเลื่อนด้านล่าง */
    scroll-snap-type: x mandatory; /* ให้ภาพล็อคกึ่งกลางอัตโนมัติ */
    scroll-behavior: smooth; /* สำคัญมาก: ทำให้การเลื่อนดูนุ่มนวล */
    -webkit-overflow-scrolling: touch; /* ให้สไลด์ลื่นบนมือถือ */
}

.slider-wrapper::-webkit-scrollbar {
    display: none; /* ซ่อนแถบเลื่อน Chrome/Safari */
}

.slide {
    flex: 0 0 100%; /* บังคับให้แต่ละสไลด์กว้างเท่ากับหน้าจอพอดี ไม่ล้น */
    width: 100%;
    position: relative; /* เพิ่มบรรทัดนี้ เพื่อให้ข้อความเกาะอยู่กับสไลด์ของตัวเอง */
    scroll-snap-align: start;
    transition: transform 0.5s ease-in-out; /* เพิ่มความสมูทของตัวสไลด์ */
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ปรับตำแหน่งข้อความให้อยู่ในแต่ละแผ่น ไม่ใช่ลอยทับกัน */
.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 80%;
    z-index: 10;
    /* ลบพวก opacity หรือการซ่อนอื่นๆ ออกก่อนเพื่อให้มันเลื่อนตามภาพ */
}

/* ตกแต่งตัวอักษรให้ชัดเจนขึ้น */
.slide-text h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    margin-bottom: 10px;
}

.slide-text h2::after { display: none; } /* ปิดเส้นใต้ H2 เดิมถ้าไม่ต้องการ */

.slide-text p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
/* จุดนำทาง (Dots) */
.slider-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

/* สีปกติของจุด */
.slider-nav a {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4); /* สีขาวจางๆ */
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.slider-nav a:hover {
    background-color: #fff;
    transform: scale(1.2);
}
/* สีของจุดเมื่อภาพนั้นกำลังแสดงอยู่ (Active) */
.slider-nav a.active {
    background-color: #cc0000; /* สีแดงเดียวกับเมนูของคุณ */
    transform: scale(1.3);      /* ขยายขนาดเล็กน้อย */
    border: 2px solid #ffffff;  /* เพิ่มขอบขาวให้เด่น */
}
/* ตกแต่งช่องค้นหา (Search Item) */
.search-item {
    margin-left: 4px; /* เว้นระยะห่างจากเมนูสุดท้ายเล็กน้อย */
}

.search-form, .input-group-search {
    border-radius: 4px !important; /* บังคับเป็นขอบมนเหลี่ยม */
    background: #ffffff !important; /* บังคับพื้นหลังขาวทึบ */
   /* width: 100% !important; */
    max-width: 100%; /* จำกัดความกว้างบน PC */
    border: 1px solid #ccc !important;
    padding: 1 5px !important;
    display: flex !important;
}

.input-group-search input {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #333 !important;
    padding: 5px 10px !important;
}

/* จัดไอคอนแว่นขยายให้อยู่ในกล่องเดียวกับ input */
.input-group-search button {
    background: transparent !important;
    border: none !important;
    padding: 0 10px !important;
    color: #666 !important;
}

.input-group-search button:hover {
    color: var(--primary-color);
}

/* ซ่อน Banner Slide เฉพาะบนมือถือ */
@media (max-width: 767px) {
    .banner-slider {
        display: none !important; /* สั่งปิดการแสดงผลทั้งหมดของส่วนสไลด์ */
    }
}

/* แสดงผลปกติบน Tablet (768px ขึ้นไป) และ PC */
@media (min-width: 1024px) {
    .banner-slider {
        display: block;
    }
}

/* --- 1. Desktop Style (เฉพาะจอใหญ่กว่า 1024px) --- */
@media (min-width: 1025px) {
    .nav-list .submenu, 
    .nav-list .grandchild-menu {
        position: absolute;
        display: none; /* ใช้ display แทน opacity เพื่อตัดปัญหาเมนูหาย */
        background-color: var(--dark-color);
        min-width: 220px;
        z-index: 9999;
    }

    /* กางออกเมื่อ Hover เท่านั้น */
    .has-submenu:hover > .submenu { display: block !important; }
    .has-grandchild:hover > .grandchild-menu { display: block !important; left: 100%; top: 0; }
    
    .submenu-btn { display: none; } /* ซ่อนปุ่มลูกศรบนคอม */
}
/* เพิ่มขีดล่างสำหรับเมนูหลักที่ Active */
@media (min-width: 1025px) {
    .nav-list > li {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* เส้นใต้สำหรับเมนูที่ Active */
    .nav-list > li.active > a::after {
        content: '';
        display: block;
        width: 80%; /* ให้สั้นกว่าตัวอักษรนิดหน่อยเพื่อความสวยงาม */
        height: 2px;
        background: var(--primary-color);
        position: absolute;
        bottom: 5px;
        left: 10%; /* จัดให้อยู่กึ่งกลางตัวอักษร */
        transition: 0.3s;
    }
}
@media (max-width: 1024px) {
        html, body {
        overflow-x: hidden !important; /* ห้ามมีแถบเลื่อนแนวนอนเด็ดขาด */
        position: relative;
        width: 100%;
    }
    /* 1. ล็อก Body แบบไม่ใช้ Fixed (ป้องกันหน้าจอแข็ง) */
    body.menu-open {
        overflow: hidden !important;
        height: 100vh;
        /* เอา position: fixed ออกจาก body */
    }

    /* 2. ดันเนื้อหาเว็บลงมา */
    body { padding-top: 70px !important; }

    /* 3. แถบ Header สีดำ (ปักหมุด) */
    .main-menu {
        position: fixed !important;
        top: 0; left: 0; width: 100%;
        height: 70px;
        background-color: var(--dark-color);
        z-index: 10001;
    }

    /* 4. เมนูสีแดง (ตัวที่มีปัญหา Scroll) */
    .nav-list {
        display: block !important;
        visibility: hidden; /* ใช้ความว่างเปล่าซ่อนแทน display:none */
        opacity: 0;
        position: fixed !important;
        top: 70px;
        left: 0 !important;
        transform: none !important;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: calc(100vh - 70px);
        background-color: #cc0000 !important;
        z-index: 9999;

        /* แก้จุดตาย: บังคับให้พื้นที่นี้ไถได้เสมอ */
        overflow-y: auto !important;
        overflow-x: hidden !important; /* ล็อกในชั้นเมนูอีกที */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px;
        transition: opacity 0.3s ease;
    }

    /* เมื่อกดปุ่ม Hamburger ให้โผล่มา */
    .nav-list.active {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 5. เมนูย่อย (ต้องดันเนื้อหาลงข้างล่าง) */
    .submenu, .grandchild-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        height: auto !important;
        background-color: rgba(0,0,0,0.1) !important;
        left: 0 !important;          
        transform: none !important;  
        -webkit-transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .has-submenu:hover > .submenu,
    .has-grandchild:hover > .grandchild-menu {
        display: none !important; 
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* สั่งให้เมนูย่อยกางออกเฉพาะเมื่อมีคลาส .open (จากการคลิก) เท่านั้น */
    li.open > .submenu, 
    li.open > .grandchild-menu {
        display: block !important;
        position: static !important; /* ดันเนื้อหาลงล่าง ไม่ลอยทับ */
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
        /* --- 2. ตกแต่งสีพื้นหลังแยกตามระดับชั้น --- */
    .submenu { background-color: #b30000 !important; }
    .grandchild-menu { background-color: #990000 !important; }
    

    /* รายการเมนูหลัก (ชั้นที่ 1) */
    .nav-list li {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        position: relative; /* สำคัญ: เพื่อให้ปุ่มลูกศรมาเกาะขวาสุดได้ */
        clear: both; /* ป้องกันการไหลทับกัน */
    }

    /* ตกแต่งลิงก์เมนู (Links Styling) */
    .nav-list li a, 
    .submenu li a, 
    .grandchild-menu li a {
        color: #ffffff !important;
        text-decoration: none;
         display: block !important; /* ให้ลิงก์เป็นบล็อกเต็มแถว */
        align-items: center;
        width: 100%;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background-color: transparent !important;
        text-align: left;
    }
        /* การเยื้องระดับชั้น (Indentation) */
    .submenu li a { padding-left: 40px !important; }
    .grandchild-menu li a { padding-left: 65px !important; }

    .logo { order: 1; }
    .menu-toggle { display: flex !important; order: 2; }

    /* ระดับชั้นที่ 3 (สีแดงเข้มที่สุด) */
    .grandchild-menu { 
        background-color: #990000 !important; 
    }

    /* การเยื้องระดับชั้น (Indentation) */
    .submenu li a { padding-left: 40px !important; }
    .grandchild-menu li a { padding-left: 65px !important; }

    /* ปุ่มกดกางเมนู (ลูกศรขวา) */
    .submenu-btn {
        position: absolute;
        right: 0 !important;
        top: 0 !important;
        width: 60px !important;
        height: 52px !important; /* สูงเท่าแถวเมนูพอดี */
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        border-left: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        z-index: 10;
        background: transparent;
    }

    /* ลูกศรหมุนเมื่อเปิด (Rotate Arrow) */
    li.open > .submenu-btn .arrow,
    .has-submenu.open > a .arrow,
    .has-grandchild.open > a .arrow {
        transform: rotate(-90deg) !important; /* พลิกชี้ขึ้น */
        color: #ffffff;
        opacity: 1;
    }
    /* แก้ไขลูกศรซ้อน: ซ่อนลูกศรตกแต่งเดิม และใช้ตัวในปุ่มเท่านั้น */
    .arrow-right, 
    .nav-list a .arrow { display: none !important; } 

    .submenu-btn .arrow {
        display: inline-block !important;
        font-size: 10px;
        opacity: 0.8;
        transform: rotate(90deg) !important; /* เริ่มต้นชี้ลง */
        transition: transform 0.3s ease;
    }

    /* เมื่อกางออก ให้ลูกศรในปุ่มหมุนชี้ขึ้น */
    li.open > .submenu-btn .arrow {
        transform: rotate(-90deg) !important;
        opacity: 1;
    }

    .search-item {
        width: 100%;
        padding: 15px 20px; 
        background-color: #cc0000;
        box-sizing: border-box;
    }
    .input-group-search {
        width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        border: none;
    }
    .input-group-search input {
        color: #333 !important; /* ตัวหนังสือสีเข้มอ่านง่าย */
        padding: 10px;
        width: 100%;
        border: none;
    }

}
/* --- Back to Top Button --- */
#backToTop {
    display: none; /* ซ่อนไว้เริ่มต้น */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 50px;
    height: 50px;
    background-color: #cc0000; /* สีแดงเดียวกับเมนู */
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

#backToTop:hover {
    background-color: #ff0000;
    transform: translateY(-5px);
    /* เอฟเฟกต์เรืองแสง Glow */
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.6);
}

.arrow-up {
    line-height: 1;
    margin-bottom: 2px; /* ขยับลูกศรให้ดูอยู่กลางวงกลมพอดี */
}

/* ปรับตำแหน่งสำหรับมือถือเพื่อไม่ให้ทับปุ่มอื่น */
@media (max-width: 1024px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}


/* --- Error 404 Page Styles --- */
.error-container { text-align: center; padding: 100px 20px; background: #fff; }
.error-code { font-size: 100px; font-weight: bold; color: #cc0000; line-height: 1; }
.error-text { font-size: 24px; color: #333; margin-bottom: 20px; }
.btn-home { background: #cc0000; color: #fff; padding: 12px 30px; border-radius: 25px; text-decoration: none; display: inline-block; transition: 0.3s; }
.btn-home:hover { background: #333; color: #fff; }
.search-box-404 { max-width: 400px; margin: 30px auto; }