:root{
  --bg-deep:#111a3a;
  --nav-deep:#0a1228;
  --nav-hover:#ff6b8a;
  --accent:#ff2748;
  --card:#18224a;
  --text:#e9eef7;
  --muted:#a9b2cc;
  --diamond:#2d3a6b;
  --diamond-hover:#3a4a86;
  --capsule:#000000b3;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius-xl:22px;
  --border-soft:#ffffff14;
}

/* -------------------------
   Global base
   ------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  color:var(--text);
  background:var(--bg-deep);
  font-family:system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x:hidden;              /* กันเนื้อหาล้นแล้วเกิดสกอร์ลข้าง */
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* -------------------------
   Layout helpers
   ------------------------- */
.container-page{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
}

/* -------------------------
   NAVBAR WRAP
   ------------------------- */
/* แถบ navbar กว้างเท่า hero, อยู่กลางจอ, ไม่ล้นจอ */
.navbar-wrap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  z-index:1000;
  background-color:var(--nav-deep);
  border-bottom:1px solid var(--border-soft);
  display:flex;
  justify-content:center;
}

.navbar-row{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
  height:64px;
}

.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
  width:100%;
  column-gap:16px;
  flex-wrap:nowrap;           /* กันบรรทัดหักแปลก ๆ */
}

/* -------------------------
   Brand (โลโก้ซ้ายสุด)
   ------------------------- */
.navbar-left{
  flex:0 0 auto;
}

.brand-block{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:30px;
}

.brand-logo img{
  height:60px;
  object-fit:cover;
}

/* -------------------------
   Menu - Desktop
   ------------------------- */
.navbar-center{
  display:flex;
  justify-content:flex-start;
  flex:0 1 auto;          /* ให้เมนูย่อได้ ไม่ดันล้นจอ */
  min-width:0;
}

.menu-list{
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
}

.menu-item{
  position:relative;
}

.menu-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:8px 18px;
  border:1px solid transparent;
  background-color:transparent;
  color:var(--text);
  font-size:16px;
  font-weight:600;
  letter-spacing:0.2px;
  white-space:nowrap;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    transform 0.08s ease;
}

.menu-link:hover{
  background-color:rgba(255,255,255,0.06);
  border-color:var(--border-soft);
}

.menu-link.is-active{
  background-color:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
  box-shadow:0 0 0 2px rgba(255,39,72,0.25);
}

/* caret ใหญ่ในปุ่ม dropdown */
.menu-dropdown-toggle .caret{
  margin-left:8px;
  font-size:24px;
  line-height:1;
}

/* -------------------------
   Dropdown Desktop
   ------------------------- */
.has-dropdown{
  position:relative;
}

.menu-dropdown-panel{
  position:absolute;
  top:100%;
  left:0;
  min-width:250px;
  padding:8px 0;
  background-color:#050818;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
  z-index:1200;
}

