/* Trang landing — Hệ sinh thái số Thành Đoàn TP.HCM (đặc tả: doc/dev/landing.html) */
:root { --xanh: #0b4fb3; --xanh-dam: #0a3a8c; --do: #d7262e; --chu: #0f2a5c; --phu: #5b6b86; --vien: #e3ebf7; --nen: #eef4fc; }
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; font-family: "Be Vietnam Pro", system-ui, sans-serif; color: var(--chu); background: var(--nen); }
a { color: inherit; text-decoration: none; }
.khung { max-width: 1440px; margin: 0 auto; padding: 0 28px; }

/* Đầu trang */
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--vien); }
header .khung { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { width: 50px; height: 50px; object-fit: contain; }
.logo b { display: block; color: var(--do); font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: .3px; }
.logo small { display: block; color: var(--xanh-dam); font-size: .72rem; font-weight: 700; margin-top: 3px; }
nav { display: flex; gap: 6px; margin: 0 auto; }
nav a { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px; font-weight: 500; color: #1d3a6e; border-bottom: 2px solid transparent; }
nav a i { color: var(--xanh-dam); }
nav a:hover, nav a.dang { color: var(--xanh); border-bottom-color: var(--xanh); }
.tim-nut { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vien); background: #fff; color: var(--xanh); cursor: pointer; font-size: 1rem; }
.dang-nhap { display: flex; align-items: center; gap: 8px; background: var(--xanh); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.dang-nhap:hover { background: var(--xanh-dam); }
.menu-nut { display: none; }
.cai-dat { display: flex; align-items: center; gap: 8px; border: 1px solid var(--xanh); background: #fff; color: var(--xanh); padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cai-dat[hidden] { display: none; }
.moi-cai { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto;
           background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 10px 10px 10px 12px; box-shadow: 0 10px 30px rgba(15,42,92,.22); font-size: .85rem; line-height: 1.4; }
.moi-cai[hidden] { display: none; }
.moi-cai img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.moi-cai .chu { flex: 1; min-width: 0; }
.moi-cai .nut { flex-shrink: 0; border: 0; background: var(--xanh); color: #fff; font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.moi-cai .nut[hidden] { display: none; }
.moi-cai .dong { flex-shrink: 0; border: 0; background: transparent; color: var(--phu); width: 32px; height: 32px; cursor: pointer; font-size: 1rem; }
.cai-dat:hover { background: #e6efff; }

/* Băng tiêu đề */
.bang { position: relative; overflow: hidden; background: linear-gradient(180deg, #e4effd 0%, #f4f8ff 100%); }
.bang .anh { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; background: url("../img/thanh-pho.jpg") center/cover no-repeat;
             -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.bang .khung { position: relative; padding-top: 36px; padding-bottom: 92px; min-height: 300px; }
.bang h1 { margin: 0; font-weight: 800; line-height: 1.12; }
.bang h1 span { display: block; }
.bang h1 .lon { color: var(--xanh-dam); font-size: clamp(2rem, 4.2vw, 3.4rem); }
.bang h1 .do { color: var(--do); font-size: clamp(1.25rem, 2.5vw, 2.05rem); }
.bang p { margin: 10px 0 22px; font-size: clamp(.95rem, 1.4vw, 1.2rem); color: #23406f; }
.o-tim { display: flex; max-width: 600px; background: #fff; border-radius: 40px; box-shadow: 0 6px 22px rgba(11,79,179,.14); overflow: hidden; }
.o-tim i { align-self: center; padding: 0 6px 0 20px; color: var(--xanh); }
.o-tim input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 15px 10px; font: inherit; color: var(--chu); background: transparent; }
.o-tim button { border: 0; background: var(--xanh); color: #fff; font: inherit; font-weight: 600; padding: 0 28px; cursor: pointer; }
.khau-hieu { position: absolute; right: 36px; top: 26px; font-family: "Dancing Script", cursive; color: var(--do); font-size: 2.3rem; line-height: 1.05; transform: rotate(-10deg);
             text-shadow: 0 0 12px #fff, 0 0 4px #fff; text-align: center; }
.khau-hieu i { font-size: 1.3rem; vertical-align: top; }

/* Khối nội dung */
main .khung { position: relative; margin-top: -64px; }
.the-lon { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(15,42,92,.08); padding: 20px 22px; margin-bottom: 16px; }
.dau-muc { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; font-size: 1.15rem; font-weight: 800; color: var(--xanh-dam); text-transform: uppercase; }
.dau-muc i { color: var(--xanh); font-size: 1.25rem; }
.dau-muc span { border-bottom: 3px solid var(--do); padding-bottom: 2px; }
.loc-dong { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.loc { display: flex; flex-wrap: wrap; gap: 8px; }
.loc button { border: 1px solid var(--vien); background: #fff; color: #1d3a6e; border-radius: 20px; padding: 7px 20px; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.loc button.dang { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.chu-thich { display: flex; flex-wrap: wrap; gap: 18px; font-size: .78rem; color: var(--phu); }
.cham { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.s-hd { background: #16a34a; } .s-loi { background: #dc2626; } .s-pt { background: #f59e0b; } .s-bt { background: #64748b; }

.luoi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ud { display: flex; gap: 12px; padding: 14px 12px; border: 1px solid var(--vien); border-radius: 12px; background: #fff; transition: box-shadow .15s, transform .15s; position: relative; min-height: 96px; }
a.ud:hover { box-shadow: 0 8px 22px rgba(11,79,179,.14); transform: translateY(-2px); }
.ud .bt { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; }
.ud .nd { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.ud h3 { margin: 0; padding-right: 24px; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--chu); }
.nhan { align-self: flex-start; max-width: 100%; font-size: .72rem; font-weight: 500; padding: 3px 9px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhan .cham { width: 8px; height: 8px; margin-right: 5px; }
.n-hd { background: #dcfce7; color: #166534; } .n-pt { background: #fef3c7; color: #92400e; } .n-bt { background: #e2e8f0; color: #334155; } .n-loi { background: #fee2e2; color: #991b1b; }
.ud .mui { position: absolute; right: 10px; top: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--xanh); color: var(--xanh); display: grid; place-items: center; font-size: .7rem; }
.ud.khong-link { cursor: default; }
.ud.khong-link .mui { display: none; }
.ud.khong-link .bt, .kenh .k .bt { opacity: .4; filter: grayscale(.6); }
.rong { grid-column: 1 / -1; text-align: center; color: var(--phu); padding: 24px; }

.lk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lk a { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border: 1px solid var(--vien); border-radius: 12px; font-weight: 600; }
.lk a:hover, .kenh a:hover { box-shadow: 0 6px 18px rgba(11,79,179,.12); }
.lk .bt { width: 56px; height: 40px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 6px; flex-shrink: 0; }
.lk .ten, .kenh .nd { flex: 1; }
.lk .fa-arrow-up-right-from-square, .kenh .fa-arrow-up-right-from-square { color: var(--xanh); }
.kenh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kenh a, .kenh div.k { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--vien); border-radius: 12px; }
.kenh .bt { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1.35rem; flex-shrink: 0; }
.kenh b { display: block; font-size: .85rem; }
.kenh small { display: block; font-size: .74rem; color: var(--phu); }

footer { margin-top: 10px; background: linear-gradient(90deg, var(--xanh-dam), #1557c0); color: #e6efff; }
footer .khung { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 24px; padding-top: 18px; padding-bottom: 18px; font-size: .82rem; }
footer .cot { display: flex; gap: 14px; align-items: center; }
footer .cot + .cot { border-left: 1px solid rgba(255,255,255,.3); padding-left: 24px; }
footer img { width: 54px; height: 54px; object-fit: contain; }
footer b { display: block; font-size: .95rem; color: #fff; margin-bottom: 4px; }
footer .lon { font-size: 2rem; color: #fff; }
footer p { margin: 2px 0; }
footer a:hover { text-decoration: underline; }

@media (max-width: 1440px) { .luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cai-dat span { display: none; } .cai-dat { padding: 9px 12px; } }
@media (max-width: 1200px) { .luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } nav a { padding: 8px 8px; } }
@media (max-width: 1160px) {
  /* menu thu vào nút ☰ */
  nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: #fff; padding: 8px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
  nav.mo { display: flex; }
  .menu-nut { display: block; margin-left: auto; }
  .tim-nut:not(.menu-nut) { display: none; }
  .kenh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dang-nhap span { display: none; }
  .bang .anh { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; }
  .khau-hieu { display: none; }
  .luoi, .lk, .kenh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .khung { grid-template-columns: 1fr; } footer .cot + .cot { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.3); padding-top: 14px; }
}
@media (max-width: 560px) {
  .khung { padding: 0 16px; }
  .logo b { font-size: 1.1rem; } .logo small { font-size: .62rem; }
  .luoi, .lk, .kenh { grid-template-columns: minmax(0, 1fr); }
  header .khung { gap: 8px; } .dang-nhap { padding: 10px 12px; }
  .logo { gap: 6px; } .logo img { width: 40px; height: 40px; }
  .o-tim button { padding: 0 16px; }
  .the-lon { padding: 16px 14px; }
}
@media (max-width: 360px) {
  .logo b { font-size: .95rem; } .logo small { font-size: .52rem; }
  .cai-dat, .dang-nhap { padding-left: 10px; padding-right: 10px; } .tim-nut { width: 38px; height: 38px; }
}
@media (max-width: 340px) { .logo div { display: none; } }