/* กำหนดตัวแปรสีเพื่อง่ายต่อการแก้ไข */
:root {
  --main-blue: #223F99;  /* สีน้ำเงินพื้นหลัง */
  --logo-orange: #d96c2c; /* สีส้มโลโก้ */
  --logo-green: #2e5f28;  /* สีเขียวโลโก้ */
}

/* ตั้งค่าพื้นหลังและการจัดวางของหน้า Title Slide */
#title-slide {
  /* 1. ส่วนล่างให้เป็นสีขาวรอไว้ก่อน */
  background-color: #f4f6f8;

  /* 2. ใส่ "รูป" ไล่สีแนวนอน (เขียว -> น้ำเงิน) */
  background-image: linear-gradient(to right, #3eb44b, #0c4da2);

  /* 3. กำหนดขนาดรูป: กว้าง 100% x สูง 45% (นี่คือตัวแบ่งครึ่งจอ) */
  background-size: 100% 60%;

  /* 4. สั่งไม่ให้รูปซ้ำ (เพื่อให้ส่วนล่างขาวโล่ง) และวางชิดบน */
  background-repeat: no-repeat;
  background-position: top left;

  /* --- ค่าอื่นๆ คงเดิม --- */
  text-align: left !important;
  padding-left: 0.5em;
  padding: 17px;
  border-radius: 5px;
}

/* --- ส่วนหัวข้อ (Title & Subtitle) ในโซนสีน้ำเงิน --- */
#title-slide h1.title {
  color: white !important;
  font-size: 1.5em;
  margin-top: 1.5em; /* ดันลงมาให้อยู่กลางโซนน้ำเงิน */
  margin-bottom: 0.2em;
  text-shadow: none;
}

#title-slide p.subtitle {
  color: white !important;
  font-size: 1.2em;
  opacity: 0.9;
}

/* --- ส่วนผู้แต่งและวันที่ (Authors & Date) ในโซนสีขาว --- */
#title-slide .quarto-title-authors {
  margin-top: 1.0em; /* ดันลงมาให้พ้นสีน้ำเงิน */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#title-slide .quarto-title-author-name {
  color: var(--main-blue) !important;
  font-weight: bold;
}

#title-slide .quarto-title-affiliation {
  color: black !important;
  font-size: 0.6em;
  margin-bottom: 0.5em;
}

#title-slide p.date {
  color: var(--main-blue) !important;
  margin-top: 0.5em;
/*  font-weight: bold;    */
  padding-left: 0.5em; /* ระยะห่างจากขอบซ้าย */
}

/* เปลี่ยนสีพื้นหลังของ "หน้าเว็บทั้งหน้า" (Browser Window) */
body {
  background-color: #f4f6f8 !important;
}

/* เปลี่ยนสีพื้นหลังของตัว Container หลักของ Reveal.js */
.reveal, .reveal-viewport {
  background-color: #f4f6f8 !important;
}


/* --- ส่วนจัดการ LOGO (อัปเดตใส่รูปภาพ) --- */

/* ข้อควรระวังเรื่อง Path รูปภาพ:
   โค้ดด้านล่างสมมติว่าไฟล์ CEE.png และ ICDI_logo.png
   วางอยู่ที่เดียวกับไฟล์ .qmd และไฟล์ .css
   ถ้าคุณเก็บรูปไว้ในโฟลเดอร์ เช่น images/ ให้แก้ path เป็น url('images/CEE.png')
*/

/* Logo 1: CEE.png (วงกลมด้านซ้าย) */
#title-slide::before {
  content: "";  /* ต้องปล่อยว่างไว้เพื่อให้แสดงพื้นหลังได้ */

  /* --- ตั้งค่ารูปภาพ --- */
  background-image: url('CEE.png'); /* <-- ใส่ path ไฟล์ตรงนี้ */
  background-size: cover;    /* ขยายรูปให้เต็มพื้นที่วงกลม (อาจโดนตัดขอบบ้าง) */
  /* ถ้าต้องการให้เห็นโลโก้ครบทั้งอันโดยไม่โดนตัด ให้ใช้: background-size: contain; */
  background-position: center; /* จัดรูปให้อยู่ตรงกลาง */
  background-repeat: no-repeat;

  /* --- ตำแหน่งและขนาด (คงเดิมจากโค้ดก่อนหน้า) --- */
  position: absolute;
  bottom: -150px;      /* ขยับลงมาจากขอบบนนิดหน่อยให้สวยงาม */
  right: 230px;   /* วางทางซ้ายของโลโก้ 2 */
  width: 120px;
  height: 120px;
  border-radius: 50%; /* บังคับให้รูปอยู่ในกรอบวงกลม */
  z-index: 10;
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.2); เอาเงาออกถ้าไม่ชอบ */
}

