/* Trang Tin tức – mẫu A (sinh từ cong-cu/tao-tin-tuc-php.js, không sửa tay) */
/* 1. Token sáng + tối (màu thương hiệu các block trang chủ) */
.tn-tt1{--tt1-primary:#0068FF;--tt1-accent:#1597E5;--tt1-link:#0052CC;--tt1-ink:#173B73;--tt1-head:#0B3A75;--tt1-text:#3B4A63;--tt1-muted:#5B6B85;--tt1-surface:#FFFFFF;--tt1-bg:linear-gradient(180deg,#F7FBFF 0%,#EEF6FF 100%);--tt1-tint:#EAF2FF;--tt1-line:#D8E6FF;--tt1-line-2:#BFDBFE;--tt1-shadow:0 18px 44px -24px rgb(0 62 168 / .3)}
/* Chế độ tối: đọc html[data-med-theme] do header ghi (selector toàn cục bắt buộc) */
:root[data-med-theme="dark"] .tn-tt1{--tt1-primary:#60A5FA;--tt1-accent:#38BDF8;--tt1-link:#93C5FD;--tt1-ink:#F1F5F9;--tt1-head:#E2E8F0;--tt1-text:#CBD5E1;--tt1-muted:#A8B7CC;--tt1-surface:#111C30;--tt1-bg:linear-gradient(180deg,#0B1220 0%,#0F172A 100%);--tt1-tint:rgb(96 165 250 / .14);--tt1-line:rgb(255 255 255 / .09);--tt1-line-2:rgb(96 165 250 / .32);--tt1-shadow:0 18px 44px -24px rgb(0 0 0 / .7)}
/* 2. Reset trong phạm vi block + full-width */
body{overflow-x:clip} /* block full-width: chặn cuộn ngang */
.tn-tt1{position:relative;isolation:isolate;width:100vw;margin-inline:calc(50% - 50vw);padding:64px 0;overflow:hidden;background:var(--tt1-bg);color:var(--tt1-text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:16px;line-height:1.6}
.tn-tt1 *,.tn-tt1 *::before,.tn-tt1 *::after{box-sizing:border-box}
.tn-tt1 :is(h2,h3,p,ul,li,a,span,figure,img,article,div,aside,strong){margin:0;padding:0;font-family:inherit!important;letter-spacing:normal;text-transform:none;line-height:inherit;box-shadow:none}
.tn-tt1 :is(h2,h3,a){color:inherit}
.tn-tt1 ul{list-style:none}
.tn-tt1 a{text-decoration:none}
.tn-tt1 img{display:block;max-width:100%;height:auto;border:0}
.tn-tt1 .tn-tt1-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tn-tt1 :focus-visible{outline:2px solid var(--tt1-primary);outline-offset:3px}
.tn-tt1 p{text-wrap:pretty}
/* 3. Component chung */
.tn-tt1 .tn-tt1-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.tn-tt1 .tn-tt1-head{max-width:820px;margin:0 auto 28px;text-align:center}
.tn-tt1 .tn-tt1-title{color:var(--tt1-ink);font-size:clamp(30px,6.6vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.028em;text-wrap:balance}
.tn-tt1 .tn-tt1-title span{background:linear-gradient(135deg,var(--tt1-primary),var(--tt1-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.tn-tt1 .tn-tt1-sub{margin-top:14px;color:var(--tt1-muted);font-size:16px;line-height:1.7}
@media (min-width:768px){.tn-tt1{padding:96px 0}.tn-tt1 .tn-tt1-wrap{padding:0 24px}.tn-tt1 .tn-tt1-head{margin-bottom:44px}.tn-tt1 .tn-tt1-sub{font-size:17px}}
.tn-tt1 .tn-tt1-h3{color:var(--tt1-ink);font-size:clamp(22px,5.4vw,30px);font-weight:800;line-height:1.25;letter-spacing:-.02em;text-align:center;text-wrap:balance}
.tn-tt1 .tn-tt1-h3 span{background:linear-gradient(135deg,var(--tt1-primary),var(--tt1-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.tn-tt1 :is(h4,details,summary){margin:0;padding:0;font-family:inherit!important}
.tn-tt1{--tt1-bg:#F7FBFF}
:root[data-med-theme="dark"] .tn-tt1{--tt1-bg:#0B1220}
.tn-tt1 :is(h1,h3,nav,article,figure,time,aside){margin:0;padding:0}
.tn-tt1 h1{font-family:inherit!important}
.tn-tt1 .tn-tt1-cats{display:flex;gap:8px;margin:0 -16px 28px;padding:2px 16px 6px;overflow-x:auto;scrollbar-width:none}
.tn-tt1 .tn-tt1-cats::-webkit-scrollbar{display:none}
.tn-tt1 .tn-tt1-cats a{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 16px;border:1px solid var(--tt1-line-2);border-radius:999px;background:var(--tt1-surface);color:var(--tt1-head);font-size:15px;font-weight:600;white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.tn-tt1 .tn-tt1-cats a:hover,.tn-tt1 .tn-tt1-cats a[aria-current]{border-color:transparent;background:linear-gradient(135deg,#0052CC,#1597E5);color:#FFFFFF}
.tn-tt1 .tn-tt1-tag{align-self:flex-start;display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;background:var(--tt1-tint);color:var(--tt1-link);font-size:13px;font-weight:700;line-height:1.3}
.tn-tt1 article{position:relative}
.tn-tt1 article h3 a::after,.tn-tt1 article h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.tn-tt1 article:focus-within{outline:3px solid var(--tt1-primary);outline-offset:3px}
.tn-tt1 time{display:inline-flex;align-items:center;gap:6px;color:var(--tt1-muted);font-size:14px}
.tn-tt1 .tn-tt1-grid{display:grid;gap:18px}
.tn-tt1 .tn-tt1-grid > li{display:flex}
.tn-tt1 .tn-tt1-card{display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--tt1-line);border-radius:20px;background:var(--tt1-surface);box-shadow:var(--tt1-shadow);transition:transform .3s ease,box-shadow .3s ease}
.tn-tt1 .tn-tt1-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tn-tt1 .tn-tt1-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.tn-tt1 .tn-tt1-card h3{color:var(--tt1-head);font-size:17px;font-weight:800;line-height:1.4;text-wrap:pretty}
.tn-tt1 .tn-tt1-card p{display:-webkit-box;margin-top:8px;overflow:hidden;color:var(--tt1-muted);font-size:15px;line-height:1.6;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tn-tt1 .tn-tt1-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.tn-tt1 .tn-tt1-meta b{display:inline-flex;align-items:center;gap:6px;color:var(--tt1-link);font-size:14px;font-weight:600}
.tn-tt1 .tn-tt1-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -24px rgb(0 82 204 / .45)}
.tn-tt1 .tn-tt1-card:hover h3{color:var(--tt1-link)}
.tn-tt1 .tn-tt1-pages{display:flex;justify-content:center;gap:8px;margin-top:32px}
.tn-tt1 .tn-tt1-pages a,.tn-tt1 .tn-tt1-pages span{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--tt1-line-2);border-radius:12px;background:var(--tt1-surface);color:var(--tt1-head);font-size:15px;font-weight:700}
.tn-tt1 .tn-tt1-pages [aria-current]{border-color:transparent;background:linear-gradient(135deg,#0047C7,#1597E5);color:#FFFFFF}
.tn-tt1 .tn-tt1-cta{max-width:760px;margin:44px auto 0;padding:26px 20px;border:1px solid var(--tt1-line-2);border-radius:22px;background:var(--tt1-tint);text-align:center}
.tn-tt1 .tn-tt1-cta h2{color:var(--tt1-head);font-size:clamp(20px,4.6vw,24px);font-weight:800;line-height:1.3}
.tn-tt1 .tn-tt1-cta p{margin-top:6px;color:var(--tt1-text);font-size:15.5px;line-height:1.6}
.tn-tt1 .tn-tt1-cta .tn-tt1-acts{gap:8px}.tn-tt1 .tn-tt1-cta .tn-tt1-btn{padding:0 11px}
@media (min-width:641px){.tn-tt1 .tn-tt1-cats{flex-wrap:wrap;justify-content:center;margin-inline:0;padding-inline:0;overflow:visible}.tn-tt1 .tn-tt1-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tn-tt1 .tn-tt1-cta .tn-tt1-btn{padding:0 22px}}
@media (min-width:1024px){.tn-tt1 .tn-tt1-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (prefers-reduced-motion:reduce){.tn-tt1 .tn-tt1-card:hover{transform:none}}
/* Cặp nút gọi + Zalo: giống hệt 2 nút banner trang chủ — bo 10px, vừa chữ, cùng một hàng */
.tn-tt1 .tn-tt1-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.tn-tt1 .tn-tt1-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 14px;border-radius:10px;font-size:clamp(14px,3.9vw,16px);font-weight:800;line-height:1.2;white-space:nowrap;transition:transform .25s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.tn-tt1 .tn-tt1-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#1E40AF;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tn-tt1 .tn-tt1-btn:hover::before,.tn-tt1 .tn-tt1-btn:focus-visible::before{transform:scaleX(1)}
.tn-tt1 .tn-tt1-btn svg{display:block;flex:none}
.tn-tt1 .tn-tt1-btn--call{background:linear-gradient(90deg,#0047C7,#1597E5);color:#FFFFFF;box-shadow:0 8px 18px -12px rgb(0 71 199 / .8)}
.tn-tt1 .tn-tt1-btn--call .tn-tt1-i{font-size:17px;stroke-width:2.2}
.tn-tt1 .tn-tt1-btn--zalo{border:1.5px solid #5B9BFF;background:#EAF2FF;color:#0052CC}
.tn-tt1 .tn-tt1-btn--zalo .tn-tt1-zi{width:21px;height:21px;border-radius:5px;transition:box-shadow .25s ease}
.tn-tt1 .tn-tt1-btn:hover,.tn-tt1 .tn-tt1-btn:focus-visible{color:#FFFFFF;border-color:#1E40AF;transform:translateY(-2px);box-shadow:0 0 0 6px rgb(96 165 250 / .25),0 18px 32px -12px rgb(15 23 42 / .45)}
.tn-tt1 .tn-tt1-btn--zalo:hover .tn-tt1-zi,.tn-tt1 .tn-tt1-btn--zalo:focus-visible .tn-tt1-zi{box-shadow:0 0 0 1.5px #FFFFFF}
.tn-tt1 .tn-tt1-btn:active{transform:scale(.97)}
.tn-tt1 .tn-tt1-btn--call:hover svg,.tn-tt1 .tn-tt1-btn--call:focus-visible svg{animation:tt1CallHit .8s ease-in-out}
@keyframes tt1CallHit{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
:root[data-med-theme="dark"] .tn-tt1 .tn-tt1-btn--zalo{background:#132A4D;border-color:#4F8FE8;color:#BFDBFE}
:root[data-med-theme="dark"] .tn-tt1 .tn-tt1-btn--zalo:hover,:root[data-med-theme="dark"] .tn-tt1 .tn-tt1-btn--zalo:focus-visible{color:#FFFFFF;border-color:#1E40AF}
@media (max-width:359px){.tn-tt1 .tn-tt1-btn svg{display:none}} /* màn hình rất hẹp: ẩn icon để 2 nút vẫn vừa một dòng */
@media (min-width:641px){.tn-tt1 .tn-tt1-btn{gap:9px;min-height:50px;padding:0 24px;font-size:16px}.tn-tt1 .tn-tt1-btn--call .tn-tt1-i{font-size:18px}.tn-tt1 .tn-tt1-btn--zalo .tn-tt1-zi{width:22px;height:22px}}
@keyframes tt1CallHit{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
.tn-tt1 .tn-tt1-cols{display:grid;gap:28px}
.tn-tt1 .tn-tt1-side{display:grid;gap:16px;align-content:start}
.tn-tt1 .tn-tt1-box{padding:20px;border:1px solid var(--tt1-line);border-radius:18px;background:var(--tt1-surface)}
.tn-tt1 .tn-tt1-box h2{margin-bottom:12px;color:var(--tt1-head);font-size:17px;font-weight:800}
.tn-tt1 .tn-tt1-q{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:1.5px solid var(--tt1-line-2);border-radius:12px;color:var(--tt1-primary);transition:border-color .2s ease,box-shadow .2s ease}
.tn-tt1 .tn-tt1-q:focus-within{border-color:var(--tt1-primary);box-shadow:0 0 0 4px rgb(0 104 255 / .14)}
.tn-tt1 .tn-tt1-q input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none;color:var(--tt1-head);font:inherit;font-size:16px}
.tn-tt1 .tn-tt1-cl li a{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--tt1-line);color:var(--tt1-text);font-size:15px}
.tn-tt1 .tn-tt1-cl li:last-child a{border-bottom:0}
.tn-tt1 .tn-tt1-cl li a i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.tn-tt1 .tn-tt1-cl li a span{margin-left:auto;display:grid;place-items:center;min-width:28px;height:24px;border-radius:999px;background:var(--tt1-tint);color:var(--tt1-link);font-size:13px;font-weight:700}
.tn-tt1 .tn-tt1-cl li a:hover{color:var(--tt1-link)}
.tn-tt1 .tn-tt1-ml{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tn-tt1 .tn-tt1-ml > li{list-style:none}
.tn-tt1 .tn-tt1-ml > li::marker{content:none}
.tn-tt1 .tn-tt1-ml article{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.tn-tt1 .tn-tt1-ml img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.tn-tt1 .tn-tt1-ml b{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tt1-tint);color:var(--tt1-link);font-size:16px;font-weight:800}
.tn-tt1 .tn-tt1-ml h3{color:var(--tt1-head);font-size:14.5px;font-weight:700;line-height:1.4}
.tn-tt1 .tn-tt1-ml article:hover h3{color:var(--tt1-link)}
.tn-tt1 .tn-tt1-ml time{margin-top:4px;font-size:13px}
.tn-tt1 .tn-tt1-side .tn-tt1-cta{margin:0;padding:22px 12px}
.tn-tt1 .tn-tt1-side .tn-tt1-cta .tn-tt1-btn{padding:0 10px;font-size:15px}
.tn-tt1 .tn-tt1-pages{justify-content:flex-start;flex-wrap:wrap}
.tn-tt1 .tn-tt1-pages .tn-tt1-dots{border:0;background:none;min-width:24px}
@media (min-width:1024px){.tn-tt1 .tn-tt1-cols{grid-template-columns:minmax(0,1fr) 344px;gap:40px}.tn-tt1 .tn-tt1-side{position:sticky;top:96px}}
.tn-tt1 .tn-tt1-rows{display:grid;gap:18px}
.tn-tt1 .tn-tt1-row{display:grid;gap:0;overflow:hidden;border:1px solid var(--tt1-line);border-radius:22px;background:var(--tt1-surface);box-shadow:var(--tt1-shadow);transition:transform .3s ease,box-shadow .3s ease}
.tn-tt1 .tn-tt1-row figure{position:relative;overflow:hidden}
.tn-tt1 .tn-tt1-row img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.tn-tt1 .tn-tt1-row .tn-tt1-rb{display:flex;flex-direction:column;padding:18px 20px 20px}
.tn-tt1 .tn-tt1-row .tn-tt1-tag i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--c)}
.tn-tt1 .tn-tt1-row h2{color:var(--tt1-head);font-size:clamp(18px,3.6vw,21px);font-weight:800;line-height:1.38;letter-spacing:-.01em;text-wrap:pretty}
.tn-tt1 .tn-tt1-row p{display:-webkit-box;margin-top:8px;overflow:hidden;color:var(--tt1-muted);font-size:15.5px;line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tn-tt1 .tn-tt1-row:hover{transform:translateY(-4px);box-shadow:0 26px 48px -26px rgb(0 82 204 / .5)}
.tn-tt1 .tn-tt1-row:hover img{transform:scale(1.05)}
.tn-tt1 .tn-tt1-row:hover h2{color:var(--tt1-link)}
@media (min-width:641px){.tn-tt1 .tn-tt1-row{grid-template-columns:260px 1fr}.tn-tt1 .tn-tt1-row figure{min-height:200px}.tn-tt1 .tn-tt1-row img{position:absolute;inset:0;aspect-ratio:auto}.tn-tt1 .tn-tt1-row .tn-tt1-rb{padding:22px 24px}}
@media (prefers-reduced-motion:reduce){.tn-tt1 .tn-tt1-row:hover,.tn-tt1 .tn-tt1-row:hover img{transform:none}}
.tn-tt1 .tn-tt1-row figure.tn-tt1-ph{display:grid;place-items:center;min-height:180px;background:var(--tt1-tint);color:var(--tt1-link)}
.tn-tt1 .tn-tt1-row figure.tn-tt1-ph svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.6}
.tn-tt1 .tn-tt1-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tn-tt1 .tn-tt1-pages .dots{border:0;background:none;min-width:24px}
.tn-tt1 .tn-tt1-empty{padding:28px;border:1px dashed var(--tt1-line-2);border-radius:18px;color:var(--tt1-muted);text-align:center}
/* 5. Hiện dần khi cuộn (opacity/transform, lệch 80ms) + tắt khi giảm chuyển động */
.tn-tt1.tn-tt1--anim .tn-tt1-rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--tt1-d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--tt1-d,0ms)}
.tn-tt1.tn-tt1--anim .tn-tt1-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tn-tt1 .tn-tt1-rv{opacity:1!important;transform:none!important;transition:none!important}.tn-tt1 *,.tn-tt1 *::before{transition:none!important;animation:none!important}.tn-tt1 :hover{transform:none!important}}