/* ==========================================================
library.css — phần RIÊNG của library.html (Góc Khám Phá; tên cũ: Thư Viện Khám Phá).
Khung chung (tokens, nền, .wrap, header .hub-top, .currency, .lang-switch,
.toast) ở css/page-shell.css — nạp trước file này.
Trước 29/07/2026 file này có bản copy riêng của toàn bộ phần đó.
⚠️ Thẻ bài viết nổi bật ở trang này từng mang class `.hero`, trùng với `.hero`
(tiêu đề canh giữa) của khung chung → đã đổi thành `.feat`. Trùng tên thì khung
chung áp `text-align:center` + padding vào một cái thẻ grid, lệch hẳn bố cục.
========================================================== */
/* Bố cục 3 cột cần rộng hơn khung chung (1240 thay vì 1120) và lề hẹp hơn. */
.wrap{max-width:1240px;padding:0 clamp(12px,3vw,26px) 70px;}
/* Trang này nhiều ảnh nên trời bớt sao lại một chút, và không có tinh vân —
để ảnh bài viết là thứ nổi nhất trên trang. */
.starfield{opacity:.6;background-image:
radial-gradient(1.2px 1.2px at 20% 30%,#fff,transparent),
radial-gradient(1.3px 1.3px at 80% 20%,#dcecff,transparent),
radial-gradient(1px 1px at 60% 70%,#cfe0ff,transparent),
radial-gradient(1px 1px at 40% 85%,#fff,transparent);
animation:drift 160s linear infinite;}
/* Header chật hơn (có cả ô tìm kiếm + lọc nguồn) nên bóp gap + padding. */
.hub-top{gap:12px;padding:12px 0;
background:linear-gradient(180deg, rgba(11,15,25,.9), rgba(11,15,25,.35));}
.back-btn{letter-spacing:.05em;padding:9px 13px;}
.currency{padding:7px 12px;}
.currency .c-val{font-size:15px;}
.gem{width:24px;height:24px;}
.gem img{width:16px;height:16px;}
/* ============ Ô TÌM KIẾM + LỌC NGUỒN (chỉ trang này có) ============ */
.search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;
background:rgba(9,14,28,.7);border:1px solid var(--brd);color:var(--cyan);}
/* `min-width:0` là BẮT BUỘC: có bề rộng mặc định ~20 ký tự, và flex item
không co xuống dưới bề rộng mặc định của nó → trên màn 390px ô tìm kiếm chìa
ra ngoài 2px và sinh thanh cuộn ngang. (Bản cũ tràn tới 23px.) */
.search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:14px;}
.search input::placeholder{color:var(--ink-faint);}
.srcfilter{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(8,14,38,.6);border:1px solid var(--brd);}
.srcfilter button{border:none;background:transparent;color:var(--ink-soft);cursor:pointer;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.04em;padding:6px 11px;border-radius:999px;transition:.2s;}
.srcfilter button.active{color:#04060f;background:linear-gradient(120deg,var(--cyan),var(--purple));}
/* ============ 3-COLUMN LAYOUT ============ */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;margin-top:16px;}
@media(max-width:860px){.layout{grid-template-columns:1fr;}}
/* LEFT SIDEBAR */
.side{position:sticky;top:70px;align-self:start;display:flex;flex-direction:column;gap:16px;}
@media(max-width:860px){.side{position:static;}}
.side-card{border-radius:16px;padding:14px 13px;border:1px solid var(--brd);background:rgba(15,23,42,.5);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 46px -26px rgba(0,0,0,.7);}
.side-title{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;}
/* ⚠️⚠️ KHUNG XƯƠNG CHỐNG NHẢY BỐ CỤC cho danh sách chủ đề — `#cats` do `renderCats()`
điền sau khi trang nạp, nên trên **mạng chậm** khung sơn đầu tiên là một ô cao 0.
Đo được 25/08/2026 (`scratchpad/probe_cls.py`, 4G 9 Mbps/RTT 150ms + CPU ×4):
ô này cao **536px** và khi nó xuất hiện, cả cột feed tụt xuống đúng **540px** —
`.side-card` nhảy từ y=171 xuống y=711, CLS **0,5695** ở 768px và **0,3650** ở
390px (Google xếp >0,25 là "kém").
⚠️ Con số ra từ phép tính, không phải hằng số chép tay: **10 chủ đề** × 50px +
9 khoảng 4px = 536px (mỗi `.cat` có `margin-bottom:4px`, cái cuối bị bỏ nên
là 9 khoảng chứ không phải 10). Đo ở 390px và 1440px đều đúng 536,00px — cao
KHÔNG đổi theo khung nhìn vì mỗi chủ đề luôn một dòng.
⚠️⚠️ ĐÂY LÀ CHỖ THỨ NĂM PHẢI SỬA KHI THÊM MỘT CHỦ ĐỀ. `renderCats()` ở
`library.html` đã ghi "cat mới thì phải sửa BỐN chỗ cùng lúc" (mảng `cats` ·
`CAT_ICON` · khoá i18n `cat_*` ở cả vi và en · rule `.cat--*` dưới đây) — nay
là NĂM: thêm cả `--cat-n` ngay dưới. Quên thì trang không hỏng, chỉ nhảy lại
50px, tức hỏng ÊM — nên `scratchpad/check_pages.py` đối chiếu hai con số. */
#cats{--cat-h:50px;--cat-gap:4px;--cat-n:10;
min-height:calc(var(--cat-n) * var(--cat-h) + (var(--cat-n) - 1) * var(--cat-gap));}
.cat{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;text-align:left;padding:9px 11px;border-radius:11px;color:var(--ink);
border:1px solid transparent;background:transparent;transition:background .18s,border-color .18s,transform .15s;margin-bottom:4px;}
.cat:hover{background:rgba(56,189,248,.08);} .cat:active{transform:scale(.97);}
.cat.active{background:linear-gradient(120deg,rgba(56,189,248,.16),rgba(192,132,252,.12));border-color:rgba(56,189,248,.5);}
.cat .c-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:15px;color:var(--cat-c,var(--cyan));background:var(--cat-bg,rgba(56,189,248,.14));border:1px solid var(--cat-c,rgba(56,189,248,.4));}
/* `.c-n` (số bài mỗi chủ đề) ĐÃ BỎ 09/08/2026 — lý do ghi ở `renderCats()`
trong library.html. Giữ rule mà không ai dùng là để lại một class chết. */
.cat .c-nm{flex:1;font-size:13.5px;font-weight:500;}
.cat--astronomy{--cat-c:#38bdf8;--cat-bg:rgba(56,189,248,.14);}
.cat--ai{--cat-c:#c084fc;--cat-bg:rgba(192,132,252,.14);}
.cat--quantum{--cat-c:#4ade80;--cat-bg:rgba(74,222,128,.14);}
.cat--robot{--cat-c:#fb923c;--cat-bg:rgba(251,146,60,.14);}
.cat--life{--cat-c:#7ee07a;--cat-bg:rgba(126,224,122,.14);}
.cat--math{--cat-c:#ffcf6b;--cat-bg:rgba(255,207,107,.14);}
.cat--physics{--cat-c:#7fb0ff;--cat-bg:rgba(127,176,255,.14);}
.cat--engineering{--cat-c:#c0a4ff;--cat-bg:rgba(192,164,255,.14);}
.cat--it{--cat-c:#4aa890;--cat-bg:rgba(74,168,144,.14);}
.cat--all{--cat-c:#9fb0d0;--cat-bg:rgba(159,176,208,.14);}
.stats{display:flex;flex-direction:column;gap:10px;}
.stat{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(15,23,42,.5);border:1px solid var(--brd);}
.stat .s-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:16px;color:var(--s-c);background:var(--s-bg);border:1px solid var(--s-c);}
.stat .s-ic img{width:16px;height:16px;object-fit:contain;}
.stat .s-b{display:flex;flex-direction:column;line-height:1.1;}
.stat .s-v{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;}
.stat .s-l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;}
.stat.read{--s-c:#38bdf8;--s-bg:rgba(56,189,248,.14);}
.stat.coll{--s-c:#c084fc;--s-bg:rgba(192,132,252,.14);} .stat.coll .s-v{color:#e9d7ff;}
/* CENTER FEED */
.feed{min-width:0;}
/* Hero card */
.feat{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:20px;overflow:hidden;cursor:pointer;
border:1px solid rgba(56,189,248,.35);box-shadow:0 26px 60px -28px rgba(0,0,0,.8), 0 0 40px -14px rgba(56,189,248,.4);
transition:transform .35s var(--jelly),box-shadow .35s;}
.feat:hover{transform:translateY(-4px);box-shadow:0 34px 70px -26px rgba(0,0,0,.85),0 0 54px -8px rgba(56,189,248,.6);}
@media(max-width:620px){.feat{grid-template-columns:1fr;}}
.imgbox{position:relative;overflow:hidden;background:radial-gradient(circle at 40% 35%, var(--c1,#2f6fd0), var(--c2,#1c4c96) 55%, var(--c3,#081d44) 100%);}
.imgbox .em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));z-index:1;}
.imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.imgbox::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,transparent 55%,rgba(11,15,25,.5)),linear-gradient(180deg,transparent 60%,rgba(11,15,25,.35));}
.feat .imgbox{min-height:220px;}
.feat-body{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(15,23,42,.62),rgba(15,23,42,.55));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
color:#cfe8ff;background:rgba(6,10,22,.6);border:1px solid rgba(120,180,255,.45);padding:4px 10px;border-radius:999px;}
.badge.nasa{color:#cfe8ff;border-color:rgba(120,180,255,.5);}
.badge.esa{color:#bfead4;border-color:rgba(74,222,128,.5);}
.badge.ai{color:#e6ccff;border-color:rgba(192,132,252,.5);}
.feat-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-top:12px;}
.feat h1{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.6vw,26px);line-height:1.25;margin:6px 0 0;}
.feat p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:10px 0 0;flex:1;}
/* ⚠️⚠️ `#feat-lead` LÀ Ô RỖNG CHỜ CHỮ, nên nó là thứ làm nhảy bố cục nhiều thứ hai
ở trang này (sau `#cats`). `renderFeatured()` cố ý dựng thẻ NGAY rồi mới điền
đoạn mở đầu khi `js/article/.js` về — quyết định đó đúng (thà thẻ hiện sớm
còn hơn chờ), nhưng cái ô rỗng thì phải CHIẾM CHỖ SẴN, không thì mọi thứ dưới
hero tụt xuống đúng 167px lúc chữ về (đo 25/08/2026: CLS 0,0865 ở 1440px).
⚠️ 8 dòng là con số ĐO ĐƯỢC, không phải chọn bừa: đoạn mở đầu hiện tại 93 chữ,
cao 167px ở 1200–1600px với `line-height` 20,925px — tức đúng 8 dòng. Viết
bằng `em` (8 × 1,55em) chứ không viết 167px, để đổi `font-size` là nó tự theo.
⚠️ KHÔNG cắt chữ bằng `-webkit-line-clamp` để chiều cao thành cố định tuyệt đối:
làm thế thì hết nhảy hẳn, nhưng nó CẮT MẤT chữ trẻ đang đọc — đổi một lỗi
hiển thị thành một lỗi nội dung. Đặt chỗ trước thì dư ra vài chục pixel ở một
số bề rộng (đo: 126px ở 560–620px, 272px ở 900px) mà không mất chữ nào.
⚠️ Chỉ đặt cho `#feat-lead`, KHÔNG cho `.feat p` chung: thẻ thường ở `.feat-row`
không có ô chờ chữ nào, đặt chỗ trước ở đó là chừa khoảng trống vô cớ. */
#feat-lead{min-height:calc(8 * 1.55em);}
.read-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;margin-top:16px;cursor:pointer;border:none;
padding:12px 20px;border-radius:13px;font-family:var(--font-display);font-weight:700;font-size:14px;color:#04060f;
background:linear-gradient(120deg,var(--cyan),var(--purple));box-shadow:0 12px 26px -12px rgba(56,189,248,.8);transition:transform .25s var(--jelly),filter .2s;}
.read-btn img{width:15px;height:15px;object-fit:contain;}
.read-btn:hover{filter:brightness(1.08);transform:translateY(-2px);} .read-btn:active{transform:scale(.94);}
/* Ba thẻ còn lại của khối nổi bật (1 thẻ lớn + 3 = LUÔN 4 bài, xem `pickFeatured`
trong library.html). Dùng `repeat(3,1fr)` chứ KHÔNG `auto-fill` như `.grid`:
ở đây số thẻ cố định là 3, để auto-fill thì trên màn rộng chúng co lại và chừa
một khoảng trống bên phải, đọc ra như thẻ thứ tư tải hỏng. Dưới 760px xuống 2
cột rồi 1 cột — thẻ hẹp hơn ~215px thì tiêu đề bài viết vỡ thành 4 dòng. */
/* ⚠️⚠️ SÀN CHIỀU CAO CHO KHỐI HERO — đây là cú nhảy LỚN NHẤT còn lại của trang.
`#hero-wrap` rỗng trong HTML; `renderFeatured()` dựng cả thẻ lớn + 3 thẻ thường
vào đó sau khi mục lục về. Trên mạng chậm, khung sơn đầu tiên có `#hero-wrap`
cao 0 nên `.feed-head` và cả lưới bên dưới **trôi ~680px** khi khối này hiện
(đo 25/08/2026: CLS 0,5695 ở 768px, 0,1120 ở 1440px).
⚠️⚠️ KHÔNG THỂ đặt chỗ CHÍNH XÁC ở đây, và lý do đáng ghi: chiều cao thật đo được
trải từ **678px đến 1465px** tuỳ bề rộng (không đơn điệu — 843px ở 900px rồi
tụt còn 724px ở 768px, vì `.feat` đổi sang một cột ở 620px và `.feat-row` đổi
3→2→1 cột), VÀ nó còn phụ thuộc bài nào làm hero — `featured()` chọn "bài CHƯA
ĐỌC đầu tiên", tức mỗi đứa trẻ một bài, một độ dài chữ khác.
⚠️ Vì thế đặt một SÀN chứ không đặt chiều cao đúng: sàn = cấu tạo NHỎ NHẤT có thể
(thẻ lớn 370px + khoảng 18px + thẻ thường 244px = 632px, đều là số đo). Sàn
thấp hơn mọi giá trị thật nên **không bao giờ chừa khoảng trống**, mà vẫn cắt
được ~632px trong ~680px của cú nhảy. Phần dư còn lại là cái giá của việc
không nói dối về một chiều cao mình không biết trước. */
#hero-wrap{--feat-min:370px;--card-min:244px;--hero-gap:18px;
min-height:calc(var(--feat-min) + var(--hero-gap) + var(--card-min));}
/* ⚠️ `renderFeatured()` gắn lớp này khi nó CỐ Ý xoá rỗng khối hero (đang tìm / đang
lọc). Không dùng `#hero-wrap:empty` được: lúc khung sơn ĐẦU TIÊN nó cũng rỗng, mà
đó đúng là lúc cần cái sàn — `:empty` sẽ tắt sàn ngay lúc nó có việc. */
#hero-wrap.is-empty{min-height:0;}
.feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;}
@media(max-width:760px){.feat-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.feat-row{grid-template-columns:1fr;}}
.feed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 2px;}
.feed-head .ft{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);}
.feed-head .fc{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px;margin-top:14px;}
.card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;cursor:pointer;
border:1px solid var(--brd);background:rgba(15,23,42,.5);box-shadow:0 18px 44px -26px rgba(0,0,0,.7);
transition:transform .3s var(--jelly),border-color .25s,box-shadow .25s;}
.card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.65);box-shadow:0 28px 56px -22px rgba(0,0,0,.8),0 0 30px -6px rgba(56,189,248,.55);}
.card .imgbox{height:130px;}
.card .imgbox .em{font-size:40px;}
.card .cbody{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1;}
.card .cbody .badge{margin-bottom:9px;}
.card .cbody h3{font-family:var(--font-display);font-weight:600;font-size:14.5px;line-height:1.32;margin:0;color:#fff;}
.card .cbody .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.card .r{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--purple);
background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.4);padding:3px 9px;border-radius:999px;}
.card .r img{width:13px;height:13px;object-fit:contain;} .card .r.done{color:var(--green);background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4);}
.card .cat-dot{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-faint);font-size:14px;padding:40px 0;}
/* ============ READER MODAL ============ */
.modal{z-index:60;padding:16px;background:rgba(4,6,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s;}
.reader{width:100%;max-width:600px;max-height:90vh;overflow:auto;border-radius:22px;position:relative;
background:linear-gradient(180deg, rgba(16,22,40,.98), rgba(11,15,25,.99));border:1px solid rgba(56,189,248,.45);
box-shadow:0 28px 70px -26px rgba(0,0,0,.9), 0 0 48px -12px rgba(56,189,248,.5);transform:translateY(12px) scale(.97);transition:transform .35s var(--jelly);}
.modal.show .reader{transform:none;}
.r-close{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border-radius:10px;cursor:pointer;border:1px solid var(--brd);background:rgba(9,14,28,.75);color:var(--ink);font-size:15px;transition:background .18s,transform .12s;}
.r-close:hover{background:rgba(255,255,255,.12);} .r-close:active{transform:scale(.9);}
.r-hero{position:relative;height:210px;overflow:hidden;border-radius:22px 22px 0 0;}
.r-hero .em{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:70px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));z-index:1;}
.r-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.r-hero::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 45%,rgba(11,15,25,.92));}
.r-badge{position:absolute;top:12px;left:14px;z-index:4;}
.r-in{padding:6px 24px 22px;}
.r-in h2{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.3;margin:8px 0 0;}
.r-body{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:14px 0 0;}
.r-body p{margin:0 0 12px;}
/* mascot box */
/* ⚠️ `[hidden]` BỊ `display` CỦA TÁC GIẢ THẮNG — bài học đã ghi hai lần trong dự án
(`#time-ok` của bước ② nhiệm vụ, và `.pbtn` của cây chặng). Khối linh vật là
PHẦN THÊM: bài không khai `term` thì `openReader` đặt `hidden`, nên phải có
dòng này, không thì nó vẫn hiện ra rỗng. */
.mascot[hidden]{display:none;}
.mascot{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;padding:14px;border-radius:16px;
background:linear-gradient(180deg,rgba(56,189,248,.1),rgba(192,132,252,.08));border:1px solid rgba(56,189,248,.4);}
.mascot img{width:54px;height:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(56,189,248,.4));}
.mascot .m-body .m-who{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.mascot .m-body p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:5px 0 0;}
.mascot .m-body b{color:var(--cyan);}
.credit{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-faint);margin-top:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.credit a{color:var(--cyan);display:inline-flex;align-items:center;gap:4px;}
.r-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.r-claim{width:100%;cursor:pointer;border:none;padding:13px;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:14px;color:#04060f;
display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(120deg,var(--cyan),var(--purple));box-shadow:0 12px 26px -12px rgba(56,189,248,.8);transition:transform .25s var(--jelly),filter .2s,opacity .2s;}
.r-claim img{width:17px;height:17px;object-fit:contain;}
.r-claim:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3);box-shadow:none;}
.r-claim.done{background:rgba(74,222,128,.16);color:var(--green);border:1px solid rgba(74,222,128,.5);}
.r-quiz{width:100%;cursor:pointer;padding:14px;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#04060f;border:none;
background:linear-gradient(120deg,var(--gold),var(--amber));box-shadow:0 12px 26px -12px rgba(251,146,60,.8);transition:transform .25s var(--jelly),filter .2s;}
.r-quiz:hover{filter:brightness(1.07);transform:translateY(-2px);} .r-quiz:active{transform:scale(.95);}
/* Toast cao hơn khung chung vì header trang này thấp hơn. */
.toast{top:70px;z-index:80;}
/* Vùng chạm 44px trên thiết bị cảm ứng — lý do ghi ở `css/common.css`. Đo trên
iPad: ô tìm kiếm cao 18px (chỉ có chữ, `.search` mới là cái khung), nút lọc
nguồn cao 25px, nút "Đọc Ngay" cao 42px. Ô tìm kiếm phải nới ở CHÍNH
chứ không phải ở `.search`: vùng bấm để hiện bàn phím là cái input. */
@media (pointer: coarse){
.search input{min-height:44px;}
.srcfilter button{min-width:44px;min-height:44px;}
.read-btn{min-height:44px;}
}