/* =====================================================================================================
 * ban-tin.css — trang Bản tin Ari (/ban-tin-ari → ban-tin-ari.php) theo khuôn "Tạp chí sống": BA CỘT BÁO
 * (đợt 2 · làn lan ra 1, 26/09/2026; cùng dáng tr.11 của trang chủ). Cần ari-tokens.css + ari-chung.css + trang-phu.css nạp trước.
 * Măng-sét tên báo lớn giữa hai đường kẻ, ngày ra số; hàng đầu ba cột (tin hôm nay có ảnh bìa | video mới | đọc nhanh + giới thiệu),
 * "14 ngày qua" chảy thành cột báo có vạch ngăn, rồi video trên kênh và Fanpage. HTML: ban_tin_page.py + ban-tin/lib.php (bt_render_*).
 * ===================================================================================================== */

/* ---------- 1. Măng-sét ---------- */
.bt-dong-tren { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-bottom: 12px; border-bottom: 2px solid var(--c-text);
  font: 650 .95rem/1.3 var(--f-hien); font-variant-numeric: tabular-nums; }
.bt-dong-tren span:nth-child(2) { color: var(--c-text-accent-sm); }
/* 06/10: cô báo tiêu đề khổng lồ (15rem, đậm 800, ép 75%, giãn chữ âm) làm chữ dính thành khối, dấu hỏi tách rời; cô cũng muốn tin nằm ngay đầu trang.
   Thu về cỡ tiêu đề thường, bỏ ép chữ và giãn chữ âm mạnh. */
.bt-ten-bao { padding-block: 10px 4px; font: 700 clamp(2rem, 5vw, 3.25rem)/1.05 var(--f-hien); letter-spacing: -.02em; text-align: left; }
.bt-ten-bao span { color: var(--c-text-accent); }
.bt-dong-duoi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; padding-top: 14px; border-top: 1px solid var(--c-text); box-shadow: 0 -5px 0 -4px var(--c-text); }
.bt-sapo { max-width: 64ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text-2); }
.bt-dong-duoi .hang-nut { margin-top: 0; }
.bt-muc { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 18px; }
.bt-muc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: rgb(255 255 255 / .6); text-decoration: none; font: 600 .9rem var(--f-doc); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.bt-muc a:hover { background: #fff; border-color: var(--c-brand); }
@media (max-width: 899px) { .bt-dong-duoi { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .bt-dong-tren span:nth-child(3) { display: none; }
  .bt-sapo { font-size: 1.02rem; }
  .bt-muc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .bt-muc::-webkit-scrollbar { display: none; }
  .bt-muc a { flex: none; }
}

/* ---------- 2. Ba cột báo ---------- */
.bt-bao { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--c-text); }
.bt-cot { min-width: 0; padding: 24px 28px 8px; border-left: 1px solid var(--c-line-strong); }
.bt-cot:first-child { padding-left: 0; border-left: 0; }
.bt-cot:last-child { padding-right: 0; }
.bt-cot-td { margin-bottom: 14px; font: 700 1.35rem/1.15 var(--f-hien); letter-spacing: -.015em; }
.bt-bia { margin: 0 0 20px; }
.bt-bia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-md); }
.bt-bia figcaption { margin-top: 8px; font-size: .875rem; color: var(--c-text-2); }
.bt-doc-nhanh ol { list-style: none; counter-reset: dn; }
.bt-doc-nhanh li { counter-increment: dn; border-bottom: 1px solid var(--c-line); }
.bt-doc-nhanh a { display: grid; grid-template-columns: 2.2ch 1fr; gap: 2px 10px; min-height: 48px; padding: 10px 0; text-decoration: none; }
.bt-doc-nhanh a::before { content: counter(dn); grid-row: span 2; font: 800 1.6rem/1 var(--f-hien); font-stretch: 80%; color: var(--c-text-accent); }
.bt-doc-nhanh time { font: 600 .8125rem var(--f-doc); color: var(--c-text-accent-sm); }
.bt-doc-nhanh b { font: 650 1rem/1.3 var(--f-doc); }
.bt-doc-nhanh a:hover b { color: var(--c-text-accent); }
@media (max-width: 1099px) {
  .bt-bao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bt-cot:first-child { grid-column: 1 / -1; padding-right: 0; }
  .bt-cot:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 699px) {
  .bt-bao { grid-template-columns: 1fr; }
  .bt-cot { padding: 22px 0 8px; border-left: 0; border-top: 1px solid var(--c-line-strong); }
  .bt-cot:first-child { border-top: 0; }
}

