/* hanh-tinh.css: giao diện "trang hành tinh" cho trang Cô Ari và Flow Video (cô Ari dặn 05/10/2026: "thiết kế lại đi chứ").
 * Đồng bộ với trang chủ hệ mặt trời (assets/cong/): đầu trang chỉ còn nút quay lại tròn kiểu iOS + tên trang, không còn thanh menu cũ
 * và thanh đáy; ít chữ, mỗi lúc một phần. Nạp SAU trang-phu.css / flow-video.css, TRƯỚC vu-tru.css (bảng màu tối lấy từ vu-tru.css).
 * Trang nào có <header class="vt-dau"> (trang_phu.dau_hanh_tinh) thì nhận vỏ mới; trang khác không đổi.
 * Luật Safari iPhone: mọi hoạt cảnh chỉ dịch bằng px, không dùng phần trăm trong transform (xem ghi chú trong cong.css). */

/* ============ 1. Vỏ chung ============ */
body:has(.vt-dau) .nav, body:has(.vt-dau) .dock, body:has(.vt-dau) .rail, body:has(.vt-dau) .tam-menu, body:has(.vt-dau) .homefab { display: none !important; }
body:has(.vt-dau) { padding-top: 0; padding-bottom: 76px; }      /* chừa chỗ cho nút loa và nút lên đầu trang, không che chân trang */
body:has(.vt-dau) main { padding-top: 0; }
/* 06/10: thanh đáy và nút "Trang chủ" đã ẩn ở trên, nên nút loa và cụm Liên hệ không còn phải đứng cao chừa chỗ cho chúng
   (nút loa treo lưng chừng che chữ ở trang Sự kiện + Bản tin). Hạ cả hai về sát đáy, nằm trong khoảng đệm 76 px của body. */
html body:has(.vt-dau) .sndfab, html body:has(.vt-dau) .nut-noi ~ .sndfab.phai { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) { html body:has(.vt-dau) .nut-noi { bottom: calc(16px + env(safe-area-inset-bottom)); } }
/* 06/10 (cô chọn): thanh hành tinh đang DÍNH đầu màn hình thì có dải nền tối rộng hết màn phía sau, chữ cuộn bên dưới không lộ ra hai bên.
   Lớp .vt-dinh do hanh-tinh.js gắn khi thanh chạm mép dưới đầu trang; body đã overflow-x: clip nên dải 100vw không làm tràn ngang. */
html.vt-js .vt-the.vt-dinh::after { content: ""; position: absolute; z-index: -2; left: 50%; width: 100vw; margin-left: -50vw; top: -12px; bottom: -18px;
  background: linear-gradient(rgb(13 9 22 / .96), rgb(13 9 22 / .9) 72%, rgb(13 9 22 / 0)); pointer-events: none; }
.vt-dau { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-left)) 0;
  background: rgb(13 9 22 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(255 226 196 / .08); }
/* 06/10 (lời cô: nút lùi nhỏ thì cho nổi bật, dễ tìm): viên có chữ "Quay về" + mũi tên đậm, cao 48 px, nền tối đậm, viền sáng, theo mẫu
   .ct-ve của trang chủ (assets/cong/cong.css). Chữ sinh bằng ::after để mọi nơi dùng .vt-lui (trang phụ, Rewards) đổi cùng lúc mà không
   phải sửa mã HTML; tên cho máy đọc màn hình vẫn là aria-label của thẻ a. */
