/* ==========================================================================
   anhngumb.com skin – layered over the Academia theme markup (no HTML changes).
   Brand: purple #915fa9 / deep #3a2247, accent yellow #ffbc33, Oswald + Roboto.
   Motion is opt-in (html.mb-js) and disabled for prefers-reduced-motion.
   ========================================================================== */
:root{--mb-p:#915fa9;--mb-p2:#7d4d95;--mb-p7:#663d7b;--mb-p9:#2a1736;--mb-p1:#f6f1f9;--mb-y:#ffbc33;--mb-y2:#e9a415;--mb-ink:#2b2b33;--mb-mut:#6b6b76;--mb-line:#ebe6f0;--mb-ease:cubic-bezier(.2,.8,.2,1);--mb-shadow:0 1px 2px rgba(42,23,54,.06),0 14px 34px -18px rgba(42,23,54,.35)}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--mb-y);color:var(--mb-p9)}

/* ---------- header (desktop) ---------- */
header#main-header-wrapper{position:sticky;top:0;z-index:999;transition:box-shadow .3s var(--mb-ease)}
header#main-header-wrapper .top-bar{background:linear-gradient(90deg,var(--mb-p9),var(--mb-p7) 60%,var(--mb-p))!important;max-height:44px;overflow:hidden;transition:max-height .35s var(--mb-ease),opacity .25s}
header#main-header-wrapper .top-bar,header#main-header-wrapper .top-bar a{color:#efe6f5!important;font-size:12px;letter-spacing:.6px}
html.mb-scrolled header#main-header-wrapper .top-bar{max-height:0;opacity:0}
header#main-header-wrapper .header-nav-wrapper{transition:background .3s,height .3s;background:rgba(255,255,255,.96)!important}
html.mb-scrolled header#main-header-wrapper{box-shadow:0 10px 30px -18px rgba(42,23,54,.45)}
html.mb-scrolled header#main-header-wrapper .header-nav-wrapper{background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
/* the theme's own sticky clone fights position:sticky – neutralise it */
header#main-header-wrapper .sticky-wrapper{height:auto!important}
header#main-header-wrapper .is-sticky .header-nav-wrapper,header#main-header-wrapper .header-nav-wrapper.sticky{position:relative!important;top:auto!important;width:auto!important}
header#main-header-wrapper .header-logo img{transition:transform .35s var(--mb-ease)}
html.mb-scrolled header#main-header-wrapper .header-logo img{transform:scale(.86);transform-origin:left center}
/* inner-page variant keeps its purple slant but gains depth */
header#main-header-wrapper .header-3,header#main-header-wrapper .header-3 .header-nav-right{background-color:var(--mb-p)}

/* menu items: Oswald, animated skewed underline */
#main-menu>li>a{font-family:Oswald,Roboto,sans-serif!important;font-size:15px!important;font-weight:500!important;letter-spacing:.8px!important;position:relative;transition:color .2s}
#main-menu>li>a:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:4px;background:var(--mb-y);transform:skewX(-20deg) scaleX(0);transform-origin:left;transition:transform .35s var(--mb-ease)}
#main-menu>li:hover>a:after,#main-menu>li.current-menu-item>a:after,#main-menu>li.current-menu-ancestor>a:after{transform:skewX(-20deg) scaleX(1)}
.header-1 #main-menu>li:hover>a,.header-1 #main-menu>li.current-menu-item>a{color:var(--mb-p)!important}
/* dropdowns */
#main-menu .sub-menu{border:0!important;border-radius:14px!important;overflow:hidden;box-shadow:0 22px 50px -20px rgba(42,23,54,.45)!important;padding:8px!important;border-top:3px solid var(--mb-y)!important}
#main-menu .sub-menu li a{border-radius:8px;transition:background .2s,color .2s,padding .2s!important}
#main-menu .sub-menu li a:hover{background:var(--mb-p1)!important;color:var(--mb-p)!important;padding-left:22px!important}
/* CTA "Đăng nhập" */
.my-account-button a{background:var(--mb-y)!important;color:var(--mb-p9)!important;border-radius:999px!important;padding:0 22px!important;line-height:40px!important;height:40px;display:inline-flex!important;align-items:center;font-family:Oswald,Roboto,sans-serif;font-weight:600;letter-spacing:.6px;box-shadow:0 8px 20px -10px rgba(233,164,21,.9);position:relative;overflow:hidden;transition:transform .25s var(--mb-ease),box-shadow .25s}
.my-account-button a:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--mb-ease)}
.my-account-button a:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(233,164,21,.95)}
.my-account-button a:hover:before{transform:translateX(120%)}
.search-button-wrapper a{border-radius:999px!important;transition:background .2s,transform .2s}
.search-button-wrapper a:hover{transform:rotate(-8deg)}

