/* ============================================================
   goodapp.pro — assets/css/freebies.css
   หน้า /free (ของฟรี & ลดราคา) — ใช้ตัวแปรสีจาก theme.css ทั้งหมด (มืด/สว่างตามธีม)
   ============================================================ */
.fb-page{padding:26px 20px 40px;}   /* ซ้าย-ขวา 20px = เท่า .wrap ทั่วไป (เดิม 0 ทับ gutter ทำให้การ์ดชนขอบจอ) */
.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; line-height:1.65;}

/* ลิงก์ข้ามไปแต่ละประเภท */
.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);}

/* ============================================================
   การ์ดแบบกะทัดรัด: ขอบ + ปุ่ม + ป้าย % สีตามประเภท
   ฟรีถาวร = น้ำเงิน · ฟรีชั่วคราว = ส้ม · ลดราคา = แดงเข้ม
   ความโค้ง: --r-free (ตั้งได้ใน Admin > ตั้งค่าเว็บ) ค่าเริ่มต้น 12px
   ============================================================ */
.fb-card{
  --k:#3b82f6; --kl:#38bdf8; --kb:rgba(56,189,248,.5); --kt:#fff; --kx:#38bdf8;
  background:var(--card); backdrop-filter:blur(8px); border:1.5px solid var(--kb); border-radius:var(--r-free,12px); overflow:hidden;
  display:flex; flex-direction:column; position:relative; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.fb-card.fb-k-limited{--k:#f97316; --kl:#fb923c; --kb:rgba(249,115,22,.55); --kt:#fff; --kx:#fb923c;}
.fb-card.fb-k-sale{--k:#b91c1c; --kl:#dc2626; --kb:rgba(185,28,28,.75); --kt:#fff; --kx:#ef4444;}
.fb-card:hover{transform:translateY(-3px); border-color:var(--k); box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 16px -2px var(--kb);}
.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-tip{
  position:absolute; inset:0; z-index:2; padding:12px 14px; overflow:auto; font-size:12.5px; line-height:1.55;
  background:rgba(6,10,22,.95); backdrop-filter:blur(4px);
  transform:translateY(101%); transition:transform .22s cubic-bezier(.3,.8,.3,1);
}
body:has(#darkmode-toggle:checked) .fb-tip{background:rgba(255,252,244,.96);}
.fb-card.tip-open .fb-tip{transform:none;}
.fb-tip p{margin:0 0 7px; color:var(--ink);}
.fb-row{display:flex; gap:6px; align-items:flex-start; color:var(--muted); margin-top:4px; flex-wrap:wrap;}
.fb-row .lk-ic{width:16px; height:16px; flex:none;}
.fb-lg{border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:0 8px; font-size:11.5px; font-weight:700; white-space:nowrap;}
.fb-lic-t{min-width:0; overflow-wrap:anywhere;}

.fb-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1;}
.fb-cats{display:flex; gap:5px; flex-wrap:wrap; min-height:20px;}
.fb-cat{font-size:11px; font-weight:700; line-height:1.45; padding:0 9px; border-radius:9px; border:1px solid var(--line); color:var(--muted);}
.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;}
.fb-ttl{display:flex; align-items:baseline; gap:7px; min-width:0;}   /* baseline = ปุ่ม (?) ตรงกลางแนวตัวอักษรชื่อ ไม่หลุดต่ำกว่าฟอนต์ไทย */
.fb-title{margin:0; font-size:15px; font-weight:700; color:var(--heading); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
/* ปุ่ม (?) ส้มหลังชื่อ */
.fb-q{
  flex:none; width:19px; height:19px; border-radius:50%; border:0; padding:0; cursor:pointer;
  font:800 12px/19px "Noto Sans Thai",sans-serif; color:#fff; text-align:center;
  background:linear-gradient(135deg,#fdba74,#f97316); animation:fbq 2.4s ease-in-out infinite;
}
.fb-q:hover,.fb-card.tip-open .fb-q{filter:brightness(1.1); animation:none; box-shadow:0 0 0 4px rgba(249,115,22,.3);}
.fb-q:focus-visible{outline:3px solid rgba(249,115,22,.5); outline-offset:2px;}
@keyframes fbq{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.5);}50%{box-shadow:0 0 0 5px rgba(249,115,22,0);}}

.fb-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-height:24px;}
.fb-off{background:linear-gradient(180deg,var(--kl),var(--k)); color:#fff; font-weight:800; font-size:11.5px; border-radius:5px; padding:0 6px; text-shadow:0 1px 0 rgba(0,0,0,.2);}
.fb-free{font-weight:800; font-size:16px; color:#65a30d;}
.fb-now{font-weight:800; font-size:16px; color:#dc2626;}
.fb-old{text-decoration:line-through; color:var(--muted); font-size:12px;}
.fb-forever-txt{color:#0891b2; font-size:12px; font-weight:600;}
.fb-bundle{font-weight:800; font-size:14px; color:#dc2626;}
body:not(:has(#darkmode-toggle:checked)) .fb-free{color:#bef264;}
body:not(:has(#darkmode-toggle:checked)) .fb-now,
body:not(:has(#darkmode-toggle:checked)) .fb-bundle{color:#fca5a5;}
body:not(:has(#darkmode-toggle:checked)) .fb-forever-txt{color:#7dd3fc;}

/* นับถอยหลัง — สีตามวันที่เหลือ: ≥14 ฟ้า · 8-13 เขียว · 4-7 ส้ม · 0-3 แดงกะพริบ */
.fb-cd{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px;}
.fb-cd-l{font-size:11.5px; color:var(--muted); line-height:1.3; min-width:0;}
.fb-cd-l b{display:block; color:var(--ink); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fb-cd-b{display:flex; gap:4px; flex:none;}
.fb-cd-b span{
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 3px;
  border-radius:calc(var(--r-free,12px) * .45); background:#475569; color:#fff; line-height:1; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums;
}
.fb-cd-b span i{font-style:normal; font-weight:600; font-size:8.5px; opacity:.85; margin-top:2px;}
.fb-cd.t-blue .fb-cd-b span{background:#2563eb;}
.fb-cd.t-green .fb-cd-b span{background:#16a34a;}
.fb-cd.t-orange .fb-cd-b span{background:#ea580c;}
.fb-cd.t-red .fb-cd-b span{background:#be123c; animation:fbub 1s steps(2) infinite;}
.fb-cd-end{font-size:12.5px; font-weight:700; color:var(--muted);}
@keyframes fbub{50%{filter:brightness(1.25);}}
@media (prefers-reduced-motion:reduce){.fb-cd.t-red .fb-cd-b span,.fb-q{animation:none;}.fb-tip{transition:none;}}

/* ปุ่มรับฟรี (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:var(--kt); padding:8px 10px; border-radius:calc(var(--r-free,12px) * .75);
  background:linear-gradient(180deg,var(--kl),var(--k));
  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-card .fb-go{text-shadow:0 1px 0 rgba(0,0,0,.2);}
.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;}

/* หน้ารวม: Section ย่อยตามหมวด + ลิงก์ดูทั้งหมด + ปุ่มกลับ */
.fb-sub{margin:20px 0 6px; scroll-margin-top:96px;}
.fb-sub h3{font-size:17px; margin:0 0 10px; color:var(--heading); font-weight:800;}
.fb-more{margin:12px 0 0; text-align:right;}
.fb-more a{
  display:inline-block; 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-more a:hover{border-color:var(--nav-hover); transform:translateY(-1px);}
.fb-back{display:inline-block; margin:0 0 8px; color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;}
.fb-back:hover{color:var(--heading);}

/* แบนเนอร์ของฟรีบนหัวหน้า /free (แทนปุ่มข้อความ) */
.fb-banners{margin:6px 0 6px;}

/* ปุ่มสโตร์: อยู่ล่างสุดของการ์ด · 1 = เต็มแถว, 2 = ครึ่ง, 3 = สามส่วน, 4 = 2×2 */
.fb-actions{margin-top:auto; padding-top:6px; display:grid; gap:7px; grid-template-columns:1fr;}
.fb-actions[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.fb-actions[data-n="3"]{grid-template-columns:repeat(3,1fr);}
.fb-actions[data-n="4"]{grid-template-columns:repeat(2,1fr);}
.fb-actions .fb-go{margin-top:0; min-width:0; padding:8px 8px;}
.fb-actions[data-n="3"] .fb-go{padding:8px 6px; font-size:13px;}
.fb-go .lk-ic{width:16px; height:16px; flex:none;}
.fb-go-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
/* หลายสโตร์: ปุ่มใช้สีแบรนด์สโตร์ (--sc พื้น, --st ตัวอักษรที่คำนวณคอนทราสต์แล้ว) · ไอคอนโมโนใช้สีตัวอักษรของปุ่ม */
.fb-go.fb-go-c{
  color:var(--st,#fff); background:var(--sc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 84%,#fff),var(--sc));
}
.fb-go.fb-go-c .lk-mask{background:currentColor !important;}
.fb-actions[data-n="3"] .lk-ic{display:none;}   /* 3 ปุ่ม: ตัดไอคอนให้ชื่อสโตร์อ่านครบ */