/* ===== Dream Fortune — Responsive (5 breakpoints) ===== */

/* ---- Large desktop (1200px+) ---- */
@media (min-width:1200px){
  .dft-container{padding:0 24px}
}

/* ---- Tablet landscape (<=1024px) ---- */
@media (max-width:1024px){
  .dft-tools{grid-template-columns:1fr}
  .dft-footer-grid{grid-template-columns:1.4fr 1fr}
  .dft-hero{padding:54px 18px 66px}
}

/* ---- Tablet portrait (<=900px): เปิดเมนู drawer ---- */
@media (max-width:900px){
  .dft-burger{display:flex}
  .dft-nav .dft-menu{
    position:fixed;top:0;right:-300px;width:280px;height:100vh;
    background:linear-gradient(180deg,var(--df-primary-d),var(--df-nav));
    flex-direction:column;gap:4px;padding:80px 18px 24px;z-index:60;
    box-shadow:-8px 0 30px rgba(0,0,0,.35);transition:right .28s ease;overflow-y:auto;
  }
  .dft-nav .dft-menu.open{right:0}
  .dft-menu li a{font-size:17px;padding:13px 16px}
  .dft-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .dft-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .dft-burger.active span:nth-child(2){opacity:0}
  .dft-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---- Mobile (<=600px) ---- */
@media (max-width:600px){
  .dft-topbar{display:none}
  .dft-header .dft-container{height:62px}
  .dft-brand .name{font-size:20px}
  .dft-brand .mark{width:40px;height:40px;font-size:20px}
  .dft-section{padding:38px 0}
  .dft-hero{padding:44px 16px 56px}
  .dft-grid{grid-template-columns:1fr 1fr;gap:14px}
  .dft-card .body{padding:14px}
  .dft-card h3{font-size:17px}
  .dft-footer-grid{grid-template-columns:1fr;gap:22px}
  .dft-single{margin:20px 12px}
  .dft-single .banner{padding:28px 22px}
  .dft-single .content{padding:22px}
  .dft-nums{margin:8px 16px 24px}
  /* เว้นที่ให้ bottom nav */
  body{padding-bottom:64px}
  .dft-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;z-index:40;
    background:linear-gradient(180deg,var(--df-primary),var(--df-primary-d));
    border-top:2px solid var(--df-gold);justify-content:space-around;align-items:center;
    box-shadow:0 -4px 16px rgba(0,0,0,.25);
  }
  .dft-bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:11px;font-weight:600;flex:1;text-align:center}
  .dft-bottomnav a span{font-size:20px;line-height:1}
  .dft-bottomnav a:active{color:#ffe082}
}

/* ---- Small mobile (<=380px) ---- */
@media (max-width:380px){
  .dft-grid{grid-template-columns:1fr}
  .dft-hero h1{font-size:26px}
  .dft-brand .tag{display:none}
  .dft-chip{min-width:46px;height:44px;font-size:19px}
}