/* style.css */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.6;
    color: #000000;
}
/* รูปแบบทั่วไป */
.container {
    max-width: 1920px;
}

.section-title {
    color: #FF0000; /* สีแดงของ RYOBI */
  display: flex;
  align-items: flex-end;
  position: relative;
  font-weight: 600;
}

/* ปุ่ม Learn More/See All News */
.btn-primary {
    width: 226px;
    height: 50px;
    background-color: #ffffff;
    color:#FF0000;
    font-size: 20px;
    font-weight: 600;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn-about {
    width: 226px;
    height: 50px;
    background-color: #FF0000;
    color:#ffffff;
    font-size: 20px;
    font-weight: 600;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    display: flex;
}


.btn-primary:hover ,.btn-about:hover{
    background-color: #8400ff;
    color: #eee;
}

/* รูปแบบเฉพาะสำหรับ component */

/* Navigation */
/* Banner */
.tech{
    min-height: 85vh; 
    position: relative; 
    background: url('./image/tech.png') no-repeat center center / cover;
    color: white; 
    overflow: hidden; 
    margin-top: 100px;
    display: flex;
}

/* About Us section */
  /* ------------------------------------------------------------------------------------------ */

/*--------------------------------------------------- NEWS --------------------------------------------------*/


/* ====================================
   BASE STYLES & HEADING
   ==================================== */
.news-section {
    max-width: 1520px;
    margin: 0 200px 0 200px ;
    font-family: Arial, sans-serif;
}


/* ====================================
   LIST & ITEM STYLING
   ==================================== */
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}



/* ลบเส้นแบ่งด้านล่างของรายการสุดท้าย */
.news-item:last-child {
    border-bottom: none;
}

/* ====================================
   COLUMN STYLING
   ==================================== */
.news-date {
    /* กำหนดความกว้างคงที่สำหรับวันที่ */
    flex-basis: 190px; 
    font-size: 24px;
    color: #000000;
}

.news-title {
    /* ให้หัวข้อใช้พื้นที่ที่เหลือทั้งหมด */
    flex-grow: 1; 
    display: flex; /* เปิด Flexbox ภายในหัวข้อเพื่อจัดวางข้อความและลิงก์ไฟล์ */
    justify-content: space-between; /* ผลักข้อความกับลิงก์ไปซ้าย-ขวา */
    align-items: center;
    font-size: 24px;
    margin-left: 100px;
}

/* ====================================
   FILE LINK STYLING (PDF 202KB <)
   ==================================== */
.file-link {
    align-items: center;
    color: #ff0000; /* สีแดงสำหรับลิงก์และไอคอน */
    text-decoration: none; /* ลบขีดเส้นใต้ */
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px; /* เว้นระยะห่างจากหัวข้อข่าว */
}

.file-text {
    /* ข้อความ PDF 202KB */
    margin-right: 5px; 
}

.fa-angle-right {
    font-size: 14px;
}

/* จัดการกับรายการที่ไม่มีไฟล์แนบ (เพื่อไม่ให้เส้นแบ่งเบี้ยว) */
.news-item:has(.file-link) {
    border-bottom: 1px solid #ff0000; /* ทำให้เส้นแบ่งเป็นสีแดงเฉพาะแถวที่มีไฟล์ */
}

/* ปรับเส้นแบ่งให้เป็นสีเทาตามปกติ หากไม่มีไฟล์ */
.news-item {
    border-bottom: 1px solid #ff0000;
}
.news-item:last-child {
    border-bottom: none;
}

/* หากรายการมีไฟล์แนบ ให้ใช้เส้นสีแดง */
.news-item:has(.file-link) {
    border-bottom: 1px solid #ff0000;
}

/* ปรับเส้นสีแดงให้ชัดเจนขึ้นเมื่อมีไฟล์แนบ */
.news-item:not(:has(.file-link)) {
     border-bottom: 1px solid #ff0000; /* เส้นเทาสำหรับแถวที่ไม่มีไฟล์ */
}

/* CSR and Meet People section */
.grid-2-col {
    display: flex;
    justify-content: space-between;
}

.grid-item {
    width: 48%;
    background-size: cover;
    background-position: center;
    min-height: 350px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.grid-item h3 {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Join with Us section */
.join-content {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
}

.job-list {
    width: 45%;
}

.application-form {
    width: 45%;
    padding: 20px;
    border: 1px solid #eee;
}

.job-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* Footer */
.footer {
    background-color: #f4f4f4;
    padding: 30px 0;
    text-align: center;
    font-size: 0.9em;
}

.footer-links a {
    margin: 0 15px;
    color: #333;
    text-decoration: none;
}

.social-links a {
    margin: 0 5px;
    display: inline-block;
}

.social-icon {
    width: 30px;
    height: 30px;
    background-color: #FF0000;
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
}
/* สไตล์สำหรับปุ่ม Facebook และ LINE (จำลอง) */
.social-links .facebook { background-color: #FF0000; }
.social-links .line { background-color: #FF0000; }

.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #FF0000;
    color: white;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
}