:root{
  --ฟ้า:#07a8df;
  --ฟ้าเข้ม:#087ca5;
  --กรม:#0b2232;
  --กรมอ่อน:#173f56;
  --ครีม:#f5f1e8;
  --ขาว:#ffffff;
  --หมึก:#16303e;
  --เทา:#667b85;
  --เส้น:#d4e1e6;
  --เหลือง:#ffd465;
  --ส้ม:#ff9877;
  --เขียว:#c9ec72;
  --เงา:0 22px 55px rgba(13,55,77,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Tahoma,"Noto Sans Thai","Leelawadee UI",Arial,sans-serif;
  color:var(--หมึก);
  background:
    linear-gradient(90deg,rgba(7,168,223,.045) 1px,transparent 1px),
    linear-gradient(rgba(7,168,223,.045) 1px,transparent 1px),
    var(--ครีม);
  background-size:32px 32px;
  line-height:1.86;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.แถบบน{
  background:var(--กรม);
  color:#d5e8f0;
  text-align:center;
  padding:8px 16px;
  font-size:.8rem;
  font-weight:800;
}
.หัวเว็บ{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--เส้น);
}
.หัวเว็บด้านใน{
  max-width:1260px;
  margin:auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.ตราสัญลักษณ์{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  padding:10px 18px;
  background:var(--ขาว);
  border:2px solid var(--ฟ้า);
  border-radius:18px 18px 38px 18px;
  box-shadow:8px 8px 0 var(--เหลือง);
}
.ตราสัญลักษณ์ img{height:53px;width:auto;object-fit:contain}
.คำอธิบายหัวเว็บ{
  max-width:620px;
  text-align:right;
  color:var(--เทา);
  font-size:.9rem;
}
.กรอบเมนู{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(245,241,232,.95);
  border-bottom:1px solid var(--เส้น);
  backdrop-filter:blur(12px);
}
.เมนู{
  max-width:1260px;
  margin:auto;
  padding:11px 24px;
  display:flex;
  gap:9px;
  overflow-x:auto;
}
.เมนู a{
  flex:0 0 auto;
  min-width:145px;
  padding:11px 15px;
  text-align:center;
  background:var(--ขาว);
  border:1px solid var(--เส้น);
  border-radius:16px 16px 16px 5px;
  color:#526b77;
  font-weight:900;
  font-size:.9rem;
  transition:.2s ease;
}
.เมนู a:hover{
  color:var(--ฟ้าเข้ม);
  transform:translateY(-2px);
  border-color:#8dddf3;
}
.เมนู a.หน้าปัจจุบัน{
  color:#fff;
  background:var(--ฟ้า);
  border-color:var(--ฟ้า);
  box-shadow:0 10px 24px rgba(7,168,223,.24);
}
.ส่วนเปิด{
  max-width:1260px;
  margin:28px auto 0;
  padding:0 24px;
}
.โมเสก{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  grid-template-rows:auto auto;
  gap:14px;
}
.กล่องชื่อ{
  grid-row:span 2;
  min-height:520px;
  padding:58px 52px;
  border-radius:36px 12px 36px 36px;
  background:var(--กรม);
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:var(--เงา);
}
.กล่องชื่อ:before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:rgba(7,168,223,.14);
  right:-190px;
  top:-180px;
}
.กล่องชื่อ:after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:38px solid rgba(201,236,114,.13);
  border-radius:50%;
  left:-95px;
  bottom:-110px;
}
.ป้ายหัวข้อ{
  position:relative;
  z-index:2;
  display:inline-block;
  padding:7px 13px;
  border-radius:999px;
  background:var(--เขียว);
  color:var(--กรม);
  font-size:.78rem;
  font-weight:900;
}
.กล่องชื่อ h1{
  position:relative;
  z-index:2;
  margin:22px 0 18px;
  font-size:clamp(2.25rem,5vw,5.15rem);
  line-height:1.11;
  letter-spacing:-.055em;
}
.กล่องชื่อ p{
  position:relative;
  z-index:2;
  margin:0;
  max-width:820px;
  color:#bfd1da;
  font-size:1.04rem;
}
.ป้ายข้อมูล{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}
.ป้ายข้อมูล span{
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#d8e7ed;
  font-size:.8rem;
  font-weight:800;
}
.กล่องย่อ{
  padding:28px;
  border-radius:12px 36px 12px 36px;
  background:var(--ฟ้า);
  color:#fff;
  box-shadow:var(--เงา);
  position:relative;
  overflow:hidden;
}
.กล่องย่อ:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:36px;
  background:rgba(255,255,255,.13);
  right:-55px;
  bottom:-60px;
  transform:rotate(25deg);
}
.กล่องย่อ strong{
  display:block;
  font-size:1.4rem;
  line-height:1.35;
}
.กล่องย่อ p{
  position:relative;
  z-index:2;
  margin:10px 0 0;
  color:#e9f9fe;
  font-size:.9rem;
}
.กล่องตรา{
  padding:25px;
  border-radius:36px 12px 36px 12px;
  background:var(--เหลือง);
  border:2px solid var(--กรม);
  box-shadow:8px 8px 0 var(--ส้ม);
  display:grid;
  place-items:center;
  min-height:210px;
}
.วงตรา{
  width:145px;
  height:145px;
  border-radius:50%;
  background:var(--ขาว);
  border:4px solid var(--กรม);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--กรม);
  font-weight:900;
  line-height:1.4;
  transform:rotate(-6deg);
}
.สารบัญ{
  max-width:1260px;
  margin:17px auto 0;
  padding:0 24px;
}
.สารบัญด้านใน{
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:14px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--เส้น);
  border-radius:20px;
}
.สารบัญ a{
  flex:0 0 auto;
  padding:9px 13px;
  border-radius:12px;
  background:var(--ฟ้าอ่อน,#e9f9fe);
  color:var(--ฟ้าเข้ม);
  font-size:.83rem;
  font-weight:800;
}
.เนื้อหา{
  max-width:1260px;
  margin:24px auto 70px;
  padding:0 24px;
}
.บทนำ{
  padding:30px 34px;
  background:var(--ขาว);
  border:2px solid var(--กรม);
  border-radius:12px 30px 30px 30px;
  box-shadow:9px 9px 0 var(--เขียว);
  font-size:1.06rem;
  color:#39545f;
}
.ลิงก์เว็บ{
  margin-top:18px;
  padding:14px 17px;
  background:#e8f8fd;
  border-left:6px solid var(--ฟ้า);
  border-radius:0 15px 15px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.ลิงก์เว็บ strong{color:var(--ฟ้าเข้ม)}
.ลิงก์เว็บ a{color:var(--ฟ้าเข้ม);font-weight:900;word-break:break-all}
.บท{
  margin-top:24px;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.หมายเลขบท{
  position:sticky;
  top:91px;
  min-height:110px;
  display:grid;
  place-items:center;
  border-radius:28px 8px 28px 8px;
  background:var(--กรม);
  color:var(--เหลือง);
  font-size:2rem;
  font-weight:900;
  border:4px solid var(--ครีม);
  box-shadow:7px 7px 0 var(--ฟ้า);
}
.แผ่นบท{
  background:var(--ขาว);
  border:1px solid var(--เส้น);
  border-radius:8px 28px 28px 28px;
  padding:30px 32px;
  box-shadow:0 15px 35px rgba(13,55,77,.07);
}
.บท:nth-of-type(even) .แผ่นบท{
  background:linear-gradient(145deg,#f7fdff,#fff);
}
.แผ่นบท h2{
  margin:0 0 14px;
  font-size:clamp(1.55rem,2.65vw,2.35rem);
  line-height:1.35;
}
.แผ่นบท>p{margin:0;color:#3e5864}
.หัวข้อย่อย{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:19px;
}
.กล่องย่อย{
  padding:20px;
  border-radius:18px 6px 18px 18px;
  background:var(--ครีม);
  border:1px solid #d8ded5;
}
.กล่องย่อย:nth-child(3n+1){border-top:5px solid var(--ฟ้า)}
.กล่องย่อย:nth-child(3n+2){border-top:5px solid var(--ส้ม)}
.กล่องย่อย:nth-child(3n){border-top:5px solid var(--เขียว)}
.กล่องย่อย h3{
  margin:0 0 8px;
  color:var(--กรมอ่อน);
  font-size:1.14rem;
  line-height:1.42;
}
.กล่องย่อย p{margin:0;color:#4c626c;font-size:.95rem}
.ภาพประกอบ{
  margin:24px 0 2px 126px;
  border-radius:30px 10px 30px 30px;
  overflow:hidden;
  background:var(--กรม);
  box-shadow:var(--เงา);
}
.ภาพประกอบ svg{width:100%;height:auto}
.ภาพประกอบ figcaption{
  background:#fff;
  padding:11px 16px;
  border:1px solid var(--เส้น);
  border-top:0;
  color:var(--เทา);
  font-size:.82rem;
}
.หน้าที่เกี่ยวข้อง{
  max-width:1260px;
  margin:0 auto 38px;
  padding:0 24px;
}
.หน้าที่เกี่ยวข้อง h2{margin:0 0 15px}
.ตารางหน้า{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.ลิงก์หน้า{
  display:block;
  min-height:120px;
  padding:19px;
  border-radius:20px 7px 20px 20px;
  background:#fff;
  border:1px solid var(--เส้น);
  transition:.2s ease;
}
.ลิงก์หน้า:hover{
  transform:translateY(-4px);
  border-color:#8dddf3;
  box-shadow:0 15px 30px rgba(7,168,223,.12);
}
.ลิงก์หน้า small{
  display:block;
  color:var(--ฟ้าเข้ม);
  font-weight:900;
}
.ลิงก์หน้า strong{
  display:block;
  margin-top:5px;
  font-size:1.02rem;
}
.ท้ายเว็บ{
  background:var(--กรม);
  color:#fff;
}
.ท้ายเว็บด้านใน{
  max-width:1260px;
  margin:auto;
  padding:38px 24px 24px;
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr;
  gap:32px;
}
.ตราท้ายเว็บ{
  display:inline-block;
  padding:10px 15px;
  background:#fff;
  border-radius:16px 16px 30px 16px;
}
.ตราท้ายเว็บ img{height:46px;width:auto;object-fit:contain}
.ท้ายเว็บ h3{margin:0 0 10px}
.ท้ายเว็บ p,.ท้ายเว็บ a{color:#b9ccd5;font-size:.88rem}
.ลิงก์ท้ายเว็บ a{display:block;margin:7px 0}
.แถบล่าง{
  max-width:1260px;
  margin:auto;
  padding:17px 24px 25px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#91a8b3;
  font-size:.8rem;
  display:flex;
  justify-content:space-between;
  gap:20px;
}
@media(max-width:950px){
  .โมเสก{grid-template-columns:1fr}
  .กล่องชื่อ{grid-row:auto;min-height:auto}
  .หัวข้อย่อย{grid-template-columns:1fr}
  .ตารางหน้า{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .หัวเว็บด้านใน{padding:13px 16px}
  .ตราสัญลักษณ์{min-width:auto}
  .ตราสัญลักษณ์ img{height:40px}
  .คำอธิบายหัวเว็บ{display:none}
  .เมนู{padding:9px 14px}
  .ส่วนเปิด{padding:0 14px;margin-top:18px}
  .กล่องชื่อ{padding:38px 24px;border-radius:25px 9px 25px 25px}
  .กล่องย่อ,.กล่องตรา{border-radius:20px 8px 20px 20px}
  .สารบัญ{padding:0 14px}
  .เนื้อหา{padding:0 14px;margin-top:18px}
  .บทนำ{padding:24px 21px}
  .ลิงก์เว็บ{flex-direction:column;align-items:flex-start}
  .บท{grid-template-columns:46px minmax(0,1fr);gap:10px}
  .หมายเลขบท{
    min-height:46px;
    border-radius:13px 5px 13px 5px;
    font-size:1rem;
  }
  .แผ่นบท{padding:23px 20px}
  .ภาพประกอบ{margin-left:56px}
  .หน้าที่เกี่ยวข้อง{padding:0 14px}
  .ตารางหน้า{grid-template-columns:1fr}
  .ท้ายเว็บด้านใน{grid-template-columns:1fr;padding:30px 18px 18px}
  .แถบล่าง{padding:15px 18px 22px;flex-direction:column}
}