/* ---------------- Trang chủ ---------------- */
body.home{display:flex;flex-direction:column;height:100vh;min-height:620px;overflow:auto;
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(76,201,240,.16),transparent 60%),
    radial-gradient(900px 520px at 100% 0%,rgba(255,210,63,.12),transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    var(--bg);}
[data-theme=light] body.home{background:
    radial-gradient(900px 500px at 15% -10%,rgba(10,111,163,.12),transparent 60%),
    radial-gradient(900px 520px at 100% 0%,rgba(255,190,40,.2),transparent 60%),
    linear-gradient(rgba(20,35,80,.05) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(20,35,80,.05) 1px,transparent 1px) 0 0/44px 44px,
    var(--bg);}
.htop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 22px;flex-wrap:wrap}
.hbrand{display:flex;align-items:center;gap:14px;min-width:0}
.hbrand img{height:58px}
.hbrand b{display:block;color:var(--gold);letter-spacing:.05em;font-size:17px}
[data-theme=light] .hbrand b{color:#8a4b00}
.hbrand small{display:block;color:var(--mut);font-size:12.5px}
.hmain{display:flex!important;flex-direction:column;flex:1 1 0;padding:0 22px 8px;min-height:0;grid-template-columns:none!important}
.hhero{text-align:center;padding:2px 0 10px}
.hhero h1{margin:0;font-size:clamp(26px,3.4vw,44px);letter-spacing:.01em;line-height:1.15;
  background:linear-gradient(90deg,#ffd23f,#ff9f1c 40%,#4cc9f0);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme=light] .hhero h1{background:linear-gradient(90deg,#b36b00,#d24b00 45%,#0a6fa3);-webkit-background-clip:text;background-clip:text}
.hhero p{margin:8px auto 0;max-width:820px;color:var(--mut);font-size:clamp(14px,1.3vw,17px)}
kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 2px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.07);font:600 12px/1.4 "Segoe UI",Roboto,monospace;color:var(--tx);text-align:center}
[data-theme=light] kbd{background:#fff}

.cards{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;flex:1;max-width:1320px;width:100%;margin:0 auto;align-items:stretch}
.card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;color:var(--tx);text-decoration:none;background:var(--panel);
  border:2px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .25s ease,border-color .25s,box-shadow .25s}
[data-theme=light] .card{box-shadow:0 12px 34px rgba(20,35,80,.18)}
.card:hover,.card.sel,.card:focus-visible{transform:translateY(-6px);border-color:#ffc928;box-shadow:0 0 0 4px rgba(255,201,40,.28),0 22px 50px rgba(0,0,0,.4);outline:none}
.card .art{position:relative;flex:1 1 0;min-height:150px;background:var(--sky1,#0b1636);overflow:hidden}
.card .art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.card .info{padding:16px 22px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;color:#1a1a1a;background:#ffc928;border-radius:99px;padding:2px 12px}
.card h2{font-size:clamp(22px,2.3vw,32px);margin:2px 0 0;color:var(--gold);line-height:1.15}
[data-theme=light] .card h2{color:#8a4b00}
.card p{margin:0;font-size:clamp(13.5px,1.15vw,16px);color:var(--tx)}
.card ul{margin:2px 0 4px;padding-left:20px;color:var(--mut);font-size:clamp(12.5px,1.05vw,14.5px)}
.card li{margin:2px 0}
.card .go{margin-top:auto;align-self:flex-start;font-weight:700;font-size:15px;background:#ffc928;color:#1a1a1a;border-radius:10px;padding:8px 18px;display:inline-flex;gap:8px;align-items:center}
.card .go i{font-style:normal;transition:transform .25s}
.card:hover .go i,.card.sel .go i{transform:translateX(6px)}
.hfoot{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:8px 18px 14px;color:var(--mut);font-size:12.5px}

/* ----- hình minh họa (SVG): màu theo chế độ sáng/tối ----- */
.art svg{--sky1:#0b1636;--c1:#c9a36b;--c2:#a98a57;--c3:#85755c;--dotc:rgba(60,40,15,.45);--conc:#b9c0c9;--hl:#232a35;--ink:#e8eeff;--water:#4cc9f0;--org:#ff9f1c;--teal:#2ec4b6;--red:#ff5d6c;--gold:#ffd23f;--mag:#ff4d8d;--cy:#4cc9f0}
[data-theme=light] .art svg{--sky1:#e9f0fb;--c1:#d6b782;--c2:#bf9c66;--c3:#9c8a6c;--conc:#c7ced8;--ink:#14213d;--water:#0a6fa3;--org:#d97706;--teal:#0b8a7d;--red:#d62839;--gold:#c77700;--mag:#c2185b;--cy:#0288d1}
.art .sky{fill:var(--sky1)} .art .s1{fill:var(--c1)} .art .s2{fill:var(--c2)} .art .s3{fill:var(--c3)} .art .dot{fill:var(--dotc)}
.art .gl{stroke:var(--ink);stroke-width:2;fill:none;stroke-dasharray:8 5;opacity:.7}
.art .conc,.art .pc{fill:var(--conc);stroke:var(--hl);stroke-width:1.6}
.art .hl{stroke:var(--hl);stroke-width:1.2}
.art .hole{fill:var(--c2);stroke:var(--hl);stroke-width:1}
.art .tx{fill:var(--ink);font:600 13px "Segoe UI",Roboto,Arial,sans-serif}.art .tx.sm{font-size:11px;opacity:.85}.art .tx.b{font-size:17px;font-weight:800}
.art .rebar path,.art .r1,.art .r2,.art .st,.art .son,.art .core{fill:none;stroke-linecap:round}
.art .r1{stroke:var(--org);stroke-width:2.4;fill:none}.art .r2{stroke:var(--teal);stroke-width:2.2;fill:none}
.art .r3 circle{fill:var(--org)}
.art .st{stroke:var(--gold);stroke-width:1.1;opacity:.9}
.art .son{stroke:var(--cy);stroke-width:2.2}.art .core{stroke:var(--mag);stroke-width:3.4}
.art .tipc{fill:var(--conc);stroke:var(--hl);stroke-width:1.4}
.art .ar{stroke:var(--red);stroke-width:5;fill:none;stroke-linecap:round}.art .arh{fill:var(--red)}
.art .water .wv{fill:none;stroke:var(--water);stroke-width:2.4;stroke-dasharray:none}
.art .pl{stroke:var(--red);stroke-width:2.2}
.art .p1{stop-color:var(--red);stop-opacity:.7}.art .p2{stop-color:var(--gold);stop-opacity:.45}
.art .pa path{stroke:var(--red);stroke-width:1.6;fill:none}
.art .dim path{stroke:var(--ink);stroke-width:1.2;fill:none;opacity:.8}
.art .settle path{stroke:var(--gold);stroke-width:2;stroke-dasharray:6 5;fill:none}
.art .sf path{stroke:var(--teal);stroke-width:2.2;stroke-dasharray:5 6;fill:none;stroke-linecap:round}
.art .tr path{stroke:var(--org);stroke-width:3;fill:none;stroke-linecap:round}

/* ----- chuyển động ----- */
@keyframes il-load{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes il-wave{from{transform:translateX(0)}to{transform:translateX(-80px)}}
@keyframes il-press{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1.12)}}
@keyframes il-settle{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(9px);opacity:1}}
@keyframes il-spin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes il-flow{to{stroke-dashoffset:-22}}
@keyframes il-rise{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-6px);opacity:.15}}
@keyframes il-sink{0%{transform:translateY(-64px)}45%,100%{transform:translateY(0)}}
@keyframes il-tip{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
.art .load{animation:il-load 1.8s ease-in-out infinite}
.art .moment{transform-box:fill-box;transform-origin:50% 100%;animation:il-spin 2.6s ease-in-out infinite}
.art .water{animation:il-wave 4s linear infinite}
.art .press{transform-box:fill-box;transform-origin:50% 0;animation:il-press 3.2s ease-in-out infinite}
.art .settle{animation:il-settle 3.2s ease-in-out infinite}
.art .sf path{animation:il-flow 1.4s linear infinite}
.art .tr path{animation:il-tip 1.8s ease-in-out infinite}
.art .pile{animation:il-sink 6s cubic-bezier(.3,.7,.3,1) infinite}
.art .p-phc{animation-delay:.5s}.art .p-bd{animation-delay:1s}
@media (prefers-reduced-motion:reduce){.art *{animation:none!important}}

@media (max-width:900px){.cards{grid-template-columns:1fr}.hbrand small{display:none}}
@media (min-width:1500px){.cards{max-width:1600px}}

.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{font-size:12.5px;border:1px solid var(--line);border-radius:99px;padding:1px 10px;color:var(--mut)}
.card .info{flex:none}
@media (max-height:820px){.card ul{display:none}.hhero p{display:none}.hhero{padding-bottom:6px}.card .info{padding:10px 20px 14px}}
@media (max-height:700px){.chips{display:none}}
@media (max-width:900px){body.home{height:auto}.card .art{flex:none;aspect-ratio:480/290}}