/* Toeicsinhvien identity assets only. Page colors stay defined by the original stylesheets. */

.tsv-brand-logo{display:block;width:auto;max-width:100%;object-fit:contain}
.tsv-brand-logo--horizontal{width:min(430px,72vw);height:auto}
.tsv-brand-logo--icon{width:46px;height:46px;border-radius:12px}
.tsv-brand-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.tsv-brand-lockup__copy{display:grid;gap:2px;min-width:0}
.tsv-brand-lockup__copy b{color:var(--text);font-weight:800;letter-spacing:.035em;white-space:nowrap}
.tsv-brand-lockup__copy small{color:var(--muted);font-size:8px;letter-spacing:.13em;white-space:nowrap}
.brand-logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo>span,.rift-logo>span,.sigil,.brand-sigil,.v-sidebar__mark,
.teacher-brand>span,.knowledge-brand>span,.console-brand>span,
.article-sidebar__brand>span,.product-brand>b{
  overflow:hidden!important;padding:0!important;border:0!important;background:transparent!important;
  color:transparent!important;box-shadow:none!important;transform:none!important;
}
.logo>span .tsv-brand-logo,.rift-logo>span .tsv-brand-logo,.sigil .tsv-brand-logo,
.brand-sigil .tsv-brand-logo,.v-sidebar__mark .tsv-brand-logo,
.teacher-brand>span .tsv-brand-logo,.knowledge-brand>span .tsv-brand-logo,
.console-brand>span .tsv-brand-logo,.article-sidebar__brand>span .tsv-brand-logo,
.product-brand>b .tsv-brand-logo{width:100%!important;height:100%!important;border-radius:inherit!important}
.mobile-brand .tsv-brand-logo{flex:0 0 auto}

/* Fullscreen lesson iframe must stay above the pinned mobile HUD. */
#lesson-modal.lesson-modal,
body.lesson-open #lesson-modal{
  z-index:10000!important;
  isolation:isolate;
}
#lesson-modal .lesson-console{
  position:relative;
  z-index:1;
}

/* Keep the dark journey-oracle CTA readable in the light theme. */
html[data-theme="light"] #journey .journey-oracle .micro,
html[data-theme="light"] #journey .journey-oracle .micro:hover,
html[data-theme="light"] #journey .journey-oracle .micro:focus-visible{
  background:#111!important;
  border-color:#111!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

@media(max-width:620px){
  .tsv-brand-logo--horizontal{width:min(310px,76vw)}
  .tsv-brand-logo--icon{width:40px;height:40px;border-radius:10px}
  .tsv-brand-lockup__copy small{display:none}
}