/* ---------- header (mobile) ---------- */
header#mobile-header-wrapper{position:sticky;top:0;z-index:999}
/* no backdrop-filter/transform here: they would become the containing block of the fixed menu drawer */
header#mobile-header-wrapper .header-container-wrapper{background:#fff!important;box-shadow:0 8px 24px -18px rgba(42,23,54,.5)}
#nav-menu-mobile{background:linear-gradient(170deg,var(--mb-p9),var(--mb-p7))!important}
#nav-menu-mobile .nav-menu-mobile>li{border-color:rgba(255,255,255,.08)!important}
#nav-menu-mobile .nav-menu-mobile>li>a{color:#fff!important;font-family:Oswald,Roboto,sans-serif!important;font-size:18px!important;letter-spacing:.6px;padding:14px 22px!important}
#nav-menu-mobile .nav-menu-mobile li a:hover,#nav-menu-mobile .current-menu-item>a{color:var(--mb-y)!important}
#nav-menu-mobile .sub-menu{background:rgba(255,255,255,.04)!important}
#nav-menu-mobile .sub-menu a{color:#e6d9ef!important}
#nav-menu-mobile .search-form-menu-mobile{padding:16px!important;background:transparent!important}
#nav-menu-mobile .search-form-menu-mobile input{border-radius:999px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important}
#nav-menu-mobile .search-form-menu-mobile input::placeholder{color:#d9c8e6}
.toggle-icon span,.toggle-icon:before,.toggle-icon:after{background:var(--mb-p9)!important;border-radius:2px}

/* ---------- hero / page banners ---------- */
/* legibility: purple veil from the left over every slide */
rs-slide rs-sbg-px:after,rs-slide rs-sbg-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,23,54,.78) 0%,rgba(42,23,54,.45) 38%,rgba(42,23,54,0) 70%);pointer-events:none}
rs-layer.academia-heading,rs-layer.academia-sub-heading{text-shadow:0 4px 24px rgba(0,0,0,.35)!important;color:#fff!important}
rs-layer.academia-sub-heading{color:var(--mb-y)!important;letter-spacing:3px!important}
rs-layer.academia-description,rs-layer.academia-sub-heading-bottom{background:rgba(42,23,54,.55)!important;color:#fff!important;border-left:4px solid var(--mb-y)!important;border-radius:0 12px 12px 0!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
rs-layer.rev-btn.academia-button-border,rs-layer.rev-btn.academia-button-bg{border-radius:999px!important;font-weight:700!important;letter-spacing:1px!important;transition:transform .25s var(--mb-ease),background .2s,color .2s!important}
rs-layer.rev-btn.academia-button-border{background:rgba(255,255,255,.08)!important;border:2px solid #fff!important;color:#fff!important}
rs-layer.rev-btn.academia-button-bg,rs-layer.rev-btn[id$="-layer-5"]{background:var(--mb-y)!important;border-color:var(--mb-y)!important;color:var(--mb-p9)!important}
rs-layer.rev-btn:hover{transform:translateY(-2px)!important;background:#fff!important;color:var(--mb-p9)!important;border-color:#fff!important}
rs-layer.tp-shape{background:transparent!important}
rs-module-wrap,rs-module{overflow:hidden}
rs-slide rs-sbg-wrap{animation:mb-kenburns 18s ease-out both}
@keyframes mb-kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.page-title-inner.pt-bottom{padding-top:clamp(150px,20vw,300px)!important}
.page-title-wrap{overflow:hidden}
.page-title-wrap .page-title-parallax{background-position:center 35%!important}
.page-title-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,23,54,.05),rgba(42,23,54,.45));pointer-events:none;z-index:0}
.page-title-wrap .container{position:relative;z-index:1}
.page-title-wrap .m-title h1{letter-spacing:2px;animation:mb-rise .8s var(--mb-ease) both .1s}
.breadcrumbs-wrap{animation:mb-rise .8s var(--mb-ease) both .25s}

/* ---------- typography & sections ---------- */
#wrapper-content h2{letter-spacing:1px}
#wrapper-content .wpb_text_column p,#wrapper-content .entry-content p{line-height:1.75}
a{transition:color .2s}
.bt,.btn,.button,input[type=submit],button[type=submit]{border-radius:999px!important;transition:transform .25s var(--mb-ease),box-shadow .25s,background .2s!important}
.bt:hover,.btn:hover,.button:hover,input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(42,23,54,.6)}

