:root{
  --cinema-bg:#05070c;
  --cinema-surface:#0b1018;
  --cinema-surface-2:#111925;
  --cinema-line:rgba(255,255,255,.12);
  --cinema-text:#f7f8fb;
  --cinema-muted:#aab4c5;
  --cinema-gold:#ffd400;
  --cinema-blue:#178bff;
  --cinema-shadow:0 20px 54px rgba(0,0,0,.46);
}

/* Public landing ------------------------------------------------------- */
html:has(body.cinematicLanding),
body.cinematicLanding{
  background:var(--cinema-bg)!important;
  color:var(--cinema-text);
}
html[data-aj-theme] body.cinematicLanding{
  background:var(--cinema-bg)!important;
  color:var(--cinema-text)!important;
}
body.cinematicLanding .ajThemeChooser,
body.studioBody.cinematicMode .ajThemeChooser,
body.cinematicStudy .ajThemeChooser{display:none!important;}
body.cinematicLanding .rpgScene{
  min-height:760px!important;
  height:min(860px,100svh)!important;
  background-image:
    linear-gradient(90deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.82) 38%,rgba(3,5,9,.22) 70%,rgba(3,5,9,.48) 100%),
    linear-gradient(0deg,var(--cinema-bg) 0%,transparent 32%),
    url('../assets/cinematic/dashboard-hero.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
}
body.cinematicLanding .experienceHero,
body.cinematicLanding .rpgVideoCard,
body.cinematicLanding .rpgHookBg,
body.cinematicLanding .rpgTrailer,
body.cinematicLanding .ajChar,
body.cinematicLanding .ajQuoteBubble,
body.cinematicLanding .heroTagline,
body.cinematicLanding .aaDialogBar,
body.cinematicLanding .aaObjFlash{display:none!important;}
body.cinematicLanding .rpgTopBar{
  position:absolute!important;
  inset:0 0 auto!important;
  height:76px!important;
  padding:0 clamp(20px,4vw,64px)!important;
  background:linear-gradient(180deg,rgba(3,5,9,.94),rgba(3,5,9,.24))!important;
  border:0!important;
  backdrop-filter:blur(8px);
  z-index:20!important;
}
body.cinematicLanding .rpgBrand .mark{
  border:1px solid rgba(255,212,0,.72)!important;
  background:#0b1018!important;
  color:var(--cinema-gold)!important;
  box-shadow:none!important;
}
body.cinematicLanding .rpgBrand strong,
body.cinematicLanding .rpgBrand small{color:#fff!important;}
body.cinematicLanding .rpgEnterBtn{
  min-height:44px!important;
  border:0!important;
  border-radius:6px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  box-shadow:0 10px 26px rgba(255,212,0,.18)!important;
}
body.cinematicLanding .aaMuteBtn{
  border-color:var(--cinema-line)!important;
  background:rgba(8,12,19,.78)!important;
  color:#fff!important;
}
body.cinematicLanding .rpgHeroCopy{
  display:block!important;
  position:absolute!important;
  left:clamp(22px,6vw,92px)!important;
  top:50%!important;
  bottom:auto!important;
  width:min(620px,52vw)!important;
  max-width:none!important;
  padding:0!important;
  transform:translateY(-38%)!important;
  z-index:10!important;
  color:#fff!important;
  text-align:left!important;
}
body.cinematicLanding .rpgHeroCopy::before{
  content:'AJ.BANK ORIGINAL LEARNING';
  display:block;
  margin-bottom:14px;
  color:var(--cinema-gold);
  font:800 12px/1.2 'Prompt',sans-serif;
  letter-spacing:.18em;
}
body.cinematicLanding .rpgHeroCopy h1{
  max-width:580px!important;
  margin:0 0 16px!important;
  color:#fff!important;
  font:800 clamp(38px,5.2vw,72px)/1.02 'Prompt',sans-serif!important;
  letter-spacing:-.04em!important;
  text-shadow:0 14px 38px rgba(0,0,0,.58)!important;
}
body.cinematicLanding .rpgHeroCopy p{
  max-width:560px!important;
  margin:0 0 26px!important;
  color:#d5dbe6!important;
  font:500 clamp(15px,1.6vw,19px)/1.75 'Sarabun',sans-serif!important;
}
body.cinematicLanding .rpgHeroActions{display:flex!important;gap:10px!important;}
body.cinematicLanding .rpgHeroActions button{
  min-height:48px!important;
  padding:0 22px!important;
  border-radius:6px!important;
  font:800 14px 'Prompt',sans-serif!important;
}
body.cinematicLanding .rpgPrimaryChoice{
  border:0!important;background:#fff!important;color:#05070c!important;
}
body.cinematicLanding .rpgGhostChoice{
  border:1px solid rgba(255,255,255,.36)!important;background:rgba(8,12,19,.68)!important;color:#fff!important;
}
body.cinematicLanding .landingLive,
body.cinematicLanding .landingPromos{
  background:var(--cinema-bg)!important;
  color:var(--cinema-text)!important;
}
body.cinematicLanding .landingPromos{padding:54px 0 90px!important;}
body.cinematicLanding:has(.experienceLanding) .landingPromos{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.cinematicLanding .lpInner{width:min(1320px,calc(100% - 40px))!important;}
body.cinematicLanding .lpIntro h2,
body.cinematicLanding .lpRowHead b,
body.cinematicLanding .lpAboutInfo h3,
body.cinematicLanding .lpUspCard b{color:#fff!important;}
body.cinematicLanding .lpIntro p,
body.cinematicLanding .lpUspCard p,
body.cinematicLanding .lpAboutLead,
body.cinematicLanding .lpAboutCols li{color:var(--cinema-muted)!important;}
body.cinematicLanding .lpPartners,
body.cinematicLanding .lpUspCard,
body.cinematicLanding .lpAbout{
  border:1px solid var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  box-shadow:var(--cinema-shadow)!important;
}
body.cinematicLanding .lpPartnerInfo b,
body.cinematicLanding .lpAboutCols h4{color:#fff!important;}
body.cinematicLanding .lpPartnerInfo small,
body.cinematicLanding .lpPartnersLabel{color:var(--cinema-muted)!important;}
body.cinematicLanding .lpPartnerMark{border:1px solid rgba(255,212,0,.45)!important;}
body.cinematicLanding .lpUspIc{
  border:1px solid rgba(255,212,0,.34)!important;
  background:#111925!important;
  box-shadow:none!important;
}
body.cinematicLanding .lpAboutTag,
body.cinematicLanding .lpAboutCta{
  border:0!important;background:var(--cinema-gold)!important;color:#05070c!important;box-shadow:none!important;
}
body.cinematicLanding .lpAboutArt{
  background-image:linear-gradient(0deg,rgba(5,7,12,.98),rgba(5,7,12,.18)),url('../assets/cinematic/workplace-english.jpg')!important;
  background-size:cover!important;background-position:center top!important;
}
body.cinematicLanding .lpAboutArt img{display:none!important;}
body.cinematicLanding .lpRow{margin-top:42px!important;}
body.cinematicLanding .lpRowHead{margin-bottom:14px!important;}
body.cinematicLanding .lpRowHead b{font:800 clamp(19px,2vw,26px) 'Prompt',sans-serif!important;}
body.cinematicLanding .lpTrack{
  gap:10px!important;
  padding:8px 3px 30px!important;
  scrollbar-width:none!important;
}
body.cinematicLanding .lpTrack::-webkit-scrollbar{display:none!important;}
body.cinematicLanding .lpArrow{
  width:46px!important;height:74px!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:6px!important;
  background:rgba(4,7,12,.84)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body.cinematicLanding:has(.experienceLanding) .lpPoster{
  flex:0 0 190px!important;
  width:190px!important;
  height:285px!important;
  aspect-ratio:2/3!important;
  border:0!important;
  border-radius:6px!important;
  background:var(--poster-image) center top/cover no-repeat #0b1018!important;
  box-shadow:0 10px 28px rgba(0,0,0,.48)!important;
  transform-origin:center!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
html body.cinematicLanding:has(.experienceLanding) .lpPoster::before{display:none!important;}
html body.cinematicLanding:has(.experienceLanding) .lpPoster:hover,
html body.cinematicLanding:has(.experienceLanding) .lpPoster:focus-visible{
  z-index:4!important;
  transform:translateY(-8px) scale(1.04)!important;
  outline:2px solid var(--cinema-gold)!important;
  outline-offset:2px!important;
  box-shadow:0 26px 58px rgba(0,0,0,.72)!important;
}
body.cinematicLanding .lpPosterGrad{
  background:linear-gradient(180deg,transparent 48%,rgba(3,5,9,.16) 62%,rgba(3,5,9,.96) 100%)!important;
}
body.cinematicLanding .lpPoster:not(.lpEbook) .lpPosterTitle{display:none!important;}
body.cinematicLanding .lpPosterTitle{
  left:12px!important;right:12px!important;bottom:12px!important;
  color:#fff!important;font:800 13px/1.2 'Prompt',sans-serif!important;
  text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
}
body.cinematicLanding .lpPosterTitle small{color:#c6cfde!important;font-size:9.5px!important;}
body.cinematicLanding .lpPosterBadge,
body.cinematicLanding .lpPosterBadge.gold,
body.cinematicLanding .lpPosterPrice{
  top:10px!important;
  border:0!important;
  border-radius:3px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  box-shadow:0 4px 14px rgba(0,0,0,.38)!important;
  font:800 10px 'Prompt',sans-serif!important;
}
body.cinematicLanding .lpEbookIcon{display:none!important;}
body.cinematicLanding .lpBanner{
  border:1px solid var(--cinema-line)!important;
  border-radius:8px!important;
  background-color:#0b1018!important;
  background-image:linear-gradient(90deg,rgba(3,5,9,.96),rgba(3,5,9,.44)),url('../assets/cinematic/all-access-library.jpg')!important;
  background-size:cover!important;
  background-position:center 58%!important;
  box-shadow:0 12px 32px rgba(0,0,0,.38)!important;
}
body.cinematicLanding .lpBanner:nth-child(2){background-image:linear-gradient(90deg,rgba(3,5,9,.96),rgba(3,5,9,.38)),url('../assets/cinematic/ai-at-work.jpg')!important;}
body.cinematicLanding .lpBanner:nth-child(3){background-image:linear-gradient(90deg,rgba(3,5,9,.96),rgba(3,5,9,.38)),url('../assets/cinematic/dashboard-hero.jpg')!important;}
body.cinematicLanding .lpBannerTag{border-radius:3px!important;background:var(--cinema-gold)!important;color:#05070c!important;}

/* Authenticated dashboard -------------------------------------------- */
body.studioBody.cinematicMode{
  --ink:var(--cinema-text);
  --cream:var(--cinema-surface);
  --line:var(--cinema-line);
  min-height:100vh;
  background:var(--cinema-bg)!important;
  color:var(--cinema-text)!important;
}
body.studioBody.cinematicMode .stTop{
  border-bottom:1px solid var(--cinema-line)!important;
  background:rgba(5,7,12,.96)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px);
}
body.studioBody.cinematicMode .stBrandText strong,
body.studioBody.cinematicMode .stTopNav a,
body.studioBody.cinematicMode .stProfile{color:#fff!important;}
body.studioBody.cinematicMode .stBrandText small{color:var(--cinema-muted)!important;}
body.studioBody.cinematicMode .stTopNav{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.studioBody.cinematicMode .stTopNav a{border-radius:0!important;background:transparent!important;}
body.studioBody.cinematicMode .stTopNav a.active{color:var(--cinema-gold)!important;border-color:var(--cinema-gold)!important;background:transparent!important;}
body.studioBody.cinematicMode .stIconBtn,
body.studioBody.cinematicMode .stProfile,
body.studioBody.cinematicMode .stAdminBtn{border-color:var(--cinema-line)!important;background:#0b1018!important;color:#fff!important;}
body.studioBody.cinematicMode .stShell{background:var(--cinema-bg)!important;}
body.studioBody.cinematicMode .stSidebar{
  border-right:1px solid var(--cinema-line)!important;
  background:#080b11!important;
  color:#fff!important;
}
body.studioBody.cinematicMode .stSideHead{
  border:1px solid var(--cinema-line)!important;
  background:#0b1018!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.studioBody.cinematicMode .stCourseNav{border-color:var(--cinema-line)!important;background:transparent!important;}
body.studioBody.cinematicMode .stSideFoot{border-color:var(--cinema-line)!important;}
body.studioBody.cinematicMode .stSideHead small,
body.studioBody.cinematicMode .stNavLabel{color:var(--cinema-muted)!important;}
body.studioBody.cinematicMode .stResume{border-radius:6px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.studioBody.cinematicMode .stNavItem{border-color:transparent!important;background:transparent!important;color:#c7cfdb!important;}
body.studioBody.cinematicMode .stNavItem:hover,
body.studioBody.cinematicMode .stNavItem.active{border-color:var(--cinema-line)!important;background:#111925!important;color:#fff!important;}
body.studioBody.cinematicMode .stSideFoot button{color:var(--cinema-muted)!important;}
body.studioBody.cinematicMode .stMain{background:var(--cinema-bg)!important;}
body.studioBody.cinematicMode .stHero{
  grid-template-columns:minmax(0,1fr)!important;
  min-height:390px!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:10px!important;
  background:#080b11!important;
  box-shadow:var(--cinema-shadow)!important;
}
body.studioBody.cinematicMode .stHeroScene{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
}
body.studioBody.cinematicMode .stHeroSceneImg{
  inset:0!important;right:auto!important;top:auto!important;
  width:100%!important;height:100%!important;
  transform:none!important;object-fit:cover!important;object-position:center!important;
  opacity:1!important;filter:saturate(.92) contrast(1.06)!important;
}
body.studioBody.cinematicMode .stHeroSceneTint{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.82) 42%,rgba(3,5,9,.18) 76%),linear-gradient(0deg,rgba(3,5,9,.76),transparent 46%)!important;
}
body.studioBody.cinematicMode .stHeroCopy{
  grid-column:1/-1!important;
  width:auto!important;
  max-width:620px!important;
  padding:64px clamp(28px,5vw,72px)!important;
}
body.studioBody.cinematicMode .stHeroPill{border:0!important;border-radius:3px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.studioBody.cinematicMode .stHeroCopy h1{
  color:#fff!important;
  font-size:clamp(32px,4.5vw,58px)!important;
  letter-spacing:-.035em!important;
  text-shadow:0 3px 22px rgba(0,0,0,.7)!important;
}
body.studioBody.cinematicMode .stHeroSub{color:#cbd3df!important;font-size:16px!important;}
body.studioBody.cinematicMode .stEnter{border-radius:5px!important;background:#fff!important;color:#05070c!important;}
body.studioBody.cinematicMode .stHeroChar{display:none!important;}
body.studioBody.cinematicMode .stLiveSpotlight{
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  gap:14px!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:10px!important;
  background:#0b1018!important;
  color:#fff!important;
  box-shadow:var(--cinema-shadow)!important;
}
body.studioBody.cinematicMode .stLiveMedia{border-radius:6px!important;}
body.studioBody.cinematicMode .stLiveCopy h2{color:#fff!important;}
body.studioBody.cinematicMode .stLiveCopy p{color:var(--cinema-muted)!important;}
body.studioBody.cinematicMode .stLiveCopy small{color:var(--cinema-gold)!important;}
body.studioBody.cinematicMode .stLiveCta{
  width:100%!important;
  border-radius:5px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
}
body.studioBody.cinematicMode .stPartners,
body.studioBody.cinematicMode .stCard,
body.studioBody.cinematicMode .stStat,
body.studioBody.cinematicMode .stProfileMatch,
body.studioBody.cinematicMode .stPromoIntro{
  border:1px solid var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.studioBody.cinematicMode .stPartnerInfo b,
body.studioBody.cinematicMode .stCardHead b,
body.studioBody.cinematicMode .stNextInfo h4,
body.studioBody.cinematicMode .stPromoIntro h2,
body.studioBody.cinematicMode .stRowHead b,
body.studioBody.cinematicMode .stStat b{color:#fff!important;}
body.studioBody.cinematicMode .stPartnerInfo small,
body.studioBody.cinematicMode .stPromoIntro p,
body.studioBody.cinematicMode .stStat small,
body.studioBody.cinematicMode .stNextInfo p{color:var(--cinema-muted)!important;}
body.studioBody.cinematicMode .stRow{margin-top:24px!important;}
body.studioBody.cinematicMode .stRowHead a{color:var(--cinema-gold)!important;}
body.studioBody.cinematicMode .stRailTrack{
  gap:10px!important;
  padding:9px 2px 30px!important;
  scrollbar-width:none!important;
}
body.studioBody.cinematicMode .stRailTrack::-webkit-scrollbar{display:none!important;}
body.studioBody.cinematicMode .stRailArrow{
  width:44px!important;height:76px!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:6px!important;
  background:rgba(4,7,12,.88)!important;
  color:#fff!important;box-shadow:none!important;
}
body.studioBody.cinematicMode .stPoster{
  flex:0 0 190px!important;
  width:190px!important;
  height:285px!important;
  border:0!important;
  border-radius:6px!important;
  background-color:#0b1018!important;
  background-size:cover!important;
  background-position:center top!important;
  box-shadow:0 10px 28px rgba(0,0,0,.48)!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
body.studioBody.cinematicMode .stPoster:hover,
body.studioBody.cinematicMode .stPoster:focus-visible{
  z-index:4!important;
  transform:translateY(-8px) scale(1.04)!important;
  outline:2px solid var(--cinema-gold)!important;
  outline-offset:2px!important;
  box-shadow:0 26px 58px rgba(0,0,0,.72)!important;
}
body.studioBody.cinematicMode .stPosterGrad{background:linear-gradient(180deg,transparent 42%,rgba(3,5,9,.22) 61%,rgba(3,5,9,.98) 100%)!important;}
body.studioBody.cinematicMode .stPosterTitle{left:12px!important;right:12px!important;bottom:12px!important;font-size:12.5px!important;}
body.studioBody.cinematicMode .stPosterTitle small{color:#c4cddd!important;font-size:9.5px!important;}
body.studioBody.cinematicMode .stPosterLock,
body.studioBody.cinematicMode .stPosterBadge,
body.studioBody.cinematicMode .stPosterPrice,
body.studioBody.cinematicMode .stPosterFlag{
  border-radius:3px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  box-shadow:0 4px 14px rgba(0,0,0,.36)!important;
}
body.studioBody.cinematicMode .stPosterLock{width:auto!important;height:auto!important;padding:4px 7px!important;font-size:9px!important;}
body.studioBody.cinematicMode .stEbookIcon{display:none!important;}
body.studioBody.cinematicMode .stBanner{
  border:1px solid var(--cinema-line)!important;
  border-radius:8px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.34)!important;
}
body.studioBody.cinematicMode #modal,
body.studioBody.cinematicMode #drawer{
  border-color:var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
}

/* Course catalog, course detail, lesson and PDF reader ---------------- */
body.cinematicStudy{
  --ka-bg:var(--cinema-bg);
  --ka-surface:var(--cinema-surface);
  --ka-line:var(--cinema-line);
  --ka-ink:var(--cinema-text);
  --ka-ink-soft:var(--cinema-muted);
  --ka-primary:var(--cinema-gold);
  --ka-accent:var(--cinema-gold);
  --ka-on-accent:#05070c;
  min-height:100vh;
  background:var(--cinema-bg)!important;
  color:var(--cinema-text)!important;
}
body.cinematicStudy .kaTop{
  border-bottom:1px solid var(--cinema-line)!important;
  background:rgba(5,7,12,.96)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px);
}
body.cinematicStudy .kaMark{border-radius:5px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.cinematicStudy .kaBrand h1,
body.cinematicStudy .kaBackStudio{color:#fff!important;}
body.cinematicStudy .kaBrand small{color:var(--cinema-muted)!important;}
body.cinematicStudy .kaPlanPill{border-radius:3px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.cinematicStudy .kaPage{max-width:1360px!important;}
body.cinematicStudy .kaHero{
  position:relative!important;
  min-height:430px!important;
  overflow:hidden!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:10px!important;
  background-image:linear-gradient(90deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.80) 44%,rgba(3,5,9,.16) 78%),url('../assets/cinematic/dashboard-hero.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:var(--cinema-shadow)!important;
}
body.cinematicStudy .kaHeroCopy{position:relative!important;z-index:2!important;max-width:660px!important;}
body.cinematicStudy .kaHeroKicker{color:var(--cinema-gold)!important;letter-spacing:.14em!important;}
body.cinematicStudy .kaHeroCopy h2{color:#fff!important;font-size:clamp(31px,4.4vw,56px)!important;line-height:1.08!important;letter-spacing:-.035em!important;}
body.cinematicStudy .kaHeroCopy p{color:#cbd3df!important;}
body.cinematicStudy .kaHeroArt{display:none!important;}
body.cinematicStudy .kaHeroStat{border-color:var(--cinema-line)!important;background:rgba(11,16,24,.72)!important;}
body.cinematicStudy .kaHeroStat b{color:#fff!important;}
body.cinematicStudy .kaHeroStat span{color:var(--cinema-muted)!important;}
body.cinematicStudy .kaSectionHead h3,
body.cinematicStudy .kaCrumb span,
body.cinematicStudy .kaCrumb a{color:#fff!important;}
body.cinematicStudy .kaSectionHead p{color:var(--cinema-muted)!important;}
body.cinematicStudy .kaGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))!important;
  gap:18px 12px!important;
}
body.cinematicStudy .kaCard{
  overflow:hidden!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:7px!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
body.cinematicStudy .kaCard:hover,
body.cinematicStudy .kaCard:focus-within{
  z-index:2!important;
  transform:translateY(-7px)!important;
  border-color:rgba(255,212,0,.8)!important;
  box-shadow:0 26px 58px rgba(0,0,0,.68)!important;
}
body.cinematicStudy .kaCardTop{
  position:relative!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  padding:10px!important;
  border-radius:0!important;
  background-color:#0b1018!important;
  background-image:var(--poster-image)!important;
  background-size:cover!important;
  background-position:center top!important;
}
body.cinematicStudy .kaCardTop::after{
  content:'';
  position:absolute;inset:48% 0 0;
  background:linear-gradient(180deg,transparent,rgba(3,5,9,.92));
  pointer-events:none;
}
body.cinematicStudy .kaCardNum,
body.cinematicStudy .kaCardLock{
  position:relative!important;z-index:2!important;
  border:0!important;border-radius:3px!important;
  background:var(--cinema-gold)!important;color:#05070c!important;
  font-size:9px!important;font-weight:800!important;padding:4px 7px!important;
}
body.cinematicStudy .kaCardBody{padding:14px 13px 10px!important;}
body.cinematicStudy .kaCardBody h4{color:#fff!important;font-size:14px!important;line-height:1.3!important;}
body.cinematicStudy .kaCardDesc{color:var(--cinema-muted)!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.cinematicStudy .kaCardMeta,
body.cinematicStudy .kaProgressLabel{color:#98a5b8!important;}
body.cinematicStudy .kaChip,
body.cinematicStudy .kaMiniBadge{border-color:var(--cinema-line)!important;background:#111925!important;color:#dfe5ef!important;}
body.cinematicStudy .kaCardFoot{border-top:1px solid var(--cinema-line)!important;background:#080b11!important;padding:10px 12px 12px!important;}
body.cinematicStudy .kaBtn.primary,
body.cinematicStudy .kaBtn.secondary{border-color:var(--cinema-gold)!important;border-radius:5px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.cinematicStudy .kaBtn.ghost,
body.cinematicStudy .kaBtn.locked{border-color:var(--cinema-line)!important;border-radius:5px!important;background:#111925!important;color:#fff!important;}
body.cinematicStudy .kaUnlockGrid{gap:12px!important;}
body.cinematicStudy .kaPlanCard,
body.cinematicStudy .kaUnlockDone,
body.cinematicStudy .kaModule,
body.cinematicStudy .kaSideCard,
body.cinematicStudy .kaLessonMain,
body.cinematicStudy .kaPartners,
body.cinematicStudy .kaPartnerCard{
  border-color:var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.cinematicStudy .kaPlanCard p,
body.cinematicStudy .kaPlanCard small,
body.cinematicStudy .kaModule p,
body.cinematicStudy .kaPartnerInfo small{color:var(--cinema-muted)!important;}
body.cinematicStudy .kaPlanBadge{border-radius:3px!important;background:var(--cinema-gold)!important;color:#05070c!important;}
body.cinematicStudy .kaDocGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(174px,1fr))!important;
  gap:18px 12px!important;
}
body.cinematicStudy .kaDocCard{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:7px!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38)!important;
}
body.cinematicStudy .kaDocCover{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  background-color:#0b1018;
  background-image:var(--poster-image)!important;
  background-size:cover;
  background-position:center top;
}
body.cinematicStudy .kaDocFormat{
  position:absolute;right:9px;top:9px;
  border-radius:3px;background:var(--cinema-gold);color:#05070c;
  padding:4px 7px;font:800 9px 'Be Vietnam Pro',sans-serif;letter-spacing:.08em;
}
body.cinematicStudy .kaDocBody{padding:13px 12px 8px!important;}
body.cinematicStudy .kaDocBody h4{color:#fff!important;font-size:13.5px!important;line-height:1.3!important;}
body.cinematicStudy .kaDocBody p{color:var(--cinema-muted)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.cinematicStudy .kaDocBuy{align-items:stretch!important;padding:0 12px 12px!important;}
body.cinematicStudy .kaDocPrice{color:var(--cinema-gold)!important;font-size:13px!important;}
body.cinematicStudy .kaCourseHead{
  border:1px solid var(--cinema-line)!important;
  border-radius:10px!important;
  background:#080b11!important;
  color:#fff!important;
  box-shadow:var(--cinema-shadow)!important;
}
body.cinematicStudy .kaCourseHeadCopy h2{color:#fff!important;}
body.cinematicStudy .kaCourseHeadCopy p{color:var(--cinema-muted)!important;}
body.cinematicStudy .kaCourseMeta>div{border-color:var(--cinema-line)!important;background:#111925!important;}
body.cinematicStudy .kaCourseArt img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;filter:none!important;}
body.cinematicStudy .kaModal{
  border:1px solid var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
}
body.cinematicStudy .kaModalHead{border-color:var(--cinema-line)!important;background:#080b11!important;}
body.cinematicStudy .kaModalHead button{border-color:var(--cinema-line)!important;background:#111925!important;color:#fff!important;}

@media(max-width:900px){
  body.cinematicLanding .rpgHeroCopy{width:min(680px,80vw)!important;}
  body.studioBody.cinematicMode .stHero{min-height:350px!important;}
  body.cinematicStudy .kaHero{min-height:390px!important;}
}

@media(max-width:680px){
  body.cinematicLanding .rpgScene{height:690px!important;min-height:690px!important;background-position:68% center!important;}
  body.cinematicLanding .rpgTopBar{height:66px!important;padding:0 12px!important;}
  body.cinematicLanding .aaMuteBtn{display:none!important;}
  body.cinematicLanding .rpgEnterBtn{padding:0 13px!important;font-size:12px!important;}
  body.cinematicLanding .rpgHeroCopy{
    left:18px!important;right:18px!important;top:auto!important;bottom:58px!important;
    width:auto!important;transform:none!important;
  }
  body.cinematicLanding .rpgHeroCopy h1{font-size:38px!important;max-width:350px!important;}
  body.cinematicLanding .rpgHeroCopy p{font-size:14px!important;line-height:1.55!important;max-width:350px!important;}
  body.cinematicLanding .rpgHeroActions{flex-wrap:wrap!important;}
  body.cinematicLanding .rpgHeroActions button{flex:1 1 150px!important;}
  body.cinematicLanding .lpInner{width:calc(100% - 22px)!important;}
  body.cinematicLanding .lpPoster{flex-basis:152px!important;width:152px!important;height:228px!important;}
  body.cinematicLanding .lpArrow{display:none!important;}
  body.cinematicLanding .lpAbout{grid-template-columns:1fr!important;}
  body.cinematicLanding .lpAboutArt{min-height:320px!important;}
  body.studioBody.cinematicMode .stMain{padding:14px 10px 28px!important;}
  body.studioBody.cinematicMode .stHero{min-height:440px!important;}
  body.studioBody.cinematicMode .stHeroSceneImg{object-position:78% center!important;}
  body.studioBody.cinematicMode .stHeroSceneTint{background:linear-gradient(0deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.72) 58%,rgba(3,5,9,.16) 100%)!important;}
  body.studioBody.cinematicMode .stHeroCopy{align-self:end!important;max-width:none!important;padding:210px 22px 28px!important;}
  body.studioBody.cinematicMode .stHeroCopy h1{font-size:32px!important;}
  body.studioBody.cinematicMode .stPoster{flex-basis:152px!important;width:152px!important;height:228px!important;}
  body.studioBody.cinematicMode .stRailArrow{display:none!important;}
  body.cinematicStudy .kaPage{padding-inline:10px!important;}
  body.cinematicStudy .kaHero{min-height:520px!important;background-position:68% center!important;}
  body.cinematicStudy .kaHeroCopy{align-self:end!important;padding-top:250px!important;}
  body.cinematicStudy .kaHeroCopy h2{font-size:33px!important;}
  body.cinematicStudy .kaHeroStats{grid-template-columns:repeat(3,1fr)!important;gap:6px!important;}
  body.cinematicStudy .kaGrid,
  body.cinematicStudy .kaDocGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 8px!important;}
  body.cinematicStudy .kaCardBody{padding:11px 10px 8px!important;}
  body.cinematicStudy .kaCardDesc{display:none!important;}
  body.cinematicStudy .kaCardMeta{font-size:10px!important;}
  body.cinematicStudy .kaDocBody{padding:10px 9px 7px!important;}
  body.cinematicStudy .kaDocBuy{padding:0 9px 9px!important;}
}

/* Keep the cinematic catalog authoritative when a saved legacy theme is active. */
html[data-aj-theme] body.cinematicStudy{
  background:var(--cinema-bg)!important;
  color:var(--cinema-text)!important;
}
html[data-aj-theme] body.cinematicStudy .kaHero{
  background-color:#080b11!important;
  background-image:linear-gradient(90deg,rgba(3,5,9,.98) 0%,rgba(3,5,9,.80) 44%,rgba(3,5,9,.16) 78%),url('../assets/cinematic/dashboard-hero.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  color:#fff!important;
}
html[data-aj-theme] body.cinematicStudy .kaHeroStats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
html[data-aj-theme] body.cinematicStudy .kaBackStudio{
  border-color:var(--cinema-line)!important;
  background:#111925!important;
  color:#fff!important;
}
html[data-aj-theme] body.cinematicStudy .kaGrid>.kaCard{
  grid-column:auto!important;
  border-color:var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38)!important;
}
html[data-aj-theme] body.cinematicStudy .kaGrid>.kaCard .kaCardTop{
  min-height:0!important;
  background-color:#0b1018!important;
  background-image:var(--poster-image)!important;
  background-size:cover!important;
  background-position:center top!important;
}
html[data-aj-theme] body.cinematicStudy .kaGrid>.kaCard .kaCardBody{
  background:var(--cinema-surface)!important;
  color:#fff!important;
}
html[data-aj-theme] body.cinematicStudy .kaGrid>.kaCard .kaCardFoot{
  border-color:var(--cinema-line)!important;
  background:#080b11!important;
}
html[data-aj-theme] body.cinematicStudy .kaDocGrid>.kaDocCard{
  border-color:var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38)!important;
}
html[data-aj-theme] body.cinematicStudy .kaDocGrid>.kaDocCard .kaDocCover{
  background-color:#0b1018!important;
  background-image:var(--poster-image)!important;
  background-size:cover!important;
  background-position:center top!important;
}
html[data-aj-theme] body.cinematicStudy .kaCourseHead{
  grid-template-columns:minmax(0,1fr) minmax(300px,380px)!important;
  align-items:stretch!important;
  gap:28px!important;
  min-height:520px!important;
  padding:28px!important;
  border-color:var(--cinema-line)!important;
  background:#080b11!important;
  color:#fff!important;
}
html[data-aj-theme] body.cinematicStudy .kaCourseHeadCopy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  padding:24px!important;
}
html[data-aj-theme] body.cinematicStudy .kaCourseHeadCopy .kaChip{color:#dfe5ef!important;}
html[data-aj-theme] body.cinematicStudy .kaCourseMeta b{color:#fff!important;}
html[data-aj-theme] body.cinematicStudy .kaCourseMeta span{color:var(--cinema-muted)!important;}
html[data-aj-theme] body.cinematicStudy .kaCourseArt{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:464px!important;
  overflow:hidden!important;
  border-radius:7px!important;
  background:#0b1018!important;
}
html[data-aj-theme] body.cinematicStudy .kaCourseArt img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
}
html[data-aj-theme] body.cinematicStudy :is(.kaModule,.kaBlock,.kaSideCard,.kaLessonMain,.kaMaterial,.kaPlanCard,.kaUnlockDone,.kaPartners,.kaPreviewSummary,.kaLockNote){
  border-color:var(--cinema-line)!important;
  background:var(--cinema-surface)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html[data-aj-theme] body.cinematicStudy :is(.kaModule,.kaBlock,.kaSideCard,.kaLessonMain,.kaMaterial,.kaPlanCard,.kaUnlockDone,.kaPreviewSummary,.kaLockNote) p{
  color:var(--cinema-muted)!important;
}
@media(max-width:680px){
  html[data-aj-theme] body.cinematicStudy .kaCourseHead{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    padding:10px!important;
  }
  html[data-aj-theme] body.cinematicStudy .kaCourseArt{
    order:-1!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:2/3!important;
  }
  html[data-aj-theme] body.cinematicStudy .kaCourseHeadCopy{padding:20px 10px 18px!important;}
  html[data-aj-theme] body.cinematicStudy .kaCourseMeta{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  html[data-aj-theme] body.cinematicStudy .kaCourseMeta>div:nth-child(1){order:1!important;}
  html[data-aj-theme] body.cinematicStudy .kaCourseMeta>div:nth-child(3){order:2!important;}
  html[data-aj-theme] body.cinematicStudy .kaCourseMeta>div:nth-child(2){grid-column:1/-1!important;order:3!important;}
}

@media(prefers-reduced-motion:reduce){
  body.cinematicLanding .lpPoster,
  body.studioBody.cinematicMode .stPoster,
  body.cinematicStudy .kaCard{transition:none!important;}
}

/* Public landing continuity pass: one cinematic language from hero to catalog. */
body.cinematicLanding:has(.experienceLanding) .landingLive{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:38px clamp(14px,3vw,40px) 18px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--cinema-bg)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveInner{
  width:min(1320px,100%)!important;
  min-height:340px!important;
  grid-template-columns:minmax(320px,42%) minmax(0,1fr)!important;
  grid-template-rows:1fr auto!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid var(--cinema-line)!important;
  border-radius:8px!important;
  background:#090d14!important;
  box-shadow:0 28px 70px rgba(0,0,0,.52)!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveMedia{
  grid-row:1/3!important;
  min-height:340px!important;
  border:0!important;
  border-radius:0!important;
  background-color:#0b1018!important;
  background-image:
    linear-gradient(90deg,rgba(5,7,12,.02) 48%,#090d14 100%),
    linear-gradient(0deg,rgba(5,7,12,.76),transparent 48%),
    url('../assets/cinematic/variations/14-toeic-listening.jpg')!important;
  background-size:cover!important;
  background-position:center 24%!important;
  box-shadow:none!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveMedia::after{
  background:linear-gradient(0deg,rgba(5,7,12,.62),transparent 44%)!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveBadge{
  left:18px!important;
  bottom:18px!important;
  padding:7px 11px!important;
  border:0!important;
  border-radius:4px!important;
  background:#e50914!important;
  color:#fff!important;
  font:800 10px/1 'Prompt',sans-serif!important;
  letter-spacing:.13em!important;
  box-shadow:0 8px 20px rgba(0,0,0,.4)!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCopy{
  align-self:end!important;
  min-width:0!important;
  padding:42px clamp(26px,4vw,58px) 20px!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveKicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--cinema-gold)!important;
  font:800 10px/1.2 'Prompt',sans-serif!important;
  letter-spacing:.14em!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveKicker::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e50914;
  box-shadow:0 0 0 4px rgba(229,9,20,.16);
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCopy h2{
  max-width:660px!important;
  margin:12px 0 10px!important;
  color:#fff!important;
  font:800 clamp(28px,3.7vw,48px)/1.08 'Prompt','Sarabun',sans-serif!important;
  letter-spacing:-.035em!important;
  text-wrap:balance!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCopy p{
  max-width:680px!important;
  margin:0 0 10px!important;
  color:#cbd2df!important;
  font:500 14px/1.62 'Sarabun',sans-serif!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCopy small{
  color:#fff!important;
  font:700 12px/1.5 'Prompt','Sarabun',sans-serif!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveBrands{
  margin-top:9px!important;
  color:#7f899a!important;
  font:700 9.5px/1.4 'Prompt',sans-serif!important;
  letter-spacing:.06em!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveActions{
  grid-column:2!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 clamp(26px,4vw,58px) 36px!important;
}
body.cinematicLanding:has(.experienceLanding) :is(.landingLiveCta,.landingLiveAsset){
  width:auto!important;
  min-height:44px!important;
  padding:0 18px!important;
  border-radius:5px!important;
  font:800 12px/1.2 'Prompt','Sarabun',sans-serif!important;
  box-shadow:none!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCta{
  order:-1!important;
  border:0!important;
  background:#fff!important;
  color:#080b11!important;
}
body.cinematicLanding:has(.experienceLanding) .landingLiveCta:hover{background:#dedede!important;}
body.cinematicLanding:has(.experienceLanding) .landingLiveAsset{
  border:1px solid rgba(255,255,255,.3)!important;
  background:rgba(109,109,110,.46)!important;
  color:#fff!important;
}
body.cinematicLanding:has(.experienceLanding) .landingPromos{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:30px 0 96px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--cinema-bg)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.cinematicLanding:has(.experienceLanding) .lpInner{
  width:min(1320px,calc(100% - 40px))!important;
  max-width:none!important;
  padding:0!important;
}
body.cinematicLanding:has(.experienceLanding) .lpIntro{
  max-width:none!important;
  margin:0 0 24px!important;
  text-align:left!important;
}
body.cinematicLanding:has(.experienceLanding) .lpIntro::before{
  content:'AJ.BANK LEARNING CATALOG';
  display:block;
  margin-bottom:8px;
  color:var(--cinema-gold);
  font:800 10px/1.2 'Prompt',sans-serif;
  letter-spacing:.16em;
}
body.cinematicLanding:has(.experienceLanding) .lpIntro h2{
  margin:0 0 5px!important;
  color:#fff!important;
  font:800 clamp(27px,3.4vw,42px)/1.08 'Prompt','Sarabun',sans-serif!important;
  letter-spacing:-.025em!important;
}
body.cinematicLanding:has(.experienceLanding) .lpIntro p{
  margin:0!important;
  color:var(--cinema-muted)!important;
  font:500 14px/1.65 'Sarabun',sans-serif!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartners{
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
  margin:0 0 38px!important;
  padding:14px 0!important;
  border:solid var(--cinema-line)!important;
  border-width:1px 0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnersLabel{
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#707a89!important;
  font:800 9.5px/1.3 'Prompt',sans-serif!important;
  letter-spacing:.14em!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnerRow{
  justify-content:flex-start!important;
  gap:24px!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnerCard{
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnerMark,
body.cinematicLanding:has(.experienceLanding) :is(.lpPartnerMark.xp,.lpPartnerMark.ek){
  width:38px!important;
  height:38px!important;
  border:1px solid rgba(255,212,0,.5)!important;
  border-radius:4px!important;
  background:#111925!important;
  color:var(--cinema-gold)!important;
  box-shadow:none!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnerInfo b{
  color:#f2f4f8!important;
  font-size:13px!important;
}
body.cinematicLanding:has(.experienceLanding) .lpPartnerInfo small{
  color:#788394!important;
  font-size:10.5px!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUsp{margin-top:0!important;}
body.cinematicLanding:has(.experienceLanding) .lpUspHead{margin:0 0 14px!important;}
body.cinematicLanding:has(.experienceLanding) .lpUspHead>div{display:grid;gap:4px;}
body.cinematicLanding:has(.experienceLanding) .lpSectionKicker{
  color:var(--cinema-gold);
  font:800 9.5px/1.2 'Prompt',sans-serif;
  letter-spacing:.15em;
}
body.cinematicLanding:has(.experienceLanding) .lpUspHead b{
  display:block!important;
  color:#fff!important;
  font:800 clamp(21px,2.4vw,30px)/1.2 'Prompt','Sarabun',sans-serif!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspGrid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:0!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  min-width:0!important;
  min-height:238px!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  padding:20px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:7px!important;
  background-color:#0b1018!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 14px 32px rgba(0,0,0,.4)!important;
  transition:transform .22s ease,border-color .22s ease!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard:nth-child(1){
  background-image:linear-gradient(0deg,rgba(4,6,10,.98) 0%,rgba(4,6,10,.42) 68%,rgba(4,6,10,.06) 100%),url('../assets/cinematic/variations/10-ai-copilot.jpg')!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard:nth-child(2){
  background-image:linear-gradient(0deg,rgba(4,6,10,.98) 0%,rgba(4,6,10,.42) 68%,rgba(4,6,10,.06) 100%),url('../assets/cinematic/variations/20-daily-english.jpg')!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard:nth-child(3){
  background-image:linear-gradient(0deg,rgba(4,6,10,.98) 0%,rgba(4,6,10,.42) 68%,rgba(4,6,10,.06) 100%),url('../assets/cinematic/variations/03-interview-ready.jpg')!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard:nth-child(4){
  background-image:linear-gradient(0deg,rgba(4,6,10,.98) 0%,rgba(4,6,10,.42) 68%,rgba(4,6,10,.06) 100%),url('../assets/cinematic/variations/11-networking-english.jpg')!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard:hover{
  z-index:2!important;
  border-color:rgba(255,212,0,.72)!important;
  transform:translateY(-5px) scale(1.015)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.58)!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspIc,
body.cinematicLanding:has(.experienceLanding) .lpUspCard:nth-child(n) .lpUspIc{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  width:auto!important;
  height:auto!important;
  min-width:34px!important;
  margin:0!important;
  padding:5px 8px!important;
  border:0!important;
  border-radius:3px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  font:900 9px/1 'Prompt',sans-serif!important;
  letter-spacing:.08em!important;
  box-shadow:0 6px 16px rgba(0,0,0,.38)!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard b{
  position:relative!important;
  z-index:1!important;
  margin:0 0 5px!important;
  color:#fff!important;
  font:800 15px/1.35 'Prompt','Sarabun',sans-serif!important;
}
body.cinematicLanding:has(.experienceLanding) .lpUspCard p{
  position:relative!important;
  z-index:1!important;
  display:-webkit-box!important;
  margin:0!important;
  overflow:hidden!important;
  color:#c5cbd6!important;
  font:500 11.5px/1.5 'Sarabun',sans-serif!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}

@media(max-width:1000px){
  body.cinematicLanding:has(.experienceLanding) .landingLiveInner{
    grid-template-columns:minmax(290px,40%) minmax(0,1fr)!important;
  }
  body.cinematicLanding:has(.experienceLanding) .lpUspGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.cinematicLanding:has(.experienceLanding) .lpUspCard{min-height:260px!important;}
}

@media(max-width:760px){
  body.cinematicLanding:has(.experienceLanding) .landingLive{padding:20px 11px 10px!important;}
  body.cinematicLanding:has(.experienceLanding) .landingLiveInner{
    display:grid!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
  }
  body.cinematicLanding:has(.experienceLanding) .landingLiveMedia{
    grid-row:auto!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
    background-position:center 20%!important;
  }
  body.cinematicLanding:has(.experienceLanding) .landingLiveMedia::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#090d14 0%,transparent 38%);
  }
  body.cinematicLanding:has(.experienceLanding) .landingLiveCopy{
    padding:22px 18px 14px!important;
  }
  body.cinematicLanding:has(.experienceLanding) .landingLiveCopy h2{font-size:28px!important;}
  body.cinematicLanding:has(.experienceLanding) .landingLiveActions{
    grid-column:auto!important;
    flex-wrap:wrap!important;
    padding:0 18px 22px!important;
  }
  body.cinematicLanding:has(.experienceLanding) :is(.landingLiveCta,.landingLiveAsset){
    flex:1 1 190px!important;
    white-space:normal!important;
  }
  body.cinematicLanding:has(.experienceLanding) .landingPromos{padding:26px 0 72px!important;}
  body.cinematicLanding:has(.experienceLanding) .lpInner{width:calc(100% - 22px)!important;}
  body.cinematicLanding:has(.experienceLanding) .lpPartners{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body.cinematicLanding:has(.experienceLanding) .lpPartnerRow{gap:16px!important;}
  body.cinematicLanding:has(.experienceLanding) .lpUspGrid{grid-template-columns:1fr!important;}
  body.cinematicLanding:has(.experienceLanding) .lpUspCard{min-height:240px!important;}
}

@media(prefers-reduced-motion:reduce){
  body.cinematicLanding:has(.experienceLanding) .lpUspCard{transition:none!important;}
}

/* Cinematic learner auth: keep login, register, LIVE selection, OTP and success
   states inside the same black-and-gold visual system as the public catalog. */
body.cinematicLanding #loginModal{
  padding:18px!important;
  background:rgba(2,3,6,.88)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
body.cinematicLanding #loginModal .loginModalInner{
  width:min(430px,100%)!important;
  max-height:min(92dvh,780px)!important;
  padding:28px 24px 24px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:8px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,212,0,.08),transparent 34%),
    linear-gradient(180deg,#0d1118 0%,#080b10 100%)!important;
  color:#fff!important;
  box-shadow:0 34px 90px rgba(0,0,0,.72)!important;
  scrollbar-color:#444b57 #080b10!important;
  scrollbar-width:thin!important;
}
body.cinematicLanding #loginModal .loginModalInner::-webkit-scrollbar{width:8px!important;}
body.cinematicLanding #loginModal .loginModalInner::-webkit-scrollbar-track{background:#080b10!important;}
body.cinematicLanding #loginModal .loginModalInner::-webkit-scrollbar-thumb{
  border:2px solid #080b10!important;
  border-radius:99px!important;
  background:#444b57!important;
}
body.cinematicLanding #loginModal .authPhoneStatus{display:none!important;}
body.cinematicLanding #loginModal .loginModalClose{
  top:14px!important;
  right:14px!important;
  left:auto!important;
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:5px!important;
  background:#171b23!important;
  color:#e9edf4!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .loginModalClose:hover{
  border-color:rgba(255,212,0,.7)!important;
  background:#222833!important;
  color:var(--cinema-gold)!important;
}
body.cinematicLanding #loginModal .loginBrandMark{
  width:42px!important;
  height:42px!important;
  margin:0 0 16px!important;
  border:1px solid rgba(255,212,0,.65)!important;
  border-radius:5px!important;
  background:#11161e!important;
  color:var(--cinema-gold)!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .loginModalTitle,
body.cinematicLanding #loginModal .loginModalInner h3{
  margin:0 46px 6px 0!important;
  color:#fff!important;
  font:800 22px/1.2 'Prompt','Sarabun',sans-serif!important;
  letter-spacing:-.02em!important;
}
body.cinematicLanding #loginModal .loginModalSub{
  margin:0 0 18px!important;
  color:#8e98a8!important;
  font:500 11px/1.5 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .roleTabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;
  margin:0 0 10px!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;
  background:#11151c!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal :is(.roleTab,.authModeTab){
  min-height:40px!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:4px!important;
  background:transparent!important;
  color:#9da6b4!important;
  font:700 11px/1.25 'Prompt','Sarabun',sans-serif!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal :is(.roleTab,.authModeTab):hover{
  border-color:rgba(255,255,255,.16)!important;
  color:#fff!important;
}
body.cinematicLanding #loginModal .roleTab.active{
  border-color:var(--cinema-gold)!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
}
body.cinematicLanding #loginModal .authModeTabs{
  gap:7px!important;
  margin:0 0 12px!important;
}
body.cinematicLanding #loginModal .authModeTab{
  border-color:rgba(255,255,255,.14)!important;
  background:#11151c!important;
}
body.cinematicLanding #loginModal .authModeTab.active{
  border-color:#fff!important;
  background:#fff!important;
  color:#080b10!important;
}
body.cinematicLanding #loginModal .googleSignInSection{margin:10px 0 13px!important;}
body.cinematicLanding #loginModal .googleSignInButton{
  min-height:44px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .googleSignInHint{color:#8993a2!important;}
body.cinematicLanding #loginModal .authDivider{
  margin:12px 0!important;
  color:#697382!important;
  font:600 10px/1.2 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .authDivider::before,
body.cinematicLanding #loginModal .authDivider::after{background:rgba(255,255,255,.12)!important;}
body.cinematicLanding #loginModal .fieldLabel{
  margin:11px 0 6px!important;
  color:#9aa4b3!important;
  font:700 11px/1.4 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .fieldInput{
  min-height:46px!important;
  padding:12px 14px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:5px!important;
  background:#151a22!important;
  color:#fff!important;
  font:600 13px/1.3 'Prompt','Sarabun',sans-serif!important;
  caret-color:var(--cinema-gold)!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .fieldInput::placeholder{
  color:#707a89!important;
  opacity:1!important;
}
body.cinematicLanding #loginModal .fieldInput:focus{
  border-color:var(--cinema-gold)!important;
  outline:0!important;
  box-shadow:0 0 0 3px rgba(255,212,0,.12)!important;
}
body.cinematicLanding #loginModal .fieldInput:-webkit-autofill{
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 0 0 1000px #151a22 inset!important;
  transition:background-color 9999s ease-out!important;
}
body.cinematicLanding #loginModal .authTextButton,
body.cinematicLanding #loginModal .authBackButton{
  color:var(--cinema-gold)!important;
  text-decoration:none!important;
}
body.cinematicLanding #loginModal .toeicLiveSchedulePicker{
  margin:13px 0 14px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.cinematicLanding #loginModal .toeicLiveSchedulePicker p{
  margin:8px 0 0!important;
  color:#77818f!important;
  font:500 10px/1.45 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .scheduleChoiceGrid{gap:7px!important;}
body.cinematicLanding #loginModal .scheduleChoice{
  min-height:43px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:5px!important;
  background:#151a22!important;
  color:#d8dee8!important;
  font:700 11px/1.2 'Prompt','Sarabun',sans-serif!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .scheduleChoice:hover{border-color:rgba(255,212,0,.55)!important;}
body.cinematicLanding #loginModal .scheduleChoice.active{
  border-color:var(--cinema-gold)!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
}
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary,
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary,
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary{
  min-height:48px!important;
  margin-top:12px!important;
  border:0!important;
  border-radius:5px!important;
  background:#fff!important;
  background-image:none!important;
  color:#05070c!important;
  font:800 13px/1.2 'Prompt','Sarabun',sans-serif!important;
  box-shadow:none!important;
}
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary:hover,
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary:hover,
body.cinematicLanding:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary:hover{
  background:#dedede!important;
  color:#05070c!important;
  transform:none!important;
}
body.cinematicLanding #loginModal .actionBtn.small{
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:5px!important;
  background:#151a22!important;
  color:#d6dce6!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .demoNote{
  margin-top:12px!important;
  color:#7e8897!important;
  font:500 11px/1.5 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .loginModalPricing{
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px solid rgba(255,255,255,.1)!important;
  color:#697382!important;
  font:500 10px/1.5 'Sarabun',sans-serif!important;
}
body.cinematicLanding #loginModal .loginModalPricing .gold{color:var(--cinema-gold)!important;}
body.cinematicLanding #loginModal .loginError,
body.cinematicLanding #loginModal .loginModalInner.otpMode .loginError{
  border:1px solid rgba(229,9,20,.5)!important;
  border-radius:5px!important;
  background:rgba(229,9,20,.12)!important;
  color:#ffb5b9!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .loginModalInner.otpMode{
  padding-top:28px!important;
}
body.cinematicLanding #loginModal .loginModalInner.otpMode .loginModalClose{
  top:14px!important;
  right:14px!important;
  left:auto!important;
}
body.cinematicLanding #loginModal .otpHero{
  gap:12px!important;
  margin:4px 0 18px!important;
  color:#fff!important;
}
body.cinematicLanding #loginModal .otpHeroIcon,
body.cinematicLanding #loginModal .successCourseIcon{
  border-radius:5px!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal #otpStepTitle,
body.cinematicLanding #loginModal #otpEmailDisplay{color:#fff!important;}
body.cinematicLanding #loginModal #otpStepMessage{color:#98a2b1!important;}
body.cinematicLanding #loginModal #otpExpiryText{color:var(--cinema-gold)!important;}
body.cinematicLanding #loginModal .otpInput{background:#151a22!important;}
body.cinematicLanding #loginModal .signupSuccessStep h3{color:#fff!important;}
body.cinematicLanding #loginModal .signupSuccessStep p{color:#98a2b1!important;}
body.cinematicLanding #loginModal .successCheck{
  border-radius:50%!important;
  background:var(--cinema-gold)!important;
  color:#05070c!important;
  box-shadow:0 0 0 8px rgba(255,212,0,.08)!important;
}
body.cinematicLanding #loginModal .successCourseCard,
body.cinematicLanding #loginModal .successStats>div{
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:6px!important;
  background:#151a22!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.cinematicLanding #loginModal .successCourseCard b,
body.cinematicLanding #loginModal .successStats b{color:#fff!important;}
body.cinematicLanding #loginModal .successCourseCard small,
body.cinematicLanding #loginModal .successStats span{color:#8f99a8!important;}
body.cinematicLanding #loginModal .successSecondary{
  border:1px solid rgba(255,255,255,.18)!important;
  background:#151a22!important;
  color:#fff!important;
}

@media(max-width:480px){
  body.cinematicLanding #loginModal{
    align-items:flex-end!important;
    padding:8px!important;
  }
  body.cinematicLanding #loginModal .loginModalInner{
    width:100%!important;
    max-height:calc(100dvh - 16px)!important;
    padding:24px 20px 22px!important;
    border-radius:7px!important;
    box-shadow:0 20px 60px rgba(0,0,0,.78)!important;
  }
  body.cinematicLanding #loginModal .loginModalTitle{font-size:21px!important;}
  body.cinematicLanding #loginModal .loginModalClose{top:12px!important;right:12px!important;}
  body.cinematicLanding #loginModal .scheduleChoiceGrid{gap:6px!important;}
}