/* Compact mobile layout shared by student and teacher screens. */
@media(max-width:720px){
  html{font-size:14px}
  body{overflow-x:hidden}

  /* Mobile journey header: remove duplicate shortcuts and recommendation panel. */
  #journey .journey-hero .hero-actions,
  #journey .journey-oracle{
    display:none!important;
  }

  /* Level card is not needed in the compact achievement/profile header. */
  #profile .profile-level{display:none!important}

  /* Quiz runs inside scrollable iframe/modal contexts: use a true pinned toolbar. */
  .quiz-stage>.quiz-toolbar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    z-index:15!important;
    width:100%!important;
  }
  .quiz-stage{padding-top:66px!important}
  .quiz-sidebar .summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .quiz-sidebar .summary-grid>span{
    min-width:0!important;
    padding:9px 5px!important;
  }
  .quiz-sidebar .summary-grid b{font-size:16px!important}
  .quiz-sidebar .summary-grid small{font-size:8px!important}

  /* Vocabulary phase cards are three siblings, not a number/content grid. */
  .v-iframe-layout .v-phase-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  .v-iframe-layout .v-phase-row>*{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
  }
  .v-iframe-layout .v-phase-card{
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .v-iframe-layout .v-mode-picker{
    right:auto!important;
    left:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  :where(.shell,.class-shell,.teacher-screen,.course-shell,.product-shell,.review-shell,
    .grading-shell,.tv-shell,.v-catalog-shell,.lesson-deck,.knowledge-shell,
    .knowledge-blog-shell,.builder-shell,.workspace,.layout){
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  :where(.hero-copy h1,.screen-head h1,.product-hero h1,.course-intro h1,
    .review-header h1,.grading-header h1,.teacher-screen h1,.v-catalog-head h1,
    .lesson-heading h1,.knowledge-hero h1){
    font-size:clamp(28px,9vw,40px)!important;
    line-height:1.04!important;
  }

  :where(.mission,.mode-card,.node,.raid-card,.boss-card,.metric-card,.quiz-admin-card,
    .knowledge-hub-card,.knowledge-blog-card,.knowledge-blog-dashboard-card,.exam-vault__card,
    .exam-picker-card,.objective-card,.class-homework-card,.assignment-card,.podium-card,
    .learning-access-card,.access-entity-card,.product-card,.v-phase-card,.v-activity-card,
    .v-set-card,.v-context-card,.v-work-card,.mistake-card,.queue-card,.grading-card,
    .tv-set-card,.tv-evidence-card,.question-card,.start-card,.review-card,.result-card,
    .stimulus-card,.group-question-card,.lesson-category-card,.lesson-vocabulary-card,
    .article-related-card,.session-card,.roster-card,.form-card,.dialog-card,.modal-card){
    min-height:0!important;
    padding:14px!important;
  }

  :where(.mission-grid,.mode-grid,.metric-grid,.quick-actions,.knowledge-hub-grid,
    .knowledge-blog-dashboard__grid,.knowledge-blog-card-grid,.exam-vault__grid,
    .exam-picker__grid,.objective-grid,.class-homework-grid,.podium-grid,.learning-access-grid,
    .product-grid,.v-activity-grid,.v-set-grid,.v-set-grid--curriculum,.tv-set-grid,
    .tv-evidence-grid,.lesson-library-grid,.lesson-vocabulary-grid,.option-grid,
    .rubric-grid,.bilingual-grid,.popup-grid,.demo-choice-grid){
    gap:8px!important;
  }

  :where(.metric-grid,.review-stats,.attempt-metrics,.tracking-metrics,.student-metrics,
    .detail-metrics,.quiz-facts,.v-console-stats,.v-test-result__grid,.popup-stat-grid,
    .popup-reward-grid,.demo-stat-grid,.summary-grid,.rules-grid,.knowledge-hero__stats,
    .exam-portal-stats,.roster-stats){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  :where(.mode-grid,.knowledge-hub-grid,.knowledge-blog-dashboard__grid,
    .knowledge-blog-card-grid,.exam-vault__grid,.exam-picker__grid,.product-grid,
    .v-set-grid,.v-set-grid--curriculum,.tv-set-grid,.tv-evidence-grid,
    .lesson-library-grid,.learning-access-grid){
    grid-template-columns:1fr!important;
  }

  .mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mission{
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    align-items:center!important;
    gap:4px 7px!important;
    padding:12px!important;
  }
  .mission>svg{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    width:24px!important;
    height:24px!important;
  }
  .mission>b{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.3!important;
  }
  .mission>p{
    grid-column:2!important;
    grid-row:2!important;
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    margin:0 0 2px!important;
    font-size:10px!important;
    line-height:1.35!important;
  }
  .mission>.mission-progress{
    grid-column:1 / -1!important;
    grid-row:3!important;
    width:100%!important;
    margin:5px 0 1px!important;
  }
  .mission>strong{
    grid-column:1 / -1!important;
    grid-row:4!important;
    min-width:0!important;
    font-size:10px!important;
    line-height:1.3!important;
  }
  .mission>.mission-action{
    position:static!important;
    grid-column:1 / -1!important;
    grid-row:5!important;
    width:100%!important;
    min-width:0!important;
    min-height:34px!important;
    margin:0!important;
    padding:6px 8px!important;
    font-size:12px!important;
  }

  /* Compact journey stages: keep the stage, progress and action on one row. */
  .journey-map{gap:10px!important;margin-top:28px!important}
  .journey-node{
    grid-template-columns:40px minmax(0,1fr) 38px!important;
    gap:8px!important;
    min-height:0!important;
    padding:11px 10px!important;
  }
  .journey-node>.node-icon{
    grid-column:1!important;
    grid-row:1!important;
    width:38px!important;
    height:38px!important;
    font-size:13px!important;
  }
  .journey-node__copy{grid-column:2!important;grid-row:1!important}
  .journey-node__eyebrow{gap:5px!important}
  .journey-node__eyebrow small{font-size:7px!important}
  .journey-node__eyebrow span{padding:2px 5px!important;font-size:8px!important}
  .journey-node h3{margin:4px 0 3px!important;font-size:15px!important;line-height:1.2!important}
  .journey-node p{
    margin:0!important;
    font-size:11px!important;
    line-height:1.35!important;
    -webkit-line-clamp:2!important;
  }
  .journey-node__footer{
    grid-template-columns:minmax(50px,1fr) auto auto!important;
    gap:6px!important;
    margin-top:7px!important;
  }
  .journey-node__footer>b{font-size:10px!important}
  .journey-node__footer>span{
    grid-column:auto!important;
    font-size:7px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .journey-node>.journey-node__action{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    width:38px!important;
    height:38px!important;
  }

  /* Compact study-mode cards: number, icon and title share the first row. */
  .mode-card,.mode-card:last-child{
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px 9px!important;
    padding:13px!important;
  }
  .mode-card .mode-number{
    grid-column:1!important;
    grid-row:1!important;
    font-size:30px!important;
    line-height:1!important;
  }
  .mode-card>svg{
    grid-column:2!important;
    grid-row:1!important;
    width:28px!important;
    height:28px!important;
  }
  .mode-card>h2{
    grid-column:3!important;
    grid-row:1!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.2!important;
  }
  .mode-card>p{
    grid-column:1 / -1!important;
    grid-row:2!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.4!important;
  }
  .mode-card>ul{
    grid-column:1 / -1!important;
    grid-row:3!important;
    margin:2px 0 3px!important;
    padding-left:18px!important;
  }
  .mode-card>li,.mode-card li{font-size:12px!important;line-height:1.4!important}
  .mode-card>button{
    grid-column:1 / -1!important;
    grid-row:4!important;
    width:100%!important;
    min-height:38px!important;
    margin:0!important;
    padding:8px 12px!important;
  }

  :where(.section-heading,.screen-head,.rift-section-head,.roadmap-head,.ranking-head,
    .panel-head,.v-section-head,.lesson-head,.workspace-head,.card-head,
    .knowledge-blog-section__head,.exam-vault__section-head,.result-review-section__head){
    display:flex!important;
    flex-flow:row wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px 10px!important;
    margin-bottom:12px!important;
  }
  :where(.section-heading,.screen-head,.rift-section-head,.panel-head,.v-section-head,
    .knowledge-blog-section__head,.exam-vault__section-head)>p,
  :where(.section-heading,.screen-head,.rift-section-head,.panel-head,.v-section-head,
    .knowledge-blog-section__head,.exam-vault__section-head)>div>p{
    flex-basis:100%;
  }
  :where(.section-heading,.screen-head,.rift-section-head,.panel-head,.v-section-head) h2{
    margin-block:3px!important;
  }

  :where(.class-hud,.teacher-topbar,.product-topbar,.course-topbar,.v-simple-hud,
    .knowledge-topbar,.article-console-bar,.shadow-hud){
    min-height:58px!important;
    height:auto!important;
    padding:8px 10px!important;
    gap:8px!important;
    align-items:center!important;
  }
  :where(.rift-logo small,.teacher-brand small,.topbar-copy small,
    .knowledge-brand small,.course-brand+small,.console-index){display:none!important}
  :where(.teacher-topbar h1,.topbar-copy h1){font-size:18px!important;margin:0!important}

  /* The dashboard HUD has two rows on mobile: account controls and five tabs. */
  .hud{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    z-index:100!important;
    width:100%!important;
    grid-template-rows:60px 52px!important;
    min-height:112px!important;
    height:112px!important;
    max-height:112px!important;
    padding:0 8px!important;
    gap:0 8px!important;
    align-items:center!important;
  }
  .hud .logo{
    display:flex!important;
    min-width:0!important;
    max-width:calc(100vw - 105px)!important;
    gap:7px!important;
  }
  .hud .logo>span{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
  }
  .hud .logo-copy{
    display:grid!important;
    min-width:0!important;
    gap:1px!important;
    text-align:left!important;
  }
  .hud .logo-copy b{
    display:block!important;
    overflow:hidden!important;
    font-size:11px!important;
    line-height:1.15!important;
    text-overflow:ellipsis!important;
  }
  .hud .logo-copy small{
    display:block!important;
    overflow:hidden!important;
    max-width:190px!important;
    font-size:6px!important;
    line-height:1.2!important;
    letter-spacing:.06em!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body .shell{padding-top:136px!important}
  .hud-nav{
    align-self:stretch!important;
    width:100%!important;
    height:52px!important;
  }
  .hud-nav button{
    height:52px!important;
    padding:5px 2px 6px!important;
    gap:3px!important;
    line-height:1.1!important;
  }
  .hud-nav button svg{
    width:19px!important;
    height:19px!important;
    flex-basis:19px!important;
  }
  .hud-nav button span{font-size:8px!important;line-height:1.1!important}
  .hud-nav button::after{bottom:0!important}

  :where(.metric-card,.review-stats article,.attempt-metrics article,.tracking-metrics article,
    .v-console-stats>div,.summary-grid span,.course-stats){
    min-height:0!important;
    padding:11px!important;
  }
  :where(.metric-card b,.review-stats b,.attempt-metrics b,.tracking-metrics b,
    .v-console-stats b){font-size:22px!important}
  :where(.metric-card small,.review-stats small,.attempt-metrics small,
    .tracking-metrics small){font-size:9px!important;letter-spacing:.05em!important}

  :where(.mistake-card,.queue-card,.assignment-card,.class-homework-card,
    .notification-item,.result-row,.study-session-list>div){
    gap:8px!important;
  }
  :where(.mistake-actions,.tv-card-actions,.grading-card>footer,.card-actions,
    .student-hero__actions,.stage-action){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  :where(.mistake-actions,.tv-card-actions,.grading-card>footer,.card-actions,
    .student-hero__actions,.stage-action)>*{
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
  }

  :where(.teacher-screen,.lesson-deck,.stage,.review-panel,.grading-card,
    .question-list,.segment-list,.bilingual-grid,.player-copy,.course-curriculum>header,
    .drawer-content,.journey-stage-detail__head,.exam-picker__head,.exam-picker__panel){
    padding:14px!important;
  }

  .empty-state{padding:28px 14px!important}
  .score-orbit{flex-basis:68px!important;width:68px!important}
  .profile-avatar{width:96px!important;height:96px!important}
  .profile-avatar>span{width:78px!important;height:78px!important}
}

@media(max-width:420px){
  :where(.metric-grid,.review-stats,.attempt-metrics,.tracking-metrics,.student-metrics,
    .detail-metrics,.quiz-facts,.v-console-stats,.v-test-result__grid,.popup-stat-grid,
    .popup-reward-grid,.demo-stat-grid,.summary-grid,.rules-grid,.knowledge-hero__stats,
    .exam-portal-stats,.roster-stats){gap:6px!important}
  :where(.metric-card,.review-stats article,.attempt-metrics article,
    .tracking-metrics article,.v-console-stats>div){padding:9px!important}
  .tsv-brand-logo--icon{width:36px;height:36px}
}

/* =========================================================
   GLOBAL LIGHT THEME — NEON PAPER AURORA
   Shared ambient background for every page loading brand-theme.css.
   ========================================================= */
html[data-theme="light"]{
  background-color:#f3f0f8;
  background-image:
    radial-gradient(circle at center,rgba(255,61,129,.072),transparent 64%),
    radial-gradient(circle at center,rgba(77,228,255,.075),transparent 65%),
    radial-gradient(circle at center,rgba(216,255,62,.042),transparent 68%),
    linear-gradient(rgba(88,69,113,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,69,113,.032) 1px,transparent 1px),
    linear-gradient(145deg,#f8f4fb 0%,#f1eef8 48%,#f4f8fb 100%);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
  background-size:70vw 70vw,76vw 76vw,54vw 54vw,44px 44px,44px 44px,100% 100%;
  background-position:-20vw -24vw,72vw -18vw,30vw 72vh,0 0,0 0,0 0;
  background-attachment:fixed;
  animation:tsvLightAurora 32s ease-in-out infinite alternate;
}
html[data-theme="light"] body{
  background-color:transparent!important;
}
@keyframes tsvLightAurora{
  0%{background-position:-20vw -24vw,72vw -18vw,30vw 72vh,0 0,0 0,0 0}
  50%{background-position:-10vw -12vw,62vw -6vw,42vw 62vh,5px 3px,5px 3px,0 0}
  100%{background-position:-2vw -20vw,54vw 3vw,20vw 68vh,10px 6px,10px 6px,0 0}
}

/* Login owns its theme through a checkbox instead of html[data-theme]. */
.theme-switch-input:checked~.login-shell{
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,61,129,.07),transparent 34%),
    radial-gradient(circle at 84% 14%,rgba(77,228,255,.075),transparent 36%),
    linear-gradient(rgba(88,69,113,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,69,113,.03) 1px,transparent 1px),
    linear-gradient(145deg,#f8f4fb,#f1eef8 55%,#f4f8fb)!important;
  background-size:auto,auto,44px 44px,44px 44px,auto!important;
  animation:tsvLoginAurora 32s ease-in-out infinite alternate;
}
@keyframes tsvLoginAurora{
  from{background-position:0 0,100% 0,0 0,0 0,0 0}
  to{background-position:8% 8%,88% 10%,8px 5px,8px 5px,0 0}
}
@media(max-width:720px){
  html[data-theme="light"]{
    background-size:115vw 115vw,125vw 125vw,90vw 90vw,52px 52px,52px 52px,100% 100%;
    animation-duration:42s;
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="light"],.theme-switch-input:checked~.login-shell{animation:none!important}
}

/* =========================================================
   GLOBAL SCROLLBAR — DASHBOARD NEON STYLE
   Applies to the document and every internal scroll container.
   ========================================================= */
*{
  scrollbar-width:thin;
  scrollbar-color:var(--hot,#ff3d81) rgba(40,48,68,.42);
}
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:rgba(18,22,32,.82);
  border-left:1px solid var(--line,#30394b);
}
*::-webkit-scrollbar-thumb{
  min-width:38px;
  min-height:38px;
  border:2px solid rgba(18,22,32,.82);
  border-radius:0;
  background:linear-gradient(180deg,var(--hot,#ff3d81),var(--violet,#7c63ff));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--ice,#4de4ff),var(--hot,#ff3d81));
}
*::-webkit-scrollbar-thumb:active{
  background:var(--acid,#d8ff3e);
}
*::-webkit-scrollbar-corner{
  background:rgba(18,22,32,.92);
}
html[data-theme="light"],html[data-theme="light"] *{
  scrollbar-color:#d92f6d rgba(211,204,221,.7);
}
html[data-theme="light"]::-webkit-scrollbar-track,html[data-theme="light"] *::-webkit-scrollbar-track{
  background:rgba(225,219,232,.78);
  border-color:rgba(117,105,132,.24);
}
html[data-theme="light"]::-webkit-scrollbar-thumb,html[data-theme="light"] *::-webkit-scrollbar-thumb{
  border-color:rgba(225,219,232,.9);
  background:linear-gradient(180deg,#e33473,#7259dc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#169fbd,#df2f70);
}
html[data-theme="light"]::-webkit-scrollbar-thumb:active,html[data-theme="light"] *::-webkit-scrollbar-thumb:active{
  background:#91ad00;
}
html[data-theme="light"]::-webkit-scrollbar-corner,html[data-theme="light"] *::-webkit-scrollbar-corner{
  background:#e4deea;
}
@media(max-width:720px){
  *::-webkit-scrollbar{width:7px;height:7px}
  *::-webkit-scrollbar-thumb{border-width:1px}
}