/* Trang con dạng thẻ + cửa sổ chi tiết (dùng chung, giống trang Dữ liệu) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{font:inherit;font-weight:700;font-size:14px;padding:9px 16px;min-height:44px;border-radius:30px;border:2px solid #0B1E4A;background:#fff;color:#0B1E4A;cursor:pointer;transition:.2s}
.chips button span{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;border-radius:10px;background:#fdecee;color:#C8102E;font-size:12px}
.chips button[aria-selected=true]{background:#C8102E;color:#fff;box-shadow:0 5px 0 #0B1E4A}
.chips button[aria-selected=true] span{background:#fff}
.pj-tg i{font-style:normal;display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:12px;background:#fdecee;color:#C8102E;margin:0 4px 4px 0}
.pm{position:fixed;inset:0;z-index:48;background:#0a0f1fcc;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto}
.pm[hidden]{display:none}
.pm-box{position:relative;width:min(1080px,100%);background:#f6f7fb;border:2px solid #0B1E4A;border-radius:22px;padding:28px;box-shadow:10px 10px 0 #C8102E;animation:up .35s forwards;outline:none}
.pm-x{position:sticky;top:0;float:right;margin:-12px -12px 0 0;width:44px;height:44px;border-radius:50%;border:2px solid #0B1E4A;background:#C8102E;color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:2}
.pm-x:focus-visible{outline:3px solid #1A4FB8;outline-offset:2px}
body.pm-on{overflow:hidden}
.pm-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.pm-ul{margin:12px 0 0 18px;line-height:1.7;opacity:.85}.pm-btns{margin-top:16px;display:flex;gap:16px;flex-wrap:wrap}
.pm-shot{cursor:zoom-in}
.pm .gal2{grid-template-columns:repeat(4,1fr);gap:14px}.pm .art2 figcaption{padding:10px 12px}.pm .art2 b{font-size:14px}.pm .art2 small{font-size:12px;margin:2px 0 0}
/* trang Thiết kế web */
.wsub{padding-top:16px;padding-bottom:40px}
.whead{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.whead h1{margin:6px 0 6px!important}.whead .lead{margin-bottom:0!important;max-width:620px}
.whead-cta{display:flex;gap:12px;flex-wrap:wrap}
.wbar{position:sticky;top:64px;z-index:5;padding:10px 0;margin-bottom:12px;background:linear-gradient(var(--bg) 80%,#f7f8fb00)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.wc{display:flex;flex-direction:column;border-radius:16px;border:2px solid #0B1E4A;background:#fff;box-shadow:5px 5px 0 #0B1E4A;color:inherit;overflow:hidden;transition:transform .25s,box-shadow .25s}
.wc[hidden]{display:none}
.wc:hover,.wc:focus-visible{transform:translate(-2px,-3px);box-shadow:8px 8px 0 #C8102E;outline:none}
.wc:focus-visible{outline:3px solid #1A4FB8;outline-offset:3px}
.wc-th{position:relative;display:block;aspect-ratio:16/10;background:#0B1E4A;overflow:hidden;border-bottom:2px solid #0B1E4A}
.wc-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wc-ph{display:grid;place-items:center;height:100%;color:#fff;font-weight:800;font-size:22px;background:linear-gradient(135deg,#C8102E,#0B3D91)}
.wc-th em{position:absolute;top:10px;left:10px;font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;background:#fff;color:#0B1E4A;border:1px solid #0B1E4A}
.wc-b{padding:12px 14px 10px;display:flex;flex-direction:column;gap:4px;flex:1}
.wc-b b{font-size:16px;line-height:1.3;text-wrap:balance}.wc-b small{font-size:13px;color:#4a5678;line-height:1.45}
.whint{display:none}
.mn-ma{border:1.5px solid #ffffff55}
@media(max-width:860px){.wbar{top:64px}.pm-grid{grid-template-columns:1fr}.pm .gal2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wsub{padding-top:8px}.whead{gap:12px}.whead-cta .btn{flex:1 1 100%;justify-content:center}
 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}.chips button{white-space:nowrap;flex:none}
 .wgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 10px 12px 2px;margin-right:-18px}
 .wc{flex:0 0 78%;scroll-snap-align:start}.whint{display:block;font-size:12px;color:#4a5678;margin-top:4px}
 .pm{padding:0}.pm-box{border-radius:0;min-height:100%;padding:18px;box-shadow:none}.pm .gal2{grid-template-columns:1fr 1fr;gap:10px}.pm .kpis{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.wgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.wc-b b{font-size:15px}}