@charset "utf-8";
/* ตั้งค่าพื้นฐานสำหรับกล่องเมนู (ดึงฟอนต์เครื่องผู้ใช้โดยตรง) */
.box-select-online {
    font-family: 'Noto Sans Thai', 'Cordia New', sans-serif;
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100%;
    max-width: 800px;        
    margin: 20px auto;       
    padding: 0 15px;
    box-sizing: border-box;
}

/* ตั้งค่าตัวรายการเมนู (ul) ให้แบ่งเป็น 2 ฝั่ง ซ้าย-ขวา แถวเดียวกัน */
.box-select-online ul {
    display: flex;
    flex-direction: row;     
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;               
}

/* แบ่งพื้นที่ซ้ายขวาคนละครึ่ง 50/50 */
.box-select-online ul li {
    flex: 1;                 
    text-align: center;
}

/* สไตล์ของปุ่มลิงก์ (a) */
.box-select-online ul li a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;      
    box-sizing: border-box;
    
    /* โทนสีตามที่กำหนด */
    background-color: #006e42; /* เขียวขจีเข้ม */
    color: #f1f84a;            /* เหลืองเด่น */
    border: 2px solid #006e42;
    
    /* แอนิเมชันสำหรับการ Hover */
    transition: all 0.3s ease-in-out; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* การตั้งค่าขนาดและการวางตำแหน่งของไอคอน SVG */
.box-select-online .menu-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px; /* เว้นห่างจากตัวอักษร */
    transition: transform 0.3s ease; /* แอนิเมชันแยกเฉพาะไอคอน */
}

/* แอนิเมชันเมื่อเอาเมาส์ไปวาง (Hover) */
.box-select-online ul li a:hover {
    background-color: #f1f84a; /* สลับเป็นพื้นหลังเหลือง */
    color: #006e42;            /* สลับเป็นอักษรเขียวเข้ม */
    border-color: #006e42;     
    transform: translateY(-5px); /* ปุ่มลอยขึ้น */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 
}

/* เมื่อ Hover ให้ไอคอนขยายขนาดขึ้นเล็กน้อย */
.box-select-online ul li a:hover .menu-icon {
    transform: scale(1.2);
}
/* สถานะเมื่อปุ่มนั้นเป็นหน้าปัจจุบัน (Active) ให้สลับสีค้างไว้ตลอดเวลา */
.box-select-online ul li a.active {
    background-color: #f1f84a; /* สลับพื้นหลังเป็นเหลือง */
    color: #006e42;            /* สลับตัวอักษรและไอคอนเป็นเขียวเข้ม */
    border-color: #006e42;     /* ขอบเขียวเข้มคงเดิม */
    
    /* ล็อกเอฟเฟกต์ให้อยู่กับที่ ไม่ต้องให้ปุ่มลอยขึ้นเหมือนตอน Hover */
    transform: none; 
}
/* --- Responsive รองรับมือถือหน้าจอเล็ก --- */
@media (max-width: 600px) {
    .box-select-online ul {
        flex-direction: column; /* ปรับเป็นแนวตั้งอัตโนมัติบนมือถือ เพื่อไม่ให้ปุ่มบีบกัน */
        gap: 15px;
    }
    .box-select-online ul li a {
        font-size: 1.1rem;      
        padding: 12px 20px;
    }
}.title-type {
	font-family: "Noto Sans Thai";
	font-size: 0.8rem;
	color: #999999;
	float: left;
	height: auto;
	width: 92%;
	margin-top: 1%;
	margin-left: 3%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
}
/* ตั้งค่ากล่องครอบปุ่ม (จัดให้อยู่กึ่งกลางหน้าจอเบื้องต้น) */
.back-02 {
    font-family: 'Noto Sans Thai', 'Cordia New', sans-serif;
    display: flex;
    justify-content: center;
    margin: 30px auto;
    width: 100%;
}

/* สไตล์ของตัวปุ่มลิงก์ ย้อนกลับ */
.back-02 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px; /* ดีไซน์ทรงมน/วงรี ให้ดูแตกต่างจากปุ่มเมนูหลัก */
    box-sizing: border-box;
    
    /* คุมโทนสีตามสีเดิม */
    background-color: transparent; /* เริ่มต้นเป็นปุ่มโปร่งแสง */
    color: #006e42;               /* ตัวอักษรสีเขียวเข้ม */
    border: 2px solid #006e42;    /* เส้นขอบสีเขียวเข้ม */
    
    /* ตั้งค่าแอนิเมชัน */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* ตั้งค่าขนาดและการวางตำแหน่งของไอคอนลูกศร */
.back-02 .back-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* เว้นระยะห่างจากคำว่า ย้อนกลับ */
    transition: transform 0.3s ease; /* แอนิเมชันเฉพาะตัวลูกศร */
}