.vt-lui { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-width: 48px; height: 48px; padding: 0 16px 0 10px; border-radius: 999px;
  color: #fff; text-decoration: none; font: 600 .9375rem/1 var(--f-doc, 'Be Vietnam Pro', sans-serif); white-space: nowrap;
  border: 2px solid #ffd9ec; background: rgb(46 24 52 / .92); box-shadow: 0 6px 22px rgb(0 0 0 / .45), 0 0 0 4px rgb(255 170 215 / .14);
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), background-color 180ms ease, border-color 180ms ease; }
.vt-lui svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #ffd9ec; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vt-lui::after { content: "Quay về"; }
.vt-lui:hover { background: rgb(70 36 78 / .96); border-color: #fff; }
.vt-lui:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vt-lui:active { transform: scale(.95); }
.vt-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ten { margin: 0; text-align: center; font: 650 1rem/1 var(--f-hien); letter-spacing: .01em; color: #fff7f0; }

/* vào trang: trượt nhẹ từ phải như đẩy màn hình iOS; bấm quay lại: trượt ra phải */
@media (prefers-reduced-motion: no-preference) {
  body:has(.vt-dau) main { animation: vt-vao 420ms cubic-bezier(.2, .8, .2, 1) backwards; }   /* không dùng both: giữ transform sau hoạt cảnh làm hỏng lớp mờ của thanh dính */
  html.vt-ra main, html.vt-ra .vt-ten { animation: vt-ra 220ms cubic-bezier(.4, 0, 1, 1) both; }
}
@keyframes vt-vao { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes vt-ra { to { opacity: 0; transform: translateX(40px); } }

/* thẻ chuyển phần (kiểu thanh chọn iOS) */
.vt-the { display: none; }
html.vt-js .vt-the { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 50; display: flex; gap: 4px; width: max-content; max-width: calc(100% - 24px);
  margin: 26px auto 0; padding: 4px; border-radius: 999px; border: 1px solid rgb(255 226 196 / .2); background: rgb(20 13 32 / .95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -18px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .1); }
.vt-the button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgb(255 247 240 / .72); font: 600 .9375rem/1 var(--f-hien); cursor: pointer;
  white-space: nowrap; transition: color 200ms ease, background-color 200ms ease, transform 160ms ease; }
.vt-the button:hover { color: #fff7f0; }
.vt-the button:active { transform: scale(.96); }
.vt-the button[aria-selected="true"] { color: #2a0f1a; background: linear-gradient(180deg, #f9a8cc, #f284b5); box-shadow: 0 6px 18px -8px rgb(242 132 181 / .9); }
.vt-the small { font: inherit; opacity: .7; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ============ 2. Cô Ari ============ */
.hs .hs-bia { display: block; text-align: center; padding-top: 10px; }
.hs .hs-chan-dung { position: relative; width: clamp(180px, 46vw, 290px); max-height: none; aspect-ratio: 1; margin: 8px auto 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 8px rgb(255 226 196 / .05), 0 0 0 9px rgb(255 226 196 / .3), 0 0 0 26px rgb(242 132 181 / .05), 0 0 0 27px rgb(255 226 196 / .12), 0 0 90px 8px rgb(242 132 181 / .38); }
.hs .hs-chan-dung img { object-position: 50% 12%; }
@media (prefers-reduced-motion: no-preference) { .hs .hs-chan-dung { animation: vt-tho 8s ease-in-out infinite; } }
@keyframes vt-tho { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
.hs .hs-bia-chu { display: block; margin-top: 44px; padding: 0; }
.hs .hs-trong-so, .hs .hs-bia .folio { display: none; }
.hs .hs-ten { margin: 0; font-size: clamp(2.75rem, 10vw, 4.75rem); line-height: .95; letter-spacing: -.03em; }
.hs .hs-chuc { margin-top: 10px; font-size: 1.0625rem; }
.hs .hs-sapo { margin: 14px auto 0; max-width: 44ch; font-size: 1rem; line-height: 1.6; color: rgb(255 247 240 / .82); text-wrap: pretty; }
.hs .hs-bia .giong { margin: 16px auto 0; }
.hs .hs-bia .hang-nut { justify-content: center; margin-top: 18px; }

.hs > .muc { padding-top: clamp(26px, 4vw, 44px); }
/* mỗi lúc một phần: [data-phan] ẩn, phần đầu ([data-dau]) hiện khi chưa chọn thẻ nào, phần trùng html[data-the] hiện khi đã chọn */
html.vt-js [data-phan] { display: none; }
html.vt-js:not([data-the]) [data-phan][data-dau] { display: block; }
html.vt-js[data-the="hinh"] [data-phan="hinh"], html.vt-js[data-the="baiviet"] [data-phan="baiviet"],
html.vt-js[data-the="vi-sao"] [data-phan="vi-sao"], html.vt-js[data-the="ban-tin"] [data-phan="ban-tin"], html.vt-js[data-the="su-kien"] [data-phan="su-kien"] { display: block; }
html.vt-js .hs > .muc { min-height: 46vh; }
@media (prefers-reduced-motion: no-preference) { html.vt-js .hs > .muc { animation: vt-len 360ms cubic-bezier(.2, .8, .2, 1) backwards; } }
@keyframes vt-len { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.vt-js .hs .muc-dau, html.vt-js .hs .hs-bv-dau, html.vt-js .hs .hs-muc-luc { display: none; }      /* tên phần đã nằm trên thẻ; danh sách bài chính là mục lục */
html.vt-js .hs .hien-dan { opacity: 1; transform: none; }

/* chuyện của cô: các mốc thành 4 thẻ, chữ một cột sáng rõ */
.hs .hs-bai-luoi { display: flex; flex-direction: column; gap: 30px; max-width: 760px; margin-inline: auto; }
.hs .hs-le { order: -1; position: static; margin: 0; }
.hs .hs-le-td { display: none; }
.hs .hs-le .moc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.hs .hs-le .moc li { align-content: start; gap: 6px; padding: 14px; border-radius: 18px; border: 1px solid rgb(255 226 196 / .16); background: rgb(255 255 255 / .05); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.hs .hs-le .moc b { font-size: 1.125rem; color: #f9a8cc; }
.hs .hs-le .moc span { font-size: .875rem; line-height: 1.45; color: rgb(255 247 240 / .78); }
.hs .hs-le .nut { display: none; }
.hs .hs-bai-chu { font-size: 1.0625rem; line-height: 1.75; color: rgb(255 247 240 / .86); }
.hs .hs-bai-chu strong { color: #fff; }
.hs .hs-mo-dau::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
.hs .hs-trich { margin: 1.6em 0; padding: 0 0 0 16px; }
.hs .hs-trich p { font-size: clamp(1.4rem, 4.6vw, 2rem); }

/* hình: lưới vuông dày, tấm đầu mỗi cụm to gấp đôi */
.hs .hs-luoi-anh { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hs .hs-luoi-anh .o-anh { aspect-ratio: 1; border-radius: 14px; }
.hs .hs-luoi-anh .o-anh:nth-child(7n + 1) { aspect-ratio: auto; }
.hs .o-anh { box-shadow: inset 0 0 0 1px rgb(255 226 196 / .1); }
.hs .hs-anh-them { display: flex; margin: 22px auto 0; }

/* Ari viết: danh sách gọn, bấm tên bài mới mở */
.hs .hs-ds-bai { margin: 0 auto; max-width: 760px; display: grid; gap: 10px; }
.hs .hs-bv { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; border: 1px solid rgb(255 226 196 / .14); border-radius: 20px;
  background: rgb(255 255 255 / .045); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); scroll-margin-top: 130px; transition: background-color 200ms ease, border-color 200ms ease; }
.hs .hs-bv:hover { background: rgb(255 255 255 / .07); }
.hs .hs-bv.mo { border-color: rgb(249 168 204 / .45); background: rgb(255 255 255 / .06); }
.hs .hs-bv-so { grid-column: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 226 196 / .32);
  font: 650 .9375rem/1 var(--f-hien); letter-spacing: 0; color: #f9a8cc; }
.hs .hs-bv-than { grid-column: 2; min-width: 0; }
.hs .hs-bv h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; }
.hs-bv-nut { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hs-bv-nut::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.6px solid rgb(255 226 196 / .7); border-bottom: 1.6px solid rgb(255 226 196 / .7);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.hs-bv.mo .hs-bv-nut::after { transform: rotate(225deg) translate(-2px, -2px); }
html.vt-js .hs-bv:not(.mo) .hs-bv-ngay, html.vt-js .hs-bv:not(.mo) .hs-bv-chu, html.vt-js .hs-bv:not(.mo) .hs-bv-anh { display: none; }
.hs .hs-bv-chu { margin-top: 10px; font-size: 1rem; line-height: 1.72; color: rgb(255 247 240 / .86); }
.hs .hs-bv-anh { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 16px 0 6px; }
.hs .hs-bv-anh .o-anh { aspect-ratio: 1; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) { .hs-bv.mo .hs-bv-chu, .hs-bv.mo .hs-bv-anh { animation: vt-len 300ms cubic-bezier(.2, .8, .2, 1) both; } }

@media (max-width: 767px) {
  .hs .hs-le .moc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs .hs-luoi-anh { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vt-the button { padding: 0 12px; font-size: .875rem; }
  html.vt-js .vt-the { overflow-x: auto; scrollbar-width: none; }      /* bốn thẻ: màn rất hẹp thì vuốt ngang trong thanh, không đẩy rộng trang */
}

/* ============ 3. Flow Video ============ */
.fv-trang .fvt-dau { padding-top: 28px; }
.fv-trang .fvt-dau .folio { display: none; }
.fv-trang .fvt-td { font-size: clamp(2.5rem, 9vw, 4.75rem); line-height: .92; }
.fv-trang .fvt-phim { margin: 18px 0 0; padding-block: 8px 40px; border-radius: 0; background: none; box-shadow: none; }
.fv-trang .fvt-phim::before, .fv-trang .fvt-phim::after { display: none; }
.fv-trang .kfchu::before { display: none; }                         /* bỏ số khung phim "01A" */
.fv-trang .kfanh { border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 226 196 / .12), 0 18px 36px -22px rgb(0 0 0 / .8); }
.fv-trang .kfh { font-size: .9375rem; line-height: 1.3; }
.fv-trang .kfmuc-dau h2 { font-size: 1.25rem; }
/* ô tìm + chip lọc dính dưới đầu trang (khối .fvt-loc nằm ngoài <header> nên dính suốt trang); màn thấp (điện thoại xoay ngang) thì không dính */
.fv-trang .fvt-loc { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 40; padding-block: 6px 8px; background: rgb(13 9 22 / .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fv-trang .fvt-loc .kfcong { margin-top: 0; }
.fv-trang .fvt-loc .kfkq:empty { display: none; }
.fv-trang .fvt-loc .kftim, .fv-trang .fvt-loc .kfxep { min-height: 46px; }
.fv-trang .fvt-loc .kftim input, .fv-trang .fvt-loc .kfxep select { height: 44px; }
@media (max-height: 500px) { .fv-trang .fvt-loc { position: static; } }
@media (max-width: 479px) { .kf-js .fv-trang .fvt-loc .kfcong { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tim" "chip"; gap: 8px; } .fv-trang .fvt-loc .kfxep { display: none; } }
/* trình phát: màn thấp thì co theo chiều cao màn, nút Trước / Sau không bị cắt */
@media (max-height: 500px) { .kfxem-hop { max-height: 100dvh; } .kfxem-khung { min-height: 0; flex: 1 1 auto; aspect-ratio: auto; width: auto; } }
.fv-trang .kfnut { box-shadow: 0 8px 20px -8px rgb(242 132 181 / .8); }
@media (hover: hover) { .fv-trang .kft { transition: transform 260ms cubic-bezier(.2, .8, .2, 1); } .fv-trang .kft:hover { transform: translateY(-4px); } }

/* cuối trang: lời mời gọn hơn */
body:has(.vt-dau) .ket-hop { border-radius: 26px; }
.hs .hs-bv-anh .o-anh-chu { display: none; }                      /* ô nhỏ: chú thích xem trong hộp ảnh lớn */

/* ============ 4. Phần Vì sao (trang Cô Ari) và Sự kiện (trang Sự kiện + Bản tin): cô dặn gộp 05/10 ============
 * Chữ do build-cong.noi_dung_rieng() dựng (cùng nguồn với trang chủ trước đây); kiểu dáng chép từ assets/cong/cong.css, sửa bên đó thì sửa cả đây. */
.vt-phan { --chu: #fff7f0; --chu-mo: rgba(255, 247, 240, .76); --vien: #ffe2c4; --nhan: #ffb46b; --em: cubic-bezier(.2, .8, .2, 1); max-width: 720px; margin-inline: auto; min-height: 46vh; }
.vt-phan h2 { font: 600 clamp(1.75rem, 2vw + 1.2rem, 2.5rem)/1.1 var(--f-hien); text-wrap: balance; }
.vt-phan h3 { margin: 38px 0 14px; font: 600 .75rem/1.2 var(--f-doc); letter-spacing: .14em; text-transform: uppercase; color: var(--nhan); }
.vt-phan ul { list-style: none; padding: 0; margin: 0; }
.vt-phan a { color: inherit; text-decoration: none; }
.vt-phan .tr-nut { color: #2a0f1a; }
.vt-phan .tr-nut-vien { color: var(--chu); }
@media (min-width: 900px) { .vt-phan .sk-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt-phan.vt-rong { max-width: 980px; } }
@media (prefers-reduced-motion: no-preference) { html.vt-js [data-phan] { animation: vt-len 360ms cubic-bezier(.2, .8, .2, 1) backwards; } }
.tr-mo { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--chu-mo); text-wrap: pretty; }
.tr-hang { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tr-nut { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; border-radius: 99px; font-weight: 600; font-size: 15px; letter-spacing: .02em;
  color: #1a0f22; background: linear-gradient(180deg, #ffe9d2, var(--nhan)); box-shadow: 0 6px 22px rgba(255, 180, 107, .3); transition: scale 140ms var(--em); }
.tr-nut-vien { color: var(--chu); background: none; border: 1.5px solid var(--vien); box-shadow: none; }
.tr-nut:active { scale: .96; }
.vs-ds, ul.lh-ds, .bd-ds { list-style: none; }
.vs-ly { padding: 15px 0; border-bottom: 1px solid rgba(255, 226, 196, .16); }
.vs-ly:first-child { border-top: 1px solid rgba(255, 226, 196, .16); }
.vs-ly b { display: block; font-size: 16px; font-weight: 600; }
.vs-ly span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--chu-mo); }
.vs-so-ds { display: grid; gap: 18px; }
.vs-so p { max-width: 86%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; border-radius: 18px; }
.vs-ban { margin-left: auto; background: rgba(255, 226, 196, .14); border-bottom-right-radius: 6px; }
.vs-ari { margin-top: 7px; background: rgba(242, 132, 181, .2); border: 1px solid rgba(242, 132, 181, .3); border-bottom-left-radius: 6px; }
.vs-hoi { border-bottom: 1px solid rgba(255, 226, 196, .16); }
.vs-hoi:first-of-type { border-top: 1px solid rgba(255, 226, 196, .16); }
.vs-hoi summary { min-height: 52px; padding: 13px 34px 13px 0; display: flex; align-items: center; position: relative; cursor: pointer; list-style: none; font-size: 15.500px; font-weight: 500; line-height: 1.35; }
.vs-hoi summary::-webkit-details-marker { display: none; }
.vs-hoi summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--vien); border-bottom: 1.5px solid var(--vien);
  transform: translateY(-70%) rotate(45deg); transition: transform 240ms var(--em); }
.vs-hoi[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vs-hoi p { padding: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--chu-mo); }
.sk-ds { display: grid; gap: 18px; margin-top: 26px; }
.sk-the { display: grid; gap: 6px; padding-bottom: 16px; border-radius: 18px; overflow: hidden; background: rgba(255, 226, 196, .07); border: 1px solid rgba(255, 226, 196, .14); transition: scale 160ms var(--em); }
.sk-the:active { scale: .98; }
.sk-the img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sk-the > span, .sk-the > b { padding: 0 16px; }
.sk-nhan { margin-top: 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--nhan); }
.sk-the b { font-size: 18px; font-weight: 600; line-height: 1.25; }
.sk-ghi { font-size: 14px; line-height: 1.5; color: var(--chu-mo); }
.sk-xem { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--vien); }
#ban-tin[data-phan] { padding-top: 22px; }                        /* đầu báo Bản tin không chui dưới thanh thẻ */

/* ============ 5. Thẻ chuyển phần kiểu HÀNH TINH (cô dặn 05/10 sáng: "nổi bật hơn, mang tính vũ trụ hơn") ============
 * Mỗi thẻ là một hành tinh nhỏ nằm trên một đường quỹ đạo; thẻ đang chọn to lên, có vành và hào quang. Dùng chung cho trang Cô Ari và Sự kiện + Bản tin. */
html.vt-js .vt-the { gap: clamp(14px, 5vw, 34px); padding: 10px 22px 8px; border-radius: 26px; overflow: visible; isolation: isolate;
  background: linear-gradient(180deg, rgb(32 20 48 / .96), rgb(16 10 28 / .96)); border-color: rgb(255 226 196 / .22);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / .9), 0 0 0 1px rgb(242 132 181 / .08), inset 0 1px 0 rgb(255 255 255 / .12); }
html.vt-js .vt-the::before { content: ""; position: absolute; left: 30px; right: 30px; top: 31px; height: 0; z-index: -1; border-top: 1px dashed rgb(255 226 196 / .32); }   /* quỹ đạo nối các hành tinh */
.vt-the button { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 64px; min-height: 64px; padding: 0 2px; border-radius: 14px; background: none;
  color: rgb(255 247 240 / .7); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.vt-the button::before { content: ""; width: 34px; height: 34px; margin-top: 4px; border-radius: 50%; background: var(--ht-mau, radial-gradient(circle at 32% 28%, #ffe9d2, #f9a8cc 46%, #8a3d7c 100%));
  box-shadow: inset -5px -6px 10px rgb(20 8 30 / .55), 0 0 0 4px rgb(16 10 28 / .96); filter: saturate(.75) brightness(.82);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), filter 320ms ease, box-shadow 320ms ease; }
.vt-the button:nth-child(1) { --ht-mau: radial-gradient(circle at 32% 28%, #fff1dc, #ffb46b 44%, #b0483a 100%); }
.vt-the button:nth-child(2) { --ht-mau: radial-gradient(circle at 32% 28%, #e9fbff, #6fd3d8 44%, #2b5f8f 100%); }
.vt-the button:nth-child(3) { --ht-mau: radial-gradient(circle at 32% 28%, #ffe6f3, #f284b5 46%, #7a2f6e 100%); }
.vt-the button:nth-child(4) { --ht-mau: radial-gradient(circle at 32% 28%, #f3ecff, #b79cf2 46%, #4b3a96 100%); }
.vt-the button:hover { color: #fff7f0; }
.vt-the button:hover::before { filter: saturate(1) brightness(1); transform: scale(1.06); }
.vt-the button[aria-selected="true"] { color: #ffd9ea; background: none; box-shadow: none; }
.vt-the button[aria-selected="true"]::before { transform: scale(1.22); filter: none;
  box-shadow: inset -5px -6px 10px rgb(20 8 30 / .45), 0 0 0 4px rgb(16 10 28 / .96), 0 0 0 5px rgb(255 226 196 / .75), 0 0 22px 6px rgb(242 132 181 / .6); }
.vt-the button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; top: 21px; width: 58px; height: 16px; margin: -8px 0 0 -29px; border-radius: 50%;
  border: 1.5px solid rgb(255 226 196 / .8); border-top-color: transparent; transform: rotate(-16deg); pointer-events: none; }                    /* vành hành tinh */
.vt-the button:active::before { transform: scale(.94); }
.vt-the small { display: inline; margin-left: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .vt-the button[aria-selected="true"]::before { animation: vt-nhip 3.6s ease-in-out infinite; }
}
@keyframes vt-nhip { 0%, 100% { box-shadow: inset -5px -6px 10px rgb(20 8 30 / .45), 0 0 0 4px rgb(16 10 28 / .96), 0 0 0 5px rgb(255 226 196 / .75), 0 0 18px 4px rgb(242 132 181 / .5); }
  50% { box-shadow: inset -5px -6px 10px rgb(20 8 30 / .45), 0 0 0 4px rgb(16 10 28 / .96), 0 0 0 5px rgb(255 226 196 / .9), 0 0 30px 10px rgb(242 132 181 / .75); } }
@media (max-width: 767px) {
  html.vt-js .vt-the { gap: 6px; padding: 8px 10px 6px; overflow: visible; }
  .vt-the button { min-width: 62px; padding: 0; font-size: .78rem; }
}

/* ============ 6. Trang Cô Ari đậm chất vũ trụ hơn (cô dặn 05/10 sáng) ============ */
.hs .hs-bia { position: relative; --D: clamp(180px, 46vw, 290px); }
.hs .hs-bia > .hs-chan-dung { z-index: 1; }
.hs .hs-bia::before, .hs .hs-bia::after { content: ""; position: absolute; left: 50%; top: calc(18px + var(--D) / 2); border-radius: 50%; pointer-events: none; }
/* hai quỹ đạo có mặt trăng nhỏ quay quanh chân dung (xoay cả vòng, canh giữa bằng margin, không dùng phần trăm trong transform) */
.hs .hs-bia::before { width: calc(var(--D) + 84px); height: calc(var(--D) + 84px); margin: calc((var(--D) + 84px) / -2) 0 0 calc((var(--D) + 84px) / -2);
  border: 1px dashed rgb(255 226 196 / .26);
  background: radial-gradient(circle at 50% 7px, #ffe9d2 0 3px, #ffb46b 4px 6px, transparent 7px), radial-gradient(circle closest-side, rgb(242 132 181 / .16), transparent 100%); }
.hs .hs-bia::after { width: calc(var(--D) + 150px); height: calc(var(--D) + 150px); margin: calc((var(--D) + 150px) / -2) 0 0 calc((var(--D) + 150px) / -2);
  border: 1px solid rgb(255 226 196 / .1);
  background: radial-gradient(circle at 50% calc(100% - 9px), #e9fbff 0 3px, #6fd3d8 4px 8px, transparent 9px), radial-gradient(circle at 8px 50%, #f9a8cc 0 4px, transparent 5px); }
@media (prefers-reduced-motion: no-preference) {
  .hs .hs-bia::before { animation: vt-quay 46s linear infinite; }
  .hs .hs-bia::after { animation: vt-quay 80s linear infinite reverse; }
}
@keyframes vt-quay { to { transform: rotate(360deg); } }
.hs .hs-bia-chu { position: relative; z-index: 2; margin-top: 64px; }
.hs .hs-ten { background: linear-gradient(180deg, #fff7f0 30%, #ffc9e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs .hs-ten span[data-noi]::after { -webkit-text-fill-color: #f284b5; }
/* các mốc thành chòm sao: bốn ngôi sao nối nhau bằng một nét mảnh */
.hs .hs-le .moc { position: relative; gap: 0; padding-top: 30px; }
.hs .hs-le .moc::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; border-top: 1px dashed rgb(255 226 196 / .4); }
.hs .hs-le .moc li { position: relative; padding: 4px 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; justify-items: center; }
.hs .hs-le .moc li::before { content: ""; position: absolute; left: 50%; top: -25px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 2px, #ffd9a8 3px, #ffb46b 6px); box-shadow: 0 0 14px 4px rgb(255 180 107 / .55), 0 0 0 4px rgb(13 9 22 / 1); }
@media (prefers-reduced-motion: no-preference) { .hs .hs-le .moc li::before { animation: vt-lap-lanh 3.2s ease-in-out infinite; } .hs .hs-le .moc li:nth-child(2n)::before { animation-delay: -1.6s; } }
@keyframes vt-lap-lanh { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 767px) {
  .hs .hs-le .moc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .hs .hs-le .moc::before { left: 25%; right: 25%; }
  .hs .hs-bia::after { width: calc(var(--D) + 118px); height: calc(var(--D) + 118px); margin: calc((var(--D) + 118px) / -2) 0 0 calc((var(--D) + 118px) / -2); }
}
/* ô ảnh và thẻ bài viết: viền sáng như cửa sổ tàu, sáng lên khi rà tới */
.hs .o-anh { transition: box-shadow 260ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .hs .o-anh:hover { box-shadow: inset 0 0 0 1px rgb(255 226 196 / .5), 0 0 26px -4px rgb(242 132 181 / .6); transform: translateY(-3px); } }
.hs .hs-bv-so { background: radial-gradient(circle at 32% 28%, rgb(255 233 210 / .22), rgb(242 132 181 / .14) 60%, transparent); box-shadow: 0 0 16px -4px rgb(242 132 181 / .5); }
/* sao lấp lánh thêm một lớp cho cả trang hành tinh */
body:has(.vt-dau)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.6px 1.6px at 22% 30%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 78% 16%, #ffe2c4 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 64% 72%, #ffd0e4 50%, transparent 51%), radial-gradient(1.4px 1.4px at 12% 84%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 90% 58%, #cfeeff 50%, transparent 51%);
  background-size: 420px 380px, 520px 460px, 610px 540px, 470px 610px, 560px 430px; }
@media (prefers-reduced-motion: no-preference) { body:has(.vt-dau)::after { animation: vt-lap-lanh 5s ease-in-out infinite; } }
.vt-the button { white-space: nowrap; }
main.hs { overflow-x: clip; }                                       /* vòng quỹ đạo quay quanh chân dung không được làm trang rộng hơn màn (điện thoại hẹp) */

/* ============ Nhân vật trang trí ở góc trang phụ (06/10, trang_phu.nhan_vat) ============
   Bay lơ lửng nhẹ, chỉ transform dịch bằng px (luật Safari iPhone); không bắt chuột, không che chữ; prefers-reduced-motion: đứng yên. */
.vt-nv { position: absolute; z-index: 0; width: clamp(88px, 12vw, 148px); aspect-ratio: 1; pointer-events: none; }
.vt-nv img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .vt-nv { animation: vt-nv-troi 6.5s ease-in-out infinite; } }
@keyframes vt-nv-troi { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); } 50% { transform: translate3d(0, -9px, 0) rotate(3deg); } }
.ket-hop:has(.vt-nv-ket) { position: relative; }
.vt-nv-ket { right: 24px; top: 18px; }      /* .ket-hop cắt phần tràn nên nhân vật nằm TRONG thẻ, góc phải */
.loi-hinh:has(.vt-nv-404) { position: relative; }
.vt-nv-404 { right: 4%; top: -18px; width: clamp(96px, 14vw, 190px); }
.fvt-dau:has(.vt-nv-flow) { position: relative; }
.vt-nv-flow { right: 6px; bottom: 0; }
@media (max-width: 767px) { .vt-nv-ket { top: 58px; right: 8px; width: 96px; } }

@media (max-width: 767px) { .fvt-dau:has(.vt-nv-flow) .dan { padding-right: 92px; } .vt-nv-flow { width: 88px; bottom: 44px; } }

/* 06/10: trang Cô Ari có hàng liên kết nhỏ sang Bản tin / Sự kiện (trang chủ đã bỏ biểu tượng Cô Ari, đường vào là từ hai trang đó). */
.vt-sang { display: flex; justify-content: center; gap: 8px; padding: 14px 16px 0; }
.vt-sang a, .vt-sang span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 .875rem/1 var(--f-hien);
  border: 1px solid rgb(255 226 196 / .2); color: rgb(255 247 240 / .82); text-decoration: none; background: rgb(255 255 255 / .05); }
.vt-sang a:hover { color: #fff7f0; background: rgb(255 255 255 / .12); }
.vt-sang a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.vt-sang span { color: #2a0f1a; background: linear-gradient(180deg, #f9a8cc, #f284b5); border-color: transparent; }