*{
  box-sizing:border-box;
}

body{
  font-family:"Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* ===== overlay ===== */
.drawer-overlay{
  position:fixed;
  inset:0;
  /* background:var(--card-bg); */
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:90;
}

/* ===== drawer ===== */
.drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 360px);
  height:100vh;

 /* เพิ่มเงา */
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15);

  background:rgba(255, 255, 255, 0.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);

  z-index:100;

  display:flex;
  flex-direction:column;
}

/* open state */
.drawer.open{
  transform:translateX(0);
}

/* overlay open */
.drawer-overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===== header ===== */
.drawer-header{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px 18px;
  font-weight:600;

  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
}

.drawer-close{
  background:none;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
}

/* ===== content ===== */
.drawer-content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height: fit-content;
  overflow-y:auto;
  flex:1;
  align-items: center;

}

.drawer-content a{
  padding:14px 16px;
  border-radius:14px;
  width: 100%;
  height: fit-content;

  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);

  text-decoration:none;
  color:#111;
  font-weight:500;
  
}

/* header */
.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.drawer-header button{
  background:none;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
}

/* links */
.drawer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}

.drawer-links a{
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text-main);
  background:rgba(255,255,255,.5);
  border:1px solid var(--border-soft);
  
}
.drawer.open{
  transform:translateX(0);
  
}

.drawer-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.pill-nav{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:8px;
  margin-bottom:20px;

  /* glass effect */
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);

  border-radius:999px;
  border:1px solid var(--border-soft);
}

/* ซ้าย / ขวา */
.pill-left,
.pill-right{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--text-main);
}

/* กลาง */
.pill-center{
  display:flex;
  gap:8px;
}

/* ปุ่ม */
.pill-center a{
  padding:8px 14px;
  font-size:.85rem;
  text-decoration:none;
  border-radius:999px;
  font-weight:600;
  white-space:nowrap;
}

/* Secondary */
.pill-center .ghost{
  background:#f4f4f5;
  color:var(--text-main);
}

/* Primary */
.pill-center .primary{
  background:#111827;
  color:#fff;
}

/* hover */
.pill-center a:hover{
  opacity:.9;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--bg-primary);
  
}

.card{
  width:100%;
  height: fit-content;
  max-width:640px;   
  min-width: 320px;
  padding:28px;      
  background:var(--card-bg);
  border-radius:24px;
  padding:24px;
  top: 0;          /* ยึดติดด้านบนสุด */
  /* text-align:center; */
  /* border:1px solid var(--border-soft); */
}

/* avatar */
/* .avatar{
  width:84px;
  height:84px;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(135deg,#fce7f3,#fae8ff);
} */

.round-img {
  border-radius: 50%; /* Makes corners completely round */
  width: 120px;      /* Ensure width and height are the same */
  height: 120px;     /* Ensure width and height are the same */
}

h1{
  margin:0 0 4px;
  font-size:1.4rem;
  font-weight:500;
  color:var(--accent);
}

h2{
  margin:0 0 4px;
  font-size:1.125rem;
  font-weight:400;
  color:var(--text-muted);
  align-items: start;
}

p{
  margin:0 0 20px;
  font-size:.9rem;
  color:var(--text-muted);
}
.img-wrap{
  width: 240px;
  text-align: center;
  /* background-color: red; */
}
box-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ===== responsive grid ===== */
.links-header{
  display:grid;
  grid-template-columns: 200px 1fr auto;
  justify-content: center;
  gap:12px;
}
@media (min-width:520px){
  .links{
    grid-template-columns:1fr 1fr;
    
  }
}

.container {
  display: flex;
  gap: 10px; /* Adds space between items */
  height: 200px;
  align-items: center; 
}

.item-1 {
  flex: 0 0 200px; /* Does not grow or shrink, fixed width of 200px */
}

.item-2 {
  flex: 1; /* Grows and shrinks to fill available space, making it flexible */
}

.item-3 {
  /* Uses default flex properties (flex-basis: auto), width is determined by content */
  width: auto; 
}

.links{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  
}
/* @media (min-width:520px){
  .links{
    grid-template-columns:1fr 1fr;
  }
} */

.links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.035);
  margin-bottom:12px;
  padding:14px;
  text-decoration:none;

  background:var(--btn-bg);
  color:var(--text-main);
  font-weight:600;

  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border-soft);

  transition:
    background .2s ease,
    transform .15s ease;
}

/* เส้น accent ด้านซ้าย */
.links a::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  background:var(--accent);
  opacity:.15;
  transition:width .25s ease;
  
}

.links a:hover{
  background:var(--btn-bg-hover);
  transform:translateY(-1px);
}

.links a:hover::before{
  width:6px;
}

/* icon */
.links a:hover span{
  transform:translateX(2px);
}

/* ตอนกด */
.links a:active{
  transform:translateY(0);
}
.boxed-wrap
{
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.accordion h2{
  font-size:.9rem;
  letter-spacing:.08em;
  color:var(--text-muted);
  margin-bottom:10px;
}

/* กล่องหลัก */
.acc-item{
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.035);

}

/* หัวข้อ */
.acc-item summary{
  list-style:none;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:8px;

  padding:14px;
  font-weight:600;
  color:var(--text-main);
}

/* เอาลูกศร default ออก */
.acc-item summary::-webkit-details-marker{
  display:none;
}

/* content */
.acc-content{
  padding:0 14px 14px;
  font-size:.9rem;
  color:var(--text-muted);
}

/* animation */
.acc-item[open]{
  animation:fadeIn .25s ease;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-2px); }
  to{ opacity:1; transform:none; }
}

@keyframes fall-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(var(--x), 120vh) rotate(360deg);
  }
}
#snow-test{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;

  display:block;
}

#snow-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}

.fall{
  position:absolute;
  top:-20px;
  animation:fall linear;
}

.snow{
  width:20px;
  height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23cfe9ff' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.9;
}

.star{
  width:20px;
  height:20px;
  background:linear-gradient(180deg,#ffe680,#ffb703);
  clip-path:polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  opacity:.95;
}

.tree{
  width:14px;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpolygon points='12,0 22,20 2,20' fill='%2386efac'/%3E%3Cpolygon points='12,6 20,26 4,26' fill='%234ade80'/%3E%3Crect x='10' y='26' width='4' height='6' fill='%23a16207'/%3E%3C/svg%3E") no-repeat center/contain;
}

@keyframes fall{
  to{
    transform:translateY(110vh);
  }
}

 /* festival-banner */
.festival-banner{
  position:sticky;
  top:0;
  z-index:80;

  background:#fff;
  border-bottom:1px dashed #e5e7eb;

  overflow:hidden;
  height:38px;

  display:flex;
  align-items:center;
}

.banner-track{
  display:flex;
  gap:40px;
  white-space:nowrap;

  animation: banner-move 18s linear infinite;
}

.banner-track span{
  font-size:14px;
  color:#374151;
}

@keyframes banner-move{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

footer{
  margin-top:12px;
  font-size:.75rem;
  color:var(--text-muted);
}