/* ---------- 3. Một tin (lib.php: bt_render_tin) ---------- */
.bttin { position: relative; overflow-wrap: anywhere; scroll-margin-top: 96px; }
.btghim { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 12px 5px 8px; border-radius: var(--r-pill); background: var(--p-ink-900); color: var(--p-pink-400); font: 650 .875rem var(--f-hien); }
.btghim svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btdau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.btava { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--p-white); border: 1px solid var(--c-line-strong); }
.btava img { width: 60%; height: auto; }
.btdau-chu { flex: 1 1 120px; min-width: 0; }
.btdau-ten { font: 650 .95rem/1.3 var(--f-doc); }
.btnhan { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--c-text-2); }
.btnhan-chu::before { content: "·"; margin-right: 6px; }
.btloai { margin-left: auto; display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: var(--r-pill); font: 600 .8125rem var(--f-doc); white-space: nowrap; color: var(--p-pink-800); background: var(--p-pink-100); }
.btten { margin-top: 14px; font: 700 1.3rem/1.18 var(--f-hien); letter-spacing: -.012em; text-wrap: balance; }
.bttin-hom-nay .btten { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.04; letter-spacing: -.022em; }
.btnd { margin-top: 10px; white-space: pre-line; line-height: 1.7; color: var(--p-ink-700); color: color-mix(in srgb, var(--c-text) 86%, transparent); max-width: 68ch; }   /* theo màu chữ của nền đang dùng: trên nền tối chữ mực cũ gần như không đọc được (rà UI 11/10) */
.bttin-hom-nay .btnd { font-size: clamp(1.05rem, 1.3vw, 1.15rem); color: var(--c-text); }
.bttin-hom-nay .btnd::first-letter { float: left; margin: .06em .08em 0 0; font: 800 3.6em/.82 var(--f-hien); font-stretch: 80%; color: var(--c-text-accent); }
.btnd strong { color: var(--c-text); font-weight: 650; }
.btanh-nut { display: block; width: 100%; margin-top: 16px; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-sunk); cursor: zoom-in; }
.btanh { width: 100%; height: auto; max-height: 520px; object-fit: cover; transition: transform var(--dur-slow) var(--ease-flow); }
.btanh-nut:hover .btanh { transform: scale(1.02); }
.btlink { margin-top: 8px; }
.btlink a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-text-accent); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.btlink a::after, .bt-ngoai::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.bttrich { margin-top: 10px; font-size: .875rem; color: var(--c-text-2); }
.btsoon { padding: 28px 24px; border-radius: var(--r-lg); border: 1px dashed var(--c-line-strong); background: rgb(255 255 255 / .55); color: var(--c-text-2); }
.btsoon .kicker { font: 650 1.05rem var(--f-hien); color: var(--c-text); margin-bottom: 6px; }

/* câu hỏi nhỏ: trả lời cho vui, không chấm điểm */
.btquiz { margin-top: 20px; padding: 18px; border-radius: var(--r-lg); background: var(--glass-thin-bg); border: 1px solid var(--glass-edge); box-shadow: var(--sh-glass); }
.btquiz-nhan { font: 650 .875rem var(--f-hien); color: var(--c-text-accent-sm); }
.btquiz-hoi { margin-top: 6px; font: 650 1.15rem/1.35 var(--f-hien); }
.btquiz-chon { display: grid; gap: 10px; margin-top: 14px; }
.bttin-hom-nay .btquiz-chon { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.btquiz-chon button { min-height: 48px; padding: 10px 14px; border-radius: var(--r-md); cursor: pointer; text-align: left; background: rgb(255 255 255 / .75); color: var(--c-text); font: 500 .95rem/1.35 var(--f-doc);
  border: 1px solid var(--c-line-strong); transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press); }