/* แอนิเมชันเมื่อเอาเมาส์ไปวาง (Hover) */
.back-02 a:hover {
    background-color: #006e42; /* เปลี่ยนพื้นหลังเป็นเขียวเข้ม */
    color: #f1f84a;            /* เปลี่ยนตัวอักษรเป็นสีเหลืองเด่น */
    box-shadow: 0 4px 12px rgba(0, 110, 66, 0.2); /* เพิ่มเงาสีเขียวจางๆ */
}

/* ลูกเล่นแอนิเมชัน: เมื่อ Hover แล้วให้ลูกศรขยับถอยหลังไปทางซ้ายขยุกขยิกเล็กน้อย */
.back-02 a:hover .back-icon {
    transform: translateX(-4px); 
}
/* กล่องครอบวิดีโอทั้งหมด */
.list-video-show {
    width: 100%;             /* กว้างเต็มหน้าจอ หรือเต็มพื้นที่กล่องแม่ */
    max-width: 1200px;       /* จำกัดความกว้างสูงสุดบนจอคอมพิวเตอร์ เพื่อไม่ให้ใหญ่เกินไป */
    margin: 30px auto;       /* จัดกล่องวิดีโอให้อยู่กึ่งกลางหน้าจอแนวราบ และเว้นระยะบนล่าง */
    padding: 0 15px;         /* เว้นระยะห่างจากขอบจอเล็กน้อยเมื่อดูบนมือถือ ภาพจะได้ไม่ชนขอบแน่นเกินไป */
    box-sizing: border-box;
}

/* ตั้งค่าตัวเครื่องเล่นวิดีโอภายในกล่อง */
.list-video-show video {
    width: 100%;             /* บังคับให้วิดีโอกว้าง 100% เต็มกล่องแม่ */
    height: auto;            /* ให้ความสูงคำนวณลดหลั่นตามความกว้างโดยอัตโนมัติ */
    aspect-ratio: 16 / 9;    /* ล็อกสัดส่วนความสูงมาตรฐานสากล (Widescreen) ภาพไม่มียืดหรือเพี้ยน */
    object-fit: cover;       /* จัดการให้ภาพหน้าปก (Poster) และตัวเนื้อหาวิดีโอแนบสนิทพอดีกับกรอบ */
    
    background-color: #000000; /* ใส่พื้นหลังสีดำกันขอบสีเทาโผล่ตอนช่วงที่วิดีโอกำลังโหลด */
    border-radius: 12px;     /* ปรับขอบให้มนเล็กน้อย เข้ากับสไตล์ปุ่มเมนูหลัก */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* เพิ่มมิติเงาหนานุ่มใต้ตัวเล่นวิดีโอ */
    
    display: block;          /* เคลียร์ช่องว่างแปลกๆ ด้านใต้ของแท็กวิดีโอ */
}

/* --- การปรับแต่งเพิ่มเติมสำหรับหน้าจอมือถือ (ทางเลือก) --- */
@media (max-width: 768px) {
    .list-video-show {
        margin: 15px auto;   /* ลดระยะห่างบนล่างเมื่ออยู่บนหน้าจอมือถือ */
        padding: 0 10px;     /* ปรับระยะขอบให้พอดีกับสายตามากขึ้น */
    }
    .list-video-show video {
        border-radius: 8px;  /* ลดความโค้งมนลงเล็กน้อยให้รับกับหน้าจอมือถือที่เล็กลง */
    }
}
/* สไตล์สำหรับกล่องหัวข้อวิดีโอ */
.title-video-show {
	font-family: 'Noto Sans Thai', 'Cordia New', sans-serif;
	font-size: 1.2rem;         /* ขนาดตัวอักษรใหญ่กำลังดีสำหรับหัวข้อ */
	font-weight: 700;          /* ตั้งค่าให้เป็นตัวหนา */
	color: #006e42;            /* ใช้สีเขียวเข้มตามโทนหลัก */
	width: 100%;
	max-width: 1200px;           /* เว้นระยะเยื้องจากขอบจอเล็กน้อยเมื่อดูบนมือถือ */
	box-sizing: border-box;
	position: relative;        /* ตั้งค่าไว้สำหรับทำเส้นตกแต่งด้านล่าง */
	display: flex;
	align-items: center;
	float: left;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
	line-height: 140%;
}

/* ลูกเล่น: เพิ่มเส้นขีดดีไซน์สีเหลืองและเขียวใต้หัวข้อ */
.title-video-show::after {
    content: '';
    position: absolute;
    bottom: -8px;              /* ให้เส้นอยู่ใต้ตัวอักษรลงมาหน่อย */
    left: 15px;                /* ให้เริ่มตรงกับตำแหน่งตัวอักษรพอดี */
    width: 60px;               /* ความยาวของเส้น */
    height: 4px;               /* ความหนาของเส้น */
    background-color: #f1f84a; /* ใช้สีเหลืองเด่นตามธีม */
    border-radius: 2px;
    
    /* หากต้องการให้เป็นเส้นยาวคลุม หรือใช้สองสีผสมกัน สามารถปรับแต่งเพิ่มได้ครับ */
    box-shadow: 20px 0 0 #006e4