/* Trang chọn dự án. Tương phản chữ ≥ 4.5:1, viền/biểu tượng ≥ 3:1, ô bấm ≥ 44px.
   Thẻ dự án luôn nền tối (ảnh/màu thương hiệu) nên chữ trên thẻ dùng màu sáng ở cả 2 chế độ. */
:root{
  --bg:#f6f2ea; --fg:#14110c; --muted:#4f4738; --line:#8a7a5c; --focus:#7a4f00;
  --nhan:#7a5a12; --nen:radial-gradient(120% 80% at 10% 0%,#efe2c4 0%,#f6f2ea 55%,#eef1f2 100%);
  --o:#ffffff; --o-vien:#8a7a5c;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0a08; --fg:#f5efe2; --muted:#cfc6b2; --line:#8f8270; --focus:#f2c55c;
    --nhan:#e9c46a; --nen:radial-gradient(120% 80% at 10% 0%,#2a2010 0%,#0b0a08 55%,#08100f 100%);
    --o:#17150f; --o-vien:#a8987a; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0a08; --fg:#f5efe2; --muted:#cfc6b2; --line:#8f8270; --focus:#f2c55c;
  --nhan:#e9c46a; --nen:radial-gradient(120% 80% at 10% 0%,#2a2010 0%,#0b0a08 55%,#08100f 100%);
  --o:#17150f; --o-vien:#a8987a; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100dvh;background:var(--bg);background-image:var(--nen);color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;
  padding:32px 16px max(32px,env(safe-area-inset-bottom))}
.khung{width:100%;max-width:880px}

.dau{margin-bottom:24px}
.nhan{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nhan)}
.dau h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.mo-ta{margin:0;color:var(--muted)}

.ds{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:680px){.ds{grid-template-columns:1fr}}

.the{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  min-height:300px;padding:22px;border-radius:20px;border:2px solid transparent;color:#fff;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
@media (max-width:680px){.the{min-height:280px}}
.the:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.28)}
.the:active{transform:translateY(0) scale(.99)}
.the:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.the.cuoi{border-color:var(--focus)}

.nen{position:absolute;inset:0;z-index:-1}
/* SOL: ảnh nền hoa hướng dương vàng của app SOL, phủ lớp tối phía dưới để chữ trắng đủ tương phản */
.the-sol .nen{background:linear-gradient(180deg,rgba(8,6,3,.15) 0%,rgba(8,6,3,.55) 45%,rgba(8,6,3,.92) 100%),url(nen-sol.webp) center 35%/cover #120d05}
/* THE PONTE: biển Đà Nẵng xanh đậm, hình cây cầu nét mảnh */
.the-ponte .nen{background:linear-gradient(180deg,rgba(4,18,26,0) 0%,rgba(4,18,26,.55) 55%,rgba(4,18,26,.94) 100%),
  radial-gradient(90% 70% at 80% 10%,#1f6f80 0%,#0d3a4a 50%,#06202b 100%)}
.cau{position:absolute;left:0;right:0;top:4%;width:100%;height:46%}
.cau path{fill:none;stroke:#bfe6ee;stroke-linecap:round}
.cau .mat{stroke-width:3;opacity:.85}
.cau .vom{stroke-width:3;opacity:.9}
.cau .vom2{stroke-width:1.5;opacity:.5}
.cau .treo path{stroke-width:1.2;opacity:.55}
.cau .song{stroke-width:1.5;opacity:.4}

.hang{display:flex;align-items:center;gap:14px;min-width:0}
.logo{flex:0 0 64px;width:64px;height:64px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.35)}
.logo img{width:64px;height:64px;object-fit:contain}
.logo-chu{background:#e9f7fa;color:#0b3a48;font-weight:800;font-size:22px;letter-spacing:.04em}

.chu{display:flex;flex-direction:column;min-width:0}
.chu b{font-size:clamp(22px,3.2vw,28px);line-height:1.15;letter-spacing:.06em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.the-sol .chu b{color:#ffd978}
.the-ponte .chu b{color:#ffffff}
.phu{color:#f1ece2;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}

.vao{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  font-weight:700;font-size:15px;transition:gap .2s}
.the-sol .vao{background:linear-gradient(180deg,#f3d27a,#c9972c);color:#1d1404}
.the-ponte .vao{background:#e9f7fa;color:#0b3a48}
.the:hover .vao{gap:12px}

.nho{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:20px;padding:6px 14px;border-radius:12px;
  background:var(--o);border:1px solid var(--o-vien);color:var(--fg);cursor:pointer;width:fit-content;max-width:100%}
.nho input{flex:0 0 22px;width:22px;height:22px;margin:0;accent-color:var(--focus)}
.nho:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.ghi{color:var(--muted);font-size:14px;margin:10px 0 0}

@media (prefers-reduced-motion: reduce){
  .the,.vao{transition:none}.the:hover,.the:active{transform:none}.the:hover .vao{gap:8px}
}
@media (max-width:680px){.cau{height:32%}}