:root{--nen:#F7F5FB;--khoi:#FFFFFF;--chu:#171719;--phu:#5F5B66;--chip:#EEEAF3;--nut:#171719;--chu-nut:#FFFFFF;--dau1:#DCEFE4;--dau2:#ECE6F7;--focus:#5B3FD6;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--nen:#121114;--khoi:#1D1B21;--chu:#F4F2F7;--phu:#B5B0BD;--chip:#2A2730;--nut:#F4F2F7;--chu-nut:#171719;--dau1:#1D2E25;--dau2:#272135;--focus:#B7A6FF}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:400 16px/1.5 Inter,"Segoe UI",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dau{background:linear-gradient(160deg,var(--dau1),var(--dau2));padding:48px 16px 40px;text-align:center}
.logo{width:72px;height:72px;border-radius:50%;display:block;margin:0 auto 16px}
h1{font-size:clamp(30px,8vw,48px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0 0 10px;text-wrap:balance}
.dau p{margin:0 auto;max-width:34em;color:var(--phu);text-wrap:pretty}
main{max-width:1120px;margin:0 auto;padding:20px 16px 40px}
.loc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 20px}
.chip{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--chip);color:var(--chu);font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.chip[aria-pressed=true]{background:var(--nut);color:var(--chu-nut)}
.luoi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.luoi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.the[hidden]{display:none}
.the a{display:flex;flex-direction:column;height:100%;background:var(--khoi);border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(23,23,25,.06);transition:transform .2s,box-shadow .2s}
@media (hover:hover){.the a:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(23,23,25,.12)}}
.the img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--chip)}
.ten{display:block;flex:1;padding:12px 12px 10px;font-size:16px;line-height:1.35;font-weight:500;overflow-wrap:anywhere}
.nut{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0 12px 12px;padding:6px 10px;border-radius:999px;background:var(--nut);color:var(--chu-nut);font-size:15px;font-weight:600;line-height:1.2;text-align:center}
footer{max-width:42em;margin:0 auto;padding:0 16px 48px;color:var(--phu);font-size:14px;text-align:center}
footer p{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}