@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--pink:#ec609c;--ink:#514967;--purple:#7970a4;--line:#f0e7ee}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:#fffafc;color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:hover,a:hover{filter:brightness(1.06)}button:focus-visible,a:focus-visible{outline:3px solid #9569c8;outline-offset:4px}.wrap{width:min(1120px,94%);margin:auto}.header{background:#fff9fbeF;border-bottom:1px solid #eddfe8;position:relative;z-index:5}.nav{min-height:78px;display:flex;align-items:center;gap:26px}.brand{font:bold italic 36px Georgia,serif;color:#db74a5;text-shadow:1px 2px white,2px 3px #76638d;letter-spacing:-2px;white-space:nowrap}.brand span{color:#8177b8}.brand small{display:block;font:8px Tahoma,sans-serif;text-align:center;letter-spacing:2px;color:#675378;text-shadow:none}.nav-links{display:flex;gap:22px;align-items:center;flex:1;justify-content:center}.nav-links a,.nav-links button{font-size:12px;font-weight:600;background:none;color:#625a71;padding:9px 0;white-space:nowrap}.nav-links .active{color:var(--pink)}.login,.pill{background:linear-gradient(#f78eb7,#e75a95);color:white;border-radius:24px;padding:9px 19px;box-shadow:0 3px 9px #e770a32b;white-space:nowrap}.login{font-size:12px}.menu-toggle{display:none}.hero{position:relative;width:min(1200px,100%);margin:auto;padding-top:44%;max-height:650px;overflow:hidden;background:#d5eafe}.hero-art{position:absolute;inset:0;background-image:url('assets/reference.jfif');background-size:100% auto;background-position:center 5.4%;mask-image:linear-gradient(#000 87%,transparent 100%)}.hero-actions{position:absolute;bottom:10%;left:21%;right:21%;display:flex;gap:18px}.cta{display:flex;justify-content:space-around;align-items:center;gap:12px;width:50%;padding:12px 16px;color:white;border:2px solid #ffdeee;border-radius:50px;box-shadow:0 0 0 5px #ffffff60,0 5px 18px #b574ab55,inset 0 2px 10px #fff9;font-size:clamp(16px,2vw,27px);font-weight:800;line-height:1.15;text-shadow:0 2px 3px #97658a}.cta small{display:block;font-size:10px;letter-spacing:1px;margin-top:5px;font-weight:400}.pink{background:linear-gradient(#fa97c4,#ef5299)}.blue{background:linear-gradient(#6cdafa,#369eea);border-color:#d7f5ff}.cta-icon{font-size:35px}.hero-tagline{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;letter-spacing:1px;background:#fffbf4bc;margin:0;padding:14px;color:#706177}.hero-tagline b{font-size:7px;color:#d486a9;margin:0 17px}.content{padding:22px 0 18px}.top-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:22px}.panel{background:#ffffffd9;border:1px solid #f4edf2;border-radius:10px;padding:17px;box-shadow:0 4px 18px #b78bad09}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px}.section-heading h1,.section-heading h2{font-size:17px;margin:0;font-weight:800}.section-heading h1 span{margin-right:6px}.text-link{font-size:11px;background:none;color:#c2769a;padding:0}.news-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}.news-item:last-child{border-bottom:0}.thumb{width:125px;height:69px;flex-shrink:0;border-radius:5px;background-image:url('assets/reference.jfif');background-size:480% auto;background-position:6% 44%}.news-copy{flex:1;min-width:0}.news-copy strong{display:block;font-size:13px;margin:5px 0 2px}.news-copy p{margin:0;font-size:11px;color:#9a91a2}.badge{font-size:9px;background:#ed70a4;color:white;border-radius:5px;padding:2px 7px;margin-right:8px}.badge.event-badge{background:#e3b844}.badge.update{background:#689cdd}.badge.notice{background:#ed897c}.date{font-size:9px;color:#aaa1ac}.chevron{color:#ae9eaf;font-size:24px}.promotions{display:flex;flex-direction:column;gap:13px}.art{background-image:url('assets/reference.jfif')}.welcome{position:relative;flex:1;min-height:245px;border-radius:9px;overflow:hidden;background-size:210% auto;background-position:97% 46%;box-shadow:0 3px 12px #c3b0d929}.welcome-label{position:absolute;right:5%;top:18%;text-align:center;color:#ad5188;font-weight:700;text-shadow:0 2px white;display:none}.welcome-label strong{display:block;font:bold italic 50px Georgia;color:#8661ae}.welcome-label span{font-size:13px;color:#62476d}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.service{text-align:center;padding:12px 8px 9px;background:linear-gradient(135deg,#d7e7fb,#fce6f5);border:2px solid white;border-radius:9px;color:#5d5073;box-shadow:0 2px 6px #9585ae24}.service:nth-child(2){background:linear-gradient(135deg,#f5d7ec,#eef3d9)}.service:nth-child(3){background:linear-gradient(135deg,#f6e1c6,#e3efff)}.service>span{display:block;font-size:42px;line-height:1.25}.service strong{display:block;font-size:14px}.service small{display:block;font-size:9px}.middle-grid{display:grid;grid-template-columns:1.3fr .68fr .68fr;gap:18px;margin-top:21px}.event{position:relative;min-height:270px;border-radius:9px;background-size:217% auto;background-position:4% 76%;overflow:hidden;text-align:left}.event-copy{display:none}.server,.rankings{padding:13px}.server .section-heading h2,.rankings h2{font-size:14px}.demo{font-size:9px;color:#a89caf}.server dl{margin:0 0 13px;font-size:11px}.server dl div{display:flex;justify-content:space-between;padding:6px 7px}.server dl div:nth-child(odd){background:#f7f4fa}.server dd{margin:0}.muted{color:#a398aa}.server .pill{display:block;margin:auto;font-size:10px;padding:7px 13px}.tabs{display:flex;background:#fbf0f6;border-radius:20px;margin-bottom:10px}.tabs button{width:33.33%;border-radius:20px;padding:5px;background:none;font-size:10px;color:#8e7696}.tabs [aria-selected=true]{background:var(--pink);color:white}.rankings ol{padding:0;margin:0;list-style:none;counter-reset:rank}.rankings li{display:flex;align-items:center;gap:10px;padding:6px;font-size:11px;counter-increment:rank}.rankings li:before{content:counter(rank);color:#a190b6;width:18px;text-align:center}.rankings li:first-child:before{background:#ffd470;border-radius:50%;color:#ac7719}.rankings li:nth-child(2):before{background:#e7e9f0;border-radius:50%}.rankings li:nth-child(3):before{background:#f3d0bc;border-radius:50%}.rankings li span{margin-left:auto;color:#9986a0}.ranking-note{font-size:9px;text-align:center;color:#aa9eb1}.footer-scene{background:linear-gradient(90deg,#f6d9e5bb,#f8d9ec66),url('assets/reference.jfif') center 98%/100% auto;padding:28px 0}.footer-top{display:flex;align-items:center;justify-content:space-around}.footer-top p{font:italic 22px Georgia;color:#ac647f;transform:rotate(-5deg);line-height:1.3}.footer-top strong{font-size:12px}.socials{display:flex;gap:12px;margin-top:8px}.socials button{height:33px;width:33px;background:#548de0;border-radius:50%;color:white;font:bold 23px Arial}.socials button:nth-child(2){background:#8876d9}.socials button:nth-child(3){background:#e16883;font-size:17px}.socials button:nth-child(4){background:#57bd92;font-size:9px}.footer-bottom{display:flex;align-items:center;gap:25px;padding:17px 0}.footer-bottom .brand{font-size:26px}.footer-bottom p{font-size:10px;color:#9c8ba6;line-height:1.8}.back-top{margin-left:auto;background:#eb75a7;color:white;border-radius:6px;padding:8px 14px;font-size:20px}dialog{border:1px solid #efdae7;border-radius:18px;max-width:440px;width:90%;padding:32px;text-align:center;color:var(--ink);box-shadow:0 20px 100px #5a376040}dialog::backdrop{background:#3d274a80;backdrop-filter:blur(4px)}dialog h2{font-size:21px}dialog p{font-size:14px;line-height:1.8}.close-dialog{position:absolute;right:12px;top:7px;font-size:28px;color:#967c98;background:none}.dialog-icon{color:var(--pink);font-size:40px}.preview-image{width:100%;border-radius:8px;margin:10px 0}.extra-news[hidden]{display:none}@media(min-width:1300px){.hero{padding-top:570px}}@media(max-width:1000px){.nav{gap:14px}.nav-links{gap:11px}.nav-links a,.nav-links button{font-size:10px}.thumb{width:95px}.middle-grid{grid-template-columns:1.1fr .8fr .8fr}.section-heading h1,.section-heading h2{font-size:15px}.news-copy strong{font-size:12px}.hero-actions{left:19%;right:19%}.event{min-height:260px}.welcome{min-height:225px}}@media(max-width:720px){.nav{min-height:69px;flex-wrap:wrap;padding:10px 0}.brand{font-size:30px}.menu-toggle{display:block;margin-left:auto;background:#f8e9f2;border-radius:8px;padding:7px 10px;color:#8e6484}.login{padding:8px 12px}.nav-links{display:none;width:100%;order:4;flex-basis:100%;flex-wrap:wrap;padding:10px;justify-content:flex-start;gap:12px 20px}.nav-links.open{display:flex}.nav-links a,.nav-links button{font-size:12px}.hero{padding-top:56%}.hero-art{background-size:115% auto;background-position:center 5.4%}.hero-actions{left:12%;right:12%;bottom:13%;gap:10px}.cta{padding:8px;font-size:17px}.cta small{font-size:7px}.cta-icon{font-size:24px}.hero-tagline{font-size:9px;padding:9px;letter-spacing:0}.hero-tagline b{margin:0 9px}.top-grid{grid-template-columns:1fr;gap:16px}.content{padding-top:14px}.welcome{min-height:230px;background-size:210% auto}.middle-grid{grid-template-columns:1fr 1fr;gap:12px}.event{grid-column:1/-1;aspect-ratio:1.9;min-height:0;background-size:217% auto}.news-copy strong{font-size:14px}.thumb{width:110px}.footer-top p{font-size:17px}.footer-bottom{gap:16px}.footer-bottom p{font-size:8px}.section-heading h1{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Keep the reference's printed buttons behind the functional controls out of view. */
.hero{background:#f7edf7}.hero-art{mask-image:linear-gradient(#000 65%,transparent 80%)}.thumb{background-size:850% auto}

/* Desktop layout enlarged by approximately 25%; small screens keep their responsive layout. */
@media (min-width: 1001px) {
  body { font-size: 17.5px; }
  .wrap { width: min(1400px, 94%); }
  .nav { min-height: 97.5px; gap: 32.5px; }
  .brand { font-size: 45px; }
  .brand small { font-size: 10px; }
  .nav-links { gap: clamp(12px, 1.5vw, 27.5px); }
  .nav-links a, .nav-links button, .login { font-size: 15px; }
  .login, .pill { padding: 11px 24px; }
  .hero { width: min(1500px, 100%); padding-top: 0; aspect-ratio: 40 / 19; max-height: none; }
  .hero-actions { gap: 22.5px; }
  .cta { padding: 15px 20px; font-size: clamp(20px, 2.3vw, 33.75px); }
  .cta small { font-size: 12.5px; }
  .cta-icon { font-size: 43.75px; }
  .hero-tagline { font-size: 15px; padding: 17.5px; }
  .content { padding: 27.5px 0 22.5px; }
  .top-grid { gap: 27.5px; }
  .panel { padding: 21px; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h1, .section-heading h2 { font-size: 21.25px; }
  .text-link { font-size: 13.75px; }
  .news-item { gap: 15px; padding: 12.5px 0; }
  .thumb { width: 156px; height: 86px; }
  .news-copy strong { font-size: 16.25px; }
  .news-copy p { font-size: 13.75px; }
  .badge, .date { font-size: 11.25px; }
  .welcome { min-height: 306px; }
  .promotions { gap: 16px; }
  .service-grid { gap: 12.5px; }
  .service { padding: 15px 10px 11px; }
  .service > span { font-size: 52.5px; }
  .service strong { font-size: 17.5px; }
  .service small { font-size: 11.25px; }
  .middle-grid { gap: 22.5px; margin-top: 26px; }
  .event { min-height: 337.5px; }
  .server, .rankings { padding: 16px; }
  .server .section-heading h2, .rankings h2 { font-size: 17.5px; }
  .demo, .ranking-note { font-size: 11.25px; }
  .server dl { font-size: 13.75px; }
  .server dl div { padding: 7.5px 9px; }
  .server .pill, .tabs button { font-size: 12.5px; }
  .tabs button { padding: 6.25px; }
  .rankings li { padding: 7.5px; font-size: 13.75px; }
  
  
  .footer-scene { padding: 35px 0; }
  .footer-top p { font-size: 27.5px; }
  .footer-top strong { font-size: 15px; }
  .socials button { height: 41px; width: 41px; }
  .footer-bottom { padding: 21px 0; }
  .footer-bottom .brand { font-size: 32.5px; }
  .footer-bottom p { font-size: 12.5px; }
}
/* Keep the larger navigation comfortable on smaller desktop displays. */
@media (min-width: 1001px) and (max-width: 1250px) {
  .nav { gap: 16px; }
  .nav-links a, .nav-links button, .login { font-size: 12px; }
  .login { padding: 10px 15px; }
  .thumb { width: 125px; }
  .server .section-heading, .rankings .section-heading { flex-wrap: wrap; }
}

/* Homepage cover supplied by the project owner. */
.hero-art {
  background-image: url('assets/bg.png');
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  mask-image: none;
}

/* Fill the first screen beneath the navigation on every screen size. */
:root { --header-height: 79px; }
@media (min-width: 1001px) { :root { --header-height: 98.5px; } }
@media (max-width: 720px) { :root { --header-height: 70px; } }
.hero {
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  min-height: 240px;
  max-height: none;
  padding-top: 0;
  aspect-ratio: auto;
}
.hero-actions { bottom: max(10%, 65px); }
@media (max-width: 720px) {
  .hero-actions { left: 5%; right: 5%; bottom: max(10%, 48px); }
}


/* Compact translucent navigation over the actual cover image. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 249, 252, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(94, 65, 111, 0.06);
}
.header .nav { min-height: 64px; }
.hero { height: 100vh; height: 100dvh; }
@media (min-width: 1001px) {
  .header .nav { min-height: 76px; }
  .header .brand { font-size: 38px; }
  .header .login { padding: 9px 20px; }
}
@media (max-width: 720px) {
  .header .nav { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
}

/* Full-screen looping video cover; keep the original image as its poster. */
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  pointer-events: none;
}

/* Compact primary buttons, centered over the cover. */
.hero-actions {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(540px, 90%);
  gap: 16px;
}
.hero-actions .cta {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  gap: 8px;
  font-size: 20px;
}
.hero-actions .cta small { font-size: 9px; margin-top: 4px; }
.hero-actions .cta-icon { font-size: 28px; }
@media (max-width: 720px) {
  .hero-actions { width: min(420px, 90%); gap: 12px; }
  .hero-actions .cta { padding: 8px 10px; font-size: 16px; gap: 5px; }
  .hero-actions .cta small { font-size: 7px; }
  .hero-actions .cta-icon { font-size: 22px; }
}

/* Floating server logo with a slow, alpha-masked light sweep. */
.hero-logo {
  position: absolute;
  top: calc(var(--header-height) + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 65vw, 94vh);
  width: min(700px, 65vw, 94dvh);
  pointer-events: none;
}
.hero-logo-float {
  position: relative;
  animation: logo-float 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(67, 37, 89, .25));
}
.hero-logo img { display: block; width: 100%; height: auto; }
.hero-logo-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url('assets/logo.png') center / 100% 100% no-repeat;
  mask: url('assets/logo.png') center / 100% 100% no-repeat;
}
.hero-logo-shine::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 211, .2) 25%, rgba(255, 255, 255, .65) 50%, rgba(255, 241, 221, .2) 75%, transparent);
  transform: skewX(-18deg);
  animation: logo-shine 9s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-9px) rotate(.35deg); }
}
@keyframes logo-shine {
  0%, 12% { left: -45%; }
  78%, 100% { left: 120%; }
}
@media (max-width: 720px) {
  .hero-logo { width: min(77vw, 81vh); width: min(77vw, 81dvh); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-float { animation: none; }
  .hero-logo-shine { display: none; }
}



/* Soft cherry blossom petals over the cover, below its controls and logo. */
.sakura-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-logo, .hero-actions, .hero-tagline { z-index: 2; }
.sakura-petal {
  position: absolute;
  top: -24px;
  left: var(--petal-x);
  width: var(--petal-size);
  height: calc(var(--petal-size) * .72);
  border-radius: 80% 12% 75% 30%;
  background: radial-gradient(ellipse at 25% 25%, #fff5f9, #ffc4dc 48%, #ed88b4);
  box-shadow: inset 1px 1px 2px #ffffff99, 0 1px 3px #b8618c22;
  opacity: 0;
  animation: sakura-fall var(--fall-time) linear var(--fall-delay) infinite;
}
@keyframes sakura-fall {
  0% { transform: translate3d(0, -25px, 0) rotate(0deg); opacity: 0; }
  8% { opacity: var(--petal-opacity); }
  30% { transform: translate3d(calc(var(--petal-drift) * -.25), 30vh, 0) rotate(100deg) rotateY(40deg); }
  60% { transform: translate3d(calc(var(--petal-drift) * .7), 62vh, 0) rotate(220deg) rotateY(-35deg); }
  90% { opacity: var(--petal-opacity); }
  100% { transform: translate3d(var(--petal-drift), calc(100vh + 40px), 0) rotate(360deg) rotateY(30deg); opacity: 0; }
}
.sakura-layer.is-paused .sakura-petal { animation-play-state: paused; }
@media (max-width: 720px) {
  .sakura-petal:nth-child(n+15) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-layer { display: none; }
  .sakura-petal { animation: none; }
}


/* Sunset artwork across the complete footer. */
footer#community {
  background: linear-gradient(to bottom, rgba(42, 26, 61, .08), rgba(27, 20, 43, .65)), url('assets/ft.png') center center / cover no-repeat;
  color: #fff4fb;
}
#community .footer-scene {
  background: none;
  min-height: clamp(210px, 23vw, 360px);
  display: flex;
  align-items: flex-start;
  padding-top: 32px;
}
#community .footer-top p, #community .footer-top strong {
  color: #fff4fb;
  text-shadow: 0 2px 6px rgba(35, 20, 48, .85);
}
#community .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .2);
}
#community .footer-bottom p { color: #f5e8f4; }
#community .footer-bottom .brand small { color: #f5e8f4; }
@media (max-width: 720px) {
  #community .footer-scene { min-height: 220px; padding-top: 20px; }
}