/* Logo 2: ICDI_logo.png (สี่เหลี่ยมด้านขวาติดขอบ) */
#title-slide::after {
  content: ""; /* ต้องปล่อยว่างไว้ */

  /* --- ตั้งค่ารูปภาพ --- */
  background-image: url('ICDI_logo.png'); /* <-- ใส่ path ไฟล์ตรงนี้ */
  background-size: contain;  /* contain จะแสดงรูปให้ครบทั้งอันในกรอบสี่เหลี่ยม */
  background-position: center;
  background-repeat: no-repeat;

  /* --- ตำแหน่งและขนาด (คงเดิมจากโค้ดก่อนหน้า) --- */
  position: absolute;
  top: 600px;    /* ขยับลงมาจากขอบบนนิดหน่อย */
  right: -30px;  /* ขยับออกจากขอบขวานิดหน่อย */
  width: 300px;
  height: 120px;
  z-index: 10;
  /* background-color: white; ถ้าโลโก้เป็นพื้นใส อาจต้องเติมสีพื้นหลังให้กรอบ */
}

.reveal h2 {
    background-color: white;

  /* 2. ใส่ "รูป" ไล่สีแนวนอน (เขียว -> น้ำเงิน) */
  background-image: linear-gradient(to right, #3eb44b, #0c4da2);
  color: white;
  padding: 15px;
  font-size: 1.25em;
  border-radius: 5px;
  box-shadow: 3px 3px 5px #888888;
  width: 95%;
  display: block;
  text-align: left;
  padding-left: 30px;
}



/* Modify progress bar color */
.reveal .progress {
    color: red;
}

.blue {
    color: #3333CC;
}

.red {
    color: #cc3333;
}

.green {
    color: #33cc33;
}

.purple {
    color: #8033cc;
}

.blue1 {
    color: #3380cc;
}

.yellow {
    color: yellow;
}

.A1 {
    color: #FFD700;
}

.A2 {
    color: #4A90E2;
}

.A3 {
    color: #77B255;
}
/* Change bullet list color */
ul li::marker {
  color: #8033cc; /* Change the color to any desired value */
}

ol li::marker {
  color: #cc3333; /* This is for ordered lists, optional */
}

.reveal .card.exercise-editor {
    --exercise-font-size: 1.3rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 0, 0, .175);
    border-radius: .375rem;
    font-size: var(--exercise-font-size);
    overflow: hidden;
    width: 99%;
}


/* ลดขนาดฟอนต์ของทุก h tag ลง 20% */
.reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  font-size: 90%;  /* ลดขนาดฟอนต์ลง 20% */
}

/* ลดขนาดฟอนต์ของตารางทั้งหมดลง 20% */
.reveal table {
  font-size: 80%;  /* ลดขนาดฟอนต์ลง 20% */
}



.centered {
    display: flex;
    justify-content: center;  /* จัดกึ่งกลางแนวนอน */
    align-items: center;  /* จัดกึ่งกลางแนวตั้ง */
    height: 100vh; /* เต็มจอ */
    text-align: center;
}

.smalltext {
    font-size: 0.75em;
}

/* Bottom bar  */
.reveal div.footer {
    background: linear-gradient(to right, #3eb44b, #0c4da2);
    display: inline-block ;
    justify-content: space-between;
    align-items: center;
    margin: 0;   /* Remove content */
    padding: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5em; /* Adjust height as needed */
    color: white;
    text-align: center;
    line-height: 50px; /* Align text vertically */
    z-index: 1;
}

.reveal .slide-number {
  color: white !important;   /* สีตามต้องการ */
  font-weight: bold;           /* ตัวหนา (ถ้าต้องการ) */
}