/* ─────────────────────────────────────────────────────────────────────────────
   Việt Connect · Studio v245
   Desktop product redesign, entirely gated behind html.vc-web-studio.
   The v238 fallback and mobile retain their own design and functionality.
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:1024px){
 html.vc-web-studio{
  --vc245-forest:#073f35;--vc245-jade:#075f4d;--vc245-accent:#0e8167;
  --vc245-mint:#46d8a7;--vc245-sage:#edf6ee;--vc245-ivory:#fbf9f4;
  --vc245-paper:#fff;--vc245-gold:#ecc477;--vc245-ink:#173d31;
  --vc245-muted:#6f8177;--vc245-stroke:#e4eae0;
  --vc245-shadow:0 5px 11px rgba(8,58,39,.03),0 20px 43px rgba(8,58,39,.065);
 }
 html.vc-web-studio body:not(.dark-mode){background:#fbf9f4!important}
 html.vc-web-studio.vc-side .book{max-width:none!important}
 html.vc-web-studio.vc-vd .vd-wrap{
  max-width:1540px!important;margin:0 auto!important;
  padding:34px clamp(26px,4vw,75px) 110px!important;
  box-sizing:border-box;
 }
 html.vc-web-studio.vc-vd #vd-starthere .vd-wrap{padding-top:48px!important}
 html.vc-web-studio.vc-side #vcTopNav button{letter-spacing:.006em}
 html.vc-web-studio.vc-side #vdSearch{height:46px!important}
 html.vc-web-studio.vc-side #vcSideBg{background:linear-gradient(165deg,#075947 0%,#074537 55%,#063329 100%)!important}
 html.vc-web-studio.vc-side #vdHdrTeach{border-radius:999px!important}
 html.vc-web-studio.vc-vd .vd-wrap :is(h1,h2,h3){text-wrap:balance}
 html.vc-web-studio.vc-vd .vd-wrap :is(button,a,[role=button]):focus-visible{
  outline:3px solid #dbaa53;outline-offset:3px
 }
 /* Unified page hero system across every designed learner, community, and teacher screen */
 html.vc-web-studio.vc-vd .vd-wrap>.vc245-page-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;
  position:relative;overflow:hidden;margin:0 0 29px;padding:36px 40px;
  border:1px solid #e5e9db;border-radius:27px;
  background:linear-gradient(106deg,#fff9eb,#fffcf7 56%,#e6f3e8);
  box-shadow:var(--vc245-shadow);
 }
 html.vc-web-studio.vc-vd .vc245-page-hero::after{
  content:"";position:absolute;right:7%;top:0;width:240px;height:100%;
  background:radial-gradient(ellipse at 50% 65%,rgba(61,156,110,.085),transparent 70%);
  pointer-events:none;
 }
 html.vc-web-studio.vc-vd .vc245-page-hero h1{
  font:650 clamp(31px,2.6vw,45px)/1.14 'Fraunces',Georgia,serif!important;
  color:#153d30!important;margin:7px 0 9px!important;letter-spacing:-.033em!important;
 }
 html.vc-web-studio.vc-vd .vc245-page-hero p{font-size:14px;color:#557063;line-height:1.7;max-width:720px}
 html.vc-web-studio.vc-vd .vc245-page-hero .vc245-kicker{
  font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#15785b
 }
 html.vc-web-studio.vc-vd .vc245-page-hero .vc245-symbol{
  width:98px;height:98px;border-radius:30px;background:rgba(255,255,255,.76);
  display:grid;place-items:center;font-size:55px;
  box-shadow:0 9px 27px rgba(20,87,56,.075);border:1px solid rgba(14,96,64,.08);
  z-index:1
 }
 html.vc-web-studio.vc-vd .vc245-page-hero .vc245-symbol:is(button){
  cursor:pointer
 }
 html.vc-web-studio.vc-vd .vc245-page-hero.theme-voices{background:linear-gradient(108deg,#eaf6f0,#fffdf7 58%,#fff4df)}
 html.vc-web-studio.vc-vd .vc245-page-hero.theme-decks{background:linear-gradient(110deg,#fff7e4,#fffdfa 55%,#e5f5ed)}
 html.vc-web-studio.vc-vd .vc245-page-hero.theme-rooms{background:linear-gradient(115deg,#e6f5eb,#fffdfa 65%,#fff4e1)}
 html.vc-web-studio.vc-vd .vc245-page-hero.theme-progress{background:linear-gradient(115deg,#fff8eb,#fff 55%,#e1f3e9)}
 html.vc-web-studio.vc-vd .vc245-page-hero.theme-tools{background:linear-gradient(115deg,#eaf5ed,#fffdf6 57%,#fff1de)}
 html.vc-web-studio.vc-vd :is(#vd-decks,#vd-progress,#vd-practice,#vd-teachers,#vd-voices,#vd-dictionary,#vd-reading,#vd-idioms,#vd-survival,#vd-games,#vd-situations,#vd-lessons,#vd-events,#vd-admin,#vd-tones)>.vd-wrap{
  display:flex;flex-direction:column;gap:22px;
 }
 html.vc-web-studio.vc-vd :is(#vd-decks,#vd-progress,#vd-practice,#vd-teachers,#vd-voices,#vd-dictionary,#vd-reading,#vd-idioms,#vd-survival,#vd-games,#vd-situations,#vd-lessons,#vd-events,#vd-admin,#vd-tones)>.vd-wrap>.vc245-page-hero{
  flex:none;
 }
 html.vc-web-studio.vc-vd .vd-wrap :is(section.bg-white,div.bg-white.rounded-3xl){
  border-radius:23px!important;border:1px solid var(--vc245-stroke)!important;
  box-shadow:var(--vc245-shadow)!important;
 }
 html.vc-web-studio.vc-vd .vd-wrap :is(.text-xs,.text-sm):not(button){line-height:1.55}
 html.vc-web-studio.vc-vd .vd-wrap .vd-legacy:has(> .bg-white){border-radius:24px}
 html.vc-web-studio.vc-vd .vd-wrap button.bg-teal-700,
 html.vc-web-studio.vc-vd .vd-wrap button.bg-teal-600{background:#09644e!important;color:white!important}
 html.vc-web-studio.vc-vd .vd-wrap button.bg-teal-700:hover,
 html.vc-web-studio.vc-vd .vd-wrap button.bg-teal-600:hover{background:#074b3c!important}
 /* Home is its own illustrated overview rather than a recycled list. */
 html.vc-web-studio.vc-vd .vc244-home-hero{min-height:365px;margin-top:0!important}
 html.vc-web-studio.vc-vd .vc244-home-hero h1{
  color:#fffdf2!important;text-shadow:0 2px 18px rgba(0,41,28,.3)!important;
  font-size:clamp(34px,3vw,50px)!important;
 }
 html.vc-web-studio.vc-vd .vc244-home-hero .vc244-hero-art{
  opacity:.27!important;mix-blend-mode:screen;right:-2%;bottom:-30px;width:760px;max-width:61%;
 }
 html.vc-web-studio.vc-vd .vc244-home-hero .vc244-home-session{
  position:relative!important;z-index:2;background:rgba(4,71,54,.9)!important;
  box-shadow:0 12px 28px rgba(0,39,28,.19)!important;
 }
 html.vc-web-studio.vc-vd .vc244-home-hero .vc244-home-session :is(p,span){
  color:#edf8ed
 }
 html.vc-web-studio.vc-vd .vc244-home-hero #vdHomeGo{
  background:#57e0b1!important;color:#093d2f!important;
  border:0!important;box-shadow:0 7px 18px rgba(0,35,23,.16)!important;
 }
 html.vc-web-studio.vc-vd .vc244-home-hero #vdHomeGo:hover{background:#8df0cb!important}
 html.vc-web-studio.vc-vd .vc244-journey{gap:17px;margin:25px 0 35px!important}
 html.vc-web-studio.vc-vd .vc244-journey button{
  min-height:116px!important;padding:24px!important;background:#fff!important;
  border-radius:23px!important;box-shadow:var(--vc245-shadow)!important;
 }
 html.vc-web-studio.vc-vd .vc244-journey button:hover{background:#eff8f2!important}
 html.vc-web-studio.vc-vd .vc244-journey button b{font-size:17px}
 html.vc-web-studio.vc-vd .vc244-home-content{gap:31px!important}
 html.vc-web-studio.vc-vd .vc244-home-content #vdHomePath>*{
  border:1px solid #e4e9dd!important;box-shadow:var(--vc245-shadow)!important
 }
 /* Reusable activity/lesson browsing, profile and catalog cards. */
 html.vc-web-studio.vc-vd :is(#vd-practice,#vd-teachers,#vd-decks,#vd-voices) .vd-wrap .grid>button,
 html.vc-web-studio.vc-vd :is(#vd-practice,#vd-teachers,#vd-decks,#vd-voices) .vd-wrap .grid>div.bg-white{
  min-height:115px;border-radius:23px!important;box-shadow:var(--vc245-shadow)!important
 }
 html.vc-web-studio.vc-vd :is(#vd-practice,#vd-teachers,#vd-decks,#vd-voices) .vd-wrap button:hover{
  border-color:#9cc5a8!important
 }
 html.vc-web-studio.vc-vd #vd-progress .vd-wrap .grid.grid-cols-2>div{
  background:linear-gradient(115deg,#fff,#f6faf6);border:1px solid #e2ebdf!important
 }
 html.vc-web-studio.vc-vd #vd-progress .vd-wrap .grid.grid-cols-2>div:nth-child(2){
  background:linear-gradient(115deg,#fff7e9,#fff)
 }
 html.vc-web-studio.vc-vd #vd-progress .vd-wrap .grid.grid-cols-2>div:nth-child(4){
  background:linear-gradient(115deg,#f0f8ef,#fff)
 }
 html.vc-web-studio.vc-vd #vd-decks .vd-wrap #vdDeckSearch{min-height:50px;border-radius:16px}
 html.vc-web-studio.vc-vd #vd-teach .tp243-workspace>.tp243-hero{overflow:hidden}
 html.vc-web-studio.vc-vd #teachPortal .tp243-hero .vc244-hero-art{opacity:.22}
 html.vc-web-studio.vc-vd #teachPortal .tpw-shortcuts{margin-top:18px;margin-bottom:25px}
 html.vc-web-studio.vc-vd #teachPortal .tpw-card{min-height:175px!important}
 html.vc-web-studio.vc-vd #teachPortal .tpw-card .tpw-title{font-size:23px!important}
 html.vc-web-studio.vc-vd #teachPortal .tp243-panel{
  padding:25px!important;border-radius:26px!important;
  box-shadow:var(--vc245-shadow)!important
 }
 /* A guided immersive lesson. This is NOT the old small phone panel scaled up. */
 html.vc-web-studio .vc-today.vc-today-studio{
  --paper:#faf8f2;--card:#fff;--cover:#0c7b60;--on-cover:#fff;
  background:#f8f8f2!important;color:#20493b!important;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-layout{
  display:grid;grid-template-columns:275px minmax(0,1fr);min-height:100vh
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar{
  display:flex;flex-direction:column;gap:0;position:sticky;top:0;
  height:100dvh;box-sizing:border-box;overflow:auto;
  padding:30px 22px 24px;background:linear-gradient(165deg,#075945,#063d32 63%,#073127);
  color:#fff;box-shadow:inset -1px 0 rgba(255,255,255,.07);
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-brand{
  display:flex;align-items:center;gap:12px;padding:0 7px 28px;
  border-bottom:1px solid rgba(255,255,255,.15)
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-brand-mark{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.08)
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-brand b{
  display:block;font:650 22px/1.1 'Fraunces',Georgia,serif
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-brand small{
  display:block;font-size:10px;letter-spacing:.055em;color:#bfddcc;margin-top:6px
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-kicker{
  color:#b2dfc7;font-size:10px;letter-spacing:.12em;font-weight:800;margin:33px 5px 11px
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar h2{
  margin:0 5px 10px;font:650 30px/1.16 'Fraunces',Georgia,serif;letter-spacing:-.02em;color:#fff8e4
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar>p{
  font-size:12px;line-height:1.65;margin:0 5px 28px;color:#c9e8d9
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-list{display:flex;flex-direction:column;gap:7px}
 html.vc-web-studio .vc-today-studio .vc-td-studio-list button{
  display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid transparent;background:transparent;color:#deede3;
  padding:12px 11px;border-radius:15px;font:inherit;cursor:pointer
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-list button:hover{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.14)
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-list button.current{
  color:#fff;background:rgba(251,246,230,.15);border-color:rgba(250,221,159,.21);
  box-shadow:inset 3px 0 #f1c46c
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-list button.completed .vc-td-studio-step-icon{
  background:#e3f4e5;color:#0d684d
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-step-icon{
  display:grid;place-items:center;flex:none;width:37px;height:37px;
  background:rgba(255,255,255,.1);border-radius:12px;font-size:19px
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-list b{display:block;font-size:13px;font-weight:750}
 html.vc-web-studio .vc-today-studio .vc-td-studio-list small{
  display:block;font-size:10px;margin-top:3px;opacity:.7
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar-bottom{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding:20px 5px 0;
  border-top:1px solid rgba(255,255,255,.13);font-size:11px;line-height:1.5;color:#b8d7c4
 }
 html.vc-web-studio .vc-today-studio .vc-td-wrap{
  zoom:1!important;max-width:1120px!important;width:100%!important;
  box-sizing:border-box;margin:0 auto;padding:0 clamp(24px,4.5vw,76px) 60px!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-head{
  padding:24px 0 18px!important;background:#f8f8f2!important;
  gap:14px;border-bottom:1px solid #e7eae1;z-index:11
 }
 html.vc-web-studio .vc-today-studio .vc-td-head>b{
  font:650 21px/1.25 'Fraunces',Georgia,serif;color:#164c3d
 }
 html.vc-web-studio .vc-today-studio .vc-td-head>b small{
  font:650 11px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;
  color:#698071;opacity:1!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-x,
 html.vc-web-studio .vc-today-studio .vc-td-help{
  border:1px solid #dfebe0;border-radius:14px!important;
  background:white!important;color:#205846!important;box-shadow:0 3px 11px rgba(30,91,61,.065)
 }
 html.vc-web-studio .vc-today-studio .vc-td-bar{
  margin:21px 0 10px!important;gap:11px
 }
 html.vc-web-studio .vc-today-studio .vc-td-bar button{height:26px}
 html.vc-web-studio .vc-today-studio .vc-td-bar button::before{
  height:8px;background:#e0eae0;border-radius:999px
 }
 html.vc-web-studio .vc-today-studio .vc-td-bar button.done::before{
  background:linear-gradient(90deg,#12856a,#4bc9a0)
 }
 html.vc-web-studio .vc-today-studio .vc-td-bar button.cur::before{
  background:#0d8469;box-shadow:0 0 0 3px rgba(18,143,100,.17)
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-context{
  display:flex;align-items:center;justify-content:space-between;
  margin:19px 0 21px;gap:8px;color:#779087;font-size:11px;font-weight:700
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-context-pill{
  padding:9px 13px;background:#eaf4eb;border:1px solid #d9e9dc;
  color:#176a51;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.065em
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-body{
  min-height:465px;padding:0 0 10px;display:flex;align-items:flex-start;justify-content:center
 }
 html.vc-web-studio .vc-today-studio .vc-td-step{
  width:100%;max-width:850px;min-height:460px;box-sizing:border-box;
  background:#fff;border:1px solid #e6eae0;border-radius:27px;
  padding:34px clamp(26px,5vw,66px) 31px;
  box-shadow:0 6px 15px rgba(13,69,43,.035),0 24px 60px rgba(13,69,43,.055)
 }
 html.vc-web-studio .vc-today-studio .vc-td-stephead{
  padding-bottom:19px;border-bottom:1px solid #eff1e9
 }
 html.vc-web-studio .vc-today-studio .vc-td-stephead h3{
  font:650 28px/1.22 'Fraunces',Georgia,serif!important;color:#174b38
 }
 html.vc-web-studio .vc-today-studio .vc-td-sub{
  color:#718278;opacity:1!important;font-size:13px;line-height:1.6;margin-top:15px
 }
 html.vc-web-studio .vc-today-studio .vc-td-big{
  margin:35px auto 12px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px
 }
 html.vc-web-studio .vc-today-studio .vc-td-word{
  font:750 clamp(51px,5vw,80px)/1.15 'Plus Jakarta Sans',system-ui,sans-serif!important;
  color:#0b4c39;letter-spacing:-.045em
 }
 html.vc-web-studio .vc-today-studio .vc-td-mean{
  color:#718378;font-size:21px;opacity:1!important;margin:0
 }
 html.vc-web-studio .vc-today-studio .vc-td-say{
  gap:25px;margin:21px 0 25px
 }
 html.vc-web-studio .vc-today-studio .vc-td-say .speak-btn{
  width:63px;height:63px;min-width:63px;min-height:63px;
  border:1px solid #d7e9dc!important;background:#edf6ee!important;
  color:#0e644d!important;border-radius:19px!important;font-size:26px;
  box-shadow:0 5px 15px rgba(16,101,68,.08)
 }
 html.vc-web-studio .vc-today-studio .vc-td-say .speak-btn:hover{
  background:#d8eee0!important;border-color:#8cc1a2!important;transform:translateY(-1px)
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions{
  justify-content:center;gap:13px;margin-top:16px
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions>button{
  min-height:56px;min-width:140px;padding:13px 24px;border-radius:15px!important;
  border:1px solid #dce6dc!important;background:white!important;
  color:#174b3b!important;box-shadow:none!important;max-width:none!important;
  font-size:14px;font-weight:780
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions>button.primary{
  background:linear-gradient(90deg,#086b50,#0e8b69)!important;
  color:#fff!important;border-color:#076349!important;
  box-shadow:0 9px 21px rgba(8,111,76,.2)!important;
  flex:0 1 485px;max-width:485px!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions>button.primary:hover{
  background:linear-gradient(90deg,#07533f,#0a785a)!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions>button:focus-visible,
 html.vc-web-studio .vc-today-studio .vc-td-say button:focus-visible,
 html.vc-web-studio .vc-today-studio .vc-td-studio-list button:focus-visible{
  outline:3px solid #eac26c!important;outline-offset:2px
 }
 html.vc-web-studio .vc-today-studio .vc-td-actions>button:disabled{
  opacity:.43
 }
 html.vc-web-studio .vc-today-studio .vc-td-opt{
  border:1px solid #dfe8dc;border-radius:15px;background:#fafcf9;color:#274d3e;
  min-height:62px;padding:14px 20px;font-size:15px
 }
 html.vc-web-studio .vc-today-studio .vc-td-opt:hover:not(:disabled){
  background:#eaf5ed;border-color:#a7cbb6
 }
 html.vc-web-studio .vc-today-studio .vc-td-opt.right{
  background:#e4f5e8!important;border-color:#31a179!important;color:#09573f!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-opt.wrong{
  background:#fff0ed!important;border-color:#d78c7a!important;color:#a44235!important
 }
 html.vc-web-studio .vc-today-studio .vc-td-opts{grid-template-columns:1fr 1fr;gap:13px}
 html.vc-web-studio .vc-today-studio .vc-td-opts .vc-td-optrow{
  grid-column:auto
 }
 html.vc-web-studio .vc-today-studio .vc-td-foot{
  border-top:1px solid #ecf0e8;margin-top:23px;padding-top:16px
 }
 html.vc-web-studio .vc-today-studio .vc-td-foot button{
  color:#657e6f;opacity:1;text-decoration:none;padding:12px 18px;border-radius:999px
 }
 html.vc-web-studio .vc-today-studio .vc-td-foot button:hover{
  background:#f1f6ef;color:#16664c
 }
 html.vc-web-studio .vc-today-studio .vc-td-studio-footer{
  display:flex;justify-content:space-between;gap:14px;
  margin:25px auto 0;color:#889789;font-size:11px;max-width:850px
 }
 html.vc-web-studio .vc-today-studio .vc-td-scene{
  background:#edf5ee;border:1px solid #dee9dd;padding:13px 18px;border-radius:18px
 }
 html.vc-web-studio .vc-today-studio .vc-td-bubble{
  padding:20px;border-radius:21px 21px 21px 5px
 }
 html.vc-web-studio .vc-today-studio .vc-td-bubble .line{
  font-size:25px;color:#174a39
 }
 html.vc-web-studio .vc-today-studio .vc-td-done h2{
  font:650 35px/1.17 'Fraunces',Georgia,serif;color:#174a3a
 }
 html.vc-web-studio .vc-today-studio .vc-td-menu{
  background:#fff;border:1px solid #e4eae1;border-radius:20px;
  box-shadow:0 15px 42px rgba(9,59,43,.15)
 }
 html.vc-web-studio .vc-today-studio .vc-td-menu button{color:#214d3e}
 html.vc-web-studio .vc-today-studio .vc-td-offer{
  border-radius:15px;border:1px solid #e0eadc;background:#eef7ed;
  color:#245540;margin-bottom:16px
 }
}
@media(min-width:1024px) and (max-width:1280px){
 html.vc-web-studio .vc-today-studio .vc-td-studio-layout{grid-template-columns:220px minmax(0,1fr)}
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar{padding-inline:15px}
 html.vc-web-studio .vc-today-studio .vc-td-studio-sidebar h2{font-size:24px}
 html.vc-web-studio .vc-today-studio .vc-td-wrap{padding:0 24px 40px!important}
 html.vc-web-studio .vc-today-studio .vc-td-step{padding:30px!important}
}
@media(prefers-reduced-motion:reduce){
 html.vc-web-studio .vc-today-studio *,
 html.vc-web-studio.vc-vd .vd-wrap *{transition-duration:0s!important;animation-duration:0s!important}
}