.btquiz-chon button:hover:not([disabled]) { background: #fff; border-color: var(--c-brand); }
.btquiz-chon button:active:not([disabled]) { transform: scale(.98); }
.btquiz-chon button[disabled] { cursor: default; }
.btquiz-chon button.dung { background: #E6F4EA; border-color: #3A7D4F; color: #1E4D2C; font-weight: 600; }
.btquiz-chon button.sai { opacity: .75; }
.btquiz-kq { margin-top: 12px; font-weight: 500; }
.btquiz-kq:empty { display: none; }
details.btquiz-gap { margin-top: 10px; }
details.btquiz-gap > summary, details.btcu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 .95rem var(--f-doc); color: var(--c-text-accent); }
details.btquiz-gap > summary::-webkit-details-marker, details.btcu > summary::-webkit-details-marker { display: none; }
details.btquiz-gap > summary::after, details.btcu > summary::after { content: "+"; font: 600 1.2rem/1 var(--f-hien); transition: rotate var(--dur-base) var(--ease-out); }
details[open].btquiz-gap > summary::after, details[open].btcu > summary::after { rotate: 45deg; }

/* ---------- 4. 14 ngày qua: cột báo có vạch ngăn ---------- */
.bt-gan-day .muc-dau { margin-bottom: clamp(24px, 3vw, 36px); }
.btds { list-style: none; columns: 3 300px; column-gap: 48px; column-rule: 1px solid var(--c-line-strong); border-top: 2px solid var(--c-text); padding-top: 8px; }
.btds > li { break-inside: avoid; padding: 20px 0 24px; border-bottom: 1px solid var(--c-line); }
details.btcu { margin-top: 24px; }
details.btcu .btds { margin-top: 12px; }
.btghi { margin-top: 18px; color: var(--c-text-2); font-size: .95rem; max-width: 64ch; }
.btghi a { color: var(--c-text-accent); font-weight: 600; }

/* ---------- 5. Video (lib.php: bt_render_video_the) ---------- */
.btvluoi { display: grid; gap: 20px; margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .btvluoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .btvluoi { grid-template-columns: 1fr; } }
.btvid { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.btvluoi .btvid { padding: 8px; border-radius: var(--r-lg); background: var(--glass-thin-bg); border: 1px solid var(--glass-edge); box-shadow: var(--sh-glass); }
.btvid-khung { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--p-ink-900); }
.btvid-anh, .btvid-phat { position: absolute; inset: 0; display: block; }
.btvid-anh[hidden], .btvid-phat[hidden] { display: none; }
.btvid-bia { position: absolute; inset: 0; display: block; }
.btvid.shorts .btvid-bia { left: 50%; right: auto; width: auto; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.btvid-bia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-flow); }
.btvid-bia img.hong { visibility: hidden; }
.btvid:hover .btvid-bia img { transform: scale(1.04); }
.btvid-nut { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--c-brand); box-shadow: 0 6px 24px rgb(18 12 15 / .4); display: grid; place-items: center; }
.btvid-nut::after { content: ""; margin-left: 4px; border-left: 15px solid var(--c-text-on-brand); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.btvid-nhan { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 8px; background: rgb(18 12 15 / .86); color: #fff; font: 600 .8125rem var(--f-doc); }
.btvid-phat iframe { width: 100%; height: 100%; border: 0; display: block; }
.btvid.shorts.dangphat .btvid-khung { aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); margin-inline: auto; }
.btvid-chu { display: flex; flex-direction: column; flex: 1; padding: 14px 6px 6px; }
.btvid-ten { font: 700 1.1rem/1.28 var(--f-hien); letter-spacing: -.01em; }
.btvid-ngay { margin-top: 6px; font-size: .875rem; color: var(--c-text-2); }
.btvid-chu .btnhan { margin-top: 12px; gap: 8px; }
.btvid-chu .btnhan .btloai { margin-left: 0; }
.btvid-chu .btnhan-chu::before { content: none; }
.btvid-chu .btnd { font-size: .95rem; }
.btvm-td { margin-top: 8px; font-weight: 600; }
.btvid-nuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.btvid-nuts .nut[hidden] { display: none; }

/* ---------- 6. Fanpage (khung Facebook chỉ tải khi bấm) ---------- */
.btfb { display: grid; gap: 24px; margin-top: clamp(24px, 3vw, 36px); align-items: start; }
@media (min-width: 1000px) { .btfb { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; } }
.btfb-cho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; padding: 28px 22px; border-radius: var(--r-lg); text-align: center;
  background: var(--p-ink-900); color: var(--c-text-invert); }
.btfb-cho :focus-visible { outline-color: var(--p-pink-400); }
.btfb-cho .nut[hidden] { display: none; }
.btfb-khung { width: 100%; display: flex; justify-content: center; }
.btfb-khung iframe { display: block; border: 0; border-radius: var(--r-sm); max-width: 100%; background: #fff; }
.btnho { font-size: .875rem; line-height: 1.55; color: var(--c-text-invert-2); max-width: 48ch; }
.btgt { margin-top: 28px; padding: 20px; border-radius: var(--r-lg); background: var(--glass-thin-bg); border: 1px solid var(--glass-edge); box-shadow: var(--sh-glass); }
.btgt h2 { font: 700 1.2rem var(--f-hien); }
.btgt > p { margin-top: 8px; color: var(--c-text-2); font-size: .95rem; }
.btgt ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.btgt li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; }
.btgt li .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--c-text-accent); }

@media (prefers-reduced-motion: reduce) {
  .btvid:hover .btvid-bia img, .btanh-nut:hover .btanh { transform: none; }
}

/* ---------- Thông báo Ari Rewards: Top 3 hôm nay + bí mật Mùa 1 (06/10) ---------- */
.bt-tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-block: 8px 28px; }
.bt-tb-the { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 20px; border: 1px solid rgb(255 226 196 / .14);
  background: rgb(255 255 255 / .05); }
