/* ============================================================
   goodapp.pro — assets/css/freebies.css
   หน้า /free (ของฟรี & ลดราคา) — ใช้ตัวแปรสีจาก theme.css ทั้งหมด (มืด/สว่างตามธีม)
   ============================================================ */
.fb-page{padding:26px 0 40px;}
.fb-head h1{font-size:clamp(24px,3.4vw,34px); margin:0 0 6px; color:var(--heading); font-weight:800;}
.fb-head p{margin:0 0 14px; color:var(--muted); font-size:14.5px; max-width:760px;}

/* ลิงก์ข้ามไปแต่ละประเภท */
.fb-jump{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px;}
.fb-jump a{
  color:var(--ink); text-decoration:none; font-weight:700; font-size:13.5px;
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 16px;
  transition:border-color .15s, transform .15s;
}
.fb-jump a:hover{border-color:var(--nav-hover); transform:translateY(-1px);}

/* ชิปหมวด */
.fb-chips{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px;}
.fb-chip{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:13px;
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:5px 14px;
}
.fb-chip:hover{border-color:var(--nav-hover);}
.fb-chip.hot{border-color:rgba(var(--nav-hover-rgb),.55);}
.fb-chip.on{background:linear-gradient(135deg,var(--accent-grad-1),var(--accent-grad-2)); border-color:transparent; color:#020617;}

/* section */
.fb-sec{margin:28px 0 8px; scroll-margin-top:96px;}
.fb-sec h2{font-size:21px; margin:0 0 12px; color:var(--heading); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.fb-sec h2 small{font-size:12.5px; font-weight:500; color:var(--muted);}
.fb-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:1100px){.fb-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){.fb-grid{grid-template-columns:repeat(2,1fr); gap:12px;}}
@media(max-width:520px){.fb-grid{grid-template-columns:1fr;}}
.fb-empty{grid-column:1/-1; color:var(--muted); border:1px dashed var(--line); border-radius:14px; padding:20px; text-align:center; font-size:14px;}

/* Season */
.fb-season{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:16px 0 10px; padding:9px 14px; border-radius:14px;
  border:1px solid rgba(var(--c-review-rgb),.35); background:linear-gradient(90deg,rgba(var(--c-review-rgb),.16),transparent);
}
.fb-season-emoji{font-size:22px; line-height:1;}
.fb-season b{font-size:15.5px; color:var(--heading);}

/* การ์ด */
.fb-card{
  background:var(--card-solid); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.fb-card:hover{transform:translateY(-3px); border-color:rgba(var(--nav-hover-rgb),.5); box-shadow:0 8px 24px rgba(0,0,0,.18);}
.fb-cover{position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden;}
.fb-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.fb-nocover{position:absolute; inset:0; background:linear-gradient(135deg,var(--bg-2),var(--line));}
/* ป้ายหมวดอยู่ใต้ภาพ (ภาพปกโล่ง ไม่มีป้ายทับ) */
.fb-cats{display:flex; gap:6px; flex-wrap:wrap;}
.fb-cat{font-size:11.5px; font-weight:700; line-height:1.5; padding:1px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:rgba(127,127,127,.08);}
.fb-cat.fb-hot{color:#7dd3fc; border-color:rgba(56,189,248,.55); background:rgba(56,189,248,.1);}
body:has(#darkmode-toggle:checked) .fb-cat.fb-hot{color:#0284c7;}
/* เหลือ X วัน (ต่อท้ายบรรทัดวันหมด) */
.fb-left{font-weight:700;}
.fb-left.fb-urgent{color:#f43f5e;}
.fb-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1;}
.fb-title{margin:0; font-size:15px; font-weight:700; color:var(--heading); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.fb-desc{margin:0; color:var(--muted); font-size:13px; min-height:2.9em; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.fb-store{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px;}
.fb-store .lk-ic{width:16px; height:16px;}
.fb-price{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px;}
.fb-off{background:#a3e635; color:#1a2e05; font-weight:800; font-size:12px; border-radius:6px; padding:1px 7px;}
.fb-free{font-weight:800; font-size:17px; color:#65a30d;}
.fb-now{font-weight:800; font-size:17px; color:#ca8a04;}
.fb-old{text-decoration:line-through; color:var(--muted); font-size:12.5px;}
.fb-forever-txt{color:#0891b2; font-size:12.5px; font-weight:600;}
.fb-until{font-size:12.5px; color:#d97706;}
body:not(:has(#darkmode-toggle:checked)) .fb-free{color:#bef264;}
body:not(:has(#darkmode-toggle:checked)) .fb-now{color:#fde047;}
body:not(:has(#darkmode-toggle:checked)) .fb-until{color:#fbbf24;}
body:not(:has(#darkmode-toggle:checked)) .fb-forever-txt{color:#7dd3fc;}

/* ปุ่มรับฟรี (3D แบบเดียวกับปุ่มแอดมิน — ใช้สีธีมหน้าเว็บ) */
.fb-go{
  margin-top:8px; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
  font-weight:700; font-size:14px; color:#020617; padding:8px 12px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent-grad-1),var(--accent-grad-2));
  border:1px solid rgba(0,0,0,.28); box-shadow:0 3px 0 rgba(0,0,0,.35);
  position:relative; top:0; transition:top .06s, box-shadow .06s, filter .12s;
}
.fb-go:hover{filter:brightness(1.07);}
.fb-go:active{top:2px; box-shadow:0 1px 0 rgba(0,0,0,.35); filter:brightness(.88);}
.fb-go:focus-visible, .fb-chip:focus-visible, .fb-jump a:focus-visible{outline:3px solid rgba(var(--nav-hover-rgb),.55); outline-offset:2px;}
