/* ============================================================
   DBF UP — assets/css/pages/404.css
   หน้า "ไม่พบหน้าที่ท่านต้องการ" (404.html ที่รากเว็บ)

   ⚠️ ไฟล์นี้ต้องโหลด "หลัง" assets/css/pages/dbf-shell.css เสมอ
      ตัวแปรสีและสไตล์ header/footer อยู่ในไฟล์นั้น
   ============================================================ */

/* ---------- พื้นฐานของหน้า (ชุดเดียวกับหน้าอื่นในโฟลเดอร์ page/) ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Kanit',sans-serif;font-weight:300;
  background:var(--paper);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
/* ⚠️ ต้องมีบรรทัดนี้ ไม่งั้นจะมีจุดกลม ๆ ของรายการโผล่หน้าเมนูทุกอัน
      เพราะเมนูใน components/header.html สร้างจาก <ul><li> */
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--green);color:#fff}

html[data-theme="dark"]{
  --paper:#0B0F14;--mist:#10161C;--ink:#EDF2EE;
  --line:rgba(163,79,214,.22);
}
html[data-theme="dark"] body{background:#0B0F14;color:#EDF2EE}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;
  font-size:14px;transition:top .3s;
}
.skip-link:focus{top:16px}

.bg-aurora{
  position:fixed;inset:-14%;z-index:0;pointer-events:none;
  filter:blur(72px) saturate(1.15);opacity:.5;
  background:
    radial-gradient(36% 32% at 16% 26%, rgba(156,63,204,.42), transparent 70%),
    radial-gradient(42% 38% at 84% 20%, rgba(42,216,127,.4), transparent 70%),
    radial-gradient(34% 34% at 62% 80%, rgba(122,91,208,.3), transparent 70%),
    radial-gradient(30% 30% at 30% 86%, rgba(98,229,161,.28), transparent 70%);
  animation:aurora-drift 24s ease-in-out infinite alternate;
  will-change:transform;
}
html[data-theme="dark"] .bg-aurora{opacity:.32;filter:blur(80px) saturate(1.2)}
@keyframes aurora-drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,2%,0) scale(1.06)}
}

.wrap{max-width:var(--page-w,1400px);margin:0 auto;padding:0 48px}

.ph-orb{
  position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;
  animation:orbFloat 11s ease-in-out infinite alternate;
}
.ph-orb.o1{width:280px;height:280px;right:6%;top:-70px;background:radial-gradient(circle,rgba(183,107,224,.75),transparent 70%)}
.ph-orb.o2{width:220px;height:220px;left:3%;bottom:-80px;background:radial-gradient(circle,rgba(42,216,127,.65),transparent 70%);animation-delay:-5.5s}
html[data-theme="dark"] .ph-orb{opacity:.3}
@keyframes orbFloat{from{transform:translateY(-14px)}to{transform:translateY(16px)}}


/* ============================================================
   ส่วนหัวของหน้า — สองคอลัมน์ : คำอธิบาย | ภาพผังอาคาร
   ============================================================ */
.nf{position:relative;padding:150px 0 40px;overflow:hidden}

.nf-wrap{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;align-items:center;
}