.bt-tb-nhan { margin: 0; font: 650 .75rem/1.2 var(--f-doc); letter-spacing: .08em; text-transform: uppercase; color: #f7a8c4; }
.bt-tb-td { margin: 0; font: 700 1.35rem/1.15 var(--f-hien); letter-spacing: -.015em; }
.bt-tb-chu { margin: 0; font: 400 1rem/1.55 var(--f-doc); opacity: .86; }
.bt-tb-lien { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; font: 650 .9375rem/1.2 var(--f-doc); color: #f7a8c4;
  text-decoration: underline; text-underline-offset: 4px; }
.bt-tb-lien:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.bt-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-top li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; min-height: 44px; }
.bt-top-hang { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 700 .9375rem/1 var(--f-hien);
  background: rgb(247 168 196 / .18); color: #ffd9e6; }
.bt-top li:first-child .bt-top-hang { background: #f7a8c4; color: #1d1519; }
.bt-top b { font: 650 1.0625rem/1.3 var(--f-doc); overflow-wrap: anywhere; }
.bt-top-diem { font: 500 .9375rem/1.2 var(--f-doc); font-variant-numeric: tabular-nums; opacity: .86; white-space: nowrap; }
.bt-tb-ghi { margin: -4px 0 0; font: 400 .875rem/1.4 var(--f-doc); opacity: .7; }
.bt-top-ten { min-height: 44px; display: inline-flex; align-items: center; font: 650 1.0625rem/1.3 var(--f-doc); color: inherit; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: rgb(247 168 196 / .7); text-underline-offset: 4px; }
.bt-top-ten:hover { color: #ffd9e6; }
.bt-top-ten:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ---------- Tin đứng đầu trang (06/10) ---------- */
.bt-dau-tin .bt-bao { margin-top: 14px; }
.bt-dau-tin .bt-bia { margin: 20px 0 0; }
.bt-dau-tin .bt-tb { margin-block: 28px 8px; }
.bt-gioi { margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 767px) {
  /* điện thoại: tin hôm nay, rồi thông báo Rewards, rồi video mới và đọc nhanh */
  .bt-dau-tin { display: flex; flex-direction: column; }
  .bt-dau-tin .bt-bao { display: contents; }
  .bt-dau-tin #hom-nay { order: 1; border-top: 0; padding-top: 12px; }
  .bt-dau-tin .bt-tb { order: 2; margin-block: 16px 8px; }
  .bt-dau-tin .bt-cot:not(#hom-nay) { order: 3; }
}

/* ---------- Trạm phát sóng không gian (06/10): bay lơ lửng cạnh tên báo, sóng loang từng vòng ----------
   Chỉ trang trí (aria-hidden, không bắt chuột), nằm trong khoảng trống bên phải tên báo nên không che chữ. Hoạt cảnh chỉ dùng
   transform + opacity, dịch bằng px (luật Safari iPhone). prefers-reduced-motion: đứng yên, còn một vòng sóng mờ. */
.bt-bao-dau { position: relative; }
.bt-tram { position: absolute; right: 4px; top: 38px; width: clamp(96px, 12vw, 140px); aspect-ratio: 1; pointer-events: none; z-index: 0; }
.bt-tram img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.bt-song { position: absolute; left: 32%; top: 25%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%;
  border: 2px solid rgb(247 168 196 / .75); opacity: .28; }
.bt-song:nth-child(2), .bt-song:nth-child(3) { opacity: 0; }
.bt-ten-bao, .bt-dong-tren { position: relative; z-index: 1; }
.bt-ten-bao { padding-right: clamp(104px, 13vw, 152px); min-height: clamp(96px, 12vw, 140px); display: flex; align-items: center; gap: .28em; }
@media (prefers-reduced-motion: no-preference) {
  .bt-tram { animation: bt-troi 6s ease-in-out infinite; }
  .bt-song { opacity: 0; animation: bt-loang 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .bt-song:nth-child(2) { animation-delay: 1.2s; }
  .bt-song:nth-child(3) { animation-delay: 2.4s; }
}
@keyframes bt-troi { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -8px, 0) rotate(2deg); } }
@keyframes bt-loang { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(3.4); opacity: 0; } }

/* 11/10: ô trả lời câu hỏi nhỏ đang ở dải cuối màn hình thì ẩn nút "Về đầu trang" cho khỏi đè góc ô (ban_tin_page.py, cuối BT_SCRIPT). */
body.bt-an-len .nut-noi .uptop, body.bt-an-len .nut-noi.qua-dau .uptop { opacity: 0; visibility: hidden; pointer-events: none; }