/* home bands: brand gradients instead of flat black / navy */
#wrapper #wrapper-content .vc_custom_1453450728036{background:linear-gradient(100deg,var(--mb-p9) 0%,var(--mb-p7) 55%,var(--mb-p) 100%)!important;position:relative;overflow:hidden}
.vc_custom_1453450728036:after{content:"";position:absolute;top:0;right:-60px;width:260px;height:100%;background:var(--mb-y);opacity:.9;transform:skewX(-20deg);pointer-events:none}
.vc_custom_1453450728036>*{position:relative;z-index:1}
#wrapper #wrapper-content .vc_custom_1453947936824{background-color:var(--mb-p9)!important;background-image:radial-gradient(800px 300px at 80% 0,rgba(145,95,169,.45),transparent 70%)!important}

#wrapper .overlay-bg-vc{background-color:rgba(42,23,54,.9)!important}
/* the theme's teal "tertiary" buttons -> brand */
#wrapper .bt-tertiary,#wrapper .bt.bt-bg.bt-tertiary{background:var(--mb-y)!important;border-color:var(--mb-y)!important;color:var(--mb-p9)!important;font-weight:600}
#wrapper .bt-tertiary:hover{background:#fff!important;border-color:#fff!important}
#wrapper-content .sidebar .widget-title,#wrapper-content .widget_search button{background-color:var(--mb-p)!important}
/* theme 'tertiary' teal backgrounds (shop toolbar, badges…) -> deep purple */
#wrapper .t-bg{background-color:var(--mb-p9)!important}
#wrapper .catalog-filter-inner{border-radius:12px}

/* ---------- cards: courses, posts, teachers, events ---------- */
.product-item-wrap .product-item-inner,.post-item,.blog-wrap article,.ourteacher-item,.teacher-item,.tribe-events-calendar-list__event,.tribe-common-g-row{border-radius:16px!important;overflow:hidden;background:#fff!important;box-shadow:var(--mb-shadow);transition:transform .4s var(--mb-ease),box-shadow .4s var(--mb-ease)}
.product-item-wrap .product-item-inner:hover,.post-item:hover,.blog-wrap article:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(42,23,54,.06),0 26px 50px -24px rgba(42,23,54,.5)}
.product-thumb img,.post-item img,.entry-thumbnail img,.ourteacher-item img{transition:transform .8s var(--mb-ease)!important}
.product-item-inner:hover .product-thumb img,.post-item:hover img,article:hover .entry-thumbnail img,.ourteacher-item:hover img{transform:scale(1.06)}
.product-thumb,.entry-thumbnail{overflow:hidden}
.product-info,.post-item .post-content{padding:18px 20px 22px!important}
.product-name a,.post-item h3 a,.entry-title a{transition:color .2s}
.product-name a:hover,.post-item h3 a:hover,.entry-title a:hover{color:var(--mb-p)!important}

/* course tabs on home */
.vc_tta-tab>a,.course-category-tabs a,.nav-tabs>li>a{border-radius:999px!important;transition:background .2s,color .2s}

/* ---------- footer ---------- */
footer.main-footer-wrapper.dark{background:radial-gradient(1200px 400px at 10% 0,rgba(145,95,169,.35),transparent 60%),linear-gradient(180deg,#1d1026,#140a1b)!important;position:relative}
footer.main-footer-wrapper.dark:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--mb-y) 0 30%,var(--mb-p) 30%)}
footer.main-footer-wrapper .widget-title{letter-spacing:1.2px}
#wrapper .bottom-bar-wrapper,#wrapper .footer-above-wrapper,#wrapper .footer-top-wrapper,#wrapper .main-footer-wrapper>div:first-child{background:#140a1b!important}
footer.main-footer-wrapper .tagcloud a,footer.main-footer-wrapper .tag-cloud-link{border-radius:999px!important;border-color:rgba(255,255,255,.14)!important;transition:all .2s!important}
footer.main-footer-wrapper .tagcloud a:hover,footer.main-footer-wrapper .tag-cloud-link:hover{background:var(--mb-y)!important;border-color:var(--mb-y)!important;color:var(--mb-p9)!important}
.page404 .search-form button,.widget_search button{background:var(--mb-p)!important}
footer.main-footer-wrapper a:hover{color:var(--mb-y)!important}
.back-to-top,#back-to-top{border-radius:999px!important;background:var(--mb-p)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px -10px rgba(42,23,54,.7)}

/* ---------- scroll reveal ---------- */
@keyframes mb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.mb-js .mb-r{opacity:0;transform:translateY(28px);transition:opacity .8s var(--mb-ease),transform .8s var(--mb-ease);transition-delay:var(--mb-d,0s)}
html.mb-js .mb-r.mb-in{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media (max-width:991px){
  .page-title-inner.pt-bottom{padding-top:120px!important}
  #wrapper-content .vc_row{overflow-x:hidden}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.mb-js .mb-r{opacity:1;transform:none}
}