.has-dropdown:hover .menu-dropdown-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-link{
  display:flex;
  align-items:center;
  padding:8px 16px;
  font-size:16px;
  color:var(--text);
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.dropdown-link:hover{
  background-color:rgba(255,255,255,0.06);
  color:#ffffff;
}

/* -------------------------
   Search Desktop
   ------------------------- */
.navbar-right{
  display:flex;
  justify-content:flex-end;
  margin-left:auto;
  flex:0 0 auto;           /* ไม่ให้ช่องค้นหาถูกบีบจนหาย */
}

.nav-search{
  margin:0;
}

.nav-search-inner{
  display:flex;
  align-items:center;
  border-radius:10px;
  background-color:#050818;
  border:1px solid var(--border-soft);
}

.nav-search-input{
  border:none;
  outline:none;
  padding:4px 8px;
  background:transparent;
  color:var(--text);
  font-size:14px;
  min-width:220px;
  min-height:50px;
}

.nav-search-input::placeholder{
  color:var(--muted);
}

.nav-search-btn{
  border:none;
  outline:none;
  padding:4px 8px;
  margin-right:5px;
  border-radius:10px;
  background-color:var(--accent);
  color:#ffffff;
  font-size:14px;
  min-height:35px;
  cursor:pointer;
  transition:
    background-color 0.16s ease,
    transform 0.08s ease;
}

.nav-search-btn:hover{
  background-color:var(--nav-hover);
}

.nav-search-btn:active{
  transform:scale(0.96);
}

/* -------------------------
   Mobile buttons (🔍 + ☰)
   ------------------------- */
.navbar-mobile{
  display:none;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.btn-icon{
  border:none;
  outline:none;
  padding:8px;
  min-width:36px;
  min-height:36px;
  border-radius:999px;
  background-color:#050818;
  color:var(--text);
  font-size:16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:
    background-color 0.16s ease,
    transform 0.08s ease;
}

.btn-icon:hover{
  background-color:rgba(255,255,255,0.06);
}

.btn-icon:active{
  transform:scale(0.95);
}

/* -------------------------
   Mobile Search Overlay
   ------------------------- */
.nav-search-overlay{
  position:fixed;
  left:0;
  right:0;
  top:64px;
  height:56px;
  padding:8px 16px;
  background-color:#050818;
  border-bottom:1px solid var(--border-soft);
  display:none;
  align-items:center;
  z-index:950;
}

/* มี hidden = ซ่อนอยู่ */
.nav-search-overlay[hidden]{
  display:none;
}

/* เอา hidden ออก (จาก JS) = ให้แสดง */
.nav-search-overlay:not([hidden]){
  display:flex;
}

.nav-search-overlay-inner{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

.nav-search-icon{
  font-size:16px;
}

.nav-search-overlay-input{
  flex:1;
  border:none;
  outline:none;
  padding:8px 10px;
  border-radius:999px;
  background-color:#000000b3;
  color:var(--text);
}

.nav-search-overlay-input::placeholder{
  color:var(--muted);
}

.nav-search-overlay-close{
  border:none;
  outline:none;
  padding:6px 10px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

/* -------------------------
   Mobile Drawer
   ------------------------- */
.nav-drawer{
  position:fixed;
  top:64px;
  right:0;
  bottom:0;
  width:300px;
  max-width:100%;
  background-color:#050818;
  border-left:1px solid var(--border-soft);
  box-shadow:-12px 0 30px rgba(0,0,0,0.55);
  transform:translateX(100%);
  transition:transform 0.2s ease;
  z-index:960;
}

.nav-drawer.is-open{
  transform:translateX(0);
}

.nav-drawer-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}

.nav-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border-soft);
}

.nav-drawer-title{
  font-weight:700;
}

.nav-drawer-body{
  padding:12px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
}

.drawer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background-color:transparent;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.drawer-link:hover{
  background-color:rgba(255,255,255,0.06);
}

.drawer-link.is-active{
  background-color:var(--accent);
  border-color:var(--accent);
}

.drawer-link-dropdown .caret{
  margin-left:8px;
  font-size:14px;
}

.drawer-submenu{
  display:none;
  padding-left:4px;
  margin-bottom:6px;
}

.drawer-submenu.is-open{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.drawer-sublink{
  display:block;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  color:var(--muted);
}

.drawer-sublink:hover{
  background-color:rgba(255,255,255,0.04);
  color:#ffffff;
}

/* -------------------------
   Responsive (Navbar / Footer / Back-to-Top)
   ------------------------- */
@media (max-width:1024px){
  /* ซ่อนเมนู Desktop + กล่องค้นหา Desktop */
  .navbar-center,
  .navbar-right{
    display:none !important;
  }

  /* โลโก้ซ้าย ปุ่มมือถือขวา */
  .navbar-inner{
    justify-content:flex-start;
  }

  .navbar-left{
    flex:0 0 auto;
  }

  .navbar-mobile{
    display:flex !important;
    margin-left:auto;
    justify-content:flex-end;
  }
}

/* หน้าจอเล็กมาก (มือถือ) */
@media (max-width:575.98px){
  .footer-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:6px;
  }
}

/* กันขยับเนื้อหา เนื่องจาก navbar fixed */
.page-with-navbar{
  padding-top:64px;
}

/* -------------------------
   Footer (กว้างเท่า Navbar)
   ------------------------- */
.footer{
  background:var(--nav-deep);
  border-top:1px solid var(--border-soft);
  color:var(--muted);
  margin-top:20px;
}

.footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:20px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:18px;
}

/* -------------------------
   Back-to-Top
   ------------------------- */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:50px;
  height:50px;
  border-radius:999px;
  border:none;
  background-color:var(--accent);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  z-index:900;
  font-size:32px;
  font-weight:600;
  transition:
    background-color 0.16s ease,
    transform 0.08s ease,
    box-shadow 0.16s ease;
}

.back-to-top:hover{
  background-color:var(--nav-hover);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,0.5);
}

.back-to-top[hidden]{
  display:none;
}