/* ======================================================================
   TRANG TIN TỨC (/tintuc) — danh sách + trang đọc bài
   ====================================================================== */
.tt-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:8px}
.tt-hero{position:relative;border-radius:28px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff;background:#1d1530 center/cover;box-shadow:0 30px 60px -30px rgba(19,13,30,.55);text-decoration:none}
.tt-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,13,30,.95) 8%,rgba(19,13,30,.35) 55%,rgba(19,13,30,.05))}
.tt-hero .in{position:relative;z-index:1;padding:30px;display:grid;gap:12px}
.tt-hero h2{margin:0;font:700 clamp(24px,2.6vw,34px)/1.2 var(--fd);letter-spacing:-.02em;color:#fff}
.tt-hero p{margin:0;color:#d9cfe8;max-width:560px;line-height:1.6}
.tt-tag{display:inline-flex;align-items:center;gap:6px;width:fit-content;height:28px;padding:0 11px;border-radius:999px;font:700 11.5px var(--fd);letter-spacing:.06em;text-transform:uppercase;background:#fff;color:var(--ink)}
.tt-tag.t-ev{background:#ffcf4d;color:#3a2600}.tt-tag.t-up{background:#8ff0c6;color:#063a28}.tt-tag.t-gd{background:#b9a2ff;color:#1e0f4d}.tt-tag.t-nw{background:#ffd1e2;color:#7a0a3a}
.tt-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:inherit;opacity:.85;align-items:center}
.tt-meta span{display:inline-flex;align-items:center;gap:5px}
.tt-meta svg{width:15px;height:15px}
.tt-cd{display:flex;gap:8px}
.tt-cd b{display:grid;place-items:center;min-width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);font:700 22px var(--fd);line-height:1}
.tt-cd b small{font:600 10px var(--fb);opacity:.75;margin-top:-10px}
.tt-side{display:grid;gap:14px;align-content:start}
.tt-box{background:#fff;border-radius:24px;padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.tt-box h3{margin:0 0 12px;font:700 16px var(--fd);display:flex;align-items:center;gap:8px}
.tt-hot{display:grid;gap:4px;counter-reset:h}
.tt-hot a{display:grid;grid-template-columns:28px 64px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:14px;color:var(--ink);text-decoration:none}
.tt-hot a:hover{background:var(--paper)}
.tt-hot a::before{counter-increment:h;content:counter(h);font:800 20px var(--fd);color:var(--ac);text-align:center}
.tt-hot i{width:64px;height:48px;border-radius:10px;background:#ddd center/cover}
.tt-hot b{font:600 13.5px/1.35 var(--fd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-hot small{color:var(--sub);font-size:12px}
.tt-ev{display:grid;gap:10px}
.tt-ev a{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none}
.tt-ev .d{flex:none;width:52px;height:56px;border-radius:14px;background:var(--nv);color:#fff;display:grid;place-items:center;text-align:center;font:800 20px/1 var(--fd)}
.tt-ev .d small{display:block;font:700 10px var(--fd);color:var(--ac3);margin-top:3px}
.tt-ev b{font:600 14px/1.35 var(--fd)}
.tt-ev span{font-size:12.5px;color:var(--sub)}
.tt-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:44px 0 18px}
.tt-q{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);min-width:260px}
.tt-q input{border:0;outline:0;background:none;font:500 14px var(--fb);flex:1}
.tt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tt-card{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s}
.tt-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -24px rgba(19,13,30,.35)}
.tt-card .cv{position:relative;aspect-ratio:16/9;background:#ddd center/cover}
.tt-card .cv .tt-tag{position:absolute;left:14px;top:14px}
.tt-card .cv .pin{position:absolute;right:14px;top:14px;height:28px;padding:0 10px;border-radius:999px;background:rgba(19,13,30,.75);color:#fff;font:600 12px var(--fd);display:flex;align-items:center;gap:5px}
.tt-card .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tt-card h3{margin:0;font:700 18px/1.35 var(--fd);letter-spacing:-.01em}
.tt-card p{margin:0;color:var(--sub);font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-card .tt-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--sub);opacity:1}
.tt-card .tt-meta .hrt{margin-left:auto;color:#e0306f}
.tt-more{display:flex;justify-content:center;margin-top:28px}

/* ---- trang đọc bài ---- */
.tt-artpage{padding-top:120px!important}
.tt-art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.tt-back{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--fd);color:var(--sub);text-decoration:none;margin-bottom:18px}
.tt-art h1{margin:14px 0 14px;font:800 clamp(28px,3.4vw,44px)/1.15 var(--fd);letter-spacing:-.03em;color:var(--ink)}
.tt-by{display:flex;align-items:center;gap:12px;color:var(--sub);font-size:13.5px;flex-wrap:wrap}
.tt-by .av{width:40px;height:40px;border-radius:50%;background:var(--nv) center/cover}
.tt-by b{color:var(--ink);font:700 14px var(--fd)}
.tt-cover{margin:26px 0;border-radius:26px;overflow:hidden;aspect-ratio:16/8;background:#ddd center/cover}
.tt-body{font-size:17px;line-height:1.8;color:#2b2536}
.tt-body h2{font:700 24px/1.3 var(--fd);margin:34px 0 10px;color:var(--ink)}
.tt-body p{margin:0 0 16px}
.tt-body ul{margin:0 0 16px;padding-left:22px}
.tt-body li{margin:4px 0}
.tt-body blockquote{margin:22px 0;padding:18px 22px;border-radius:18px;background:#fff0f5;color:#7a0a3a;font:600 17px/1.6 var(--fd)}
.tt-body figure{margin:24px 0}
.tt-body figure .im{display:block;width:100%;border:0;padding:0;cursor:zoom-in;border-radius:20px;overflow:hidden;background:#eee}
.tt-body figure .im img{display:block;width:100%;height:auto;max-height:820px;object-fit:cover}
.tt-body figcaption{font-size:13px;color:var(--sub);text-align:center;margin-top:8px}
.tt-gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:340px}
.tt-gal.n1{grid-template-columns:1fr;grid-template-rows:1fr}.tt-gal.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.tt-gal button{border:0;padding:0;cursor:zoom-in;border-radius:16px;background:#ddd center/cover;position:relative}
.tt-gal.n3 button:first-child{grid-row:span 2}
.tt-gal button.more::after{content:attr(data-more);position:absolute;inset:0;border-radius:16px;background:rgba(19,13,30,.55);color:#fff;display:grid;place-items:center;font:700 20px var(--fd)}
.tt-yt{display:block;width:100%;border:0;padding:0;cursor:pointer;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#000 center/cover}
.tt-yt::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.tt-yt span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:50px;border-radius:14px;background:#ff0033;display:grid;place-items:center}
.tt-yt span::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.tt-yt small{position:absolute;z-index:1;left:16px;bottom:14px;color:#fff;font:600 13px var(--fd)}
.tt-evbox{border-radius:24px;background:var(--nv);color:#fff;padding:24px;display:grid;gap:16px;position:relative;overflow:hidden}
.tt-evbox::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,141,.45),transparent 70%)}
.tt-evbox h3{margin:0;font:700 17px var(--fd);position:relative}
.tt-evbox .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.tt-evbox .row div{background:rgba(255,255,255,.08);border-radius:14px;padding:12px}
.tt-evbox .row small{display:block;font-size:11.5px;color:#b9b0cc}
.tt-evbox .row b{font:700 15px var(--fd)}
.tt-evbox .btn{justify-content:center;position:relative}
.tt-react{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:34px 0 0;padding:20px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.tt-heart{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:999px;border:0;background:#fff0f5;color:#e0306f;font:700 15px var(--fd);cursor:pointer}
.tt-heart.on{background:#e0306f;color:#fff}
.tt-heart svg{width:20px;height:20px}
.tt-share{margin-left:auto;display:flex;gap:8px}
.tt-share a,.tt-share button{width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);display:grid;place-items:center;color:var(--ink);cursor:pointer}
.tt-share svg{width:18px;height:18px}
.tt-rel{margin-top:48px}
.tt-rel .tt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tt-aside{position:sticky;top:100px;display:grid;gap:14px}
@media(max-width:1080px){
  .tt-top,.tt-art{grid-template-columns:minmax(0,1fr)}
  .tt-grid,.tt-rel .tt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-aside{position:static}
}
@media(max-width:640px){
  .tt-hero::after{background:linear-gradient(0deg,rgba(19,13,30,.96) 10%,rgba(19,13,30,.7) 60%,rgba(19,13,30,.35))}
  .tt-grid,.tt-rel .tt-grid{grid-template-columns:minmax(0,1fr)}
  .tt-hero{min-height:360px}.tt-hero .in{padding:22px}
  .tt-q{min-width:0;width:100%}
  .tt-gal{height:240px}
  .tt-body{font-size:16px}
  .tt-cd b{min-width:52px;height:52px;font-size:19px}
}
.tt-body hr{border:0;height:1px;background:var(--line);margin:30px 0}
.tt-body ol{margin:0 0 16px;padding-left:22px}
.tt-body a{color:var(--ac2,#e0306f);text-decoration:underline;text-underline-offset:3px}
.tt-body figure{margin:24px 0}
.tt-tk{display:grid;place-items:center;gap:6px;width:min(100%,340px);aspect-ratio:9/12;margin:0 auto;border:0;border-radius:20px;cursor:pointer;background:linear-gradient(135deg,#25f4ee,#000 45%,#fe2c55);color:#fff;font:700 22px var(--fd)}
.tt-tk small{font:600 13px var(--fb)}
.tt-ifr{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:20px;background:#000}
.tt-ifr.tk{width:min(100%,340px);aspect-ratio:9/16.5;margin:0 auto}
.tt-mut{color:var(--sub);font-size:14px;margin:0 0 12px}
.tt-done{position:relative;font:700 15px var(--fd);padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.1);width:fit-content}
.tt-none{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--sub);background:#fff;border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.tt-skel{min-height:260px;border-radius:24px;background:linear-gradient(90deg,#eee 25%,#f6f6f6 50%,#eee 75%) 0 0/200% 100%;animation:ttsk 1.2s linear infinite}
@keyframes ttsk{to{background-position:-200% 0}}
.tt-empty-top{display:none}
.tt-share .ok{background:#d6f7e9;color:#0a7a50}
.tt-box .btn{margin-top:4px}
.tt-lb{position:fixed;inset:0;z-index:200;background:rgba(10,6,16,.92);display:none;align-items:center;justify-content:center;padding:40px}
.tt-lb.on{display:flex}
.tt-lb img{max-width:100%;max-height:100%;border-radius:12px}
.tt-lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer}
.tt-lb .x{top:16px;right:16px;font-size:18px}.tt-lb .p{left:16px;top:50%}.tt-lb .n{right:16px;top:50%}
.tt-lb .c{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font:600 13px var(--fd)}
@media (prefers-reduced-motion:reduce){.tt-skel{animation:none}.tt-card{transition:none}}
/* ===================== HẾT TRANG TIN TỨC ===================== */

/* ---- bài kiểu báo (11/2026) ---- */
.tt-body h3{font:700 19px/1.35 var(--fd);margin:26px 0 8px;color:var(--ink)}
.tt-body u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.tt-body mark{background:linear-gradient(transparent 55%,#ffd6e6 55%);color:inherit;padding:0 2px}
.tt-body figure.w-mid{max-width:72%;margin-left:auto;margin-right:auto}
.tt-body figure.w-left,.tt-body figure.w-right{width:46%;margin-top:6px;margin-bottom:14px}
.tt-body figure.w-left{float:left;margin-right:22px}
.tt-body figure.w-right{float:right;margin-left:22px}
.tt-body figure.w-left .im,.tt-body figure.w-right .im{border-radius:16px}
.tt-body figure.w-left figcaption,.tt-body figure.w-right figcaption{text-align:left}
.tt-body h2,.tt-body h3,.tt-body hr,.tt-body .tt-note,.tt-body .tt-cta,.tt-body figure.w-full,.tt-body figure.w-mid{clear:both}
.tt-body::after{content:"";display:block;clear:both}
.tt-note{margin:22px 0;padding:16px 20px;border-radius:18px;border:1px solid;font-size:16px}
.tt-note .nt{display:block;font:700 15px var(--fd);margin-bottom:4px}
.tt-note p{margin:0}
.tt-note.n-info{background:#eef5ff;border-color:#cfe0ff;color:#1d3b6e}
.tt-note.n-warn{background:#fff7e6;border-color:#ffe1a6;color:#6b4300}
.tt-note.n-ok{background:#ebfaf1;border-color:#bfead0;color:#155c33}
.tt-note.n-hot{background:#fff0f5;border-color:#ffc9dc;color:#7a0a3a}
.tt-cta{text-align:center;margin:24px 0}
@media(max-width:640px){
  .tt-body figure.w-left,.tt-body figure.w-right,.tt-body figure.w-mid{float:none;width:auto;max-width:none;margin:20px 0}
}
.tt-body a.btn{text-decoration:none;color:#fff}