/* ═══════════════════════════════════════════ MOBILE-FIRST: viết cho 375px trước Mở rộng dần với min-width media queries ═══════════════════════════════════════════ */ :root { --bg: #08090d; --bg2: #0e1018; --bg3: #141720; --bg4: #1a1f2e; --acc: #f0a500; --acc2: #ff6a1a; --green: #3ecf8e; --blue: #5b8dee; --purple: #a78bfa; --text: #eaeef7; --text2: #9aa3b5; --muted: #6b7385; --border: rgba(255,255,255,0.07); --card: rgba(255,255,255,0.04); --r: 12px; --nav-h: 56px; --touch: 44px; /* WCAG minimum touch target */ } /* ── RESET ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; } body { font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } button { cursor:pointer; font-family:'Be Vietnam Pro',sans-serif; } code { background:rgba(240,165,0,.13); color:var(--acc); padding:2px 7px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:.85em; } /* ── SCROLL PROGRESS ── */ #progress-bar { position:fixed; top:0; left:0; z-index:400; height:3px; width:0; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .1s linear; } /* ═══════════════════════════════════ NAV — Mobile: 1 tầng gọn ═══════════════════════════════════ */ .top-nav { position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h); background:rgba(8,9,13,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 4%; gap:.75rem; } .nav-logo { font-size:1.15rem; font-weight:700; color:var(--acc); text-decoration:none; flex-shrink:0; } .nav-logo span { color:var(--text); } /* Desktop links — ẩn trên mobile */ .nav-links { display:none; } /* CTA nhỏ luôn hiển thị */ .nav-cta-sm { margin-left:auto; background:var(--acc); color:#111; font-size:.78rem; font-weight:700; padding:.42rem .9rem; border-radius:6px; border:none; white-space:nowrap; min-height:var(--touch); display:flex; align-items:center; } /* Hamburger */ .hamburger { display:flex; flex-direction:column; gap:5px; padding:6px; background:none; border:none; min-width:var(--touch); min-height:var(--touch); align-items:center; justify-content:center; } .hamburger span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; } .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════ MOBILE DRAWER — full screen ═══════════════════════════════════ */ .nav-drawer { display:none; position:fixed; inset:0; background:var(--bg2); z-index:190; flex-direction:column; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom, 0); } .nav-drawer.open { display:flex; } .drawer-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 4%; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg2); z-index:1; min-height:var(--nav-h); } .drawer-logo { font-size:1.1rem; font-weight:700; color:var(--acc); } .drawer-logo span { color:var(--text); } .drawer-close { width:var(--touch); height:var(--touch); display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:none; border:none; color:var(--text2); } .drawer-body { padding:.5rem 4% 2rem; flex:1; } .drawer-section { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); padding:1rem 0 .4rem; } .drawer-item { display:flex; align-items:center; gap:.75rem; padding:.8rem 0; border-bottom:1px solid var(--border); font-size:.95rem; font-weight:500; color:var(--text2); min-height:var(--touch); transition:color .2s; } .drawer-item:hover { color:var(--acc); } .drawer-item .di-icon { font-size:1.05rem; width:22px; text-align:center; flex-shrink:0; } .drawer-badge { margin-left:auto; font-size:.6rem; font-weight:700; background:rgba(62,207,142,.15); color:var(--green); padding:2px 7px; border-radius:8px; border:1px solid rgba(62,207,142,.3); } .drawer-cta { display:block; margin:1.2rem 0 .5rem; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; font-weight:700; padding:.9rem; border-radius:10px; text-align:center; font-size:.97rem; min-height:var(--touch); } .drawer-cta2 { display:block; border:1px solid var(--border); color:var(--text2); font-weight:600; padding:.8rem; border-radius:10px; text-align:center; font-size:.88rem; min-height:var(--touch); } /* ═══════════════════════════════════ BOTTOM NAV — mobile only ═══════════════════════════════════ */ .bottom-nav { display:block; /* visible on mobile by default */ position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(8,9,13,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom, 0); } .bot-inner { display:flex; } .bot-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 0 7px; border:none; background:none; min-height:52px; } .bot-item svg { width:20px; height:20px; stroke:var(--muted); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; } .bot-item span { font-size:9.5px; color:var(--muted); font-weight:500; transition:color .2s; } .bot-item.active svg { stroke:var(--acc); } .bot-item.active span { color:var(--acc); } /* Page content: push down từ nav, push up từ bottom nav */ .page { padding-top:var(--nav-h); padding-bottom:64px; /* bottom nav height */ } /* ═══════════════════════════════════ HERO — Mobile: 1 cột, compact ═══════════════════════════════════ */ .hero { padding:2rem 4% 2.5rem; position:relative; overflow:hidden; } .hero::before { content:''; position:absolute; top:-100px; right:-80px; width:300px; height:300px; background:radial-gradient(circle,rgba(240,165,0,.12) 0%,transparent 70%); pointer-events:none; } .badge { display:inline-flex; align-items:center; gap:6px; background:rgba(240,165,0,.12); border:1px solid rgba(240,165,0,.28); color:var(--acc); padding:.28rem .85rem; border-radius:20px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:1rem; } .dot-pulse { width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pulse 2s infinite; flex-shrink:0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } .hero-title { font-size:clamp(1.85rem,7.5vw,2.4rem); font-weight:700; line-height:1.15; letter-spacing:-.3px; margin-bottom:1rem; } .hero-title .hl { background:linear-gradient(120deg,var(--acc),var(--acc2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-desc { font-size:.93rem; color:var(--muted); margin-bottom:1.6rem; line-height:1.7; } /* Buttons: full width trên mobile */ .hero-btns { display:flex; flex-direction:column; gap:.75rem; } .btn-primary { display:flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; font-weight:700; font-size:.95rem; padding:.85rem 1.5rem; border-radius:8px; border:none; cursor:pointer; min-height:var(--touch); transition:transform .2s, box-shadow .2s; font-family:'Be Vietnam Pro',sans-serif; text-decoration:none; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(240,165,0,.3); } .btn-outline { display:flex; align-items:center; justify-content:center; background:transparent; color:var(--text); font-weight:500; font-size:.95rem; padding:.85rem 1.5rem; border-radius:8px; text-decoration:none; border:1px solid var(--border); cursor:pointer; min-height:var(--touch); transition:border-color .2s, background .2s; font-family:'Be Vietnam Pro',sans-serif; } .btn-outline:hover { border-color:var(--acc); background:rgba(240,165,0,.05); } /* Stats: dạng card row trên mobile */ .hero-stats { display:flex; margin-top:1.8rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; } .stat-item { flex:1; padding:.9rem .5rem; text-align:center; border-right:1px solid var(--border); } .stat-item:last-child { border-right:none; } .stat-num { font-size:1.5rem; font-weight:700; color:var(--acc); } .stat-label { font-size:.68rem; color:var(--muted); margin-top:2px; } /* CAD mockup — compact mobile */ .hero-visual { margin-top:2rem; } .cad-window { background:#0d1117; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); } .cad-topbar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:#161b25; border-bottom:1px solid var(--border); } .dot-r { width:9px; height:9px; border-radius:50%; background:#ff5f56; } .dot-y { width:9px; height:9px; border-radius:50%; background:#febc2e; } .dot-g { width:9px; height:9px; border-radius:50%; background:#27c840; } .cad-title { font-size:.65rem; color:var(--muted); margin-left:6px; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cad-body svg { width:100%; display:block; } .cmd-line { background:#1c2233; padding:7px 12px; font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--acc); border-top:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ═══════════════════════════════════ ROADMAP — Stack dọc mobile ═══════════════════════════════════ */ .roadmap-section { padding:2.5rem 4%; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .section-center { text-align:center; margin-bottom:1.8rem; } .section-label { font-size:.7rem; text-transform:uppercase; letter-spacing:2px; color:var(--acc); font-weight:600; margin-bottom:.5rem; } .section-title { font-size:clamp(1.4rem,5vw,2.2rem); font-weight:700; line-height:1.2; letter-spacing:-.25px; margin-bottom:.75rem; } .section-desc { color:var(--muted); font-size:.92rem; line-height:1.75; } /* Roadmap: 1 cột mobile */ .roadmap-grid { display:flex; flex-direction:column; gap:1rem; max-width:860px; margin:0 auto; } .roadmap-arrow { display:none; } /* hidden mobile */ .roadmap-card { border-radius:14px; padding:1.3rem; } .roadmap-card.active { background:rgba(240,165,0,.06); border:1px solid rgba(240,165,0,.35); } .roadmap-card.soon-green { background:rgba(62,207,142,.04); border:1px solid rgba(62,207,142,.2); } .roadmap-card.soon-purple { background:rgba(167,139,250,.04); border:1px solid rgba(167,139,250,.2); } .roadmap-step-row { display:flex; align-items:center; gap:9px; margin-bottom:.85rem; } .step-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex-shrink:0; } .step-num.acc { background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; } .step-num.green { background:rgba(62,207,142,.15); border:1px solid rgba(62,207,142,.35); color:var(--green); } .step-num.purple { background:rgba(167,139,250,.15); border:1px solid rgba(167,139,250,.35); color:var(--purple); } .step-status { font-size:.68rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; } .roadmap-emoji { font-size:1.2rem; margin-bottom:.35rem; } .roadmap-card h3 { font-weight:700; font-size:.95rem; margin-bottom:.3rem; } .roadmap-card p { font-size:.83rem; color:var(--muted); line-height:1.6; } .roadmap-meta { margin-top:.85rem; font-size:.78rem; } .notify-link { font-weight:600; text-decoration:none; border:1px solid; padding:4px 12px; border-radius:20px; font-size:.75rem; display:inline-flex; align-items:center; gap:4px; min-height:var(--touch); } /* Notify form */ .notify-form { max-width:440px; margin:2rem auto 0; text-align:center; } .notify-form p { font-size:.87rem; color:var(--muted); margin-bottom:.85rem; } .notify-row { display:flex; flex-direction:column; gap:.6rem; } .notify-input { width:100%; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; color:var(--text); font-family:'Be Vietnam Pro',sans-serif; font-size:.9rem; outline:none; min-height:var(--touch); } .notify-input:focus { border-color:rgba(240,165,0,.5); } .notify-btn { background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; font-weight:700; font-size:.9rem; padding:.75rem 1.2rem; border-radius:8px; border:none; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif; min-height:var(--touch); } /* ═══════════════════════════════════ SECTION SHARED ═══════════════════════════════════ */ .section { padding:3rem 4%; } .section-bg2 { background:var(--bg2); } /* ═══════════════════════════════════ FEATURES — 1 cột mobile ═══════════════════════════════════ */ .features-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; } .feat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.4rem; transition:border-color .3s; } .feat-card:hover { border-color:rgba(240,165,0,.3); } .feat-icon { width:40px; height:40px; border-radius:9px; background:rgba(240,165,0,.12); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.2rem; } .feat-card h3 { font-weight:700; font-size:.97rem; margin-bottom:.45rem; } .feat-card p { font-size:.87rem; color:var(--muted); line-height:1.65; } /* ═══════════════════════════════════ CURRICULUM — compact mobile ═══════════════════════════════════ */ .modules-list { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem; } .module-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1rem 1.2rem; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:.85rem; transition:border-color .3s; } .module-item:hover { border-color:rgba(240,165,0,.25); } .mod-num { font-size:1.2rem; font-weight:700; color:var(--acc); opacity:.6; } .mod-info h4 { font-weight:600; font-size:.9rem; margin-bottom:.2rem; } .mod-info p { font-size:.8rem; color:var(--muted); } /* Tag ẩn trên mobile để tiết kiệm không gian */ .mod-tag { display:none; } /* ═══════════════════════════════════ TOOL — 1 cột mobile ═══════════════════════════════════ */ .tool-layout { display:flex; flex-direction:column; gap:1.8rem; } .tool-features { margin-top:1.4rem; display:flex; flex-direction:column; gap:.8rem; } .tool-feat { display:flex; align-items:flex-start; gap:.8rem; font-size:.9rem; } .tool-feat-icon { width:22px; height:22px; border-radius:50%; background:rgba(240,165,0,.15); display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0; margin-top:2px; color:var(--acc); } .tool-terminal { background:#0d1117; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; } .term-bar { background:#161b25; padding:9px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); font-size:.68rem; color:var(--muted); font-family:'JetBrains Mono',monospace; } .term-body { padding:1rem 1.2rem; font-family:'JetBrains Mono',monospace; font-size:.78rem; line-height:1.9; } .t-cmd { color:var(--green); } .t-out { color:var(--acc); } .t-ok { color:var(--green); } .t-dim { color:var(--muted); } /* ═══════════════════════════════════ PRICING — 1 cột mobile ═══════════════════════════════════ */ .pricing-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; } .price-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.6rem; position:relative; } .price-card.featured { border-color:rgba(240,165,0,.5); background:rgba(240,165,0,.04); } .price-best { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; font-size:.68rem; font-weight:700; padding:3px 12px; border-radius:20px; white-space:nowrap; } .price-tier { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; } .price-amount { font-size:2.1rem; font-weight:700; line-height:1; margin-bottom:.25rem; } .price-sub { font-size:.78rem; color:var(--muted); margin-bottom:1.2rem; } .price-divider { height:1px; background:var(--border); margin:1.2rem 0; } .price-perks { list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; } .price-perks li { font-size:.87rem; display:flex; align-items:flex-start; gap:.55rem; } .perk-check { color:var(--acc); font-size:.78rem; margin-top:2px; } .perk-x { color:#3a3d45; font-size:.78rem; margin-top:2px; } li.off { color:var(--muted); } .btn-block { display:block; text-align:center; padding:.8rem; border-radius:8px; font-weight:600; font-size:.9rem; cursor:pointer; border:none; font-family:'Be Vietnam Pro',sans-serif; min-height:var(--touch); transition:all .2s; } .btn-block.primary { background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#111; } .btn-block.primary:hover { box-shadow:0 6px 18px rgba(240,165,0,.3); transform:translateY(-1px); } .btn-block.ghost { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-block.ghost:hover { border-color:var(--acc); background:rgba(240,165,0,.05); } /* ═══════════════════════════════════ FAQ ═══════════════════════════════════ */ .faq-list { margin-top:1.8rem; display:flex; flex-direction:column; gap:.75rem; } details { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color .3s; } details:hover { border-color:rgba(240,165,0,.3); } details[open] { border-color:rgba(240,165,0,.4); } summary { padding:1rem 1.2rem; font-size:.92rem; font-weight:500; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; user-select:none; min-height:var(--touch); } summary::after { content:'+'; font-size:1.1rem; color:var(--acc); } details[open] summary::after { content:'−'; } .faq-ans { padding:0 1.2rem 1rem; font-size:.88rem; color:var(--muted); line-height:1.75; } /* ═══════════════════════════════════ CTA SECTION ═══════════════════════════════════ */ .cta-section { text-align:center; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; padding:3rem 4%; } .cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; height:300px; background:radial-gradient(ellipse,rgba(240,165,0,.1) 0%,transparent 70%); pointer-events:none; } .cta-section .section-title { max-width:520px; margin:0 auto .85rem; } .cta-section .section-desc { max-width:480px; margin:0 auto 2rem; } .cta-group { display:flex; flex-direction:column; gap:.75rem; max-width:360px; margin:0 auto; } /* ═══════════════════════════════════ FOOTER — compact mobile ═══════════════════════════════════ */ footer { background:var(--bg2); border-top:1px solid var(--border); padding:2rem 4% 1.5rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0)); } .footer-top { margin-bottom:1.5rem; } .footer-logo { font-size:1.1rem; font-weight:700; color:var(--acc); margin-bottom:.4rem; } .footer-logo span { color:var(--text); } .footer-desc { font-size:.82rem; color:var(--muted); line-height:1.6; max-width:260px; } .footer-links { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.5rem; } .footer-col h4 { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.3); margin-bottom:.65rem; } .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.45rem; } .footer-col ul a { font-size:.82rem; color:var(--muted); min-height:32px; display:flex; align-items:center; transition:color .2s; } .footer-col ul a:hover { color:var(--acc); } .footer-bottom { padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.06); font-size:.75rem; color:rgba(255,255,255,.3); display:flex; flex-direction:column; gap:.35rem; } .footer-bottom a { color:rgba(255,255,255,.4); transition:color .2s; } .footer-bottom a:hover { color:var(--acc); } /* ═══════════════════════════════════ ANIMATIONS ═══════════════════════════════════ */ .reveal { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; } .reveal.visible { opacity:1; transform:translateY(0); } /* ═══════════════════════════════════ TABLET: ≥ 640px ═══════════════════════════════════ */ @media (min-width:640px) { .hero { padding:2.5rem 5% 3rem; } .hero-btns { flex-direction:row; flex-wrap:wrap; } .btn-primary, .btn-outline { width:auto; } .features-grid { grid-template-columns:1fr 1fr; } .module-item { grid-template-columns:44px 1fr auto; } .mod-tag { display:inline-flex; font-size:.7rem; font-weight:600; padding:.22rem .65rem; border-radius:20px; white-space:nowrap; } .tag-free { background:rgba(240,165,0,.12); color:var(--acc); border:1px solid rgba(240,165,0,.25); } .tag-pro { background:rgba(255,106,26,.12); color:#ff8c4a; border:1px solid rgba(255,106,26,.25); } .notify-row { flex-direction:row; } .notify-btn { flex-shrink:0; } .pricing-grid { grid-template-columns:1fr 1fr; } .cta-group { flex-direction:row; max-width:none; justify-content:center; } .footer-links { grid-template-columns:repeat(3,1fr); } } /* ═══════════════════════════════════ DESKTOP: ≥ 1024px ═══════════════════════════════════ */ @media (min-width:1024px) { :root { --nav-h:58px; } /* Nav desktop */ .hamburger { display:none; } .nav-cta-sm { display:none; } .nav-links { display:flex; list-style:none; align-items:center; gap:1.6rem; margin-left:auto; } .nav-links a { font-size:.86rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s; white-space:nowrap; display:flex; align-items:center; gap:5px; } .nav-links a:hover { color:var(--acc); } .nav-cta { background:var(--acc) !important; color:#111 !important; padding:.42rem 1.1rem; border-radius:6px; font-weight:700 !important; } .nav-cta:hover { background:#ffd04a !important; } /* Hide bottom nav on desktop */ .bottom-nav { display:none; } /* Page: remove bottom padding */ .page { padding-bottom:0; } /* Hero: 2 cột desktop */ .hero { min-height:calc(100vh - var(--nav-h)); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem; padding:3rem 5% 5rem; } .hero::before { width:600px; height:600px; } .hero-visual { margin-top:0; } .hero-btns { flex-direction:row; } .btn-primary, .btn-outline { justify-content:flex-start; width:auto; } .hero-stats { display:grid; grid-template-columns:repeat(3,auto); background:none; border:none; border-top:1px solid var(--border); border-radius:0; padding-top:1.5rem; margin-top:2rem; gap:2.5rem; } .stat-item { padding:0; border-right:none; text-align:left; } .stat-num { font-size:1.8rem; } /* Roadmap: 3 cột desktop */ .roadmap-section { padding:4rem 5%; } .roadmap-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:1rem; } .roadmap-arrow { display:block; font-size:1.4rem; color:var(--muted); text-align:center; line-height:1; } /* Sections */ .section { padding:5rem 5%; } .features-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem; } .tool-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .pricing-grid { grid-template-columns:repeat(3,1fr); max-width:900px; } .cta-group { flex-direction:row; } .footer-bottom { flex-direction:row; justify-content:space-between; } .notify-row { flex-direction:row; } }
Dành cho sinh viên BK – Khoa Xây Dựng

Vẽ dầm cột
chuẩn kỹ thuật
gấp 10 lần nhanh

Khóa AutoCAD chuyên sâu cho sinh viên xây dựng — thiết lập layer, vẽ dầm cột, thép đai 2 vùng hoàn chỉnh. Tặng kèm tool LISP miễn phí.

Đăng ký học miễn phí Xem khóa học
500+
Sinh viên đã học
40+
Bài học video
Free
Tool LISP
AutoCAD 2024 – Dam_B250x500.dwg
b = 250 h=500 φ8a150 (vùng 1) φ8a200 (vùng 2) 5φ20 (trên) 5φ20 (dưới) MẶT CẮT DẦM B250x500
Command: DAM2V  |  Vẽ xong: B250×500, 2 vùng thép đai ✓
Lộ trình học tập

AutoCAD → ETABS → Revit

1
Đang mở đăng ký
📐

AutoCAD Kết cấu

Vẽ dầm, cột, thép đai chuẩn TCVN. Tool LISP miễn phí.

40 bài · 299k trọn đời
→
2
Q3/2025
🧮

Tính toán thép ETABS

Đọc nội lực M–V–N, xuất kết quả thép dầm cột sang AutoCAD.

🔔 Thông báo tôi
→
3
Q4/2025
🏢

Revit Structure BIM

Mô hình 3D dầm, cột, sàn BTCT — xuất bản vẽ thi công đầy đủ.

🔔 Thông báo tôi

Nhận thông báo khi ETABS & Revit mở đăng ký:

Tại sao chọn HCMUT-TECH

Học đúng thứ sinh viên xây dựng cần

Tập trung 100% vào bản vẽ kết cấu thực tế. Không lý thuyết chung chung.

📐

Môi trường vẽ chuẩn TCVN

Layer, dimstyle, textstyle đúng tiêu chuẩn. Thiết lập một lần, dùng mãi cho mọi đồ án.

🏗️

Vẽ dầm – cột hoàn chỉnh

Mặt cắt ngang, cốt thép dọc, thép đai 2 vùng với chú thích kỹ thuật tiếng Việt.

⚡

Tool LISP tự động hóa

Vẽ 1 dầm trong 30 giây thay vì 30 phút. Gõ lệnh DAM2V, nhập thông số — xong ngay.

📦

Thư viện 50+ Block

Block cột, dầm, sàn, cầu thang sẵn dùng — chèn vào bản vẽ trong vài giây.

🎯

Thực hành theo đồ án thật

Bài tập mô phỏng đồ án BTCT 1 & 2 — từ bản vẽ đơn giản đến hồ sơ hoàn chỉnh.

💬

Hỗ trợ nhóm Zalo

Nhóm riêng cho học viên — hỏi bất kỳ lúc nào, trả lời trong 24 giờ.

Học viên nói gì

500+ sinh viên đã thay đổi
cách vẽ đồ án

4.9
★★★★★
127 đánh giá · Bách Khoa, HUTECH, HCMUTE
★★★★★

Trước khi biết KataPro mình mất 3 ngày vẽ bản vẽ đồ án BTCT 1. Sau khi cài DAM2V, cùng khối lượng đó chỉ mất nửa buổi. Không thể tin được.

MK
Minh Khoa
SV Xây Dựng · BK HCM K22
Pro
★★★★★

Layer, dimstyle, mình hay bị giảng viên nhắc về nét vẽ không chuẩn. Sau khi dùng template của KataPro thì lần nào chấm đồ án cũng qua. Cảm ơn team rất nhiều!

TL
Thu Linh
SV Kỹ thuật Công trình · HCMUTE
Pro
★★★★★

Mình không giỏi AutoCAD nhưng nhờ khóa này mà vẽ được đồ án cột móng hoàn chỉnh. Video bài giảng rất dễ hiểu, hỏi nhóm Zalo được trả lời nhanh.

QH
Quốc Huy
SV Xây Dựng · HUTECH năm 3
Pro
★★★★★

Tool DAM2V quá tiện, nhưng mình thích nhất là phần giải thích thép đai 2 vùng — học trên lớp không hiểu, đọc bài blog KataPro hiểu ngay trong 10 phút.

NA
Ngọc Anh
SV Cầu Đường · ĐH Giao Thông
Starter
★★★★★

299k mà học được cả lộ trình từ cài đặt đến hoàn thiện hồ sơ, lại còn được tool LISP miễn phí. So với đi học trung tâm thì rẻ gấp 20 lần mà nội dung sát thực tế hơn nhiều.

BN
Bảo Nguyên
SV Xây Dựng · ĐH Bách Khoa HN
Pro
★★★★★

Hỗ trợ trong nhóm Zalo rất nhiệt tình. Mình bị lỗi cài LISP, gửi ảnh vào nhóm là được hướng dẫn xử lý trong 2 tiếng. Hiếm khóa nào chăm học viên như vậy.

KD
Kiều Diễm
SV Kiến Trúc · ĐH Văn Lang
Pro
★★★★★

Mình năm nhất hoàn toàn không biết AutoCAD. Học xong module 1 và 2 là đã tự vẽ được bản vẽ đầu tiên. Lộ trình học rõ ràng, không bị overwhelm như học YouTube tự do.

HM
Hải Minh
SV Xây Dựng · BK HCM K24 (năm 1)
Starter
★★★★★

Xuất PDF đúng tỉ lệ là thứ mình loay hoay mãi không ra. Bài học module 6 giải quyết đúng vấn đề đó — layout viewport, plot style, in đúng khổ A1. Tiết kiệm cả buổi mò mẫm.

PT
Phúc Thịnh
SV Kết Cấu · ĐH Xây Dựng HN
Pro
Nội dung khóa học

40 bài học từ cơ bản đến chuyên nghiệp

Lộ trình thiết kế riêng cho sinh viên Khoa Xây Dựng.

01

Cài đặt AutoCAD & Tool LISP

Cài đặt, kích hoạt, nạp LISP – 4 bài

Miễn phí
02

Thiết lập môi trường vẽ chuẩn TCVN

Layer, lineweight, dimstyle, plot style – 6 bài

Miễn phí
03

Vẽ mặt cắt ngang dầm BTCT

Thép dọc, thép đai 2 vùng, ghi kích thước – 8 bài

Pro
04

Vẽ kết cấu cột & móng

Cột chữ nhật, tròn, móng đơn, móng băng – 10 bài

Pro
05

Tự động hóa với LISP nâng cao

Macro, lệnh DAM2V, COT2V, bố trí thép tự động – 7 bài

Pro
06

Hoàn thiện hồ sơ thiết kế

Layout, xuất PDF, đóng gói file nộp đồ án – 5 bài

Pro
07

Tính toán thép ETABS Sắp ra

Đọc M–V–N, xuất thép dầm cột sang AutoCAD – dự kiến 12 bài

Q3/2025
08

Revit Structure BIM Sắp ra

Dựng 3D dầm, cột, sàn BTCT — xuất bản vẽ thi công – dự kiến 15 bài

Q4/2025
Xem danh sách bài học đầy đủ →
Tool miễn phí

KataPro — vẽ dầm trong 30 giây

Plugin AutoCAD LISP miễn phí — gõ lệnh DAM2V, nhập thông số, nhận ngay bản vẽ hoàn chỉnh.

✓
Dầm 2 vùng thép đai — tự động vẽ stirrup vùng 1 & 2
✓
Cốt thép dọc liên tục — ghi nhãn φ tự động
✓
Chú thích tiếng Việt — kích thước, nhãn kỹ thuật đầy đủ
✓
AutoCAD 2018–2024 — cài một lần, dùng mọi phiên bản
Tải LISP miễn phí
● AutoCAD Command Line
; Nạp KataPro vào AutoCAD
Command: APPLOAD
KataPro.lsp loaded ✓

Command: DAM2V
b (mm): 250
h (mm): 500
Thép trên: 5φ20
Đai vùng 1: φ8a150
Đai vùng 2: φ8a200

✓ Vẽ xong: Dầm B250×500
✓ Thời gian: 28 giây
Học phí

Đơn giản, minh bạch

Bắt đầu miễn phí. Nâng cấp khi sẵn sàng.

Starter
Miễn phí
Trọn đời · Không cần thẻ
  • ✓10 bài học cơ bản
  • ✓Hướng dẫn cài KataPro
  • ✓Template layer chuẩn TCVN
  • ✓Nhóm Zalo
  • ✗Bài học nâng cao
  • ✗Thư viện 50+ block
Bắt đầu miễn phí
Phổ biến nhất
Pro
299k
Một lần thanh toán · Trọn đời
  • ✓Toàn bộ 40 bài học video
  • ✓KataPro + tất cả tool LISP
  • ✓Thư viện 50+ block kết cấu
  • ✓File mẫu đồ án BTCT 1 & 2
  • ✓Zalo hỗ trợ ưu tiên
  • ✓Cập nhật miễn phí mãi
Đăng ký Pro – 299k
Nhóm / Lớp
Liên hệ
Từ 10 sinh viên
  • ✓Tất cả quyền lợi Pro
  • ✓Học online trực tiếp
  • ✓Tùy chỉnh theo đồ án
  • ✓Giảm 30–50%
Liên hệ tư vấn
Câu hỏi thường gặp

Bạn đang thắc mắc?

Khóa học có phù hợp sinh viên năm nhất không?
Hoàn toàn phù hợp. Bắt đầu từ cài đặt AutoCAD từ đầu, không yêu cầu kinh nghiệm trước. Học tốt hơn nếu đã học qua môn Vật liệu xây dựng cơ bản.
Tool KataPro có thực sự miễn phí không?
Có — KataPro là file LISP mã nguồn mở, miễn phí hoàn toàn, không giới hạn tính năng và không có thời hạn dùng thử.
Học phí 299k có bao gồm cập nhật tương lai không?
Có. Thanh toán một lần, truy cập trọn đời bao gồm tất cả nội dung mới được thêm vào trong tương lai.
Tool LISP chạy được trên AutoCAD phiên bản nào?
Tương thích AutoCAD 2018, 2019, 2020, 2021, 2022, 2023, 2024. Hỗ trợ AutoCAD LT với một số tính năng giới hạn.
Gặp vấn đề khi cài đặt thì làm thế nào?
Gửi ảnh chụp màn hình vào nhóm Zalo, được hỗ trợ trong 24 giờ. Gói Pro được hỗ trợ 1-1 qua Zalo riêng.
Sẵn sàng chưa?

Bắt đầu ngay — hoàn toàn miễn phí

Học 10 bài đầu miễn phí, tải LISP — không cần thẻ, không cam kết gì cả.

Đăng ký tài khoản miễn phí Tải LISP ngay

Đã có 500+ sinh viên Bách Khoa, HUTECH, HCMUTE tham gia