/* ล็อคความสูงหน้าจอหลัก */
.flex-container {
    display: flex;
    width: 100%;
    height: 5ถvh;
    padding-left: 3%;
    gap: 2vw;
    background-color: #fff;
    overflow: hidden; /* ห้ามให้หน้าหลักเลื่อน เพื่อป้องกันส่วนที่สองตกจอ */
    box-sizing: border-box;
    margin-top: -30px;
}

/* ฝั่งซ้าย: กำหนดให้เลื่อนได้ภายในพื้นที่ตัวเอง */
.left-content {
    flex: 1;
    height: 100%; /* ล็อคความสูงเท่ากับหน้าจอ */
    display: flex;
    flex-direction: column;
}

.scroll-viewport {
    flex: 1;
    overflow-y: auto; /* เปิด Scroll เฉพาะส่วนนี้ */
    padding-right: 1.5vw;
}

/* ตกแต่ง Scrollbar ให้ดูเล็ก ไม่เกะกะ */
.scroll-viewport::-webkit-scrollbar { width: 0.6vh; }
.scroll-viewport::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 2vh; }

/* ฝั่งขวา: ล็อคตำแหน่งให้อยู่หน้าแรกเสมอ */
.right-content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* ดันขึ้นด้านบน */
}

/* ปรับ Font ให้เหมาะสมกับจอ Notebook */
.title-blue {
    color: #0056b3;
    font-size: 2vh;
    border-left: 0.6vh solid #0056b3;
    padding-left: 1vw;
    line-height: 1.2;
    margin-top: 1vh;
}

p, li {
    font-size: 1.8vh; /* ลดขนาดลงเล็กน้อยเพื่อให้เห็นข้อมูลได้ครบมากขึ้น */
    line-height: 1.4;
}

/* กล่องที่อยู่ฝั่งขวา */
.location-card {
    background-color: #f1f7ff;
    padding: 2.5vh 2vw;
    border-radius: 2vh;
    border: 0.2vh solid #d0e3ff;
    width: 80%;
}

.address-card {
    background: #fff;
    padding: 1.8vh 1.5vw;
    border-radius: 1.2vh;
    border-left: 0.7vh solid #e91e63;
    box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.05);
}

.gray-box {
    background: #f8f9fa;
    padding: 1vh 0.8vw;
    border-radius: 0.8vh;
}

.accent-text { color: #e91e63; }
.muted-text { color: #666; margin:1vh 0; }
.muted-text-underline { color: #666; margin:1vh 0; text-decoration: underline; font-weight: bold; }
.warning-text { color: #d97706; text-align: center; margin:1vh 0; }
.no-bullet { list-style: none; padding: 0; }
.vh-list { padding-left: 2.5vw; }
.bold { font-weight: bold; }

/* Right-column typography tweaks (larger, but still responsive) */
/* These rules target only elements inside .right-content so left column remains unchanged */
.right-content{font-size:2.3vh;line-height:1.45}
.right-content .title-blue{font-size:3.0vh}
.right-content p, .right-content li, .right-content .muted-text, .right-content .accent-text{font-size:2.1vh}
.location-card{width:80%;padding:2.8vh 2.2vw}
.address-card{padding:2.0vh 1.6vw}

/* On small screens, keep sizes comfortable */
@media (max-width:880px){
    .right-content{font-size:1.95vh}
    .right-content .title-blue{font-size:2.3vh}
    .right-content p, .right-content li, .right-content .muted-text{font-size:1.9vh}
    .location-card{width:100%}
}