/* ============================================================
HERO DÙNG CHUNG — lấy nguyên style của trang Banner AI
------------------------------------------------------------
Nhúng vào của mọi trang chủ quán:
(trang sâu thì ../hero.css)
rồi viết đúng khối này ngay dưới topbar:
✦ Nhãn ngắn
Câu chính. Câu nhấn màu cam.
Một hai câu giải thích.
Màu để CỨNG (không dùng biến) vì mỗi trang đặt tên biến một kiểu
(--muted / --ink2 / --brand…), dùng biến là chỗ có chỗ không.
Trang nào cũng nhìn y hệt nhau thì mới gọi là một bộ.
============================================================ */
body{ background:#FFF8EE; } /* nền kem phẳng như Banner AI, bỏ dải gradient riêng */
.hd{
max-width:1400px; margin:0 auto; padding:34px 20px 18px;
text-align:center; position:relative;
}
.hd .eyebrow{
display:inline-block; background:#FFF6E0; border:1px solid rgba(255,176,32,.45);
color:#C9600F; font-size:11.5px; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:14px;
}
.hd h1{
font-size:clamp(24px,4.4vw,40px); font-weight:800; letter-spacing:-1.1px;
line-height:1.14; margin-bottom:10px; color:#2E1E10;
}
.hd h1 span{ color:#F5872B; }
.hd p{ color:#93795C; max-width:560px; margin:0 auto; font-size:14.5px; }
/* ============================================================
DẢI LỌC + LƯỚI MẪU (kiểu Pinterest) — cũng lấy nguyên của Banner AI
------------------------------------------------------------
Dùng cho mọi trang có "kho mẫu": Banner AI, Kho menu…
… .pin …
Chip lọc: , đếm số:
============================================================ */
.fbar{position:sticky;top:54px;z-index:110;background:rgba(255,248,238,.92);
backdrop-filter:blur(12px);border-bottom:1px solid #F0DCC2;padding:12px 20px}
.fbar-in{max-width:1400px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;
scrollbar-width:none;align-items:center}
.fbar-in::-webkit-scrollbar{display:none}
.fb{background:#fff;border:1.5px solid #F0DCC2;color:#2E1E10;border-radius:100px;padding:7px 15px;
font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.fb:hover{border-color:#E2BE8C}
.fb.on{background:#F5872B;border-color:#F5872B;color:#fff}
.fcount{margin-left:auto;color:#93795C;font-size:12.5px;font-weight:700;white-space:nowrap;padding-left:10px}
.board{max-width:1400px;margin:0 auto;padding:20px 16px 70px;column-count:5;column-gap:16px}
@media(max-width:1200px){.board{column-count:4}}
@media(max-width:900px){.board{column-count:3}}
@media(max-width:620px){.board{column-count:2;column-gap:12px;padding:16px 12px 60px}}
.pin{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:16px;overflow:hidden;
cursor:zoom-in;background:#fff;box-shadow:0 2px 10px rgba(120,74,20,.07);
transition:transform .16s,box-shadow .16s}
.pin:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(120,74,20,.16)}
@media(max-width:620px){.pin{margin-bottom:12px}}
.pin img{width:100%;height:auto;transition:filter .2s,transform .3s}
.pin:hover img{filter:brightness(.55)}
.pin-ov{position:absolute;inset:0;opacity:0;transition:opacity .18s;display:flex;flex-direction:column;
justify-content:space-between;padding:11px;pointer-events:none}
.pin:hover .pin-ov{opacity:1}
/* Lớp phủ không nhận chuột (để cả pin bấm được), NHƯNG nút thì phải nhận —
nếu không, nút "Dùng mẫu này" nhìn thấy mà bấm không ăn (bot-khach bắt được). */
.pin-pick{align-self:flex-end;background:#F5872B;color:#fff;border-radius:100px;padding:8px 15px;
font-size:12.5px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.35);
pointer-events:auto;cursor:pointer}
.pin-nm{font-size:13px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);line-height:1.3}
.pin-nm em{display:block;font-style:normal;font-size:11px;font-weight:600;color:#FFD9A8;margin-top:2px}
/* ---- Mẫu dành cho thành viên ----
CỐ Ý KHÔNG làm mờ: cho người ta nhìn RÕ mẫu đẹp mà chưa dùng được thì mới
thèm nâng cấp — che mờ đi là mất luôn động lực. Chỉ đánh dấu bằng ổ khoá,
và bấm vào thì mời nâng cấp chứ không mở. */
.khoa-tag{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;
background:rgba(46,30,16,.82);color:#FFD9A8;font-size:11px;font-weight:800;letter-spacing:.02em;
padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px)}
.khoa-mo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(120deg,#F5872B,#E0701A);color:#fff;font-size:12.5px;font-weight:800;
padding:9px 16px;border-radius:100px;box-shadow:0 6px 18px rgba(0,0,0,.32);
opacity:0;transition:opacity .18s;white-space:nowrap;pointer-events:none}
.pin-khoa:hover .khoa-mo{opacity:1}