/* Trang Tin tức / chuyên mục / tìm kiếm (inc/blog.php) – bố cục mẫu B. Sinh từ tin-tuc/mau/tt-mau-b.html */
/* ---------- 1. Token sáng + tối ---------- */
.tn-ttb{--ttb-primary:#2F7BF5;--ttb-primary-2:#60A5FA;--ttb-hl:#2563EB;--ttb-ink:#0F172A;--ttb-text:#334155;--ttb-muted:#64748B;--ttb-bg:#FFFFFF;--ttb-bg-b:#EEF5FF;--ttb-bg-c:#D3E4FD;--ttb-tint:#EFF6FF;--ttb-line:#DBEAFE;--ttb-line-h:#93C5FD;--ttb-card:#FFFFFF;--ttb-grid:rgb(47 123 245 / .07);--ttb-badge-bg:rgb(255 255 255 / .7);--ttb-badge-line:rgb(47 123 245 / .45);--ttb-chip-bg:#FFFFFF;--ttb-chip-on-a:#2563EB;--ttb-chip-on-b:#3B82F6;--ttb-ghost-bg:rgb(255 255 255 / .75);--ttb-ghost-line:rgb(47 123 245 / .35);--ttb-ghost-fg:#0F172A;--ttb-call-a:#2563EB;--ttb-call-b:#3B82F6;--ttb-call-fill:#1E40AF;--ttb-on:#FFFFFF;--ttb-ph-a:#DBEAFE;--ttb-ph-b:#BFDBFE;--ttb-ph-ic:#2563EB;--ttb-focus:#2563EB;--ttb-shadow:0 10px 30px -12px rgb(15 23 42 / .12);--ttb-shadow-h:0 18px 40px -16px rgb(37 99 235 / .3);--ttb-r-lg:28px;--ttb-r-md:18px;--ttb-r-pill:999px}
/* Giao ước sáng/tối: đọc thuộc tính data-med-theme trên thẻ html */
:root[data-med-theme="dark"] .tn-ttb{--ttb-hl:#93C5FD;--ttb-ink:#F1F5F9;--ttb-text:#CBD5E1;--ttb-muted:#94A3B8;--ttb-bg:#0B1220;--ttb-bg-b:#0E1B33;--ttb-bg-c:#14305E;--ttb-tint:#0F1B30;--ttb-line:#1E2E4A;--ttb-line-h:#3B82F6;--ttb-card:#0F1A2C;--ttb-grid:rgb(147 197 253 / .06);--ttb-badge-bg:rgb(15 23 42 / .5);--ttb-badge-line:rgb(147 197 253 / .4);--ttb-chip-bg:#0F1A2C;--ttb-ghost-bg:rgb(15 23 42 / .5);--ttb-ghost-line:rgb(147 197 253 / .35);--ttb-ghost-fg:#F1F5F9;--ttb-ph-a:#13254A;--ttb-ph-b:#1E3A8A;--ttb-ph-ic:#93C5FD;--ttb-focus:#93C5FD;--ttb-shadow:0 10px 30px -12px rgb(0 0 0 / .6);--ttb-shadow-h:0 18px 40px -16px rgb(0 0 0 / .7)}
/* ---------- 2. Reset trong phạm vi block ---------- */
.tn-ttb{display:block;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw)!important;padding:0!important;background:var(--ttb-bg);color:var(--ttb-text);font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:clip}
/* Khối full-width (100vw): chặn thanh cuộn ngang của cả trang */
body{overflow-x:clip}
.tn-ttb *,.tn-ttb *::before,.tn-ttb *::after{box-sizing:border-box}
.tn-ttb :is(h1,h2,h3,p,ul,ol,li,figure,nav,aside,form,label){margin:0;padding:0;border:0;background:none;box-shadow:none;font-family:inherit!important;text-transform:none;letter-spacing:normal}
.tn-ttb :is(h1,h2,h3){color:var(--ttb-ink);font-weight:700;line-height:1.25}
.tn-ttb :is(ul,ol){list-style:none}
.tn-ttb :is(ul,ol)>li::before{content:none}
.tn-ttb a{color:inherit;text-decoration:none!important;box-shadow:none;font-family:inherit!important}
.tn-ttb img{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.tn-ttb input,.tn-ttb button{font:inherit;font-family:inherit!important;margin:0}
.tn-ttb svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tn-ttb :focus-visible{outline:3px solid var(--ttb-focus);outline-offset:3px}
.tn-ttb .tn-ttb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. Component ---------- */
.tn-ttb .tn-ttb-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
/* Đầu trang */
.tn-ttb .tn-ttb-top{padding:12px 12px 0}
.tn-ttb .tn-ttb-top-box{position:relative;overflow:hidden;max-width:1288px;margin:0 auto;padding:16px 16px 32px;border-radius:var(--ttb-r-lg);border:1px solid var(--ttb-line);text-align:center;background:linear-gradient(180deg,var(--ttb-bg) 0%,var(--ttb-bg-b) 55%,var(--ttb-bg-c) 100%)}
.tn-ttb .tn-ttb-top-box::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--ttb-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ttb-grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,black,transparent 90%);mask-image:linear-gradient(180deg,black,transparent 90%)}
.tn-ttb .tn-ttb-top-in{position:relative;max-width:760px;margin:0 auto}
.tn-ttb .tn-ttb-crumb ol{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;font-size:14px;color:var(--ttb-muted)}
.tn-ttb .tn-ttb-crumb li+li::before{content:"/";margin-right:8px;opacity:.6}
.tn-ttb .tn-ttb-crumb a{display:inline-flex;align-items:center;min-height:44px}
.tn-ttb .tn-ttb-crumb a:hover{color:var(--ttb-hl)}
.tn-ttb .tn-ttb-crumb [aria-current]{color:var(--ttb-ink);font-weight:600}
.tn-ttb h1{margin-top:8px;font-size:clamp(32px,6vw,52px);letter-spacing:-.02em;line-height:1.1}
.tn-ttb .hl{color:var(--ttb-hl)}
.tn-ttb .tn-ttb-lead{max-width:600px;margin:14px auto 0;font-size:16px}
/* Chuyên mục: thanh cuộn ngang trên điện thoại */
.tn-ttb .tn-ttb-cats{display:flex;gap:8px;margin:24px -16px 0;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.tn-ttb .tn-ttb-cats::-webkit-scrollbar{display:none}
.tn-ttb .tn-ttb-cats a{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 16px;border:1px solid var(--ttb-line);border-radius:var(--ttb-r-pill);background:var(--ttb-chip-bg);color:var(--ttb-ink);font-size:15px;font-weight:600;white-space:nowrap;transition:border-color .2s ease,color .2s ease}
.tn-ttb .tn-ttb-cats a:hover{border-color:var(--ttb-primary);color:var(--ttb-hl)}
.tn-ttb .tn-ttb-cats a small{font-size:12.5px;font-weight:600;color:var(--ttb-muted)}
.tn-ttb .tn-ttb-cats a[aria-current]{border-color:transparent;background:linear-gradient(135deg,var(--ttb-chip-on-a),var(--ttb-chip-on-b));color:var(--ttb-on)}
.tn-ttb .tn-ttb-cats a[aria-current] small{color:var(--ttb-on);opacity:.8}
/* Tìm kiếm */
.tn-ttb .tn-ttb-search{position:relative;display:flex;max-width:520px;margin:20px auto 0}
.tn-ttb .tn-ttb-search input{width:100%;min-height:52px;padding:0 56px 0 20px;border:1px solid var(--ttb-line);border-radius:var(--ttb-r-pill);background:var(--ttb-card);color:var(--ttb-ink);font-size:16px;outline:none;box-shadow:var(--ttb-shadow)}
.tn-ttb .tn-ttb-search input::placeholder{color:var(--ttb-muted)}
.tn-ttb .tn-ttb-search input:focus{border-color:var(--ttb-primary)}
.tn-ttb .tn-ttb-search button{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--ttb-call-a),var(--ttb-call-b));color:var(--ttb-on);cursor:pointer}
/* Thẻ bài viết */
.tn-ttb .tn-ttb-post{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--ttb-line);border-radius:var(--ttb-r-md);background:var(--ttb-card);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.tn-ttb .tn-ttb-post:hover{border-color:var(--ttb-line-h);box-shadow:var(--ttb-shadow-h);transform:translateY(-3px)}
.tn-ttb .tn-ttb-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--ttb-ph-a),var(--ttb-ph-b))}
.tn-ttb .tn-ttb-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tn-ttb .tn-ttb-post:hover .tn-ttb-thumb img{transform:scale(1.05)}
/* Bài chưa có ảnh đại diện: nền xanh + icon chuyên mục */
.tn-ttb .tn-ttb-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ttb-ph-ic)}
.tn-ttb .tn-ttb-ph svg{width:44px;height:44px;stroke-width:1.5;opacity:.85}
.tn-ttb .tn-ttb-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 20px 20px}
.tn-ttb .tn-ttb-tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--ttb-r-pill);background:var(--ttb-tint);color:var(--ttb-hl);font-size:12.5px;font-weight:700;letter-spacing:.02em;position:relative;z-index:2}
.tn-ttb .tn-ttb-post h2{font-size:18px;line-height:1.4}
.tn-ttb .tn-ttb-post h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.tn-ttb .tn-ttb-post h2 a:focus-visible{outline:none}
.tn-ttb .tn-ttb-post:has(h2 a:focus-visible){outline:3px solid var(--ttb-focus);outline-offset:3px}
.tn-ttb .tn-ttb-ex{font-size:15px;color:var(--ttb-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tn-ttb .tn-ttb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--ttb-muted)}
.tn-ttb .tn-ttb-meta span{display:inline-flex;align-items:center;gap:6px}
.tn-ttb .tn-ttb-meta svg{width:15px;height:15px}
/* Phân trang */
.tn-ttb .tn-ttb-pages{display:flex;justify-content:center;gap:8px;margin-top:40px}
.tn-ttb .tn-ttb-pages a,.tn-ttb .tn-ttb-pages span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border:1px solid var(--ttb-line);border-radius:50%;background:var(--ttb-card);color:var(--ttb-ink);font-weight:700;transition:border-color .2s ease,color .2s ease}
.tn-ttb .tn-ttb-pages a:hover{border-color:var(--ttb-line-h);color:var(--ttb-hl)}
.tn-ttb .tn-ttb-pages [aria-current]{border-color:transparent;background:linear-gradient(135deg,var(--ttb-chip-on-a),var(--ttb-chip-on-b));color:var(--ttb-on)}
.tn-ttb .tn-ttb-pages svg{width:18px;height:18px}
/* Khung tư vấn */
.tn-ttb .tn-ttb-help{padding:24px;border-radius:var(--ttb-r-md);text-align:center;background:linear-gradient(180deg,var(--ttb-bg-b),var(--ttb-bg-c));border:1px solid var(--ttb-line)}
.tn-ttb .tn-ttb-help h2{font-size:20px}
.tn-ttb .tn-ttb-help p{margin-top:8px;font-size:15px;color:var(--ttb-text)}
.tn-ttb .tn-ttb-ctas{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tn-ttb .tn-ttb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--ttb-r-pill);font-size:15.5px;font-weight:700;line-height:1.2;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.tn-ttb .tn-ttb-btn:active{transform:scale(.97)}
.tn-ttb .tn-ttb-btn--call{background:linear-gradient(135deg,var(--ttb-call-a),var(--ttb-call-b));color:var(--ttb-on);box-shadow:0 14px 28px -12px rgb(37 99 235 / .7)}
.tn-ttb .tn-ttb-btn--call:hover{background:var(--ttb-call-fill)}
.tn-ttb .tn-ttb-btn--zalo{background:var(--ttb-ghost-bg);border:1px solid var(--ttb-ghost-line);color:var(--ttb-ghost-fg)}
.tn-ttb .tn-ttb-btn--zalo:hover{border-color:var(--ttb-primary)}
.tn-ttb .tn-ttb-btn--zalo svg{color:var(--ttb-hl)}
.tn-ttb .tn-ttb-main{padding-top:40px;padding-bottom:64px}
/* Mẫu B: bài viết bên trái, cột bên phải có tìm kiếm, chuyên mục và khung tư vấn dính khi cuộn */
.tn-ttb .tn-ttb-layout{display:grid;gap:40px}
.tn-ttb .tn-ttb-grid{display:grid;gap:16px}
.tn-ttb .tn-ttb-side{display:grid;gap:20px;align-content:start}
.tn-ttb .tn-ttb-box{padding:20px;border:1px solid var(--ttb-line);border-radius:var(--ttb-r-md);background:var(--ttb-card)}
.tn-ttb .tn-ttb-box h2{font-size:17px;margin-bottom:12px}
.tn-ttb .tn-ttb-box .tn-ttb-search{margin:0}
.tn-ttb .tn-ttb-box .tn-ttb-search input{box-shadow:none;min-height:48px}
.tn-ttb .tn-ttb-box .tn-ttb-search button{width:40px;height:40px}
.tn-ttb .tn-ttb-catlist li+li{border-top:1px solid var(--ttb-line)}
.tn-ttb .tn-ttb-catlist a{display:flex;align-items:center;justify-content:space-between;min-height:46px;font-size:15px;font-weight:500;color:var(--ttb-ink)}
.tn-ttb .tn-ttb-catlist a:hover{color:var(--ttb-hl)}
.tn-ttb .tn-ttb-side .tn-ttb-ctas{flex-direction:column!important}
.tn-ttb .tn-ttb-catlist small{display:grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:var(--ttb-r-pill);background:var(--ttb-tint);color:var(--ttb-hl);font-size:12.5px;font-weight:700}
/* ---------- 4. Responsive (min-width) ---------- */
@media (min-width:560px){.tn-ttb .tn-ttb-help .tn-ttb-ctas{flex-direction:row;justify-content:center}}
@media (min-width:768px){.tn-ttb .tn-ttb-wrap{padding:0 24px}.tn-ttb .tn-ttb-top{padding:16px 16px 0}.tn-ttb .tn-ttb-top-box{padding:24px 32px 40px}.tn-ttb .tn-ttb-cats{justify-content:center;flex-wrap:wrap;margin:28px 0 0;padding:0;overflow:visible}.tn-ttb .tn-ttb-main{padding-top:56px;padding-bottom:96px}.tn-ttb .tn-ttb-help{padding:36px}}
@media (min-width:640px){.tn-ttb .tn-ttb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tn-ttb .tn-ttb-layout{grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}.tn-ttb .tn-ttb-grid{gap:24px}.tn-ttb .tn-ttb-side{position:sticky;top:96px}}
/* ---------- 5. Hiện dần khi cuộn + giảm chuyển động ---------- */
.tn-ttb.tn-ttb--anim .tn-ttb-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--ttb-d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--ttb-d,0ms)}
.tn-ttb.tn-ttb--anim .tn-ttb-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tn-ttb.tn-ttb--anim .tn-ttb-rv{opacity:1;transform:none;transition:none}.tn-ttb *{transition:none!important}}
/* Thông báo khi không có bài */
.tn-ttb .tn-ttb-empty{padding:32px;border:1px dashed var(--ttb-line);border-radius:var(--ttb-r-md);text-align:center;color:var(--ttb-muted)}
/* Dấu … giữa các số trang */
.tn-ttb .tn-ttb-pages .dots{border-color:transparent;background:none}