/* =========================================================
   ตัวแปรสี — แก้ที่เดียว เปลี่ยนทั้งเว็บ
   ========================================================= */
:root{
  --blue:      #1153a5;   /* น้ำเงินหลัก (แถบบน / แบนเนอร์) */
  --blue-dark: #0d3f80;   /* น้ำเงินเข้ม (hover) */
  --btn-bg:    #e3e3e3;   /* พื้นปุ่มลิงก์สีเทา */
  --line:      #d5d5d5;   /* เส้นขอบ */
}

/* =========================================================
   Base
   ========================================================= */
body{
  font-family:'Sarabun', sans-serif;
  color:#333;
  background: url(/wrmd_platform/img/gray_art2.jpg);
}

/* =========================================================
   1) แถบสีน้ำเงินบนสุด
   ========================================================= */
.topbar{
  background:var(--blue);
  color:#fff;
  font-size:.85rem;
  padding:6px 24px;
}

/* =========================================================
   2) ส่วนหัว โลโก้ + สโลแกน
   ========================================================= */
.site-header{
  padding:0 0;
}
.site-title{
  font-size:1.9rem;
  font-weight:600;
  color:var(--blue);
  margin:0;
}
.slogan{
  font-size:1.6rem;
  color:var(--blue);
  margin:0;
}
img{ 
	width: 100%;
}
.container.d-flex.flex-wrap.align-items-center.justify-content-between.gap-3 {
    background: #559dcf;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* =========================================================
   4) เนื้อหา
   ========================================================= */
.content-box{ padding:24px 12px 0px; }

/* แถบหัวข้อสีน้ำเงินเต็มความกว้าง */
.page-banner{
  background:var(--blue);
  color:#fff;
  font-size:1.6rem;
  text-align:center;
  border-radius:6px;
  padding:14px;
  margin-bottom:24px;
}

/* แถบหัวข้อสีน้ำเงินเล็กชิดซ้าย */
.page-banner-small{
  background:var(--blue);
  color:#fff;
  font-size:1.4rem;
  text-align:left;
  border-radius:6px;
  padding:10px;
  margin-bottom:15px;
  text-indent:20px;
  margin-top:24px;
}

/* หัวข้อกลุ่ม + หมุดสีแดงหน้าข้อความ (ใช้ ::before แทนการใส่รูป) */
.group-title{
  font-size:1.05rem;
  color:var(--black);
  margin:22px 0 10px;
  font-weight: bold;
}
.group-title::before{
  content:"";
  display:inline-block;
  width:12px; height:16px;
  margin-right:8px;
  background:#e00;
  /* ตัดมุมล่างให้เป็นรูปธง/หมุด */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  vertical-align:-2px;
}

/* กล่องรวมปุ่ม — ให้แต่ละปุ่มขึ้นบรรทัดใหม่ */
.link-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;                   /* ปุ่มกว้างเท่าข้อความ */
  gap:8px;
}

/* ปุ่มลิงก์สีเทา */
.link-btn{
  display:inline-block;
  background:var(--btn-bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 14px;
  font-size:.9rem;
  color:var(--blue);
  text-decoration:none;
}
.link-btn:hover{
  background:#d0d0d0;
  color:var(--blue-dark);
  text-decoration:underline;
}

#footer_main{
    display: inline-block;
    width: 100%;
    height: auto;
    font-size: 0.9rem;
    color: #000;
    text-align: center;
    background: #559dcf;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
    bottom: 0px;
    margin-top: 20px;
	padding-bottom: 10px
}
.yellow{
	color:#FF0;
	text-decoration:blink;
	font-size:0.8rem;
}

/* =========================================================
   Responsive — จอเล็กลดขนาดตัวอักษร
   ========================================================= */
@media (max-width:768px){
  .site-title{ font-size:1.4rem; }
  .slogan{ font-size:1.1rem; }
  .page-banner{ font-size:1.2rem; }
  .link-btn{ white-space:normal; }          /* ให้ข้อความยาวตัดบรรทัดได้ */
}