/* =========================================
           ตั้งค่าพื้นฐาน
           ========================================= */
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Prompt', sans-serif;
            background-color: #ffffff; /* ใช้พื้นหลังขาวเพื่อให้กลืนกับขอบรูปล่าง */
            color: #333;
            scroll-behavior: smooth;
            line-height: 1.5;
        }
        
        * { box-sizing: border-box; }

        /* =========================================
           ส่วนรูปพื้นหลังหน้าแรก (Hero Background)
           ========================================= */
        .hero-bg {
            position: absolute;
            top: 0;           /* ชนขอบบนสุดของจอ */
            left: 50%;
            transform: translateX(-50%); /* จัดให้อยู่กึ่งกลางจอ */
            width: 100%;
            max-width: 1100px; 
            height: 50vh;      /* ความสูงของรูปภาพ */
            z-index: 0;       /* ดันไปไว้เลเยอร์หลังสุด */
            
            /* เทคนิคไล่สีขาวที่ขอบบน (ให้โลโก้อ่านชัด) และขอบล่าง (ให้กลืนกับหน้าเว็บ) */
            background-image: 
                linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 100%), 
                url('../pic/1.jpg');
            background-size: cover;
            background-position: center top;
        }

        /* =========================================
           ส่วนหัว: โลโก้บนสุด และ Navigator
           ========================================= */
        header {
            width: 100%;
            position: relative; /* 🟢 เพิ่มบรรทัดนี้ */
            z-index: 10;        /* 🟢 เพิ่มบรรทัดนี้ */
            background: transparent; /* โปร่งใสเพื่อให้เห็นรูปพื้นหลังด้านล่าง */
        }

        .top-logo-area {
            text-align: center;
            padding: 20px 0 10px 0;
            
        }

        .logo-text {
            text-decoration: none;
            color: #ffffff;
            font-weight: bold;
            font-size: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }

        .logo-text span:first-child { font-size: 24px; }
        .logo-text span:last-child { font-size: 14px; letter-spacing: 2px; }

        .top-actions {
            position: absolute;
            top: 15px;
            right: 40px;
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 1100;
        }

        /* สไตล์ปุ่มกด Dropdown */
        .lang-dropdown {
            position: relative;
            display: inline-block;
        }

        .lang-dropbtn {
            background-color: rgba(255, 255, 255, 0.9);
            color: #333;
            padding: 4px 6px;
            font-size: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            font-family: inherit;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background 0.3s;
        }

        .lang-dropbtn:hover { background-color: #f9f9f9; }

        /* สไตล์กล่องรายการภาษาที่จะหล่นลงมา */
        .lang-dropdown-content {
            display: none;
            position: absolute;
            right: 0; /* ให้กล่องขยายไปทางซ้าย ไม่ล้นจอ */
            background-color: #ffffff;
            min-width: 130px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
            border-radius: 5px;
            overflow: hidden;
            z-index: 1;
        }

        /* สไตล์ลิงก์ภาษาแต่ละอัน */
        .lang-dropdown-content a {
            color: #333;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            transition: background 0.3s;
        }

        .lang-dropdown-content a:hover {
            background-color: #f1f1f1;
            color: #654000;
        }

        /* แสดง Dropdown เมื่อเอาเมาส์ชี้ที่กล่อง */
        .lang-dropdown:hover .lang-dropdown-content {
            display: block;
        }

        /* ปรับแต่งปุ่ม Login ให้เข้าชุดกัน */

        .login-btn:hover { background-color: #0d47a1; }
        .navbar {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1100px;
            margin: 0 auto;
            overflow: hidden;
            width: 100%;
            padding: 10px 20px;
            background-color: rgba(128, 128, 128, 0.4); 
            backdrop-filter: blur(5px); 
            -webkit-backdrop-filter: blur(5px);
            border-top: 1px solid rgba(0,0,0,0.05);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-menu {
            display: flex;
            gap: 25px;
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
            justify-content: center;
        }

        .nav-menu li a {
            text-decoration: none;
            color: #ffffff;
            font-size: 16px;
            font-weight: 500;
            text-shadow: #1a1a1a 0px 0px 3px;
            transition: color 0.3s;
        }

        .nav-menu li a:hover { color: #654000; }

        .nav-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .lang-btn {
            background: #fff; border: 1px solid #ccc; padding: 4px 8px;
            border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px;
        }
        .login-btn {
            background-color: #1565c0; color: white; text-decoration: none;
            padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px;
        }

        /* =========================================
           ส่วนหน้าหลัก (Hero Section): ตัวหนังสือมุมขวา
           ========================================= */
        .hero-section {
            position: relative; /* 🟢 เพิ่มบรรทัดนี้ */
            z-index: 10;        /* 🟢 เพิ่มบรรทัดนี้ */
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            /* หักความสูงของ Header ออก เพื่อให้กล่องข้อความอยู่พอดีขอบล่างของภาพ */
            height: calc(50vh - 120px); 
            display: flex;
            justify-content: flex-end; /* จัดแนวนอนชิดขวา */
            align-items: flex-end;     /* จัดแนวตั้งชิดล่าง */
            padding-bottom: 50px;      /* ยกข้อความขึ้นมาจากขอบล่างนิดนึง */
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
        }

        .hero-text-content {
            margin-right: 60px; /* เว้นระยะจากขอบขวา */
            text-align: right;
            max-width: 600px;
        }

        .hero-text-content h1 {
            font-size: 3.2rem;
            margin: 0;
            color: #563700;
            font-weight: bold;
            line-height: 1.1;
        }

        .hero-text-content h2 {
            font-size: 1.6rem;
            margin: 10px 0;
            color: #333;
            font-weight: 400;
        }

        .hero-text-content p {
            font-size: 1.2rem;
            color: #444;
            margin: 0;
        }

        .page-section {
            background-color: #fff;
            max-width: 1100px;
            margin: 0 auto;
            padding: 60px 40px;
        }
        .page-section-rooms {
            background-color: #fff;
            max-width: 1100px;
            margin: 0 auto;
            padding: 60px 40px;
        }

        .img-placeholder {
            background-color: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .flex-row { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 20px; }
        .flex-col { flex: 1; min-width: 300px; }
        .text-center { text-align: center; }
        .mt-20 { margin-top: 20px; }
        .booking-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px; /* ขนาดช่องของแต่ละโลโก้ */
            height: 80px;
            transition: transform 0.3s ease;
            filter: grayscale(20%); /* ทำเป็นสีจางนิดๆ เพื่อความสวยงาม */
        }
        
        .booking-item:hover {
            transform: scale(1.1);
            filter: grayscale(0%);
        }

        .booking-item img {
            max-width: 100%;
            max-height: 100px; /* คุมความสูงโลโก้ให้เท่ากัน */
            object-fit: contain;
            filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
        }

        #rooms h2 {
                margin-top: -15px ;       
                margin-bottom: 40px ;
                font-size: 2.2rem ;
                color: #fff; 
                font-weight: bold;
            }
        #facilities h2 {
                margin-top: -15px ;       
                margin-bottom: 40px ;
                font-size: 2.2rem ;
                color: #654000; 
                font-weight: bold;
            }
        #breakfast h2 {
                margin: 0;
                margin-top: -30px ;       
                margin-bottom: 10px ;
                font-size: 2.2rem ;
                color: #654000; 
                font-weight: bold;
                letter-spacing: 1px;
            }
        #ev-station h2 {
                margin-top: -15px ;      
                margin-bottom: 0px ;
                font-size: 2.2rem ;
            }
        #location h2 {
                margin-top: -15px ;       
                margin-bottom: 40px ;
                font-size: 2.2rem ;
                color: #fff; 
                font-weight: bold
            }   
        #booking h2 {
                margin-top: -15px ;       
                margin-bottom: 10px ;
                font-size: 2.2rem ;
                color: #654000; 
                font-weight: bold;
                letter-spacing: 2px;
            }
        #contact { 
                padding: 5px 10px !important; 
        }
        #contact h2 {
                margin-top: 15px ;       
                margin-bottom: 0px ;
                font-size: 2.0rem ; 
                color: #fff; 
                font-weight: bold;
                letter-spacing: 2px;
        }
            
        #contact .flex-row {
                gap: 20px ;
        }

        @media (max-width: 768px) {
            .navbar { flex-direction: column; padding: 0px; }
            .nav-menu { flex-wrap: wrap; gap: 5px; margin: 5px 0; }
            .nav-menu li a {
            font-size: 11px;
            font-weight: 500;
            }
            .hero-bg { height: 60vh; }
            .hero-section { height: calc(60vh - 120px); justify-content: center; padding-bottom: 20px; }
            .hero-text-content { margin-right: 0; text-align: center; width: 100%; padding: 0 20px; }
            .hero-text-content h1 { font-size: 2.0rem; }
            .hero-text-content h2 { font-size: 1.0rem; }
            .page-section, .page-section-rooms { padding: 10px 10px !important; }
            .page-section h2, .page-section-rooms h2, #facilities h2, #ev-station h2, #contact h2 {
                margin-bottom: 20px !important; 
                font-size: 1.8rem !important;
            }
            section:not([id]).page-section h3 { 
                font-size: 1.2rem !important; 
                margin-bottom: 5px !important; 
            }
            section:not([id]).page-section p { 
                font-size: 0.9rem !important; 
            }
            #amenities2 {
                display: flex !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important; /* เปิดใช้งานการเลื่อนแนวนอน */
                scroll-snap-type: x mandatory; /* ให้การปัดหยุดลงล็อคพอดี */
                -webkit-overflow-scrolling: touch; /* ให้การปัดบนมือถือลื่นไหล */
                gap: 15px !important;
                padding-bottom: 15px !important; /* เว้นที่ให้แถบ Scroll */
            }
            #amenities2 > div {
                /* แบ่งความกว้างให้แสดง 2 รูปพอดี (หักลบช่องว่าง 15px) */
                flex: 0 0 calc(40% - 7.5px) !important; 
                scroll-snap-align: start; /* เวลาหยุดปัดให้ชิดขอบพอดี */
            }
            /* ซ่อนแถบ Scrollbar เพื่อความสวยงาม (เลือกใช้ได้) */
            #amenities2::-webkit-scrollbar { height: 4px; }
            #amenities2::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
            #facilities h2 { margin-top: 5px !important;  }  
            #rooms h2 { margin-top: 15px !important; }
            #facilities > div:first-of-type {
                grid-template-columns: repeat(4, 1fr) !important; /* บังคับให้เรียง 4 คอลัมน์ */
                gap: 8px !important; /* ลดช่องไฟลงเพื่อไม่ให้เบียดเกินไป */
                margin-bottom: 30px !important;
            }
            #facilities > div:first-of-type .img-placeholder {
                height: 45px !important; /* ย่อขนาดไอคอนลงให้พอดีจอ */
                margin-bottom: 5px !important;
            }
            #facilities > div:first-of-type p {
                font-size: 11px !important; /* ลดขนาดตัวอักษรใต้ไอคอน */
                line-height: 1.2 !important;
                margin-top: 5px !important;
                margin-bottom: 0 !important;
            }
            #facilities > div:first-of-type div {
                font-size: 11px !important; /* บังคับเผื่อกรณี font-size ฝังอยู่ใน div */
            }

            #facilities > div:last-of-type {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
            }
            .breakfast-container { flex-direction: column !important; align-items: center !important; }
            .breakfast-img { width: 100% !important; margin-bottom: 10px !important; }
            .breakfast-text-box { 
                position: relative !important; 
                top: 0 !important; 
                left: 0 !important; 
                transform: none !important; 
                width: 100% !important; 
                padding: 25px !important;
                margin-top: -50px;
                z-index: 2;
                border-left: 10px solid #654000 !important;
            }
            .breakfast-header { 
                text-align: center !important; 
                margin-bottom: 10px !important; 
            }
            #breakfast h2 { font-size: 1.8rem !important;margin-top: 15px; }
            #breakfast h3 { font-size: 1.1rem !important; }
            
            /* ปรับขนาดข้อความรายละเอียดของอาหารเช้า */
            .breakfast-title { 
                font-size: 1.2rem !important; 
                text-align: center !important;
            }
            .breakfast-text-box { 
                font-size: 1rem !important; 
                text-align: center !important;
            }

            #booking { padding: 30px 0 !important; }
            #contact { padding: 40px 15px !important; }
            
            #ev-station > div {
                background-image: linear-gradient(to bottom, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.3) 100%), url('../pic/3.jpg') !important;
                min-height: auto;
            }
            #ev-station {
                padding: 10px 0 !important; /* ลด Padding บน-ล่างของ Section */
            }
            #ev-station > div {
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }
            .ev-content {
                padding: 30px 15px !important;
                text-align: center;
            }
            #ev-station h3 {
                margin-top: 5px !important;    /* ลดระยะห่างด้านบน */
                margin-bottom: 10px !important; /* ลดระยะห่างด้านล่าง */
                font-size: 1.5rem !important;   /* ปรับขนาดตัวอักษรให้พอดีมือถือ */
            }
            #ev-station h2 {
                margin-top: 0px !important;       /* ลดระยะห่างด้านบน */
                margin-bottom: 0px !important;
                font-size: 1.8rem !important;
            }
            .ev-content {
                padding: 20px 15px !important; 
            }
        
            #ev-station ul {
                display: inline-block;
                text-align: left;
            }
            #location h2 { margin-top: 15px !important; }
            #location .flex-row {
                flex-direction: column !important;
                align-items: center !important;
                gap: 0px !important;
            }
            #location .flex-col:first-child {
                width: 100% !important;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #location .flex-col:first-child .img-placeholder {
                width: 80% !important; 
                max-width: 300px !important;
                margin: 0 auto !important;
            }
            #location .flex-col:last-child {
                width: 100% !important; 
                margin-top: 20px !important;
            }
            .booking-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 15px !important;
            }
            .booking-item {
                width: 100%;
                height: auto;
            }
            .booking-item img {
                max-height: 55px !important; /* ปรับขนาดโลโก้ลงเล็กน้อยเพื่อให้ 3 ช่องไม่เบียดกันเกินไปในจอมือถือ */
                width: 100% !important;
                object-fit: contain !important;
            }
            #contact h2 { margin-top: -15px !important;margin-bottom: -10px !important; }
            #contact .flex-row {
                flex-direction: column !important;
                text-align: center !important;
            }
            #contact .flex-col {
                text-align: center !important;
                width: 100% !important;
            }
            .top-actions {
                top: 10px;
                right: 15px;
            }
            
        }
    

/* =========================================
   Language Visibility Rules
   ========================================= */
html[data-lang="th"] .lang-en, html[data-lang="th"] .lang-cn { display: none !important; }
html[data-lang="en"] .lang-th, html[data-lang="en"] .lang-cn { display: none !important; }
html[data-lang="cn"] .lang-th, html[data-lang="cn"] .lang-en { display: none !important; }

/* =========================================
   Extracted Classes (Phase 4)
   ========================================= */
.breakfast-header { text-align: right; margin-bottom: 50px; }
.breakfast-text-box { color: #444; font-size: 1.2rem; line-height: 1.5; text-shadow: 1px 1px 2px rgba(255,255,255,0.8); }
.breakfast-title { font-weight: bold; color: #654000; margin-top: 0px; font-size: 1.5rem; }
.breakfast-desc { margin: 0; margin-top: -10px; }
.ev-content { padding: 60px; width: 100%; max-width: 600px; position: relative; z-index: 2; }