.c1 { color: var(--primary);  }
.c2 { color: var(--secondary);  }
.c3 { color: var(--accent);  }

.btn-down { text-align:center;height:100px;width:100px;margin-left:-50px;position:absolute;bottom:40px;left:50%;animation:balloon 1s ease 1s infinite; }

.btn-ballon { animation:balloon 1s ease 1s infinite; }

@keyframes balloon {
	0% , 100% {  
		transform:  translateY(0px);
        -moz-transform: translateY(0px);
        -webkit-transform:  translateY(0px); }
	50% { 
		transform:  translateY(-10px);
        -moz-transform: translateY(-10px);
        -webkit-transform:  translateY(-10px); }
}


.line .headline-wrapper { position: relative; margin: 0 auto 40px; width: fit-content; text-transform: uppercase; padding: 0 2rem 1rem; display: block; border-bottom: 1px solid #e5e7eb; }
.line .headline-wrapper::after { content: ""; position: absolute; width: 60px; height: 3px; bottom: -2px; left: 50%; transform: translateX(-50%); background-color: var(--primary); } 


.roomtype h2.shortname { text-align: left; margin: 0 0 1rem 0; padding: 0 ; }
.roomtype .ba-blog-post { display: flex !important; align-items: flex-start; gap: 30px;  margin-bottom: 2rem;  }
.roomtype .ba-blog-post-image { flex: 0 0 45%; max-width: 45%; margin-bottom: 0 !important; }
/* กำหนดพื้นที่ส่วนเนื้อหาให้อยู่ด้านขวาและใช้พื้นที่ที่เหลือ */
.roomtype .ba-blog-post-content { flex: 1; width: 100%; }
/* จัดให้หัวข้อและข้อมูลอยู่ในบรรทัดเดียวกัน */
.roomtype .ba-blog-post-field-row { display: flex; align-items: flex-start; margin-bottom: 2rem; }
.roomtype .ba-blog-post-field-title { width: 5vw; flex: 0 0 5vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomtype .ba-blog-post-field-value { text-align: left !important; flex: 1; padding-left: 1rem; }

@media (max-width: 768px) {
    .roomtype .ba-blog-post-field-title { width: 30vw;flex: 0 0 30vw;}
    .roomtype .ba-blog-post { flex-direction: column; gap: 15px;   }
    .roomtype .ba-blog-post-image { flex: 0 0 50%; max-width: 100%; }
}


/* ล้างค่าเดิมของระบบ */
.roomrate .ba-blog-post {
    padding: 0 !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid #eee;
    background: transparent !important;
}

/* โครงสร้างตารางเดสก์ท็อป */
.roomrate .rr-row {
    display: grid;
    /* แบ่งความกว้างคอลัมน์ด้วย vw เพื่อให้ยืดหยุ่นตามหน้าจอ     grid-template-columns: 1fr 10vw 10vw 10vw 10vw; */
    grid-template-columns: 10vw 15vw 10vw 10vw 10vw;
    column-gap: 2vw; /* ระยะห่างแนวนอนใช้ vw */
    row-gap: 1.25rem; /* ระยะห่างแนวตั้งใช้ rem */
    align-items: center;
    padding-bottom: 1.25rem;
}

/* 1. รูปภาพ */
.roomrate .rr-col.img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. ชื่อห้อง */
.roomrate .rr-col.name .th-name a {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
}
.roomrate .rr-col.name .en-name {
    font-size: 1.4rem;
    color: #888;
    margin-top: 0.25rem;
}

/* 3. ราคาและผู้เข้าพัก */
.roomrate .rr-col.price, 
.roomrate .rr-col.pax {
    text-align: center;
    color: #333;
    font-size: 1.6rem;
}

/* --- การแสดงผลสำหรับมือถือ --- */
@media (max-width: 768px) {
    .roomrate .rr-row {
        /* ปรับสัดส่วนรูปบนมือถือให้ยืดหยุ่นตามจอ */
        grid-template-columns: 25vw 1fr;
        column-gap: 4vw;
    }
    
    .roomrate .rr-col.price, 
    .roomrate .rr-col.pax {
        grid-column: 2;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed #eee;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .roomrate .rr-col.price::before,
    .roomrate .rr-col.pax::before {
        content: attr(data-label);
        color: #888;
    }
}