/* Trang giới thiệu trò (/tro/...), sinh bởi tools/trang-tro.js. Màu theo bảng Sáng/Tối (trắng hồng). */
:root { --nen: #fff7fa; --mat: #ffffff; --chu: #2a1f2d; --nhat: #6f5f70; --chinh: #ec4f8c; --chinh-dam: #c93a73; --vien: #f1e4ea; --hong: #ffe3ee; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --nen: #1a141c; --mat: #241c27; --chu: #f5edf3; --nhat: #b9a9b8; --chinh: #ff6fa5; --chinh-dam: #ff8cb8; --vien: #3a2e3d; --hong: #3a2433; color-scheme: dark; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 16px/1.55 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--chinh-dam); }
img { max-width: 100%; height: auto; display: block; }
.tren { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--mat) 92%, transparent); border-bottom: 1px solid var(--vien); backdrop-filter: blur(8px); }
.logo { display: flex; align-items: center; gap: 8px; color: var(--chu); text-decoration: none; font-size: 18px; }
.logo img { border-radius: 9px; }
main { max-width: 960px; margin: 0 auto; padding: 8px 16px 24px; }
.duong { font-size: 13px; color: var(--nhat); margin: 8px 0 12px; }
.duong a { color: var(--nhat); }
h1 { font-size: clamp(26px, 6vw, 38px); line-height: 1.15; margin: 0 0 10px; }
h2 { font-size: 21px; margin: 0 0 10px; }
section { background: var(--mat); border: 1px solid var(--vien); border-radius: 18px; padding: 18px; margin: 0 0 16px; }
.dau-trang { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
@media (min-width: 720px) { .dau-trang { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); } }
.bia { width: 100%; border-radius: 14px; aspect-ratio: 8 / 5; object-fit: cover; }
.mo-ta { margin: 0 0 8px; font-size: 17px; }
.goi { margin: 0 0 10px; color: var(--nhat); font-size: 14px; }
.the { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.the li { background: var(--hong); color: var(--chinh-dam); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.nut-hang { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.nut-hang.giua { justify-content: center; margin: 8px 0 0; }
.nut { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--chinh); color: #fff; font-weight: 800; text-decoration: none; border: 2px solid var(--chinh); }
.nut.vien { background: transparent; color: var(--chinh-dam); }
.nut.nho { min-height: 38px; padding: 0 14px; font-size: 14px; }
.nut:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }
.ba { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ba li { background: var(--nen); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ba span { color: var(--nhat); font-size: 15px; }
.luat { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.bien-the { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bien-the li { border: 1px solid var(--vien); border-radius: 10px; padding: 6px 12px; font-size: 15px; }
details { border-top: 1px solid var(--vien); padding: 10px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 8px 0 0; color: var(--nhat); }
.luoi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.luoi a { display: flex; flex-direction: column; gap: 6px; color: var(--chu); text-decoration: none; font-weight: 700; font-size: 15px; }
.luoi img { border-radius: 10px; aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }
.dau-ds .mo-ta { margin-bottom: 14px; }
.dong-tro { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--vien); color: var(--chu); text-decoration: none; }
.dong-tro:first-child { border-top: 0; }
.dong-tro img { width: 120px; flex: none; border-radius: 10px; aspect-ratio: 8 / 5; object-fit: cover; }
.dong-tro span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dong-tro small { color: var(--nhat); font-size: 14px; line-height: 1.4; }
.dong-tro i { font-style: normal; color: var(--chinh-dam); font-size: 13px; font-weight: 700; }
.chan { max-width: 960px; margin: 0 auto; padding: 8px 16px 32px; color: var(--nhat); font-size: 14px; text-align: center; }