:root{--primary: #10b981;--primary-hover: #059669;--primary-light: #d1fae5;--accent: #f59e0b;--text-main: #0f172a;--text-sub: #475569;--bg-body: #ffffff;--bg-section: #f0fdf4;--footer-bg: #1e293b;--font-main: "Be Vietnam Pro", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}body{font-family:var(--font-main);color:var(--text-main);background:var(--bg-body);line-height:1.6}img{max-width:100%;height:auto;display:block}.container{max-width:1200px;margin:0 auto;padding:0 24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 30px;border-radius:50px;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;font-family:inherit;position:relative;overflow:hidden;letter-spacing:.3px}.btn:active{transform:scale(.96) translateY(0);box-shadow:none!important}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;box-shadow:0 6px 16px #10b98140,inset 0 1px 1px #fff3}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 28px #10b98159,inset 0 1px 1px #ffffff4d;filter:brightness(1.05)}.btn-outline{border:2.5px solid var(--primary);color:var(--primary);background:transparent;box-shadow:0 4px 12px #00000005;font-weight:800}.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-3px);box-shadow:0 12px 24px #10b98140}.header{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid #e2e8f0;transition:all .3s}.header .container{display:flex;align-items:center;justify-content:space-between;height:76px}.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--primary-hover);text-transform:uppercase;letter-spacing:-.5px;white-space:nowrap}.logo img{height:36px}.nav-links{display:flex;gap:24px}.nav-links a{font-weight:600;font-size:15px;color:var(--text-main);transition:color .3s;position:relative;padding-bottom:4px;white-space:nowrap}.nav-links a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2.5px;background:var(--primary);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translate(-50%)}.nav-links a:hover{color:var(--primary)}.nav-links a:hover:after{width:100%}.header-actions{display:flex;gap:12px;align-items:center}.btn-login-header{background:transparent;border:2px solid var(--primary);color:var(--primary);padding:10px 24px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;letter-spacing:.2px}.btn-login-header:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #10b98140}.btn-login-header svg{vertical-align:middle;margin-right:4px}.header.scrolled{box-shadow:0 4px 20px #00000014;border-bottom-color:transparent}#user-info-zone{position:relative}.user-avatar-badge{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:50px;background:#f0fdf4;border:1.5px solid #d1fae5;cursor:pointer;transition:all .3s;font-family:var(--font-main)}.user-avatar-badge:hover{background:#d1fae5;border-color:var(--primary);box-shadow:0 4px 12px #10b98126}.user-avatar-circle{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;text-transform:uppercase}.user-display-name{font-weight:700;font-size:13px;color:var(--text-main);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:16px;box-shadow:0 16px 48px #0000001f,0 0 0 1px #0000000a;min-width:260px;padding:8px;z-index:2000;display:none;animation:dropdownFadeIn .2s ease}.user-dropdown.show{display:block}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.user-dropdown-header{display:flex;align-items:center;gap:12px;padding:12px}.user-avatar-circle-lg{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;text-transform:uppercase}.user-dropdown-name{font-weight:800;font-size:14px;color:var(--text-main)}.user-dropdown-email{font-size:12px;color:var(--text-sub);margin-top:2px}.user-dropdown-divider{height:1px;background:#e2e8f0;margin:4px 8px}.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:transparent;font-family:var(--font-main);font-size:13px;font-weight:600;color:var(--text-main);cursor:pointer;border-radius:10px;transition:all .2s}.user-dropdown-item:hover{background:#f0fdf4;color:var(--primary-hover)}.user-dropdown-item svg{flex-shrink:0}.user-dropdown-logout{color:#dc2626}.user-dropdown-logout:hover{background:#fef2f2;color:#dc2626}.hero{padding:160px 0 80px;background:linear-gradient(180deg,#f0fdf4,#fff);overflow:hidden;position:relative}.hero-bg-drum{position:absolute;top:50%;left:0%;width:800px;height:800px;background:url(/assets/trong-dong-gold-BBI1Z_Fr.png) no-repeat center/cover;-webkit-mask-image:radial-gradient(circle,black 40%,transparent 65%);mask-image:radial-gradient(circle,black 40%,transparent 65%);opacity:.8;animation:spinDrum 60s linear infinite;z-index:0;pointer-events:none}@keyframes spinDrum{0%{transform:translateY(-50%) rotate(0) scale(1);filter:drop-shadow(0 0 0px rgba(245,158,11,0))}50%{transform:translateY(-50%) rotate(180deg) scale(1.05);filter:drop-shadow(0 0 20px rgba(245,158,11,.5))}to{transform:translateY(-50%) rotate(360deg) scale(1);filter:drop-shadow(0 0 0px rgba(245,158,11,0))}}.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}.hero-content{position:relative;z-index:1}.hero-content h1{font-size:52px;font-weight:900;line-height:1.25;margin-bottom:24px;color:var(--text-main);letter-spacing:-1px;text-shadow:0 0 10px rgba(255,255,255,1),0 0 20px rgba(255,255,255,.8),0 0 30px rgba(255,255,255,.8)}.hero-content h1 span{color:var(--primary);display:inline-block;position:relative}.hero-content p{font-size:18px;color:var(--text-sub);margin-bottom:32px;line-height:1.6;text-shadow:0 0 10px rgba(255,255,255,1),0 0 20px rgba(255,255,255,.8)}.hero-image{position:relative}.hero-image img.main-img{width:100%;border-radius:20px;box-shadow:0 20px 50px #0000001a;position:relative;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 25%);mask-image:linear-gradient(to right,transparent 0%,black 25%)}.hero-decor{position:absolute;animation:float 6s infinite alternate ease-in-out}.decor-1{top:-30px;right:-30px;width:64px}.decor-2{bottom:40px;left:-20px;width:48px;animation-delay:2s}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.intro{padding:100px 0}.intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.intro-content h2{font-size:40px;font-weight:800;line-height:1.25;color:var(--text-main);letter-spacing:-1px;margin-bottom:16px}.text-primary{color:var(--primary)}.text-scribble{position:relative;display:inline-block}.scribble-svg{position:absolute;bottom:-5px;left:0;width:100%;height:10px;z-index:-1;overflow:visible}.scribble-svg path{stroke-dasharray:120;stroke-dashoffset:120}.aos-animate .scribble-svg path{animation:drawScribble 1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.8s}@keyframes drawScribble{to{stroke-dashoffset:0}}.video-box{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 40px #0000001a}.intro-features{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.feature-item{background:#fff;border:1px solid #f1f5f9;border-radius:16px;padding:20px;text-align:center;box-shadow:0 10px 20px #00000008;transition:all .35s cubic-bezier(.4,0,.2,1)}.feature-item:hover{transform:translateY(-5px);box-shadow:0 15px 30px #00000014;border-color:var(--primary-light)}.feature-item img{height:56px;margin:0 auto 16px}.feature-item h4{font-size:16px;font-weight:700;margin-bottom:8px}.app-promo{padding:80px 0}.app-box{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);border-radius:32px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;color:#fff;overflow:hidden;position:relative}.app-box h2{font-size:40px;font-weight:800;margin-bottom:20px}.app-box p{font-size:18px;margin-bottom:32px;opacity:.9}.app-links{display:flex;gap:16px}.app-links img{height:48px;cursor:pointer;transition:transform .3s;width:auto}.app-links img:hover{transform:scale(1.08)}.app-mockup{position:relative;transform:scale(1.2) translate(10%);transform-origin:center right}.benefits{padding:80px 0;background:var(--bg-section)}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-size:36px;font-weight:800;color:var(--text-main)}.benefits-inner{display:grid;grid-template-columns:300px 1fr;gap:40px}.benefits-tabs{display:flex;flex-direction:column;gap:12px}.b-tab{padding:16px 24px;border-radius:16px;background:#fff;font-weight:700;font-size:16px;color:var(--text-sub);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid #e2e8f0}.b-tab:hover{border-color:var(--primary);color:var(--primary);transform:translate(4px)}.b-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 10px 20px #10b98133;transform:translate(4px)}.benefits-content{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 20px 40px #0000000d;border:1px solid #e2e8f0;min-height:400px}.b-pane{display:none;padding:40px;grid-template-columns:1fr 1fr;gap:40px;align-items:center;animation:paneFadeIn .4s ease forwards}.b-pane.active{display:grid}@keyframes paneFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.b-pane-text h3{font-size:28px;font-weight:800;color:var(--text-main);margin-bottom:16px;line-height:1.3}.b-pane-text p{font-size:16px;color:var(--text-sub);margin-bottom:24px;line-height:1.6}.b-pane-text ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.b-pane-text li{display:flex;gap:12px;align-items:flex-start}.b-pane-text li svg{flex-shrink:0;color:var(--primary);margin-top:2px}.b-pane-text li span{font-size:15px;color:var(--text-main);line-height:1.5}.b-pane-text li strong{color:var(--primary-hover);font-weight:700}.b-pane-img img{width:100%;height:auto;border-radius:16px;box-shadow:0 10px 30px #00000014;object-fit:cover;aspect-ratio:4/3}@media (max-width: 992px){.benefits-inner{grid-template-columns:1fr}.b-pane{grid-template-columns:1fr;padding:30px}.b-pane-img{order:-1}}.curriculum{padding:80px 0}.curr-tabs{display:flex;justify-content:center;gap:16px;margin-bottom:40px}.c-tab{padding:12px 32px;border-radius:30px;font-weight:700;cursor:pointer;background:#f1f5f9;color:var(--text-sub);transition:all .3s cubic-bezier(.4,0,.2,1)}.c-tab:hover,.c-tab.active{background:var(--primary-light);color:var(--primary-hover)}.curr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.course-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid #e2e8f0;transition:all .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.course-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px #00000014;border-color:var(--primary-light)}.course-img{width:100%;height:220px;object-fit:cover;transition:transform .5s;display:block}.course-img-wrapper{overflow:hidden;border-bottom:1px solid #e2e8f0}.course-card:hover .course-img{transform:scale(1.05)}.course-info{padding:24px}.course-info h3{font-size:18px;font-weight:800;margin-bottom:12px}.course-info p{font-size:14px;color:var(--text-sub);margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.course-info a{transition:gap .3s}.course-info a:hover{gap:4px}.news{padding:80px 0;background:#f8fafc}.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.news-featured{border-radius:24px;overflow:hidden;position:relative;cursor:pointer}.news-featured img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.news-featured:hover img{transform:scale(1.05)}.news-featured-content{position:absolute;bottom:0;left:0;right:0;padding:40px 32px 32px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff}.news-featured-content h3{font-size:24px;font-weight:800;margin-bottom:8px}.news-list{display:flex;flex-direction:column;gap:20px}.news-item{display:flex;gap:20px;align-items:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:16px;padding:8px}.news-item:hover{transform:translate(10px);background:#10b9810a}.news-item img{width:140px;height:100px;border-radius:12px;object-fit:cover}.news-item h4{font-size:16px;font-weight:700;color:var(--text-main);margin-bottom:8px}.footer{background:#121613;color:#a1a1aa;padding:60px 0 30px;font-size:13px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px}.footer .f-col h4{color:#52525b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}.footer .f-links a{color:#e4e4e7;text-decoration:none;display:block;margin-bottom:12px;font-weight:500;transition:color .2s;padding-left:0}.footer .f-links a:hover{color:var(--primary);padding-left:8px}.footer-bottom{text-align:left;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);font-size:12px;color:#71717a}.f-social-icon{width:36px;height:36px;border:1px solid #3f3f46;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e4e4e7;text-decoration:none;transition:.3s;margin-bottom:20px}.f-social-icon:hover{background:#e4e4e7;color:#121613}.footer-address strong{color:#f4f4f5;font-size:14px;font-weight:700;display:block;margin-bottom:4px}.footer-address span{display:block;margin-bottom:16px}.f-contact p{color:#e4e4e7;font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}.floating-actions{position:fixed;bottom:30px;right:30px;display:flex;flex-direction:column;gap:12px;z-index:100}.float-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 4px 12px #0003;cursor:pointer;border:none;transition:transform .2s}.float-btn:hover{transform:scale(1.1)}.float-btn.phone,.float-btn.zalo{background:#22c55e}.float-btn.up{background:#f59e0b;opacity:0;pointer-events:none;transition:all .3s}.float-btn.up.visible{opacity:1;pointer-events:all}#scrollTopBtn{opacity:0;pointer-events:none;transition:all .3s}#scrollTopBtn.visible{opacity:1;pointer-events:auto}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:2000;opacity:0;transition:opacity .3s}.modal-overlay.show{display:flex;opacity:1}.login-card{background:#fff;width:100%;max-width:440px;padding:48px 40px;border-radius:24px;box-shadow:0 25px 50px #00000026;position:relative;transform:translateY(20px);transition:transform .3s}.modal-overlay.show .login-card{transform:translateY(0)}.close-modal{position:absolute;top:20px;right:20px;background:#f1f5f9;border:none;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--text-sub);transition:all .3s}.close-modal:hover{background:#e2e8f0;color:#dc2626}.login-header{text-align:center;margin-bottom:32px}.login-header h2{font-size:28px;font-weight:800;color:#0f172a;margin-bottom:8px}.form-group{margin-bottom:20px}.form-label{display:block;font-size:11px;font-weight:800;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.input-wrapper{position:relative}.form-control{width:100%;background:#f8fafc;border:2px solid #e2e8f0;padding:14px 16px;border-radius:12px;font-family:inherit;font-size:15px;transition:all .3s ease}.form-control:focus{outline:none;background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}#errorMessage{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:20px;border:1px solid #fee2e2}#errorMessage.hidden{display:none}.btn-login{width:100%;background:var(--primary);color:#fff;border:none;padding:16px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:10px;transition:all .3s ease}.btn-login:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 20px #10b9814d}@media (max-width: 992px){.hero-inner,.intro-inner,.app-box,.benefits-inner,.news-grid{grid-template-columns:1fr}.hero{padding:120px 0 60px}.curr-grid,.footer-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.hero-content h1{font-size:44px}.intro-content h2{font-size:36px}}@media (max-width: 768px){.curr-grid,.footer-grid{grid-template-columns:1fr}.app-box{padding:40px 20px}.hero-content h1{font-size:34px;line-height:1.3;margin-bottom:16px}.hero-content p{font-size:15px;margin-bottom:24px}.intro-content h2{font-size:28px;line-height:1.3}.section-header h2,.app-box h2{font-size:28px}.b-pane-text h3{font-size:24px}.hero{padding:100px 0 40px}.hero-inner{gap:30px}.intro-features{grid-template-columns:1fr;gap:16px}.app-links img{height:40px}.b-pane{padding:24px}.hero-bg-drum{width:400px;height:400px}.header .container{padding:0 16px;gap:8px}.logo span{display:none}.logo img{height:32px}.btn{padding:8px 16px;font-size:13px;gap:4px}.btn svg{width:14px;height:14px}.btn-login-header{padding:8px 16px;font-size:13px}.user-avatar-badge{padding:4px 10px 4px 4px;gap:6px}.user-display-name{max-width:75px;font-size:12px}.hero-content>div{display:flex;flex-direction:column;gap:12px!important}.hero-content>div>.btn{width:100%;justify-content:center}}