/* ---------- เลข 404 ---------- */
.nf-code{
  display:block;font-weight:200;line-height:.86;letter-spacing:-.04em;
  font-size:clamp(76px, 12vw, 150px);
  background:linear-gradient(100deg,#9C3FCC 0%,#6197A3 46%,#2AD87F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:10px;
}

.nf h1{font-weight:300;font-size:clamp(26px, 3.6vw, 40px);line-height:1.25;margin-bottom:16px}
.nf h1 .grad{
  background:linear-gradient(100deg,#9C3FCC 0%,#6197A3 48%,#2AD87F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.nf-sub{max-width:56ch;font-size:14.6px;line-height:1.95;color:rgba(11,20,14,.62)}
html[data-theme="dark"] .nf-sub{color:rgba(237,242,238,.6)}

/* ---------- ที่อยู่ที่เรียกมา ---------- */
.nf-url{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  margin-top:20px;padding:11px 15px;border-radius:13px;
  font-size:12.2px;line-height:1.7;
  background:var(--mist);border:1px solid var(--line);
}
.nf-url > i{color:#C0522B;font-size:12px;flex:none}
.nf-url > span{opacity:.6;flex:none}
.nf-url code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.6px;
  /* ⚠️ ที่อยู่ยาว ๆ ต้องตัดบรรทัดได้ ไม่งั้นกล่องจะดันหน้าจนเลื่อนซ้ายขวาได้ */
  word-break:break-all;min-width:0;opacity:.9;
}
html[data-theme="dark"] .nf-url{background:rgba(255,255,255,.04)}

/* ---------- กล่องเดาหน้าที่ผู้ใช้น่าจะหา ---------- */
.nf-guess{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:14px;padding:15px 17px;border-radius:15px;
  border:1px solid rgba(20,168,98,.3);
  background:linear-gradient(180deg,rgba(20,168,98,.08),rgba(20,168,98,.02));
  animation:nfIn .45s cubic-bezier(.2,.8,.3,1) both;
}
.nf-guess > i{
  flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:13px;color:#fff;background:linear-gradient(135deg,#14A862,#0E6B41);
}
.nf-guess b{display:block;font-weight:400;font-size:12.6px;opacity:.7;margin-bottom:3px}
.nf-guess a{
  font-size:14.5px;color:#0E6B41;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
html[data-theme="dark"] .nf-guess a{color:var(--green-leaf,#62E5A1)}
@keyframes nfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ปุ่ม ---------- */
.nf-act{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.nf-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 24px;border-radius:100px;font:inherit;font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.6);color:inherit;
  transition:.25s var(--ease,ease);
}
html[data-theme="dark"] .nf-btn{background:rgba(255,255,255,.05)}
.nf-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(11,20,14,.6)}
.nf-btn.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#14A862,#0E6B41);
  box-shadow:0 16px 34px -18px rgba(20,168,98,.9);
}
html[data-theme="dark"] .nf-btn.primary{background:linear-gradient(135deg,#14A862,#0E6B41);color:#fff}

/* ---------- บรรทัดขอความช่วยเหลือ ---------- */
.nf-help{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:26px;padding-top:20px;border-top:1px dashed var(--line);
  font-size:12.4px;line-height:1.95;color:rgba(11,20,14,.55);
}
html[data-theme="dark"] .nf-help{color:rgba(237,242,238,.55)}
.nf-help > i{flex:none;margin-top:4px;font-size:11.5px;opacity:.8}
.nf-help a{
  display:inline-block;text-decoration:underline;text-underline-offset:3px;
  /* ⚠️ เบอร์โทรกับอีเมลห้ามตัดกลางคำ ไม่งั้นผู้ใช้ก๊อปไปใช้ผิด
        แต่ต้องเป็น inline-block ด้วย ทั้งก้อนจะได้ตกบรรทัดใหม่ทั้งอัน
        ไม่ใช่ดันความกว้างจนหน้าเลื่อนซ้ายขวาได้ */
  white-space:nowrap;max-width:100%;
}
.nf-help b{font-weight:300;opacity:.4;margin:0 7px}

/* ---------- ภาพผังอาคาร ---------- */
.nf-art{color:var(--ink);opacity:.92}
.nf-art svg{width:100%;height:auto}
.nf-paper{color:var(--ink);opacity:.5}
html[data-theme="dark"] .nf-paper{opacity:.35}

/* ห้องที่หายไป — เส้นประวิ่งช้า ๆ ให้สายตาไปหยุดตรงนั้น */
.nf-gap{animation:nfDash 3.4s linear infinite}
@keyframes nfDash{to{stroke-dashoffset:-34}}

.nf-q{
  font-family:'Kanit',sans-serif;font-weight:200;font-size:40px;
  fill:currentColor;opacity:.5;
}
.nf-dim{color:var(--ink)}


/* ============================================================
   ทางลัดไปหน้าที่คนเข้าบ่อย
   ============================================================ */
.nf-body{position:relative;z-index:1;padding:20px 0 110px}

.nf-h2{
  display:flex;align-items:center;gap:11px;
  font-weight:400;font-size:16px;margin-bottom:20px;
  padding-bottom:15px;border-bottom:1px dashed var(--line);
}
.nf-h2 > i{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:13px;color:#fff;background:linear-gradient(135deg,#9C3FCC,#14A862);
}

.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:13px}

.nf-link{
  display:flex;align-items:center;gap:14px;
  padding:17px 19px;border-radius:17px;
  border:1px solid var(--line);background:rgba(255,255,255,.55);
  transition:.28s var(--ease,ease);
}
html[data-theme="dark"] .nf-link{background:rgba(255,255,255,.04)}
.nf-link:hover{
  transform:translateY(-3px);border-color:rgba(20,168,98,.45);
  box-shadow:0 20px 40px -24px rgba(11,20,14,.6);
}
.nf-ico{
  flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:15px;color:#fff;
}
.nf-ico.i1{background:linear-gradient(135deg,#9C3FCC,#6E2F9E)}
.nf-ico.i2{background:linear-gradient(135deg,#14A862,#0E6B41)}
.nf-ico.i3{background:linear-gradient(135deg,#E0862B,#C96A12)}
.nf-ico.i4{background:linear-gradient(135deg,#3F5C4C,#5E7D6C)}
.nf-ico.i5{background:linear-gradient(135deg,#46586B,#66788B)}
.nf-ico.i6{background:linear-gradient(135deg,#62E5A1,#14A862)}
.nf-link b{display:block;font-weight:400;font-size:14px;line-height:1.5;margin-bottom:2px}
.nf-link em{display:block;font-style:normal;font-size:11.6px;line-height:1.6;opacity:.58}


/* ============================================================
   จอเล็ก
   ============================================================ */
@media (max-width:1000px){
  .nf{padding:118px 0 24px}
  .nf-wrap{grid-template-columns:1fr;gap:26px}
  /* ภาพผังอาคารเป็นของประดับ บนจอแคบให้ไปอยู่ใต้ข้อความ และย่อลง */
  .nf-art{order:2;max-width:400px;margin:0 auto}
  .nf-say{order:1}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .nf{padding:104px 0 18px}
  .nf-body{padding:14px 0 80px}
  .nf-links{grid-template-columns:1fr}
  .nf-act .nf-btn{flex:1 1 auto;justify-content:center}
  .nf-help a{white-space:normal}
}
@media (max-width:420px){
  .nf-art{display:none}     /* จอเล็กมาก ตัดภาพประดับทิ้ง ให้เนื้อหาขึ้นเต็มจอ */
}

@media (prefers-reduced-motion: reduce){
  .bg-aurora,.ph-orb,.nf-gap,.nf-guess{animation:none}
  .nf-btn:hover,.nf-link:hover{transform:none}
}

@media print{
  .bg-aurora,.ph-orb,.nf-art,.nf-act,header,footer{display:none !important}
}