/* Compact footer with another 10% height increase. */
#community .footer-scene {
  min-height: clamp(152.46px, 16.698vw, 261.36px);
  padding: 22.99px 0 14.52px;
}
#community .footer-top p { margin: 0; }
#community .footer-bottom { padding: 16.3px 0; }
#community .footer-bottom p { margin: 0; }
#community .footer-bottom .brand { font-size: 26px; }
#community .back-top { padding: 3px 10px; font-size: 18px; }
@media (max-width: 720px) {
  #community .footer-scene { min-height: 159.72px; padding: 14.52px 0 12.1px; }
}





/* Banner above the service shortcuts. */
.welcome.art {
  background-image: url('assets/bd.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Individual news images, ordered new1 through new4. */
.news-item img.thumb {
  display: block;
  object-fit: cover;
  object-position: center;
  background: none;
}

/* News rows size naturally to the articles returned by pagination. */
#news { min-width: 0; align-self: start; }
#news-list { height: auto; display: flex; flex-direction: column; overflow: hidden; }
.news-rows { flex: none; min-height: 0; display: grid; grid-auto-rows: auto; }
.news-rows .news-item { min-height: 0; overflow: hidden; padding: 6px 0; }
.news-rows .thumb { max-height: 100%; }
.news-rows .news-copy strong, .news-rows .news-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; border-top: 1px solid var(--line); font-size: 10px; }
.news-pagination button { padding: 7px 0; }
.news-pagination button:disabled { opacity: .4; cursor: default; }
.news-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.news-detail { overflow: auto; height: 100%; padding: 4px 10px 12px 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; }
.news-detail h3 { margin-top: 0; color: #b64d86; }
.news-detail-date { color: #9a91a2; font-size: 11px; }
.news-detail img, .news-detail img.thumb { display: block; width: auto; height: auto; max-width: 100%; margin: 10px auto; background: none; }
.news-detail table { max-width: 100%; border-collapse: collapse; }
.news-detail td, .news-detail th { border: 1px solid var(--line); padding: 5px; }
@media (min-width: 1001px) { #news-list { height: auto; } }

/* Category controls fit inside the existing news panel height. */
.news-filters {
  display: flex;
  gap: 4px;
  height: 36px;
  margin-bottom: 8px;
  overflow-x: auto;
  align-items: center;
}
.news-filters button {
  flex: 1 0 auto;
  border-radius: 16px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #8b6684;
  background: #fbf0f6;
  white-space: nowrap;
}
.news-filters button[aria-pressed="true"] {
  color: white;
  background: linear-gradient(#f78eb7, #e75a95);
}
#news-list { height: auto; }
@media (min-width: 1001px) { #news-list { height: auto; } }

/* Pastel pagination and temporary server-logo covers for every news item. */
.news-pagination {
  flex-shrink: 0;
  min-height: 48px;
  padding: 7px 2px 0;
  gap: 8px;
  border-top: 1px solid #f0dce9;
}
.news-pagination button {
  padding: 7px 14px;
  border: 1px solid #f5c9df;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff3f9, #f9ddeb);
  color: #aa477b;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 5px #c785a51a, inset 0 1px 0 #fff;
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
}
.news-pagination button:last-child {
  background: linear-gradient(135deg, #edf9ff, #dcedfc);
  border-color: #c6e1f5;
  color: #5384b0;
}
.news-pagination button:hover:not(:disabled) { box-shadow: 0 3px 10px #bd8ab43b; background: #fce0ee; }
.news-pagination button:last-child:hover:not(:disabled) { background: #d6edff; }
.news-pagination button:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.news-page-indicator {
  border: 1px solid #eee0f3;
  border-radius: 16px;
  padding: 6px 12px;
  background: #f8f2fc;
  color: #8a699e;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.news-item img.news-logo {
  object-fit: contain;
  padding: 6px;
  background: linear-gradient(135deg, #fff2f8, #eaf5ff);
  border: 1px solid #f0e1ed;
  border-radius: 8px;
}
.news-detail img.news-logo {
  width: min(100%, 360px);
  height: auto;
  padding: 16px;
  object-fit: contain;
  background: linear-gradient(135deg, #fff2f8, #eaf5ff);
  border-radius: 10px;
}
@media (max-width: 400px) {
  .news-pagination { gap: 4px; }
  .news-pagination button { padding: 7px 9px; }
  .news-page-indicator { padding: 6px 8px; font-size: 10px; }
}

/* Larger news covers and taller rows, keeping three articles per page. */
#news-list { height: auto; }
.news-rows .news-item { padding: 8px 0; gap: 14px; }
.news-rows img.thumb { width: 285px; height: 115px; max-width: 65%; }
.news-rows .news-copy strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (min-width: 1001px) {
  #news-list { height: auto; }
  .news-rows img.thumb { width: 300px; height: 175px; }
  .news-rows .news-item { gap: 18px; }
}
@media (max-width: 480px) {
  #news-list { height: auto; }
  .news-rows img.thumb { width: 220px; height: 100px; }
  .news-rows .news-item { gap: 10px; }
}
/* Four-image banner in the existing welcome slot. */
.welcome.banner-slider { background: #f9eaf3; isolation: isolate; touch-action: pan-y; }
.banner-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.banner-slide.is-active { opacity: 1; }
.banner-slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.banner-arrow { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 36px; height: 44px; border: 1px solid #ffffffb0; border-radius: 14px; background: #fff3f9cf; color: #aa5486; font-size: 30px; line-height: 1; box-shadow: 0 3px 12px #80536a25; }
.banner-prev { left: 12px; }.banner-next { right: 12px; }
.banner-controls { position: absolute; z-index: 1; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 2px 6px; border-radius: 24px; background: #fff5fbdc; box-shadow: 0 3px 12px #80536a25; }
.banner-dots { display: flex; }
.banner-dots button { width: 28px; height: 32px; padding: 0; background: transparent; display: grid; place-items: center; }
.banner-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 8px; background: #c9aed0; transition: width .2s; }
.banner-dots button[aria-pressed=true]::before { width: 19px; background: linear-gradient(90deg,#e969a1,#87beee); }
.banner-pause { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #9b5684; }
@media(prefers-reduced-motion: reduce) { .banner-slide { transition: none; } }

/* Job class selector replaces the First Login artwork. */
.job-card { min-width: 0; position: relative; overflow: hidden; border: 1px solid #e1e1f4; border-radius: 12px; background: linear-gradient(150deg,#f6eafaed,#e6f3ffe8 55%,#fff5f5ed),url('assets/bg.png') center / cover; box-shadow: 0 5px 20px #9e84b214; }
.job-heading { text-align: center; padding: 14px 12px 0; color: #9c84b0; }
.job-heading > span { font-size: 10px; letter-spacing: 1px; }
.job-heading h2 { margin: 2px 0; font: 27px Georgia,serif; letter-spacing: 5px; color: #776595; text-shadow: 0 2px white; }
.job-heading > div { font-size: 10px; color: #b7a3ce; }
.job-content { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 6px; padding: 10px 16px 14px; min-height: 220px; }
.job-kicker { margin: 0 0 4px; color: #aa749c; font-size: 10px; }
.job-copy h3 { margin: 0 0 8px; font: bold 21px Georgia,serif; color: #8772b2; letter-spacing: 1px; }
#job-description { margin: 0; font-size: 12px; line-height: 1.8; color: #746781; }
.job-path { font-size: 10px; color: #6699bd; margin: 9px 0; }
.job-more { background: #fff9; border: 1px solid #e7cce1; color: #aa568b; padding: 7px 12px; border-radius: 20px; font-size: 10px; box-shadow: 0 2px 6px #ab89aa16; }
.job-portrait { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; }
.job-aura { position: absolute; width: 95%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#ffffffd9,#d6eaf5aa 55%,transparent 70%); z-index: -1; }
.job-portrait img { width: min(100%,180px); height: 150px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 6px #9376b12b); }
.job-portrait > span { font-size: 11px; color: #9a80aa; margin-top: 6px; }
.job-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3px; border-top: 1px solid #d6e4f5; padding: 10px 8px; background: #fffc; }
.job-tabs button { min-width: 0; padding: 0; background: transparent; color: #a293ad; font-size: 9px; }
.job-tabs button span { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 4px; border-radius: 50%; border: 2px solid #ede6f2; background: linear-gradient(#fff,#e9e5f2); font-size: 21px; box-shadow: 0 2px 4px #776c891c; }
.job-tabs button[aria-selected=true] { color: #c25791; font-weight: 700; }
.job-tabs button[aria-selected=true] span { background: linear-gradient(#f8a3c9,#e269a7); border-color: #fff; color: white; box-shadow: 0 0 0 2px #ecc6e1,0 2px 8px #db93bd50; }
@media(max-width:720px) { .job-card { grid-column: 1 / -1; } .job-content { min-height: 200px; } }

/* Full news pages share Ople's navbar, cover, and footer includes. */
.article-layout { padding: 28px 0 38px; }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; margin-bottom: 20px; color: #a36d95; overflow-wrap: anywhere; }
.article-card { background: #fff; border: 1px solid #f0dfea; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px #c09ab512; }
.article-heading { padding: 28px 34px; background: linear-gradient(120deg,#fff1f8,#ecf7ff); border-bottom: 1px solid #f0e4ef; }
.article-heading h1 { font-size: clamp(22px,2.5vw,32px); margin: 12px 0; overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 12px; color: #9a839f; }
.article-intro { text-align: center; padding: 28px 24px 8px; }
.article-intro img { display: block; width: min(360px,80%); height: auto; margin: auto; }
.article-intro p { color: #967897; }
.article-body { padding: 12px 34px 28px; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; overflow-x: auto; }
.article-body img { max-width: 100%; height: auto; vertical-align: middle; }
.article-body table { border-collapse: collapse; max-width: 100%; margin: 18px auto; }
.article-body td,.article-body th { border: 0; padding: 10px 14px; }
.article-body tr:nth-child(odd) { background: transparent; }
.article-body h1,.article-body h2,.article-body h3 { color: #a75c91; }
.article-updated { margin: 0; padding: 16px 34px; background: #faf5fc; color: #95739c; font-size: 12px; }
.article-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 34px; }
.article-neighbors a,.neighbor-disabled { min-width: 0; border: 1px solid #efd5e6; border-radius: 12px; padding: 16px; background: linear-gradient(125deg,#fff3f9,#eef7ff); }
.article-neighbors small,.article-neighbors strong { display: block; }
.article-neighbors small { color: #b36597; margin-bottom: 7px; }
.article-neighbors strong { overflow-wrap: anywhere; font-size: 14px; }
.neighbor-disabled { color: #b9aebb; background: #faf7fb; }
.article-back { display: inline-block; margin-top: 22px; }
.article-empty { padding: 40px; text-align: center; }
@media(max-width:720px) { .article-heading,.article-body { padding: 20px 16px; } .article-neighbors { grid-template-columns: 1fr; padding: 18px 16px; } .article-meta { gap: 10px; } }

/* Article title, date and view count share one heading row. */
.article-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.article-title-row h1 { flex: 1; min-width: 0; }
.article-title-row .article-meta { flex-shrink: 0; gap: 14px; }
.article-title-row .article-meta time, .article-title-row .article-meta span { white-space: nowrap; }
@media(max-width:600px) {
  .article-title-row { flex-wrap: wrap; gap: 0; }
  .article-title-row h1 { flex-basis: 100%; }
  .article-title-row .article-meta { font-size: 11px; }
}

/* Rounded article header with a contrasting top rim, matching the reference. */
.article-page .article-card {
  border-color: #ecd4e5;
  border-radius: 24px 24px 16px 16px;
}
.article-page .article-heading {
  position: relative;
  padding: 12px 30px 8px;
  background: linear-gradient(120deg, #fff1f8, #ecf7ff);
  border-bottom: 1px solid #dec5df;
  box-shadow: inset 0 7px 0 #ffffff26;
}
.article-page .article-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #c95b97, #a980c0 52%, #73acd5);
}
.article-page .article-heading h1 { color: #62456d; text-shadow: 0 1px 0 #ffffff70; }
.article-page .article-heading .article-meta { color: #705a7a; }
.article-page .article-heading > .badge {
  background: #fff9;
  color: #a04d82;
  border: 1px solid #ffffffad;
}
@media(max-width:720px) {
  .article-page .article-heading { padding: 12px 16px 10px; }
}

.article-page .article-heading h1 { margin: 5px 0; line-height: 1.35; }


/* Category badge followed by date and views, above the article title. */
.article-category-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 7px; }
.article-page .article-category-badge {
  display: inline-flex;
  align-items: center;
  background: #ed70a4;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 7px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.article-category-row .article-meta { gap: 12px; font-size: 11px; }
.article-category-row time, .article-category-row .article-meta span { white-space: nowrap; }

/* Keep the database editor's article formatting scoped to the article body. */
.article-body { isolation: isolate; contain: layout paint; }
.article-body pre { max-width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: 'Kanit', 'Noto Sans Thai', sans-serif; }
.article-body .event-cbt-layout { width: 100%; }
.article-body .event-cbt-section { max-width: 100%; }
.article-body .event-cbt-section-copy-top { left: 18% !important; width: 64% !important; }
@media(max-width:720px) {
  .article-body .event-cbt-section { padding: 22px 14px !important; }
  .article-body .event-cbt-section-badge { position: relative !important; top: auto !important; left: auto !important; display: inline-flex !important; margin-bottom: 12px; }
  .article-body .event-cbt-section font[size="6"] { font-size: 26px; }
}

/* Guide directory: database topic navigation and reading panel. */
.guide-layout { display: grid; grid-template-columns: 305px minmax(0, 1fr); gap: 24px; padding: 36px 0 48px; align-items: start; scroll-margin-top: 90px; }
.guide-sidebar { border: 1px solid #e8ddec; border-radius: 20px; background: #fff; box-shadow: 0 10px 32px #70527912; overflow: hidden; }
.guide-sidebar::before { content: ''; display: block; height: 6px; background: linear-gradient(90deg,#cf6ca4,#76b6d8); }
.guide-sidebar h2 { margin: 0; padding: 14px 18px; font-size: 19px; color: #62456d; border-bottom: 1px solid #eee4ef; }
.guide-menu { display: grid; gap: 9px; padding: 12px; }
.guide-menu a { display: flex; align-items: center; gap: 9px; padding: 12px 10px; border: 1px solid #ece5ef; border-radius: 15px; color: #62506e; background: #fff; font-size: 14px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; transition: background .2s, box-shadow .2s; }
.guide-menu a::before { content: ''; width: 3px; height: 20px; background: #f0c6dd; border-radius: 3px; flex-shrink: 0; }
.guide-menu a:hover, .guide-menu a.selected { background: linear-gradient(110deg,#fff1f8,#edf7ff); border-color: #ddbad5; box-shadow: 0 5px 14px #76507116; }
.guide-menu a.selected::before { background: #ce6a9f; }
.guide-menu a:focus-visible { outline: 3px solid #81b7d7; outline-offset: 2px; }
.guide-content { min-width: 0; }
.guide-page .guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 22px; }
.guide-page .guide-heading h1 { font-size: clamp(21px,2vw,27px); }
.guide-heading .article-meta { flex-shrink: 0; font-size: 13px; }
.guide-content .article-body { padding: 30px 38px 30px 5px; min-height: 420px; }
.guide-menu-empty { padding: 10px; color: #856e8a; }
@media(max-width:900px) { .guide-layout { grid-template-columns: 240px minmax(0,1fr); gap: 16px; } .guide-content .article-body { padding: 24px 20px 24px 12px; } }
@media(max-width:640px) { .guide-layout { grid-template-columns: 1fr; padding-top: 22px; } .guide-menu { max-height: 280px; overflow-y: auto; } .guide-page .guide-heading { flex-wrap: wrap; } .guide-content .article-body { padding: 20px 16px 20px 10px; } }

/* Darken news categories on hover instead of the global brightness effect. */
.news-filters button:hover,
.news-filters button:focus-visible {
  background: #edc3d9;
  color: #70415f;
  filter: none;
}
.news-filters button[aria-pressed="true"]:hover,
.news-filters button[aria-pressed="true"]:focus-visible {
  background: linear-gradient(#e778a6, #cf4380);
  color: #fff;
}

/* A gentle lift for the main navigation links and action buttons. */
.header .nav-links > a,
.header .nav-links > button {
  display: inline-block;
  transition: transform .2s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header .nav-links > a:hover,
  .header .nav-links > button:hover {
    transform: translateY(-3px);
  }
}

/* Content-only layout from page/index9999.php; preserve the Ople heading/shell. */
.article-body.article-reference-body {
  padding: 16px;
  background: #fff;
  color: #212529;
  font-size: 16px;
  line-height: 1.5;
}
.article-reference-body p { margin-top: 0; margin-bottom: 16px; }
.article-reference-body img { max-width: 100%; height: auto; }
.article-reference-body h1,.article-reference-body h2,.article-reference-body h3 { color: inherit; }
.article-reference-body table { margin: 0 0 16px; border-collapse: collapse; }
.article-reference-body td,.article-reference-body th { border: 0; padding: 0; }
.article-reference-body tr:nth-child(odd) { background: transparent; }
.article-reference-body .article-table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 16px; }
.article-reference-body .table { width: 100%; table-layout: auto; }
.article-reference-body .table td,.article-reference-body .table th { vertical-align: top; padding: 8px; border-bottom: 1px solid #dee2e6; }

/* Align article content with the title, including legacy PRE/tab layouts. */
.article-reference-body .article-content-table {
  margin-left: 0 !important;
}
@media (max-width: 720px) {
  .article-reference-body .article-content-table { margin-left: 0 !important; }
}
.article-page .article-reference-body { padding-left: 30px; padding-right: 30px; }
.article-page .article-reference-body pre { tab-size: 0; }
@media (max-width: 720px) {
  .article-page .article-reference-body { padding-left: 16px; padding-right: 16px; }
}
/* The editor preview owns content formatting; the Ople shell stays outside. */
.article-page .article-body.article-reference-body { padding: 0; overflow: hidden; }
.article-editor-preview { display: block; width: 100%; min-height: 100px; border: 0; background: #fff; }

/* Reserve three news slots so filters and pagination do not shift the layout. */
#news-list { --news-row-height: 132px; height: calc(var(--news-row-height) * 3 + 48px); }
#news-list .news-rows { flex: 1; grid-auto-rows: var(--news-row-height); align-content: start; }
#news-list .news-pagination { height: 48px; }
@media (min-width: 1001px) {
  #news-list { --news-row-height: 192px; }
}
@media (max-width: 480px) {
  #news-list { --news-row-height: 117px; }
}

/* Read-more label belongs to the existing article link. */
.news-rows .news-item { position: relative; }
.news-rows .news-copy { margin-bottom: 28px; max-height: calc(100% - 28px); overflow: hidden; }
.news-read-more { position: absolute; right: 0; bottom: 9px; display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid #e4c6e0; border-radius: 9px; background: linear-gradient(115deg,#fce1ef,#e8ddf6 60%,#deeffb); color: #87547f; font-size: 11px; font-weight: 600; line-height: 1.4; box-shadow: 0 2px 6px #b982ac20; transition: background .2s, box-shadow .2s; }
.news-item:hover .news-read-more, .news-item:focus-visible .news-read-more { background: linear-gradient(115deg,#f5c7e0,#d9c8ee,#c9e5f7); box-shadow: 0 3px 8px #b982ac35; }
@media(max-width:480px) { .news-read-more { padding: 4px 7px; font-size: 10px; } }

/* Align guide content with its 22px title inset, removing the legacy table indent. */
.guide-page .guide-content .article-body { padding-left: 22px; }
.guide-page .guide-content .article-body > table { margin-left: 0 !important; }
.guide-page .guide-content .article-body > table > tbody > tr > td:first-child,
.guide-page .guide-content .article-body > table > tbody > tr > th:first-child,
.guide-page .guide-content .article-body > table > tr > td:first-child,
.guide-page .guide-content .article-body > table > tr > th:first-child { padding-left: 0; }

/* Give guide articles more room while preserving the sidebar width. */
@media (min-width: 901px) {
  .guide-page .guide-layout { width: min(1540px, 97%); }
}

/* Guide shares the isolated article renderer and spacing used by page. */
.guide-page .guide-content .article-body.article-reference-body { padding: 0; min-height: 0; }


/* Background music control */
.music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;padding:8px 10px;border:1px solid #e4cde2;border-radius:22px;background:linear-gradient(120deg,#fff0f7,#edf5ff);color:#815681;font-size:12px;white-space:nowrap}
.music-toggle[aria-pressed="true"]{background:#f5dfed;color:#a24c7b}
@media(max-width:1000px){.music-toggle .music-label{display:none}.music-toggle{width:34px;height:34px;padding:0}}